CREACIÓ DE PÀGINES WEB AMB KOMPO
2. Imatges

Els objectius de la segona lliçó són:

Activitat 2.1. Inserir imatges en un document

Els principals formats d'imatges que s'utilitzen a Internet són GIFJPG i PNGEl primer per imatges amb pocs colors (fins a 256) i el segon per a fotografies de milions de colors. Els arxius d'imatge amb extensió GIF són adequats per incloure gràfics, icones petites de navegació o altres imatges que no incloguin molts colors. Els arxius GIF poden tenir transparent el color del fons, com passa amb la imatge de la ploma vermella que encapçala la secció d'activitats d'aquesta pàgina. L'avantatge dels arxius JPG és que guarden una bona relació qualitat-mida i es poden comprimir bastant sense perdre aparentment qualitat. Tots dos formats d'imatge, a més, poden aparèixer gradualment a la pàgina web sense necessitat que el navegador carregui del tot cada imatge abans de ser mostrada; en els arxius GIF, aquesta característica es diu entrellaçat i en els arxius JPG, progressiuLes imatges PNG són semblants a les GIF, però tenen més colors, i també poden tenir transparències; el problema que presenten és que alguns navegadors antics no les reconeixen.

 En aquesta lliçó anem a incloure imatges a la pàgina web del Monstre. Abans d'incorporar una imatge a la nostra pàgina web hem de considerar el següent:

  1. Les imatges no han de ser grans per regla general. Si les reduïm, ens adonarem que serveixen igualment. Cal reduir amb un programa de retoc fotogràfic (GIMP i Irfanview són bons) fins a una amplada màxima d'uns 500 píxelsSi són més amples, no es veuran bé en monitors antics de baixa resolució.
     

  2. No cal carregar un document amb moltes imatges, perquè la pàgina triga a carregar-se i perquè pot ser molest per al lector.
     

  3. Les imatges han d'il·lustrar els continguts, és a dir, no s'han de posar d'adorn. I a més, contribueixen a estructurar els continguts si les situem en llocs adequats.
     

  4. Les imatges no han de col·locar dins d'un paràgraf si les línies queden massa curtes, ja que dificulten la lectura del text. És millor col·locar centrades en el document.

Activitat 2.2. Propietats de la imatge

 Per introduir una imatge amb Kompozer cal prémer el botó corresponent de la barra d’eines o triem el menú Insereix -> Imatge...  A l’instant apareix la següent finestra amb un formulari i diverses seccions en diferents pestanyes que ens mostren les propietats de la imatge:

Aquí tenim tres camps de text, dins de la pestanya Ubicació, que hem de omplir:

  1. Ubicació de la imatge : per incloure una imatge en el document la busquem en el nostre disc dur prement la icona de la carpeta que està a la part dreta del camp de text. En el nostre curs, tenim la carpeta imatges dins la carpeta principal, on guardem les imatges, per això apareix el seu nom en el camp de text seguida d'una barra i del nom de l'arxiu: imatges/monstruo.jpg.
     

  2. Títol emergent : és el text que apareix dins d'una etiqueta de color quan posem el cursor del ratolí a sobre de la imatge. Serveix per descriure la imatge.
     

  3. Text alternatiu : és una descripció de la imatge que serveix perquè els cercadors la classifiquin i perquè les pesones que no veuen les imatges puguin saber de què tracta.

A la pestanya Dimensions, veiem les mides de la imatge, que no hem de canviar de la seva mida real, perquè si augmentem les seves dimensions, perdrà qualitat, i si les reduïm, seguirà pesant igual que la mida real; per la qual cosa és millor inserir amb la mida final que volem que tingui.

La tercera pestanya és la Aparença de la imatge i resulta molt important:

  1. Els espais són els buits en blanc que ha de deixar la imatge en els seus marges, i es mesuren en píxels. Són recomanables per separar les imatges dels paràgrafs o de les línies de text. També podem afegir un vora de color negre per a la imatge.
     

  2. Hi ha diverses formes de alinear el text amb la imatge, que Komposer redueix a cinc segons es col·loquin respecte al text. aquí podem veure gràficament les tres primeres:

 A sota

 Al centre

A dalt


Les altres dues posicions són: fluir per l’esquerra i per la dreta si col·loquem la imatge a la dreta o a l’esquerra del paràgraf respectivament, perquè el que flueix a una banda o un altre és el text.

Per il·lustrar l'espaiat a dreta i esquerra, podem veure que en el primer retrat del monstre de la taula superior al espaiat horitzontal (esquerra i dreta) és de 5 píxels; en el segon, de 10; i en el tercer, de 15, a causa del qual el text es separa cada vegada més de la imatge, i la imatge es separa cada vegada més del costat esquerra de la cel·la. El espaiat vertical (amunt i avall) és de 3 per a les tres imatges, i per aquest motiu es separen 3 píxels de la part superior de la taula.

