Unidad 2. HTML básico (II)


2.2. Estructura básica de la página

Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.

Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto básico de cualquier página web, es el siguiente:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador.

Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el título de la página, que es lo que se ve en la barra de título del navegador.

En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en la página Primera.htm creada en el tema anterior. En él vemos los elementos que hemos comentado. Hemos añadido la etiqueta <br /> para saltar de línea. Esta es la primera página del sitio que vamos a ir construyendo a lo largo del curso.

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<p>Bienvenido a Floramics
<br /> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Luego pulsar en Visualizar el código escrito esto hará que se abra una ventana o una pestaña en tu navegador en la que podrás ver cómo queda la página. Es equivalente a lo que hicimos en el tema anterior con el bloc de notas pero de una forma más cómoda para ti. Observa como los espacios en blanco no son tenidos en cuenta, un poco más adelante volveremos sobre este tema.

Luego puedes añadir un salto de línea y un nuevo texto "Tenemos las fotografías organizadas en diferentes categorías" y volverlo a visualizar.


Enero-2010
Pág. 2.2

Atrás  Inicio  Adelante





.