CREACIÓ DE PÀGINES WEB AMB KOMPO
4. Enllaços

 

Els objectius de la quarta lliçó són els següents:

Activitat 4.1. Tipus d’enllaços

No podien faltar en un curs de pàgines web dels enllaços o hipervincles, que són l’essència mateixa de la Xarxa. Els anomenats hipertextos són els textos o els objectes sobre els quals podem fer clic perquè ens portin a una altra part del document, a un altre arxiu del mateix lloc d’Internet o a una altra pàgina d’Internet, entre altres funcions.

Havíem deixat la nostra pàgina en la lliçó anterior dissenyada en una taula que ocupava tot el document. En aquesta lliçó anem a inserir tots els enllaços que hi ha d’haver a la nostra pàgina.

Activitat 4.1.1. Enllaços interns del document

Un enllaç intern (o  marcador, com en diuen altres aplicacions) és un marcador d’una secció d’un document a on es dirigirà un enllaç. L’enllaç pot unir un document amb una part concreta d’un altre, però els marcadors de la pàgina web del Monstre es realitzaran sobre seccions del mateix document.

Per crea el primer enllaç intern col·loquem el cursor al començament de la primera secció, és a dir, a l’esquerra de la paraula " Professió "(la qual està escrita a la cel·la gran dels continguts, no la del lateral). Després, premem la icona Enllaç intern de la barra superior o obrim el menú Inserir i premem en l’opció Enllaç intern.... Aleshores apareixerà una finestreta, on escrivim la paraula "professió" (sense majúscules ni accents ni lletres especials, perquè és text de codi) en el quadre de text superior que correspon al nom de l’enllaç intern. Premem el botó Acceptar i veiem que en el document s’ha inserit un icona de l’enllaç intern amb el dibuix d’un àncora.

Ara cal crear l’enllaç que dirigeix ​ a aquest marcador i per això marquem amb un clic de ratolí la paraula "Professió" que està a la columna esquerra, obrim el menú Inserir i triem l’opció de Enllaç..., o també podem prémer el botó Enllaç, que es troba a la barra superior. Ens apareix el següent formulari, on hem d’escriure l’expressió #profesio, que és el nom de l’enllaç intern, aquesta vegada precedit del signe#, que utilitza HTML per identificar-lo. Aquesta expressió es pot triar en el menú desplegable que està a la dreta del camp de text, on es veuran tots els enllaços interns del document.

Quan tanquem la finestra, observarem que la paraula " Professió "de la columna esquerra està subratllada, la qual cosa indica que aquesta paraula és ja un enllaç, és a dir, en prémer sobre ella amb el cursor del ratolí, la pantalla de l’ordinador ens mostrarà en la part superior la secció on el Monstre ens parla de la seva professió.

Activitat 4.1.2. Enllaç a un document intern

També es pot crear un altre tipus d’enllaç: vincles entre arxius del mateix lloc d’Internet. En el nostre cas crearem un enllaç amb l’arxiu de la col·lecció d’imatges del Monstre, coleccio.html, que hem creat anteriorment. Haurem de marcar l’expressió "El meu col·lecció" i després obrir la finestra d’enllaços. Cal escriure només el nom del fitxer en el primer quadre de text o buscar en el disc dur prement el icona de la carpeta que es troba a la dreta del camp de text. Si, per exemple, coleccio.html es trobés en una carpeta anomenada aficions, la ruta hauria estat: "aficions/coleccio.html ".

A la finestra apareix activada l’expressió " La URL és relativa a l’adreça de la pàgina ". Pel que fa a la URL, la definició es pot llegir en Wikipedia, pot ser de dos tipus:

  1. URL relativa és la que indica la direcció o URL parcial d’un arxiu des de la carpeta on es troba el document amb l’enllaç. Nosaltres tenim l’arxiu index.html dins de la carpeta monstre, per tant, qualsevol enllaç que fem partirà des d’aquesta carpeta. Així, per exemple, l’enllaç a la imatge del monstre que tenim a la carpeta imatges serà: "imatges/monstre.jpg", amb una barra de separació.
     

  2. URL absoluta és l’adreça completa que ha de començar amb el protocol http i inclou l’adreça del servidor on es troba el fitxer.

Per a la nostra pàgina web és millor utilitzar les URL relatives, perquè així els URL no depenen del servidor en què es trobi, de manera que podem crear la pàgina web en el nostre disc dur i transferir després a qualsevol servidor tots els arxius guardats en la mateixa carpeta principal.

L’enllaç el podríem deixar així, però hi ha un atribut important per a algunes etiquetes que es diu title, i amb ell vam titular o descrivim un enllaç. El text apareix en un requadre de color quan col·loquem el cursor del ratolí sobre l’enllaç, i completa la informació d’aquest enllaç. Per incloure aquest atribut a l’etiqueta de l’enllaç, cal prémer el botó Edició avançada, que està a la part inferior dreta de la finestra Propietats de l’enllaç. Llavors sorgeix una altra finestra amb pestanyes.

