ESAT Online - HTML 5 Esencial

INTRODUCCIÓN

¿Qué es HTML? En la primera lección aprenderemos qué significa HTML a nivel conceptual y cuáles son sus principales características.

Texto plano VS jerarquía y estructura. ¿Qué ocurre cuando aplicamos la estructura HTML a un documento que contiene texto plano? Es lo que veremos en esta lección.

Comentarios HTML. Los comentarios forman parte de cualquier lenguaje de marcado y programación. HTML no iba a ser diferente. En esta lección aprenderás lo que son y cómo usarlos.

ETIQUETAS ORGANIZATIVAS

¿Qué son? Ya sabes que HTML es lenguaje de marcado a través de etiquetas. En esta lección veremos cuáles son las principales etiquetas de organización de contenido.

DOCTYPE. La etiqueta DOCTYPE indica al navegador el tipo de contenido que se va encontrar en el documento y cómo interpretarlo.

HTML. HTML es la etiqueta padre de cualquier documento (HTML). El resto de etiquetas organizativas viven dentro de ella.

HEAD. Dentro de HEAD tienen cabida todos los metadatos que definen el documento HTML así como recursos externos e internos que sean necesarios.

BODY. En el interior de BODY tienen cabida el resto de etiquetas: las de contenido. Dicho de otra forma, todo lo que vive dentro de BODY se visualiza en el navegador.

Añadir recursos a HEAD. Para el funcionamiento de cualquier proyecto Web son necesarios una serie de recursos (interno y externos). Estos, por lo general, se definen dentro de HEAD.

ETIQUETAS DEL TEXTO Y CONTENEDORAS

¿Qué son? Vamos a revisar cuáles son las principales etiquetas que permiten definir diferentes tipos texto para cada situación, además de cómo agrupar contenido relacionado.

Headlines. Las etiquetas H1-H6 sirven para delimitar qué contenido hace de titular o subtitular del documento HTML.

Párrafos. La etiqueta P sirve para crear un párrafo en una composición HTML.

Span. En ocasiones es necesario sub-seleccionar partes de un elemento mayor (ej.: una frase dentro de un párrafo). La etiqueta SPAN te permite hacerlo de forma sencilla.

Horizontal rule. Con la etiqueta HR puedes insertar una línea horizontal que haga de separador en tu documento HTML.

Citas. Con la etiqueta BLOCKQUOTE/Q puedes incorporar citas o contenido de otras fuentes a tu documento HTML.

Texto pre-formateado. La etiqueta PRE mantiene los espacios y saltos de línea del contenido de texto a incorporar a tu documento HTML.

Listas. No importa la temática de tu documento HTML, casi con toda seguridad te hará falta mostrar contenido en forma de lista gracias a la etiqueta UL/OL.

Listas de descripción. Con el conjunto de etiquetas DL/DT/DD puedes componer de forma sencilla listados de términos y sus descripciones y definiciones.

Content divisor (div). La etiqueta DIV se usa como agrupador o divisor genérico de contenido en cualquier documento HTML.

Tablas. Si necesitas mostrar contenido tabular (en forma de tabla) en tu documento HTML, la etiqueta TABLE es la solución.

HIPERVÍNCULOS Y ENLACES

Estructura y tipos de hipervínculos. ¿Qué es un hiperenlace y cómo está formado?. Eso es lo que aprenderás en esta lección.

Enlaces relativos. Los enlaces a recursos locales (del mismo proyecto) se llaman relativos. Veamos cómo funcionan.

Enlaces absolutos. Si enlazas a recursos externos estás, en esencial, creando un enlace absoluto. Así es como funcionan.

FORMULARIOS

Form. HTML dispone de formularios para recibir y procesar el feedback generado por los usuarios/as de tu página Web.

Input y label. La etiqueta INPUT hace de contenedor de texto (entre otras funciones) sencillo. Permite que cualquier usuario/a introduzca información en un formulario.

Textarea. Cuando necesites la posibilidad de introducir párrafos de texto en un formulario debes utilizar la etiqueta TEXTAREA.

Select. La etiqueta SELECT sirve para presentar una serie de opciones y permitir que el usuario/a elija entre ellas.

Checkbox. Con CHECKBOX mostramos un listado de opciones que el usuario puede marcar y desmarca.

Radio. Los elementos RADIO funcionan de forma similar a CHECKBOX, salvo que permiten elegir una entre varias opciones.

Submit. SUBMIT es un tipo de especial de INPUT. Su función es enviar un formulario para su procesamiento.

HTML5

Peso semántico. La versión 5 de HTML añade una nueva cualidad al lenguaje: el significado. Veamos qué significa esta novedad tan importante.

Section. Con SECTION dispones de un agrupador (como DIV) con peso semántico, el cual delimita contenido relacionado.

Article. El elemento ARTICLE sirve para delimitar contenido autónomo (por ejemplo, una noticia) en un documento HTML.

Header. El elemento HEADER está definido por su contenido y no por su posición, es decir: puede existir más de un HEADER por documento.

Footer. El elemento FOOTER está definido por su contenido y no por su posición, es decir: puede existir más de un FOOTER por documento.

Aside. Con ASIDE puedes agrupar contenido que está relacionado de alguna forma con otro contenido. Veamos cómo funciona.

Nav. El elemento NAV tiene la función de envolver y agrupar cualquier estructura que tenga la navegación como función en tu documento HTML.

Main. El elemento MAIN es el contenedor principal y con mayor peso semántico. Veamos cómo utilizarlo.

Nuevos tipos de input. HTML5 incorpora nuevos tipos de INPUT, útiles en muchos escenarios.

OBJETOS

¿Qué son? Cuando quieres incorporar contenido (más allá del texto) a tu documento HTML, necesitas hacer uso de los OBJETOS.

Imágenes. Con el elemento IMG puedes añadir imágenes (locales o externas) a tu documento HTML.

Vídeo. Con el elemento VIDEO puedes añadir vídeos (locales o externos) a tu documento HTML.

Audio. Con el elemento AUDIO puedes añadir audios (locales o externos) a tu documento HTML.

Iframe. Con el elemento IFRAME puedes mostrar el contenido de otro documento HTML (local o externo) en tu documento HTML.

SIGUIENTES PASOS

Despedida. Ha llegado el final del curso. Ahora tienes los conocimientos esenciales de HTML para seguir avanzando en tu carrera. Veamos cuáles son los siguientes pasos.