Fiche HTML : Balises de liens, iframe, génériques
Objet de la fiche
État de la fiche
Plan de la fiche
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. |
Attributs de la balise de liens (suite)
Attribut |
Exemples Valeurs |
Commentaires |
charset |
jeu de caractères charset ="iso-8859-1" |
Spécifier au navigateur le jeu de caractères qu'il devrait
utiliser pour coder les données du document cible. Devrait,
car encore faut-il que le navigateur reconnaisse le jeu de
caractères que vous indiquez. Le jeu par défaut est ISO-8859-1. |
content-type |
Indique quel est le type (format) du document cible |
content-type="text/html" |
hreflang |
hreflang="code de langue" |
Spécifie au navigateur la langue de base de la ressource
désignée par l'attribut href, c'est à dire la langue de base
utilisée dans le document cible. Ceci implique que hreflang ne
peut être utilisé que si l'attribut href est également
présent. |
rel |
cet attribut établit une relation entre le document source dans lequel se trouve le lien et la cible désignée par href. |
Valeurs possibles pour ces deux attributs :
start : lien vers le premier document d'une succession de documents.
next : lien vers le document suivant.
prev : lien vers le document précédent.
head : lien vers le document de niveau le plus élevé.
contents : lien vers la table des matières. Certains navigateurs reconnaissent le synonyme toc (Table of Contents).
index : lien vers l'index du document utilisé.
glossary : lien vers le glossaire des termes relatifs au document utilisé.
chapter : lien vers le document faisant office de chapitre dans une succession de documents.
section : lien vers le document faisant office de section dans une succession de documents.
subsection : lien vers le document faisant office de sous-section dans une succession de documents.
appendix : lien vers le document faisant office d'appendice dans une succession de documents.
help : lien vers un document d'aide.
bookmark : lien vers un signet. Un signet représente un lien
vers un point d'entrée clé dans un document complémentaire.
Vous pouvez définir plusieurs signets dans chaque document et
utiliser l'attribut title pour les étiqueter. |
rev |
Cet attribut établit une relation entre la cible désignée
par href et le document source
dans lequel se trouve le lien. |
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
Attributs de la balise iframe
Attributs |
Description |
Commentaires |
name |
nom du cadre |
Le nom ne doit pas être trop long et peut contenir ni
espaces ni caractères spéciaux ni caractères accentués; les
chiffres sont ensuite permis. Pour un inter fonctionnement avec
des scripts Javascript n'utilisez que des lettres, des
chiffres et le tiret de soulignement (_). Les majuscules et
minuscules sont différenciées pour des langages comme JavaScript. |
src |
source à afficher dans le cadre |
Très souvent un document HTML, mais peut être aussi une image accessibles en liens absolus ou relatifs |
frameborder |
active/désactive la bordure entre les cadres |
Prend les valeurs 0 ou 1 |
marginwidth |
définit l'espacement horizontal entre les bordures horizontales du cadre et le contenu |
les valeurs correspondent à un nombre de pixels. La valeur par défaut est 10 pixels. |
marginheight |
définit l'espacement vertical entre les bordures
verticales du cadre et le contenu |
les valeurs correspondent à un nombre de pixels. La valeur par défaut est 15 pixels. |
scrolling |
détermine la présence d'une barre de défilement (auto, yes, no). |
Si auto, la ou les barres de défilement apparaîtrons si les dimensions de l'objet source + la valeur des
'margin' sont supérieures aux dimensions du cadre lui même. |
height |
hauteur du cadre |
les valeurs correspondent à un nombre de pixels ou en % |
width |
largeur du cadre |
les valeurs correspondent à un nombre de pixels ou en % |
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.
Les balises génériques
Balise |
Type |
Description |
<span> |
En ligne |
Balise générique de type en ligne (ne génère pas un saut de ligne) |
<div> |
Bloc |
Balise générique de type bloc (génère automatiquement un saut de ligne) |
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
Correction
Voici le résultat et le code
|