Neus​ ​Barbanoj​ ​Fernández

Estudiant​ ​de​ ​Multimèdia

Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1

Primera​ ​part
Pregunta​ ​1.​ ​Sobre​ ​la​ ​utilització​ ​de​ ​taules,​ ​respon​ ​a​ ​les​ ​següents​ ​qüestions:
Quins​ ​atributs​ ​de​ ​les​ ​taules​ ​i​ ​els​ ​seus​ ​elements​ ​interns​ ​no​ ​poden​ ​indicar-se
explícitament​ ​amb​ ​regles​ ​CSS​ ​(i​ ​per​ ​tant​ ​s'han​ ​d'incloure​ ​en​ ​línia)?

● Els​ ​elements​ ​thead,​ ​tbody​ ​i​ ​tfoot:​ ​Aquests​ ​elements​ ​defineixen​ ​respectivament​ ​el
títol,​ ​el​ ​cos​ ​i​ ​el​ ​peu​ ​de​ ​la​ ​taula.​ ​Llevat​ ​que​ ​estiguem​ ​codificant​ ​una​ ​taula​ ​realment
complexa​ ​amb​ ​moltes​ ​columnes​ ​i​ ​files​ ​de​ ​dades,​ ​si​ ​els​ ​utilitzem​ ​correm​ ​el​ ​risc
d'excedir-nos.​ ​En​ ​una​ ​taula​ ​complexa,​ ​però,​ ​el​ ​seu​ ​ús​ ​no​ ​només​ ​estructurarà​ ​el
contingut​ ​per​ ​al​ ​codificador,​ ​sinó​ ​també​ ​per​ ​als​ ​navegadors​ ​i​ ​altres​ ​dispositius.

Exemples​ ​de​ ​la​ ​meva​ ​web

<thead>
​ ​ ​<tr>
​ ​ ​ ​ ​<th​ ​scope="col">Año</th>
​ ​ ​ ​ ​<th​ ​scope="col">Galardonado</th>
​ ​ ​ ​ ​<th​ ​scope="col">Enlace</th>
​ ​ ​</tr>
</thead>

<tbody>
<tr>
​ ​ ​ ​ ​<td​ ​rowspan="2">2012</td>
​ ​ ​ ​ ​<td>Hanna​ ​Damásio</td>
​ ​ ​ ​ ​<td><a
href="http://www.uoc.edu/hc/damasio/esp/index.html">http://www.uoc.edu/hc/damasio/esp/in
dex.html</a></td>
</tr>
​ ​ ​<tr>
.
.
.
.
</tr>
<tr>
​ ​<td>2003</td>
​ ​<td>Josep​ ​Laporte</td>
​ ​<td><a
href="http://www.uoc.edu/hc/laporte/esp/index.html">http://www.uoc.edu/hc/laporte/esp/inde
x.html</a></td>
</tr>
</tbody>
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
<tfoot>
<tr>
<td​ ​colspan="3">Doctor​ ​honoris​ ​causa​ ​es​ ​un​ ​título​ ​honorífico​ ​que​ ​da​ ​una​ ​universidad
a​ ​personas​ ​eminentes.​ ​Esta​ ​designación​ ​se​ ​otorga​ ​principalmente​ ​a​ ​personajes​ ​que​ ​han
destacado​ ​en​ ​ciertos​ ​ámbitos​ ​profesionales​ ​y​ ​que​ ​no​ ​son​ ​necesariamente​ ​licenciados​ ​en
una​ ​carrera.​ ​Históricamente,​ ​un​ ​doctor​ ​honoris​ ​causa​ ​recibe​ ​el​ ​mismo​ ​tratamiento​ ​y
privilegios​ ​que​ ​aquellos​ ​que​ ​obtienen​ ​su​ ​doctorado​ ​académico​ ​de​ ​forma​ ​convencional,​ ​a
menos​ ​que​ ​se​ ​especifique​ ​lo​ ​contrario.</td>
</tr>
</tfoot>

