Fiche HTML : Balises de liens, iframe, génériques

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant propos |
• | Balise de liens |
• | Balise d'ancrage |
• | Balise iframe |
• | Balises génériques |
• | Commentaires conditionnels |
• | Les bonnes habitudes |
• | Application au projet de site Web |

Avant propos

Nous allons terminer notre revue des balises par la balise de liens (<a>), l'une des plus importante et des plus utilisées,  mais aussi la balise <iframe> pour étendre les possibilités de présentation de votre page Internet , et pour finir les balises dites génériques.

<a> comme Balises de liens

Cette balise sert à insérer un appel de lien ou un ancrage dans une même page ou vers une autre page. On appelle ces liens des  hyperliens qui sont l'essence même d'Internet. C'est une balise "en ligne" qui ne génère pas de saut de ligne.

Syntaxe générale : <a href="MonLien"  title="info action">objet cliquable</a>

L'objet cliquable peut être du texte ou une image.

Dans le tableau suivant  les attributs en gras sont obligatoires ou fortement conseillés.

Attributs de la balise de liens

Attribut	Exemples Valeurs	Commentaires
href	href="url du document à atteindre"	voir la note 1 : Différent types de liens
target	Charge le résultat dans la fenêtre ou le cadre (la frame) dont le nom (name) correspond à la valeur du target.	Le W3C ne reconnaît plus cet attribut, l'utilisation des frame étant lui même fortement déconseillé car la navigation perd l'historique.
title	title="Cliquez ici pour engager une action"	Lorsque la partie encadrée par la balise <a></a> est survolée par la souris, le contenu de l'attribut title apparaît sous forme d'une petit rectangle à coté du curseur. Tester title en survolant ce lien
accesskey	Permet de sélectionner un lien en tapant sur le clavier la lettre spécifiée dans ACCESSKEY.	Sous Windows il faut faire ALT + la lettre et sous MAC il faut faire "CTLR" + la lettre.  Relâchez les touches et appuyez sur la touche Retour pour atteindre directement la cible associée à la commande.

Différents types de liens

Liens absolus

• Lien absolu vers un site Web :
  <a href="http://semelin.jany.free.fr">Atteindre le lien http://semelin.jany.free.fr</a>

• Lien absolu à partir de la racine vers des répertoires de niveaux inférieurs(Images/Site/) par rapport à la racine absolue :
  <a href="http://semelin.jany.free.fr/Images/Site/Monexemple.html">Atteidre le lien http://semelin.jany.free.fr/Images/Site/Monexemple.html</a>

Liens relatifs

• Lien relatif vers un document situé dans le même répertoire que la page Internet courante :
  <a href="Monexemple.html">Atteindre le lien Monexemple.html</a>

• Lien relatif vers un document situé dans un répertoire supérieur au répertoire de la page Internet courante :
  <a href="../Monexemple.html">Atteindre le lien Monexemple.html dans le répertoire supérieur</a>
   
• Lien relatif vers un document situé dans un répertoire supérieur à 2 niveaux au répertoire de la page Internet courante :
  <a href="../../Monexemple.html">Atteindre le lien Monexemple.html dans le répertoire supérieur de niveau 2</a>
   
• Lien relatif vers un document situé dans un répertoire inférieur(Images) au répertoire de la page Internet courante :
  <a href="Images/Monexemple.html">Atteindre le lien Monexemple.html dans le répertoire inférieur Images</a>
   
• Lien relatif vers un document situé dans un répertoire inférieur à 2 niveaux (Images/Site/) au répertoire de la page Internet courante :
  <a href="Images/Site/Monexemple.html">Atteindre le lien Monexemple.html dans le répertoire inférieur à 2 niveaux Images/Site</a>

Liens de messagerie

Généralités

En HTML, la commande mailto: permet d'appeler le logiciel de messagerie de l'internaute depuis une page Web.

Inconvénients
- L'internaute doit utiliser un logiciel de messagerie local à son poste de travail. Les internautes utilisant une messagerie directe via Webmail devront taper ou copier votre adresse e-mail pour vous écrire.
- Personnalisation du message assez limitée.
- Il peut être très embêtant de mettre son adresse mail en "dur" dans sa page Internet, car il y risque de récupération par des "spammeurs".

Syntaxe

<a href="mailto: votre adresse E-mail;autre adresse?subject=Monformulaire &cc=dmc@nomade.fr &bcc=dmc@nomade.fr &body=Bonjour%0D%0AJe me permets de vous ...">Envoyer le message</a>

• mailto permet à l'internaute de vous envoyer un E-mail à partir de la page HTML. On peut étendre la liste d'envoi en utilisant le séparateur ;
• subject permet de remplir l'objet du mail.
• cc permet d'envoyer une copie a une adresse e-mail.
• bcc permet d'envoyer une copie cachée a une adresse e-mail.
• body permet de remplir le contenu du mail. Une nouvelle ligne peut être provoquée avec "les" caractères %0D%0A (OD et OA étant les codes pour retour à la ligne et saut de ligne)

<a> comme balise d'ancrage

Généralités

