HTML5 para dummies: Lección 1 – Hola Mundo

Comparte y sé feliz:

En el tutorial de hoy aprenderemos a crear un archivo index de HTML5 que imprimirá en pantalla del navegador un “Hola Mundo!!” pero con todos los elementos básicos que componen una página HTML5 bien estructurada.

Para ello vamos a necesitar:

PASO 1: Crear la carpeta que albergará nuestro archivo HTML5

Antes de crear cualquier archivo para reproducir en el navegador, lo ideal es hacerlo dentro de una carpeta que se le atribuya como root del proyecto al que pertenece. En breves palabras: “Crea una carpeta cada vez que vayas a hacer algo nuevo” .

Todas estas carpetas irán dentro del directorio “xampp/htdocs”. Esta carpeta es la encargada de ejecutar todos los archivos desde Apache.

Para el tutorial de hoy crearemos una carpeta llamada “ejemplo-html”, por lo que el directorio, si tenemos el XAMPP ubicado en la carpeta por defecto de la instalación sería: “C:/xampp/htdocs/ejemplo-html”.

Ahora, cada vez que queramos reproducir cualquier archivo de esta carpeta, con el Apache activado en el panel del XAMPP, solo tendremos que escribir en el navegador: http://localhost/ejemplo-html.

PASO 2: Creación del archivo index.html

Si lo pruebas ahora podrás comprobar que no se abre nada y eso es porque aún no hay nada para reproducir, por lo que procederemos a crear dentro de la carpeta “ejemplo-html” un archivo con extensión html que se llamara index.html y escribiremos lo siguiente:

index.html

Este es el esqueleto de la nueva página HTML5. Como puedes observar, aún no se ve nada si probamos: http://localhost/ejemplo-html. La única diferencia es que ahora, en vez de verse el directorio en forma de carpetas como antes, ahora se ve la página en blanco y con el título “Ejemplo de HTML5” en la pestaña del navegador. Eso se explica porque ya no está explorando el directorio “ejemplo-html” sino está reproduciendo el archivo index.html que acabamos de crear.

Expliquemos la composición de cada parte del código para entender como trabaja el HTML5.

La declaración <!DOCTYPE> es lo primero que se debe escribir en el documento para indicarle que lo que va a reproducir es un documento html y más en concreto un documento en formato HTML5. Hay que aclarar que esta no es una etiqueta propiamente dicha de un documento HTML5, ya que estas sen encuentran dentro de <html></html>, sino que es una instrucción dirigida a nuestro navegador para aclararle la versión de html se va a encontrar.

Con la etiqueta <html></html> estamos indicándole al navegador que aquí va a estar toda la información que vamos a mostrar en la página web, además, añadiendo el parámetro lang=”es” también estamos declarando que la web estará en el idioma español de España.

<head></head>: es la etiqueta encargada de cargar la cabecera de nuestra web. En la cabecera está toda la información relacionada con las etiquetas meta, el título del documento, carga de archivos externos como las hojas de estilo o los javascript. La cabecera es la parte que no se ve cuando se reproduce el archivo en el navegador, pero será la encargada de que todo funcione perfectamente.

<title></title>: Aquí se pondrá el título del documento como podría ser Home, Aviso Legal, etc. Prueba a cambiar el nombre del título para observar como cambia en la pestaña del navegador y hacerte una idea de cómo puede quedar los nombres de tus páginas.

<meta charset=”utf-8″ />: En este ejemplo solo vamos a trabajar con esta etiqueta meta, aunque, por lo general, las etiquetas meta serán las encargadas de darle un plus de información a nuestra página muy útil, en especial, para los buscadores como Google. La información contenida en este ejemplo es la codificación de nuestra página web, en este caso, UTF-8.

<body></body>: Como su propio nombre indica, la etiqueta body será el cuerpo de nuestra página. Aquí es donde estará ubicado todo el contenido que se quiera mostrar al usuario a través del navegador.

PASO 3: Creación del contenido

Vamos a incorporar una línea a nuestro código general y vamos a escribir un párrafo <p></p> dentro de la etiqueta <body></body>, nuestro primer “Hola Mundo!!!

<p></p>: La etiqueta p indica al navegador que estamos escribiendo un párrafo en nuestra página.

Puedes conocer más sobre las etiquetas de HTML5 aquí: HTML Element Reference.

Por último, sólo te falta visitar http://localhost/ejemplo-html, si seguiste al pie de la letra este tutorial, sino será el nombre de la carpeta que creaste para este proyecto.

Voilà!! Tu primer proyecto en HTML5 creado y listo para ser editado y mejorado.

No te pierdas nuestro próximo tutorial HTML5 para dummies: Lección 2. En él, profundizaremos un poco más entre las diferentes secciones que conforman el body de nuestro HTML y comenzaremos a ver crecer el proyecto creado en este artículo.

Un poco sobre mí...


Co-fundador de elFaroStudio, desarrollador web jefe y SEO. Auténtica pasión por la programación y en especial por el PHP. Más de 5 años de experiencia en el desarrollo web y PHP POO. Experto en HTML5, CSS3, jQuery, Ajax, LAMP y API Rests También toco ramas como el diseño y branding.

También te puede interesar:


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">