ISMC

INSTITUT. SUPERIEUR
DE. MARKETING ET DE. COMPTABILITE
DALOA

SUPPORT DE COURS
NIVEAU : PREMIERE ANNEE- LICENCE 1

HTML
&

F EUILLES DE STYLE

Fév. 2016

M. NYAMIEN JP
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

INTRODUCTION GÉNÉRALE

Un site sur internet est une entreprise coûteuse en terme de temps. Les mises à jour
régulières sont parfois difficiles à réaliser. Or, un site qui n’évolue pas est à disparaître
ou du moins à voir sa fréquentation diminuer. L’internaute aime le changement, il ne
supporte pas longtemps un site qui n’évolue guère comme c’est le cas avec un site
statique que nous avons étudié en première année. Les langages dynamiques
permettent de résoudre ces problèmes. Ils facilitent les opérations de mises à jour,
permettent plus d’interactivité sur les pages…

1. DEFINITIONS
1.1. Internet

1.2. Le Web
Le Web et Internet sont deux choses différentes.
On a vu qu'Internet permettait de relier des ordinateurs entre eux. Mais cela ne permet
pas automatiquement d'avoir des pages Web avec textes, images, etc... Pour cela, il a
fallu que quelqu'un invente une façon de communiquer, un langage qui allait être
utilisé via Internet.
Ce quelqu'un, c'est un britannique du nom de Tim Berners-Lee. C'est lui qui inventa
le Web de son nom complet le World Wide Web :: « la grande toile d'araignée
mondiale ». La toile fait bien sûr référence à l'immense réseau qu'est Internet.
On peut donc voir les choses ainsi (pour résumer) : Internet est la structure et le Web
est ce qui y circule.
On distingue :
 Les sites web statiques :

 Les sites web dynamiques :

1.3. Navigateur (Browser)

1.4. Webmaster

M. NYAMIEN JP Page 2 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

2. FONCTIONNEMENT UN SITE WEB

Le Web est souvent confondu avec Internet, mais Internet ne se résumé
définitivement pas au Web : bon nombre d'autres systèmes, applications et protocoles
utilisent Internet.
Internet est un réseau composé d'ordinateurs. Ceux-ci peuvent être classés en deux
catégories.
 Les clients : ce sont les ordinateurs des internautes comme vous. Votre ordinateur
fait donc partie de la catégorie des clients. Chaque client représente un visiteur d'un
site web. Dans les schémas qui vont suivre, l'ordinateur d'un client sera représenté
par l'image suivante.
 Les serveurs : ce sont des ordinateurs puissants qui stockent et délivrent des sites
web aux internautes, c'est-à-dire aux clients. La plupart des internautes n'ont jamais
vu un serveur de leur vie. Pourtant, les serveurs sont indispensables au bon
fonctionnement du Web. Sur les prochains schémas, un serveur sera représenté par
l'image de la figure suivante.

Votre ordinateur est appelé le client, tandis que l'ordinateur qui détient le site web
est appelé le serveur.

CAS D'UN SITE STATIQUE

Lorsque le site est statique, le schéma est très simple. Cela se passe en deux temps,
ainsi que vous le schématise la figure suivante :
1. le client demande au serveur à voir une page web ;
2. le serveur lui répond en lui envoyant la page réclamée.

La page web est générée à chaque fois qu'un client la réclame. C'est précisément ce
qui rend les sites dynamiques vivants : le contenu d'une même page peut changer d'un
instant à l'autre.
C'est comme cela que certains sites parviennent à afficher par exemple votre
pseudonyme sur toutes les pages. Étant donné que le serveur génère une page à

M. NYAMIEN JP Page 3 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

chaque fois qu'on lui en demande une, il peut la personnaliser en fonction des goûts
et des préférences du visiteur (et afficher, entre autres, son pseudonyme).

3. CREATION D’UN SITE WEB

Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas
simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un
traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer
des images, faire des liens entre les pages, etc.
 Un éditeur de texte : en théorie, un programme tel que le Bloc-notes livré
avec Windows suffit, bien qu'il soit recommandé d'utiliser un outil un peu
plus évolué comme Notepad++.
 Un navigateur web : il permet de tester la page web. Vous pouvez utiliser
par exemple Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari,
ou tout autre navigateur auquel vous êtes habitués pour aller sur le web. Il
est conseillé de tester son site régulièrement sur différents navigateurs.

