HTML - Lección 4: La estructura de una página web

Lo primero que debemos de hacer es abrir el blog de notas de Windows. Una vez hecho esto, estamos preparados para empezar a escribir código html. Las primeras etiquetas que vamos a aprender son las etiquetas <html>, <head> y <body>.

Veamos el código siguiente para saber como estructurar estas etiquetas:

<!-- declaramos un documento 
html -->
<html>

  <!-- cabecera de la página 
  web -->
  <head>
  </head>
  
  <!-- cuerpo del documento -->
  <body>
  </body>
  
</html>

Vemos que primero tenemos la etiqueta <html>, y que ésta engloba a las otras dos. De esta forma, escribiendo la etiqueta <html> y su cierre, declaramos al navegador que se trata de un documento html. Posteriormente temenos las etiquetas <head> y <body>. Lo que escribamos dentro de la etiqueta <body> será lo que muestre el navegador a nuestros visitantes. Veamos un ejemplo:

<html>

  <head>
  </head>
  
  <body>  
    Esta es mi primera página web
  </body>
  
</html>

En este código hemos puesto, dentro de la etiqueta <body>, una frase. De esta manera, los que visiten la página verán nuestra frase apareciendo en pantalla. Puedes escribir el código en tu blog de notas y guardarlo como pagina.html (sin tilde), depués abrir el archivo resultante y verás la página; algo similar a la figura 4.

la página web en el navegador
Figura 4. Así nos muestra el navegador nuestra página

Así pues, lo que metamos dentro de la etiqueta <body> será el contenido de nuestra página web. La etiqueta <head> tiene otro cometido; sirve para proporcionar los datos que pudiesen necesitar otros sistemas informáticos, como puede ser un buscador de páginas web o el propio navegador.

Por ejemplo, con la etiqueta <title>, dentro de <head>, podemos proporcionarle un título a la página para el navegador. Mira el siguiente código:

<html>

  <head>
    <!-- le damos un título a la página -->
    <title>Mi página web</title>
  </head>
  
  <body>  
    Esta es mi primera página web
  </body>
  
</html>

Así podemos darle un título a nuestro documento web que el navegador lo reconocerá y escribirá en la parte superior de la ventana (figura 5). Escribe el código y guárdalo con el nombre pagina.html. Es conveniente que no lo cortes y peges, sinó que lo escribas para ir practicando. Así puedes ir asimilando conceptos.

El título de la página web
Figura 5. El título se muestra en la parte
superior del navegador

Esta es la estructura básica del código html de una página web. Puedes escribir los códigos de ejemplo para practicar. Para ver los resultados, debes guardar el código con el nombre de archivo que quieras, seguido de un punto y la extensión html.


Ir a:

Aprende Gratis 2007 © Mario Raja
página optimizada para todas las resoluciones