Fiche HTML : Balises entête, texte, image, image-map

Objet de la fiche

État de la fiche

Plan de la fiche

| Avant propos |
| Doctype |
| Balises de premier niveau |
| Balises d'entête |
| Balises de structuration de texte |
| Balise image |
| Balise image Map |
| Bonnes habitudes |
| Application au projet de site Web |

Avant propos

Nous allons ici découvrir l'utilisation détaillée des balises les plus usitées ainsi que leurs attributs directs (lorsqu'ils existent). Le but n'est pas de retenir absolument les balises qui sont présentées ici, mais de savoir qu'elles existent, et de voir comment on peut les utiliser. Tout au long de l'avancement de notre projet de développement d'un site Web nous aurons à les utiliser et leur manipulations deviendra au fur et à mesure de plus en plus familière.

Nous verrons au fur et à mesure des fiches les balise de :

Premier niveau
Entête
Structuration de texte
Images
Listes
Tableaux
Formulaires
Liens
Cadres flottants
Génériques

DOCTYPE

Généralité

Il n'est pas question de faire ici la liste exhaustive de tous les doctype existants mais de savoir à quoi correspond cette déclaration.

Dans les normes du HTML et du (X)HTML, le DOCTYPE ou DTD pour "Document Type Declaration", informe le navigateur de la version de (X)HTML que vous avez utilisez pour la construction de votre page HTML. C'est en quelque sorte les règles de grammaire que le navigateur va utiliser pour charger et présenter votre page Web. Si l'emploi de certaines balises ou attributs ne sont pas conformes aux règles spécifiées par la DTD quelques désagréments d'affichage peuvent subvenir.

En fait il s'agit d'une ligne de déclaration , qui précise dans quel type de HTML la page a été écrite : (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...). Cette déclaration doit apparaître obligatoirement en première position dans chaque page HTML et concerne l'ensemble du document .

Syntaxe

<!DOCTYPE html PUBLIC "type_de_HTML" "adresse_de_DTD">

Maintenant depuis la norme HTML5 le doctype est beaucoup plus simple et se limite à la syntaxe suivante :<!DOCTYPE html> ((insensible à la casse) )

Le choix qui a été fait pour l'ensemble des exemples de ce tutorial ainsi que pour les pages de ce site est basé sur le Doctype HTML5 qui est fortement recommandée lors de la conception de nouvelles pages Web ou balisage et présentation sont séparés. Ceci vous assure après test valide de posséder une page HTML conforme W3C et vous garanti un 'maximum'! de compatibilité entre navigateurs.

Intérêt d'une DTD

L'intérêt d'une DTD est de présenter sa page HTML à un validateur (W3C ). En principe, lors de la conception de votre page vous avez utiliser une syntaxe de balisage en accord avec votre DTD mais vous avez peut être commis certaines erreurs (imbrication de balises, utilisation de balises non autorisées...), ou quelques oublis (une balise fermante..) ou encore des erreurs de syntaxe. En adressant votre page à l'adresse ci-dessous (dans laquelle vous aurez pris soin de renseigner uri avec l'adresse complète de votre page) vous obtiendrais le résultat de la conformité au W3C.

http://validator.w3.org/check?uri=http://votre site/la page à valider

Cela ne concerne pas dans l'immédiat notre projet de site web car la page en cours de construction est encore résidante sur le PC et n'est pas encore transférée vers un hébergeur.

Cependant vous pouvez avoir une petite idée du résultat concernant cette page de ce site ici

Balises de premier niveau

Les balises de premier niveau sont les balises minimales et indispensables qui structurent une page (X)HTML.

Tableau des balises de premier niveau
Balises	Commentaires
<html>...</html>	Ouvre et ferme la page	Cette balise doit posséder l'attribut lang pour indiquer la langue principale de la page.
<html>...</html>	Le choix qui a été fait pour l'ensemble des exemples de ce tutorial ainsi que pour les pages de ce site est basé sur le contenu suivant de la balise HTML : <html lang="fr">
<head>...</head>	Ouvre et ferme l'entête de page
<body>...</body>	Ouvre et ferme le corps de la page

