Mi primer documento HTML

Lo primero es lo primero, vamos a crear una carpeta nueva para que podamos tener y ejecutar los ejemplos que irán apareciendo en este curso de HTML/CSS. Podemos utilizar nuestro editor de texto favorito para crear nuestros ejemplos más adelante crearemos hojas de estilo CSS que nos servirá para dar formato a nuestra página web.

Vamos al lio…

Lo primero vamos a abrir nuestro editor favorito gedit, editor de texto, vi, emac, etc… y escribimos el siguiente ejemplo:

De momento nos sonará a chino pero si lo analizamos veremos…

<HTML> y </HTML>

<HEAD> y  </HEAD>

Casi todo el contenido de estas etiquetas permanece oculto a la vista del internauta, a excepción de la etiqueta <TITLE>; esta etiqueta está pensado para las arañas de los motores de búsqueda, para recoger información de la página y para hacer un repositorio central para otros códigos (como enlaces JavaScript u hojas de estilo en cascada) que afectan a la presentación de la página.

<BODY> y </BODY>

Hasta aquí las etiquetas importantes para la construcción de páginas web. Vamos a ejecutar este ejemplo en nuestro navegador:

Ejemplo de como se mostraría en el navegador nuestra primera página web.

Resumiendo; la estructura básica de una página web es:

Ejercicios

Aprenderemos a crear una página HTML básica. Para ello necesitaremos nuestro editor favorito y cualquier navegador.

Vayamos por partes

  1. Abriremos nuestro editor favorito.
  2. Según el editor (TextEdit del Mac o algún editor RTF, cambie a texto sin formato.
  3. En la parte superior de la página vacía, introduzca <!DOCTYPE html> y pulsamos la tecla intro.
  4. En la siguiente línea escriba <html> y pulse dos veces la tecla intro.
  5. Escribe la etiqueta de cierre </html>.
  6. Ahora vamos a situar el cursor en la línea vacía que hay entre las etiquetas <html> y </html> e introducimos <head>.
  7. Pulsaremos la tecla intro y escribimos <title>Mi primera página</title>.
  8. Pulsamos intro y escribimos </head>.
  9. Pulsa la tecla intro y escriba a continuación <body>.
  10. Pulse intro y escribimos <p>Bienvenido a mi mundo</p>.
  11. Pulsamos intro y terminamos con la etiqueta para el final </body>.
  12. Verificamos que nuestro código coincida con el que acabamos de crear y lo llamaremos ejemplo1.html.
  13. Cuando tengamos nuestra primera página nos trasladamos a la carpeta donde esté almacenado el archivo y hacemos doble clic. Esto hará que nuestro navegador por defecto se ejecute nuestro archivo de ejemplo.