Pàgina web. Aparença

En aquesta pràctica aprendràs a donar format bàsic a una pàgina web.

Per on comencem? En les dues pràctiques anteriors hem estat definint l’estructura d’una pàgina web utilitzant els elements bàsics de HTML. Hem aprés què són les etiquetes i què són els atributs dels diferents elements. Així, hem emprat els elements bàsic com: títols de seccions, imatges, enllaços a altres pàgines web, paràgrafs i llistes.

En cap moment hem canviat l’aparença dels elements, és a dir: la gràndària, estil de font, tipus vinyeta, els colors de fons/primer pla. Tot això correspon a la definició dels estils.

El HTML es complementa amb CSS per a definir l’aparença de la pàgina web. Entra en aquesta pàgina web i comprova com canvia l’aparença depenent dels estils definits.

Com seguim? Els fulls d’estil s’apliquen en cascada. Això vol dir que primer s’aplica el que està definit a nivel general i després es pot anar especificant. Per exemple:

  1. A nivell d’element. Tots els paràgrafs tenen el mateix estil el definit per a l’etiqueta <p>
  2. A nivell de classe. Tots els paràgrafs que són el subtítol de la notícia <p class="subtitol>
  3. A nivell d’identificador. El paràgraf que s’identifica amb un identificador. Només hi haurà un únic element en tot el document amb aquest identificador. <p id=”especial”>

Una regla CSS té l’estructura mostrada en la imatge de l’esquerra.

Primer s’especifica la jerarquia de selectors, i dins de les claus les declaracions separades per punt i coma. Cada declaració especifica una propietat i un valor separats per dos punts.

Pots trobar la documentació de referència per a CSS en aquesta pàgina: les diferents propietats dels diferents elements.

Accedeix a aquesta pàgina i realitza els exercicis guiats. Ficaràs en pràctica els conceptes explicats anteriorment.

Un dels elements més interessants a l’hora d’organitzar i donar aparença una web és l’element <div>. L’altre important és <span>. En aquest enllaç tens una explicació i un parell d’exercicis a realitzar per a veure la diferència. Quan els acabes, realitza aquests 4 exercicis que apliquen a l’element <div>.

I ara què? Aplicant els consells d’aquest vídeo, intenta fer el teu curriculum en una pàgina web.

En la capçalera estarà el teu nom, centrat vertical i horitzontalment.

Els menú tindrà enllaços a les seccions del contingut.

En la part principal de contingut especificaràs la informació important de cada etapa.

A la banda de la dreta estarà una foto o avatar teu i un enllaç a una pàgina externa.

En el peu estarà el curs actual i assignatura.

"edutictac.es