Es importante conocer la Estructura de un Archivo HTML. Desde finales del siglo pasado no ha cambiado pero sí se le han añadido cosas nuevas.
Esas cosas serán nuevas, espero no sólo para mí, pero en éste sitio pondremos lo que se puede hacer recientemente.
La estructura básica
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Título de la página</title>
5 </head>
6 <body>
7 </body>
8 </html>
En la línea 1 el tipo de archivo con el que estamos trabajando, en este caso, la línea 1 declara que es un archivo HTML.
En la línea 2 tenemos la Etiqueta de inicio del elemento HTML. Aquí es donde comienza el navegador a tomar lo lo que se verá en la ventana del navegador, la pestaña del navegador y el contenido de la página hasta encontrar la Etiqueta de cierre del elemento HTML que en éste ejemplo lo encontramos en la Línea 8.
En la línea 3 encontramos la Etiqueta de inicio del Elemento head. Termina en la línea 5 con la Etiqueta de cierre del Elemento head. Se utiliza para decirle al navegador de qué trata la página web pero se utiliza también como puerta de acceso a otras herramientas para la edición o funcionamiento de nuestra página web.
En la línea 4 encontramos la Etiqueta de inicio del Elemento title, el Contenido que aparecerá en la pestaña del navegador, y termina con la Etiqueta de cierre del elemento title. Éste es un ejemplo, pero veremos en otros temas que entre las Etiquetas de inicio y cierre del elemento head, podemos usar elementos como link o style, entre otros.
En la línea 6 encontramos la Etiqueta de inicio del Elemento body y en la línea 7 encontramos la Etiqueta de cierre del elemento body. Todo lo que esté entre estas etiquetas será visible en nuestro navegador. Si nosotros ponemos la estructura tal como está, sólo veremos cambios en la pestaña del navegador y el contenido estárá vacío o en blanco porque no hemos puesto nada entre las Etiquetas de inicio y cierre del Elemento body.
¿Cómo guardar el archivo para poder visualizarlo en nuestro navegador?
En la actualidad tenemos varios IDE's. o Entornos de Desarrollo Integrados que facilitan la edición de un archivo html. En éste momento estoy utilizando Geany y Kate> porque mis Sistema Operativo es GNU/Linux. Me facilita la construcción del archivo HTML pero, si usamos un editor básico como block de notas en windows o textedit en mac o nano en línux, es mucho mejor para aprender.
En lo laboral las IDE's más complejas seran siempre la mejor opción.
Utilices IDE's o editores de texto, el guardado no es diferente, debe tener en cuenta dos cosas:
Nombre del archivo
Extensión del archivo
Se propone que, para la página principal o también llamada home, debemos darle el nombre de "index".
La Extensión del Archivo es aquello seguido del nombre después de un punto (.). Por lo general los editores guardan por defecto archivos sin extensión o en el mejor de los casos con ".txt" así que, para que pueda ser leído por nuestro navegador debemos asignar la extensión ".html" o ".htm".
Teniendo en cuenta los dos puntos anteriores, la página principal la guardaremos como "index.html" o "index.htm".
Las páginas secundarias podemos llamarlas con cualquier nombre pero siempre terminando con la extensión ".html" o ".htm".
Comentario Final
Conocimos la estructura básica, sin embargo no hemos visto los detalles que se pueden aplicar en cada elemento. Esto lo veremos en los siguientes temas.
