Hola Mundo en HTML [Jan. 6, 2012, 12:50 p.m.]
En esta tarea vas a conocer la estructura básica de un archivo HTML.
Copia este código en tu editor de texto y guárdalo con el nombre holamundo.html (asegúrate de utilizar la extensión .html, no .txt):
<html>
<head>
<title>Hola Mundo en HTML</title>
<meta charset="utf-8" />
</head>
<body>
¡Hola mundo!
</body>
</html>
Si ahora abres el archivo con tu navegador, debes ver algo como esto.
Analicemos el Ejemplo
Un archivo HTML está compuesto por elementos escritos con este formato:
<etiqueta de apertura>contenido</etiqueta de cierre>
En el ejemplo anterior podemos encontrar los siguientes elementos:
- html
- head
- title
- body
Los elementos pueden estar anidados unos dentro de otros. Por ejemplo, puedes ver que <title> está dentro de <head>, y tanto <head> como <body> están dentro de <html>.
<html>
Todo documento HTML debe abrirse con la etiqueta <html> y cerrarse con la etiqueta </html>. Esto le indica al navegador cuáles son los límites del documento.
<head>
El elemento <head> contiene el encabezado del html. El encabezado se utiliza para colocar el título de la página, información sobre el documento (metadata) y links hacia archivos Javascript o CSS, entre otras cosas.
<title>
El elemento <title> contiene el título de la página. Usualmente, el título se muestra arriba de la barra de herramientas del navegador (o en el tab de nuestra página, si tenemos varios tabs abiertos).
<body>
El elemento <body> contiene el contenido de la página web. En nuestro ejemplo, la página solo contiene el texto “¡Hola Mundo!”, pero en las próximas tareas le estaremos agregando mucho más contenido.
Estos cuatro elementos forman la estructura básica de una página web.
Dedícale un par de minutos a jugar con el archivo HTML que creaste. Cambia el contenido del title o del body, y fíjate qué sucede cuando le das refresh al browser. Luego, pasa a la siguiente tarea.