Creacion de paginas web en HTML

¿Qué es el lenguaje html?

HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

Como funciona este lenguaje
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como  , no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML.

El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título «Marcador HTML» al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Puede aplicarse un formato específico al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, negrita indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de negrita e itálica, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: énfasis fuerte y énfasis. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque el nombre resalte en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada desde la versión 4.01, en favor de las hojas de estilo en cascada.

El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace que muestre el texto de la dirección y vaya hacia nuestra Wikipedia podría ser de la forma <a href=”http://www.wikipedia.org”>http://www.wikipedia.org</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.

Cómo hacer una pagina web con el lenguaje html

ncabezado de la página web

Para comenzar a crear una nueva página web HTML, debes abrir un editor de texto, como el Bloc de notas. Puedes usar sin problema el que viene por defecto, en Windows. Una vez que hayas abierto el nuevo archivo, puedes comenzar escribiendo este código.

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> DEBES ESCRIBIR EL TITULO DE TU WEB </TITLE>
<META name="description" content=">donde escribirás una breve descripción de la página">
<META name="keywords" content="Aquí escribe las palabras clave separadas por una coma"> </HEAD> <BODY>
</BODY> </HTML>

Explicación:

<! DOCTYPE HTML> define que el documento debe ser HTML.
<HTML> es el elemento principal de la página HTML.
<HEAD> es la parte donde se inserta información de la web.
<TITLE> es el título de la página que se muestra en la parte superior de la página navegador.

En el campo «contenido» de la metaetiqueta DESCRIPCIÓN debes ingresar una descripción que sea relevante para la página de tu sitio, mientras que en el otro campo de la etiqueta KEYWORDS, ingresa las palabras clave en las que deseas que se encuentre en particular la web que estás creando.

<BODY> es la parte del documento que contiene la parte «visible» del sitio:
Ahora guarda el archivo de bloque (usa GUARDAR CON NOMBRE) y guárdalo como index.html . Una vez guardado, lo abres, se abrirá la página web HTML vacía, pero ya podrás ver el título de la página en la parte superior.

Insertar un texto

Una vez has creado el comienzo de tu página web puedes comenzar a introducir el contenido. Para ello, el código html del texto debe colocarse entre las etiquetas <BODY> </ BODY> .

Ante se usaba la etiqueta FONT, pero como ya no es compatible, para formatear un texto de una manera particular, es necesario recurrir a CSS.

La etiqueta que se usa para ajustar en su lugar siempre es válida y es . Entonces, si escribo en el bloc de notas:

Hola esta es una prueba de mi web.

Lo que se mostrará en la página será:

>Hola,
esta es una prueba de mi web

La inserta un salto de línea.
Esta es una etiqueta que no debe abrirse y luego cerrarse.

Ahora veamos cómo usar etiquetas útiles para el texto: entre las más usadas puedes utilizar negrita, cursiva, subrayado, borrado: , , <del>

te permite escribir con subrayado
te permite escribir en cursiva
te permite escribir en negrita
<del>~~te permite cancelar un texto~~<del>

Estas etiquetas deben estar abiertas y cerradas . Podemos usar una a la vez o más etiquetas juntas (no se pueden usar juntas por razones obvias, la etiqueta para subrayar y eliminar).

Color del texto

Veamos cómo colorear el texto para hacer páginas web HTML atractivas. Debes adjuntar al texto que deseas colorear la etiqueta SPAN. Por sí solo, la etiqueta SPAN no produce ningún cambio visible en el texto, pero podemos imponer un estilo con CSS.
Aquí está el código html, el color se puede expresar con el nombre del color en inglés o con el número hexadecimal precedido por el número de la libra.

Ejemplo:

aqui escribe el texto

aqui escribe el texto

Cambiar tipo de letra

Para crear un sitio en html que sea fácil de consultar, es útil cambiar la fuente y el tamaño del texto para resaltar un párrafo o no.

Para ello vamos a usar la etiqueta SPAN que también nos permite modificar partes del texto directamente en el documento HTML.

De este modo, usas esta etiqueta a la que tendrás que sumarle la fuente o nombre del estilo de letra que deseas para tu texto tal que así:

aquí escribe tu texto

aquí escribe tu texto

Cambiar tamaño de letra

A veces será necesario usar un texto un poco más grande o ligeramente más pequeño que el predeterminado. Aquí también, el tamaño de fuente se indica con el estilo CSS y ya no con el atributo de fuente «tamaño».

aquí va el texto

Para cambiar el tamaño de la fuente, simplemente cambia el número expresado en píxeles, en el ejemplo, 12.

Cómo insertar una imagen

Las imágenes en los sitios web HTML y permitidas en la web son básicamente de tres tipos: GIF , JPG y PNG . Por lo tanto, no uses otros tipos de imágenes (como archivos psd de Photoshop).

El código para insertar una imagen es:

<img src=»immagine.gif» alt=»descripción de la imagen» height=»42″ width=»42″ >

Reemplaza el nombre «immagine.gif» con el nombre de tu imagen: presta atención a la extensión de la imagen: jpg, gif …

Prueba tu página web

Una vez has comenzado a saber cómo utilizar el lenguaje HTML de manera básica para poder insertar lo escrito en tu web y que ésta vaya tomando forma, podrás ir diseñando otros aspectos de la misma como añadir enlaces (con el tag href) o una lista (con el tag ul y li). Pero todo ello lo irás aprendiendo a medida que vayas practicando y haciendo tu página web.

Referencias
https://es.wikipedia.org/wiki/HTML
https://okdiario.com/howto/como-hacer-web-html-2187739

Buscar este blog

El profe en casa