Cómo dominar la maquetación HTML

POST

Más sobre el tema.

Osvaldo Galván

Osvaldo Galván

Maquetación HTML

Para dominar la maquetación HTML se recomienda conocer las etiquetas base, así como su aplicación. De igual forma es de suma importancia saber qué son los elementos, atributos y propiedades HTML, para lo cual en este artículo descubrirás qué es HTML y cómo dominarlo.

Antes que nada, HTML son las siglas de Hyper Text Markup Languague. HTML es el lenguaje de marcación estándar que se usa para dar estructura a un sitio en internet.

HTML consiste en una serie de elementos, cada elemento del HTML indica al navegador como mostrar su contenido.

En HTML podemos describir elemento de tipo párrafo, encabezados, contenedores, enlaces a otros sitios, entre otros.

HTML trabaja en conjunto con CSS para dar el diseño a la página web. Por un lado, el HTML describe elementos y CSS indica al navegador como mostrarlos.

HTML es un lenguaje estándar regulado por la W3C, esta a su vez se encarga de regular las tecnologías relacionadas con el Internet, CSS, HTTP, URL.

Breve historia de HTML.

En el año 1991 en Tim Berners-Lee desarrolla un documento donde describe la especificación de las primeras etiquetas de HTML. A ese documento se dio el nombre de HTML Tags.

Pero no es hasta el año 1993 donde surge la primera versión de HTML y a su vez los primeros indicios de desarrollar un estándar mundial para este lenguaje.

En el año 1995, se publica el primer estándar de HTML, fue conocido como HTML 2.0.

Un poco antes, en el año 1994 Tim Berners-Lee funda la W3C, World Wide Web Consortium, que en el año 1996 toma el control de la publicación de estándares para las tecnologías de internet como lo son CSS, HTTP, URL y por supuesto HTML.

A partir del año 1996 la W3C es la encargada de publicar las siguientes versiones de HTML. La versión HTML 3.2 fue la primera publicada por la W3C.

En el año 1999 la W3C publica la versión HTML 4.01. Posterior a su publicación la W3C, centró sus esfuerzos en un desarrollar un nuevo estándar denominado XHTML.

Debido al desinterés mostrado por la W3C de desarrollar otras versiones de HTML, Apple, Mozilla, Opera entre otras se organizaron para desarrollar la versión HTML 5.0, como sustituto de la versión HTML 4.01.

En el año 2007 la W3C unió esfuerzos para desarrollar y publicar la nueva versión de HTML 5, donde unió su versión de XHTML con la versión de HTML 5.0 que desarrollaba Apple con las otras compañías.

En el octubre 2014 se libera la versión HTML 5. Esta versión incorpora elementos no compatibles con versiones anteriores e introducen nuevas etiquetas que permiten incorporar audio y video sin la necesidad de usar complementos externos al lenguaje.

Para dominar la maquetación HTML es importante conocer la anatomía de un documento HTML.

Para dominar la maquetación HTML comencemos por su anatomía

Antes que nada, quiero aclarar que, el lenguaje HTML no es case sensitive, es decir, da igual escribir las etiquetas en mayúsculas o minúsculas.

El navegador lee e interpreta todo el documento.

Estructura básica de un documento HTML.

Estructura básica de un documento HTML
Estructura básica documento HTML

La estructura básica de una página web es la siguiente.

El primer elemento de todo documento HTML siempre será: <!DOCTYPE html>. Este elemento define la versión de HTML con la que el navegador interpretará el resto de la página.

En segundo lugar, se muestrea el elemento HTML Todo documento escrito en HTML siempre comenzar y terminará con la etiqueta HTML. Este elemento encapsula el contenido de todo el documento.

Dentro del elemento HTML se encuentran los elementos HEAD y BODY.

Elemento Head

La etiqueta HEAD contiene los meta datos de la página, el título de la página, enlaces hacia recursos externos, por ejemplo, a las hojas de estilo, fuentes, entre otros.

El HEAD es de suma importancia para buscadores como Google. En el HEAD se definen los meta-datos que usan los buscadores de internet para indexar las páginas web en los buscadores de internet como Google, Bing, Yahoo.

Una configuración errónea en el HEAD significaría que nuestra página web no se muestre en los buscadores haciendo más difícil a las personas localizar nuestro sitio

