Cours HTML

ENSAM
– Casablanca –
CRÉATION DE SITES WEB

Sommaire
Chapitre 1 : LE WEB
Chapitre 2 : LE LANGAGE HTML

Chapitre 1.
LE WEB
Chap 1. Le Web
1.1. Définition
 Le Web est un nom donné à l’ensemble hyperdocumentaire formé par la
totalité des documents disponibles sur Internet à travers un protocole
particulier : HTTP.
Chap 1. Le Web
1.2. Définition2
 Le Web est assemblage de technologies diverses. Chaque technologie s’occupe
d’un problème ou aspect particulier de la chaîne.
 Normes de contenu : XHTML, HTML, CSS, XML
 Automatisation de contenu : Javascript, VBScript
 Transformateurs : XSL
 Processeurs : Perl, Php, Python, ASP
 Templating: CMS
Chap 1. Le Web
1.3. Principe
 Le principe central du Web, c’est la transaction HTTP :
 Un émetteur (client) envoie une REQUETE
 Un serveur y répond.
 C’est une généralisation du « client-serveur » à partir de technologies

publiques.
Chap 1. Le Web
1.4. La requête
 Un message court et formaté
 Sa construction suit une norme HTTP
 Demande un document à travers une URL (GET)
 Dépose des données sur le serveur (POST)

Chap 1. Le Web
1.5. URL (Uniform Resource Locator).

 Un URL est le moyen de nommer un objet dans le monde WWW. La syntaxe
d'un URL est la suivante :
type:serveur:port/chemin_d'acces/fichier#etiquette?parametres
Le type de serveur :
http : pour les URL provenant de serveurs WWW
ftp : pour les fichiers à transférer
telnet : pour ouvrir une session interactive
Chapitre 2.
LE LANGAGE HTML
Chap 2. Le langage html
2.1. 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
2.2. 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.

2.3. 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.
2.4. 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 a un nouveau document situé sur un autre
ordinateur en n'importe quel point du globe.
2.5. 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, balise.

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
Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<gras><italique> Le cours HTML</gras></italique>


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>

2.6. 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>

2.7. Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
2.8. Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte

Simple Text, 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 ...
2.9. 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,
 Opera,
 iCab,
 Emacs mode www,
 Amaya,
 Lynx,
 links,
 w3m …
2.10. 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.
 é s'écrit é
 être s'écrit &eacirc;tre
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=utf-8" />
2.11. Structure de base d'un fichier HTML
<html>
<head>
… éléments d'en-tête
</head>
<body>
… éléments de corps
</body>
</html>
o Une balise <html> contenant une seule balise <head> et une seule balise <body>, SAUF
pour les pages comprenant des frames.
2.12. 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 de la fenêtre dans laquelle la page s’affiche

<meta> . .</meta> méta-informations sur le document
<script> . .</script> script ou référence
<body> . . </body> Corps du document

Rappels
Les balises sont sensibles à la casse et sont écrites 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 balises vides sont signalées par une balise spéciale. ( ex: <br />)
Un peu plus loin dans HTML
<html>
<head>
<title>Mon deuxieme fichier</title>
</head>
<body>
<h2>Hello World</h2>
<p>
L'emplacement de votre nouveau matériel est-il à proximité (moins de 5m) d'une prise
réseau libre ? Si oui, relevez le numéro de la prise (il est écrit sur une plaque de
céramique bleue, il faut respecter la distinction entre lettres majuscules et minuscules). Sinon, il
faut faire installer une nouvelle prise par le Service Travaux, auquel vous devrez adresser un bon de session
interne. La suite des opérations aura lieu quand vous aurez une prise disponible. Dans le doute,
interrogez par courrier électronique [email protected] </p>
<p>Votre demande doit nous parvenir par l'intermédiaire du correspondant informatique de votre
Unité. Elle se composera de deux parties : un bon de session interne envoyé au Service
Informatique Scientifique et un courrier électronique adressé à
[email protected] qui contiendra toutes les informations utiles (dont le numéro du bon de
session). </p>
<ol>
<li> le premier élément
<li> le deuxième élément
<li> le troisième élément
</ol>
<p><a href="http://www.ucd.ac.ma">Vous trouverez ici la suite du texte !! </a></p>
</body>
</html>
Résultat
2.13. Eléments du langage HTML

1- Les délimiteurs
<div> . . </div> Division de bloc
<p> . . </p> Paragraphe
<br> Saut à la ligne
Et aussi: address, blockquote, hr, pre


2- Les styles
<hn> . . </hn> Titre de niveau n, de 1 à 6


3- L'alignement
Pour centrer le texte

