Salta el contingut

PR0372 — Pàgina Web amb HTML5 i CSS3

Objectius

  • Crear una pàgina web multi-pàgina ben estructurada amb HTML5 semàntic
  • Aplicar fulls d'estil CSS3 externs amb disseny responsiu
  • Validar el codi HTML i CSS amb les eines oficials del W3C
  • Usar Flexbox i/o CSS Grid per a la maquetació

Lliurament

Format: Carpeta comprimida .zip amb nom PR0372_nom_cognom.zip Contingut: Tots els fitxers HTML, CSS, imatges i recursos Termini: Consulteu la programació d'aula

Descripció del projecte

Crea el portal web de l'Institut Sa Palomera (o una escola inventada) amb les pàgines següents:

Pàgines requerides

  1. index.html — Pàgina principal
  2. cicles.html — Oferta formativa (cicles i mòduls)
  3. contacte.html — Formulari de contacte i mapa

Estructura de fitxers

PR0372_nom_cognom/
├── index.html
├── cicles.html
├── contacte.html
├── css/
│   └── estils.css
├── img/
│   ├── logo.png
│   └── ...
└── js/
    └── scripts.js (opcional)

Requisits per pàgina

index.html

  • Capçalera (<header>) amb logo i navegació responsive
  • Secció hero amb títol principal i subtítol
  • Secció de "punts forts" de l'escola (3 targetes en grid)
  • Secció de notícies o novetats (2-3 articles)
  • Peu de pàgina (<footer>) amb dades de contacte, mapa del lloc i xarxes socials

cicles.html

  • Llista de cicles formatius organitzats per família professional
  • Per a cada cicle: nom, grau (GM/GS), hores, descripció breu
  • Usa una estructura tabular o de targetes

contacte.html

  • Formulari complet amb: nom, cognoms, email, telèfon, cicle d'interès (select), missatge (textarea), acceptació de política de privacitat (checkbox), botó d'enviament
  • Informació de contacte (adreça, telèfon, email, horaris)
  • Iframe de Google Maps (o un mapa alternatiu)

Requisits CSS

Obligatoris

  • Full d'estil extern únic (css/estils.css)
  • Variables CSS (--color-primari, --font-principal, etc.)
  • Navegació horitzontal amb Flexbox
  • Maquetació responsiva amb Grid o Flexbox + media queries
  • 3 punts de ruptura com a mínim (mòbil, tablet, desktop)
  • Efectes :hover als botons i enllaços
  • Estils de formulari (focus, placeholders, errors)

Recomanats

  • Animació CSS (transicions en hover)
  • Web font de Google Fonts
  • Favicon
  • Mode fosc optatiu (color-scheme)

Criteris d'avaluació

Criteri Pes
Estructura HTML5 semàntica correcta 20%
CSS responsive funcional (mobile + desktop) 25%
Formulari complet i accessible 15%
Validació W3C HTML sense errors 15%
Validació W3C CSS sense errors 10%
Disseny visual coherent i net 15%

Recursos