Afin de pallier au problème, ce dernier est doté d’un code spécifique pour chaque caractère spécial, par exemple :

é  designe  le code du caractère :    é

&eagrave;  designe le code du caractère  :   è

Ainsi pour écrire le code HTML de la phrase :  L’âge de l’élève est 17 ans

On utilise le code HTML  :

L’âge de l’álàve est 17 ans

Pour les autres caractères voici un tableau récapitulatif :

Caractère	Code ISO	Code HTML
“	"	"
&	&	&
€	€	€
	
‘	‚
ƒ	ƒ
“	„
…	…
+	†
#	‡
^	ˆ
‰	‰
Š	Š
<	&#139;	&lt;
Œ	&#140;
	&#141;
Z	&#142;
	&#143;
	&#144;
‘	&#145;
‘	&#146;
“	&#147;
“	&#148;
*	&#149;
–	&#150;
—	&#151;
~	&#152;
	&#153;
š	&#154;
>	&#155;	&gt;
oe	&#156;	&oelig;
	&#157;
z	&#158;
Y	&#159;	&Yuml;
Space	&#160;	&nbsp;
¡	&#161;	&iexcl;
¢	&#162;	&cent;
£	&#163;	&pound;
¤	&#164;	&curren;
¥	&#165;	&yen
¦	&#166;	&brvbar;
§	&#167;	&sect;
¨	&#168;	&uml;
©	&#169;	&copy;
ª	&#170;	&ordf;
«	&#171;	&laquo;
¬	&#172;	&not;
­	&#173;	&shy;
®	&#174;	&reg;
¯	&#175;	&masr;
°	&#176;	&deg;
±	&#177;	&plusmn;
²	&#178;	&sup2;
³	&#179;	&sup3;
‘	&#180;	&acute;
µ	&#181;	&micro;
¶	&#182;	&para;
·	&#183;	&middot;
¸	&#184;	&cedil;
¹	&#185;	&sup1;
º	&#186;	&ordm;
»	&#187;	&raquo;
¼	&#188;	&frac14;
½	&#189;	&frac12;
¾	&#190;	&frac34;
¿	&#191;	&iquest;
À	&#192;	&Agrave;
Á	&#193;	&Aacute;
Â	&#194;	&Acirc;
Ã	&#195;	&Atilde;
Ä	&#196;	&Auml;
Å	&#197;	&Aring;
Æ	&#198	&Aelig
Ç	&#199;	&Ccedil;
È	&#200;	&Egrave;
É	&#201;	&Eacute;
Ê	&#202;	&Ecirc;
Ë	&#203;	&Euml;
Ì	&#204;	&Igrave;
Í	&#205;	&Iacute;
Î	&#206;	&Icirc;
Ï	&#207;	&Iuml;
Ð	&#208;	&eth;
Ñ	&#209;	&Ntilde;
Ò	&#210;	&Ograve;
Ó	&#211;	&Oacute;
Ô	&#212;	&Ocirc;
Õ	&#213;	&Otilde;
Ö	&#214;	&Ouml;
×	&#215;	&times;
Ø	&#216;	&Oslash;
Ù	&#217;	&Ugrave;
Ú	&#218;	&Uacute;
Û	&#219;	&Ucirc;
Ü	&#220;	&Uuml;
Ý	&#221;	&Yacute;
Þ	&#222;	&thorn;
ß	&#223;	&szlig;
à	&#224;	&agrave;
á	&#225;	&aacute;
â	&#226;	&acirc;
ã	&#227;	&atilde;
ä	&#228;	&auml;
å	&#229;	&aring;
æ	&#230;	&aelig;
ç	&#231;	&ccedil;
è	&#232;	&egrave;
é	&#233;	&eacute;
ê	&#234;	&ecirc;
ë	&#235;	&euml;
ì	&#236;	&igrave;
í	&#237;	&iacute;
î	&#238;	&icirc;
ï	&#239;	&iuml;
ð	&#240;	&eth;
ñ	&#241;	&ntilde;
ò	&#242;	&ograve;
ó	&#243;	&oacute;
ô	&#244;	&ocirc;
õ	&#245;	&otilde;
ö	&#246;	&ouml;
÷	&#247;	&divide;
ø	&#248;	&oslash;
ù	&#249;	&ugrave;
ú	&#250;	&uacute;
û	&#251;	&ucirc;
ü	&#252;	&uuml;
ý	&#253;	&yacute;
þ	&#254;	&thorn;
ÿ	&#255;	&yuml;

