Les bases de HTML [zonewebmaster.eu]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Les bases de HTML ======

===== Introduction =====

==== Qu'est ce que le HTML ? ====

Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans les navigateurs (ex : Chrome, Firefox, Internet Explorer, …). L'ensemble de ses pages web constitueront votre site.


==== Qu'est ce qu'une balise HTML ? ====

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.\\
\\
> // Exemple de balise : %%<html>%% //
\\ 
Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme **nomattribut="valeur"**.\\
\\
> Exemple de balise avec attribut : %%<html lang="fr">%%
//ici la balise est html avec un attribut lang ayant pour valeur fr.//\\
\\
Chaque balise doit être fermée de cette façon %%</html>%%, mais il existe des exceptions, les balises simples.\\
\\
==== Les balises simples ====

Ce sont des balises qui sont dites « vides », c'est à dire qu'elles ne vont pas contenir d'autre balise. \\
\\
> Exemple : <img src="/url/de/image" />

Quelques balises courtes :\\
**<br />, <hr />, <img />, <input />, <meta />, <link />, <base /> ** \\
\\

==== Les balises imbriquées ====

Il est possible d'imbriquer des balises HTML, par contre il est très important de respecter la hiérarchie. C'est à dire que la première balise ouverte soit la dernière fermée.\\
\\
> Exemple : <p><strong>Ceci est en gras</strong> et ceci est normal</p>
\\
==== Structure d'un document HTML ====

Avant de commencer le développement d'une page, il est important d'en connaître la structure.\\
Voici le modèle de base possédant la structure minimale obligatoire.\\
<code html>
<!DOCTYPE html>
<html>
<head>
	<title>Titre de la page</title>
	<meta http-equiv="content-type" content="text/html ; charset=utf-8" />
</head>
<body>

< !-- Ici votre site - - >
  
</body>
</html>
</code>
La première ligne de cet exemple s'appelle le **DOCTYPE**. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de **DOCTYPE** pour les documents HTML5.\\
\\
Ensuite vient la balise %%<html>%%. Elle encadre l'ensemble des autres balises. \\
La balise %%<html>%% contient deux grandes balises :\\
	<head> qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours.
	<body> qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur.

<WRAP center round important 60%>
Petite précision importante, les balises %%<html>,<body> et <head>%% sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises %%<body>%%, vous aurez des surprises à l'affichage.
</WRAP>

==== Le DOCTYPE en détail ====

Le DOCTYPE sert à déclarer quelle norme s'applique à notre page.\\
Il indique aux navigateurs de quelle manière interpréter telle balise ou telle propriété CSS. En cas d'absence de DOCTYPE ou simplement en cas d'erreur de frappe, le navigateur passera en mode « Quirk » (ou en français non conforme). \\
En mode Quirk le navigateur est seul maître à bord est fait ce qu'il veut, cela impactera l'affichage de votre page. L'image ci-contre montre quelques  différences entre le mode « QUIRK » de Internet Explorer et le mode « normal ».Le DOCTYPE se choisi en fonction de vos besoins. La liste des principaux DOCTYPE est disponible sur [[tutoriel-html:doctype-html|cette page]].\\
{{ :tutoriel-html:quirks-mode.gif?direct|}}

==== Les commentaires ====

Les commentaires permettent de laisser des informations ou des descriptions et sont utilisables à n'importe quel endroit de votre document. Ces commentaires ne seront pas affichés à l'écran mais seront présent dans le code source de votre page. Il est donc important de ne pas y mettre des informations confidentielles.\\
\\
> Ils sont délimités par < !-- et --> et peuvent être multi-lignes.
\\
Par soucis de compatibilités entre les navigateurs, il est fortement conseillé de se limité à 2 traits d'unions\\
\\
Exemples :
<code html>
<!-- Voici un premier commentaire sur une ligne. -->
 
<!-- Voici un deuxième commentaire.
     Celui-ci est multilignes. -->
 
<!------------------ Cette méthode est déconseillée ! ----------------->
</code>

===== Le <head> en détails. =====

==== La balise <title> ====

Cette balise permet d'indiquer le nom de votre page. C'est une des balises les plus importantes de votre document. C'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche.\\
\\
Exemple :
<code html>
<title>Cours HTML – Les bases</title>
</code>
<WRAP center round tip 60%>
Conseils SEO :
Chacune de vos pages de votre site devront posséder un titre unique, toujours en rapport avec le contenu de la page et contenant les mots clés importants présents dans votre contenu.
</WRAP>

==== Les balises META ====

=== A quoi servent-elles ? ===

Les balises META sont obligatoirement placées au niveau de la balise <head>. Elles permettent d'apporter aux navigateurs (et aux moteurs de recherche, même si cela à un impact minime) des informations sur la page en cours d'affichage comme son auteur, la date de création, son jeu de caractères (encodage), etc.\\
Il y a deux grandes familles de balises META :
  * les META name qui apportent des informations simple (auteur, outils utilisés, etc.)
  * les META http-equiv qui communiquent directement avec le navigateur et qui peuvent influencer celui-ci.
\\
<WRAP center round tip 60%>
Conseils SEO :
Depuis quelques années, //GoogleBot// (Robot indexant les pages web pour Google) prend de moins en moins en compte le contenu des balises META. Un grand nombre de celles-ci sont donc désuètes. //GoogleBot// se focalise, notamment pour les pages en //HTML5//, sur les micro-données. Mais, et oui il y a un mais, //GoogleBot//, pour mesurer la pertinence de la page fera une comparaison rapide avec certaines balises META et le contenu de votre document.
</WRAP>
\\
=== La balise <meta content-type > ===

