HTML & CSS Handout · ⁨Hoja de trabajo HTML & CSS⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

1 HTML basics · ⁨Introducción a HTML⁩
1.1
Tu primera página

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

Español
El lenguaje HTML (Lenguaje de marcado de hipertexto) describe una página web mediante etiquetas. Una etiqueta es una palabra entre corchetes angulares, como <p>. La mayoría vienen en pares: una etiqueta de apertura <p> y una etiqueta de cierre </p> envuelven un contenido. Una etiqueta junto con su contenido constituye un elemento.

<p>Hello, world!</p> <p>This is my first web page.</p>

El navegador muestra cualquier cosa que se encuentre entre las etiquetas.

Si olvidas cerrar una etiqueta o la escribes mal, es posible que no se muestre correctamente.

Un elemento = etiqueta de apertura + contenido + etiqueta de cierre
1.2
Títulos y párrafos

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

Español
Los títulos van desde <h1> (el más grande) hasta <h6> (el más pequeño). Un párrafo se representa con <p>. Utiliza exactamente un <h1> para el título principal de la página.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
Formato de texto

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

Español
Puedes poner el texto en negrita con <strong> y en cursiva con <em>. Un salto de línea se logra con <br> — este no tiene etiqueta de cierre.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

Errores comunes

La mayoría de las etiquetas vienen en pares — <p>...</p>. Olvidar la etiqueta de cierre rompe el diseño que aparece debajo.

La etiqueta va entre corchetes angulares; el texto que ves está entre la etiqueta de apertura y la de cierre.

Los títulos van desde <h1> (el más grande) hasta <h6> — no elijas un nivel de título solo por su tamaño visual.
2 Lists, links & images · ⁨Listas, enlaces e imágenes⁩
2.1
Listas

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

Español
Una lista no ordenada 无序列表 <ul> muestra viñetas; una lista ordenada 有序列表 <ol> muestra números. Cada elemento de lista 列表项 es un <li>.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul para viñetas, ol para números; cada elemento es li
2.2
Enlaces

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

Español
Un enlace 链接 es un ancla <a>. Su atributo href 属性 contiene la dirección a la que apunta.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

Añade target="_blank" para abrir el enlace en una pestaña nueva.
2.3
Imágenes

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

Español
Una imagen 图片 es <img> — no tiene etiqueta de cierre. src es la dirección de la imagen; alt es el texto que se muestra si la imagen no puede cargarse (y se lee en voz alta para usuarios con discapacidad visual).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

Errores comunes

Una imagen necesita src (el archivo) y alt (una descripción); un enlace necesita href.

<img> no tiene una etiqueta de cierre separada.

Una ruta src rota no muestra nada — verifica el nombre del archivo y la carpeta.
3 Page structure · ⁨Estructura de la página⁩
3.1
Una página completa

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

Español
Una página real tiene una estructura base fija. <!DOCTYPE html> indica que es HTML5. Todo se encuentra dentro de <html>. El <head> contiene información sobre la página; el <body> contiene lo que ves.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

Una página es un árbol: el head describe la página, el body contiene lo que ves

La etiqueta <title> aparece en la pestaña del navegador.

<meta charset="utf-8"> permite que la página muestre cualquier idioma.
3.2
Comentarios y anidamiento

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

Español
Un comentario  es una nota que el navegador ignora. Las etiquetas se anidan unas dentro de otras; sangra cada nivel para mantener clara la estructura. Cierra las etiquetas en orden inverso al que las abriste.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

Errores comunes

Las etiquetas deben anidarse, no superponerse: <b><i>text</i></b>, nunca <b><i>text</b></i>.

Una página necesita <html>, un <head> (para el título y los enlaces) y un <body> (para lo que ves).

Un comentario es ; el navegador lo ignora.
4 Tables & forms · ⁨Tablas y formularios⁩
4.1
Tablas

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

