HTML/Links: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Ampliamento pagina
Riga 3:
I links sono una delle caratteristiche che hanno fatto le fortune del [[w:web|web]], ossia la possibilità di passare da un documento ad un altro in maniera molto semplice: cliccando su un collegamento ipertestuale. I link sono costituiti da due componenti: il contenuto e la risorsa.
 
*Il '''contenuto''' può essere definito come la parola che risulta cliccabile, o - come vedremo più avanti- un'immagine, che contengono la risorsa.
*La '''risorsa''' è la pagina, il file, a cui punta l'url del contenuto.
 
== Collegamenti esterni ==
Riga 18:
== Collegamenti interni ==
 
I collegamenti interni o ''àncore'' sono collegamenti che non rimandano a una pagina esterna come abbiamo visto in precedenza, bensì a un contenuto disponsibile nella stessa pagina. La loro sintassi è leggermente più complicata dei collegamenti esterni. Per prima cosa, si deve creare un collegamento simile a quello appena visto, ma solamente con l'attributo '''name''', cheil quale farà sì che il collegamento non venga visto come un reale link ma, al contrario, come un'àncora diche cui faremo usouseremo per poter definire un collegamento che punti a quel determinato testo della pagina.
 
Ecco l'esempio:
Riga 27:
</body>
 
Dunque ricapitolandoRicapitolando: per poter realizzare un collegamento interno bisogna eseguire le seguenti operazioni:
 
*Definire l'àncora attraverso l'attributo '''name'''.
*Richiamarla da un altro link inserendo come valore dell'attributo '''href''' il valore dell'attibuto '''name''' preceduto dal segno ''#''.
 
E' possibile anche creare in questo modo link vuoti richiamando un'àncora senza valore (ad esempio per creare un link in fondo alla pagina che vi faccia tornare automaticamente all'inizio della stessa) in questo modo:<br>
(ad esempio per creare un link in fondo alla pagina che vi faccia tornare all'inizio della stessa senza doverla ricaricare)
 
<body>
Line 41 ⟶ 40:
== Posta elettronica ==
 
Attraverso un link è possibile anche possibilefar aprire il client di posta dell'utente affinché questo possa mandareinviare una e-mail con il campo ''A:'' precompilato. Ovviamente l'indirizzo di posta elettronica che comparirà in tale campo sarà quello che andremo a specificare nel codice HTML. Ecco la sintassi: <code><nowiki><a href="mailto:indirizzo mail"></nowiki></code>Parola da visualizzare<code><nowiki></a></nowiki></code>
 
Eccoed ecco un esempio pratico:
 
<body>
<code><nowiki><a href="mailto:prova@prova.it"></nowiki></code>InviaInviami una Maile-mail!<code><nowiki></a></nowiki></code>
</body>
 
Inoltre,Volendo è possibile stabilire soggettoanche l'oggetto e corpoil testo del messaggio di posta. EccoSarà sufficiente seguire unquest'altro esempio:
 
<body>
<code><nowiki><a href="mailto:prova@prova.it?subject=Soggetto&body=Corpo del Messaggio"></nowiki></code>InviaProva ad Mailinviarmi una e-mail da qui<code><nowiki></a></nowiki></code>
</body>
 
== Attributi dei link ==
 
LaDi seguenteseguito ètrovate una tabella riassuntiva: degli attributi associabili al tag <a>
 
{| {{prettytable}}
!Attributo
!Valori
!Significato
|-
|<code>target</code>
|Qualsiasi parola/codice riservato
|Specifica dove visualizzare la risorsa del link. Può essere uno dei seguenti:
*il nome assegnato ad un frame (vedi capitolo sui [[HTML/Frames|Frames]]),
*il codice riservato ''_self'' che si riferisce allo stesso frame in cui è contenuto il link,
*il codice riservato ''_parent'' che si riferisce al frameset genitore,
*il codice riservato ''_top'' per aprirlo nella pagina originale, senza frame
*il codice riservato ''_blank'' per aprirlo in una nuova finestra del browser
|-
|<code>title</code>
|Qualsiasi lettera/parola
|Il valore dell'attributodi ''title''questo verràattributo sarà mostrato quando il cursore saràsi fermerà sopra il link. ServeUtile per spiegareoffrire doveinformazioni porteràaggiuntive ilsul link.
|-
|<code>accesskey</code>
|QualsiasiUna singola lettera
|Determina le scorciatoie da tastiera, se l'utente clicca la combinazione ''ALT+valore'' viene mostrato il link
|-
|<code>hreflang</code>
|Diversi valori, ad es.: ''ita'', ''eng'', ecc.
|Indica la lingua del documento, utile se si ha un sito multilingua. Facilita anche l'indicizzazione da parte dei motori di ricerca.
|}
 
I seguenti attributi possono essere specificati nel tag <code><body></code> della pagina e permettono di personalizzare il colore dei link nella pagina. Il loro uso è però sconsigliato in favore dei [[CSS]]
 
{| {{prettytable}}
Line 66 ⟶ 94:
|<code>link</code>
|Qualsiasi colore
|IndicaDefinisce il colore di tutti i link presenti nella pagina,; il tipo di colore può essere specificato sia col nome inglese, sia col relativo codice esadecimale.
|-
|<code>alink</code>
|Qualsiasi colore
|IndicaDefinisce tuttiil icolore dei link attivi, il(si colore,intendono attivi i collegamenti al momento del click); come il precedente, può essere espresso sia col nome in inglese siache col relativo valore esadecimale.
|-
|<code>vlink</code>
|Qualsiasi colore
|IndicaDefinisce tuttiil icolore dei link giagià visitati, il colore, come gli altridall'utente; può essere espresso anche qui sia col nome in inglese sia colche relativotramite valore esadecimale.
|-
|<code>accesskey</code>
|Qualsiasi lettera
|Determina le scorciatoie da tastiera, se l'utente clicca la combinazione ''ALT+valore'' viene mostrato il link
|-
|<code>title</code>
|Qualsiasi lettera/parola
|Il valore dell'attributo ''title'' verrà mostrato quando il cursore sarà sopra il link. Serve per spiegare dove porterà il link.
|-
|<code>target</code>
|_blank (apre in uona nuova pagina) o '''_main''' (aperto nella stessa pagina)
|Determina come verrà visualizzata la risorsa del link: o nella stessa pagina o in una nuova finestra
|-
|<code>hreflang</code>
|Diversi valori es.: ita, eng
|Indica la lingua del documento, utile se si ha un sito multilingua. Facilita anche l'indicizzazione da parte dei motori di ricerca.
|}
 
 
{{avanzamento|75%}}