Introducción a HTML
¿Alguna vez te has preguntado cómo se crean las páginas web que visitas a diario? Desde blogs personales hasta tiendas en línea, todo comienza con un lenguaje sencillo pero poderoso: HTML (HyperText Markup Language).
En este artículo, exploraremos los fundamentos de HTML, el lenguaje base para estructurar el contenido de una página web. Si siempre has querido aprender desarrollo web, este es el lugar perfecto para comenzar.
¿Qué es HTML?
HTML es el lenguaje de marcado que usamos para estructurar el contenido de una página web. Se compone de etiquetas que indican al navegador cómo mostrar texto, imágenes, videos y otros elementos.
Por ejemplo, el siguiente código muestra un encabezado y un párrafo en una página web:
<!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</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Esta es mi primera página web hecha con HTML.</p>
</body>
</html>Anatomía de una página HTML
- : Declara el tipo de documento y asegura la compatibilidad con navegadores modernos.
- : Es el contenedor principal de toda la página.
-
: Contiene información sobre la página, como el título (
) y metadatos. 4. <body>: Aquí va el contenido visible de la página, como texto, imágenes y enlaces.
Principales etiquetas de HTML
A continuación, algunas etiquetas esenciales para comenzar:
- Encabezados: Se utilizan para títulos y subtítulos.
<h1>Título Principal</h1>- Subencabezados: Se utilizan para subtítulos dentro de encabezados.
<h2>Subtítulo</h2>
• Párrafos: Para agregar texto.
<p>Este es un párrafo.</p>
• Enlaces: Para conectar a otras páginas.
<a href="https://example.com">Visita Example</a>
• Imágenes: Para mostrar imágenes.
<img src="imagen.jpg" alt="Descripción de la imagen">
¿Por qué aprender HTML?
1. Accesible para todos: No necesitas experiencia previa en programación.
2. Base del desarrollo web: Es el primer paso para aprender CSS y JavaScript.
3. Creatividad: Puedes crear tu propio sitio web personalizado desde cero.
Prueba por ti mismo
Copia el siguiente código en tu computadora, guárdalo como index.html y ábrelo en tu navegador:
<!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</title>
</head>
<body>
<h1>¡Bienvenido a HTML!</h1>
<p>Esta es mi primera página web. ¡Estoy aprendiendo desarrollo web!</p>
</body>
</html>
¿Qué sigue?
En los próximos artículos, aprenderás a:
• Dar estilo a tu página con CSS.
• Hacerla interactiva con JavaScript.
• Publicarla en Internet para que otros puedan verla.
¡Es hora de dar vida a tus ideas!
Si tienes alguna duda, deja un comentario o únete a nuestra comunidad de aprendizaje. ¡Nos vemos en el próximo artículo!