The Nightwalker X

Débutant & Avancé,

Découvrez comment créer facilement votre site Web!

préface

O
n a tous pris l'habitude de visiter des sites Web tous les jours et jusque là,
on se contentait d'être de simples visiteurs parce qu'on croit que derrière
ce superbe site Web que nous aimons tant visiter, se cachent des super
doués en informatique, qui eux seuls savent comment on crée un truc pareil...
Mais ça, c'était avant! Cette vieille perception des choses va changer dès
maintenant. Nous allons découvrir dans ce livre comment on peut créer un
superbe site Web même quand on ne sait seulement que comment allumer un
ordinateur actuellement.
Nous allons apprendre pas à pas à créer et gérer des sites Web en partant de
zéro jusqu'à la mise en activité de nos sites Web.

Continuez à lire ce livre jusqu'au bout, dans l'ordre du programme suivant.

 INTRODUCTION
Le Web, c’est quoi ?

Le Web est une partie d’Internet, à ne pas confondre avec Internet qui lui est un
ensemble plus vaste et comprend le Web, les e-mails, etc. Pour accéder au Web, on
utilise un navigateur Web dans lequel il faut introduire l’adresse de la page Web que
l’on souhaiterait consulter. Internet Explorer est le navigateur Web intégré par défaut sur
les ordinateurs qui tournent sous Windows ; et Safari pour les Mac.

HTML et CSS pour créer des sites web

Pour créer un site Web, il faut avant tout écrire les codes sources des pages du site.
Mais ces codes sources, on ne les écrit pas comme on écrit un texte de courrier, On le
fait dans le (ou les) langage(s) que le navigateur Web pourra comprendre et traduire
pour les gens qui visiteront notre site: HTML et CSS.
Ce sont là les deux langages universels et incontournables du Web. Ils sont à la base
même des sites Web.

HTML signifie Hyper Text Markup Language, il a été créé en 1991 par Sir Tim Berbers-
Lee à travers un document appelé « HTML Tags » dans lequel il a proposé moins d’une
douzaine d’élément qu’on pourrait utiliser pour écrire des pages Web. C’était le HTML
1.0
HTML a jusque là été un langage en pleine évolution. Ses spécifications ont changé au
cours des années avec des améliorations à chaque version, tendant à rendre la création
Web beaucoup plus aisé.
La dernière version à ce jour où nous écrivons ces lignes, est la version 5, ce que nous
allons apprendre…
HTML5 a été finalisé et publié le 28 octobre 2014 par le World Wide Web Consortium
(W3C), l’organisation en charge de la définition des standards et des spécifications du
HTML. Les avantages de HTML sont nombreux : un langage facile à comprendre et
utiliser, un langage supporté par quasiment tous les navigateurs, un langage très utilisé et
donc offrant une très large communauté mondiale, un langage gratuit ! Vous ne payerez
pas d’argent pour acheter une licence logicielle, et pleins d’autres.
HTML ne peut malheureusement pas produire des effets dynamiques, c’est un langage
statique ; les options de sécurités offertes sont limitées et parfois la structure des pages
est difficile à mettre en place.

CSS signifie Cascading Style Sheets, feuilles de style en cascade. C’est une extension de
HTML qui permet de styler les pages Web. Il décrit la façon dont les éléments HTML
doivent être disposés à l’écran, sur papier ou autres média.
CSS a été inventé par Häkon Wium Lie, le 10 octobre 1994. Il est maintenu par un
groupe au sein du W3C appelé « The CSS Working Group ». Il évolue au fil des années
et est à son 3e niveau actuellement.
CSS3 est la version que nous allons apprendre ici.
Ses avantages sont multiples : gain remarquable de temps dans la création Web,
Chargement plus rapide des pages, maintenance facile des pages Web, Compatibilité
sur multiples appareils, utilisation hors ligne par mise en cache...

Aperçu de HTML

Lorsque vous visitez un site Web, vous voyez une page en clair comme sur cet exemple :

Figure 1 : Aperçu de la Page d’accueil de http://www.inspirates.cf

Bien, maintenant faites Clic droit avec votre souris dans un endroit de la page Web
active (désolé pour ceux qui sont sur mobile) et Afficher le code source de la page
(Ctrl+U, les fanas des raccourcis sont où là ?).
Le résultat est quelque chose qui ressemble à ceci :
Figure2 : Ctrl+U affiche le code source du site Web que vous visitez à cet instant

Ce que vous allez apprendre, c’est d’écrire comme sur la figure 2 pour obtenir
un rendu comme sur la figure 1.

Ce qu’il vous faut

- du temps,
- un navigateur Web installé sur votre machine. Chez moi c’est
Opera. Vous pouvez utiliser celui qui vous plait le plus, l’essentiel
c’est qu’il puisse afficher des pages Web…

Figure 3 : Quatre navigateurs Web populaires (Google Chrome, Opera,

Internet Explorer et Mozilla Firefox),
- Un éditeur de texte. Je ferai avec Notepad++ mais vous êtes libre de
choisir lequel vous convient le mieux. Seulement qu’il permette
d’écrire du texte brut. Mais il serait plus intéressant de choisir un
éditeur qui vous facilite la tâche ; c’est-à-dire qui est spécialisé dans
l’édition de code source.

Figure 4 : Quatre éditeurs de texte populaires (Notepad++, Adobe

DreamWeaver, Microsoft Word et Bloc Note)

Chacun de ces éditeurs a ses particularités, pour en donner des

exemples, Notepad++ colore le code que vous saisissez afin de vous
aider à le faire plus simplement et il est gratuit. Vous le trouverez au
lien en dessous de page. DreamWeaver colore également le code
et a la particularité d’être très performant pour l’édition de code
avec son auto complétion (fermeture auto des balises) et en plus il
est doté d’une interface WYSIWYG (What You See Is What You
Get, en français : Ce que vous voyez est ce que vous obtenez) ainsi
que MS Word. Un souci avec les logiciels WYSIWYG c’est que
parfois, le code HTML généré donne un rendu pas vraiment le
même que lors de sa création. Néanmoins, avec eux, tout le monde
peut se faire un site Web sans même avoir une seule notion de
HTML. Si vous voulez vraiment créer un site Web, je vous conseille
alors de vous passer des interfaces WYSIWYG mais pas carrément
du logiciel parce qu’à la place de Notepad++, je recommanderais à
ceux qui ont leur portefeuille de s’acheter une licence de
DreamWeaver ! C’est très chic. Peut être que je vous mettrai un
tutoriel pour avoir DW gratis, (peut être)…
Première partie

LES BASES DE LA CREATION

WEB
CHAPITRE 1

LES BASES DE HTML5 : NOTIONS &

PREMIERES PAGES
 NOTIONS DE HTML5
Un langage de balises
Les documents en HTML sont constitués d’éléments HTML. Les éléments HTML sont
faits de balises. Une balise en HTML ressemble à ceci : <balise>.
Un élément HTML comprend une balise ouvrante et un fermante comme :
<balise> … </balise>
La balise ouvrante : <balise>
La balise fermante : </balise>
Certaines balises n’ont pas de fermante. Elles sont orphelines et ressemblent à
<balise />

… d’attributs et de valeurs
Les éléments HTML ont le plus souvent des attributs, et les attributs, des valeurs.
Donc, un élément HTML aura la forme :
<balise attribut="valeur"> … </balise>
(Ou <balise attribut="valeur" />, pour certains).
Un élément HTML peut avoir plusieurs attributs mais un attribut n’a généralement pas
plusieurs valeurs, à l’exception de quelques uns que nous verrons plus tard.

HTML est insensible à la casse ; c'est-à-dire écrire

<balise attribut="valeur"> … </balise>
revient à écrire
<BALISE ATTRIBUT="VALEUR"> … </BALISE>
Si vous mettiez vos noms de balises en majuscule, vous aurez la même interprétation
que si vous les mettiez en minuscule !
 STRUCTURE BASIQUE DES PAGES HTML5

U
n document HTML5 est constitué par une tête et un corps. Le corps du
document peut contenir un pied de page! Le tout compris entre la balise
<html> et sa fermante </html>. L’élément html (<html>…</html>)
doit être unique pour chaque document HTML.

