2 multimÈdia a la orld ide eb. -...

Joan Jou Majó ESUP Tecnocampus

2-1

2

2 MULTIMÈDIA A LA WORLD WIDE WEB.

En aquest capítol estudiarem a fons els llenguatges usats per al desenvolupament de projectes web estàtics (llocs web): HTML per als continguts i CSS per al disseny de la presentació dels continguts. Visiteu http://fabianburghardt.de/webolution/ per veure com ha evolucionat la tecnologia web al llarg de la seva història.

2.Multimèdia a la World Wide Web.

2-2

2.1 Desenvolupament de llocs web. L'eina d'autor Dreamweaver és un editor de codi HTML per al disseny visual i l'administració de llocs i pàgines web. Incorpora la possibilitat de controlar manualment el codi HTML, treballar amb un entorn d'edició visual i, a més, inclou una gran quantitat d'eines que faciliten i amplien les possibilitats d'interacció de l'usuari a les pàgines que elaborem. Disposa de les opcions característiques de qualsevol editor del tipus WYSIWYG (What You See Is What You Get). Podem incorporar els elements més habituals en una pàgina web com ara text, imatges, taules, enllaços, etc. També disposem d'un tipus d'eines d'utilització freqüent però que altres editors no contemplen, com la verificació dels enllaços, l'edició de mapes d'imatge... La disponibilitat de l'aplicació d'opcions relacionades amb les últimes tecnologies com, per exemple, el treball amb capes, la creació automàtica de JavaScripts, els fulls d'estil CSS..., completen una oferta molt potent a les nostres mans. El grau de dificultat d'utilització del programa s'incrementa segons la complexitat del treball que ens proposem. En aquest curs utilitzareu les eines més habituals de composició de pàgines web i així podreu publicar les vostres primeres aplicacions multimèdia.

2.1.1 Disposició de l'entorn de treball de Dreamweaver L'entorn de treball de Dreamweaver, en la versió CS51, presenta unes zones de treball amb els següents elements principals:

• Barra de menús • Panell Inserir • Panell Fitxers (Lloc) • Panell Propietats • Document Obert

Observeu la imatge següent amb la disposició d'aquestes zones:

1 Moltes imatges estàn agafades de la versió CS4. Pot haver algunes diferències amb la versió CS5 que utilitzem a pràctiques. Quan la imatge és molt diferent, hem agafat la imatge de la versió CS5.

Barra de menús

Panell Inserir

Panell Fitxers

Panell Propietats

Document Obert

Espai de treball


2-3

2.1.2 Administració d'un projecte web amb el Dreamweaver

2.1.2.1 Definició d'un "Lloc" web local.

El lloc (Site, en anglès) és el conjunt de pàgines, imatges i altres arxius de qualsevol tipus que hi ha en una web. A partir d'ara bo parlarem de "lloc web" sinó de projecte web. La definició d'un projecte web, comprèn diversos paràmetres, però els principals, són:

• Definició de la carpeta que conté tots els arxius que componen la web • Definició de l'arxiu inicial de la web

Normalment, l'arxiu inicial s'ha de dir index.html però això pot dependre del servidor, en alguns casos es pot dir index.htm, default.htm, default.html o de qualsevol altra forma que indiqui el servidor. NOTA: Com a estudiants de l'ESUPT teniu un compte per col· locar els vostres projectes web en el servidor web ssh.eupmt.tecnocampus.cat. En aquest moments ja hi ha un document anomenat index.html que es pot veure a través del navegador amb la URL http://ssh.eupmt.tecnocampus.cat/~elVostreLogin/

Recordeu que el login es sol confeccionar amb la inicial del vostre nom, seguit del vostre primer cognom i, en cas de existir un altre usuari amb el mateix cognom, es pot afegir la inicial del segon cognom. En tot cas, coincideix amb el login del correu electrònic que us han donat. Per fer servir el correu electrònic de l'ESUPT ([email protected]), accedir al eCcampus (http://www.tecnocampus.cat/ca/ecampus), i ara actualitzar la vostra web cal disposar de password. Si no el teniu o no el recordeu, sol· liciteu-lo a la web accedint a http://helpdesk.tecnocampus.cat/. En Dreamweaver és important acostumar-se a administrar el projecte. Això permetrà fer moltes tasques importants, com per exemple:

• Verificar els enllaços de forma automàtica a tota la web. • Veure el mapa de la web (imatge en forma d'arbre que permet navegar per les pàgines que

componen la web). • Posar adreces relatives de forma automàtica entre pàgines i als noms de les imatges.

Per definir el lloc de la vostra web amb Dreamweaver cal anar a l'explorador de Windows i crear, per exemple, la carpeta www. A l'interior d'aquesta carpeta, anomenada “carpeta arrel”, hi col· locarem tots els fitxers que composaran el nostre projecte web. És important endreçar els documents segons la seva tipologia en diferents carpetes, per exemple, totes les imatges en una carpeta de nom imatges.


2-4

Nota: En els noms de carpetes i arxius no useu espais en blanc, accents, dièresis, etc. És millor que sigui una única paraula sense cap caràcter propi d'un idioma en particular. Millor no usar la ñ ni la ç. Si es mira el menú Sitio, es poden veure les opcions de la figura següent:

Tal com es pot veure a la figura, en el primer apartat hi ha les opcions: Nuevo sitio..: permet crear un nou lloc

Administrar sitios..: permet administrar un lloc existent

Per definir el lloc, s'ha de seleccionar l'opció Sitio > Nuevo sitio... Apareix un quadre de diàleg. Ompliu-lo amb les dades de la imatge següent:

El camp Nombre del sitio, és el nom que voleu donar al lloc (que servirà com a nom intern al Dreamweaver, per seleccionar-lo més endavant diferenciant-lo dels altres llocs definits en el mateix ordinador). Escriviu un nom qualsevol (en el nostre exemple s'ha escrit "Nom del lloc web"). A continuació s'ha de posar la carpeta del lloc local de la web: C:\TEMP\www\ També la podeu seleccionar o crear, si no existeix, fent clic a la icona carpeta de la dreta.


2-5

El camp URL Web permet que el lloc, en verificar els enllaços, detecti els que fan referència al propi lloc web. Escriviu la vostra URL http://ssh.eupmt.tecnocampus.cat/~nom.cognom/ Un cop definits els elements de la finestra anterior, ja es pot considerar el lloc creat i a partir d'ara tot el que es faci en la web s'incorporarà al lloc. Un cop acceptat, apareixerà a la finestra del lloc l'estructura de carpetes del lloc:

2.1.2.2 Configuració del FTP per l'enviament del lloc web al servidor web.

El Dreamweaver disposa d'una utilitat pròpia que permet fer la transferència dels fitxers (FTP) del nostre disc al servidor web. Per configurar el FTP s'ha d'anar a la finestra del lloc. Només cal seleccionar l'opció Sitio > Administrar sitios..., apareix la finestra següent,

Seleccionem el lloc, "Nom del Lloc Web" en el nostre exemple, i fem clic a Editar....

clicant amb el botó dret del ratolí apareix les opcions d'arxiu nou i de carpeta nova

que podeu usar si no les heu creat amb l'explorador de Windows

Ara podeu crear la pàgina d'inici que es dirà index.html


2-6

Un cop oberta la finestra d'edició del lloc, s'ha de seleccionar l'opció Servidores. Feu clic al símbol +

Ompliu-lo amb les dades de la imatge següent:

A continuació es comenten les opcions d'aquesta finestra:

Dirección SFTP És el nom (DNS) del servidor FTP. Escriviu ssh.eupmt.tecnocampus.cat

Directorio raiz: És el lloc del servidor on es col· locarà la vostra web. Poseu public_html.

Nombre de usuario: Aquesta casella permet indicar el nom de l'usuari que es connecta via FTP. Escriviu el vostre nom.cognom .

Contraseña:

Contrasenya de l'usuari que es connecta via FTP. Escriviu el password que us han donat. Cal recordar aquest password en secret (apunta'l en alguna llibreta personal).

Conectar usando

Indica si cal utilitzar un ftp segur per accedir al servidor. És el nostre cas.

Recordeu que el nom d'usuari i la contrasenya són les que us han donat per a la vostra web. Un cop fet això ja es pot acceptar la configuració i l'FTP està a punt per actuar.


2-7

2.1.2.3 Realització de l'FTP

La realització de l'FTP vol dir l'enviament des de l'ordinador local (el que s'està fent servir) fins a l'ordinador remot (el servidor web on es pensa posar els arxius) del conjunt d'arxius que componen el lloc web.

2.2 El llenguatge HTML per a la informació multimedia (continguts). Podem crear una nova pàgina HTML i definir el seu aspecte general activant el botó del panell de propietats Propiedades de la página.... Indiqueu el color de fons de la pàgina i escolliu una font sans-serif:

També és possible posar una imatge com a fons de la pàgina. En aquest cas, indiqueu el nom del fitxer en el camp Imagen de fondo o bé feu clic a Examinar... i seleccioneu el fitxer. Normalment, les imatges haurien d'estar totes dins de la carpeta imatges que hem habilitat en el nostre lloc local. Encara que la pàgina no estigui enllestida, és convenient que la deseu amb l'opció Archivo > Guardar como... de la barra de menú. Deseu-la a la carpeta C:\TEMP\www\ amb el nom de index.html. Recordeu que no és convenient posar accents, ni espais en blanc, ni més de vuit caràcters en el nom del fitxer. En els quadres Color de fondo i Color del texto, al fer clic a sobre, apareixerà el codi corresponent en format hexadecimal. Per exemple, el color blau proposat per al fons de la pàgina té el codi #CCFFFF. Malgrat estem editant la pàgina com si ho féssim amb el Word, en realitat s'està escrivint automàticament el codi de la pàgina en el llenguatge de la W.W.W, és a dir HTML (HyperText Markup Language).

Si es prem el botó Connectar del panell Archivos s'ha de veure el contingut en el servidor. En aquests moments, només visualitzareu el fitxer index.html que ja existeix al servidor i que serveix com a pàgina inicial del vostre espai web. Podeu modificar aquest arxiu com us agradi més.

descarregar els fitxers des del

servidor a l'ordinador actual

col·locar els fitxers de l'ordinador actual cap al servidor web


2-8

HTML és un llenguatge de descripció de pàgines web independent de la plataforma en la que s’utilitzi. Es parla de codi font. El programa que utilitzem per visualitzar la pàgina, el navegador, és el responsable d'interpretar el codi html i, per tant, de donar un aspecte coherent a la informació. Aquesta manera de treballar comporta l'avantatge que el document html és el mateix, independentment de la plataforma del client: Sun Solaris, Linux, PC windows, Mac, etc. Però, l'inconvenient més gran és que dos navegadors diferents poden representar la mateixa pàgina html de manera diferent. S'intenta establir uns estàndards que els navegadors es comprometen a respectar tot i que no sempre es compleix.

Fem un cop d'ull al codi HTML de la pàgina fent clic en el botó Código <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Nom del Portal</title> <style type="text/css"> body,td,th { font-family: Tahoma, Geneva, sans-serif; } body { background-color: #CFF; } </style> </head> <body> <p>Web personal</p> </body> </html>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/basic.html

La primera línia és una instrucció pel navegador. És la instrucció Document Type Definition que indica al navegador amb quin estàndard ha estat escrit el codi HTML i, per tant, se li demana que faci servir aquest estàndard per interpretar el document. En aquest curs farem servir l'estàndard HTML 5.0 vigent des del 2015. Com podem veure, la majoria de les marques (tags) respecten el següent patró: <nomMarca nomPropietat="valor" > contingut afectat per la marca </nomMarca>

En la sintaxi HTML 5.0 s’aconsella fer servir aquestes recomanacions:

• escriure els nomMarca i els nomPropietat en minúscules • si la marca no té contingut afectat es recomana acabar la marca d’inici amb /> • totes les propietats tenen un valor i van emmarcats amb " " o ‘ ‘. • si un element conté altres elements, cal posar la marca de fi en l’ordre invers a com s’han iniciat,

és a dir, no podem posar la marca de fi d’un element contenidor abans de posar totes les marques de fi dels elements que conté.

Els elements HTML els podem classificar en: àmbit de bloc (el contingut afectat intenta ocupar tota l’amplada de l’element pare, per tant, no es poden posar dos elements en àmbit de bloc un a l’esquerra de l’altre) o en àmbit de línia (el contingut afectat per la marca va consumint la línia actual i si no hi cap, passa a la següent línia). Vegeu el comportament en aquest exemple,

http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/elements.html

Element HTML

marca d’inici marca de fi


2-9

Així, la primera marca contenidor que tenim és el propi document HTML, <html> ... </html>

que alhora té els contenidors capçalera i cos: <head> ... </head> <body> ... </body>

En la capçalera hi va: la informació que serà útil al navegador i a motors de cerca, el títol del document i els estils CSS,