M. NYAMIEN JP Page 4 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

1ère partie :

LE HTML
PREMIERS PAS AVEC HTML

1. LES ROLES DE HTML

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du
lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML
que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images…
Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal
de la page, voici une image à afficher, etc. ».

2. LES DIFFERENTES VERSIONS DE HTML

Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première
version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images !
Voici un très bref historique de ces langages pour votre culture générale.
 HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
 HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec
l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions
suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés
par le W3C (tandis que la première version a été créée par un seul homme).
 HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses
possibilités au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.
 HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit
de HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation
de frames (qui découpent une page web en plusieurs parties), des tableaux plus
complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version
permet pour la première fois d'exploiter des feuilles de style, notre fameux CSS !
 HTML 5 : c'est LA dernière version. Encore assez peu répandue, elle fait beaucoup
parler d'elle car elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est cette version que nous allons
découvrir ensemble.

M. NYAMIEN JP Page 5 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

je vous recommande chaudement de commencer dès aujourd'hui avec ces nouvelles versions.
Leurs apports sont nombreux et valent vraiment le coup. D'ailleurs, de nombreux sites web
professionnels se construisent aujourd'hui sur ces dernières versions.

3. PREMIERE PAGE WEB EN HTML

3.1. Créer une page web avec l'éditeur

Avec Notepad++

3.2. Les balises et attributs

3.2.1. Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles
à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il
doit afficher. 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.

 Les balises en paires :

<titre>Ceci est un titre</titre>

 Les balises orphelines :

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit
précis (par exemple une image)
Une balise orpheline s'écrit comme ceci :

<image />
NB : Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>.
Néanmoins, pour ne pas les confondre avec le premier type de balise, les webmasters
recommandent de rajouter ce / (slash) à la fin des balises orphelines.

3.2.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 :

<balise attribut="valeur">

M. NYAMIEN JP Page 6 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

LES BASES DU HTML

1. STRUCTURE DE BASE D'UNE PAGE

VERSION : HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>

</body>
</html>
 Le doctype

 La balise </html>

 L'en-tête <head>

 et le corps <body>

 L'encodage (charset) <meta charset="utf-8" /> : Cette balise indique l'encodage

utilisé dans votre fichier .html. l'encodage indique la façon dont le fichier est
enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher
(accents, idéogrammes chinois et japonais, caractères arabes, etc.).
 Le titre

2. LES COMMENTAIRES
<!-- Ceci est un commentaire -->

3. LE CODE SOURCE

4. ORGANISATION DU TEXTE
4.1. Les paragraphes
La plupart du temps, 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.

M. NYAMIEN JP Page 7 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

4.2. Sauter une ligne

C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />
 <p> </p> : pour organiser son texte en paragraphes ;
 <br /> : pour aller à la ligne.

4.3. Les Titres

 <h1> </h1>
 <h2> </h2>
 <h3> </h3>
 <h4> </h4>
 <h5> </h5>
 <h6> </h6>

4.4. Les listes

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations. Nous allons découvrir ici 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.
4.4.1. Liste non ordonnée
<ul></ul>
Exemple
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>

4.4.2. 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>.
Les variantes <ol type=a>, <ol type=I>, <ol type=i> et <ol type=1> donnent
respectivement des lettres minuscules, des lettres majuscules en chiffres romains, des
lettres minuscules en chiffres romains et des chiffres

M. NYAMIEN JP Page 8 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

LES LIENS

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il
faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit
conduire.
<a href=" ">IMSC</a>

1. UN LIEN VERS UN AUTRE SITE

<a href="http://www.esupimsc.com">Ecole supérieure</a>

2. UN LIEN VERS UNE AUTRE PAGE DE SON SITE

2.1. Deux pages situées dans un même dossier
On parle de lien relatif.
Supposons page1.html et page2.html. deux fichiers sur notre disque dans le même
dossier
<a href="page2.html">.

2.2. Deux pages situées dans des dossiers différents

Dans ce cas de figure, le lien doit être rédigé comme ceci :
<a href="contenu/page2.html">

S'il y a plusieurs sous-dossiers, on écrirait ceci :

<a href="contenu/autredossier/page2.html">

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans
l'arborescence, il faut écrire deux points comme ceci :
<a href="../page2.html">