Le modèle basique HTML5 est ainsi :

…
<html>
<head>
…
</head>
<body>
…
</body>
</html>

Les ‘’…’’ signifient qu’on peut (et doit) mettre du contenu.

La tête <head>…</head>
La tête d’un document HTML5 n’est pas visible sur la page Web. Elle est utilisée à titre
indicatif au navigateur Web et aux moteurs de recherche (si votre site est sur la toile).
Donc tout ce que vous écrirez entre <head> et </head> (à part le titre du
document), personne ne le verra à moins d’afficher votre code source.
La structure basique de la tête d’un document HTML5 se présente comme suit :

<head>
<meta charset="utf-8" />
<title>Mon premier site Web</title>
</head>
Le corps <body>…</body>
Le corps du document est la partie qui sera visible lorsqu’on se rendra sur votre site. Il
contient la plus grande partie des éléments HTML.
Le corps se présente comme ceci :

<body>
<balise1 attribut="valeur">…</balise1>
<baliseN attribut="valeur">…</baliseN>
… … … … …
</body>

(Ceci n’est pas un corps de document valide !)

S’il existe, le pied de page est contenu dans le corps du document.

VOTRE PREMIER DOCUMENT HTML5

M
aintenant il est temps de créer votre première page Web. On va y aller
ensemble, ne vous inquiétez pas. Suivez mes instructions et vous verrez que
c’est beaucoup plus facile que dire Bonjour en Allemand !

Création du code

Vous avez allumé votre Ordi ?

Ouvrez votre éditeur de texte.
Recopiez (vous pouvez faire Copier-coller, mais serait mieux de réécrire vous-même)
le code suivant :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Mon premier site Web</title>
6 </head>
7 <body>
8 Bonjour et Bienvenue sur mon premier site Web!
9 </body>
10 </html>

Sous Notepad++, ça ressemble à ceci :

 Un éditeur de texte affiche plusieurs options pour votre code

Mieux configurer son éditeur de code

Nativement, l’arrière plan de Notepad++ est blanc. Mais si vous commencez à mettre
du temps devant votre Notepad++ natif, vous allez vite vous fatiguer les yeux. Pour
changer de thème, cliquez sur Paramétrage > Configurateur de coloration
syntaxique… > Thème

Cliquez sur paramétrage sous Notepad++

Choisissez un thème et Appliquer puis Enregistrer & fermer.

 Maintenant, changez la coloration du texte, le thème Black boad affiche le texte en
blanc par défaut.
Pour cela, cliquez sur Langage et choisissez HTML sous H.

Colorez votre code autrement !

Notepad++ change la couleur des balises HTML pour faciliter l’écriture du code

Voiiilà, on a configuré notre éditeur pour pouvoir aller plus loin !

Enregistrement du code

Cliquez sur Fichier et Enregistrer sous (Ctrl+S pour les fanas des raccourcis !)
Créer un nouveau dossier et nommez-le « test » puis touche Entrée pour sauver.
Double-cliquez sur le nouveau dossier pour l’ouvrir

et nommez votre fichier « test.html » et Touche Entrée à nouveau pour enregistrer et

finir. Ouvrez votre gestionnaire de fichier et le dossier « test » qu’on vient de créer. Il
doit contenir un fichier « test » si vous avez choisi de ne pas afficher les extensions
pour les fichiers reconnus, sinon « test.html » si comme moi, vous avez choisi d’afficher
 toutes les extensions de fichiers.

Notez que l’icône du fichier « test.html » dépend de votre navigateur par défaut.
Chez moi c’est Opera donc normal de voir le Grand ‘’O’’ rouge !

Vous aurez remarqué que sur des lignes, le code est parfois plus ou moins décalé
de la gauche. C’est ce qu’on appelle « indentation » du code. On utilise la touche
Tab(Tabulation) pour le faire. Vous pourrez voir une touche avec deux flèches
opposées sur certains claviers juste au dessus de Ver. Maj ou Caps Lock.
Indenter son code à l’avantage de faciliter l’écriture du code en faisant apparaitre les balises pas
encore ou pas fermées.

Et voilà votre premier site !

Nous venons de créer notre premier site. Mais ça ressemble à quoi dans le
navigateur ? Pour le savoir, double-cliquez sur le fichier « test.html ».
Sûrement votre navigateur Web par défaut s’ouvre. Vous voyez quoi ?
Humm chez moi c’est…
 Quoi ? Vous espériez voir un truc beaucoup plus beau que ça?

Bah c’est que vous avez dit au navigateur de vous rendre ! Faut écrire mieux pour
avoir mieux…
Si ça vous tente, faites Ctrl+U dans le navigateur. Vous retrouverez tout ce que vous
avez écrit dans votre éditeur de code.
Et aussi, ce qui ce trouvait entre <title> et </title> est en titre de page dans
le navigateur et le contenu de la page est uniquement ce qui était entre <body> et
</body>.

Explications

Le doctype : <!DOCTYPE html>

C’est la première ligne de notre code. Il spécifie la version HTML utilisé pour
la page actuelle. Ce n’est pas une balise comme les autres où il faut ouvrir et
fermer etc.… le doctype est unique dans la page et doit venir avant le reste de
votre code HTML. Les versions HTML antérieures à la 5e utilisent un doctype
beaucoup plus complexe, un truc du genre :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(pour xHTML 1.0). Ça s’est beaucoup plus simplifié on dirait… Notez qu’il
commence par un point d’exclamation « ! ».

La balise principale : <html>

Vous la connaissez déjà, c’est la balise principale du document.

La balise <head>
L’en-tête ou la tête du document. Elle contient les balise <meta> et <title>, elle
en contiendra beaucoup plus dans la suite.
- <meta charset="utf-8" /> : l’attribut charset indique l’encodage des
caractères à utiliser pour la page actuelle. L’encodage définit la manière
d’afficher les caractères accentués, les lettres en Chinois traditionnel ou encore
en Japonais… Plusieurs types d’encodages peuvent être utilisés selon le codeur et
la langue dans laquelle il écrit. Les anglais utiliseraient ISO-8859-1, OEM 775,
Windows-1253 ou autre. Mais en français, préférons l’UTF-8, c’est plus classe et
tout est pris en charge !
En fait si vous voyez des caractères du genre ou des carrés
 noirs façon là, c’est le type d’encodage utilisé qui n’est pas adapté au contenu
de la page.
Si ça vous tente de tester, écrivez juste des caractères accentués dans le code
précédent en laissant le charset à UTF-8, Ctrl+S et actualisez la fenêtre de votre
navigateur. Normalement, rien n’a changé. Maintenant changez seulement le
charset de UTF-8 à ISO-8859-1 et actualisez la fenêtre du « browser » à
nouveau. Notez la différence.

- <title> Mon premier site Web</title> indique le titre que le

navigateur doit afficher pour votre page.

La balise <title> indique le titre de votre page

La balise <body>
Elle, vous la connaissez déjà.

Expliquez votre code, ajoutez-y des commentaires !

Dans tous les langages informatiques, les commentaires sont très utiles pour la lisibilité
du code source. Ils ne sont pas interprétés par le traducteur du code mais peuvent
servir à se retrouver dans son propre code si on le reprenait des jours, des semaines,
voir des années après.
Pour insérer des commentaires en HTML, on écrit le texte du commentaire entre
<!-- et -->

1| <!--Tout ceci est un commentaire dans mon document HTML -->

Pour tester, réécrivez votre code en y ajoutant la ligne de commentaire précédente.

Vous pouvez la mettre n’ importe où dans le document mais de préférence, entre
<body> et </body> parce que c’est cette balise qui contient ce qui est affiché
dans le corps de la page WEB.
Commentaire en HTML

Ctrl+S, enregistrez le document et actualisez la fenêtre du navigateur et ça donne

ça :

Comme si le code source n’avait pas changé !

N’oubliez pas que la « balise » de commentaire commence par un point

d’exclamation et aussi que votre commentaire peut être lu à travers le code source de
votre page Web, donc tout le monde peut le voir. Prenez donc soin de ne pas mettre des informations
sensibles dans les commentaires.
 FAITES UN VRAI SITE : ORGANISEZ VOTRE