El HEAD no es visible en pantalla.

Descripción gráfica de la etiqueta head en html
Etiqueta head

Elemento Title

Dentro del head se encuentra la etiqueta title, en esta etiqueta se define el nombre de la página.

Todo lo que se escriba dentro de la etiqueta TITLE será visto como el nombre de la página en el navegado.

Descripción gráfica de la etiqueta title en html
Etiqueta title

Elemento body.

El elemento BODY es el contenedor de todos los elementos visibles de la página. En este se define la estructura principal del sitio.

Descripción gráfica de la etiqueta bodyen html
Etiqueta body

Etiquetas

Como se mencionó al principio, el lenguaje HTML se compone de elementos, estos elementos describen al navegador como mostrar el contenido.

Un elemento se define por una etiqueta inicial, el contenido y una etiqueta de cierre.

Algunos elementos no tienen contenido, a estos se les conoce como elementos vacíos, estos elementos tampoco tienen etiqueta de cierre.

Atributos HTML.

Un elemento puede tener uno o más atributos, los atributos se usan para personalizar el contenido de un elemento.

Cada elemento en HTML tiene uno o varios atributos, estos atributos agregan información adicional a cada elemento.

Dependen de cada elemento es el tipo de atributo que este puede usar. Sin embargo, también hay atributos genéricos entre elementos como son:  class, id, name, title. align, background, entre otros.

De igual forma, hay atributos específicos que solo se aplican a ciertos elementos, por ejemplo, la etiqueta img, representa una imagen. Esta etiqueta tiene cuenta con el atributo src, en este atributo se indica al navegador dónde se ubica físicamente la imagen que se mostrará en pantalla.

Sintaxis de etiqueta para dominar la maquetación HTML

Etiquetas básicas.

Las etiquetas base para cualquier documento html son; html, head, title y body, estas son los contenedores principales y el título de la página.

Junto a estas etiquetas podemos destacar las siguientes.

div

Es una etiqueta de división o contenedora. Es uno de los elementos usualmente más usados, sin embargo, el abuso de div implica un desconocimiento de la semántica html.

Para evitar el uso excesivo de la etiqueta div, en la versión HTML 5 se incorporan las etiquetas section y articule.

a

Es una etiqueta ancla, sirve para poner enlaces a otras páginas o a la misma página.

Su atributo principal es href y en este se indica la url destino.

p

Define un párrafo. Permite que agrupemos texto con el objetivo de hacer más fácil la lectura y organización del documento.

strong

Pone un texto en negritas. Ayuda a dar énfasis a una parte del párrafo o a todo un texto.

En los inicios de HTML se usaba la etiqueta <b>, esta cumple el mismo cometido que la etiqueta strong, sin embargo, semánticamente para el navegador implica diferente forma de interpretarlo.

h1 a h6

Describe títulos, del más importante h1 al menos importante h6.

Por regla general solo debe existir un h1 por página.

Usualmente solo se usan del h1 al h3.

Img

La etiqueta img se usa para mostrar una imagen en el documento.

ol, ul y li.

Para listas ordenadas ol (Ordered list) y listas desordenadas ul (Unordered list).

Un li es un elemento de lista, este puede ser usado indistintamente en listas ordenadas como en listas desordenadas.

span

Es un contenedor de texto que se usa particularmente para dar estilos al texto.

La etiqueta span es muy similar a la etiqueta div, pero, div es un contenedor de bloque y span es un contenedor de texto.

HTML y CSS.

HTML es un lenguaje de marcación de textos. Con HTML definimos la estructura física de un sitio web, sin embargo, una página web que solo usa HTML es una página fea que no muestra diseño alguno e incluso es difícil de leer.

Para hacer atractivo a la vista un sitio web hacemos usos de las hojas de estilo o CSS (Cascading Style Sheets), HTML trabaja en conjunto con CSS para dar diseño a la página web, pero esto se verá en la próxima entrega.

Cómo dominar la maquetación HTML

Facebook
Twitter
LinkedIn
Osvaldo Galván

Osvaldo Galván

Osvaldo Galván Software Engennier Enfocado en la calidad del software,
Temas:

Deja un comentario

Tu dirección de correo electrónico no será publicada.