Microsoft Expression Web: collegamenti ipertestuali
In questo capitolo impareremo come utilizzare i collegamenti ipertestuali nel tuo sito web. Una delle cose che rende il Web così espansivo è la capacità delle pagine Web di collegarsi ad altre pagine Web.Hyperlinks oppure i collegamenti si trovano in quasi tutte le pagine web.
I collegamenti ipertestuali consentono inoltre agli utenti di fare clic e di passare interamente a una pagina diversa, un punto all'interno di una pagina, un'immagine o un'altra posizione su Internet. Di seguito sono riportate alcune delle caratteristiche importanti del collegamento ipertestuale:
Gli strumenti e le opzioni per i collegamenti ipertestuali di Expression Web semplificano l'utilizzo dei collegamenti ipertestuali.
Le visualizzazioni di collegamenti ipertestuali e i report di Expression Web semplificano inoltre la ricerca e la correzione di collegamenti interrotti e non corretti.
Un collegamento ipertestuale può essere una parola, un gruppo di parole o un'immagine che, se cliccata, ti porterà in un nuovo documento o in una posizione all'interno del documento corrente.
Tag di ancoraggio
In HTML, <a>Il tag noto come tag di ancoraggio viene utilizzato per creare un collegamento a un altro documento. Un ancoraggio può puntare a un'altra pagina html, un'immagine, un documento di testo o un file pdf, tra gli altri. Ecco il codice di base di un'ancora<a> etichetta.
<a href = "url">Text to be displayed as link<a>In <a> tag, l'attributo "href" viene utilizzato per indirizzare il collegamento al documento e le parole tra l'apertura e la chiusura del tag di ancoraggio verranno visualizzate come collegamento ipertestuale.
Quando sposti il cursore su un collegamento in una pagina web, la freccia si trasformerà in una piccola mano.
Un URL è un indirizzo che specifica un protocollo, un server Web e un percorso di file.
Esistono due tipi di URL, absolute e relative. Unabsolute URL contiene un indirizzo completo mentre un file relative URLmanca una o più parti dell'indirizzo. Tuttavia, il browser Web ottiene le informazioni mancanti dalla pagina che contiene l'URL.
Esempio
Diamo un'occhiata a un semplice esempio in cui useremo entrambi absolute e relative URLs.
Step 1 - Per prima cosa, apri il file index.html pagina e aggiungi le seguenti righe nel file main content sezione.
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>Di seguito è riportata l'implementazione completa di index.html pagina.
<!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">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css">
#left-nav ul li a:hover {
color: #000000; background-color: #116611;
}
#left-nav ul li a:hover {
color: #000000; background-color: #66FF99;
}
</style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"> </div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 2 - Salviamo la pagina web e vedrai il testo nella sezione del contenuto principale.
Step 3 - Nella visualizzazione struttura, fai clic con il pulsante destro del mouse su Google e quindi seleziona Collegamento ipertestuale ... dal menu che aprirà il file Insert Hyperlink dialogo.
Step 4- Nel campo Indirizzo, specificare l'URL della home page di Google e fare clic su OK. Allo stesso modo, fai clic con il pulsante destro del mouse su YouTube nella visualizzazione struttura e seleziona Collegamento ipertestuale ...
Step 5- Nel campo Indirizzo, specifica l'URL della home page di YouTube e fai clic su OK. Ora per il relativo tasto destro del mouse su "Home Page 2" e selezionare Collegamento ipertestuale ... dal menu che aprirà la finestra di dialogo Inserisci collegamento ipertestuale.
Step 6- Per il percorso relativo, selezionare index_2.html nel campo dell'indirizzo ed Expression Web otterrà il percorso rimanente dal file index.html, poiché entrambi questi file si trovano nella stessa directory. Fare clic su OK.
Come si può vedere, queste parole sono ora sottolineate, il che significa che vengono creati collegamenti ipertestuali.
Step 7- Il colore del carattere predefinito è blu e anche il colore del carattere predefinito per i collegamenti ipertestuali è blu. Per modificare il colore predefinito del collegamento ipertestuale, selezionare uno qualsiasi dei collegamenti ipertestuali e andare suFormat menu e selezionare Background… opzione di menu.
Ora vedrai la seguente finestra di dialogo.
Step 8 - Cambiamo il colore del collegamento ipertestuale in verde.
Nello screenshot seguente, vedrai che il colore del collegamento ipertestuale è cambiato in verde.
Step 9 - Vediamo ora in anteprima questa pagina web in un browser.
Se fai clic sul link di Google, verrai indirizzato alla home page di Google.
Step 10- Allo stesso modo, se torni alla home page e fai clic sul collegamento YouTube, verrai indirizzato alla home page di YouTube. Torniamo alla home page.
Clicca il Home Page 2 e vedrai che apre il file index_2.hmtl file.
