¿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
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Mi Primera pagina</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>¡Bienvenido a tu primer sitio web!</p>
</body>
</HTML>
Explicación:
<!DOCTYPE html>: Le dice al navegador que estamos usando HTML5.
<html>: Etiqueta raíz del documento.
<head>: Información que no se muestra directamente (título, codificación).
<body>: Todo lo que el usuario verá en pantalla.
Parte 2: Etiquetas esenciales de HTML
<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:
<img src=“https://images.pexels.com/photos/69932/tabby-cat-close-up-portrait-69932.jpeg” alt=“cat”>
Listas:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<ol>
<li>Paso 1</li>
<li>Paso 2</li>
</ol>
Tablas:
<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):
:p style=“color:red;”>Texto rojo</p>
CSS en el encabezado:
<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:
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
3 Contenido de index.html:
<!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:
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;
}