CODE

L
e premier essai est un succès, le navigateur nous a rendu le contenu de notre
code mais c’est quand même trop Mumm… pour être un site, mais bon… c’est un
site! Essayons plutôt de faire un truc plus grand et beaucoup plus beau, comme
des grands !
L’organisation de notre code va se faire avec les éléments HTML (une balise ouvrante suivi
de sa fermante, ou des balises orphelines).

Soignez le code

En HTML, même si les erreurs ne bloquent pas la traduction du code (comme c’est le
cas dans les vrais langages de programmation), le bon sens demanderait qu’on écrive
un code propre et sans erreurs pour que le rendu des différents navigateurs ne
diffère pas trop de l’un à l’autre, car, que le code source soit propre ou pas, chaque
navigateur à sa manières de faire les choses. Il vous sera parfois très utile de tester
votre site sur au moins 3 navigateurs Web avant de le mettre sur la toile.
Fermez les balises après leur ouverture : votre code ne doit pas contenir les trucs du
genre
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Titre de mon site</titre>
6 </head>
7 <body>
8 <element1>
9 …
10 </elemen1>
11 <element2>
12 …
13 < !-- une basile ouverte et pas fermée ici -->
14 </body>
15 </html>

Ne testez surtout pas ce code parce qu’il n’est pas du bon code (utilisation de balises
inconnues à HTML).
 Respectez la hiérarchie entre les balises ; les balises se ferment dans leur ordre
d’ouverture. Toute balise ouverte à l’intérieur d’une autre doit être refermée avant son
élément parent, l’élément qui la contient. Ça veut dire que si j’ouvre une balise
<title> à l’intérieur de <head>, je ne dois pas refermer </head> avant
</title>, mais </title> avant </head>.

ILLUSTRATION :

Mauvais code :
<head><title>Mon titre ici</head></title>

Bon code:
<head><title>Mon titre ici</title></head>

Les paragraphes

C’est simple de faire des paragraphes en HTML ! Vous comprenez anglais ? Oui !
Super, ça ira plus vite comme ça (sinon revoyez votre cours de 6e 2 du Lycée
Moderne HTML5 ! vous n’avez pas jeté votre cahier, j’espère). Certaines balises
HTML5 prennent seulement l’initial anglais de leur vrai nom anglais. C’est le cas des
paragraphes. Vous devinez ? Un « p » !
Et donc voici l’élément HTML qui fera les paragraphes dans votre document :

<p> … </p>

Ainsi

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Mon super site Web</title>
6 </head>
7 <body>
8 <p>
9 Ceci est un paragraphe
10 </p>
11 </body>
12 </html>
Et un deuxième, ce serait encore mieux ;)

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Mon premier site Web </title>
6 </head>
7 <body>
8 <p>
9 Ceci est un paragraphe
10 </p>
11 <!-- Et mon super méga hyper commentaire passe par ici -->
12 <!-- Ensuite mon 2e et précieux paragraphe se trouve là ! --
>
13 <p>
14 Mon deuxième paragraphe est ici.
15 </p>
16 </body>
17 </html>

Copiez ce bout de code et Ctrl+S « noch ein mal » ! Bon je sais pas si c’est la bonne
expression mais je crois que « encore une fois » ressemble à ça en allemand :-P

Testez !

Par défaut, HTML insère une ligne libre avant et après un paragraphe.
Le paragraphe est un élément type bloc donc même si vous écrivez tout votre code
sur une ligne unique, le rendu serait le même !
Voyez ça :

1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

<title>Mon Super site Web</title> </head> <body> <p> Ceci est
un paragraphe </p> <!-- Et mon super mega hyper commentaire
passe par ici --> <!-- Ensuite mon 2e et précieux paragraphe
se trouve là ! --> <p>Mon deuxième paragraphe est ici. </p>
</body> </html>
Recopiez et sauver dans un nouveau fichier « test2.html ».

Le répertoire « test » contient maintenant deux fichiers html

Double-cliquez sur « test2.html », une nouvelle fenêtre dans le navigateur Web et

voilà :

L’affichage de la page Web ne dépend pas du nombre de ligne du code mais de sa

structure

Si on faisait Ctrl+U sur chacune des deux pages HTML, on n’obtiendrait pas la même
forme pour les deux codes sources. Le code source de « test.html » est plus long que
celui de « test2.html »
Le code source de « test.html » sur 17 lignes

Le code de « test2.html » occupe une ligne unique

Sous Notepad++, il faut activer le retour auto à la ligne pour éviter que son code ne
déborde (en largeur et devienne difficile à y naviguer).
 Le code est plus facile à lire avec le Retour auto à la ligne

Retour, gros, gras, italique, souligné… :

formatez le texte

Retourner à la ligne

On a dit tout à l’heure que les paragraphes inséraient une nouvelle ligne avant
et après. En fait ça fait un retour à la ligne et puis retour à la ligne à nouveau.
Donc retour et ligne libre.
Mais quand vous faites du texte, vous ne voudrez parfois pas forcément faire un
nouveau paragraphe parce que c’est le même paragraphe qui doit continuer.
Ce dont vous avez besoin, c’est juste de retourner à une nouvelle ligne.
Pour cela, insérez une balise orpheline <br />.
Les normes HTML5 reconnaissent <br /> et <br> comme le même élément.
Alors pourquoi ne pas faire simple si vous codez sous HTML5 ? <br> et c’est
bon !

Le gras

En anglais : bold. Pour faire du texte en gras avec HTML, il suffit de mettre sont
texte à l’intérieur d’un élément <b> comme ceci :

<b>Mon super texte en gras </b>

C’est un élément type ligne comme ceux qui suivent.

L’italique

Italic en anglais,
<i>Mon super texte en italique</i>
suffit pour faire du texte en italique.

Le souligné

Ou underline en anglais, <u>Mon super texte souligné</u>

Le barré

<del>Mon super texte barré</del>

(<s>permet de barrer du texte aussi</s>)
Mais il y a une différence entre s et del : del s’utilise pour une information qui
n’est plus valide et qu’on veut quand même afficher à titre indicatif (prix de
produit avant une réduction, par exemple), et s pour simplement barrer du texte
(décoratif)

Important !

<strong>Mon super texte important</strong>

Notez que <strong> met le texte en gras aussi mais ne signifie pas la même
chose que <b> alors attention, <b> pour le gras simple et <strong> pour
l’important !

Marquez le texte

<mark>Mon super texte marqué</mark>

Faites du petit

<small>Mon super texte petit</small>

De l’emphase en plus !

<em>Mon super texte en emphase</em>

A l’exposant 1million !

Quand 4 est à l’exposant 2 ça ressemble à 4² =

Combien déjà ??

En indice aussi

Les physiciens eux mettent beaucoup d’indice comme

M_indice aux masses de leurs objets !

Eh bien, on peur formater son texte de plusieurs manières. Nous en découvrirons plus
avec le CSS. Je vous laisse le temps de voir à quoi tout ceci ressemble à l’intérieur
d’un document HTML :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Mon super site Web </title>
6 </head>
7 <body>
8 <p>
9 <b>Mon super texte en gras</b> <br>
10 <i>Mon super texte en italique</i><br>
12 <u>Mon super texte souligné</u> <br>
15 <del>Mon super texte barré</del> <br>
16 <strong>Mon super texte important</strong> <br>
17 <mark>Mon super texte marqué</mark> <br>
18 <small>Mon super texte petit</small> <br>
19 <em>Mon super texte en emphase</em> <br>
20 Quand 4 est à l’exposant 2 ça ressemble à
4² = Combien déjà ?? <br>
21 Les physiciens eux mettent beaucoup d’indice comme
M_indice aux masses de leurs objets ! <!--pas
besoin de <br> ici, c la dernière ligne -->
22 </p>
23 </body>
24 </html>
 Dans la page Web, le résultat de ce code est le suivant :

Il existe plusieurs façons de formater du texte en HTML

Les titres

