Manual Básico de HTML y CSS
1. ¿Qué es HTML? (HyperText Markup Language)
HTML es el lenguaje que usamos para darle estructura a nuestra página web. Imagina que quieres escribir una carta: necesitas un título, párrafos,
quizás una lista de puntos. HTML hace eso mismo para la web.
Conceptos Clave de HTML:
• Etiquetas (Tags): Son las piezas fundamentales de HTML. La mayoría de las etiquetas vienen en pares: una de apertura y una de cierre. Por
ejemplo, <p> abre un párrafo y </p> lo cierra. Todo lo que esté entre ellas será parte de ese párrafo.
• Ejemplo: <p>¡Hola, mundo!</p>
• Elementos: Es la etiqueta de apertura, la de cierre y todo el contenido que hay entre ellas. Así, <p>Este es un párrafo.</p> es un
elemento de párrafo.
• Atributos: Son información extra que le damos a las etiquetas para modificarlas. Se colocan dentro de la etiqueta de apertura.
• Ejemplo: <a href="[Link] a Google</a>. Aquí, href es un atributo que le dice al navegador a
dónde ir cuando haces clic en el enlace.
Estructura Básica de un Documento HTML:
Todos los documentos HTML siguen una estructura básica:
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>¡Bienvenidos a mi sitio!</h1>
<p>Estoy aprendiendo HTML y CSS.</p>
</body>
</html>
• <!DOCTYPE html>: Le dice al navegador que es un documento HTML5 (la versión más reciente).
• <html lang="es">: Es la etiqueta principal que engloba todo el contenido de la página. lang="es" indica que el idioma principal es
español.
• <head>: Aquí va la información sobre tu página que no es visible para el usuario, como el título de la pestaña del navegador, el tipo de
codificación, etc.
• <meta charset="UTF-8">: Asegura que los caracteres especiales (como la "ñ" o los acentos) se muestren correctamente.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Es importante para que tu
página se vea bien en celulares y tabletas.
• <title>: El texto que aparece en la pestaña del navegador.
• <body>: ¡Esta es la parte importante! Todo lo que escribas aquí dentro es lo que realmente verán los usuarios en tu página web.
Etiquetas HTML Comunes:
Etiqueta Descripción Ejemplo
<h1> a <h6> Encabezados (títulos y subtítulos) <h1>Título Principal</h1>
<p> Párrafo de texto <p>Este es un párrafo.</p>
<a> Enlace (para ir a otra página) <a href="[Link]">Clic aquí</a>
<img> Imagen <img src="[Link]" alt="Descripción">
<ul> Lista desordenada (con viñetas) <ul><li>Ítem 1</li></ul>
<ol> Lista ordenada (numerada) <ol><li>Primer Ítem</li></ol>
<li> Ítem de lista (dentro de <ul> o <ol>) (Ver ejemplos anteriores)
<div> Contenedor genérico (para agrupar contenido) <div>...</div>
<span> Contenedor genérico para texto en línea <span>...</span>
<br> Salto de línea (no necesita etiqueta de cierre) Texto<br>en otra línea
<strong> Texto en negrita (semántico) <strong>Importante</strong>
<em> Texto en cursiva (semántico) <em>Énfasis</em>
Exportar a Hojas de cálculo
¡Intenta esto! Abre un editor de texto simple (como el Bloc de Notas en Windows, TextEdit en Mac o VS Code si ya lo tienes) y copia el código de la
estructura básica. Guarda el archivo como [Link] y ábrelo con tu navegador. ¡Verás tu primera página web!
2. ¿Qué es CSS? (Cascading Style Sheets)
CSS es el lenguaje que usamos para darle estilo a nuestra página web. Si HTML es el esqueleto, CSS es la ropa, los colores, las fuentes y la forma en
que se ve cada cosa. Con CSS, puedes hacer que tu página sea atractiva y fácil de leer.
Conceptos Clave de CSS:
• Selectores: Son la forma en que le decimos a CSS a qué elementos de HTML queremos aplicar un estilo.
• Propiedades: Son las características que queremos cambiar (por ejemplo, el color, el tamaño de la letra, el fondo).
• Valores: Son lo que le asignamos a cada propiedad (por ejemplo, red para el color, 16px para el tamaño).
¿Cómo Conectar CSS con HTML?
La forma más común y recomendada es usar una hoja de estilos externa. Creas un archivo CSS separado y lo vinculas a tu HTML.
1. Crea un nuevo archivo en el mismo lugar donde guardaste [Link] y llámalo [Link].
2. En tu archivo [Link], dentro de la etiqueta <head>, agrega esta línea:
HTML
<link rel="stylesheet" href="[Link]">
Ahora, todo lo que escribas en [Link] afectará a tu [Link].
Reglas CSS Básicas:
Una regla CSS se ve así:
CSS
selector {
propiedad: valor;
propiedad: valor;
}
Ejemplo:
CSS
/* Esto es un comentario en CSS */
body {
background-color: lightblue; /* Cambia el color de fondo de toda la página */
font-family: Arial, sans-serif; /* Cambia el tipo de letra */
}
h1 {
color: navy; /* Cambia el color del texto de los h1 a azul oscuro */
text-align: center; /* Centra el texto */
}
p {
font-size: 18px; /* Cambia el tamaño de la letra de los párrafos */
line-height: 1.5; /* Espaciado entre líneas */
}
Tipos de Selectores CSS:
Selector Descripción Ejemplo CSS
Selector de p { color: black; } (Todos los
Selecciona todos los elementos de un tipo específico.
Etiqueta párrafos)
Selector de Selecciona elementos que tienen un atributo class específico. Se usa con un punto .mi-clase { background-color:
Clase (.). Puedes aplicar la misma clase a varios elementos. yellow; }
Selecciona un único elemento con un atributo id específico. Se usa con un numeral #mi-id { border: 1px solid red;
Selector de ID }
(#). Un ID debe ser único en toda la página.
Exportar a Hojas de cálculo
Ejemplo de HTML con Clases e IDs:
HTML
<h2 class="titulo-secundario">Mi sección favorita</h2>
<p class="resaltado">Este párrafo es importante.</p>
<div id="contenedor-principal">
<p>Contenido dentro del contenedor.</p>
</div>
Ejemplo de CSS para esas clases e IDs:
CSS
/* En [Link] */
.titulo-secundario {
color: purple;
text-decoration: underline;
}
.resaltado {
background-color: yellow;
font-weight: bold;
}
#contenedor-principal {
width: 80%; /* Ancho del 80% de la pantalla */
margin: 20px auto; /* Centra el div y le da margen arriba y abajo */
padding: 15px; /* Espacio interno */
border: 1px solid gray; /* Borde */
}
Propiedades CSS Comunes:
Propiedad Descripción Ejemplo
color Color del texto color: blue;
background-color Color de fondo background-color: #f0f0f0;
font-family Tipo de fuente (letra) font-family: 'Open Sans', sans-serif;
font-size Tamaño de la fuente font-size: 20px;
text-align Alineación del texto (left, right, center, justify) text-align: center;
margin Espacio exterior alrededor de un elemento margin: 10px; (todos los lados)
padding Espacio interior dentro de un elemento padding: 15px;
border Borde de un elemento border: 2px solid black;
width Ancho de un elemento width: 500px;
height Alto de un elemento height: 300px;
display Cómo se comporta un elemento (block, inline, flex) display: block;
Exportar a Hojas de cálculo
¡Practica esto! Abre tu archivo [Link] y experimenta cambiando los colores, tamaños de fuente y alineación de los elementos en tu
[Link]. ¡Guarda y refresca el navegador para ver los cambios!
3. Un Pequeño Proyecto: Tu Primera Página Personal
Vamos a crear una página web sencilla sobre ti.
1. Crea un archivo [Link]:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre Mí</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Hola, soy [Tu Nombre]</h1>
<p class="subtitulo">¡Un estudiante apasionado por el desarrollo web!</p>
</header>
<main>
<section id="sobre-mi">
<h2>Un poco sobre mí</h2>
<img src="[Link]" alt="Foto de [Tu Nombre]" class="foto-perfil">
<p>Me encanta aprender cosas nuevas, especialmente sobre tecnología. En mi tiempo libre disfruto [Tu
pasatiempo 1] y [Tu pasatiempo 2].</p>
<p>Sueño con crear sitios web interactivos y geniales que ayuden a la gente.</p>
</section>
<section class="mis-habilidades">
<h2>Mis Habilidades</h2>
<ul>
<li>HTML (¡Claro!)</li>
<li>CSS (¡Estamos en eso!)</li>
<li>[Habilidad 3]</li>
<li>[Habilidad 4]</li>
</ul>
</section>
<section class="contacto">
<h2>Contáctame</h2>
<p>Puedes escribirme a <a href="[Link]
</section>
</main>
<footer>
<p>© 2025 [Tu Nombre]. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Nota: Reemplaza [Tu Nombre], [Link], [Tu pasatiempo], [Habilidad] y tu-email@[Link] con tu
información. Asegúrate de tener una imagen llamada [Link] en la misma carpeta que tus archivos.
2. Crea un archivo [Link] y dale estilo:
CSS
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
font-size: 3em;
}
.subtitulo {
font-style: italic;
font-size: 1.2em;
}
main {
padding: 20px;
max-width: 900px;
margin: 20px auto;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
section {
margin-bottom: 30px;
}
h2 {
color: #4CAF50;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-top: 0;
}
.foto-perfil {
width: 150px;
height: 150px;
border-radius: 50%; /* Para hacerla circular */
display: block;
margin: 0 auto 15px auto;
border: 3px solid #4CAF50;
object-fit: cover; /* Asegura que la imagen no se distorsione */
}
ul {
list-style-type: disc; /* Tipo de viñeta */
margin-left: 20px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
margin-top: 30px;
}
Profa. Andrea de los Santos – Ciencias Computacionales
Fuentes: [Link]