Hola Mundo en HTML [Jan. 4, 2012, 3:26 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> -
Archivo
Guardar Como
Le ponemos nombre
Cambiarle la extensión .txt a .html
Para cambiarle la extensión los editores abajo del espacio para ponerle el nombre al archivo, muestran una lista de extensiones, escogemos la que dice .html
También podemos escribir directamente en el espacio del nombre el .html al final del nombre; por lo que nos debe quedar un archivo asi: holamundo.html
- 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.
Los tags siguen una simple pero a la vez estricta regla, generalmente deben iniciar con “<>” y terminar con “</>” , este es el formato para que el navegador lo interprete de manera correcta, por lo tanto, toda palabra que esté entre los signos menor (<) y mayor (>) serán interpretados como etiquetas por el navegador.
Las etiquetas como <html>, <head>, <body> pertenecen a una lista de etiquetas 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:
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
¿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.
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