● Els​ ​atributs​ ​colspan​ ​i​ ​rowspan:​ ​L'atribut​ ​colspan​ ​crea​ ​una​ ​cel·la​ ​de​ ​taula​ ​que​ ​ocuparà
més​ ​d'una​ ​columna.​ ​En​ ​el​ ​cas​ ​del​ ​peu​ ​anterior,​ ​jo​ ​volia​ ​que​ ​una​ ​cel·la​ ​de​ ​la​ ​taula
n'ocupés​ ​tota​ ​l'amplada​ ​i​ ​per​ ​això​ ​li​ ​he​ ​dit​ ​que​ ​havia​ ​d'estendre's​ ​al​ ​llarg​ ​de​ ​quatre
columnes.​ ​També​ ​podeu​ ​afegir-hi​ ​un​ ​atribut​ ​rowspan​ ​de​ ​cel·la​ ​de​ ​taula​ ​que​ ​permetrà
que​ ​la​ ​cel·la​ ​ocupi​ ​x​ ​files,​ ​per​ ​exemple​ ​<td​ ​rowspan="3">.

<td​ ​colspan="3"></td>​ ​serveix​ ​per​ ​dir​ ​que​ ​ocupará​ ​3​ ​columnes

<td​ ​rowspan="3">.​​ ​Ocupará​ ​dues​ ​files

● L'atribut​ ​summary:​ ​Aquest​ ​atribut​ ​s'utilitza​ ​per​ ​a​ ​definir​ ​un​ ​resum​ ​del​ ​contingut​ ​de​ ​la
taula​ ​per​ ​al​ ​seu​ ​ús​ ​per​ ​part​ ​dels​ ​lectors​ ​de​ ​pantalla​ ​(observeu​ ​que​ ​aquest​ ​resum​ ​no
apareix​ ​a​ ​la​ ​versió​ ​de​ ​la​ ​taula​ ​que​ ​es​ ​veu​ ​en​ ​pantalla.)​ ​Tingueu​ ​en​ ​compte​ ​que​ ​en​ ​les
recomanacions​ ​WC3​ ​antigues,​ ​WCAG​ ​1.0​ ​i​ ​HTML​ ​4.0,​ ​es​ ​diu​ ​que​ ​es​ ​pot​ ​utilitzar
l'atribut​ ​summary​ ​tal​ ​com​ ​s'ha​ ​explicat​ ​anteriorment.​ ​En​ ​els​ ​esborranys​ ​més​ ​nous​ ​de
les​ ​especificacions,​ ​però,​ ​aquest​ ​atribut​ ​summary​ ​ja​ ​no​ ​es​ ​menciona.​ ​El​ ​fet​ ​de​ ​seguir
utilitzant​ ​l'atribut​ ​summary​ ​és​ ​una​ ​qüestió​ ​que​ ​està​ ​per​ ​resoldre;​ ​de​ ​moment,​ ​els
integrants​ ​del​ ​Web​ ​Standards​ ​Curriculum​ ​hem​ ​arribat​ ​a​ ​la​ ​conclusió​ ​que​ ​val​ ​la​ ​pena
seguir-lo​ ​utilitzant.​ ​Al​ ​cap​ ​i​ ​a​ ​la​ ​fi,​ ​no​ ​fa​ ​cap​ ​mal​ ​i​ ​presenta​ ​alguns​ ​avantatges​ ​per​ ​a
l'accessibilitat.

