La estructura que todo documento HTML debe poseer es la siguiente:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Veremos cada una de sus partes:
<html> ... </html>
Todo el documento HTML se encontrará dentro de estas etiquetas.
<head> ... </head>
Esta es la cabecera del documento. Aquí se incluirá información importante sobre la página.
<title> ... </title>
El título de nuestra página.
<body> ... </body>
Este es el cuerpo de nuestro documento, aquí se colocará el contenido de nuestra página.
Con lo que sabemos... y un poquito más, estamos en condiciones de escribir nuestra primera página:
<html>
<head>
<title>
Este es el título de mi página... (la primera de ellas)
</title>
</head>
<body>
<h1>
Mi primera página
</h1>
<p>
Este es el primer párrafo de mi primera página.
</p>
<p>
Por ahora no tiene mucho, pero con el tiempo tendrá muchas cosas mas...
Por cierto, este es el segundo párrafo.
</p>
</body>
</html>
El resultado lo puedes ver a través del siguiente enlace: Ejemplo primera página.
Explicación:
<html>
Con ésta sentencia le indicamos a la computadora que el documento es un archivo en lenguaje HTML.
<head>
<title>
Este es el titulo de mi pagina... (la primera de ellas)
</title>
</head>
Esta es la cabecera de nuestro documento. Aquí se incluye información que
habla acerca de la página y su contenido. En este caso, hemos incluido el título
de nuestro documento dentro de las etiquetas <title> y
</title>. Comúnmente ese título aparece en la barra de
títulos del navegador.
<body> ... </body>
Con las etiquetas <body> y </body>
indicamos el inicio y fin del cuerpo de nuestro documento. Todo lo que se
encuentre dentro de estas etiquetas será nuestro documento en sí. Todo su
contenido y la información que se desplegará en pantalla se encontrarán ahí.
<h1>
Mi primera página
</h1>
El elemento <h1> indica una cabecera de primer nivel. Es
decir, un título de primer nivel. De la misma forma <h2>
indicará uno de segundo nivel y así... hasta el sexto nivel. Debe hacerse notar
que esta etiqueta cumple una función importante. No la usamos para que los
títulos aparezcan más grandes que el resto del texto, lo hacemos para que este
tenga una estructura lógica. Para que los títulos sean títulos y el texto sea
texto. De esta manera, no sólo organizamos mejor nuestra información, sino que
la hacemos más accesible a los demás. ¿Y su apariencia? Aunque por defecto
aparecen más grandes que el resto del texto, nosotros podremos controlar su
presentación utilizando hojas de estilo en cascada (CSS). Ese tema será abordado más
adelante, a lo largo de los demás bloques del Curso.
<p>
Este es el primer párrafo de mi primera página.
</p>
<p>
Por ahora no tiene mucho, pero con el tiempo tendrá muchas cosas mas.
</p>
Las etiquetas <p> y </p> las utilizamos
para indicar el inicio y fin de un párrafo. Estos párrafos suelen ser representados como
secciones de texto separadas entre sí con un salto de línea de doble espacio.
Podemos observar que no importa la forma en que hayamos escrito el texto que se encuentra dentro de las
etiquetas. No importa si existen saltos de línea en nuestro código
fuente. Estos saltos de línea no serán representados. El navegador sólo hará caso de las
etiquetas para realizar esas tareas.
</html>
Marca el fin de nuestro documento HTML.