L’ajuntament del teu municipi ha convocat un concurs literari de relats curts: A la xarxa
sobre les xarxes socials d’Internet. Aquests relats es publicaran a Internet i els guanyadors seran escollits per votació popular. T’han encarregat la construcció d’un lloc web per donar-lo a conèixer. Realitza la planificació d’aquest lloc web seguint les indicacions que apareixen en el mòdul 1 del material didàctic.
Planificació de l'espai web, concurs xarxes socials
Explica les diferències entre els elements de bloc i els elements de línia de l’HTML. Posa un exemple on es vegi clara la diferència entre els dos tipus d’elements.
Si poguéssim dividir una pàgina html en seccions que més o menys destaquessin l’estructura d’aquesta com el punt i apart marca el final d’una idea; els elements encarregats de fer-ho serien els elements de bloc. D’altra banda els elements de línia ens serveixen per emfatitzar una paraula o conjunt d’aquestes dins un text.
<p>Els elements de línia <strong>emfatitzen</strong></p>
<p>Els elements de bloc <strong>estructuren</strong> el text<p>
Els elements de bloc <p>, <h?>, <blockquote>... marquen l’estructura del text. En aquest cas un paràgraf aïllat que estarà dividit del text que el precedeix per una línia en blanc que marcarà la seva entitat com a bloc. Els elements de línia <strong>, <em>, <q>... fan destacar part del contingut d’aquest bloc de forma visual, reclamant l’atenció del lector; en aquest cas remarcant el text com a negreta.
Sobre els fulls d’estil, respon les preguntes següents:
1) Explica les diverses maneres d’aplicar el CSS a un document HTML. Indica en quins casos utilitzaries cadascun d’elles. Hi ha alguna que sigui més avantatjosa que les altres; en cas afirmatiu, explica per què ho és.
Hi ha 3 maneres bàsiques d’aplicar fulls d’estil. La primera dins la línia del codi, a cada element de la pàgina (text, taula, capa, imatge...) que volem donar format.
La segona establint totes les normes d’estil en la capçalera del document dins els elements style. Entre aquests elements agruparíem totes les redefinicions d’elements, classes i id’s que donen format i estil a la pàgina.
Exemple d'estil en la capçalera
La darrera i la més convenient és igual que la segona, agrupar totes les definicions d’estil css però en aquest cas en un fitxer extern fent la crida d’aquest en les capçaleres del document html amb l’element <link rel=”” href=””>. Amb la propietat href definim la ruta absoluta del fitxer d’estil .css.
Exemple d'estil en fitxer .css extern
De les 3 la millor és fer-ho externament ja que ens permet aplicar un mateix estil a totes les pagines així com canviar estils en totes rectificant únicament les propietats de la fulla d’estils vinculada.
2) Enumera i explica els tipus de selectors i posa un exemple de cadascun d’ells.
Selector d’elements:Serveixen per aplicar estil a un element html (<p>,<h>,<em>...)
Exemple de selectors d'elements
Selector de classe :S’apliquen a tots els elements que tinguin l’atribut class= classe definida en el selector. Venen definits en la fulla d’estil per un punt al davant
Exemple de selectors de classe
Selector de ID : Funciona igual que el de classe sols ha de ser únic a cada document HTML. Idoni per els elements estructurals d’una web com per exemple els divs de capçalera, cos, i peu que estructurarien una web. Venen definits en la fulla d’estil per un # al davant
Sel.universals : Redefineixen tots els elements d’una pàgina. En el codi de l'exemple eliminem el marge i l’espai de contingut de tots els elements de la pàgina, i ampliem un 50% el text
Sel.atributs : Permeten aplicar l’estil a tots els elements que contingui un atribut. *[class] {color:red;} el selector universal amb l'atribut [class] ens destacaria en el document tots els elements que han estat assignats amb un atribut de class (ho he trobat molt útil per identificar les classes o els ids de un document html)
Sel.fills:Apliquen l’estil al següent element en jerarquia (fill) de l’element referència (pare). blockquote > q {color: blue;} fa que el fills en jerarquia entre comillats dins el blockquote siguin de color blau,
Sel.descendents :S’aplica de la mateixa manera que els selectors fills sols que aquest canviarien l’estil de tots els <q> que estiguessin dins el blockquote, a diferència de l’anterior que només aplica l’estil als descendents en jerarquia <q> del blocquote que és l'element de referència.
Exemple de selectors descendents
Sel.germans adjacents: S’aplicaria l’estil al següent element a continuació de l'element de referència sempre i quan aquest estigui en el mateix nivell de jerarquia que l'element de referència.
Exemple de selectors germans adjacents
Sel.pseudoclasse : S’utilitzen per definir l’estil en l’estat d’un element. El cas més clar és l’estat de l’element “a” (link) a:hover {color:red;} farà que al pasar el mouse per sobre de l'enllaç l'hipervincle es torni vermell
Exemple de selectors de Pseudoclasse
Sel.pseudoelements :S'utilitzen per modificar amb estil una part en concret d'un element, davant, darrera, primera lletra...
Exemple de selectors de Pseudoelements
Explica el concepte de cascada en CSS i posa tres exemples on es comprovi com funcionen la importància, l’especificitat i l’ordre en les fonts, respectivament.
El concepte de cascada intenta explicar quin estil s’aplicarà al document html en cas de que que un element hagi rebut més d’una ordre d’estil. L’estil aplicat finalment serà el que es consideri més rellevant tenint en compte la importància, l’especificitat i l’ordre.
Aquesta llista va de menor importància a major
L'especificitat atorga un valor de rang als selectors. El rang major el tenen els selector definits en la mateixa línia com a style, seguit dels ID, les classes, i el menor la suma d'elements i pseudoelements que té el selector. Així podem esbrinar aquest rang amb un valor numèric del tipus (0 o 1) si té style, (0 o 1) si és un ID...El valor tindrà així 4 xifres. A major valor més rellevant serà la definició.
L'ordre de les fonts estableix que si definim 2 estils a un mateix element, el darrer amb més proximitat a l'element serà el que s'imposi.
Exemple de l'ordre de les fonts
Juntament amb aquest enunciat trobareu els arxius SoftwareLibre.rtf i SoftwareLibre.pdf. El primer conté el text complet d’un article en llengua espanyola, i en el segon es mostra l'aspecte de l'article tal i com hauria de quedar
He utilitzat els següents elements de línia: "em" per fer la lletra cursiva "q" per posar l'entrecomillat "strong" per la negreta així com l'element "span" per poder assignar classes a les paraules que no habien de rebre cap format abans comentat.
La definició dels llenguatges de les paraules en anglès o els noms en finlandès els he definit amb l'etiqueta lang="idioma", suposo, no ho he aconseguit però que un narrador les pronunciarà correctament
També he utilitzat "acronym" per marcar els acrònims, i tittle per donar el significat quan es passa per sobre amb el ratolí
Fulla d'estils del software lliure (en la fulla es poden llegir els comentaris)