– Un formulaire est déclaré à l’aide du balisage :

<form> et</form>

A l’intérieur d’un formulaire on trouve généralement des champs de textes, des textarea et des boutons pour envoyer ou annuler l’envoie des informations

– Un champ de texte se déclare à l’aide de la commande :

<input type="text" name="nom_du_champ">

– Un textarea se déclare à l’aide de la commande :

<textarea name="nom_du_textarea"></textarea>

– un bouton d’envoie  se déclare à l’aide de la commande :

<input type="submit" Value="texte_qui_s_affiche_sur_le_bouton">

– Un bouton pour annuler l’envoie des informations se déclare à l’aide de la commande :

<input type="reset" Value="texte_qui_s_affiche_sur_le_bouton">

Remarque :

L’envoie des donnée d’un formulaire se fait à l’aide des méthodes crées spécialement à cette opération, les méthodes les plus utilisée sont POST et GET. Les données sont contrôlées à l’aide d’un fichier ou un système de fichier nommé contrôleur, controller en anglais, pour plus de détails veuillez lire le tutoriel php : Contrôle des formulaires en php 

Exemple :

<form method="POST" action"fichier_qui_traite_les_donnees">
Nom :<input type="text" name="nom"><br />
Email :<input type="text" name="email"><br />
Message: <textarea name="message"></textarea><br />
<input type="submit" Value="Envoyez">
</form>

Ce qui va afficher au navigateur :

1 – Les listes ordonnées

Pour organiser un contenu web sous forme d’une liste ordonnée, on utilise la balise <ol> ( ordered list ), et ensuite chaque élément de la liste doit être inséré  à l’aide de la balise <li>

<ol>
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
.............
</ol>

Exemple :

<ol>
<li>Voitures</li>
<li>Computers</li>
<li>Télévisions</li>
</ol>

Ce qui vas nous afficher :

1. Voitures
2. Computers
3. Télévisions

Si on veut maintenant mettre à la place des numéros 1 , 2,  3… des lettres a) , b), c)… ou des chiffres I, II, III… Il suffit d’ajouter la commande type=””  :

<ol type="I">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>
<ol type="a">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>

Ce qui vas afficher au navigateur  :

1. Voitures
2. Computers
3. Télévisions

1. Voitures
2. Computers
3. Télévisions

Si on veut maintenant démarrer le compteur à une position autre que la première qui est 1, par exemple à la 7ème position on utilise la commande start=” “ :

<ol start="7">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>

Ce qui va afficher au navigateur :

7. Voitures
8. Computers
9. Télévisions

Vous pouvez aussi imbriquer des sous listes à l’intérieur d’une liste :

Exemple :  Si vous voulez par exemple spécifier les marques des voitures, vous pouvez utiliser le code :

<ol>
<li>Voitures
<ol>
<li>Renault</li>
<li>Peugeot</li>
<li>Golf</li>
</ol>
</li>

</ol>

Ce qui affiche à l’écran :

1. Voitures
   1. Renault
   2. Peugeot
   3. Golf

2 – Les listes non ordonnées

Parfois on souhaite présenter un contenu web ou l’ordre ne semble avoir aucune importance ! Dans ce cas on utilise les listes non ordonnées, ces dernières on peut les créer facilement à l’aide des balises <u> et </ul>

Exemple :

<ul>
<li>Voiture</li>
<li>Maison</li>
<li>Arbre</li>
</ul>

Ce qui affiche au navigateur :

• Voiture
• Maison
• Arbre

On souhaite parfois mettre des petites icônes à la place des puces, pour cela il suffit d’ajouter la commande : imagesrc=”http://www.adresse-de-l-image&/#8221; :

<ul imagesrc="http://www.tresfacile.net/crayon.jpg">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ul>

Ce qui affiche au na vigateur :

3 – Les listes combinées

Prenons l’exemple simple ci-dessus de la liste : Voiture, Maison, Arbre, et on souhaite par exemple spécifier la marque de la voiture : 1 – Renault, 2- Peugeot, 3- Golf, tout en respectant l’ordre, on peut à ce moment là insérer une liste ordonnée au sein de la liste première liste : Voiture, Maison, Arbre :

