Informatique pour SMP-S4

Le langage HTML

Abdelhakim ALALI

[email protected]

Mai 2012
 Comment fonctionne le Web ?

C'est un mécanisme client-serveur.

Le client demande un fichier, le serveur lui donne tel qu'il est stocké
– processus statique

Le serveur peut aussi générer un fichier en fonction de la demande

du client
– processus dynamique
 Ecrire pour le Web

Ce n'est pas uniquement écrire des pages en HTML, il faut penser

en terme de projet:

Définir le contenu
Trouver une arborescence ergonomique
Appliquer / Respecter la charte graphique
Produire les pages
Installer le site sur le serveur
Maintenance, politique de mise à jour
 HTML, l'origine

HTML Hyper Text Markup Language est né en 1989 sous

l'impulsion de Tim Berners Lee, " inventeur " du Web.

HTML est basé sur SGML (Structured Markup Language), qui est
une vieille norme utilisée pour la description de documents.Elle est
conçue pour les grosses documentations techniques.

HTML est une instance de SGML.

 HTML, les principes

Il contient des commandes, implémentées par des balises pour

marquer les différents types de texte (titres, paragraphe, listes …) ,
pour inclure des images, des formulaires, des liens …

C'est un langage à balisage qui décrit la structure logique d'un

document hypertexte. Il a volontairement été conçu pour être
simple.

Il a évolué vers un langage de description de pages offrant des

possibilités plus proches de la P.A.O.
 L'hypertexte

Le langage HTML permet de créer des documents interactifs grâce

à des liens hypertextes, qui relient votre document à d'autres
documents.

En cliquant sur une zone de texte (ou une image, un logo) mise en
évidence, on peut accéder à un nouveau document situé sur un
autre ordinateur en n'importe quel point du globe.
Exemple d’une page HTML
Exemple d’une page HTML (code source)
 Introduction au marquage - 1

Pour décrire un fichier hypertexte, le langage HTML

insère des balises dans le texte du document :

<marqueur> ici votre texte </marqueur>

Début de mise en forme Fin de mise en forme

Synonymes: marqueur, élément, tag.

 Introduction au marquage - 2

Ces balises peuvent être insérées n'importe où dans le texte, entre

2 phrases, mots, lettres …

<gras>Le <italique> cours </italique> HTML</gras>

Le cours HTML
 Introduction au marquage - 3

Il faut respecter une logique d'imbrication:

Bon:

<gras><italique> Le cours HTML </italique> </gras>

Mauvais:

<gras><italique> Le cours HTML</gras></italique>

 Introduction au marquage - 4

Le langage HTML est sensible à la casse, toujours

écrire en minuscules.
Bon:
<gras><italique> Le cours HTML </italique> </gras>

Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>

<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>

<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>

 Les attributs

Les balises peuvent posséder un ou plusieurs attributs qui permettent

de spécifier l'action de la balise. Toujours mettre la valeur de l'attribut
entre guillemets.
<marqueur attribut="argument">texte</marqueur>

<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

Exemple
<font face="verdana">Ce texte sera en verdana.</font>

Résultat
Ce texte sera en verdana.
 Les commentaires

<!–- Voici un commentaire HTML -->

<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes

-->
 Que choisir pour écrire de l‘ HTML?

A la main, avec un éditeur de texte

Simple Text, Notepad++, Bbedit,Emacs ,WordPad …

Avec un logiciel « assistant » au code HTML

PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC …

A l'aide d'un programme dit "WYSIWYG"

Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...

A l'aide d'un filtre

Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O.
 Que choisir pour lire HTML?

Le client doit pouvoir interpréter HTML et afficher le résultat. Ils

sont divers, tournant sur des systèmes différents:

– Netscape Navigator, Mozilla, Internet explorer, Safari, Opéra,

iCab, Emacs mode www, Amaya, Lynx, links, w3m …
 Note sur les caractères accentués

Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par

la norme pour afficher les caractères accentués ou spéciaux.
Ceux ci devront faire l'objet d'un codage spécial au sein du
fichier HTML.

é : &eacute; comme, s'écrit = s’ &eacute;crit

ê : &eacirc; comme, être s'écrit = &eacirc;tre s’ &eacute; crit

Les serveurs Web acceptent les caractères accentués de la

norme iso-8859-1. On spécifie l'encodage dans le fichier
HTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
 Structure de base d'un fichier HTML

<html>
<head>
… éléments d'en-tête
</head>
<body>
… éléments de corps
</body>
</html>

.
Une balise <html> contenant une seule balise <head> et une seule balise <body>.

Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques,
sous forme de blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc.

Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc
sont dits "éléments de ligne".
 Analyse des balises

<html> .. </html> Délimite le début et la fin du document

