Curso de HTML y CSS desde Cero
Aprende a construir y diseñar tu primera página web. Domina la estructura con HTML y dale vida con el estilo de CSS. ¡Sin tecnicismos y a tu propio ritmo!
¡Construye tu primera Página Web!
Bienvenido al curso definitivo para empezar en el desarrollo web. Aquí aprenderás las dos tecnologías fundamentales que forman la base de cada sitio en internet: HTML y CSS.
¿Qué aprenderás?
- La diferencia entre Frontend y Backend, y cómo funciona la web.
- A estructurar contenido web usando las etiquetas más importantes de HTML.
- A darle color, forma y diseño a tus páginas con CSS.
- Cómo usar selectores de CSS para apuntar a elementos específicos.
- A crear tu propio proyecto de portafolio para mostrar tus nuevas habilidades.
HTML
La estructura y el contenido.
CSS
El diseño y la apariencia.
Proyecto
Aplica todo lo aprendido.
Módulo 1: Fundamentos Web
¿Qué es el frontend?
El Frontend es todo lo que el usuario ve y con lo que interactúa en una página web. Es la combinación de HTML (la estructura), CSS (el estilo visual) y JavaScript (la interactividad).
¿Cómo funciona la Web? Arquitectura Cliente-Servidor
Piénsalo como si pidieras comida en un restaurante:
- Cliente (Tu navegador): Pide la página web.
- Servidor (Una computadora en internet): Recibe el pedido y busca los archivos (HTML, CSS).
- Respuesta: El servidor envía los archivos de vuelta a tu navegador, que los interpreta para mostrarte el sitio.
Módulo 2: HTML, el Esqueleto
¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje que da estructura a una web usando etiquetas. No es un lenguaje de programación.
Etiquetas Esenciales
- Textos:
<h1>a<h6>para títulos,<p>para párrafos,<strong>para negrita. - Enlaces:
<a href="https://...">Texto del enlace</a>. - Imágenes:
<img src="ruta/imagen.jpg" alt="texto descriptivo">. - Listas:
<ul>(desordenada) y<ol>(ordenada), con elementos<li>dentro.
Crea tu primera web
Copia esto en un archivo, guárdalo como index.html y ábrelo en tu navegador.
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Web</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Aprendiendo HTML.</p>
<a href="https://ciborg.cl">Visita Ciborg.cl</a>
</body>
</html>Módulo 3: CSS, el Estilo
¿Qué es CSS y cómo se añade?
CSS (Cascading Style Sheets) es el lenguaje para diseñar y dar estilo a tu HTML. La mejor forma de añadirlo es creando un archivo estilos.css y enlazándolo en el <head> de tu HTML así:
<link rel="stylesheet" href="estilos.css">Selectores: Elementos, Clases y ID
Los selectores le dicen a CSS a qué elemento aplicar un estilo.
- Selector de Elemento: Apunta a todas las etiquetas de un tipo. (ej:
p,h1,body). - Selector de Clase (
.): Apunta a cualquier elemento conclass="nombre-clase". Es reutilizable. - Selector de ID (
#): Apunta a un ÚNICO elemento conid="nombre-id". No debe repetirse.
En tu archivo `estilos.css` podrías tener:
/* Estilo para todo el cuerpo de la página */
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
/* Estilo para un título principal único */
#titulo-principal {
color: #bf360c;
}
/* Estilo reutilizable para textos destacados */
.texto-importante {
font-weight: bold;
color: #d84315;
}estilos.css y enlázalo a tu index.html. Intenta cambiar el color de fondo del `body` y el color del `h1`.
Módulo 4: Proyecto Final
¡Crea tu Portafolio Personal!
Es hora de aplicar todo lo que aprendiste. Tu desafío es crear una página web simple sobre ti.
Requisitos de la página:
- Un archivo
index.htmlpara la estructura. - Un archivo
estilos.csspara el diseño. - Debe incluir: un título principal (
<h1>) con tu nombre, una foto tuya (<img>), un párrafo (<p>) sobre ti, y una lista (<ul>) de tus habilidades o hobbies. - Dale estilo con CSS: cambia colores, fuentes, y añade márgenes para que se vea ordenado.
¿Cómo usar plantillas?
En el futuro, puedes acelerar tu trabajo usando plantillas HTML/CSS. Una plantilla es un diseño pre-hecho. Tu trabajo es simplemente abrir el HTML, reemplazar el contenido de ejemplo con el tuyo, y ajustar los colores y fuentes en el archivo CSS para que coincida con tu marca. ¡Es una habilidad fundamental!
Quiz Final: Pon a Prueba tus Conocimientos
Responde estas preguntas para evaluar lo que has aprendido. ¡Demuestra que dominas HTML y CSS!