• metainformació. <meta charset="utf-8" />

• títol de la finestra, <title> Nom del Portal </title>

• estils, CCS <style type="text/css">

body,td,th { font-family: Tahoma, Geneva, sans-serif; } body { background-color: #CFF; }

</style>

El contingut de la marca <body> és tot allò que el navegador ha de representar a l’usuari quan la pàgina és carregada: text, imatges, vídeo i so. Si no especifiquem que el conjunt de caràcters és el charset="utf-8", caldria codificar totes les vocals accentuades i altres caràcters aliens al idioma anglès:

Caràcter Descripció Codi HTML À A amb accent À

à a amb accent à

é e amb accent tancat é

è e amb accent obert è

ñ ñ ñ

ü u amb dièresi ü

ç c trencada ç

€ euro €

Tanmateix, sempre caldrà codificar els caràcters propis del llenguatge HTML:

Caràcter Descripció Codi HTML > greather than >

< less than <

& ampersand &

“ quotation mark "

‘ apostrophe '

Podeu trobar una llista sencera dels codis HTML a http://dev.w3.org/html5/html-author/charref Observeu també com s'escriuen els valors del colors: "#CCFFFF" S'indica la quantitat de vermell (CC), verd (FF) i blau (FF) que té el color. Les quantitats van de 00..FF en hexadecimal, és a dir, de 0..255 en decimal.


2-10

2.3 Afegint text. Ara començarem a escriure text en el document que acabem de crear. Tingueu en compte que, en aquest moment, Dreamweaver es comporta igual que el Word, és a dir, és un editor de text. Per tant, es pot fer servir el tallar, copiar i enganxar des d'altres documents Word que ja es disposin. És una pràctica, però, gens recomanable atès que comporta la generació de codi HTML “brut”. Recordeu que HTML és un llenguatge de marques, pensat per presentar informació textual. És molt recomanable “marcar” el text pensant en el seu significat (semàntica): això és una capçalera, això és un apartat, això és un paràgraf, això és una enumeració de ítems (llista), etc. Aquesta estructura la reflectirem escrivint el text amb la marca html adequada: <h1>, <p>, <ol>, etc. Més tard ja pensarem com ho volem veure, és a dir, dissenyarem la presentació. De fet, aquesta presentació la definirem amb un segon llenguatge, el CSS, i intentarem separar al màxim, la informació (llenguatge HTML) del disseny (llenguatge CSS)

2.3.1 Propietats del text. El Dreamweaver disposa de la finestra Propiedades que ens permetrà donar valor a la selecció. Primer faríem el marcatge semàntic (respon a la pregunta què és aquest text?):

i després aplicaríem les propietats referents al disseny, és a dir, a la presentació (respon a la pregunta com vull presentar aquest text?):

estils

Mida de la lletra Color de la lletra

Alineació justificada

Alineació dreta

Alineació centrat

Alineació esquerra

Tipografia

sense format paràgraf, <p> capçalera gran (títol), <h1> (apartat), <h2> (subapartat), <h3> ... tal qual, <pre>

resaltat fort, <strong>

èmfasi, <em>

cita gran, < blockquote> llista no ordenades, <ul> llista ordenades, <ol>


2-11

Observeu aquest codi HTML i CSS i el resultat que s'obté: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Informació de la web personal </title> <style type="text/css">

body { background-color: #CCFFFF; } .titol { color: #FF0000; font-style: italic; }

</style> </head> <body> <h1>La meva <span class="titol">primera</span> pàgina.</h1> <hr /> <p>Això és un paràgraf. Observeu que no podem posar més d'un espai en blanc. Si volem posar espais en blanc consecutius cal posar el caràcter   com tot seguit mostrem: . També; heu d'observar que per saltar de línia sense posar una línia en blanc cal el tag <br /><br /> i així podem continuar en el mateix paràgraf però en una línia diferent.</p> <p>Això és un segon paràgraf. Observeu que sempre hi ha una línia en blanc entre paràgrafs.</p> </body> </html>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/text.html

Com podeu comprovar, si no especifiquem el contrari, el navegador sempre intenta aprofitar al màxim l’espai disponible de la seva finestra per presentar la informació a l’usuari, fent que el text es desplaci, si cal. Evidentment, aquest comportament va una mica en contra al disseny de la presentació que ha pensat el creador de la pàgina. Per assegurar una visualització tal com s’ha previst en el disseny, caldrà estudiar tècniques de maquetació de la pàgina (capítol 4 del curs).


2-12

2.3.2 Elements de bloc: capçaleres, paràgrafs i llistes. Tots els elements HTML d’àmbit de bloc agafen tota l’amplada disponible del seu contenidor (de moment serà la pròpia pàgina) per presentar la informació. Així, és impossible posar dos elements de bloc un al costat de l’altre sense utilitzar CSS. Algunes marques HTML en àmbit de bloc són: <p> ... </p>

Un document el podem dividir en diferents paràgrafs. Aquesta marca provoca que el visualitzador faci un salt de línia i, a més, afegeixi una línia en blanc al final del paràgraf. Aquesta marca s'usa molt més que la marca <br />.

<h1> ... </h1>

Aquesta marca s'usa per fer capçaleres de diferent importància o nivell de jerarquia diferenciats per la grandària de la lletra: títols, apartats, subapartats, etc. Podem usar des de la lletra més gran amb la marca <h1> ... </h1> fins a la més petita amb la marca <h6> ... </h6>. Exemple,

<pre>

Aquesta marca serveix per mantenir el preformat del text, tal i com s'ha escrit, respectant els caràcters blancs, els tabuladors i els salts de línia. És útil per mostrar textos (poemes) que l’autor escriu tenint en compte l’espaiat. Per defecte, el navegador utilitza una font de lletra monoespaiada per presentar el contingut d'aquesta marca.

Exemple,

<h1>Títol <h1></h1> <h2>Apartat <h2></h2> <h3>Subapartat <h3></h3> <h4>normal <h4></h4> <h5>lletra petita <h5></h5> <h6>lletra més petita <h6></h6>

<pre> Ara que estic al llit malalt, estic força content. -Demà m'aixecaré potser, i eus aquí el que m'espera: Unes places lluentes de claror, i unes tanques amb flors sota el sol, sota la lluna al vespre; i una noia que porta la llet que té un capet lleuger i duu un davantalet amb unes vores fetes de puntes de coixí, i una rialla fresca. </pre>


2-13

<ul>

La definició d’una llista no ordenada comença i acaba amb la marca <ul>...</ul>. Per indicar cada element de la llista s’usa la marca <li>...</li>. S’utilitza per presentar una seqüència d’elements en que l’ordre no és important: llista de la compra, ingredients d’una recepta de cuina, jugadors d’un equip de futbol, etc.

Exemple,

En aquest tipus de llistes, per defecte, cada element va precedit d'una marca que és diferent en cada nivell d’imbricació.

Aquestes marques visuals es poden canviar però cal fer-ho des del CSS a través de les propietat list-style-type atès que és un aspecte de disseny. Aquesta propietat pot prendre el valors:

disc pel cercle ple. És l’opció per defecte. circle pel cercle buit square pel quadrat ple.

Exemple,

<ol>

La definició d’una llista ordenada comença i acaba amb la marca <ol>...</ol>. En aquest tipus de llistes cada element va precedit d’un número i creix per a cada element del mateix nivell. L’ordre és important com per exemple: passos a seguir per cuinar una recepta, classificació d’una lliga de futbol, etc. Per indicar cada element de la llista s’usa la marca <li>...</li>, tal com hem vist amb les llistes no ordenades. En les llistes numerades es pot especificar el tipus de numeració a usar amb CSS a través de la propietat list-style-type. Aquesta propietat pot prendre els valors:

1, per numeració amb números aràbics. És l’opció per defecte. (1, 2, 3, ...) A, per numeració amb lletres majúscules (A, B, …) a, per numeració amb lletres minúscules (a,b, …) I, per numeració amb números romans amb majúscules (I, II, III; …) i, per numeració amb números romans amb minúscules (i, ii, iii, …)

Exemple,

<ul> <li>A</li> <li>B</li> <li>C <ul> <li>C1</li> <li>C2</li> </ul> </li> <li>D</li> </ul>

<ol> <li>primer</li> <li>segon <ol style="list-style-type:i"> <li>A</li> <li>B</li> </ol> </li> </ol>

<ul style="list-style-type:circle">

<li>A</li>

<li>B</li>

<li>C

<ul style="list-style-type:square">

<li>C1</li>

<li>C2</li>

</ul>

</li>

<li>D</li>

</ul>


2-14

També podem especificar per quin valor començarà la numeració de la llista. En la marca <ol> usarem l’atribut start amb un valor numèric que afectarà a tota la llista. En la marca <li> usarem l’atribut value amb un valor numèric. Aquest atribut només afecta l’element actual i als següents. Exemple,

<dl>

Són les llistes de definicions on cada element està compost pel nom de l’element (terme) que ocupa la primera línia, i per la definició de l’element que ocupa la resta de línies. Una llista de definicions comença i acaba amb les marques <dl>...</dl>, el títol per <dt>...</dt>, i la definició o contingut per <dd>...</dd>. S’utilitza per fer glossaris, diccionaris, etc.

Exemple,

<blockquote>

Aquesta marca serveix per cites literals grans. El navegador, per defecte, presenta el text imbricat, és a dir, crea un desplaçament, cap a la dreta, del bloc de text. En l’atribut cite s’indica la URL on s’ha trobat el text i l’atribut lang identifica en quin idioma s’ha escrit. Exemple,

<dl> <dt>xiuxiuejar</dt> <dd>Parlar en veu molt baixa, com quan hom parla a l'orella d'algú. </dd> <dt>atorgar</dt> <dd>Concedir (alguna cosa) a títol de favor, de gràcia.</dd> </dl>

<ol> <li>primer</li> <li>segon <ol style="list-style-type:i" start="3"> <li>A</li> <li>B</li> </ol> </li> <li value="4">quart</li> <li>cinquè</li> </ol>

<h2>Capítulo Primero</h2> <h3> Que trata de la condición y ejercicio del famoso hidalgo D. Quijote de la Mancha </h3> <blockquote cite="http://www.elmundo.es/quijote/capitulo.html?cual=1" lang="es"> "En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda." </blockquote>


2-15

<address>

Aquesta marca serveix per informar de l’autoria de la pàgina o article (pot incloure adreces de contacte). El navegador, per defecte, ho presenta en cursiva

Exemple,

<div>

Aquesta marca serveix per crear seccions genèriques de bloc. Són les que s’utilitzaven per fer la maquetació però, a partir del HTML5 es fa servir maquetació semàntica amb les 5 marques d’àmbit de bloc: <header>, <footer>, <section>, <article> i <aside>. Les veurem en el capítol 4 del curs. Per a més informació, consulteu http://www.w3.org/TR/html5/grouping-content.html#grouping-content

2.3.3 Elements de línia: em, strong, cite, code i abbr. Les marques de l'apartat anterior permetien tenir salts de línia en el contingut afectat per la marca. Ara, els elements de línia això no podrà ser, no pot haver salts de línia, perquè seran ignorats pel navegador. El contingut dels elements de línia s’incorpora en la mateixa línia mentre hi ha espai disponible. Quan s’esgota l’espai de la línia actual, automàticament, el contingut passa a la línia següent. <em>

Aquesta marca serveix per emfatitzar unes paraules. El navegador normalment ho presenta amb cursiva.

<strong>

Aquesta marca serveix per emfatitzar fortament unes paraules. El navegador normalment ho presenta amb negreta.

Exemple,

<code>

Aquesta marca serveix per marcar text que en realitat és codi font d’un llenguatge informàtic: HTML, CSS o javascript, per exemple. Normalment, el navegador utilitzarà una font de lletra monoespaïda. Exemple,

<p>Aquest paràgraf té una paraula <em>emfatitzada</em> i unes altres

<strong>fortament emfatitzades</strong>.</p>

<p>La marca <code><img></code> serveix per col.locar imatges a

la pàgina web.</p>

<address> <p> <strong>Joan Jou Majó</strong><br /> Professor de mitjans audiovisuals </p> <p> Avinguda Ernest Lluch, 32<br /> 08302 Mataró (Barcelona) </p> </address>


2-16

<abbr> <dfn>

També identificarem les abreviacions, els acrònims (abreviació pronunciable com a paraula) i les definicions de diccionari, respectivament. En l'atribut title hi posarem el significat. El navegador, normalment no dóna estil a aquesta marca. En el navegador es mostra el contingut del títol com un "tooltip". Els acrònims, en HTML5, quedant absorbits per les abreviacions abbr Exemple,

<cite>

Aquesta marca ha canviat de significat: en HTML 4 era una citació a una referència d’una obra i ara en HTML 5 serà només el títol d’una obra.

Exemple,

<q>

Aquesta marca serveix per a les cites literals curtes.

Exemple,

<ins>, <del>

Aquesta marca serveix per indicar insercions i esborraments en el text. Amb els atributs cite i datatime indiquem on trobar més informació del motiu del canvi i la data en que s’ha efectuat. Serveix per corregir textos en àmbits col· laboratius tipus wiki.

<span>

Aquesta marca serveix per delimitar continguts en línia de forma genèrica, quan cap de les marques en línia que disposa el HTML s’ajusta al significat del contingut senyalat. Els estils CSS diran de quina manera s’ha de presentar el contingut afectat a través de l’atribut style o class. Per a més informació, consulteu http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics on trobareu totes les marques que fan referència al text. Consulteu especialment: <small>, <marked>, <sub> i <sup>. Observeu els estils Bootstrap (l'estudiarem en el capítol 4) per aquestes marques,

http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/textBootstrap.html

<p>Exemples d'abreviacions; <abbr title="etcétera">etc.</abbr>,

<abbr title="Mister">Mr.</abbr>, <abbr title="i altres">et al.</abbr>,

<abbr title="HyperText Transfer Protocol">HTTP</abbr> </p>

<p>Exemples d'acrònims:

<abbr title="Light Amplification by Stimulated Emission of Radiation"> làser</abbr>,

<abbr title="North Atlantic Treaty Organization">NATO</abbr></p>

<p>En Manel va <dfn title="Parlar en veu molt baixa, com quan hom parla a l'orella

d'algú">xiuxiuejar</dfn> a la Maria: t'estimo. </p>

<p>Com va dir Confucio <q cite="https://es.wikiquote.org/wiki/Confucio" lang="es">

Aprender sin pensar es inútil, pensar sin aprender peligroso</q>.</p>

<p><cite>Don Quijote de la Mancha</cite> es una novel·la de

l’escriptor espanyol Miguel de Cervantes, publicada en dos parts

(1605 y 1615).</p>


2-17

2.4 Afegint imatges. En els seus orígens, els documents de les Web eren, fonamentalment, textuals. Però, ara és, pràcticament, impossible trobar una Web sense imatges. Cal tenir en compte que les imatges que inclourem han d'estar comprimides (format .gif , .jpg o .png) per no fer baixar la velocitat de descàrrega de la pàgina en el navegador. Queda totalment prohibit col· locar imatges en format .bmp. Les imatges estaran guardades en la carpeta "imatges" que hem creat dins el nostre lloc local. El format GIF s'usa per a imatges que usen pocs colors, fins a 256, i que volem que ocupin poc. Solen ser imatges petites (icones). També permet crear una seqüència d'imatges per obtenir una animació. L'algorisme de compressió és molt senzill i, per tant, molt ràpid. Per contra, el format JPEG permetrà treballar amb color vertader però l'algorisme de compressió és més lent. Se solen utilitzar per a imatges grans amb molta cromàtica, com per exemple, els paisatges. Per inserir una imatge en el document podem usar el menú Insertar > Imagen ... o bé fer clic a la icona

d'inserir imatge de la finestra Comú, Us apareix la següent finestra, on seleccionem la carpeta imatges del lloc local i seleccionem l'arxiu que conté la imatge que volem. Si teniu activat la "vista prèvia" de la imatge podreu veure l'amplada i alçada en pixels (300 x 296), el format (.jpeg), grandària (29K) i el temps de descàrrega (5 sec). És molt important tenir seleccionat que la URL de la imatge (imatges/tintin.jpg) és relatiu al "Document" index.html, que és el document que conté la imatge. Observeu com la imatge s'insereix en el document de forma que el text nou s'afegeix en la part inferior de la imatge, en la mateixa línia. Això és perquè la marca <img> és un element en línia.


2-18

http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/imatges.html

EL codi HTML seria: <p>

<img src="imatges/tintin.jpg" alt="L'afer tornasol" width="300" height="296" />

Els còmics de Tintín han estat traduïts a més de 60 idiomes i dialectes i s'han venut a

més de 200 milions d'exemplars a tot el món. La simplicitat dels seus dibuixos, els

divertits diàlegs i els arguments fan que gent de totes les edats s'interessi per les

seves aventures.<br />

A més, el seu creador, Hergé, va tractar en les seves històries els successos

internacionals de la seva època, on el comportament del jove reporter representa un

model a seguir per a la joventut. Per tot això, us convidem a fer una ullada a aquesta

web per a conèixer més a fons aquest singular personatge i al món que l'envolta.

</p>

2.4.1 La marca <img> Aquesta marca usa, bàsicament, l'atribut src que indica el nom de l’arxiu de la imatge i la carpeta on està emmagatzemada:

<img src="imatges/tintin.jpg" alt="L'afer tornasol" width="300" height="296" />

Aquesta directiva no necessita tancament i es pot situar en qualsevol lloc del document com un “element en línia” més de la pàgina. Els atributs de la marca img són:

src nom del fitxer que conté la imatge. alt Els fitxer d'imatges solen ser molt grans, per això els visualitzadors tenen l'opció de

no carregar les imatges si no se’ls indica expressament, evitant sobrecarregar la xarxa innecessàriament. Si fem ús d'aquesta opció en comptes de la imatge veurem una marca indicant la presència de la imatge i si realment la volem visualitzar fem un "clic" sobre la marca. A més de la marca podem posar-hi un text associat que aprofitarem per explicar el contingut de la imatge. En HTML5 és necessari per validar la pàgina.

width height

Podem indicar la mida de la imatge. Si la mida que posem és més petita que la mida real, el visualitzador s'encarregarà d'escalar la imatge.


2-19

Clicant la imatge que heu inserit anteriorment, podreu veure les propietats en el pannell corresponent, Les opcions Ancho i Alto permeten especificar l'alçada i amplada de la imatge, en píxels. Aquestes mides són a nivell de visualització: la imatge no canvia de mida. Per canviar realment les dimensions d'una imatge cal modificar-la amb un editor gràfic com el Fireworks, fent clic en el botó Edición. Podem alinear la imatge a l'esquerra amb el text embolcallant-la per la seva dreta utilitzant el CSS següent: img.left{ border: 0px; margin: 0 5px 5px 0; float: left; }

i ara, l’HTML queda de la següent manera, <img class="left" src="imatges/tintin.jpg" alt="L'afer tornasol" width="300" height="296"/>

El resultat és,

hem seleccionat la imatge

amplada i alçada

nom de l'arxiu text alternatiu, text de l'etiqueta groga que apareix quan el ratolí és sobre la imatge

editar amb el Fireworks

optimitzar amb el Fireworks

dimensionar mostrejar lluminositat i

contrast

perfilar

actualitzar des d'original


2-20

Amb HTML5, existeixen les marques <figure> i <figcaption> per presentar les imatges amb un títol al peu de la imatge: <p>Pulpit Rock és un enorme penya-segat de 604 metres sobre el Lysefjorden, davant de l'altiplà de Kjerag, a Forsand, Ryfylke, Noruega. La part superior del penya-segat és gairebé pla (25 metres quadrats), i és una famosa atracció turística a Noruega. </p> <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption> </figure>


2-21

2.5 Vincles (Hipermèdia). Fins ara hem vist com inserir i col· locar text i imatges en les nostres pàgines del lloc web. Una característica que cal no oblidar mai és la capacitat de hiperenllaç d'aquest nou mitjà de comunicació. En l'argot d'Internet, s'anomena "navegar". Actualment, l'enllaç és possible fent clic a un text (generalment subratllat i de color blau) o a una imatge.

2.5.1 Text i imatges amb vincles. Per obtenir un hiperenllaç amb el text (hipertext) cal seleccionar el text i, en el panell de propietats, seleccionar el document que es vol enllaçar i a on es vol anar:

´ En el cas de seleccionar com a Destino l'opció _blank, el document enllaçat s'obrirà en una nova finestra o pestanya del navegador. Aquesta opció és útil quan volem visitar altres webs, fora de la nostra, a través de vincles externs, com veurem més endavant. Per defecte, el destí és _self que vol dir, substituint el document actual. Per seleccionar el vincle (el document html nou que volem visitar) ho podem fer de tres formes diferents:

El codi HTML del link és:

<a href="carpeta1/carpetaA/doc1A.html" target="_blank">doc1A.html</a>

escrivint, directament, el nom del document

seleccionant-lo si abans ja s'ha fet

servir

fent "punteria" al document en el

panell "Archivos locals"

seleccionant-lo a través de l'estructura de carpetes


2-22

En el cas dels vincles a través d'imatges és molt similar.

Ara, el doc1A.html conté una imatge vinculada per tornar a index.html. Observeu com s’ha escrit el valor de href de la marca <a> i el valor del src de la marca <img>. S’ha fet relatiu al lloc on es troba el document doc1A.html on veiem que, per pujar un nivell de carpetes, cal fer ../ El codi HTML del vincle serà: <a href="../../index.html"> <img src="../../imatges/tintin.jpg" alt="Tintin" width="127" height="145" border="0" /> </a>

2.5.2 Tipus de vincles. En aquesta secció veurem els tipus de vincles més importants que podem trobar en una web. Alguns ja els hem usat en les seccions anteriors.

2.5.2.1 Enllaç a un altre document de la nostra web

En aquest cas, normalment usarem el disparador, , per activar el vincle com ja s'ha explicat anteriorment. En el cas d'usar l'estructura de carpetes per trobar el document a enllaçar, fent clic al botó

, apareix la següent finestra:

les URL poden ser relativa al Document

o a l’arrel del lloc web

Necessari per no veure la vora de color blau al voltant de la imatge


2-23

Si escrivim la url del vincle “Relativa a: Documento”, hem de construir la ruta des de la carpeta que conté el document fins arribar al document vinculat. Per pujar un nivell de carpeta cal fer ../ Exemple: Indicarem com escriure el valor dels atributs src i href si el document origen té la imatge tintin.jpg vinculada amb el document destí Recordeu: els noms de carpetes i fitxers no poden contenir vocals accentuades, caràcters en blanc, ñ, ç, l· l, etc.

document origen src document destí href

index.html imatges/tintin.jpg doc2a.html carpeta2/doc2a.html

doc2a.html ../imatges/tintin.jpg index.html ../

doc2a.html ../imatges/tintin.jpg doc2b.html doc2b.html

doc1A.html ../../imatges/tintin.jpg doc2a.html ../../carpeta2/doc2a.html

doc2b.html ../imatges/tintin.jpg doc1A.html ../carpeta1/carpetaA/doc1A.html

Sempre que hi ha un desplaçament de carpetes implica un canvi en les url. Si ho fem des del Dreamweaver amb el lloc administrat, el mateix Dreamweaver fa les actualitzacions de url’s.

2.5.2.2 Enllaç a un document d'una altra web

Per enllaçar amb una web externa caldrà escriure la URL manualment en el camp corresponent,

En aquest tipus d'enllaç, normalment es visualitza el vincle en una nova finestra o panell del navegador, target="_blank". Observeu que cal posar http:// al principi de la URL. No interessa ser molt explícit a l'hora de crear un vincle extern. Si intentem anar a una secció molt particular de la web visitada, podria ser que en un futur no massa llunyà ja no existís. És millor indicar només el portal, i en tot cas, com arribar a la secció o document particular. Per exemple, per accedir al llistat de les notes de tall del darrer curs, podem posar directament el vincle, http://www.gencat.cat/economia/ur/ambits/universitats/acces/prein/info/listat/index.html o posar nomes http://www.gencat.cat/ i indicar que: cal anar a la secció “Universitats”, després a “accés a la universitat”, “preinscripció universitària” i, finalment, “llistat de notes de tall i de places universitàries”.


2-24

2.5.2.3 Enllaç a una adreça de correu electrònic

En la web, sempre hi ha d'haver la possibilitat de posar-se en contacte, via correu electrònic, amb l’autor dels continguts del web. Recorda que hauria d’estar marcat amb address. Podem facilitar aquest procés creant un vincle de correu electrònic on ja estarà escrit l'adreça e-mail del destinatari. Pot ser a través d'una imatge i/o a través de text. Per exemple, <a href="mailto:[email protected]?Subject=suggeriments">envia'ns suggeriments</a>

Compte amb aquests links!. Són els que més tard generaran "spamm" al teu e-mail!!. Hi ha agents (programes) que rastregen la web a la cerca de documents html que continguin la cadena mailto:. D'aquesta manera poden aconseguir adreces de e-mails i posteriorment enviar-los informació. És millor indicar les adreces de e-mail de forma gràfica, estampant el text en una imatge. D'aquesta manera assegurem que només una persona i no un programa podrà llegir la nostra adreça.

2.5.2.4 Enllaç a una altra secció del propi document.

Quan el document html que estem visualitzant és molt llarg, normalment perquè hi ha molt de text (moltes seccions), podem facilitar la lectura usant un índex del document i navegar usant vincles interns al propi document. Primer construïm l’índex com una llista no ordenada, per exemple, i escrivim les seccions que hem marcat amb <h2>, per exemple. Després “identifiquem” totes les seccions, és a dir, donem un valor a l’atribut id de les marques <h2>.


2-25

Un cop identificades les seccions ja podem crear vincles a les seccions corresponents. Podeu utilitzar el disparador. Observeu que la identificació del vincle va precedida del caràcter #, <h3 id="index">Índex</h3> <ul> <li><a href="#sA">secció A</a></li> <li><a href="#sB">secció B</a></li> <li><a href="#sC">secció C</a></li> </ul> <h2 id="sA">Secció A</h2> <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl abla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> <p><a href="#index">tornar a índex</a></p> <h2 id="sB">Secció B</h2> <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl abla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> <p><a href="#index">tornar a índex</a></p> <h2 id="sC">Secció C</h2> <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl abla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> <p><a href="#index">tornar a índex</a></p>

Proveu-ho a http://ssh.eupmt.tecnocampus.cat/~jou/SM/exemplesCap2/


2-26

2.6 Taules. Les taules són un conjunt de files i columnes que donen com a resultat una graella de caselles on hi pot haver dades: text, imatges, etc. Ens permet la distribució en el pla de la pàgina, sense superposició dels elements, creant un mosaic de cel· les. Tot i que en un passat s’usaven per maquetar la pàgina, avui en dia es considera una mala praxi. La maquetació no la farem amb taules sinó amb <div> i CSS. De tota manera, quan vulguem presentar informació en una retícula, les podrem fer servir.

2.6.1 Creació d'una taula. Per inserir una taula en el document podem usar el menú Insertar > Tabla ... o bé fer clic a la icona

d'inserir taula de la finestra Comú, Us apareix la següent finestra, Els atributs amplada, gruix, farciment cel· la i espaiat entre cel· les és millor fer-ho amb CSS. Si acceptem obtenim el següent:

Nota: aquesta taula en realitat no es veurà (no hi ha l’atribut border) però, en el Dreamweaver, es veu amb una línia a traços per poder saber on són les cel· les. El codi HTML corresponent és: <table width="100%" summary="Explicació del contingut de la taula"> <caption> Títol o capçalera de la taula </caption> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </table>

nombre de files i columnes

amplada de la taula: percent, % respecta l’element contenidor pixels, nombre de pixels exacte

gruix del contorn de les cel· les. Si és 0

(per defecte), no es veu la taula

nombre de píxels entre el contingut de la cel· la i el

contorn de la cel· la

nombre de pixels entre les cel.les


2-27

2.6.2 Modificar l'aspecte d'una taula. Un cop creada, la podeu modificar, seleccionant-la, a través del panell Propiedades. Si tenim la taula sencera seleccionada veurem les següents propietats:

Quan les mides són en píxels, aquesta mida es manté inalterable quan redimensionem la finestra del navegador. Per contra, si donem les mides relatives a un tant per cent, aquestes mides s'adapten quan canviem les mides del navegador produint un desplaçament de la informació que conté la taula. Una vegada hem configurat les propietats de la taula podem modificar l'aparença de les files, les columnes i les cel· les. Per seleccionar una cel· la o conjunt de cel· les només cal fer clic dins la cel· la i desplaçar el ratolí mantenint-lo premut fins que es ressalta les cel· les seleccionades. Per seleccionar la fila sencera o la columna sencera cal col· locar el ratolí just en el contorn de la taula i apareix un cursor diferent, en forma de fletxa que indicarà la selecció corresponent. Per exemple, seleccionem dues cel· les d'aquesta taula,

i observem el panell Propiedades,

alineació de la taula respecte la pàgina

esborrar amplades de columna o alçades de

files (mínim)

convertir les mides de píxels a % o viceversa

Propietats del contingut seleccionat de les cel· les seleccionades

fusionar cel· les rowspan colspan

subdividir cel· la

alineació horitzontal i vertical del

contingut de la cel· la

amplada i alçada de les cel· les

<th> el text de les cel· les serà en negreta i centrat

color del fons de les cel· les


2-28

Observem com actua l’agrupació de cel· les amb els atributs colspan i rowspan:

<table border="1"> <caption> Exemple1 </caption> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td colspan="2">2</td> </tr> <tr> <td colspan="2">3</td> <td>4</td> </tr> </table>

<table border="1"> <caption> Exemple2 </caption> <tr> <td>A</td> <td>B</td> <td rowspan="2">C</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

<table border="1"> <caption> Exemple3 </caption> <tr> <td>A</td> <td colspan="2" rowspan="2">B</td> </tr> <tr> <td>1</td> </tr> <tr> <td colspan="2">2</td> <td>3</td> </tr> </table>

<table border="1"> <caption> Exemple4 </caption> <tr> <td rowspan="2">A</td> <td>B</td> <td colspan="3">C</td> </tr> <tr> <td colspan="2" rowspan="2">2</td> <td>3</td><td>4</td> </tr> <tr> <td>1</td><td>5</td> <td rowspan="2">d</td> </tr> <tr> <td colspan="2">a</td> <td>b</td><td>c</td> </tr> </table>


2-29

Exemple, una taula amb els prefixes del S.I.

Les marques <thead> i <tfoot> són necessàries quan el llistat de la taula és molt gran i cal imprimir-lo. En aquest cas, el navegador presentarà la capçalera i el peu de la taula en cadascuna de les pàgines que ocupi la impressió de la taula. Vegeu l’exemple http://ssh.eupmt.tecnocampus.cat/~jou/SM/apunts/colors_CSS.html

<table border="2" > <caption><strong>prefixes SI</strong></caption> <thead> <tr style="background-color:#00FFFF"> <th>10<sup>n</sup></th><th>Prefix</th><th>Símbol</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr><td>10<sup>15</sup></td><td>peta</td><td>P</td></tr> <tr><td>10<sup>12</sup></td><td>tera</td><td>T</td></tr> <tr><td>10<sup>9</sup></td><td>giga</td><td>G</td></tr> <tr><td>10<sup>6</sup></td><td>mega</td><td>M</td></tr> <tr><td>10<sup>3</sup></td><td>kilo</td><td>k</td></tr> <tr><td>10<sup>2</sup></td><td>hecto</td><td>h</td></tr> <tr><td>10<sup>1</sup></td><td>deca</td><td>da</td></tr> <tr><td>10<sup>−1</sup></td><td>deci</td><td>d</td></tr> <tr><td>10<sup>−2</sup></td><td>centi</td><td>c</td></tr> <tr><td>10<sup>−3</sup></td><td>mili</td><td>m</td></tr> <tr><td>10<sup>−6</sup></td><td>micro</td><td>µ</td></tr> <tr><td>10<sup>−9</sup></td><td>nano</td><td>n</td></tr> <tr><td>10<sup>−12</sup></td><td>pico</td><td>p</td></tr> <tr><td>10<sup>−15</sup></td><td>femto</td><td>f</td></tr> </tbody> </table>

2-30

2.7 El llenguatge CSS per al disseny (presentació). Des del seu inici, el llenguatge HTML ha intentat separar la semàntica del text de la manera com es presenta el text a l'usuari. Per això ha definit estils lògics (marques <em> i <strong>, per exemple) que informen de quina manera es creu que seria millor representar aquella informació, però que, al final, és el navegador qui decideix com representar-ho. Per facilitar i potenciar aquesta separació el W3C (World Wide Web Consortium) ha recomanat la utilització de "Cascading Style Sheets" (CSS) o Fulls d'Estil en Cascada. Podeu veure una demostració de com els estils poden canviar l'aspecte d'un document HTML a l'adreça http://www.w3schools.com/css/demo_default.htm Vegeu aquest exemple. Aquests dos documents html mostren la mateixa informació amb el mateix format:

document HTML sense usar CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sense CSS</title> </head> <body bgcolor="#00FFFF"> <p>hola <font face="Geneva, Arial, Helvetica, sans-serif" size="4" color="#0000FF" > <b><i>que</i></b> </font> tal. </p> <p align="right"> <font face="Times New Roman, Times, serif" size="5"> <b>com estem.</b> </font> </p> </body> </html>

document HTML5 usant CSS

<!DOCTYPE html>  <html> <head> <meta charset="utf-8" /> <title>Document amb CSS</title> <style type="text/css"> .estil1{ font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; font-size: 18px; color: #0000FF;} .estil2{ font-family: "Times New Roman", Times, serif; font-size: 24px; font-weight: bold; text-align: right;} body {background-color: #00ffff;}

</style> </head> <body> <p>hola <span class="estil1">que</span> tal.</p> <p class="estil2">com estem. </p> </body> </html>

Molt més clar. No barregem tant l'HTML amb el CSS => més fàcil de mantenir


2-31

La sintaxi bàsica del CSS és:

selector {

propietat: valor; }

on a la parella propietat: valor; se l’anomena declaració i al conjunt de declaracions emmarcades amb { } s’anomena bloc de definició. El selector indicarà a quins elements HTML afectarà el bloc de definició corresponent, és a dir, amb quines propietats i amb quins valors s’afecta als elements seleccionats. Sovint és convenient documentar el codi CSS amb comentaris del dissenyador per fer més llegible i mantenible el codi CSS. Aquests s’escriuen emmarcats per /* comentari */ L’estudi del llenguatge CSS passarà per saber com seleccionar els elements HTML i després quines propietats i amb quins valors podem modificar-los.

2.7.1 Selectors.

2.7.1.1 Marques HTML.

El selector, normalment, és un nom de marca HTML. Per exemple, si volem que tots els paràgrafs de la pàgina HTML utilitzin com a tipografia una sans serif i que el color de la lletra sigui un gris claret, faríem el següent:

p { color:#bbb; font-family: "sans serif"; }

on el selector és p, els noms de les propietats són color i font-family i els valors #bbb i ‘‘sans serif’’, respectivament. Atès que sans serif són dues paraules separades per un espai en blanc, cal emmarcar-les amb cometes dobles o simples. Si vàries marques (selectors) tenen el mateix estil, és poden agrupar separant-les per comes:

p,td,th { font-family: "sans serif";

}

A una marca no sempre li ha de correspondre el mateix estil. Podem donar estils a un element HTML depenent on es trobi col· locat en la pàgina. Per exemple, si volem que les marques <em> posin el text en vermell si està dins d'un paràgraf o en blau si està dins una llista podrem fer el següent: p em {color:red} ul em{color:blue}

2.7.1.2 Les classes

Podem definir nous estils, o millor dit, classes d'estils, i després els podem aplicar a qualsevol marca a través de l’atribut HTML class="nomClasse" present en tots els elements. Per definir una classe que identifica un estil s'usa la següent sintaxi:

.nomClasse { nomPropietat:valor; ... }

<p>Exemple en funció del context:</p> <p><em>paràgraf</em></p> <ul> <li><em>llista</em></li> </ul>

bloc de definició

declaració


2-32

i després l'aplicarem a la marca, <nomMarcaHTML class="nomClasse">...</nomMarcaHTML>

Es pot aplicar més d’una classe a la mateixa marca, cal escriure els seus noms, separats per un espai en blanc:

<nomMarcaHTML class="nomClasse1 nomClasse2">...</nomMarcaHTML>

Un cop definit una classe d'estil es podrà aplicar a qualsevol marca. Si volem que només es pugui aplicar a una marca, posem el nom de la marca davant el punt,

nomMarcaHTML.nomClasse { nomPropietat:valor; ... }

i després només la podem aplicar a la marca concreta, <nomMarcaHTML class="nomClasse">...</nomMarcaHTML>

2.7.1.3 Els id.

Els id funcionen de forma similar a les classes. La principal diferència és que "identifica" un únic element i, per tant, definirà l'estil concret d'aquest element. S'usen per donar estil a les capes, prèviament identificades. Per definir un id que identifica un estil s'usa la següent sintaxi:

#nomID { nomPropietat:valor; ... }

i després l'aplicarem a la capa, <div id="nomID">...</div>

Aquesta possibilitat la farem servir en el capítol de maquetació.

2.7.1.4 Les pseudoclasses: estils segons l’acció de l’usuari:

En alguns casos el HTML proporciona a certes marques un estil diferenciat segons la interacció de l’usuari amb la marca. Per exemple, els vincles que es presenten en color blau i subratllats quan encara no han estat visitats però, que canvien a color lila quan ja han estat visitats. A aquests elements se'ls anomena pseudoclasses. La sintaxi de la definició d'una pseudoclasse és, nomMarca:nomPseudoclasse { nomPropietat=valor; ... }

En l'especificació CSS2 tenim pseudoclasses pels vincles, marca <a>. Són les següents:

a:link ens indica l'estil del vincle abans de ser visitat a:visited vincle ja visitat (el navegador sap que ja ha estat visitat) a:active vincle que s'està activant (s'ha premut el ratolí però encara no s'ha deixat anar ) a:focus vincle que té el focus (és el que s’utilitzaria en fer Return) a:hover ens indica l'estil quan el ratolí és damunt el vincle

En realitat, les pseudoclasses :active i :hover es poden aplicar a qualsevol element HTML. :focus es pot aplicar a qualsevol element que presenti interacció amb l'usuari: a, input, etc... Les pseudoclasses es poden combinar amb les classes. És a dir, es pot aplicar les pseudoclasses només a una classe determinada:

a.nomClasse:nomPseudoclasse {nomPropietat=valor;...}


2-33

2.7.2 On es col·loquen els CSS?.

2.7.2.1 CSS definits en la pròpia etiqueta HTML.

Si volem que l'estil afecti només a una etiqueta concreta d'un document HTML, definirem aquest estil dins la pròpia etiqueta amb la següent sintaxi:

<nomMarcaHTML style="nomPropietat:valor;...">...</nomMarca>

Per exemple, podem definir el següent estil pel paràgraf: <p style="font-size:15pt;margin-left:20pt;background-color=#FF0000">Hola</p>

Normalment no voldrem col·locar l'estil en la pròpia etiqueta atès que seria massa similar al que podríem haver fet amb els atributs propis del HTML. De tota manera, observeu que els CSS amplien les possibilitats que tenia el HTML per definir format.

2.7.2.2 CSS incrustats en la capçalera del document HTML.

Si volem que els estils afectin a tot el contingut d'un document determinat podem incrustar la col· lecció d'estils en la capçalera del document HTML. La sintaxi és la següent:

<head> <style>

nomMarcaHTML { nomPropietat: valor; /* altres declaracions */ } /* altres estils */

</style> </head>

Per exemple: <style>

p{ font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; letter-spacing: 2em; } h3{ font-size: 18px; font-weight: bold; color: #0033FF; background-color: #FF0000; }

</style> </head> <body> <h3>títol</h3> <p>hola</p> </body> </html>

2.7.2.3 CSS vinculats des d'un fitxer extern.

És la manera més fàcil de fer una actualització de la web. En aquest cas separarem els estils en un fitxer independent, d'extensió .css, que vincularem amb els fitxers HTML que vulguem (tots, uns quants, etc.). D'aquesta manera, si volem canviar l'aspecte de la nostra web, només cal tornar a definir els fitxers .css que té la web vinculats. La sintaxi que utilitzarem és, en la capçalera del document HTML,

<link href="estils.css" rel="stylesheet">

i el fitxer estils.css té la declaració dels estils:

nomMarcaHTML { nomPropietat: valor; ... } ...

Vegeu l’exemple www.csszengarden.com


2-34

2.7.3 Com es propaguen els estils?

2.7.3.1 Herència d'estils.

La majoria dels elements HTML poden contenir altres elements HTML, de manera que uns engloben els altres. Per exemple, <body> <p>Hola</p> Hola <blockquote> <p>Exemple de <em>niuament</em></p> </blockquote> </body>

Això defineix una relació jeràrquica pare-fills de manera que els estils definits per a les marques pare seran heretats per les marques fills. El mecanisme d'herència sempre funciona a menys que la marca fill tingui definit el seu propi estil. Aquest darrer es superposa a l’heretat i, en alguns casos, es complementa. Cal tenir en compte que no totes les propietats s'hereten. Per exemple: body { font-family: "Times New Roman", Times, serif; font-size: 12px; background-color: #00FFFF; } blockquote { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } p { font-size: 16px; color: #0000FF; font-family: "Courier New", Courier, mono; } em { font-variant: small-caps; color: #FF0000; }

2.7.3.2 Concepte de "Cascada".

Com hem vist, els estils es poden definir en diferents llocs. El concepte de "cascada" fa referència a les regles que aplica per combinar i substituir estils depenent del lloc on han estat definits. La regla és:

1. primer s'agafa els estils per defecte del navegador 2. s'afegeix o canvia els estils definits en un fitxer extern .css que el document vincula amb la

marca <link>. 3. s'afegeix o canvia els estils definits en la capçalera amb la marca <style>, si aquesta s’ha escrit

després de la marca <link>. 4. s'afegeix o canvia els estils definits directament en la marca.

Així, podem especificar els estils que han de donar uniformitat a tota la web en fitxers i vincular-los en els diferents documents html del web, canviar els estils en un document html concret i, finalment, canviar una marca concreta d’un document html concret.

font-family: "Courier New", Courier, mono;

font-size: 16px;

background-color: #00FFFF;

color: #0000FF;

font-family: "Times New Roman", Times, serif;

font-size: 12px;



font-size: 16px;


color: #0000FF;


font-size: 16px;


color: #FF0000;

font-variant: small-caps;

DOM : Hola : Hola

: Exemple de

: niuament


2-35

2.7.4 Propietats.

2.7.4.1 Propietats de les fonts. Per crear i classificar els diferents tipus de lletres cal definir les parts d'una lletra. Les més importants són les següents: Totes les lletres de l'alfabet descansen sobre la línia base (baseline). Les Majúscules van des de la línia base fins a la línia de les majúscules (cap line). La distància entre aquestes dues línies és l'alçada de les majúscules (cap height). El cos principal de les lletres minúscules s'escriuen entre la línia base i la línia promig (mean line). La distància entre aquestes dues línies s'anomena alçada de la x (x-height). Algunes lletres: b, d, f, h, k, l, t sobrepassen la línia principal arribant fins a la línia d'ascendents (ascender line). L'ascendent és la part que va des de la línia principal fins a aquesta línia d'ascendents. De la mateixa manera, les lletres minúscules: g, j, p, q, y tenen un part per sota de la línia base arribant fins a la línia dels descendents (descender line). La distància que hi ha des de la línia base fins a la línia dels descendents s'anomena descendent (descender). Finalment, la mida del tipus (point size) és la distància entre les línies ascendent i descendent. La mida de les lletres es mesuren en punts essent, 1 punt = 1/72" (inch) = 0,352mm atès que 1" = 2.54cm Per altra banda, es defineix la pica com una dotzena de punts 12 punts = 1pica i per tant, 1" = 6 piques Cal observar que a igualtat de mida en punts, les fonts de major altura-x semblen més grans i, per tant, són més llegibles: En un lugar de la Mancha, de cuyo nombre no quiero acordarme, New Courier 9

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, Arial 9

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, Tahoma 9

:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, Garamound 9

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, Monotype Cursiva 9

Una classificació bàsica de les tipografies és: serif i sans serif (amb o sense allargaments al començament i final dels diferents trams de les lletres que reprodueixen el que passava quan s'escrivia text en la pedra)

Arial, Century Gothic, Impact, MS

Sans Serif, Tahoma, Verdana Book Antiqua, Bookman Old Style,

Courier new, Garamond, Times New Roman, Palatino, Georgia, Century

Inclou totes les Pal sec. Apropiades per a la lectura a la pantalla (baixa resolució) i ròtuls publicitaris.

Inclou totes les Romanes. Apropiades per a la lectura ràpida de textos llargs impressos.

Sans Serif Serif


2-36

Hi ha fonts pensades per ésser ben llegides a la pantalla a baixa resolució i mides petites, per exemple les sans serif Verdana i Tahoma o la serif Georgia. Vegeu com es llegeix un mateix text utilitzant dues fonts diferents:

• Times New Roman 9 En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

• Verdana 9 En un lugar de la Mancha, de cuyo nombre no quiero acordarme,

no ha mucho que vivía un hidalgo de los de lanza en astillero,

adarga antigua, rocín flaco y galgo corredor. El disseny d'aquestes fonts evita, en lo possible, les corbes, tendint a les línies verticals i horitzontals. Així, no li afecte tant l'efecte escala (jagging) de la pixelació. La visualització de la pixelació es pot disminuir amb la tècnica del "aliasing", que consisteix en usar colors intermitjos en els pixels veïns a l'efecte escala. Hi ha un subconjunt de fonts equivalents o compatibles en els dos sistemes però amb noms diferents. Per això es recomanable, al definir la font en CSS, donar una llista de noms, el primer per a la font en el sistema Windows i després la compatible en el sistema Mac. Finalment, se sol donar una tercera font que fa referència a la macrofamília Serif o Sans Serif. Per exemple,

body { font-family: Arial, Helvetica, sans-serif; }

A mesura que es van instal· lant noves aplicacions d'edició d'imatges i processadors de text, es van instal· lant noves font a la màquina. Però, cal anar en compte en usar aquestes noves fonts. Podria passar que l'ordinador client que ens visiti, no les tingui instal· lades i, per tant, el navegador utilitzarà unes equivalents que s'aproximin però, no seran iguals. Les fonts "rares" només s'haurien de fer servir per editar imatges que contenen text. El HTML 5 permet “incrustar” les fonts i, per tant, ens assegurem que estaran disponibles en el navegador.


2-37

Una altra família són les tipografies proporcionals o monoespaiades (fixed-pitch). La majoria de les fonts són proporcionals perquè faciliten la lectura. Però, en les fonts monoespaiades (Courier, per exemple), tots els caràcters tenen la mateixa amplada, la de la m. Imiten les màquines d'escriure o els primers ordinadors (consola o pantalla textual). També s'usen per tabular (codi de programa, per exemple).

<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>

<TR>

<TD vAlign=top width=700 height=20>

</TR>

</TABLE>

Degut a la baixa resolució de la pantalla (96 dpi) en front de la impressora (600 dpi) es recomana no fer servir fonts serif per a la pantalla però si per a la impressora. Cal tenir doncs, un disseny CSS per a la pantalla i un altre per a impressora:

<style media="screen"> body{font-size:12px;font-family:Verdana,Helvetica,sans-serif;} </style> <style media="print"> body{font-size:10px;font-family:Times New Roman,Times,serif;} </style>

La següent taula resumeix les propietats CSS que fan referència a la tipografia:

propietat descripció valors

font-family llista de noms de fonts ("verdana", "arial", "Times New Roman",...) o família de fonts ("sans-serif",...). L'ús de les cometes dobles és obligatori si el nom conté espais en blanc, per exemple, "Times New Roman". Hi ha només cinc famílies genèriques: "serif", "sans-serif", "cursive", "fantasy" i "monospace".

"times", "courier", "arial", ... "serif", "sans-serif", "cursive", "fantasy", "monospace".

font-style Variant de la inclinació de l'eix vertical. normal italic oblique

font-variant Variant del cos de la lletra: les minúscules es veuen en majúscules però de mida més petita que la vertadera majúscula .

normal small-caps

font-weight Variant del gruix del traç. normal lighter bolder bold 100 200 300 ... 900


2-38

font-size Mida de la font. La mida per defecte és 16px = 1em = 100%

xxU xx% larger smaller xx-small x-smal small medium large x-large xx-large

font-size-adjust especifica la relació a mantenir entre l'alçada de la x i la mida de la font

xxU xx%

font-stretch Variant de la proporció entre els eixos vertical i horitzontal. normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

font Permet especificar les següents propietats alhora (en aquest ordre): font-style font-variant font-weight font-size font-family Els valors de font-size i font-family són necessaris. Si algun dels dos no s’especifica, s’agafa el valor per defecte.

2.7.4.2 Propietats de text.

El interlineat (leading) és l'espai vertical entre línies de text (entre dues baseline consecutives). Com més llarga és la línia més gran ha de ser el interlineat.

En línies llargues es recomana un interlineat de 1,5

Generalment, la longitud per a una lectura ràpida i confortable és de 50 a 60 caràcters (9 o 10 paraules). Si tenim prou amplada, presentarem el text a doble columna.


2-39

Hi ha quatre tipus d'alineació del text:

• Esquerra, és el més adequat per llegir ràpid. Quan l'ull ha de retornar a l'inici de la nova línia, sap exactament on comença.

• Dreta, només s'ha de fer servir per alinear tabulacions. Dificulta molt la lectura, sobre tot si les línies són llargues, atès que l'ull no sap on comença la nova línia.

• Centrat, només per centrar títols o capçaleres, és a dir, quan el disseny simètric del text és important

• Justificat, només per a amplades de línia de menys de 10 paraules o per text imprès. Poden aparèixer "rius" degut a l'excés de caràcters blancs que separen les paraules per aconseguir la justificació.

Per aconseguir una bona llegibilitat del text cal triar un fort contrast de color entre el text i el seu fons. El contrast es pot aconseguir en qualsevol de les tres característiques del color: to (color càlid en front d'un color fred), valor (color lluminós en front d'un color fosc) i intensitat (color viu en front d'un color apagat). Vegeu alguns exemples, Contrast de to: Poc contrast => baixa llegibilitat Molt de contrast (complementaris en el cercle cromàtic) => bona llegibilitat Contrast de valor: Negre sobre blanc => màxim contrast de valor (bona llegibilitat)

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.




2-40

Blanc sobre negre => en contra del costum (paper blanc) Negre sobre groc => segons alguns estudis, el de màxima llegibilitat


text-transform El text es visualitza amb tots els caràcters en majúscula (uppercase), tots a minúscula (lowercase) o cada paraula comença per majúscula (capitalize)

uppercase lowercase capitalize none

vertical-align Alineació vertical en la línia. El valor d'aquesta propietat no s'hereta. Es fa servir per crear super-index i sub-index

baseline sub super top text-top middle bottom text-bottom xx%2

text-align Alineació horitzontal en la pàgina. left right center justify

text-indent Desplaçament cap a la dreta de la primera línia del text. xxU3 xx% 0

line-height Interlineat, és a dir, distància entre dues "baseline" consecutives. xxU xx% normal

text-decoration Decoració del text: subratllat (underline), ratllat al damunt (overline), ratllat (line-through) o pampalluguejant (blink)

underline overline line-through blink none

letter-spacing Espaiat entre caràcters (tracking) xxU normal

2 tant per cent respecta la marca pare 3 Unitat: in (pulsada=2.54cm), cm, mm, pt (punt=1/72 in), pc (pica=12 pt), em (mida de la font), ex=alçada de la x, px (pixels)




2-41

word-spacing Espaiat entre paraules xxU normal

white-space Comportament dels espais en blanc: respectar la seva disposició com la marca <pre> (pre), només es trenca la línia si hi ha un <br> (nowrap).

normal pre nowrap

color Color de primer pla del text. Si s’especifica el color del text també cal especificar el background-color (segons l’especificació estàndard W3C)

nom4 #HEX5 rgb(r%,g%,b%) rgb(r,g,b)6

2.7.4.3 Propietats de les llistes.


list-style-type disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none

list-style-position inside outside

list-style-image none url("adreça")

list-style es pot expressar els tres atributs alhora: type position image

2.7.4.4 Propietats del model de caixa.

Tots els elements HTML tenen un contingut afectat. Aquest contingut s’inscriu dins d’una “caixa” la qual es pot dissenyar a través del CSS. El model de caixa que usa CSS és el següent:

4 16 colors VGA: aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white, yellow 5 xifres hexadecimals 00..FF pels tres colors: vermell, verd, blau respectivament 6 els valors r g b dins el rang 0..255

margin

border

padding

contingut de l’element HTML width

height

background-color background-image


2-42

Els marges (margin) són espais exteriors que serveixen per separar els diferents elements HTML. Són transparents, per tant, es veu el color de background de l’element HTML pare. Hi ha quatre marges diferents: margin-top, margin-right, margin-bottom i margin-left La vora (border) és visible doncs, a més del gruix (width) també es pot especificar el tipus (style) i el color (color). Els farciments (padding) són espais interiors que serveixen per separar el contingut de l’element HTML de la seva vora. Al igual que el marges, també són transparents per tant, es veu el color (background-color) i imatge de background (background-image) de l’element. Finalment, el contingut es col· loca respectant les propietats d’amplada (width) i alçada (height) de l’element HTML. Per tant, si voleu calcular l’amplada i alçada real d’un element HTML heu de tenir en compte els valors del gruix dels marges, vores i farciment. Cap de les propietats que fan referència al model de caixa s’hereta d’un element HTML pare.

2.7.4.4.1 Propietats "Backgrounds"

propietat valors

background-color transparent | nom | #HEX | rgb(r%,g%,b%) | rgb(r,g,b) background-image none | url("adreça") background-repeat repeat | repeat-x | repeat-y | no-repeat background-attachment scroll | fixed background-position xxU xxU | xx% xx% | top | center | bottom | left | right | 0% 0% background llista dels valors anteriors en aquest ordre: color, image, repeat,

attachment i position

2.7.4.4.2 Propietats de marges i "padding"

propietat valors

margin-top margin-right margin-bottom margin-left

xxU | xx% | auto | 0

margin llista dels quatre valors anteriors en l'ordre top, right, bottom, left padding-top padding-right padding-bottom padding-left

xxU | xx%

padding llista dels quatre valors anteriors en l'ordre top, right, bottom, left

2.7.4.4.3 Propietats de les fronteres.

propietat valors

border-top-width border-right-width border-bottom-width border-left-width

xxU | thin | medium | thick

border-top-style border-right-style border-bottom-style border-left-style

none | dottet | dashed | solid | double | groove | rigde | inset | outset

border-top-color border-right-color border-bottom-color border-left-color

nom | #HEX | rgb(r%,g%,b%) | rgb(r,g,b)

border-top border-right border-bottom border-left

es pot expressar els tres atributs alhora: width style color

border-width xxU | thin | medium | thick


2-43

border-style none | dottet | dashed | solid | double | groove | rigde | inset | outset

border-color nom | #HEX | rgb(r%,g%,b%) | rgb(r,g,b) border es pot expressar els tres atributs alhora: width style color

Podeu trobar un manual de referència del CSS 2.1 a http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/#ayuda

2.7.5 CSS3. En aquest apartat veurem algunes de les aportacions del CSS3. Cal tenir present que el CSS3 encara no és un estàndard, per tant, pot haver diferències en les implementacions que en fan els diferents navegadors. Nosaltres només mostrarem aquelles aportacions que són implementades per Firefox, Chrome i Safari, els navegadors més importants.

2.7.5.1 Cantonades arrodonides de les vores.

Amb les propietats border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, podem arrodonir les cantonades de les vores del model de caixa. Per exemple, border-radius: 40px 70px 30px 20px;

equivalent a, border-top-left-radius: 40px; border-top-right-radius: 70px; border-bottom-right-radius: 30px; border-bottom-left-radius: 20px;

Si només posem 3 valors a border-radius, el primer fa referència a border-top-left-radius, el segon a border-top-right-radius i border-bottom-left-radius i el tercer a border-bottom-right-radius. Si només posem 2 valors, el primer fa referència a border-top-left-radius i border-bottom-right-radius i el segon a border-top-right-radius i border-bottom-left-radius. Finalment, si només posem 1 valor, aquest s'aplica a les quatre cantonades. També està permès cantonades en forma d'elipse, per exemple: border-radius: 25px 50px / 10px 30px;

40px

40px 70px

70px

20px 30px

20px 30px

50px 25px

10px 30px

30px

50px

10px 25px


2-44

Els valors també es poden donar en %, fent referència a l'amplada o alçada de l'element i permeten, per exemple, fer el· lipses o cercles si l'amplada i l'alçada són iguals: border-radius: 50%;

2.7.5.2 Imatges en les vores.

Les vores d'un element tenen un color de background, propietat border-color, i també una imatge de background, propietat CSS3 border-image. Per exemple, .voraImatge { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round; }

<p class="voraImatge"> Aquest paràgraf té una imatge de background en la seva vora de 10px de gruix. </p>

La imatge de background, border.png, es divideix en 9 parts:

i aquestes peces es fan servir com a imatges de background per les quatre cantonades i les quatre vores, respectivament. El tercer paràmetre pot ser: round (es redimensiona la peça per repetir-se un nombre enter de vegades), repeat (es va repetint la peça per omplir tota l'àrea de la vora corresponent, per tant poden aparèixer mitges peces) o stretch (es redimensiona la peça perquè s'ompli l'àrea amb una sola peça): border-image: url(border.png) 30 stretch;

30

30

30

30


2-45

Es poden indicar quatre valors diferents per a les mides de les peces, per exemple,

border-image: url(border.png) 15 15 30 30 round;

2.7.5.3 Ombres.

Els elements HTML i el text poden tenir ombra a través de les propietats box-shadow i text-shadow, respectivament. .ombra { width: 200px; height: 50px; background-color: #bbf; box-shadow: 10px 20px grey; }

<div class="ombra"></div>

També podem difuminar l'ombra:

box-shadow: 10px 20px 5px grey;

Es pot afegir més ombres, separant-les per coma:

box-shadow: 10px 20px 2px #aaf, 10px 20px 5px grey;

15

30

15

30

10px

20px

5px

5px


2-46

De la mateixa manera, podem donar ombres al text. Per exemple: text-shadow: 2px 3px red;

text-shadow: 2px 3px 5px red;

color: white; text-shadow: 2px 3px 4px black;

color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

2.7.5.4 Colors i degradats.

CSS3 afegeix el mode HSL per definir el valor del color (el veurem en el següent capítol). Aquest mode es caracteritza per representar el valor del color segons:

• el to (Hue) o grau de color, un valor entre 0 i 360: 0 ó 360 = vermell, 120 = verd i 240 = blau. • la saturació (Saturation) o puresa del color, en tant per cent • la lluminositat (Lightness), en tant per cent on 0% és el negre i 100% és el blanc.

background-color:hsl(120,100%,50%); background-color:hsl(120,100%,75%); background-color:hsl(120,100%,25%); background-color:hsl(120, 60%,70%);

La gran aportació del CSS3, però, són les transparències (canal alfa). Es pot representar el valor del color amb les funcions rgba() o hsla(). Per exemple: background-color:hsla(120,100%,50%,0); background-color:hsla(120,100%,50%,0.2); background-color:hsla(120,100%,50%,0.4); background-color:hsla(120,100%,50%,0.6); background-color:hsla(120,100%,50%,0.8); background-color:hsla(120,100%,50%,1);

background-color:rgba(0,255,0,0); background-color:rgba(0,255,0,0.2); background-color:rgba(0,255,0,0.4); background-color:rgba(0,255,0,0.6); background-color:rgba(0,255,0,0.8); background-color:rgba(0,255,0,1);


2-47

A través de la nova propietat opacity podem fer transparent qualsevol element HTML: <!DOCTYPE html> <html> <head> <style> p{background-color:rgb(255,0,0);} </style> </head> <body style="background-color:rgb(0,255,0);"> <p>Paràgraf sense opacitat</p> <p style="opacity:0.6;">Paràgraf amb opacity:0.6;</p> <p style="background-color:rgba(255,0,0,0.6)"> Paràgraf amb background-color:rgba(0,255,0,0.6) </p> </body> </html>

observeu la diferència entre fer que el color de background tingui transparència i que sigui el propi element el que tingui transparència (afecta al color de background i, també, al contingut de l'element). El valor del color també podrà ser un degradat, lineal o circular. Els degradats lineals es configuren amb la funció linear-gradient() i els degradats circulars amb la funció radial-gradient(). Per crear un degradat lineal cal especificar una direcció i almenys dos colors: el color inicial i el color final. El color anirà del color inicial al color final amb un degradat continuo seguint la direcció marcada, és a dir, les línies perpendiculars a la direcció són d'un mateix color. Vegem algun exemple: background: linear-gradient(red, yellow); background: linear-gradient(180deg, red, yellow);

background: linear-gradient(to right, red , yellow); background: linear-gradient(90deg, red, yellow);

background: linear-gradient(to bottom right, red, yellow); background: linear-gradient(135deg, red, yellow);

background: linear-gradient(to top, red, yellow); background: linear-gradient(0deg, red, yellow);

background: linear-gradient(to right, hsl(0,100%,50%), hsl(72,100%,50%), hsl(144,100%,50%), hsl(216,100%,50%), hsl(288,100%,50%), hsl(360,100%,50%));

background: linear-gradient(to right, rgba(255,0,0,0), red);

background: linear-gradient(to right, red 10%, green 60%, blue 90%); background: linear-gradient(to right, red 0%, red 10%, green 60%, blue 90%, blue 100%);

135º


2-48

Per crear un degradat circular cal especificar: • una forma: ellipse (valor per defecte) o circle, • la mida de la forma: farthest-side, farthest-corner (valor per defecte), closest-side o

closest-corner • la posició del centre de la forma (center equivalent a at 50% 50% és el valor per defecte) • la sèrie de colors del degradat

Vegem alguns exemples, background: radial-gradient(red, yellow, darkgrey);

background: radial-gradient(circle red, yellow, darkgrey); background: radial-gradient(circle farthest-corner at 50% 50%, red, yellow, darkgrey);

div{ width: 100px; height: 100px; border-radius: 50px; background: radial-gradient(circle , red, yellow, darkgrey); }

background: radial-gradient(closest-side at 60% 40%, red, yellow, darkgrey);

2.7.5.5 Imatges de background.

CSS3 permet superposar més d'una imatge de background. Per exemple, si tenim les dues imatges següents: img_flwr.gif paper.gif

podem superposar les dues com a background, <!DOCTYPE html> <html> <head> <style> #superposicio { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif); padding: 15px; } </style> </head> <body> <div id=" superposicio "> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html>


2-49

També es pot reutilitzar la mateixa imatge redimensionada amb la nova propietat background-size, <!DOCTYPE html> <html> <head> <style> #exemple2 { border: 1px solid black; background:url(img_flwr.gif) right bottom no-repeat; padding:15px; } #titol { background:url(img_flwr.gif) no-repeat; background-size: 50px 40px; padding:15px 15px 15px 55px; } </style> </head> <body> <div id="exemple2"> <h2 id="titol">Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html>

També es pot assignar els valors

• contain, que ajustarà les mides perquè es pugui veure la imatge sencera. Poden aparèixer zones no cobertes per la imatge de background.

• cover, que ajustarà les mides perquè no hi hagin zones sense background. Pot ser que part de la imatge no es vegi.

Aquests valors són útils per presentar imatges en diferents dispositius (responsive design). Amb la propietat background-clip podem determinar en quina àrea apareixerà el background. Els valors possibles són:

• border-box, valor per defecte • padding-box, • content-box

Per exemple, el següent codi, dóna el resultat que es mostra: <!DOCTYPE html> <html> <head> <style> div{ width:170px; float:left; margin: 10px; padding:10px; border: 10px dotted black; background: yellow ; text-align:center; } </style> </head> <body> <div><p>border-box</p></div> <div style="background-clip: padding-box;"><p>padding-box</p></div> <div style="background-clip: content-box;"><p>content-box</p></div> </body> </html>


2-50

2.7.5.6 Tipografies web.

Quan usem una tipografia determinada en el disseny de la nostra web pressuposem que el visitant tindrà aquesta tipografia instal· lada en el seu ordinador. Per això és molt aconsellable no utilitzar tipografies massa estranyes atès que si el visitant no la té, el navegador en utilitzarà una equivalent i, segurament, trencarà el disseny de la pàgina. Ara, amb el CSS3, es pot utilitzar tipografies que, en el cas de que no estiguin disponibles en l'ordinador visitant, es podran descarregar pel web i es col· locaran a la memòria cau de l'ordinador. A les webs https://fonts.google.com/ i http://fontsforweb.com/index.php podreu trobar un munt de tipografies que podreu usar en els vostres dissenys. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Web fonts</title> <style> @font-face { font-family: laMevaFont; src: url(Sansationlight.woff); /* l'hem descarregat del web */ } @import 'https://fonts.googleapis.com/css?family=Shadows+Into+Light'; /* o vinculada, no cal descarregar-la */ p{font-family: laMevaFont;} h1{font-family: 'Shadows Into Light', cursive;} </style> </head> <body> <div> <h1>Títol amb la tipografia Shadows Into Light</h1> <p>Aquest paràgraf utilitza la tipografia sansation light. </p> </div> </body> </html>

2.7.5.7 Transformacions 2D.

En CSS3 disposem d'una nova propietat, transform, que ens permet traslladar, rotar, escalar i esviaixar qualsevol element HTML. Aquestes transformacions es faran amb les funcions translate(), rotate(), scale() i skew(), respectivament. Exemple de canvi de posició: <!DOCTYPE html> <html> <head> <style> div { position: absolute; top: 100px; left: 100px; padding:0; width: 200px; height: 100px; background-color: yellow; } .final{ background-color: grey; transform: translate(50px,70px); } </style> </head> <body> <div></div> <div class="final"></div> </body> </html>

70px

50px


2-51

Exemple de gir: .final{ background-color: grey; transform: rotate(45deg); /* l'eix de rotació és el centre */ }

/* Angles positius => sentit horari */

.final{ background-color: grey; transform-origin: 0 0; /* canviem la posició de l'eix */ transform: rotate(45deg); } /* el primer valor és la posició de l'eix X i el segon és l'eix Y els valors per defecte són 50% 50%, equivalent a center center, es a dir, el centre de l'element */

Exemple d'escalat: .final{ background-color: grey; transform: scale(0.5, 0.25); } /* les mides en X es redueixen a la meitat i les mides en Y es redueixen a la quarta part */

.final{ background-color: grey; transform-origin: 0 0; transform: scale(0.5, 0.25); }

Exemple d'esviaix: .final{ background-color: grey; transform: skew(20deg, 10deg); } /* el primer valor és l'àngle d'inclinació de les línies verticals i el segon el de les línies horitzontals */

.final{ background-color: grey; transform-origin: 0 0; transform: skew(20deg, 10deg); }

45º

10º

20º


2-52

També es poden fer, seqüencialment, més d'una transformació. Per exemple, .final{ background-color: grey; transform-origin: 0 0; transform: translate(50px) rotate(30deg) scale(1, 0.5) ; } /* primer, traslladem 50px en l'eix X segon, girem 30º en sentit horari tercer, escalem l'eix Y al 50% */

observeu, però, que l'ordre de les transformació és important per al resultat obtingut.

2.7.5.8 Transicions.

Fins ara, tots els canvis que fem a un objecte, a través del CSS, és instantani, és a dir, s'aplica en temps zero. El CSS3 aporta unes noves propietats: transition, transition-property, transition-duration, transition-timing-function i transition-delay que permetran efectuar un conjunt de canvis a les propietats de l'element (incloent la propietat transform vista anteriorment) en un temps determinat, observant un canvi gradual de la propietat des del valor inicial fins al final. Caldrà especificar

• el valor inicial de les propietats, • quines propietats estaran sotmeses a una transició amb la durada de la mateixa • quins seran els valors finals quan succeeixi un event produit per l'usuari. Els events seran llançats

mitjançant una de les pseudoclasses :hover (mentre el ratolí estigui al damunt de l'element) o :active (mentre s'estigui fent clic en l'element en qüestió).

Vegem un exemple, <!DOCTYPE html> <html> <head> <style> div { /* valors inicials de les propietats */ width: 100px; height: 100px; background: #fbb; transition: width 3s linear 1s; /* és equivalent a transition-property: width; transition-duration: 3s; transition-timing-function:linear; /* altre valors: ease, ease-in, ease-out i ease-in-out transition-delay: 1s; */ } div:hover{ /* event, ratolí damunt la divisió */ /* valors finals de les propietats */ width: 300px; /* assolit amb una transició lineal de 3s que començarà 1s després de l'event */ height:200px; /* assolit instantàniament */ } </style> </head> <body> <div></div> </body> </html>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/transicions/transicio1.html.


2-53

Es pot aplicar una transició a més d'una propietat, <style> div { width: 100px; height: 100px; background: #fbb; transition: width 3s linear 1s, height 5s ease-in 4s; } div:active{ /* event, estem fent clic */ width: 300px; height:200px; } </style>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/transicions/transicio2.html

i, fins i tot, a la propietat transform, <style> div { width: 100px; height: 100px; background: #fbb; transition: width 3s linear 1s, height 5s ease-in 4s, transform 5s; } div:hover{ width: 300px; height:200px; transform: rotate(360deg); } </style>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/transicions/transicio3.html

.


2-54

2.8 Exercicis i qüestions. 1) Donat el codi html de les següents taules, indiqueu quina visualització en faria el navegador: Exemple 1, <table width="100%" border="1" cellspacing="3" cellpadding="5"> <caption>Exemple de taula. </caption> <tr> <th>Primera columna</th><th>Segona columna</th> <th>Tercera columna</th><th>Quarta columna</th> </tr> <tr><td>1,1</td><td>1,2</td><td>1,3</td><td>1,4</td></tr> <tr><td>2,1</td><td>2,2</td><td>2,3</td><td>2,4</td></tr> <tr><td>3,1</td><td>3,2</td><td>3,3</td><td>3,4</td></tr>

</table> Exemple 2, <table border="1"> <caption> Exemple amb colspan=2</caption> <tr><td colspan="2">Dues columnes</td></tr> <tr><td>Primera columna</td><td>Segona columna</td></tr> </table>

Exemple 3, <table width="0%" border="1"> <caption> Exemple amb rowspan=2 </caption> <tr><td rowspan="2">Dues files</td><td>Primera fila</td></tr> <tr><td>Segona fila</td></tr> </table>


2-55

Exemple 4, <table border="1"> <caption>Comparació de dos models</caption> <tr> <td rowspan="2"> </td> <th colspan="2">Valors</th> <th rowspan="2">Preu</th> </tr> <tr> <th>Pes</th> <th>Potència</th> </tr> <tr> <th>Model 1</th> <td>890</td> <td>70</td> <td>995.000</td> </tr> <tr> <th>Model 2</th> <td>1.200</td> <td>110</td> <td>2.245.000</td> </tr>

</table>

Exemple 5 <table border="1"> <caption>Exemple de classe</caption> <tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> </tr> <tr> <td>patates</td> <td colspan="2" rowspan="2">mongetes</td> <td>naps</td> </tr> <tr> <td>cebes</td> <td>cols</td> </tr> <tr> <td rowspan="2">botifarra de Vic </td> <td>cansalada</td> <td colspan="2">fideus</td> </tr> <tr> <td>pebrots</td> <td>pastanaga</td> <td>cigrons</td> </tr> </table>


2-56

2) S’està elaborant una pàgina HTML amb la informació de la recepta de cuina del plat “Gírgoles al roquefort”. Observeu l’estat del Dreamweaver quan s’està editant la pàgina. El navegador Firefox fa la representació de la pàgina HTML tal com indica la imatge següent. Doneu el marcatge semàntic adequat al codi html per tal d'obtenir aquesta presentació. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8"> <title>Pregunta 5</title> </head> <body> <h1>Gírgoles al roquefort.</h1> <img src="imatges/foto.jpg" alt="Gírgoles al roquefort" width="200" height="150" style="float:right" /> <h2>Ingredients.</h2> <ul> <li>gírgoles</li> <li>formatge <strong>roquefort</strong></li> <li>alls</li> <li>oli d'oliva</li> <li>pa</li> </ul> <h2>Elaboració.</h2> <ol> <li>Picar els alls prims.</li> <li>Posar un raig d'oli a una paella, tirar-hi els <em>alls picats</em> i daurar-los.</li> <li>A continuació, tirar-hi també les gírgoles tallades a trossos i fregir-les</li> <li>Afegir el formatge i remenar fins que es fongui.</li> <li>Servir tebi sobre trossos de pa.</li> </ol> </body> </html>


2-57

3) El navegador Firefox fa la representació d'un document .html tal com indica la imatge següent. Doneu el marcatge semàntic adequat al codi html per tal d'obtenir la presentació de la imatge. Les cites cèlebres s’han tret de http://es.wikipedia.org/wiki/Confucio

<!DOCTYPE html> <html lang="cat"> <head> <meta charset=”utf-8" /> <title>pregunta 5</title> </head>: <body> <h1>Confuci</h1> <p>Literalment <em>Mestre Kong</em>, fou un filòsof xinès que va viure del 551 <abbr title="abans de Crist">a.C.</abbr> al 479 <abbr title="abans de Crist">a.C.</abbr> </p> <p>Va nèixer en el poble de <strong><em>Qufu</em></strong>, actual província de <a href="http://es.wikipedia.org/wiki/Shandong" target="_blank">Shandong</a>, en una família de terratinents noble, el clan dels <em>Kong</em>. </p> <h2>Cites cèlebres.</h2> <ul> <li><q cite="http://es.wikiquote.org/wiki/Confucio" lang="es">Lo escuché y lo olvidé, lo vi y lo entendí, lo hice y lo aprendí</q></li> <li><q cite="http://es.wikiquote.org/wiki/Confucio" lang="es">Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos</q></li> </ul> </body> </html>


2-58

4) El navegador Firefox fa la representació d'un document .html tal com indica la imatge següent. Doneu el marcatge estructural adequat al codi html per tal d'obtenir la presentació de la imatge.

<!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>Pregunta 5</title> </head> <body> <h2>Pregunta 5.</h2> <p>Tothom recorda com comença la famosa novel.la <cite lang=”es”>El ingenioso hidalgo Don Quijote de la Mancha</cite> de <strong>Miguel de Cervantes Saavedra</strong>:</p> <blockquote cite="http://cvc.cervantes.es/obref/quijote/edicion/parte1/parte01/cap01/default.htm" lang="es"> "En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor." </blockquote> <p>Altres novel.les de l'escriptor:</p> <ul lang="es"> <li><cite>La Galatea.</cite></li> <li><cite>Novelas ejemplares</cite> <ul> <li><cite>La gitanilla. </cite></li> <li><cite>Rinconete y Cortadillo. </cite></li> </ul> </li> <li><cite>Los trabajos de Persiles y Sigismunda. </cite></li> </ul> </body> </html>


2-59

5) El navegador Firefox fa la representació d'un document .html tal com indica la imatge següent. Doneu el marcatge semàntic adequat al codi html per tal d'obtenir la presentació de la imatge. <!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>Pregunta 3</title> </head> <body> <h2>Grup de recerca.</h2> <p>Els membres del grup són:</p> <ol> <li><abbr title="senyor">Sr. </abbr> Manel Vistallarga</li> <li><abbr title="doctora">Dra. </abbr> Pepeta Camaprima</li> </ol> <p>Les dades de contacte del grup són</p> <address> <abbr title="carrer">c.</abbr> <strong>General Gros</strong>, 24<br /> 08357 Mataró (Barcelona)<br /> <abbr title="telèfon">Tel.</abbr> 93 178 04 56<br /> [email protected]<br /> </address> </body> </html>

6) El navegador Firefox fa la representació d’un document .html tal com indica la imatge següent. Doneu el marcatge estructural adequat al codi HTML per tal d’obtenir la representació de la imatge. El document .html no conté codi CSS. <!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>Pregunta 6</title> </head> <body> <h2>Pregunta 6.</h2> <p>Alguns prefixos del <abbr title="Sistema International"> SI</abbr> (abreviatura del francès <em lang="fr">Système International d'unités</em>) són:</p> <table width="200" border="1"> <tr> <th>Valor</th> <th>Prefix</th> <th>Símbol</th> </tr> <tr> <td>10<sup>12</sup></td> <td>tera</td> <th>T</th> </tr> <tr> <td>10<sup>9</sup></td> <td>giga</td> <th>G</th> </tr> <tr> <td>10<sup>6</sup></td> <td>mega</td> <th>M</th> </tr> <tr> <td>10<sup>3</sup></td> <td>kilo</td> <th>k</th> </tr> </table> </body> </html>


2-60

7) Donat el següent codi html, dibuixeu la representació que en fa el navegador Firefox <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pregunta 5</title> </head> <body> <table border="1"> <caption> Classificació jornada 18<sup>a</sup> </caption> <tr> <th rowspan="2"></th> <th rowspan="2">EQUIP</th> <th rowspan="2">Punts</th> <th colspan="4">TOTALS</th> </tr> <tr> <th><abbr title="Partits Jugats">PJ</abbr></th> <th><abbr title="Partits Guanyats">PG</abbr></th> <th><abbr title="Partits Empatats">PE</abbr></th> <th><abbr title="Partits Perduts">PP</abbr></th> </tr> <tr> <td>1</td><td>Real Madrid</td><td>42</td> <td>17</td><td>14</td><td>0</td><td rowspan="2">3</td> </tr> <tr> <td>2</td><td>Barcelona</td><td>41</td> <td rowspan="2">18</td><td>13</td><td rowspan="2">2</td> </tr> <tr> <td>3</td><td><abbr title="Atlético de">At.</abbr> Madrid</td> <td>38</td><td>12</td><td>4</td> </tr> <tr> <td>4</td><td>Sevilla <abbr title="Futbol Club">FC</abbr></td> <td>36</td><td>17</td><td>11</td><td>3</td> <td>3</td> </tr> </table> </body> </html>


2-61

8) Hem construït un web sobre les aventures de Tintín. L’estructura de carpetes del lloc web és el que reflecteix la imatge següent: Com veieu, hi ha dos documents: tornassol.html i congo.html vinculats l’un amb l’altre i amb el següent visualització a través del navegador Firefox. Escriviu les dades dels vincles que contenen les pàgines anteriors, escrivint les URL ”relatives al document”: Pàgina tornassol.html <p>Anar a <a href= "../../portades/actuals/congo.html" >Tintín al Congo</a></p>

Pàgina congo.html <p>Anar a <a href= "../../imatges/contes/tornassol.html" >L'afer Tornassol</a></p>

9) Escriviu els estils CSS per aconseguir:

a) el text dels elements HTML amb classe d’estil “dolent” es vegi amb negreta, ratllat i de color blau

b) el text de l’element HTML identificat com a “marca” es vegi alineat a la dreta, amb el text en majúscules i de color vermell

c) el text dels elements emfatitzats que estan dins de paràgrafs es vegin de color verd amb un espaiat entre paraules de dues vegades la mida de la font per defecte.

d) els elements td i li es vegin amb un color de background groc i en cursiva .dolent { font-weight: bold; text-decoration: line-through; color: #00F; } #marca { color: #F00; text-transform: uppercase; text-align: right; } p em{ color:#0F0; word-spacing: 2em; } td, li{ background-color:#FF0; font-style: italic; }


2-62

10) Escriviu els estils CSS per aconseguir: a) el text dels elements HTML que tinguin aplicat una classe d’estil de nom “estil_1” es vegi amb

un color de background blau i en cursiva b) el text de l’element HTML identificat com a “estil_2” es vegin de color verd amb un espaiat

entre paraules de dues vegades la mida de la font per defecte. c) el text dels elements emfatitzats que estan dins de paràgrafs es vegi alineat a la dreta, amb la