<head> .. </head> Entête du document, contient des méta- informations

Ex: <title>. .</title> titre du document

<meta> . .</meta> méta-informations
<script> . .</script> script ou référence

<body> . . </body> Corps du document

 Rappels

Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules.
Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules
et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur.
Les balises fermantes sont obligatoires.
Les éléments vides sont signalés par une balise spéciale. ( ex: <br />)
 Exercice

On utilisera Notepad++ en mode HTML

Vous mettrez vos pages dans un dossier sur le bureau :
mon_repertoire/

Créez un fichier HTML de base.

Pour visualiser le fichier:
file:///mon_repertoire/exemple_html2.html
Code source de exemple_html2.html
 Eléments de niveau bloc

<hn> . . </hn> Titre de niveau n, de 1 à 6

<p> . . </p> Paragraphe
 La mise en forme de texte -1

• Pour mettre le texte en gras on l'encadre de la balise <b> :

Texte en gras

<b>Ce texte s'affichera en gras.</b>

• Pour mettre le texte en italique on l'encadre de la balise <i> :

Texte en italique

<i>Ce texte s'affichera en italique.</i>

 La mise en forme de texte - 2

• Pour souligner le texte on l'encadre de la balise <u> :

Texte souligné

<u>Ce texte sera souligné.</u>

• Pour barrer le texte on l'encadre de la balise <s> :

Texte barré

<s>Ce texte sera barré.</s>

 La mise en forme de texte - 3

• Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :

Texte en rouge

<font color="#ff0000">Ce texte sera en rouge.</font>

Les couleurs peuvent être écrites de deux manières :

• En hexadécimal de type RVB et précédées d'un dièse (#) ;

Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu.
• Textuelles en anglais US ; Exemples : red, yellow, pink.
 La mise en forme de texte - 4

• Pour modifier la police du texte on utilise l'attribut face de la balise <font> :

Texte en verdana

<font face="verdana">Ce texte sera en verdana.</font>

• N.B: On a tendance à écrire des familles de polices plutôt

qu'une seule police. En effet, il se peut que sur un système
différent du vôtre la police choisie ne soit pas installée et il
faut qu'il puisse alors afficher le texte dans une police
proche de celle que vous vouliez avoir.
 Eléments de listes

On distingue cinq types de listes différents, 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.
 Eléments de listes : Les listes non ordonnées-1

Elles sont démarquées par la balise <ul> et chacun des items est entouré de
la balise <li> :
Exemple de liste non ordonnée: Résultat :

<p>Ma liste de courses :</p>

<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>
 Eléments de listes : Les listes non ordonnées-2

On va pouvoir jouer sur le design des puces à l'aide de trois types