<center> … </center>
Ou alors
<P align="right">…</P>
<P align="center">…</P>
<P align="left">…</P>
<P align="justify">…</P>
Retrait de texte
<BLOCKQUOTE>…</BLOCKQUOTE>

4- Les séparateurs
* Les caractères "espace", "tabulation" et "retour à la ligne" sont

considéré comme un seul espace.
* Plusieurs espaces consécutifs : seul le premier est pris en compte.
* Pour afficher plusieurs espaces il faut utiliser l'entité caractère:


5- Mise en forme des caractères
* Spécification d’une police locale
<FONT FACE="police1[,police2,…]SIZE="s|+s|-s
"COLOR="#RRVVBB">...
</FONT>
* FACE : la première police installée est utilisée. Ne proposer que des polices dont
on est sûr qu'elles sont disponibles sur l'ordinateur de consultation :
- Arial/Helvetica
- Times New Roman/Times
* SIZE: taille de la police
- 1…7(taille absolue)
- +1,+2...(taille relative par rapport à la valeur par défaut)
* COLOR : détermine la couleur des caractères


6- Eléments de listes
<ul> . . </ul> Liste non triée, liste à puces

<ol> . . </ol> Liste triée, liste à numéros
<li> Elément de la liste
Principaux attributs:
start = valeur de départ (n), Permet de démarrer la numérotation à une
valeur spécifique autre que 1
type = type d’ordre

listes ordonnées (A, a, I, i, 1), changer le type de numérotation
listes non ordonnées (disc, circle, square), choisir la forme de la puce
Et aussi: menu, dir, dl, dt, dd

7- Balises de ligne
<b>texte gras</b> texte gras

<i>texte italique</i> texte italique
<U> texte souligné </U> texte souligné
<big>texte gros</big> texte gros

<small>texte petit</small> texte petit
Et aussi: br, code, sub, sup, span, strike …

8- Les liens - 1
<a> . . </a>
Création d'un lien hypertexte
href = url
name = chaîne de caractères
Exemple :
<a href = "http://www.ensam-casa.ma">ENSAM </a>
8- Les liens - 2
ou vers un point d'ancrage du document

<a name = "ref" >référence</a>
<p>
.
<p>
.
.
.
<p>
.
<a href = "monfichier.html#ref">Vers la référence</a>
8- Les liens - 3
Courrier électronique
L'adressage de courrier est possible en HTML de deux manières différentes selon que l'on utilise
les formulaires ou non. La première façon est d'utiliser la commande suivante:
<a href="mailto:[email protected]">contactez moi</a>

8- Les liens - 4
Les adresses du Web ou URL ( Uniform Resource Locator ) indiquées dans « href »,
sont du type:
http://www.ensam-casa.ma/3ISI/Cours/intro-html.html#Lien
Le protocole: http
Le serveur: ensam-casa.ma
Le fichier: 3ILM/Cours/intro-html.html
Un ancrage: #Lien
8- Les liens - 5
L'adresse indiquée dans le lien ( URL) peut être absolue, à utiliser lorsque
le document appelé n’est pas situé sur le même site que le document
appelant, elle inclut tout le chemin en commençant par le protocole.
Ou relative, à utiliser lorsque le document appelé est situé sur le même

site que le document appelant, elle n'inclut qu'une partie du chemin:
Mon_repertoire/monfichier.html
.
“ ” : fichier en cours
“..” : fichier parent

9- Les tableaux -1
<table> . . </table>
englobe tous les éléments du tableau.
align = Contrôle l'alignement ( left, center, right, justify )

bgcolor = détermine la couleur du tableau. ("#xxxxxx")
border = largeur de la bordure autour du tableau, en pixels ( 0 : invisible )(n)
cellpadding = espacement dans les cellule(n) (en pixels)
cellspacing = espacement entre les cellules (n)
width = largeur du tableau ("x%"|"x"),
height= Hauteur du tableau ("x%"|"x")
frame = définit les côtés visibles d'un tableau ( void, above, below, hsides,
lhs, rhs, vsides, box, border )
rules = définit la manière dont on va appliquer l'attribut frame ( none, groups,
rows, cols, all )
Autres attributs:
Background, bordercolor, bordercolordark, bordercolorlight,
class, dir, id, lang, style
9- Les tableaux -2
Remarques :
• En principe, la taille du tableau et celle des cellules qui s'adaptent
automatiquement à l'encombrement des données. Cependant, il est possible de
contrôler la taille exacte du tableau en utilisant l'attribut width avec des valeurs
en pixels ou en pourcentage.
• Il est possible d'imbriquer des tableaux ( placer un tableau à l'intérieur d'une
cellule ).
• Il est possible d'insérer des images dans les cellules d’un tableau ou d'en colorer
le fond.
 Balises associées : caption, col, colgroup, tbody, td, tfoot, th, thead, tr
