![]() |
||
Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che da vita alla grande rete: i links o ancore, cioè quelle scritte interattive che se cliccate col cursore del mouse danno modo di richiamare punti precisi di una pagina o passare da una pagina all'altra e come spesso succede da un intero sito all'altro. Sono proprio queste Ancore o Links ipertestuali che hanno decretato il successo del web. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>Questa è la mia prima pagina web in xhtml</p>
<img src="webl-ink.gif" />
<a href="http://www.web-link.it"> clicca qui </a>
</body>
</html>
Notate la sintassi del comando, la frase clicca qui sarà la sola cosa che si vede sulla pagina, si trova fra i due tags ancora, dove il primo <a> fa uso di attributi, in questo caso di href che indica quale indirizzo URL valido richiamare nel momento in cui sarà fatto clic sulla scritta, segue la sua chiusura </a> che delimita la frase divenuta link (collegamento ipertestuale), guai a dimenticarlo, se accadesse tutto il resto della pagina, da quel punto in avanti, diventerebbe un link! <a href="pagina2.html"> vai alla pagina due </a>
Attenzione, se introducessimo una immagine grafica al posto della scritta si darebbe vita ad un meccanismo chiamato nidificazione degli elementi (tags), cioè si possono inserire elementi html all'interno di altri elementi html, questo perché ogni elemento ha i suoi attributi ed i suoi effetti e trovandosi all'interno di un altro elemento eredita eventuali proprietà ed attributi dell'elemento che lo incorpora. Da qui la modularità del linguaggio <a href="pagina2.html"><img src="web-link.gif" alt="Logo grafico di web-link" width="165" height="120" /></a>
In questo caso l'immagine grafica adoperata come esempio nella pagina precedente ha ereditato le sue proprietà diventando di fatto un link e se cliccata porterà alla pagina 2. Il suo bordo adesso potrebbe essere decisamente antiestetico ma è una caratteristica dei links, cambia di colore a seconda che il link sia già stato visitato oppure no. E' possibile sopprimerlo inserendo all'immagine l'attributo border="0" visto in precedenza. <a href="pagina2.html"><img src="web-link.gif" alt="Logo grafico di web-link" width="165" height="120" border="0" /></a>
|
![]() |