différents. On renseigne le type des puces avec l'attribut type de la
balise <ul>.
Les types sont :
– disc (par défaut au niveau 1 d'imbrication) <ul type="disc"> …</ul>
– circle (par défaut au niveau 2 d'imbrication)
– square (par défaut au niveau 3 et suivants d'imbrication)
Dans l'exemple précédent, nous avons donc vu une liste non ordonnée
avec une puce de type disc.
 Eléments de listes : Les listes non ordonnées-3

Des disques, des cercles ou des carrés, c'est bien beau, mais si on veut une puce en forme de
flèche et de couleur bleue ?
Pour cela, rien de plus simple, il suffit d'utiliser une image pour remplacer la puce originale.
Cependant cette méthode n'est possible qu'à l'aide de CSS et de la propriété list-style-
image :

Exemple de liste non ordonnée CSS

<p>Ma liste de courses :</p> li

<ul> {
list-style-image : url(puce.gif);
<li>Champignons</li>
}
<li>Avocat</li>
<li>Dentifrice</li>
Résultat
<li>Céréales</li>
</ul>
 Eléments de listes : Les listes ordonnées-4

Elles sont introduites par la balise <ol> et chacun des items est
encadré par la balise <li> :
Exemple de liste non ordonnée: Résultat :

<p>Top 3 du tiercé :</p>

<ol>
<li>Jolly</li>
<li>Tonnerre</li>
<li>Tornade</li>
</ol>
Eléments de listes Les listes de répertoires-5

Elles sont encadrées par la balise <dir> et chacun des

items est compris dans la balise <li>.

Exemple de liste non ordonnée: Résultat :

<dir>
<li>css</li>
<li>fichiers</li>
<li>images</li>
<li>js</li>
</dir>>
 Eléments de listes : Les listes de menus-5

Elles sont représentées par la balise <menu> et chacun des items

est délimité par la balise <li> :
Exemple de liste non ordonnée: Résultat :

<menu>
<li>Accueil</li>
<li>Page 1</li>
<li>Page 2</li>
</menu>
 Eléments de listes : Les listes imbriquées-6

• L'imbrication des listes permet une présentation claire et détaillée

d'un menu ou d'un sommaire par exemple. On peut
• imbriquer les listes non ordonnées et ordonnées sans distinction et
même les mélanger :
 Eléments de listes : Les listes imbriquées-6

Exemple de liste non ordonnée: Résultat

<ol type="I">
<li>La genèse</li>
<li>La vie
<ol type="A">
<li>L'enfance</li>
<li>L'adolescence</li>
<li>Le passage à l'âge adulte
<ul>
<li>Le jeune adulte</li>
<li>La crise de la quarantaine</li>
</ul>
</li>
<li>La vieillesse</li>
</ol>
</li>
<li>La mort</li>
</ol>
 Les liens - 1

<a> . . </a> : Permet de la création d'un lien

hypertexte, ou vers un point d'ancrage du document

Principaux attributs:
• href = url

• name = chaîne de caractères

<a href = "href"> name </a>

 Les liens - 2

Création d'un lien hypertexte :

<a href = "http://www.fsbenmsik.ma/">Faculte
des sciences ben m’sik</a>

Création d'un lien vers un point d'ancrage du document

<a href = "monfichier.html#ref">Vers la référence</a>

 Les adresses URL

Les adresses du Web ou URL ( Uniform Resource Locator )

sont du type:

http://monsite.com/monfichier.html#mot

Le protocole: http
Le serveur: monsite.com
Le fichier: /monfichier.html
Un ancrage: #mot
 Les adresses URL

L'adresse indiquée dans le lien ( URL) peut être absolue, elle inclut
tout le chemin en commençant par le protocole:

http://www.monsite.com/monfichier.html

Ou relative, elle n'inclut qu'une partie du chemin:

Mon_repertoire/monfichier.html
 Eléments de ligne

<b>texte gras</b> texte gras

<i>texte italique</i> texte italique

<big>texte gros</big> texte gros

<small>texte petit</small> texte petit

Et aussi: br, code, sub, sup, span, u, strike …

 Les tableaux -1

• Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes

et de colonnes qui forment un ensemble de cellules.
• Les tableaux servent avant tout à présenter des données tabulaires
dont voici un exemple :

Etudiant informatique Mathématiques

Mohamed 14 12
jamal 8.5 13
 Les tableaux -2

<table> . . </table> : balise qui

Définit un tableau

Principaux attributs:
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
 Les tableaux -3

<tr> . . </tr> : Définit une ligne d'un

tableau

Principaux attributs :

align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
 Les tableaux -4

<td> . . </td> : Définit une cellule de

données

Principaux attributs :

align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
 Les tableaux -5

• Exemple :
• Résultat :
<table border="1">
<tr> Contenu de
<td>Contenu de la cellule</td> la cellule
</tr>
</table>
 Les images -1

<img> . . </img>

Insère une image

Principaux attributs:

align = left, bottom, middle, top, right

alt = text
border = n
height, width = n
src = url
 Les images - 2

Attention au poids des images, il est important d'optimiser son

fichier image.

Deux formats sont lus par les navigateurs, GIF ( Graphics

Interchange Format ) et JFIF ( JPEG File Interchange Format).On
utilise le GIF pour les illustrations, le JPEG pour les photos.
 Les droits d'auteurs

Attention aux droits sur les images.La seule image qui vous
appartient est celle que vous avez prise avec votre matériel photo.Il
faut aussi l'autorisation des personnes figurant sur la photo.

Attention à la portée des droits d'auteurs, surtout pour une utilisation

web

Attention aux images "libres de droits"

Lire les recommandations juridiques sur l'intranet.

 Exercices

• Importez une image

• Créez un tableau à 3 colonnes , 2 lignes.

• Créez un tableau à 1 ligne , 2 colonnes contenant une image et du

texte.
 Rappel

Pour décrire un fichier hypertexte, le langage HTML insère des

balises dans le texte du document :
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

Une balise <html> contenant une seule balise <head> et une seule
balise <body>.

Les balises que l'on va trouver dans le corps divisent le contenu en

sections logiques, sous forme de blocs ( paragraphes, liste,
tableaux, image …). On parle d'éléments de niveau bloc.

Les éléments qui représentent les propriétés du texte (<b>, <i>…)

qui figurent dans un bloc sont dits "éléments de ligne".
 Les formulaires

• Les formulaires servent à envoyer des données au serveur,

données remplies en général par un visiteur, que ce soit pour
l'inscription sur un site ou un formulaire de contact par exemple.
• Les formulaires sont dotés de divers contrôles comme des champs
de saisie, des boutons, des listes, etc, qui permettent au visiteur
d'interagir avec la page qu'il est en train de consulter.
Les formulaires : Exemple
 Les formulaires : La balise form

• Tous les champs d’ un formulaire quelqu'ils soient doivent se

trouver dans cette balise <form>.
• C'est cette balise qui va permettre de renseigner la page de
destination du formulaire, à l'aide de l'attribut action,
action qui peut
prendre pour valeur une URL en absolu ou en relatif, voire même
une adresse e-mail.
• La balise <form> est aussi utilisée pour préciser le mode d'envoi
des données, grâce à l'attribut method.
method
• Cet attribut prend deux valeurs différentes "get" et "post". Les
valeurs envoyées par "get" passent par l'URL, alors qu'en "post"
elles sont envoyées de manière transparente, c’est pourquoi on
préfèrera l'utilisation de la méthode d'envoi "POST"..
Les formulaires : La balise form
 Les formulaires : La balise form

Exemple de balise form

<form action="envoi-formulaire.php" method="post">
<!-- Contenu du formulaire -->
</form>
 Les formulaires : Les champs texte monolignes

• On distingue deux types de champs texte monolignes : les champs

de type "texte" et les champs de type "mot de passe".
• Le champ de type "texte" est l'élément de base d'un formulaire, il
permet d'entrer du texte court sur une ligne, comme un login, un e-
mail, ou autres alors que le champ de type "mot de passe" permet
de renseigner un mot de passe, dont l'affichage sera camouflé aux
yeux des autres personnes.
• Le champ de texte monoligne est caractérisé par la balise <input> et
l'attribut type dont la valeur sera "text" ou "password".
 Les formulaires : Les champs texte monolignes

Les attributs :
• name :le nom du champ, celui qui va nous permettre de retrouver la

valeur lors de l'envoi du formulaire.

• value : permet d'attribuer une valeur par défaut au champ,

• size : permet de préciser la taille du champ en nombre de caractères,

• maxlength : sert à limiter le nombre de caractères possibles,

readonly : prend pour seule valeur "readonly" et verrouille le champ,

• disabled : prend pour seule valeur "disabled" et permet de désactiver

le champ.
N.B.: Lorsqu'un champ est défini en "disabled", sa valeur n'est pas
envoyée au serveur.
Les formulaires : Les champs texte monolignes

Exemple de champs texte

<input type="text" size="5" name="code_postal"

maxlength="5">
<input type="text" name="nom_champ"
readonly="readonly" value="Champ vérouillé">
<input type="text" name="login" value="Entrez ici votre
login" size="20">
<input type="password" name="mdp">
 Les formulaires : Les champs texte multilignes

• Si vous souhaitez que vos visiteurs puissent saisir de longs textes,

comme des champs de commentaires pour des articles d'un blog
par exemple, il faudra se tourner vers l'utilisation de la balise
<textarea>.
• Contrairement au champ de texte monoligne, le textarea est une
balise double et son contenu est écrit entre les balises ouvrante et
fermante et non dans un attribut value.
 Les formulaires : Les champs texte multilignes

• Deux attributs sont nécessaires au <textarea> : rows qui contient le

nombre de lignes et cols qui contient le nombre de colonnes.
• On peut, tout comme le champ de texte monoligne, rajouter les
attributs name, readonly et disabled.
• L'attribut maxlength n'existe pas pour cette balise, et pour en limiter
le nombre de caractères il est possible de passer par du
JavaScript.
Les formulaires : Les champs texte multilignes

Exemple champs texte multilignes

<textarea name="commentaire" rows="5" cols="80"></textarea>

<textarea name="sujet" rows="6" cols="100">Texte par
défaut</textarea>
 Les formulaires : Les champs cachés

• Il nous arrivera souvent de vouloir envoyer des données au serveur

de manière transparente pour le visiteur. On utilisera alors un
champ caché, qui ne sera pas affiché dans le navigateur du visiteur
mais dont les données seront envoyées. Attention, cette balise
apparaît tout de même dans le code source de la page.
• Pour cela, on utilise la balise <input> avec "hidden" comme valeur
de l'attribut type.
• Il est aussi nécessaire de renseigner l'attribut name pour retrouver
ces données cachées du côté du serveur ainsi que l'attribut value
qui va contenir ces données.
 Les formulaires : Les champs cachés

Exemple de champ caché

<input type="hidden" name="clef" value="a182f7d8e844d956a65b18e84f">

 Les formulaires : Les champs de fichiers

• Pour permettre aux visiteurs d'envoyer des fichiers par

l'intermédiaire du formulaire, que ce soit en pièce jointe d'un e-mail
ou le chargement d'une image sur le serveur, on va utiliser la balise
<input> dont l'attribut type est renseigné à "file".
• Ceci fait, un champ avec un bouton "Parcourir" sera disponible.
Mais pour que le champ soit opérationnel, il faut impérativement
renseigner l'attribut enctype de la balise <form> à "multipart/form-
data".
• Il est aussi plus qu'utile de préciser l'attribut name du champ "file".
On peut aussi renseigner l'attribut size qui affecte la taille du champ
dans lequel sera écrit le nom du fichier.
 Les formulaires : Les champs de fichiers

Exemple de champ de fichiers

<input type="file" name="image">

 Les formulaires : Les champs de fichiers

• Il est également possible de limiter le poids du fichier en rajoutant

un champ caché dans le formulaire contenant le champ "file". Ce
champ caché doit avoir pour name la valeur "MAX_FILE_SIZE" et
pour value le poids maximum en octet.
Limitation du poids du champ file

<input type="hidden" name="MAX_FILE_SIZE" value="20000">

 Les formulaires : Les boutons radio

• Les boutons radio sont utilisés lorsque vous voulez laisser aux
visiteurs un choix et un seul parmi une liste de propositions. La
balise est alors <input> dont l'attribut type est renseigné à "radio".
• Ces boutons radio vont par groupe, c'est-à-dire qu'ils doivent avoir
le même nom pour un groupe de propositions.
• Le nom est renseigné avec l'attribut name.
• La valeur de l'attribut value va être transmise au serveur en fonction
du bouton choisi. Vous pouvez aussi forcer un bouton radio d'un
groupe à être coché au chargement de la page en lui mettant
l'attribut checked dont la seule valeur est "checked".
 Les formulaires : Les boutons radio

Exemples de groupes de boutons radio

<p>
<input type="radio" name="civilité" value="mlle"> Mademoiselle
<input type="radio" name="civilité" value="mme"> Madame
<input type="radio" name="civilité" value="mr"> Monsieur
</p>
<p>
<input type="radio" name="genre" value="homme" checked="checked"> Homme
<input type="radio" name="genre" value="femme"> Femme
<input type="radio" name="genre" value="et"> Alien
<input type="radio" name="genre" value="indéfini"> Indéfini
</p>
 Les formulaires : Les cases à cocher

• Les cases à cocher sont sensiblement identiques aux boutons radio,

mais permettent un choix multiple pour un groupe de propositions.
Les attributs sont identiques, à la différence que l'attribut type prend
pour valeur "checkbox".
 Les formulaires : Les cases à cocher
Exemple de cases à cocher
<form method="post" action="traitement.php">
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
<input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
</p>
</form>

Résultat
 Les formulaires : Les cases à cocher

• Un problème cependant, lorsque vous désignez un groupe de cases

à cocher par le même nom, seule la dernière sera envoyée au
serveur. Pour contrer cela, il suffit de rajouter des crochets ouvrant
et fermant au nom du groupe.
• Il indiquera au serveur qu'il s'agit d'un tableau de valeurs à
récupérer et non une seule valeur (comme dans le cas des boutons
radio). En revanche, dans le cas d'utilisation d'une case à cocher
unique (sans groupe), comme dans l’exemple précédent, les
crochets sont inutiles.
 Les formulaires : Les cases à cocher

Exemple de cases à cocher

<input type="checkbox" name="qualite[]" value="intelligent"> Intelligent

<input type="checkbox" name="qualite[]" value="beau"> Beau
<input type="checkbox" name="qualite[]" value="serviable"> Serviable
<input type="checkbox" name="qualite[]" value="fort"> Fort
<input type="checkbox" name="qualite[]" value="généreux"> Généreux
 Les formulaires : Les boutons

• Il existe deux balises différentes pour présenter les boutons : la

balise <input> et la balise <button>. La différence entre les deux est
que la balise <button> est double, donc qu'elle a une balise
ouvrante et une balise fermante alors que la balise <input> est
simple. Il est de plus possible des balises de mise en forme dans la
balise <button>.
• Il y a 4 types différents de boutons :
– Le bouton simple
– Le bouton d'envoi
– Le bouton image
– Le bouton effacer
 Les formulaires : Les boutons- Le bouton simple

• Il est défini par l'attribut type des balises <input> et <button> ayant
pour valeur "button".
• Ce bouton n'est utile que lors d'appel de scripts JavaScript au
moment du clic. Il n'a aucune autre fonction particulière.
 Les formulaires : Les boutons- Le bouton simple

Exemples de boutons simples

<input type="button" name="addition" value="Additionner" onclick="addition();">

<button type="button" name="multiplication"
onclick="multiplication();"><b>Multiplier</b></button>
 Les formulaires : Les boutons- Le bouton d'envoi

• Le bouton d'envoi sert, comme son nom l'indique, à envoyer les

données du formulaire au serveur. C'est celui qui va permettre de
valider le formulaire.
• Il est caractérisé par la valeur "submit" de l'attribut type des
balises <input> et <button>.
 Les formulaires : Les boutons- Le bouton d'envoi

Exemples de boutons d'envoi

<input type="submit" name="envoyer" value="Valider">

<button type="submit" name="soumettre">Soumettre<br>les réponses</button>
 Les formulaires : Les boutons- Le bouton image

• Le bouton image se comporte exactement comme un bouton

d'envoi, c'est-à-dire qu'il sert à la validation du formulaire.
• Il sert à personnaliser son bouton, dans le cas où l'on ne trouve pas
les boutons de base à notre goût.
• Il est défini par l'attribut type de la balise <input> ayant pour valeur
"image" et l'on renseigne l'adresse de l'image avec l'attribut src.
C'est le seul bouton qui ne peut pas être géré par la balise <button>.
 Les formulaires : Les boutons- Le bouton image

Exemple de bouton image

<input type="image" name="envoyer" src="adresse/de/l/image">

 Les formulaires : Les boutons- Le bouton effacer

• Ce bouton sert à réinitialiser toutes les valeurs du formulaire.

• Il est caractérisé par la valeur "reset" de l'attribut type des balises
<input> et <button>.
 Les formulaires : Les boutons- Le bouton effacer

Exemple de bouton effacer

<input type="reset" name="effacer" value="Effacer toutes les valeurs">

<button type="reset" name="effacer">Réinitialiser</button>
 Les formulaires : Les listes

• Les listes permettent de laisser un choix aux visiteurs, au même titre

que les boutons radio ou les cases à cocher, mais sont plus
pratiques lorsqu'il s'agit de proposer un grand nombre de choix.
• On distingue deux types de listes, les listes normales et les listes
déroulantes.
• Les deux sont introduites par la balise <select> qui comprend les
différents choix sous forme de balise <option> dont on renseigne la
valeur qui sera envoyée au serveur grâce à son attribut value.
 Les formulaires : Les boutons- Les listes

• On peut même suggérer une proposition par défaut en précisant

l'attribut selected de la balise <option> de notre choix.
• Par défaut, une liste est déroulante.
• On peut renseigner le nom de la liste avec l'attribut name.
 Les formulaires : Les listes

Exemple de liste

<select name="couleur_yeux">
<option value="bleus">Bleus</option>
<option value="bruns" selected="selected">Bruns</option>
<option value="verts">Verts</option>
<option value="noisettes">Noisettes</option>
<option value="gris">Gris</option>
<option value="vairons">Vairons</option>
</select>
Cette liste est donc une liste déroulante avec un seul choix possible parmi
les six proposés.
 Les formulaires : Les listes

• On peut rendre cette liste non déroulante en rajoutant l'attribut

size qui prend pour valeur le nom de choix à afficher, par
exemple "3".
Exemple de liste

<select name="couleur_yeux" size="3">

<option value="bleus">Bleus</option>
<option value="bruns">Bruns</option>
<option value="verts" selected="selected">Verts</option>
<option value="noisettes">Noisettes</option>
<option value="gris">Gris</option>
<option value="vairons">Vairons</option>
</select>
 Les formulaires : Les listes

• Ici encore, un seul choix est possible. Pour pouvoir proposer

plusieurs choix, comme dans le cas de cases à cocher, il suffit de
rajouter l'attribut multiple qui prend pour seule valeur "multiple".
Exemple de liste à choix multiple
<select name="matieres_preferees" size="5" multiple="multiple">
<option value="maths">Maths</option>
<option value="français">Français</option>
<option value="anglais">Anglais</option>
<option value="histoire">Histoire</option>
<option value="sport">Sport</option>
<option value="dessin">Dessin</option>
<option value="musique">Musique</option>
<option value="physique">Physique</option>
<option value="sciences naturelles">Sciences naturelles</option>
</select>
 Les formulaires : Améliorez l'accessibilité de vos
formulaires

• Pour améliorer l'accessibilité de vos formulaires aux handicapés,

malvoyants, quelques balises ont été créées et il est toujours bon de
les utiliser, d'autant plus qu'elles ne perturbent pas l'utilisation pour les
autres visiteurs et clarifient même la compréhension des formulaires.
• Il s'agit d'une part de la balise <fieldset> qui permet de grouper
logiquement des champs de formulaires de même nature. Par
exemple, pour un formulaire d'inscription vous pouvez grouper tous
les champs en rapport avec les informations personnelles du visiteur,
puis grouper tous les champs concernant ses loisirs, etc.
• La balise qui va permettre de donner ce nom au groupage de champs
est <legend>.
 Les formulaires : Améliorez l'accessibilité de vos
formulaires
•Ici encore, un seul choix est possible. Pour pouvoir proposer
plusieurs choix, comme dans le cas de cases à cocher, il suffit de
rajouter l'attribut multiple qui prend pour seule valeur "multiple".
Exemple de liste à choix multiple
<fieldset>
<legend>Informations personnelles</legend>
<!-- Ici divers champs sur les informations personnelles, comme la saisie du nom,
prénom et adresse --
> </fieldset>
<fieldset>
<legend>Loisirs</legend>
<!-- Ici divers champs sur les loisirs du visiteur, comme la musique et les films qu'il
aime etc --
>
</fieldset>
 Les formulaires : Améliorez l'accessibilité de vos
formulaires
• Il y a d'autre part, la balise <label> qui permet de donner un libellé à
un champ de formulaire en les associant à l'aide de l'attribut for de
cette balise qui doit être identique à l'attribut id du champ auquel elle
est rattachée. Le texte mis dans le label est alors cliquable.

Exemple de liste
<label for="nom">Votre nom</label> <input type="text" name="nom" id="nom">
Aimez-vous la viande ?
<label for="oui">Oui</label> <input type="radio" name="viande" id="oui">
<label for="non">Non</label> <input type="radio" name="viande" id="non">
 Exercice

• Créer un formulaire HTML où vous mettez vos coordonnées :Nom,

prénom, e-mail et votre souhait.
 Les scripts

Les scripts sont de petits programmes en JavaScript ou en VBScript

exécutés côté client qui augmentent l'ergonomie de vos pages
lorsqu'ils sont utilisés à bon escient.
On distingue deux moyens d'inclure des scripts :
– Les scripts externes.
– Les scripts internes.
 Les scripts - Les scripts externes

Les scripts externes sont des fichiers externes à la page, avec

l'extension .js par exemple pour les scripts JavaScript.
On les inclut grâce à l'attribut src de la balise <script> :

Balise script

<script type="text/javascript" src="chemin/du/fichier/javascript.js"></script>

 Les scripts - Les scripts internes

Les scripts internes sont des morceaux de code directement écrits

entre les balises <script> et </script>. Ils sont donc insérés
directement dans la page comme suit :

Balise script
<script type="text/javascript">
function maFonction()
{
/* du code ici */
}
</script>
 Les styles

Les feuilles de style en cascade ou CSS (Cascading Style Sheets)

s'utilisent pour mettre en page notre code HTML.
On distingue deux moyens d'inclure CSS :
– Les styles externes
– Les styles internes
 Les styles- Les styles externes

Il y a deux manières d'importer un fichier CSS externe, soit avec une

balise HTML, soit avec du code CSS.
Import avec une balise HTML
<link rel="stylesheet" type="text/css" href="chemin/du/fichier.css">

Import avec du code CSS

<style type="text/css">
@import url("chemin/du/fichier.css");
</style>
 Les styles- Les styles internes

Les styles internes à la page sont à écrire entre les balises <style> et
</style> :

Import avec du code CSS

<style type="text/css">
body
{
background-color : #fff;
}
</style>
 Les meta

Les balises meta, obligatoirement placées dans la balise <head>,

permettent de renseigner diverses informations sur la page en
cours, comme son auteur, une courte description du document, des
mots-clefs, la date de création, son jeu de caractère (ou encodage),
etc.

On peut différencier deux grandes familles de balises meta :

– Les meta name : Touchent toutes les informations concernant le document,
l'auteur, le site, les outils utilisés, etc.
– Les meta http-equiv : Concernent les meta qui communiquent avec le
navigateur.
 Les meta

• S'il existe de nombreuses balises meta différentes, la plupart sont

inutiles, et de ce fait totalement facultatives.
• Pour garder la validité W3C de votre page, seule la balise
concernant son encodage est nécessaire.
• Il y a quelques années, certaines balises étaient indispensables
pour le référencement de son site Web, comme la description et les
mots-clefs, cependant, les techniques de référencement étant en
perpétuelle évolution, aujourd'hui leur intérêt est minime.
 Les meta - La balise meta content-type

Cette meta est la plus importante et la seule obligatoire pour passer la

validation W3C.
• meta content-type : Précise le type MIME de la page ainsi que le

jeu de caractères utilisé (encodage).

Exemple

<meta http-equiv="content-type" content="text/html; charset=utf-8">

 Les meta - Ajoutez des infos sur vous

meta author : Renseigne le prénom et nom de l'auteur de la page

courante. S'il y a plusieurs auteurs, les séparer d'une virgule.
Exemple
<meta name="author" content=“Khalid Mohamed“>

meta publisher : Renseigne le prénom et nom de l'éditeur du site. S'il

y a plusieurs éditeurs, les séparer d'une virgule. Dans le cas d'une
société, il faut renseigner son nom.
Exemple
<meta name="publisher" content=“Khalid Mohamed“>
 Les meta - Ajoutez des infos sur vous

• meta contactname : Spécifie le nom de la personne à contacter.

Exemple
<meta name="contactname" content=« Khalid Mohamed">

• meta contactorganization : Indique le nom de la société détentrice

du site.

Exemple
<meta name="contactorganization" content="MaSociété SARL">
 Les meta - Ajoutez des infos sur vous

• meta reply-to: Définit l'adresse e-mail de l'auteur de la page.

Attention, cette balise est scannée par les robots spammeurs !
Exemple
<meta name="reply-to" content=“khalid at monsite dot com">

• meta contact : Définit l'adresse e-mail de la personne ou service à

contacter. Attention, cette balise est scannée par les robots
spammeurs !
Exemple
<meta name="contact" content="contact at masociete dot com">
 Les meta - Ajoutez des infos sur vous

• meta contactstreetaddress1 : Indique la première ligne de

l'adresse de l'auteur ou de la société détentrice du site.
Exemple
<meta name="contactstreetaddress1" content="15 rue de france">

• meta contactstreetaddress2: Indique la deuxième ligne de

l'adresse de l'auteur ou de la société détentrice du site.

Exemple
<meta name="contactstreetaddress2" content="Bâtiment A, Etage 3">
 Les meta - Ajoutez des infos sur votre site

• meta description: Courte description du site qui sera affichée dans

les résultats de la plupart des moteurs de recherche. Ne pas
dépasser les 200 caractères sous peine de voir la description
tronquée.
Exemple
<meta name="description" content=« Cours HTML sur les éléments fondamentaux à
savoir pour bien débuter la programmation>

• meta identifier-url : Renseigne l'URL d'entrée du site.

Exemple
<meta name="identifier-url" content="http://www.courshtml.ma/">
 Les meta - Ajoutez des infos sur votre site

• meta keywords :Contient une liste de mots-clefs sur lesquels les

moteurs de recherche vont se référer. Les mots-clefs sont séparés
par une virgule. Avoir trop de mots-clefs peut être considéré par les
moteurs comme du spam, donc ne pas dépasser les 500 caractères..
Exemple
<meta name="keywords" content="cours html, balise meta, formulaires, listes, tableaux,
cadres">

• meta subject : Expose le sujet de votre site en quelques mots.

Exemple
<meta name="subject" content="Site d'apprentissage du HTML">
 Les meta - Ajoutez des infos sur la création

• meta copyright : Indique le ou les copyrights auxquels la page est

soumise.

Exemple
<meta name="copyright" content="© 2012 Khalid Mohamed">

• meta generator : Déclare quels sont les logiciels utilisés pour faire
le site. Les différents logiciels sont séparés d'une virgule.
Exemple
<meta name="generator" content="Notepad++, Gimp">
 Les meta - Ajoutez des infos sur la création

• meta copyright : Indique le ou les copyrights auxquels la page est

soumise.

Exemple
<meta name="copyright" content="© 2012 Khalid Mohamed">

• meta generator : Déclare quels sont les logiciels utilisés pour faire
le site. Les différents logiciels sont séparés d'une virgule.
Exemple
<meta name="generator" content="Notepad++, Gimp">
 Les meta - Ajoutez des infos sur la création

• meta date-creation-ddmmyyyy: Indique la date de création de la

page sous la forme JJMMAAAA.

Exemple
<meta name="date-creation-ddmmyyyy" content="01122007">

• meta content-script-type : Précise le langage de scripts utilisé

dans la page par son type MIME..
Exemple
<meta http-equiv="content-script-type" content="text/javascript">
 Les meta - Orientez les robots

• meta 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,
noarchive Interdit aux moteurs de recherche de proposer une
version de cache de la page.
 Les meta - Orientez les robots

Exemple

<meta name="robots" content="index, nofollow, noarchive">

 Les meta - Orientez les visiteurs

• meta refresh : Permet de rafraichir la page toutes les x secondes où

x est la valeur de content. Si une URL est renseignée, alors la
navigateur redirigera le visiteur au bout de x secondes vers la page
indiquée.
Exemple
<meta http-equiv="refresh" content="60">
<meta http-equiv="refresh" content="0; url=http://j-willette.developpez.com/">

• meta set-cookie : Crée un cookie sur l'ordinateur du visiteur.

Exemple
<meta http-equiv="set-cookie" content="dejavenu=oui; path=/; expires=Thursday, 14-
April-08 00:00:00 GMT">