1

Cahier des charges

1. OBJECTIF

Ce cours est un complément indispensable au cours des Réseaux informatiques et

en constitue une matière approfondie.
Il a pour objectif de préparer les étudiants informaticiens, à l’initiation de la
programmation web. Il permettra ainsi aux étudiants qui abordent la vie
professionnelle de s’adapter aux besoins actuels du marché de l’emploi
informatique dans le monde et de les rendre compétitifs en tant que WebMasters.

Ce cours prépare les étudiants à une programmation réseau qui les amène à la
conception des Data Web et l’interfaçage des bases de données sur le WEB où les
étudiants seront conduits à la réalisation des sites de différents types, à l’instar des
e-commerces, etc.
A l’issu de ce cours, les étudiants seront capable de créer un site statique de
présentation ou de tout autre type, notions qui constituent un prérequis pour la
conception des Sites dynamiques.

2. ORGANISATION DU COURS
Ce cours sera articulé sur :
 La conception et la description d’un site Web statique avec le langage
XHTML ;
 La conception des designs avec le langage CSS ;

3. CONTACTS

Tél. : +243 85826697 - +243 822499907

E-mail : Nicokabamba07@[Link]

4. Les prérequis
 la connaissance du système d'exploitation que l'on utilise afin de pouvoir
réaliser les tâches de base du système d’exploitation telles que créer de
nouveaux fichiers ou dossiers, les supprimer, les nommer ou renommer, les
déplacer; utiliser les menus, sous-menus, boîtes de dialogues, menus
contextuels etc.
 une bonne aptitude à saisir et manipuler les textes, utiliser les commandes
copier, couper et coller.
 une bonne compréhension des notions de fichier, dossier, sous-dossier et
leur organisation dans un ordinateur. l'aptitude à utiliser l'Internet notamment
les aspects courriers électroniques et navigation sur le World Wide Web.

Au final, les apprenants devraient comprendre les aspects essentiels de la création

de sites web, et au mieux en commencer la réalisation au moins dans les aspects
de base. L’amélioration de la qualité des sites se fera avec la maîtrise de nombreux
outils et connaissances qui jonchent le chemin du « Webmaster ».

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 2

Chapitre 1 : Internet, Web et Site Web

Dans le langage courant, les termes "web" et "Internet" sont souvent utilisés
comme des synonymes. Pourtant, ils ne désignent pas la même chose et ne sont
pas interchangeables. Nous vous proposons de faire le point sur la différence entre
web et Internet.

1.1. C’est quoi l’Internet ?

Internet (contraction de InterNetwork) est un réseau informatique qui relie des
ordinateurs entre eux à l'échelle du monde. Ce gigantesque réseau se compose de
millions de réseaux publics et privés plus petits, par exemple des réseaux
universitaires, gouvernementaux ou commerciaux. Cette vaste infrastructure
informatique repose sur le protocole de communication IP (pour Internet Protocol),
qui permet d'acheminer des données entre les ordinateurs via un maillage de
serveurs et de routeurs.
Elle a de multiples usages comme le partage de fichiers, la messagerie
instantanée, la téléphonie, l'envoi de courrier électronique et le web.
Si vous pensez que les mots "web" et "Internet" désignent la même chose,
détrompez-vous ! La différence entre web et Internet est plus importante qu'on
ne l'imagine.
Le web est sa principale application
Le web (abréviation de World Wide Web ou toile mondiale) est donc un service
d'Internet parmi d'autres.

Pour expliquer autrement la différence entre web et Internet, on pourrait dire que le
web n'est pas l'Internet mais sa principale application. Il s'agit d'un système
de publication et de consultation de documents : des sons, des images et des
textes.
Ce système utilise les techniques de l'hypertexte, c'est-à-dire des hyperliens ou
liens qui vous permettent de surfer d'une partie d'un document à une autre ou d'un
document à un autre d'un simple double-clic.
L'internet ayant été popularisé par l'apparition du World Wide Web (WWW), les
deux sont parfois confondus par le public non averti. Le World Wide Web n'est
pourtant que l'une des applications d'internet.

1.2. Le Web
1.2.1. La naissance du web
Tim Berners-Lee, un physicien britannique, a inventé le web au CERN en 1989. À
l’origine, le projet, baptisé « World Wide Web », a été conçu et développé pour que
des scientifiques travaillant dans les universités et les instituts du monde entier
puissent s'échanger des informations instantanément.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 3

Le premier site web créé au CERN – et dans le monde – était destiné au projet
World Wide Web lui-même. Il était hébergé sur l’ordinateur NeXT de Tim Berners-
Lee. Le site décrivait les principales caractéristiques du web et expliquait comment
accéder aux documents d’autres personnes et comment configurer son propre
serveur. L’ordinateur NeXT – le serveur web d’origine – est encore au CERN. En
2013, le CERN a entrepris de remettre en service le premier site web (Disponible à
cette adresse : [Link]), et a même rétabli le site web à son
adresse d’origine.
Le 30 avril 1993, le CERN a mis le logiciel du World Wide Web dans le domaine
public. Puis il a émis la version suivante de l’application sous licence libre afin
d’accélérer sa diffusion. En donnant libre accès au logiciel nécessaire pour faire
fonctionner un serveur web, ainsi qu’au navigateur et à la bibliothèque de codes
associés, il a permis à la Toile de se tisser.

1.2.2. Vocabulaire du web

Le Web, comme tout autre champ de connaissance, est associé à un vaste
vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous
submerger avec tout cela. Nous nous devons toutefois de clarifier dès maintenant
certaines notions de base, car elles reviendront fréquemment dans vos prochaines
lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des
fonctions apparentées, mais néanmoins distinctes. Nous approfondirons bientôt ces
notions, mais vous pouvez commencer par vous familiariser avec ces définitions
simples :
a. Page web

Une page web est un document simple qui peut être affiché par un navigateur. Ce
document est écrit à l'aide du langage HTML (nous en reparlerons plus en
profondeur dans d'autres chapitres) et peut inclure diverses autres ressources
telles que :

 Des feuilles de style — qui déterminent l'apparence de la page ;

 Des scripts — qui ajoutent des fonctions interactives ;
 Ou du contenu multimédia — images, sons, vidéos.

b. site web
Un site web est un ensemble de pages web reliées entre elles (ainsi que des
ressources associées) qui partagent un nom de domaine. Chaque page d'un site
fournit des liens explicites (généralement sous la forme de texte cliquable) qui
permettent à l'utilisateur de naviguer entre les pages du site web.
Il existe deux grandes familles de sites web, du point de vu fonctionnement :

 Les sites statiques : ce sont des sites réalisés uniquement à l’aide des
langages HTML et CSS. Ils fonctionnent très bien mais leur contenu ne peut
pas être mis à jour automatiquement : il faut que le propriétaire du site (le
webmaster) modifie le code source pour y ajouter des nouveautés. Ce n’est
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 4

pas très pratique quand on doit mettre à jour son site plusieurs fois dans la
même journée ;
 Les sites dynamiques : plus complexes, ils utilisent d’autres langages en
plus de HTML et CSS, tels que PHP et MySQL. Le contenu de ces sites web est
dit « dynamique » parce qu’il peut changer sans l’intervention du
webmaster ! La plupart des sites web que vous visitez aujourd’hui, sont des
sites dynamiques. Le seul pré requis pour apprendre à créer ce type de sites
est de déjà savoir réaliser des sites statiques en HTML et CSS.

c. Serveur web
Un serveur web est un ordinateur hébergeant un ou plusieurs sites web. « Héberger
» signifie que toutes les pages web et fichiers associés sont localement enregistrés
sur cet ordinateur. À la demande d'un utilisateur, le serveur web transmettra la
page web du site web hébergé au navigateur de l'utilisateur.

d. Moteur de recherche
Un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo,
DuckDuckGo, Qwant, etc.).

Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le web. Un

moteur de recherche est un type particulier de site web qui aide les utilisateurs à
trouver les pages web d'autres sites web.
Il y en a tout plein : Google, Bing, Yandex, DuckDuckGo et plusieurs autres encore.
Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de
recherche. Vous êtes libres d'utiliser votre préféré.

Plusieurs débutants sur le Web confondent moteur de recherche et navigateur.