Dans un document HTML il est possible d'insérer des repères qui vont permettrent lors de l'appel du document Web, non pas de se positionner au début du document mais à partir de ce type de repère (appelé aussi parfois signets). Ce balisage est invisible lors de la consultation du document par un utilisateur.

En effet s'il arrive fréquemment d'avoir à diriger le visiteur vers une partie bien définie de la même page où il se trouve, comme un Post-scriptum par exemple, il est très judicieux de lui permettre de retrouver l'endroit où il se trouvait avant de cliquer sur un lien.

Construction

Cela nécessite donc 2 choses :

• La création de l'ancre elle même : C'est l'utilisation la plus simple de la balise <a>. La seule contrainte en nommant les ancrages, c'est que ce nom doit être unique, même si la casse diffère entre deux noms :

Syntaxe générale : <a name="MonAncre"></a>

• Un complément d'information sur le lien principal qui donne accès au document : la syntaxe générale consiste à rajouter #Nom de l'ancre à la suite du nom du document contenant l'ancre.

La syntaxe générale en lien absolu:
<a href="http://semelin.jany.free.fr/Images/Site/Monexemple.html#MonAncre">Atteindre le lien http://semelin.jany.free.fr/Images/Site/Monexemple.html et se positionner au niveau de l'ancre</a>.

ou relatif

<a href="Images/Site/Monexemple.html#MonAncre">Atteindre le lien Images/Site/Monexemple.html et se positionner au niveau de l'ancre</a>.

et s'il s'agit d'une ancre dans le document courant la syntaxe sera :
<a href="#MonAncre">Accéder à MonAncre dans le document courant</a>

Exemple

La couleur des liens

Des styles particuliers (police de caractères, couleur, soulignement)  peuvent être définis en fonction des actions effectuées sur un lien:

• Présence d'un lien
• Lien déjà cliqué (cliqué)
• Lien en cours d'utilisation
• Lien survolé

La façon de personnaliser ces états sera détaillée dans les fiches feuilles de style.

Balises iframe

Généralités

HTML 4.0 a intégré la technique I-frame ( inline frame)  ou cadre local flottant . Les cadres incorporés ne créent pas de division de l'écran spécifique, mais sont au contraire semblables à des graphiques, des images ou des passages vidéo à l'intérieur d'un fichier HTML, dans lesquels des sources étrangères, avant tout d'autres fichiers HTML peuvent être affichés.

• Un cadre flottant s'insère dans un document HTML comme une image ( dimensionnement et positionnement).
• Il se comporte comme un conteneur permettant d'afficher des pages HTML locales ou distantes.

C'est un élément souple et puissant qui étend les possibilités de présentation.

Attention :

• un frame flottant n'est pas redimensionnable par l'utilisateur.
• Cette balise n'est pas reconnue par le standard strict W3C.

Syntaxe générale

<iframe name = "MonIframe" frameborder = "1" scrolling="auto" marginwidth= "20" marginheight= "20" height= "150" width="150" src="http://www...........">
Désolé mais votre navigateur ne supporte pas les cadres locaux!. 
</iframe>

Notez entre <iframe> et </iframe> la possibilité de rajouter un texte pour le cas de navigateurs ne sachant pas décoder ce type de balise.

Attributs

Exemple

Ci dessous un iframe affichant la page d'accueil du site pascaljazz. Ce qui est extraordinaire c'est que non seulement on affiche la page, mais toutes les  les liens hypertexte sont actifs et cette fenêtre se comporte comme si l'on était  sur le site.

<iframe name = "MonIframe" frameborder = "1" scrolling="yes" marginwidth= "10" marginheight= "10" height= "400" width="600" src="http://monwebfacile.free.fr"></iframe>

Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique mais d'une importance capitale pour la suite du tutorial.

En effet, toutes les autres balises (X)HTML ont un sens : <p> signifie "Paragraphe", <h2> signifie "Sous-titre" etc, mais parfois, on a besoin d'utiliser des balises génériques (ou universelles) car aucune des autres balises ne convient lorsque l'on désire construire son design et soigner le positionnement de certains éléments.

Les attributs et les possibilités de ces deux balises seront étudiées en détail dans la fiche 'Positionnement des éléments HTML'.

Il y a 2 balises génériques : l'une En ligne, l'autre est bloc.

Ces balises ont un intérêt uniquement si vous leur donnez un attribut class, id ou style :

• <class> : indique le nom de la classe CSS à utiliser.
• <id> : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, comme par exemple pour un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en Javascript etc.

