This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Nuestra Primera pagina HTML


 

¡Vamos a hacer una pequeña prueba!


Si estás usando Windows, abre el "Block de Notas".

Si usas Mac, abre "Simpletext".


Escribe en el mismo, el siguiente texto:


<html>
<head>
<title>Mi primera página Web</title>
</head>

<body>
Hola a todos.
</body>
</html>


Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).


  • Abre el navegador Internet(Internet Explorer, Firefox, Opera, etc.).
  • Selecciona "File" y luego "Open".
  • Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elígelo y presiona "Open".
  • Ahora tú ves la dirección, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrará la página.

 

Expliquemos el ejemplo

<html> --> Indica al navegador que abre un archivo HTML.
<head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.
<title>Mi primera página Web</title> --> Título de la página.
</head> --> Cierre de la cabecera del documento.

<body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. --> Texto que va a ser mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML


La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.

Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.

Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".

Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar"/" antes del nombre.

 

Task Discussion


  • Raúl Rojas   April 30, 2013, 12:38 p.m.

    Listo, muy sencillo ^^

  • Anonym   June 8, 2012, 3:51 a.m.

    Caro y fácil:)