Soyons clairs : un navigateur est un logiciel qui affiche des pages web, alors qu'un
moteur de recherche est un site web qui aide les utilisateurs à trouver les pages
web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un
moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de
faire est tout de même logique, car la première chose que l'on veut faire en ouvrant
un navigateur est de trouver une page à afficher. Faites attention de ne pas
confondre infrastructure (par exemple, le navigateur) et service (par exemple, le
moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop
inquiets, car même les professionnels tendent à être un peu vagues dans leur
emploi de la terminologie.

1.3. Les différents types de site Internet

Toutes les entreprises ou personnes n’ont pas les mêmes objectifs sur Internet.
Certaines souhaitent vendre, d’autres faire leur promotion, d’autres informer, …
Ainsi, différents types de site Internet existent, répondant à des besoins différents.

1.3.1. Le site Internet vitrine

Le site Internet vitrine offre à une entreprise une visibilité sur Internet à moindre
coût. Il joue notamment le rôle de carte de visite en fournissant les informations
essentielles sur l’entreprise. Composé de très peu de pages (parfois d’une seule
page), on y retrouve généralement :
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 5

 La présentation de l’entreprise, de son activité professionnelle et de son

savoir-faire ;
 Les coordonnées de l’entreprise (avec si possible un plan) ;
 Les informations de contact de l’entreprise (formulaire de contact, numéro
de téléphone, …)

Pour une question de crédibilité, il est préférable de disposer d’un véritable site
Internet, avec un design unique. Cependant, une petite entreprise ne disposant pas
du budget nécessaire peut très bien opter pour une des options suivantes :
 Créer une page sur un réseau social (une page Facebook par exemple)
 Créer un mini-site grâce à une plateforme gratuite
 Réserver un nom de domaine avec l’extension .tel (plus d’informations sur le
site de Telnic disponible sur : [Link]/fra/[Link])

Le site Internet vitrine présente deux inconvénients majeurs : il ne rapporte pas ou

peu de nouveaux clients et il est très difficile à positionner sur les moteurs de
recherche sur des mots-clés stratégiques (en raison du manque de contenu). En
gros, le site Internet vitrine s’adresse aux clients ou prospects connaissant déjà
l’entreprise et tapant sa raison sociale sur un moteur de recherche.

1.3.2. Le site Internet catalogue

Le site Internet catalogue reprend les caractéristiques du site vitrine et y ajoute une
présentation des produits ou services vendus par l’entreprise. Cette présentation
peut prendre plusieurs formats : galerie photo, vidéo, descriptif, … L’objectif du site
Internet catalogue est de mettre en valeur les services ou produits de l’entreprise.
En revanche, il ne permet pas l’achat en ligne.
Le site doit posséder une interface d’administration permettant l’ajout, la
modification et la suppression des produits ou services. Si le site comporte
beaucoup de produits ou services, il est préférable que le site permette leur
catégorisation ainsi que leur recherche via un moteur de recherche interne au site.

1.3.3. Le site Internet e-commerce

Le site Internet e-commerce est une boutique en ligne ouverte 24h/24 et 7j/7. Tout
comme le site Internet catalogue, il présente les produits ou services de
l’entreprise, mais permet leur achat en ligne. Le site Internet e-commerce doit
donner envie à l’internaute d’acheter, à l’instar d’une vitrine de magasin.
Un site Internet e-commerce efficace va avoir un taux de transformation
(pourcentage du nombre de ventes par rapport au nombre de visiteurs) élevé. Ce
taux va dépendre de nombreux facteurs parmi lesquels la stratégie commerciale,
l’ergonomie du site Internet, la qualité des descriptions des produits ou encore la
transparence du site Internet (l’internaute doit identifier qui gère le site).

Le site Internet e-commerce ne suffit malheureusement pas pour vendre en ligne. Il

est indispensable d’acquérir un grand nombre de visiteurs et pour cela le
référencement naturel, la publicité et les réseaux sociaux sont des leviers
importants.

1.3.4. Le site Internet institutionnel

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 6

Le site Internet institutionnel a l’objectif de promouvoir l’image d’une entreprise ou

d’une institution. C’est cette dernière que le site Internet institutionnel met en
avant, et non pas ses produits ou services. Sa fonction principale n’est donc pas
commerciale, mais plutôt informative. Le site doit permettre de convaincre la cible
visée.

1.3.5. Le blog
Le blog est un type de site Internet composé essentiellement d’articles
(généralement sur une thématique précise) qui permet d’établir le dialogue avec
les internautes. L’internaute participe donc grandement au contenu du blog. Le ton
employé y est moins formel et plus personnel que dans les autres types de site
Internet. Le blog est le type de site idéal pour donner à son entreprise un visage
humain, ainsi que pour recueillir les avis et idées de ses clients.

1.3.6. Le site Internet portail

Un site Internet portail offre de nombreux services à l’internaute (par exemple :
messagerie, météo, publication d’articles, forum, actualités, …). Certains services
peuvent être externes au site. Le site Internet portail cherche à fédérer une
communauté et à rendre service à l’internaute. Il est souvent composé d’un espace
personnel personnalisable afin d’offrir à l’internaute du contenu répondant au
mieux à ses besoins.

1.3.7. Le site Internet événementiel

Le site Internet événementiel permet de communiquer sur un événement (foire,
salon, lancement d’un produit, opération promotionnelle, …). Il renseigne
l’internaute sur l’événement et peut également diffuser des actualités relatives à ce
dernier. Une fois l’événement terminé, le site Internet événementiel peut servir de
support pour dresser le bilan de l’événement, recueillir les avis des participants et
les remercier.

1.3.8. Le site Internet mobile

Le site Internet mobile est un site Internet à l’affichage optimisé pour les
smartphones. Son objectif principal est d’améliorer l’ergonomie et la qualité de
navigation par rapport au site Internet classique. Pour cela, le site Internet mobile
présente les caractéristiques suivantes :

 Une présentation épurée ;

 Une navigation simplifiée et optimisée pour le tactile (boutons larges)
 Seul le contenu principal est conservé ;
 Des pages Internet légères, pour une navigation plus rapide
 Des pages les moins larges et hauts possibles, pour éviter à l’internaute de
scroller ;
 Un contenu qui s’adapte à la taille de l’écran, pour éviter à l’internaute de
zoomer

Chapitre 2 : Premières pages web en HTML

Introduction

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 7

HTML est un langage de description de document utilisé sur Internet pour faire des
pages Web. Son sigle signifie « HyperText Markup Language » en anglais,
littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé
dans le texte du document et est interprété par un navigateur Web. La version
actuelle de HTML comporte près d’une centaine de balises.
Le langage HTML (Hypertext Markup Langage) est accessible à tous. Il est composé
de balises c’est-à-dire de codes encadrés de chevrons. Voyez la balise comme un
ordre ponctuel envoyé à l’exécutant, le navigateur, qui concerne la présentation et
la structure du document.
Utilisation des balises
Une balise est un objet servant à guider l’affichage à l’écran de la page. Les balises
s’utilisent conjointement entre elles. Il y a une balise d’ouverture et une balise de
fermeture. Ces balises sont identiques sauf la balise pour la balise de fermeture il
y a un Slash devant le nom de
Exemple :

 <TITLE>Formation</TITLE>
 <B>Formation</B>

Au fil du temps, le langage HTML a 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 des langages pour votre culture générale.

Voici un très bref historique des langages pour votre culture générale.
• Les versions de HTML

✓ 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 se finira en 1996
avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases
des prochaines versions 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 de 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 l'utilisation de 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.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 8

2.1. Matériels nécessaires

De quel logiciel je vais avoir besoin pour créer mon site web ?
Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je vais
mettre des mois à comprendre ?
Il existe effectivement de nombreux logiciels dédiés à la création de sites web.
Mais, je vous rassure, vous n'aurez pas à débourser un seul centime. Pourquoi aller
chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut
chez vous ?

2.1.1. L'éditeur de texte

Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On
peut en général les utiliser pour de multiples langages, pas seulement HTML et CSS.
Ils se révèlent être de puissants alliés pour les créateurs de sites web !
Eh oui, accrochez-vous bien parce qu'il suffit de... Bloc-Notes !

Incroyable mais vrai : on peut tout à fait créer un site web juste avec Bloc-Notes, le
logiciel d'édition de texte intégré par défaut sur Windows.
Il y a cependant des logiciels dits WYSIWYG (What You See Is What You Get - Ce
Que Vous Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se
veulent très faciles d'emploi, ils permettent de créer des sites web sans apprendre
de langage particulier. Parmi les plus connus d'entre eux : Nvu, Microsoft
Expression Web, Dreamweaver... et même Word !
Leur principal défaut est la qualité du code HTML et CSS qui est automatiquement
généré par ces outils, souvent d'assez mauvaise qualité. Un bon créateur de site
web doit tôt ou tard connaître HTML et CSS, c'est pourquoi je ne recommande pas
l'usage de ces outils.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 9

Vous l'aurez compris, je vais vous inviter à utiliser un éditeur de texte dans ce
cours.
Il existe une grande quantité d'éditeurs de texte, je ne pourrai pas tous vous les
présenter. Néanmoins, je vous invite à vous pencher sur Notepad++, l'un des plus
utilisés d'entre eux sous Windows. Ce logiciel est simple, en français et gratuit.
Voici à quoi ressemble Notepad++ lorsque vous le lancez :

Je vous conseille de faire la manipulation suivante : allez dans le menu "Langage" /

"H" / "HTML". Cela permettra au logiciel de savoir que l'on va taper du HTML.
Lorsque vous utiliserez le logiciel, il colorera votre code ce qui vous permettra de
vous repérer plus facilement.
D'autres éditeurs disponibles sous Windows existent. Si Notepad++ ne vous
convient pas, vous pouvez essayer :

 jEdit
 PSpad
 ConTEXT
 ... et bien d'autres si vous recherchez "Editeur de texte" sur le Web

2.1.2. Les navigateurs

Le navigateur est le programme qui nous permet de voir les sites web. Si vous lisez
ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les
yeux.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 10

Le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat
visuel à l'écran. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur
affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe.
Comprendre le code HTML et CSS n'est en effet pas une mince affaire. Le principal
problème, vous vous en rendrez vite compte, c'est que les navigateurs
n'affichent pas tous les sites exactement de la même façon ! Il faudra vous y
faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne
correctement sur la plupart des navigateurs.

Il existe de nombreux navigateurs différents. Voici les principaux à connaître :

2.3. Comment faire ?

Ça y est, vous avez installé tous les logiciels ?
Vous devriez maintenant avoir un éditeur de texte pour créer votre site (comme
Notepad++) et plusieurs navigateurs pour le tester (Mozilla Firefox, Google
Chrome, Internet Explorer...).
Dans ce chapitre, nous allons commencer à pratiquer ! Nous allons découvrir les
bases du langage HTML et enregistrer notre toute première page web !

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 11

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

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons créer notre
site dans un éditeur de texte. Vous avez dû en installer suite à mes conseils dans le
premier chapitre : qu'il s'appelle Notepad++, PSpad, jEdit, vim, TextWrangler... peu
importe. Ces logiciels ont un but très simple : vous permettre d'écrire du texte!
Dans la suite de ce cours, je travaillerai sous Notepad++. Je vais donc l'ouvrir :

Bon, qu'est-ce qu'on fait maintenant ? Qu'est-ce qu'on écrit sur cette feuille blanche
? On va faire un petit essai. Je vous invite à écrire ce qui vous passe par la tête :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 12

Vous pouvez écrire les mêmes phrases que moi ou ce que vous voulez ; le but est
d'écrire quelque chose.
Maintenant, enregistrons ce fichier. Pour ça, c'est très simple : comme dans tous les
programmes, vous avez un menu Fichier / Enregistrer. Une boîte de dialogue
vous demande où enregistrer le fichier et sous quel nom. Enregistrez-le où vous
voulez. Donnez au fichier le nom que vous voulez, en terminant par .html, par
exemple : [Link].

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 13

Ouvrez maintenant l'explorateur de fichiers dans le dossier où vous avez enregistré

votre page. Vous y verrez le fichier que vous venez de créer :

L'apparence du fichier dépend de votre navigateur web par défaut. Ici, l'icône est
celle de Google Chrome, mon navigateur par défaut, mais le fichier a peut-être une
autre icône chez vous. Voici par exemple l'icône qui apparaît selon que votre
navigateur principal est Firefox ou Internet Explorer :

Double-cliquez simplement sur ce fichier et... votre navigateur s'ouvre en affichant

le texte que vous avez écrit !

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 14

Ça ne marche pas bien on dirait ! Tout le texte s'affiche sur la même ligne alors
qu'on avait écrit 2 lignes de texte différentes !?

En effet, bien vu !
Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire sur 2
lignes différentes. Que se passe-t-il ?
En fait, pour créer une page web il ne suffit pas simplement de taper du texte
comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle
des balises, qui vont donner des instructions à l'ordinateur comme "aller à la
ligne", "afficher une image", etc.

2.3.2. Les balises et leurs attributs

Il ne suffit pas "simplement" d'écrire du texte dans l'éditeur, il faut aussi donner des
instructions à l'ordinateur. En HTML, on passe pour cela par des balises.

a. 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>
À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte autour d'elles.
Elles veulent dire par exemple : "Ceci est le titre de la page", "Ceci est une image",
"Ceci est un paragraphe de texte", etc.
On distingue deux types de balises : les balises en paires et les balises orphelines.

1. Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles
ressemblent :
Code : HTML
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 15

<titre>Ceci est un titre</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 balises orphelines ou Singleton

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit
précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la
fin de l'image, on veut juste dire à l'ordinateur "Insère une image ici".
Une balise orpheline s'écrit comme ceci :

Code : HTML
<image />
Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas
confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) à la fin de la
balise. Vous me verrez donc mettre un / aux balises orphelines et je vous recommande de faire de même, c'est
une bonne pratique.

b. 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">

A quoi ça sert ? Prenons la balise <image /> que nous venons de voir. Seule, elle
ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de
l'image à afficher :
Code : HTML
<image nom="[Link]" />

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier
[Link].
Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans
la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que
la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :

Code : HTML
<citation auteur="Neil Armstrong" date="21/07/1969">
C'est un petit pas pour l'homme un bond de géant pour l´humanité.
</citation>
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 16

Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms
en anglais (eh oui !), nous allons les découvrir dans la suite de ce cours.

2.4. Structure de base d'une page HTML

Avant de créer des pages web et de leur donner un contenu, nous allons déterminer
une structure générale commune à toute page HTML. Il suffira donc de les copier
dans votre éditeur préféré, puis de les compléter avec un contenu particulier pour
chaque page.

Vous noterez 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 le sens 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.

Euh, on pourrait avoir des explications sur toutes les balises que l'on vient de copier
dans notre éditeur m'sieur ?
Bien sûr, c'est demandé si gentiment.

 Le doctype

Code : HTML
<!DOCTYPE html>

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 17

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 (ça commence bien).

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 !

L'en-tête <head> et le corps <body>

Une page web est constituée de 2 parties :

 L'en-tête <head> : cette section donne quelques informations générales sur
la page, comme son titre, l'encodage (pour la gestion des caractères
spéciaux), etc. Cette section est généralement assez courte. Les informations
que l'en-tête contient ne sont pas affichées sur la page, ce sont simplement
des informations générales à destination de l'ordinateur. Elles sont cependant
très importantes !
 Le corps <body> : c'est là que se trouve la partie principale de la page. Tout
ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que
nous écrirons la majeure partie de notre code.

Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous
par contre aux deux balises contenues dans l'en-tête...

L'encodage (charset)

Code : HTML
<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans votre fichier .html.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 18

Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, 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, symboles arabes, etc.).
Il y a plusieurs techniques d'encodage aux noms bizarres utilisées en fonction des
langues : ISO-8859-1, OEM 775, Windows-1253... Un seul cependant devrait être
utilisé aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet
d'afficher sans aucun problème pratiquement tous les symboles de toutes les
langues de notre planète ! C'est pour cela que j'ai indiqué utf-8 dans cette balise.
Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus
souvent sous Linux par défaut, mais sous Windows il faut généralement le dire au
logiciel.

Le titre principal de la page

Code : HTML
<title>
Chacun a déjà remarquer dans son navigateur qu’avant l’affichage complet d’une
page web, un titre apparaît dans la barre de titre située en haut de la fenêtre du
navigateur.
Ce texte est défini dans l’élément <title> qui est le seul dont la présence soit
obligatoire dans l’élément <head>. Son contenu est un simple texte qui doit
résumer le contenu de la page en une ligne maximum. Il est important de bien
réfléchir à ce contenu car c’est aussi lui qui apparaîtra comme titre principal du site
dans les moteurs de recherche.
Il doit donc être accrocheur et bien correspondre à l’esprit de la page. Nous aurons
par exemple le code suivant :

<title> Le site de XHTML 1.1 et CSS 2 </title>

Il est conseillé que le titre soit assez court (moins de 100 caractères en général).

2.4.1. Les commentaires

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 19

Tout ce qui est contenu entre les symboles <!-- et --> est considéré par le
navigateur comme des commentaires et n’est pas affiché dans la page, même s’ils
se trouvent dans l’élément <body>.
Comme pour tout langage de programmation, nous avons tout intérêt à commenter
le code HTML afin d’en faciliter la relecture à posteriori. Notez toutefois que les
commentaires seront visibles par l’internaute si celui-ci choisit d’afficher le code
source de la page dans son navigateur. Évitez donc d’y inclure des informations
confidentielles et d’y faire figurer des informations privées.

Comment afficher le code source de la page dans son navigateur ?

