La explicación
Si te fijas la página vista con el explorador solo muestra parte de lo que
has escrito, concretamente todo lo que no está encerrado entre los
símbolos < y >. Lo ves es el contenido de la página, pero ¿y lo que
está entre esos paréntesis angulares? pues esas son las etiquetas o
marcas que le dicen al explorador como mostrar el contenido: en
grande, con colores, centrado, el título de la página, etc. Si te fijas cada
etiqueta tiene un comienzo y un fin:
<etiqueta parámetros> ... </etiqueta>
Como ves una apertura (< >) y un cierre (</>). Algunas etiquetas
(como <br> cambio de línea o <hr> linea horizontal) no llevan cierre.
Fijaros que lo primero que tenemos es la descripción del documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
En HTML 5 esto es mucho más simple:
<!doctype html>
La siguiente etiqueta es <html> cerrada al final del documento con
</html>, eso quiere decir que estamos ante código HTML:
<html>... </html>
Dentro de ese documento vemos una parte llamada cabecera, que la
reconocerás porque está limitada con la etiqueta <head> </head>. El
contenido de esta parte no siempre es visible, y si lo es nunca se
muestra en la ventana en si. Contiene por ejemplo el título que se ve en
la ventana del explorador, arriba a la izquierda. La cabecera queda por
tanto :
<head> <title>Mi página web</title> </head>
Puede contener muchas otras cosas, pero eso lo dejamos para más
adelante.
Trata de entender el código y por ahora escríbelo, trata de evitar el copiar y pegar sin
saber lo que haces.
El cuerpo del documento
La otra parte es el cuerpo o <body> </body>, es el contenido de la
página web. Tiene una etiqueta con cierre:
<body> ... </body>
Y ahora el contenido:
<h1 align="center"> Mi primera página web</h1>
Con esto colocaremos el texto en formato <h1> (o cabecera 1) y centrado
( align="center"), o sea, en tamaño grande y centrado en la página,
una forma de resaltar la frase. Ahora separamos esa frase por medio de
una línea horizontal:
<hr>
Como ves este es un ejemplo de etiqueta sin cierre. Y por último
colocamos un texto explicativo en un párrafo ( <p></p>), o sea, un
bloque de texto comprendido entre dos saltos de párrafo (puntos y
aparte).
<p>Esto tan sencillo es una verdadera página web, aunque
le falta el contenido, pero todo llegará.</p>
Fíjate como en la página este párrafo se muestra como una sola linea,
que no se rompe después de la palabra aunque. Esos saltos de linea no
afectan a la página cuando la ves en el navegador.
Estructura de Codigo HTML de ejemplo, copia en tu cuaderno el ejemplo:
<!DOCTYPE>
<HTML>
</head>
<title>Mi primer web</title>
</head>
<body>
<div id="una capa">
<h1>hola mundo!</h1>
<p>Este es un ejemplo del uso HTML para crear una web.</p>
</div>
</body>
<HTML>