PUBLICIDAD

, ,

HTML 5, Curso Intensivo – Lección 01, Estructura y Sintaxis

El propósito de HTML es proveer significado y estructura al contenido. Este no está pensado para proveer instrucciones acerca de cómo debería verse el contenido (su presentación). Aprender HTML es básicamente aprender la sintaxis del lenguaje, los elementos que soporta y la estructura básica de los documentos.

Declaración DOCTYPE

La declaración DOCTYPE (tipo de documento) es una clase de comentario especial o instrucción especifica. El propósito es darle instrucciones al navegador de cómo debe interpretar y entender el documento.

<!DOCTYPE html>
  1. Identifica el tipo y versión de HTML sobre la cual ha sido escrito y codificado el documento.
  2. Debe ser la primera declaración en el documento HTML, incluso antes de cualquier espacio en blanco.
  3. Es estándar y aunque algunos dicen que puede ser opcional, esta es requerida.

Ver más información acerca de los tipos de documento DTD:
https://developer.mozilla.org/es/docs/Glossary/Doctype

Elementos, Etiquetas y Atributos

Una vez han definido el tipo de documento con el que van a trabajar en la declaración DOCTYPE, se empieza a estructurar los contenidos usando la sintaxis de HTML que está compuesta por tres partes principales, etiquetas (tags), elementos (elements) y atributos. Con esta sintaxis construiremos el contenedor del documento (HTML), la cabecera (HEAD) y el cuerpo (BODY).

Etiquetas (Tags)

Las etiquetas HTML son palabras claves encerradas en paréntesis angulares que le dicen al navegador como interpretar el contenido, cada etiqueta describe un tipo de contenido diferente. Las etiquetas son semánticas, expresan que tipo de contenido tenían en su interior

<HTML>

</HTML>

Elementos (Elements)

Un elemento es el término que se usa para describir todo desde la etiqueta de apertura, todos los contenidos, y hasta la etiqueta de cierre. Los elementos componen los objetos de la página. Además del elemento HTML que ya creamos escribiendo las etiquetas, dentro de este elemento hacen falta otros 2 elementos para conformar la estructura base de un documento HTML, el elemento HEAD y el elemento BODY.

<HTML>
    <HEAD>
    </HEAD>

    <BODY>
    </BODY>
</HTML>

Ver los elementos que hacen parte de HTML:

https://developer.mozilla.org/es/docs/Web/HTML/Elemento

Atributos (Attributes)

Los atributos modifican el elemento, dando información adicional al navegador en la forma en que debe interpretar el contenido y cambiar el comportamiento del elemento. Hay muchos atributos y varían dependiendo del tipo de contenido, el más común es ‘lang’ que nos permite informar al navegador en que idioma está escrito el contenido.

<HTML lang='es'>

Los atributos se escriben en las etiquetas de apertura, se escribe el atributo y se coloca el valor entre comillas después del signo ‘=’. El valor en este caso son dos letras reservadas por las abreviaciones de lenguaje ISO639

Ver todas las abreviaciones de lenguajes existentes:

https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

Elemento Cabecera y Elemento Cuerpo

El Elemento Cabecera ‘HEAD’

Cada documento HTML tiene un elemento de cabecera ‘HEAD’, este contiene información acerca del documento. Los elementos mínimos que debe contener:

  1. Un elemento titulo
  2. Elementos Meta, o contenidos que describen características del contenido del documento, el más importante es el CHARSET

El Elemento Titulo

El titulo se muestra en la parte superior del navegador, en la barra de título de las pestañas, también es el texto que se mantiene si adicionan la página a favoritos.

<title>Nombre del documento</title>

El texto de título debe ser menor a 55 caracteres, asegúrense que sea expresivo y describe adecuadamente el documento. Acostúmbrense a que esto sea una de las primeras cosas que hacen al crear un documento HTML. Este elemento es requerido, puede estar vacío, y solo puede existir un elemento título en el documento.

Ver información adicional al elemento título:

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/title

El Juego de Caracteres para Visualizar el Documento

El atributo ‘charset’ colocado en una etiqueta META (información acerca de los datos) especifica la codificación de caracteres del documento HTML.

<meta charset=”utf-8”>

Los valores comunes para el atributo son ‘UTF-8’, e ‘ISO-8859-1’, pero es posible que usted necesite un set diferente. Siempre recuerden adicionar este elemento meta a sus archivos.

El Elemento Cuerpo ‘BODY’

Cada documento HTML tiene un elemento cuerpo ‘BODY’, este contiene todos los contenidos del documento, textos, imágenes, medios y ante todo hipervínculos.

<BODY>
</BODY>
Descarga la estructura básica de un documento HTML dando click en la imagen

Conclusión

La sintaxis de HTML está conformada por un grupo limitado de etiquetas y algunas entidades como el paréntesis angular “<“. Esta sintaxis simple permite estructurar documentos con complejos y diversos contenidos que podrán ser compartidos en la web, y entendidos tanto por seres humanos, como por las maquinas.


Ver otras lecciones del curso:

HTML 5, Curso Intensivo – Lección 02, Contenidos Textuales

HTML 5, Curso Intensivo – Lección 03, Contenidos de Imagen


PUBLICIDAD

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

PUBLICIDAD

Diseño, investigación, educación