HTML y CSS: apuntes descargables
Estos apuntes unen una referencia breve de HTML y CSS con ejemplos que puedes ejecutar. La versión para imprimir está disponible sin formulario: descargar los apuntes de HTML y CSS en PDF. Usa el archivo como recordatorio y vuelve a la página cuando necesites cambiar un ejemplo y comprobar su resultado.
Estructura, texto y navegación
Un documento necesita una declaración inicial, idioma, codificación, título y contenido dentro de body. El encabezado principal describe el tema de la página; los h2 separan asuntos; los párrafos desarrollan una idea. Una lista ordenada expresa una secuencia, mientras que una sin orden reúne opciones o elementos equivalentes. No elijas la etiqueta por su tamaño visual: CSS puede modificarlo sin cambiar el significado.
<h1>Guía de una visita</h1> <h2>Antes de salir</h2> <ol><li>Consultar el horario.</li><li>Preparar la ruta.</li></ol>
Cambia la lista por ul y vuelve a leerla. Si el orden de los pasos importa, la nueva etiqueta ya no representa la tarea con la misma precisión. Esa comparación es más útil que memorizar una regla sin contexto.
Enlaces, imágenes y rutas
Un enlace une un texto comprensible con un destino guardado en href. Una imagen usa src para encontrar un recurso y alt para comunicar la información que se perdería si no se viera. Las rutas relativas parten de la ubicación del HTML. Si guardas una imagen en images, comprueba el nombre exacto del archivo y la carpeta antes de cambiar el elemento.
Como ejercicio, crea una segunda página y enlázala desde la primera. Copia después la carpeta completa a otro lugar y prueba la navegación otra vez. Si funciona, las rutas no dependían de una ubicación privada de tu ordenador. Si falta una imagen, compara la dirección solicitada por el navegador con el árbol de archivos.
CSS: presentación sin reescribir el contenido
Enlaza una hoja styles.css desde el head. Empieza por el cuerpo de texto: tamaño legible, interlineado y espacio entre bloques. Usa un selector como main para dar un ancho de lectura cómodo y otro como a:focus-visible para que el foco del teclado se vea. Si una regla no produce efecto, verifica que la hoja se cargó y que el selector coincide con el HTML real.
body { font: 1rem/1.6 sans-serif; margin: 0; }
main { max-width: 70ch; padding: 1.5rem; }
a:focus-visible { outline: 3px solid teal; }Abre la página en un teléfono y aumenta el tamaño de texto. Si aparece desplazamiento horizontal, busca un ancho fijo o una imagen demasiado grande. Desactiva luego CSS: el contenido debe conservar orden y enlaces funcionales. El PDF resume estas comprobaciones, pero tu archivo y el navegador son la prueba de que las entendiste.
Para usar los apuntes como herramienta de diagnóstico, escribe junto a cada ejemplo qué esperabas ver y qué apareció. Si un estilo no cambia la página, verifica que la hoja esté enlazada antes de ajustar el selector. Si un enlace no navega, inspecciona href y la ubicación del archivo. Si una imagen falta, comprueba src y la carpeta real. Una referencia breve funciona mejor cuando conduce a una prueba concreta que puedes repetir.
El PDF es una copia portátil de los puntos principales, no una versión secreta con lecciones adicionales. Puedes imprimirlo o consultarlo sin conexión, pero conserva también una carpeta de ejemplos editables. El papel te recuerda la decisión; el navegador confirma si tu código produce el resultado previsto.