INF 152 : INITIATION AU

DEVELOPPEMENT WEB
Support de Cours : HTML, CSS, JavaScript

Kevin Fonkoua
Dev web FullStack & Data Analyst

Mars 2025
 March 25, 2025

Contents
1 Introduction 5

2 Travailler en Local et sur un Serveur 6

2.1 Le Serveur de Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Le Serveur de Pré-Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Le Serveur de Développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4 Travailler en Local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Comment Organiser Ses Fichiers ? 7

4 Les Bases en HTML et CSS 8

4.1 Les Bases du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.1.1 Éléments, Balises et Attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.1.2 Structure de Base d’une Page en HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.1.3 Afficher un Document en HTML5 dans le Navigateur . . . . . . . . . . . . . . . . . . . . 10
4.1.4 Indentation et Commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.1.5 Balises Inline et Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1.6 Paragraphes, Titres et Sauts de Ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1.7 Les Éléments <strong>, <em> et <mark> . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.1.8 Les Listes Ordonnées et Non Ordonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.1.9 La Balise Image en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.1.10 Liens Internes, Externes et Ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.11 Exemple de Fusion de Cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.1.12 Résultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.1.13 Les Formulaires en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.1.14 Éléments d’un Formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.1.15 Les Éléments <div> et <span> en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.1.16 Comparaison entre <div> et <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1.17 Les Balises de Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5 Les Bases du CSS 27

5.1 Sélecteurs, Propriétés et Valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2 Où Écrire le CSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.1 CSS Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.2 CSS Internes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.3 CSS Externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.3 Les commentaires en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.4 Sélecteurs Simples et Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.4.1 Limitations des Sélecteurs Simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.4.2 Attributs class et id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.5 Les Éléments div et span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.6 Les éléments de type block et inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.7 Les sélecteurs avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.8 La notion d’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

1
6 Formatage du Texte et Positionnement des Éléments 33
6.1 Les Propriétés de Type Font- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.1.1 La Propriété font-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.1.2 La Propriété font-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
6.1.3 La Propriété font-weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
6.1.4 La Propriété line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6.1.5 La Propriété font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6.1.6 Les Web Safe Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6.1.7 La Propriété color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

7 Formatage du Texte et Positionnement des Éléments 35

7.1 Les Propriétés de Type Text- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.1.1 L’Alignement d’un Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.1.2 La Propriété text-decoration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.1.3 La Propriété text-indent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.1.4 La Propriété text-transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.1.5 Les Propriétés letter-spacing et word-spacing . . . . . . . . . . . . . . . . . . . . . . . 37
7.1.6 Les Ombres des Textes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.1.7 Le Modèle des Boı̂tes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.1.8 Hauteur et largeur d’un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
7.1.9 Les bordures et les bordures arrondies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
7.1.10 Les marges intérieures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
7.1.11 Les marges extérieures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
7.1.12 Les ombres des boı̂tes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
7.1.13 Faire flotter un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
7.1.14 La propriété display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
7.1.15 La propriété position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
7.1.16 Le z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

8 Fonctionnalités Avancées 44
8.1 Gestion du Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
8.1.1 Ajouter de la Couleur ou une Image pour le Fond . . . . . . . . . . . . . . . . . . . . . . . 44
8.1.2 Position et Répétition du Fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
8.1.3 Fixer le Fond ou le Faire Défiler avec la Page . . . . . . . . . . . . . . . . . . . . . . . . . 45
8.2 Intégrer des Images, de l’Audio et de la Vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
8.2.1 Insérer une Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
8.2.2 Ajuster et Positionner une Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
8.2.3 Intégrer de l’Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
8.2.4 Intégrer de la Vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
8.3 TP Corrigé: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

9 JavaScript 56
9.1 Rôle de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
9.2 Pour qui est-ce destiné ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
9.3 Bases des Variables en JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
9.4 1. Utilisation de Base de prompt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
9.5 2. Concaténation de Chaı̂nes de Caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
9.6 Calcul avec prompt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
9.7 Les huit opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
9.7.1 Les opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
9.7.2 La Condition if-else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
9.7.3 La Condition switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
9.7.4 Les Ternaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
9.7.5 La Condition switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
9.7.6 Les Ternaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
9.8 Incrémentation et Décrémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
9.9 La Boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
9.10 La Boucle do while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
9.11 La Boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
9.11.1 Exemple de Boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
9.11.2 Boucle for avec prompt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

2
 9.12 Les Fonctions en JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
9.12.1 Déclaration des Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
9.12.2 Exemple de Fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
9.12.3 Les Variables Locales et Globales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
9.12.4 Les Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
9.12.5 Les Valeurs de Retour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
9.12.6 Les Fonctions Anonymes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
9.13 Les Objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.13.1 Exemple d’Objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.14 Les Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.14.1 Exemple de Tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.14.2 Modification d’une Valeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.14.3 Opérations sur les Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
9.15 Les Objets Littéraux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
9.15.1 Exemple d’Objet Littéral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
9.15.2 Parcourir un Objet avec for...in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

10 TPE : A réaliser par groupe de 10 68

10.1 TP 1 : Ferme d’Élevage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

11 Présentation Générale 70

12 Pages à Développer 70
12.1 Page d’Accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.1.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.1.2 Contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.1.3 Exigences Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.2 Page ”À Propos” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.2.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.2.2 Contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.2.3 Exigences Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.3 Page ”Services” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.3.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
12.3.2 Contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
12.3.3 Exigences Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
12.4 Page ”Prendre Rendez-vous” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
12.4.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
12.4.2 Contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

3
Objectif du Cours
Vous apprendrez à créer des pages web basées sur HTML5 et CSS3. Vous implémenterez le modèle d’organisation
des contenus et utiliserez les éléments de structure proposés par HTML5. Vous utiliserez CSS3 afin de les rendre
plus attractives et responsives.

Objectifs Pédagogiques
À l’issue de ce cours, l’apprenant sera en mesure de :

- Concevoir et développer des applications web en HTML5 et CSS3.

- Mettre en place et valider la structure HTML5 des pages web.
- Habiller des pages web en CSS3 afin de les rendre plus attractives.
- Rendre responsive design les pages web d’un site.

- Créer des images et des animations vectorielles.

Méthodes Pédagogiques
Pédagogie active basée sur des exemples, des démonstrations, des partages d’expérience, des cas pratiques et
une évaluation des acquis tout au long de la formation.

Travaux Pratiques
Échanges, partages d’expériences, démonstrations, travaux dirigés et cas pratiques.

À propos de l’auteur
Kevin Fonkoua
Kevin Fonkoua est un développeur web fullstack et Data Analyst avec plus de 6 ans d’expérience freelance.
Il enseigne dans plusieurs écoles et centres de formation et met à disposition ses cours sur Internet pour
que tout le monde puisse y accéder, surtout dans les pays en développement. Aujourd’hui, il encadre plus
de 50 étudiants par an dans le domaine de l’informatique et reste consultant dans plusieurs entreprises.

4
1 Introduction
HTML, ou HyperText Markup Language, est un langage de balisage créé en 1991. Il a pour rôle principal
de structurer et d’organiser le contenu d’une page web. En utilisant HTML, les développeurs peuvent indiquer
aux navigateurs comment interpréter différents types de contenu, tels que les paragraphes, les titres, les images
ou les vidéos, ce qui permet de donner un sens et une hiérarchie à l’information présentée.
CSS, qui signifie Cascading Style Sheets ou feuilles de style en cascade , a été introduit en 1996.
Son objectif est d’appliquer des styles et des mises en forme au contenu structuré par HTML. Grâce à CSS, il
est possible de modifier l’apparence d’un site web, comme la couleur et la taille des textes, la disposition des
éléments sur la page, ou encore d’ajouter des bordures et des ombres. Il est essentiel de ne pas confondre les
rôles de ces deux langages : HTML se concentre sur la structure, tandis que CSS s’occupe de l’esthétique.
Javascript, introduit peu après HTML et CSS, est un langage de programmation qui permet d’ajouter
de l’interactivité et des fonctionnalités dynamiques aux pages web. Il permet de réagir à des événements, de
manipuler le DOM (Document Object Model) et d’interagir avec des serveurs pour charger des données
sans avoir à recharger la page. Ensemble, HTML, CSS et JavaScript forment la base de la création de sites web
modernes, chacun jouant un rôle complémentaire dans le développement d’applications web.
Les versions actuelles, HTML5 et CSS3, apportent de nombreuses nouvelles fonctionnalités qui améliorent
l’expérience de développement. Bien qu’elles soient considérées comme des standards, ces versions continuent
d’évoluer. HTML5 facilite l’intégration de médias tels que des vidéos et des fichiers audio, tout en introduisant
des balises sémantiques qui améliorent la structure des documents. De même, CSS3 permet des styles avancés,
comme les bordures arrondies et les animations.
Pour commencer à coder en HTML, CSS et JavaScript, plusieurs éditeurs de texte peuvent être utilisés.
Parmi les plus populaires, on trouve :
- Visual Studio Code, un éditeur puissant et extensible qui supporte de nombreux langages et offre des
fonctionnalités avancées comme l’autocomplétion et le débogage ;
- NotePad++ pour Windows ;
- Komodo pour Mac ou Linux ;
- TextWrangler pour Linux.
Différences entre HTML, CSS et JavaScript

Il est fort probable que vous ayez déjà rencontré du HTML et du CSS dans votre expérience web. Voici un
exemple de code HTML :

<p>
Un super paragraphe avec <strong>du texte en gras</strong>.
</p>

Et voici à quoi ressemble une déclaration CSS associée :

p {
color: red;
}

Enfin, un exemple de code JavaScript pourrait ressembler à ceci :

document.querySelector(’p’).innerHTML = ’Texte modifié avec JavaScript !’;

Si nous devions faire une analogie, on pourrait comparer un site web à une maison : le HTML représenterait
les fondations et la structure de base, fournissant le cadre essentiel. Bien que la maison soit solide et fonctionnelle,
elle manquerait de charme et de confort.
Le CSS, en revanche, serait l’aspect décoratif de la maison. C’est comme la peinture, le mobilier et les
finitions intérieures qui rendent l’espace accueillant et agréable à vivre.
Ces deux langages sont donc indispensables :
- Le HTML établit les fondations de votre site. Il informe le navigateur sur la nature du contenu et comment
l’interpréter.
- Le CSS embellit le contenu brut fourni par le HTML, le rendant plus attrayant et plus facile à lire.

5
 - Le JavaScript ajoute une couche d’interactivité, permettant de modifier le contenu dynamiquement et de
réagir aux actions de l’utilisateur.

2 Travailler en Local et sur un Serveur

Avant de plonger dans le codage, il est essentiel de configurer notre espace de travail et de comprendre où
nous allons coder. Vous entendrez souvent parler de ”travail en local”, de ”serveur de développement”, de
”pré-production” et de ”production”. Cette chaı̂ne de serveurs permet de coder, tester et livrer un site au
client.

2.1 Le Serveur de Production

Le serveur de production est celui sur lequel votre site sera hébergé. C’est ce serveur qui est connecté à Internet
et qui rend votre code accessible au monde. En d’autres termes, c’est l’endroit où les utilisateurs peuvent visiter
votre site en ligne.

2.2 Le Serveur de Pré-Production

Le serveur de pré-production est une réplique du serveur de production. Il permet de tester votre code dans un
environnement identique à celui de la production, ce qui aide à détecter d’éventuels bugs avant la mise en ligne.
Ce serveur est généralement invisible aux internautes, étant accessible uniquement par les développeurs.

2.3 Le Serveur de Développement

Le serveur de développement est l’endroit où les développeurs écrivent et testent leur code. Ce serveur est fermé
et n’est accessible qu’à l’équipe de développement.
Voici donc la logique suivie lors d’un bon processus de développement :
- Je développe sur mon serveur de développement.
- Je livre le code sur le serveur de pré-production.
- Je débug mon code s’il y a lieu.
- Le client valide mon code.
- Je livre mon code sur le serveur de production.

Figure 1: Illustration d’un serveur de production

Dans ce processus, tout le travail se fait en ligne sur un serveur. Cela signifie que chaque modification de
code doit être envoyée sur un serveur pour être visible dans un navigateur. Cependant, dans notre cas, où nous
ne travaillons qu’avec HTML et CSS, cela peut être trop fastidieux. Nous pouvons donc nous permettre de
travailler directement en local.

2.4 Travailler en Local

Travailler en local présente plusieurs avantages :
- Pas besoin d’une connexion Internet pour coder.
- Pas besoin de configurer un serveur.
- Les résultats de notre code sont visibles immédiatement.
Travailler en local permet de développer rapidement et de tester des modifications sans les complications
liées à un serveur en ligne.

6
 Figure 2: Illustration du travail en local

3 Comment Organiser Ses Fichiers ?

Maintenant que nous sommes prêts à coder, il est essentiel de créer un environnement organisé pour stocker nos
fichiers. Lorsqu’il s’agit de travailler avec HTML et CSS, vous avez la liberté de coder où vous le souhaitez sur
votre ordinateur. Cependant, il est recommandé de créer un dossier dédié à chaque projet afin de garder tous
les fichiers de votre site Internet bien organisés.
Création de Dossier
Créez un dossier nommé **Mon premier site**. À l’intérieur, vous allez structurer votre projet avec trois
sous-dossiers et deux fichiers principaux. Voici à quoi cela devrait ressembler :

Figure 3: Structure de dossier recommandée pour un projet web

Dossier ‘images‘
Ce dossier va contenir toutes les images de votre site. Il est crucial de s’assurer que toutes les images
nécessaires sont stockées ici. Si vous souhaitez utiliser une image de votre bibliothèque personnelle, copiez-la et
collez-la dans ce dossier.
**Attention !** Si vous laissez vos images ailleurs sur votre disque dur, elles ne seront pas accessibles lors
de la mise en production de votre site, ce qui signifie que les internautes ne pourront pas les voir.
Dossier ‘fonts‘
Ce dossier est destiné à contenir les polices de caractères utilisées sur votre site. Les internautes n’ont pas
nécessairement les mêmes polices installées sur leur appareil que vous. Pour garantir qu’ils voient votre site tel
que vous l’avez conçu, il est important de fournir ces polices dans ce dossier. Cela évite les problèmes de rendu
et assure une expérience utilisateur cohérente.
Dossier ‘js‘
Ce dossier contiendra les fichiers JavaScript utilisés sur votre site. Bien que nous ne traiterons pas de
JavaScript dans ce cours, sachez que vous en aurez rapidement besoin pour ajouter de l’interactivité à vos
pages. Il est donc judicieux de préparer cet espace dès le départ.
Fichiers Principaux
Fichier ‘index.html‘
Le fichier ‘index.html‘ est la page d’accueil de votre site. Il est essentiel de nommer ce fichier ”index”, car
c’est une convention standard. Tous les serveurs web recherchent en premier un fichier nommé ainsi ; en son
absence, vous risquez de recevoir un message d’erreur.
**Notez bien** l’extension de fichier ‘.html‘. Tous vos fichiers HTML devront avoir cette extension pour
être correctement interprétés par le navigateur.
Fichier ‘style.css‘
Le fichier ‘style.css‘ est celui dans lequel vous allez écrire vos styles CSS. Il est important de garder le HTML
et le CSS dans des fichiers séparés pour de bonnes pratiques de programmation, à moins que vous ne codiez des
styles très légers. Cela permet de maintenir une structure claire et d’optimiser le chargement de la page.
Résumé de la Structure
Pour résumer, votre projet devrait contenir : - Un dossier nommé ‘images‘ - Un dossier nommé ‘fonts‘ - Un
dossier nommé ‘js‘ - Un fichier nommé ‘index.html‘ - Un fichier nommé ‘style.css‘
En suivant cette structure, vous vous assurez que votre projet est bien organisé, ce qui facilitera les modifi-
cations et la maintenance future.