● L'atribut​ ​scope:​ ​També​ ​és​ ​possible​ ​que​ ​hàgiu​ ​observat​ ​els​ ​atributs​ ​scope​ ​de​ ​les
etiquetes​ ​th,​ ​i​ ​el​ ​fet​ ​que​ ​jo​ ​hagi​ ​definit​ ​els​ ​noms​ ​dels​ ​volcans​ ​també​ ​com​ ​a​ ​títols​ ​de
columnes,​ ​dins​ ​les​ ​files​ ​de​ ​dades.​ ​Això​ ​és​ ​perfectament​ ​possible,​ ​però​ ​de​ ​fet​ ​m'estic
apartant​ ​del​ ​tema.​ ​L'atribut​ ​scope​ ​es​ ​pot​ ​utilitzar​ ​dins​ ​l'element​ ​th​ ​per​ ​a​ ​indicar​ ​als
lectors​ ​de​ ​pantalla​ ​que​ ​el​ ​contingut​ ​de​ ​th​ ​és​ ​el​ ​títol​ ​d'una​ ​columna​ ​o​ ​una​ ​fila.​ ​L'atribut
scope​ ​només​ ​s'utilitza​ ​dins​ ​l'element​ ​th.
<tr>
​ ​ ​ ​ ​<th​ ​scope="col">Año</th>
​ ​ ​ ​ ​<th​ ​scope="col">Galardonado</th>
​ ​ ​ ​ ​<th​ ​scope="col">Enlace</th>
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
​ ​ ​</tr>

Pregunta​ ​2.​ ​Sobre​ ​la​ ​utilització​ ​de​ ​formularis,​ ​respon​ ​a​ ​les​ ​següents​ ​qüestions:
Explica​ ​la​ ​diferència​ ​entre​ ​GET​ ​i​ ​POST.​ ​Pots​ ​indicar​ ​en​ ​quins​ ​casos​ ​interessa​ ​més​ ​un
que​ ​l'altre​ ​i​ ​per​ ​què?

Llums,​ ​càmera,​ ​acció!​ ​Quan​ ​heu​ ​premut​ ​el​ ​botó​ ​de​ ​tramesa​ ​en​ ​el​ ​primer​ ​formulari​ ​i​ ​no​ ​ha
​ ethod​ ​(mètode)
passat​ ​res,​ ​la​ ​raó​ ​era​ ​que​ ​no​ ​incloïa​ ​cap​ ​acció​ ​ni​ ​mètode.​ ​L'atribut​ m
especifica​ ​com​ ​s'envien​ ​les​ ​dades​ ​a​ ​l'script​ ​que​ ​les​ ​processarà.​ ​Els​ ​dos​ ​mètodes​ ​més
comuns​ ​són​ ​"GET"​ ​i​ ​"POST".​ ​El​ ​mètode​ ​"GET"​ ​enviarà​ ​les​ ​dades​ ​de​ ​la​ ​URL​ ​de​ ​la​ ​pàgina
(sempre​ ​veureu​ ​URL​ ​de​ ​l'estil
http://www.example.com/page.php?data1=value1&data2=value2...​;​ ​aquestes​ ​són
dades​ ​que​ ​es​ ​transporten​ ​amb​ ​el​ ​mètode​ ​"GET").​ ​Si​ ​no​ ​és​ ​que​ ​teniu​ ​una​ ​raó​ ​concreta​ ​per​ ​a
utilitzar​ ​"GET",​ ​probablement​ ​és​ ​millor​ ​no​ ​utilitzar-lo​ ​si​ ​intenteu​ ​enviar​ ​informació​ ​segura,​ ​ja
que​ ​tothom​ ​pot​ ​veure​ ​la​ ​informació​ ​mentre​ ​es​ ​transmet​ ​a​ ​través​ ​de​ ​la​ ​URL.​ ​"POST"​ ​envia​ ​les
dades​ ​a​ ​través​ ​de​ ​l'script​ ​que​ ​ofereix​ ​el​ ​formulari;​ ​aquestes​ ​dades​ ​es​ ​poden​ ​enviar​ ​a​ ​un
missatge​ ​electrònic​ ​que​ ​s'envia​ ​a​ ​l'administrador​ ​de​ ​lloc​ ​o​ ​bé​ ​a​ ​una​ ​base​ ​de​ ​dades​ ​que
s'emmagatzemarà​ ​i​ ​a​ ​la​ ​qual​ ​es​ ​podrà​ ​accedir​ ​més​ ​endavant,​ ​i​ ​no​ ​a​ ​la​ ​URL​ ​del​ ​"GET".
"​POST​"​ ​és​ ​l'opció​ ​més​ ​segura​ ​i​ ​normalment​ ​la​ ​millor.