Tout le monde peut voir le code HTML de votre page une fois celle-ci mise en
ligne sur le Web. Il suffit de faire un clic droit sur la page et de sélectionner "Afficher
le code source de la page" (l'intitulé peut changer selon votre navigateur) :

Le code source s'affiche alors :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 20

2.5. Créer du texte et des listes

Créer une page web, c’est d’abord y incorporer du texte, et ce depuis les origines
du Web qui ne contenait rien d’autre. Nous avons à notre disposition nombre
d’éléments HTML grâce auxquels on peut incorporer un contenu textuel dans une
page.
Nous allons voir comment rédiger le contenu de notre page web dans cette section.
Comme nous l'avons vu, il ne faudra pas faire ça n'importe comment : il ne faut pas
oublier qu'une page HTML est composée de balises. Ces balises indiquent à
l'ordinateur le sens du texte : ceci est un paragraphe, ceci est un titre, etc.
Nous allons découvrir de nombreuses balises HTML dans ce chapitre. Certaines
existent depuis la toute première version de HTML, d'autres ont été introduites plus
récemment dans HTML5.
Nous allons voir successivement :
 Comment rédiger des paragraphes.
 Comment structurer sa page avec les titres.
 Comment donner de l'importance à certains mots de son texte.
 Comment organiser les informations sous forme de liste à puces.

2.5.1. Les Paragraphes

Comme dans un traitement de texte, le contenu d’une page peut être divisé en
différents paragraphes. Chaque paragraphe sera par défaut précédé et suivi d’un
saut de ligne pour marquer la séparation avec le contenu précédent et suivant.
Chaque paragraphe doit être contenu dans l’élément <p>, et donc délimité par les
balises <p> et </p>.
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"
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 21

</p> signifie "Fin du paragraphe"

Comme je vous l'ai dit dans la section précédente, on écrit le contenu de notre site
web entre les balises <body></body>. Il nous suffit donc de mettre notre
paragraphe entre ces deux balises, et nous aurons enfin notre première vraie page
web avec du texte !
Je reprends donc exactement le même code que dans la section précédente, et j'y
ajoute mon paragraphe :

Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant quelque
chose d'un peu particulier en HTML : le saut de lignes. Ça a l'air simple, mais
pourtant ça ne fonctionne pas vraiment comme dans un traitement de texte
habituel...

2.5.2. Sauter une ligne

En HTML, si vous appuyez sur la touche Entrée, ça ne crée pas une nouvelle ligne
comme vous en avez l'habitude. Essayez donc ce code :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 22

Tout est sur la même ligne alors qu'on est pourtant allé à la ligne dans notre code !
Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc
strictement à rien.
Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des
sauts de ligne en HTML.
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne :
<br />. Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.
Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs
sauts de lignes, mais on considère que c'est une mauvaise pratique qui rend le code
délicat à maintenir. Pour décaler un texte avec plus de précision, on utilisera le CSS, ce
langage qui vient compléter le HTML et dont je vous parlerai un peu plus loin.

Donc c'est compris ?

 <p> </p> : pour organiser son texte en paragraphes.
 <br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des
titres.

2.5.3. Les titres

Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, cela
va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres
deviennent utiles.
En HTML on est verni, on a le droit d'utiliser 6 niveaux de titres différents. Je veux
dire par là qu'on peut dire "Ceci est un titre très important", "Ceci est un titre un
peu moins important", "Ceci est un titre encore moins important", etc. On a donc 6
balises de titre différentes :

 <h1> </h1> : signifie "titre très important". En général, on s'en sert pour
afficher le titre de la page au début de celle-ci.
 <h2> </h2> : signifie "titre important".

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 23

 <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un
"sous-titre" si vous voulez).
 <h4> </h4> : titre encore moins important.

Ne vous laissez pas impressionner par toutes ces balises. En fait, 6 niveaux de
titres, c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises
<h1>, <h2> et <h3>, et très rarement les autres (je n'ai pas souvent besoin de 6
niveaux de titres différents). Votre navigateur affiche le titre très important en très
gros, le titre un peu moins important en un peu moins gros, etc.

Ne choisissez pas votre balise de titre en fonction de la taille qu'elle procure au texte ! Il
faut impérativement bien structurer sa page en commençant par un titre de niveau 1
(<h1>), puis un titre de niveau 2 (<h2>), etc. Il ne devrait pas y avoir de sous-titre sans
titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire ceci en
CSS un peu plus tard.

Essayez de faire une page web avec des titres pour voir ce que ça donne :

2.5.3. Les styles physiques

Parmi les éléments en ligne utilisables pour contenir du texte, certains permettent
de créer des styles physiques pour leur contenu. Une partie d’entre eux
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 24

correspondent aux modifications courantes que chacun peut effectuer dans son
traitement de texte, comme mettre un texte en gras, en italique, ou certains
caractères en indice ou en exposant. Ce type de marquage est indépendant de la
taille et de la police de caractères. D’autres éléments agissent de manière relative
sur leur contenu en permettant d’afficher dans une police plus grande ou plus
petite que la police utilisée dans le texte qui précède sans préjuger de cette taille. À
chacun de ces éléments correspond un style par défaut qui peut donner
satisfaction, mais dans le cas contraire ce style pourra être personnalisé à loisir
avec CSS.

a. Mettre un texte en gras

Pour mettre en gras une partie de texte comprise dans un bloc, il faut l’inclure dans
l’élément <b> (donc entre <b> et </b>). Il peut aussi contenir tous les éléments
en ligne et possède tous les éléments en ligne de tous les attributs communs.
Nous pouvons également utiliser l’élément <strong> pour obtenir le même effet. Il
n’est pas possible d’imbriquer ces éléments les uns dans les autres pour forcer le
caractère gras d’un texte.

Nous écrirons par exemple le code suivant :

<p> Le contenu suivant est <b> important </b>. La suite l’est moins. Mais ceci
est <strong>également remarquable. </strong> </p>
Il sera toujours possible de redéfinir l’affichage obtenu pour ces éléments et de
différencier <b> et <strong> au moyen de styles CSS particuliers.

b. Mettre du texte en italique

Comme pour les éléments précédents, il existe deux éléments qui permettent
d’afficher leur conteneur en italique. Il s’agit des éléments <i> et <em>. Nous
pourrons également redéfinir le résultat obtenu en créant des styles personnalisés.

Nous écrirons, par exemple, le code suivant :

<p>Éléments i et em : Celui est en <i>caractères italiques </i> et le suivant en
<i><b> caractères italiques gras </b></i>
Celui est en <em> caractères italiques </em> et le suivant en <em><b>
caractères italiques gras </b></em></p>

Nous y remarquons qu’il est possible d’imbriquer des éléments <b> dans les
éléments <i> et <em> pour que le texte apparaisse à la fois en italique et en
caractères gras.

c. Modifier la taille du texte

À l’intérieur d’une division de la page, nous pouvons modifier la taille relative du

texte en utilisant les éléments <big> et <small>. Le premier permet d’afficher
son contenu dans une taille de police plus grande que celle de la police qui le
précède. Le second permet d’afficher son contenu avec une taille de police plus
petite. En imbriquant les éléments <big> ou <small> les uns dans les autres, on
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 25

peut obtenir des tailles de police de plus en plus petites ou de plus en plus grandes.
Le nombre d’imbrications possibles dépend de la taille de la police du conteneur
des éléments <big> ou <small>.
Le code suivant :
<p> Ce texte-là est <big> grand, <big> encore plus grand, <big> et plus grand
encore, <big> toujours plus grand </big></big></big></big></p>
<p> Ce texte ci est <small> petit, <small> encore plus petit, <small> et plus petit
encore, <small> toujours plus petit </small></small></small></small></p>

Permettra d’obtenir des mots de plus en plus grands en imbriquant les éléments
<big>, puis de plus en plus petits en imbriquant les éléments <small> sur quatre
niveaux.

d. Créer des exposants et des indices

Les traitements de texte offrent aussi la possibilité de mettre des caractères en

exposant ou en indice. Cette opération est également possible en HTML. Pour
mettre un texte en exposant, il faut l’inclure dans l’élément <sup> (entre ^et), et pour écrire un texte en indice il faut l’inclure dans l’élément <sub>
(entre _et).

Nous pouvons avoir par exemple le code suivant dans l’exemple :

<p>Le n ^ième terme de la suite numérique est noté u _n.
La fonction cube est notée : x³</p>

e. Afficher du texte dans une police à espacement fixe

Nous avons déjà utilisé l’élément <code> pour afficher du texte dans un style
listing. L’élément <tt> (comme télétype) permet d’obtenir par défaut le même
résultat pour des textes courts en ligne. Il peut contenir éventuellement tous les
attributs communs.

Nous pouvons, par exemple, écrire le code suivant :

<p> La fonction JavaScript <tt> alert() </tt> permet d’afficher une boîte d’alerte.
On peut écrire, par exemple : <tt> alert(" Vérifier votre code ") </tt> pour prévenir
le visiteur. </tt> </p> pour mettre en évidence dans un paragraphe du code
JavaScript.

2.5.4. Les listes

La présentation sous forme de liste permet une structuration de l’information telle
qu’elle peut apparaître dans une table des matières. On peut également mettre en
évidence les points importants. Les utilisateurs de traitement de texte sont
familiarisés avec cette façon de procéder. Elle implique qu’une série d’informations
aient un rapport entre elles, par exemple sous forme d’énumération d’une liste de

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 26

tâches à réaliser. Ces listes d’informations peuvent être numérotées ou marquées

par une puce graphique.
De la même façon, avec HTML on peut créer des listes d’items numérotées,
nommées listes ordonnées, ou de listes à puces, nommées listes non ordonnées. Un
troisième type de listes permet également d’énumérer des termes et d’en donner
les définitions.
Les éléments permettant la création de listes ne sont pas des éléments de bloc à
proprement parler, mais ils ont un comportement similaire et peuvent être inclus
directement dans l’élément <body>.

a. Les listes ordonnées

Pour créer une liste dans laquelle la notion d’ordre a une importance, nous pouvons
utiliser une liste ordonnée dont chaque item sera numéroté par défaut à l’aide
d’entiers incrémentés de 1 à N, suivis d’un point puis du contenu de chaque item.
Une liste ordonnée doit commencer par l’élément <ol> (pour ordered list) qui doit
obligatoirement contenir au moins un élément <li> qui lui-même renferme le
contenu visible de chaque item. Il faut donc que <ol> contienne autant d’éléments
<li> qu’il y a d’items dans la liste désirée.
L’élément <ol> ne peut rien contenir d’autre, même pas de texte brut. La structure
d’une liste ordonnée est donc la suivante :

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

b. Les listes non ordonnées

Les éléments <li> peuvent avoir un contenu très varié, qu’il s’agisse de texte, de
titres, de tous les éléments de niveau bloc, des éléments en ligne et d’autres
éléments de liste.

Les listes non ordonnées (unordered list) fournissent un outil de structuration

similaire au précédent mais sans la notion de numérotation. Elles sont également
appelées listes à puces car chaque item est précédé d’une puce graphique qui, par
défaut, est un disque plein de la même couleur que le texte qui la suit.

Une liste à puces est introduite par l’élément <ul> et fermée par </ul>. Comme
l’élément <ol>, son seul contenu direct est un ou plusieurs éléments <li>. Le
contenu de chaque élément <li> est le même que pour les listes ordonnées. La
structure d’une liste à puces est donc la suivante :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 27

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

c. Les listes imbriquées

L’élément <li>, seul contenu autorisé des éléments <ol> et <ul>, peut lui-même
avoir un contenu très varié, et contenir d’autres éléments <ol> ou <ul>. Ainsi,
nous pouvons exploiter cette propriété pour créer des listes imbriquées les unes
dans les autres. Nous obtenons ainsi plusieurs niveaux de numérotation ou de
puces, à l’instar d’une table des matières qui reflète les titres des chapitres puis les
titres des différentes sections les composant.
Chaque élément <li> de premier niveau contient un élément <ol> ou <ul> qui lui-
même renferme des éléments <li> de deuxième niveau.
La structure des listes ordonnées imbriquées est donc la suivante :
<ol>
<li>Item 1
<ol>
<li>Item 1 A</li>
<li>Item 1 B</li>
</ol>
</li>
<li>Item 2
<ol>
<li>Item 2 A</li>
<li>Item 2 B</li>
</ol>
</li>
</ol>

La numérotation des listes ordonnées de deuxième niveau figure par défaut en

chiffres arabes et reprend à 1 pour chaque liste de deuxième niveau. De plus, les
contenus des items de deuxième niveau sont indentés par défaut par rapport à
ceux du niveau supérieur.
Pour créer des listes imbriquées à puces, il suffit de remplacer les éléments <ol>
par <ul>. Notons que, dans ce cas, les puces de deuxième niveau sont par défaut
des cercles au lieu de disques, ce qui permet de distinguer chaque niveau.
Il est aussi envisageable de créer des listes à puces imbriquées mixtes, c’est-à-dire
dans lesquelles un élément <ul> est utilisé comme descendant de l’élément <ol>,
et réciproquement.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 28

