Anteriormente habíamos comentado que HTML es un tipo de programación que se basa en tags o etiquetas. Ahora vamos a explciar un poco qué son esas etiquetas, su funcionamiento y descubriremos todas las que vamos a necesitar para crear una página web completa. Tranquilo que no son demasiadas.
Primeramente lo que denominamos tag se refiere a una etiqueta de inicio y otra de fin que delimitan una parte del código, por ejemplo un párrafo se delimita entre etiquetas <p> y </p>, una capa se delimita como <div> y </div>. Siempre usaremos </nombreetiqueta> para cerrar una que previamente hayamos abierto, excepto algunas que se tienen que autocerrar.
El autocierre de las etiquetas es por ejemplo al poner una imagen, que solo tiene etiqueta de apertura como <img> y dentro de ella tiene todo lo que necesita, pero para que sea W3C válida tiene que presentarse con autocierre, es decir <img />. Iremos viendo otras etiquetas que corren la misma suerte durante este punto.
La programación en html es bastante extensa, pero en la mayoría de los casos habrá muchos tags que no van a ser necesarios o han quedado obsoletos a la hora de estructurar páginas. Por eso nos vamos a centrar en los principales para crear un diseño web basado en capas (no vamos a utilizar tablas por motivos que ya explicaremos).
Vamos a ver en principio los 3 tags principales que engloban las distintas partes de una página web en HTML. A partir de aquí voy a intentar ceñirme a los nombres que reciben en inglés para no confundirnos a la hora de programar, ya que será más fácil si mantenemos una nomenclaruta global que si empezamos a traducir conceptos que luego nos pueden llevar a confusión.
Tags principales que estructuran una página web
DOCTYPE
Este no es un tag propiamente dicho, sino que indica el tipo de estructura que tiene una página web. Como nosotros vamos a utilizar HTML en esta primera línea de nuestras páginas web utilizaremos <!DOCTYPE html> para indicar que es este tipo de programación.
<html></html>
Este tag lo engloba absolutamente todo en una web, es la primera línea que aparece en el código fuente y también la última. Esto es por que así le indica al navegador el tipo de página que es, ya que también existen páginas en xml y otros formatos, además de que las imágenes envían sus propios cabeceros cuando se carga una en el navegador. Nos aseguraremos siempre de tener la etiqueta de apertura y cierre de estas para que no tengamos errores en la visualización de la página.
<head></head>
Una página web está estructurada básicamente en dos partes que vamos a ver por separado en otros artículos, el head representado por las etiquetas <head></head>, que es la parte inicial del código y siempre se expone toda la información para que el navegador cargue archivos externos, tenga información adicional sobre la página, etiquetas para indicar a los buscadores de qué trata nuestra página y donde podemos incrustar javascript y css sobre la misma página sin archivos externos. Esta parte de una página no se muestra al usuario dentro del contenido, por lo que todo lo que pongamos aquí permanecerá oculto a la vista, pero sí estará en el código fuente.
<body></body>
Por otro lado tenemos el body, que es la parte visible para el usuario directamente en el navegador. Esta será la parte sobre la que pondremos todos nuestros textos, capas y contenido de la web para que el usuario final la pueda ver. Por ejemplo wikipedia tiene los menús a la izquierda , un título arriba y los artículos a la derecha, todo esto dentro del body de la página. Tendremos en cuenta siempre que estos tags delimitan el contenido visible de nuestra web.
<!doctype html> <html> <head> </head> <body> </body> </html>
En la siguiente página nos vamos a centrar en los tags del head y lo siguiente serán los usados en el body.
