Curso de html. Estructura básica de una página web.

Toda página web por muy rara o complicada que parezca su programación siempre debe tener esta estructura básica:


<html>
<head>
<title>
</title>
</head>
<body>
Contenido de nuestra página.

</body>
</html>

Lo primero que os preguntareis o lo segundo tal vez, es el porque de mostrar las etiquetas en vertical. El motivo es solo para clarificar o ver mejor las partes de código de nuestra página. Ya comprovareis por vosotros mismos que el tener el código bien estructurado, ayuda a buscar secciones y a solventar posibles errores de etiquetado o código que se puedan dar, cuando la página web en la que trabajamos empieza a complicarse o extenderse.

Aclarado este punto os identificaré estas etiquetas nuevas y para que se usan.

[quads id=1] Empezamos con la etiqueta <html> Esta etiqueta y su etiqueta de cierre correspondiente </html>. engloba a todas las demás. Sirve para indicar al navegador, que lo que vamos a presentarle esta escrito en lenguaje Html. Podía añadir cincuenta cosas más sobre esta etiqueta, pero lo cierto es que solo debeis saber que hay que ponerla. En realidad todas estas etiquetas hay que añadirlas a nuestro código, de hay que sean básicas, no sobra ninguna. El resto de etiquetas es otra historia, aveces utilizaremos unas y otras veces otras, dependiendo de lo que queramos conseguir en nuestras páginas.

Proseguimos con la etiqueta <head> y su etiqueta de cierre </head>. Entre estas dos etiquetas se situan aparte de las etiquetas <title> que hablaremos a continuación otro tipo de información y etiquetas las cuales abordaremos en otras secciones mas avanzadas, ya que ahora hablar de ello no es revelante y nos desviaría del hilo conductor del curso, por tanto pasemos directamente a hablar de la etiqueta <title> y de su compañera de fatigas o de cierre la etiqueta </title>.

Esta etiqueta alberga el contenido del título de nuestra página web.

El título se presenta en lo alto del navegador, cuando visitamos una página. Aporta una breve descripción de la página.

Esta etiqueta es muy importante y su contenido, es decir, el título , más todavia, ya que los motores de busqueda de la web lo leen y así se hacen una idea del tema tratado en nuestra página web.

Su redacción no debe ser muy larga, apenas una pequeña frase bastará. Hay otras etiquetas de cabecera (METAETIQUETAS), donde podemos dar una descripción mas estensa del contenido o tema tratado en la página web que creemos.

Por fín llegamos a la etiqueta que nos interesa, la etiqueta <body> y su media naranja </body>.

Y ¿Porque digo que nos interesa?, porque entre estas dos etiquetas se situa todo el contenido que posteriormente se presentará o será visible por el usuario que visite nuestra página web.

Ya hemos destripado la estructura básica de cualquier página web, a partir de ahora, veremos que etiquetas o elementos podemos utilizar o incorporar al body de nuestras páginas Webs.

Actualizado: 04/10/2014
Como dije en mi página de introducción al curso, html5 ya esta entre nosotros, ya es una realidad. La mayoría de las páginas se van adaptando a esta última versión de html, con más o menos acierto en aplicarlo, ya que tampoco esta muy clara su correcta utilización. Sus etiquetas semánticas generan bastantes dudas. Supongo que con el uso y el paso del tiempo, estas dudas se irán disipando. Sin embargo quiero que sepais que el hecho de no hablar en este curso de las etiquetas nuevas o variaciones que trae consigo html5, ha sido principalmente por motivos de claridad y mejor asimilación del curso. Por otro lado si creais una página web al acabar este curso, con la información vertida en él, no tendreis ningún problema en visionar posteriormente la página en un navegador.
Xhtml pretende como dije, hacer sitios cada vez mas adaptados semánticamente, html5 es la culminación de este trabajo, gracias a los nuevos cambios y etiquetas semánticas nuevas que aporta.
Cuando acabeis el curso os recomiendo encarecidamente, que os informeis sobre html5. En mi web crearé un apartado, donde hablaré de él e iré ampliando su contenido según lo vaya asimilando yo también.

¿Te ha gustado? Compártelo.