d. Les listes de définitions

Une liste de définitions permet de créer une liste de termes, chacun

d’entre eux étant suivi de sa définition. Le conteneur de l’ensemble de la
liste est l’élément <dl> qui ne peut contenir que des éléments <dt>,
<dd>, ou l’élément <dl> lui-même et rien d’autre. Le plus souvent,
l’élément <dt> contient le terme et <dd> en renferme la définition.
Par défaut, la définition est affichée à la ligne et indentée par rapport à la
ligne du terme.
La structure de base d’une liste de définitions est donc la suivante :

<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>

Les navigateurs affichent les définitions indentées de plusieurs caractères

par rapport aux termes.

2.6. Liens hypertextes

La balise <a....>...</a>permet d’écrire un lien hypertexte : le curseur
prend la forme d’une main au passage de la souris sur ce lien, et un clic
permet d’afficher la page qui est référencée dans cette balise. Cette balise
est dite en ligne, car elle ne produit pas de retour à la ligne.

Exemples simples de liens

<a href="[Link]
Exemples du livre à télécharger
</a>
<a href="[Link]">Retour à la page d’accueil</a>
<a href="documents/[Link]">Documents à télécharger</a>

L’attribut href (hypertext reference) est obligatoire, puisqu’il indique

l’adresse de la page à afficher lors d’un clic sur ce lien.

Lien avec attributs accesskey et title

<a href="[Link]
accesskey="a" title="Site de l’auteur">
Visitez le site de l’auteur </a>

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 29

Il est très utile de faire figurer l’attribut accesskey : les personnes

handicapées pourront activer le lien par un appui simultané sur la touche
Alt et la lettre indiquée entre guillemets.
L’attribut title permet d’afficher un texte automatiquement dans une
bulle au passage de la souris sur le lien, comme le montre la figure ci-
dessous.

Lien hypertexte : au passage de la souris, le curseur prend la forme d’unemain et le contenu de l’attribut title
s’affiche dans une bulle.
Lien hypertexte vers un endroit de la page
<a href="#poissons"
accesskey="p" title="Les habitants de la mer">
Accès au paragraphe "Les habitants de la mer"
</a>
...
...
<h2 id="poissons">Les habitants de la mer</h2>
Pour mettre en place un lien vers un endroit précis de la page courante, il
suffit d’ajouter un identifiant en attribut de la balise destination, par
exemple id="toto", ce qui permet de l’atteindre directement grâce au
lien <a href="#toto" ...>...</a>.

Si le texte à relier au lien en question n’est pas encadré par une balise, il
est possible d’utiliser la balise <a>comme ancre simple, uniquement pour
attribuer un identifiant à cette partie du texte :
<a id="toto">Texte à relier au lien interne</a>

Cette méthode permet également de créer un lien vers un endroit précis

d’une autre page que celle affichée. Par exemple, le lien <a
href="[Link]#rossignol"> affichera la page [Link] et
placera le
curseur de la fenêtre sur la balise d’identifiant id="rossignol".

Un lien pour télécharger un fichier

Beaucoup d’entre vous se demandent comment ça se passe pour le
téléchargement d’un fichier ... En fait, il faut faire exactement comme si
vous faisiez un lien vers une page web, mais en indiquant cette fois le nom
du fichier à télécharger.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 30

Par exemple, supposez que vous vouliez faire télécharger [Link].

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
<p><a href="[Link]">Télécharger le fichier</a></p>

C’est tout ! Le navigateur, voyant qu’il ne s’agit pas d'une page web à
afficher, va lancer la procédure de téléchargement lors qu'on cliquera sur
le lien.

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

Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a
href="[Link] target="_blank">Site de l’Uka</a> ?
<br />

Le site s'affichera dans une autre fenêtre. </p>

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.
Notez cependant qu'il est déconseillé d'abuser de cette technique car elle
perturbe la navigation. Le visiteur lui-même peut décider s'il veut ouvrir le lien
dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien pour ouvrir dans une
nouvelle fenêtre, ou Ctrl + Clic pour ouvrir dans un nouvel onglet.

Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous
pouvez utiliser des liens de type "mailto". Rien ne change au niveau de la
balise, vous devez simplement modifier la valeur de l'attribut href comme
ceci :

Code : HTML
<p><a href="[Link] un e-
mail !</a></p>

Il suffit donc de faire commencer le lien par "[Link] et d'écrire l'adresse

e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau
message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.

Exercices

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 31

Exercice 1 : À quoi sert l’élément <head> ? Quels sont ses éléments

enfants ? Peuvent-ils être employés plusieurs fois dans le même document
?
Exercice 2 : Quel élément est obligatoire dans l’élément <head> ? À quoi
sert-il ?
Exercice 3 : Écrivez les textes suivants : u n=2(un -1 + un -2) et
f(x)=3x4+7x3-9x2 pour qu’ils s’affichent de cette façon.

Chapitre 3 : Images, Multimédia, Tableau et Formulaires

3.1. Les Images en HTML
3.1.1. Les types d’images

Les navigateurs actuels n’acceptent qu’un nombre restreint de types

d’images et il faudra vous limiter aux trois grands types les plus utilisés et
enregistrer vos images selon les formats présentés ci-après, qui sont
suffisants pour satisfaire tous les besoins d’un concepteur de sites :
 GIF : Graphics Interface Format, ayant pour extension .gif. Ce format
est limité à 256 couleurs et est donc déconseillé pour les
photographies ayant une grande plage de teintes différentes. On
l’utilisera en priorité pour des icônes, des dessins ou des bandeaux

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 32

publicitaires car il présente aussi l’avantage de permettre la création

de petites animations et l’entrelacement qui va permettre l’affichage
progressif de l’image, d’abord en basse résolution puis, au fur et à
mesure du chargement, à la résolution maximale.
 JPEG : Joint Photographic Experts Group, ayant pour extensions .jpeg
ou .jpg. Ce format permet la création d’images en 24 bits (16
millions de couleurs), et est donc très adapté aux photographies
réalistes. En contrepartie toutefois, les images JPEG ont
habituellement un poids plus important en Ko, ce qui ralentit leur
chargement.
 PNG : Portable Network Graphics, ayant pour extension .png. Ce
format est assez récent et a été conçu comme alternative au format
GIF qui faisait l’objet (théoriquement, car qui s’en préoccupait ?) de
droits d’auteurs, les inventeurs de ce format pouvant vous réclamer
des royalties. Le format PNG créé à l’initiative du W3C est donc libre
de droit et permet normalement la création de graphiques et de
photographies. Comme il est de création récente, les vieux
navigateurs (de génération 3) ne le reconnaissent pas, mais comme
ils sont désormais très minoritaires, vous pouvez l’employer sans
trop de crainte.

À première vue, une image GIF ou PNG aura un poids plus faible qu’une
image JPEG; cependant, c’est la variété des teintes de l’image (la palette
des couleurs) qui va influencer le poids final de l’image. Quand vous créez
une image, essayez donc systématiquement de l’enregistrer sous les trois
formats. Vous serez parfois surpris par le poids réel des images obtenues
et vous pourrez choisir la moins lourde, donc celle qui s’affichera le plus
vite dans votre page. Ne vous fiez pas non plus au temps d’affichage des
images dans votre navigateur lors de vos tests, car le fichier provient
directement de votre disque dur dans le navigateur, et ce temps de
chargement n’a rien à voir avec celui que les visiteurs du site auront à
subir si votre image « pèse » 100 Ko par exemple. Pour faire bonne
mesure, diminuez la définition des photos numériques pouvant atteindre
une taille de 2 Mo.
De plus, on estime généralement qu’après 5 secondes d’attente, un
visiteur moyen commence à s’impatienter.
Testez donc vos pages en ligne pour vous mettre dans la situation de vos
visiteurs.
3.1.2. Insérer une image

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 33

En HTML, insérer une image revient à placer un lien vers le fichier qui la
contient, avec la balise <img ... />. Elle contient obligatoirement l’attribut
src qui indique le nom du fichier image à afficher.

Exemple de balise image

<img src="[Link]" alt="Le Logo de l’<ISTIA" title="Ceci est le Logos de
l’ISTIA" />
Si l’attribut src ne contient qu’un nom de fichier, cela signifie que ce
fichier image se trouve dans le même dossier que la page web qui l’utilise.
Si cette image se trouvait dans le sous-dossier images, la balise img
s’écrirait :
<img src="images/[Link]" alt="..." title="..." />

Normes Contenu de l’attribut alt

La balise alt doit indiquer, de façon concise, le contenu de l’image et sa

fonction si elle en a une (par exemple, si l’image est un bouton d’action). Il
est superflu d’y écrire « image de... », « graphisme de... » ou « photo de...
».
Pour une image décorative qui n’a pas de sens en elle-même, ou si une
légende est associée à l’image, l’attribut alt peut être vide mais reste
obligatoire : alt="".
Quant à l’attribut title, il permet d’afficher un texte dans une bulle au
passage de la souris sur l’image : c’est un renseignement
complémentaire, qui n’a pas le but de décrire l’image comme la balise alt.

3.1.3. Dimensionner une image

Il est possible de préciser les dimensions que doit prendre l’image, en

utilisant les attributs width et height, qui donnent respectivement sa
largeur et sa hauteur. Le plus simple consiste à ne définir qu’un seul de
ces attributs, car l’autre sera calculé automatiquement pour que les
proportions soient respectées.

Cependant, mieux vaut ne pas utiliser ces attributs et retailler

préalablement l’image aux dimensions souhaitées : l’image affichée sera
de meilleure qualité et cela n’obligera pas les internautes à télécharger un
gros fichier pour afficher seulement une petite image ! Ce
redimensionnement du fichier image peut s’effectuer très simplement, en
utilisant par exemple un logiciel gratuit comme Gimp, Photofiltre,
Irfanview, ...

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 34

3.2. Le Multimédias
Depuis l'arrivée de YouTube et Dailymotion, il est devenu courant
aujourd'hui de regarder des vidéos sur des sites web. Il faut dire que
l'arrivée du haut débit a aidé à démocratiser les vidéos sur le Web.
Cependant, aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il
fallait à la place utiliser un plugin, comme Flash.
Encore aujourd'hui, Flash reste de loin le moyen le plus utilisé pour
regarder des vidéos sur YouTube, Dailymotion, Vimeo et ailleurs. Mais
utiliser un plugin a de nombreux défauts : on dépend de ceux qui gèrent le
plugin (en l'occurrence l'entreprise Adobe, qui possède Flash), on ne peut
pas toujours contrôler son fonctionnement, il y a parfois des failles de
sécurité... Au final, c'est assez lourd.
Imaginez, pour les images, si la balise <img /> n'existait pas. Si à la place
il fallait à chaque fois charger un programme (un plugin) pour afficher une
image, ce serait lourd et compliqué !
C'est pour cela que 2 nouvelles balises standard ont été créées en HTML5 :
<video> et <audio> !

3.2.1. Les formats audio et vidéo

Lorsque je vous avais présenté les images et la balise <img />, j'avais
commencé par un petit tour d'horizon des différents formats d'image
(JPEG, PNG, GIF...). Pour la vidéo et l'audio, je vais faire pareil... mais c'est
plus compliqué.
En fait, le fonctionnement des vidéos est même tellement complexe qu'on
pourrait faire un cours entier à ce sujet ! Etant donné qu'on parle ici de
HTML, nous n'allons pas passer toutes nos prochaines nuits à étudier les
subtilités de l'encodage vidéo. Je vais donc simplifier les choses et vous
expliquer juste ce que vous avez besoin de savoir.
a. Les formats audio
Pour diffuser de la musique ou n'importe quel son, il existe de nombreux
formats. La plupart d'entre eux sont compressés (comme le sont les
images JPEG, PNG et GIF) ce qui permet de réduire leur poids :
 MP3 : vous ne pouvez pas ne pas en avoir entendu parler ! C'est
l'un des plus vieux, mais aussi l'un des plus compatibles (tous les
appareils savent lire des MP3), ce qui fait qu'il est toujours très
utilisé aujourd'hui.
 AAC : utilisé majoritairement par Apple sur iTunes, c'est un format
de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans
problème.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 35

 OGG : le format Ogg Vorbis est très répandu dans le monde du

logiciel libre, notamment sous Linux. Ce format a l'avantage d'être
libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
 WAV (format non compressé) : évitez de l'utiliser autant que
possible, car le son est très volumineux avec ce format. C'est un peu
l'équivalent du Bitmap (BMP) pour l'audio.
Aucun navigateur ne gère tous ces formats. Retenez surtout la
compatibilité pour les MP3 et OGG :

Il n'y a pas de format "idéal" reconnu par tous les navigateurs ?

Eh non ! Heureusement on pourra proposer différents formats aux
navigateurs, qui sélectionneront celui qu'ils savent lire.

