Conté tots els elements estructurals del codi.
Conté tots els elements de la part superior del document:
Contenidor ubicat dins de la capçalera, conté els elements situats a lʼesquerra de lʼencapçalament. (títol primari i secundari).
Contenidor ubicat dins de la capçalera, conté la llista no ordenada que actua com a barra de navegació.
Contenidor ubicat dins de la capçalera, conté la llista no ordenada que actua com a barra de navegació secundària. Situada sobre la barra principal, donarà accés als documents anteriors i posteriors.
Elements de bloc que contenen els enunciats de cadascun dels
apartats del tutorial.
Contenidor que actua com a embolcall de tot el contingut de la pàgina. Aquest és el contenidor més important a tenir en compte perquè serà lʼunic que caldrʼa modificar en cada tutorial.
Contenidor ubicat dins de lʼembolcall. Aquesta situació dins de lʼHTML afavoreix que sʼhereti lʼamplada del contenidor pare, fet que li donarà la mida exacta per la franja del peu.
Contenidor que abarca el codi amb les icones i els enllaços de validació.
Com es pot observar, sʼha intentat fer una estructura el més lleugera i diàfana possible perquè sigui fàcilment modificable i reutilitzable. -2-
Llenguatges i estàndards web_PRÀCTICA FINAL
A partir dʼaquí cada tutorial inclou dins de
el seu propi contingut. Aquest contingut sempre ha buscat una estructura el més clara possible. Sʼhan emprat els següents elements:
Sempre pel contingut que queda ubicat en un contenidor
a la part superior i inferior del document, formant blocs
id="contenidorBottom">
horitzontals. En cas que aquests contenidors tinguin elements que es col·loquin a dreta i esquerra, cada contenidor contindrà uns contenidors fills: •
•
•
•
Sempre pel contingut que queda ubicat en un contenidor
a la part dreat i esquerra del document, formant blocs verticals.
Sobre els fulls dʼestils tuto_00.css body
•
mida i família de la font.
•
background, incloent la imatge que conforma la barra horitzontal de la capçalera.
#main
•
amplada del contenidor.
•
estableix marge i farcit a 0.
•
estableix la vora superior i inferior.
•
adquireix una posició relativa per poder donar posició absoluta als elements que conté.
#top
•
farcit, vora i color de fons.
•
color de la font.
•
adquireix una posició relativa per poder donar posició absoluta als elements que conté.
#topTitSec
•
marge superior.
•
interliniat, mida, pes i família de la font.
#topTitPri
•
marge inferior i interliniat.
#barNav
•
posició absoluta.
•
farcit i vora inferior. -3-
Llenguatges i estàndards web_PRÀCTICA FINAL
#barNav2
•
posició absoluta.
•
amplada.
•
farcit i vores superior i inferior.
#barNav,
•
estableix marge a 0.
#barNav2
•
elimina lʼestil de llista.
•
mida, pes i color de la font.
#barNav #introbarNav,
•
farcit, aliniació i color de text.
#barNav li,
•
visualització com element de bloc.
#barNav2 li
•
element flotant a lʼesquerra.
•
color de font.
#barNav li
•
farcit i vora.
#barNav2 li
•
farcit.
#barNav2 li.next
•
vora esquerra.
#barNav li a,
•
elimina la decoració dels enllaços.
•
color dels enllaços.
•
color dels enllaços visitats.
•
color dels enllaços apuntats i activats.
•
adquireix una posició relativa per poder donar
#barNav2 li a #barNav li a:link, #barNav2 li a:link #barNav li a:visited, #barNav2 li a:visited #barNav li a:hover, #barNav li a:active, #barNav2 li a:hover, #barNav2 li a:active #wrapper
posició absoluta als elements que conté. #wrapperTitSec
•
espaiat, mida, pes i família de lletra.
#wrapperTitPri
•
marge superior.
•
espaiat, mida, pes i família de lletra.
#wrapperTitPri span
•
pes de la lletra.
p
•
mida, interliniat i família de font pels paràgrafs genèrics.
.peuInt
•
mida i color de la paraula Interactiu.
#foot
•
amplada.
•
posició absoluta.
•
vora superior.
•
posició absoluta
•
distància del marge dret.
#valHTML, #valCSS #valHTML
-4-
Llenguatges i estàndards web_PRÀCTICA FINAL
#valCSS
•
distància del marge dret.
•
element flotant a lʼesquerra.
•
amplada i marge.
#innerLeft_01
•
marge inferior.
#innerLeft_02
•
visualització com a element de bloc-en línia.
tuto_01.css #containerLeft
Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
#containerRight
•
alçada.
•
vora.
•
visualització com a element de bloc-en línia. Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
•
alçada.
•
vora i marge.
#containerTop
•
marge inferior.
#innerLeftTop
•
element flotant a lʼesquerra.
•
alçada.
•
marge i vora.
#innerRightTop
•
farcit superior.
#containerBottom
•
elimina el flux flotant cap a lʼesquerra.
#innerLeftBottom
•
amplada i marge.
#innerRightBottom
•
posició absoluta.
•
visualització com a element de bloc-en línia.
tuto_02.css
Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall. •
alçada.
•
vora.
#inner
•
marge superior i inferior.
.peuInt
•
marge superior.
tuto_03.css
-5-
Llenguatges i estàndards web_PRÀCTICA FINAL
tuto_04.css #containerLeft
•
element flotant a lʼesquerra.
•
marge dret.
•
amplada.
#containerRight
•
farcit superior.
#innerLeft
•
marge superior.
•
visualització com a element de bloc-en línia. Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
•
vora.
•
element flotant a la dreta.
•
marge.
#containerLeft,
•
posició absoluta.
#containerRight
•
amplada.
•
vora.
#containerLeft
•
farcir i vora.
#containerLeft ul
•
marge.
•
farcit.
•
eliminació de lʼestil de llista.
•
marge superior.
•
marge i farcit.
•
imatge de fons.
•
ubicació de la primera línia de paràgraf.
•
interliniat.
•
mida i família de la font.
•
marge inferior.
#containerRight
•
marge esquerre de la posició absoluta.
#containerBottom
•
posició absoluta.
tuto_05.css #containerRight
tuto_06.css
#containerLeft p, #containerRight p #containerLeft li
-6-
Llenguatges i estàndards web_PRÀCTICA FINAL
tuto_07.css #containerLeft,
•
posició absoluta.
#containerRight
•
amplada.
•
vora.
#containerLeft
•
farcir i vora.
#containerLeft ul
•
marge.
•
farcit.
•
eliminació de lʼestil de llista.
•
marge superior.
•
marge i farcit.
•
imatge de fons.
•
ubicació de la primera línia de paràgraf.
•
interliniat.
•
mida i família de la font.
•
marge inferior.
#containerRight
•
marge esquerre de la posició absoluta.
#containerBottom
•
posició absoluta.
#containerLeft
•
amplada.
#containerRight
•
posició absoluta.
•
marge superior.
#wrapper img
•
marge.
#parCurt
•
farcit.
•
amplada.
•
marge inferior.
•
marge inferior.
img
•
visualització de lʼelement en bloc.
#imgEditor,
•
vora.
#containerLeft p, #containerRight p #containerLeft li
tuto_08.css
tuto_09.css
tuto_10.css #containerLeft
#par1, #par3
#imgCodi -7-
Llenguatges i estàndards web_PRÀCTICA FINAL
#imgBoto
•
posició absoluta.
#imgEditor
•
posició absoluta.
#imgCodi
•
posició absoluta.
#containerBottom
•
amplada i vora.
#containerBottom p
•
marge establert a 0.
•
farcit.
•
amplada.
•
marge esquerre.
•
element flotant a la dreta.
#containerLeft
•
farcit superior.
#containerRight
•
amplada.
•
merge superior i inferior.
•
element flotant a la dreta.
•
marge
•
amplada.
•
marge dret.
•
element flotant a lʼesquerra.
#containerLeft .par1
•
marge.
#containerLeft img
•
marge.
#containerLeft .par3
•
marge.
•
amplada.
•
marge dret.
•
element flotant a lʼesquerra.
tuto_11_12.css #containerRight
tuto_13.css
tuto_14.css img
tuto_15.css #containerLeft
tuto_16.css #containerLeft
tuto_17.css
-8-
Llenguatges i estàndards web_PRÀCTICA FINAL
.parNarrow1,
•
amplada i marge dret.
.parNarrow1
•
marge superior.
#container
•
amplada.
•
marge i farcit.
•
vora.
#container p
•
marge.
.tit
•
mida i pes de la font
.parBottom
•
amplada i marge.
.parNarrow
-9-
Sempre pel contingut que queda ubicat en un contenidor
a la part superior i inferior del document, formant blocs
id="contenidorBottom">
horitzontals. En cas que aquests contenidors tinguin elements que es col·loquin a dreta i esquerra, cada contenidor contindrà uns contenidors fills: •
•
•
•
Sempre pel contingut que queda ubicat en un contenidor
a la part dreat i esquerra del document, formant blocs verticals.
Sobre els fulls dʼestils tuto_00.css body
•
mida i família de la font.
•
background, incloent la imatge que conforma la barra horitzontal de la capçalera.
#main
•
amplada del contenidor.
•
estableix marge i farcit a 0.
•
estableix la vora superior i inferior.
•
adquireix una posició relativa per poder donar posició absoluta als elements que conté.
#top
•
farcit, vora i color de fons.
•
color de la font.
•
adquireix una posició relativa per poder donar posició absoluta als elements que conté.
#topTitSec
•
marge superior.
•
interliniat, mida, pes i família de la font.
#topTitPri
•
marge inferior i interliniat.
#barNav
•
posició absoluta.
•
farcit i vora inferior. -3-
Llenguatges i estàndards web_PRÀCTICA FINAL
#barNav2
•
posició absoluta.
•
amplada.
•
farcit i vores superior i inferior.
#barNav,
•
estableix marge a 0.
#barNav2
•
elimina lʼestil de llista.
•
mida, pes i color de la font.
#barNav #introbarNav,
•
farcit, aliniació i color de text.
#barNav li,
•
visualització com element de bloc.
#barNav2 li
•
element flotant a lʼesquerra.
•
color de font.
#barNav li
•
farcit i vora.
#barNav2 li
•
farcit.
#barNav2 li.next
•
vora esquerra.
#barNav li a,
•
elimina la decoració dels enllaços.
•
color dels enllaços.
•
color dels enllaços visitats.
•
color dels enllaços apuntats i activats.
•
adquireix una posició relativa per poder donar
#barNav2 li a #barNav li a:link, #barNav2 li a:link #barNav li a:visited, #barNav2 li a:visited #barNav li a:hover, #barNav li a:active, #barNav2 li a:hover, #barNav2 li a:active #wrapper
posició absoluta als elements que conté. #wrapperTitSec
•
espaiat, mida, pes i família de lletra.
#wrapperTitPri
•
marge superior.
•
espaiat, mida, pes i família de lletra.
#wrapperTitPri span
•
pes de la lletra.
p
•
mida, interliniat i família de font pels paràgrafs genèrics.
.peuInt
•
mida i color de la paraula Interactiu.
#foot
•
amplada.
•
posició absoluta.
•
vora superior.
•
posició absoluta
•
distància del marge dret.
#valHTML, #valCSS #valHTML
-4-
Llenguatges i estàndards web_PRÀCTICA FINAL
#valCSS
•
distància del marge dret.
•
element flotant a lʼesquerra.
•
amplada i marge.
#innerLeft_01
•
marge inferior.
#innerLeft_02
•
visualització com a element de bloc-en línia.
tuto_01.css #containerLeft
Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
#containerRight
•
alçada.
•
vora.
•
visualització com a element de bloc-en línia. Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
•
alçada.
•
vora i marge.
#containerTop
•
marge inferior.
#innerLeftTop
•
element flotant a lʼesquerra.
•
alçada.
•
marge i vora.
#innerRightTop
•
farcit superior.
#containerBottom
•
elimina el flux flotant cap a lʼesquerra.
#innerLeftBottom
•
amplada i marge.
#innerRightBottom
•
posició absoluta.
•
visualització com a element de bloc-en línia.
tuto_02.css
Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall. •
alçada.
•
vora.
#inner
•
marge superior i inferior.
.peuInt
•
marge superior.
tuto_03.css
-5-
Llenguatges i estàndards web_PRÀCTICA FINAL
tuto_04.css #containerLeft
•
element flotant a lʼesquerra.
•
marge dret.
•
amplada.
#containerRight
•
farcit superior.
#innerLeft
•
marge superior.
•
visualització com a element de bloc-en línia. Aquesta regla sʼespecifica per aconseguir que el contenidor sʼajusti al contingut i no a lʼample de lʼembolcall.
•
vora.
•
element flotant a la dreta.
•
marge.
#containerLeft,
•
posició absoluta.
#containerRight
•
amplada.
•
vora.
#containerLeft
•
farcir i vora.
#containerLeft ul
•
marge.
•
farcit.
•
eliminació de lʼestil de llista.
•
marge superior.
•
marge i farcit.
•
imatge de fons.
•
ubicació de la primera línia de paràgraf.
•
interliniat.
•
mida i família de la font.
•
marge inferior.
#containerRight
•
marge esquerre de la posició absoluta.
#containerBottom
•
posició absoluta.
tuto_05.css #containerRight
tuto_06.css
#containerLeft p, #containerRight p #containerLeft li
-6-
Llenguatges i estàndards web_PRÀCTICA FINAL
tuto_07.css #containerLeft,
•
posició absoluta.
#containerRight
•
amplada.
•
vora.
#containerLeft
•
farcir i vora.
#containerLeft ul
•
marge.
•
farcit.
•
eliminació de lʼestil de llista.
•
marge superior.
•
marge i farcit.
•
imatge de fons.
•
ubicació de la primera línia de paràgraf.
•
interliniat.
•
mida i família de la font.
•
marge inferior.
#containerRight
•
marge esquerre de la posició absoluta.
#containerBottom
•
posició absoluta.
#containerLeft
•
amplada.
#containerRight
•
posició absoluta.
•
marge superior.
#wrapper img
•
marge.
#parCurt
•
farcit.
•
amplada.
•
marge inferior.
•
marge inferior.
img
•
visualització de lʼelement en bloc.
#imgEditor,
•
vora.
#containerLeft p, #containerRight p #containerLeft li
tuto_08.css
tuto_09.css
tuto_10.css #containerLeft
#par1, #par3
#imgCodi -7-
Llenguatges i estàndards web_PRÀCTICA FINAL
#imgBoto
•
posició absoluta.
#imgEditor
•
posició absoluta.
#imgCodi
•
posició absoluta.
#containerBottom
•
amplada i vora.
#containerBottom p
•
marge establert a 0.
•
farcit.
•
amplada.
•
marge esquerre.
•
element flotant a la dreta.
#containerLeft
•
farcit superior.
#containerRight
•
amplada.
•
merge superior i inferior.
•
element flotant a la dreta.
•
marge
•
amplada.
•
marge dret.
•
element flotant a lʼesquerra.
#containerLeft .par1
•
marge.
#containerLeft img
•
marge.
#containerLeft .par3
•
marge.
•
amplada.
•
marge dret.
•
element flotant a lʼesquerra.
tuto_11_12.css #containerRight
tuto_13.css
tuto_14.css img
tuto_15.css #containerLeft
tuto_16.css #containerLeft
tuto_17.css
-8-
Llenguatges i estàndards web_PRÀCTICA FINAL
.parNarrow1,
•
amplada i marge dret.
.parNarrow1
•
marge superior.
#container
•
amplada.
•
marge i farcit.
•
vora.
#container p
•
marge.
.tit
•
mida i pes de la font
.parBottom
•
amplada i marge.
.parNarrow
-9-
Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close