Escribe un Hola Mundo en HTML [Jan. 6, 2012, 5:24 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.
En caso que te aparezca algún carácter extraño como este:
Trata de cambiar la línea :
<meta charset="utf-8" />
Para que quede de esta manera:
<meta charset="iso-8859-1" />
(más abajo te explicaremos qué significa todo 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
- meta
- body
Los elementos pueden estar anidados unos dentro de otros. Por ejemplo, puedes ver que <title> y <meta> están dentro de <head>, y a su vez <head> y <body> están dentro de <html>.
Veamos qué función cumple cada uno de estos elementos:
<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 sirve para colocar información sobre el documento (título, autor, formato, etc).
<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).
<meta>
El elemento meta se utiliza para almacenar información sobre el documento (a veces llamada metadata o metainformación). Como puedes ver en el ejemplo, el elemento meta es especial porque no tiene etiquetas de apertura y cierre, sino que está compuesto de una sola etiqueta, la cual termina con (/>).
Dependiendo de los atributos que utilicemos, el elemento meta puede guardar distinta información como: autor, idioma, palabras claves, etc. En este caso utilizamos <meta> con el atributo “charset” y el valor “utf-8”. Esto le indica al navegador cuál es la codificación en la que está escrita el documento.
Para aprender más sobre codificaciones, te recomendamos leer este artículo.
<body>
El elemento <body> se utiliza para colocar 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 cinco elementos forman la estructura básica de una página web.
Dedícale un par de minutos a jugar con el archivo holamundo.html. Cambia el contenido del title o del body, y fíjate qué sucede cuando le das refresh en el browser. Luego, pasa a la siguiente tarea.