A la pestanya on s’obre la finestra, Atributs HTML, hi ha a la part inferior esquerra un menú desplegable, del qual escollim l’atribut title. A la seva dreta hi ha el camp de text per al valor de l’atribut, i aquí escrivim la descripció de l’enllaç; en aquest cas: "El meu col·lecció d’imatges".

Activitat 4.1.3. Enllaç a una pàgina web externa

També es pot crear un vincle amb una altra pàgina web aliena a la nostra. Aquí anem a crear un enllaç d’aquest tipus a la secció Enllaços de por de la nostra pàgina. Després de marcar l’expressió http://www.halloween.com anem a obrir la finestra d’enllaços prement el botó corresponent. Llavors, escrivim l’adreça completa (absoluta) de la pàgina en el quadre de text de la Ubicació de l’enllaç.

Però com volem que la pàgina de Halloween s’obri en una nova finestra, haurem d’activar la casella de la secció Destinació. L’enllaç es pot obrir de diverses formes segons es veu al menú desplegable d’aquesta secció, però la més útil és la d’obrir-lo en una nova finestra, ja que les altres possibilitats s’usen molt poc.

Finalment, premem el botó acceptar i l’expressió " http://www.halloween.com "queda subratllada, la qual cosa indica que ja s’ha creat l’enllaç.



 

Activitat 4.1.4. Enllaç a una adreça de correu electrònic

Un tipus d’enllaç molt utilitzat és a una adreça de correu electrònic. A la nostra pàgina crearem un enllaç d’aquest tipus perquè qualsevol lector pugui enviar-nos un missatge. En l’ultima línia del nostre document apareix el següent text: "Pàgina creada pel Monstre a l’octubre de 2001". Crearem l’enllaç sobre les paraules "el Monstre"; per això, marquem amb el ratolí aquestes dues paraules i obrim la finestra d’enllaços. Ara escrivim la nostra adreça de correu electrònic immediatament després d’aquesta expressió mailto:, sense deixar buits en blanc. Quan l’usuari premi aquest enllaç, s’obrirà el seu programa de correu electrònic amb aquesta adreça escrita.



 

Activitat 4.1.5. Enllaç a un arxiu per descarregar ( download )

Molt senzilla resulta la creació d’un enllaç a un arxiu de qualsevol format que tinguem a la nostra carpeta i que vulguem que l’usuari descarrega al seu ordinador. Escrivim a la nostra pàgina la frase "Descàrrega d’arxiu", per exemple, la marquem i obrim la finestra d’enllaços. Llavors només hem d’escriure el nom del fitxer amb la seva extensió (són molt habituals els arxius comprimits d’extensió ZIP) en el camp de text, com hem fet fins ara amb altres enllaços. A la seva pàgina, el Monstre no ha inclòs cap enllaç d’aquest tipus.
 

Activitat 4.2. Mapes d’enllaços

Els mapes consisteixen en diversos enllaços creats dins d’una mateixa imatge. Encara que s’utilitzen molt en pàgines web molt professionals, no són fonamentals en els documents, i moltes vegades retarden l’obertura total d’una pàgina. Amb alguns programes es poden crear fàcilment, però exigeixen una gran minuciositat si es volen escriure en el codi font de la pàgina.

Un exemple molt habitual a la Xarxa són els menús creats amb dibuixos petits a manera de navegació i que constitueixen una sola imatge. Dins d’aquesta imatge, es delimiten les zones corresponents a cada enllaç, de manera que quan l’usuari faci clic en cadascuna d’aquestes zones, s’obri un arxiu diferent. També se solen construir aquests menús amb textos creats com imatges.
 

Activitat 4.3. Colors dels enllaços

Finalment, s’haurà observat que quan vam crear un enllaç a un text, aquest canvia de color i apareix subratllat. Els navegadors utilitzen tres colors predeterminats per als enllaços : un per quan encara no s’ha premut sobre ell, un altre per a quan s’ha visitat el document al qual va dirigit, i un últim color que apareix en el moment en què es prem l’enllaç. Aquests colors els podem modificar a la finestra de Colors i fons de la pàgina..., que es pot obrir des del menú superior Format.


 

Quan s’activa l’opció Utilitza colors personalitzats, es veuen els colors predeterminats per al text, per als enllaços i per al fons. No convé canviar-los a menys que s’escullin molt bé perquè els lectors distingeixin quins enllaços han visitat i quins no, perquè aquests colors són els que fan servir tots els navegadors per defecte i, per tant, els usuaris estan acostumats a ells. No obstant això, el Monstre s’ha atrevit a canviar aquests colors perquè es vegin bé en el seu document de la col·lecció d’imatges, perquè el fons negre l’obliga a canviar-los. I queden així, com ja vam veure en la secció 3.4.:


 

