En aquesta pràctica aprendràs com fer una taula senzilla en HTML.
Per on comencem? A l’inici d’aquesta pàgina hi ha una explicació de les parts d’una taula. Fes-li una ullada.
Per on seguim? Accedeix a aquesta pàgina i juga amb les activitats exemple: efegeix files, columnes, vores, defeneix estils, etc.
I ara què? Fes un document HTML en el qual aparega la teua organització setmanal. Pot ser l’horari de classe, o pot ser horari de gestió de temps durant COVID-19. Recorda fusionar cel·les horitzontalment o verticalment, així com defineix els diferents colors per a diferents ítems en el full CSS associat. En la imatge inferior es mostra un exemple. En aquest enllaç podeu veure com està codificat.
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:
A nivell d’element. Tots els paràgrafs tenen el mateix estil el definit per a l’etiqueta <p>
A nivell de classe. Tots els paràgrafs que són el subtítol de la notícia <p class="subtitol>
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.
