Parte 1: ¿Qué es HTML y para qué sirve?
HTML (HyperText Markup Language) es el lenguaje que usamos para estructurar contenido en la web. No es un lenguaje de programación, sino de marcado: usamos etiquetas para decirle al navegador qué mostrar y cómo.
🏗️ Estructura básica de un documento HTML
HTML
Copiar código
<!DOCTYPE HTML>
<HTML Lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>¡Bienvenido a tu primer sitio web!</p>
</body>
</HTML>
🔍 Explicación:
<!DOCTYPE HTML>
<HTML lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“x-ua-Compatible” content=“hola”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<body>: Todo lo que el usuario verá en pantalla.
🧩 Parte 2: Etiquetas esenciales de HTML
📄 Texto:
HTML
Copiar código
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Este es un párrafo de texto.</p>
<strong>Texto en negrita</strong> y <em>texto en cursiva</em>
🔗 Enlaces:
HTML
Copiar código
<a href=“https://www.ejemplo.com”>Ir a ejemplo.com</a>
🖼️ Imágenes:
html
Copiar código
<img src=“imagen.jpg” alt=“Descripción de la imagen”>
📋 Listas:
html
Copiar código
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<ol>
<li>Paso 1</li>
<li>Paso 2</li>
</ol>
🧮 Tablas:
html
Copiar código
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Julián</td>
<td>25</td>
</tr>
</table>
🎨 Parte 3: ¿Qué es CSS y para qué sirve?
CSS (Cascading Style Sheets) sirve para dar estilos a las páginas web: colores, tamaños, posiciones, fuentes, etc.
💅 Formas de usar CSS:
CSS en línea (no recomendado):
html
Copiar código
<p style=“color:red;”>Texto rojo</p>
CSS en el encabezado:
html
Copiar código
<style>
p {
color: blue;
}
</style>
CSS en archivo externo (recomendado):
En index.html:
html
Copiar código
<link rel=“stylesheet” href=“estilos.css”>
En estilos.css:
css
Copiar código
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
🛠️ Parte 4: Mini Proyecto – Mi primera web
- Crea una carpeta llamada mi-pagina
- Dentro crea:
index.html
estilos.css
- Contenido de index.html:
html
Copiar código
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Mi Página Web</title>
<link rel=“stylesheet” href=“estilos.css”>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Esta es una página hecha con HTML y CSS.</p>
<a href=“https://openai.com”>Visita OpenAI</a>
<img src=“https://via.placeholder.com/300” alt=“Imagen de ejemplo”>
</body>
</html> - Contenido de estilos.css:
css
Copiar código
body {
background-color: #e0f7fa;
color: #333;
font-family: ‘Segoe UI’, sans-serif;
text-align: center;
padding: 30px;
}
h1 {
color: #00796b;
}
a {
color: #d32f2f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
📚 Recursos Recomendados
MDN Web Docs (HTML)
MDN Web Docs (CSS)
freeCodeCamp
✅ Siguientes pasos
Una vez domines lo básico, puedes aprender:
CSS avanzado (Flexbox, Grid)
Responsive design (media queries)
JavaScript (para hacer tu sitio interactivo)
Frameworks como React o Vue