9- Les tableaux -3
<caption > </caption>
La balise HTML CAPTION permet de mettre un titre au tableau.

L'interprétation de la balise HTML CAPTION est très différente suivant le navigateur.
Principaux attributs :
Align = (top, bottom, left, right)

class
dir
id
lang
style
9- Les tableaux -4
<colgroup > </colgroup>
 La balise HTML colgroup permet de faire un groupe de colonne d'un tableau

pour leurs assigner les mêmes propriétés
 La balise HTML colgroup est utilisée avec la balise HTML col.
Exemple :
<table border="1" >
<colgroup>
<col width="50px" aling="center" />
<col width="100px" aling= "left" />
</colgroup>
<tr>
---
---
</tr>
</table>
9- Les tableaux -5
<tbody > </tbody>
 permet de définir un ensemble de lignes comme le "corps" du tableau.

 tbody est utilisée avec tfoot et thead respectivement "pied" et "entête" de tableau.
align
class
dir
id
lang
style
title
Valign = (top, middle, bottom, baseline)
9- Les tableaux -6
<tr> . . </tr>
(Table Row) renferme les éléments descriptifs d'une ligne de tableau.
align = (left,center,right, justify)

valign = (top, middle, bottom)
border = (n)
background
bgcolor
class
dir
id
lang
style
9- Les tableaux -7
<td> . . </td>
 (Table Data) Définit une cellule de données
 La balise HTML et XHTML TD est contenu dans la balise HTML et XHTML <TR>.
align
valign
bgcolor
colspan, rowspan = (n)
height, width = (n)
background = (URL/Image.gif)
class
dir
id
lang
nowrap = spécifie qu'il ne doit pas avoir de rupture de ligne dans la cellule.
style
valign
width
9- Les tableaux -8
<th> </th>
 (Table Header) définit une cellule titre du tableau, généralement située dans la première
ligne ou colonne du tableau.
align
class
dir
id
lang
style
title
Valign = (top, middle, bottom, baseline)
10- Les images - 1
<img> . . </img>
HTML permet d'insérer des images dans les documents. Pour cela il faut
employer la balise vide <img>
Les attributs sont :
src = endroit où l'image se trouve sur le web (url)

alt = description courte de l'image, texte apparaissant dans une info-
bulle quand la souris est positionnée pendant 1 à 2 secondes sur l'image.
align = précise l'alignement vertical et horizontal(bottom, middle,

top, left, right)
10- Les images - 2
Attention au poids des images, il est important d'optimiser son fichier image.
Trois formats d'image peuvent être mis sur l'internet :- le format GIF, il est utilisé
pour des images contenant peu de couleur. En effet le nombre de couleur dans le
gif est de 256 dont une couleur transparente.- le format JPG, il est utilisé pour les
des images contenant beaucoup de couleur, une photo par exemple.- le format
PNG, concurrent du gif il peut contenir plus de couleurs que le gif. Cependant, il
reste encore peu utilisé.
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.
10- Les images - 3
 attributs de positionnement
vspace
height
hspace
border
width
10- Les images - 4
Images réactives
Les images réactives permettent à l'internaute de naviguer de manière plus

conviviale via des liens.
Une image réactives est décomposée en différentes parties permettant
d'accéder à des pages différentes.
Etant donné que l'utilisateur doit savoir où cliquer, les différentes parties
doivent être séparées correctement.
10- Les images - 5
Une image réactive est définie par les balises <map> et </map>.
<map name="nomdelamap">
<area [shape="forme"] coords="x,y,..." [href="url"] [nohref]>
</map>
La balise <area> permet de définir chaque région. Les attributs de la balise <area> sont
les suivants :
- shape : permet de définir la forme d'une région (rect, poly, circle, default).
- coords : définit une liste de coordonnées séparées par une virgule de la région.
- href : définit l'URL de la ressource internet à laquelle la région est liée.
- nohref : indique que la région est une zone qui n'est liée à aucune ressource internet.
Pour référencer une image réactive une fois celle-ci construite, vous devez utiliser la
balise suivante :
<img src="monimage.gif" usemap="#nomdelamap">