Ici, il ne s’agit pas de titre du document (ce qu’on a fait avec <title>) mais de titre
de paragraphe ou de partie par exemple ; de titre visible dans le corps du document.
En HTML, on distingue six (6) niveaux de titres numérotés de <h1> à <h6> dans
l’ordre décroissant de leur importance ; c’est-à-dire que : un titre de niveau 1 est
beaucoup plus important qu’un titre de niveau 4 ou 5. Les titres sont des éléments de
type bloc donc « auto line break » !
Dans la pratique, vous n’aurez pas vraiment besoin de tous les six, perso j’arrive très
rarement à <h4> ! Le navigateur différencie chacun des titres en mettant le plus
important (<h1>) en plus grand, l’important en grand, le moins important en beaucoup
plus petit.

Essayez-le vous même:

Les titres HTML sont hiérarchisés

Résultat :

Les titres les plus importants sont plus grands !

 Il n’est pas du tout recommandé d’utiliser les titres <h1> à <h6> juste pour faire du
texte gras (<b>) ou du gros texte (<big> … </big> sert à faire du gros) parce
que les robots des moteurs de recherche lisent votre code et se servent des titres
pour indexer le contenu de votre page.

Les lignes horizontals

Pour insérer une ligne horizontale dans votre document, écrivez <hr /> simplement
où vous voulez la mettre.

Donne :

Evidemment, HTML5 reconnait aussi <hr> = <hr />, tout simplement.

Et pour faire une ligne verticale ? C’est <vr /> , hein !? J’ai dit un truc qu’il fallait pas ?

Eh bien, il n’existe pas de ligne verticale en HTML. Donc pas de <vr />, d’accord ?
Les listes

Liste ordonnée

C’est le style des listes numérotées. En anglais : « ordered list »

Mettez
<ol> … </ol>

Si vous testez ce code seul, vous ne verrez rien parce qu’on a dit qu’on veut
faire une liste ordonnée mais on n’a donné aucun élément sur la liste.
Pour citer les éléments à lister, on utilisera : <li> … </li> pour chaque
élément de la liste, et entre <ol> et </ol>.

Exemple : Je veux faire la liste des fruits préférés de mon gars sûr, en ordre
biensûr!

1 <ol>
2 <li>Orange</li>
3 <li>Banane</li>
5 <li>Mangue</li>
6 <li>Ananas</li>
7 </ol>

Essayez ce code !

Les éléments des listes <ol> sont numérotés automatiquement

Liste non ordonnée

Du genre « deux points, à la ligne – premier tiret… 2e tiret … 3e tiret … etc. »

On les fait avec <ul>…</ul> ; « unordered list » pour les anglais.
La façon de citer les éléments de la liste n’a pas changé : on utilise les même
 <li>…</li> pour le faire.
Je ne proposerai pas d’exemple cette fois :D essayez-le vous-même.

Liste complexe

Imaginez que vous avez des noms de personnes à lister et pour chaque personne de
la liste, vous devez aussi lister les caractéristiques (taille, poids, âge, …). Vous vous y
prenez comment ? Deux listes séparées ? Non ! Ça ne marcherait pas bien.
HTML permet de faire cette tâche sur une liste unique mais qui contient une autre liste
comme ceci :

LISTE 1: Les personnes

1 <ol>

2 <li>Abou</li>
3 <li>Jean</li>
4 <li>Marc</li>
5 </ol>

LISTE 2 : Les caractéristiques des personnes

Abou :

1 <ul>
2 <li>1,78m</li>
3 <li>81Kg</li>
4 <li>27 ans</li>
5 </ul>

Jean :

1 <ul>
2 <li>1,63m</li>
3 <li>73Kg</li>
4 <li>19 ans</li>
5 </ul>

Marc :

1 <ul>
2 <li>1,92m</li>
3 <li>79Kg</li>
4 <li>24 ans</li>
5 </ul>
LISTE 3 : Liste complexe (personnes & caractéristiques)

1 <ol>

2 <li>Abou
3 <ul>
4 <li>1,78m</li>
5 <li>81Kg</li>
6 <li>27ans</li>
7 </ul>
8 </li>
9 <li>Jean
10 <ul>
11 <li>1,63m</li>
12 <li>73Kg</li>
13 <li>19ans</li>
14 </ul>
15 </li>
16 <li>Marc
17 <ul>
18 <li>1,92m</li>
19 <li>79ans</li>
20 <li>24ans</li>
21 </ul>
22 </li>
23 </ol>

Voilà c’est mieux comme ça. Notez que vous pouvez mettre autant de <ul>, <ol>,
<li> que vous voulez, cela ne regarde personne d’autre que vous !

Testez le code précédent :

LES LIENS

L
es liens en HTML permettent de passez d’une page à une autre dans le même
site, d’un site à un autre, d’une position à une autre dans la même page… On crée
un lien avec l’élément <a>.
On distingue ainsi :

Les liens vers une autre page du même

site

Vous vous rappelez ? On a crée un fichier « test2.html » dans notre dossier

« test ». Actuellement, notre dossier « test » contient « test.html » et « test2.html ».
Bien, nous voulons ajouter un lien à « test.html » qui va nous amener vers
« test2.html », et un autre lien à « test2.html » qui va nous renvoyer à
« test.html » ; sans avoir à ouvrir chacun des deux fichiers manuellement (double-
clic dessus).
Pour commencer, fermez toutes les fenêtres de votre navigateur et quittez le
navigateur même.
Ouvrez l’éditeur de texte et écrivez ces bouts de code entre <body> et
</body> :
Dans « test.html »:

1 <p>
2 <a href="test2.html">Aller à la page 2</a>
3 </p>

Dans “test2.html”:

1 <p>
2 <a href="test.html">Returner à la page 1</a>
3 </p>

Maintenant, double-cliquez sur le fichier « test.html ». C’est marqué « Aller à la page

2 » en couleur et souligné. Cliquez dessus et vous verrez « Retourner à la page 1 ».
Vous vous retrouvez ? « Aller à la page 2 » est dans le fichier « test.html » et
« Retourner à la page 1 » est dans « test2.html ».
Explication :
En cliquant sur « Aller à la page 2 », le navigateur redirige vers le chemin indiqué
avec l’attribut href. C’est donc l’attribut href qui indique au navigateur où il doit
renvoyer celui qui clique sur notre lien. Changez la valeur de href="test2.html" (c’est-à-
dire « test2.html ») et vous irez ailleurs que sur le fichier « test2.html »
Créons maintenant un nouveau dossier dans notre dossier « test », clic droit dans un
endroit vide de « test » > Nouveau > dossier. Nommons-le « mon_dossier ».
On a maintenant ça dans le dossier « test » :

Le dossier « test » contient 3 éléments maintenant

Coupons le fichier « test2.html » et collons-le dans « mon_dossier »

Dans la fenêtre de notre navigateur, Clic à nouveau sur « Aller à la page 2 »
Résultat ?

C’est bien logique non ? « test » ne contient plus de fichier « test2.html » ! Il faut donc
modifier le chemin vers « test2.html » comme ceci dans « test.html » :
1 <a href="mon_dossier/test2.html">Aller à la page 2</a>

Ou encore :
1 <a href="./mon_dossier/test2.html">Aller à la page 2 </a>

Plus besoin de vous rappeler qu’il faut enregistrer.

Cliquer à nouveau sur « Aller à la page 2 ». Parfait ! Tout marche bien. Et si vous
cliquiez sur « Retourner à la page 1 » ? Encore un message d’erreur ! « mon_dossier »
ne contient pas de « test.html ». Changeons aussi le chemin vers « test.html » dans la
source de « test2.html » comme ceci :

1 <a href="../test.html">Retourner à la page 1</a>

Et c’est bon. Si le fichier à atteindre se trouve dans 2 dossiers plus hauts, on ferait :

1 <a href="../../test.html">Retourner à la page 1</a>

Dans trois…

1 <a href="../../../test.html">Retourner à la page 1</a>

Egalement, si « test2.html » se trouvait dans deux dossiers plus bas, on ferait :

1 <a href="mon_dossier/autre_dossier/test2.html">Aller à
la page 2</a>

A éviter quand vous nommez vos fichiers ou dossiers:

 Les espaces, utilisez plutôt des tirets ou des tirets de soulignement (underscore
« _ », touche 8 du haut) ;
 Les caractères spéciaux ou (@, &, \, *, …) ;
 Les caractères accentués (é, ê, ë, à, â, ô, ü, ï,…)