b. Les formats vidéo

Le stockage de la vidéo est autrement plus complexe. On a besoin de 3
éléments :
 Un format conteneur : c'est un peu comme une boîte qui va servir
à contenir les deux éléments ci-dessous. On les reconnaît à
l'extension du fichier en général : AVI, MP4, MKV...
 Un codec audio : c'est le format du son de la vidéo, généralement
compressé. Nous venons de les voir, on utilise les mêmes : MP3,
AAC, OGG...

 Un codec vidéo : c'est le format qui va compresser les images.

C'est là que les choses se corsent, car ces formats sont complexes
et on ne peut pas toujours les utiliser gratuitement.

Les principaux à connaître pour le Web sont :

 H.264 : l'un des plus puissants et des plus utilisés aujourd'hui...
mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement
dans certains cas (comme la diffusion de vidéos sur son site web),
mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout
va.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 36

 Ogg Theora : un codec gratuit et libre de droits, mais moins

puissant que H.264. Il est bien reconnu sous Linux, mais sous
Windows il faut installer des programmes pour pouvoir le lire.
 WebM : un autre codec gratuit et libre de droits, plus récent.
Proposé par Google, c'est le concurrent le plus sérieux à H.264 à
l'heure actuelle.

Quelle est la compatibilité des codecs vidéo sur les différents

navigateurs ? Là encore, vous allez voir que c'est un joyeux bazar :

* WebM pour IE ne fonctionne que si le codec est installé sur l'ordinateur.

Là encore, aucun format ne sort du lot. Il est conseillé de proposer sa
vidéo en plusieurs formats pour qu'elle soit lisible sur un maximum de
navigateurs.
Pour convertir une vidéo dans ces différents formats, je vous conseille
l'excellent logiciel gratuit Miro Video Converter.
Cela vous permettra de créer plusieurs versions de votre vidéo !

3.2.2. Insertion d'un élément audio

La balise <audio> que nous allons découvrir est reconnue par tous les
navigateurs récents, y compris Internet Explorer à partir de la version 9
(IE9).
En théorie, il suffit d'une simple balise pour jouer un son sur notre page :

Code : HTML
<audio src="musique.mp3"></audio>

En pratique, c'est un peu plus compliqué que ça.

Si vous testez ce code... vous ne verrez rien ! En effet, le navigateur va

seulement télécharger les informations générales sur le fichier (on parle
de métadonnées), mais il ne se passera rien de particulier.
Vous pouvez compléter la balise des attributs suivants :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 37

 controls : pour ajouter les boutons "Lecture", "Pause" et la barre de

défilement. Ca peut sembler indispensable, et vous vous demandez
peut-être pourquoi ça n'y est pas par défaut, mais certains sites web
préfèrent créer eux-mêmes leurs propres boutons et commander la
lecture avec du Javascript.
 width : pour modifier la largeur de l'outil de lecture audio.
 loop : la musique sera jouée en boucle.
 autoplay : la musique sera jouée dès le chargement de la page.
Evitez d'en abuser, c'est en général irritant d'arriver sur un site qui
joue de la musique tout seul !
 preload : indique si la musique peut être préchargée dès le
chargement de la page ou non. Elle peut prendre les valeurs :
 auto (par défaut) : le navigateur décide s'il doit précharger
toute la musique, uniquement les métadonnées ou rien du
tout.
 metadata : charge uniquement les métadonnées (durée,
etc.).
 none : pas de préchargement. Utile si vous ne voulez pas
gaspiller de bande passante sur votre site.

On ne peut pas forcer le préchargement de la musique, c'est toujours le

navigateur qui décide.
Les navigateurs mobiles, par exemple, ne préchargent jamais la musique
pour économiser de la bande passante (le temps de chargement étant
long sur portable).

Ajoutons les contrôles et ça sera déjà mieux !

Code : HTML
<audio src="hype_home.mp3" controls></audio>

L'apparence du lecteur audio change en fonction du navigateur (ci-

dessous l'apparence sous Google Chrome) :

Pourquoi ouvrir la balise pour la refermer immédiatement après ?

Cela vous permet d'afficher un message ou de proposer une solution de
secours pour les navigateurs qui ne gèrent pas cette nouvelle balise. Par
exemple :

Code : HTML

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 38

<audio src="hype_home.mp3" controls>Veuillez mettre votre

navigateur à jour !</audio>

Ceux qui ont un navigateur récent ne verront pas le message. Les anciens
navigateurs, qui ne comprennent pas la balise, afficheront en revanche le
texte qui se trouve à l'intérieur.

Je vous conseille de proposer une solution de secours en Flash, comme le

Dewplayer. Vous placerez le code correspondant à Flash entre les balises
<audio> et </audio> : ainsi, les anciens navigateurs afficheront le
lecteur Flash, et les nouveaux afficheront le lecteur natif.
On a vu que certains navigateurs ne géraient pas le MP3, comment faire ?

Il faut proposer plusieurs versions du fichier audio. Dans ce cas, on va

construire notre balise comme ceci :
Code : HTML
<audio controls>
<source src="hype_home.mp3"></source>
<source src="hype_home.ogg"></source>
</audio>
Le navigateur prendra automatiquement le format qu'il reconnaît.

3.2.3. Insertion d'une vidéo

La balise <video > que nous allons découvrir est reconnue par tous les
navigateurs récents, y compris Internet Explorer à partir de la version 9
(IE9).
Il suffit d'une simple balise <video > pour insérer une vidéo sur sa page :
Code : HTML
<video src="[Link]"></video>

Mais, là encore, vous risquez d'être déçus si vous utilisez seulement ce

code. Aucun contrôle ne permet de lancer la vidéo !
Rajoutons quelques attributs (la plupart sont les mêmes que pour la balise
audio) : poster : image à afficher à la place de la vidéo lorsque celle-ci
n'est pas lancée. Par défaut, le navigateur prendra la première image de la
vidéo, mais comme il s'agit souvent d'une image noire ou d'une image peu
représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez
tout simplement faire une capture d'écran d'un moment de la vidéo.

 controls : pour ajouter les boutons "Lecture", "Pause" et la barre de

défilement. Ca peut sembler indispensable, mais certains sites web
préfèrent créer eux-mêmes leurs propres boutons et commander la

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 39

lecture avec du Javascript. En ce qui nous concerne, ça sera

largement suffisant !
 width : pour modifier la largeur de la vidéo.
 height : pour modifier la hauteur de la vidéo.
 loop : la vidéo sera jouée en boucle.
 autoplay : la vidéo sera jouée dès le chargement de la page. Là
encore, évitez d'en abuser, c'est en général irritant d'arriver sur un
site qui lance quelque chose tout seul !
 preload : indique si la vidéo peut être préchargée dès le
chargement de la page ou non. Elle peut prendre les valeurs :
 auto (par défaut) : le navigateur décide s'il doit précharger
toute la vidéo, uniquement les métadonnées ou rien du tout.
 metadata : charge uniquement les métadonnées (durée,
dimensions, etc.).
 none : pas de préchargement. Utile si vous ne voulez pas
gaspiller de bande passante sur votre site.
On ne peut pas forcer le pré chargement de la vidéo, c'est toujours le
navigateur qui décide.
Les proportions de la vidéo sont toujours conservées. Si vous définissez
une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser
les dimensions indiquées, mais il conservera les proportions.

Voici un code un peu plus complet :

Code : HTML
<video src="[Link]" controls poster="[Link]"
width="600"></video>

Pourquoi ouvrir et refermer immédiatement après la balise ?

La réponse est la même que pour la balise <audio>. Cela vous permet
d'afficher un message ou d'utiliser une technique de secours (en Flash) si
le navigateur ne reconnaît pas la balise :

Code : HTML
<video src="[Link]" controls poster="[Link]" width="600">
Il est temps de mettre à jour votre navigateur ! </video>
Comment contenter tous les navigateurs, puisque chacun reconnaît des
formats vidéo différents ?

Comment contenter tous les navigateurs, puisque chacun reconnaît des

formats vidéo différents ?
Vous utiliserez la balise <source> à l'intérieur de la balise <video > pour
proposer différents formats. Le navigateur prendra celui qu'il reconnaît :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 40

Code : HTML
<video controls poster="[Link]" width="600">
<source src="sintel.mp4" />
<source src="[Link]" />
<source src="[Link]" />
</video>

Les iPhone, iPad et iPod ne reconnaissent que le format H.264 à l'heure

actuelle (fichier .mp4)... et uniquement si celui-ci est affiché en premier
dans la liste ! Je vous recommande donc d'indiquer le format H.264 en
premier pour assurer une compatibilité maximale.

3.3. Tableaux
En HTML, un tableau est délimité par les balises <table> ... </table>.
Initialement, les bordures du tableau sont invisibles, donc il faut ajouter
dans la balise <table> l’attribut border pour indiquer l’épaisseur de la
bordure en pixels.

Également inclus dans la balise <table>, les attributs cellspacing et

cellpadding permettent de préciser en pixels, respectivement
l’espacement entre cellules (traits d’encadrement simples si 0, doubles
sinon) et les marges intérieures des cellules.
Le tableau se construit ligne par ligne, avec les balises <tr> ...
<tr>comme table row en anglais, c’est-à-dire rangée du tableau.

Les cellules du tableau sont définies à l’intérieur de chaque ligne, grâce

aux balises <td> ... </td>comme table data, soit donnée du tableau.
Lorsqu’il s’agit d’une cellule de titre, il est possible d’utiliser à la place les
balises <th> ...</th>comme table header ou en-tête du tableau : le texte
est alors mis en gras et centré.
Les balises <caption> ... </caption> sont facultatives : placées sous la
balise de début de tableau <table>, elles permettent de définir un titre
associé au tableau, qui s’écrira par défaut au-dessus de celui-ci.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 41

Exemple de tableau
<table border="1" cellspacing="0">
<tr>
<th>Pays</th>
<th>Capitale</th>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
<tr>
<td>Espagne</td>
<td>Madrid</td>
</tr>
</table>

3.2.1. Fusionner des cellules

L’attribut colspan permet de fusionner horizontalement les cellules de
plusieurs colonnes. Par exemple, la balise <td colspan="3">...</td> sera
équivalente à trois cellules <td>...</td> à l’intérieur d’une ligne.
De même, l’attribut rowspan sert à fusionner verticalement les cellules
de plusieurs lignes. Une balise <td rowspan="4">...</td> sera
équivalente à quatre cellules dans le sens vertical : cela signifie que les
trois lignes qui suivent auront une cellule <td>...</td> en moins.
<table border="1">
<tr>
<th colspan="2">Infos pays</th>
</tr>
<tr>
<th>Pays</th>
<th>Langue</th>
</tr>
<tr>
<td>Andorre</td>
<td>catalan</td>
</tr>
<tr>

<td rowspan="2">Canada</td>
<td>anglais</td>
</tr>
<tr>
<td>français</td>
</tr>
</table>

Comme le montre la figure ci-après, la première ligne de ce tableau

contient une fusion horizontale de cellules, sur deux colonnes : une seule
balise <th> au lieu de deux sur cette ligne.
L’avant-dernière ligne contient une fusion verticale de cellules, sur deux
lignes : la ligne suivante ne contient donc qu’une seule balise <td> au lieu
de deux.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 42

Figure 3-2 Exemple de tableau : il comprend des cellules fusionnées, horizontalement et

verticalement.

3.2.2. Organisation d’une page à l’aide de tableaux

Dans les années 1990, la tendance en matière de création de sites était de
structurer les pages au moyen de tableaux utilisés en tant que grille
contenant les différentes parties de la page.
L’utilisation de tableaux couplée à la définition de leur largeur en
pourcentage à l’aide de l’attribut width peut permettre d’obtenir un
tableau qui occupe par exemple toute la largeur d’une page, quelle que
soit la définition de l’écran du poste client.
Afin de rendre les pages plus attractives et que le visiteur ne perçoive pas
la grille générée par l’élément <table>, on utilise souvent comme astuce
la définition de son attribut border à la valeur 0, ce qui rend les bordures
des cellules invisibles.
De nombreux sites utilisent encore ces principes. À titre d’expérience,
rendez-vous sur le site [Link] et affichez-en le code source
(Affichage>Code source dans Mozilla par exemple), puis enregistrez-le et
ouvrez ce fichier dans votre éditeur HTML. Cherchez ensuite tous les
éléments <table> (Search>Find dans EditPlus par exemple) et remplacez
la valeur 0 de l’attribut border par la valeur 1 ou 2. Vous pourrez
constater, outre la non-conformité du code source à HTML, l’usage abusif
des tableaux dans cette page (pas moins de 43 éléments <table> !)
uniquement dans le but d’organiser la présentation de la page.
Tentez ensuite les mêmes opérations sur le site [Link],
strictement conforme à la DTD XHTML 1.0, et comparez le nombre
d’éléments <table>. Vous n’en trouverez qu’un seul.
Il s’agit bien là de deux politiques radicalement différentes, reconnaissons-
le.
Les figures ci-dessous montrent la page d’accueil du site [Link],
sans bordures de tableaux et avec une bordure de 1 pixel ensuite, ce qui
met en évidence tous les tableaux inclus dans la page.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 43

Normes Éviter les tableaux pour la mise en page

Rappelons qu’en HTML, les tableaux servent uniquement à présenter des
données. En effet, ils sont tout à fait déconseillés lorsqu’il s’agit de placer
côte à côte des blocs de texte : nous étudierons plus loin comment
Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 44

positionner des blocs de texte dans une page en utilisant les propriétés
CSS adéquates.

3.3. Les Formulaires

Les différents éléments d'un formulaire sont à insérer à l'intérieur des

balises <FORM>...</FORM>

1. La boîte texte :
La boîte texte est l'élément le plus commun. On s'en sert pour recueillir
une entrée au clavier de la part de l'utilisateur.
Exemple:

<FORM>

Nom: <br /> <INPUT TYPE="text" NAME="Nom" SIZE="40"

MAXLENGTH="40" VALUE="voilà une boîte texte"> </FORM>

Explication de la syntaxe :
INPUT TYPE="text" Cela définit le type de boîte, ici texte en entrée.
NAME="nom identificateur" Nom de la boîte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 45

3. La boîte mot de passe :

La boîte mot de passe constitue une variante de la boîte texte. Toutefois,

elle sert principalement à recueillir un mot de passe de la part de
l'utilisateur. Les caractères tapés sont représentés par des astérisques.
Exemple :

<FORM> Entrez votre mot de passe: <INPUT TYPE="password"

NAME="motdepasse" SIZE="20" MAXLENGTH="20" /> </FORM>

Explication de la syntaxe :
INPUT TYPE="password" Cela définit le type de boîte, ici mot de passe en
entrée. NAME="nom idenficateur" Nom de la boîte.
SIZE= nombre Détermine le nombre de caractères maximal visible à
l'écran. MAXLENGTH=nombre fixe le nombre maximal de caractères
permis.

3. Les cases radio :

Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il
ne peut effectuer qu'un seul choix parmi la liste.
Exemple : dans quel groupe d'âge se trouve le visiteur

Code source :
<FORM> <INPUT TYPE="radio" NAME="Groupedage" VALUE="16-25 ans" CHECKED> 16-
25 ans<BR> <INPUT TYPE="radio" NAME="Groupedage" VALUE="26-35 ans"> 26-35
ans<BR> <INPUT TYPE="radio" NAME="Groupedage" VALUE="36-45 ans"> 36-45
ans<BR> <INPUT TYPE="radio" NAME="Groupedage" VALUE="46-65 ans"> 46-65
ans<BR> <INPUT TYPE="radio" NAME="Groupedage" VALUE="65 ans et plus"> 65 ans
et plus<BR> </FORM>

Explication de la syntaxe :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 46

INPUT TYPE="radio" Cela définit le type de case, ici case radio.

NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est
le même mais il peut être différent. VALUE="valeur" Contenu par défaut
ici les tranches d'âge. CHECKED indique que l'item est sélectionné par
défaut au chargement de la page.

4. Les cases à cocher :

Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut
alors cocher un ou plusieurs items afin d'indiquer ses choix.

Code source :

<FORM> <INPUT TYPE="checkbox" NAME="option1" Value="réalisation">

Réalisation<BR>
<INPUT TYPE="checkbox" NAME="option2" Value="image"> Image<BR>
<INPUT TYPE="checkbox" NAME="option3" Value="son"> Son<BR>
<INPUT TYPE="checkbox" NAME="option4" Value="montage scripte" > Montage
scripte<BR>
<INPUT TYPE="checkbox" NAME="option5" Value="multimédia"> Multimédia<br>
<INPUT TYPE="checkbox" NAME="option6" Value="théâtre"> Théâtre
</FORM>

Explication de la syntaxe :
INPUT TYPE="checkbox " Cela définit le type de case, ici case à cocher.
NAME="nom identificateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut ici les options.

5. La boîte liste :
La boîte liste constitue une autre façon de présenter une liste d'items.
Celle-ci est utile dans le cas où le nombre d'éléments est plus important.
De plus, elle permet de sélectionner plus d'un item à l'aide de la touche
SHIFT ou CTRL.
Exemple :
Une liste de livres parmi lesquels l'utilisateur peut choisir :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 47

Code source :
<FORM> <SELECT NAME="Livres" SIZE="5" MULTIPLE>
<OPTION VALUE="HTML"> Apprendre le HTML
<OPTION VALUE="DREAMWEAVER" SELECTED> Créez vos pages pour le
Web <OPTION VALUE="FLASH"> La bible du flash
<OPTION VALUE="DIRECTOR"> Le livre sur Director <OPTION
VALUE="JAVA"> Programmer en Java
</SELECT>
</FORM>

Explication de la syntaxe :
<SELECT NAME="nom de la liste" SIZE="nombre" MULTIPLE> L'attribut
SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut
MULTIPLE, s'il est présent, permet à l'utilisateur d'effectuer plus d'une
sélection.
<OPTION VALUE="Texte à définir par le concepteur">Les entrées de la
liste sont décrites par l'attribut OPTION,VALUE sert à définir la valeur qui
doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur"
SELECTED>SELECTED, lorsque présent, indique que l'item est sélectionné
par défaut au chargement de la page.

6.-La boîte liste déroulante :

La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur
de faire un choix parmi une liste d'items. Cependant, un seul choix est
possible pour ce type de liste.

Code source :

<FORM> <SELECT NAME="Pays"> <option value="Question" selected>Quel est

votre pays d'origine </option> <option value="Allemagne">Allemagne
</option> <option value="Chili">Chili </option>

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 48

<option value="Belgique">Belgique </option>

<option value="Canada">Canada </option>
<option value="Argentine">Argentine </option>
<option value="France">France </option>
<option value="Grande-Bretagne">Grande-Bretagne </option>
<option value="Suisse">Suisse </option> </SELECT> </FORM>

Explication de la syntaxe :
NAME= nom de la liste
<OPTION VALUE="Texte à définir par le concepteur">Les entrées de la
liste sont décrites par l'attribut OPTION,VALUE sert à définir la valeur qui
doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur"
SELECTED>SELECTED, lorsque présent, indique que l'item est sélectionné
par défaut au chargement de la page.

7.- La boîte texte multilignes :

La boîte texte multilignes, à l'instar de la boîte texte, permet à l'utilisateur
d'inscrire plus d'une ligne de texte.
Exemple :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 49

<FORM> Donnez-nous vos commentaires:<BR> <TEXTAREA

NAME="Commentaires" COLS=30 ROWS=5 WRAP=virtual> Veuillez écrire
ici... </TEXTAREA> </FORM>

Explication de la syntaxe :
NAME="nom identificateur"
COLS=nb colonnes.
ROWS=nb rangées.
WRAP détermine la façon dont les lignes sont traitées lors d'un
changement de ligne. La liste ci-dessous donne une description
des différentes possibilités :
- OFF : aucun changement de ligne.
- VIRTUAL : les changements de lignes sont effectués
automatiquement dans la boîte texte multilignes.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 50

Cependant, le tout est soumis en une seule ligne au

serveur.
- PHYSICAL : les changements de lignes sont effectués
automatiquement dans la boîte texte multilignes. Les
changements de lignes sont également communiqués
au serveur.
[Link] boutons envoyer et recommencer :

Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur

le bouton soumettre à l'aide de la souris. La plupart du temps, il est
accompagné du bouton recommencer, permettant ainsi à l'utilisateur
d'effacer toutes les entrées du formulaire d'un seul coup.

Code source :
<FORM>
ICI tous les éléments de votre formulaire, cases à cocher, boîte
de texte, boutons radio ...
<INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset"
VALUE="Recommencer"> </FORM>

Le bouton Envoyer est celui dont l'attribut TYPE est submit, tandis que le
bouton Recommencer est reset.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 51

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 52

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 53

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 54

Chapitre 4 : Les Styles CSS

Le HTML est né en 1991, et CSS est né en 1996. Alors, vous vous dites
sûrement: comment faisait-on la mise en forme de 1991 à 1996 ? Eh bien,
uniquement en HTML !

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 55

Il y avait en effet des balises HTML dédiée à la mise en forme.

<fontcolor="#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é par les webmasters immédiatement, loin de là. Il fallait se
défaire de certaines mauvaises habitudes, et ça a pris du temps.
Encore aujourd'hui on peut trouver des sites web avec des vieilles balises
HTML de mise enforme qui n'existent plus, comme <font>!

4.1. Écriture des feuilles de style

4.1.1. Où écrit-on le CSS ?
Vous avez le choix, car on peut écrire du code en langage CSS à 3 endroits
différents :
 Dans un fichier .css (méthode la plus recommandée) ;
 Dans l'en-tête <head>du fichier XHTML ;
 Directement dans les balises du fichier XHTML via un attribut style
(méthode la moins recommandée) ;

Dans un fichier .css (recommandé)

Comme je viens de vous le dire, le plus souvent on écrit du code CSS dans
un fichier spécial ayant l'extension .css (contrairement aux fichiers XHTML
qui ont l'extension .html). C'est la méthode la plus pratique et la plus
flexible. Ca nous évite de tout mélanger dans un même fichier. J'utiliserai
cette technique tout au long de la suite de ce cours.
Commençons à pratiquer dès maintenant ! On va partir du fichier HTML suivant :

Code : HTML
<!DOCTYPE …>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 56

<h1>Mon super site</h1>

<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 la ligne <link rel="stylesheet" href="[Link]" />: c'est elle
qui indique que ce fichier XHTML va être associé à un fichier appelé
[Link] qui va gérer sa mise en forme.

Enregistrez ce fichier avec le nom que vous voulez (par exemple

[Link]). Pour le moment, rien d'extraordinaire à part la nouvelle balise
que nous avons ajoutée.
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;
}

Enregistrez le fichier en lui donnant un nom qui se termine par .css,

comme [Link]. Placez ce fichier .css dans le même dossier que votre
fichier .html.
Ouvrez maintenant votre fichier [Link] dans votre navigateur pour
l'essayer, comme vous le faites d'habitude. Regardez, c'est magique : vos
paragraphes sont écrits en bleu !

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers XHTML :
cela consiste à insérer le code CSS directement dans une balise <style>à
l'intérieur de l'en-tête <head>.

Voici comment on peut obtenir exactement le même résultat avec un seul

fichier .html qui contient le code CSS :

Code: HTML
<!DOCTYPE html>
<html>
<head>

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 57

<meta charset="utf-8" />

<style>
P
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<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>
Testez, vous verrez que le résultat est le même :

Directement dans les balises (non recommandé)

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 : XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns="[Link] xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf- 8"/>
<link rel="stylesheet" href="[Link]" />
<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>
Cette fois, seule la balise du premier paragraphe qui contient le code CSS
sera colorée en bleu

Quelle méthode choisir ?

Je vous recommande fortement de prendre l'habitude de travailler avec la
première méthode parce que c'est celle utilisée par la majorité des
webmasters... Pourquoi ?
Pour le moment, vous faites vos tests dans un seul fichier XHTML.
Cependant, votre site sera plus tard constitué de plusieurs pages XHTML,
et maintenant imaginez : si vous placez le code CSS directement dans le
fichier HTML, il faudra copier ce code dans tous les fichiers XHTML de votre
site ! Et si demain vous changez d'avis, par exemple si vous voulez que
vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier
chaque fichier XHTML un à un !

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 58

4.1.2. Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous à ce
code de plus près.

Code: CSS

P{

color: blue;

}
Dans un code CSS comme celui-ci, on trouve 3 é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 coeur
(sauf s'il me prend une envie sadique de vous faire souffrir).
 Les valeurs : à chaque propriété CSS on doit indiquer une valeur.
Par exemple, pour la couleur, il faut indiquer le nom de la couleur.
Pour la taille, il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à ceci :

Code : CSS
balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise3
{
propriete: valeur;
}

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 59

Comme vous le voyez, on écrit le nom de la balise (par exemple h1), et on

ouvre des accolades pour y mettre les propriétés etvaleurs que l'on veut à
l'intérieur. On peut mettre autant de propriétés que l'on veut à l'intérieur
des accolades. Chaque propriétéest suivie du symbole "deux-points" (:)
puis de sa valeur correspondante. Enfin, chaque ligne se termine par un
point-virgule (;).

4.1.3. Appliquer un style à plusieurs balises

Prenons le code CSS suivant :

Code: CSS
h1
{
color: blue;
}
em
{
color: blue;
}

Il signifie que nos titres <h1>et nos textes importants <em>doivent

s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?
Heureusement, il existe un moyen en CSS d'aller plus vite si les 2 balises
doivent avoir la même présentation. Il suffit de combiner la déclaration en
séparant les noms des balises par une virgule comme ceci :

Code : CSS

h1, em
{
color: blue;
}

Cela signifie : "Je veux que le texte de mes <h1> et <em> soit écrit en
bleu".
Vous pouvez indiquer autant de balises à la suite que vous le désirez.

4.1.4. Des commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires. Les

commentaires ne seront pas affichés, ils servent simplement à indiquer
des informations pour vous, par exemple pour vous y retrouver dans un
long fichier CSS.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 60

D'ailleurs, vous allez vous en rendre compte, en général le fichier XHTML

est assez petit, et la feuille CSS assez grande (si elle contient tous les
éléments de style de votre site, c'est un peu normal).
Notez qu'il est possible de créer plusieurs fichiers CSS pour son site si vous
ressentez le besoin de séparer un peu votre code CSS (en fonction des
différentes sections de votre site par exemple).
Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre
commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par
exemple :

Code : CSS
/*
---------
G2 Info
*/
p{
color: blue; /* Les paragraphes seront bleus */
}

4.1.5. Appliquer un style : class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique
que TOUS les paragraphes soient écrits par exemple en bleu. Comment
faire pour que seulement certains paragraphes soient écrits d'une manière
différente ?
On pourrait placer notre code CSS dans un attribut style sur la balise que
l'on vise, mais comme nous l’avons dit, ce n'est pas recommandé (il vaut
mieux utiliser un fichier CSS externe).
Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui
fonctionnent sur toutes les balises :
 L'attribut class
 L'attribut id
Que les choses soient claires dès le début : les attributs class et id sont
quasiment identiques. Il y a seulement une petite différence que nous
découvrirons plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut
class.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 61

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur
n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

Code: HTML
<h1 class=""></h1>
<p class=""></p>
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que
vous voulez, tant que le nom commence par une lettre.
Par exemple, je vais donner la classe introduction à mon premier
paragraphe :

Code : XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns="[Link] xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf- 8"/>
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">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>

Maintenant que c'est fait, 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".
Pour faire ça en CSS, indiquez le nom de votre classe en commençant par
un point, comme ceci :

Code: CSS
.introduction
{
color: blue;
}

Lui, il fonctionne exactement de la même manière que class, à un détail

près : il ne peut être utilisé qu'une fois dans le code.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 62

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile
si vous faites du Javascript plus tard pour reconnaître certaines balises.
D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens
(pour réaliser des ancres).
En pratique, nous ne mettrons des id que sur des éléments qui sont
uniques sur votre page, comme par exemple le logo :

Code : XHTML
<img src="images/[Link]" alt="Logo du site" id="logo" />
Si vous utilisez des id, dans le CSS il faudra faire précéder le nom de l'id
par un dièse (#) :
Code : CSS
#logo
{
/* Indiquez les propriétés CSS ici */
}

4.1.6. Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à
certains mots qui ne sont pas à l'origine entourés par des balises.
En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne
pouvez donc en mettre que sur une balise. Par exemple, si je veux
modifier uniquement "bienvenue" dans le paragraphe suivant :
Code : HTML
<p>Bonjour et bienvenue sur mon site !</p>
Ça serait facile à faire s'il y avait une balise autour de "bienvenue",
malheureusement il n'y en a pas. Heureusement, on a inventé... la balise-
qui-sert-à-rien.
En fait, on a inventé 2 balises dites universelles qui n'ont aucune
signification particulière (elles n'indiquent pas que le mot est important
par exemple). Il y a une petite (mais importante !) différence entre ces
deux balises :
 <span></span>: c'est une balise de type inline. C'est 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 de la même famille sont <p>,<h1>, etc. Ces
balises ont quelque chose en commun : elles créent un nouveau

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 63

"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, comme nous le verrons plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la

met autour de "bienvenue", on lui rajoute une classe (du nom qu'on veut),
on crée le CSS et c'est gagné !

Code : HTML
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon
site !</p>
Code : CSS
.salutations
{
color: blue;
}

4.1.7. Appliquer un style : les sélecteurs avancés

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. Nous en avons déjà
utilisé un peu plus tôt dans cette section, résumons-les pour commencer.
Les sélecteurs que nous connaissons déjà
Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus
couramment utilisés. Il faut les connaître par coeur. Commençons par la
base de la base :

Code : CSS
P
{
}
... signifie "Je veux affecter tous les paragraphes". Après, c'est à vous de
dire ce que vous faites à ces paragraphes (vous les écrivez en bleu par
exemple).
Nous avons aussi vu :

Code : CSS
h1, em
{
}
... qui signifie "Tous les titres et textes importants". Nous avons
sélectionné deux balises d'un coup.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 64

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
{
}
Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous
n'allons pas toutes les voir, car il y en a beaucoup et certaines sont
complexes, mais voici déjà de quoi vous permettre d'être plus efficaces en
CSS !

Les sélecteurs avancés :

 sélecteur universel

A B : une balise contenue dans une autre

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

A + B : une balise qui en suit une autre

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 balise.
Exemple de code HTML correspondant :
Code : XHTML
<h3>Titre avec <em>texte important</em></h3>
Code : CSS
h3 + p
{
}
Sélectionne la première balise <p>située après un titre <h3>.
Exemple :

A[attribut] : une balise qui possède un attribut

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 65

Code : HTML

<h3>Titre</h3>
<p>Paragraphe</p>
Code : CSS
a[title]

{
}
Sélectionne tous les liens <a>qui possèdent un attribut title.
Exemple :

A [attribut="Valeur"] : une balise, un attribut et une valeur exacte

Code : HTML
<a href="[Link] title="Infobulle">

Code : CSS
a[title="Cliquez ici"]
{
}
Idem, mais l'attribut doit en plus avoir exactement pour valeur "Cliquez
ici".
Exemple :

A [attribut*="Valeur"] : une balise, un attribut et une valeur

Code : HTML
<a href="[Link] title="Cliquez ici">
Code : CSS
a[title*="ici"]
{
}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot "ici" (peu
importe sa position).
Exemple :

Code : HTML
<a href="[Link] title="Quelque part par ici">

D’autres sélecteurs existent !

Je ne vous ai présenté qu'une partie des sélecteurs CSS ici, mais sachez
qu'il en existe beaucoup d'autres.
Sachez que nous découvrirons certains de ces autres sélecteurs dans la
suite de ce cours !

4.2. Formatage du texte

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 66

Cette section va être l'occasion de découvrir de nombreuses propriétés

CSS : nous allons voir comment modifier la taille du texte, changer la
police, aligner le texte...

4.2.1. La taille
Pour modifier la taille du texte, on utilise la propriété CSS font-size. Mais
comment indiquer la taille du texte ? C'est là que ça se corse car plusieurs
techniques vous sont proposées :
✓ Indiquer 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 parfois d'indiquer une taille
trop petite pour certains lecteurs.
✓ Indiquer 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.

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 écrire :
Code : CSS
font-size: 16px;
Voici un exemple d'utilisation (placez ce code dans votre fichier .css) :

Code : CSS
p{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}

Si vous le souhaitez, des tailles en centimètres ou millimètres sont aussi

disponibles. Remplacez "px" par "cm" ou "mm". Ces unités sont cependant
moins bien adaptées aux écrans.

Une valeur relative

C'est la méthode recommandée car le texte s'adapte alors plus facilement
aux préférences de tous les visiteurs.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 67

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
medium : moyen
large : grand
x-large : très grand
xx-large : euh... gigantesque.
Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS :

Code : CSS
p{
font-size: small;
}
h1
{
font-size: large;
}
Cette technique a un défaut : il n'y a que 7 tailles disponibles (car il n'y a
que 7 noms). Heureusement il existe d'autres moyens.
Ma technique préférée consiste à indiquer la taille en "em". C'est une unité
spécifique au CSS.
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.
Faites attention, il faut mettre un point à la place de la virgule pour les
nombres décimaux. Vous devez donc écrire"1.4em" et non pas "1,4em" !
Exemple :
Code : CSS
p{
font-size: 0.8em;
}h
1
{
font-size: 1.3em;
}

D'autres unités sont disponibles. Vous pouvez essayer le "ex" (qui

fonctionne sur le même principe que le em mais qui est plus petit de base)
et le pourcentage (80%, 130%...).

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 68

4.2.2. La police

En effet, le problème c'est que, pour qu'une police s'affiche correctement,

il faut que tous les internautes l'aient. Si un internaute n'a pas la même
police que vous, son navigateur prendra une police par défaut (une police
standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous
attendiez.

La bonne nouvelle, c'est que depuis CSS3, il est possible de faire

télécharger automatiquement une police au navigateur. Je vous
expliquerai dans un second temps comment faire cela.
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 qu'il n'y ait de problème 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;
}

Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il

essaiera de mettre la police2. S'il ne l'a pas, il essaiera lapolice3 et ainsi
de suite.
En général, on indique en tout dernier serif, ce qui correspond à une police
standard (qui ne se met que si aucune autre police n'a été trouvée).
Il existe aussi une autre police par défaut appelée sans-serif. Il y a une
petite différence entre ces deux polices par défaut : serif possède des
pattes de liaison en bas des lettres, tandis que sans-serif n'en possède
pas.
Voici une liste de polices qui fonctionnent bien sur la plupart des
navigateurs :
 Arial

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 69

 Arial Black
 Comic Sans MS
 Courier New
 Georgia
 Impact
 Times New Roman
 Trebuchet MS
 Verdana
Ainsi, si j'écris :

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'a marché mets une police
standard (sans-serif)".

En général, il est bien d'indiquer un choix de 3-4 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, je conseille de l'entourer de
guillemets, comme je l'ai fait pour "Arial Black".

4.2.3. Italique, gras, souligné...

Il existe en CSS une série de propriétés de mises en forme classiques du
texte. Nous allons découvrir ici la mise en gras, italique, souligné... et au
passage nous verrons qu'il est même possible d'aller jusqu'à faire clignoter
le texte !
Mettre en italique
<em>, est fait pour insister sur des mots. Ca veut dire que les mots qu'il
entoure sont assez importants.

Pour représenter cette importance, la plupart des navigateurs choisissent

d'afficher le texte en italique (mais ce n'est pas une obligation).
Le CSS lui, permet de dire réellement : "Je veux que ce texte soit en
italique". Rien ne vous empêche par exemple de décider que tous vos
titres seront en italique.
Concrètement, pour mettre en italique en CSS on utilise font-style, qui
peut prendre 3 valeurs :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 70

 italic : le texte sera mis en italique.

 Oblique : le texte sera aussi mis en italique (en penchant les lettres).
 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
em
{
font-style: normal;
}

Sur l'exemple suivant, je me sers par exemple de font-style pour mettre

en italique tous mes titres <h2>:

Code : CSS
h2
{
font-style: italic;
}

Mettre en gras
N'oubliez pas que ce n'est pas <strong>qui permet de mettre en gras
(son rôle est d'indiquer que le texte est important, donc le navigateur
l'affiche en gras). La mise en gras en CSS permet de mettre en gras par
exemple les titres, certains paragraphes entiers, etc.
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;
}

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 71

Soulignement et autres décorations

Cette propriété CSS porte bien son nom : text-decoration. Elle permet
entre autres de souligner le texte, mais pas seulement. Voici les
différentes valeurs qu'elle peut prendre :
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
 blink : clignotant. Ne marche pas sur tous les navigateurs (Internet
Explorer et Google Chrome notamment).
 none : normal (par défaut).

Ce CSS va vous permettre de tester les effets de text-decoration :

Code : CSS
h1
{
text-decoration: blink;
}.

souligne
{
text-decoration: underline;
}.

barre
{
text-decoration: line-through;
}.
ligne_dessus
{
text-decoration: overline;
}

4.2.3. L'alignement
Le langage CSS nous permet de faire tous les alignements que l'on connaît
: à gauche, centré, à droite et justifié.
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é".

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 72

Exemple :
Code : CSS

h1
{
text-align: center;
}

p{
text-align: justify;
}

.signature
{
text-align: right;
}

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

4.2.4. La couleur et le fond

Nous allons nous intéresser ici aux propriétés liées de près ou de loin à la
couleur. Nous verrons entre autres :
✓ Comment changer la couleur du texte
✓ Comment mettre une couleur ou une image de fond
✓ Comment ajouter des ombres
✓ Comment jouer avec les niveaux de transparence

a. Couleur du texte
Nous connaissons déjà la propriété qui permet de modifier la couleur du
texte : il s'agit de color. Nous allons nous intéresser aux différentes façons
d'indiquer la couleur, car il y en a plusieurs.

Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur est
de taper son nom.
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites
"standard". D'autres couleurs officieuses existent, mais elles ne
fonctionneront pas forcément pareil sur tous les navigateurs.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 73

Voici les 16 couleurs que vous pouvez utiliser en tapant simplement leur
nom :

Pour passer tous les titres en marron, on peut donc écrire :

Code: CSS
h1
{
color: maroon;
}
La notation hexadécimale
16 couleurs, c'est quand même un peu limite quand on sait que la plupart
des écrans peuvent en afficher 16 millions.
D'un autre côté, remarquez, s'il avait fallu donner un nom à chacune des
16 millions de couleurs...
Heureusement, il existe plusieurs façons en CSS de choisir une couleur
parmi toutes celles qui existent.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 74

La première que nous allons voir est la notation hexadécimale. Elle est
couramment utilisée sur le Web, mais il existe aussi une autre méthode
que nous verrons plus loin.
Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. Pour
faire simple, c'est une combinaison de lettres et de chiffres qui indiquent
une couleur.

On doit toujours commencer par écrire un dièse (#), suivi de 6 lettres ou

chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les 2 premiers
indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les
2 derniers une quantité de bleu. En mélangeant ces quantités (qui sont les
composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur
qu'on veut.
Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur
blanche.
Certains logiciels de dessin, comme Photoshop, Gimp et Paint .NET, vous
indiquent les couleurs en hexadécimal. Il vous est alors facile de copier-
coller le code hexadécimal d'une couleur dans votre fichier CSS.
Voici par exemple comment on fait pour appliquer la couleur blanche en
hexadécimal sur les paragraphes :

Code: CSS
p{
color: #FFFFFF;
}
Notez qu'il existe une notation raccourcie : on peut écrire une couleur
avec seulement 3 caractères. Par exemple : #FA3est équivalent à écrire
#FFAA33.

La méthode RGB
Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce
qui s'abrège en "RGB". Comme pour la notation hexadécimale, on doit
définir une quantité de rouge, de vert et de bleu pour choisir une couleur.
C'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple
comme Paint, vous pouvez trouver la couleur que vous désirez. Voici la
marche à suivre :
1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans la section Modifier les couleurs
3. Une fenêtre s'ouvre.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 75

Dans la zone qui apparaît à droite, faites bouger les curseurs pour
sélectionner la couleur qui vous intéresse. Supposons que je sois pris
d'une envie folle d'écrire mes titres <h1>en rose barbie (supposons
seulement). Sélectionner la couleur dans la fenêtre, comme ceci :

4. On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées

en bas à droite de la fenêtre (ici 240-96-204). Recopier ces valeurs dans
cet ordre dans le fichier CSS, comme ceci :

Code: CSS
p
{
color: rgb(240,96,204);
}
Nota : Nous mettons à votre disposition un petit logiciel tout simple,
spécialisé dans le choix d'une couleur, réalisé par Benjamin Chartier. Nul
doute qu'il vous sera très utile pour vous aider à choisir vos couleurs. Ce
logiciel s'appelle "La boîte à couleurs", et il ressemble à ceci :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 76

b. Couleur de fond
Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color. Elle s'utilise de la même manière que la propriété
color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en
notation hexadécimale ou encore utiliser la méthode RGB.

Pour indiquer la couleur de fond de la page web, il faut travailler sur la

balise <body>. Eh oui, <body>correspond à toute la page web, c'est
donc en modifiant sa couleur de fond que l'on changera la couleur de fond
de la page web.

Code : CSS
body /* On travaille sur la balise body, donc sur TOUTE la page */
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
c. Images de fond

Dans les exemples qui suivent, je vais 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 aux titres, paragraphes, etc.
Appliquer une image de fond
La propriété permettant d'indiquer une image de fond est background-
image. Comme valeur, on doit lui donner url("nom_de_l_image.png"). Par
exemple:

Code : CSS
body
{
background-image: url("[Link]");

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 77

}
Options disp

Options disponibles pour l'image de fond

On peut compléter la propriété background-image que nous venons de
voir par plusieurs autres propriétés qui permettent de changer le
comportement de l'image de fond.
background-attachment : fixer le fond

La propriété CSS background-attachment permet de "fixer" le fond.

L'effet obtenu est intéressant, car on voit alors le texte "glisser" par-
dessus le fond. Deux valeurs sont disponibles :
 fixed : l'image de fond reste fixe.
 scroll : l'image de fond défile avec le texte (par défaut).

Code: CSS
body
{
background-image: url("[Link]");
background-attachment: fixed; /* Le fond restera fixe */
}
background-repeat : répétition du fond

Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez

changer cela avec la propriété background-repeat :
 no-repeat : le fond ne sera pas répété. L'image sera donc unique sur
la page.
 repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement.
 repeat-y : le fond sera répété uniquement sur la première colonne,
verticalement.
 repeat : le fond sera répété en mosaïque (par défaut).

Exemple d'utilisation :

Code : CSS

body
{
background-image: url("[Link]");
background-repeat: no-repeat;
}

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 78

Background-position: position du fond

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).
Ainsi, si vous tapez :

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 je veux afficher un soleil en image de fond, 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("[Link]");
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 */
}
Combiner les propriétés

Si vous utilisez beaucoup de propriétés en rapport avec le fond (comme

c'est le cas sur ce dernier exemple), vous pouvez utiliser une sorte de
"super-propriété" appelée background qui peut prendre plusieurs valeurs
combinées des propriétés vues précédemment : background-image,

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 79

background-repeat, background-attachment et background-

position.
On peut donc tout simplement écrire :
Code: CSS
body
{
background: url("[Link]") fixed no-repeat top right;
}
C'est la première "super-propriété" que je vous montre, il y en aura
d'autres.
Il faut savoir que : 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.

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("[Link]") fixed no-repeat top right,
url("[Link]") fixed;
}

La première image de cette liste sera placée par-dessus les autres.

Attention donc, l'ordre de déclaration des images a son importance : si
vous inversez le soleil et la neige dans le code CSS précédent, vous ne
verrez plus le soleil !

d. La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de

transparence des éléments.
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.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 80

Il faut donc choisir une valeur comprise entre 0 et 1. Par exemple avec
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;
}
Voici un exemple qui va nous permettre d'apprécier la transparence :
Code: CSS
body
{
background: url('[Link]');
}
P
{
background-color: black;
color: white;
opacity: 0.3;
}

4.2.5. Les bordures et les ombres

Ici, nous allons nous intéresser aux bordures et aux effets d'ombre que
l'on peut appliquer, aussi bien sur le texte que sur les blocs qui constituent
notre page. ;

Bordures standard

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 aller à l'essentiel, je vous propose ici d'utiliser directement la super-

propriété border qui regroupe l'ensemble de ces propriétés. Vous vous
souvenez de la super-propriété background ? Cela fonctionne sur le
même principe : on va pouvoir combiner plusieurs valeurs.
Pour border on peut utiliser jusqu'à 3 valeurs pour modifier l'apparence
de la bordure :

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 81

 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)).
• o Le type de bordure : là, vous avez le choix. 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.
 groove : en relief.
 ridge : autre effet relief.
 inset : effet 3D enfoncé.
 outset : effet 3D surélevé.

Ainsi, pour avoir une bordure bleue en tirets de 3 pixels autour des mes
titres, je vais écrire :

Code: CSS

h1
{
border: 3px blue dashed;
}
Voici les différents styles de bordures en images pour vous aider à faire
votre choix :
En haut, à droite, à gauche, en bas...
Si vous voulez mettre des bordures différentes en fonction du côté (haut,
bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas,
vous devrez utiliser ces 4 propriétés :
 border-top : bordure en haut.
 border-bottom : bordure en bas.
 border-left : bordure à gauche.
 border-right : bordure à droite.

Il existe aussi des équivalents pour paramétrer chaque détail de la bordure

si vous le désirez : border-top-width pour modifier l'épaisseur de la
bordure du haut, border-top-color pour la couleur du haut, etc.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 82

Ce sont aussi des super-propriétés, elles fonctionnent comme border

mais ne s'appliquent donc qu'à un seul côté.
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 sa

page. Nous l'avons fait ici sur les paragraphes, mais on peut aussi modifier
la bordure de ses images, des textes importants comme <strong>, etc.
Bordures arrondies

La propriété border-radius va nous permettre d'arrondir les angles de

n'importe quel élément facilement. Il suffit d'indiquer la taille
("l'importance") de l'arrondi en pixels :

Code : CSS
p{
border-radius: 10px;
}

L'arrondi se voit notamment si l'élément a des bordures ou s'il a une

couleur de fond.
Les ombres
Les ombres font partie des nouveautés récentes offertes par CSS3.
Aujourd'hui, ajouter des ombres à ses pages se fait en une seule ligne de
CSS !

Nous allons ici découvrir deux types d'ombres :

Les ombres des boîtes
Les ombres du texte

box-shadow : les ombres des boîtes

La propriété box-shadow s'applique à tout le bloc et prend 4 valeurs dans

cet ordre :
Le décalage horizontal de l'ombre
Le décalage vertical de l'ombre
L'adoucissement du dégradé
La couleur de l'ombre

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 83

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on

écrira :

Code : CSS
p{
box-shadow: 6px 6px 0px black;
}

On peut aussi rajouter une cinquième valeur facultative : inset. Dans ce

cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé
:

Code: CSS
p{
box-shadow: 6px 6px 6px black inset;
}
text-shadow : l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les
lettres de votre texte ! Les valeurs fonctionnent exactement de la même
façon que box-shadow : décalage, adoucissement et couleur.

Code: CSS
p{
text-shadow: 2px 2px 4px black;
}

4.2.6. Création d'apparences dynamiques

Le CSS nous permet aussi de modifier l'apparence des éléments de façon

dynamique, c'est-à-dire que des éléments peuvent changer de forme une
fois que la page a été chargée.
Nous verrons dans cette section comment changer l'apparence :

 Au survol
 Lors du clic
 Lors du focus (élément sélectionné)
 Lorsqu'un lien a été visité

Au survol
Nous allons ici découvrir plusieurs pseudo-formats CSS. Le premier
s'appelle : hover.

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 84

Comme tous les autres pseudo-formats que nous allons voir, c'est une
information que l'on rajoute après le nom de la balise (ou de la classe)
dans le CSS, comme ceci :

Code : CSS
a:hover
{
}

:hover signifie "dessus". a:hover signifie donc : "Quand la souris est sur le
lien" (quand on pointe dessus).

À partir de là, c'est à vous de définir l'apparence que doivent avoir les
liens lorsqu'on pointe dessus.
Voici un exemple de présentation des liens, mais n'hésitez pas à inventer
le vôtre :
Code : CSS
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: red;
font-style: italic;
}
a:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}

On a défini ici 2 versions des styles pour les liens :

Pour les liens par défaut (non survolés)
Pour les liens au survol
Même si on l'utilise souvent sur les liens, vous pouvez modifier l'apparence
de n'importe quel élément.
Par exemple, vous pouvez modifier l'apparence des paragraphes lorsqu'on
pointe dessus :

Code : CSS

p:hover /* Quand on pointe sur un paragraphe */

{
}

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 85

Au clic et lors de la sélection

Le pseudo-format : active permet d'appliquer un style particulier au

moment du clic. En pratique, il n'est utilisé que sur les liens.
Le lien gardera cette apparence très peu de temps : en fait, le
changement apparaît lorsque le bouton de la souris est enfoncé.
On peut par exemple changer la couleur de fond du lien lorsqu'on clique
dessus :

{
background-color: #FFCC66;
}

Le pseudo-format :focus applique un style lorsque l'élément est

sélectionné.
Une fois que vous avez cliqué, le lien reste "sélectionné" (il y a une petite
bordure en pointillés autour). C'est ça la sélection.
Ce pseudo-format pourra être appliqué à d'autres balises HTML, comme
les éléments de formulaires.

Code : CSS
a:focus /* Quand le visiteur sélectionne le lien */
{
background-color: #FFCC66;
}

Lorsque le lien a déjà été visité

Il est possible d'appliquer un style à un lien vers une page qui a déjà été
vue. Par défaut, le navigateur colore le lien en un violet assez laid (de mon
point de vue du moins !).

Vous pouvez changer cette apparence avec : visited (qui signifie "visité").
En pratique, on ne peut pas changer beaucoup de choses à part la couleur
sur les liens visités.

Code : CSS
a:visited /* Quand le visiteur a déjà vu la page concernée */
{

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 86

color: #AAA; /* Appliquer une couleur grise */

}

Bibliographie et adresses utiles

A. Bibliographie

1. Apprenez à créer votre site web avec HTML5 et CSS3 de Mathieu

Nebra sur site du Zéro
2. Créer du trafic sur son site web de Olivier Andrieu téléchargeable sur
le site : [Link]
3. CSS - La référence de Éric Meyer aux Éditions O’Reilly
4. JavaScript - Les références du programmeur de Jean Engels aux
Éditions OEM
5. Référencement sur le net de Sandrine Saporta aux Éditions
d’Organisation.

b. Adresses utiles
1. Spécifications XHTML du World Wide Web Consortium (W3C) :
[Link]
2. Spécifications CSS 2.1 du World Wide Web Consortium (W3C) :
[Link]

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web
 87

Ir Nico KABAMBA Langage HTML et Styles CSS pour les Sites Web