Il Sito per imparare gratuitamente a fare pagine Web

Oggi: Martedì 07 Ottobre 2008   Ore: 22:01
 
Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · Guida PHP · F.A.Q. · Scripting · Applets · Grafica Web · Forum · Comunicazioni Scrivimi
 
  Web-Link
Libera Donazione
  Primi Passi
web-link
·Introduzione
·Testo
·Immagini
·Links
·Cosmesi
·Head & Body
·Frames
·Tabelle
·Moduli Form
·Audio Script Applet
·Pubblicare il sito
·Conclusioni
web-link
  Fare Web
web-link
·Applets
·Banners
·Blog
·Chat
·Contatori
·DHTML
·E-Commerce
·Editors CSS
·Editors HTML
·Flash
·Forum
·F.T.P.
·Guestbooks
·Grafica
·Iscriz.Mot.Ricerca
·Java Applets
·Java Script
·Mailling List
·Mappe Cliccabili
·Meta Tags
·Mot.ricerca interno
·Scripting
·Sondaggi on-line
·Spazi Web
·Tag Boards
·URL forwarding
·Validatori HTML
·W3C Specifiche
·Web Designer
·Web Master
web-link
Guida Primi Passi HTML 4.01 - Ver. 2.5.1 - Ottobre 2008 - By Andrea Bianchi Web-Link
web-link

Guida html






I Links o le Ancore Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che da vita alla grande rete internet: i links o ancore, cioè quelle scritte interattive che se cliccate col mouse danno modo di generare un'azione: spostarsi all'interno della stessa pagina, da una pagina all'altra, o come spesso accade da un sito all'altro. Sono queste Ancore, che chiameremo anche links ipertestuali, ad aver decretato il successo del web.

Come al solito aprite il vostro editor e richiamate la pagina creata precedentemente. Posizionate il cursore del mouse nel punto esatto in cui dovrà essere inserito un link. Questo il TAG da adoperare:

<a> </a>

A come Ancora... così da solo però, senza attributi, è praticamente inutilizzabile. Vediamolo combinato con l'attributo più importante: href

La sigla HREF nasce dalle iniziali della frase inglese hypertext reference, indica che ciò che si trova fra le ancore di apertura e chiusura diventerà un collegamento ipertestuale, ovvero sarà richiamata un'altra pagina o un punto preciso della stessa pagina, dipende soltanto da cosa è stato specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella vostra pagina web vogliate inserire un link al mio sito: www.Web-Link.it

Sarà sufficiente specificarlo in questo modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<a href="http://www.web-link.it">Web-Link</a>
  </body>
</html>

Notate la sintassi del comando, la parola Web-Link sarà l'unica cosa che si vedrà sulla pagina, si trova fra i due tags ancora, di cui il primo <a> ha l'attributo href che indica quale URL valido richiamare nel momento in cui verrà fatto clic sulla scritta, l'ultimo </a> è la chiusura che determina la fine del link e delimita la frase o anche l'immagine grafica da usare come riferimento cliccabile. Attenzione a non dimenticare di chiudere un link perchè da quel punto in avanti tutto il resto della pagina web sarebbe un enorme link!

Potete sostituire la scritta Web-Link con una qualsiasi altra parola o frase, oppure adoperare delle immagini usando quanto imparato nella lezione precedente, il risultato sarebbe comunque lo stesso: tutto ciò che si trova fra i due tags ancora, se cliccato, porterebbe all'apertura del link specificato, in questo caso il sito www.Web-Link.it perché è quello l'indirizzo inserito dopo HREF. Da notare che per i links ad altri siti si fa precedere il www da un http:// necessario per indicare che quanto stiamo richiamando non si trova all'interno del nostro sito ma esternamente nella rete.

Se al posto dell'indirizzo web (URL) http://... avessi inserito semplicemente il nome di un'altra mia pagina, per esempio pagina2.htm avrei dato vita ad un sito vero e proprio formato da due pagine: questa che state leggendo e la pagina2.htm richiamata dal link. Sulla pagina2 poi dovrei inserire un link a questa pagina1 per dare modo al visitatore di fare avanti e indietro comodamente senza usare i tasti del browser.