Les chemins vers des pages dans le même site, qui commencent par « ./ », « ../ » ou
« dossier/ » sont appelés chemins relatifs. Ils dépendent de la position actuelle de
votre fichier dans le site.

Les liens vers une page d’un autre site

Il s’agit ici de mettre des chemins absolus comme valeur à l’attribut href ; c’est-à-dire
qui commence par « http:// » ou « https:// » ou encore « ftp:// ».
Un lien vers un autre site de la toile serait donc de la forme :

1 <a href="http://www.site.com/dossier/page.html">Aller au
site </a>
Cas pratiques des liens

Lien vers une ancre

Vous voyez parfois sur des sites : « Cliquez pour aller au bas de la page »
ou « Haut de page ».
Il s’agit en fait de liens qui vous renvoient vers une ancre placée à un
endroit de la page. On le fait comme ceci :

<a href="#bas" id="haut"> Aller en bas </a>

Et pour le bas :

<a href="#haut" id="bas"> Aller en haut </a>

Fonctionnement : cliquez sur « Aller en bas », vous serez redirigés vers

l’ancre portant l’attribut id="bas" sans recharger la page; et dans
l’autre sens, vers l’ancre d’id="haut". On peut également faire un lien
vers une ancre placée dans une autre page de notre site. Pour ça il faut
juste indiquer (en valeur à l’attribut href) le chemin relatif vers la page
concernée et ajouter « #id_de_lancre » à la fin.
Lorsqu’on cliquera, le navigateur va charger la page et faire défiler
directement jusqu’à l’endroit où l’ancre est placée.

<a href="./dossier/page.html#superAncre">Voir
plus de détails ici</a>

Les ancres peuvent être placées partout dans le corps de la page, à

n’importe quel élément HTML, il suffit d’y ajouter l’attribut id, de lui donner
une valeur et de faire un lien (<a>) qui aura pour valeur à son attribut
href la valeur d’id de l’élément vers lequel on veut renvoyer.

Par exemple :

1 <body>
2 <p>Sommaire <br> <br>
3 <a href="#livres">Livres</a><br>
4 <a href="#cahiers">Cahiers de cours</a><br>
5 <a href="#stylos">Les stylos</a><br>
6 </p>
7 <p>
8 <!--Une tonne de trucs ici pour remplir
notre intro et patate -->
9 </p>
10 <p>
11 <h1 id="livres">Chapitre sur les livres</h1>
12 <!-- bla bla bla bla bla bla -->
13 <br>
14 <h1 id="cahiers">Et les cahiers…</h1>
15 <!--bla bla bla bla bla bla bla -->
16 <br>
17 <h1 id="stylos">Plein de stylos dans votre
cartable !</h1>
18 <!-- bla bla bla bla bla bla bla bla -->
19 <br>
20 </p>
21 </body>

Essayez ce code vous-même !

ATTENTION à la valeur de l’attribut id : elle ne doit pas contenir d’espace,
de tiret, de signe ponctuation, de lettre accentuée, de caractère spécial.
Elle ne doit pas commencer par un chiffre également mais peut contenir
des chiffres. Elle doit être UNIQUE comme valeur d’attribut id dans chaque
page.

Lien qui affiche une info bulle

C’est le texte qui apparaît quand on pose le curseur sur le lien (survol).
L’attribut title de <a> permet de d’ajouter des infos bulles aux liens.

<a href="./dossier/test2.html" title="Ma super info

bulle">Cliquez moi !</a>

Essayez ce code vous-même !

Ah je sens que vous allez essayer plein de codes vous-même à partir de maintenant. Ça
vous permettra de pratiquer un peu et de ne pas rester à me regarder là tout le temps.
Allez –y c’est plutôt fun…

Lien qui ouvre une nouvelle fenêtre

Cliquez dessus et ça chargera la page que vous avez demandée dans

 une nouvelle fenêtre/onglet du navigateur Web. Le visiteur peut toute fois
forcer l’ouverture dans une nouvelle fenêtre/onglet avec maintien sur Maj.
+Clic. Ajoutez simplement l’attribut target avec pour valeur _blank à
votre <a> comme ceci :

<a href="dossier/page.html" arget="_blank">Cliquez

moi</a>

Lien vers un fichier à télécharger

C’est le même principe que pour tous les liens seulement qu’ici, au lieu
d’indiquer le chemin vers une page à charger, on donne le chemin absolu
ou relatif vers un fichier (non HTML) qui peut être soit de la musique, une
vidéo, un document PDF, un logiciel, etc ; en valeur à l’attribut href de
<a>.

<a href="dossier/video.mp4">Cliquez ici pour

télécharger</a>

Lien pour envoyer un e-mail

Cette fois, on n’indiquera pas de chemin vers une page HTML ou un

fichier en valeur à notre attribut href, mais comme ceci :

<a href="mailto:username@exemple.com">Envoyez-
moi un e-mail</a>

Bien sûr vous allez remplacer « username@exemple.com » par votre vraie

adresse e-mail !

Lien pour appeler via Téléphone

Ceci ne fonctionnera pas sur les périphériques qui ne gèrent par le

protocole d’appel téléphonique. Donc sur votre PC classique, n’espérez
pas pouvoir effectuer un appel direct via ça. Par contre, sur un téléphone
portable c’est sans bruit.

<a href="tel:+225123456789">Appelez-moi !</a>

N’oubliez pas de toujours précéder votre numéro de l’indicatif du pays

 (+225 pour Côte d’Ivoire).

Lien pour appeler via Skype

<a href="skype:monIdentifiant?call">Contactez-moi sur

Skype</a>

On va s’arrêter là mais retenez qu’on peut faire plein d’autres trucs avec
les liens, même envoyer des SMS !
LES IMAGES

O
n peut penser à faire une galerie d’images sur son site ou juste utiliser des
images pour décorer. HTML offre la possibilité d’insérer des images dans
votre site et très facilement grâce à l’élément <img >

Ajouter une image

On le fait ainsi :

<img src="image.png" alt="image" />

Ou encore (HTML5)

<img src="image.png" alt="image" >

La balise <img > est orpheline. L’attribut src prend en valeur le chemin relatif ou
absolu vers l’image qu’on veut insérer au site. L’attribut alt prend en valeur un texte
alternatif au cas où l’image n’a pas pu être chargée, il sert également d’indicatif aux
robots des moteurs de recherche et aux malvoyants. Il est requis depuis HTML5. Si
votre image sert juste de décoration et qu’elle n’est pas trop importante, vous pouvez
ne pas mettre de valeur à alt en laissant à alt="".

Conseils pour les images

 Ne choisissez pas des images trop grandes ou trop lourdes, elles ralentiront le
chargement de votre site sur la toile.
 Compressez les images si possibles pour diminuer leurs tailles sans toutes fois en
perdre la qualité.
 Redimensionnez vos images pour prendre juste le format qu’il faut. Les logiciel comme
FastStone image Viewer ou encore Easy Thumbnail le font très bien.
 Prenez soin de bien renommer vos images : le nom des images ne doit pas contenir
des espaces (on pourra remplacer les espaces par des underscore « _ » ou des tirets
« - »), des lettres accentuées et des caractères spéciaux.
Ajouter une info bulle à votre image
Avec l’attribut title comme dans le cas des liens

<img src="dossier/image-bateau-87.jpg" title="une Photo

du bâteau 87" alt="bâteau 87" />

Changez les dimensions de vos images

On redimensionne les images avec les attributs width(épaisseur) et

height(hauteur) de l’élément img.

<img src="dossier/image.gif" width="150" height="220"

alt="Bonbon au lait" />

Les valeurs de width et height sont en pixels. On peut également présenter ses
images sous forme de miniatures cliquables et charger l’image en grandeurs réelles
dans une autre page ou directement comme ceci :

<a href="image.png"><img src="image-mini.png"

title="Cliquez pour voir en grand" width="100"
height="100" alt="Screenshot" /></a>

Ajouter des bordures

<img src="filigrane.png" alt="Logo de Inspirates" />

Sans bordures