10- Les images - 6
Exemple
Source Résultat
<map name="mamap">
<area shape="rect" coords="0,0,50,50" href="news.htm">
<area shape="rect" coords="51,0,100,50"
href="contact.htm">
<area shape="rect" coords="101,0,150,50"
href="apropos.htm">
</map>
<img src="monimage.gif" usemap="#mamap">
Remarque
Si vous souhaitez prendre en compte les navigateurs qui ne supportent pas les images
réactives, utilisez :
<a href="menutexte.htm">
<img src="monimage.gif" usemap="#mamap"></a>
Ainsi, si l'utilisateur clique sur l'image, il verra un menu texte lui permettant de choisir
une URL.
Un fichier différent …
<html>
<head>
<title>des cadres</title>
</head>
<frameset cols="25%,75%">
<frame name="menu" src="menu.html" scrolling="yes">
<frame name="cible" src="cible.html" scrolling="no">
<noframes>
<body>
message pour les navigateurs ne supportant pas les cadres
</body>
</noframes>
</frameset>
</html>
11- Les cadres (Les frames) -1
Ils permettent de diviser la fenêtre principale du navigateur en plusieurs sous

fenêtres de taille réduite, chacune d'entre elles affichant un document
différent.
Utilisation: Au moins une des divisions est généralement employée pour
afficher un menu de parcours du site.
Pour créer une page contenant des frames:
 Définir le découpage (FRAMESET).
 Définir le contenu des cadres (pages HTML classiques).
Certains navigateurs ne les supportent pas, il est possible de les désactiver, il

faut donc prévoir un fichier de substitution inscrit entres les balises:
<noframes> .. </noframes>
<FRAMESET ROWS|COLS="d1[,d2,d3…],*«
BORDER="b"
FRAMEBORDER="YES|NO"
FRAMESPACING="fs">
ROWS|COLS="d1[,d2,d3…],*"
• ROWS : division en lignes (horizontale)
• COLS : pour une division en colonnes (verticale)
• d1[,d2, d3…] : indique la hauteur (largeur) en pixel de chaque ligne
(colonne) ; le séparateur de valeurs est la virgule.
* permet d'attribuer à la dernière ligne (colonne) tout l'espace restant.
Contenu de <FRAMESET>…</FRAMESET>
• Chaque FRAMESET contient autant d’éléments <FRAME> que
d'arguments dans l'option ROWS ou COLS.
• Chaque <FRAME> indique quelle page afficher.
12- Les feuilles de style
12.1- Généralités-1
 Elles viennent compléter le document HTML pour donner des

instructions générales de présentation.
 Elles permettent de définir les propriétés de couleur, de font, de taille,

d'espacement... des caractères.
 L'avantage qu'elle présente est de permettre une maintenance et une

évolution simples des sites web en séparant la structure (HTML) de la
présentation (feuille de style).
12.1- Généralités-2
 Elles permettent de donner plusieurs présentations à un document HTML :
Feuille de
style 1 Présentation 1
Document Feuille de
Présentation 2
HTML style 2
Feuille de
style 3 Présentation 3
12.2- CSS
 Les feuilles de style utilise le langage CSS2 (Cascading Style Sheets level 2).
 Elles sont composées d'un ensemble de déclarations elles-mêmes composées

de deux parties : sélecteur + bloc de déclaration
 Les sélecteurs correspondent soit:
 à des noms de balises HTML, on peut écrire body{ color : red;} le corps du
document sera écrit en rouge.
 à des noms de classes .description{font-style : oblique;} tous les textes contenus

dans des balises avec l'attribut class="description" sont obliques.
12.3- Syntaxe
 Les blocs de déclaration sont de la forme :
{
propriété 1 : valeur 1;
propriété 2 : valeur 2;
...
propriété n : valeur n;
}
12.4- Quelques propriétés de base
 color : #xxxxxx couleur du texte

 background-color : #xxxxxx couleur du fond
 font-family : nom_font police de caractères
 font-size : taille taille des caractères
 font-style : normal | italic | oblique présentation du texte
 font-weight : nomal | blod | bolder | lighter | 100 | 200 |...|
900 épaisseur du trait d'écriture
 align : left | right | center | justify alignement horizontal
 vertical-align : baseline | sub | super | top | text-top | middle
| bottom | text-bottom | longueur | x% alignement vertical
12.5- Les unités de longueurs
Unité Nom Description

cm centimètre
mm millimètre
in pouce (inch) 1in = 2.54 cm
pt point 1pt = 1/72in
pc pica 1pc=12pt=1/6in
em valeur de font- size
ex e
hauteur de la lettre x dans lapolice courante
px pixel dépant de la définition de l'écran
12.6- Utilisation des feuilles de style-1
 Les styles peuvent être insérés de trois façons dans un document

HTML :
 dans l'en-tête :
<head>
<title>...</title>
<style type="text/css" >
h1 { color : blue }
</style>
</head>
 Dans un lien contenu dans l'en-tête :
<head>
<title>...</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 les informations sur le style étant contenues dans le fichier style.css.

 comme argument de l'attribut style d'une balise :
<balise style="prop 1 : val 1 ; ... ; prop n : val n;">

