Ejemplo de código HTML de una página web: Una introducción completa
Este artículo te proporcionará un ejemplo completo de código HTML para una página web, explicando cada parte para que puedas comprender cómo funciona y adaptarlo a tus propias necesidades. Aprenderás los fundamentos del HTML y cómo crear una página web básica, desde la estructura principal hasta la inclusión de elementos multimedia.
La estructura básica de una página HTML
Toda página web comienza con la estructura básica del lenguaje HTML. Esta estructura define la organización del contenido y cómo el navegador interpretará el código. Aquí tienes un ejemplo sencillo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
<h1>Bienvenidos a mi página web</h1>
<p>Este es un párrafo de ejemplo. Puedes añadir aquí todo el texto que desees.</p>
</body>
</html>
Vamos a desglosar cada parte:
-
<!DOCTYPE html>: Esta declaración indica al navegador que el documento es una página HTML5. Es crucial para la correcta interpretación del código. -
<html lang="es">: Esta etiqueta raíz envuelve todo el documento. El atributolang="es"especifica que el idioma principal de la página es español. Cambia esto al código de idioma apropiado para tu sitio web. -
<head>: Esta sección contiene metadatos que no se muestran directamente en la página, pero son importantes para el funcionamiento y la optimización del sitio web.<meta charset="UTF-8">: Define la codificación de caracteres, asegurando que los caracteres especiales se muestren correctamente. UTF-8 es la codificación más común y recomendada.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esta metaetiqueta es fundamental para la visualización en dispositivos móviles. Asegura que la página se ajuste correctamente a diferentes tamaños de pantalla.<title>Mi primera página web</title>: Define el título que aparece en la pestaña del navegador. Es importante para el SEO (Search Engine Optimization) y la experiencia del usuario.
-
<body>: Esta sección contiene el contenido visible de la página web.<h1>Bienvenidos a mi página web</h1>: Un encabezado de nivel 1. Los encabezados (h1 a h6) estructuran el contenido de la página y son importantes para la accesibilidad y el SEO.<p>Este es un párrafo de ejemplo...</p>: Un párrafo de texto.
Añadiendo más elementos: Imágenes y enlaces
Podemos enriquecer nuestra página web añadiendo imágenes y enlaces:
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Metadatos (igual que el ejemplo anterior) -->
</head>
<body>
<h1>Bienvenidos a mi página web</h1>
<p>Este es un párrafo con una <a href="https://www.ejemplo.com">enlace a un sitio web</a>.</p>
<img src="mi_imagen.jpg" alt="Descripción de la imagen">
</body>
</html>
<a href="https://www.ejemplo.com">enlace a un sitio web</a>: Crea un enlace hipertexto. Reemplazahttps://www.ejemplo.comcon la URL deseada.<img src="mi_imagen.jpg" alt="Descripción de la imagen">: Inserta una imagen. Reemplaza"mi_imagen.jpg"con la ruta a tu imagen. El atributoaltproporciona una descripción textual de la imagen, esencial para la accesibilidad y el SEO.
Conclusión
Este ejemplo proporciona una base sólida para comenzar a construir tus propias páginas web. Recuerda que este es solo un punto de partida. El HTML ofrece una gran variedad de elementos y atributos para crear sitios web complejos y atractivos. Explora más etiquetas y atributos para expandir tus conocimientos y crear páginas web dinámicas y funcionales. La práctica constante es la clave para dominar el desarrollo web.
