Introducción a HTML: La base de la web
Luis Sanchez
17 Jun 2024
El Lenguaje de Marcado de Hipertexto (HTML, por sus siglas en inglés) es el estándar fundamental para crear páginas web. HTML proporciona la estructura de una página web, permitiendo a los desarrolladores definir elementos como encabezados, párrafos, enlaces, imágenes y mucho más.
¿Qué es HTML?
HTML es un lenguaje de marcado que se utiliza para estructurar el contenido en la web. Un documento HTML está compuesto por una serie de elementos, cada uno de los cuales se representa con etiquetas. Estas etiquetas son interpretadas por los navegadores web para renderizar la página correctamente.
Estructura básica de un documento HTML
Cada documento HTML comienza con una declaración <!DOCTYPE html> y se organiza en secciones usando etiquetas específicas. Aquí hay un ejemplo de la estructura básica de un documento HTML:
<!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>¡Hola, mundo!</h1>
<p>Este es mi primer documento HTML.</p>
</body>
</html>
Estructura del código
<!DOCTYPE html>: Declara el tipo de documento y la versión de HTML.
<html lang="es">: La etiqueta <html> define el inicio de un documento HTML y el atributo lang especifica el idioma del contenido.
<head>: Contiene metadatos sobre el documento, como el conjunto de caracteres (<meta charset="UTF-8">), la configuración de la ventana gráfica (<meta name="viewport" content="width=device-width, initial-scale=1.0">), y el título de la página (<title>).
<body>: Contiene el contenido visible de la página web. En este ejemplo, tenemos un encabezado (<h1>) y un párrafo (<p>).
Elementos comunes de HTML
Encabezados: HTML ofrece seis niveles de encabezados, desde <h1> hasta <h6>, siendo <h1> el más importante y <h6> el menos importante.
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
Párrafos: Los párrafos se definen con la etiqueta <p>.
<p>Este es un párrafo en HTML.</p>
Enlaces: Los enlaces se crean con la etiqueta <a> y el atributo href.
<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>Imágenes: Las imágenes se insertan usando la etiqueta <img> y el atributo src.
<img src="imagen.jpg" alt="Descripción de la imagen">
Listas: HTML soporta listas ordenadas (<ol>) y listas desordenadas (<ul>).
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ul>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
Ejemplo completo
Aquí tienes un ejemplo de una página HTML más completa que utiliza varios de los elementos que hemos discutido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página web completa</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section id="inicio">
<h2>Inicio</h2>
<p>Esta es la sección de inicio de mi página web. Aquí presento un breve resumen de lo que encontrarás en mi sitio.</p>
</section>
<section id="sobre-mi">
<h2>Sobre mí</h2>
<p>Hola, soy un desarrollador web apasionado por crear sitios web dinámicos y funcionales. Tengo experiencia en HTML, CSS y JavaScript.</p>
<img src="mi-foto.jpg" alt="Foto de mí">
</section>
<section id="contacto">
<h2>Contacto</h2>
<p>Si deseas contactarme, puedes enviarme un correo a <a href="mailto:ejemplo@correo.com">ejemplo@correo.com</a>.</p>
</section>
<footer>
<p>© 2024 Mi Nombre. Todos los derechos reservados.</p>
</footer>
</body>
</html>