…
</balise>
Exemple:
<td style= "font-weight : blod;”>
12.7- Cascade
 Plusieurs feuilles de style peuvent s’appliquer simultanément :
 Plusieurs balises <link rel="stylesheet">
 Directive @import d’une feuille de style @import url(feuille_annexe.css);
 Au sein même d’une feuille de style, plusieurs règles peuvent être en conflit.
 Cascade : mécanismes gérant ces conflits.

12.7- Cascade
 Dans le cas où un paramètre est défini plusieurs fois, la valeur est la dernière qui
lui a été donné.
 Exemple :
<html>
<head>
<style type="text/css">
h1 { color : blue }
</style>
</head>
<body>
<h1 style="color : red ;">Cours 2018</h1>
</body>
</html>
 se présente comme ceci : Cours 2018

12.7- Cascade
 Cela permet d'utiliser plusieurs feuilles de style sans pour autant créer de conflit :
<head>
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="style2.css" type="text/css">
</head>
12.8- Héritage
 Les styles des balises extérieures influent sur ceux des balises intérieures ; le code :
<p style="color:red;">code 1<b>code 2</b></p>
 est représenté par : code 1 code2
 On dit que le code 2 a hérité sa couleur de la balise <p>
 NB : si la balise <b> avait eu un style spécifiant que le texte devait être de couleur
verte on aurait bien sûr eu le rendu : code 1 code2
12.9- Les sélecteurs -1
1. Les Sélecteurs simples, multiples, universel
 Sélecteur simple : nom d’une balise.
 Sélecteur multiple : plusieurs sélecteurs séparés par des virgules ou des +
 Sélecteur universel : ‘*’, sélectionne tout.
Exemples
 ul { color: blue; } met l’ensemble du contenu des listes non ordonnées en

bleu.
 h1,h2,h3,h4,h5,h6 {color: red;} (ou h1+h2+h3+h4+h5+h6) met

l’ensemble des titres de rubrique en rouge.
 * { color: black; } met tout en noir. Dans ce cas précis, on préférera une
règle body { color: black; } .
2. Les Sélecteurs de classes
Sélecteur de classe : nom d’une classe, préfixée d’un ‘.’, tel qu’il apparaît dans un
attribut class d’une balise HTML.
Exemples
 .personne { font-weight: bold; } met l’ensemble des balises de classe
personne en gras.
 p.comment { font-style: italic; } met l’ensemble des balises <p> de

classe comment en italique.
3. Les Sélecteurs d’identifiants
Identifiant : défini par l’attribut id d’une balise HTML. Similaire aux classes, mais il ne
peut y avoir qu’une seule balise ayant un id donné dans tout le document HTML.
Sélecteur d’identifiant : nom d’une classe, préfixée d’un ‘#’, tel qu’il apparaît dans un
attribut id d’une balise HTML.
Exemples
 #introduction { font-size: 120%; } met la balise d’identifiant
introduction en plus gros.
 p#introduction { font-size: 120%; } met la balise <p> d’identifiant

introduction en plus gros.
12.10- Mise en forme
1. Les Polices
Il existe différents moyens pour contrôler les polices de caractères.
 Les principales propriétés ( font-family , font-size , font-weight , font-style , font-
variant , text-decoration et line-height ) sont responsables de l’aspect du texte.
Exemple
p {
font-family: "Times New Roman";
font-size: 130%;
font-weight: bold;
line-height: 150%;
}
2. L’Espacement
Les propriétés letter-spacing et word-spacing permettent de définir l’espacement entre

les lettres d’un mot et les mots dans une phrase.
Cet espacement peut être positif ou négatif selon si on cherche à éloigner ou

rapprocher ces éléments.
Comme les couleurs, ces propriétés doivent être utilisées avec discernement.
Exemple
3. l’Alignement et l’indentation
 text-align définit la justification et l’alignement d’un texte : left ,right , center et

justify (aligne le texte sur les marges gauche et droite).
 vertical-align définit l’alignement vertical de la ligne de base d’un élément en

fonction de la propriété line-height : super (texte en exposant), sub (texte en
indice), baseline (normal), etc.
 text-indent permet de décaler le début de la première ligne de texte d’une valeur

fixe ou proportionnelle à la valeur du paragraphe.
4. Propriétés des listes
 list-style-image définit l’image qui sera employée comme marqueur d’item de liste.