7
4 Les Bases en HTML et CSS
4.1 Les Bases du HTML
4.1.1 Éléments, Balises et Attributs
Dans le monde du HTML, il est crucial de comprendre trois termes fondamentaux : élément, balise et attribut.
Éléments
Les éléments sont utilisés pour définir des objets dans une page web. Par exemple, pour créer un paragraphe,
vous utiliserez l’élément <p>, pour des titres d’importance variée, vous aurez les éléments <h1>, <h2>, <h3>,
<h4>, <h5> et <h6>, et pour des liens, vous utiliserez l’élément <a>.
Les éléments sont généralement constitués de balises. La majorité des éléments se composent d’une paire de
balises : une balise ouvrante et une balise fermante.

Exemple d’un élément HTML :

<p>Bienvenue sur mon site web !</p>

Dans cet exemple, l’élément est <p>, qui délimite un paragraphe.

Balises
Les balises portent le nom de l’élément et sont entourées de chevrons. La balise fermante inclut un slash qui
précède le nom de l’élément.
Il existe aussi des éléments qui ne comportent qu’une seule balise, appelés balises orphelines. Par exemple,
l’élément <br> est utilisé pour créer un retour à la ligne.

Exemple d’une balise orpheline :

<br>

Attributs
Les attributs viennent compléter les éléments en fournissant des informations supplémentaires. Par exemple,
dans le cas d’un lien, un attribut sera utilisé pour indiquer la cible du lien, c’est-à-dire vers quel site le lien doit
mener.
Les attributs se trouvent toujours à l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline
si applicable).

Exemple d’un élément de lien :

<a href="https://www.wikipedia.org">Visitez Wikipédia</a>

Dans cet exemple :

- L’élément est <a>, qui définit un lien.

- La balise ouvrante contient un attribut ‘href‘, qui indique la destination du lien.

- L’ancre textuelle est le texte Visitez Wikipédia , qui est ce sur quoi les utilisateurs cliqueront pour accéder
au site.
L’attribut ‘href‘, qui signifie ”Hypertext Reference”, spécifie la cible de notre lien, ici le site de Wikipédia.
L’ancre textuelle est le texte situé entre les balises, et c’est la seule partie visible pour vos visiteurs.
Balises Autofermantes
Certaines balises en HTML sont autofermantes. Cela signifie qu’elles n’ont qu’une seule balise ouvrante et
aucune balise fermante. Voici la liste de ces balises :

- ‘<area />‘
- ‘<br />‘

- ‘<hr />‘
- ‘<img />‘
- ‘<input />‘‘

8
 - ‘<link />‘
- ‘<meta />‘
- ‘<param />‘
Notez la présence du slash (‘/‘) avant le second chevron (‘>‘). Les balises autofermantes en sont pourvues,
ce qui indique qu’elles ne nécessitent pas de balise fermante.

Figure 4: Récapitulatif des éléments, balises et attributs en HTML

En maı̂trisant ces concepts de base, vous serez mieux préparé à créer des pages web structurées et fonction-
nelles.

4.1.2 Structure de Base d’une Page en HTML5

En programmation, comme dans beaucoup d’autres disciplines, il existe des règles à suivre. Ainsi, toute page
écrite en HTML5 doit respecter une certaine structure, un squelette qui demeure constant. Ce squelette est
constitué de divers éléments.
Déclaration du Doctype
Tout d’abord, une page HTML5 commence par la déclaration du type de document, communément appelée
”doctype”.Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans notre cas, le
type de document est HTML5. La déclaration se présente ainsi :

<!DOCTYPE html>

Notez bien le point d’exclamation, qui est obligatoire et indique que cet élément est particulier.
Éléments Principaux
Pour qu’une page HTML5 soit valide, il est nécessaire d’inclure trois nouveaux éléments : <html>, <head>
(en-tête) et <body> (corps de page).
- Élément <html> : Cet élément encadre l’ensemble de la page.
- Élément <head> : Cet élément contient diverses informations, dont le titre de la page, l’encodage utilisé
et des méta-données (invisibles pour les utilisateurs mais essentielles au bon fonctionnement du site).
- Élément <body> : C’est ici que se trouve tout le contenu visible de la page, comme les paragraphes, les
images, les tableaux, etc.

9
 Contenu de l’Élément <head>
Pour que la page soit valide, l’élément <head> doit contenir :
- Un élément <title>, qui correspond au titre de la page.

- Un élément <meta charset>, qui précise le type d’encodage choisi. Pour les langues latines, on choisira
généralement la valeur utf-8.
Exemple de Structure de Page
Voici à quoi devrait ressembler la structure de base de votre page HTML5 :

Figure 5: Structure de base d’une page en HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon Premier Site</title>
</head>
<body>
<h1>Bienvenue sur mon site !</h1>
<p>Ceci est un paragraphe d’introduction.</p>
</body>
</html>

Voilà, vous venez de créer votre première page valide en HTML5 ! Retenez bien ce schéma, car il sera
toujours le même, quelle que soit la page HTML5 que vous créerez. En comprenant cette structure, vous serez
en mesure de créer des pages web bien formées et conformes aux standards du web.

4.1.3 Afficher un Document en HTML5 dans le Navigateur

