Programmation - Web - HTML & CSS
Programmation - Web - HTML & CSS
k
WEB
Objectifs généraux
A la fin de cette UE, l’étudiant doit être capable de :
Savoir utiliser les différentes balises et attributs contenus dans une
page HTML
Savoir insérer le code CSS dans du HTML
Sommaire
Partie1 : HTML
Partie 2 : CSS 3
1
Partie 1 : HTML
2
Chapitre 1 : les bases du HTML
Objectifs spécifiques
Introduction
Le HTML (HypertextMarkupLanguage) est un langage de programmation permettant
d’afficher une page web. Ce langage a pour rôle de gérer et d’organiser le contenu d’une page
web. Le HTML a été inventé en 1991par TIM Berners lors du lancement du Web .mais dans
les années2000, le W3C a lancé le xHTML qui malheureusement n’a pas eu du succès .c’est
en 2009 que le W3C a abandonné le xHTML pour revenir en HTML et le faire évoluer en 5
versions
I .GENERALITES
Le HTML est une version utilisée pour la création des sites web .ce langage a connu plusieurs versions
b- Sous Mac OS X
Nous distinguons les logiciels suivants :
- jEdit ;
- Smultron ;
- BBEditremplacé par Text Wrangler
- TextMate
- Coda
c- Sous Linux
Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont installés par défaut,
d'autres peuvent être téléchargés facilement via le centre de téléchargement (sous Ubuntu
notamment) ou au moyen de commandes comme apt-get et aptitude. Voici quelques logiciels
que vous pouvez utiliser :
- gEdit ;
- Kate ;
- vim ;
- Emacs ;
NB: d’autres éditeurs peuvent utiliser sur les trois systèmes d’exploitation citez
plus haut tels que :
UltraEdit,
KomodoEdit,
Visual Studio Code,
Brackets,
Sublime Text
3. Les Navigateurs
Un navigateur c’est un logiciel qui permet d’accéder aux pages web. Le navigateur permet
de lire le code HTML et afficher le résultat visuel à l’écran .il existe de nombreux navigateurs
différents mais les plus utilisés dont le récapitulatif se présente dans le tableau suivant :
4
NB : on distingue également les navigateurs sur mobile
4. Moteur de recherche
Un moteur de recherche est un logiciel qui permet d’effectuer des recherches sur
internet. Par exemple on peut citer entre autres :
Alta vista avec http : //www.alta vista.com
Google avec http : //www.google.com
Yahoo avec http : //www.yahoo.fr
5
CHAPITRE 2 : CREATION D’UNE PAGE WEB EN HTML5 ET
ORGANISATION DU TEXTE
Objectifs spécifiques
INTRODUCTION
La création d’une page web nécessite l’utilisation de plusieurs outils. La maitrise de
sa structure de base est primordiale avant l’installation d’un éditeur de texte qui est le logiciel
de base pour sa réalisation. Les pages HTML sont remplies par les baliseset des attributs qui
identifient le HTML.
<Html>2
<Head>3
<meta charset= ’’utf-8’’/>4
<Title>Mon titre</title>5
</head>6
<Body>7
</Body>8
</Html>9
6
4 = Ecriture des caractères spéciaux
5 = Indication du titre de notre page web
NB : Quand vous ouvrez une balise rassuré vous que vous l’avez fermée.
Il est a noté que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple,
la balise <html>est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à
la fin du code, avec </html>). Les balises doivent être fermées dans lesens inverse de leur
ouverture. Un exemple :
<html><body></body></html>: correct. Une balise qui est ouverte à l'intérieur d'une autre
doit aussi être ferméeà l'intérieur.
<html><body></html></body>: incorrect, les balises s'entremêlent.
1- Le doctype
Code : HTML
<!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui
indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les
autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu
l'exception qui confirme la règle.
2- La balise </html>
Code : HTML
<html></html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html>se trouve tout à la fin du code.
4- L'encodage (charset)
Code : HTML
<metacharset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html.
5- Le titre principal de la page
Code : HTML
<title>
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit
avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du
navigateur).
7
6- Les commentaires
Un commentaire en HTML est un texte qui sert simplement de point repère. Il n'est pas
affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.
Un commentaire est une balise HTML avec une forme bien spéciale :
Code : HTML
<!- - Ceci est un commentaire - ->
Remarque : Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun
impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans
votre code source (surtout s'il est long).
Code: HTML
<!DOCTYPE html>
<html>
<head>
<!--En-tête de la page -->
<metacharset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>
Apres s’avoir écrit ce l’on souhaite, le fichier doit être enregistré sous
l’extension « .html »
On va à fichier, cliquer sur Enregistrer sous .html (donner n’importe
quel nom à votre fichier et l’emplacement …)
Les pages HTML sont remplies des balises, Les balises se repèrent facilement. Elles
sont entourées de « chevrons », c'est-à-dire des symboles < et>, comme ceci :<balise>.
On distingue deux types de balises : les balises en paires et les balises orphelines.
a- Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
Code : HTML
8
<Titre>bienvenu dans mon site </titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui
indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre
ces deux balises… n'est pas un titre.
Code : HTML
Ceci n'est pas un titre <titre>Ceci est un titre</titre>Ceci n'est pas un titre
2) Les attributs
Les attributs sont un peu les options des balises. Ils viennent les compléter pour
donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme
ceci :
Code : HTML
<balise attribut="valeur">
<image nom="photo.jpg" />
3) Les paragraphes
Lorsqu’on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le
langage HTML propose justement la balise <p>pour délimiter les paragraphes.
Code : HTML
<p>Bonjour et bienvenue sur mon site !</p>
<p>signifie « Début du paragraphe » ;
</p>signifie « Fin du paragraphe ».
4) Saut à la ligne
Il existe une balise « Aller à la ligne » !
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous
<br />: pour aller à la ligne.
5) Les titres
En HTML, On a six balises de titres différentes qui se trouve à l’intérieur de la balise
<body></body>
<h1></h1>: signifie « titre très important ». la page au début de celle-ci.
<h2></h2>: signifie « titre important ».
<h3></h3>: pareil, c'est un titre un peu moins important
<h4></h4>: titre encore moins important.
<h5></h5>: titre pas important.
<h6></h6>: titre vraiment pas important.
9
6) La mise en valeur d’un texte
La mise en valeur consiste à ressortir l’importance d’un mot ou d’une phrase dans votre
page.
a) Mettre en italique
Pour mettre un peu en valeur votre texte, vous devez utiliser
La balise <em> ou <I></I>.
b) Mettre en gras
Pour mettre un texte bien en valeur, on utilise la balise <strong></strong>, ou<B><B>.
c) Marquer ou surligner le texte
Pour faire ressortir visuellement une portion de texte on utilise la balise <mark></mark>.
d) Souligner le texte
Pour souligner un mot ou un texte on utilise la balise <U></U>
7) Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
Il existe deux types de listes :
les listes non ordonnées ou listes à puces ;
les listes ordonnées ou listes numérotées ou encore énumérations.
Les listes de définitions
a) Liste non ordonnée
Une liste non ordonnée ressemble à ceci :
Fraises
Framboises
Cerises
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a
pas de « premier » ni de « dernier »). On utilise la balise <ul>que l'on referme un peu plus
loin avec </ul>.
Code : HTML
<ul></ul>
Chacun des éléments de la liste s’écrit entre deux balises <li></li>.
Code : HTML
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
En résumé :
<ul></ul>délimite toute la liste ;
<li></li>délimite un élément de la liste (une puce).
b) Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul></ul>par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li>pour
délimiter les éléments.
Code : HTML
10
<h1>Ma journée</h1>
<ol>
<li>Je me lève</li>
<li>Je mange et je bois</li>
<li>Je retourne me coucher</li>
</ol>
c) listes de définition
La balise dl représente une liste de définition qu’on appelle aussi liste de description
ce type de liste est particulier en HTML doit toujours être compose des termes à définir et sa
définition
On utilise à l’intérieur de la balise dl, les éléments dt pour présenter le terme à définir et les
éléments dd pour fournir les définitions relatives à chaque terme
Code html
<dl>
<dt>HTML </dt>
<dd>le HTML est un langage de balisage utilise pour définir les différents éléments d’une
page </dd>
</dl>
11
Chapitre 3: CREATION DES LIENS
Objectifs spécifiques
A la fin de ce chapitre, l’étudiant doit être capable de :
Créer un lien vers un site
Faire les liens entre les pages d’un même dossier ou de dossiers différents
Créer un lien vers une ancre
INTRODUCTION
Un lien est un texte sur lequel on peut cliquer pour se rendre sur une autre page .Un lien
peut être fait d’une page A vers une page B ou vers un site ou encore vers une ancre qui est une sorte
de point de repère présente dans une page HTML.
<ahref="http://www.mon site.com">monsite</a>
Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a
href="http://www.monsite.com">mon site</a>?<br />
Remarque : Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien
s'affiche en violet.
Code : HTML
<p>Bonjour. Souhaitez-vous consulter <a href="page2.html">la page
2</a>?</p>
page2.html
La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur
la page 2 :
12
III. Deux pages situées dans des dossiers différents
Dans ce cas nous pouvons avoir deux possibilités
1- Dans le même disque
Par exemple au bureau (disque local C). Nous créons deux dossiers par exemple LICENCE I
et LICENCE II dans lesquelles on introduit les pages respectivement page 1 et page 2.
Dossier1
Code : HTML
<a href="page1.html">page2</a>
Dossier2
Code : HTML
<ahref="page2.html">page1</a>
13
Remarque : L’attribut id sert à donner un nom « unique » à une balise, pour s'en servir de
repère.. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour «
repérer » une balise précise.
Remarque: Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou
un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel
onglet.
Exemple :
Vous souhaitez faire télécharger monfichier.zip.
Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier)
et faites un lien vers ce fichier :
Code : HTML
14
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de
téléchargement lorsqu'on cliquera sur le lien.
15
Chapitre 4 : Les Images
Objectifs Spécifiques
A la fin de ce chapitre l’étudiant doit être capable de :
Présenter les différents types de formats d’images et leurs caractéristiques
Insérer une image dans un code HTML
Ajouter une légende
Introduction
Dans la programmation web, des images occupent une place importante. Celles-ci
existent sous différents formats avec des caractéristiques bien définies. Le choix des images
ne se fait pas au hasard car les images sont parfois volumineuses à télécharger, ce qui ralentit
le temps de chargement de la page.
16
Remarque :
Il existe un format adapté à chaque image
En résumé, voici quel format adopter en fonction de l'image que vous avez :
17
<img src="images/ sublimetext.png" alt="sublime text "/>
<figcaption>Le logiciel sublime text</figcaption>
</figure>
Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.
Code : HTML
<p>Connaissez-vous le logiciel sublime text ? On peut faire des sites web avec !</p>
<figure>
<imgsrc="images/blocnotes.png" alt="sublime text " />
<figcaption> Le logiciel sublime text </figcaption>
</figure>
Si elle n'apporte aucune information (c'est juste une illustration pour décorer) :
placez l'image dans un paragraphe. Si elle apporte une information : placez l'image dans une
figure.
La balise <figure>a un rôle avant tout sémantique. Cela veut dire qu'elle indique à
l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du
texte.
NB : une figure peut bien comporter plusieurs images
Voici un cas où cela se justifie
Code : HTML
<figure>
<imgsrc="images/internetexplorer.png" alt="Logo Internet
Explorer" />
<imgsrc="images/firefox.png" alt="Logo Mozilla Firefox" />
<imgsrc="images/chrome.png" alt="Logo Google Chrome" />
<figcaption>Logos des différents navigateurs</figcaption>
</figure>
18
Chapitre 5 : Les Tableaux
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Créer les tableaux de base
Ajouter et supprimer les lignes et les colonnes
Etendre les lignes et les colonnes
Ajouter les légendes
Faire le formatage des tableaux
INTRODUCTION
Les tableaux HTML sont représentés par les grilles avec les lignes et les
colonnes .Ces lignes et colonnes créent les cellules individuelles contenant des textes
et des images. Les tableaux constituent un élément de conception efficace de
présentation visuelle des informations suivant le choix.
I- Création d’un tableau de base
La création de la structure du tableau ce qui veut dire que vous devez entrer l’élément
table et spécifier les lignes et les colonnes ainsi que les entêtes et entrer les données dans la
cellule du tableau
Eléments Repères
table Balise qui identifie le tableau
tr Balise qui représente une ligne à l’intérieur d’un
tableau
td Balise qui représente une cellule à l’intérieur d’une
ligne
th Balise qui représente une cellule d’entête à l’intérieur
d’une ligne
Pour créer un tableau, on commence toujours par la structure appropriée du html puis
on ajoute l’élément « table »à l’endroit ou vont apparaitre les limites du tableau ensuite
ajouter l’élément « tr » pour chaque ligne entre les balises « table »
Exemple
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
19
</table>
Etant donné qu’un tableau contient les entêtes, il faut ajouter l’élément « th »dans la première
ligne ou nous souhaitons insérer les entêtes du tableau
Exemple
<table>
<tr>
<th>production.</th>
<th>……………………</th>
</tr>
<tr>……………………..</tr>
<tr>
</tr>
</table>
A fin d’ajouter les éléments” td” pour créer des cellules individuelles dans lesquelles nous
allons mettre les informations
<table>
<tr>
<th>………………….</th>
<th>……………………</th>
</tr>
<tr>
<td> …….. </td>
<td>……… </td>
</tr>
<tr>
<td>……..</td>
<td>……..</td>
</tr>
</table>
Ajoutons le contenu de chaque cellule, l’entête du tableau entre la balise de début et de fin «
th », puis entrer les données entre les balises de début et de fin « td »
Exemple
<table>
<tr>
<th>production</th>
<th>industrialisation</th>
</tr>
<tr>
<td> les plants de cacaoyers </td>
<td>les sachets </td>
</tr>
<tr>
<td>l’engrais</td>
<td>les machines </td>
</tr>
<tr>
<td>la trouisson</td>
<td>le chocolat </td>
</tr>
20
</table>
Pour ajouter une ligne à un tableau, insérez les éléments supplémentaires tr et td ou vous
souhaitez que la nouvelle ligne apparaisse
Exemple
b) Ajout de colonnes
L’ajout de colonnes est beaucoup plus difficile que l’ajout de ligne parce que vous devez
ajouter une cellule pour chaque ligne
Exemple
<Table>
<tr>
<th>production </th>
<th>industrialisation</th>
<th>commercialisation</th>
</tr>
<tr>
<td> les plants </td>
<td> les sachets </td>
<td> la publicité </td>
</tr>
<tr>
<td> les engrais </td>
<td> les machines </td>
<td> les agents pour la vente </td>
</tr>
2) Suppression des lignes et des colonnes
Il est plus facile de supprimer des lignes et des colonnes que d’en ajouter. Mais il faut
que vous supprimiez tous les éléments associés à la ligne ou à la colonne
a) Suppression des lignes
Lorsque vous supprimez des lignes, supprimer la balise de début et de fin « tr » et les
éléments « td » avec les autres informations qu’elles entourent.
Exemple : suppression de la 2e ligne
<Table>
<tr>
<th>production </th>
21
<th>industrialisation </th>
<th>commercialisation </th>
</tr>
<tr>
<td> les plants </td>
<td> les sachets </td>
<td> la publicité </td>
</tr>
<tr>
<td> les engrais </td>
<td> les machines </td>
<td> les agents pour la vente </td>
</tr>
3) Fusion ou étendue des lignes et colonnes
Pour effectuer une fusion, on rajoute un attribut à la balise <td>.
Il faut savoir qu'il existe deux types de fusion :
La fusion de colonnes : La fusion s'effectue horizontalement. On
utilisera l'attribut colspan.
La fusion de lignes : La fusion s'effectuera verticalement. On
utilisera l'attribut rowspan.
Comme vous le savez, vous devez donner une valeur à l'attribut (que ce
soit colspan ou rowspan). Il faut indiquer le nombre de cellules à fusionner
entre elles. Dans notre exemple, nous avons fusionné deux cellules : celle
de la colonne « Pour enfants ? »
Et celle de « Pour adolescents ? ». On devra donc écrire :
Code : HTML
<td colspan="2">
… qui signifie : « Cette cellule est la fusion de deux cellules ». Il est
possible de fusionner plus de cellules à la fois (trois, quatre, cinq…).
Code : HTML
<table>
<tr>
<th>Titre du film</th>
<th>Pour enfants ?</th>
<th>Pour adolescents ?</th>
</tr>
<tr>
<td>Massacre à la tronçonneuse</td>
<td>Non, trop violent</td>
<td>Oui</td>
</tr>
<tr>
<td>Les bisounours font du ski</td>
22
<td>Oui, adapté</td>
<td>Pas assez violent...</td>
</tr>
<tr>
<td>Lucky Luke, seul contre tous</td>
<td colspan="2">Pour toute la famille !</td>
</tr>
</table>
<td>Oui, adapté</td>
<td rowspan="2">Pour toute la famille !</td>
</tr>
<tr>
<th>Pour adolescents ?</th>
<td>Oui</td>
<td>Pas assez violent...</td>
</tr>
</table>
Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la
propriété vertical-align que nous avons découverte dans le chapitre sur la mise en page.
23
</tr>
</thead>
<tfoot><!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody><!-- Corps du tableau -->
<tr>
<td>Christelle</td>
<td>33 ans</td>
<td>yaoundé</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Douala</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>Maroua</td>
</tr>
<tr>
<td>Martine</td>
<td>34 ans</td>
<td>Garoua</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Bertoua</td>
</tr>
<tr>
<td>Roger</td>
<td>19 ans</td>
<td>Obala</td>
</tr>
</tbody>
</table>
24
Pour ajouter une légende, on utilise les balises : <caption></caption> entre les balises<
table></table>.
Si la légende doit apparaitre au-dessus du tableau, on utilise l’attribut align="top"
exemple : <caption align="top">ma légende</caption>
Si c’est en dessous on utilise l’attribut align="bottom" exemple : <caption
align="bottom">ma légende</caption>
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Donner la structure d’un formulaire
Maitriser Les zones de saisie basiques (mot de passe, texte
multiligne,monoligne,zone enrichies …)
Maitriser Les éléments options (cases à cocher, listes déroulantes, les zones
d’options
Créer les boutons soumettre et réinitialisation
INTRODUCTION
Un formulaire est une page qui permet aux utilisateurs à renseigner certaines informations
afin d’accéder à l’interface solliciter (saisir du texte, sélectionner des options, validées avec
un bouton…). Les éléments constitutifs d’un formulaire doivent être entre les
balises <form>et </form>, cet élément peut être inclus directement dans l’élément <body>.
L’élément <fieldset >permet de structurer le contenu, car il a pour rôle de délimiter les
groupes de composants actifs du formulaire. D’un point de vue graphique, chaque groupe de
composants est encadré dans les navigateurs par une bordure mince dans laquelle il est
possible d’intégrer un titre pour chaque groupe.
26
Action : c'est l'adresse de la page ou du programme qui va traiter les informations .Cette page
se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien
d'enregistrer le message avec tous les autres dans une base de données.
2) Exemple de structure d’un formulaire
Code : HTML
<! DOCTYPE html>
<html>
<head>
<title> Formulaire de base </title >
<meta charset =utf-8 />
</head>
<body>
<p>
<form method="post" action="traitement.php">
</p>
<fieldset>
<legend>formulaire type</legend>
<h1> les composants du formulaire </h1>
< !- - composants du formulaire - - >
< /fieldset>
</form>
</body>
</html>
.
II. Les zones de saisie basiques
Il existe deux zones de texte différentes :
- La zone de texte monoligne
- La zone de texte multiligne
2. Les libellés
C’est la balise <label> qui permet de créer les libellés
Code : HTML
<form method="post" action="traitement.php">
<p>
27
<label>Votre pseudo</label>: <input type="text"
name="pseudo" />
</p>
</form>
Apres ceci nous devons lier le label à la zone de texte. Dans ce cas , on doit donner un
nom à la zone de texte l'attribut id
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du
champ…
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo</label>:<input type="text"
name="pseudo" id="pseudo" />
</p>
</form>
.
3. Quelques attributs supplémentaires
On peut ajouter un certain nombre d'autres attributs à la balise <input />pour personnaliser
son fonctionnement :
- On peut agrandir le champ avec size.
- On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
- On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
- On peut donner une indication sur le contenu du champ avec placeholder.
Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce
qu'il faut saisir ; le champ fait 30 caractères de long mais on ne peut écrire que 10 caractères
maximum à l'intérieur :
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" placeholder="Ex
: Zibi" size="30" maxlength="10" />
</p>
</form>
.
4. Zone de mot de passe
Cette zone est celle dont les caractères saisis ne sont pas visibles à l’écran .Pour créer ce
type de zone de saisie, on utilise l'attribut type="password".
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>
28
5. Zone de texte multiligne
Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser la balise
<textarea></textarea>.
Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser
un label qui explique de quoi il s'agit.
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">Comment pensez-vous que je pourrais
améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
La taille du <textarea>de deux façons différentes.
widthetheight au <textarea>.
Avec des attributs : on peut ajouter les attributs rowsindique le nombre de lignes de texte qui
peuvent être affichées simultanémentet cols qui indique le nombre de colonnes à la balise
<textarea>..
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse améliorer mon site ?
</label>
<br />
<textarea name="ameliorer" id="ameliorer" rows="10"
cols="50">
</textarea>
</p>
</form>
6. Les zones de saisie enrichies
HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De
nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à
l'attribut type de la balise <input />l'une des nouvelles valeurs disponibles. Tous les
navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les
anciennes versions des navigateurs afficheront une simple zone de saisie monoligne (comme
si on avait écrit type="text").
a) E-mail
Vous pouvez demander à saisir une adresse e-mail :
Code : HTML
<input type="email" />
Le champ vous semblera a priori identique mais votre navigateur sait désormais que
l'utilisateur doit saisir une adresse e-mail.
Un champ e-mail mal renseigné est entouré de rouge dans Firefox
.
7. Une URL
Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement
par http://) :
Code : HTML
<input type="url" />
29
a) Numéro de téléphone
Ce champ est dédié à la saisie de numéros de téléphone :
Code : HTML
<input type="tel" />
Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ (figure
suivante).
Clavier de saisie de numéro de téléphone sur un iPhone
b) Nombre
Ce champ permet de saisir un nombre entier :
Code: HTML
<input type="number" />
Le champ s'affichera en général avec des petites flèches pour changer la valeur.
8. Champ de saisie de nombre
Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :
min : valeur minimale autorisée.
max : valeur maximale autorisée.
step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ
n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
9. Un curseur
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), comme
à la figure suivante :
Code : HTML
<input type="range" />
Un curseur grâce au type range
Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs
disponibles.
10. Couleur
Ce champ permet de saisir une couleur :
Code: HTML
<input type="color" />
11. Date
Différents types de champs de sélection de date existent :
- date : pour la date (05/08/1985 par exemple) ;
- time : pour l'heure (13:37 par exemple) ;
- week : pour la semaine ;
- month : pour le mois ;
- datetime : pour la date et l'heure (avec gestion du décalage horaire) ;
- datetime-local pour la date et l'heure (sans gestion du décalage horaire).
Exemple :
Code : HTML
<input type="date" />
.
12. Recherche
On peut créer un champ de recherche comme ceci :
Code : HTML
<input type="search" />
Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter
une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement
mémoriser les dernières recherches effectuées par le visiteur.
30
13. Les éléments d'options
HTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire. Ce
sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités.
Nous allons passer en revue :
les cases à cocher ;
les zones d'options ;
les listes déroulantes.
a. Les cases à cocher
Pour créer une case à cocher, on utilise toujours la balise <input />, en spécifiant cette fois le
type checkbox :
Code : HTML
31
L’attribut checked qui prend la valeur booléenne unique checked permet de cocher par
défaut un des boutons d’un groupe
Les choses seront plus claires sur l'exemple ci-dessous :
Code : HTML
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous
situez :<br />
<input type="radio" name="age" value="moins15" id="moins15"
/><labelfor="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
id="medium15-25" /><label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40"
id="medium25-40" /><label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
</p>
</form>
Des boutons radio. Pourquoi avoir mis le même nom pour chaque option ? Tout
simplement pour que le navigateur sache de quel « groupe » le bouton fait partie.
Essayez d'enlever les attributs name, vous verrez qu'il devient possible de sélectionner tous
les éléments d'options. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre
eux en leur donnant un nom identique.
Remarque : Vous noterez que cette fois on a choisi un id différent de name. En effet, les
valeurs de name étant identiques, on n'aurait pas pu différencier les id (et vous savez bien
qu'un id doit être unique !). Voilà donc pourquoi on a choisi de donner à l'id la même valeur
que value.
Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque
groupe, comme ceci :
Code : HTML
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous
situez :<br />
<input type="radio" name="age" value="moins15" id="moins15"
/><labelfor="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
id="medium15-25" /><label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40"
id="medium25-40" /><label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
</p>
<p>
Sur quel continent habitez-vous ?<br />
<input type="radio" name="continent" value="europe"
id="europe" /><label for="europe">Europe</label><br />
<input type="radio" name="continent" value="afrique"
id="afrique" /><label for="afrique">Afrique</label><br />
<input type="radio" name="continent" value="asie" id="asie"
32
/><label for="asie">Asie</label><br />
<input type="radio" name="continent" value="amerique"
id="amerique" /><label for="amerique">Amérique</label><br />
<input type="radio" name="continent" value="australie"
id="australie" /><label for="australie">Australie</label>
</p>
</form>
Rmq : L'attribut checked est, là aussi, disponible pour sélectionner une valeur par défaut.
c) Les listes déroulantes
Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs
possibilités. Le fonctionnement est un peu différent. On va utiliser la balise
<select></select>qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name
à la balise pour donner un nom à la liste. Puis, à l'intérieur du <select></select>, nous allons
placer plusieurs balises <option></option>(une par choix possible). On ajoute à chacune
d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi. Voici un exemple
d'utilisation :
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>
</p>
</form>
Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :
Code: HTML
<option value="canada" selected>Canada</option>
Vous pouvez aussi grouper vos options avec la balise <optgroup></optgroup>. Dans notre
exemple, nous allons regrouper les pays par continent.
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
33
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>
Remarque : Les groupes ne peuvent pas être sélectionnés. Ainsi, dans notre exemple, on ne
peut pas choisir « Europe » : seuls les noms de pays sont disponibles pour la sélection.
d) Finalisation et envoie du formulaire
Nous y sommes presque. Il ne nous reste plus qu'à agrémenter notre formulaire de quelques
dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi
du formulaire.
Regrouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les
regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset>peut contenir une légende
avec la balise <legend>.
Par exemple :
Code : HTML
<form method="post" action="traitement.php">
<fieldset>
<legend>Vos coordonnées</legend><!-- Titre du fieldset -->
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" />
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom" />
<label for="email">Quel est votre e-mail ?</label>
<input type="email" name="email" id="email" />
</fieldset>
<fieldset>
<legend>Votre souhait</legend><!-- Titre du fieldset -->
<p>
Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhait" value="riche"
id="riche" /><label for="riche">Etre riche</label>
<input type="radio" name="souhait" value="celebre"
id="celebre" /><label for="celebre">Etre célèbre</label>
<input type="radio" name="souhait" value="intelligent"
id="intelligent" /><label for="intelligent">Etre
<strong>encore</strong>plus intelligent</label>
<input type="radio" name="souhait" value="autre"
id="autre" /><label for="autre">Autre...</label>
</p>
<p>
<label for="precisions">Si "Autre", veuillez préciser
:</label>
<textarea name="precisions" id="precisions" cols="40"
rows="4"></textarea>
</p>
</fieldset>
34
Sélection automatique d’un champ
Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire
avec l'attribut autofocus. Dès que le visiteur chargera la page, le curseur se placera dans ce
champ. Par exemple, pour que le curseur soit par défaut dans le champ prenom :
Code: HTML
<input type="text" name="prenom" id="prenom" autofocus />
Rendre un champ obligatoire
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.
Code: HTML
<input type="text" name="prenom" id="prenom" required />
Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi,
qu'il doit impérativement être rempli. Les anciens navigateurs, qui ne reconnaissent pas cet
attribut, enverront le contenu du formulaire sans vérification.
Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts
JavaScript.
Remarque : On dispose de pseudo-formats en CSS pour changer le style des éléments requis
(:required) et invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-
format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
Le bouton soumettre ou d'envoi
Le bouton d’envoi, généralement nommé ou OK est indispensable car il est le seul qui après
un clic peut déclencher l’envoi des données vers le serveur. Pour créer un bouton d’envoi on
utilise l’élément <input/>, c’est son attribut type qui permet de lui assigner une fonction
particulière et il prend la valeur submit
. Elle existe en quatre versions :
- type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous
utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans
l'attribut action du formulaire.
- type="reset" : remise à zéro du formulaire.
- type="image" : équivalent du bouton submit, présenté cette fois sous forme
d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
- type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En
général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.
Nous ne l'utiliserons pas ici.
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value.
Pour créer un bouton d'envoi on écrira donc par exemple :
Code : HTML
<input type="submit" value="Envoyer" />
Exemple
<!DOCTYPE html>
35
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8" !/>
<title>Transfert de fichier</title>
</head>
<body>
<form action="exemple?-4.php" method="post" enctype="multipart/form-data" >
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<label)Choisissez le fichier JPEG ou PNG : </label><input type="file"
..,. name="ftchier" accept="image/jpeg,image/png" />
<input type="hidden" name="MAX_FILE_SIZE" value="50000" /><br/><br/>
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer"/>
</fieldset></form>
</body>
</html>
Un formulaire peut aussi contenir des champs cachés comme leur nom l’indique. Ils ne
correspondent à aucun rendu visuel et ne font dont l’objet d’aucune saisie de la part du
visiteur.
Ils permettent de transmettre au serveur des informations particulières et ainsi de
recueillir des données sur le poste client : tels que le système d’exploitation le type de
navigateur qu’il utilise et son numéro de version ceci dans le but de réaliser les statistiques.
Ces champs servent également à communiquer tout type d’informations utiles au serveur
comme la taille maximale d’un fichier téléchargeable du poste client vers le serveur
Pour créer un champ caché nous utilisons encore l’élément <input/>. L’attribut type reçoit la
valeur hidden et les attributs side et name servent à identifier le champ et à recueillir
l’information dans une variable .l’attribut value contient la valeur qui sera transmise après
l’envoi du formulaire.
Pour créer un champ caché on écrit le code suivant
Input type ="hidden" id= "navigateur" name ="navigateur " value="secret"
/>
Exemple
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8" !/>
<title>Les champs cachés</title>
<link rel="shortcut icon" type="images/x-icon" href=" .. /images/favicon.ico" />
</head>
<body>
<form action="mailto:html@funhtml .corn" id="forml" method="post"
.., onsubmit="getElementByld('forml').navigateur.value=navigator.appName;O
.., getElementByld('forml').systeme.value=navigator.platform" f/>
<fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend>
36
<label>Nom : </label><input type="text" name="nom" tabindex="l"
.., accesskey="A"/>
<input type="hidden" id="navigateur" name="navigateur" !>
<input type="hidden" id="systeme" name="systeme" />
<input type="submit" value="Envoi " tabindex="2"/>
<input type="reset" value=" Effacer tout" tabindex="3"/><br/>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8"!/>
<title>Formulaire avec tableaux</title>
</head>
<body>
<form action="exemple?-14.php" method="post" enctype="multipart/form-data">
<!-- Premier groupe de composants-->
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<table>
<colgroup></colgroup>
38
<tr>
<td><label>Nom : </label></td>
<td><input type="text" name="nom" size="40" maxlength="256".,.value="votre
nom"/></td>
</tr>
<tr>
<td><label>Prenom : </label></td>
<td><input type="text" name="prenom" size="40" maxlength="256".,. value="votre
prenom"/>
</tr>
<tr>
<td><label>Date de naissance : </label></td>
<td><input type="date" name="date" max="1993-01-01"/></td>
</tr>
<tr>
<td><label>Mail </label></td>
<td><input type="email" name="mail" size="40" maxlength="256".. value="votre
mail"/></td>
</tr>
<tr>
<td><label>Votre site : </label></td>
<td><input type="url" name="site" value="http://www." /></td>
</tr>
<tr>
<td><label>Code : </label></td>
<td><input type="password" name="code" size="40" maxlength="6" /></td>
</tr>
<tr>
<td><label>Homme : </label></td>
<td><input type="radio" name="sexe" value="homme" /></td>
</tr>
<tr>
<td><label>Femme : </label></td>
<td><input type="radio" name="sexe" value="femme" /></td>
</tr>
<tr>
<td>Votre pays :
<select name="pays" size="l" tabindex="2" onfocus="this.style.color='red'"
..,. onchange="alert (‘Merci de votre choix')" onblur="this.style.color=.. 'black'">
<option value="null" > Votre pays</option>
<optgroup label="Europe">
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" >Italie (/option>
<option value="Allemagne" > Allemagne</option>
</optgroup>
<optgroup label="Amerique">
<option value="USA" label="fr" > USA </option>
<option value="Canada" > Canada</option>
<option value="Argentine" > Argentine</option>
<optgroup>
39
<optgroup label="Autres">
<option value="Europe" > Europe </option>
<option value="Asie" > Asie </option>
<option value="Ameriques" > Amériques (/option>
<option value="Océanie" > Océanie</option>
</optgroup>
</select></td>
</tr>
</table>
</fieldset>
<!-- Deuxième groupe de composants-->
<fieldset>
<legend><b>Vos goûts</b></legend>
<table>
<colgroup class="fonce"></colgroup>
<colgroup></colgroup>
<tr>
<td><label>Pommes : </label></td>
<td><input type="checkbox" name="pomme" value="pomme" /></td>
</tr>
<tr>
<td><label>Poires : </label></td>
<td><input type="checkbox" name="poire" value="poire" /></td>
</tr>
<tr>
<td><label>haricot : </label></td>
<td><input type="checkbox" name="haricot" value="haricot" /></td>
</tr>
<tr>
<td><label>Decrivez nous vos gouts en detail : </label></td>
<textarea name="gouts" cols="50" rows="5" onclick="this.value=' '">Exprimez vous ici ...
</textarea>
</table>
<fieldset>
<!-- Troisième groupe de composants-->
<fteldset>
<legend><b>Envoyez nous votre photo</b></legend>
<table>
<colgroup></colgroup>
<tr>
<td><label>Choisir le fichier : </label></td>
<td><input type="file" name="fichier" accept="image/jpeg" /><input.. type="hidden"
name="MAX_FILE_SIZE" value="l0000" l><ltd>
</tr>
<tr>
<td><input type="submit" value=" Envoyer» /></td>
<td><input type="reset" value="Effacer toutes les données" /></td>
</tr>
</table>
</fteldset>
</form>
</body>
40
</html>
41
Partie 2 : CSS 3
42
Chap1 : introduction au langage CSS
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Maitriser les différentes méthodes du CSS
De pouvoir mettre les commentaires dans du CSS
Présenter les principaux attributs du CSS puis quelques balises universelles
INTRODUCTION
La création des styles CSS (CascadingStyle Sheet ou feuilles de styles en cascade) est
le complément indispensable du Langage HTML5.
Ce procédé correspond parfaitement à la séparation du contenu et de la présentation sur
laquelle nous avons plusieurs fois insisté en décrivant les différents éléments HTML5.d’une
part cette séparation permet d’alléger les pages en centralisant les définitions des styles en un
point unique une seule définition pouvant s’appliquer à un grand nombre d’éléments. Les
styles CSS apporte une plus grande richesse créative que ne le permettrait le langage
HTML4sans CSS il aurait fallu alourdir de quanti té d’éléments le langage HTML5, alors que
la tendance actuelle est à l’opération inverse. Dans ce chapitre indispensable à la
compréhension de leur mécanisme .après les règles générales d’écriture d’un style qui s’avère
simple, nous envisageons toutes les nombreuses possibilités d’écritures des sélecteurs qui
permettent d’appliquer le style voulu à l’élément choisi, quel que soit son contexte. Nous
terminerons cette introduction par l’étude des différentes méthodes d’insertion des styles
dans une page, puis par les règles de cascade et d’héritage, dont la connaissance permet de
gérer les sites.
43
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>
Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" />: c'est elle qui
indique quece fichier HTML est associé à un fichier appelé style.css et chargé de la mise en
forme.Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple
Notepad++) et copiez-y ce bout de code CSS:
Code : CSS
p{
color: blue;
}
a) Procédure
Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez
ce fichier .CSS dans le même dossier que votre fichier .html.
Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté
le .html, de l'autre le .css, Ouvrez maintenant votre fichier page.html dans votre navigateur
pour le tester, comme vous le faites d'habitude.
Remarque : Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il
faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css).
44
3) Directement dans les balises (méthode non recommandée)
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à
n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site
!</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>
NB :
Il est fortement recommandé de travailler avec la première
méthode car c’est celle utilisée par la majorité des webmasters.
45
propriete2: valeur2;
propriete3: valeur3;
propriete4: valeur4;
}
balise3
{
propriete1: valeur1;
}
Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si on écrit h1,
c'est le titre qui sera écrit en bleu.
Modifiez votre fichier style.css comme ceci :
Code : CSS
h1
{
color: blue;
}
Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, c'est la page HTML qu'on
ouvre dans le navigateur, pas le fichier CSS.
46
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par
exemple :
Code : CSS
/*
style.css
---------
Par Atangana Marc
*/
p{
color: blue; /* Les paragraphes seront en vert */
}
Code : HTML
<h1 class=""></h1>
<p class=""></p>
<img class="" />
VI. Les balises universelles
En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification
particulière. Il y a une différence minime (mais significative !) entre ces deux balises :
<span></span>: c'est une balise de type inline, c'est-à-dire une balise que l'on
place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les
balises <strong>et <em>sont de la même famille. Cette balise s'utilise donc au milieu d'un
paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue ».
<div></div>: c'est une balise de type block, qui entoure un bloc de texte. Les
balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun :
elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à
la ligne. <div>est une balise fréquemment utilisée dans la construction d'un design.
Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de «
bienvenue », on lui ajoute une classe (du nom qu'on veut).
Code : HTML
<p>Bonjour et <span class="salutations">bienvenue</span>sur mon
site !</p>
Code : CSS
.salutations
{
color: vert;
}
47
En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on
dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Ces
sélecteurs sont de loin les plus couramment utilisés. Il faut les connaître par cœur.
Code : CSS
p{
}
… signifie « Je veux toucher tous les paragraphes ».
Code : CSS
h1, em
{
}
… qui signifie « Tous les titres et tous les textes importants ». Nous avons sélectionné deux balises
d'un coup.
Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom
grâce aux attributs class et id :
Code : CSS
.class
{
}
#id
{
}
48
{
}
Sélectionne tous les liens <a>qui possèdent un attribut title.
Exemple :
Code : HTML
<ahref="http://site.com" title="Infobulle">
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Exemple :
Code : HTML
<ahref="http://site.com" title="Cliquez ici">
49
Chap. 2 : La couleur et le fond
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
50
Remarque : Notez qu'il existe une notation raccourcie : on peut écrire une
couleur avec seulement trois caractères. Par exemple :#FA3 équivaut à
écrire #FFAA33.
3. La méthode RGB
Le sigle RGB signifie en anglais, Rouge-Vert-Bleu s'écrit Red-Green-
Blue, ce qui s'abrège en « RGB ». Comme avec la notation hexadécimale,
pour choisir une couleur, on doit définir une quantité de rouge, de vert et
de bleu.
Code: CSS
P
{
color: rgb (240,96,204);
}
Il est également possible de travailler avec un logiciel de dessin tout
simple comme Paint, vous pouvez trouver la couleur que vous désirez.
Procédure
a) Lancez le logiciel Paint depuis le menu Démarrer.
b) Rendez-vous dans la section Modifier les couleurs, comme indiqué à la
figure suivante.
c) Une fenêtre s'ouvre. Dans la zone qui apparaît à droite, faites bouger
les curseurs pour sélectionner la couleur qui vous intéresse.
51
III. Images de fond
Dans les exemples qui suivent on va modifier l'image de fond de la
page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que
l'image de fond ne s'applique pas forcément à la page entière. On peut
aussi mettre une image de fond derrière les titres, paragraphes, etc.
1. Appliquer une image de fond
La propriété permettant d'indiquer une image de fond est
background-image. Comme valeur, on doit renseigner
url("nom_de_l_image.png"). Par exemple :
Code : CSS
body
{
background-image: url("photo.png");
}
52
On peut indiquer où doit se trouver l'image de fond avec
background-position. Cette propriété n'est intéressante que si elle est
combinée avec background-repeat: no-repeat; (un fond qui ne se
répète pas).
Vous devez donner à background-position deux valeurs en pixels pour
indiquer la position du fond par rapport au coin supérieur gauche de la
page (ou du paragraphe, si vous appliquez le fond à un paragraphe).
Code : CSS
background-position: 30px 50px;
… votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il
est aussi possible d'utiliser ces valeurs en anglais :
top : en haut ;
bottom : en bas ;
left : à gauche ;
center : centré ;
right: à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image
en haut à droite, vous taperez :
Code : CSS
background-position: top right;
Ainsi, si on veut afficher un soleil en image de fond (figure suivante), en
un unique exemplaire (no-repeat), toujours visible(fixed) et positionné en
haut à droite (top right), je vais écrire ceci :
Code : CSS
body
{
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à
droite */
}
L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les
valeurs dans n'importe quel ordre. Vous n'êtes pas obligés de mettre
toutes les valeurs. Ainsi, si vous ne voulez pas écrire fixed, vous pouvez
l'enlever sans problème.
53
4. Plusieurs images de fond
Depuis CSS3, il est possible de donner plusieurs images de fond à un
élément. Pour cela, il suffit de séparer les déclarations par une virgule,
comme ceci :
Code : CSS
body
{
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}
Une dernière chose avant d'en terminer avec les images de fond :
dans tous ces exemples, nous avons appliqué un fond à la page entière
(body). Mais cela ne doit pas vous faire oublier qu'on peut appliquer un
fond à n'importe quel élément (un titre, un paragraphe, certains mots d'un
paragraphe, etc.).
5. La transparence
Le CSS nous permet de jouer très facilement avec les niveaux de
transparence des éléments ! Pour cela, nous allons utiliser des
fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.
La propriété opacity
La propriété opacity, très simple, permet d'indiquer le niveau d'opacité
(c'est l'inverse de la transparence).
Avec une valeur de 1, l'élément sera totalement opaque : c'est le
comportement par défaut.
Avec une valeur de 0, l'élément sera totalement transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur
de 0.6, votre élément sera opaque à 60%… et on verra
donc à travers !
Voici comment on peut l'utiliser :
Code : CSS
P
{
opacity: 0.6;
}
Code : CSS
body
{
background: url('neige.png');
}
p{
background-color: black;
color: white;
opacity: 0.3;
}
Remarque :Si vous appliquez la propriété opacity à un élément de la
page, tout le contenu de cet élément sera rendu transparent(même les
images, les autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la
couleur de fond transparente, utilisez plutôt la notation RGBa que nous
allons découvrir.
54
La notation RGBa
CSS3 nous propose une autre façon de jouer avec la transparence :
la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue
précédemment, mais avec un quatrième paramètre : le niveau de
transparence (appelé « canal alpha »). De la même façon que
précédemment, avec une valeur de 1, le fond est complètement opaque.
Avec une valeur inférieure à 1, il est transparent.
Code : CSS
P
{
background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié
transparent */
}
Vous pouvez obtenir exactement le même effet qu'avec opacity
juste en jouant avec la notationRGBa, Cette notation est connue de tous
les navigateurs récents, y compris Internet Explorer (à partirde IE9).
Pour les navigateurs plus anciens, il est recommandé d'indiquer la
notation RGB classique en plus de RGBa.
Pour ces navigateurs, le fond ne sera alors pas transparent mais, au
moins, il y aura bien une couleur d'arrière-plan.
Code : CSS
p{
background-color: rgb(255,0,0); /* Pour les navigateurs anciens
*/
background-color: rgba(255,0,0,0.5); /* Pour les navigateurs
plus récents */
55
Chap. 3 : Les bordures et les ombres
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Les caractéristiques des bordures
Les types de bordures
Les différentes positions d’une bordure
INTRODUCTION
Le CSS définit un espace dans lequel pour chaque élément de la hiérarchie du document
HTML5. C’est ce que l’on nomme communément le modèle de boite de CSS .la boite associée à
chaque élément conditionne la surface et éventuellement la position qu’il a dans la page et donc la
position des boites des autres éléments par rapport à lui. Dans les modèles des boites, chaque élément
visuel possède un contenu direct ou indirect que nous pouvons dimensionner mais il peut
également disposer d’un espacement d’une bordure et d’une marge par rapport aux boites des
éléments environnants. Nous allons nous intéresser aux bordures et aux effets d’ombrages que l’on
peut appliquer, aussi bien sur le texte que sur les blocs qui constituent la page.
I. Bordures standard
La création de bordure autour d’un élément permet d’obtenir des effets visuels qui
attirent l’attention dans le but par exemple de mettre davantage en évidence la structure de la
page. En CSS nous pouvons attribuer à une bordure des caractéristiques variées telles qu’un
style une largeur et une couleur.
Le CSS vous offre un large choix de bordures pour décorer votre page.
De nombreuses propriétés CSS vous permettent de modifier l'apparence
de vos bordures : border-width, border-color, border-style….
Pour border on peut utiliser jusqu'à trois valeurs pour modifier
l'apparence de la bordure :
La largeur : indiquez la largeur de votre bordure. Mettez une valeur en
pixels (comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a
appris, soit un nom de couleur (black, red,…), soit
une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212,
37)).
Le type de bordure : Votre bordure peut être un simple trait, ou
des pointillés, ou encore des tirets,etc. Voici les différentes valeurs
disponibles :
none : pas de bordure (par défaut) ;
solid : un trait simple ;
dotted : pointillés ;
dashed : tirets ;
double : bordure double ;
56
groove : en relief ;
ridge : autre effet relief ;
inset : effet 3D global enfoncé ;
outset : effet 3D global surélevé.
Par exemple, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels
autour de mes titres, on écrit le code suivant :
Code: CSS
h1
{
border: 3px blue dashed;
}
II. Positionnement de la bordure
Pour mettre des bordures différentes en fonction du côté (haut, bas,
gauche ou droite), vous devrez utiliser ces quatre propriétés :
border-top : bordure du haut ;
border-bottom : bordure du bas ;
border-left : bordure de gauche ;
border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la
bordure si vous le désirez : border-top-widthpour modifier l'épaisseur de
la bordure du haut, border-top-color pour la couleur du haut, etc.
Pour ajouter une bordure uniquement à gauche et à droite des
paragraphes, on écrira donc :
Code : CSS
P
{
border-left: 2px solid black;
border-right: 2px solid black;
}
On peut modifier les bordures de n'importe quel type d'élément sur
la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi
modifier la bordure des images, des textes importants comme <strong>,
etc., c'est un peu le Saint Graal attendu par les webmasters depuis des
millénaires (ou presque). Depuis que CSS3on peut créer les bordures
arrondies. La propriété border-radius va nous permettre d'arrondir
facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille
(« l'importance ») de l'arrondi en pixels :
Code : CSS
P
{
border-radius: 10px;
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas,
indiquez quatre valeurs :
Code : CSS
P
{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre :
57
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.
Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes
elliptiques figure suivante). Dans ce cas, il faut indiquer deux valeurs
séparées par une barre oblique (slash, caractère /).
Code : CSS
p{border-radius: 20px /
10px;
}
Code : CSS
P
58
{
box-shadow: 6px 6px 6px black inset;
}
La propriété box-shadow fonctionne sur tous les navigateurs
récents, IE9 inclus. Pour certains navigateurs, en particulier les
navigateurs mobiles, il faut encore rajouter un préfixe. Ainsi, il faudra
écrire une version -webkitbox-shadow pour que cela fonctionne sur les
navigateurs Android et iOS.
59
Chap. 4 : Style du Texte
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Présenter les propriétés permettant d’indiquer la taille de la police, la police d’écriture…
Les propriétés de décorations, d’alignement, la police personnalisée…
Mettre le texte en gras, en italique…
INTRODUCTION
Le « formatage du texte représente la modification de l’apparence du texte. Il existe de
nombreuses propriétés CSS pour faire la mise en forme. Cette modification s’applique sur la
taille du texte, la police des caractères, alignement, la mise en gras, en italique du texte.
I. La taille
Pour modifier la taille du texte, on utilise la propriété CSS font-size. Il existe deux
méthodes
Une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très
précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque
d'indiquer une taille trop petite pour certains lecteurs.
Une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être
plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.
1) Une taille absolue
Pour indiquer une taille absolue, on utilise généralement les pixels.
Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
Code : CSS
font-size: 16px
Code : CSS
p{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}
2) Une taille relative
C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences
de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la
taille avec des mots en anglais comme ceux-ci :
xx-small : minuscule ;
x-small : très petit ;
small : petit ;
60
medium : moyen ;
large : grand ;
x-large : très grand ;
xx-large : euh… gigantesque.
Code : CSS
p{
font-size: small;
}
h1
{
font-size: large;
}
Cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y
a que sept noms). Mais il existe d'autres moyens parmi lesquels à
indiquer la taille en « em ».
Si vous écrivez 1em, le texte a une taille normale.
Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure
à 1, comme 1.3em.
Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme
0.8em.
Remarque : pour les nombres décimaux, il faut mettre un point et
non une virgule. Vous devez donc écrire « 1.4em» et non pas «
1,4em ».
Exemple :
Code : CSS
p{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}
II. La police.
1) Modifier la police utilisée
La propriété CSS qui permet d'indiquer la police à utiliser est font-
family.
Vous devez écrire le nom de la police comme ceci :
Code : CSS
balise
{
font-family: police;
}
Seulement, pour éviter les problèmes si l'internaute n'a pas la même
police que vous, on précise en général plusieurs noms de police, séparés
par des virgules :
Code : CSS
balise
{
font-family: police1, police2, police3, police4;
61
}
Le navigateur essaiera d'abord d'utiliser la police1, S'il ne l'a pas, il
essaiera la police2, S'il ne l'a pas, il passera à lapolice3, et ainsi de suite.
En général, on indique en tout dernier serif, ce qui correspond à
une police par défaut (qui ne s'applique que si aucune autre police n'a été
trouvée).Il existe aussi une autre police par défaut appelée sans-serif.
La différence entre les deux est la présence de petites pattes de liaison en
bas des lettres, que la police sans-serif n'a pas.
Voici une liste de polices qui fonctionnent bien sur la plupart des
navigateurs :
Arial ;
Arial Black ;
Comic Sans MS ;
Courier New ;
Georgia ;
Impact ;
Times New Roman ;
Trebuchet MS ;
Verdana.
Code : CSS
p{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black,
ou sinon Arial, ou sinon Verdana, ou si rien n'amarché, mets une police
standard (sans-serif) ».
En général, il est bien d'indiquer un choix de trois ou quatre polices
(+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura
été trouvée sur l'ordinateur du visiteur. Si le nom de la police comporte
des espaces, il est recommandé de l'entourer de côtes, comme l’exemple
précédent pour " Arial Black "
2) Utiliser une police personnalisée avec @font-face
En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :
Code : CSS
@font-face {
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot');
}
3) Mettre en italique
Code : CSS
em
{
font-style: normal;
}
Ainsi, dans l'exemple suivant, on se sert de font-style pour mettre en
italique tous les titres <h2>:
Concrètement, en CSS, pour mettre en italique, on utilise font-
style qui peut prendre trois valeurs :
62
Italic : le texte sera mis en italique.
Oblique : le texte sera passé en oblique (les lettres sont penchées,
le résultat est légèrement différent de l'italique proprement dit).
Normal : le texte sera normal (par défaut). Cela vous permet
d'annuler une mise en italique. Par exemple, si vous voulez que les
textes entre <em>ne soient plus en italique, vous devrez écrire :
Code : CSS
h2
{
font-style: italic;
}
4) Mettre en gras
La propriété CSS pour mettre en gras est font-weight et prend les
valeurs suivantes :
bold: le texte sera en gras ;
Normal : le texte sera écrit normalement (par défaut).
Voici par exemple comment écrire les titres en gras :
Code: CSS
h1
{
font-weight: bold;
}
63
}
Le langage CSS nous permet de faire tous les alignements connus : à
gauche, centré, à droite et justifié. C'est tout simple. On utilise la propriété
text-align et on indique l'alignement désiré :
left : le texte sera aligné à gauche (c'est le réglage par défaut).
center : le texte sera centré.
right : le texte sera aligné à droite.
justify : le texte sera « justifié ». Justifier le texte permet de faire en
sorte qu'il prenne toute la largeur possible sans
laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont
toujours justifiés.
Code : CSS
h1
{
text-align: center;
}
p{
text-align: justify;
}
.signature
{
text-align: right;
}
Remarque : Vous ne pouvez pas modifier l'alignement du texte d'une
balise inline (comme <span>, <a>, <em>, <strong>…).L'alignement
ne fonctionne que sur des balises de type block(<p>, <div>, <h1>,
<h2>, …) et c'est un peu logique, quand on y pense : on ne peut pas
Modifier l'alignement de quelques mots au milieu d'un paragraphe. C’est
donc en général le paragraphe entier qu'il vous faudra aligner.
64
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de
faire flotter l'image à gauche :
Code : CSS
.imageflottante
{
float: left;
}
Amus
2. Stopper un flottant
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous
flottant et non plus à côté ». C'est la propriété clear, qui peut prendre ces trois valeurs :
left : le texte se poursuit en-dessous après un float: left;
right : le texte se poursuit en-dessous après un float: right;
both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un
float: right.
Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à
gauche et après un flottant à droite. Pour illustrer son fonctionnement, on va prendre ce code
HTML :
Code : HTML
<p><img src="flash.gif" class="imageflottante" alt="Image flottante"
/></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
Et ce code CSS :
Code : CSS
.imageflottante
{
float: left;
}.
dessous
{ clear: both; }
65
Chap.5 : Le positionnement en CSS
Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
Lister les différents types de positionnement et leur rôle
Pouvoir insérer ces balises dans un code CSS
INTRODUCTION
Le positionnement en CSS consiste une propriété très puissante : display. Elle est
capable de transformer n'importe quel élément de votre page d'un type vers un autre. Avec
cette propriété magique, je peux par exemple imposer à mes liens (originellement de type
inline) d'apparaître sous forme de blocs :
Code: CSS
a{
display: block;
}
À ce moment-là, les liens vont se positionner les uns en-dessous des autres (comme des blocs
normaux) et il devient possible de modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS (il y
en a encore d'autres) :
Valeur Exemples Description
inline<a>, <em>,
<span>… Eléments d'une ligne. Se placent les uns à côté des autres.
block<p>, <div>,
<section>…
Eléments en forme de blocs. Se placent les uns en-dessous des autres et peuvent être
redimensionnés.
inlineblock
<select>,
<input>
Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être
redimensionnés (comme les blocs). None<head>Eléments non affichés.
On peut donc décider de masquer complètement un élément de la page avec cette propriété.
Par exemple, si nous voulons masquer les éléments qui ont la classe « secret », on écrit :
Code: CSS
.secret
{
display: none;
}
I. Les positionnements absolu, fixe et relatif
Comme pour les flottants, les positionnements absolu, fixe et relatif fonctionnent aussi sur
des balises de type inline. Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des
66
balises block que sur des balises inline. Il faut d'abord faire son choix entre les trois modes de
positionnement disponibles. Pour cela, on utilise la propriété CSS position à laquelle on
donne une de ces valeurs :
absolute : positionnement absolu ;
67
Le positionnement relatif permet de décaler l'élément par rapport à sa position
normale.
Le positionnement relatif peut vite devenir difficile à utiliser. Ce
positionnement permet d'effectuer des « ajustements» : l'élément est
décalé par rapport à sa position initiale.
Prenons par exemple un texte important, situé entre deux balises
<strong>. Mettons-le sur fond vert pour qu'on puisse mieux le repérer :
Code: CSS
strong
{
background-color: green; /* Fond vert*/
68
Chap.6 : Le modèle des boites
Introduction
69
La balise inline <a></a>, elle, se trouve à l'intérieur d'une balise block et
le texte vient s'insérer sur la même ligne.
2. Quelques exemples
Afin de mieux vous aider à assimiler quelles balises sont inline et quelles
balises sont block, voici un petit tableau dressant la liste de quelques
balises courantes.
<p><em>
<footer><strong>
<h1><mark>
<h2><a>
<article><img />…
Ce tableau n'est pas complet, loin de là. Si vous voulez avoir la liste
complète des balises qui existent et savoir si elles sont de type inline ou
block, reportez-vous à l'annexe donnant la liste des balises HTML.
II. Les balises universelles
Vous les connaissez déjà car je vous les ai présentées il y a quelques
chapitres. Ce sont des balises qui n'ont aucun sens particulier
(contrairement à <p>qui veut dire « paragraphe », <strong>« important
», etc.). Le principal intérêt de ces balises est que l'on peut leur appliquer
une class (ou un id) pour le CSS quand aucune autre balise ne convient.
Il existe deux balises génériques et, comme par hasard, la seule différence
entre les deux est que l'une d'elle est inline et l'autre est block :
<span></span>(inline) ;
<div></div>(block).
1. Respectez la sémantique
Les balises universelles sont « pratiques » dans certains cas, certes,
mais attention à ne pas en abuser. Je tiens à vous avertir de suite :
beaucoup de webmasters mettent des <div>et des <span>trop souvent
et oublient que d'autres balises plus adaptées existent.
Voici deux exemples :
Exemple d'un span inutile : <span class="important">. Je ne devrais
jamais voir ceci dans un de vos codes alors qu'il existe la balise
<strong>qui sert à indiquer l'importance !
Exemple d'un div inutile : <div class="titre">. Ceci est complètement
absurde puisqu'il existe des balises faites spécialement pour les titres
(<h1>, <h2>…).
Oui, vous allez me dire qu'au final le résultat (visuel) est le même. Je suis
tout à fait d'accord. Mais les balises génériques n'apportent aucun sens à
la page et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours
d'autres balises plus adaptées quand c'est possible. Google lui-même le
conseille pour vous aider à améliorer la position de vos pages au sein de
ses résultats de recherche.
2. Les dimensions
Nous allons ici travailler uniquement sur des balises de type block.
Pour commencer, intéressons-nous à la taille des blocs. Contrairement à
un inline, un bloc a des dimensions précises. Il possède une largeur et une
hauteur. Ce qui fait, ô surprise, qu'on dispose de deux propriétés CSS :
width : c'est la largeur du bloc. À exprimer en pixels (px) ou en
pourcentage (%).
70
height : c'est la hauteur du bloc. Là encore, on l'exprime soit en
pixels (px), soit en pourcentage (%).
Rmq :Pour être exact, width et height représentent la largeur et la
hauteur du contenu des blocs. Si le bloc a des marges (on va découvrir ce
principe un peu plus loin), celles-ci s'ajouteront à la largeur et la hauteur.
Par défaut, un bloc prend 100% de la largeur disponible. On peut le vérifier
en appliquant à nos blocs des bordures ou une couleur de fond. Les blocs
prennent toute la largeur disponible ;
Maintenant, rajoutons un peu de CSS afin de modifier la largeur des
paragraphes. Le CSS suivant dit : « Je veux que tous mes paragraphes
aient une largeur de 50% ».
Code : CSS
P
{
width: 50%;
}
Un paragraphe de 50% de largeur. Les pourcentages seront utiles pour
créer un design qui s'adapte automatiquement à la résolution d'écran du
visiteur.
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une
dimension précise en pixels :
Code : CSS
p{
width: 250px;
}
3. Minimum et maximum
On peut demander à ce qu'un bloc ait des dimensions minimales et
maximales. C'est très pratique car cela nous permet de définir des
dimensions « limites » pour que notre site s'adapte aux différentes
résolutions d'écran de nos visiteurs :
min-width : largeur minimale ;
min-height : hauteur minimale ;
max-width : largeur maximale ;
max-height : hauteur maximale.
Par exemple, on peut demander à ce que les paragraphes occupent
50% de la largeur et exiger qu'il fassent au moins 400 pixels de large dans
tous les cas :
Code : CSS
p
{
width: 50%;
min-width: 400px;
}
Observez le résultat en modifiant la largeur de la fenêtre de votre
navigateur. Vous allez voir que, si celle-ci est trop petite, le paragraphe se
force à occuper au moins 400 pixels de largeur.
4. Les marges
Il faut savoir que tous les blocs possèdent des marges.
Il existe deux types de marges :
71
les marges intérieures ;
les marges extérieures.
Marges extérieure et intérieure. Sur ce bloc, j'ai mis une bordure pour
qu'on repère mieux ses frontières. L'espace entre le texte et la bordure est
la marge intérieure (en vert).
L'espace entre la bordure et le bloc suivant est la marge extérieure (en
rouge).
En CSS, on peut modifier la taille des marges avec les deux propriétés
suivantes :
padding: indique la taille de la marge intérieure. À exprimer en général
en pixels (px).
margin: indique la taille de la marge extérieure. Là encore, on utilise le
plus souvent des pixels.
Les balises de type inline possèdent également des marges. Vous pouvez
donc aussi essayer ces manipulations sur ce type de balises.
Code : CSS
p{
width: 350px;
border: 1px solid black;
text-align: justify;
}
72
Une marge extérieure ajoutée aux paragraphes margin (comme
padding d'ailleurs) s'applique aux quatre côtés du bloc. Si vous voulez
spécifier des marges différentes en haut, en bas, à gauche et à droite, il va
falloir utiliser des propriétés plus précises… Le principe est le même que
pour la propriété border, vous allez voir !
5. En haut, à droite, à gauche, en bas
L'idéal serait que vous reteniez les termes suivants en anglais :
top : haut ;
bottom : bas ;
left : gauche ;
right : droite.
Ainsi, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et
padding, histoire que vous soyez sûrs que vous avez compris le principe.
Voici la liste pour margin :
margin-top : marge extérieure en haut ;
margin-bottom : marge extérieure en bas ;
margin-left : marge extérieure à gauche ;
margin-right : marge extérieure à droite.
Et la liste pour padding :
padding-top : marge intérieure en haut ;
padding-bottom : marge intérieure en bas ;
padding-left : marge intérieure à gauche ;
padding-right : marge intérieure à droite.
Rmq : Il y a d'autres façons de spécifier les marges avec les propriétés
margin et padding.
Par exemple :
margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite
(le px est facultatif dans ce cas), 3 px en bas, 1 px à gauche ».
Autre notation raccourcie : margin: 2px 1px; signifie « 2 px de marge en
haut et en bas, 1 px de marge à gauche et à droite ».
6. Centrer des blocs
Il est tout à fait possible de centrer des blocs. C'est même très pratique
pour réaliser un design centré quand on ne connaît pas la résolution du
visiteur. Pour centrer, il faut respecter les règles suivantes :
donnez une largeur au bloc (avec la propriété width) ;
indiquez que vous voulez des marges extérieures automatiques,
comme ceci : margin: auto;
Essayons cette technique sur nos petits paragraphes (lignes 3 et 4) :
Code : CSS
p{
width: 350px; /* On a indiqué une largeur (obligatoire) */
margin: auto; /* On peut donc demander à ce que le bloc soit
centré avec auto */
border: 1px solid black;
text-align: justify;
padding: 12px;
margin-bottom: 20px;
}
Ainsi, le navigateur centre automatiquement nos paragraphes !
73
Il n'est cependant pas possible de centrer verticalement un bloc avec
cette technique. Seul le centrage horizontal est permis .
7. overflow : couper un bloc
Supposons que vous ayez un long paragraphe et que vous vouliez (pour
une raison qui ne regarde que vous) qu'il fasse 250 px de large et 110 px
de haut. Ajoutons-lui une bordure et remplissons-le de texte… à ras-:
Code : CSS
p{
width: 250px;
height: 110px;
text-align: justify;
border: 1px solid black;
}
Le texte dépasse du bloc de paragraphe
Eh oui ! Vous avez demandé des dimensions précises, vous les avez eues !
Mais… le texte ne tient pas à l'intérieur d'un si petit bloc.
Si vous voulez que le texte ne dépasse pas des limites du paragraphe, il
va falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut
accepter :
visible (par défaut) : si le texte dépasse les limites de taille, il reste visible
et sort volontairement du bloc.
hidden : si le texte dépasse les limites, il sera tout simplement
coupé. On ne pourra pas voir tout le texte.
scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf
que cette fois, le navigateur mettra en place des barres de
défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu
comme un cadre à l'intérieur de la page.
auto : c'est le mode « pilote automatique ». En gros, c'est le
navigateur qui décide de mettre ou non des barres dedéfilement (il
n'en mettra que si c'est nécessaire). C'est la valeur que je conseille
d'utiliser le plus souvent.
Avec overflow: hidden; le texte est donc coupé (on ne peut pas voir la
suite), comme sur la
Le texte est coupé aux limites du paragraphe
Essayons maintenant overflow: auto; avec le code CSS suivant (résultat
à la figure suivante) :
Code : CSS
p{
width: 250px;
height: 110px;
text-align: justify;
border: 1px solid black;
overflow: auto;
}
Des barres de défilement nous permettent maintenant de consulter
le contenu qui n'était pas visible.
Il existe une ancienne balise HTML, <iframe>, qui donne à peu près le
même résultat. Cependant, l'usage de cette balise est déconseillé
aujourd'hui. Elle permet de charger tout le contenu d'une autre page HTML
au sein de votre page.
74
8. word-wrap : couper les textes trop larges
Si vous devez placer un mot très long dans un bloc, qui ne tient pas dans
la largeur, vous allez adorer word-wrap. Cette propriété permet de forcer
la césure des très longs mots (généralement des adresses un peu
longues).
La figure suivante représente ce que l'on peut avoir quand on écrit une
URL un peu longue dans un bloc. Le texte déborde en largeur. L'ordinateur
ne sait pas « couper » l'adresse car il n'y a ni espace, ni tiret. Il ne sait pas
faire la césure. Avec le code suivant, la césure sera forcée dès que le texte
risque de dépasser.
Code : CSS
p{
word-wrap: break-word;
}
Le texte est coupé pour ne pas déborder on conseille d'utiliser cette
fonctionnalité dès qu'un bloc est susceptible de contenir du texte saisi par
des utilisateurs (par exemple sur les forums de votre futur site). Sans cette
astuce, on peut « casser » facilement le design d'un site (en écrivant par
exemple une longue suite de « aaaaaaaaaaa »).
75