Quand l’image est indisponible, elle remplace le marqueur produit par la propriété
list-style-type .
 list-style-type définit l’apparence d’une liste numérotée ou non : disc (cercle

plein), circle (cercle vide), square (carré), decimal (nombres), upper-alpha ou
lower-alpha (lettres de l’alphabet), upper-roman ou lower-roman (chiffres romains)
et none.
5. Les Couleurs
La couleur doit être utilisée avec discernement.
Son rôle est de différencier les éléments d’un texte en jouant sur la notion de
contraste.
Il existe différentes manières de spécifier les valeurs d’une couleur :
 En indiquant le nom d’une couleur prédéfinie parmi aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow …
 En utilisant le code RGB pour (Red, Green, Blue) avec des valeurs de 0 à 255
 En utilisant la valeur hexadécimale
Exemple (Expression du bleu)
 Utiliser le mot clé blue
 Utiliser la commande rgb avec des valeurs absolues rgb(0,0,255) ou
proportionnelles rgb(0%,0%,100%)
 Utiliser le code hexadécimal #0000FF
12.11- Mise en Page
1. Les Boîte CSS
12.11- Mise en Page
2. Les Bordures des boîtes
Les propriétés qui s’appliquent aux bordures sont entre 1 et 4 valeurs :
 Si une seule valeur est spécifiée : elle s’applique à tous les côtés.
 Si 2 valeurs sont spécifiées :
 la première s’applique aux bordures horizontales
 la seconde aux bordures verticales
 Si 3 valeurs sont spécifiées :

 la première s’applique à la bordure du haut
 la deuxième aux bordures verticales
 la troisième à la bordure du bas
 Si 4 valeurs sont spécifiées : celles-ci s’appliquent respectivement aux

bordures du haut, de droite, du bas et de gauche.
12.11- Mise en Page
3. Les Bordures des boîtes (suite)
 border-style définit le style des bordures : none , dotted , dashed , solid , double ,
groove , ridge , inset ou outset .
 border-color définit la couleur des côtés de la bordure.
 border-width spécifie l’épaisseur des bordures.
 width : Largeur du contenu de l’élément : longueur ou auto . Par défaut à auto ,
prend la taille maximale disponible.
 height : Hauteur du contenu de l’élément : longueur ou auto . Par défaut à auto ,
s’adapte à la taille du contenu.
12.11- Mise en Page
4. Le Débordement
Si la hauteur du contenu est contrainte, le contenu peut déborder d’un bloc. . .
La propriété overflow contrôle le comportement:
visible : le contenu déborde de l’élément.
hidden : le contenu est tronqué.
scroll : des barres de défilement sont ajoutées.
auto : des barres de défilement sont ajoutées quand c’est nécessaire.
Par défaut : visible .
12.11- Mise en Page
5. Les Marges
 margin-top
 margin-right
 margin-bottom
 margin-left
margin permet de définir d’un seul coup ces quatre propriétés, dans l’ordre top right
bottom left.
Par défaut : 0.
Une marge peut être définie à auto , elle est alors automatiquement calculée à partir
des autres valeurs.
12.11- Mise en Page
6. L’Espacement
 padding-top
 padding-right
 padding-bottom
 padding-left
padding permet de définir d’un seul coup ces quatre propriétés, dans l’ordre: top right
bottom left.
Par défaut : 0.
12.11- Mise en Page
7. Le Flottement et le positionnement
 Le flottement et le positionnement sont des outils permettant une mise en

page complexe : mise en forme en colonnes, chevauchement d’éléments, etc.
 Le positionnement consiste à préciser où doivent apparaître des éléments de

manière relative, par rapport à un autre élément ou encore par rapport à la
fenêtre du navigateur.
 Le flottement n’est pas vraiment un positionnement : les éléments dits

flottants sont pris du flux et les autres éléments les contournent.
12.11- Mise en Page
8. Le Flottement
Le flottement est défini par la propriété float qui peut prendre les valeurs :
 left : l’élément sera contourné par la droite.

 right : l’élément sera contourné par la gauche
 none : valeur par défaut, sert principalement pour écraser un style
existant.
Tout bloc (image, texte, etc.) peut être défini comme un élément flottant.
12.11- Mise en Page
9. Le Positionnement
Le positionnement est précisé par la propriété position .
Il existe 4 modes de positionnement : relative , absolute , fixed et static .
Chaque type a ses propres règles.

12.11- Mise en Page
10. La Visibilité
La visibilité d’un élément peut être complètement contrôlée en utilisant la

propriété visibility :
 visible permet de rendre visible l’élément
 hidden permet de rendre invisible un élément ; la mise en page continue à

le prendre en compte
13- Les formulaires
 Permettent d’interagir avec l’utilisateur en lui proposant d’entrer des

informations
 En HTML : uniquement l’interface de formulaire
 L’essentiel du travail sera fait par le script qui traitera la soumission du

formulaire
13- Les formulaires
13.1- Balise <form>
Un formulaire HTML est placé à l’intérieur d’une balise <form> .
Celle-ci prend les attributs suivants :
 action URL du script auquel sera soumis le formulaire.
 method Méthode HTTP, valant soit "get" soit "post«
 enctype qui spécifie le codage des données dans l'URL, valeur par défaut