3. UN LIEN VERS UNE ANCRE

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages
HTML lorsqu'elles sont très longues. En effet, il peut alors être utile de faire un lien
amenant plus bas dans la même page pour que le visiteur puisse sauter directement à
la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir
de repère. Ce peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut
id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette
ancre.
Par exemple :

M. NYAMIEN JP Page 9 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre.
Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>

3.1. Lien vers une ancre située dans une autre page
L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à
une ancre située plus bas sur cette page. En pratique c'est assez simple à faire : il suffit
de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
Comme ceci
<a href="page2.html#mon_ancre"> inscription</a>

3.2. Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela,
on rajoutera target="_blank" à la balise <a> :
<a href="http://www.esupimsc.com" target="_blank">Ecole supérieure</a>

M. NYAMIEN JP Page 10 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

LES IMAGES

Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne
doit pas les choisir au hasard. En effet, les images sont parfois volumineuses à
télécharger, ce qui ralentit le temps de chargement de la page.
Faites en sorte que vos pages restent lisibles et rapides à télécharger,

1. LES DIFFERENTS FORMATS D'IMAGES.

1.1. Le JPEG
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues
sur le Web. Ce format est conçu pour réduire le poids des photos (c'est-à-dire la taille
du fichier associé), qui peuvent comporter plus de 16 millions de couleurs différentes.

1.2. Le PNG
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est
adapté à la plupart des graphiques (je serais tenté de dire « à tout ce qui n'est pas une
photo »). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère
pas la qualité de l'image.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit
comporter l'image :
 PNG 8 bits : 256 couleurs ;
 PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG).

1.3. Le GIF
C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé
par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images
sont généralement plus légères et la transparence est de meilleure qualité.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs
millions de couleurs).
Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être
animé.
Remarque

Il existe un format adapté à chaque image

Si on résume, voici quel format adopter en fonction de l'image que vous avez :
 Une photo : utilisez un JPEG.
 N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG
8 bits ou éventuellement un GIF.
 N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.

M. NYAMIEN JP Page 11 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

 Une image animée : utilisez un GIF animé.

2. INSERTION D'UNE IMAGE

On utilise la balise
<img src=“ “ alt=“ “ />
La balise doit être accompagnée de deux attributs obligatoires :
 src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez
soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png), soit mettre le
chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un
sous-dossier images, vous devrez taper : src="images/fleur.png"
 alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à
l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera
affiché à la place de l'image si celle-ci ne peut pas être téléchargée.

M. NYAMIEN JP Page 12 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

LES TABLEAUX

1. LES COMMANDES

Les commandes de base pour créer des tableaux en HTML sont les suivantes:
<table> </table>
Cette commande est la commande principale pour ouvrir une zone de tableaux.
 <tr></tr> Commande pour définir une rangée. Il faut utiliser une séquence
<tr></tr> pour chacune des rangées requises, à l'intérieur de la zone
<table></table>.
 <td></td> Commande pour spécifier les données pour chaque rangée comme dans
l'exemple ci-dessus. Le code pour produire ce tableau s'écrira donc:
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
Les paramètres par défaut sont l'alignement à gauche (align=left) et l'alignement
vertical au centre (valign=middle).
 <th></th> Commande pour ajouter une rangée en entête. Les paramètres par
défaut des entêtes (TH= "Table header") sont l'usage du caractère gras et la position
centrée.
 <caption></caption> Commande permettant de mettre un titre au-dessus
<caption align=top> ou en-dessous <caption align=bottom> d'un tableau. La
commande doit être placée directement sous la commande TABLE et avant la
première rangée de données.

2. LES ATTRIBUTS

Les attributs des tableaux sont:

 Border L'attribut Border se place dans la commande Table et permet de définir
une ligne d'épaisseur variable entourant le tableau.
 Align La commande ALIGN utilisée dans la zone de CAPTION permet de placer le
titre au-dessus ou en-dessous du tableau. Cette même commande utilisée dans les
sections <th>, <tr> ou <td> permet plutôt d'aligner le contenu des cellules à
gauche align=left, à droite align=right ou au centre align=center.
 Valign Cette commande est utilisée à l'intérieur des cellules tr th ou td et permet
d'aligner verticalement le contenu en haut TOP , au centre MIDDLE , au bas
BOTTOM ou sur la même ligne BASELINE.