Activitat 4.4. Activitat nº 4: Crear els enllaços de la web del Monstre

En aquesta activitat crearem tots els enllaços que falten per incloure en la nostra pàgina. Ja s’ha explicat en les seccions anteriors com realitzar-los, així que no ha de resultar difícil.

  1. Primer anem a crear els enllaços interns i els seus enllaços corresponents per a les tres seccions del document: "Aficions", "Enllaços de por" i "Escriu-me". Als marcadors els anomenarem "aficions", "enllaços" i "escriu". La secció de l’enquesta la introduirem en el següent capítol.
     

  2. També crearem un marcador a la part superior del document, a l’esquerra del títol, que es digui "a dalt", i el seu enllaç corresponent ho farem sobre la imatge petita del Monstre que es troba a la part inferior del document, de manera que quan el lector arribi al final del document, pugui pujar de seguida a l’inicia del document sense necessitat d’utilitzar la barra de desplaçament.
     

  3. A més, anem a tornar a crear l' enllaç a l’arxiu de la col·lecció d’imatges des de l’expressió "(Vegeu la meva col·lecció)", que es troba al número 2 de la llista numerada de la secció de Aficions. I també haurem de fer un enllaç des de l’arxiu de la col·lecció (coleccio.html ) que ens porti de tornada a la pàgina principal  index.html ; ho farem sobre la següent frase: "Torna a l’inicia", que escriurem sota de les dues imatges que vam introduir a la lliçó 2.
     

  4. Amb el fons negre de la pàgina, el color que adquireixen els enllaços impedirà que es pugui llegir bé la frase "Tornar a l’inicia". Per això, cal canviar els colors predeterminats dels enllaços, com vam veure en la secció 4.3 d’aquest document.
     

  5. Finalment, farem els enllaços de les altres dues pàgines web de la secció d’enllaços que encara no hem fet.

Quan acabem aquesta activitat, podem comparar la nostra pàgina amb la del Monstre.
 

Activitat 4.5. L’etiqueta d’enllaç en HTML

L’etiqueta d’enllaç o hipervincle és <a> i el seu atribut principal href. Els marcadors inclouen l’atribut name, que nomena la localització a què va dirigit l’enllaç. El text que delimiten pot estar a la dreta de l’etiqueta de tancament, com en el nostre cas. Els enllaços interns o marcadors de la nostra pàgina són els següents:

<a name="arriba"> </a> Pàgina web del Monstre

<a name="professió"> </a> Professió

<a name="aficiones"> </a> Aficions

<a name="enllaços"> </a> Enllaços de por

Els enllaços creats per dirigir el lector a aquestes seccions del document són els següents:

<a title="Mi professió" href="#professió"> Professió </a>

<a title="Mis aficiones" href="#aficiones"> Aficions </a>

<a title="Enllaços de por" href="#enllaços"> Enllaços </a>

<a title="Mi col·lecció d’imatges" href="coleccio.html"> Col·lecció </a>

<a title="Contesta aquesta enquesta" href="#escriu"> Escriu </a>
 

<a href="#arriba"> <img src = "imatges / monstre.jpg" align = "TEXTTOP" border = "0" width = "39" height = "28"> </a>

Cal observar que l’últim enllaç porta inclosa l’etiqueta de la imatge del monstre. A més, tots els enllaços incorporen l’atribut title, que no incorporen els següents per evitar que hi hagi massa text en aquest quadre.

Quant als altres quatre tipus d’enllaços creats a la nostra pàgina, aquestes són les etiquetes i els seus atributs:

A una pàgina web aliena:

<a href="http://www.halloween.com"> Halloween.com </a>

A un altre document del nostre lloc d’Internet:

<a href="coleccio.html"> Vegeu meva col·lecció </a>

A una adreça de correu electrònic (e-mail):

<a href="mailto:el_monstre monstruós"> el Monstre </a>.

A un arxiu perquè sigui descarregat. En aquest cas no hem utilitzats cap arxiu a la nostra pàgina. En l’atribut href: cal escriure el nom del fitxer amb la seva extensió:

<a href="nomchiu.zip">

Les etiquetes dels colors dels enllaços s’inclouen dins de l’etiqueta <body> com a atributs. A la nostra pàgina no les hem canviat, per això no apareixen, encara que sí apareix el color de fons, que l’hem modificat. En canvi, a la pàgina de la col·lecció de fotos si hem modificat els colors dels enllaços:

<Body bgcolor = "#000000" text = "#FFFFFF" link = "#ffff00" vlink = "#ffff00">

Els atributs, per ordre, es refereixen al color del fons, al color del text, al color de l’enllaç i al color de l’enllaç visitat.