Estructura de un documento HTML

      En primer lugar hay que saber que todo el documento debe estar escrito entre las etiquetas <html> y </html>.

      En segundo lugar, un documento HTML puede estar, o no, dividido en marcos (frames). En el caso de ser un documento HTML sencillo, sin marcos, estará dividido en dos partes que se marcan con sus correspondientes etiquetas::

  1. El encabezamiento que se escribe entre las etiquetas <head> y </head>
  2. El cuerpo que se escribe entre las etiquetas <body> y </body>

      En el caso de que el documento HTML utilice marcos (frames), constará también de dos partes, pero en este caso el cuerpo del documento se sustituye por la declaración de marcos:

  1. El encabezamiento que se escribe entre las etiquetas <head> y </head>
  2. La declaración de la estructura de los marcos, que se escribe entre las etiquetas <frameset> y </frameset>

      Vamos a empezar escribiendo un documento HTML sencillo. Para ello podemos utilizar el Bloc de notas o algún editor sencillo que no incluya códigos extraños.

      No te preocupes si no entiendes todas la etiquetas. Se han incluido comentarios explicativos en el código. Copia lo siguente en el editor de textos y grábalo con el nombre prueba1estructura.htm:

<html>
<head>
   <title>Prueba 1 - Estructura HTML</title>
</head>

<body>
       <!-- los comentarios se escriben entre estas etiquetas -->
       <!-- vamos a poner un titulo, head, de gran tamaño, head1, con la etiqueta h1 -->
       <!-- tambien queremos que el titulo aparezca centrado, se consigue con center -->
  <h1><center>Estructura de un documento HTML</center></h1>
       <!-- ahora vamos a poner un titulo menos importante, head2, con la etiqueta h2 -->
       <!-- lo vamos a centrar y a poner en negrita, bold, con la etiqueta b -->
  <h2><center><b>Primera prueba del curso HTML</b></center></h2>
       <!-- vamos a insertar una linea horizontal de separacion -->
  <hr></hr>
       <!-- Los parrafos se marcan con la etiqueta p -->
  <p>Este va a ser el primer parrafo que escribo en HTML. Fijate que no pongo 
  los acentos... mas adelante se explicara como se escriben.</p>
  <p>El segundo parrafo se marca de la misma manera.</p>
</body>
</html>

      Cuestiones a considerar:

  1. El documento puede guardarse con cualquier nombre, pero la extensión debe ser htm o html. Sería conveniente abrir una carpeta específica para guardarlos todos dentro. Así se localizarán de forma más sencilla y podrás repasar lo aprendido.
  2. El documento se puede cargar en el navegador (browser) haciendo doble click sobre el icono del documento, abriendo el navegador y arrastrando el documento hasta su ventana, o buscando el documento desde el menu abrir del navegador
  3. Las líneas en blanco, las indentaciones y los comentarios se ponen para hacer el documento más legible. Es una buena costumbre que se debe seguir siempre. Te ahorrará trabajo a la hora de modificar un documento antiguo.
  4. En la cabecera se ha incluido la etiqueta <title>, que especifica el título del documento que aparecerá en la ventana del navegador. Además, las herramientas de búsqueda web automatizadas pueden usar el título para ponerlo en un índice. Si ningún título se especifica, el título predefinido depende del navegador que se esté usando.
  5. Fíjate cómo se han anidado las etiquetas <h1> y <center>: <h1><center>...</center></h1>. Nunca debes solapar las etiquetas de esta manera: <h1><center>...</h1></center> porque se producirán errores.
  6. La línea de separación horizontal (horizontal rules) se indica con la etiqueta <hr>, que no necesita la etiqueta de cierre. Si es preciso se le puede poner dicha etiquera, de esta forma: <hr></hr>, tal y como hemos hecho en el ejemplo.

      El aspecto de la página en el navegador debería ser éste.