<img src="filigrane.png" border="1" alt="Logo de

Inspirates" />
 Avec bordure d’epaisseur 1px

Les figures HTML5

Les figures HTML5 permettent d’ajouter facilement des légendes à vos images. C’est
l’élément <figure> qui s’en charge, et <figcaption> contient le texte de la
légende.

1 <figure>
2 <img src="chalkboard.jpg" width="150" height="150"
alt="Tableau à craie" />
3 <figcaption>Tableau à craie</figcaption>
4 </figure>

Légende d’image avec les figures HTML5

 LES TABLEAUX

O
n définit les tableaux avec l’élément <table>. Les tableaux sont découpés
en lignes avec la balise <tr> et les lignes, en colonnes avec <td>. Ils
servent à classer et organiser assez facilement des informations. La balise
<th> permet de structurer son tableau avec des entrées pour les colonnes
et/ou les lignes.

Créer des tableaux

Un tableau simple est structuré comme ceci :

1 <table>
2 <tr>
3 <th>Noms</th>
4 <th>Taille</th>
5 <th>Age</th>
6 </tr>
7 <tr>
8 <td>Abou</td>
9 <td>1,78m</td>
10 <td>27ans</td>
11 </tr>
12 <tr>
13 <td>Jean</td>
14 <td>1,65m</td>
15 <td>19ans</td>
16 <tr>
17 <td>Marc</td>
18 <td>1,92m</td>
19 <td>21ans</td>
20 </tr>
21 </table>

Et ça donne ça:
Un tableau basique en HTML

Les balises <td> des tableaux peuvent contenir toute sorte de données : textes,
images, liens, listes également d’autres tableaux, etc. Par défaut, les tableaux ont des
bordures d’épaisseur égale à 0. Notez aussi qu’il n’est pas obligatoire de mettre des
<th> à son tableau.
Ajoutez juste l’attribut border à <table>, avec une valeur supérieure à 0 pour
faire apparaitre les bordures de tableaux.

1 <table border="1"> < !- - et tout le reste du contenu

du tableau ici - ->

Le résultat est représenté à la Figure suivante.

On peut mieux organiser son tableau en spécifiant l’étendue des cellules (<td>) ou la
hauteur des lignes (<tr>).
 L’attribut border ajoute des bordures à toutes les cellules du tableau

Fusionner des cellules ou des lignes

On fait fusionner 2 ou plusieurs cellules d’un tableau ajoutant à <td> l’attribut

colspan, qui prend en valeur le nombre de colonnes à fusionner, et l’attribut
rowspan, qui prend en valeur le nombre de ligne à faire fusionner.

Application 1 : colspan

Tableau original : Tableau précédent

Remplaçons les lignes 18 et 19 par :

<td colspan="2">Aucune info</td>

Et on obtient :
Application 2 : rowspan

Supprimons la ligne 19 et remplaçons la ligne 15 par :

<td rowspan="2">19ans</td>

Et on obtient :

Bon, c’est vrai que dans ce cas c’est pas vraiment adapté (parce que Jean et Marc
n’ont pas tous les deux 19ans) mais l’idée c’est de vous montrer comment ça
fonctionne.
On peut fusionner plus de deux colonnes.

Lorsqu’on ajoute des bordures au tableau avec l’attribut border, chaque cellule du
tableau prend des bordures, séparées des autres cellules comme vous pouvez le voir
sur les figure précédentes. Dans la suite, nous verrons comment faire en sorte que les
bordures des cellules se collent et ne soient plus en double ; c’est avec CSS. Nous
allons également voir comment maquiller les tableaux : couleur/image de fond, format des textes…
 LES FORMULAIRES

L
es formulaires permettent de recueillir des informations fournies par les visiteurs
comme les données de connexion (pour les sites qui demandent l’authentification
du visiteur). Les formulaires contiennent les champs de texte, les cases à cocher,
les champs de sélection de fichier à uploader, les boutons, etc. Cependant, notez que
HTML peut seulement servir à la saisie d’informations, si vous voulez leur traitement,
utilisez un autre langage, PHP par exemple.

Créer des formulaires

Comme pour le <ol> ou <ul> pour les listes, on crée les formulaires avec <form>.
A l’intérieur de notre formulaire, nous allons ajouter un élément de type bloc, par
exemple <p> ou <div>
Allons-y avec le nouveau <div> :

1 <form>
2 <div>
3 …
4 </div>
5 </form>

Tous nos champs de saisie seront entre <div> et </div>

On a dit tout à l’heure que HTML ne peut pas traiter les informations que le visiteur
tape dans les champs de saisie. En fait, vous faites un formulaire pour quoi ?
Demander au visiteur de s’inscrire sur votre site ? Demander de s’authentifier ?
Permettre de poster un commentaire ou un message à propos d’un contenu sur votre
site ? Envoyer un e-mail ? Uploader un fichier ? Ou autre chose ?
Eh bien, pour une ou une autre des ces raisons, vous devrez obligatoirement employer
un langage autre que HTML.
Supposons, je dis bien « supposons » qu’il s’agisse de PHP (vous en avez déjà peut
être entendu parler). Cela sous-entend que vous disposiez d’un script qu’on aurait
nommée « traiter.php ».
Ainsi quand le visiteur fini et qu’il valide l’envoi du formulaire, HTML est à ses limites et
doit alors faire appel à « traiter.php » pour le relayer. C’est « traiter.php » qui va
maintenant se charger de faire ce pour quoi vous avez créé le formulaire. Pour savoir
ce que « traiter.php » doit contenir, il vous faudra avoir des notions de PHP mais ce
 n’est pas le but de ce cours alors… on passe !
Avant d’arriver à la création des éléments du formulaire, il faut :
 indiquer le fichier auquel votre formulaire doit faire appel lorsqu’on le valide.
Pour cela, ajouter l’attribut action à <form>, il prend en valeur le chemin
relatif ou absolu vers le script (fichier) qui va traiter les informations.
 Indiquer la méthode d’envoi des informations. Deux méthodes s’offrent à vous :
GET et POST. Chacun d’eux a ses avantages. Avec GET, les données du
formulaire transitent par l’URL (Uniform Ressource Locator) et sont donc visibles
après validation. Attention à ne pas envoyer d’informations sensibles (comme
des mots de passe) avec cette méthode. La taille limite des informations
pouvant passer par GET est de 255 caractères alors ne vous aventurez pas
à mettre cette méthode sur un formulaire qui va servir à commenter un article !
optez plutôt pour POST. C’est la manière la plus sécurisée pour envoyer des
formulaires. Ici les données ne passent pas à travers l’URL et cette méthode
supporte une très grande quantité d’information. On pourra donc faire
envoyer des fichiers.

Notre formulaire est actuellement à :

1 <form action="dossier/traiter.php" method="post">

2 <div>
3 …
4 </div>
5 </form>

Créer les éléments du formulaire

Tout ce qui suit est contenu entre <div> et </div>

Les libellés

Ils servent à indiquer ce qu’il faut entrer dans le champ correspondant. On

ajoute les libellés avec <label> … </label>. Ils possèdent un attribut for
qui prend en valeur l’identifiant (id) du champ qui correspond. Exemple pour un
libellé de saisie de Pseudo du visiteur :

<label for="pseudo">Votre pseudo : </label>

Les champs de texte

On distingue deux types de champ de texte:

- Les champs de texte mono ligne : ils ne supportent de grande quantité de texte
et sont adapté aux textes courts qui ne prennent qu’une seule ligne comme les
noms d’utilisateur, les mots de passe, etc. On les ajoute avec la balise orpheline
<input /> qui porte un attribut type à la valeur text.
- Les champs de texte multi ligne : ils sont faits pour les textes d’une importante
quantité et qui peuvent se répandre sur plusieurs lignes. Par exemple les textes
de commentaire, les sujets de forum. On ajoute avec
<textarea></textarea>

