Microsoft Expression Web - Hyperliens

Dans ce chapitre, nous allons apprendre à utiliser des hyperliens dans votre site Web. L'une des choses qui rend le Web si étendu est la capacité des pages Web à créer des liens vers d'autres pages Web.Hyperlinks ou des liens se trouvent dans presque toutes les pages Web.

Les hyperliens permettent également aux utilisateurs de cliquer et d'accéder à une page différente, un endroit dans une page, une image ou un autre emplacement sur Internet entièrement. Voici quelques-unes des caractéristiques importantes du lien hypertexte -

  • Les outils et options de lien hypertexte d'Expression Web facilitent grandement l'utilisation des liens hypertexte.

  • Les vues et les rapports d'hyperliens Expression Web facilitent également la recherche et la correction des liens rompus ou incorrects.

  • Un lien hypertexte peut être un mot, un groupe de mots ou une image qui, une fois cliqué, vous mènera à un nouveau document ou à un emplacement dans le document actuel.

Étiquette d'ancrage

En HTML, <a>La balise connue sous le nom de balise d'ancrage est utilisée pour créer un lien vers un autre document. Une ancre peut pointer vers une autre page html, une image, un document texte ou un fichier pdf entre autres. Voici le code de base d'une ancre<a> marque.

<a href = "url">Text to be displayed as link<a>
  • Dans <a> balise, l'attribut «href» est utilisé pour adresser le lien vers le document, et les mots entre l'ouverture et la fermeture de la balise d'ancrage seront affichés sous forme de lien hypertexte.

  • Lorsque vous déplacez le curseur sur un lien dans une page Web, la flèche se transforme en une petite main.

  • Une URL est une adresse qui spécifie un protocole, un serveur Web et un chemin de fichier.

  • Il existe deux types d'URL, absolute et relative. Unabsolute URL contient une adresse complète tandis qu'un relative URLil manque une ou plusieurs parties de l'adresse. Cependant, le navigateur Web obtient les informations manquantes de la page contenant l'URL.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous utiliserons les deux absolute et relative URLs.

Step 1 - Tout d'abord, ouvrez le index.html page et ajoutez les lignes suivantes dans la main content section.

<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>

Voici la mise en œuvre complète de index.html page.

<!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 - Sauvegardons la page Web et vous verrez le texte dans la section principale du contenu.

Step 3 - Dans la vue Design, faites un clic droit sur Google puis sélectionnez Hyperlien… dans le menu qui ouvrira le Insert Hyperlink dialogue.

Step 4- Dans le champ Adresse, spécifiez l'URL de la page d'accueil Google et cliquez sur OK. De même, cliquez avec le bouton droit de la souris sur YouTube dans la vue de conception et sélectionnez Hyperlien…

Step 5- Dans le champ Adresse, spécifiez l'URL de la page d'accueil YouTube et cliquez sur OK. Maintenant, faites un clic droit sur la «Page d'accueil 2» et sélectionnez Hyperlien… dans le menu qui ouvrira la boîte de dialogue Insérer un hyperlien.

Step 6- Pour le chemin relatif, sélectionnez index_2.html dans le champ d'adresse et Expression Web obtiendra le chemin restant du fichier index.html, car ces deux fichiers se trouvent dans le même répertoire. Cliquez sur OK.

Comme on peut le voir, ces mots sont maintenant soulignés, ce qui signifie que des hyperliens sont créés.

Step 7- La couleur de police par défaut est le bleu et la couleur de police par défaut pour les hyperliens est également bleue. Pour modifier la couleur par défaut du lien hypertexte, sélectionnez l'un des liens hypertexte et accédez auFormat menu et sélectionnez Background… option de menu.

Vous verrez maintenant la boîte de dialogue suivante.

Step 8 - Changeons la couleur du lien hypertexte en vert.

Dans la capture d'écran suivante, vous verrez que la couleur du lien hypertexte est passée au vert.

Step 9 - Voyons maintenant un aperçu de cette page Web dans un navigateur.

Si vous cliquez sur le lien Google, il vous dirigera vers la page d'accueil de Google.

Step 10- De même, si vous revenez à la page d'accueil et cliquez sur le lien YouTube, cela vous dirigera vers la page d'accueil YouTube. Revenons à la page d'accueil.

Clique le Home Page 2 lien et vous verrez qu'il ouvre le index_2.hmtl file.