Fate attenzione, se io introducessi una immagine al posto della scritta darei vita ad un processo 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 ne eredita eventuali proprietà dell'elemento stesso che lo incorpora.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<a href="http://www.web-link.it"><img src="weblink.gif" width="128" height="64" border="0" alt="weblink"></a>
  </body>
</html>

Nel caso in cui si decidesse di usare una immagine grafica al posto del testo, questa mostrerebbe un bordo perimetrale colorato senza l'attributo border uguale a 0 dello stesso colore scelto per i links. Se non si vogliono vedere bordi colorati si deve usare l'attributo border="0" all'interno del tag <img con border uguale a 0 come nell'esempio riportato sopra.

Oltre agli indirizzi (URL) validi come quello dell'esempio <a href="http://...">, l'attributo hrefè accetta anche altri valori quali :

<a href="ftp://...">
<a href="mailto:...">
<a href="news:...">
<a href="nomefile.zip">
<a href="nomepagina.html">

Che servono rispettivamente per:

<a href="ftp://...">
Collegamento ad un sito in modalità FTP.

<a href="mailto: nome@server">
Indirizzo di posta elettronica per la spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.

<a href="news:...">
Collegamento ad un gruppo di discussione (newsgroup Usenet).

<a href="nomefile.zip">
Scaricamento (download) di un file in formato compresso.

<a href="nomepagina.html">
Collegamento ad altra pagina all'interno della stessa cartella.

Ci sarebbero anche altre possibili forme di links quali: gopher, nntp, telnet, wais, newsrc; ma visto il loro raro utilizzo ritengo che possano servire soltanto per creare confusione e magari non soltanto ad un principiante.

Considerate sempre che la pagina così richiamata dal vostro link andrà a sostituire la pagina richiamante, quella in cui c'è il link. Se non è questo quello che volete che accada è possibile aggiungere l'attributo target che specifica dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta.

target="nome della finestra"

Dove nome della finestra è lo stesso nome assegnato con name in caso di frames, li vedremo più avanti, o la parola riservata _blank che apre una nuova finestra (o una nuova scheda) del browser, lasciando di fatto anche la pagina che ha generato il richiamo.

<a href="http://www.web-link.it" target="_blank">Web-Link</a>

Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare clic sul link, per cui ci saranno due finestre (o due schede nei browser più recenti).

A questo punto conoscete quanto basta per creare un sito, si ho detto proprio sito e non più pagina web. Con l'inserimento del tag a href che vi consente di richiamare altre pagine date vita ad un vero e proprio sito: il vostro.

Sono ancora molte le cose da sapere per fare dei buoni siti ma già con questa terza lezione potrete cominciare a fare qualcosa di concreto, dalla prossima torneremo sulla struttura, sul testo e sulle immagini, aggiungendo alcuni particolari e precisazioni molto importanti.

Con questa lezione siete in grado di introdurre testi, immagini e links.
Nella prossima lezione , dedicata alla cosmesi del testo e ad alcuni caratteri "speciali", imparerete a tornare a capo, a lasciare più spazi fra una parola e l'altra e molto ancora, tutte cose che vi serviranno soltanto se nel frattempo avrete cominciato a fare qualcosa di vostro.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.











  Potete fare domande e discutere l'argomento sul Forum



web-link
  Risorse
· Forum
· F.A.Q.
· Frames
· Scripting
· Applets
· Grafica Web
· Banner Exchange
· Novità
  Servizi
· News Letter
· Sondaggio
· I Files Scaricati
· Segnala il sito
· Leggi Guestbook
· Firma Guestbook
· Banners
  Linguaggi
· A.J.A.X.
· A.S.P.
· C.G.I.
· C.S.S.
· Flash
· H.T.M.L.
· X.H.T.M.L.
· Java
· JavaScript
· P.E.R.L.
· P.H.P.
· X.M.L.
  Download
· Primi Passi
· Guida HTML
· Guida CSS
· Tutorial XHTML
 
· Home Page Home Page · Aggiungi ai preferiti Aggiungi ai preferiti · Segnala ad un amico Segnala il sito ai tuoi amici ·
 

Valid CSS!
Valid HTML 4.01!

Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2008
Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link