Tutorial de HTML5 para Principiantes: Cree una Sencilla Página Web HTML5 en 30 Minutos

Kasia Mikoluk

Si le pregunta a un desarrollador web, probablemente le diga que HTML5 es lo mejor que le ha pasado a la humanidad desde la invención de la imprenta. HTML5 le ayuda a crear páginas web y aplicaciones potentes e interactivas provisto de las virtudes de CSS3 y jQuery. Se utiliza en cada nuevo sitio/aplicación web y es un conocimiento clave para cualquier desarrollador web. Puede dominar HTML5 apuntándose al curso Aprende HTML5 y CSS3 desde cero y paso a paso.

En este tutorial HTML5 para principiantes, crearemos una sencilla página web con la estructura básica de HTML5.

Lo Que Necesitará

Conocimiento básico de etiquetas HTML como <div></pre> y <pre></div><pre>
Conocimiento básico de CSS
Un editor de texto como Notepad o Notepad++. Puede usar también un editor web profesional como Adobe Dreamweaver.

Creando una Sencilla Web HTML5

La mejor manera de aprender algo es de hecho haciéndolo. Con esto en mente, entraremos de lleno en este tutorial y crearemos nuestra propia web HTML5.

En primer lugar, cree un documento nuevo en su editor de texto favorito. Le recomendamos de forma especial Notepad++, una alternativa gratuita a Notepad.

En el documento en blanco, copie y pegue el siguiente código:

<!DOCTYPE html>

<html lang=”en”>

<head>

        <meta charset=”utf-8”>

        <title>Awesome HTML5 Webpage</title>

        <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>

        <meta name=”author” content=”Udemy”>

        <link rel=”stylesheet” href=”style.css”>

</head>

<body>

        <div id=”wrapper”>

                <header class=”main_headline”>

                        <nav>

                                <ul>

                                        <li><a href=”#”>About</a></li>

                                        <li><a href=”#”>Services</a></li>

                                        <li><a href=”#”>Products</a></li>

                                        <li><a href=”#”>Contact</a></li>

                                </ul>

                        </nav>

                        <h1>Super Duper Awesome Headline! </h1>

                </header>

                <div id=”primary_content”>

                        <section id=”left_column”>

                                <h3>A Hitchhiker’s Guide!</h3>

                                <p>To the Galaxy!</p>

                        </section>

                        <section id=”right_column”>

                                <article>

<header>

<h3>The Answer to Life?</h3>

<p>Published: 30 August 2013</p>

                                        </header>

                                        <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p>

                                        <blockquote>”42”</blockquote>

                                </article>

                        </section>

                </div>

                <footer>

                        <p>The Footer is where all useless info goes!</p>

                </footer>

</div>

</body>

</html>

¿Confundido? No se preocupe. Examinaremos cada línea de código a continuación.

Sáltese la curva de aprendizaje apuntándose a este curso Gratuito sobre las Bases de HTML5.

Entendiendo el Código HTML5

Empecemos por el principio:

<!DOCTYPE html>

La Cabecera

Esta sencilla etiqueta simplemente le dice al explorador “Hey, esto es una página web HTML, así que más vale que la muestres correctamente!” Con HTML5, esta etiqueta se ha simplificado muchísimo. Si tuvieras que usar HTML4, probablemente tendrías que escribir algo como

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">

¿Demasiado para asimilar de una vez, verdad? ¡Por eso HTML5 es el mejor!

<meta charset=”utf-8”>

La etiqueta meta del juego de caracteres permite al explorador usar la codificación apropiada. No se preocupe mucho con esta etiqueta, ¡tan sólo asegúrese de incluirla en su página web!

<title>Awesome HTML5 Webpage</title>

La etiqueta <title> debería serle familiar – es el texto que se muestra en la parte superior de la ventana del explorador. Esta etiqueta es vital para el SEO, así que asegúrese de elegir las palabras clave correctamente.

<meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>

 <meta name=”author” content=”Udemy”>

La primera etiqueta meta, como quizás sepa, da una breve descripción de la página web. Aunque tiene beneficios auténticos en términos de SEO, los motores de búsqueda a menudo muestran esta descripción en los resultados de búsqueda, así que es una buena práctica a incorporar en sus páginas web.

