Un documento HTML básico incluye tres etiquetas principales que estructuran su contenido:
- <html>: Es el contenedor principal que engloba todo el contenido de la página web.
- Todo el código HTML debe ir dentro de esta etiqueta.
- <head>: Contiene información «invisible» para el usuario pero esencial para el navegador, como:
- El título de la página (
<title>), que aparece en la pestaña del navegador. - Metadatos (
<meta>), como el conjunto de caracteres (charset) o la descripción de la página. - Enlaces a hojas de estilo externas y scripts.
- El título de la página (
- <body>: Contiene el contenido visible para el usuario, como:
- Encabezados, párrafos, imágenes, enlaces, tablas y más.
Cómo crear tu primer archivo HTML
- Abre un editor de texto (por ejemplo, Visual Studio Code).
- Escribe el siguiente código básico:
<!DOCTYPE html><html><head><title>Mi primera página HTML</title><meta charset="UTF-8"></head><body><h1>¡Bienvenido a HTML!</h1><p>Esta es la estructura básica de un documento HTML.</p></body></html> - Guarda el archivo con la extensión
.html. - Ábrelo en tu navegador para ver el resultado.
Introducción al estándar HTML5
HTML5 es la versión más reciente del lenguaje HTML. Introduce nuevas características que mejoran la semántica, la accesibilidad y el soporte multimedia. Algunas de sus principales mejoras incluyen:
- Etiquetas semánticas nuevas:
<header>,<footer>,<article>,<section>para una mejor organización del contenido. - Soporte multimedia: Etiquetas
<audio>y<video>para reproducir contenido sin necesidad de complementos externos. - Mejora en formularios: Nuevos atributos y tipos de entrada como
email,dateynumber. - Compatibilidad móvil: Mejor rendimiento en dispositivos móviles y tablets.
HTML5 es compatible con la mayoría de los navegadores modernos, por lo que se recomienda su uso en todos los proyectos actuales.
Actividades
- Reconocer la estructura básica:
- Abre el archivo de una página web en el navegador y utiliza la herramienta «Inspeccionar» para identificar las etiquetas
<html>,<head>y<body>.
- Abre el archivo de una página web en el navegador y utiliza la herramienta «Inspeccionar» para identificar las etiquetas
- Crear una página con información personal:
- Escribe un archivo HTML con la siguiente estructura:
<!DOCTYPE html><html><head><title>Sobre mí</title><meta charset="UTF-8"></head><body><h1>Mi página personal</h1><p>Mi nombre es [tu nombre]. Estoy aprendiendo HTML.</p></body></html> - Guárdalo como
sobre_mi.htmly ábrelo en tu navegador.
- Escribe un archivo HTML con la siguiente estructura:
- Practicar con HTML5:
- Crea un documento que utilice las etiquetas
<header>,<article>y<footer>. Por ejemplo:<!DOCTYPE html><html><head><title>Página con HTML5</title><meta charset="UTF-8"></head><body><header><h1>Bienvenido a mi sitio</h1></header><article><h2>Mi primer artículo</h2><p>Este es un ejemplo de cómo usar etiquetas semánticas.</p></article><footer><p>Creado por [tu nombre].</p></footer></body></html>
- Crea un documento que utilice las etiquetas
- Explorar validación:
- Usa una herramienta de validación como https://validator.w3.org/ para comprobar si tu archivo HTML sigue los estándares.
Deja una respuesta