primera lletra de cada paraula en majúscules i de color vermell d) el text dels elements fortament emfatitzats que estan dins de paràgrafs que tinguin aplicat una

classe d'estil de nom “estil_1” es vegin amb negreta, ratllat i de color groc

.estil_1 { background-color:#00F; font-style: italic; } #esti_2 { color:#0F0; word-spacing: 2em; } p em{ color: #F00; text-transform: capitalize; text-align: right; } p.estil_1 em { font-weight: bold; text-decoration: line-through; color: #FF0; }

11) Es vol fer un índex per navegar dins la pròpia pàgina per les diferents seccions segons mostra la següent imatge: Completeu el codi HTML següent per aconseguir-ho. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>pregunta 6</title> </head> <body> <h2 id="index">Índex</h2> <ul> <li><a href="#s1">anar a Secció 1</a></li> <li><a href="#s2">anar a Secció 2</a></li> </ul> <h2 id="s1">Secció 1</h2> <p>bla bla bla bla bla bla bla bla bla </p> <p><a href="#index">tornar a índex</a></p> <h2 id="s2">Secció 2</h2> <p>bla bla bla bla bla bla bla bla bla </p> <p><a href="#index">tornar a índex</a></p> </body> </html>


2-63

12) Completeu el codi CSS de la següent pàgina perquè tingui una imatge de background que no es repeteix i es col· loqui a la part dreta superior de la pàgina. La imatge té un amplada de 200 píxels i es vol que el text de la pàgina no es solapi amb la imatge quan es canvia la mida del navegador, tal com es pot apreciar en les captures de pantalla següents: <!DOCTYPE html> <html> <head> <style> body{ background-image:url('arbre.png'); background-repeat:no-repeat; background-position:right top; padding-right:200px; } </style> <title>Pregunta 9</title> <meta charset="utf-8"/> </head> <body> <h1>Pregunta 9</h1> <p>La imatge de background de la pàgina només es mostra un cop.</p> <p>Es posiciona a la part dreta superior de la pàgina.</p> <p>El text manté una distància de 200 píxels de la vora dreta de la pàgina per evitar el solapament amb l'imatge de background.</p> <p>Completeu el codi CSS per obtenir aquesta presentació. Observeu la disposició del text per a diferents amplades del navegador</p> </body> </html>