"application/x-www-form-urlencoded".
Exemple (Formulaire élémentaire)

<form action="action.php" method="get">
<div><input type="submit"></div>
</form>
13- Les formulaires
13.2- Ensembles de champ
En HTML, il est interdit de mettre des champs de formulaire directement à
l’intérieur d’un <form> . Il faut d’abord les regrouper :
 Dans des paragraphes <p> si les champs de formulaires sont à l’intérieur de

paragraphes de textes (rare).
 Dans des ensembles de champ <fieldset> pour regrouper des champs de

formulaire de sémantique proche. On pourra alors donner une légende à
l’ensemble de champs avec la balise <legend> .
 Sinon dans des divisions <div> sans contenu sémantique.

Exemple (Ensemble de champ)
<fieldset>
<legend>Mensurations</legend>
<input type="text" name="taille">
<input type="text" name="poids">
</fieldset>
13- Les formulaires
13.3- Étiquettes
 La plupart des champs sont naturellement accompagnés d’une étiquette
( <label> ).
 On peut la placer où on veut, en général juste à gauche ou à droite du champ.
 Son attribut for référence l’attribut id du champ correspondant.
 Dans les navigateurs graphiques, un clic sur l’étiquette d’un champ permet en
général de sélectionner le champ.
Exemple (Étiquette)
<label for="taille">Taille:</label>
<input type="text" name="taille" id="taille">
13- Les formulaires
13.4- Champs de saisie
 La balise <input> a une utilisation très vaste dans les formulaires. Elle
représente un champ de saisie.
 L’attribut type détermine le type (texte, mot de passe, liste, etc.) du champ.
 L’attribut name (nom du paramètre de la requête HTTP) est obligatoire (sauf

pour les types "reset" et "submit" ) ; il permet de préciser au serveur à quelle
saisie on fait référence.
Exemple (Zone de texte pour écrire un commentaire)
<input type="text" name="Commentaire">

13- Les formulaires
13.5- Saisie d’une ligne de texte
 type ="text" est utilisé pour la saisie d’un texte dont la taille est inférieure à une
ligne.
 L’attribut value permet de préciser la valeur par défaut (facultatif).
 La taille maximale de la chaîne de caractères à saisir peut être spécifiée à l’aide de

l’attribut maxlength (facultatif).
Exemple
<input type="text" name="prenom" value=“Texte par défaut"

maxlength="50">
13- Les formulaires
13.6- Saisie d’un mot de passe
 type ="password" est utilisé pour la saisie d’un texte dont les caractères sont
remplacés par des astérisques : c’est généralement utilisé pour la saisie des
mots de passe. Le mot de passe est quand même transmis en clair au serveur !
 L’attribut value permet de préciser la valeur par défaut (facultatif).
 La taille maximale de la chaîne de caractères à saisir peut être spécifiée à l’aide

de l’attribut maxlength (facultatif).
Exemple
<input type="password" name="pwd" value="12345678">

13- Les formulaires
13.7- Choix multiples parmi une liste
 type ="checkbox" permet de choisir plusieurs éléments parmi une liste de

possibilités.
 Cela se matérialise sous forme de cases à cocher.
 La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
 L’attribut checked ="checked" permet de cocher la case par défaut.
 Certains langages côté serveurs imposent que les noms de champs de
formulaire à choix multiples se terminent par [].
Exemple
<input type="checkbox" name="pub[]" value="site”checked="checked"
id="pub-site">
<label for="pub-site">Recevoir des offres de notre site</label>
<input type="checkbox" name="pub[]" checked="checked”value="externe"
id="pub-externe">
<label for="pub-externe">Recevoir des offres externes</label>
13- Les formulaires
13.8- Choix unique parmi une liste
 type ="radio" permet de choisir un seul élément parmi une liste de possibilités.
 Cela se matérialise sous forme de boutons radio.
 La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
 L’attribut checked ="checked" permet de préciser la valeur par défaut.
Exemple Recevoir de la pub:

<input type="radio" name="pub"value="oui" id="pub-oui” checked="checked">
<label for="pub-oui">oui</label>
<input type="radio" name="pub" value="non" id="pub-non">

<label for="pub-non">non</label>
13- Les formulaires
13.9- Fichiers joints
 type ="file" permet de joindre au formulaire un fichier.
 À cause de la taille de la requête due au téléchargement (upload) du fichier, il