La première étape après avoir ouvert un nouveau fichier dans votre éditeur de texte est de changer le type de
fichier pour en faire un document HTML. Pour cela, vous pouvez suivre ces étapes dans Visual Studio Code
(VS Code) :
1. **Changer le Type de Fichier** : - Si vous avez déjà créé un fichier, vous pouvez simplement enregistrer
le fichier sous un nouveau nom avec l’extension ‘.html‘ (par exemple, ‘document.html‘). Pour cela, cliquez sur
Fichier ¿ Enregistrer sous et entrez le nom avec l’extension ‘.html‘. - Si vous commencez un nouveau fichier,
vous pouvez choisir Fichier ¿ Nouveau Fichier, puis le sauvegarder immédiatement avec l’extension ‘.html‘.
2. **Visualiser le Document dans le Navigateur** : Une fois que votre fichier est sauvegardé en tant que docu-
ment HTML, vous avez deux options pour le visualiser dans un navigateur : - **Utiliser l’Extension Live Server**
: - Installez l’extension [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
depuis le Marketplace de VS Code. - Une fois installée, ouvrez votre fichier HTML et faites un clic droit dans

10
l’éditeur. Sélectionnez Open with Live Server. Cela ouvrira votre document dans le navigateur par défaut
et mettra à jour la page automatiquement à chaque fois que vous sauvegardez. - **Ouvrir le Fichier Manuelle-
ment** : - Si vous ne souhaitez pas utiliser Live Server, enregistrez votre document (si ce n’est pas déjà fait) et
localisez-le sur votre ordinateur (par exemple, sur le bureau). - Double-cliquez sur le fichier ‘document.html‘.
Cela ouvrira votre page dans le navigateur par défaut.
3. **Rafraı̂chir le Navigateur** : - Pensez à toujours enregistrer votre document dans VS Code après avoir
apporté des modifications. Utilisez le raccourci Ctrl + S (ou Cmd + S sur Mac) pour enregistrer. - Si le
document était déjà ouvert dans le navigateur, n’oubliez pas de rafraı̂chir la page pour voir les changements.
Vous pouvez le faire avec le raccourci Ctrl + R (ou Cmd + R sur Mac).
Cela peut sembler évident, mais de nombreuses heures sont souvent perdues à déboguer des problèmes qui
résultent simplement de l’oubli d’enregistrer les modifications ou de rafraı̂chir la page. En suivant ces étapes,
vous aurez une expérience de développement plus fluide et efficace dans vos projets HTML5.

4.1.4 Indentation et Commentaires

Maintenant que vous connaissez la théorie du HTML, il est temps de passer à la pratique ! Voyons ensemble
les bonnes pratiques à respecter pour avoir un code propre et fonctionnel.
Indentation
La première bonne pratique à respecter est l’indentation. Pensez à l’indentation comme à un principe de
poupées russes : chaque élément contenu dans des balises doit être indenté. Par exemple, un simple paragraphe
:

<p>Portez ce vieux whisky au juge blond qui fume.</p>

Deviendra ainsi :

<p>
Portez ce vieux whisky au juge blond qui fume.
</p>

Cette méthode rend votre code plus lisible.

Imbrication des Balises
En HTML, vous pouvez imbriquer des balises, c’est-à-dire placer des balises à l’intérieur d’autres balises.
Par exemple, voici une balise de liste :

<ul>
</ul>

Si nous ajoutons un élément de liste à l’intérieur :

<ul>
<li>
Un élément d’une liste.
</li>
</ul>

Notez que les balises ‘<li>‘ sont également indentées, ce qui permet de visualiser clairement l’imbrication.
Voici un exemple avec deux listes imbriquées :

11
 <ul>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste contenant une liste.
<ul>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
</ul>
</li>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
</ul>

Commentaires
Au fur et à mesure que votre code grandit, il peut atteindre plusieurs centaines, voire milliers de lignes. Il
est donc crucial de commenter votre code pour deux raisons :
1. Vous aider à vous y retrouver six mois plus tard lors des mises à jour.
2. Rendre votre code plus accessible à d’autres personnes intervenant sur votre site.
Voici notre double liste imbriquée, commentée :

12
 <!-- Ouverture de la première liste -->
<ul>
<li>
Un élément d’une liste contenant une liste.
<!-- Ouverture de la seconde liste -->
<ul>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
</ul>
<!-- Fermeture de la seconde liste -->
</li>
<li>
Un élément d’une liste.
</li>
<li>
Un élément d’une liste.
</li>
</ul>
<!-- Fermeture de la première liste -->

Un commentaire doit être compris entre ‘<!--‘ et ‘-->‘. Tout ce qui se trouve entre ces deux éléments
n’est pas visible par les internautes, alors n’hésitez pas à les utiliser !
Erreurs Communes
Les deux erreurs les plus fréquentes chez les débutants sont :
1. **Une balise non fermée** : Voici un exemple de balise ‘<p>‘ non fermée :

<p>Un paragraphe.

Si vous respectez l’indentation, cela devrait vous sauter aux yeux :

<p>
Un paragraphe.

Ici, il manque la balise fermante ‘<p>‘.

2. **Des balises croisées** : Voici un exemple de balises croisées :

<ul>
<li>
Un paragraphe.
</ul>
</li>

Si l’indentation est respectée, vous verrez que la balise ‘</ul>‘ est fermée avant la balise ‘</li>‘, ce qui
enfreint le principe d’imbrication :

<ul>
<li>
Un paragraphe.
</li>
</ul>

13
 Voilà donc à quoi sert l’indentation : à éviter de faire des erreurs ! Et n’oubliez pas, on ne croise jamais les
effluves !

4.1.5 Balises Inline et Block

En HTML, les balises peuvent être classées en deux types principaux : **inline** et **block**. Comprendre la
différence entre ces deux types de balises est essentiel pour structurer correctement votre contenu.
Balises Block
Les balises block (ou blocs) sont des éléments qui occupent toute la largeur disponible de leur conteneur.
Cela signifie qu’elles commencent sur une nouvelle ligne et que tout le contenu qui les suit apparaı̂tra également
sur une nouvelle ligne. Les balises block sont souvent utilisées pour structurer des sections de contenu sur une
page.
**Exemples de balises block :** - <div> : utilisée pour créer des divisions dans une page. - <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> : utilisées pour les titres de différents niveaux. - <p> : utilisée pour les paragraphes. -
<ul>, <ol> : utilisées pour les listes non ordonnées et ordonnées.
**Exemple de balises block :**

<div>
<h1>Titre Principal</h1>
<p>Ceci est un paragraphe qui explique le contenu de la section.</p>
</div>

Dans cet exemple, le <div> contient un titre (<h1>) et un paragraphe (<p>), chacun commencant sur une
nouvelle ligne.
Balises Inline
Les balises inline (ou en ligne) sont des éléments qui ne commencent pas sur une nouvelle ligne. Elles
n’occupent que l’espace nécessaire à leur contenu et permettent d’aligner d’autres éléments sur la même ligne.
Les balises inline sont souvent utilisées pour styliser une partie du texte ou ajouter des éléments à l’intérieur
d’un bloc.
**Exemples de balises inline :** - <span> : utilisée pour appliquer un style à une partie du texte. - <a> :
utilisée pour créer des liens hypertextes. - <img> : utilisée pour insérer des images. - <strong>, <em> : utilisées
pour mettre en gras ou en italique du texte.
**Exemple de balises inline :**

<p>Ceci est un <strong>texte important</strong> et un <a href="https://www.example.com">lien vers un

Dans cet exemple, le paragraphe <p> contient du texte inline, avec une partie mise en gras <strong> et un
lien <a>.
Résumé
- **Balises Block** : occupent toute la largeur, commencent sur une nouvelle ligne, utilisées pour structurer
le contenu.
- **Balises Inline** : n’occupent que l’espace nécessaire, ne commencent pas sur une nouvelle ligne, utilisées
pour styliser ou ajouter des éléments à l’intérieur d’un bloc.

4.1.6 Paragraphes, Titres et Sauts de Ligne

En HTML, les paragraphes, les titres et les sauts de ligne sont des éléments fondamentaux pour structurer le
contenu d’une page. Comprendre comment les utiliser correctement est essentiel pour une bonne présentation.
Paragraphes
Les paragraphes sont définis par la balise <p>. Chaque fois que vous voulez créer un nouveau paragraphe,
il suffit d’encapsuler le texte dans cette balise. Les paragraphes sont des éléments block, ce qui signifie qu’ils
commencent sur une nouvelle ligne et occupent toute la largeur disponible.
**Exemple de paragraphe :**

<p>Ceci est un exemple de paragraphe. Il est utilisé pour présenter des idées ou des informations su

Titres
Les titres sont importants pour structurer le contenu d’une page. HTML propose six niveaux de titres, de
<h1> (le plus important) à <h6> (le moins important). Chaque niveau de titre est également un élément block
et commence sur une nouvelle ligne.

14
 **Exemple de titres :**

<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Titre de Section</h3>

C1: compléter le résultat ici

.....
.....
.....

Dans cet exemple, le titre principal est défini par <h1>, suivi d’un sous-titre avec <h2> et d’un titre de section
avec <h3>.
Sauts de Ligne
Pour créer un saut de ligne dans un texte, vous pouvez utiliser la balise <br/>. Cette balise est une balise
inline et n’a pas de balise fermante. Elle est utile lorsque vous souhaitez forcer un retour à la ligne sans créer
un nouveau paragraphe.
**Exemple de saut de ligne :**

<p>Ceci est un exemple de texte.<br/>

Ce texte appara^
ıtra sur une nouvelle ligne, mais dans le m^
eme paragraphe.</p>

C1: compléter le résultat ici

.....
.....
.....

NB: Les titres apparaissent en gras et ont des tailles différentes selon leur degré d’importance. Et c’est
précisément là où j’en reviens à mon premier point : vous ne devez JAMAIS utiliser le langage HTML pour
mettre en forme le contenu.
Ce que vous voyez n’est qu’une mise en forme automatique faı̂te par votre navigateur, une interprétation visuelle
de ce que vous avez donné à votre navigateur. Cependant, vous ne devez jamais utiliser un titre de niveau h1 pour
mettre un texte en gros et en gras. Le résultat d’une interprétation et n’est qu’une mise en forme automatique.
Le CSS permet de faire réellement tout ce que l’on désire d’un point de vue visuel : créer des styles tout comme
enlever des styles automatiques. Résumé
- **Paragraphes (<p>)** : utilisés pour le texte courant, débutent sur une nouvelle ligne.

- **Titres (<h1> à <h6>)** : utilisés pour structurer le contenu, chacun commence sur une nouvelle ligne.
- **Sauts de ligne (<br />)** : permettent d’insérer un retour à la ligne sans créer un nouveau paragraphe.

Exercice : Création d’une Page Simple

**Instructions :**
1. Créez une page HTML simple contenant :
- Un titre principal (\texttt{<h1>}) pour le nom de votre page.
- Un sous-titre (\texttt{<h2>}) décrivant le contenu de votre page.
- Trois paragraphes (\texttt{<p>}) expliquant différents aspects du sujet choisi.
- Utilisez des sauts de ligne (\texttt{<br />}) pour séparer une phrase importante à l’intérieur

**Objectif :**
Pratiquer l’utilisation des titres, paragraphes et sauts de ligne.

15
 Votre Réponse

1.
2.
3.
4.
5.
6.
7.
8.
9.

10.
11.
12.

13.
14.

4.1.7 Les Éléments <strong>, <em> et <mark>

En HTML, les éléments <strong>, <em> et <mark> sont utilisés pour mettre en valeur des parties spécifiques
du texte. Voici une explication de chacun de ces éléments, ainsi que des exemples.
Élément <strong>
L’élément <strong> est utilisé pour indiquer qu’une partie du texte est d’une importance particulière. Par
défaut, le texte à l’intérieur de cette balise est affiché en gras.
**Exemple :**

<p>Je suis un paragraphe contenant un mot très <strong>important</strong>.</p>

Élément <em>
L’élément <em> est utilisé pour indiquer qu’un texte doit être accentué ou mis en emphase. Par défaut, le
texte à l’intérieur de cette balise est affiché en italique.
**Exemple :**

<p>Moi aussi, je contiens trois mots <em>importants</em>, mais un peu moins importants que les autre

Élément <mark>
L’élément <mark> est utilisé pour mettre en évidence une portion de texte, souvent pour attirer l’attention
sur des informations pertinentes. Par défaut, le texte à l’intérieur de cette balise est affiché avec un fond jaune.
**Exemple :**

<p>Moi, j’ai un <mark>contenu qui doit ressortir visuellement</mark>.</p>

Résumé
- **<strong>** : Utilisé pour indiquer une importance particulière (texte en gras). - **<em>** : Utilisé
pour mettre en emphase (texte en italique). - **<mark>** : Utilisé pour mettre en évidence (texte sur fond
jaune).

4.1.8 Les Listes Ordonnées et Non Ordonnées

En HTML, les listes ordonnées et non ordonnées sont utilisées pour présenter des éléments de manière structurée.
Ces listes facilitent la lecture et la compréhension des informations.
Liste Non Ordonnée
Une liste non ordonnée est utilisée lorsque l’ordre des éléments n’a pas d’importance. Elle est créée à l’aide
de la balise <ul> (unordered list) et chaque élément de la liste est encapsulé dans une balise <li> (list item).
**Exemple :**

16
 <ul>
<li>Pomme</li>
<li>Banane</li>
<li>Fraise</li>
</ul>

**Résultat :**

• Pomme
• Banane
• Fraise

Liste Ordonnée
Une liste ordonnée est utilisée lorsque l’ordre des éléments est important. Elle est créée à l’aide de la balise
<ol> (ordered list) et chaque élément de la liste est également encapsulé dans une balise <li>.
**Exemple :**

<ol>
<li>Étape 1 : Préchauffer le four</li>
<li>Étape 2 : Mélanger les ingrédients</li>
<li>Étape 3 : Cuire au four pendant 30 minutes</li>
</ol>

**Résultat :**

1. Étape 1 : Préchauffer le four

2. Étape 2 : Mélanger les ingrédients
3. Étape 3 : Cuire au four pendant 30 minutes

Listes Imbriquées
Les listes imbriquées permettent de créer des sous-listes à l’intérieur d’une liste principale. Cela est utile
pour organiser des informations de manière hiérarchique.
**Exemple de liste imbriquée :**

<ul>
<li>Fruits
<ul>
<li>Pomme</li>
<li>Banane</li>
<li>Fraise</li>
</ul>
</li>
<li>Légumes
<ul>
<li>Carotte</li>
<li>Épinard</li>
</ul>
</li>
</ul>

**Résultat :**

• Fruits
• Pomme
• Banane
• Fraise
• Légumes
• Carotte
• Épinard

17
 Résumé
- **Liste Non Ordonnée (<ul>)** : Utilisée lorsque l’ordre des éléments n’est pas important. Les éléments
sont précédés de puces. - **Liste Ordonnée (<ol>)** : Utilisée lorsque l’ordre des éléments est important. Les
éléments sont précédés de numéros. - **Listes Imbriquées** : Permettent de créer des sous-listes pour organiser
les informations de manière hiérarchique.
Les listes, y compris les listes imbriquées, facilitent la présentation d’informations de manière claire et
organisée, améliorant ainsi la lisibilité du contenu sur une page web.
Exercice d’Application

**Créez une page HTML contenant :**

1. Une liste ordonnée décrivant les étapes de votre routine matinale (par exemple, le réveil, le petit
déjeuner, etc.). 2. Une liste non ordonnée de vos fruits préférés. 3. Une liste imbriquée qui présente vos
activités de loisir, avec des sous-listes pour les différents types d’activités (par exemple, Sports, Arts,
Lecture).
**Indications :** - Utilisez les balises appropriées pour chaque type de liste. - Assurez-vous d’utiliser
des éléments de la liste (<li>) correctement.
**Objectif :** Pratiquer la création de listes ordonnées, non ordonnées et imbriquées en HTML.

Votre Réponse

1.
2.
3.
4.
5.
6.
7.
8.
9.

10.
11.
12.

13.
14.
15.
16

4.1.9 La Balise Image en HTML

La balise <img> est utilisée pour intégrer des images dans une page web. Elle est un élément auto-fermant et
nécessite plusieurs attributs pour fonctionner correctement.
Attributs de la Balise ‘¡img¿‘

- **src** : Spécifie le chemin de l’image.

- **alt** : Fournit une alternative textuelle pour l’image, utile pour l’accessibilité et le SEO.

- **width** : Définit la largeur de l’image (en pixels).

- **height** : Définit la hauteur de l’image (en pixels).

Extensions d’Images
Voici quelques-unes des extensions d’images les plus courantes :

- **.jpg / .jpeg** : Formats d’image compressés, idéaux pour les photographies.

- **.png** : Format sans perte qui supporte la transparence, idéal pour les graphiques et les logos.
- **.gif** : Format qui permet des animations, mais avec une palette de couleurs limitée.

18
 - **.svg** : Format vectoriel qui peut être redimensionné sans perte de qualité, utilisé pour des graphiques
à la fois simples et complexes.

Chemins d’Accès aux Images

Lors de l’utilisation de la balise <img>, il est essentiel de spécifier le bon chemin d’accès à l’image. Supposons
que toutes vos images sont stockées dans un dossier nommé images. Voici quelques exemples de chemins d’accès
:
1. **Image dans le même dossier que le fichier HTML** :

<img src="images/monimage.jpg" alt="Description de l’image">

2. **Image dans un sous-dossier du dossier images** :

<img src="images/sousdossier/monimage.png" alt="Description de l’image">

3. **Image avec un chemin relatif vers le dossier parent** :

<img src="../images/monimage.gif" alt="Description de l’image">

4. **Image avec un chemin absolu (URL)** :

<img src="https://www.example.com/images/monimage.svg" alt="Description de l’image">

Exemple d’Utilisation
Voici un exemple complet de la balise <img> intégrée dans un document HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d’Image</title>
</head>
<body>
<h1>Bienvenue sur ma page web</h1>
<img src="images/photo.jpg" alt="Une belle photo" width="300" height="200">
<p>Voici une image de ma collection.</p>
</body>
</html>

4.1.10 Liens Internes, Externes et Ancres

Les liens sont des éléments essentiels du web, permettant de naviguer entre différentes pages ou sections. Voici
un aperçu des différents types de liens en HTML.

1. Liens Internes

Les liens internes permettent de naviguer au sein d’un même document ou d’un même site web. Ils sont
souvent utilisés pour diriger l’utilisateur vers différentes sections de la même page.
Syntaxe :

<a href="#section1">Aller à la section 1</a>

Exemple :

19
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Liens Internes</title>
</head>
<body>
<h1>Mon Document</h1>
<p><a href="#section1">Aller à la section 1</a></p>
<p><a href="#section2">Aller à la section 2</a></p>

<h2 id="section1">Section 1</h2>

<p>Contenu de la section 1.</p>

<h2 id="section2">Section 2</h2>

<p>Contenu de la section 2.</p>
</body>
</html>

2. Liens Externes
Les liens externes dirigent l’utilisateur vers une page web située sur un autre domaine. Ils sont utilisés pour
référencer des ressources externes, comme des articles, des sites de médias sociaux, ou des documents.
Syntaxe :

<a href="https://www.example.com">Visitez Exemple</a>

Exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Liens Externes</title>
</head>
<body>
<h1>Liens Externes</h1>
<p><a href="https://www.wikipedia.org" target="_blank">Visitez Wikipédia</a></p>
</body>
</html>

3. Ancres

Les ancres permettent de créer des liens vers des emplacements spécifiques à l’intérieur d’une page web.
Elles sont souvent utilisées pour améliorer la navigation sur des pages longues.
Syntaxe : Pour définir une ancre :

<a id="ancre1"></a>

Pour créer un lien vers l’ancre :

<a href="#ancre1">Aller à l’ancre 1</a>

Exemple :

20
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple d’Ancres</title>
</head>
<body>
<h1>Mon Document</h1>
<p><a href="#ancre1">Aller à l’ancre 1</a></p>

<h2 id="ancre1">Ancre 1</h2>

<p>Voici le contenu de l’ancre 1.</p>

<h2 id="ancre2">Ancre 2</h2>

<p>Voici le contenu de l’ancre 2.</p>
</body>
</html>

Résumé

- Liens Internes : Naviguent à l’intérieur d’un même document.

- Liens Externes : Dirigent vers des pages sur d’autres sites.
- Ancres : Pointent vers des emplacements spécifiques dans une page.

Les Tableaux en HTML

21
 Les tableaux en HTML sont utilisés pour présenter des données sous forme de grille. Ils sont composés de
lignes et de colonnes, et sont définis par l’élément <table>.
Structure de Base d’un Tableau
La structure de base d’un tableau HTML est la suivante :

<table>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
<td>Donnée 3</td>
</tr>
</table>

Fusion de Cellules
Pour fusionner des cellules, vous pouvez utiliser les attributs colspan et rowspan :
- **colspan** : Permet de fusionner plusieurs colonnes. - **rowspan** : Permet de fusionner plusieurs
lignes.

4.1.11 Exemple de Fusion de Cellules

Voici un exemple de tableau avec des cellules fusionnées :

<table>
<tr>
<th colspan="2">Titre Fusionné</th>
<th>Titre 3</th>
</tr>
<tr>
<td>Donnée 1</td>
<td rowspan="2">Donnée 2 (fusionnée)</td>
<td>Donnée 3</td>
</tr>
<tr>
<td>Donnée 4</td>
<td>Donnée 5</td>
</tr>
</table>

4.1.12 Résultat
Le code ci-dessus produira un tableau affichant les informations suivantes :

Titre Fusionné Titre 3

Donnée 1 Donnée 2 (fusionnée) Donnée 3
Donnée 4 Donnée 5

22
 Exercice : Création d’une Page Simple

**Instructions :**
Créez un tableau HTML qui présente les résultats d’un sondage sur les préférences de nourriture. Le

- Nom
- Plat préféré
- Fréquence de consommation

Ajoutez une ligne avec un plat qui est très populaire et fusionnez les cellules pour afficher la fré

**Objectif :**
Pratiquer l’utilisation des tableaux, fusion de tableau.

Votre Réponse

1.
2.
3.
4.
5.
6.
7.
8.
9.

10.
11.
12.

13.
14.

Ajoutez vos propres données et testez le tableau dans un fichier HTML.

4.1.13 Les Formulaires en HTML

Les formulaires en HTML sont utilisés pour collecter des données auprès des utilisateurs. Ils permettent
d’interagir avec les utilisateurs et de soumettre des informations à un serveur.
Structure de Base d’un Formulaire
La structure de base d’un formulaire HTML utilise l’élément <form> :

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

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>

<label for="email">Email :</label>

<input type="email" id="email" name="email"><br>

<input type="submit" value="Envoyer">

</form>

4.1.14 Éléments d’un Formulaire

Voici les éléments les plus courants que vous pouvez utiliser dans un formulaire :

- <input> : Pour différents types de données (texte, email, mot de passe, etc.).

- <label> : Pour étiqueter les champs du formulaire.

- <textarea> : Pour des zones de texte multilignes.

23
 - <select> : Pour créer des menus déroulants.
- <button> : Pour créer des boutons personnalisés.

Exemple de Formulaire Complet

Voici un exemple de formulaire complet qui collecte des informations utilisateur :

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

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required><br>

<label for="email">Email :</label>

<input type="email" id="email" name="email" required><br>

<label for="message">Message :</label><br>

<textarea id="message" name="message" rows="4" cols="50"></textarea><br>

<label for="choix">Choisissez une option :</label>

<select id="choix" name="choix">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select><br>

<input type="submit" value="Envoyer">

</form>

Résultat
Le code ci-dessus produira un formulaire affichant des champs pour le nom, l’email, un message, une liste
déroulante et un bouton d’envoi.
Validation des Formulaires
La validation des formulaires est essentielle pour garantir que les données saisies par l’utilisateur sont cor-
rectes. Vous pouvez utiliser l’attribut required pour rendre un champ obligatoire. D’autres types de validation
peuvent être effectués via JavaScript ou sur le serveur.

4.1.15 Les Éléments <div> et <span> en HTML

Les éléments ‘¡div¿‘ et ‘¡span¿‘ sont des conteneurs utilisés pour structurer et styliser le contenu HTML. Bien
qu’ils aient des fonctions similaires, leur usage et leur portée diffèrent.
L’Élément <div>
L’élément ‘<div>‘ est un conteneur de bloc. Il est utilisé pour regrouper des éléments de bloc (comme des
paragraphes, des titres, des sections, etc.) et appliquer des styles ou des scripts à ces groupes.

Utilisation de <div>
- **Structuration** : Il permet de créer des sections distinctes dans une page.
- **Styling** : Vous pouvez appliquer des styles CSS à un <div> pour modifier son apparence.
- **JavaScript** : Il peut être utilisé pour manipuler des sections de la page via des scripts.

Exemple de <div>

<div class="section">
<h2>Titre de Section</h2>
<p>Ceci est un paragraphe à l’intérieur d’un div.</p>
</div>

L’Élément <span>
L’élément ‘<span>‘ est un conteneur en ligne. Il est utilisé pour appliquer des styles ou des scripts à une
partie d’un texte ou à un groupe d’éléments en ligne.
Utilisation de <span>

24
 - **Styling** : Il permet d’appliquer des styles CSS à une portion du texte sans créer de nouvelles lignes.
- **JavaScript** : Vous pouvez cibler et manipuler des éléments spécifiques dans le texte.
Exemple de <span>

<p>Ceci est un <span style="color: red;">texte en rouge</span> à l’intérieur d’un paragraphe.</p>

4.1.16 Comparaison entre <div> et <span>

- <div> :
– Conteneur de bloc.
– Crée une nouvelle ligne.
– Utilisé pour structurer des sections.
- <span> :
– Conteneur en ligne.
– N’interrompt pas le flux de texte.
– Utilisé pour styliser une partie de texte.

4.1.17 Les Balises de Structure

Le contenu d’une page web ne se limite pas uniquement au texte ou aux images. Pour une expérience utilisateur
optimale, il est essentiel de structurer la page à l’aide de balises appropriées. Cela inclut des éléments comme
le menu, la barre latérale (sidebar), et le pied de page.
Les En-têtes (<header>) et Pieds de Page (<footer>) Les balises <header> et <footer> sont utilisées
pour définir respectivement l’en-tête et le pied de page d’une page web.
- Header : Contient généralement le titre du site, le logo et les liens de navigation.
- Footer : Inclut des informations comme les droits d’auteur, les liens vers les politiques de confidentialité
ou les mentions légales.
Exemple de <header> et <footer>

<header>
<h1>Mon Site Web</h1>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
</ul>
</nav>
</header>

<footer>
<p>&copy; 2023 Mon Site. Tous droits réservés.</p>
</footer>

La Navigation (<nav>) La balise <nav> est utilisée pour regrouper les liens de navigation. Cela permet
aux utilisateurs de se déplacer facilement entre les différentes sections d’un site.

Exemple de <nav>

<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

25
 Le Contenu et les Sections (<section>) La balise <section> est utilisée pour définir des sections
thématiques d’un document. Chaque section peut contenir son propre titre et contenu.

Exemple de <section>

<section>
<h2>Titre de la Section</h2>
<p>Voici le contenu de la section.</p>
</section>

Les Articles (<article>) La balise <article> est utilisée pour encapsuler un contenu indépendant, comme
un article de blog ou une publication. Cela permet de structurer le contenu qui peut être distribué ou réutilisé.

Exemple de <article>

<article>
<h2>Titre de l’Article</h2>
<p>Contenu de l’article...</p>
</article>

La Barre Latérale (<aside>) La balise <aside> est utilisée pour définir un contenu qui est en dehors du
contenu principal, comme une barre latérale. Cela peut inclure des liens, des informations supplémentaires, ou
des publicités.

Exemple de <aside>

<aside>
<h3>Liens Utiles</h3>
<ul>
<li><a href="#link1">Lien 1</a></li>
<li><a href="#link2">Lien 2</a></li>
</ul>
</aside>

Les figures suivantes présentent les deux formes les plus utilisés.

26
 Exercice : Création d’une Page Simple

**Instructions :**
1. Donner le code HTML pour produire les images structutes de page donnée plus haut.

**Objectif :**
Maitriser les structures de page d’un document HTML.

5 Les Bases du CSS

Le CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire l’apparence et la mise en page
d’un document HTML. Il permet de séparer le contenu de la présentation, ce qui facilite la maintenance et
améliore l’accessibilité.IL CSS sert à modifier l’apparence de nos pages web en appliquant des styles au contenu
en HTML.

5.1 Sélecteurs, Propriétés et Valeurs

Sélecteurs : Un sélecteur est utilisé pour cibler un élément HTML que vous souhaitez styliser. Il peut être
basé sur le type d’élément, la classe, l’identifiant ou d’autres attributs.

Exemple de Sélecteurs

/* Sélecteur de type */
p {
color: blue;
}

/* Sélecteur de classe */
.intro {
font-size: 20px;
}

/* Sélecteur d’identifiant */
#main-title {
font-weight: bold;
}