13) Quina mida ha de tenir una font en un ordinador PC (Microsoft Windows) per a què es visualitzi de la mateixa grandària que la mateixa font de 12 punts en un ordinador Apple (Mac) si els dos ordinadors estan a la mateix resolució de pantalla, 1024 x 768 px, per exemple. Primer mirem quants pixels necessita un Mac per representar 12 punts, 12pt=12pt.1"/72pt.72px/1"=12px i ara mirem quants punts són 12 px en el PC 12px=12px.1"/96px.72pt/1"=12.3/4pt=9pt


2-64

14) Un lloc web administrat amb el Dreamweaver presenta l’organització de carpetes i arxius de la imatge. En el document doc1A.html tenim uns vincles per anar a doc2a.html, doc1.html i index.html. Escriviu el valor de l’atribut href i src relatiu al document actual doc1A.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>Pregunta 3</title> </head> <body> <p>Estic a doc1A.html i</p> <ul> <li>Vull anar a doc2a.html <a href=" ../../carpeta2/doc2a.html "> <img src=” ../../imatges/tintin.jpg ” alt=”Tintin” width=”50” height=”50” /> </a></li> <li>Vull anar a <a href=" ../doc1.html ">doc1.html</a></li> <li>Vull anar a <a href=" ../../ ">index.html</a></li> </ul> </body> </html>

