Hola Mundo en HTML [Jan. 5, 2012, 7:31 p.m.]
Ya debemos estar listos para crear nuestra primera página en html
-
Vamos a copiar el siguiente código a nuestro editor de texto:
<html>
<head>
<title>Este es el Título</title>
<!-- El título se verá en el encabezado de la página-->
</head>
<body>
Este texto es parte del body
</body>
</html>
-
Ahora guardaremos el archivo con el nombre holamundo.html
Archivo > Guardar Como
Le ponemos nombre
Cambiarle la extensión .txt a .html
A la hora de guardar, la mayoría de los editores de texto te presentan una lista donde puedes escoger la extensión que quieres darle al archivo, asegúrate de elegir la que dice .html.
También puedes escribir directamente el nombre del archivo con la extensión .html, y el editor de texto lo guardará correctamente.
- Abrimos el archivo desde nuestro navegador favorito y veremos como lo interpretó el navegador.
Asi es como ya tenemos nuestro primer archivo escrito en html y visualizado en un navegador.
Pero ¿que quiere decir <html>, <head>, <body>?
Vamos a entender mas sobre el código anterior.
El html es el lenguaje base con el que se manejan los navegadores, como lo definen en general "la lengua materna" , esta compuesto por etiquetas que le dan formato al texto.
La traducción de “etiqueta” a inglés sería “tag”, es mas común el uso de la palabra tag en el ambiente de programación web, asi que de ahora en adelante usaremos la palabra tag, que es lo mismo que etiqueta.
Toda palabra que esté entre los signos menor (<) y mayor (>) serán interpretados como tag por el navegador.
Los tags siempre vienen con su respectivo tag de cierre de esta manera:
<tag de abertura></tag de cierre>
Si observamos en el ejemplo anterior, notamos que los tags le darán formato al texto que este entre el tag de abertura <tag> y el de cierre </tag>, por ejemplo el tag de titulo
<title>Este es el Título</title>
Aqui le indicamos al navegador que ese texto va a ser el título de la página.
He aqui la importancia de abrir y cerrar los tags, debemos indicarle claramente adonde empieza y adonde termina.
Todos los tags usados hasta el momento pertenecen a una lista de tags predefinidas por el Consorcio Internacional W3C, por su siglas en inglés (World Wide Web Consortium)
Tag HTML
La primera regla para escribir es html es: “todo documento debe empezar y debe cerrarse con el tag <html> y </html> respectivamente”, dentro del tag de abertura y el de cierre se desarrollará todo el contenido de una página.
Este tag le indica al navegador cuales van a ser los límites del documento.
Nunca debería ir nada antes de haber abierto el tag o después de haberlo cerrado. Excepto los comentarios
Revisemos el código fuente de estas 3 páginas, para verificar que esta regla se cumple en el 100% de los casos:
Tag Head
Este tag contendrá todo lo relacionado al encabezado del html, dentro de este deberán ir los siguientes tags.
<title>, <base>, <link>, <meta>, <script>, and <style>, aqui les dejamos una muy buena referencia en inglés, donde explican cada uno de los tags a usar en el head.
Tag Body
Una vez hayamos definido muchas de las características en el Head, ahora en el body vamos a empezar a escribir la estructura de la página, donde se incluirán todo los demás tags:
¿Qué son los comentarios?
Son anotaciones que ponemos entre <!-- estos signos--> que le indican al navegador que se esta escribiendo un comentario, por lo tanto no lo muestra como texto ni como tag y solo se puede ver cuando leemos el codigo fuente. Nos permite hacer anotaciones para nosotros mismos, o para que otros desarrolladores las vean.
Una vez hagamos esto podremos ver las diferencias entre los diferentes editores de texto.
Por lo general los tags se ponen de color diferente al igual que los comentarios
El ejemplo mostrado arriba, es la estructura básica de toda página web.
Ahora debemos probar este código en los diferentes editores y decidirse por uno definitivamente.
Después de haber probado, podemos pasar al siguiente reto para conocer mas tags