Esta lección contiene un índice de las lecciones que estoy impartiendo en clase durante la primera mitad del curso 2026/27, así como los ejercicios que han realizado los alumnos.
Para elaborar este índice utilizo como base las guías de estudio que ofrezco a mis alumnos de la modalidad semipresencial en la plataforma Moodle de la Conselleria de Educación.
La información se ofrece distribuida en quincenas, ya que es así como está organizada la modalidad semipresencial.
También se pueden consultar las lecciones impartidas en el pasado curso 2025/26.
Estas lecciones son una larga introducción a la web. Tened en cuenta que no será necesario aprenderlas de cara el examen, pero son importantes porque ayudan a entender cómo y por qué la web es como es desde un punto de vista técnico. A lo largo del curso, a medida que vayáis aprendiendo a hacer páginas web y estéis más familiarizados con el HTML y el CSS, será interesante releer estos mismos temas para entenderlos mejor. En los exámenes no se preguntará sobre estas lecciones generales.
Esta lección es una breve historia de la web, desde 1991 hasta la actualidad, para que tengáis una idea de conjunto.
Esta lección es también una historia de la web, pero mucho más detallada y organizada por temas, con enlaces a las normas y recomendaciones.
Esta lección habla sobre los navegadores más importantes y sobre el uso que tienen, aunque en este curso no vamos a entrar apenas en las diferencias entre navegadores, que por otra parte son cada vez menos importantes.
Esta lección habla sobre los sistemas operativos y los tipos de pantallas más utilizadas. Las gráficas nos indican la creciente importancia de los dispositivos móviles y las características de las pantallas, que deberíamos tener en cuenta al diseñar las páginas web.
Esta lección contiene enlaces a muchas normas y recomendaciones, organizadas cronológicamente y por temas. En este curso no es necesario consultar las normas originales.
Aunque se puede seguir este curso con Google Chrome o Edge (y en algunos casos será necesario utilizarlos), el navegador que recomiendo es Firefox.
Esta lección es para que conozcáis las opciones básicas de configuración. En principio no es necesario cambiar nada, pero yo aconsejo cambiar un par de opciones en la sección Avanzado. También se explica el funcionamiento del zoom en Firefox.
Esta lección es para que conozcáis cómo acceder a las opciones avanzadas de configuración. Sería interesante que probárais a cambiar el zoom máximo. Más adelante incluiré otros apartados a medida que los necesitemos.
Uno de los puntos fuertes de Firefox es la cantidad de complementos que amplian sus capacidades. En esta lección se explica cómo se instalan las extensiones y se comenta alguna extensión con un poco más de detalle.
[opcional] Podéis leer el resto de la lección, que hace referencia a las Herramientas para desarrollador web, que en principio no utilizaremos.
Aunque el navegador que recomiendo es Firefox, si utilizáis Chrome es conveniente que tengáis instalada la extensión Colorzilla.
Chrome dispone de miles de extensiones que amplian sus capacidades. En esta lección se explica cómo se instalan las extensiones y se comenta alguna extensión con un poco más de detalle.
Este curso vamos a utilizar Visual Studio Code (VSC) como editor tanto para HTML/CSS como para Python en la segunda parte del curso (también se utiliza para PHP en el módulo IAW). A lo largo del curso iré completando y ampliando estas lecciones dedicadas a Visual Studio Code
En esta lección se explica cómo conseguir e instalar VSC en Windows. Para la instalación en sistemas operativos derivados de Debian, podéis leer la lección Instalación en LliureX
En esta lección os explico cómo están organizadas las posibilidades de personalización de VSC. Comprobad que la interfaz funciona como se explica en ella, pero NO modifiquéis nada todavía.
En esta lección iré añadiendo explicaciones del manejo de Visual Studio Code a medida que avancemos en su uso.
Son ejercicios para comprobar que habéis configurado correctamente Visual Studio Code. Al principio de la página tenéis un enlace para descargar un archivo zip que contiene los ficheros html y css que se utilizan en los ejercicios. Descomprimid ese archivo de plantillas en la carpeta "ejercicios" del área de trabajo.
En esta lección se presentan los elementos básicos de una página web HTML, las etiquetas o marcas.
Esta lección comenta una plantilla de página web, con los elementos presentes en todas las páginas y que deberéis utilizar al empezar una página desde cero.
En esta lección se describen las características principales de la sintaxis del HTML. El HTML tiene cierta flexibilidad en la sintaxis. En los ejemplos de esa lección, la primera opción de cada ejemplo suele ser la sintaxis aconsejada en estos apuntes. Tendréis que prestar atención para seguir la sintaxis sin errores, aunque Visual Studio Code os indicará bastante errores. En los exámenes no penalizaré los errores de sintaxis que no afecten al resultado visual final, pero os aconsejo que intentéis cometer el menor número de errores.
En esta lección se comentan las categorías de etiquetas HTML.
En esta lección se presentan los elementos básicos de una hoja de estilo CSS.
Esta quincena os voy a pedir que leáis bastantes lecciones, para conocer las primeras etiquetas HTML y propiedades CSS. Aunque todavía no os pido hacer ninguna página web, os propongo unos tests que podéis repetir hasta familiarizaros con estas etiquetas y propiedades.
⚠️ Aunque en cada lección de los apuntes se describan todas las etiquetas HTML o propiedades CSS relacionadas con el tema objeto de cada lección, en los ejercicios y exámenes aparecerán solamente una parte de ellas. Cada quincena os enlazaré una lista con las "nuevas" etiquetas y propiedades de esa quincena y otra lista con las acumuladas hasta entonces, para que sepáis cuáles debéis conocer. De todas formas, os recomiendo e invito a que leáis toda la información contenida en cada lección.
Para poder hacer páginas web con hojas de estilo es necesario conocer las etiquetas HTML y las propiedades CSS: cómo se llaman, para qué sirven, qué valores pueden tomar, etc. A lo largo del curso iremos viendo grupos de etiquetas y propiedades relacionados. Las listas completas se encuentran en las lecciones:
No es imprescindible aprenderse las etiquetas y propiedades de memoria, pero como estaremos utilizándolas continuamente, al final os sabréis la mayoría. En el examen tendréis las listas a vuestra disposición y podréis llevarlas en papel por si os falla la memoria, pero lógicamente si perdéis mucho tiempo buscando, no os dará tiempo de terminar el examen.
Las unidades que utilizaremos durante el curso son los porcentajes (%), rem y píxeles (px).
En este curso no es necesario ser capaz de escribir el código de color RGB, HSL o HWB de cabeza, pero sí es conveniente que sepáis cómo se interpretan esos códigos. Tradicionalmente se ha utilizado más el código RGB, pero seguramente el uso de HWB aumentará en el futuro. En las soluciones de los ejercicios podréis ver que he utilizado el formato HWB, aunque si copíais los códigos de colores con la herramienta RecogeColor de Firefox o con Colorzilla, os puede ser más cómodo utilizar los códigos RGB o HSL que os dan esas herramientas.
Este test es opcional porque no es necesario conocerse de memoria los códigos RGB, pero podéis practicar vuestra agudeza visual.