Una página web es en esencia un documento de texto diseñado para ser procesado por un navegador de internet. Por esta razón se le asigna la extensión html, independientemente del procesador de texto con el cual se haya creado.
Las etiquetas html5 permiten al navegador procesar el texto contenido entre ellas de diferente manera y el resultado de esta interpretación es la apariencia que presenta la página web al ser cargada.
La gran mayoria de las etiquetas html5 contienen una sentencia de inicio y una de cierre:
<etiqueta></etiqueta>
Procedamos a abrir con el block de notas nuestra primera página web (click derecho sobre el archivo index.html), que contiene como único párrafo:
mi página web
Esto, aunque funciona (puesto que el navegador muestra su contenido como una página web) no cumple con la normativa html5 y será suficiente si nuestra espectativa es crear un documento web con un solo párrafo. Por lo tanto para ampliar nuestras posibilidades vamos a crearle a nuestro documento una estructura html5 adecuada.
Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html5.
Esta es la primera declaración que debe tener todo documento html. Escribimos entonces esto en nuestro documento y tendremos:
<!DOCTYPE html>
mi página web
Sintaxis: todas las etiquetas pueden escribirse en mayúsculas, minúsculas ó mixto. De manera que es igualmente correcto:
<!doctype html>
<!dOcTyPe HtmL>
Se utiliza para crear párrafos en el documento.
El estandar html5 incluye la novedad de que no es necesario el uso de las etiquetas de cierre </p> (asi como pueden omitirse las etiquetas de cierre en otros casos); no obstante, también establece que no es incorrecto seguirlas utilizando.
Incluímos la etiqueta escribiendo:
<!DOCTYPE html>
<p>mi página web
Sirven para establecer la estructura general del documento web. Su uso es mas de proceso interno del navegador. Las principales, que debe incluir todo documento web son html, head y body:
Le indica al navegador donde comienza y termina el contenido html del documento.
En realidad todo el documento debe estar contenido entre las etiquetas <html></html>, con la única excepción de la instrucción <!DOCTYPE html>
Incluimos esta nueva etiqueta escribiendo:
<!DOCTYPE html>
<html>
<p>mi página web
</html>
Son instrucciones que se anexan a las etiquetas html para agregarles funcionalidades.
La etiqueta <html> soporta el atributo lang, por medio del cual se le indica al navegador el idioma en que está escrita la página. El parámetro de este artributo para el español es: es
Anexamos este atributo como se muestra:
<!DOCTYPE html>
<html lang=es>
<p>mi página web
</html>
Delimita el encabezado de la página web. La información contenida en esta sección es para procesamiento interno del navegador y permanecerá (salvo ciertas excepciones) oculta al usuario:
Agregamos esta etiqueta escribiendo:
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<p>mi página web
</html>
Delimita el cuerpo del documento. En esta sección se incluye todo el contenido de la página que será mostrado al usuario:
La incluímos escribiendo:
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<p>mi página web
</body>
</html>
Con esto finalizamos la edición de nuestro archivo index.html y procedemos a guardar los cambios y cerrarlo.
Las etiquetas estructurales html, head y body deben estar presentes en todo documento html, aunque estén vacias (no se defina ningún contenido entre ellas).
Abriendo ahora nuestra página web con el navegador (click izquierdo), podremos observar que se muestra exactamente igual que antes. No obstante ahora tiene una estructura interna preparada que nos permitirá agregarle contenido y mejorar su apariencia aprovechando las potencialidades de las nuevas etiquetas html5 que iremos aprendiendo.
En la sección siguiente se exponen las etiquetas básicas que debemos incluir en el encabezado de nuestras páginas html, o sea entre las etiquetas:
<head>
</head>
Luego se inicia el estudio de la redacción del contenido de nuestro sitio web, entre las etiquetas:
<body>
</body>
Lo cual es el objetivo principal que motiva todo este proceso de aprendizaje y se centra básicamente en el estudio de las etiquetas html, sus atributos y parámetros principales.
Paralelamente, se expondrá la elaboración de archivos css3 (.css) utilizados para estandarizar el formato de todas las páginas html contenidas en nuestro sitio web.