Voici un formulaire basique qui demande de saisir le titre d’un sujet de forum, le
sujet et des tags pour le sujet (si on reprend tout depuis le début):

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Poster un sujet au forum</title>
6 </head>
7 <body>
8 <p>
9 <h1>Merci de remplir le formulaire ci-
dessous :</h1>
10 <form method="post"
action="traiter.php">
11 <div>
12 <label for="titre">Titre du
sujet </label> : <input type="text" id="titre" /> <br>
13 <label for="sujet">Texte du
sujet</label> :<textarea id="sujet"></textarea><br>
14 <label for="tags">Tags</label>: <input
type="text" id="tags" /><br>
15 </div>
16 </form>
17 </p>
18 </body>
19 </html>

La valeur de l’attribut for d’un <label> doit être égale à la valeur de l’attribut
id du champ correspondant. Lorsque vous cliquez sur le <label> d’un champ, le
curseur se place automatiquement dans la zone de saisie associée.
 A chaque champ de saisie (input, textarea), il faut ajouter un attribut
name qui prendra en valeur le nom que le « traiter.php » utilisera pour identifier
l’information. Il serait plus souple de donner la même valeur aux attributs name
et id.

Exemple:

<label for="uername">Nom d’utilisateur</label> : <input

type="text" name="username" id="username" />

Les champs de mot de passe

On les fait aussi avec <input />. Il suffit juste de changer la valeur de
l’attribut type de text à password.

<label for="pass">Mot de passe</label> : <input

type="password" name="pass" id="pass" />

Les champs pour choix de fichier

Ils permettent de choisir un fichier à uploader. Pour les ajouter, mettez juste la
valeur de l’attribut type de votre bon vieux <input /> à file comme ceci :

<label for="photo">Photo de profil</label> : <input

type="file" name="image" id="photo" />

Autres types de champ

Avant d’aller plus loin, je vous demanderais gentiment: « il me semble que vous utilisiez
une ancienne version de votre/vos navigateur/s Web. Veillez le mettre à jour s’il vous plait
sans quoi nous ne pourrons continuer ce tutoriel ! »
 Les champs cachés: ils ne sont pas affichés dans le formulaire mais sont très
utiles lorsque la page n’utilise pas seulement HTML mais en plus un vrai
langage de programmation comme PHP ou JavaScript qui peut associer
dynamiquement une valeur à l’attribut value d’un champ input. On crée
ces champs comme ceci :
 <input type="hidden" name="cacher" id="cacher"
value="sa valeur" />

 Les champs d’e-mail: ajoutés depuis HTML5, ils permettent la saisie correcte
d’adresse e-mail dans les formulaires. Le formulaire ne pourra être validé que
si la valeur du champ respecte le format minimal d’e-mail requis ; c'est-à-dire
username@domain. Les Smartphones affichent un clavier adapté à ce type de
champ.

<input type="email" name="sonNom" id="sonId" />

Clavier de saisie d’e-mail sur Smartphone Androïde

 Les champs de nombre : HTML5, ils ne peuvent recevoir que des valeurs de
type nombre et possèdent deux attributs min et max permettant de limiter la
valeur possible à contenir dans ce champ, et un attribut step, avec un
nombre en valeur, permettant de définir l’intervalle de sélection si vous utilisez
le bouton associé au champ. Les Smartphones affichent un clavier adapté à ce
type de champ.

<input type="number" name="sonNom" id="sonId" />

 Clavier de saisie de nombre sur Smartphone Androïde

 Les champs de numéro de téléphone : HTML5, ils sont dédiés aux numéros de
téléphone. Les Smartphones affichent un clavier adapté à ce type de champ.

<input type="tel" name="sonNom" id="sonId" />

 Les champs d’URL : HTML5, ces champs sont réservés à la saisie d’URL. Le
formulaire ne sera pas validé si la valeur entrée n’est pas de type URL. Les
Smartphones affichent un clavier adapté.

<input type="url" name="sonNom" id="sonId" />

Clavier de saisie d’URL sur Smartphone Androïde

  Les champs à curseur: HTML5 ; attributs min, max, step comme pour
number; pour sélection de nombre à l’aide d’un slider.

<input type="range" name="blabla" id="blabla" />

 Les champs de couleur: HTML5, permettent de saisir une couleur dans le

formulaire par sélection à partir du panneau représenté sur la Figure suivante.

<input type="color" id="blabla" name="blabla" />

Panneau de sélection de couleur pour formulaire

 Les champs de recherche : HTML5, l’affichage dépend du navigateur, celui-ci

peut parfois intégrer une loupe au champ ou mémoriser les derniers thèmes de
recherches effectuées.

<input type="search" />

Sans oublier les attributs name, id, etc.

 Les champs de date : HTML5, permettent se saisir la date (jour, mois, année,
heure, minute, semaine) dans un formulaire. Plusieurs formats de date sont
disponibles.
 Champ de saisie de date (par sélection) sous Opera.

<input type="date" /> - format jj/mm/aaaa

<input type="time" /> - format hh :min
<input type="week" /> - pour la semaine
<input type="month" /> - pour le mois
<input type="datetime" /> - pour la date et l’heure avec
décalage horaire
<input type="datetime-local" /> - pour la date et
l’heure sans décalage horaire

Les champs type options

Ici le visiteur peut seulement faire des choix parmi une liste que vous lui
proposez. On distingue les cases à cocher, les cases d’options, les listes
déroulantes.

 Les cases à cocher : c’est le style sur la Figure suivante (exemple de cases)

Chaque case doit porter sa propre valeur à l’attribut name sans oublier que les
id restent UNIQUE ! On crée les cases à cocher comme ceci :

1 <form method="post" action="traiter.php">

2 <div>
3 <h3>A quoi pensez-vous? </h3>
4 <input type="checkbox" id="rien" name="rien"
/>Rien<br>
5 <input type="checkbox" id="car" name="voiture"
/>Voiture <br>
6 <input type="checkbox" id="website"
 name="website" />Site Web<br>
7 <input type="checkbox" id="avion" name="airbus"
/>Avion<br>
8 <input type="checkbox" id="dodo" name="dodo"
/>Dormir<br>
9 <input type="checkbox" id="xecret" name="xecret"
/>C'est un secret<br>
10 </div>
11 </form>

Exemple de case à cocher

 Les cases d’options : supposons qu’on vous demande votre sexe dans un
formulaire, vous allez répondre soit par Homme, soit par Femme mais pas les
deux en même temps et il n’y a pas d’autres réponses possibles. Dans ce cas,
les cases d’options sont adaptées. On les crée avec input et leur type est
radio

1 <form method="post" action="traiter.php">

2 <div>
3 <b>Sexe :</b> <br>
4 <input type="radio" id="male"
name="sexe" value="homme" />Homme<br>
5 <input type="radio" id="female"
name="sexe" value="femme" />Femme<br>
6 </div>
7 </form>

Essayez ! Vous ne pourrez pas cocher les deux en même temps. Notez aussi que
les input type radio portant sur le même thème doivent avoir la même valeur
à leurs attributs name et des valeurs différentes pour les attributs value.

 Les listes déroulants : Regardez ce cas par exemple où le visiteur doit choisir
son pays dans une liste de 178 pays que vous lui proposez, vous me diriez
 peut être que ça marcherait avec les radio ? bien sûr que Oui, ça
fonctionne plutôt bien puisqu’on choisit seulement 1 pays ! Mais ce n’est pas le
type adapté à cette tache. Pensez plutôt aux listes déroulantes parce qu’avec
les radio, votre page serait étoffée de noms de pays. Avec la magie des
listes déroulantes, vous ne verrez plus qu’un élément, celui qui est sélectionné.
Ça se passe comme ceci :

1 <form method="post" action="traiter.php">

2 <div>
3 <label>Pays</label>:
4 <select name="pays">
5 <option value="Côte d'Ivoire">Côte
d'ivoire</option>
6 <option value="Ghana">Ghana</option>
7 <option value="Mali">Mali</option>
8 <option value="Bénin">Bénin</option>
9 … … … … … … … …
10 </select>
11 </div>
12 </form>

La balise <select> constitue le cadre de la liste. Elle doit porter un attribut

name à valeur le nom de la select et éventuellement un attribut id. chaque
choix est ajouté à la liste avec la balise <option> à qui l’on doit ajouter un
attribut value avec en valeur le choix de l’utilisateur correspondant.
On peut également organiser les choix disponibles en catégories avec l’élément
<optgroup> qui porte un attribut label qui prend en valeur le titre de la
catégorie. Chaque choix dans la catégorie est placée entre l’ouvrante
<optgroup> et la fermante </optgroup>.

