TRAS una pequeña introducción y fijar los cuatro básicos del HTML, esta vez pasamos a establecer la estructura básica del HTML, es decir, el chasis de toda página elaborada con este lenguaje. Recuerda que para ello es importante tener claro lo anterior, así que, dado que el curso está formado a base de pequeñas dosis te recomiendo que les des un pequeño repaso antes de empezar con esta.

 

DEFINIR LA VERSIÓN DE HTML

Como ya comentamos en la lección anterior, es importante indicarle al navegador qué versión de HTML estamos utilizando, de modo que comenzaremos la estructura de nuestra página con la declaración del tipo de documento o doctype correspondiente. En nuestro caso, <!doctype html>. Esta es la primera etiqueta que debe figurar en nuestra web siempre, ya que sin ella, el navegador sería incapaz de interpretar el resto, aunque es cierto que cada vez los navegadores se van adaptando más y muchos dan por hecho que se trata de HTML5 (pero no todos ni en todos los casos, así que lo mejor es acostumbrarse a ponerlo).

 

<HTML>

La etiqueta <html> es la que dará un comienzo y un final a la estructura de nuestra página, y debe colocarse en segundo lugar (solamente detrás del doctype) y cerrando el documento, de modo que el resto de elementos irán entre la etiqueta de apertura <head> y la de cierre </head>, que no debemos olvidar añadir. También es posible añadirle el atributo lang para definir el lenguaje de la web, de forma que podríamos hacer que nuestra web estuviese configurada en español de la siguiente manera: <html lang= “es”>. En cualquier caso, la etiqueta de cierre no variaría y seguiría siendo </html>.

 

<HEAD>

La siguiente etiqueta fundamental es el <head>, que contiene toda la información que no vemos como tal en la web a excepción del title, que se refiere al contenido que se va a mostrar en la pestaña del navegador cuando tengamos nuestra web abierta. Esta etiqueta se sitúa detrás del doctype y la apertura del html, y en su interior alberga la etiqueta <title>, que es un elemento no vacío. Dentro del head figuran, por ejemplo, el CSS o las tipografías instaladas para la web.

 

<BODY>

Seguidamente, en el <body> se encuentran todos los elementos que sí vemos en la web y que dan forma a la página. Dentro de este apartado se incorporan los elementos estructurales que conformarán la cabecera, la barra de navegación, las secciones, el pie y las barras laterales, los cuales veremos más adelante. Esta etiqueta se sitúa tras el cierre del head y finaliza antes del cierre de html.

 

<META CHARSET=”UTF-8″>

Finalmente, y aunque no conforma estrictamente una parte de la estructura básica, sí que quiero presentar una de las etiquetas más importantes en un documento html: <meta charset=”utf-8″>. Esta etiqueta se sitúa dentro en el head y se utiliza para que se muestren los acentos y otros caracteres especiales como ñ o ç, algo que se podría perdonar en una página anglosajona (y que aún así traería problemas), pero completamente imprescindible en cualquier otra web.

 

 

Y en resumen, aquí tienes la estructura básica en HTML de una web. Cuanto antes controles este concepto, antes podrás pasar al siguiente nivel y comenzar a darle forma a tu web:

Estructura Básica en HTML

 

En esta tercera lección hemos aprendido a hacer la estructura básica del HTML a partir de la que iremos desarrollando poco a poco una web completa. Durante la próxima lección veremos los elementos estructurales que dan forma al contenido visual de la web, y para entonces, todo lo que hemos visto hasta ahora tiene que estar claramente fijado. Si tienes cualquier duda o sugerencia, recuerda que puedes dejarla en los comentarios. ¡Nos vemos muy pronto!

Khoana

Licencia de Creative Commons
La estructura básica en HTML by Khoana is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies