5. Hipervincles

 

Índex

Hipervincles i àncores

Un hipervincle és una connexió entre dos documents diferents. Els extrems de la connexió són les àncores d'origen i de destí. L'àncora d'origen és un text o - com veurem més endavant - una imatge d'un document HTML; la de destí, l'adreça d'un document diferent (o d'un sector diferent del mateix document o d'un altre document).

Els navegadors - llevat que s'especifiqui altrament - mostren l'àncora d'origen amb un subratllat i un color especial, i fan que el cursor del ratolí, en posar-s'hi damunt, adopti la forma d'una mà en actitud de prémer un botó. En fer-hi clic, el navegador ens remet al document (o al sector del document) indicat per l'àncora de destí.

Les àncores d'origen es delimiten amb les etiquetes <a> ... </a>.

L'element A té l'atribut href, el valor del qual és l'àncora de destí:

on adreça és la del document de destí.

L'element A ha de formar part d'un element de text (<p>, <li>, <td>, etc.).

 

Adreces

L'adreça completa d'un document s'anomena URI (Universal Resource Identifier) i conté tres elements:

Per exemple, l'adreça d'aquest document és

en què

Sovint es parla d'URL; tot i que el concepte és diferent, a aquest nivell podem considerar sinònims URL i URI.

 

Adreces relatives

Si el punt de destí és un document de la mateixa web, fem servir les adreces relatives. Una adreça relativa es determina així:Esquema sobre la jerarquia de documents

Així, si des d'ori.htm (vegeu la imatge) volem canviar a dest.htm, escriurem

on els dos punts representen el directori A.

Aquesta norma, aplicada a dos arxius del mateix directori, equival a esmentar exclusivament el nom de l'arxiu de destí.

Exemple

 

Marcadors dins un document

És molt recomanable de posar marcadors dins els documents molt llargs. Cada marcador rep un nom i queda fixat per la presència de l'expressió

col·locada en el punt oportú.

L'enllaç entre el punt de partença i el de destí interior es construeix amb la fórmula

Exemple

La indicació #nom es pot afegir a continuació d'una adreça de document; en aquest cas la remissió és a la secció indicada del document indicat.

 

Document en una finestra diferent

Algunes vegades és convenient que, alhora que anem a un nou document, mantinguem visible el d'origen. Això s'aconsegueix amb la coexistència de dues finestres, una per a cada un. Per a aconseguir-ho, cal afegir a <a...> l'atribut target:

on finestra és un nom qualsevol per a la nova finestra.

Exemple

 

Correu

D'una manera anàloga, amb la propietat mailto: podem engegar el programa de tramesa de correu que tingui assignat l'ordinador:

A continuació hi ha una adreça veritable; si premeu aquí i envien un missatge, deixareu el testimoni del vostre pas per aquesta pàgina.

Correu

Nota: L'únic que fa mailto: és invocar el programa; la tramesa efectiva dependrà de si aquest està ben configurat.

 

Redireccionament automàtic

Un redireccionament automàtic és, a efectes pràctics, com un tipus especial d'hipervincle que, des de la pàgina que el conté, remet automàticament a una altra després d'un temps d'espera especificat en segons.

Aquest redireccionament s'insereix a HEAD, amb el format següent:

on n és el nombre de segons d'espera i adreça és l'adreça completa o relativa, segons que calgui, del document de destí.

Exemple

Els redireccionaments automàtics són molt útils en cas d'un canvi d'adreça: es trasllada tot un conjunt de documents a la nova adreça, i a l'antiga es deixa només una pàgina de redireccionament. D'aquesta manera, els qui coneixen l'adreça antiga són remesos a la nova. És convenient de posar alguna mena d'advertiment a la pàgina d'origen (i donar temps per a llegir-lo), de manera que quan, al cap d'uns mesos, tenim la certesa que pràcticament tothom ja coneix la nova adreça, podem suprimir la pàgina de redireccionament.

Tanmateix, el W3C recomana substituir aquest recurs per algun recurs de programació (JavaScript, PHP...)

N.B.: Aquest sistema de redireccionament automàtic té, tècnicament, molt poc en comú amb els hipervincles; l'hem inclòs aquí només per consideracions de tipus pràctic.

 

 

Color

 

En absència d'especificacions, el text és negre i el fons del document, blanc. Podem obtenir colors diferents de text i de fons amb especificacions com ara les següents:

  •    p {color: rgb(255,0,0)}
  •    p {background-color: rgb(195,195,255)}

Els codis dels color fonamentals són:

  • rgb(0,0,0), negre; rgb(255,255,255), blanc;
  • rgb(255,0,0), vermell; rgb(255,255,0), groc; rgb(0,255,0), verd, i rgb(0,0,255), blau.
  • I substituint en els anteriors 0 per 221 podem obtenir tons molt suaus, adequats per a colors de fons.

Exemple