Propriétés : Les propriétés CSS définissent les aspects de style que vous souhaitez appliquer à l’élément
ciblé. Cela peut inclure la couleur, la taille de la police, les marges, etc.

Exemple de Propriétés

h1 {
color: red; /* Couleur du texte */
font-size: 24px; /* Taille de la police */
margin: 10px; /* Marge autour de l’élément */
}

Valeurs : Les valeurs sont les spécifications que vous attribuez aux propriétés. Elles peuvent être des
couleurs, des longueurs, des mots-clés, etc.

Exemple de Valeurs

p {
background-color: yellow; /* Couleur de fond */
padding: 15px; /* Espacement intérieur */
}

27
 Figure 6: Illustration de Sélecteurs, Propriétés et Valeurs

5.2 Où Écrire le CSS ?

Il existe plusieurs façons d’intégrer le CSS dans un document HTML. Chacune a ses spécificités et son utilisation
appropriée.

5.2.1 CSS Inline

Le CSS inline est appliqué directement dans l’attribut style d’un élément HTML. Bien que cela soit pratique
pour des styles uniques, cela peut rendre le code difficile à maintenir.

Exemple de CSS Inline

<p style="color: blue; font-size: 20px;">Ceci est un texte en bleu.</p>

5.2.2 CSS Internes

Le CSS interne est écrit dans une balise <style> dans l’en-tête (<head>) du document HTML. Cela permet de
styliser une page spécifique sans affecter d’autres pages.

Exemple de CSS Interne

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Titre de la Page</h1>
</body>
</html>

5.2.3 CSS Externes

Le CSS externe est écrit dans un fichier séparé avec l’extension .css. Cela permet de réutiliser le même fichier
sur plusieurs pages, facilitant la maintenance et le chargement.

28
 Exemple de CSS Externe

/* styles.css */
body {
font-family: Arial, sans-serif;
}

p {
color: purple;
}

Et voici comment lier ce fichier à un document HTML :

HTML avec CSS Externe

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Ceci est un texte violet.</p>
</body>
</html>

5.3 Les commentaires en CSS

On a déjà vu que l’on pouvait commenter en HTML. Cela est également possible en CSS. Les fichiers CSS
deviennent rapidement très long (beaucoup plus que les fichiers HTML par exemple) donc si vous ne commentez
pas efficacement vous risquez d’être très vite perdu. De plus, si vous distribuez votre code, je pense que la
personne sera contente d’avoir quelques lignes de commentaires pour l’aider à trouver ce qu’elle cherche au
milieu de 2000 lignes de code.

Exemple de Commentaires

/* Ceci est un commentaire en CSS */

/* Début des styles pour le corps */

body {
background-color: lightblue; /* Couleur de fond */
color: black; /* Couleur du texte */
}
/* Fin des styles pour le corps */

5.4 Sélecteurs Simples et Limitations

Jusqu’à présent, nous n’avons manipulé que des sélecteurs que l’on appelle simples , car ils correspondent à
des éléments HTML seuls et sans attributs (par exemple, le sélecteur p). Ce type de sélecteur doit être préféré
tant que possible pour des raisons d’optimisation et de performance du code.
En effet, les sélecteurs simples requièrent moins de code et sont donc moins gourmands en énergie que des
sélecteurs plus complexes. Votre page mettra ainsi moins de temps à charger.

5.4.1 Limitations des Sélecteurs Simples

Le problème reste qu’on est limité avec des sélecteurs simples : comment appliquer un style différent à deux
éléments de même type, comme deux paragraphes par exemple ? C’est ici que les attributs class et id entrent
en jeu.

5.4.2 Attributs class et id

Les attributs class et id ont été créés pour pouvoir appliquer différents styles à des éléments de même type.

29
 - **Class** : Permet d’appliquer le même style à plusieurs éléments.

- **Id** : Permet d’appliquer un style unique à un seul élément.

Pour utiliser ces attributs, placez-vous dans la balise ouvrante d’un élément HTML, écrivez le nom de
l’attribut (class ou id), et donnez-lui une valeur cohérente. Cette valeur ne doit contenir ni de caractères
spéciaux (accents et autres) ni d’espace. Par exemple :

Exemple d’Attributs class et id

<p class="intro">Ceci est un paragraphe d’introduction.</p>

<p class="conclusion">Ceci est un paragraphe de conclusion.</p>
<p id="unique">Ceci est un paragraphe unique.</p>

Pour mieux comprendre l’utilisation des sélecteurs, voici une illustration :

Figure 7: Illustration des sélecteurs en CSS

Ensuite, on retourne sur le fichier CSS. Pour commencer notre déclaration, nous devons utiliser un point (.)
là où nous avons utilisé un attribut class et un dièse (#) si nous avons utilisé un attribut id. Après le point
ou le dièse, on écrit la valeur de l’attribut en question pour former notre sélecteur. Enfin, on écrit le code CSS
voulu. Voici un exemple en pratique :

Exemple de Déclaration CSS

.intro {
font-size: 18px;
color: blue;
}

#unique {
font-weight: bold;
color: red;
}

Figure 8: Illustration des sélecteurs class et id

30
 Nous pouvons maintenant appliquer un style différent à chaque élément HTML grâce aux attributs class
et id.
Pourquoi avoir créé deux attributs pour faire la même chose ? En fait, il existe une différence notable entre
class et id : un attribut id avec une valeur précise ne peut être utilisé qu’une seule fois dans une page, au
contraire de class.
L’attribut id sera donc utilisé pour des éléments uniques dans une page web, comme le logo de votre site
par exemple. En revanche, vous pouvez utiliser plusieurs attributs class identiques (c’est-à-dire ayant la même
valeur) dans une page. C’est d’ailleurs une des méthodes que nous utiliserons pour appliquer un même style
à différents éléments. Notez que, dans l’exemple précédent, utiliser deux attributs class n’est pas la meilleure

Figure 9: Illustration des sélecteurs class et id

solution. Nous voilà déjà un peu moins limités. Cependant, nous ne pouvons pour le moment appliquer un style
qu’à un contenu entre balises. Effectivement, on ne pourrait pas appliquer de style particulier au mot attributs
de notre titre dans l’exemple précédent. Pour remédier à cela, on a inventé les deux éléments HTML div et
span.

5.5 Les Éléments div et span

Les éléments div et span sont deux des balises HTML les plus utilisées pour structurer et styliser le contenu
d’une page web. Bien qu’ils semblent similaires, ils ont des usages distincts.
1. L’Élément div
L’élément div (abréviation de ”division”) est un conteneur utilisé pour regrouper des éléments HTML. Il s’agit
d’un élément de bloc, ce qui signifie qu’il occupe toute la largeur disponible de son conteneur parent et commence
sur une nouvelle ligne.

Exemple d’Élément div

<div class="container">
<h1>Titre Principal</h1>
<p>Ceci est un paragraphe à l’intérieur d’un div.</p>
</div>

L’élément div est souvent utilisé pour appliquer des styles communs à plusieurs éléments ou pour structurer
le contenu d’une page, comme des sections, des colonnes, etc.
2. L’Élément span
L’élément span est un conteneur en ligne. Contrairement à div, il n’interrompt pas le flux du texte et ne
commence pas sur une nouvelle ligne. Il est principalement utilisé pour styliser une partie d’un texte ou un
petit groupe d’éléments.

Exemple d’Élément span

<p>Ceci est un <span class="highlight">texte surligné</span> dans un paragraphe.</p>

L’élément span est utile pour appliquer des styles à des mots ou des phrases spécifiques sans affecter
l’ensemble du bloc.

31
 Figure 10: Illustration des sélecteurs class et id

5.6 Les éléments de type block et inline

En HTML, tout élément est soit de type block, soit de type inline. Par exemple, div est un élément de type block
tandis que span est un élément de type inline. Les éléments de type block sont fondamentalement différents
des éléments de type inline en HTML et il est essentiel de bien comprendre les différences entre ces deux types
si vous voulez un jour créer un site Internet, ne serait-ce que pour des raisons de mise en page. Afin que vous

Figure 11: Illustration des sélecteurs class et id

compreniez bien la différence entre les deux types d’éléments, voyons ensemble quelques exemples d’éléments
de type inline ou block pour que vous puissiez observer leur comportement.

Figure 12: Illustration des sélecteurs class et id

Illustrons ce que nous venons de dire en regardant par exemple de plus près le comportement des éléments
p et em : On voit bien dans l’exemple ci-dessus les différences citées dans cette partie entre les éléments de

Figure 13: Illustration des sélecteurs class et id

32
type block et inline. On a mis des bordures autour des paragraphes afin que vous soyez bien convaincu qu’un
élément de type block occupe toujours toute la largeur disponible.

5.7 Les sélecteurs avancés

Les sélecteurs avancés sont l’une des grandes forces du CSS. En effet, grâce à eux, nous allons pouvoir cibler du
contenu très précisément et assez simplement. Il faut savoir qu’il existe de très nombreux sélecteurs avancés en
CSS et on ne présentera que les plus utiles :

Figure 14: Illustration des sélecteurs class et id

5.8 La notion d’héritage

L’héritage est une notion centrale et fondamentale du CSS. L’héritage signifie que tout élément HTML va hériter
des styles de ses parents (c’est le fameux cascading ). En HTML, si un élément A est inclus dans un élément
B ; l’élément A s’appellera l’enfant et l’élément B sera le parent de l’élément A. Ainsi, si l’on applique un style
à l’élément B, l’élément A en héritera automatiquement.

Figure 15: Illustration des sélecteurs class et id

Ici, l’élément body est le parent des éléments h1 et p, puisque les éléments h1 et p sont bien contenus dans
l’élément body. Ainsi, lorsqu’on applique un style à l’élément body (ici, mettre le texte en rouge), les éléments
p et h1 héritent automatiquement de ce style. Que se passe-t-il lorsque l’on donne deux ordres contradictoires à
un élément parent et à son enfant en CSS (par exemple, donner une couleur rouge au parent et bleue à l’enfant)
? Le CSS possède ici sa logique et le style appliqué sera celui le plus proche de l’élément en question. Cela
signifie que si on applique un style à un élément enfant, c’est bien ce style qui lui sera appliqué.

6 Formatage du Texte et Positionnement des Éléments

6.1 Les Propriétés de Type Font-
6.1.1 La Propriété font-size
La propriété font-size permet de définir la taille de la police d’un texte. Elle peut être spécifiée de différentes
manières, notamment en utilisant des unités absolues (comme ‘px‘, ‘pt‘) ou relatives (comme ‘em‘, ‘rem‘).

33
 Figure 16: Illustration des sélecteurs class et id

Exemple de font-size

p {
font-size: 16px; /* Taille de police fixe */
}

h1 {
font-size: 2em; /* Taille de police relative */
}

6.1.2 La Propriété font-style

La propriété font-style permet de définir le style de la police. Elle peut prendre les valeurs suivantes :
- **normal** : La valeur par défaut, pour une police normale. - **italic** : Pour afficher le texte en italique.
- **oblique** : Similaire à l’italique, mais peut avoir des variations selon la police.

Exemple de font-style

p.normal {
font-style: normal; /* Texte normal */
}

p.italic {
font-style: italic; /* Texte en italique */
}

p.oblique {
font-style: oblique; /* Texte en oblique */
}

6.1.3 La Propriété font-weight

La propriété font-weight permet de définir l’épaisseur de la police. Elle peut prendre les valeurs suivantes :
- **normal** : Épaisseur par défaut. - **bold** : Pour un texte en gras. - **bolder** : Plus épais que
le texte parent. - **lighter** : Plus léger que le texte parent. - **100 à 900** : Valeurs numériques pour un
contrôle précis.

Exemple de font-weight

h1 {
font-weight: bold; /* Texte en gras */
}

p {
font-weight: 300; /* Texte léger */
}

34
6.1.4 La Propriété line-height
La propriété line-height définit l’espacement entre les lignes de texte. Elle peut être spécifiée en unités
relatives ou absolues. Une bonne utilisation de cette propriété améliore la lisibilité.

Exemple de line-height

p {
line-height: 1.5; /* Espacement 1.5 fois la taille de la police */
}

6.1.5 La Propriété font-family

