0% ont trouvé ce document utile (0 vote)

42 vues98 pages

Cours Web 1

Transféré par

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

42 vues98 pages

Cours Web 1

Transféré par

Saidi Nada

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Support de Cours Intégré

PROGRAMMATION WEB 1
TABLE DES MATIERES

CHAPITRE I : INTRODUCTION AU HTML ................................................................................ 5

I. Le HTML et le CSS .......................................................................................................................................... 7

II. Les différentes versions de HTML et CSS ...................................................................................................... 7

III. Les balises et leurs attributs ........................................................................................................................ 8

IV. Structure d'une page HTML5 ....................................................................................................................... 8

1. Le doctype....................................................................................................................................................... 9
2. La balise <html> .............................................................................................................................................. 9
3. L'en-tête <head> et le corps <body> .............................................................................................................. 9
4. L'encodage (charset) ..................................................................................................................................... 10
5. Le titre principal de la page .......................................................................................................................... 10
6. Les commentaires ......................................................................................................................................... 10
7. Les balises <meta> ........................................................................................................................................ 11

Exercices d’application ................................................................................................................................... 12

Question 1 ........................................................................................................................................................ 12
Question 2 ........................................................................................................................................................ 12
Question 3 ........................................................................................................................................................ 12
Question 4 ........................................................................................................................................................ 12

CHAPITRE II : LA MISE EN FORME DU TEXTE ................................................................... 13

I. HTML et mise en forme des textes .............................................................................................................. 15

1. La balise <em> .............................................................................................................................................. 15
2. La balise <strong> ......................................................................................................................................... 15
3. Les extraits, citations, références ................................................................................................................. 16
3. Les acronymes, abréviations et définitions .................................................................................................. 17
5. Les exposants et indices ............................................................................................................................... 18
6. Structurer un texte avec les titres ................................................................................................................ 19
7. Insérer un paragraphe .................................................................................................................................. 20
8. Mettre plusieurs paragraphes ...................................................................................................................... 21
9. Saut de ligne dans un paragraphe ................................................................................................................ 22
10. Séparer les paragraphes par des lignes ...................................................................................................... 22

II. Les Listes ordonnées, numérotées et de définitions ................................................................................... 23

1. Les listes non ordonnées .............................................................................................................................. 24
2. Listes ordonnées ........................................................................................................................................... 24
3. Les listes de définition .................................................................................................................................. 25

Exercices d’application ................................................................................................................................... 26

Exercice 1 : ........................................................................................................................................................ 26
Exercice 2 .......................................................................................................................................................... 27

Page 2
CHAPITRE III : LES LIENS, LES IMAGES ET LES TABLEAUX ......................................... 28

I. Les liens en HTML ........................................................................................................................................ 30

1. Les liens absolus............................................................................................................................................ 31
2. Les liens relatifs............................................................................................................................................. 31
3. Lien interne sur une même page .................................................................................................................. 31
4. Lien vers une ancre qui se trouve dans une autre page ............................................................................... 32
5. Ouvrir un lien dans une fenêtre différente ................................................................................................... 32
6. Info bulle sur les liens ................................................................................................................................... 33
7. Envoyer un mail ............................................................................................................................................ 33
8. Lien pour ouvrir un fichier PDF ..................................................................................................................... 33
9. Lien pour télécharger un fichier au format zip ............................................................................................. 34

II. Afficher une image en HTML ...................................................................................................................... 34

1. Formats de l'image ....................................................................................................................................... 34
2. Rendre une image cliquable ......................................................................................................................... 35
3. Mettre une bulle sur l'image ........................................................................................................................ 35

III. Création d'un tableau en HTML ................................................................................................................. 35

1. Fusionner les colonnes d'un tableau ............................................................................................................ 36
2. Fusionner les lignes d’un tableau ................................................................................................................. 37
3. Un tableau compartimenté .......................................................................................................................... 38
4. Légende d'un tableau ................................................................................................................................... 38
4. Les attributs de l’élément <table> ................................................................................................................ 39

Exercices d’application ................................................................................................................................... 41

Exercice 1 .......................................................................................................................................................... 41
Exercice 2 .......................................................................................................................................................... 42
Exercice 3 .......................................................................................................................................................... 42
Exercice 4 .......................................................................................................................................................... 43

CHAPITRE IV : LES FORMULAIRES ......................................................................................... 44

I. Les formulaires en HTML ............................................................................................................................. 46

1. Les zones de saisie ........................................................................................................................................ 46
2. Les zones de texte multi ligne ....................................................................................................................... 49
3. Afficher une liste de choix ............................................................................................................................ 49
4. Les boutons ................................................................................................................................................... 51
5. Les zones de saisie enrichies ......................................................................................................................... 52

II. Intégration du contenu multimédia............................................................................................................ 55

1. Insertion de la vidéo ..................................................................................................................................... 55
2. Insertion d’audio .......................................................................................................................................... 56

Exercices d’application ................................................................................................................................... 58

Exercice : ........................................................................................................................................................... 58

CHAPITRE V : LES FEUILLES DE STYLES (CSS) .................................................................. 59

I. Inclure des styles CSS dans une page HTML ................................................................................................. 61

Page 3
1. Un style CSS spécifique en ligne ................................................................................................................... 61
2. Un style CSS interne dans la page HTML ...................................................................................................... 62
3. Un style CSS externe ..................................................................................................................................... 62
4. Attacher une feuille de style à un document HTML ..................................................................................... 62
5. La syntaxe de CSS ......................................................................................................................................... 63

II. Mettre en forme les polices de caractères .................................................................................................. 69

1. Choix de la police .......................................................................................................................................... 69
2. Style de la police ........................................................................................................................................... 70
3. Mettre en gras en CSS................................................................................................................................... 71
4. Définir la taille de la police en CSS ................................................................................................................ 71
5. Mettre des textes en majuscules et minuscules ........................................................................................... 73
7. Centrer, aligner et justifier des textes en CSS ............................................................................................... 75

III. Mise en forme des listes via CSS ................................................................................................................ 78

1. Les listes à puces ........................................................................................................................................... 78
2. Les listes numérotées ................................................................................................................................... 79
3. Listes avec images ......................................................................................................................................... 80
4. Position de la liste ......................................................................................................................................... 80

V. Gérer le fond (background) en CSS ............................................................................................................. 81

1. La couleur de fond ........................................................................................................................................ 81
2. Les images de fond ....................................................................................................................................... 82
3. Image de fond : fixe ou mobile ..................................................................................................................... 82

VI. Les styles de bordure en CSS ..................................................................................................................... 84

1. Couleur de bordure....................................................................................................................................... 85
2. Epaisseur de la bordure ................................................................................................................................ 85

VIII. Les marges .............................................................................................................................................. 86

1. Les marges externes avec margin ................................................................................................................. 87
2. Les marges internes avec padding ................................................................................................................ 89
3. Gestion des dimensions des boîtes en CSS ................................................................................................... 89

IX. Le positionnement en CSS ......................................................................................................................... 91

1. Changer le type d’affichage des éléments ................................................................................................... 92
2. Positionnement absolu, fixe et relatif........................................................................................................... 94

Exercices d’application ................................................................................................................................... 97

Exercice 1 : Les classes CSS ............................................................................................................................... 97
Exercice 2 : Les tableaux et les styles CSS ......................................................................................................... 97
Exercice 3 : La mise en page en CSS .................................................................................................................. 98

Bibliographie ......................................................................................................... Error! Bookmark not defined.

Correction des exercices d’application .................................................................. Error! Bookmark not defined.

Page 4
CHAPITRE I

INTRODUCTION AU HTML

Page 5
Chapitre I : Introduction au HTML

Introduction

Ce chapitre est une introduction au web et une Initiation au langage HTML.

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

• Maîtriser la structure d’une page web

Pré requis

• Utilisation d’Internet

Durée

• 1 semaine

Eléments de contenu

• Introduction

• HTML et CSS

• Les balises et les attributs

• Structure et principes de base

• Exercices d’application

Page 6
I. Le HTML et le CSS
HTML ( HyperText Markup Language) est un langage de balisage Web utilisé pour créer des
pages Web qui peuvent être affichés dans un navigateur. HTML est utilisé le plus souvent
avec CSS (Cascading StyleSheet) pour présenter une page Web, ils fournies les outils avec
lesquels le contenu d'un document peut être structuré ou annotée avec différents types de
métadonnées et des indications de rendu et d' affichage. Ces indications peuvent varier de
petites décorations de texte, comme la couleur ou le soulignement d'un mot ou d' insérer
une image, à l'ajout d'éléments sophistiqués, des tableaux, des cartes d'image et des formes.

II. Les différentes versions de HTML et CSS

Les langages HTML et CSS ont beaucoup évolué. Voici un bref historique de ces langages.

• HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.

• HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec

l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les règles et le fonctionnement de cette version
sont donnés par le W3C (World Wide Web Consortium).

• HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de

nombreuses possibilités au langage comme les tableaux, les applets, les
scripts, le positionnement du texte autour des images, etc.

• HTML 4 : il s'agit de la version la plus répandue du HTML. Elle apparaît pour la

première fois en 1998 et propose l'utilisation de frames, des tableaux plus
complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version
permet pour la première fois d'exploiter des feuilles de style CSS.

• HTML 5 : c'est LA dernière version, 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.

• CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de
ce langage qui permet de présenter une page web, comme les couleurs, les
marges, les polices de caractères, etc.

Page 7
• CSS 2 : apparue en 1999, cette nouvelle version de CSS rajoute de nombreuses
options. On peut désormais utiliser des techniques de positionnement très
précises, qui nous permettent d'afficher des éléments où on le souhaite sur la
page.

• CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement

attendues comme les bordures arrondies, les dégradés, les ombres, etc.

III. Les balises et leurs attributs

Les pages HTML sont constituées des balises qui permettent au navigateur de comprendre
ce qu'il doit afficher. Elles sont entourées des symboles < et >, comme ceci : <balise>

On distingue deux types de balises :

• Les balises en paires : Elles s'ouvrent et se ferment plus loin. Voici à quoi elles
ressemblent : <title>Ceci est un titre</title>. On distingue une balise ouvrante
(<title>) et une balise fermante (</title>).

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

Les attributs viennent compléter les balises pour donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur,
comme ceci :
<balise attribut="valeur"> … </balise>

La balise <img/> seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut
qui indique le nom de l'image à afficher : <img src="photo.jpg" />

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.

IV. Structure d'une page HTML5

Le code ci-dessous correspond à la base d'une page web en HTML5 :
<!DOCTYPE html>
<html>
<head>

Page 8
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
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.

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. Toutes ces

balises ont un rôle précis.

1. Le doctype
<!DOCTYPE html>

La toute première ligne s'appelle le doctype. Elle indique qu'il s'agit bien d'une page
web HTML. Ce n'est pas vraiment une balise comme les autres : c'est l'exception qui
confirme la règle.

2. La balise <html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page et la balise
fermante </html>se trouve tout à la fin du code.

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

Une page web est constituée de deux parties :

• L'en-tête <head> : cette section donne quelques informations générales sur la

page comme son titre, l'encodage, etc. Les informations que contient l'en-tête

Page 9
sont des informations générales à destination de navigateur. Elles sont cependant
très importantes pour le référencement de la page.

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

4. L'encodage (charset)
<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans le fichier .html qui détermine comment les
caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères
arabes, etc.).

Cette méthode d'encodage UTF-8 permet d'afficher sans aucun problème pratiquement
tous les symboles de toutes les langues.

5. Le titre principal de la page

<title> Cours ProgWeb1 </title>

Le titre s'affiche en haut de la page (souvent dans l'onglet du navigateur) ainsi que
dans les résultats des moteurs de recherche (mais pas dans le document).

6. Les commentaires
Un commentaire en HTML est un texte qui sert laisser des indications sur le
fonctionnement de la page. Il n'est pas affiché, il n'est pas lu par le navigateur.

Page 10
7. Les balises <meta>
Afin d’améliorer le référencement du site web, on place les balises <meta> dont les plus
utilisées sont les suivantes :
• Content-Type : Indique la nature du document et le jeux de caractères utilisés.
• TITLE : Indique le nom de votre page web.
• DESCRIPTION : Contient la description de la page. Elle est affiché dans les recherches
Google et dissimulé dans le site.
• KEYWORDS : contient tous les mots-clés de la page séparés d’une virgule.
• ROBOTS : sert à « communiquer » avec les robots des moteurs de recherches qui
parcourent le web et enregistrent les pages web des sites. Ils vont de site en site en
suivant les liens.
Exemple :

Page 11
Exercices d’application
Question 1
Pourquoi distinguer la structure et l'apparence?

Question 2
Choisir une réponse

Un code HTML doit au moins contenir :

• Balises

• Attributs

• Commentaires

Question 3
Quelles sont les différentes parties d’un code HTML ?

Question 4
Réécrire une balise Meta correspondante au chapitre II : la mise en forme de texte

Page 12
CHAPITRE II

LA MISE EN FORME DU TEXTE

Page 13
Chapitre II : La mise en forme du texte

Introduction

Ce chapitre aborde la notion de mise en forme du texte dans une page web. Il présente les
types de formatage et les balises qui leurs sont associées.

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