La segunda etiqueta meta, autor, le indica al explorador el autor de la página. Aquí, hemos usado Udemy, pero debería usar su nombre o el nombre de su empresa en la propiedad “content”.

<link rel=”stylesheet” href=”style.css”>

No hay grandes cambios de HTML4 a HTML5 en la etiqueta link que se utiliza para indicar ficheros externos. Aquí, estamos usando la etiqueta para referirnos a una hoja de estilo CSS almacenada externamente, style.css.

Eso es todo en cuanto a la sección <head>. ¡Ahora echemos un vistazo a <body>!

El Contenido Principal

<div id=”wrapper”>

<div> como los veteranos de HTML4 sabrán, es una etiqueta que se utiliza para identificar una parte concreta de una página web. Una división puede ser tan grande o pequeña como quiera – puede incluir una página web entera, o sólo la primera línea de un párrafo. Aquí, hemos creado un <div> con un ‘id’ CSS “wrapper” Este envoltorio especifica el ancho de la página completa y encierra todo el contenido.

¿Preocupado por los distintos anchos de su web? ¡Domine el diseño web responsive con HTML5 y CSS3 con este curso y consiga que su página web se vea bien en cualquier plataforma!

<header class=”main_headline”>

<header> es una nueva etiqueta en HTML5. Aunque no tiene una función concreta, consigue una página web más semántica. Incluya la etiqueta <header> en cualquier lugar donde se refiera a una cabecera – el título principal, el subtítulo, etc.

Aquí, hemos asignado también a la cabecera una clase “main_headline”.

[Nota: la diferencia entre ‘id’ y ‘class’ es que un ‘id’ sólo puede usarse una sola vez en la página web, mientras que una ‘clase’ puede usarse tantas veces como quiera.]

<nav>

Siguiendo con el objetivo de HTML5 de crear una web más semántica, la etiqueta <nav> se introdujo para hacer referencia al menú de navegación. Como la etiqueta <header>, no tiene más función que identificar el menú de navegación y facilitar la personalización del estilo.

Después de la etiqueta <nav>, hemos usado una simple lista desordenada para crear los elementos del menú. Esto debería ser familiar para cualquier persona con experiencia anterior con HTML, así que no profundizaremos en ello.

<div id=”primary_content”>

Otra etiqueta <div> para identificar el contenido principal de la cabecera y aplicar CSS a medida.

<section id=”left_column”>

La etiqueta <section> es otra etiqueta nueva introducida en HTML5. Como el nombre sugiere, se usa para referirse a cualquier sección de la página web (en este ejemplo, una columna flotante izquierda). Funcionalmente, es igual que <pre><div></pre> pero tiene más coherencia semántica.

<article>

Esta es una etiqueta HTML5 que se refiere a una pieza autónoma de contenido en una página web. Normalmente, esto comprende publicaciones de blogs, artículos, publicaciones de foros, etc. Puede usarlo como un <pre><div></pre>. Aquí, lo hemos usado para indicar el contenido principal de la página web.

<footer>

<footer> es otra etiqueta semántica HTML5 que se usa para identificar el área del pie. Aunque pueda usar <div>, <footer> es más fácil de leer, tanto para los navegadores como para sus compañeros desarrolladores.

¡Eso es todo! ¡Usted ya ha realizado su página web HTML5!

Guarde su página como “index.html” en su Escritorio (asegúrese de que selecciona ‘Todos los Ficheros’ en lugar de ‘Fichero de Texto’ en el cuadro de diálogo de guardado si usa Notepad). Haga doble-click para abrirlo en su navegador. Si hizo todo lo anterior, debería ver la siguiente página web:

¿No muy bonita, verdad? Para ello, deberá usar CSS para crear una hoja de estilo personalizada (style.css) y enlazarla. El CSS básico es bastante sencillo, y este curso HTML5, CSS3 y Javascript le ayudará a ser todo un experto en ello.

Hasta aquí llega nuestro tutorial HTML5 para principiantes. Crear una página sencilla es sólo el punto de partida; HTML5 puede ayudarte a desarrollar increíbles apps, páginas web interactivas, y mucho más.

¿Cuál es tu manera favorita de usar HTML5? ¡Compártelo con nosotros en los comentarios más abajo!!