 |
Mòdul 1 |
Disseny i creació de pàgines web
|
Exercicis
Enllaços dins el mateix document
|
||||||||||||||||
|
||||||||||||||||
| Pràctica |
|
|
|
|
|
|
|
|
Exercicis
|
|
||||||
|
||||||||||||||||
|
En aquest cas, es pretén que, en fer clic sobre un vincle determinat, us faci un salt dins la mateixa pàgina a un altre paràgraf. Es tracta de crear un únic fitxer HTML que contingui els dos anteriors (tigre.htm i depredador.htm) i que, des de les dues paraules claus anteriors (depredador i anterior), es pugui saltar d’una a l’altra. |
|
| Desenvolupament de la pràctica | |
 |
A la pràctica anterior, heu vist com crear un enllaç que us obri un altre document des d'una paraula situada en el primer document. Però, en aquest cas, es pretén que, des d'una paraula situada en un mateix document, pugueu saltar a un altre punt del mateix document. Obriu el fitxer depredador.htm amb Internet Explorer. Des del menú Ver | Codigo fuente, editeu el contingut amb el bloc de notes del Windows. Seleccioneu el codi que hi ha entre les etiquetes <body> i </body>, i, des del menú Edición, seleccioneu Copiar. Aquestes dues etiquetes no s'han de seleccionar. Obriu el fitxer tigre.htm i editeu el codi font de la mateixa manera. Un cop obert el bloc de notes amb el codi de tigre.htm, situeu-vos just a sobre de l'etiqueta </body> (on acaba el cos de la pàgina) i inseriu una línia en blanc. Seguidament, enganxeu el contingut que havíeu copiat abans (Edición | Pegar). L' enllaç següent |
| Ja teniu els dos documents fusionats en un de sol. Ara, abans de crear els enllaços, heu de marcar el punt del text on hauran d'arribar aquests. | |
|
Primer de tot, inseriu una etiqueta nova a la capçalera de Depredador. Localitzeu la línia <h1>
Depredador </h1>. Just abans, inseriu: La línia queda així: <h1>Depredador <a name="depredador"></h1></a> Això no és un enllaç sinó el punt d’arribada de l'enllaç que definireu més endavant. Fixeu-vos que el paràmetre href canvia per name, que simplement anomena el punt on s'arribarà des de l’enllaç anterior. Així doncs, poseu href per referenciar (enllaçar) amb un altre document, i name seguit d'un nom per etiquetar el punt de l'àncora on arribarà l'enllaç. Tot seguit, definiu l’enllaç des d'un punt de la pàgina, que ha de provocar el salt al punt d'arribada definit anteriorment, de la manera següent: Localitzeu el punt del codi: ..un depredador, de pèl rogenc,... Inseriu l'etiqueta <a href="#depredador"> just davant la paraula depredador i tanqueu amb </a> ...un <a href="#depredador">depredador</a>, de pèl rogenc,... Fixeu-vos que aquí heu canviat lleugerament el contingut del paràmetre href escrivint el símbol # davant el nom que heu donat al punt i no a un altre fitxer amb extensió HTM. Acabeu de crear un enllaç just a la paraula depredador,
que farà un salt dins la mateixa pàgina. |
|
Segon punt per desenvolupar |
|
Ara feu a la inversa. Feu que, des de l’enllaç de la paraula Anterior, faci un salt al principi de la pàgina, just a la capçalera Tigre. Inseriu, primer, el nom a la capçalera: <h1>El tigre<a name="tigre"></a></h1> Modifiqueu l’enllaç (href) de la paraula Anterior per: <a href="#tigre">Anterior </a> |
|
|
Feu clic sobre la imatge següent per veure com us haurà de quedar.
|
|
|
Els dos fitxers en un
|
|
|
L'efecte de salt dins el mateix document resulta més útil amb textos més llargs. Per poder-ho observar millor, en aquesta pràctica, podeu reduir la mida de la finestra del navegador. |
|
 |
Heu vist que, només canviant el paràmetre href per name, inseriu un senyal al punt on heu de vincular un enllaç. En el punt inicial del vincle, el paràmetre href va seguit del nom del punt d'arribada i precedit del signe #. A la pràctica 8, aprendeu a inserir un vincle que us porti a una web externa. |
 |
|
|
|