Pregunta​ ​3.​ ​Sobre​ ​tipus​ ​de​ ​posicionament​ ​dintre​ ​del​ ​flux​ ​del​ ​document:Quins​ ​tipus​ ​de
position​ ​es​ ​poden​ ​aplicar​ ​als​ ​elements​ ​d'una​ ​pàgina​ ​web?​ ​Explica​ ​les​ ​diferències
entre​ ​ells​ ​i​ ​posa​ ​exemples​ ​en​ ​els​ ​que​ ​faries​ ​servir​ ​un​ ​o​ ​altre.

● Posicionament​ ​Absolut
○ És​ ​absolutament​ ​essencial​ ​saber​ ​quin​ ​és​ ​el​ ​bloc​ ​contenidor​ ​quan​ ​s'utilitza​ ​el
posicionament​ ​absolut.​ ​Per​ ​això​ ​és​ ​tan​ ​útil​ ​configurar​ ​position:relative​ ​en​ ​el
bloc​ ​contenidor,​ ​fins​ ​i​ ​tot​ ​si​ ​no​ ​es​ ​desplaça​ ​realment​ ​la​ ​posició​ ​del​ ​quadre.
Permet​ ​fer​ ​que​ ​un​ ​element​ ​sigui​ ​el​ ​bloc​ ​contenidor​ ​dels​ ​seus​ ​descendents
posicionats​ ​absolutament,​ ​és​ ​a​ ​dir,​ ​us​ ​proporciona​ ​el​ ​control.
● Posicionament​ ​Fix
○ El​ ​posicionament​ ​fix​ ​és​ ​de​ ​fet​ ​una​ ​forma​ ​especialitzada​ ​del​ ​posicionament
absolut;​ ​els​ ​elements​ ​amb​ ​posicionament​ ​fix​ ​estan​ ​fixos​ ​en​ ​relació​ ​amb​ ​la
finestra​ ​o​ ​viewport​ ​del​ ​navegador​ ​en​ ​comptes​ ​d'estar-ho​ ​en​ ​relació​ ​amb
l'element​ ​contenidor;​ ​fins​ ​i​ ​tot​ ​si​ ​es​ ​desplaça​ ​la​ ​pàgina,​ ​es​ ​mantenen
exactament​ ​a​ ​la​ ​mateixa​ ​posició​ ​a​ ​la​ ​finestra​ ​del​ ​navegador.
● Posicionament​ ​estàtic:
○ Simplement​ ​es​ ​disposen​ ​en​ ​l'ordre​ ​en​ ​què​ ​apareixen​ ​en​ ​l'etiquetatge​ ​i​ ​ocupen
tot​ ​l'espai​ ​que​ ​necessiten;​ ​aquest​ ​és​ ​el​ ​comportament​ ​per​ ​defecte​ ​que​ ​es
dóna​ ​quan​ ​no​ ​s'aplica​ ​cap​ ​CSS​ ​a​ ​l'HTML.
● Posicionament​ ​relatiu
○ El​ ​que​ ​cal​ ​recordar​ ​sobre​ ​el​ ​posicionament​ ​relatiu​ ​és​ ​que​ ​només​ ​es​ ​desplaça
la​ ​caixa​ ​generada.​ ​L'element​ ​segueix​ ​essent​ ​allà​ ​on​ ​era​ ​en​ ​el​ ​flux​ ​del
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
document​ ​estàtic.​ ​Aquí​ ​és​ ​on​ ​"ocupa​ ​espai"​ ​pel​ ​que​ ​fa​ ​als​ ​altres​ ​elements.
Això​ ​significa​ ​que​ ​la​ ​caixa​ ​desplaçada​ ​pot​ ​acabar​ ​a​ ​sobre​ ​d'altres​ ​caixes
d'elements,​ ​ja​ ​que​ ​aquestes​ ​segueixen​ ​actuant​ ​com​ ​si​ ​l'element​ ​amb​ ​un
posicionament​ ​relatiu​ ​s'hagués​ ​quedat​ ​on​ ​havia​ ​de​ ​ser​ ​abans​ ​d'aplicar​ ​el
posicionament.​ ​Pel​ ​que​ ​fa​ ​al​ ​flux​ ​del​ ​document,​ ​l'element​ ​no​ ​s'ha​ ​mogut;​ ​és
només​ ​el​ ​resultat​ ​visual​ ​final​ ​el​ ​que​ ​mostra​ ​la​ ​caixa​ ​desplaçada.​ ​Vegem​ ​com
funciona​ ​a​ ​la​ ​pràctica.