La propriété font-family permet de définir la police à utiliser pour le texte. Vous pouvez spécifier plusieurs
polices en les séparant par des virgules, ce qui permet au navigateur de choisir la première police disponible.

Exemple de font-family

body {
font-family: ’Arial’, ’Helvetica’, sans-serif; /* Polices de secours */
}

6.1.6 Les Web Safe Fonts

Les web safe fonts sont des polices qui sont généralement disponibles sur la plupart des systèmes d’exploitation
et des navigateurs. Voici quelques exemples :
- Arial - Verdana - Times New Roman - Georgia - Courier New
Utiliser ces polices garantit que votre texte sera affiché de manière cohérente sur différents appareils et
navigateurs.

6.1.7 La Propriété color

La propriété color permet de définir la couleur du texte. Elle peut être spécifiée en utilisant des noms de
couleurs, des valeurs hexadécimales, ou des valeurs RGB.

Exemple de color

h1 {
color: blue; /* Couleur par nom */
}

p {
color: #ff5733; /* Couleur en hexadécimal */
}

a {
color: rgb(255, 0, 0); /* Couleur en RGB */
}

7 Formatage du Texte et Positionnement des Éléments

7.1 Les Propriétés de Type Text-
Les propriétés de type text- en CSS permettent de contrôler l’apparence et le comportement du texte. Elles
incluent l’alignement, la décoration, l’indentation, la transformation, l’espacement des lettres et des mots, ainsi
que les ombres des textes.

7.1.1 L’Alignement d’un Texte

La propriété text-align permet de définir l’alignement du texte à l’intérieur d’un bloc. Les valeurs possibles
incluent :

35
 Figure 17: Illustration des sélecteurs class et id

- **left** : Aligne le texte à gauche (valeur par défaut).

- **right** : Aligne le texte à droite. **center** : Centre le texte.

- **justify** : Justifie le texte sur toute la largeur du conteneur.

Exemple de text-align

h1 {
text-align: center; /* Titre centré */
}

p {
text-align: justify; /* Paragraphe justifié */
}

7.1.2 La Propriété text-decoration

La propriété text-decoration permet d’ajouter des décorations au texte, comme des soulignements, des lignes
au-dessus, ou des barrages. Voici quelques valeurs :
- **none** : Pas de décoration (valeur par défaut). - **underline** : Souligne le texte. - **overline** :
Ajoute une ligne au-dessus du texte. - **line-through** : Barrer le texte.

Exemple de text-decoration

a {
text-decoration: underline; /* Lien souligné */
}

p.strike {
text-decoration: line-through; /* Texte barré */
}

7.1.3 La Propriété text-indent

La propriété text-indent permet de définir l’indentation du premier ligne d’un bloc de texte. Elle peut être
spécifiée en unités absolues ou relatives.

Exemple de text-indent

p {
text-indent: 20px; /* Indentation de 20 pixels */
}

36
7.1.4 La Propriété text-transform
La propriété text-transform permet de contrôler la casse du texte. Les valeurs incluent :
- **none** : Pas de transformation (valeur par défaut). - **capitalize** : Met en majuscule la première
lettre de chaque mot. - **uppercase** : Transforme tout le texte en majuscules. - **lowercase** : Transforme
tout le texte en minuscules.

Exemple de text-transform

h1 {
text-transform: uppercase; /* Titre en majuscules */
}

p {
text-transform: capitalize; /* Paragraphe avec la première lettre de chaque mot en majuscule */
}

7.1.5 Les Propriétés letter-spacing et word-spacing

Les propriétés letter-spacing et word-spacing permettent de contrôler l’espacement entre les lettres et les
mots respectivement.
- **letter-spacing** : Définit l’espacement entre les caractères. - **word-spacing** : Définit l’espacement
entre les mots.

Exemple de letter-spacing et word-spacing

p {
letter-spacing: 1px; /* Espacement de 1 pixel entre les lettres */
word-spacing: 2px; /* Espacement de 2 pixels entre les mots */
}

7.1.6 Les Ombres des Textes

La propriété text-shadow permet d’ajouter des ombres au texte, ce qui peut améliorer la lisibilité et ajouter
un effet visuel attrayant. Elle accepte plusieurs valeurs : décalage horizontal, décalage vertical, flou, et couleur
de l’ombre.

Exemple de text-shadow

h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre de 2 pixels à droite et en bas */
}

7.1.7 Le Modèle des Boı̂tes

Le modèle des boı̂tes est un concept essentiel : tout élément d’une page est une boı̂te rectangulaire et peut
avoir un padding, une marge et des bordures . Cela mérite d’être répété : tout élément, qu’il soit un élément
de type block ou de type inline, est une boı̂te rectangulaire. Les propriétés permettant d’indiquer la longueur,
la largeur, la marge, le padding et les bordures d’un élément forment ce qu’on appelle le modèle des boı̂tes.
La première boı̂te est définie par la longueur et la largeur d’un élément. La padding, ou marge intérieure,

37
forme ensuite la seconde boı̂te. Puis viennent les bordures qui constituent la troisième boı̂te. Enfin, la marge
extérieure vient former la quatrième et dernière boı̂te.

7.1.8 Hauteur et largeur d’un élément

Tout élément possède une hauteur et une largeur par défaut. La hauteur d’un élément est déterminée par son
contenu. Par exemple, des paragraphes d’une ligne ou de deux lignes n’occuperont pas la même hauteur. La
largeur par défaut d’un élément est avant tout déterminée par son type (block ou inline) puis par son contenu si
l’élément est de type inline. En effet, rappelez vous que les éléments de type block occupent automatiquement
toute la largeur disponible. Pour modifier la hauteur d’un élément, on utilise la propriété height à laquelle
on attribue une valeur en px, En utilisant la valeur auto, on laisse le navigateur de nos visiteurs décider de la
hauteur que doit prendre l’élément visé. Cela est très utile dans le cas où l’on veut conserver les proportions
d’une image tout en l’adaptant à la taille de l’écran de nos visiteurs. Pour modifier la largeur d’un élément, on
utilise cette fois la propriété width. Cette propriété prend les mêmes types de valeurs que height.

7.1.9 Les bordures et les bordures arrondies

Il existe de nombreuses sortes de bordures dont certaines sont plus ou moins bien supportées par certains
navigateurs. Pour créer des bordures et les personnaliser, nous allons avoir besoin de trois propriétés :
- Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;
- Border-style, qui va définir le style de la bordure ;

- Border-color, qui va définir la couleur de la bordure (accepte les mêmes valeurs que la propriété color ).
La propriété border-style peut prendre de nombreuses valeurs différentes. Les valeurs les plus utilisées sont
solid, dotted (pointillé) et dashed (tiret). Vous pouvez voir ci-dessous le résultat pour chaque style de bordure
:

38
 Et voici un exemple d’utilisation des propriétés de type border :

Une fonctionnalité longtemps attendue par les webmasters et les développeurs et qui a vu le jour avec le
CSS3 est la possibilité de créer des bordures arrondies. Pour faire cela, nous allons utiliser la propriété border-
radius. Cette propriété va prendre une valeur : la taille de l’angle, en px. Notez que l’on peut définir des
angles différents pour chaque côté de nos bordures en utilisant les mots clefs top-left, top-right, bottom-left et
bottom-right. Notez également que ces mots clefs sont souvent employés en CSS, ensemble ou séparément (que

top, ou que left par exemple). N’hésitez donc pas à les tester avec certaines propriétés déjà vues ou que l’on va
voir !

7.1.10 Les marges intérieures

Pour définir les marges intérieures d’un élément, nous utiliserons la propriété padding. On peut considérer
qu’un élément HTML possède toujours une bordure. Celle-ci peut être explicite, c’est-à-dire matérialisée à
l’aide des propriétés CSS vues précédemment ou implicite (invisible). La propriété padding va définir l’espace
entre l’élément en soi et sa bordure. Cette propriété doit être utilisée uniquement dans ce but, et jamais pour
positionner des éléments dans une page ou les uns par rapport aux autres. On donnera généralement une valeur
en px à padding. Notez que l’on peut définir des espacements

7.1.11 Les marges extérieures

Pour définir la taille des marges extérieures, c’est-à-dire de l’espace à l’extérieur des bordures d’un élément, nous
allons utiliser la propriété margin. Contrairement à la propriété padding, la propriété margin peut tout-à-fait

39
être utilisée pour positionner des éléments dans une page ou les uns par rapport aux autres. Nous attribuerons
généralement des valeurs en px ou en % à cette propriété. Tout comme la propriété padding, nous allons pouvoir
des marges différentes de chaque côté de nos éléments avec les propriétés margin-right, margin-bottom, margin-
left et margin-top. Notez que les valeurs par défaut des marges intérieures et extérieures peuvent légèrement
différer d’un navigateur à un autre. Cela peut impacter le design général de votre site pour certains de vos
visiteurs. Afin de s’assurer que chaque visiteur verra un résultat conforme à nos attentes, nous pouvons utiliser
un reset CSS pour notre padding et notre margin. Dans ce cas là, c’est très simple, il suffit par exemple
d’appliquer un padding et une margin avec des valeurs égales à zéro à notre élément body. Ensuite, on précisera
les différentes marges souhaitées à nos éléments enfants.

7.1.12 Les ombres des boı̂tes

On peut créer des ombres autour des boı̂tes, tout comme on l’avait fait pour nos textes précédemment. Nous
allons cette fois-ci utiliser la propriété box-shadow. Cette dernière fonctionne exactement comme text-shadow,
avec deux valeurs obligatoires et quatre recommandées pour marcher :
- 1ère valeur : déplacement horizontal de l’ombre ;
- 2ème valeur : déplacement vertical de l’ombre ;

- 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;

- 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété color ).
Notez que dans le cas des ombres des boı̂tes, il peut être intéressant de rajouter à la fin une dernière valeur,
l’inset, si l’on souhaite créer une ombre intérieure.

40
7.1.13 Faire flotter un élément
Pour aligner des éléments les uns par rapport aux autres, on peut les faire flotter . Pour faire flotter un élément,
nous utiliserons la propriété float avec les valeurs suivantes : left, right, none ou inherit. Un élément flottant
va sortir du schéma naturel (du flow ) d’une page web pour venir se placer contre le bord gauche ou droit de
l’élément qui le contient ou contre le bord de la page. Lorsque l’on fait flotter un élément, les éléments après
l’élément flottant vont venir se positionner à côté de celui-ci.

Dans l’exemple ci-dessus, on remarque que l’élément strong, contenu dans l’élément p2, va venir se placer
dans le coin à droite de son élément parent (l’élément p2 donc). L’élément p1 va lui se placer à gauche dans la
page tandis que l’élément p2 va se placer à droite ; à côté de l’élément p1. Généralement, on utilisera plutôt
la propriété float sur des éléments de type inline comme des images par exemple. En effet, cette propriété
peut être la cause de problème d’affichages lorsqu’elle est mal utilisée sur des éléments de type block. Si l’on
veut qu’un élément suivant un élément flottant vienne se placer sous cet élément flottant, il faudra utiliser la
propriété clear. Celle-ci accepte trois valeurs : left, right ou both :
- left : un élément va se placer en dessous après un float left ;
- right : un élément va se placer en dessous après un float right ;
- both : un élément va se placer en dessous après un float left ou un float right.

7.1.14 La propriété display

La propriété display est une propriété extrêmement puissante : elle permet de changer le type d’un élément de
block à inline ou d’inline à block. Cette propriété supporte quatre valeurs différentes qui correspondent aux

41
différents types d’éléments possibles : inline, block, inline-block et none. La nouveauté ici est le type inline-
block. Ce nouveau type ne peut être donné à un élément que grâce à la propriété display. Il va être un mix des
types inline et block. Un élément de type inline-block se comporte de cette façon : l’élément en soi (contenu et
boı̂tes) se comporte comme un type block tandis que le contenu seulement se comporte comme un type inline.
Pour le dire plus simplement, un élément de type inline-block se comportera comme un élément de type inline
excepté que l’on va pouvoir contrôler précisément sa hauteur et sa largeur.

7.1.15 La propriété position

La propriété position est une autre propriété très puissante nous permettant de définir l’emplacement d’éléments
HTML dans une page. Cette propriété peut prendre cinq valeurs :
- Static : valeur par défaut, ne change pas la position de base d’un élément ;
- Absolute : permet de positionner un élément n’importe où dans la page, par rapport à son élément parent
direct ;
- Fixed : permet de positionner un élément n’importe où dans la page. De plus, l’élément reste visible si
vous descendez ou remontez le long d’une page ;
- Relative : permet de replacer un élément relativement par rapport à son positionnement par défaut ;
- Inherit : l’élément hérite des propriétés de son parent.
Pour ensuite jouer sur la position des éléments, on utilise les mots clefs right, bottom, left et top.
Dans cet exemple, notre paragraphe p1 a un positionnement fixed et a été décalé de 80px sur la gauche
par rapport au bord de la page. Le paragraphe p2 possède lui une position relative. Il a été décalé de 50px
par rapport à son positionnement de base (par défaut, il aurait été placé au dessus de notre p1 à cause de son
positionnement fixed). L’élément strong possède un positionnement absolute. Sans notre left :150px, il aurait
été collé sur le bord gauche de son élément parent, l’élément p2. Notez qu’un positionnement absolute sur un
élément annule la propriété float si on lui en a appliqué une.

42
7.1.16 Le z-index
Parfois, lorsque l’on crée le design de pages web, il arrive que deux éléments se chevauchent selon certaines
circonstances. Il peut alors être utile de savoir comment indiquer quel élément doit apparaı̂tre au dessus de quel
autre en cas de chevauchement. Pour cela, nous utiliserons la propriété z-index. Celle-ci fonctionne avec tous
les éléments positionnés et permet d’indiquer quel élément doit être au dessus de quel autre en cas de conflit.
Un élément positionné est un élément auquel on a appliqué la propriété position avec une valeur soit absolute,
soit relative, soit fixed. Le z-index ne fonctionnera donc pas sur des éléments positionnés en static (qui est la
valeur par défaut).

Dans l’exemple précédent, par défaut, l’élément p2 devrait être par dessus l’élément p1. Or, en appliquant un
z-index avec une valeur plus élevée à p1, on arrive à refaire passer p1 par dessus p2 (on peut le voir au niveau des
bordures). 3.3.10. Notations long-hand et short-hand On peut écrire les trois propriétés relatives aux bordures
sous la forme condensée d’une seule propriété border. La première écriture, avec les trois propriétés de type
border, est ce que l’on appelle une notation long-hand, tandis que la forme condensée est une notation short-
hand. Jusqu’à présent, on a fait écrire que des propriétés sous leur forme long-hand afin que vous compreniez
bien les bases et la logique du CSS et afin de ne pas compliquer inutilement les choses. Dorénavant, vous avez
tout à fait le niveau pour utiliser des notations short-hand et je vous encourage à les utiliser dès que possible
(celles-ci sont plus rapides à écrire et donc moins gourmandes en code et en temps d’exécution). Voici ci-dessous
une liste de quelques propriétés acceptant une écriture short-hand. Encore une fois, écrire une propriété sous
sa forme long-hand ou short-hand produira exactement le même résultat.

43
8 Fonctionnalités Avancées
8.1 Gestion du Background
La gestion du background (arrière-plan) en CSS permet d’améliorer l’esthétique d’une page web. Cela inclut
l’ajout de couleurs, d’images, ainsi que le contrôle de leur position et de leur comportement de défilement.

8.1.1 Ajouter de la Couleur ou une Image pour le Fond

Pour ajouter une couleur d’arrière-plan à un élément, on utilise la propriété background-color. Pour ajouter
une image, on utilise la propriété background-image. Voici des exemples :