15) Amb el navegador Firefox hem visitat una web que parla dels contes de Tintín, com mostra la imatge següent,

Mirant el codi font de la pàgina pregunta5.html veiem,


2-65

Quin és el nom de la carpeta on s’emmagatzema la imatge afertornassol.jpg ? Raoneu la resposta.

../../afertornassol.jpg ens indica que la imatge està dues carpetes més amunt de la

carpeta on està el document pregunta5.html. Per tant, mirant la URL del navegador,

http://ssh.eupmt.tecnocampus.cat/~jou/GMA/pregunta5/tintin/imatges/contes/pregunta5.htm

l

ens situaríem en la carpeta tintin


2-66

16) Estem editant una pàgina web que parla de la Festa dels Tres Tombs amb el Dreamweaver. Escriu el codi HTML per obtenir la presentació que en fa el navegador Firefox tal com indica la següent imatge:

<!DOCTYPE html>

<html>

<head><meta charset=”utf-8" /><title>Pregunta 4</title></head>

<body>

<h1> Tres Tombs a Sant Andreu de Llavaneres</h1>

<p> Llavaneres tornarà a celebrar enguany la tradicional festa de <abbr title="Sant">St.</abbr>

Antoni Abat. La festa dels <strong>Tres Tombs</strong> es farà el proper diumenge, al <abbr

