La possibilitat de crear un enllaç en un document que us porti a un altre document, potser en una xarxa a la meitat del món, és possiblement la raó més important que es va inventar la World Wide Web. Aquests enllaços, anomenats hipervincles, són "H" en HTML - Llenguatge de marques d'hipertext. Sense hipervincles, la web no seria de gran utilitat. No hi ha motors de cerca, mitjans de comunicació socials o anuncis de bàner (ok, la majoria de nosaltres podríem veure's).
Quan creeu les vostres pròpies pàgines web, voldreu crear hipervincles, i KompoZer disposa d'eines que faciliten l'agregació d'enllaços de qualsevol tipus. La pàgina d'exemple que es mostra en aquest tutorial contindrà enllaços a altres llocs web en quatre categories, a altres parts de la mateixa pàgina web i per iniciar un missatge de correu electrònic. Començaré amb un encapçalament i quatre encapçalaments H3 per a cada categoria. A la pàgina següent, afegirem alguns enllaços.
01 de 05
Creació d'un hipervincle amb KompoZer
A les eines de hipervincle de KompoZer s'accedeix fent clic al botó Enllaç de la barra d'eines. Per crear un hipervincle:
- Col·loqueu el cursor a la pàgina on voleu que aparegui el vostre hipervincle.
- Feu clic al botó Enllaç de la barra d'eines. Apareixerà el quadre de diàleg Propietats d'enllaços.
- El primer camp que heu d'emplenar és el quadre de text d'enllaç. Escriviu el text que voleu que aparegui a la pàgina del vostre hipervincle.
- El segon camp que heu d'emplenar és el quadre Ubicació de l'enllaç. Escriviu l' URL de la pàgina que el vostre hipervincle portarà a l'usuari quan feu clic. És una bona idea copiar i enganxar l'URL des de la barra d'adreces del vostre navegador. És molt menys probable que cometeu un error d'aquesta manera i ja ho sap, almenys en el moment de la creació d'un enllaç, que la pàgina està viva i que aquest enllaç no es trenqui.
- Feu clic a D'acord i el quadre de diàleg Propietats d'enllaç es tancarà. El vostre enllaç ara apareixerà a la vostra pàgina.
En la majoria dels navegadors, l'hipervincle apareixerà de manera predeterminada en text subratllat blau. Podeu aplicar els vostres propis estils als hipervincles amb KompoZer, però de moment, ens quedarem amb l'hipervincle bàsic. És una bona idea previsualitzar la pàgina en un navegador web i fer clic als enllaços per assegurar-vos que funcionen.
02 de 05
Crear un enllaç d'ancoratge amb KompoZer
Hi ha un altre tipus d'hipervincle que us porta a una altra part de la mateixa pàgina web quan es fa clic. Aquest tipus d'hipervincle s'anomena enllaç d'ancoratge, i l'àrea de la pàgina a la qual es dirigeix quan feu clic en aquest enllaç s'anomena àncora. Si heu utilitzat l'enllaç "de nou a dalt" a la part inferior d'una pàgina web, feu clic a un enllaç a un àncora.
KompoZer us permet crear ancoratges als quals podeu enllaçar mitjançant l'eina d'ancoratge de la barra d'eines.
- Feu clic a l'àrea de la vostra pàgina on voleu un àncora. És a dir, on voleu que el visor de pàgines es faci arribar quan es fa clic a un enllaç d'ancoratge. Per a aquest exemple, he fet clic a la part anterior de la "F" al encapçalament de Música preferida.
- Feu clic al botó d'ancoratge de la barra d'eines. Apareix el quadre de diàleg Propietats d'ancoratge amb nom.
- Cada àncora d'una pàgina necessita un nom únic. Per aquest àncora, he utilitzat el nom "música".
- Feu clic a Acceptar, i hauríeu de veure, i el símbol d'ancoratge apareix al lloc on voleu l'àncora. Aquest símbol no apareixerà a la vostra pàgina web, sinó com KompoZer us mostra on estan les vostres ancores.
- Repetiu el procediment per a qualsevol altra àrea de la pàgina on voleu que els usuaris puguin saltar. Si teniu molts textos a la pàgina separats per encapçalaments o per algun altre divisor lògic, les àncores són una manera senzilla de navegar per una pàgina.
A continuació, crearem els enllaços que porten el lector a les àncores que ha creat.
03 de 05
Crear la navegació de la pàgina amb KompoZer
Ara que teniu àncores a la vostra pàgina, creem els enllaços que s'utilitzaran com a accessos directes a aquells ancoratges. Per aquest tutorial, he creat una taula de 1 fila i 4 columnes sota el capçalera superior de la pàgina. Cada cel·la de taula conté el mateix text que una de les capçaleres de categoria que s'utilitzen per separar els enllaços de la pàgina. Anirem fent que el text de cadascuna d'aquestes cel·les de taula sigui un enllaç al àncora corresponent.
04 de 05
Creació d'hipervincles a ancoratges amb KompoZer
Ara que tenim les nostres àncores en el lloc i el text que utilitzarem per a la navegació de la pàgina introduït, podem convertir aquests trossos de text sense format en enllaços. Anem a utilitzar el botó Enllaça de nou, però aquesta vegada funcionarà de manera diferent.
- Seleccioneu el text que vulgueu convertir en un enllaç. En aquest exemple, he seleccionat el text "Música preferida" que es troba a la primera cel·la de la taula al llarg de la part superior de la pàgina.
- Feu clic al botó Enllaç de la barra d'eines. S'obrirà el quadre de diàleg Propietats d'enllaços.
- En aquest cas, hem seleccionat el text abans de fer clic al botó Enllaç, de manera que la secció Text d'enllaç de la finestra ja està emplenada i no es pot editar. Feu clic a la fletxa avall de la secció Enllaç de la ubicació. Veureu una llista dels àncores que heu creat als passos anteriors. Per a aquest exemple, selecciono l'àncora #music.
- Feu clic a Acceptar. El text de "Música preferida" a la barra de navegació es converteix en un enllaç que farà que el visor soni a aquesta secció de la pàgina quan es fa clic.
Notaràs que cada àncora designada al menú desplegable té un signe "#" davant d'ell. Així és com crearia un enllaç a un ancoratge en HTML. El "#" davant del nom de l'àncora indica al navegador que aquest enllaç us porta a un altre lloc de la mateixa pàgina.
05 de 05
Creació d'un hipervincle d'una imatge amb KompoZer
Sabíeu que podeu crear un enllaç entre imatges i text? KompoZer us permet fer-ho amb només uns quants clics. Aquí he inserit una petita icona que mostra una fletxa cap amunt i el text "TOP" a la part inferior de la pàgina. Vaig a utilitzar aquesta imatge com a enllaç per tornar a la part superior de la pàgina.
- Feu clic amb el botó dret sobre una imatge i seleccioneu Propietats d'imatge i enllaç des de l'etiqueta del context. S'obrirà el quadre de diàleg Propietats d'imatge.
- A la pestanya Ubicació, veureu el nom del fitxer de la imatge i una vista en miniatura ja omplerta. Cal que introduïu algun text al quadre de text alternatiu. Això és el que apareix quan mou el ratolí sobre la imatge i també el que llegeix un lector de pantalla quan una persona amb discapacitat visual llegeix la pàgina web.
- Feu clic a la pestanya Enllaç. Aquí podeu triar un àncora des del menú, tal com ho vam fer amb els enllaços d'ancoratge. De fet, aquesta imatge s'utilitza com a enllaç d'ancoratge. He seleccionat l'àncores #Links_Of_Interest que ens portaran a la part superior.
- Feu clic a Acceptar. La imatge ara torna a la part superior de la pàgina quan es fa clic.