Exemple de background-color et background-image

body {
background-color: lightblue; /* Couleur de fond */
}

.header {
background-image: url(’image.jpg’); /* Image de fond */
background-size: cover; /* Couvre tout l’élément */
}

Propriétés Associées - **background-repeat** : Contrôle si l’image de fond se répète. Valeurs possibles :

- **repeat** : Répète l’image.

- **no-repeat** : N’affiche l’image qu’une seule fois.

- **repeat-x** : Répète l’image horizontalement.
- **repeat-y** : Répète l’image verticalement.

Exemple de background-repeat

.header {
background-image: url(’image.jpg’);
background-repeat: no-repeat; /* Pas de répétition */
}

8.1.2 Position et Répétition du Fond

La position de l’image de fond peut être contrôlée avec la propriété background-position. Les valeurs possibles
incluent :
- **top**, **bottom**, **left**, **right**, **center** : Pour positionner l’image.

44
 Exemple de background-position

.header {
background-image: url(’image.jpg’);
background-position: center; /* Centre l’image */
}

Exemple Complet Voici un exemple combiné de toutes ces propriétés :

Exemple Complet de Gestion du Background

body {
background-color: lightblue; /* Couleur de fond */
}

.header {
background-image: url(’image.jpg’);
background-repeat: no-repeat; /* Pas de répétition */
background-position: center; /* Centre l’image */
background-size: cover; /* Couvre tout l’élément */
}

8.1.3 Fixer le Fond ou le Faire Défiler avec la Page

La propriété background-attachment permet de contrôler si l’arrière-plan défile avec le contenu ou reste fixe.
- **scroll** : L’arrière-plan défile avec le contenu (valeur par défaut).
- **fixed** : L’arrière-plan reste fixe lorsque vous faites défiler la page.
- **local** : L’arrière-plan défile avec le contenu de l’élément.

Exemple de background-attachment

.header {
background-image: url(’image.jpg’);
background-attachment: fixed; /* Fond fixe */
}

8.2 Intégrer des Images, de l’Audio et de la Vidéo

8.2.1 Insérer une Image
Pour insérer une image dans une page web, on utilise la balise HTML <img>. Voici la syntaxe de base :

Syntaxe de la Balise <img>

<img src="chemin/vers/image.jpg" alt="Description de l’image">

Attributs de la Balise <img> - **src** : Définit le chemin de l’image. - **alt** : Fournit une description
alternative de l’image pour les lecteurs d’écran et lorsque l’image ne peut pas être affichée. - **width** et
**height** : Permettent de définir la largeur et la hauteur de l’image.

8.2.2 Ajuster et Positionner une Image

Pour ajuster et positionner une image, vous pouvez utiliser des styles CSS. Voici quelques propriétés utiles :
Propriétés CSS pour Ajuster une Image
- **width** : Définit la largeur de l’image.
- **height** : Définit la hauteur de l’image.
- **object-fit** : Contrôle comment l’image doit s’ajuster dans son conteneur.
Les valeurs possibles sont :

45
 - **cover** : L’image couvre entièrement le conteneur, pouvant être coupée.
- **contain** : L’image est mise à l’échelle pour s’adapter entièrement au conteneur, sans être coupée.
- **fill** : L’image s’étire pour remplir le conteneur.

Exemple d’Ajustement d’Image

.img-responsive {
width: 100%; /* S’adapte à la largeur du conteneur */
height: auto; /* Conserve les proportions */
}

.img-cover {
width: 300px;
height: 200px;
object-fit: cover; /* Couvre le conteneur */
}

Positionner une Image Pour positionner une image, vous pouvez utiliser les propriétés de positionnement
CSS. Voici quelques exemples :
- **float** : Permet de faire flotter l’image à gauche ou à droite du texte. - **margin** : Ajoute de l’espace
autour de l’image. - **position** : Contrôle le positionnement absolu ou relatif.

Exemple de Positionnement d’Image

.img-float-left {
float: left; /* Fait flotter l’image à gauche */
margin: 10px; /* Ajoute une marge de 10 pixels */
}

.img-center {
display: block; /* Rend l’image un bloc */
margin-left: auto; /* Centrer horizontalement */
margin-right: auto; /* Centrer horizontalement */
}

Exemple Complet Voici un exemple combiné d’insertion et de positionnement d’une image :

Exemple Complet d’Insertion et d’Ajustement d’Image

<img src="image.jpg" alt="Une belle image" class="img-responsive img-float-left">

<p>Voici un texte à c^
oté de l’image flottante à gauche.</p>

8.2.3 Intégrer de l’Audio

Pour intégrer de l’audio, on utilise la balise <audio>. Cette balise permet d’incorporer des fichiers audio dans
une page web, offrant ainsi une expérience interactive aux utilisateurs. Les formats pris en charge incluent MP3,
WAV et OGG, ce qui garantit une large compatibilité avec les navigateurs modernes.
L’utilisation de la balise <audio> est simple et intuitive. En ajoutant l’attribut **controls**, vous permettez
aux utilisateurs de contrôler la lecture audio (play, pause, volume), ce qui améliore l’accessibilité et l’interaction.

Exemple de Balise <audio>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l’élément audio.
</audio>

Attributs de la Balise <audio>

- **controls** : Affiche les contrôles de lecture.
- **autoplay** : Joue l’audio automatiquement lors du chargement de la page (à utiliser avec précaution).

46
 - **loop** : Fait jouer l’audio en boucle, utile pour les musiques d’ambiance.
En utilisant cette balise, vous pouvez enrichir votre contenu avec des effets sonores, de la musique de fond,
ou des narrations, rendant votre page plus engageante.

8.2.4 Intégrer de la Vidéo

Pour intégrer une vidéo, la balise <video> est utilisée. Cette balise permet d’incorporer des fichiers vidéo
dans une page web, offrant ainsi un moyen puissant de transmettre des informations visuelles et auditives. Les
formats courants incluent MP4, WebM et OGG, ce qui assure une large compatibilité entre les navigateurs.
La balise <video> offre également une interface utilisateur intégrée grâce à l’attribut **controls**, permet-
tant aux utilisateurs de démarrer, arrêter, et contrôler le volume de la vidéo.

Exemple de Balise <video>

<video width="640" height="360" controls>

<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas l’élément vidéo.
</video>

Attributs de la Balise <video>

- **controls** : Affiche les contrôles de lecture.

- **autoplay** : Joue la vidéo automatiquement lors du chargement de la page (à utiliser avec prudence).
- **loop** : Fait jouer la vidéo en boucle, idéal pour les présentations ou les démonstrations.
- **muted** : Démarre la vidéo sans le son, souvent utilisé avec l’attribut **autoplay** pour éviter les
surprises sonores.

8.3 TP Corrigé:
Énoncé de l’Exercice
Créer un formulaire HTML permettant de collecter les informations suivantes :
- Nom

- Prénom
- Email
- Genre (avec des radio buttons)
- Spécialité (avec une select box)

- Message
Le formulaire doit également inclure des boutons pour valider et annuler.

Correction
Voici les fichiers HTML et CSS :
Fichier HTML : formulaire.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de Contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

47
 <h1>Formulaire de Contact</h1>
<form action="#" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>

<label for="prenom">Prénom :</label>

<input type="text" id="prenom" name="prenom" required>

<label for="email">Email :</label>

<input type="email" id="email" name="email" required>

<label>Genre :</label>
<input type="radio" id="homme" name="genre" value="homme" required>
<label for="homme">Homme</label>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>

<label for="specialite">Spécialité :</label>

<select id="specialite" name="specialite" required>
<option value="">Choisissez une spécialité</option>
<option value="informatique">Informatique</option>
<option value="mathematiques">Mathématiques</option>
<option value="sciences">Sciences</option>
</select>

<label for="message">Message :</label>

<textarea id="message" name="message" rows="4" required></textarea>

<button type="submit">Valider</button>
<button type="reset">Annuler</button>
</form>
</body>
</html>

Fichier CSS : style.css

form {
width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}

label {
display: block;
margin-bottom: 8px;
}

input, select, textarea {

width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 15px;
background-color: #4CAF50;

48
 color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}

button[type="reset"] {
background-color: #f44336; /* Couleur pour le bouton Annuler */
}

Énoncé
Créer un en-tête pour un site web avec les éléments suivants :

- Un logo à gauche avec un slogan.

- Un menu de navigation avec les éléments : Home, About Us, Our Products, Careers, Contact Us.
- Une image d’arrière-plan stylisée.

Correction : Voici les fichiers HTML et CSS nécessaires :

Fichier HTML : header.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<div class="logo">
<img src="images/logo.png" />
<span class="slogan">A Computer Science Portal for Geeks</span>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

49
 </nav>
</header>

<div class="background-image"></div>

<div class="description">
<h2>A Basic Web Design course by GeeksforGeeks</h2>
</div>

</body>
</html>

Fichier CSS : style.css

body {
margin: 0;
font-family: Arial, sans-serif;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: white;
}

.logo {
font-size: 24px;
font-weight: bold;
}

.slogan {
font-size: 14px;
color: #666;
margin-left: 10px;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}

.background-image {
background-image: url(’background.jpg’); /* Remplacez par votre image */
height: 300px; /* Ajustez la hauteur selon vos besoins */
background-size: cover;
background-position: center;
}

50
.description {
text-align: center;
padding: 20px;
}

TP3 : Réalisation d’un formulaire

Énoncé

Créer un pied de page (footer) pour un site web avec les éléments suivants :
- Informations de contact (adresse, téléphone, email)

- Liens vers les réseaux sociaux (Facebook, Twitter, LinkedIn)

- Mention de copyright

Correction:
Voici les fichiers HTML et CSS nécessaires :

Fichier HTML : footer.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<footer>
<div class="contact-info">
<h3>Contact Us</h3>
<p>Address: 123 Main Street, City, Country</p>
<p>Phone: +1 234 567 890</p>
<p>Email: [email protected]</p>
</div>
<div class="social-media">
<h3>Follow Us</h3>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
</div>
<div class="copyright">
<p>&copy; 2023 Your Company Name. All rights reserved.</p>
</div>
</footer>

</body>
</html>

Fichier CSS : style.css

body {
margin: 0;
font-family: Arial, sans-serif;
}

footer {
background-color: #333;

51
 color: white;
text-align: center;
padding: 20px;
position: relative;
bottom: 0;
width: 100%;
}

.contact-info, .social-media {
margin: 10px 0;
}

.social-media a {
text-decoration: none;
color: #4CAF50; /* Couleur pour les liens */
margin: 0 10px;
}

.social-media a:hover {
text-decoration: underline;
}

Exercice div
Donner la page HTML et CSS pour la réalisation du footer donner en image.

Figure 18: Illustration de Sélecteurs, Propriétés et Valeurs

Le Responsive Design
Le responsive design est une approche essentielle dans la création de sites web modernes. Il permet à un site de
s’adapter à différentes tailles d’écran, offrant ainsi une expérience utilisateur optimale sur ordinateurs, tablettes
et smartphones. Ses Principes Fondamentaux sont:

- Fluidité : Utiliser des unités de mesure flexibles (comme les pourcentages) plutôt que des unités fixes
(comme les pixels) pour que les éléments s’ajustent automatiquement à la taille de l’écran.
- Media Queries : CSS permet d’utiliser des media queries pour appliquer des styles spécifiques en fonction
des caractéristiques de l’appareil (largeur, hauteur, orientation, etc.).
- Flexbox et Grid : Utiliser des modèles de mise en page modernes comme Flexbox et CSS Grid pour
créer des mises en page réactives et complexes.

Balises HTML et Attributs pour le Responsive Design

Voici quelques balises HTML couramment utilisées dans le responsive design, ainsi que leurs attributs et rôles :
1. Balise <meta>

La balise <meta> est utilisée pour définir des métadonnées sur le document HTML.

52
Exemple de Balise <meta>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Attributs :
- name : Définit le type de métadonnée. Dans ce cas, il s’agit du viewport.

- content : Définit les propriétés du viewport. width=device-width permet au viewport de s’ajuster à la

largeur de l’appareil, tandis que initial-scale=1.0 fixe le niveau de zoom initial.
2. Balise <img>
La balise <img> est utilisée pour intégrer des images dans une page web.

Exemple de Balise <img>

<img src="image.jpg" alt="Description de l’image" style="max-width:100%; height:auto;">

Attributs :
- src : Spécifie le chemin de l’image.
- alt : Fournit une description de l’image pour l’accessibilité.
- style : Utilisé ici pour rendre l’image responsive. max-width:100% permet à l’image de s’adapter à la
largeur de son conteneur, et height:auto maintient les proportions de l’image.
3. Balises de mise en page (<div>, <header>, <footer>, etc.)
Ces balises sont utilisées pour structurer le contenu d’une page web.

Exemple de Balises de Mise en Page

<header>
<h1>Titre du Site</h1>
</header>
<div class="container">
<div class="item">Contenu 1</div>
<div class="item">Contenu 2</div>
</div>
<footer>
<p>&copy; 2023 Mon Site</p>
</footer>

Rôles des Balises

- <header> : Définit l’en-tête de la page, généralement utilisé pour le titre ou le logo.

- <footer> : Définit le pied de page, souvent utilisé pour les informations de copyright ou les liens.
- <div> : Un conteneur générique utilisé pour structurer le contenu, permettant de le styliser avec CSS.
Exemple de Code
Voici un exemple simple d’un layout responsive utilisant des media queries :

53
 CSS de Base
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.header, .footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

.container {
width: 90%;
max-width: 1200px;
margin: auto;
}

.item {
flex: 1;
margin: 10px;
}

Media Queries

@media (max-width: 768px) {

.item {
flex-basis: 100%; % Chaque élément prend 100% de la largeur
}
}

TP 1: Rélisation du CV
Rédiger votre CV en HTML et CSS, suivant la maquette ci-dessous. La page se compose de trois zones. La
première contient les zones d’adresse et la photo. La seconde zone contient le titre du CV, suivi du contenu
en plusieurs tableaux. Dans chaque tableau, l’espace entre les cellules est de 10pts et les lignes du tableau ne
sont pas apparentes. La cellule contenant l’entête du tableau doit avoir un fond couleur gris, avec une police
large, en gras, couleur bleu. L’espace entre les tableaux doit être d’au moins 20pts. Au niveau du contenu,
on vous demande de faire figurer les catégories suivantes : Formation , Expérience professionnelle , Loisirs
et Divers (permis de conduire, brevet de secouriste, obligations militaires etc.). Le bloc formation commence
avec le baccalauréat. Vous présentez chaque diplôme obtenu par une liste à puce mentionnant : le nom de
l’établissement, le nom de la formation, le niveau L.M.D. et la mention éventuellement obtenue. Pour chaque
expérience professionnelle, vous décrirez en un petit paragraphe la mission que vous avez réalisée, dans quel
cadre et pour quel type de contrat (CDD, CDI, emplois jeune...). Les parties Loisirs et Divers sont à présenter,
à votre convenance, en conservant le formalisme de la maquette.
TP 1 : Ferme d’Élevage

1. Page d’Accueil

- Titre : Bienvenue à la Ferme d’Élevage

- Contenu :
– Introduction à la ferme (brève présentation).
– Photos des animaux de la ferme (vaches, poules, moutons).
– Un lien vers une page de contact.
– Informations sur les visites de la ferme.
– Un bandeau avec un slogan accrocheur.

54
 2. Page ”Nos Animaux”

- Titre : Nos Animaux

- Contenu :
– Galerie d’images avec descriptions des différents animaux (espèces, âges, etc.).
– Informations sur les soins apportés à chaque espèce.
– Un tableau pour montrer les quantités d’animaux par espèce.
3. Page ”Produits de la Ferme”