<ul>
<li>Voitures
<ol>
<li>Renault</li>
<li>Peugeot</li>
<li>Golf</li>
</ol>
</li>
<li>Maison
<ol>
<li>Maison 2 pièces</li>
<li><code>Maison </code>3 pièces</li>
<li><code>Maison </code>4 pièces</li>
</ol>
</ul>

Ce qui affiche à l’écran :

• Voitures
  1. Renault
  2. Peugeot
  3. Golf
• Maison
  1. Maison 2 pièces
  2. Maison 3 pièces
  3. Maison 4 pièces
   

4 – Les listes de définitions

Vous souhaitez parfois présenter une page web contenant une liste de définitions, cette liste s’introduit facilement à l’aide des balises <dl> et </dl>, vous introduisez ensuite le terme à définir entre les balises <dt> et </dt> et  vous introduisez ensuite votre définition entre les balises <dd> et </dd>

Exemple :

<dl>
<dt>Serveur</dt>
<dd>Ordinateur dédié à l'administration d'un réseau informatique. 
Il gère l'accès aux ressources et aux périphériques et les connexions 
des différents utilisateurs.</dd>
<dt>Adresse IP</dt>
<dd>
Une adresse IP (avec IP pour Internet Protocol) est un numéro 
d'identification qui est attribué de façon permanente 
ou provisoire à chaque appareil connecté
</dd>

</dl>

Ce qui affiche  :ServeurOrdinateur dédié à l’administration d’un réseau informatique. Il gère l’accès aux ressources et aux périphériques et les connexions des différents utilisateurs.Adresse IPUne adresse IP (avec IP pour Internet Protocol) est un numéro d’identification qui est attribué de façon permanente ou provisoire à chaque appareil connecté

Un tableau est déclaré en langage HTML à l’aide des balises <TABLE> et </TABLE> On peut ajouter des caractéristique à la balise <TABLE> afin de spécifier la hauteur, largeur, bordure, couleur , …

Exemple

<TABLE border=1 width=500 height=300  BGCOLOR=FFFF00 ></TABLE>

Définit un tableau avec la bordure 1 largeur 500 hauteur 300 couleur jaune

2 – Insertion des lignes et des colonnes

Pour insérer une ligne dans un tableau on introduit les balises <TR> et </TR> , pour insérer des cellules dans une ligne on utilise les balises <TD> et </TD>

Exemple

<TABLE  border="1">
<tr>
<td>je suis dans la colonne 1  de la ligne 1</td>
<td>je suis dans la colonne 2 de la ligne 1</td>
</tr>
</TABLE>

Ce qui va afficher à l’écran après exécution :

Si je veux par exemple créer un tableau avec plusieurs lignes et plusieurs colonnes par exemple un tableau de deux lignes et trois colonnes, je dois insérer deux deux codes de lignes <tr> </tr> et à l’intérieur de chacune de ces codes je dois insérer le code de colonne <td> </td> trois fois :

<tr>  <---   début de la premières ligne
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
<--- Fin de la première ligne
<tr>  <---   début de la deuxième ligne
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
<--- Fin de la première ligne

Voici le code final :

<table border="1">
<tr>  
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
<tr> 
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
</table>

Ce qui va afficher au navigateur :

3 – Les attributs de la balise <table>

L’attribut border

Si on veut se modifier les bordures on change tout simplement l’attribut   border=” ”    par une autre valeur par exemple border=” 2″ ou border=” 3″…

Exemple

avec  border=”5 ” on obtient :

Si on ne veut pas mettre de bordures, il suffit de mettre  border=”0 ”   ou tout simplement ne pas ajouter d’attribut border et mettre simplement la balise <table>

Et voici ce qu’on obtient sans mettre d’attribut border :

Les attributs width et height

L’attribut width spécifie la largeur du tableau tandis que l’attribut height spécifie sa hauteur :

Exemple

Pour tracer un tableau de largeur =500  et de hauteur =200  , on utilise le code :

<table border=1 width="500" height="200">
<tr>  
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
<tr> 
<td>  1ère  colonne</td>
<td>  2ème  colonne</td>
<td>  3ème  colonne</td>
</tr>
</table>

Voici ce qu’on obtient au navigateur après exécution du code :

Grâces aux attributs de la balise <body> vous pouvez mettre une couleur ou une image en arrière plan, établire un style sur vos liens hypertextes…Voici les principaux attributs et leurs effets :

Arrière plan avec la couleur spécifiée

On peut spécifier la couleur d’arrière plan d’une page web et l’afficher avec la couleur de notre choix à l’aide de l’attribut bgcolor

<body bgcolor= "nom ou code de la couleur">

Exemple

<html>
<head>

</head>
<body bgcolor="red">

</body>
</html>

Ce qui affiche une page web avec un arrière plan rouge :

Affichage de l’image spécifiée en arrière plan

<body background= "image">

Affichage des liens visités avec la couleur spécifiée

<body vlink="nom ou code de la couleur">

Affichage des liens actifs avec la couleur spécifiée

<body alink="nom ou code de la couleur">

Affichage des liens visités avec la couleur spécifiée

<body vlink= "nom ou code de la couleur">

Etablir une marge à gauche avec la valeur spécifiée

<body leftmargin="valeur">

Etablir une marge à droite avec la valeur spécifiée

<body rightmargin="valeur">

La balise <IMG> indique au browser qu’il faut afficher une image. Cette balise s’utilise toujours avec l’attribut SRC (source) qui permet de donner l’adresse de l’image à lire. Cette adresse aura le même format qu’une adresse A HREF=”” et pourra donc être soit relative, soit fixe. En principe, l’image résidera toujours sur le même serveur que celui du document HTML, mais il est possible de charger une image depuis un autre serveur, pour autant que celui-ci soit accessible. Notons quand même que cette balise ne possède pas d’équivalent de fin. Nous n’aurons donc jamais de balise </img> La syntaxe est :

<img src="destination de l′image ">

Exemple : pour afficher l’image située à une l’adresse :  on doit insérer le code :

<img src="http://www.google.com/images/android.png">

Ce qui donne  :

.

2 – Les attributs de la balise <img>

Les attributs width et height

Les attributs width et height permettent de redimensionner l’image à une taille spécifiée par exemple si on veut redimensionner l’image de façon quelle soit affichée à une taille de 150 x 150 pixels on doit donc utiliser le code suivant :

<img src="http://www.yahoo.net/images/android.png" width="150" height="150">

Ce qui va donner à l’écran :

L’attribut align

L’attribut align permet d’aligner l’image à droite, à gauche… par exemple si on souhaite que l’image soit alignée à droite et redimensionnée à  64 x 64 pixels on doit utiliser le code suivant :

<img src="http://www.yahoo.net/images/android.png" width="150" height="150" align="right">

Ce qui vas donner à l’écran :

L’attribut border

L’attribut border permet de spécifier les bordures de l’image si on veut par exemple que l’image soit entourée d’une bordure on utilise le code suivant en donnant à la variable border une valeur numérique 1. 2, 3, … ou 0 si on ne souhaite attribuer aucune bordure !

Exemple : border=1

<img src="http://www.yahoo.net/images/android.png" width="150" height="150" border=1>

ce qui donne :

1 – Lien vers une adresse URL

Un lien hypertexte est définie par les balises

<a href =" ... "> et  </a>

La syntaxe est :

<A HREF="adresse URL ">...</A>

Exemple : lien externe vers Yahoo:

<A HREF="http://www.yahoo.fr/">Cliquez ici pour accéder à Yahoo</A>

Ce qui affiche au navigateur : Cliquez ici pour accéder à Yahoo

On souhaite parfois mettre une info-bulle sur le lien pour fournir des information sur la page du lien, pour cela on utilise la commande title=”texte de l’info-bulle”  :

<a title="Il s'agit d'un lien vers le site Yahoo" href="http://www.yahoo.fr/">Cliquez ici pour accéder à Yahoo</a>

2  – Lien vers un fichier

Le code Html du lien vers un fichier est de la forme :

<A HREF="nomdufichier.extension">...</A>

Remarque : nom du fichier désigne le chemin du fichier avec son extension .txt, .doc, .html,. pdf, …

3 – Lien vers boite E mail

La syntaxe d’un lien hypertexte vers une boite email est la suivante :

<a href="mailto:votre adresse Email ?">Contact</a>

Exemple : (lien vers l’adresse Email sibyamara95@gmail.com )

<a href="mailto:webmaster@tresfacile.net?">Ecrire au webmaster</a>

4 – Lien dans la même page

On veut parfois créer un lien hypertexte d’un texte vers une autre partie du texte située sur la même page, comme par exemple haut de page ou quelque chose qui ressemble…  Pour réaliser cela, positionnez vous à l’endroit que vous souhaitez atteindre, par exemple haut de la page Introduisez le balisage

<A NAME="nom">votre texte ou vous pouvez le laisser vide</A>

Introduisez ensuite le balisage :

<A HREF="nom">debut de la page</A>

HTML est doté de nombreuses balises pour agir sur la mise en forme d’un texte, nous n’allons citer ici que les balises les plus utilisées :

 Exemple :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Ce qui affiche au navigateur :

2 – Usage pratique des balises de mise en forme HTML

Exemple

pour écrire le texte :  Le langage HTML est très facile !

on utilise le code :

Exemple de code HTML

Le langage <b>HTML</b> est très<font color='red'> facile !</font>

Exemple

Pour écrire le texte suivant  :

Le cours HTML sur ce site est très facile !
Est ce que vous avez compris ce cours ?
Si vous avez une question posez la dans le forum
Bonne chance !

on utilise le code

Le cours <font color="blue"> HTML </font>  sur ce site est très facile ! 
<i> Est ce que vous avez compris ce cours ? </i> 
Si vous avez une <u> question </u> posez la dans le <font color="blue"> forum </font> 
<font color="red">Bonne chance ! </font>

3 – Les codes des couleur en HTML

On a vu dans les paragraphes précédents que les couleurs peuvent être designées par leurs noms comme red, green, blue…Mais le problème qui se pose c’est celui de l’intensité d’une couleur ! par exemple qu’on dit couleur blue, il peut s’agir d’une couleur bleu ciel, bleu foncé, bleu marine !… c’est pour cette raison que les informaticiens ont décidés de coder les couleurs.

Le format de la commande de couleur est    :    “#RRVVBB” :
RR   :  la quantité de rouge contenue dans la couleur.
VV   :  la quantité de vert contenu dans la couleur.
BB   :  la quantité de bleu contenu dans la couleur.

Exemple

La couleur: #000000 correspond au noir (00 de rouge, 00 de vert et 00 de bleu).
La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)
La séquence de numérotation hexadécimale est (de min. au max.): 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Exemple

code couleur html

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF">

Le fond sera noir, le texte blanc et les liens en rose.

<html> et </html>Commandes de début et de fin de document
<head> et </head> Entête du document : Informations non affichées
 Titre du document
<body> et </body> Corps du document.

2 – Structure d’un document HTML

Structure d’un document HTML

<HTML>
<HEAD>
<TITLE>Exemple de structure de documentHTML</TITLE>
</HEAD>
<BODY>
Voici un exemple de page HTML
</BODY>
</HTML>

3 – Visualisation d’une page HTML

Pour visualiser une page HTML, plusieurs solutions s’offrent à vous, nous allons vous donner la plus simple! Lancez l’editeur de page web Dreamweaver CS6:

Cliquez ensuite sur le bouton HTML en haut afin de créer une nouvelle page HTML, vous obtenez la fenêtre suivante:

Cliquez ensuite sur l’onglet code en haut de l’éditeur, supprimez le code qui existe par défaut  et tapez ensuite votre propre code.

Pour voir votre page web maintenant il suffit cliquer sur l’onglet Live en haut de  l’éditeur, laperçu de votre page html sera de la forme :

HTML est le sigle de hypertext Markup language : langage utilisé pour coder des fichiers textes en vue d’une utilisation sur des systèmes hypertext (technique créant des liens entre données de types différents tel que : texte image , texte fichier multimédia . . .Pour créer une page web, au début les webmasters utilisaient deux logiciels, dans l’un ils tapaient le code HTML dans l’autre ils visualisaient la page. Certainement ce qu’ils tapaient comme code HTML ne correspondait pas à ce qu’ils obtenaient comme textes animés, boutons de commandes . . . Aujourd’hui grâce à l’apparition de logiciels WYSIYG ( ce que vous voyez correspond à ce que vous obtenez ), la création d’une page web est aussi simple que la création d’un document de texte. Les logiciels WYSIWYG les plus utilisés sont FrontPage, FrontPage express , Dreamwever, Nvu, …Un document html “standard” doit impérativement commencer par :

<HTML> et finir par </HTML>

2 – Les outils nécessaires

Les outils de développement HTML sont très nombreux ! Les plus utilisé sont :

Vs Code Sublime Text