Hoja de trabajo HTML & CSS

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.

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>

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.

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>

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.

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.

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>

• La etiqueta <title> aparece en la pestaña del navegador.
• <meta charset="utf-8"> permite que la página muestre cualquier idioma.

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.

<!-- a simple navigation bar -->
<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.

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>

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.

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.

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>

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:

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.

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>

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 }.

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>

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>

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.

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>

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>

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.

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.

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.

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 { ... } }.