HTML5 es la quinta y última versión del lenguaje HTML. Incluye nuevas funcionalidades que permiten crear sitios web más dinámicos y potentes.
Estructura Básica de un Documento HTML5
Todo documento HTML5 debe comenzar con una declaración de tipo de documento (<!DOCTYPE html>) y una estructura básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es un párrafo en HTML5.</p>
</body>
</html>
Elementos Básicos
Encabezados
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
Párrafos
<p>Este es un párrafo.</p>
Enlaces
<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>
Imágenes
<img src="ruta/a/imagen.jpg" alt="Descripción de la imagen">
Formularios
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>
Listas
Lista Desordenada
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Lista Ordenada
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Tablas
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
<tr>
<td>Dato 3</td>
<td>Dato 4</td>
</tr>
</tbody>
</table>
Elementos Semánticos de HTML5
HTML5 introdujo varios elementos semánticos que ayudan a estructurar mejor el contenido de una página web.
Encabezado
<header>
<h1>Encabezado del Sitio</h1>
</header>
Sección
<section>
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>
</section>
Artículo
<article>
<h2>Artículo 1</h2>
<p>Contenido del artículo 1.</p>
</article>
Navegación
<nav>
<ul>
<li><a href="#seccion1">Sección 1</a></li>
<li><a href="#seccion2">Sección 2</a></li>
</ul>
</nav>
Pie de Página
<footer>
<p>Pie de página del sitio.</p>
</footer>
Multimedia en HTML5
Video
<video controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta la etiqueta de audio.
</audio>
Canvas
El elemento <canvas> se usa para dibujar gráficos mediante scripting (normalmente JavaScript).
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("miCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Almacenamiento Web
HTML5 introduce dos nuevos objetos de almacenamiento para guardar datos en el navegador del usuario: localStorage y sessionStorage.
<script>
// Guardar datos en localStorage
localStorage.setItem("nombre", "Juan");
// Recuperar datos de localStorage
var nombre = localStorage.getItem("nombre");
console.log(nombre); // Juan
</script>
Geolocalización
HTML5 incluye una API de Geolocalización que permite obtener la ubicación del usuario.
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarPosicion);
} else {
console.log("Geolocalización no es soportada por este navegador.");
}
function mostrarPosicion(posicion) {
console.log("Latitud: " + posicion.coords.latitude +
" - Longitud: " + posicion.coords.longitude);
}
</script>
Drag and Drop
HTML5 permite arrastrar y soltar elementos dentro de una página web.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>Arrastra el texto a la caja inferior:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">Texto arrastrable</p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Este tutorial cubre las bases de HTML5. Puedes expandir tus conocimientos explorando más sobre CSS3 y JavaScript para crear sitios web más interactivos y estilizados. ¿Hay algún tema en particular que te gustaría profundizar?
Etiquetas Semánticas
<header>
Define una cabecera para un documento o una sección. Se utiliza típicamente para contener información introductoria o de navegación.
<header>
<h1>Título del Sitio</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>
</nav>
</header>
Define un bloque de enlaces de navegación.
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>
</nav>
Define una sección en un documento. Se utiliza para agrupar contenido temáticamente relacionado.
<section>
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>
</section>
Define un contenido independiente y autónomo que puede ser distribuido de forma independiente o reutilizable.
<article>
<h2>Artículo 1</h2>
<p>Contenido del artículo 1.</p>
</article>
Define contenido aparte que está relacionado con el contenido principal. Se utiliza típicamente para barras laterales, listas de enlaces relacionados, etc.
<aside>
<h2>Enlaces Relacionados</h2>
<ul>
<li><a href="#link1">Enlace 1</a></li>
<li><a href="#link2">Enlace 2</a></li>
</ul>
</aside>
Define un pie de página para un documento o una sección. Se utiliza típicamente para información de autor, enlaces de derechos de autor, etc.
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
Etiquetas Multimedia
<audio>: Define contenido de audio.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta la etiqueta de audio.
</audio>
<video>: Define contenido de video.
<video controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>
<canvas>: Define un área en la que se pueden dibujar gráficos utilizando JavaScript.
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("miCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
<figure> y <figcaption>: Se utilizan para asociar contenido con su leyenda, como imágenes con subtítulos.
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Esta es una leyenda para la imagen.</figcaption>
</figure>
Etiquetas de Formularios
<datalist>: Proporciona una lista de opciones predefinidas para un elemento <input>.
<input list="navegadores" name="navegador">
<datalist id="navegadores">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<output>
Representa el resultado de un cálculo.
<form oninput="resultado.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="50">
= <output name="resultado" for="a b">100</output>
</form>
Etiquetas de Estructura y Agrupación
<main>: Especifica el contenido principal del documento. Debe haber solo un elemento <main> por documento.
<main>
<h1>Contenido Principal</h1>
<p>Este es el contenido principal del documento.</p>
</main>
<mark>: Destaca texto importante.
<p>Este es un texto con <mark>resaltado</mark>.</p>
<time>: Representa una fecha, hora o ambas.
<time datetime="2024-07-31">31 de Julio de 2024</time>
<progress>: Representa el progreso de una tarea.
<progress value="70" max="100">70%</progress>
<meter>: Representa una medida escalar dentro de un rango conocido.
<meter value="2" min="0" max="10">2 de 10</meter>
Estas etiquetas y sus usos mejoran la semántica y funcionalidad de las páginas web, haciendo que el contenido sea más accesible y fácil de manejar tanto para desarrolladores como para motores de búsqueda y tecnologías asistivas.
No hay comentarios.:
Publicar un comentario