Aquesta assignatura és obligatòria i el que s'estudia al llarg del curs és com treballar amb llenguatge HTML i CSS correctament. A part d'aprendre els llenguatges de programació del que es tracta és d'aplicar correctament la seva sintaxi i organització, ja que per a la realització d'una web és fonamental tant per poder realitzar modificacions posteriors com per a posicionar-la. El treball de l'assignatura es presenta amb 3 PAC'S i Pràctica que és una web amb l'aplicació de tots els coneixements donats al llarg del quadrimestre.

1. Primera pàgina. Utilització de llistes de definicions.
Nom del fitxer: respostes.html
Utilitzant llistes de definicions has de donar resposta a les següents preguntes:
Volem presentar en una pàgina web una llista ordenada que és la continuació d'una altra
llista que començava en una pàgina diferent. Com podem fer que la numeració continuï la
de la llista prèvia? Posa'n un exemple.
<ol>
<li>És important que l'ajust calòric de la dieta sigui l'adequat, pesar els
aliments.</li>
<li>El pes que s'indica és sense desaprofitaments (greix, os, espines,
peles).</li>
<li> Cuini els aliments de forma senzilla </li>
</ol>
<p class=“note”>Factors molt importants i a tindre en conter hem dit avanç
com són. La forma tant la de cuinar o pesar el menjar. Ja que una incorrecta
mesura en el pes o en el tipus de cuinar pot tirar per terra la pèrdua de pes.
</p>
<ol start=“4”>
<li>Per l'amaneixo es poden utilitzar lliurement: herbes aromàtiques</li>
<li>Com a edulcorant artificial s'empraran sacarina i similars.</li>
<li> Begudes "*light" No és aconsellable prendre més d'una </li>
<li>No s'ha de prendre begudes alcohòliques</li>
</ol>
Quina diferència hi ha entre utilitzar en l'atribut: href d'un enllaç rutes absolutes, rutes
absolutes a l'arrel del lloc o rutes relatives a la carpeta actual?
L'atribut més habitual que utilitzarem es el href: el recurs cap al qual apunta (ja sigui un arxiu extern o
un ID d'àncora).
En una ruta absoluta podem utilitzar aquesta ruta per cridar a la imatge des de qualsevol lloc (ja
s'en el nostre domini o en un altre).
Una ruta relativa s'utilitzara més per a fer cridaes a rutes que es troben dins del nostre domini.
Una ruta absoluta per a cridar elements que formen part del nostre domini (imatges, enllaç,
llistes,etc.). No pot funcionar correctament, ja que canvia si estem en local o al servidor web
l'adreça.
Per això la utilització de les rutes relatives i una altra que pareix que no però l'arrel del lloc la
probabilitat d'error de sintaxis augmenta encara que no sigui important a nivell de comprensió
lògica.
Si treballem en rutes relatives caldra tindre en conter si nosaltres estem en el directori principal i
volem inserir la foto des del “index” la ruta relativa DES DEL index seria: (images/elmeugos.jpg)
Ara suposem que estem dins d'una categoria anomenada "articulos" i volem insertar la foto, la ruta
relativa DES D'aquest punt seria:(../images/elmeugos.jpg)
Els dos punts abans de la barra (../) significa un pas cap a enrere, perquè tenim que sortir de la
carpeta "articulos" i entrar a la carpeta "images" on está la foto.
Quines són les més habituals i per què?

2. Dependrà de l'enllaç a utilitzar si es un hipervincle cap a un altra pàgina web serà una ruta
absoluta. Si es una imatge que tinguem al nostre domini s'utilitzara una ruta relativa
Posa un exemple de cadascuna d'elles.
Src = Aquest atribut és obligatori i indica el nom de l'arxiu d'imatge (entre cometes) o la URL que
es va a representar.
Una ruta absoluta
http://www.exemple.com/respostes.html
Una ruta relativa en una adreça que esta al mateix nivell
"respostes.html"
<img src="imatge1.png" alt="Logotip d'empresa" height="50" width="50">
Una ruta relativa a un nivell superior a la carpeta “images”
<img src="../imatge1.png" alt="Logotip d'empresa" height="50" width="50">
Una ruta relativa a un nivell inferior a la carpeta “images”
<img src="images/imatge1.png" alt="Logotip d'empresa" height="50" width="50">
En què consisteix el mode "quirks" dels navegadors?
"Quirks mode fa referència a una tècnica usada per alguns navegadors per mantenir la retro-
compatibilitat amb pàgines web dissenyades per a navegadors més antics" (font: "Wikipedia")
Les implementacions de CSS en navegadors web,va donar lloc a errors en pàgines que no es van
sotmetre a les especificacions requerides per aquests llenguatges. Donant lloc comportaments i
presentacions incorrectes. aquest comportament s'anomena "Quirks".
Quines diferències presenta amb el mode estàndard?
En manera estàndard les pàgines són dibuixades d'acord amb les especificacions d'HTML i CSS,
mentre que en la manera "quirks" tracten d'emular el comportament dels navegadors vells per
assegurar que aquestes pàgines es representin d'acord a la intenció original dels seus autors cosa
que moltes vegades no es sembla a la realitat.
També, els navegadors determinen com manera usar basant-se en el DOCTYPE la pàgina; si hi
ha una declaració completa de DOCTYPE present, el navegador usa la manera estàndard i si
aquesta està absent el navegador utilitza la manera "quirks".
Per exemple una pàgina web que comenci amb el següent *DOCTYPE *dispararìa la manera
estàndard:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
Mentre que aquest DOCTYPE el qual no conté ni la versió d'HTML usada, dispararia la manera
"quirks"
<!DOCTYPE html PUBLIC>
A més,una pàgina que no inclogui un DOCTYPE serà dibuixada en manera "quirks".
Quan i com hem de tenir en compte l'accessibilitat a les pàgines web que dissenyem?

3. Des del començament de creacio d’aquesta (web), tindrem en compte de què sigui accesible. Ja
que una volta realitzada la tasca és més complexa.
Si a l’hora de desenvolupar una pàgina web ens apliquem criteris de accessibilitat, apart de
facilitar l’accés a persones amb alguna discapacitat el que aconseguim son beneficis tant
econòmics com socials, ja que podem arribar a més gent i mes els motors de búsqueda solen
utilizar els mateixos críteris per a buscar per tant a l’hora de posicionar será molt més fácil.
Indica algunes característiques que ha de tenir una pàgina accessible i il·lustra-les
mitjançant exemples.
Tenim a un mateix nivel en següent contingut
disposem de les pàgines ”respostes.html” i “respostes2.html”
una imatge de nom ”continguts_de_respostes1.png”
<UL>
<li><A href=”respostes.html”> enllaç a respostes </A></li>
<li><IMG src=” continguts_de_respostes1.png” alt=”Una imagen bonita”></li>
<li><A href=”respostes2.html”>enllaç a respostes2 </A></li>
</UL>
Un altre exemple seria la identificació clara de qualsevol canvi d'idioma que es pugui produir en el
text d'un document.
<p>
<q>Buenos días Philip</q>
<q lang=”en”>Good morning</q>. Respondió Philip en inglés.
<q>¿Qué tal estás?</q>
<q lang=”fr”>Très bien.</q> Volvió a responder, pero en francés.
</p>
Al colocar una imatge l’atribut “alt” descriu la nostra imatge
<img src="/images/ninot1.jpg" width=340 height=210 alt="un ninot de falla">
El que no deuria de tindre una web amb accesibilidad deuria de ser:
- Imatges sense text alternatiu;
- Absència de text alternatiu per als punts sensibles dels mapes d’imatge;
- Elements multimèdia sense alternatives de text;
- Absència d’informació alternativa per als usuaris que no poden accedir als marcs (*frames) o als
programes integrats com Javascript o Flash;
- Llocs amb un contrast baix entre el color de text i fons, o fons complexos que dificulten la lectura
- Llocs massa complexos per trobar la informació rellevant
Com s'especifica l'amplada i l'alçada d'un element HTML?
WIDTH= Aquest atribut ajuda al navegador a representar la imatge, significa l'ample de la imatge
que anem a representar.
HEIGHT=Igual que l'atribut WIDTH, aquest representa l'alt de la imatge.
Posa exemples per acompanyar les teves explicacions.
<img src="/images/ninot1.jpg" width=340 height=210 alt="un ninot de falla">
Segona pàgina. Utilització de llistes ordenades i no ordenades i enllaços.
Nom del fitxer: series.html
Has de reproduir l'estructura de la llista que veus a l'arxiu series.jpg. Per copiar i enganxar

4. còmodament el text, adjuntem també l'arxiu series.rtf.
L'aspecte del llistat resultant ha de semblar-se al model. Les imatges necessàries per
canviar els pics per defecte d'algunes de les llistes s'adjunten amb aquest enunciat
(vermell.gif, verd.gif, blau.gif).
S'ha de poder enllaçar amb les diverses webs de les sèries que s'esmenten; trobaràs els
enllaços a l'arxiu url_series.rtf.
Cal modificar l'aspecte per defecte amb el qual el navegador mostra els enllaços. Per
defecte seran de color negre. Quan l'usuari passi el punter del ratolí per sobre de l'enllaç, el
color del text canviarà a verd amb subratllat de línia discontínua.
Tercera pàgina. El model de caixa, imatges, llistes i enllaços.
Nom del fitxer: big_data.html

5. Ha de reproduir-se amb la màxima fidelitat possible el document que presentem a l'arxiu
big_data.jpg. Per copiar i enganxar còmodament el text, adjuntem també l'arxiu big_data.rtf.
S'adjunten les imatges de l'article.
Condicions a tenir consideració per a la maquetació del document:
Mida i colors de la lletra: cal fer els canvis de color i mida de cada part del document, imitant les
proporcions del model.
Alineaments: s'han de respectar els alineaments del text.
Elements semàntics: han de marcar convenientment les cites, abreviatures, paraules en idioma
diferent al del document, etc i, si cal, modificar el format que presenten per defecte.
Imatges: s'ha de considerar la manera més convenient de presentar les imatges en el document
en funció del seu valor. Cal tenir en compte també el seu posicionament.
Composició: no cal que l'amplada del text en pantalla tingui exactament la mateixa mesura que la
del model, si bé s'ha d'aconseguir que sigui llegible i que l'article aparegui centrat en la finestra del
navegador.
Caixes especials: s'ha d'aconseguir que les caixes que contenen les imatges, així com les del
títol i el peu de pàgina, tinguin amplades, marges, farcits i vores que les facin semblants al
document model.