Los documentos HTML no son más que documentos de texto con una serie de etiquetas. Éstas, le sirven al navegador para interpretar de qué forma tiene que presentar texto, imágenes o sonidos.
Al tratarse de documentos de texto, nos bastaría con el Bloc de notas (o cualquier otro procesador de texto plano) para crear nuestras páginas HTML. Aunque este procedimiento resulta bastante incómodo para su uso habitual (ya que nos obligaría a conocer todas las etiquetas del HTML), puede ser interesante para que comprendamos la estructura de una página WEB y será el primero que utilicemos.
¿Qué son las ETIQUETAS?
Para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para que el navegador sepa diferenciar entre texto e instrucción (indica cómo se debe mostrar el texto). Estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van encerradas entre los símbolos < >.
Normalmente se utilizan dos etiquetas: una de inicio y otra de final para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código. Ejemplo:
<etiqueta>texto que presentará el efecto</etiqueta>
Por ejemplo:<B>texto</B> dará como efecto texto
Estructura básica de una página WEB
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente estructura:
Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje.
La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.
Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.
Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).
La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
Ya estamos en condiciones de componer nuestra primera página web. En primer lugar crea una carpeta y llámala HTML para poder ir guardando los archivos de las tareas que vas haciendo. Esta carpeta no la dejes en en escritorio (te la pueden borrar), créala dentro de otra carpeta del sistema para que esté visible. Abre el programa bloc de notas (en los portátiles se llama editor de archivos) y crea un archivo con el nombre de la tarea. Escribe en el archivo que has creado el código que viene en el ejemplo 2 y guarda el resultado con la extensión *.HTML o *.HTM:
Ejecuta el archivo (doble click) y verás el resultado en el navegador.
Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con Actualizar (o Refrescar) el navegador para ver los cambios.
Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador o el nombre del archivo (depende del navegador). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta en la cabecera : <TITLE>. Nuestro página web podría quedar, por tanto, así:
Una vez insertada la etiqueta <TITLE>, guarda el archivo y actualiza el navegador para ver como ha cambiado la pestaña de navegación.
Ejercicio
Crea un archivo que se llame Tarea 2 e inserta el código que creas necesario para que en la pestaña de navegación aparezca tu nombre. Luego, ejecuta el programa en el navegador, realiza una captura de pantalla e inserta la captura en la tarea 2 de tu página web.