• Distinguer les outils de production d’une page web

• Comprendre la structure des pages web

Pré requis

• Structure d’une page HTML

• Les balises

Durée

• 2 semaines

Eléments de contenu

• Introduction
• La mise en forme du texte
• Les titres et les paragraphes
• Les listes en HTML
• Exercices d’application

Page 14
I. HTML et mise en forme des textes
Avec HTML, on utilisait l'attribut de la balise <font> pour marquer un texte important. Mais
cela était limité au niveau de la forme.
Maintenant, avec HTML, nous insistons surtout sur la valeur du contenu. Ainsi, on a d'autres
balises pour mettre des textes en exergue. Pour cela Il y a 2 balises différentes que l'on
utilise selon le degré d'importance du texte.

1. La balise <em>
La balise em (emphase) permet de mettre en emphase du texte. Il s'agit de marquer qu'un
passage dans le texte est important.
Code HTML :

Il serait <em> avantageux </em> de savoir coder en HTML avant de faire du CSS.

Aperçu :

2. La balise <strong>
Cette balise est pareille que la balise em sauf qu'elle met un accent assez fort. Elle permet
d'interpeler vivement le lecteur.
Exemple d'utilisation :

Page 15
Code HTML :

Il est <strong> indispensable </strong> de savoir coder en HTML avant de faire du CSS.

3. Les extraits, citations, références

Dans des pages HTML, il vous arrive parfois d'insérer des œuvres de quelqu'un : un extrait
d'un livre, d'un article etc. Il est nécessaire dans le contexte légal d'énoncer les sources des
documents, ou de mentionner l'auteur. En HTML, des balises spécifiques sont destinées à
traiter ce genre de contenu.

a. La balise <cite> pour les références:

Lorsque l'on cite une œuvre, un livre, une référence, etc , on utilise la balise <cite>.
Attention, il ne s'agit pas d'une citation. Pour cela, on utilise les balises <q> et <blockquote>.
Exemple d'utilisation :

Code HTML :

Extrait du livre : <cite> Les Fleurs du Mal </cite> de <cite> Charles Baudelaire </cite>

b. La balise <q> pour citations courtes :

On utilise cette balise pour mettre une citation courte. Le texte de citation est donc mis
entre guillemets automatiquement quand on l'insère entre ces balises. Dans le cas des
citations de plusieurs lignes, ou de plusieurs paragraphes, il est préférable d'utiliser la balise
blockquote.
A titre d'information, c'est une balise de type inline et les attributs pouvant être employés
sont : lang, dir, title, cite.

Page 16
Exemple d'utilisation :

Code HTML :
Comme le disait <cite> Rabelais</cite> : <q> Science sans conscience n'est que ruine de
l'âme </q>

c. La balise <blockquote> pour citations de plusieurs lignes :

La balise <blockquote> a le même sens que la balise <q> sauf que celle-ci est utilisée pour les
extraits de plusieurs lignes.

3. Les acronymes, abréviations et définitions

Dans les pages HTML où on emploient souvent des abréviations, des acronymes. Des
balises HTML spécifiques permettent d'indiquer aux utilisateurs leur présence et leur
signification.

a. La balise : <acronym>
La balise acronym sert à mettre un acronyme. Son utilisation n'a vraiment de sens que si l'on
indique sa signification à l'aide de son attribut title.
Exemple d'utilisation :

Page 17
Code HTML :

Le <acronym title=" eXtensible HyperText Markup Language " lang="en"> XHTML

</acronym> est la fusion du <acronym title=" HyperText Markup Language " lang="en">
HTML </acronym> et du <acronym title=" eXtensible Markup Language " lang="en"> XML
</acronym>

On remarque que les mots entre acronym sont légèrement soulignés. Dès qu’on passe la
souris sur les acronymes, leur signification apparaît automatiquement.

b. La balise : <abbr>
Cette balise est utilisée pour indiquer que le texte en question est une abréviation. De même
que pour les acronymes, on indique la signification de l'abréviation en question dans
l'attribut title. Lorsqu’on pointe la souris sur les mots, leur signification apparaît
automatiquement.
Exemple d'utilisation :
Les clts et les frns se sont mis d'accord.
Code HTML :

Les <abbr title="clients">clts</abbr> et les <abbr title="fourniseurs">frns</abbr> se sont mis

d'accord.

5. Les exposants et indices

Dans les sites des Matheux, on utilise souvent des expressions mathématiques. Pour autant,
rien ne nous empêche de voir comment faire des indices et des exposants en HTML.

a. La balise : <sub>
La balise sub est utilisée pour mettre un texte en indice.
Exemple d'utilisation :

Page 18
Code HTML :

Une suite géométrique de raison q est une suite de cette forme : U <sub> n </sub> = q *
U<sub>0</sub>

b. La balise : <sup>
Cette balise permet de mettre un texte en exposant.
Exemple d'utilisation :

Code HTML :

La dérivée de x<sup>3 </sup> vaut 3x<sup>2</sup>.

6. Structurer un texte avec les titres

Lorsque les pages HTML contiennent beaucoup de textes, on cherche à bien les structurer
afin de bien aiguiller le visiteur. Pour avoir une idée sur le contenu général de la page, on
peut déjà lui donner un titre en utilisant la balise <TITLE>
Code HTML :

<title>Grand titre de la page</title>

Le contenu de cette balise s'affiche tout en haut de la page, sur le navigateur. Mais les titres
en HTML peuvent aussi servir pour avoir une fonctionnalité similaire aux tables de matière
dans les logiciels de traitement de texte.
Si on veut structurer les titres en plusieurs niveaux. Pour ce faire, on peut spécifier six
niveaux de titres, en numérotant la balise <h>. On a <h1><h2> jusqu'à <h6>. h1 permet donc
de spécifier le grand titre, h2 le sous titre en bas de h1, et ainsi de suite.

Page 19
Exemple sur les titres :

Code HTML :

<h1>1.XHTML</h1>
<h2>1.1-Les titres</h2>
<h3>1.1.2-Intérêt des titres</h3>
<h3>1.1.3-Entête à plusieurs niveaux</h3>
<h3>1.1.4-Les erreurs à éviter</h3>
<h2>1.2-Les paragraphes</h2>
<h2>1.3-Mettre en valeur des textes</h2>
<h2>....</h2>
<h1>2.CSS</h1>

7. Insérer un paragraphe
On a appris à titrer les textes. Ceci étant acquis on veut cette fois-ci diviser les contenus en
paragraphes. Le HTML et sa richesse sémantique nous permettent encore de spécifier tout
cela grâce à de la balise <p>

Page 20
Code HTML :

<body>
<p>
L'ère de la nouvelle technologie implique le fait que le web ne se limite plus à l'interconnexion
entre ordinateurs. La toile d'araignée mondiale s'apprête à accueillir de nouvelles
applications et des nouveaux appareils (téléphone mobile, console de jeux...)
</p>
</body>

Aperçu :

8. Mettre plusieurs paragraphes

Pour faire plusieurs paragraphes, il suffit d'utiliser des balises p les unes à la suite des autres.
Code HTML :

Page 21
9. Saut de ligne dans un paragraphe
Si on veut juste sauter une ligne dans un paragraphe, sans pour autant changer de
paragraphe, on utilise la balise <br />
Code HTML :

<body>
<p>
Le HTML qui s'avère figé ne pourra pas répondre aux exigences des applications web futures.
Il faut alors un langage plus souple et mieux adapté. XHTML, qui suit la syntaxe XML est
justement conçu pour cela.
<br/> Le but est de reformuler HTML 4 pour le rendre compatible avec XML. En quelque sorte,
XHTML eXtensible HyperText Markup Language est un langage hybride entre le XML et le
HTML.
</p>
</body>

Aperçu :

10. Séparer les paragraphes par des lignes

La balise <hr /> insère un trait horizontal. En l'utilisant pour séparer nos paragraphes, on a :
Code HTML :

<body>
<p>
L'ère de la nouvelle technologie implique le fait que le web ne se limite plus à l'interconnexion

Page 22
entre ordinateurs. La toile d'araignée mondiale s'apprête à accueillir de nouvelles
applications et des nouveaux appareils (téléphone mobile, console de jeux...) Le HTML qui
s'avère figé ne pourra pas répondre aux exigences des applications web futures. </p>
<hr />
<p>
Il faut alors un language plus souple et mieux adapté. XHTML, qui suit la syntaxe XML est
justement conçu pour cela. Le but est de reformuler HTML 4 pour le rendre compatible avec
XML. En quelque sorte, XHTML eXtensible HyperText Markup Language est un langage
hybride entre le XML et le HTML.
</p>
</body>

Aperçu

II. Les Listes ordonnées, numérotées et de définitions

Comme le titre de cette section l'indique, nous allons maintenant apprendre à faire des listes
en HTML. Concrètement, ces derniers nous permettront de classer des données ou
présenter des instructions sous forme de liste dans nos documents. Nous verrons alors 3
façons de faire des listes en XHTML :

▪ Les listes non ordonnées

▪ Les listes numérotées
▪ Les listes de définition

Page 23
1. Les listes non ordonnées
Il s'agit juste d'énumérer des données sous forme de listes à puces. Afin de définir une liste
non ordonnée, on utilise la balise <ul></ul> . Il nous faut encore distinguer chaque élément
de la liste à l'aide de la balise <li>< /li>. C'est-à-dire qu'il faut définir où est le début et la fin
de chacun des items contenus dans la liste. D'où le nom de la balise li qui veut dire List Item.
Code HTML :

<ul>
<li>Jus d'orange</li>
<li>Coca</li>
<li>Café</li>
</ul>

Aperçu :

2. Listes ordonnées
On peut faire des listes numérotées de la même manière que les listes non ordonnées. Sauf
qu'ici, on cherche à classer les données de la liste suivant un ordre bien défini à l'aide des
numéros. Cette fois-ci, on utilise la balise <ol> : Ordored List à la place de la balise <ul>. Pour
délimiter les items, on utilise toujours la balise< li>.
Code HTML :

<ol>
<li>Classe TI1.1</li>
<li> Classe TI1.2</li>
<li> Classe TI1.3</li>
</ol>

Page 24
Aperçu :

3. Les listes de définition

Les listes de définitions servent à indiquer un terme à définir et la définition de ce terme. Le
principe est tout simplement de faire correspondre les termes aux définitions. La structure
d'une liste de définitions est donnée par trois balises:

La balise conteneur <dl> qui délimite la bloc de liste

La balise <dt> ou Definition Term contiendra un terme de définition

La balise <dd> ou Definition Data qui servira à la description de définition

Code HTML :

<dl>
<dt>Ingrédients :</dt>
<dd>
<ul>
<li>8 jaunes d'oeuf </li>
<li>200g de sucre blanc</li>
<li>1l de lait</li>
<li>Parfum et colorant</li>
</ul>
</dd>

Page 25
Aperçu :

On peut mettre plusieurs dd pour un seul dt, et inversement. En effet, toutes les
combinaisons sont réalisables.

Exercices d’application
Exercice 1 :
Ecrire un code html qui permet de réaliser la page Web simple illustrée par la figure ci-
dessous :

Page 26
Exercice 2 :
Créer un document HTML contenant des listes numérotées et des listes à puce comme
illustré ci dessous.

Page 27
CHAPITRE III

LES LIENS, LES IMAGES ET LES TABLEAUX

Page 28
Chapitre III: Les liens, les Images et les Tableaux

Introduction

Ce chapitre s’articule autour de trois parties : les liens, les images et les tableaux. Il présente
pour chaque thème la syntaxe et les attributs correspondants

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

• Insérer et manipuler un lien (interne. Externe, chemin d’accès)

• Insérer et manipuler une image (taille, bordure, position, …)

• Insérer et manipuler un tableau (ligne, colonne,..)

Pré requis

• Structure d’un bloc html

• Utilisation des balises

Durée

• 3 semaines

Eléments de contenu

• Introduction

• Les liens

• Les images

• Les tableaux

• Exercices d’application

Page 29
I. Les liens en HTML
Le lien constitue une liaison entre une page et une autre. Un visiteur de la page peut se
rendre sur une autre page ou un autre emplacement de la même page à l'aide d'un lien.
Il s'agit de la balise <a> </a>.
Dans son attribut href, on spécifie la cible, c'est-à-dire l'adresse de la page ou de la ressource
vers laquelle sera dirigé le visiteur après son clic sur le lien.
On identifie la cible par une URL "Uniform Resource Locator" qui est le chemin du document
vers lequel le lien sera renvoyé.

Aperçu :

Code HTML :

<a href="https://ouniz.wordpress.com" title="Site de Zouhair OUNI"> ouniz.wordpress.com

</a> Ce site est dédié au partage des supports de cours et d’informations

Généralement, on distingue deux façons de faire des liens :

• Les liens internes au site : Normalement, un site est composé de plusieurs

pages HTML. Pour lier une page d'un site à un autre page du même site, on fait des
liens relatifs.
• Les liens externes au site : Il vous arrive aussi parfois de vouloir faire des liens vers les
autres sites. Dans ce cas, on parle de liens absolus.

Page 30
1. Les liens absolus
On utilise ce type de lien lorsque le lien pointe vers un autre site. L'adresse du lien
commence souvent par "http://" ou "ftp://", suivi de l'adresse du site cible. Autrement dit,
dans un lien absolu, on précise entièrement le chemin.
<a href="http://www.domaine.com/html.php">page html</a>

2. Les liens relatifs

Dans un lien relatif, le chemin part du répertoire courant. Il s'agit d'un lien relatif au
répertoire dans lequel on se trouve. Il est souvent utile d'employer ce lien quand on fait
référence à une page interne à notre site.

Cas 1 : les deux fichiers se trouvent dans le même répertoire :

www\dossier1\fichier1.html www\dossier1\fichier2.html

Dans ce cas, si fichier 2 est la cible, on met comme adresse de lien dans fichier1
fichier2.html

Cas 2 : Les deux fichiers se trouvent dans des répertoires différents :

www\dossier1\fichier1.html www\dossier1\dossier2\ fichier2.html
Pour aller de fichier1 à fichier2 on met :

dossier2/fichier2.html

Cas 3 : La cible se trouve dans le répertoire parent :

www\fichier2.html www\dossier1\fichier1.html

Pour aller de fichier 1 à fichier 2 on met :

../fichier2.html

3. Lien interne sur une même page

Une ancre est un point pour repérer une partie particulière d’une page HTML. Par exemple,
si nous sommes au milieu de la page et que nous souhaitons revenir en haut de la page, c'est

Page 31
l'ancre qui nous servira de référence. L'ajout de l'attribut id à une balise nous permet de
créer une ancre qui servira de repère.
Par exemple :

<h2 id="section1">section1 : Lien vers une ancre</h2>

Comme d'habitude, on utilise la balise <a> avec son attribut href, mais en mettant cette fois-
ci le signe dièse (#) suivi du nom de l'ancre comme valeur de l'attribut. Ce signe dièse sert à
marquer qu'il s'agit d'une ancre.

<a href="#mon_ancre"> Aller vers l'ancre </a>

4. Lien vers une ancre qui se trouve dans une autre page
Si on cherche à faire un lien qui permet d'ouvrir à la fois une nouvelle page et qui nous
amène directement à une ancre sur cette page. Pour cela, il faut mettre après le nom de la
page, le dièse et le nom de l'ancre. Par exemple :

<p>
Rendez-vous quelque part sur une autre page :<br/>
<a href="page.html# section1">Sport</a><br/>
<a href="page.html# section2">Voyages</a><br/>
<a href="page.html# section3">Cinéma</a><br/>
</p>

Ce qui nous amènera sur la page page.html, au niveau de la section choisie.

5. Ouvrir un lien dans une fenêtre différente

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on
rajoutera target="_blank" à la balise <a> :

<p>

Bonjour. Souhaitez-vous visiter le site <a href="http://www.isetso.rnu.tn" title="Réservé

aux étudiants" target="_blank">ISET DE SOUSSE</a> ?

</p>

Page 32
Le site s'affichera dans une nouvelle fenêtre.

6. Info bulle sur les liens

Afin de donner une indication au visiteur, on peut rajouter une bulle d'info sur le lien. Dès
que le visiteur fait passer sa souris sur le lien, la bulle d'info apparaît.
L'exemple suivant va nous afficher "Voir le site d’ISET SOUSSE" dès qu'on pointe sur la zone
de liens.

<a href="http:// www.isetso.rnu.tn " title="Voir le site d’ISET SOUSSE">ISETSO </a>

Comme nous venons de voir, on a rajouté l'attribut title et on lui a donné comme valeur le
texte de l'info-bulle.

7. Envoyer un mail
Un clic sur un lien peut aussi nous ouvrir notre client mail par défaut (Outook par exemple).
L'ouverture immédiate d'Outlook pourra faciliter la tâche du visiteur quand il veut nous
envoyer un mail.

<a href="mailto:[email protected]">Contactez-moi</a>

8. Lien pour ouvrir un fichier PDF

Il est aussi possible de faire un lien vers des fichiers autres que le HTML notamment les
fichiers PDF :

<a href="catalog.pdf">Catalogue au format pdf </a>

Page 33
9. Lien pour télécharger un fichier au format zip
Il s’agit toujours d’un lien avec l’attribut href mais cette fois ci ajouter le nom du fichier à
télécharger et placer simplement ce fichier dans le même dossier que la page web.
Exemple :

<a href="fichier.zip"> Télécharger le fichier </a>

II. Afficher une image en HTML

Il est très facile d'insérer une image en HTML. La balise utilisée pour cela est la balise <img/>.
La particularité de cette balise c'est qu'elle ne nécessite pas une balise fermante. Voici
comment faire pour insérer une image dont le nom est image.jpg :

<img src="images/image.jpg" alt="Mon image" />

La balise img peut avoir plusieurs attributs mais deux d'entre eux sont obligatoires :

▪ src : Cet attribut indique l'emplacement de l'image que l'on veut insérer. On peut
indiquer un chemin relatif ou absolu selon le lieu où se trouve l'image. Exemple :
<img src="images/fleurs.png"/>
▪ alt : Il arrive que l'image ne puisse pas s'afficher. Dans l’attribut alt on met le texte à
afficher si on est confronté à cette situation.

1. Formats de l'image
La qualité et le poids de l'image peuvent varier selon le format sous lequel on enregistre
l'image. On reconnaît généralement le format d'une image par son extension. Parmi les
formats d'images standard que l'on utilise sur les web, on distingue notamment :

▪ JPEG (Joint Photographic Expert Group) : Les images au format JPEG sont très répandues
sur le Web. Ce format est conçu pour réduire le poids des photos qui peuvent comporter
plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec
l'extension .jpg ou .jpeg.
▪ GIF (Graphics Interchange Format) : C'est un format assez vieux qui a été très utilisé. Il se
base sur un principe d'indexation. Il permet de stocker 256 couleurs au max. Ce nombre

Page 34
de couleurs maximal est trop faible. Son avantage est qu'il permet d'avoir des images
animées.
▪ PNG (Portable Network Graphics): Est un format très récent. L'avantage du PNG est qu'il
gère facilement la transparence. Le PNG existe en deux versions, en fonction du nombre
de couleurs que doit comporter l'image : PNG 8 bits : 256 couleurs et PNG 24 bits : 16
millions de couleurs.

2. Rendre une image cliquable

A la place du texte, l'image peut très bien servir de lien. Il suffit de mettre une image entre
les balises <a></a>. L'insertion de l'image entre ces balises implique l'utilisation de la balise
img.
Exemple:

<a href="le_lien.html"><img src="images/fond.jpg" alt="mon fond" /></a>

3. Mettre une bulle sur l'image

Pour afficher une bulle d'aide sur une image, on utilise le même attribut que pour les liens.
L'attribut title est facultatif. Mais, il est tout de même plus convenable de le mettre.
Exemple :

<p>

Voici une photo prise à la montagne <br />

<img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau!" />

</p>

III. Création d'un tableau en HTML

La première balise à connaître pour créer un tableau en HTML c'est la balise <table>
</table>. Elle délimite la partie code du tableau lui-même.

▪ La balise <tr> : Après avoir spécifié la balise table, on définit la structure du tableau.
C'est-à-dire qu'il faut savoir comment seront structurées les lignes et les cellules du
tableau. Les balises < tr></tr> permettent de définir une ligne.
Page 35
▪ La balise <td> : En termes de balise, les cellules sont emboîtées dans les lignes. Un bloc
de balise < tr></tr> contient un ou plusieurs blocs de balise <td></td>.Ces derniers
correspondent à des cellules.
▪ La balise <th> : Permet d'organiser le contenu du tableau. Son usage devient très
courant surtout qu'elle permet d'appliquer facilement les styles CSS aux tableaux. On
l'utilise juste après la balise table.

Aperçu :

Code HTML :

<table>
<tr>
<th>titre cellule1</th>
<th> titre cellule2</th>
</tr>
<tr>
<td>ligne1 cellule1</td>
<td> ligne1 cellule2</td>
</tr>
<tr>
<td>ligne2 cellule1</td>
<td> ligne2 cellule2</td>
</tr>
</table>

1. Fusionner les colonnes d'un tableau

Pour fusionner plusieurs colonnes, on utilise l'attribut colspan. On lui donne une valeur
numérique selon le nombre de colonnes à fusionner. Dans l'exemple précédent, nous
essayons par exemple de fusionner les deux colonnes de la deuxième ligne.

Page 36
Aperçu :

Code HTML :

<table border="1">
<tr>
<th>titre cellule1</th>
<th> titre cellule2</th>
</tr>
<tr>
<td colspan="2">ligne 1 cellule 1 et cellule2 fusionnées</td>
</tr>
<tr>
<td>ligne2 cellule1</td>
<td> ligne2 cellule2</td>
</tr>
</table>

2. Fusionner les lignes d’un tableau

En appliquant rowspan à une balise td, on a les mêmes résultats sur les lignes. Comme
colspan, on lui assigne une valeur numérique.
Aperçu :

Page 37
Code HTML :

<table border="1">
<tr>
<th>titre cellule1</th>
<th> titre cellule2</th>
</tr>
<tr>
<td rowspan="2">cellule1 ligne1 et 2 fusionnées </td>
<td> ligne1 cellule2</td>
</tr>
<tr>
<td> ligne2 cellule2</td>
</tr>
</table>

3. Un tableau compartimenté
Compartimenter un tableau consiste à le diviser en trois parties bien distinctes. Lorsque le
tableau est très grand, il est intéressant de le découper en compartiments. Trois zones
différentes du tableau sont définies chacune par la balise associée :

▪ L'en-tête : la partie haute du tableau se définit avec les balises <thead></thead>

▪ Le corps : la partie centrale du tableau se définit avec les balises <tbody></tbody>
▪ Le pied du tableau : la partie basse du tableau se définit avec les balises <tfoot></tfoot>

4. Légende d'un tableau

L'attribut caption permet de mettre une légende ou un titre sur le tableau. Il doit décrire en
quelques mots ce que contient le tableau.
Avec toutes ces nouvelles notions sur le tableau, en voici encore un autre exemple avec un
tableau plus élaboré.

Page 38
Aperçu :

4. Les attributs de l’élément <table>

L’élément <table> possède l’ensemble des attributs communs, comme title, qui permet
d’expliciter son contenu général, et class pour lui appliquer des styles, et id pour l’identifier
de manière unique.

Il possède également les attributs lui permettant d’affiner son organisation ou sa

présentation par défaut :

• border ="N" : définit la largeur des bordures externes et internes qui délimitent le
tableau et les cellules. Sa valeur s’exprime en pixels et la valeur 0 est admise pour
cacher ses bordures.

• width="N px | N%" : définit la largeur totale du tableau dans la page. La possibilité de

définir une largeur relative en pourcentage est très pratique pour adapter le tableau
à l’écran du visiteur.

• heigt="N px | N%" : définit la longueur totale du tableau dans la page.

• align="left |right |center" : définit la position du tableau par rapport à la page

• cellpadding="N px | N%" : définit la largeur de l’espacement entre le contenu d’une

cellule et sa bordure.

Page 39
• cellspacing="N px | N%" : définit l’espacement entre les bordures de chaque cellule.
Pour que cet attribut soit pris en compte, il faut que l’attribut border ait été défini
avec une valeur non nulle.

• frame : il permet de diversifier l’affichage des bordures externes du tableau en

n’affichant qu’une partie d’entre elles. Il peut prendre les valeurs suivantes :

– void : supprime toutes les bordures extérieures ;

– above : ne laisse subsister que la bordure supérieure ;

– below : ne laisse que la bordure inférieure ;

– lhs : ne laisse que la bordure gauche ;

– rhs : ne laisse que la bordure droite ;

– hsides : ne laisse que les bordures horizontales haute et basse ;

– vsides : ne laisse que les bordures verticales gauche et droite ;

– box ou border : ne laisse que les quatre bordures externes.

• rules : il définit l’affichage des bordures internes du tableau, situées entre les cellules.
Il prend les valeurs suivantes :

– none : supprime toutes les bordures internes ;

– rows : ne laisse que les bordures horizontales ;

– cols : ne laisse que les bordures verticales ;

– all : affiche toutes les bordures.

Page 40
Exercices d’application
Exercice 1
créer une page composée de 3 chapitres précéder de 3 liens internes chaque lien envoie
vers un chapitre précis , pour simplifier on va considérer que chaque chapitre et composé
d'un titre et d'un paragraphe.

Page 41
Exercice 2
Reproduisez une page HTML contenant un tableau et qui présente la structure ci-dessous :

Exercice 3
Reconstituer le tableau suivant :

Utiliser les attributs nécessaires pour changer la mise en forme du tableau

(bgcolor,align.width)

Page 42
Exercice 4
Insérer une image avec les dimensions 240*260 et un message d’info bulle « logo HTML5 ».
Si l’image n’apparaît pas, le texte suivant s’affiche : « image du Logo de HTML5»

Page 43
CHAPITRE IV

LES FORMULAIRES

Page 44
Chapitre IV : Les formulaires

Introduction

Ce chapitre définit en premier lieu les formulaires en HTML, Puis il s’intéresse aux balises
qui constituent le corps des ces formulaires.

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

• Créer une page web contenant un formulaire

• Manipuler les zones enrichies au sein des formulaires

Pré requis

• Structure d’un bloc html

• Utilisation des balises

• Les tableaux

Durée

2 semaines

Eléments de contenu

• Introduction

• La balise <form>

• Les zones de saisies possibles

• Exercices d’application

Page 45
I. Les formulaires en HTML
La balise HTML utilisée pour la création d'un formulaire est la balise <form>< /form>. Elle
peut avoir plusieurs attributs, comme un nom par exemple qui est signalé par le mot clé
name. Mais deux attributs très importants dans le formulaire sont l'attribut method et
l’attribut action.
• method : Comme son nom l'indique, l'attribut method détermine la méthode d’envoi
du formulaire. Elle peut prendre deux valeurs possibles :

o get : La méthode get correspond à l'envoi de données par URL. C'est-à-dire que
les données saisies par l'utilisateur dans le formulaire sont renvoyées dans l'URL.
Toutefois, elle est limitée à 255 caractères.

o post : Avec la méthode post, il n'y a pas de limite ce qui fait que l'on peut envoyer
la quantité de données qu'on souhaite et d’une façon implicite.

• action : C’est l'adresse de la page ou du programme qui va traiter les informations.

Cette page se chargera de vous envoyer un mail avec le message si c'est ce que vous
voulez, ou bien d'enregistrer le message avec tous les autres dans une base de
données. Cela ne peut pas se faire en XHTML / CSS, on utilisera en général un autre
langage (ex : PHP).

Exemple :

<form name="f1" method="post" action="traitement.php" >

</form>

1. Les zones de saisie

La balise <input /> est utilisée pour pas mal de choses dans les formulaires. Son attribut
'type' détermine son type, ou plus exactement son rôle dans le formulaire. Elle ne nécessite
pas une balise fermante. Toutefois, il est essentiel de ne pas oublier le slash à la fin.

a. La zone de texte à une ligne :

Une zone de texte à une ligne est un conteneur permettant d'introduire des textes à une
ligne. On peut spécifier sa taille qui correspond à la longueur du rectangle. A part sa taille, il

Page 46
est surtout lorsque nous allons envoyer les données saisies en PHP, c'est le nom qui permet
de récupérer cette valeur. Pour faire une zone de texte à une ligne, on utilise la balise input
et on lui met comme type le texte comme suit : important d'indiquer son nom.
Aperçu :

Code HTML:

<input type="text" name="login" />

b. Les labels (étiquettes) :

Les labels servent à indiquer à l'utilisateur ce qu'il doit saisir dans le champ. Entre autres,
c'est une courte définition de la valeur saisie dans le champ.
Il faut lier le label avec la zone de texte en attribuant un nom à la zone de texte, non pas
avec l'attribut name mais avec l'attribut id. Et il faut lui donner un attribut for qui a la même
valeur que l'id du champ:
Aperçu :
Login :

Code HTML :

<form method="post" action="identification.php" >

<label for="pseudo">Login </label>
<input type="text" name="login" id=”pseudo”/>
</form>

Il existe d’autres attributs sur la balise <input /> comme :

• value : donner une valeur par défaut à la zone de texte.

• size : définir La largeur

• maxlength : définir le nombre maximal de caractères

• readonly : permettre de placer le champ texte en lecture seule, le visiteur ne pourra

donc pas modifier la valeur s'y trouvant

Page 47
c. Zone de mot de passe :
Si la zone de texte se comporte comme une zone "mot de passe", c'est-à-dire une zone où
on ne voit pas à l'écran ce qui est tapé dedans, mettre type="password" dans <input />.

Aperçu :

Votre mot de passe : *****

Code HTML :

<label for="pwd">Votre mot de passe :</label>

<input type="password" name="pass" id="pwd" />

d. Exemple : Formulaire de login

Un exemple de formulaire de login qui nous pouvons en faire avec les deux zones de saisies:

Aperçu :

Code HTML :

<form method="post" action="identification.php" >

<label for="login">Login :</label><input type="text" name="login" size="8"/><br /><br />
<label for="pass">Mot de passe :</label><input type="password" name="pass" size="8"/>
</form>

Page 48
2. Les zones de texte multi ligne
Pour faire une saisie en plusieurs lignes, on utilise la balise <textarea>. Il faut lui donner un
nom avec name, et utiliser un label qui explique de quoi il s'agit.Elle dispose de deux autres
attributs :
▪ cols : qui indique le nombre de caractères pouvant être placés sur une ligne dans
afficher l'ascenseur horizontal.
▪ rows : qui indique le nombre de lignes pouvant être placées dans la textarea sans
afficher l'ascenseur vertical.
Aperçu :

Votre pseudo :

Vos commentaires :
Code HTML :

<form method="post" action="commentaire.php" >

<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo " size="8"/><br /><br />
<label for="comment">Vos commentaires :</label>
<textarea name="comment" rows="3" cols="50"> </textarea>
</form>

Notez bien que contrairement à input, la balise textarea nécessite une balise fermante.

3. Afficher une liste de choix

Il y a trois façons de proposer un choix à un utilisateur :

▪ Par des listes déroulantes

▪ Par des cases à cocher
▪ Par des boutons radios

Page 49
a. Les listes déroulantes :
La balise <select> délimite la liste déroulante. Plusieurs choix sont proposés et c'est la balise
<option> qui introduit ce choix.
Aperçu :
Madame

Code HTML :

<form method="post" action="traitement.php">

<select name="titre">
<option value="Mlle">Mademoiselle</option>
<option value="Mme" selected="selected">Madame</option>
<option value="Mr">Monsieur</option>
</select>
</form>

L'attribut selected indique une sélection par défaut de l'option Madame.

b. afficher des cases à cocher :

A l'inverse, les cases à cocher permettent à l'utilisateur de choisir plusieurs valeurs à la fois.
Grâce aux label, nous pouvons cliquer sur le texte en plus de la case à cocher juste à côté et
donner un nom à chaque case à cocher, pour identifier les cases cochées par le visiteur a
coché et rajouter l'attribut checked="checked" pour cocher un choix par défaut.

Aperçu :
Quels sont vos centres d'intérêts ?

musique politique informatique cuisine

Code HTML :

<p> Quels sont vos centres d'intérêts ? <br />

<input type="checkbox" name="interet" id="musique" />
<label for="musique">musique</label>
<input type="checkbox" name="interet" id="politique" />
<label for="politique">politique</label>

Page 50
<input type="checkbox" name="interet" id="informatique" />
<label for="informatique">informatique</label>
<input type="checkbox" name="interet" id="cuisine" />
<label for="cuisine">cuisine</label>
</p>

c. afficher des boutons radios

Les boutons radios fonctionnent comme les liste déroulantes. Ils permettent de choisir une
et une seule valeur. D'habitude, on l'utilise quand on veut choisir entre 2 valeurs.
Aperçu :
Vous voulez vous abonner ?

oui non
Code HTML :

<p>
Vous voulez vous abonner ?<br />
<input type="radio" name="question" value="oui" id="oui" /> <label for="oui">oui</label>
<input type="radio" name="question" value="non" id="non" /> <label for="non">non</label>
</p>

Il est important de noter que les boutons radios doivent avoir le même nom pour pouvoir
"communiquer" ensemble, c'est à dire que si le visiteur sélectionne "Oui", l'option "Non"
sera désélectionnée.

4. Les boutons
a. Le bouton d'envoi :
Dans un formulaire, il doit toujours y avoir un bouton. Le bouton sert à soumettre le
formulaire une fois que les données sont saisies. Dans ce cas, il confirme l'envoi des données
et c'est un bouton de type submit comme celui-ci par exemple qui sera utilisé :
Aperçu :

Valider

Code HTML :

<input type="submit" value="Valider" />

Page 51
b. Le bouton de remise à zéro :
Un autre bouton qui est de type reset sert à vider les champs, afin de les réinitialiser :
Aperçu :

Vider

Code HTML :

<input type="reset" value="Vider" />

Si l'utilisateur décide d'annuler et/ou de réinitialiser ce qu'il a saisi, il peut cliquer sur ce
bouton.

c. Le bouton qui-sert-à-rien :
c'est un bouton "générique" qui n'effectue aucune action particulière. Le formulaire n'est
pas envoyé, il n'est pas remis à zéro, rien ne se passe. Ce bouton servira principalement à
lancer des scripts en JavaScript.
Aperçu :
Cliquer

Code HTML :
<input type="button" value=”cliquer” />

5. Les zones de saisie enrichies

HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De
nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à
l'attribut type de la balise<input/> l'une des nouvelles valeurs disponibles.

a. E-mail :
Nous pouvons demander à saisir une adresse e-mail :

<input type="email" />

Le champ semblera a priori identique mais le navigateur sait désormais que l'utilisateur doit
saisir une adresse e-mail. Il peut afficher une indication si l'adresse n'est pas un e-mail.

Exemple d’un champ e-mail mal dans Firefox.

Page 52
b. Une URL :
Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement
par http://) :

<input type="url" />

Même principe : si le champ ne vous semble pas différent sur votre ordinateur, sachez que
celui-ci comprend bel et bien que le visiteur est censé saisir une adresse. Les navigateurs
mobiles affichent par exemple un clavier adapté à la saisie d'URL

c. Numéro de téléphone :
Ce champ est dédié à la saisie de numéros de téléphone :

<input type="tel" />

Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ.

d. Nombre :
Ce champ permet de saisir un nombre entier :

<input type="number" />

Le champ s'affichera en général avec des petites flèches pour changer la valeur. Nous
pouvons personnaliser le fonctionnement du champ avec les attributs suivants :

• min : valeur minimale autorisée.

• max : valeur maximale autorisée.

Page 53
• step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ
n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).

e. Un curseur :
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider).

<input type="range" />

comme à la figure suivante :

Nous pouvons utiliser là aussi les attributs min, max et step pour restreindre les valeurs
disponibles.

f. Couleur :
Ce champ permet de saisir une couleur :

<input type="color" />

En pratique, il reste assez peu mis en œuvre par les navigateurs à l'heure actuelle. Ne vous
étonnez pas si vous voyez seulement un champ de texte classique.

g. Date :
Différents types de champs de sélection de date existent :

• date : pour la date (05/08/1985 par exemple) ;

• time : pour l'heure (13:37 par exemple) ;

• week : pour la semaine ;

• month : pour le mois ;

• datetime : pour la date et l'heure (avec gestion du décalage horaire) ;

• datetime-local pour la date et l'heure (sans gestion du décalage horaire).

Page 54
Exemple :

<input type="date" />

h. Recherche :
On peut créer un champ de recherche comme ceci :

<input type="search" />

Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter
une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement
mémoriser les dernières recherches effectuées par le visiteur.

II. Intégration du contenu multimédia

1. Insertion de la vidéo
La balise <video> spécifie la vidéo, comme un clip vidéo ou d'autres flux vidéo.

Actuellement, il existe 3 formats vidéo pris en charge pour l'élément <video>: MP4, WebM
et Ogg:

a. Les attributs de la balise <video> :

• src : source de la vidéo

• width et height : dimension de la vidéo. SI non spécifiés, valent la largeur et la

hauteur du fichier vidéo. Si une dimension est spécifiée seulement, le navigateur va
ajuster la taille de la dimension non spécifiée

• controls : Si cet attribut booléen est présent, le navigateur affiche ses propres
contrôles vidéo pour la lecture et le volume. Si non présent la première image est
affichée

Page 55
• poster : permet de spécifier une image que le navigateur utilisera alors que la vidéo
est en cours de téléchargement, ou jusqu'à ce que l'utilisateur commence la lecture
de la vidéo. Si cet attribut n'est pas spécifié, la première image de la vidéo sera
utilisée à la place

• autoplay : Spécifie au navigateur de lancer la lecture de la vidéo automatiquement.

• autobuffer : spécifie au navigateur de commencer le téléchargement de la vidéo tout

de suite, en anticipant sur le fait que l'utilisateur lira la vidéo.

• loop : attribut booléen, indique de lire la vidéo en boucle.

b. Exemple :
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

votre navigateur ne supporte pas ce tag

</video>

2. Insertion d’audio
La balise <audio> définit le son, comme la musique ou d'autres flux audio. Il existe 3 formats
de fichiers pris en charge pour l'élément <audio>et qui sont MP3, Wav et Ogg.

La balise <audio> soutient également le attributs globaux en HTML.

a. Attributs :
• Controls : Affiche les barres de navigation dans la vidéo avec entre autres une barre
temporelle et un bouton lecture/pause. Pour chaque navigateur, Les boutons
disponibles ainsi que leur aspect peuvent différer.

• Autoplay : permet de lancer la vidé dès le chargement de la page.

• Loop : permet de faire tourner en boucle la séquence.

• Muted : assurera que la vidéo, en particulier en autoplay, sera lancée sans le son,
silencieusement. Il appartiendra alors au visiteur d'activer le son s'il le désire.

Page 56
b. Exemple :

<source src="f1.ogg" type="audio/ogg">

<source src="f1.mp3" type="audio/mpeg">

Votre navigateur ne supporte pas l’audio tag.

</audio>

Page 57
Exercice d’application
Exercice :

Créer un formulaire HTML qui contient les éléments suivants :

• Champs de saisie de nom, prénom et e-mail.

• Deux boutons radio pour le choix du sexe.

• Un champ destiné au transfert de fichier photo dont le format est restreint aux types
JPEG ou PNG.

• Une liste de choix pour les pays .

• Une liste de choix multiple pour les langages préférés.

• Des cases à cocher pour choisir les domaines d'activités.

Page 58
CHAPITRE V

LES FEUILLES DE STYLES (CSS)

Page 59
Chapitre V: LES FEUILLES DE STYLES

Introduction

Ce chapitre définit en premier lieu les concepts et les utilités des feuilles de style, Puis il
s’intéresse à la manipulation de CSS.

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

• Créer des styles internes et externes

• Créer des styles personnalisés

Pré requis

• Structure d’un document HTML5

• Utilisation des balises

Durée

• 4 semaines

Eléments de contenu

• Concepts et utilités

• Définition des styles

• Les balises DIV et SPAN

• Positionner avec CSS

• Exercices d’application

Page 60
Le CSS ou « Cascading Style Sheets » est un langage utilisé pour décrire la présentation d'un
document HTML.
Le CSS améliore la présentation et la mise en page en décrivant les couleurs, la police, les
couleurs et images de fond, le remplissage, les marges, les bordures ...
Le langage CSS n'est autre que des feuilles de style en cascade, il décrit la forme et non le
fond de la page et propose de nombreux avantages tels que :

▪ Plus facile de réaliser une modification en séparant le contenu de la présentation, et les

fichiers seront moins volumineux et plus clairs.
▪ Possibilité de tout changer rapidement via un fichier. La puissance de CSS permet de
modifier l'ensemble d'un site comptant des milliers de pages en quelques secondes étant
donné que tout est centralisé.

I. Inclure des styles CSS dans une page HTML

Il existe trois façons de définir une feuille de style. Nous allons voir quelles sont les
possibilités pour utiliser CSS dans un document XHTML.

1. Un style CSS spécifique en ligne

On peut définir un (ou plusieurs) style(s) pour un mot ou paragraphe de page par exemple.
Cela consiste donc à intégrer les styles dans le corps du document HTML.

Code CSS :

<p style="font-size: 15pt ;" >

L'utilisation de cette méthode revient au même que celle de faire les fonts et présente les
mêmes inconvénients. Elle ne semble intéressante que lorsque le style que vous aller définir
est vraiment spécifique à cet endroit. Autrement dit, au cas où on pense réutiliser le même
style à un autre endroit, il vaut mieux utiliser les méthodes suivantes.

Page 61
2. Un style CSS interne dans la page HTML
Cette deuxième méthode consiste à mettre le style dans l'entête de la page. La syntaxe est
incorporée à l'entête du fichier HTML entre les balises <style>
<head>
<style>
p{
font-size: 15pt ;
}
</style>
</head>
Le style ainsi défini peut-être appliqué à tous les endroits de la page, sans avoir à redéfinir
les propriétés. Néanmoins, cela nécessite d'inclure le code du style à l'entête de chaque
fichier, et de le répéter pour tous les fichiers. Donc ce n'est pas encore optimal.

3. Un style CSS externe

Dans ce troisième cas, on associe un fichier séparé, indépendant du code HTML, et qui porte
l'extension css. Ce fichier contient tous les styles CSS utilisés dans toutes les pages. On place
une simple ligne qui servira à appeler le fichier .css entre les tags <HEAD> et </HEAD>, et le
fichier est opérationnel.
Cette méthode présente divers avantages par rapport au deux précédentes :

▪ Les définitions de style ne sont faites qu'une seule fois, à un seul endroit.
▪ Cela réduit considérablement la taille des pages HTML.
▪ Cela facilite la maintenance en manipulant un seul fichier pour modifier un tel ou tel
aspect de notre site.
▪ Cela donne une meilleure structuration des pages puisque que le contenu lui-même est
séparé de la forme.

4. Attacher une feuille de style à un document HTML

Dans un fichier style.css, en mettant par exemple le contenu de ce style :

Page 62
Code CSS :

menu{
font-size :12px ;
font-weight :bold ;
}

Dans l'entête de chaque page HTML, il y a juste à rajouter une ligne pour inclure le fichier
style.css :
Code HTML:

Il faut spécifier dans href le fichier à inclure. L'attribut média permet de spécifier le type de
média auquel le style sera appliqué.
Il est possible d'incorporer plusieurs lignes de style, comme ceci (principe des 'cascades') :
Code CSS:

5. La syntaxe de CSS
Une feuille de style contient la définition de différentes règles CSS. C'est en appliquant ces
règles qu'on peut mettre en forme les éléments, ou plus concrètement leur donner du style.
Une règle CSS est divisée en 2 parties :

▪ le sélecteur
▪ le bloc de déclaration

C'est le sélecteur qui détermine ou identifie les parties du document auxquelles sera
appliqué le style. Il sert à sélectionner l'élément que l'on a envie de mettre en forme. Le bloc
de déclaration, quant à lui, contient les déclarations des styles à appliquer. Il est toujours mis
entre deux accolades :
Page 63
Code CSS :
body
{
color : red;
}
Ici, body est le sélecteur alors que le bloc de déclaration est la zone délimitée par les
accolades. Autrement dit, les styles définis entre accolades seront appliqués à la balise body.

a. Le bloc de déclaration CSS :

Dans un bloc de déclaration, on liste tous les styles que l'on veut utiliser pour l'élément
sélectionné. Ce bloc est composé de déclarations qui elles-mêmes contiennent une
propriété et une valeur. La propriété correspond à l'attribut qu'on souhaite changer. A
chaque propriété peut être affectée une valeur.
Code CSS:

Body{
color:red ;
font-family: "Times new roman";
}

b. Les commentaires en CSS :

Il est très conseillé de mettre des commentaires dans le code CSS. L'avantage de les mettre
est qu'ils permettent à d'autres utilisateurs de comprendre le code facilement en cas de
travail en groupe par exemple. De plus, les commentaires permettent de structurer le code
et le rend plus lisible.
Code CSS :
/*commentaire */

c. Les sélecteurs d’éléments HTML en CSS :

Un sélecteur d’élément HTML est un des moyens les plus simples pour appliquer un style. Il
nous permet d'affecter un style à un élément HTML. En spécifiant son nom, nous pouvons
appliquer directement le style à une balise. Pour appliquer un style à la balise <p> par
exemple on peut faire comme ceci :

Page 64
p{
color : green
}

d. Les classes CSS:

Dans le sélecteur d’élément HTML, on n'a utilisé qu'un seul bloc de déclaration pour les
paragraphes. Mais supposons que nous allons définir deux types de paragraphe : des
paragraphes en vert et des paragraphes en rouge, cela est réalisable avec les classes. La
première étape sera de définir deux classes. Les noms des classes sont : .vert et .rouge.
Code CSS :

p.vert{
color:green
}
p.rouge {
color : red
}

Pour appliquer ces styles aux documents HTML, il suffit de mettre le nom de la classe
comme valeur de l'attribut class.
Code HTML :

<p class="vert">
Ce paragraphe est de couleur verte.
</p>
<p class="rouge">
Ce paragraphe est de couleur rouge.
</p>

Nous pouvons aussi omettre le nom de la balise (‘p’) dans le sélecteur pour définir par
exemple un style qui sera utilisé par d'autres balises HTML. Dans l'exemple suivant, tout
élément ayant comme classe .vert sera coloré en vert.
Code CSS:

.vert{
color: green
}

Page 65
Code HTML :

<h1 class="vert">Ce titre est coloré en vert</h1>

<p class="vert">
Tout comme le titre ci-dessus, ce paragraphe est aussi de couleur verte.
</p>

L'intérêt d'utiliser les classes c'est de pouvoir regrouper des propriétés de style dans une
classe et d'appliquer ces styles à différents éléments, et en différents endroits.

f. Les id en CSS :
Contrairement aux classes, un id s'applique à un objet unique. Autrement dit, si un
élément HTML possède déjà un id, cet id ne peut plus être utilisé pour un autre
élément HTML.
Alors qu'il est tout à fait possible que deux éléments utilisent la même classe, bien au
contraire. La définition d'un ID en CSS est identique à celle d'une classe, excepté le dièse qui
précède le sélecteur :

#test-id {
color : green ;
}

Comme pour la classe, pour appliquer le style à une balise div, on spécifie le nom de l'id
comme valeur de l'attribut id :

<div id="test-id" >un exemple d'id</div>

g. grouper des sélecteurs :

On peut grouper les sélecteurs. Pour cela, il faut juste les lister et séparer les éléments de la
liste par une virgule. Dans l'exemple ci-dessous on a groupé les titres h1 et h2. Cela permet
d'avoir des titres qui ont tous la couleur verte

h1,h2{
color: green
}

Page 66
On peut même grouper des sélecteurs de types différents. C'est-à-dire qu'il est possible de
définir un style à plusieurs éléments, classes, identifiants. Il suffit de lister les éléments en les
séparant par une virgule.
Code CSS :

h1, .uneclasse, #idspecial {

color : red;
font-weight : bold;
}

Ainsi, Ies éléments h1, les classes uneclasse et l'identifiant idspecial auront les mêmes
styles : colorés en rouge et mis en gras.
Code HTML :

<div id="idspecial">Un id avec le même style</div>

<h1>Un titre avec le même style</h1>
<p class= "uneclasse">Un paragraphe avec le même style</p>

Un élément HTML peut avoir plusieurs classes. On peut ainsi combiner les styles comme on
veut. Pour appliquer plusieurs classes à un élément, la syntaxe est presque la même que
celle définie ci-dessus. Il suffit de mettre comme valeur de l'attribut class la liste des noms
des classes séparés par un espace.
Code CSS :

.vert {
color:green;
}
.centre{
text-align : center;
}
.gras {
font-weight:bold;
}

.fondjaune {
background-color:yellow;
}

Page 67
Code HTML :

<h1 class="vert centre fondjaune">Application de 3 classes pour le titre </h1>

<p class="vert gras">On n'applique que deux styles au paragraphe : .vert et .gras.</p>
<p class="vert">Et là, c'est un paragraphe avec un seul style. Donc une seule classe :
.vert.</p>

Aperçu :

Ordre de priorité des styles

Priorité entre les classes et les sélecteurs de type

Dans l'exemple suivant on applique la couleur verte et la mise en gras à toutes les balises p.
Code CSS :

p{
color:red;
font-weight:bold;
}
.pspecial {
color:green;
}
Au niveau du code HTML, voyons ce qui se passe si on utilise la classe .pspecial dans une
balise p particulier.
Code HTML:

<p> Ce paragraphe s'affiche en rouge, et en gras.</p>

<p class=".pspecial">Ce paragraphe s'affiche en vert parce que le style de classe est
prioritaire par rapport au style standard de la balise p. <p> Ce paragraphe s'affiche aussi en
gras rouge. </p></p>

Page 68
Remarquons que tous les paragraphes sont colorés en rouge sauf un. Il s'agit du paragraphe
où l'on a appliqué le style .pspecial. Par contre, le paragraphe en question a gardé la mise en
gras. Les propriétés des deux sélecteurs (p et .pspecial) se combinent donc entre elles.
S'il y a des propriétés communes (color par exemple), c'est la valeur définie dans la classe
(color:green) qui sera considérée. En d'autres termes, les classes (.pspecial) sont prioritaires
par rapport aux styles standards définis à l'aide des sélecteurs de type (p)

Priorité entre les classes et les id

Définissons maintenant deux types de styles, un à l'aide d'un id et un autre en utilisant une
classe.
Code CSS :

#unid {
color:blue;
}
.uneclasse
{
color:red;
font-weight:bold;
}
Code HTML :

<p id="unid" class="une-classe">

Eh voilà, c'est l'id qui emporte.
</p>

Le paragraphe s'affiche en bleu puisque c'est le style de l'id qui est prioritaire sur la classe.

II. Mettre en forme les polices de caractères

La mise en forme nous permet d'avoir des polices de caractère personnalisées à notre choix.

1. Choix de la police
Parmi une multitude de polices de caractères, on distingue par exemple les times new
roman, arial, etc. Dans ce cas, il ne reste qu'à choisir les polices selon notre préférence.
Ensuite, nous spécifierons le choix dans la feuille de style en utilisant la propriété
font-familly comme suit :

Page 69
Code CSS :

p{
font-family: verdana ;
}

En effet, Il se peut que la police que nous avons spécifiée n'existe pas sur le système du
visiteur. Nous avons donc la possibilité de lui proposer d'autres choix alternatifs.
Code CSS :

p{
font-family: Verdana, Calibri, “Times new roman”;
}

Le navigateur essaiera d'abord de mettre la police en Verdana. Si ne le visiteur ne l'a pas, il

essaiera de mettre la Calibri et ainsi de suite. Il faut séparer par une virgule la liste des
polices. Si le nom de la police contient un espace, il faut le mettre entre guillemets comme
"Times new roman ".

2. Style de la police
Comme son nom l'indique, la propriété font-style permet de définir le style de la police.
Grâce à cette propriété, on peut avoir des polices en italique ou normale.
Code CSS :

.normale {
font-style:normal
}
.italique {
font-style:italic
}

Code HTML :

<p class="normale">Police normale</p>

<p class="italique">Police italique</p>

Page 70
3. Mettre en gras en CSS
La mise en gras en CSS permet de mettre du poids sur les polices. D'où le nom de la
propriété CSS font-weight. Cette propriété définit l'épaisseur de la police. On l'utilise
souvent dans les titres, dans les paragraphes, etc. Elle peut prendre la valeur bold pour gras
ou normal pour le normal (pas gras)
Code CSS:

.normale {
font-weight:normal;
}
.bold {
font-weight:bold;
}

Code HTML :

<p class="normale">pas gras </p>

<p class="bold">Police gras </p>

4. Définir la taille de la police en CSS

En CSS, on a différentes façons pour définir la valeur de la taille d'une propriété. Pour définir
la taille de la police on utilise la propriété font-size.
Il y a deux façons pour spécifier les valeurs de la taille de la police. On peut donner une
valeur soit en la spécifiant par des mots clés(smaller,medium,larger), soit en indiquant sa
valeur numérique à l'aide des unités de mesure.

a. Spécifier la taille par des mots clé :

On peut donner une valeur relative de la taille par rapport à celle de l'élément parent. Les
mots-clés utilisés sont :

▪ smaller
▪ medium
▪ larger

Lorsque l'on spécifie ainsi la taille, la valeur de base est alors le navigateur de l'internaute.

Page 71
Code HTML :

<div>
<span style="font-size:smaller ;">Police small </span><br>
<span style="font-size: medium ;">Police medium</span><br>
<span style="font-size: larger ;"> Police large</span><br>
</div>

Aperçu:

b. Spécifier la taille de la police grâce aux valeurs numériques :

La taille de la police peut aussi être indiquée en pourcentages par rapport à celle de
l'élément parent. La taille de l'élément parent servira donc de référence pour le calcul de la
valeur de la taille de l'élément. Pour cela, on indique la valeur numérique et après on met le
signe % tout simplement.
Code CSS:

p.taille150{font-size: 150%}
p.taille130 {font-size: 130%}
p.taille100{font-size: 100%}

Code HTML :

<p class="taille150">taille 15O pourcent</p>

<p class="taille130">taille 130 pourcent</p>
<p class="taille100">taille 100 pourcent</p>
<p>Taille normal</p>

Page 72
On peut aussi spécifier la taille de police de façon absolue mais en utilisant des valeurs
numériques exactes. Autrement dit, la taille spécifiée est indépendante de la table des tailles
de police du visiteur.
Code CSS :

p.taille12pt{font-size: 12pt;}
p.taille50px {font-size: 50px;}
p.taille2mm{font-size: 2mm;}

Code HTML :

<p class="taille12pt">taille 12 point</p>

<p class="taille50px">taille 50 pixel</p>
<p class="taille2mm">taille 2mm </p>

Aperçu :

5. Mettre des textes en majuscules et minuscules

Les propriétés CSS permettent de mettre automatiquement des textes en majuscules dans
un texte. Pour cela, il y a 2 sortes de propriétés.
Premièrement, voyons la propriété font-variant. Elle peut prendre 2 valeurs différentes :

▪ small-caps : qui donnera un texte en petites majuscules

▪ normal : qui est la valeur par défaut et donnera un texte normal

Page 73
Code CSS :

p.normale {
font-variant: normal;
}
p.petite {
font-variant: small-caps;
}

Code HTML :

<p class="normale">texte normale<p>

<p class="petite">texte en capitale </p>

Il y a aussi une autre propriété CSS qui permet de forcer les majuscules : text-transform d'un
texte. Elle peut prendre ces valeurs :

▪ none : ne met aucun effet sur le texte

▪ lowercase : met toutes les lettres de chaque mot en minuscules
▪ uppercase : met toutes les lettres de chaque mot en majuscules
▪ capitalize : met uniquement la première lettre de chaque mot en majuscule

Code CSS :

.aucun {
text-transform:none;
}
.minuscule {
text-transform: lowercase;
}
.majuscule {
text-transform: uppercase;
}
.capitale {
text-transform: capitalize;
}

Page 74
Code HTML :

<p class="aucun">None : ne met aucun effet sur le texte</p>

<p class="minuscule">Lowercase : met toutes les lettres de chaque mot en minuscules</p>
<p class="majuscule">Uppercase : met toutes les lettres de chaque mot en majuscules</p>
<p class="capitale">Capitalize : met uniquement la première lettre de chaque mot en
majuscule</p>
Aperçu :

7. Centrer, aligner et justifier des textes en CSS

L'alignement des textes en CSS est défini par la propriété 'text-align'. Cette propriété peut
prendre différentes valeurs selon l'alignement souhaité : La valeur left correspond à
l'alignement à gauche et c'est la valeur par défaut.
Voici en résumé les différentes valeurs et leur signification:

▪ left : aligner à gauche

▪ right : aligner à droite
▪ center : centrer
▪ justify : justifier

Voyons ces différents alignements dans cet exemple.

Code CSS :

h1 {
text-align: center; /* centré */
}
.justifie {
text-align: justify; /* justifiée */

Page 75
}
.droite {
text-align: right; /*aligné à droite*/
}
Code HTML :

<h1>Paragraphe sans justification</h1>

<p>La valeur left correspond à l'alignement à gauche et c'est la valeur par défaut. L'autre
valeur right correspond à l'alignement à droite. Avec la valeur center, le texte sera centré.
La valeur justify permet de justifier le texte. La justification consiste à faire en sorte que le
texte occupe toute la largeur possible.
</p>
<h1>Paragraphe avec justification</h1>
<p class="justifie">La valeur left correspond à l'alignement à gauche et c'est la valeur par
défaut. L'autre valeur right correspond à l'alignement à droite.
Avec la valeur center, le texte sera centré. La valeur justify permet de justifier le texte. La
justification consiste à faire en sorte que le texte occupe toute la largeur possible.
</p>
<p class="droite">
<a href="exemple.html">lire la suite...</a>
</p>

Aperçu :

Page 76
Il n'est pas possible de modifier l'alignement d'un texte d'une balise in line telles que la
balise em, strong, etc. L'alignement ne concerne que les types block.

8. décoration d’un texte

A l’aide de la propriété CSS text-decoration on peut appliquer divers types de décoration pour le
texte, voici les différentes valeurs possibles :

• underline : souligné.

• line-through : barré.

• overline : ligne au-dessus.

• blink : clignotant. Ne fonctionne pas sur tous les navigateurs).

• none : normal (par défaut).

9. indentation d’un texte

La propriété text-indent permet de définir l’indentation de la première ligne d’un texte block. La
valeur peut être :

• Une valeur avec unité : 20px, 1cm, 12pt, 1.2em

• Un pourcentage par rapport la largeur du parent : 10%

• initial : prend la valeur par défaut

• inherit : hérite la valeur de son parent

10. définition d’un ombre du texte

En CSS, on peut définir des ombres pour du texte ou pour les box (block). La propriété text-shadow
permet de définir l’ ombre pour un texte. La valeur est définie comme suit :

• text-shadow : 10px 5px 8px red ;

✓ 10px : décalage horizontal de l’ombre

✓ 5px : décalage vertical de l’ombre

✓ 8px : adoucissement du dégradé

✓ Red : couleur de l’ombre

11. définition de la hauteur d’une ligne de texte

✓ Line-height : 10px ;

✓ Line-height : 120% ; /120% de la hauteur du texte/

✓ Line-height : normal ; /hauteur normale /

Page 77
III. Mise en forme des listes via CSS
En HTML, on a appris les différents types de liste et les différentes balises pour les définir.

▪ Liste non numérotée

▪ Liste numérotée
▪ Liste alphabétique

Maintenant, nous allons voir la mise en forme de ces listes.

1. Les listes à puces

Les listes à puces sont des listes non numérotées. A la place des numéros, on met des petits
symboles appelés 'puce'. En CSS il est possible d'avoir différentes formes de puces grâce à la
propriété list-style-type. Les formes varient en fonction de la valeur de la propriété, en voici
quelques exemples :

▪ list-style-type: disc /* petit cercle plein */

▪ list-style-type: circle /* petit cercle vide */
▪ list-style-type: square /* petit carré plein */

La valeur par défaut de cette propriété est none.

Code CSS :
.disc { list-style-type:disc }
.circle { list-style-type:circle; }
.square { list-style-type:square; }

Code HTML :

<ul class="disc" >

<li>liste 1 avec disc</li>
<li>liste 2 avec disc</li>
</ul>
<ul class="circle" >
<li>liste 1 avec circle</li>
<li>liste 2 avec circle</li>
</ul>
<ul class="square" >
<li>liste 1 avec square</li>
<li>liste 2 avec square</li>
</ul>

Page 78
Aperçu:

2. Les listes numérotées

Pour faire des listes numérotées et alphabétiques il suffit de remplacer < ul > par < ol>
en HTML. Toujours avec la propriété list-style-type on peut mettre des types de chiffre ou de
caractère de notre choix comme des :

▪ Chiffres romains minuscules (list-style-type: lower-roman)

▪ Chiffres romains majuscules (list-style-type: upper-roman)
▪ Numérotation normale (list-style-type: "decimal")
▪ Alphabet latin majuscule (list-style-type: upper-alpha)
▪ Alphabet latin minuscule (list-style-type: lower-alpha)

Code HTML :

<ol style="list-style-type: lower-roman;" >

<li>liste 1 avec chiffre romain en minuscules</li>
<li>liste 2 avec chiffre romain en minuscules</li>
</ol>
<ol style="list-style-type: upper-roman;" >
<li>liste 1 avec chiffre romain en majuscules</li>
<li>liste 2 avec chiffre romain en majuscules</li>
</ol>

Page 79
3. Listes avec images
A la place des puces et des numéros, il est aussi possible de mettre des images. Pour cela,
utilisons la propriété list-style-image en mettant l'URL de l'accès local.
Code CSS :

.listeimage1 {
list-style-image: url("images/liste.gif");
}

Code HTML :

<ul class="listeimage1">
<li>liste 1 avec image en locale</li>
<li>liste 2 avec image en locale</li>
</ul>

4. Position de la liste
list-style-position est la propriété qui permet de spécifier la position du marquer de la liste
(bulles ou images) par rapport à la boite principale de l’item de la liste . Il peut y avoir deux
valeurs possibles :

▪ Outside : valeur par défaut, la boite du marqueur est en dehors de la boite principale
▪ Inside : la boite du marqueur est la première boite inline du bloc principale.
▪ Inherit : hérite la propriété du parent

Cas ou list-style-position est égale outside

Page 80
Cas ou list-style-position est égale inside

V. Gérer le fond (background) en CSS

En CSS, il est possible non seulement de mettre un fond sur une page web mais aussi de
mettre des fonds sur une partie de la page (les titres, les paragraphes, etc.) Les propriétés
pour les fonds sont généralement précédées du mot background. On peut mettre comme
fond une couleur mais aussi une image.

1. La couleur de fond
La propriété background-color sert à mettre une couleur du fond. Pour mettre un fond vert
sur toute la page web par exemple, on utilise des styles dans la balise body.
Code CSS :

body {
background-color: green; /* fond de page en vert
color: black; /* couleur du texte en noir */
}

Si on ne désire mettre du fond que sur une partie, il suffit de créer une classe .fondcouleur
par exemple. Et de l'appliquer sur l'élément.

Code CSS :

.fondcouleur {
background-color: yellow;
color: green ;
}

Code HTML :

<h1 class="fondcouleur">Titre </h1>

Notre titre en h1 sera surligné en jaune, alors que le texte sera vert.

Page 81
2. Les images de fond
La propriété background-image nous permet de placer une image en fond de la page ou en
fond de texte d'un ou plusieurs éléments. Il suffit de spécifier une image d'arrière-plan en
indiquant son chemin. Pour une image fond.jpg se trouvant dans un répertoire image du
site, on aura donc :
Code CSS :

body {
background-image: url("image/fond.jpg");
}

On donne le chemin de l'image comme valeur de la propriété background-image. Il est

nécessaire de bien formater les textes et les données des couleurs pour qu'ils soient
compatibles avec l'arrière-plan. Sinon ils risquent de ne pas être visibles.

3. Image de fond : fixe ou mobile

Lors du défilement du texte quand on clique sur la barre de défilement, il est possible de
rendre l'image de fond immobile. C'est-à-dire que quel que soit le mouvement de la
scrollbar, seuls les textes bougent. L'image de fond reste fixe. Le nom de la
propriété CSS pour avoir ce fond fixe est background-attachment et il peut prendre 2
valeurs :

▪ scroll : l'image de fond défile avec le texte (par défaut)

▪ fixed : l'image de fond reste fixe.

body {
background-image: url("/images/fond.jpg");
background-attachment: fixed; /* Le fond restera fixe */
}

a. Répétition de l'image de fond :

Parmi les propriétés CSS pour les fonds, il y en a une qui est très particulière parce qu'elle
permet de gérer la répétition de l'image de fond. Il s'agit de la propriété background-repeat.
Ses valeurs possibles sont les suivantes :

Page 82
▪ no-repeat : le fond ne sera pas répété
▪ 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é, horizontalement et verticalement. (valeur par défaut).

body {
background-image: url("/images/fond.jpg");
background-repeat: repeat-y;
}
Ce code CSS donnera une page avec un fond répété verticalement.

b. Positionnement d'une image d'arrière-plan :

On peut aussi avoir différentes façons de positionner l'image d'arrière-plan. Ce qui peut
s'avérer très intéressant lorsqu'on n'a qu'une image unique sur la page. C'est à dire lorsqu'on
a mis un fond qui ne se répète pas "background-repeat: no-repeat;" La propriété
background-position est utilisée si on veut indiquer la position du fond par rapport au coin
supérieur gauche de l'élément. L'élément correspond à la page si le fond est appliqué sur la
balise body. Mais il peut aussi s'agir d'un paragraphe.

c. Exemple d’application :
Mettre un fond placé à 40 pixels de la gauche et 50 pixels du haut.
Solution :
, la propriété aura comme valeur :
Body {
background-position:40px 50px;
}
Il est aussi possible d'indiquer les valeurs à l'aide de mots clés suivants :

▪ top : en haut
▪ bottom : en bas
▪ left : à gauche
▪ center : centré
▪ right : à droite

Par exemple, background-position: top right ; permet d’aligner une image en haut à droite.

Page 83
VI. Les bordure en CSS

1. Style de la bordure
On utilise la propriété border-style pour définir le style de bordure. Il y a différentes valeurs
possibles :

▪ none : pas de bordure

▪ solid : un trait simple
▪ dotted : pointillés
▪ dashed : tirets
▪ double : bordure double
▪ groove : en relief
▪ ridge : effet 3D
▪ inset : Effet 3D mais le block est vu comme un creux
▪ outset : Effet 3D mais le block a l'air d'être surélevé

La plus simple et la plus courante des bordures est de style solid. C'est juste pour mettre un
trait simple.
Code CSS :

.borduresimple {
border-style : solid ;
}

Code HTML :
<p class=" borduresimple ">
J'aime le css et le HTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut.
</p>Une bordure avec des pointillés par exemple peut être utile.

Code CSS :

.pointille {
border-style : dotted ;
}

Code HTML :

Page 84
<p class=" pointille">
J'aime le CSS et le HTML. C'est vraiment génial de pouvoir modifier le design du site comme on veut.
</p>

Aperçu:

2. Couleur de la bordure
En donnant une valeur à la propriété border-color, on peut avoir d'autres couleurs. Après, il
suffit de spécifier une couleur soit par son mot clé ("green", "red"...), soit par sa valeur
hexadécimale (#FF0000), soit par une valeur rgb (rgb(0, 21, 7). Pour colorer la bordure en
vert par exemple, on met comme mot clé ‘green'.
Code CSS :

.couleur {
border-style : solid;
border-color : green;
}

Code HTML :

<p class=" couleur"> Voici un paragraphe encadré en vert.

</p>

3. Epaisseur de la bordure
L'exemple suivant nous montrera comment faire pour avoir une bordure plus épaisse ( 10px
par exemple ) ou plus fine ( 1px par exemple)
Code CSS :

.fine {
border-width : 1px;

Page 85
border-color : green;
border-style : solid;
}
.epais{
border-width : 10px;
border-color : green;
border-style : solid;
}

Code HTML :

<p class=" fine">

Voici un paragraphe avec une bordure fine.
</p>
<p class=" epais">
Voici un paragraphe avec une bordure épaisse.
</p>
Aperçu :

4. bordures arrondis
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe
quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
Border-radius : 10px ;
On peut indiquer l’arrondissement de chaque coin a part :
Border-radius : 10px 10px 0px 0px ;
Les valeurs correspondent aux angles suivants dans cet ordre :
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
Page 86
4. en bas à gauche.
Il est possible d'affiner l'arrondi des angles en créant des courbes elliptiques. Dans ce cas, il
faut indiquer deux valeurs séparées par une barre oblique
Border-radius : 30px / 40px ;

5. ombre pour les blocks

La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre
suivant :
1. le décalage horizontal de l’ombre ;
2. le décalage vertical de l’ombre ;
3. l'adoucissement du dégradé ;
4. la couleur de l'ombre.
Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

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

VIII. Les marges

En CSS, il existe deux types de marges :

▪ La marge externe définit l'espace entre le bloc et son extérieur

▪ La marge interne définit l'espace entre le bloc et son contenu

Notons également qu'un bloc désigne un élément de type bloc comme le paragraphe, les
div, etc.

1. Les marges externes avec margin

La "marge externe" est la zone "margin". D'où le nom de la propriété : MARGIN. Cette
dernière spécifie d'un coup la valeur de la marge pour les quatre côtés à la fois. On peut
mettre comme valeur une longueur pour définir une largeur fixe. Il est aussi possible de
mettre un pourcentage.
Dans ce cas, on mettra le pourcentage calculé par rapport à la taille du bloc conteneur. Et
une dernière possibilité sera de mettre auto qui correspond à une valeur automatique

Page 87
définie par le navigateur. Si on ne spécifie qu'une valeur dans la propriété margin, celle-ci
s'applique à tous les côtés.
Code CSS :
.margin {
margin: 70px;
}
Code HTML :

<p>Ceci est un paragraphe sans marge </p>

<p class="marge">Ceci est un paragraphe avec marge </p>
<p>Ceci est un paragraphe sans marge </p>
Celui-ci va provoquer un retrait de 70px par rapport à l'extérieur dans tous les côtés du bloc.
S'il y a deux valeurs, alors la première valeur s'applique pour la marge du haut et celle du
bas, et la seconde pour la marge droite et celle de gauche.
Code CSS :

/retrait haut+bas et droite+gauche/

.margin{
margin : 30px 50px ;
}
En cas de trois valeurs, la première est celle de la marge du haut. La deuxième est celle des
marges gauche et droite. La marge du bas est définie par la troisième.
Code CSS :

.marge {
margin: 2px 10px 4px ;
}

Si les quatre valeurs sont spécifiées, celles-ci s'appliquent respectivement aux marges du
haut, de droite, du bas et de gauche.
Code CSS :

.marge {
margin: 10px 30px 50px 70px;
}

Page 88
2. Les marges internes avec padding
Le padding est une zone, appelée aussi "marge interne" ou "intervalle". Elle est utilisée pour
entourer de marge le "contenu" à l'aide de 4 valeurs. Concrètement, ça sert à définir une
distance entre le contenu d'une boîte et la bordure de ce dernier.
Code CSS:
.padding {
border: solid 2px #990000;
padding: 50px;
width: 350px;
text-align: justify;
}

On a pu définir à la fois le retrait en haut, en bas, à gauche et à droite grâce à la propriété

margin ou padding. Une autre façon serait aussi de les définir séparément. Il suffit de
rajouter les mots clé 'top, bottom, left, right' aux margin ou aux padding.

a. Liste des propriétés de margin :

▪ margin-top : marge extérieure en haut

▪ margin-bottom : marge extérieure en bas
▪ margin-left : marge extérieure à gauche
▪ margin-right : marge extérieure à droite

b. Liste des propriétés de padding :

▪ padding-top : marge intérieure en haut

▪ padding-bottom : marge intérieure en bas
▪ padding-left : marge intérieure à gauche
▪ padding-right : marge intérieure à droite

3. Gestion des dimensions des boîtes en CSS

Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est
aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois
on veut avoir des petites boîtes, parfois on en veut des grandes. Il est possible de fixer la
dimension des boites que l'on peut spécifier.
Il a une largeur et une hauteur définis par deux propriétés CSS :

Page 89
▪ width : pour spécifier la largeur du bloc
▪ height : pour spécifier la hauteur du bloc

Par défaut, un bloc prend 100% de la largeur disponible. Voyons un exemple de div qui
n'utilise aucun style:
Code HTML :

<div>
Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est aussi
valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois on veut avoir
des petites boîtes, dès fois on en veut des grandes. Serait-il possible de fixer la dimension des boîtes ?
La réponse est oui. Un bloc a des dimensions précises que l'on peut spécifier. </div>
Maintenant, avec le même code on ajoute de la largeur et de la bordure pour bien voir le
changement.
Code CSS :

div {
border: solid 2px #000099;
}
.largeur {
width: 60%;
text-align: justify;
}
Code HTML :

<div class="largeur"> Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce
qui suit est aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple.
Parfois on veut avoir des petites boîtes, parfois on en veut des grandes. Serait-il possible de fixer la
dimension des boîes ? La réponse est oui. Un bloc a des dimensions précises que l'on peut spécifier.
</div>

Aperçu :

Page 90
Dans l'exemple ci-dessus, le div avec une largeur de 60% n'occupe plus que 60 % de la page.
On a utilisé le pourcentage mais on peut mettre aussi des tailles exactes en px.

IX. Le positionnement en CSS

Le flux désigne l'ordre d'affichage par défaut des éléments. Le navigateur affiche les
éléments selon leur ordre d'apparition dans le code source. Une des propriétés
remarquables d'une balise de type inline c'est le fait de ne pas créer un retour à la ligne. Par
conséquent, les éléments du type inline s'affichent par défaut les uns à la suite des autres
sur la même ligne. D'où leur désignation en anglais : inline qui signifie en ligne.
Code CSS (commun aux deux types d'affichage) :

.vert {
background-color:green; /* vert */
}
.rouge {
background-color:red; /* rouge */
}
.jaune {
background-color:yellow; /* jaune */
}

Page 91
Code HTML :

<span class="vert">tout sur</span> <span class="rouge">la même</span> <span

class="jaune">ligne</span>

A l'inverse les types block s'affichent les uns en dessous des autres comme les mots japonais.
Avant et après l'affichage d'un élément du type block, il se crée automatiquement un retour
à la ligne. Exemple :

Code HTML :

<div class="vert"> block1 ligne1</div>

<div class="rouge"> block2 ligne2</div>
<div class="jaune "> block3 ligne3</div>

Aperçu :

Différentes propriétés CSS nous permettent de manipuler cet ordre de positionnement. C'est
ce que nous allons voir dans la suite.

1. Changer le type d’affichage des éléments

Une des possibilités de manipulation des positionnements est par exemple celle de changer
les types des éléments. La propriété CSS pour modifier les types des éléments est display.
Pour changer un élément de type block en inline il suffit de mettre en Code CSS

Display :inline;

Et pour faire l'inverse, il suffit de mettre en Code CSS

Display :block;

Page 92
Généralement on voit que les titres s'affichent les uns à la suite des autres comme dans
l'exemple suivant.
CSS commun aux deux types d'affichage :
Code CSS (commun aux deux types d'affichage) :

.vert {
background-color:green; /* vert */
}
.rouge {
background-color:red; /* rouge */
}
.jaune {
background-color:yellow; /* jaune */
}

Code HTML :

<h1 class="vert">Titre vert </h1>

<h1 class="rouge">Titre rouge </h1>
<h1 class="jaune">Titre jaune </h1>

Ceci est parfaitement normal puisque la balise <h1> est de type block.
Appliquons maintenant la propriété display à ces mêmes titres pour voir ce que ça donne
quand on change de type. On a juste à rajouter display : inline à la balise <h1>. Et on aura les
trois titres vert rouge jaune sur la même ligne
Code CSS (commun aux deux types d'affichage) :

.vert {
background-color:green; /* vert */
}
.rouge {
background-color:red; /* rouge */
}
.jaune {
background-color:yellow; /* jaune */

Page 93
}
/* à rajouter*/
h1{
display: inline;
}

Code HTML:

<h1 class="vert">Titre vert </h1>

<h1 class="rouge">Titre rouge </h1>
<h1 class="jaune">Titre jaune </h1>

Aperçu:

2. Positionnement absolu, fixe et relatif

La propriété CSS position permet de changer le comportement d'affichage des blocs. La
valeur par défaut de cette propriété est static qui définit l'affichage normal. Mais nous nous
pencherons plutôt vers les autres propriétés qui s'avèrent intéressantes :

▪ position:relative;
▪ position:absolute;
▪ position:fixed;

Page 94
a. Positionnement relatif :
On a dit que le flux définit l'ordre d'affichage par défaut des éléments. En positionnant de
façon relative un élément, on ne le retire pas du flux. Il suit toujours la règle normale des
positionnements. En mettant position:relative ; l'élément se déplace simplement par rapport
à sa position normale.
Code CSS :

.relatif{
background-color: yellow;
border: 2px solid black;
position: relative;
left: 50px;
top:10px;
}

Code HTML :

<p> Ceci est un paragraphe normal.<span class="relatif"> Block relatif</span> Pourquoi ce

texte "block relatif" est-il décalé? parce que c'est relatif; </p>
Aperçu :

b. Positionnement absolu :
Avec le positionnement absolu, l'élément est détaché complètement du flux. Sa position
n'est plus définie par rapport à la normale. Si la page est considérée comme une sorte de
repère, l'élément sera placé par rapport à ce repère suivant les coordonnées définies. Les
propriétés bottom, left, right ou top définiront ses positions comme suit :

▪ left : par rapport à la gauche de la page

▪ right : par rapport à la droite de la page
▪ top : par rapport au haut de la page

Page 95
▪ bottom : par rapport au bas de la page

Le positionnement absolu nous donne alors une possibilité plus étendue au niveau du
placement des blocks. Il nous permet de placer un block à n'importe quel endroit de la page
que ce soit en haut à droite, ou en bas à gauche, ou etc.

c. Positionnement Fixed :
La propriété position:fixed pourrait nous être avantageuse dans certains cas. On place un
élément sur la page, il y reste visible même si on fait défiler la page. Un cas très pratique est
le cas des menus. Si on veut par exemple qu'un menu reste visible quand le visiteur parcourt
la page, on le met en position fixe sur une partie de la page.

Page 96
Exercices d’application

Exercice 1 : Les classes CSS

Définir trois classes de propriété CSS:

▪ Première classe de style : centré en bleu, avec des textes plus petits
▪ Deuxième classe de style : aligné à droite en rouge, avec des textes plus grands
▪ Troisième classe de style : normal en noir, avec des textes moyens.

On va appliquer les trois classes pour la même balise HTML <p>, mais des styles différents,
qui les présentent de manière différente.

Exercice 2 : Les tableaux et les styles CSS

En appliquant des styles CSS à un tableau HTML, on peut avoir un tableau plus personnalisé,
plus perfectionné. Pour cet exercice, Il s'agit du tableau des notes des étudiants pour lequel
on va appliquer quelques propriétés CSS:

Page 97
Exercice 3 : La mise en page en CSS
Dans cet exercice nous allons créer une architecture classique de site internet qui
ressemblera à la figure ci-dessous.

La squelette HTML comportera :

• un header avec un h1
• un aside avec un menu
• un article principal
• un footer avec un paragraphe

Travail demandé :

Ecrire le code HTML et CSS permettant de créer cette page en appliquant les deux méthodes
de positionnement CSS:
• Le positionnement par « position : absolute ; »
• Le positionnement par les flottants

Page 98

Vous aimerez peut-être aussi

Cours Web Fi
Pas encore d'évaluation
Cours Web Fi
98 pages
VF Cours Complet HTML Css
Pas encore d'évaluation
VF Cours Complet HTML Css
47 pages
Introduction au HTML5 et CSS3
Pas encore d'évaluation
Introduction au HTML5 et CSS3
103 pages
Initiation HTML et CSS
Pas encore d'évaluation
Initiation HTML et CSS
45 pages
Document de Synthèse HTML CSS
Pas encore d'évaluation
Document de Synthèse HTML CSS
32 pages
Apprendre les bases du HTML et CSS
Pas encore d'évaluation
Apprendre les bases du HTML et CSS
25 pages
Séance-1-3-Ème-Sti 2023-2024fv3
Pas encore d'évaluation
Séance-1-3-Ème-Sti 2023-2024fv3
271 pages
Partie 1 Introduction Au Langage HTML
Pas encore d'évaluation
Partie 1 Introduction Au Langage HTML
59 pages
Module HTML-CSS
Pas encore d'évaluation
Module HTML-CSS
37 pages
Développement Web pour Lycéens
Pas encore d'évaluation
Développement Web pour Lycéens
54 pages
HTML Et CSS
Pas encore d'évaluation
HTML Et CSS
50 pages
CHAP 2 Structure D'une Page HTML
Pas encore d'évaluation
CHAP 2 Structure D'une Page HTML
12 pages
Apprendre HTML5 et CSS3
Pas encore d'évaluation
Apprendre HTML5 et CSS3
58 pages
HTML Part1
Pas encore d'évaluation
HTML Part1
22 pages
Cours-Vacance-support de Cours Théorique Et Pratique
Pas encore d'évaluation
Cours-Vacance-support de Cours Théorique Et Pratique
22 pages
Apprendre HTML et CSS pour débutants
Pas encore d'évaluation
Apprendre HTML et CSS pour débutants
67 pages
Cour HTML Licenc Info
Pas encore d'évaluation
Cour HTML Licenc Info
31 pages
Cours 2ndec - HTML
Pas encore d'évaluation
Cours 2ndec - HTML
5 pages
Cours HTML-1
Pas encore d'évaluation
Cours HTML-1
8 pages
Cours Complet Sur Le HTML
Pas encore d'évaluation
Cours Complet Sur Le HTML
4 pages
Cours de Développement Web
Pas encore d'évaluation
Cours de Développement Web
20 pages
1 - Dev. Web - HTML Partie 1
Pas encore d'évaluation
1 - Dev. Web - HTML Partie 1
76 pages
Programmation Web Ch2
Pas encore d'évaluation
Programmation Web Ch2
62 pages
1 HTML
Pas encore d'évaluation
1 HTML
47 pages
HTML
Pas encore d'évaluation
HTML
47 pages
Introduction à la Programmation Web HTML
Pas encore d'évaluation
Introduction à la Programmation Web HTML
118 pages
HTML Course
Pas encore d'évaluation
HTML Course
25 pages
Technologie Web 1
Pas encore d'évaluation
Technologie Web 1
58 pages
HTML Summary Generated
Pas encore d'évaluation
HTML Summary Generated
4 pages
Introduction au langage HTML et ses balises
Pas encore d'évaluation
Introduction au langage HTML et ses balises
10 pages
Cours HTML Rédiger
Pas encore d'évaluation
Cours HTML Rédiger
8 pages
Introduction au formatage HTML
Pas encore d'évaluation
Introduction au formatage HTML
35 pages
Introduction aux CMS et HTML pour e-commerce
Pas encore d'évaluation
Introduction aux CMS et HTML pour e-commerce
113 pages
Cours HTML
Pas encore d'évaluation
Cours HTML
48 pages
HTML
Pas encore d'évaluation
HTML
56 pages
HTML 5: Uph Info S1 V1 AU: 2024-2025
Pas encore d'évaluation
HTML 5: Uph Info S1 V1 AU: 2024-2025
36 pages
HTML5 22-23
Pas encore d'évaluation
HTML5 22-23
55 pages
Programmation Web pour Débutants
Pas encore d'évaluation
Programmation Web pour Débutants
85 pages
Cours Html5 Css3 Javascript
Pas encore d'évaluation
Cours Html5 Css3 Javascript
114 pages
Support - Initiation Programmation Web1 - 2021-2022
100% (1)
Support - Initiation Programmation Web1 - 2021-2022
129 pages
HTML Part1
Pas encore d'évaluation
HTML Part1
36 pages
Cours de Programmation Web
Pas encore d'évaluation
Cours de Programmation Web
192 pages
HTML, CSS et SCSS Décryptés
Pas encore d'évaluation
HTML, CSS et SCSS Décryptés
81 pages
Introduction à HTML pour Débutants
100% (1)
Introduction à HTML pour Débutants
118 pages
Page Web Statique
Pas encore d'évaluation
Page Web Statique
67 pages
Cours HTML PDF
Pas encore d'évaluation
Cours HTML PDF
7 pages
Le Langage HTML
Pas encore d'évaluation
Le Langage HTML
11 pages
Cours HTML et CSS : Bases et Pratique
Pas encore d'évaluation
Cours HTML et CSS : Bases et Pratique
75 pages
Introduction à HTML5 et CSS3
100% (1)
Introduction à HTML5 et CSS3
18 pages
Formation HTML - Css Niveau 1
Pas encore d'évaluation
Formation HTML - Css Niveau 1
76 pages
Introduction à la Programmation Web
Pas encore d'évaluation
Introduction à la Programmation Web
15 pages
CSS : Centrer un tableau en HTML
Pas encore d'évaluation
CSS : Centrer un tableau en HTML
20 pages
Application Web Static
Pas encore d'évaluation
Application Web Static
284 pages
Livre HTML Css
Pas encore d'évaluation
Livre HTML Css
23 pages
Formation HTML Css Niveau PDF
100% (1)
Formation HTML Css Niveau PDF
76 pages
Introduction au Design et Développement Web
Pas encore d'évaluation
Introduction au Design et Développement Web
71 pages
Cours HTML Introduction
Pas encore d'évaluation
Cours HTML Introduction
2 pages
HTML5
Pas encore d'évaluation
HTML5
13 pages
Présentation
Pas encore d'évaluation
Présentation
56 pages
Optimisation de l'Injection Plastique
Pas encore d'évaluation
Optimisation de l'Injection Plastique
10 pages
Moule SABOT: I.2 3.1. Description Du Moule
Pas encore d'évaluation
Moule SABOT: I.2 3.1. Description Du Moule
3 pages
Défauts et Solutions Injection Polymère
Pas encore d'évaluation
Défauts et Solutions Injection Polymère
5 pages
Paramètres et Vérifications de Moulage
Pas encore d'évaluation
Paramètres et Vérifications de Moulage
25 pages
Dédicace
Pas encore d'évaluation
Dédicace
97 pages
TP1 Nada & Sayed
Pas encore d'évaluation
TP1 Nada & Sayed
3 pages
CNC Plotter : Précision et Polyvalence
Pas encore d'évaluation
CNC Plotter : Précision et Polyvalence
8 pages
TP 22
Pas encore d'évaluation
TP 22
9 pages
Qu'est-Ce Qu'un CNC Plotter ?
Pas encore d'évaluation
Qu'est-Ce Qu'un CNC Plotter ?
8 pages
Un Cahier Des Charges Fonctionnel
Pas encore d'évaluation
Un Cahier Des Charges Fonctionnel
4 pages
Projet CNC Plotter : Conception et Usages
Pas encore d'évaluation
Projet CNC Plotter : Conception et Usages
3 pages
IntServ et DiffServ : Qualité de Service en Réseau
Pas encore d'évaluation
IntServ et DiffServ : Qualité de Service en Réseau
54 pages
Paiement en Ligne Inscription Universitaire
Pas encore d'évaluation
Paiement en Ligne Inscription Universitaire
2 pages
Examen Réseaux Informatiques : IP, Routage et Codage
Pas encore d'évaluation
Examen Réseaux Informatiques : IP, Routage et Codage
5 pages
Quizz de sensibilisation à la cybersécurité
100% (1)
Quizz de sensibilisation à la cybersécurité
23 pages
La Veille Technologique HTML Cour
Pas encore d'évaluation
La Veille Technologique HTML Cour
24 pages
Routage Linux
Pas encore d'évaluation
Routage Linux
11 pages
Enfants et Internet : Avantages et Risques
Pas encore d'évaluation
Enfants et Internet : Avantages et Risques
4 pages
1024 No11 Archambault
Pas encore d'évaluation
1024 No11 Archambault
16 pages
Transformation Digitale et Modèles d'Affaires
Pas encore d'évaluation
Transformation Digitale et Modèles d'Affaires
105 pages
Guide des réseaux informatiques et topologies
Pas encore d'évaluation
Guide des réseaux informatiques et topologies
2 pages
Chapitre 5
Pas encore d'évaluation
Chapitre 5
19 pages
Questionnaire Réseau : Périphériques, Câblage et Adressage IP
Pas encore d'évaluation
Questionnaire Réseau : Périphériques, Câblage et Adressage IP
40 pages
DR KAWASHIMA PC Manual F
Pas encore d'évaluation
DR KAWASHIMA PC Manual F
15 pages
3-Gestion de Base de Donnees
Pas encore d'évaluation
3-Gestion de Base de Donnees
10 pages
Cour Multimédia-2
Pas encore d'évaluation
Cour Multimédia-2
55 pages
Introduction aux Réseaux Ethernet
Pas encore d'évaluation
Introduction aux Réseaux Ethernet
68 pages
Ip Tables
Pas encore d'évaluation
Ip Tables
14 pages
Comprendre les Ports et Sockets TCP/IP
Pas encore d'évaluation
Comprendre les Ports et Sockets TCP/IP
1 page
Grille tarifaire e-réputation Legatus
Pas encore d'évaluation
Grille tarifaire e-réputation Legatus
4 pages
Introduction aux Classes IP
Pas encore d'évaluation
Introduction aux Classes IP
4 pages
Configurer un VPN sous Windows 10
100% (1)
Configurer un VPN sous Windows 10
1 page
TP - Gestion Des Étudiants Avec PHP Et Mysql Objectif
Pas encore d'évaluation
TP - Gestion Des Étudiants Avec PHP Et Mysql Objectif
3 pages
2éme COPIL RTHD vF2
Pas encore d'évaluation
2éme COPIL RTHD vF2
31 pages
7.2.10 Packet Tracer - Configure dhcpv4 - FR FR
Pas encore d'évaluation
7.2.10 Packet Tracer - Configure dhcpv4 - FR FR
3 pages
Statistiques des Télécommunications au Cameroun
Pas encore d'évaluation
Statistiques des Télécommunications au Cameroun
113 pages
Module M203 Examen Complet
Pas encore d'évaluation
Module M203 Examen Complet
3 pages
PROULX, C. Cartographier Les Internets
Pas encore d'évaluation
PROULX, C. Cartographier Les Internets
16 pages
Cours 1 Commutation LAN
Pas encore d'évaluation
Cours 1 Commutation LAN
40 pages
Rapport de Stage
Pas encore d'évaluation
Rapport de Stage
59 pages
Données financières Orange 3T 2017
Pas encore d'évaluation
Données financières Orange 3T 2017
66 pages