- Titre : Produits de la Ferme

- Contenu :
– Liste des produits disponibles à la vente (lait, œufs, viande).
– Prix affichés pour chaque produit.
– Informations sur la manière de commander ou d’acheter sur place.
– Une carte des points de vente.
4. Page ”Visites”
- Titre : Visitez notre Ferme
- Contenu :
– Informations sur les horaires des visites.
– Tarifs d’entrée.
– Formulaire de réservation en ligne.
– Avis des visiteurs (témoignages).

5. Page ”Contact”
- Titre : Contactez-Nous
- Contenu :
– Formulaire de contact (nom, email, message).
– Adresse complète de la ferme avec carte.
– Informations de contact (téléphone, email).
– Heures d’ouverture.

55
9 JavaScript
JavaScript est un langage de programmation dynamique, orienté objet et léger, principalement utilisé pour
ajouter de l’interactivité et des fonctionnalités aux sites web. Développé au début des années 1990 par Brendan
Eich, JavaScript est maintenant un pilier essentiel du développement web moderne. Il permet aux développeurs
de créer des sites web interactifs, réactifs et dynamiques.

9.1 Rôle de JavaScript

JavaScript joue plusieurs rôles clés dans le développement web:

- Interactivité : JavaScript permet d’ajouter des éléments interactifs aux pages web, comme des formu-
laires dynamiques, des animations, des jeux et des éléments de navigation.
- Manipulation du DOM : JavaScript peut manipuler le Document Object Model (DOM), qui est une
représentation structurée de la page web. Cela signifie que vous pouvez ajouter, supprimer ou modifier
des éléments HTML et CSS à la volée sans recharger la page.
- Communication asynchrone : Grâce à des technologies comme AJAX (Asynchronous JavaScript and
XML), JavaScript permet de récupérer des données sans recharger complètement la page. Cela améliore
la fluidité et la réactivité des applications web.

- Développement côté client : JavaScript s’exécute principalement dans le navigateur de l’utilisateur,

ce qui permet des interactions rapides et réactives.
- Développement côté serveur : Avec l’avènement de Node.js, JavaScript peut désormais être utilisé
pour le développement côté serveur, permettant aux développeurs d’utiliser le même langage à la fois pour
le front-end et le back-end.

- Écosystème riche : JavaScript dispose d’un vaste écosystème de bibliothèques et de frameworks (comme
React, Angular, Vue.js) qui facilitent le développement d’applications web complexes.

9.2 Pour qui est-ce destiné ?

JavaScript est indispensable pour :
- Développeurs Web : Qu’ils soient débutants ou expérimentés, tous les développeurs web doivent com-
prendre JavaScript pour créer des applications modernes.
- Concepteurs UX/UI : Pour optimiser l’expérience utilisateur à travers des interactions et animations
fluides.
- Développeurs Full Stack : Ceux qui travaillent à la fois sur le front-end et le back-end bénéficieront
grandement de la connaissance de JavaScript.
L’instruction JavaScript se crée à l’intérieur des balises script et /script .
1.1. La boı̂te de dialogue alert() alert() est une instruction simple, appelée fonction, qui permet
d’afficher une boı̂te de dialogue contenant un message. Ce message est placé entre apostrophes, elles-mêmes
placées entre les parenthèses de la fonction alert().

alert(’Bonjour’);
// La fonction affiche une bo^
ıte de dialogue avec "Bonjour"

1.2. La syntaxe JavaScript

La syntaxe de JavaScript n’est pas compliquée. De manière générale, les instructions doivent être séparées par
un point-virgule que l’on place à la fin de chaque instruction :

instruction_1;

instruction_2;

instruction_3;

56
 La syntaxe d’une fonction se compose de deux choses : son nom, suivi d’un couple de parenthèses (une
ouvrante et une fermante). Entre les parenthèses se trouvent les arguments, que l’on appelle aussi paramètres.

myFunction();

Par exemple :

alert(’Bonjour’);
// La fonction affiche une bo^
ıte de dialogue avec "Bonjour"

Des fichiers .js Il est possible, et même conseillé, d’écrire le code JavaScript dans un fichier externe, portant
l’extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de l’élément script et de son attribut
src qui contient l’URL du fichier .js.
Par exemple, dans le fichier hello.js, on écrit :

Exemple d’utilisation de alert

alert(’Hello world!’);

Et dans le corps de la page HTML, on trouve :

<script src="hello.js"></script>

Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer les éléments script juste
avant la fermeture de l’élément /body .
1.4. Indentations et commentaires Pour s’y retrouver dans l’écriture du code, on peut l’indenter, c’est-
à-dire hiérarchiser les lignes de code avec des tabulations. Par ailleurs, on peut intégrer des commentaires, qui
ne sont pas interprétés comme du code, afin d’expliquer son code ou de mieux s’y retrouver :

instruction_1; // Ceci est ma première instruction

instruction_2;
/* La troisième instruction ci-dessous,
avec un commentaire sur deux lignes */
instruction_3;

Les commentaires sont essentiels pour rendre le code plus compréhensible, surtout lorsqu’il est partagé ou
modifié par d’autres personnes.
1.5. Un site pour tester le JavaScript Pour tester le code JavaScript sans créer systématiquement des
pages web, vous pouvez utiliser des outils en ligne comme JSFiddle. Ce site permet d’écrire et d’exécuter votre
code JavaScript et de voir le résultat en temps réel, ce qui est très pratique pour expérimenter sans mettre en
place un projet complet.

9.3 Bases des Variables en JavaScript

Une variable consiste en un espace de stockage qui permet de garder en mémoire tout type de données. La
variable est ensuite utilisée dans les scripts. Une variable contient seulement des caractères alphanumériques,
le $ (dollar) et le (underscore) ; elle ne peut pas commencer par un chiffre ni prendre le nom d’une fonction
existante de JavaScript.
On crée la variable et on lui affecte (ou attribue) une valeur :

var myVariable;
myVariable = 2;

ou :

var myVariable = 2;

2.2. Les Types de Variables Une variable peut être de type numérique, mais aussi une chaı̂ne de
caractères :

57
 var text = ’J\’écris mon texte ici’; /* Avec des apostrophes, le \
sert à échapper une apostrophe intégrée dans le texte, pour ne pas que
JavaScript pense que le texte s’arr^ ete là.*/

Une variable peut enfin être de type booléen (boolean), avec deux états possibles : vrai ou faux (true ou
false).
2.3. Les Opérateurs Arithmétiques On peut utiliser 5 opérateurs arithmétiques : l’addition (+), la
soustraction (-), la multiplication (*), la division (/) et le modulo (%). Le modulo est le reste d’une division.
Par exemple :

var number1 = 3,
number2 = 2,
result;
result = number1 * number2;
alert(result); // Affiche : 6

ou :

var number = 3;
number = number + 5;
alert(number); // Affiche : 8

qui équivaut à :

var number = 3;
number += 5;
alert(number); // Affiche : 8

2.4. La Concaténation Une concaténation consiste à ajouter une chaı̂ne de caractères à la fin d’une autre,
comme dans cet exemple :

var hi = ’Bonjour ’,
name = ’toi’,
result;
result = hi + name;
alert(result); // Affiche : Bonjour toi

ou :

var text = ’Bonjour ’;

text += ’toi’;
alert(text); // Affiche : Bonjour toi .

On peut convertir un nombre en chaı̂ne de caractères avec l’astuce suivante :

// Exemple de conversion d’un nombre en cha^

ıne de caractères
var number = 123;
var stringNumber = number.toString();
alert(stringNumber); // Affiche : 123 en tant que cha^ ıne

La fonction prompt() en JavaScript est utilisée pour afficher une boı̂te de dialogue qui invite l’utilisateur à
entrer des données. Cette fonction renvoie la valeur saisie par l’utilisateur sous forme de chaı̂ne de caractères.

9.4 1. Utilisation de Base de prompt()

Voici un exemple simple de son utilisation :

58
 var userName = prompt(’Entrez votre prénom :’);
alert(userName); // Affiche le prénom entré par l’utilisateur

Dans cet exemple, la fonction prompt() demande à l’utilisateur de saisir son prénom, qui est ensuite affiché
dans une boı̂te de dialogue d’alerte.

9.5 2. Concaténation de Chaı̂nes de Caractères

On peut utiliser prompt() pour demander le prénom d’un utilisateur et afficher un message personnalisé avec
concaténation :

var start = ’Bonjour ’, name, end = ’ !’, result;

name = prompt(’Quel est votre prénom ?’);
result = start + name + end;
alert(result);

Dans cet exemple, nous concaténons une chaı̂ne de caractères de bienvenue (”Bonjour”) et une chaı̂ne de
caractères de fin (” !”) autour du prénom saisi par l’utilisateur. Le message complet est ensuite affiché dans
une alerte.

9.6 Calcul avec prompt()

La fonction prompt() peut également être utilisée pour effectuer des calculs en demandant à l’utilisateur d’entrer
des nombres :

var first, second, result;

first = prompt(’Entrez le premier chiffre :’);
second = prompt(’Entrez le second chiffre :’);
result = parseInt(first) + parseInt(second); /* la fonction parseInt()
transforme la cha^
ıne de caractères en nombre */
alert(result);

Dans cet exemple, nous demandons à l’utilisateur d’entrer deux chiffres. Ensuite, nous utilisons la fonction
parseInt() pour convertir les chaı̂nes de caractères en nombres afin de les additionner. Le résultat est finalement
affiché avec une alerte.
Une condition (true ou false) est un test qui permet de vérifier qu’une variable contient bien une certaine
valeur.

9.7 Les huit opérateurs de comparaison

Il y en a 8 : == : égal à != : différent de === : contenu et type de variable égal à
!== : contenu ou type de variable différent de ¿ supérieur à
¿= supérieur ou égal à ¡ : inférieur à ¡= : inférieur ou égal à
Il suffit d’écrire deux valeurs avec l’opérateur de comparaison souhaité entre les deux et un booléen est retourné.
Si celui-ci est true alors la condition est vérifiée, si c’est false alors elle ne l’est pas :

59
 var number1 = 2, number2 = 2, number3 = 4, result;

// Vérifie si number1 est égal à number2

result = number1 == number2;
alert(result); // Affiche : true car number1 et number2 ont la m^
eme valeur.

// Vérifie si number1 est égal à number3

result = number1 == number3;
alert(result); // Affiche : false car 2 est différent de 4.

// Vérifie si number1 est inférieur à number3

result = number1 < number3;
alert(result); // Affiche : true car 2 est bien inférieur à 4.

9.7.1 Les opérateurs logiques

Il y en a 3 : qui signifie ET avec par exemple : valeur1 valeur2 Cet opérateur vérifie la condition lorsque toutes
les valeurs qui lui sont passées valent true. —— qui signifie OU avec par exemple : valeur1 —— valeur2 Cet
opérateur est plus souple car il renvoie true si une des valeurs qui lui est soumise contient true, qu’importent
les autres valeurs. ! qui signifie NON avec par exemple : !valeur Cet opérateur se différencie des deux autres
car il ne prend qu’une seule valeur à la fois. S’il se nomme NON c’est parce que sa fonction est d’inverser la
valeur qui lui est passée, ainsi true deviendra false et inversement.
latex
article [utf8]inputenc amsmath amsfonts graphicx hyperref listings tcolorbox
La Condition if-else en JavaScript

9.7.2 La Condition if-else

Une condition en JavaScript est composée des éléments suivants :

- La structure conditionnelle if ;
- Des parenthèses qui contiennent la condition à analyser, ou plus précisément le booléen retourné par les
opérateurs conditionnels ;
- Des accolades qui délimitent la portion de code qui sera exécutée si la condition est vérifiée.

La fonction confirm() permet une interaction avec l’utilisateur à l’exécution du code (retourne true si
l’utilisateur clique sur ”OK”, false s’il clique sur ”Annuler”) :

if (confirm(’Voulez-vous exécuter le code Javascript de cette page ?’)) {

alert(’Le code a bien été exécuté !’);
}

La structure else permet de simplifier l’alternative :

if (confirm(’Pour accéder à ce site vous devez ^ etre une fille, cliquez sur "OK" si c\’est le cas.’))
alert(’Vous allez ^ etre redirigé vers le site.’);
} else {
alert("Désolé, vous n’avez pas accès à ce site.");
}

On peut également ajouter des conditions intermédiaires avec la structure else if :

60
 var floor = parseInt(prompt("Entrez l’étage où l’ascenseur doit se rendre (de -2 à 30) :"));
if (floor == 0) {
alert(’Vous vous trouvez déjà au rez-de-chaussée.’);
} else if (-2 <= floor && floor <= 30) {
alert("Direction l’étage n°" + floor + ’ !’);
} else {
alert("L’étage spécifié n’existe pas.");
}

9.7.3 La Condition switch

La structure switch permet de gérer une courte liste de possibilités. Voici un exemple d’utilisation :

var drawer = parseInt(prompt(’Choisissez le tiroir à ouvrir (1 à 4) :’)); // on précise bien le type

switch (drawer) {
case 1: // Vérifie si le tiroir est 1
alert(’Contient divers outils pour dessiner : du papier, des crayons, etc.’);
break; // On arr^ete la fonction pour passer à un autre cas
case 2: // Vérifie si le tiroir est 2
alert(’Contient du matériel informatique : des c^ ables, des composants, etc.’);
break;
case 3: // Vérifie si le tiroir est 3
alert(’Ah ? Ce tiroir est fermé à clé ! Dommage !’);
break;
case 4: // Vérifie si le tiroir est 4
alert(’Contient des v^etements : des chemises, des pantalons, etc.’);
break;
default: // Gérer une erreur de l’utilisateur
alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu’à preuve du contraire, l
}

9.7.4 Les Ternaires

Les opérateurs ternaires permettent de simplifier certaines conditions. Voici un exemple :

var startMessage = ’Votre genre : ’,

endMessage,
adult = confirm(’^
Etes-vous une fille ?’);

endMessage = adult ? ’Fille’ : ’Garçon’;

alert(startMessage + endMessage);

Fournir un commentaire selon l’âge de la personne. Vous devez fournir un commentaire sur 4 tranches d’âge
définies comme suit :

- 1 à 6 ans : Vous êtes un jeune enfant.

- 7 à 11 ans : Vous êtes un enfant qui a atteint l’âge de raison.
- 12 à 17 ans : Vous êtes un adolescent.

- 18 à 120 ans : Vous êtes un adulte.

*Correction
Voici une proposition de code pour réaliser cette tâche :

61
 var age = parseInt(prompt(’Quel est votre ^
age ?’));

if (1 <= age && age <= 6) {

alert(’Vous ^
etes un jeune enfant.’);
} else if (7 <= age && age <= 11) {
alert (’Vous ^etes un enfant qui a atteint l\’^
age de raison.’);
} else if (12 <= age && age <= 17) {
alert (’Vous ^etes un adolescent.’);
} else if (18 <= age && age <= 120) {
alert (’Vous ^etes un adulte.’);
} else {
alert (’Erreur !!’);
}

9.7.5 La Condition switch

La structure switch permet de gérer une courte liste de possibilités. Voici un exemple d’utilisation :

var drawer = parseInt(prompt(’Choisissez le tiroir à ouvrir (1 à 4) :’));

// On précise bien le type de la valeur, ici un nombre avec la fonction parseInt()