Balises d'en-tête

Ces balises sont situées dans l'en-tête de la page Internet, c'est-à-dire entre <head> et </head> sauf pour les balises de script qui peuvent se trouver dans l'entête ou dans le corps du document. La plus part d'entres elles sont données ici à titre indicatif et nous nous y intéresserons plus en détails lorsque le moment sera venu de publier le projet de site sur le serveur. Pour une compatibilité (X)HTML, les noms et paramètres des balises doivent être en minuscules et la balise doit être terminée par /> car ce type de balise n'a pas son équivalent en fermeture.

Exemple <meta name="description"content="Home Site Martine et Jany" />. Les contenus liés à ces balises (ici description et Home Site Martine et Jany), constituant les valeurs des champs name et content de la balise meta, sont des contenus de type texte et totalement libres de style (majuscules ou minuscules).

La balise titre

Cette balise titre joue un rôle très important dans le référencement des sites Web. L' information qu'elle contient est utilisée à la fois par les navigateurs et par les moteurs de recherche et c'est, dans bien des cas, ce texte qui représente votre page ou votre site. Soignez-le !

C'est une balise obligatoire qui doit normalement avoir un titre différent pour chacune des pages d'un site.

Syntaxe : <title>Mon Web Facile</title> avec un texte de 100 caractères max

Il est vivement conseiller d'utiliser les caractères spéciaux HTML dans tous les cas de lettres accentuées ou caractères particuliers. Voir le tableau de correspondance.

Les balises meta name

Les "meta name" font partie du code de vos pages. La plupart de ces balises sont inutiles pour le référencement, mais certaines d'entre elles sont quasi indispensables. Le tableau ci-dessous vous donne une vision complète des principales balises existantes, de leurs rôles, de leurs syntaxes et de leurs utilités.

Les utilités seront repérées dans la colonne "Utilité" suivant les codes :

C pour Conseillé.
I pour Inutile.
N pour non indispensable.
S pour Spécifique et nécessaire dans des cas particuliers.

Il est vivement conseiller d'utiliser les caractères spéciaux HTML dans tous les cas de lettres accentuées ou caractères particuliers. Voir le tableau de correspondance.

