Guía y primer taller de página web

HTML

HTML son las siglas en inglés de HyperText Markup Language, que significa Lenguaje de Marcado de HiperTexto. Se llama así al lenguaje de marcado empleado en la elaboración de páginas web, y que sirve como estándar de referencia para la codificación y estructuración de las mismas, a través de un código del mismo nombre (html).

¿Qué es una etiqueta html?

Se llama etiquetas html a las instrucciones mismas con que se compone el código, es decir, las entradas rodeadas de comillas angulares y que tienen un valor específico en el conjunto, que será luego leído por el programa navegador y traducido en una página Web. Estas etiquetas deben abrir <> y luego cerrar </> cuando ya no se las necesite, en el orden correcto y la secuencia correcta para que no surjan errores.

Algunos ejemplos de etiquetas son:

<html>. Comando que da inicio a la cadena de instrucciones que es el código html y que cierra con </html> al final del documento de programación.
<head>. Que define la cabecera del documento html, que se vincula con el título de la ventana del navegador y contiene subelementos como <title> (título), <link> (para vincular a hojas de estilo o modelos estéticos), <meta> (para referir información sobre la autoría del código), etc.
<img>. Que hace referencia a imágenes y suele estar acompañado de la ruta en donde ésta se encuentra.
<a>. Para introducir hipervínculos tanto internos como externos, mediante el atributo href y la dirección URL adonde el hipervínculo conducirá.
<div>. Para introducir divisiones dentro de la página web.

Sintaxis

Para comenzar, tenemos la estructura base de nuestro documento.

DOCTYPE define la versión de HTML, en este caso, HTML5.
<html> determina el comienzo y final del documento html.
<head> contiene información (metadatos) sobre la página que no se le muestra al usuario, pero que es utilizada por el navegador para desplegar el sitio web.
<title> especifica el título de la página, el que podemos ver en la pestaña de nuestro navegador.
<body> define el cuerpo del documento, es aquí donde pondremos todo el contenido visible para el usuario.

Nuestra primer página web se vería así:

Encabezados

Son definidos utilizando las etiquetas <h1>, <h2>, hasta <h6>.

Párrafos

Se definen con la etiqueta <p>

Imágenes

Se definen con la etiqueta <img>. Para este elemento debemos definir además atributos.

src: debemos indicar donde se encuentra la imagen que deseamos mostrar.
alt: define un texto alternativo que se mostrará si la imagén no puede ser mostrada.
width y height: determina las dimensiones (ancho y alto) de la imagen.

Es importante mencionar que el único atributo obligatorio para poder desplegar una imagen es src.

Links

Se definen con la etiqueta <a>.

El atributo href especifica la dirección del link. Y el texto que colocamos después de la etiqueta inicial, es el texto que se despliega en la página web.

Divisiones

Se definen con la etiqueta div y son de los elementos más útiles pues te permiten dividir el contenido de tu página web en secciones, mejor conocidas como contenedores.