Un exemple :
1 <label for="pays">Pays</label>:
2 <select name="pays" id="pays">
3 <optgroup label="Afrique">
4 <option value="Côte d'Ivoire">Côte d'ivoire</option>
5 <option value="Ghana">Ghana</option>
6 <option value="Mali">Mali</option>
7 <option value="Bénin">Bénin</option>
8 </optgroup>
9 <optgroup label="Europe">
10 <option value="Allemagne">Allemagne</option>
11 <option value="Italie">Italie</option>
12 <option value="Espagne">Espagne</option>
13 <option value="France">France</option>
14 </optgroup>
15 <optgroup label="Asie">
16 <option value="Japon">Japon</option>
17 <option value="Chine">Chine</option>
18 </optgroup>
19 </select>

Le résultat est sur cette figure →

D’autres attributs utiles

Ces attributs permettent de mieux contrôler vos champs de saisie :

- autocomplete : valeur on ou off, par défaut à on et permet de gérer
l’auto complétion des champs du formulaire par le navigateur ;
- enctype : pour les formulaires contenant un champ
<input type="file" />, prend pour valeur multipart/form-data
- size : prend un nombre entier en valeur et gère l’épaisseur des champs
input ;
- maxlength : prend un nombre entier en valeur et définit la longueur
maximale de texte qu’on peut entrer dans ce champ input ;
 - value : prend en valeur le texte qui pré-remplit le champ input. Pour les
textarea, mettez ce texte entre <textarea> et <textarea> ;
- placeholder : prend en valeur le texte qui sert d’indication sur ce que ce
champ doit contenir, il disparait lorsque la zone de saisie est ciblée;
- readonly : pas de valeur et permet de définir un champ pour lecture seule,
pas de modification possible par le visiteur ;
- required : pas de valeur et définit un champ requis pour valider le
formulaire ;
- autofocus : pas de valeur, place le curseur automatiquement sur la zone
concernée après chargement de la page ;
- tabindex : prend un nombre entier en valeur et définit le nombre d’appui
nécessaire sur la touche Tab pour cibler la zone de saisie, un nombre unique
par champ !
- selected : pour les listes déroulantes, permet de sélectionner un élément
par défaut dans la liste ;
- checked : pour les cases à cocher (checkbox et radio) : permet de
cocher par défaut une case ;
- accept : pour les champs de sélection de fichier, permet de définir le type
de fichier pouvant être chargé par ce champ. Comme valeurs possibles:
application/* --- tout type application ;
appplication/xxxx --- spécifique à un type application xxxx
(exemple : application/pdf) ;
audio/* --- tout type audio ;
audio/xxxx --- spécifique à un type audio xxxx (exemple : audio/x-
mpeg) ;
image/* --- tout type image ;
image/xxxx --- spécifique à un type image xxxx (exemple : image/jpeg) ;
video/* --- tout type video ;
video/xxxx --- spécifique à un type vidéo xxxx (exemple :
video/quicktime).

Regrouper les champs du formulaire

Pour les formulaires assez longs, il est parfois intéressant de regrouper les champs en
classes avec la balise <fieldset> et à chaque classe, on associe un titre avec
<legend>.
Voyez cet exemple de formulaire qui demande de s’enregistrer sur un site:

1 <form method="post" action="traiter.php"

enctype="multipart/formdata" autocomplete="off" >
2 <fieldset><legend>Infos de base</legend>
3 <label for="prenom">Prénom:</label><br>
4 <input type="text" name="prenom" id="prenom"
required autofocus /> <br>
5 <label for="nom">Nom :</label><br>
6 <input type="text" id="nom" name="nom" required
/> <br>
7 <label for="naissance">Anniversaire:</label><br>
8 <input type="date" name="naissance"
id="naissance" required />
9 </fieldset>
10 <fieldset><legend>Infos supplémentaires</legend>
11 <label >Sexe:</label><br>
12 <input type="radio" name="sexe" id="male" />
<label for="male">Homme</label> <br>
13 <input type="radio" name="sexe" id="female" />
<label for="female" >Femme</label> <br>
14 <label
for="nationnalite">Nationnalité:</label><br>
15 <select name="nation" id="nation">
16 <optgroup label="Africaine">
17 <option value="civ">ivoirienne</option>
18 <option value="mal">malienne</option>
19 <option value="gha">ghanéene</option>
20 </optgroup>
21 <optgroup label="Asiatique">
22 <option value="jpn">japonnaise</option>
23 <option value="chn"
selected>chinoise</option>
24 </optgroup>
25 <optgroup label="Européene">
26 <option value="eng">anglaise</option>
27 <option value="esp">espagnole</option>
28 <option value="all">allemande</option>
29 </optgroup>
30 </select> <br>
31 </fieldset>
32 <fieldset><legend>Contacts</legend>
33 <label for="tel">Téléphone:</label><br>
34 <input type="tel" name="phone" id="tel" required
/><br>
35 <label for="email">E-mail</label><br>
36 <input type="email" name="mail" id="email"
required /> <br>
37 <input type="checkbox" name="newsletter"
value="oui" id="nwletter" checked /> Recevoir
les actualités de mon super site <br>
38 </fieldset>
39 </form>
Et ça donne:

Envoyer le formulaire

Félicitations! Votre formulaire est bien conçu, c’est parfait, tout y est! Sauf qu’il ne sert
pas à grand-chose actuellement. On finit de le remplir "opi on na ka fair koi ? "
On l’envoie. Mais à qui ? À « traiter.php » ; c’est pour cela qu’on a mis le chemin vers
« traiter.php » en valeur à l’attribut action de <form>.
Un bouton suffit pour dire à HTML d’envoyer votre formulaire au serveur. On le fait
comme ceci :

<input type="submit" value="Envoyer" />

Bouton d’envoi classique de formulaire

On personnalise le texte du bouton avec l’attribut value.

Il existe 3 autres versions de bouton pour formulaire.
 <input type="reset" value="Annuler" />
pour annuler (réinitialiser) le formulaire.

<input type="button" value="Envoyer" />

crée un bouton générique et n’aura aucun effet au clic. A ce type de bouton, il faut
associer des événements JavaScript pour faire fonctionner.

<input type="image" src="path/image.png"

value="Envoyer" />
crée un bouton d’envoi qui affiche l’image spécifiée avec l’attribut scr, le texte en
value à l’attribut value est affiché si l’image ne peut être affichée (mauvais chemin
ou image trop grande).

Notre formulaire est maintenant complet et prêt à être mis en service ! Je vous
rappelle que c’est avec un langage autre qu’HTML que vous pourriez récupérer les
informations du formulaire. Pensez à apprendre PHP par exemple.
CHAPITRE 2

LES FONDAMENTAUX DE CSS3 ET LA

MISE EN PAGE
 Rejoignez-nous maintenant sur www.inspirates.cf

MERCI D’AVOIR LU MON LIVRE JUSQU’ICI…

CECI EN EST LA VERSION DEMO.
SI VOUS SOUHAITEZ AVOIR LA VERSION COMPLETE, VEILLEZ COMMANDER
SUR LE SITE DE L’AUTEUR OU VIA FACEBOOK OU PAR E-MAIL OU APPEL/SMS.
VOUS TROUVEREZ LES DIFFERENTS CONTACTS EN DESSOUS.

LE PROJET INSPIRATES EST CREE ET MAINTENU PAR THE NIGHTWALKER X ET

BGK INJECTEUR Sqli ET A POUR OBJECTIF DE FAIRE UNE COMMUNAUTE
AFRICAINE DE GENS QUI PARTAGENT LA MEME PASSION : LE WEB ET SES
TECHNOLOGIES.

VOUS SOUHAITEZ CONTRIBUER ? CONTACTER-NOUS.

LIEN : http://www.inspirates.cf

CONTACTS :
Facebook.com/Akotia99
www.inspirates.byethost6.com/telechargements/
yaokahn@hotmail.com
(+225) 52 69 52 69 – sms
(+225) 88 14 88 84 - appel