Tableau des balises méta name
Balises meta name	Descriptions	Utilité
<meta name= "description" content= "Home Site Martine et Jany" />	Description du site ou de la page (200 caractères maximum. Les mots clé sont séparés par des virgules. Chaque page du site doit avoir une description indépendante.	C
<meta name= "keywords" content= "martine, jany, html, balises, chansons, recettes " xml:lang= "fr-FR" />	Information sur les mots clefs du site destinée aux moteurs de recherche (1000 caractères maximum).	C
<meta name= "author" lang="fr" content="JS" />	Auteur du site et langue de l'auteur	N
<meta name= "copyright" content= "Martine et Jany Prod 2006" />	Copyright du site	N
<meta name= "language" content= "fr-FR" />	Langage du site	C
<meta name= "Distribution" CONTENT= "global" />	Définie la destination (publique) des documents présentés dans la page. Utilisée par de très rares annuaires. Valeurs possibles : global, local, iu (intranet)	N
<meta name= "robots" content= "index, nofollow" />	Information pour préciser si on souhaite que la page soit indexée par les moteurs de recherche, et si on souhaite que les liens qu'elle contient soient analysés. Les valeurs de "content" sont des combinaisons de "index" ou "noindex" avec "follow" ou "nofollow", avec deux raccourcis:: "all" et "none" : La valeur peut donc être "all", synonyme de "index,follow" pour une indexation complète, "noindex,follow" pour ne pas être indexé mais analyser les liens que la page contient, "index,nofollow" pour être indexé mais ne pas analyser les liens, et enfin "none", synonyme de "noindex,nofollow" pour aucune indexation ni suivi de liens	I
<meta name= "revisit-after" content= "30 days" />	Cycles de visite des robots	I
<meta name="reply-to" content= "semelin.jany@hotmail.fr" />	Adresse mail du webmaster. Attention aux spammers qui risque de la récupérer et vous recevrez un grand nombre de spams à cette adresse.	N
<meta name= "identifier-url" content= "http://semelin.jany.free.fr/" />	Adresse (url) du site.	N
<meta name= "subject" content= "Site personnel" />	Sujet du site	C

Tableau des balises méta name suite
Balises meta name	Descriptions	Utilité
<meta name= "expires" content= "never" />		i
<meta name= "publisher" content= "JS" />	Nom de celui qui publie le site	C
<meta name= "location" content= "France, FRANCE" />	Pays de localisation de votre site	I
<meta name= "classification" content= "general" />	Indique au robots par qui est visible le site	C
<meta name= "rating" content= "general" />	Type de contenu du site. "General" --> Tout public "Mature" --> Public averti, adulte "Restricted" --> Accès privé	C
<meta name= "category" content= "Tutoriaux, Création de site" />	Catégorie du site pour les annuaires	N
<meta name="date-création-ddmmyyyy"content= "01042006" />	Date de création	C
<meta name="date-revision-ddmmyyyy"content="15052006" />	Dernière révision	C
<meta name="generator"content= "Microsoft FrontPage 5.0" />	Nom de l'éditeur utilisé pour la conception de votre page HTML	I
<meta name="progId" content= "FrontPage.Editor.Document" />	Éditeur du site	I
<meta name="verify-v1" content="VHFqBLwEV4Iq78uY AsxAiQ9hlUpaQ/qgvWlGFloYY1E=" />	Enregistrement Google	S
<meta name= "GOOGLEBOT" content= "NOARCHIVE" />	Autorisation de mise en cache spécifique à Google. La valeur "noarchive" interdit à Google de stocker la page en cache.	S

Les balises meta http-equiv

Ces balises sont liées au comportement de la page Internet elle même et non pas liées aux comportements des Robots comme les balises meta name décrites ci-dessus. Les serveurs HTTP peuvent utiliser les informations contenues dans les balises meta http-equiv pour construire l'entête de réponse du protocole HTTP.

Tableau des balises meta http-equiv
Balises meta http-equiv	Descriptions	Utilité
<meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1" />	Table de caractères. Indique le codage utilisé à l'intérieur de vos documents	C
<meta http-equiv= "Content-Style-Type" content= "text/css" />	Les auteurs doivent spécifier le langage de style par défaut associé au document HTML.	C
<meta http-equiv= "Content-Script-Type" content= "text/javascript" />	Les auteurs doivent spécifier le langage de script par défaut associé au document HTML. Quelques exemples de valeurs de content : "text/javascript" pour les scripts javascript reconnus par tous les navigateurs. "text/vbscript" pour les scripts VB (Visual Basic) uniquement reconnus par le navigateur Internet Explorer.	C
<meta http-equiv= "pragma" content= "no-cache" />	Précise au navigateur de ne pas enregistrer la pages dans vos fichiers temporaires (Il n'est pas certain que cela fonctionne sous IE)	I
<meta http-equiv= "refresh"content= "xx; url=http://www.monnouveausite.com" />	Redirection éventuelle de votre site. X indique le nombre de secondes avant la redirection et URL indique la nouvelle adresse de votre site.	S

Les balises link rel

La balise (X)HTML LINK permet de spécifier les relations entre les pages du site et aussi de lier un feuille de style (css) au document. Cette balise ne peut être mise que dans la balise HTML <HEAD></HEAD> du document HTML.

<link rel="......." ou rev="....." type="........" media="....." charset="iso-8859-1" hreflang="fr"> href="........" />

La balise <link> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.
L'attribut rel="........" ou rev="......" permet de spécifier la relation entre la page spécifié par l'attribut HREF et la page où on a mis la balise (X)HTML link. Exemple rel="stylesheet" précise que le document qui doit être chargé est un document 'feuille de style' externe à la page HTML. rev=page->lien et rel=lien->page.
Dans le cas, d'une feuille de style cet attribut n'est pas à mettre.
L'attribut type="text/css" précise le type de feuille de style.
L'attribut media permet de spécifier le support pour lequel est destiné la feuille de feuille de style. Exemple "braille" destiné aux appareils Braille ou all qui convient pour tous les supports et qui est la valeur par défaut si l'attribut MEDIA n'est pas spécifié. Ne pas utiliser l'attribut média avec type ="text/css".
L'attribut charset permet de spécifier l'encodage de caractères de la ressource désignée par le lien.
L'attribut hreflang permet de spécifier la langue utilisée dans le document de destination.
L'attribut href=" URL " donne l'URL de la feuille de style, c'est-à-dire son emplacement sur Internet.

Tableau des balises link rel
Balises link	Descriptions	Utilité
<link rel= "shortcut icon" type= "image/x-icon" href= "favicon.ico" />	Icône du site	C
<link rel= "apple-touch-icon" href= "apple-touch-icon.png" />	Icône WebClip pour iPhone/iPod ^*1	C
<link rel= "start" title="Accueil" href= "index.html" />	Page d'accueil du site	C
<link rel= "stylesheet" type= "text/css" href= "../../JVS/Commun/CSS_Commun.css" />	Feuille de style externe	S
<link rel= "help" title= "Politique d'accessibilité" href= "accessibilite.html" />	Page d'aide du site	S
<link rel= "alternate" type= "application/rss+xml" title= "News de mon site" href="news.xml" />	Fil RSS du site	S

^*1 L’iPhone donne la possibilité à l’usager d’ajouter des raccourcis vers des site web.
Lors de l'ajout du raccourci l’iPhone crée une icône qui va fera référence à ce raccourci lorsque l'on cliquera dessus.
En tant de créateur de site web vous pouvez vouloir personnaliser cette icône pour qu’elle corresponde au mieux à l’image de votre site.

Du point de vue graphisme il faut penser cette icône comme une "super" favicon.
Du point de vue personnalisation il vous suffit de créer une icône png de 129/129px. Les écrans actuels possèdent une résolution de 300dpi et l’intérêt d’avoir une icône en 129x129px (qui sera automatiquement redimensionnée à 57x57 px à l'affichage sur l’iPhone), est que la touch icon de votre site apparaisse bien sur ces écrans nouvelles générations sans pixélisation excessive.
Du point de vue installation il suffit de l’appeler “apple-touch-icon.png” et de l’installer dans le dossier racine de votre site web. Safari va automatiquement la chercher, et en principe vous n’avez pas besoin de faire un appel particulier dans l’entête "head" de votre site. Toutefois pour les applications ne recherchant pas directement cette information il est prudent d’inscrire aussi la directive <link rel= "apple-touch-icon" href= "apple-touch-icon.png" /> dans l’entête "head".

Les balises script type

L'élément SCRIPT introduit un script dans un document. Cet élément peut apparaître autant de fois que nécessaire dans une section HEAD ou BODY d'un document HTML.

Un script client est un programme qui est inséré dans un document HTML. Le programme s'exécute sur la machine de l'internaute au moment où le document se charge, ou à d'autres moments particuliers, par exemple lorsqu'un lien est activé ou un bouton cliqué. Le support des scripts par HTML est indépendant du langage utilisé pour l'écriture de ces derniers.

Dans le cas d'une déclaration de script interne le code du script est écrit comme le contenu de cet élément SCRIPT. Dans le cas de la déclaration de script externe l'attribut src donne l'URL du fichier externe contenant le code du script. Ces balises seront très utilisées lorsque nous aborderons la partie fonctionnement dynamique d'un site internet.

Tableau des balises script type
Balises script	Descriptions	Utilité
<script type="text/javascript">Votre script ici </script>	Script javascript interne	S
<script type="text/javascript" src="votre fichier externe" </script>	Script javascript avec fichier externe	S

Les balises style type

Cette balise permet d'appliquer une mise en forme à un document (X)HTML au moyen de règles de style internes. L'attribut (X)HTML type de la balise style, permet de spécifier le type MINE qui précise le langage utilisé. Pour les feuilles de style le type MIME est "text/css".

Tableau des balises style type
Balises style	Descriptions	Utilité
<style type="text/css"> Votre code CSS ici </style>	Feuilles de style interne	S

Récapitulatif

Vue des balises entête utilisées sur la page d'accueil de ce site

Balises de structuration du texte (style)

Les balises barrées semblent bien pratiques toutefois elles sont a éviter telles quelles si l'on désire être conforme aux recommandations du W3C (XHTML strict). On verra dans la section suivante comment structurer du texte en utilisant les feuilles de style.

Tableau des balises de structuration du texte
Balises	Types	Descriptions	Syntaxes
<p>..</p>	Bloc	Paragraphe. Cette balise introduit un saut de ligne.	1 : <p> Texte du paragraphe </p>
<br />	Ligne	Retour à la ligne	2 : <p> Texte du <br /> paragraphe </p>
<nobr>..</nobr>	Ligne	Permet d'empêcher le retour automatique à la ligne réalisé par le navigateur pour le bloc de texte encadré
~~<i>..</i>~~	Ligne	Met le texte en italique	4 : blabla... <i>Texte italique </i> ...blabla
~~<b>..</b>~~	Ligne	Met le texte en gras	5 : blabla... <b>Texte gras </b> ...blabla
~~<u>..</u>~~	Ligne	Souligne le texte	6 : blabla... <u>Texte souligné</u>. ..blabla
<h1>..</h1> à <h6>..</h6>	Bloc	Titre de niveau 1 à 6. Ces balises introduisent un saut de ligne.	8 : <h2>Titre de niveau 2 </h2>
~~<font>..</font>~~	Bloc	Permet de spécifier la police, la taille, la couleur des caractères alphanumériques compris entre les balises <font> ... et </font>.
<em>	Ligne	Mise en valeur (faible) Le texte est généralement mis en italique.	9 : blabla...<em> Texte en valeur faible </em> ...blabla
<strong>..</strong>	Ligne	Mise en valeur (forte) Le texte est généralement mis en gras.	10 : blabla... <strong> Texte en valeur forte </strong> ...blabla
<sub>..</sub>	Ligne	Mise en indice	11 : blabla...lkjfdsldsjlds <sub> 5 </sub> ...blabla
<sup>..</sup>	Ligne	Mise en exposant	12 : blabla...lkjfdsldsjlds <sup> 9 </sup> ...blabla
<cite>..</cite>	Ligne	Citation (moyenne)	13 : blabla... <cite> lkjfdsldsjlds </cite> ...blabla
<blockquote> </blockquote>	Bloc	Mise en retrait Mettre obligatoirement une balise de paragraphe à l'intérieur du blockquote.	14 : blabla... <blockquote> Texte en retrait </blockquote> ...blabla
<q>..</q>	Ligne	Affiche de courtes citations et les met entre guillemet. Ne fonctionne pas avec tous les navigateurs.	14b : blabla...<q>Je vous ai compris</q>...blabla

Tableau des balises de structuration du texte (suite)

Balises

Types

Descriptions

Syntaxes

<acronym>
</acronym>

et

<abbr>..<abbr>

Ligne

Servent à définir des acronymes, comme A.N.P.E..

ou des abréviations.

Attributs	Commentaires
title	Donne la signification de l'abréviation quand on pointe dessus avec la souris
lang	Langue de l'abréviation pour format HTML
xml:lang	Langue de l'abréviation pour format XHTML
dir	Indique le sens de lecture et peut prendre comme valeur LTR (gauche -> droite) ou RTL (droite -> gauche).

15 : blabla... <acronym title= "Agence nationale pour l'emploi" lang="fr" xml:lang= "fr-FR" dir ="ltr"> A.N.P.E. </acronym> ...blabla
blabla...

<abbr title= "HyperText Markup Language" lang="fr" xml:lang= "fr-FR" dir ="ltr"> HTML </abbr> ...blabla

<hr />

Bloc

Crée une ligne de séparation horizontale. Cette balise introduit un saut de ligne.

16 : <hr />

Ligne

Permet d'indiquer un texte qui a été supprimé.
Le texte est généralement barré.

17 : blabla... <del> ssfsf sfsf hythtyhh </del> ...blabla

Ligne

Permet d'indiquer un texte qui a été inséré.
Le texte est généralement souligné.

18 : blabla... <ins> ssfsf sfsf hythtyhh </ins> ...blabla

h<pre>..</pre>h

Bloc

Le texte à l'intérieur de la balise <pre> sera affiché tel qu'il a été tapé dans le code (espaces et retour à la ligne compris). Une police de taille fixe est utilisée.

19 : blabla... <pre> ssfsf sfsf hythtyhh scdssdccsdcc vvvxwcvcv </pre> ...blabla

Exemple avec l'ensemble des balises de structuration de texte décrites ci-dessus.

Balises images

Des images sur un site Web peuvent le rendre plus attractif et plus convivial, mais attention à ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité.

La balise img du langage HTML permet d'insérer des images dans une page HTML. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée ou sur un autre serveur en spécifiant son URL complète.

Rappel sur les formats d'images reconnus par le W3CTrois formats d'image sont majoritairement utilisés sur l'Internet :

le format GIF pour des images en basse résolution couleur( 256 + une couleur transparente).
le format JPEG pour les des images contenant beaucoup de couleur (photo par exemple). Ce format ne gère pas la transparence.
le format PNG, concurrent du gif il peut contenir plus de couleurs que le gif. Donne des images légères à télécharger, avec une très bonne résolution de couleur. Gère la transparence.

Si l'on n'a pas besoin d'utiliser la transparence de certaines couleurs il est préférable (pour des raisons de taille fichier) d'utiliser JPEG. Dans tous les autres cas utilisez le format PNG.

Image non transparente sur fond gris	Image transparente sur fond gris

Syntaxe générale

La balise <img> (balise de type En Ligne) possède des attributs pour définir l'image et peut réagir à divers évènements comme des déplacements de souris sur l'image elle même, des clicks ou double click, des actions sur les touches clavier. La partie évènements sera abordée plus tard.

La syntaxe générale est la suivante : <img attribut="at1" attribut="at2" ........ / > avec comme attributs principaux: src, title, alt, width, height : <img src="emplacement image" alt="..." title="...." width="30" height="50" />

Attributs

Tableau des attributs de la balise image
Attributs	Commentaires
src	Attribut obligatoire pour conformité au w3c. Emplacement relatif (exp ../Image/toto.gif) ou absolu (exp http://www.se....) de l'image.
alt	Attribut obligatoire. Cet attribut spécifie un texte de remplacement pour les navigateurs qui sont incapables d'afficher l' images pour diverses raisons (l'image n'a pas été chargée ou n'existe plus sur le serveur etc). Si on ne veut pas donner de texte mettre alt="" mais il est préférable de mettre un texte.
title	Les navigateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » (bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les navigateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux navigateurs (visuels ou non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée.
width	Largeur de l'image en pixel ou %
height	Hauteur de l'image en pixel ou %
usemap	ll est possible de créer des zones cliquables à l'intérieur même d'une image grâce à l'attribut utilisé conjointement avec la balise MAP. L'attribut usemap de la balise <img> pointe vers une balise <map> contenant la description du découpage de l'image en zones cliquables.
id	identificateur unique de balise utilisé pour associer des feuilles de style mais le plus souvent associé à des script que l'on verra plus précisément dans les fiches javascript.
class	identificateur de classe CSS pour associer des feuilles de style que l'on verra plus précisément dans les fiches feuilles de style.

Dans les réglementation du W3C (organisme normalisateur) pour être valide XHTML certains attributs ne sont plus autorisés dans la balise <img> et doivent être reportés dans les feuilles de style. Cela concerne obligatoirement les attributs border (pour définir la bordure) et align (positionnement par rapport au texte environnant).

Compléments d'information sur les attributs

src : Attribut qui permet de spécifier le chemin d'accès à l'image (url complète ou relative).

Exemple 1 : <img src="Bouquet3.png"> si l'image Bouquet3.png se trouve au même niveau que votre page.
Exemple 2: <img src="RepertoireImg/Bouquet3.png"> si l'image Bouquet3.png se trouve à un niveau inférieur à votre page.
Exemple 3: <img src="../Bouquet3.png"> si l'image Bouquet3.png se trouve à un niveau supérieur à votre page.
Exemple 4 : <img src="../../Bouquet3.png"> si l'image Bouquet3.png se trouve à 2 niveaux supérieur à votre page.
Exemple 5 : <img src="../AutreRepertoire/Bouquet3.png"> si l'image Bouquet3.png se trouve dans le répertoire "AutreRepertoire" situé lui même à 1 niveau supérieur à votre page.
Exemple 6 : <img src="http://semelin.jany.free.fr/RepertoireImages/Bouquet3.png"> si l'image Bouquet3.png se trouve sur un site internet quelconque (ici http://semelin.jany.free.fr) dans un répertoire quelconque (ici "RepertoireImages"). Dans ce cas il n'y a plus de référence à l'emplacement de votre page.

title: Titre de l'élément : Principalement visible lorsque le curseur survole l'image

alt : Texte dit "de rechange"

On déclare un texte dit "de rechange" avec l'attribut alt et cela permet si le visiteur désactive le chargement des images, ou si pour une raison quelconque l'image ne se charge pas il pourra quand même deviner le sens de l'image grâce à ce texte de remplacement. La présence de ce texte permet une meilleure accessibilité aux personnes malvoyantes équipées d'écran braille.

Nota : Certains développeurs utilisent cet attribut pour fournir une légende à l' image lorsque le pointeur de la souris passe au-dessus. Ce n'est pas la bonne méthode, l'attribut title est fait pour cela.

<img title="Coucou je suis le titre" src="Images/Bouquet3.png" alt ="Je suis le texte de remplacement" >

width et height : Largeur et hauteur de l'image en pixel ou %.

si on utilise les valeurs de largeur et hauteur de l'image de base on obtient un affichage normal au format réel de l'image.
<img title="Coucou je suis le titre" src="Images/Bouquet3.png" width ="120" height = "120"alt="Je suis le texte de remplacement">

si on utilise uniquement une des 2 valeurs le navigateur calcule l'autre automatiquement en respectant la proportionnalité : exemple width =60 et height non défini :

<img title="Coucou je suis le titre" src="Images/Bouquet3.png" width ="60" alt="Je suis le texte de remplacement">

Nota :Très pratique pour faire des réductions. Dans le cas ou la valeur est supérieure à la valeur de base l'image est agrandie, conserve la proportionnalité mais perd en résolution.

si on modifie les 2 valeurs ou une seule par rapport aux dimensions de base le navigateur va afficher l'image en appliquant ces nouvelles valeurs : exemple width =180 (au lieu de 120) et height 90 (au lieu de 60) :

<img title="Coucou je suis le titre" src="Images/Bouquet3.png" width ="180" height = "90" alt="Je suis le texte de remplacement">

Exemple

Image-map

La balise map est utilisée pour définir différentes régions cliquables sur une image donnée. Les éléments map et img sont liés par l'attribut name="MonImage" pour la balise map et par l'attribut usemap="#MonImage" pour la balise img.

Chaque zone cliquable d'une image sera définie par la balise area qui détermine la taille et la forme de chacune des zones.

Syntaxe générale

Attributs

Tableau des attributs image map
Attributs	Exemples	Commentaires
name	<map name="MonsystemMap">........</map>	Nom préalablement dans l'attribut usemap

Tableau des attributs area
Attributs	Exemples	Commentaires
name	<map name="MonsystemMap">........</map>	Nom préalablement dans l'attribut usemap
title	title="mon titre"	Information affichée lors du survol de la zone
shape	rect : shape="rect" circle : shape="circle" poly : shape="poly"	Rectangle : ses coordonnées sont: "abscisse sup gauche, ordonnée sup gauche, abscisse inf droit, ordonnée inf droit". Cercle : ses coordonnées sont: "abscisse centre, ordonnée centre, rayon"). Polygone : Suite des coordonnées en pixels par rapport au bord haut gauche de l'image, séparées par des virgules.
href	href= "URL......"	Lien vers l'URL
nohref	<area nohref shape="rect" coords="55,..">	Si on ne veut pas déclarer une URL

Tableau des attributs image map (suite)
Attributs	Exemples	Commentaires
coords	= "X1, Y1, X2, Y2, , , Xn,Yn"	Contient les coordonnées de la zone cliquable, séparées par des virgules. x1, y1, x2, y2, ..., xN, yN. définissent un polygone fermé. Si vous définissez un polygone ouvert, le navigateur le fermera automatiquement en faisant la liaison entre le premier et le dernier point.
alt	alt="commentaire"	Obligatoire. Si on ne veut pas donner de texte mettre alt=""

Exemple

L'exemple ci dessous montre une image gif (Corse.gif) qui a été fractionnée par la méthode <area> . Lorsque l'on survole l'une ou l'autre des deux parties de l'île un petit texte donnant le nom du département et la région apparaît prés de la souris (c'est le texte contenu dans le l'attribut title). Pour des raisons de facilités les liens hypertexte associés on été initialisés à # (le lien existe mais ne fait rien) mais il est très facile de mettre l'url d'accès à une autre page Internet.

Les bonnes habitudes

Utiliser le bon doctype pour votre page
Utiliser autant que possible les caractères spéciaux HTML dans tous les cas de lettres accentuées ou caractères particuliers.
N'utilisez pas de balises de structuration de texte dépréciées par le W3C (font, u, i etc)
Utiliser de préférence des image jpeg, et dans les cas de transparence utiliser les images png
Dans les balises image et image map définir systématiquement les attributs alt et title pour des raisons d'accessibilité.

Application au projet de site web

Ouvrez le bloc note,
Ouvrez la page index.html
Insérez le doctype recommandé par HTML5.
Modifier le contenu de la balise HTML d'ouverture de la page :
Insérer la balise de titre avec le contenu suivant : "La Boutique du Fleuriste".
Insérer les balises méta minimum :
- meta http-equiv pour la table de caractères UTF-8.
- meta name pour la description du site : "Fleuriste en ligne. Bouquets, Compositions, Fleurs et Plantes"
- meta name keywords : "Fleur, fleur, Bouquet, bouquet, Composition, composition, Fleur, fleur, Plante, plante, boutique, Roses, roses, rose, envoyer fleur, envoi fleurs, livrer, livraison, Fleuriste, fleuriste, fleuristes, composition florale , décoration, art floral, cadeau".
- meta name auteur : "Moi"
- meta catégory : "Fleuriste"
Insérer les images suivantes :
- Dans le titre et après le texte "Bienvenue .......du Fleuriste" positionnez l' image "fleur_bouquet.png" du répertoire Photos/Site.
- Dans le corps du document insérer les images suivantes :
  - "Roses1.png" du répertoire Photos/Images, sous répertoire Fleurs
  - "Bouquet1.png" du répertoire Photos/Images, sous répertoire Bouquets
  - "Compo1.png" du répertoire Photos/Images, sous répertoire Compositions
  - "Plantes1.png" du répertoire Photos/Images, sous répertoire Plantes
Sauvegarder la page dans le répertoire Projet_MonWebFacile/Pages.
Pensez aux attributs d'accessibilité title et alt.

Retrouvez la solution

Correction

Voici le résultat et le code

Remarques sur les liens relatifs de la source des images

Rappelez vous que la page qui va contenir les images se trouve dans le répertoire Pages et que Bouquets1.png se trouve dans un répertoire appelé Bouquets lui-même sous répertoire du répertoire Images qui est lui-même sous répertoire Photos :

La position de la page Web faisant référence, pour accéder à nos images il faut remonter d'un cran (../) puis descendre jusqu'à l'emplacement des images (Photos/Images/Bouquets/Bouquet1.png).
La syntaxe complète est donc la suivante : src="../Photos/Images/Bouquets/Bouquet1.png"