Finalment, a la pestanya Enllaç podem incloure una adreça URL que enllaci la imatge.

Activitat 2.3. Activitat nº 2: Inserir imatges

L’activitat d’aquesta lliçó consisteix a incloure tres imatges en els nostres documents. Aquestes imatges es troben dins de la carpeta imatges, que al seu torn està a la carpeta monstre, situada dins de la carpeta principal d’aquest curs. Naturalment, es poden utilitzar altres imatges que tingui l’usuari. Si es treballa des d’Internet, es poden copiar aquestes imatges al disc dur col·locant el punter del ratolí a sobre de la imatge, prement després el botó dret del ratolí i finalment triant l'opció adequada del menú emergent que apareix:

monstre.jpg

ambpotes.gif

ulls.gif

Imatge La imatge del Monstre és de la il·lustradora Helena Martínez, a la qual agraeixo em permeti utilitzar-la. Les altres dues imatges, així com les que apareixen a l’arxiu colec.htm, els noms he modificat, les he extret de la pàgina www.halloween.com, on no apareixen els noms dels seus autors.

Els passos que donarem són els següents:

  1. La imatge del Monstre l'anem a incloure sota del subtítol i centradaA més, ha de portar un vora fi i el text alternatiu "Aquest sóc jo", o un altre que sigui significatiu.
     

  2. També anem a incloure dues imatges en un nou arxiu, que més endavant enllaçarem amb la pàgina principal i que anomenaremcoleccion.htm, ja que el monstre va a guardar-hi la seva col·lecció d'imatges recollides en els seus viatges per Internet. El document anirà encapçalat per la frase: "El meu col·lecció d'imatges" i en ell inserirem dues de les imatges que atresora el Monstre: conpatas.gif iojos.gifLes imatges les col·locarem una sota una altra centrades en el document.
     

  3. Després li posarem una fons negre a la pàgina obrint el menú emergent amb el botó dret del ratolí i triant Propietats de pàgina.S'obrirà una finestra de diàleg i farem un clic a la secció FonsAllà canviarem el color blanc del fons per un negre obrint el menú desplegable corresponent. Probablement haguem de canviar el color del text del títol per un clar perquè es distingeixi amb el fons negre.
     

  4. Finalment, guardarem aquesta imatge al costat del nostre arxiu index.html i li posarem com a títol intern la frase "El meu col·lecció d'imatges".
     

  5. A més, incorporarem la imatge del Monstre en la part inferior del document i la centrarem; ja veurem més endavant el motiu de la seva inclusió en aquest lloc. Anem a reduir aquesta imatge, i per això la marquem amb un clic del ratolí i arrosseguem els tiradors de les vores.

Si volem veure com poden quedar aquestes imatges en el document, premem els botons:

Pàgina amb imatge

Col·lecció d'imatges

 Per completar aquesta activitat, anem a col·locar, de manera provisional i només com a prova, la imatge del monstre a l' esquerra del paràgraf de la primera secció (Professió) ia la dreta del paràgraf de la segona secció (Aficions), separant alguns píxels vertical i horitzontalment respecte al text dels paràgrafs. Després de comprovar que les imatges estan ben inserides, les traurem.

Activitat 2.4. L'etiqueta d'imatges en HTML

 En llenguatge HTML les imatges s’insereixen amb l'etiqueta <img>, que no té tancament. Si veiem el codi font de la nostra pàgina personal, observarem que l'etiqueta es completa de la següent manera:

<Img src = "imatges / monstruo.jpg" border = "1" width = alçada "160" = "113" alt = "jo sóc aquest">

Dins de l'etiqueta <img> hem inclòs diversos atributs :

  • El primer és src, que indica la ruta de la ubicació de la imatge en el disc dur: a la carpeta imatges.
     

  • L'atribut border fa referència a la vora negre de la imatge.
     

  • Width i height es refereixen a l'amplada i l'alçada de la imatge respectivament.
     

  • I alt inclou el text alternatiu

En les imatges del monstre incloses en una taula d'aquest document, el codi font afegeix, a més, els atributs corresponents a l’alineació i l’espaiat horitzontal i vertical:

  • Per a la primera imatge: align = "bottom" (alineació inferior), hspace = "5" (espaiat horitzontal de cinc píxels) i vspace = "3"(espaiat vertical de tres píxels)
     

  • Per a la segona imatge: align = "middle" (mitjà), hspace = "10" i vspace = "3"
     

  • Per a la tercera imatge: align = "top" (superior), hspace = "15" i vspace = "3"

Finalment, la imatge del monstre que apareix a l’esquerra d’un paràgraf anterior, afegeix a l’etiqueta <img> l’atribut align = "left". Si la imatge hagués estat a la part dreta del paràgraf, l'atribut seria align = "right".