M. NYAMIEN JP Page 13 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

 nowrap Cette commande, lorsqu'utilisée dans les cellules TH ou TD empêche que

le texte ne soit brisé en deux ou plusieurs lignes. Comparez les deux tableaux
suivants pour voir la différence. La commande s'écrit comme suit: <td nowrap> ou
<th nowrap> selon le cas.
 colspan La commande colspan dans un tableau permet d'ajouter une rangée qui
s'étend sur toute la largeur du nombre de colonnes que l'on désigne. Ainsi, une
valeur de <td colspan=2> affichera une boîte d'une largeur de 1 colonne et de 2
rangées
 cellpadding La commande cellpadding détermine l'espacement entre les données
dans les cellules et la bordure. Elle doit être définie avec la commande border.
 rowspan La commande rowspan dans un tableau permet d'ajouter une colonne
qui s'étend sur toute la largeur du nombre de rangées que l'on désigne. Ainsi, une
valeur de <td rowspan=2> affichera une boîte d'une largeur de 1 colonne et de 2
rangées.
 width Variation de la largeur totale d'un tableau.

M. NYAMIEN JP Page 14 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

FORMULAIRES

1. LA COMMANDE FORM

Des formulaires peuvent être préparés afin de saisir des données et les traiter au
niveau du serveur.
Pour rédiger un questionnaire, il faut:
Établir une zone d'édition (appelée FORM) en utilisant les commandes
<form></form>.

Toute cette information se retrouve dans la commande suivante:

<form method="post" action=" ">

2. LES COMMANDES INPUT

Voici un exemple complet de formulaire. Veuillez noter que les commandes de

formatage (caractères gras, centrer, insertion d'une image, etc.) que l'on a décrites
jusqu'ici sont toutes valables et utilisables.
La commande input="text"
Parmi les choix disponibles en HTML, un des types d'entrée de données est le champ
input type="text". Dans ce cas, il faut inscrire le type de champ, le nom du champ et
ses dimensions à l'écran.
Ainsi, dans la question ci-dessous, le code à utiliser pour entrer le nom de la personne
est:
NOM: <input type="text" name="name" size=30>.

3. LA COMMANDE INPUT="RADIO"

Un autre type de champ est le type "input type=radio" qui permet d'afficher une
série de boutons radio comme choix de réponses.
Il suffit d'abord de poser la question puis de positionner la commande suivante:
<input type="radio" name="info" value="OUI"> OUI
<input type="radio" name="info" value="NON"> NON

4. LA COMMANDE INPUT=CHECKBOX

La commande input Type=checkbox permet d'afficher une liste ou plusieurs choix

sont possibles en même temps. La commande s'écrit:
- Kent, England <input name="city" TYPE=checkbox VALUE="Kent"><BR> ou
-<input name="city" TYPE=checkbox VALUE="Kent"> Kent, England <BR> selon
que vous voulez afficher le bouton avant ou après la réponse.

M. NYAMIEN JP Page 15 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

Les formulaires doivent être complétés avant fermeture par une commande permettant
d'envoyer le contenu des champs remplis au serveur HTTP.
Cette commande s'écrit:
<input type="submit" value="Soumettre">

M. NYAMIEN JP Page 16 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

2ème partie :

LES FEUILLES DE STYLES

le CSS : Introduction

Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement
que le langage HTML. Le HTML est né en 1991 et CSS en 1996. La mise en forme de
1991 à 1996 se faisait uniquement en HTML ! Il y avait en effet des balises HTML
dédiées à la mise en forme. <font color="#aab1c3">, par exemple, permettait de
définir la couleur du texte.
Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de
plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait
la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé
le langage CSS.
Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de
là. Il fallait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore
aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme,
anciennes et obsolètes, comme <font> !

3. LE ROLE DU CSS
CSS (Cascading Style Sheets, aussi appelées Feuilles de style)
Le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement,
décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

4. LES VERSIONS DE CSS

 CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de
ce langage qui permet de présenter sa page web, comme les couleurs, les marges,
les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS
rajoute de nombreuses options. On peut désormais utiliser des techniques de
positionnement très précises, qui nous permettent d'afficher des éléments où on le
souhaite sur la page.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres, etc.

M. NYAMIEN JP Page 17 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

ÉCRITURE DU CSS DANS LE HTML

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents
:
 dans un fichier .css (méthode la plus recommandée) ;
 dans l'en-tête <head> du fichier HTML ;
 directement dans les balises du fichier HTML via un attribut style (méthode la moins
recommandée).

1. DANS UN FICHIER .CSS

C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout
mélanger dans un même fichier
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>

<link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML
est associé à un fichier appelé style.css et chargé de la mise en forme.
Dans le fichier style.css, écrire :
p{
color: blue;
}

2. DANS L'EN-TETE <HEAD> DU FICHIER HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela
consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-
tête <head>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
< style>
p{
color: blue;
}
< style/>
<title>Premiers tests du CSS</title>
</head>

M. NYAMIEN JP Page 18 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

3. DIRECTEMENT DANS LES BALISES (NON RECOMMANDE)

Vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre
code CSS directement dans cet attribut :

<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

Exemple :
p{
color: blue;
}

CARACTÉRISTIQUES DU CODE CSS

1. LES ELEMENTS DE BASE DU CODE

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

 Des noms de balises : on écrit les noms des balises dont on veut modifier
l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes
<p>, je dois écrire p.
 Des propriétés CSS : les « effets de style » de la page sont rangés dans des
propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du
texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de
propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître
toutes par cœur.
 Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple,
pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut
indiquer quelle taille on veut, etc

balise
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
}