switch (drawer) {
case 1: // Vérifie si le tiroir est 1
alert(’Contient divers outils pour dessiner : du papier, des crayons, etc.’);
break; // On arr^ete la fonction pour passer à un autre cas
case 2: // Vérifie si le tiroir est 2
alert(’Contient du matériel informatique : des c^ ables, des composants, etc.’);
break;
case 3: // Vérifie si le tiroir est 3
alert(’Ah ? Ce tiroir est fermé à clé ! Dommage !’);
break;
case 4: // Vérifie si le tiroir est 4
alert(’Contient des v^etements : des chemises, des pantalons, etc.’);
break;
default: // Gère une erreur de l’utilisateur
alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu’à preuve du contraire, l
}

9.7.6 Les Ternaires

Les opérateurs ternaires permettent de simplifier certaines conditions. Voici un exemple :

var startMessage = ’Votre genre : ’,

endMessage,
adult = confirm(’^
Etes-vous une fille ?’);

endMessage = adult ? ’Fille’ : ’Garçon’;

alert(startMessage + endMessage);

latex
article [utf8]inputenc amsmath amsfonts graphicx hyperref listings tcolorbox
Incrémentation, Décrémentation et Boucles en JavaScript

9.8 Incrémentation et Décrémentation

L’incrémentation permet d’ajouter une unité à un nombre au moyen d’une syntaxe courte. À l’inverse, la
décrémentation permet de soustraire une unité.

62
 var number = 0;
number++;
alert(number); // Affiche : 1
number--;
alert(number); // Affiche : 0

9.9 La Boucle while

Une boucle sert à répéter une série d’instructions. La répétition (ou itération) se fait jusqu’à ce qu’on dise à
la boucle de s’arrêter. Pour une boucle, on pose une condition, et la boucle se répète tant que la condition est
vérifiée (true), selon la structure suivante :

while (condition) {
instruction_1;
instruction_2;
instruction_3;
}

Quand la boucle s’arrête, les instructions qui suivent la boucle sont exécutées :

var number = 1;
while (number < 10) {
number++; // Tant que le nombre est inférieur à 10, on l’incrémente de 1
}
alert(number); // Affiche : 10

Un Exemple avec prompt() et break

var prenoms = ’’, prenom; // On crée une variable prenoms pour mémoriser
while (true) {
prenom = prompt(’Entrez un prénom :’); // L’utilisateur entre chaque prénom
if (prenom) {
prenoms += prenom + ’ ’; // Ajoute le nouveau prénom ainsi qu’une espace
} else {
break; // On quitte la boucle
}
}
alert(prenoms); // Affiche les prénoms à la suite

9.10 La Boucle do while

Dans ce cas, la boucle est exécutée au moins une fois, après quoi on teste la condition, selon la structure suivante
:

do {
instruction_1;
instruction_2;
instruction_3;
} while (condition);

9.11 La Boucle for

Cette boucle est très utile pour l’incrémentation automatique :

63
 for (initialisation; condition; incrémentation) {
instruction_1;
instruction_2;
instruction_3;
}

9.11.1 Exemple de Boucle for

for (var iter = 1; iter <= 5; iter++) { // On initialise une variable, et tant qu’elle est inférieur
alert(’Itération n°’ + iter); // À chaque fois on affiche une bo^
ıte de dialogue (5 fois)
}

9.11.2 Boucle for avec prompt()

for (var prenoms = ’’, prenom; true;) { // ici sans incrémentation nécessaire, mais avec un point-vi
prenom = prompt(’Entrez un prénom :’);
if (prenom) {
prenoms += prenom + ’ ’;
} else {
break;
}
}
alert(prenoms);

9.12 Les Fonctions en JavaScript

9.12.1 Déclaration des Fonctions
Il existe des fonctions ou des variables natives (déjà existantes), mais il est également possible d’en créer de
nouvelles, selon la structure suivante :

function myFunction(arguments) { // Le terme "function" est obligatoire pour déclarer une fonction
// Le code que la fonction va devoir exécuter
}

9.12.2 Exemple de Fonction

function byTwo() {
var result = parseInt(prompt(’Donnez le nombre à multiplier par 2 :’));
alert(result * 2);
}

byTwo(); // On appelle la fonction créée

alert(’Vous en e
^tes à la moitié !’); // Puis un message intermédiaire
byTwo(); // Et appelle de nouveau la fonction

9.12.3 Les Variables Locales et Globales

Attention : toute variable déclarée dans une fonction n’est utilisable que dans cette même fonction. Ces variables
spécifiques ont un nom : les variables locales. Les variables déclarées en dehors des fonctions sont appelées
variables globales.

64
 var message = ’Ici la variable globale !’;

function showMsg() {
var message = ’Ici la variable locale !’;
alert(message); // On affiche la variable locale
}

showMsg();
alert(message); // Puis la variable globale

Il est recommandé d’éviter de créer des variables locales et globales qui portent le même nom. En règle
générale, on préfère utiliser des variables locales pour éviter les confusions.

9.12.4 Les Arguments

Les arguments d’une fonction ne sont pas obligatoires, mais peuvent être utilisés comme suit :

function myFunction(arg) { // Notre argument est la variable arg

alert(’Votre argument : ’ + arg);
}

myFunction(’En voilà un beau test !’);

Ou avec prompt() :

function myFunction(arg) {
alert(’Votre argument : ’ + arg);
}
myFunction(prompt(’Que souhaitez-vous passer en argument à la fonction ?’));

Ou encore avec des arguments multiples :

function moar(first, second) {

// On peut maintenant utiliser les variables first et second comme on le souhaite
alert(’Votre premier argument : ’ + first);
alert(’Votre deuxième argument : ’ + second);
}

moar(
prompt(’Entrez votre premier argument :’),
prompt(’Entrez votre deuxième argument :’)
);

9.12.5 Les Valeurs de Retour

Une fonction peut retourner une seule valeur, stockée dans une variable :

function sayHello() {
return ’Bonjour !’; // L’instruction return suivie d’une valeur, cette dernière est donc renvo
}

alert(sayHello());

9.12.6 Les Fonctions Anonymes

Les fonctions anonymes sont définies sans nom et supposent la structure suivante :

65
 function (arguments) {
// Le code de votre fonction anonyme
}

Une fonction anonyme peut être utilisée via une variable :

var sayHello = function() {

alert(’Bonjour !’);
};

sayHello(); // Appel de la fonction anonyme

latex
article [utf8]inputenc amsmath amsfonts graphicx hyperref listings tcolorbox
Les Objets et les Tableaux en JavaScript

9.13 Les Objets

Les variables contiennent des objets, qui peuvent être des nombres, des chaı̂nes de caractères ou des booléens.
JavaScript n’est pas un langage orienté objet comme C++, C ou Java, mais un langage orienté objet par
prototype. Les objets contiennent trois composants principaux :
- Un constructeur

- Des propriétés
- Des méthodes

9.13.1 Exemple d’Objet

var myString = ’Ceci est une cha^

ıne de caractères’; // On crée un objet String
alert(myString.length); // On affiche le nombre de caractères avec la propriété length
alert(myString.toUpperCase()); // On récupère la cha^
ıne en majuscules avec la méthode toUpperCase()

9.14 Les Tableaux

Après Number, String et Boolean, Array est un quatrième objet natif de JavaScript. Un tableau, ou array en
anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au moyen
d’un indice (index en anglais), la numérotation commençant à partir de 0.

9.14.1 Exemple de Tableau

var myArray = [’Rafael’, ’Mathilde’, ’Ahmed’, ’Jér^

ome’, ’Guillaume’];
// Le contenu se définit entre crochets, avec une virgule entre chaque valeur.
// La cha^
ıne ’Rafael’ correspond à l’indice 0, ’Mathilde’ à l’indice 1...
alert(myArray[1]); // Affiche : Mathilde

9.14.2 Modification d’une Valeur

On peut modifier une valeur dans un tableau :

var myArray = [’Rafael’, ’Mathilde’, ’Ahmed’, ’Jér^

ome’, ’Guillaume’];
myArray[1] = ’Paul’;
alert(myArray[1]); // Affiche : Paul

66
9.14.3 Opérations sur les Tableaux
On peut ajouter des items avec la méthode push() :

var myArray = [’Rafael’, ’Mathilde’];

myArray.push(’Ahmed’); // Ajoute Ahmed à la fin du tableau
myArray.push(’Jér^
ome’, ’Guillaume’); // Ajoute Jér^
ome et Guillaume à la fin du tableau

La méthode unshift() fonctionne comme push(), sauf que les items sont ajoutés au début du tableau. Les
méthodes shift() et pop() retirent respectivement le premier et le dernier élément du tableau.

var myArray = [’Rafael’, ’Mathilde’, ’Ahmed’, ’Jér^

ome’, ’Guillaume’];
myArray.shift(); // Retire Rafael
myArray.pop(); // Retire Guillaume
alert(myArray); // Affiche Mathilde,Ahmed,Jér^ome

On peut également découper une chaı̂ne de caractères en tableau avec split() :

var cousinsString = ’Jér^

ome Guillaume Paul’,
cousinsArray = cousinsString.split(’ ’); // Avec les espaces, on a trois items
alert(cousinsString);
alert(cousinsArray);

Pour recréer une chaı̂ne à partir d’un tableau, on utilise join() :

var cousinsString_2 = cousinsArray.join(’-’);

alert(cousinsString_2);

9.15 Les Objets Littéraux

On peut remplacer l’indice d’un tableau par un identifiant. Dans ce cas, on crée un objet (dans cet exemple,
nommé family). Les identifiants créés (comme self, sister, etc.) deviennent des propriétés de l’objet, avec
plusieurs possibilités d’affichage. On peut ajouter des données à cet objet avec une méthode différente de celle
utilisée pour un tableau.

9.15.1 Exemple d’Objet Littéral

var family = {
self: ’Rafael’,
sister: ’Mathilde’,
brother: ’Ahmed’,
cousin_1: ’Jér^
ome’,
cousin_2: ’Guillaume’
};

var id = ’sister’;
alert(family[id]); // Affiche : Mathilde
alert(family.brother); // Affiche : Ahmed
alert(family[’self’]); // Affiche : Rafael
family[’uncle’] = ’Pauline’; // On ajoute une donnée avec un identifiant
family.aunt = ’Karim’; // On peut ajouter aussi de cette manière
alert(family.uncle); // Affiche : Pauline

9.15.2 Parcourir un Objet avec for...in

On ne peut pas parcourir un objet avec for, car for s’occupe d’incrémenter des variables numériques. Pour
parcourir les propriétés d’un objet, on utilise for...in.

67
 var family = {
self: ’Rafael’,
sister: ’Mathilde’,
brother: ’Ahmed’,
cousin_1: ’Jér^
ome’,
cousin_2: ’Guillaume’
};

for (var id in family) { // On stocke l’identifiant dans id pour parcourir l’objet family
alert(family[id]); // Affiche chaque valeur de l’objet
}

Exercice

Demandez les prénoms aux utilisateurs et stockez-les dans un tableau. Pensez à utiliser la méthode push().
À la fin, affichez le contenu du tableau avec alert(), seulement s’il contient des prénoms. En effet, il ne sert
à rien de l’afficher s’il ne contient rien. Séparez chaque prénom par un espace. Si le tableau est vide, faites-le
savoir à l’utilisateur avec un alert().
Code Exemple

Voici le code utilisé précédemment :

var nicks = ’’, nick;

while (true) {
nick = prompt(’Entrez un prénom :’);
if (nick) {
nicks += nick + ’ ’; // Ajoute le nouveau prénom ainsi qu’un espace
} else {
break; // On quitte la boucle
}
}

alert(nicks); // Affiche les prénoms à la suite

10 TPE : A réaliser par groupe de 10

10.1 TP 1 : Ferme d’Élevage
1. Page d’Accueil

- Titre : Bienvenue à la Ferme d’Élevage

- Contenu :
– Introduction à la ferme (brève présentation).
– Photos des animaux de la ferme (vaches, poules, moutons).
– Un lien vers une page de contact.
– Informations sur les visites de la ferme.
– Un bandeau avec un slogan accrocheur.
*2. Page ”Nos Animaux”

- Titre : Nos Animaux

- Contenu :
– Galerie d’images avec descriptions des différents animaux (espèces, âges, etc.).
– Informations sur les soins apportés à chaque espèce.

68
 – Un tableau pour montrer les quantités d’animaux par espèce.
*3. Page ”Produits de la Ferme”

- Titre : Produits de la Ferme

- Contenu :
– Liste des produits disponibles à la vente (lait, œufs, viande).
– Prix affichés pour chaque produit.
– Informations sur la manière de commander ou d’acheter sur place.
– Une carte des points de vente.
*4. Page ”Visites”

- Titre : Visitez notre Ferme

- Contenu :
– Informations sur les horaires des visites.
– Tarifs d’entrée.
– Formulaire de réservation en ligne.
– Avis des visiteurs (témoignages).
*5. Page ”Contact”

- Titre : Contactez-Nous

- Contenu :
– Formulaire de contact (nom, email, message).
– Adresse complète de la ferme avec carte.
– Informations de contact (téléphone, email).
– Heures d’ouverture.

69
11 Présentation Générale
Le site de Consultation Médicale a pour objectif de fournir aux utilisateurs un accès facile à des informations
médicales, la possibilité de prendre rendez-vous en ligne et des ressources utiles concernant la santé. Le site se
composera de cinq pages principales.

12 Pages à Développer
12.1 Page d’Accueil
12.1.1 Description
- Présente une introduction au service de consultation médicale. - Affiche des informations clés sur les services
offerts. - Inclut une barre de navigation vers les autres pages.

12.1.2 Contenu
- En-tête : Logo et titre du site.
- Corps :
– Un bref texte de bienvenue.
– Image principale représentant le contexte médical.
– Lien vers d’autres pages du site (À propos, Services, Prendre Rendez-vous, Contact).
- Pied de page : Mentions légales et liens vers les réseaux sociaux.

12.1.3 Exigences Techniques

- Utilisation d’une structure HTML5 sémantique.
- Mise en forme via CSS pour la typographie et la mise en page.

- Responsive design pour une consultation sur mobile.

12.2 Page ”À Propos”

12.2.1 Description
- Présente l’équipe médicale et les valeurs de la consultation. - Fournit des informations sur l’expérience et les
spécialisations des médecins.

12.2.2 Contenu
- En-tête : Titre de la page ”À Propos”.
- Corps :

– Description de l’équipe médicale avec photos et courtes biographies.

– Section sur la mission et les valeurs de la consultation.
- Pied de page : Liens classiques vers le reste du site.

12.2.3 Exigences Techniques

- Utilisation de listes et de tableaux pour présenter les médecins.
- Design cohérent avec la page d’accueil grâce à des styles CSS.

12.3 Page ”Services”

12.3.1 Description
- Détaille tous les services proposés par la consultation médicale. - Offre des informations sur chaque service.

70
12.3.2 Contenu
- En-tête : Titre de la page ”Nos Services”.
- Corps :

– Liste des services (ex : consultation générale, suivi de santé, dépistage).

– Brève description de chaque service.
- Pied de page : Lien vers la prise de rendez-vous et le contact.

12.3.3 Exigences Techniques

- Utilisation de sections et d’articles HTML pour structurer les services.

- Maintien du style avec le reste du site en utilisant CSS.

12.4 Page ”Prendre Rendez-vous”

12.4.1 Description
- Permet aux utilisateurs de prendre des rendez-vous en ligne. - Inclut un formulaire de réservation.

12.4.2 Contenu
- En-tête : Titre ”Prendre Rendez-vous”.
- Corps :

– Formulaire pour entrer les détails du patient (nom, email, date et heure de rendez-vous).
– Bouton d’envoi.
– Informations sur les méthodes d’annulation et de modification des rendez-vous.
- Pied de page : Liens vers les autres pages.

71