title="passeig">pg.</abbr> de la Mare de Déu de Montserrat. </p>

<p>És una festa molt arrelada a Llavaneres, que fa dècades que se celebra. </p>

<table border="0">

<tr>

<td><img src="imatges/Tres_Tombs_1948.jpg" alt="Tres Tombs 1948" height="169" width="250" /></td>

<th>1948</th>

</tr>

<tr>

<td><img src="imatges/Tres_Tombs_2004.JPG" alt="Tres Tombs 2004" height="169" width="250" /></td>

<th>2004</th>

</tr>

</table>

</body></html>


2-67

17) Donat el següent codi html, dibuixeu la taula i escriviu el text en la cel· la adequada. Apliqueu els estils per defecte de l’HTML. <!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>Pregunta 5</title> </head> <body> <table border="1"> <tr> <th>autor</th><th>novel.les</th><th>llibres</th> </tr> <tr> <td> <ol> <li>Cervantes</li> <li>Follett</li> </ol> </td> <td colspan="2"> <ul> <li> Bones</li> <li> Dolentes</li> <li> Horroroses</li> </ul> </td> </tr> <tr> <th>Premi Nobel</th> <th rowspan="2">Premi Planeta</th> <td>Eduardo Mendoza</td> </tr> <tr> <td>Camilo José Cela,<br /> Juan Ramón Jiménez</td> <td>Álvaro Pompo</td> </tr> </table> </body> </html>