HTML​ ​I​ ​CSS​ ​del​ ​web

body​ ​{
margin:​ ​0;
padding:​ ​0;
font-family:​ ​sans-serif;

#container{
​ ​ ​ ​width:​ ​80%;
​ ​ ​ ​margin:0​ ​auto;

Sempre​ ​es​ ​defineix​ ​com​ ​volem​ ​que​ ​sigui​ ​el​ ​cos​ ​de​ ​la​ ​pàgina,​ ​i​ ​juntament,​ ​soleixo​ ​utilitzar​ ​el
Div​ ​container,​ ​per​ ​defenir,​ ​a​ ​on​ ​anirán​ ​inclosos​ ​els​ ​elements​ ​de​ ​la​ ​web.​ ​Per​ ​això​ ​normalment
el​ ​container​ ​el​ ​defineixo​ ​com​ ​a​ ​80%,​ ​per​ ​tall​ ​de​ ​no​ ​ocupar​ ​la​ ​web​ ​sencera,​ ​i​ ​deixar​ ​marges,​ ​a
tots​ ​els​ ​elements.

h1,p{
text-align:​ ​center;
color:#000078;
​ ​ ​ ​padding:1em​ ​1em;
​ ​ ​ ​margin-top:​ ​20px;

H1​ ​i​ ​p,​ ​defineixo​ ​com​ ​serán​ ​els​ ​textos​ ​de​ ​la​ ​web,​ ​i​ ​quin​ ​marge​ ​deixaràn​ ​amb​ ​la​ ​caixa​ ​a​ ​on
estiguin.

header{
​ ​ ​ ​margin-bottom:​ ​20px;
}
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
El​ ​header,​ ​defineix​ ​en​ ​aquesta​ ​web​ ​la​ ​capçalera,​ ​que​ ​són​ ​el​ ​logo​ ​i​ ​la​ ​franja,​ ​que​ ​es​ ​repeteix
en​ ​totes​ ​les​ ​pagines,​ ​per​ ​això​ ​són​ ​elements​ ​fixes.
hr{

​ ​ ​ ​height:​ ​6px;
​ ​ ​ ​border:​ ​0;
​ ​ ​ ​background-color:#73edff;
​ ​ ​ ​margin-left:​ ​1em;
​ ​ ​ ​margin-right:​ ​1em;
}

Defineix​ ​la​ ​barra​ ​horitzontal,​ ​lo​ ​hem​ ​donat​ ​color,​ ​i​ ​uns​ ​marges,​ ​ja​ ​que​ ​está​ ​fora​ ​del
contenidor,​ ​per​ ​tal​ ​de​ ​arribar​ ​més​ ​als​ ​marges​ ​de​ ​la​ ​pàgina.

img{
​ ​ ​ ​ ​width:​ ​120px;
​ ​ ​ ​ ​height:​ ​100%;
​ ​ ​ ​ ​margin-top:​ ​-10px;
​ ​ ​ ​ ​float:left;
​ ​ ​ ​ ​margin-left:​ ​1em;
​ ​ ​ ​ ​margin-right:​ ​2em;

#logo{
​ ​ ​ ​height:​ ​auto;
​ ​ ​ ​float:left;
}

La​ ​imatge​ ​es​ ​el​ ​logo​ ​de​ ​la​ ​web,​ ​que​ ​també​ ​es​ ​repeteix​ ​en​ ​totes​ ​les​ ​pàgines.

#pl{
​ ​ ​ ​width:​ ​80%;
​ ​ ​ ​margin:0​ ​auto;
​ ​ ​ ​text-align:​ ​center;

span​ ​a{
​ ​ ​ ​text-decoration:​ ​none;
​ ​ ​ ​color:#000078;
}
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1

#span-a​ ​{

​ ​ ​ ​float:left;
​ ​ ​ ​background-color:​ ​#73edff;
​ ​ ​ ​padding:​ ​2em​ ​3em;
​ ​ ​ ​margin-right:​ ​0.5em;

#span-a:hover{
​ ​ ​ ​background-color:#5bb5dc;
}

#span-b​ ​{
​ ​ ​ ​float:left;
​ ​ ​background-color:​ ​#73edff;
​ ​ ​ ​padding:​ ​2em​ ​3em;
​ ​ ​ ​margin-right:​ ​0.5em;
}
#span-b:hover{
​ ​ ​ ​background-color:#5bb5dc;
}
#span-c​ ​{
​ ​ ​ ​float:left;
​ ​ ​background-color:​ ​#73edff;
​ ​ ​ ​padding:2em​ ​3em;

}
#span-c:hover{
​ ​ ​ ​background-color:#5bb5dc;
}

