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.
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.