2-68

18) Escriviu els estils CSS per aconseguir: a) el text dels elements HTML amb classe d’estil de nom “dolent” es vegin amb una mida dues

vegades el valor per defecte del navegador i amb una línia al damunt. b) el text de l’element HTML identificat com a “bo” es vegi en minúscules i alineat a la dreta. c) el text dels elements emfatitzats que estan dins d’un ítem d’una llista es vegin en cursiva, de

color blanc i amb un color de fons negre . Dibuixeu en la imatge la representació que en faria el navegador. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Pregunta 6</title> <style type="text/css"> .dolent { font-size: 2em; text-decoration: overline; } #bo { text-transform: lowercase; text-align: right; } li em{ color: #FFF; /* blanc */ background-color: #000; /* negre */ font-style: italic; } </style> </head> <body> <p id="bo">Aquest paràgraf és <em>bo</em>. </p> <p class="dolent">Aquest altre PARÀGRAF és <strong>dolent</strong>.</p> <ul> <li>bo</li> <li>bastant <em>bo</em> però no m’agrada</li> <li>dolent</li> </ul> </body> </html>


2-69

19) Completeu el codi CSS per decorar els vincles per descarregar fitxers .pdf de la pàgina tal com indiquen les dues imatges següents: la primera fa referència als estats de no visitat encara i ja visitat, la segona imatge fa referència a l’estat en que el ratolí està al damunt del vincle. La imatge té unes mides de 25 píxels d’amplada per 25 píxels d’alçada i està emmagatzemada a la carpeta imatges amb el nom pdf.png El text del vincle es mostra en negreta i de color vermell, amb un color de fons transparent.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Pregunta 7</title>

<style type="text/css">

a.imatge:link, a.imatge:visited {

padding-right: 25px;

font-weight: bold;

text-decoration: none;

background-color: transparent;

color: #F00;

}

a.imatge:hover {

background-image: url(imatges/pdf.png);

background-repeat: no-repeat;

background-position: right center;

padding-right: 25px;

font-weight: bold;

text-decoration: none;

border-bottom: 1px dashed #F00;

background-color: transparent;

color: #F00;

}

</style>

</head>

<body>

<p>Descarregar el fitxer <a href="#" class="imatge">prova</a> per consultar-lo.</p>

</body>

</html>

2 multimÈdia a la orld ide eb. -...

Documents