#span-d{

​ ​ ​ ​background-color:​ ​#73edff;
​ ​ ​ ​padding:1em​ ​1em;
​ ​ ​ ​margin-left:​ ​1em;
}
#span-d:hover{
​ ​ ​ ​background-color:#5bb5dc;
}

#span-e{
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1

​ ​ ​ ​background-color:​ ​#73edff;
​ ​ ​ ​padding:1em​ ​1em;
​ ​ ​ ​margin-left:​ ​1em;
}
#span-e:hover{
​ ​ ​ ​background-color:#5bb5dc;
}

.titulos{
​ ​ ​ ​text-align:​ ​left;
​ ​ ​ ​font-style:​ ​normal;
​ ​ ​ ​font-size:​ ​14px;
}
span.cursiva{
​ ​ ​ ​text-align:​ ​left;
​ ​ ​ ​font-style:​ ​italic;
​ ​ ​ ​display:​ ​block;
​ ​ ​ ​margin-bottom:​ ​0.5em;
}

Aquest​ ​cop,​ ​he​ ​definit​ ​els​ ​elements​ ​tipus​ ​menú,​ ​o​ ​bé​ ​elements​ ​identificadors,​ ​com​ ​la​ ​cursiva,
amb​ ​span,​ ​per​ ​tal​ ​de​ ​no​ ​utilitzar​ ​el​ ​obsolet​ ​del​ ​<i>​ ​que​ ​sempre​ ​utilitzava,​ ​i​ ​donar​ ​els​ ​valors​ ​al
css.
És​ ​cert​ ​que​ ​he​ ​utilitzat​ ​molts​ ​span-a,​ ​span-b,​ ​però​ ​per​ ​tal​ ​de​ ​definir​ ​cadascú​ ​per​ ​separat,​ ​ho
he​ ​cregut​ ​convenient.

.lista{
​ ​ ​ ​width:​ ​50%;
​ ​ ​ ​padding:​ ​1em​ ​1em;
​ ​ ​ ​background-color:​ ​#f6f6f6;
​ ​ ​ ​margin:0​ ​auto;
​ ​ ​ ​border:​ ​3px​ ​solid​ ​#FFFFFF;
​ ​ ​ ​color:#000078;
}

Per​ ​alguns​ ​elements,​ ​he​ ​fet​ ​servir​ ​la​ ​llista,​ ​perquè​ ​són​ ​elements​ ​que​ ​tindrem​ ​més​ ​ordenats
que​ ​amb​ ​parragraf,​ ​i​ ​llavors​ ​els​ ​tractem​ ​desde​ ​el​ ​css,​ ​per​ ​donar​ ​forma​ ​al​ ​contingut.