Ces 2 attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sur la plupart des autres balises. Cela (on le verra au fur et à mesure de l'apprentissage) facilitera grandement l'application des styles et l'obtention de pages dynamiques par l'utilisation de scripts javascript.

Commentaires conditionnels

Les commentaires conditionnels sont un mécanisme propre uniquement à Internet Explorer.
Les syntaxes de commentaires conditionnels qui ne sont pas valide xHTML comme par exemple les conditions négatives ne seront pas abordées ici.

Pourquoi?

Les navigateurs n'interprètent pas tous de la même manière les codes HTML. Ceci est particulièrement vrai entre Internet Explorer et les autres navigateurs. Il sera donc parfois nécessaire de faire la distinction.

Les commentaires conditionnels permettent de masquer du code HTML à tous les navigateurs autre qu'IE, ou inversement, de masquer un code HTML à IE .

Syntaxe

<!--[if IE]>
..ici, partie de code HTML réservé à IE...
<![endif]-->

Le principe est le suivant :

<!-- ouvre un commentaire HTML: à partir de ce point, le balisage HTML n'est plus interprété comme tel par les navigateurs autres qu'IE Windows, qui considèrent que tout ce qui va suivre est un commentaire HTML comme un autre.

[if IE] va être interprété par IE Windows.
> Le chevron fermant  en l'absence de double tiret --, ne ferme pas le commentaire HTML pour les navigateurs autres qu'IE Windows. Pour ce dernier, en revanche, il indique que ce qui suit devra être interprété en tant que HTML.

<![endif] indique à IE que le contenu conditionnel est terminé en revanche le <!, n'est pas interprété par les autres navigateurs, pour qui nous sommes toujours dans le cadre d'un commentaire.

--> Le double tiret indique aux navigateurs que le chevron qui suit signale la fin du commentaire.

Domaine d'application

Le commentaire conditionnel peut viser une ou plusieurs versions d'IE, selon une syntaxe simple :

[if IE] est la condition générique minimale, signifiant toutes les versions d'IE .

[if IE 5], [if IE 5.5], [if IE 5.5b] L'ajout du numéro de version permet de limiter la portée du commentaire à une version particulière de IE.

[if lt IE version] concerne toutes les versions d'IE inférieures à version.

[if lte IE version] concerne toutes les versions d'IE inférieures ou égales à version.

[if gt IE version] concerne toutes les versions d'IE supérieures à version.

[if gte IE version] concerne toutes les versions d'IE supérieures ou égales à version.

Les commentaires conditionnels s'appliquent à toutes formes de codes HTML comme par exemple ci dessous qui chargera la feuille de style externe "Ma feuilleStyleIE.css" uniquement si le navigateur est IE.

<!--[if IE]>
<link href="Ma feuilleStyleIE.css" rel="stylesheet" type="text/css" />
<![endif]-->

Exemple

<!--[if IE]> <img src="../../Images/Logo_Style.jpg"> <![endif]--> <!--[if !IE]> <--> <img src="../../Images/Logo_JS_Utilitaires.jpg"> <!--> <![endif]-->

Si vous êtes sous IE vous verrez l'image : et l'image pour les autres navigateurs.

Les bonnes habitudes

Lorsque vous voulez mettre un lien hypertexte dans votre page, définissez trés clairement la cible : évitez les liens du genre cliquer " ICI " et utiliser l'attribut title pour décrire le lien.

Application au projet de site web

• Dans votre répertoire Pages créez un nouveau répertoire appelé Site.
• Avec le bloc note créez une nouvelle page HTML contenant un tableau de 4 colonnes et 2 lignes dont chaque cellule contiendra une image du répertoire Images/Bouquets/Reduit. Il s'agit en fait de présenter un tableau avec les 8 bouquets (photos réduites). Ce tableau aura  pour titre "Découvrez nos offres".
• Juste avant le tableau créez un lien hypertexte avec objet cliquable de type texte = 'Retour Accueil'  vers la page index.html. Encadrez avec les balises de paragraphe.
• Insérez :
  • le bon doctype,
  • les balises meta de base,

    <meta name="language"content="fr-FR" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  • la balise  <titre> : La Boutique du Fleuriste : les bouquets
  • Le début de la page HTML

    Bienvenue sur <b>La Boutique du Fleuriste</b>  <img src="../Images/Site/fleur_bouquet.png" width="78" height="89" alt="" />
    <p>La Boutique du Fleuriste vous propose sa gamme de bouquets.</p>

• Enregistrez cette page HTML dans le répertoire Site (récemment créé) sous le nom de Bouquets.htm.
• Appliquez la même méthode que précédemment pour créer la page Fleurs.htm en utilisant les images du répertoire Images/Fleurs/Reduit. Pensez à changer les références bouquets par fleurs.
• Appliquez la même méthode que précédemment pour créer la page Compositions.htm en utilisant les images du répertoire Images/Compositions/Reduit. Pensez à adapter les références.
• Appliquez la même méthode que précédemment pour créer la page Plantes.htm en utilisant les images du répertoire Images/Plantes/Reduit. Pensez à adapter les références.
• Ouvrir la page HTML index.html du répertoire Pages.
• Créer un lien hypertexte sur l'image Images/Bouquets/Bouquet1.png afin d'atteindre la page Bouquets.htm située dans le répertoire site.
• Faites la même chose pour l'image Compo1.png afin d'atteindre la page Compositions.htm.
• Même chose avec Roses1.png relatif à la page Fleurs.htm.
• Même chose avec Plantes1.png relatif à la page Plantes.htm.
• Enregistrez la page HTML index.html.

Attention aux url relatives pour les images des pages Bouquets.htm, Fleurs.htm, Plantes.htm, Compositions.htm ainsi que pour les lien hypertextes à partir de la page index.html .

Retrouvez la solution