Español
Una tabla <table> se construye a partir de filas <tr>. Una celda de encabezado <th> es en negrita y está centrada; una celda de datos normal es <td>.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

tabla → tr filas → th/td celdas
4.2
Formularios

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

Español
Un formulario <form> recopila la entrada del usuario. Un <input> es un cuadro; un <label> le da nombre; un <button> lo envía.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

Valores comunes para el atributo <input> de type: text, number, email, password, checkbox.

Errores comunes

Las celdas de la tabla van dentro de las filas: un <tr> contiene las celdas <td>.

Cada campo de entrada de formulario debe tener un <label> correspondiente para que sea claro y accesible.

Por defecto, un botón dentro de un formulario lo envía; establece type="button" si no deseas ese comportamiento.
5 Boxes & sections · ⁨Cajas y secciones⁩
5.1
div, span y secciones semánticas

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

Español
Un <div> es una caja de bloque genérica que agrupa contenido en líneas propias. Un <span> es una caja de línea genérica dentro de una línea de texto. Se utilizan para agrupar elementos a fin de poder darles estilo o posición.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

Las etiquetas semánticas describen su función, lo cual ayuda a las lectores de pantalla y a los motores de búsqueda. Prefiéralas sobre los <div> simples cuando correspondan: <header>, <nav>, <main>, <section>, <article>, <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

Errores comunes

<div> es un bloque (inicia una nueva línea); <span> es de línea (permanece en el texto).

Utilice etiquetas semánticas como <header>, <nav> y <footer> donde correspondan, no <div> para todo.

No utilice una etiqueta solo por su apariencia predeterminada; aplíquele estilo con CSS en su lugar.

div es una caja de bloque; span envuelve texto en línea

6 CSS basics · ⁨Introducción a CSS⁩

6.1

Añadir CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

Español

CSS (Hojas de estilo en cascada) da estilo al HTML. La forma más sencilla es usar un bloque <style> dentro del <head> (un sitio más grande utiliza un archivo .css separado con una etiqueta <link>). Una regla de CSS tiene un selector, seguido de pares { property: value; } llamados declaraciones.

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Enlazar una hoja de estilos para que las reglas de CSS den estilo a los elementos HTML

6.2

Selectores: clase e id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

Español

Una clase da estilo a muchos elementos: añade class="..." en el HTML y escribe .name en CSS. Un identificador (id) da estilo a UN solo elemento: usa id="..." y #name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

Los selectores que encontrarás con más frecuencia, reunidos en un solo lugar:

Selector	Elige
`p`	cada elemento `<p>`
`.note`	todo lo que tenga `class="note"`
`#title`	el único elemento con `id="title"`
`h1, h2`	varios selectores a la vez
`nav a`	cada `<a>` dentro de un `<nav>`
`.btn:hover`	un estado específico de un elemento (ver tema 10)

Errores comunes

Un selector de clase comienza con . y un selector de identificador con #.
Enlaza la hoja de estilos en el <head>, o coloca las reglas dentro de un bloque <style>.
Una clase se puede reutilizar en muchos elementos; un identificador debería aparecer una sola vez por página.

7 Colours & text · ⁨Colores y texto⁩
7.1
Colores y fondos

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

Español
Establece el color del texto con color y el fondo con background-color. Un color puede ser un nombre (red), un código hexadecimal (#ff0000) o rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

Colores CSS: nombres, hexadecimales y rgb()
7.2
Estilos de texto

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

Español
Propiedades de texto comunes: font-size, font-weight (por ejemplo, bold), font-family, text-align (alineación: left / center / right) y line-height para el espaciado.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

Errores comunes

color establece el color del texto; background-color establece el fondo.

Un color puede ser un nombre, un código hexadecimal #rrggbb o rgb(...).

Termina cada declaración dentro de las llaves con punto y coma ; — esto separa los pares property: value (la que sigue a la última declaración es opcional). La regla en sí termina con la llave de cierre }.
8 The box model · ⁨El modelo de caja⁩
8.1
El modelo de caja

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

Español
Cada elemento es una caja con cuatro capas, de adentro hacia afuera: el contenido 内容, el relleno 内边距 (espacio dentro del borde), el borde 边框 y el margen 外边距 (espacio fuera del borde).

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

El modelo de caja: contenido, luego relleno, luego borde, luego margen
8.2
Margen y relleno

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

Español
padding añade espacio dentro del borde, empujando el contenido hacia adentro. margin añade espacio fuera, alejando otras cajas. Proporcione un valor para todos los lados, o cuatro (arriba derecha abajo izquierda).

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
Display

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

Español
La propiedad display establece cómo fluye una caja. block 块级 ocupa toda una línea; inline 行内 se sitúa dentro de una línea de texto; none elimina la caja por completo; flex coloca a los hijos en una fila (tema siguiente).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

Errores comunes

El relleno está dentro del borde; el margen es el espacio exterior.

box-sizing: border-box hace que el ancho establecido incluya el relleno y el borde — algo que a menudo se desea.

display: none oculta un elemento completamente; visibility: hidden deja su espacio.
9 Layout · ⁨Diseño⁩
9.1
Ancho y centrado

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

Español
Establece el width de una caja. Para centrar un bloque, dale un ancho y margin: 0 auto — auto reparte el espacio sobrante por igual a la izquierda y a la derecha.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

Español
Flexbox (diseño flexible) distribuye los elementos hijos en fila o columna. Establece display: flex en el contenedor (el elemento padre). gap añade espacio entre los hijos; flex: 1 hace que compartan el ancho.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

Un contenedor flex alinea sus elementos a lo largo del eje principal; gap añade espacio entre ellos
9.3
Mini-proyecto: una tarjeta de perfil

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

Español
Combina cajas, colores, texto y espaciado en un solo componente pequeño.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

Errores comunes

Centra un bloque con un ancho fijo usando margin: 0 auto.

Flexbox necesita display: flex en el CONTENEDOR, no en los elementos hijos.

Un ancho en % es relativo al contenedor padre, así que verifica también el ancho del padre.
10 Going further · ⁨Avanzando⁩
10.1
Clases hover y pseudo-clases

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

Español
Una pseudo-clase 伪类 aplica estilos a un elemento en un estado particular. :hover se aplica mientras el mouse está sobre el elemento. Añade transition transición para que el cambio sea suave en lugar de saltar.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

Otras pseudo-clases útiles: :focus (un campo de entrada en el que el usuario ha hecho clic) y :first-child.

:hover aplica estilos a un elemento mientras el puntero está sobre él
10.2
Posicionamiento

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

Español
El posicionamiento 定位 mueve una caja lejos de su lugar normal. relative desplaza ligeramente la caja (y la convierte en ancla 锚点 para sus hijos); absolute coloca una caja exactamente, medida desde el padre posicionado más cercano; fixed la fija a la pantalla incluso cuando la página hace scroll.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left indican cuánto mover — solo funcionan en cajas posicionadas.
10.3
Consultas de medios y diseño responsivo

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

Español
Una página responsiva 响应式 se adapta al tamaño de la pantalla. Una consulta de medios 媒体查询 aplica sus reglas solo mientras se cumple una condición sobre la pantalla, como max-width.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

Diseño mobile-first 移动优先: escribe los estilos del teléfono primero, luego añade reglas @media (min-width: ...) para pantallas más grandes.

Anchos en porcentaje y max-width permiten que las cajas se encogán con la pantalla.

Errores comunes

:hover se adhiere a su selector sin espacio: .btn:hover, no .btn :hover.

position: absolute se mide desde el padre posicionado más cercano — asigna a ese padre position: relative.

Una consulta de medios envuelve reglas completas: @media (max-width: 600px) { .a { ... } }.