HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de Programación de Aplicaciones) y la especificación de CSS3 por completo no son parte del mismo, HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto que (como veremos más adelante) es extremadamente significativo.
Más allá de esta integración, la estructura sigue siendo parte esencial de un documento. La misma provee los elementos necesarios para ubicar contenido estático o dinámico, y es también una plataforma básica para aplicaciones. Con la variedad de dispositivos para acceder a Internet y la diversidad de interfaces disponibles para interactuar con la web, un aspecto básico como la estructura se vuelve parte vital del documento. Ahora la estructura debe proveer forma, organización y flexibilidad, y debe ser tan fuerte como los fundamentos de un edificio.
Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero cómo esa estructura es construida. Crear fundamentos fuertes nos ayudará más adelante a aplicar el resto de los componentes para aprovechar completamente estas nuevas tecnologías.
Por lo tanto, empecemos por lo básico, paso a paso. En este primer capítulo aprenderá cómo construir una plantilla para futuros proyectos usando los nuevos elementos HTML introducidos en HTML5.
Hágalo usted mismo: Cree un archivo de texto vacío utilizando su editor de textos favorito para probar cada código presentado en este capítulo. Esto lo ayudará a recordar las nuevas etiquetas HTML y acostumbrarse a ellas.
Conceptos básicos: Un documento HTML es un archivo de texto. Si usted no posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser grabado con la extensión .html y el nombre que desee (por ejemplo, micodigo.html).
El gran libro de HTML5, CSS3 y Javascript
IMPORTANTE: Para acceder a información adicional y a los listados de ejemplo, visite nuestro sitio web www.minkbooks.com.
1. Declaración del Tipo de Documento (<!DOCTYPE html>)
- Función: Indica al navegador que el documento es un archivo HTML5. Esta declaración asegura que el navegador interprete el código con el estándar HTML5, que es el más actualizado y compatible con las últimas tecnologías web.
2. Elemento Raíz (<html>)
<html lang="es">
<!-- Contenido aquí -->
</html>
- Función: Contiene todo el contenido de la página web. El atributo
langespecifica el idioma del contenido para mejorar la accesibilidad y el SEO.
3. Cabecera (<head>)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
- Función: Contiene metadatos y enlaces a recursos externos como hojas de estilo CSS y archivos JavaScript. Es esencial para la configuración inicial de la página.
<meta charset="UTF-8">: Define la codificación de caracteres para que el texto se muestre correctamente.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Asegura que la página se muestre correctamente en dispositivos móviles al ajustar el ancho del viewport al ancho del dispositivo.<title>: Especifica el título que aparece en la pestaña del navegador.<link rel="stylesheet" href="styles.css">: Enlaza una hoja de estilos externa para aplicar el diseño visual a la página.<script src="script.js" defer></script>: Incluye un archivo de script JavaScript para agregar interactividad a la página. El atributodeferindica que el script debe ejecutarse después de que el documento haya sido completamente analizado.
4. Cuerpo (<body>)
<body>
<!-- Contenido visible aquí -->
</body>
- Función: Contiene todo el contenido que será visible en la página web, como texto, imágenes, enlaces, y otros elementos.
5. Encabezado (<header>)
<header>
<h1>Bienvenido a Mi Sitio Web</h1>
<p>Descripción breve del sitio</p>
</header>
- Función: Generalmente incluye el título del sitio, el logotipo, y a veces la navegación principal. Proporciona una introducción o una vista general de la página.
6. Menú de Navegación (<nav>)
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre Nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
- Función: Contiene enlaces de navegación para que los usuarios puedan moverse fácilmente entre las diferentes secciones del sitio web.
7. Contenido Principal (<main>)
<main>
<section id="home">
<h2>Inicio</h2>
<p>Contenido principal de la página.</p>
</section>
<article id="about">
<h2>Sobre Nosotros</h2>
<p>Información sobre la empresa.</p>
</article>
<section id="services">
<h2>Servicios</h2>
<p>Descripción de los servicios ofrecidos.</p>
</section>
</main>
- Función: Contiene el contenido principal de la página, excluyendo elementos repetitivos como el encabezado y el pie de página. Utiliza elementos semánticos como
<section>y<article>para organizar el contenido de manera lógica.
8. Contenido Adicional (<aside>)
<aside>
<h3>Noticias Recientes</h3>
<p>Últimas actualizaciones y noticias.</p>
</aside>
- Función: Proporciona información adicional o complementaria que no es parte del contenido principal, como barras laterales, enlaces adicionales, o anuncios.
9. Pie de Página (<footer>)
<footer>
<p>© 2024 Mi Página Web. Todos los derechos reservados.</p>
</footer>
- Función: Contiene información de cierre, como derechos de autor, información de contacto, y enlaces importantes. Aparece al final de la página.
10. Elementos de Contenido Específico
- Encabezados (
<h1>,<h2>, …,<h6>): Definen los encabezados de diferentes niveles, desde el más importante (<h1>) al menos importante (<h6>). - Párrafos (
<p>): Definen bloques de texto. - Enlaces (
<a>): Crean enlaces a otras páginas o recursos. - Imágenes (
<img>): Insertan imágenes en la página. - Listas (
<ul>,<ol>,<li>): Definen listas no ordenadas (bullets) y ordenadas (numeradas).
11. Formularios (<form>)
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="submit">Enviar</button>
</form>
- Función: Permite a los usuarios enviar datos a través de la web. Incluye controles de formulario como
<input>,<textarea>,<select>, y<button>.