faut impérativement utiliser la méthode POST et l’encodage
multipart/form-data du conteneur FORM .
Exemple
<label for="fichier">Fichier:</label>
<input type="file" name="fichier" id="fichier">
13- Les formulaires
13.10 Champs cachés
 type ="hidden" permet de cacher des champs au client mais leur contenu est
envoyé avec le formulaire.
 Ceci permet de préciser des informations, en utilisant l’attribut value ,

concernant l’interaction client/serveur.
 C’est à utiliser avec précaution car cela peut être à l’origine de problèmes de
sécurité assez graves : ne pas oublier que le client peut éditer la page à la main
pour changer la valeur de ces champs!
Exemple
<input type="hidden" name="monnaie_utilisee" value="EUR">
<input type="hidden" name="customerCB" value="c2415-345-8563">
13- Les formulaires
13.11 Ré-initialisation d’un formulaire
 type ="reset" permet de réinitialiser le formulaire en affectant aux différents

champs leur valeur par défaut.
 L’attribut value permet de changer le texte du bouton correspondant.
Exemple
<input type="reset" value="Tout effacer">

13- Les formulaires
13.12 Soumettre le formulaire
 type ="submit" permet de soumettre le formulaire.
 Le client envoie le contenu du formulaire à l’adresse précisée par l’attribut

action de la balise <form> .
 L’attribut value permet de changer le texte du bouton correspondant.
Exemple
<input type="submit" value="Envoyer">

13- Les formulaires
13.13 Saisie de plusieurs lignes de texte
 Pour les saisies multiligne, on utilise la balise <textarea> .
 Le texte délimité par cette balise permet d’initialiser la valeur par défaut du
champ.
 La balise fermante est obligatoire même si le champ est vide.
 Les attributs rows et cols (obligatoires) permettent de spécifier la taille en

lignes et colonnes de la fenêtre de saisie.
Exemple
<textarea name="bio" cols="40" rows="5">
Fille de Josiane Balasko, Marilou Berry fait ses premiers
pas au cinéma à 8 ans...
</textarea>
13- Les formulaires
13.14 Menus de sélection
 La balise <select> permet d’ajouter une liste de sélection :
 L’attribut facultatif size permet de préciser le nombre de choix apparaissant sur
la page Web. Par défaut, vaut 1.
 L’attribut multiple ="multiple" permet d’autoriser des réponses multiples.
 Les choix du menu sont indiqués à l’aide de la balise <option> :
 L’attribut selected ="selected" permet de spécifier le(s) choix par défaut.
 L’attribut value permet de spécifier la valeur associée au choix.
Exemple
<select name="age">
<option value="20">Moins de 20 ans</option>
<option value="35" selected="selected">21 à 35 ans</option>
<option value="50">36 à 50 ans</option>
<option value="51">Plus de 51 ans</option>
</select>
13- Les formulaires
13.15 Exemple: form1.html

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

ENSAM

CRÉATION DE SITES WEB

Chapitre 2 : LE LANGAGE HTML

 Normes de contenu : XHTML, HTML, CSS, XML

 Automatisation de contenu : Javascript, VBScript

 Processeurs : Perl, Php, Python, ASP

 Un émetteur (client) envoie une REQUETE

 C’est une généralisation du « client-serveur » à partir de technologies

 Sa construction suit une norme HTTP

 Demande un document à travers une URL (GET)

 Dépose des données sur le serveur (POST)

1.5. URL (Uniform Resource Locator).

2.1. Ecrire pour le web

2.2. HTML, l'origine

HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de

HTML est une instance de SGML.

2.3. HTML, les principes

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

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

2.5. Introduction au marquage - 1

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

<marqueur> ici votre texte </marqueur>

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

Synonymes: marqueur, élément, tag, balise.

2.5. Introduction au marquage - 2

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

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

2.5. Introduction au marquage - 3

Il faut respecter une logique d'imbrication:

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

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

2.5. Introduction au marquage - 4

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

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

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

2.6. Les attributs

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

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

2.7. Les commentaires

<!–- Voici un commentaire HTML -->

2.8. Que choisir pour écrire de l' HTML?

A la main, avec un éditeur de texte

Avec un logiciel « assistant » au code HTML

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

2.9. Que choisir pour lire HTML?

2.10. Note sur les caractères accentués

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

<meta http-equiv="Content-Type" content="text/html;

2.12. Analyse des balises

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

Ex: <title>. .</title> titre de la fenêtre dans laquelle la page s’affiche

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

Les balises sont sensibles à la casse et sont écrites en minuscules.

2.13. Eléments du langage HTML

<div> . . </div> Division de bloc

<p> . . </p> Paragraphe

<br> Saut à la ligne

Et aussi: address, blockquote, hr, pre

2.13. Eléments du langage HTML

* Pour afficher plusieurs espaces il faut utiliser l'entité caractère: