Inici amb CSS

Desenvolupament de la pràctica

La pràctica consisteix a crear una web de receptes de cuina (podeu agafar les receptes de CatalunyaCuina).

• Una pàgina principal on estigui la llista de receptes (<ul> o <ol>):
  • Aquesta llista ha d'estar imbrincada, classificant les receptes en categories
  • Cada element de la llista ha d'enllaçar a una altra pàgina on es trobi la recepta.
• S'haurà de fer la pàgina de, com a mínim, dues receptes. Han de tenir:
  • Un títol principal
  • Títols secundaris
  • Paràgrafs.
  • Imatges
  • Una llista no ordenada amb els ingredients
  • Una llista ordenada amb les passes a seguir per a la seva elaboració
  • Enllaços a fragments (ingredients i passes)
• Caldrà donar estil a la pàgina utlitzant CSS:
  • S'hauran d'utilitzar les següents formes d'aplicació:
    • Fulls d'estil externs
    • Fulls d'estil interns
    • Estils en línia
  • Caldrà utlitzar els següents selectors CSS:
    • element (exemple: p)
    • element,element (exemple: p, li)
    • .classe (exemple: .especial)
    • element.classe (exemple: li.especial)
    • element element (exemple: li em)
    • element + element (exemple: h1 + p)
  • Caldrà utilitzar, al menys, les següents propietats:
    • color
    • font-size
    • list-style-type
    • font-weight
    • text-decoration
    • background-color
    • padding
    • margin
    • width
    • height
    • border
• L'organització dels fitxers i carpetes de la pàgina ha de ser:
  • El fitxer index.html (pàgina principal) ha d'estar a la carpeta arrel
  • Els fitxers .html de les receptes han d'estar a la carpeta receptes
  • El/s fitxer/s .css han d'estar a la carpeta css
  • Les imatges han d'estar a la carpeta img

Exemple

Pàgina principal

Pàgina d'una recepta