2. APPLIQUER UN STYLE A PLUSIEURS BALISES

Exemple
h1, em
{
color: blue;
}

M. NYAMIEN JP Page 19 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

3. LES COMMENTAIRES DANS DU CSS

Pour faire un commentaire. Tapez /*, suivi de votre commentaire, puis */ pour
terminer votre commentaire.

4. LES ATTRIBUTS : CLASS ET ID

On peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
l'attribut class, l'attribut id.
Les attributs class et id sont quasiment identiques. Il y a seulement une petite
différence.
4.1. Attribut Class
C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que
paragraphe, image, etc.
<h1 class="">… </h1>
<p class="">…</p>
<img class="" />
Exemple
<p class="introduction">Bonjour et bienvenue sur mon site !</p>

Votre paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir

réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont
comme nom 'introduction' soient affichées en bleu ».
.introduction
{
color: blue;
}
4.2. Attribut Id
Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il
faudra faire précéder le nom de l'id par un dièse (#) :
#logo
{
/* Indiquez les propriétés CSS ici */
}
Remarque

Si vous vous emmêlez les pinceaux entre class et id retenez que deux balises
peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être
unique dans la page HTML

5. LES BALISES UNIVERSELLES

M. NYAMIEN JP Page 20 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains
mots qui, à l'origine, ne sont pas entourés par des balises.
Dans ce cas, on fait appel au balises dites universelles, qui n'ont aucune signification
particulière. Il y a une différence minime 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 ;
 <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.

5.1. Balise <span>

Exemple :
Code : HTML
<p>
Bonjour et <span class="salutations"> bienvenue </span> sur mon site !
</p>

Code : CSS
.salutations
{
color: blue;
}

5.2. Balise <div>

6. LES SELECTEURS AVANCES

6.1. * : sélecteur universel

*
{
}
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

6.2. A B : une balise contenue dans une autre

Code : CSS
h3 em

M. NYAMIEN JP Page 21 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

{
}
Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il
n'y a pas de virgule entre les deux noms de balises.

Exemple de code HTML correspondant :

<h3>Titre avec <em>texte important</em></h3>

6.3. A + B : une balise qui en suit une autre

Code : CSS
h3 + p
{
}
Sélectionne la première balise <p> située après un titre <h3>.
Exemple :
Code : HTML
<h3>Titre</h3>
<p>Paragraphe</p>

M. NYAMIEN JP Page 22 | 23
 S U P P O R T D E C O U R S : HT M L + F E UI L L E S D E S T Y L E ( C SS)

BIBLIOGRAPHIE

1. www.siteduzero.com, Apprenez à créer votre site web avec HTML5 et CSS3,

Mathieu Nebra, 2013
2. HTML 5 Une référence pour le développeur web, Rodolphe Rimelé, Groupe
Eyrolles, 2013
3. Un manuel illustré de programmation en HTML, Daniel J. Boivin et Laurent
Gauthier, Département de génie rural Université Laval Québec, Canada, 1996

M. NYAMIEN JP Page 23 | 23