Cette balise est obligatoire pour passer la validation W3C (certification de l'organisme éditeur des normes Web). Elle permet d'indiquer aux navigateurs le type MIME de la page et son encodage (évite que les lettres accentuées soient remplacées par des ? Ou d'autres caractères bizarres.\\
\\
Exemple :
<code html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</code>

=== Les balises d'informations === 

La liste des **balises META** d'information est très longue, certaines ne servent que d'en des cas particulier. Par exemple pour les informations affichées lors d'un partage sur les réseaux sociaux.
\\
**Le nom de l'auteur :** S'il y en a plusieurs, les séparés par des virgules.
<code html>
<meta name="author" content="Cédric MONTUY" />
</code>
\\
**L'éditeur du site :** Renseigne le nom et prénom de l'éditeur du site. S'il y en a plusieurs, les séparés par des virgules. Dans le cas d'une société, il faut indiquer la raison sociale.
<code html>
<meta name="publisher" content="CHG-WEB" />
</code>
\\
**Adresse mail de l'auteur :** A éviter, cette balise est repérée par des robots spammeurs.
<code html>
<meta name="reply-to" content="miel@chg-web.com" />
</code>
\\
**Adresse mail de la personne à contacter :** A éviter, cette balise est repérée par des robots spammeurs.
<code html>
<meta name="contact" content="miel@chg-web.com" />
</code>
\\
**Nom de la personne à contacter :** A éviter, cette balise est repérée par des robots spammeurs.
<code html>
<meta name="contactname" content="montuy337513" />
</code>
\\
**Nom de la société détentrice :** Indique le nom de la société détentrice du site web.
<code html>
<meta name="contactorganization" content="CHG-WEB" />
</code>
\\
**Indiquer l'adresse :**
<code html>
<meta name="contactstreetaddress1" content="LD Capel Blanc" />
<meta name="contactstreetaddress2" content="maison de gauche" />
<meta name="contactzip" content="46170" />
<meta name="contactcity" content="Castelnau-Montratier" />
<meta name="contactstate" content="France" />
</code>
\\
**Description de la page :** Courte description du contenu de la page. Cette description sera affichée dans les résultats de certains moteurs de recherche.
<WRAP center round tip 60%>
Conseils SEO : Ne pas dépasser les 200 caractères.
</WRAP>
\\
<code html>
<meta name="description" content="Tutoriel sur le langage HTML" />
</code>
\\
**Mots-clés :** Contient la liste des mots-clés que vous avez choisi pour votre page web. Ces mots-clés pourront être utilisés par les moteurs de recherche pour « catégoriser » votre site ou pour lui attribuer à votre page un niveau de crédibilité (GoogleBot par exemple) .
<WRAP center round tip 60%>
Conseils SEO : Cette liste de mots-clés ne doit pas dépasser les 500 caractères. 
</WRAP>
\\
<code html>
<meta name="keywords" content="tutoriel html, cours html, balise meta, html, informatique, html pour debutant" />
</code>
\\
**URL principale du site : **
<code html>
<meta name="identifier-url" content="http://www1.zonewebmaster.eu" />
</code>
\\
**Sujet du site :** Précise le sujet du site en quelques mots.
<code html>
<meta name="subject" content="Création, hébergement et gestion  de sites web ou d'applications" />
</code>
\\
**Réseau de publication :** Définit le type de réseau de publication.

^  Valeurs  ^  Description  ^
|  global  |  Visible sur l'internet  |
|  local  |  Visible uniquement sur un poste local  |
|  iu  |  Visible sur un intranet  |
\\
Par défaut, cette valeur est à //global//
<code html>
<meta name="distribution" content="global" />
</code>
\\
**Type de public :** indique le type de public visé par le site. Utilisé par les systèmes d'autorisation parentale par exemple.
^  Valeurs  ^  Description  ^
|  general  |  Tout public  |
|  mature  |  Réservé aux adultes  |
|  restricted  |  Accès restreint  |
|  14years  |  Accès interdit en-dessous de 14 ans  |
\\
Par défaut, cette valeur est à //general//
<code html>
<meta name="rating" content="general" />
</code>
\\
**Langue du site :**
<code html>
<meta name="langue" content="fr" />
</code>
\\
**Copyright :** Précise le ou les copyrights auxquels la page est soumise
<code html>
<meta name="copyright" content="© 2016 – CHG-WEB tous droits réservés." />
</code>
\\
**Générateur :** Si plusieurs logiciels sont utilisés, les séparés par des virgules. Balises a évité car des robots s'en servent pour repérer les sites vulnérables ou les sites potentiellement spammables.
<code html>
<meta name="generator" content="Xoops, Notepad++" />
</code>
\\
**Dates de votre page : **
Indique la création de la page sous la forme JJMMAAAA
<code html>
<meta name="date-creation-ddmmyyyy" content="20102014" />
</code>
\\
Indique la date de révision (ou modification) sous la forme JJMMAAAA
<code html>
<meta name="date-revision-ddmmyyyy" content="25102014" />
</code>
\\
Indique la date d'expiration (date au format anglais), si la page n'expire pas, mettre //never// à la place de la date. Si la page est expirée, le navigateur affichera la page précédente. La valeur pas défaut est //never//.
<code html>
<meta name="expires" content="21 december 2016" />
</code>
\\
**Type de page :** Précise le langage de scripts utilisé dans la page par son type MIME.
<code html>
<meta http-equiv="content-script-type" content="text/javascript" />
</code>
\\
**Robots :** Indique aux robots indexeurs si la page doit être indexée ou non. Plusieurs valeurs sont possibles, séparées par une virgule. \\
Par défaut la valeur est //all//.
\\
^  Valeurs  ^  Description  ^
|  index  |  Autorise les robots à indexer la page  |
|  noindex  |  Interdit aux robots d'indexer la page  |
|  follow  |  Autorise les robots à suivre les liens de la page  |
|  nofollow  |  Interdit aux robots de suivre les liens de la page  |
|  all  |  Correspond à 'index, follow'  |
|  none  |  Correspond à 'noindex,nofollow'  |
|  noarchive  |  Interdit aux moteurs de recherche de proposer une version de cache de la page  |
\\
<code html>
<meta name="robots" content="index, nofollow, noarchive" />
</code>
\\
**Revisitez nous :** Précise aux robots le nombre de jour (ou de mois) d'intervalle à respecter avant leur prochaine visite sur le site pour relever les nouveautés. A l'heure actuelle, cette balise META n'est absolument pas prise en compte par les robots indexeur.
<code html>
<meta name="revisit-after" content="7 days" />
</code>
\\
**Rafraichissement de la page :** Précise aux navigateurs de rafraîchir la page toutes les x secondes. Si en plus une URL est renseigné, la navigateur redirigera le visiteur au bout de x secondes vers la page indiquée.
<code html>
<meta http-equiv="refresh" content="60" />
<meta http-equiv="refresh" content="60 ; url=http://www.chg-web.com/index.php" />
</code>
\\
Il existe plein d'autre balises META, certaines sont spécifiques a certaines utilisations comme les métadonnées (DublinCore), d'autres spécifiques à un navigateur ou d'autres carrément obsolète.
\\
<WRAP center round tip 60%>
Conseils SEO : Il n'est pas nécessaire de mettre des dizaines de balises META dans votre <head>. Plus votre document contient des caractères (ou des médias), plus votre page sera longue à charger, moins les robots des moteurs de recherche considéreront votre page.
Il faut donc trouver un juste milieu, selon votre site, le contenu de votre page et les balises META à utiliser.
</WRAP>
\\
==== Les styles CSS ====
Les feuilles de style en cascade ou CSS (Cascading Style Sheets) s'utilise pour mettre en page votre code HTML. Il existe deux manières d'insérer des styles dans votre page.
\\
Soit directement dans votre page (méthode styles internes)
\\
<code html>
<style type="text/css">
    body{
	background-color : #fff ;
     }
</style>
</code>
\\
Soit dans un fichier spécifique (méthode style externe), méthode à privilégier pour un site en production.
<code html>
<link rel="stylesheet" type="text/css" href="/chemin/du/fichier.css" />
</code>
\\
Le CSS n'étant pas le sujet du jour, d'autres cours seront disponibles sur ce sujet passionnant.
\\
==== Les scripts ====
Les scripts sont des petits programmes en JavaScript ou en VBScript exécutés « côté client ((Côté client : s'exécute sur le navigateur du visiteur et est entièrement indépendant du serveur.)) » qui augmentent l'ergonomie de vos pages.
\\
Comme pour les feuilles de style en cascade, nous pouvons incorporer les scripts des deux même manières.
\\
Soit en interne (méthode script interne) :
<code html>
<script type="text/javascript">
function maFonction(){
/* du code ici */
}
</script>
</code>
\\
Soit en externe (méthode script externe) :
\\
<code html>
<script type="text/javascript" src="/chemin/du/fichier/javascript.js"></script>
</code>
\\
Le choix entre les deux méthodes dépendent si le script doit être exécuté sur toute les pages ou seulement sur une seule. Pour éviter la répétition fastidieuse de code et pour éviter les oublis en cas de modifications ultérieures, on privilégiera la méthode externe. Dans les autres cas, on utilisera bien sûr la méthode interne. Cette réflexion est valable aussi pour les feuilles de style.
\\
<WRAP center round tip 60%>
Conseils SEO: Il est préconisé, pour accélérer la vitesse de chargement de votre page, de mettre l'ensemble des scripts JS en fin de page juste avant </body>. Et oui, le temps de chargement de votre page influence la notation de votre site auprès des moteurs de recherche.
</WRAP>
\\
===== Le <body> dans le détail =====

La balise <body> est le corps de votre document. C'est à cet endroit que vous allez mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur consultera votre page ?
\\
==== Les types de balises ====

Il existe différents type de balises : Les **types « block »**, **les types « inline »** et **les types « none »**. Le type de la balise influence l'affichage des différents éléments de votre page.

=== Type « block » ===

Les éléments de type « block » sont généralement ceux que l'on utilise pour la mise en page.\\
La balise de type « block » occupe toute la largeur disponible. Lorsque 2 éléments « blocks » se suivent sur une page, ils sont positionnés (par défaut) l'un sous l'autre.\\
Voici quelques éléments de type « block »\\
\\
> %%<div>%% : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
> %%<h1>%%…%%<h6>%% : Hiérarchie de titre.
> %%<p>%% : Paragraphe.
> %%<ul>,<ol>,<dl>%% : listes (non ordonnée, ordonnée ou avec définition).
> %%<li>,<dt>,<dd>%% : éléments de liste, définition, et titre de définition.
> %%<table>%% : Tableau.
> %%<blockquote>%% : paragraphe indenté (décalé à droite).
> %%<pre>%% : Bloc de code préformaté.
> %%<form>%% : Formulaire de saisie.
\\
=== Type « inline » ===
\\
Les éléments de type « inline » sont essentiellement utilisés pour attribuer un style à une portion de texte.
N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent sur une page, ils sont positionnés (par défaut) l'un à côté de l'autre (si la largeur de page le permet).
\\
Voici quelques éléments de type « inline »
\\
> %%<span>%% : balise multi-usage, très pratique pour appliquer un style CSS à une portion de texte.
> %%<a>%% : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut créer un lien.
> %%<strong>%% : utlisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion de code en gras.
> %%<em>%% : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion de code en italique.
> %%<img />%% : place une image.
> %%<br />%% : Saut de ligne. Ceci est un car particulier d'éléments « inline », il provoque un saut de ligne.
> %%<input />%% : Champs de saisie dans un formulaire.
> %%<abbr>%% : signale une abbréviation.
\\
=== Type « none » ===

Ce type de balise ne s'affiche pas à l'écran. Elles sont présentes pour apporter des informations invisibles pour l'internaute (par exemple la balise <meta>.

==== Emboîter les balises ====

Quésako ((Qu'est-ce que c'est en langue occitane.)) ?  Emboîter les balises sera une pratique courante dans la réalisation de vos pages. Il existe des règles qu'il vous faut suivre.\\
\\
=== Les règles ===

Vous devez déjà avoir à l'esprit la règle d'imbrication vue [[#les-balises-imbriquees|plus haut]].
\\
La règle générale est celle-ci : \\
Un « block » peut contenir des « inline » et d'autres « block ». De l'autre côté, les « inline » ne peuvent contenir que d'autres balises « inline » 
\\
Voici un exemple d'emboîtement autorisé :
\\
<code html>
<p>
Phrase avec un <strong> mot </strong> important.
</p>
</code>
\\
Et voici un emboîtement interdit:
\\
<code html>
<strong>
  <p>Première phrase</p>
  <p>Deuxième phrase</p>
</strong>
</code>
\\
Interdit ne veut pas dire que cela ne fonctionne pas, mais il n'est pas conforme aux conventions concernant les emboîtements d'éléments et ne doit pas être utilisé dans vos pages.
\\
=== Les cas particuliers ===

Comme toutes règles, il existe des cas particuliers pour les contredire.
\\
Éléments de type « block »
\\
> %%<address>%% : Cette balise ne peut contenir que des éléments de type « inline ».
> %%<body>%% : Ne peut être parent direct d'éléments « inline ».
> %%<blockquote>%% : Cette balise ne peut être parente que d'éléments de type « block ».
> %%<dl>%% : Ne peut être parent direct que des balises <dt> et/ou <dd>
> %%<dt>%% : Ne peut pas contenir d'éléments de type « block »
> %%<fieldset>%% : Cette balise doit contenir en premier une balise <legend>
> %%<form>%% : Ne peut être parent direct que d'éléments de type « block ». Cette balise ne peut pas contenir d'autres balise <form>
> %%<h1>,<h2>, … <h6>%% : Ne peut contenir que des éléments « inline »
> %%<hr />%% : Ne peut pas contenir d'éléments
> %%<noscript>%% : Ne peut contenir que des éléments de type « block »
> %%<ol>, <ul>%% : Ces balises ne peuvent contenir que des balises <li>. 
> %%<p>%% : Cette balise ne peut contenir que des éléments de type « inline ».
> %%<pre>%% : Cette balise ne peut contenir que des éléments de type « inline », sauf les balises <img />, <object>,<applet> et <sub>
> %%<table>%% : Ne peut contenir que des balises <tr>, <caption>, <thead>, <tfoot>, <tbody>, <col>, <colgroup>
\\
Éléments de type « inline »
\\
> %%<a>%% : Ne peut contenir d'autres balises <a>
> %%<br />%% : ne peut pas contenir d'autres éléments.
> %%<img />%% : Ne peut pas contenir d'autres éléments. Ne peut pas être contenu dans un élément <pre>.
> %%<input />%% : Ne peut pas contenir d'éléments. Ne peut pas être contenu dans une balise <button>.
> %%<label>%% : ne peut pas contenir d'autre balise <label>. Ne peut pas être contenu dans une balise <button>.
> %%<select>%% : Peut être parent direct des balises <optgroup> ou <option>. Ne peut pas être contenu dans une balise <button>.
> %%<textarea>%% : Ne peut contenir que du texte simple et des entités. Ne peut pas être contenu dans une balise <button>.
\\
==== Les balises les plus courantes. ====
\\
=== Les titres ===

Il existe différents niveaux de titre, du H1 à H6 et ont chacun leur importance.
\\
>Exemple : <h1>Titre de ma page</h1>
\\
Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'éléments le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au dessus d'une balise <h1> dans un document.
\\
<WRAP center round tip 60%>
Conseils SEO : La balise <h1> étant la plus importante, il convient également de ne le faire apparaître qu'une seule fois dans votre document.
</WRAP>
\\
<WRAP center round info 60%>
Allez plus loin : Le rendu du titre se fera à l'aide du CSS.
</WRAP>
\\
===  Les paragraphes ===
\\
En HTML, vous devez préciser où commence un paragraphe et où il se termine. Ceci est le rôle de la balise <p>.
\\
<code html>
<p>Voici un premier paragraphe.</p>
<p>Voici un second paragraphe.</p>
</code>
\\
=== La mise en forme ===
\\
> Mise en gras : %%<strong>%%
> Mise en italique : %%<em>%%
\\
pour le souligné, le texte barré, l'exposant, l'indice, la police, la taille du texte ou la couleur, il est conseillé d'utiliser la balise %%<span>%% et les propriétés CSS.
\\
Exemple :
<code html>
<span style="color : red;">Ce texte est en rouge.</span>
</code>
\\
=== Les images et les zones réactives ===

Pour afficher une image, on utilise la balise %%<img />%%. Elle admet différents attributs, dont les plus importants sont src et alt.\\
L'attribut src permet de renseigner le chemin (l'URL) de l'image. Cette URL peut être absolue ou relatif.\\
L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou une autre, celle-ci ne peut être chargée.\\
Les différents formats d'images supportés par cette balise sont : le GIF, le JPG, le PNG ou le BMP.\\
> Exemple : %%<img src="addresse/de/l/image" alt="Description de l'image" />%%
\\
<WRAP center round tip 60%>
Conseils SEO : L'attribut alt permet au moteur de recherche de référencer l'image et les déficients visuels à savoir ce que l'image représente. Le format BMP est à éviter, car trop lourde donc augmente le temps de chargement de votre page.
</WRAP>
\\
Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.\\
Les balises qui permettent de faire ces zones réactives sont %%<map> et <area>%% étroitement liées avec la balise %%<img />%%. 
L'attribut de la balise %%<img/>%% qui va contenir le nom de la « map » dont elle fait référence est usemap. Le nom de cette map est précédé du signe #.
\\
Exemple : 
<code html>
<img src="adresse/image" alt="Description de l'image" usemap="#nomDeLaMap" />
</code>
\\
La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise %%<map>%%, qui doit obligatoirement avoir l'attribut //name// renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut //usemap// de l'image.
\\
<code html>
<map name="nomDeLaMap">
    <area ...>
    <area ...>
</map>
</code>
\\
Les différents attributs de la balise //<area>// sont :
\\
> **coords** : qui va contenir les différentes coordonnées de notre zone.
> **href** : qui va défenir l'adresse de destination du lien.
> **shape** : qui va renseigner le type de zone que l'on souhaite afficher (rectangle, rect, circle, circ, polygon, poly).
\\
On peut évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image. Attention toutefois à ne pas faire se chevaucher les zones. En cas de chevauchement, c'est la zone définie la première qui s'affichera au-dessus.
\\
=== Les liens hypertextes ===

Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page. On distingue deux types de liens, les liens externes et les liens internes.\\
Les liens externes sont des liens hypertexte qui renvoie vers une autre page de votre site ou sur le page d'un site tiers.\\
Pour les liens internes c'est un peu plus compliqué.\\
Il existe les ancres, ce lien pointe vers un endroit de la page en cours.\\
\\
Exemple : 
<code html>
<a href="#motCle">Texte de mon ancre</a>
<h2 id="motCle">Texte vers lequel l'ancre est renvoyé</h2>
</code>
\\
Nous pouvons aussi pointer vers une ancre présente sur une autre page.
\\
Exemple :
<code html>
<a href="http://www.chg-web.com/index.php#motCle">Texte de mon ancre</a>
</code>
\\
Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe « mailto : »
\\
Exemple : 
<code html>
<a href="mailto:miel@chg-web.com">Contacter par mail</a>
</code>
\\
=== Les listes ===

Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer, comme dans le cas d'un sommaire par exemple.\\

On distingue 5 types de listes différentes, chacun prévu pour un usage bien précis :\\
  * Les listes non ordonnées, ou à puces.
  * Les listes ordonnées.
  * Les listes de définitions.
  * Les listes de répertoires.
  * Les listes de menus.
\\
Exemple de liste non ordonnées
<code html>
<p>Ma liste de courses : </p>
<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>
</code>
\\
Résultat :\\
<html>
<p>Ma liste de courses : </p>
<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>
</html>
\\
Exemple de liste ordonnées\\
<code html>
<p>Top 3 des lettres grecs : </p>
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>
</code>
\\
Résultat :
\\
<html>
<p>Top 3 des lettres grecs : </p>
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>
</html>
\\
Exemple de listes de définitions
\\
<code html>
<dl>
    <dt>Orteils</dt>
    <dd>Définition de orteils</dd>
    <dt>Doigts</dt>
    <dd>Définition de doigts</dd>
</dl>
</code>
\\
Résultat :
\\
<html>
<dl>
    <dt>Orteils</dt>
    <dd>Définition de orteils</dd>
    <dt>Doigts</dt>
    <dd>Définition de doigts</dd>
</dl>
</html>
\\
//Les deux autres types de liste sont rarement utilisées.//\\
Il est possibles d'imbriquer les listes pour obtenir une présentation claire et détaillée d'un menu.\\
Nous pouvons utiliser les listes pour effectuer des menus déroulants.
\\
=== Les tableaux ===

Les tableaux sont une suite de lignes et de colonnes qui forment un ensemble de cellules.\\
Autre utilisation des tableaux sont la mise en page de documents. Cette méthode est à éviter mais, à néanmoins, le mérite d'être simple à mettre en œuvre.\\
Le tableau est délimité par la balise <table>. Le contenu d'un tableau HTML est généré horizontalement. C'est à dire qu'il n'est pas créé colonne par colonne mais ligne par ligne.\\
Pour créer un tableau, nous commençons par créer les lignes grâce aux balises <tr>. Puis dans ces lignes nous insérons les colonnes grâce aux balises <td>.\\

Exemple :
\\
<code html>
<table>
<tr>
<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
</tr>
</table>
</code>
\\
<WRAP center round important 60%>
Attention à bien avoir le même nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interpréter le tableau.
Nous pouvons insérer un titre dans un tableau avec la balise <caption>
</WRAP>
\\
<code html>
<table>
<caption>Titre du tableau</caption>
<tr>
<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
</tr>
</table>
</code>
\\
Si vous pouvez éviter l'utilisation d'un tableau, pensez à utiliser d'autres méthodes plus adaptées.
\\

===== Notes de version =====

  * [18/11/2017] : Harmonisation de la page

===== Auteurs et sources =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">