table​ ​{
​ ​ ​ ​width:​ ​90%;
​ ​ ​ ​margin:​ ​0​ ​auto;

}
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
th,​ ​td​ ​{
​ ​ ​ ​width:​ ​25%;
​ ​ ​ ​height:​ ​30px;
​ ​ ​ ​text-align:​ ​center;
​ ​ ​ ​color:#000078;

th{
​ ​ ​ ​background-color:​ ​#73edff;
}
td{
​ ​ ​ ​background-color:​ ​#f0f0f0;
}

tfoot​ ​td{
​ ​ ​ ​background-color:​ ​white;
​ ​ ​ ​font-size:​ ​0.5em;
​ ​ ​ ​padding:1em​ ​2em;
}

footer{
​ ​ ​ ​margin-top:​ ​10em;

footer​ ​hr{
​ ​ ​ ​clear:left;
​ ​ ​ ​height:​ ​3px;
​ ​ ​ ​margin-top:​ ​3em;
}

Footer,​ ​defineix​ ​el​ ​peu​ ​de​ ​la​ ​pàgina,​ ​també​ ​son​ ​elements​ ​repetitius​ ​en​ ​totes,​ ​és​ ​a​ ​on​ ​va​ ​la
signatura,​ ​i​ ​la​ ​linia​ ​horitzontal​ ​però​ ​més​ ​fina​ ​que​ ​la​ ​de​ ​la​ ​capçalera.

.form-container{
​ ​ ​ ​ ​max-width:​ ​315px;
​ ​ ​ ​ ​margin:​ ​0​ ​auto;
​ ​ ​ ​ ​font:​ ​normal​ ​14px​ ​sans-serif;
​ ​ ​ ​ ​text-align:​ ​center;
​ ​ ​ ​ ​color:​ ​#5f5f5f;
}
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1

.form{

​ ​ ​ ​ ​padding:​ ​40px;
​ ​ ​ ​ ​color:#000078;
​ ​ ​ ​ ​background-color:​ ​ ​#ffffff;
​ ​ ​ ​ ​box-shadow:​ ​0​ ​1px​ ​3px​ ​0​ ​rgba(0,​ ​0,​ ​0,​ ​0.1);
}

.form​ ​.form-row{
​ ​ ​ ​ ​display:​ ​block;
​ ​ ​ ​ ​text-align:​ ​left;
​ ​ ​ ​ ​margin-bottom:​ ​23px;
}

.form​ ​input,
.form​ ​select{
​ ​ ​ ​ ​box-sizing:​ ​border-box;
​ ​ ​ ​ ​width:​ ​240px;
​ ​ ​ ​ ​box-shadow:​ ​1px​ ​2px​ ​4px​ ​0​ ​rgba(0,​ ​0,​ ​0,​ ​0.08);
​ ​ ​ ​ ​padding:​ ​12px​ ​18px;
​ ​ ​ ​ ​border:​ ​1px​ ​solid​ ​#dbdbdb;
}

.form​ ​input[type=radio],
.form​ ​input[type=checkbox]{
​ ​ ​ ​ ​box-shadow:​ ​none;
​ ​ ​ ​ ​width:​ ​auto;
}

.form​ ​select{
​ ​ ​ ​ ​color:​ ​inherit;
​ ​ ​ ​ ​background-color:​ ​#ffffff;
}

.form​ ​.form-checkbox​ ​span{

​ ​ ​ ​ ​margin-left:​ ​5px;
}

.form​ ​.form-checkbox​ ​input{

​ ​ ​ ​ ​width:​ ​auto;
}

.form​ ​.form-radio-buttons​ ​>​ ​div{

​ ​ ​ ​ ​margin-bottom:​ ​10px;
}
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1

.form​ ​.form-radio-buttons​ ​input{

​ ​ ​ ​ ​width:​ ​auto;
}

.form​ ​.form-radio-buttons​ ​label​ ​span{

​ ​ ​ ​ ​margin-left:​ ​8px;
}

.form​ ​.form-last-row{
​ ​ ​ ​ ​margin:​ ​35px​ ​auto​ ​0;
}

.form​ ​button{
​ ​ ​ ​ ​display:​ ​block;
​ ​ ​ ​ ​border-radius:​ ​2px;
​ ​ ​ ​ ​background-color:#73edff;
​ ​ ​ ​ ​color:​ ​#ffffff;
​ ​ ​ ​ ​font-weight:​ ​bold;
​ ​ ​ ​ ​box-shadow:​ ​1px​ ​2px​ ​4px​ ​0​ ​rgba(0,​ ​0,​ ​0,​ ​0.08);
​ ​ ​ ​ ​width:​ ​30%;
​ ​ ​ ​ ​margin:0​ ​auto;
​ ​ ​ ​ ​padding:​ ​14px​ ​22px;
​ ​ ​ ​ ​border:​ ​0;
​ ​ ​ ​ ​cursor:​ ​pointer;
}
.form​ ​button:hover{
​ ​ ​ ​background-color:#5bb5dc;
}

.form​ ​::-webkit-input-placeholder​ ​{
​ ​ ​ ​ ​color:​ ​ ​#999;
}

.form​ ​::-moz-placeholder​ ​{
​ ​ ​ ​ ​color:​ ​ ​#999;
​ ​ ​ ​ ​opacity:​ ​1;
}

.form​ ​:-ms-input-placeholder​ ​{
​ ​ ​ ​ ​color:​ ​ ​#999;
}

fieldset{
​ ​ ​ ​border:none;
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
​ ​ ​ ​background-color:#f6f6f6;
​ ​ ​ ​margin-top:​ ​1em;
​ ​ ​ ​border-radius:​ ​15px;
​ ​ ​ ​padding:​ ​2em​ ​2em;
}

Els​ ​estils​ ​més​ ​llargs,​ ​són​ ​els​ ​del​ ​formulari,​ ​investigan​ ​per​ ​diferents​ ​pàgines​ ​web,​ ​he​ ​vist
diferents​ ​formularis,​ ​que​ ​m’agradaven​ ​visualment,​ ​i​ ​per​ ​tant​ ​he​ ​fet​ ​servir​ ​coses​ ​com​ ​el​ ​box
shadow,​ ​per​ ​tal​ ​de​ ​donar​ ​profunditat​ ​als​ ​elements.​ ​És​ ​el​ ​primer​ ​cop​ ​que​ ​utilitzo​ ​el​ ​formulari,​ ​i
he​ ​volgut​ ​donar​ ​un​ ​caracter​ ​al​ ​formulari​ ​en​ ​general​ ​.form,​ ​i​ ​com​ ​que​ ​es​ ​separaven​ ​les
seccions​ ​per​ ​el​ ​fieldset,​ ​he​ ​volgut​ ​que​ ​la​ ​separació​ ​és​ ​notés,​ ​donan​ ​un​ ​background-color
diferent,​ ​i​ ​uns​ ​marges​ ​d’uns​ ​amb​ ​altres,​ ​per​ ​tal​ ​de​ ​diferenciar​ ​les​ ​diferents​ ​seccions​ ​del
formulari​ ​demanades.

Validació​ ​de​ ​la​ ​web​ ​i​ ​servidor

He​ ​validat​ ​varies​ ​vegades​ ​la​ ​web,​ ​i​ ​finalment​ ​ho​ ​deixat​ ​sense​ ​errades.
 Neus​ ​Barbanoj​ ​Fernández
Estudiant​ ​de​ ​Multimèdia
Llenguatges​ ​i​ ​estàndards​ ​web​ ​PAC03
Aula​ ​1
Però​ ​tinc​ ​un​ ​problema​ ​per​ ​cargar​ ​el​ ​web​ ​al​ ​servidor​ ​que​ ​no​ ​he​ ​comentat​ ​abans,​ ​si​ ​em​ ​pots
ajudar,​ ​em​ ​dona​ ​problemes​ ​alhora​ ​de​ ​instalar​ ​el​ ​aplicatiu,

Tinc​ ​un​ ​Mac,​ ​no​ ​sé​ ​si​ ​ho​ ​estic​ ​fent​ ​bé.​ ​I​ ​per​ ​això​ ​no​ ​puc​ ​presentar​ ​la​ ​web​ ​al​ ​servidor.
Necessito​ ​ajuda​ ​per​ ​tal​ ​de​ ​fer​ ​proves​ ​i​ ​pujar​ ​la​ ​pràctica​ ​final.

Gràcies