Formateur: Dev SAGARA Amagana

Contact: 82762028/65961128
Email : [email protected]
HTML et CSS sont deux langues qu'il faut savoir parler pour créer des sites web.
C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce
que vous verrez s'afficher à l'écran.
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web.
Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses,
des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base
sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher.
HTML et CSS sont des langages informatiques qui permettent de créer des sites web.
Tous les sites web sont basés sur ces langages, ils sont incontournables et universels
aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé par Tim
Berners-Lee en 1991
HTML (HyperText Markup Language) : c’est le langage de base du web. Il sert à structurer le
contenu d’une page (titres, paragraphes, images, liens, tableaux, formulaires, etc.).CSS
(Cascading Style Sheets) : c’est le langage de mise en forme. Il permet de styliser une page
HTML (couleurs, tailles, positions, polices, arrière-plans, etc.
Il existe de nombreux logiciels dédiés à la création de sites web. On peut classer ces
logiciels de création de site web en deux catégories :
Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que
Vous Obtenez) : ce sont des programmes qui se veulent très faciles d'emploi, ils
permettent de créer des sites web sans apprendre de langage particulier. Leur
principal défaut est la qualité souvent assez mauvaise du code HTML et CSS qui est
automatiquement généré par ces outils. Un bon créateur de site web doit tôt ou tard
connaître HTML et CSS
Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On peut
en général les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se
révèlent être de puissants alliés pour les créateurs de sites web. Comme Editeur de
texte voici quelques logiciels utilisés : VS Code , SublimText ,etc …
Le navigateur est le programme qui nous permet de voir les sites web. Le travail du
navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran.
Si votre code CSS dit ‘’Les titres sont en rouge’’, alors le navigateur affichera les titres
en rouge. Le rôle du navigateur est donc essentiel !
Un navigateur est un programme extrêmement complexe. En effet, comprendre le
code HTML et CSS n'est pas une mince affaire. Le principal problème, vous vous en
rendrez vite compte, c'est que les différents navigateurs n'affichent pas le même site
exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de
vérifier régulièrement que votre site fonctionne correctement sur la plupart des
navigateurs.
HTML (Hyper Text Markup Language) est un language de balisage utilisé pour
créer la structure d’une page web .
HTML5 (HyperText Markup Language version 5) est la dernière version du
langage HTML, utilisé pour structurer et présenter le contenu des pages web.
HTML5 est une version amélioré de html intégrant du texte, des images, des vidéos,
des formulaires, et des éléments interactifs sans avoir besoin de plugins externes.
▪ Dans ce cours d’HTML et CSS, nous allons utiliser un éditeur de code appelé Visual
Studio Code (VS Code).
▪ C’est un outil gratuit, léger et puissant, très utilisé par les développeurs
web.Étapes pour installer VS Code :
▪ Accédez au site officiel :
▪ Rendez-vous sur https://code.visualstudio.com
▪ Téléchargez VS Code selon votre système d’exploitation (Windows, macOS ou
Linux).
▪ Lancez le fichier d’installation et suivez les instructions à l’écran.
▪ Sur Windows : cliquez sur “Suivant” jusqu’à “Installer”.
▪ Sur macOS : ouvrez le fichier .zip et glissez l’icône de VS Code dans le dossier
Applications.Ouvrez VS Code une fois l’installation terminée.
▪ Pour faciliter l’utilisation, vous pouvez aussi installer l’extension “Live Server” dans
VS Code. Cela permet de voir en temps réel le résultat de vos fichiers HTML dans
le navigateur.
Après avoir installé VS Code, lancez-le.
Créez un nouveau fichier en cliquant sur Fichier > Nouveau fichier, puis enregistrez-le avec l’extension
.html, par exemple : index.html.

▪ <!DOCTYPE html>
▪ <html lang="en">
▪ <head>
▪ <meta charset="UTF-8">
▪ <meta name="viewport" content="width=device-width, initial-scale=1.0">
▪ <title>Document</title>
▪ </head>
▪ <body>
▪
▪ </body>
▪ </html>
▪ <!DOCTYPE html>: Indique au navigateur que c’est un document HTML5.

▪ <head>: Contient des informations invisibles par l’utilsateur comme l’encodage des caractères,

le titre , mais utiles au navigateur.

▪ <html lang="en"> est l'élément racine d'une page HTML.

L’attribut lang="en" précise la langue du contenu (ici anglais) , permet aux

navigateurs de pouvoir spécifier la langue utilisé dans la page , facilitant ainsi les

traductions et autres…

▪ <meta charset="UTF-8">: Définit l'encodage des caractères (permet d’afficher correctement les

lettres accentuées, par exemple).

▪ <meta name="viewport" content="width=device-width, initial-scale=1.0">: Permet un

affichage adapté sur mobile et tablette (responsive design).

▪ <title>Document</title>:Définit le titre de la page, visible dans l’onglet du

navigateur. </title> signifie la fermeture (Fin) de la balise title

▪ </head> : fermeture de head

▪ <body> : Contient tout le contenu visible de la page web : textes, images, boutons, etc.

▪ </body> : fermeture de body

▪ </html>: fermeture de html

📌 Qu’est-ce qu’une balise HTML ?
Une balise HTML sert à définir le rôle ou la présentation d’un élément dans une
page web. Elle est généralement écrite entre chevrons < >.
Types de balises HTML
1. Balises fermantes (ou paire)
Elles ont une balise ouvrante et une balise fermante.
Structure : <nom-de-balise>Contenu</nom-de-balise>
2. Balises non fermantes (ou orpheline):
Elles n'ont pas de contenu, donc pas besoin de fermeture classique.
Structure : <nom-de-balise />
📝 1. Balises de texte: Organiser un texte
Balise Description Exemple
<p> Paragraphe <p>Ceci est un paragraphe.</p>

<h1> à <h6> Titres (du plus grand au plus petit) <h1>Titre principal</h1>

<strong> Texte important (gras) <strong>Important</strong>

<i> Texte en italique (gras) <i>Italique</i>

<mark> Surligne le texte <mark>Mot surligné</mark>

<br /> Saut de ligne (auto-fermante) Texte ligne 1<br />Texte ligne 2

<hr /> Ligne horizontale <hr />

<span> Petit conteneur de texte (inline) <span style="color:red">rouge</span>

<blockquote> Citation longue <blockquote>Une citation.</blockquote>

<code> Texte à afficher comme du code <code>let x = 5;</code>

<b> Texte en gras <b>Gras</b>

🔗 2. Balises de lien et média

Balise Description Exemple

<a> Lien hypertexte <a href="https://google.com">Google</a>

<img /> Image (auto-fermante) <img src="image.jpg" alt="Photo" />

<audio> Intégrer du son <audio controls src="audio.mp3"></audio>

<video> Intégrer une vidéo <video controls src="video.mp4"></video>

🧾 3. Balises de liste: structurer un texte et d'ordonner des informations.

Balise Description Exemple

<ul> Liste non ordonnée (avec puces) <ul><li>Élément</li></ul>
<ol> Liste ordonnée (avec numéros) <ol><li>Premier</li></ol>
<li> Élément de liste <li>Texte</li>
<dl><dt>HTML</dt><dd>L
<dl> Liste de définition
angage web</dd></dl>
<dt> Terme dans une définition —
<dd> Description du terme —
🧮 4. Balises de formulaire

Balise Description Exemple

<form> Formulaire <form action="/envoyer">...</form>

<input /> Champ de saisie <input type="text" placeholder="Nom" />

<textarea> Zone de texte <textarea rows="4" cols="30"></textarea>

<button> Bouton <button>Envoyer</button>

<label> Étiquette associée à un champ <label for="email">Email :</label>

<select> Menu déroulant <select><option>Option</option></select>

<option> Option dans le menu déroulant <option>Choix 1</option>

<fieldset> Groupe de champs <fieldset>...</fieldset>

<legend> Titre d’un groupe de champs <legend>Infos</legend>
🧮 4. Balises de formulaire

Balise Description Exemple

<form> Formulaire <form action="/envoyer">...</form>

<input /> Champ de saisie <input type="text" placeholder="Nom" />

<textarea> Zone de texte <textarea rows="4" cols="30"></textarea>

<button> Bouton <button>Envoyer</button>

<label> Étiquette associée à un champ <label for="email">Email :</label>

<select> Menu déroulant <select><option>Option</option></select>

<option> Option dans le menu déroulant <option>Choix 1</option>

<fieldset> Groupe de champs <fieldset>...</fieldset>

<legend> Titre d’un groupe de champs <legend>Infos</legend>
📦 5. Balises de structure

Balise Description Exemple

<div> Conteneur de bloc (structure) <div>Contenu</div>

<section> Section d’un document <section>Titre + contenu</section>

<article> Article indépendant <article>Blog</article>

<header> En-tête de page <header>Logo et menu</header>

<footer> Pied de page <footer>© 2025</footer>

<nav> Navigation (menu) <nav>Liens</nav>

<main> Contenu principal de la page <main>Le cœur de la page</main>

<aside> Contenu secondaire (ex : sidebar) <aside>Publicité</aside>

Diapositive : Rôle des balises HTML
Chaque type de balise HTML sert à un objectif précis dans une page web. Dans
notre support hello.html, chaque catégorie de balise est illustrée par un exemple
concret et logique.
Les balises sont classées en différents types.
Les balises sont classées en différents types.
Les balises sont classées en différents types.
Les balises sont classées en différents types.

💡 Remarque : Certaines balises comme <input>, bien qu'en ligne, peuvent sembler
afficher comme des blocs selon leur style CSS. Tu peux modifier le comportement avec CSS
:Exemple : display: inline; ou display: block;.
Le Titre: Il apparaît dans l’onglet du navigateur (en haut de la fenêtre) et sert
aussi de titre dans les résultats des moteurs de recherche (comme Google).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours HTML de zero</title>
</head>
<body>
<h1>Hello World html</h1>
</body>
</html>
Les commentaires: permet d’écrire des informations dans le code html qui ne sont
pas affichés dans la page
Taper ctrl + slash puis entrer le commentaire:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours HTML de zero</title> <!-- Tire de la page -->
<!-- Icone de l'onglet -->

</head>
<body>
<h1>Hello World html</h1>
</body>
</html>
Ajout d’une image icone à la page:
▪ <!-- Icone de l'onglet -->
▪ <link rel="shortcut icon" href="./html-logo.png">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours HTML de zero</title> <!-- Tire de la page -->
<!-- Icone de l'onglet -->
<link rel="shortcut icon" href="./html-logo.png">

</head>
<body>
<h1>Hello World html</h1>
</body>
</html>
Un attribut de balise en HTML est une information supplémentaire ajoutée à une balise pour
modifier son comportement ou préciser des détails.
Il est toujours placé dans la balise ouvrante, sous la forme
<nom-de-balise attribut="valeur">
❑ L'attribut de classe
La classe attribut est souvent utilisé pour pointer vers un nom de classe dans une feuille de style. Il
peut également être utilisé par JavaScript pour accéder et manipuler des éléments portant ce nom
de classe spécifique.

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
❑ L'attribut id
HTML est utilisé pour spécifier un identifiant unique pour un élémenL’ id attribut
t HTML.
<h1 id="myHeader">My Header</h1>
La structure standard des site sur le web

En-tête (Header)

Contenu principal (Main / Section principale)

Exemple pratique de structure de présentation d’une page
🟧 1. En-tête (Header)
Le <header> Placé généralement en haut de la page. peut contenir un titre, un menu
de navigation, voire plusieurs blocs selon les besoins.
<header>
<h1>🌍 Mon Blog de Voyage</h1>
<nav>
<a href="#accueil">Accueil</a> |
<a href="#contact">Contact</a>
</nav>
<hr />
</header>
Exemple pratique de structure de présentation d’une page
🟧 2. Contenu principal (Main / Section principale)
Contient le contenu principal du site. On y met souvent des <article>, <section>,
<div>, etc.
<main>
<article> ... </article>
...
<section id="contact"> ... </section>
</main>
Exemple pratique de structure de présentation d’une page
🟧 3. Articles et sections
Chaque article peut représenter une partie importante ou autonome du contenu ,par
exemple une publication de blog d’article pour un site E commerce.
<article>
<h2>📍 Découverte du Mali</h2>
...
</article>
Exemple pratique de structure de présentation d’une page
📊 4. Les Tableaux (<table>) : ✅ À quoi ça sert ?
Un tableau sert à afficher des données organisées en lignes et colonnes, comme un
emploi du temps, un budget, ou une liste.
<table>
. <thead> <!-- En-tête du tableau -->
<tr>
<th>Jour</th>
<th>Activité</th>
</tr>
</thead>
<tbody> <!-- Corps du tableau -->
<tr>
<td>Lundi</td>
<td>Visite du musée</td>
</tr>
<tr>
<td>Mardi</td>
<td>Plage</td>
</tr>
</tbody>
</table>
Exemple pratique de structure de présentation d’une page
📊 4. Les Tableaux (<table>) : ✅ À quoi ça sert ?
.
🧠 Que signifient ces balises ?
<table> : démarre le tableau.
<thead> : partie haute du tableau (titre des colonnes)
.<tr> : une ligne du tableau.
<th> : une cellule d’en-tête (en gras)
.<td> : une cellule normale.
Exemple pratique de structure de présentation d’une page
📊 4. Les Tableaux (<table>) :Autres Exemples
. <div>
<table
border="4"
cellpadding="20"
cellspacing="10"
style="text-align: center"
>
<!-- thead ou th est pour l'entete du tableau -->
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
Exemple pratique de structure de présentation d’une page
📊 4. Les Tableaux (<table>) : Autres Exemples.
<tbody>
<tr>
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td rowspan="2">Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
</tr>
</tbody>
</table>
</div>
Exemple pratique de structure de présentation d’une page
📊 4. Les Tableaux (<table>) : Autres Exemples.

border="4" : épaisseur de la bordure (4 pixels)

cellpadding="20" : espace à l'intérieur de chaque cellule (padding)
cellspacing="10" : espace entre les cellules
style="text-align: center" : centre le texte dans les cellules
rowspan="2" : permet a Cell 1 d’occuper 2 lignes
colspan="2" : permet a Cell 4 d’occuper 2 colonnes
Exemple pratique de structure de présentation d’une page
📊5. Multimédia et dessin
<section>
<h3>Image en HTML</h3>
<img src="./OIP (1).jpg" height="200" alt="image-section" />
<h6><i>&#128190;</i> Vidéos</h6>
<video src="./videos.mp4" height="200" autoplay muted loop></video>
</div>
<audio autoplay muted loop>
<source src="apesanteur.m4a" type="audio/mpeg" />
Votre navigateur ne supporte pas l'audio HTML5.
</audio>
</section>

Le code &#128190; est un code HTML d'entité numérique qui permet d’afficher un
symbole ou une icône Unicode. Dans ce cas, &#128190; correspond à l’icône de disquette
💾.
Ces images avec codes sont sur ce site : https://htmlcheatsheet.com/
Exemple pratique de structure de présentation d’une page
📊5. Multimédia et dessin
Balise Image
<img> permet d’afficher une image.
src indique le chemin de l’image.
height fixe la hauteur.
width fixe la largeur.
alt sert de texte alternatif (utile si l’image ne s’affiche pas ou pour les lecteurs d’écran).

Attribut Audio, Video

autoplay démarre la lecture automatiquement.
muted coupe le son.
loop permet de rejouer en boucle.
src indique le fichier vidéo.
 Exemple pratique de structure de présentation d’une page
📊5. Multimédia et dessin
❑ Audio et Vidéo intégrés :Plus besoin de plugins comme Flash :
<audio src="musique.mp3" controls></audio>
<video src="video.mp4" controls></video>
Controls permet d’activer tous les optons nécessaires comme régler le volume pour
contrôler le media
❑ Canvas et SVG :
Pour dessiner des graphiques et animations on peut utiliser l’espace de canvas :
<canvas id="monCanvas"></canvas>
Ou dessiner a l’aide du balise svg
<svg width="200" height="200">
<!-- Un cercle -->
<circle cx="100" cy="100" r="80" fill="red" stroke="black" stroke-width="4" />
</svg>
❑ Balise d'Icon
Exemple d'Icon d’accueil
<i class="fa fa-home"></i> <!-- Nécessite Font Awesome -->
 Exemple pratique de structure de présentation d’une page
📊5. Multimédia et dessin
❑ Miniature cliquable:
Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez
ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille
originale.

<h3>Miniature cliquable</h3>
<a href="./click.png">
<img src="./click.png" height="200" alt="image-section" title="cliquer
pour agrandir" />
</a>
 Exemple pratique de structure de présentation d’une page
📊5. Multimédia et dessin
❑ Création d'une figure:
En HTML5, on dispose de la balise .

<h5>Exemple de figure</h5>
<figure>
<img src="./fig.jpg" height="200" alt="image-section" title="figure" />
<figcaption>Le logiciel de bloc note </figcaption>
</figure>
Exemple pratique de structure de présentation d’une page
📊6. Création d’un lien
Un lien est un texte sur lequel on peut cliquer pour se rendre sur une autre page. On peut faire un lien d'une page
a.html vers une page b.html, mais on peut aussi faire un lien vers un autre site. Exemple: <a href="URL">Texte du
lien</a>
❑ Lien vers un site web externe :<a href="https://www.google.com" target="_blank">Aller sur Google</a>
target="_blank" permet d’ouvrir le lien dans un nouvel onglet, son ajout est facultatif.

❑ Lien vers une page locale (dans le même dossier) :<a href="contact.html">Page Contact</a>
❑ Lien vers une adresse email : <a href="mailto:[email protected]">Envoyer un mail</a>
❑ lien vers une ancre:
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
1. Créer une ancre cible
On ajoute un identifiant (id) à l’élément vers lequel on veut se déplacer:
<h2 id="apropos">À propos de nous</h2>
<p>Nous sommes une équipe passionnée par le développement web...</p>
2. Créer le lien qui pointe vers cette ancre
On utilise le caractère # suivi du nom de l'id :
<a href="#apropos">Voir la section À propos</a>
❑ Lien vers une ancre située dans une autre page
<!-- page actuelle (ex: index.html) -->
<a href="autrepage.html#services">Voir nos services</a>
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
Un formulaire permet à l’utilisateur d’entrer des données : nom, email, message, etc. Ces
données peuvent être envoyées au serveur ou utilisées dans une application.

Types d'entrée HTML

Voici les différents types d’entrée que vous pouvez utiliser en HTML :
<input type="month">
<input type="button"> <input type="number">
<input type="checkbox"> <input type="password">
<input type="color"> <input type="radio">
<input type="range">
<input type="date"> <input type="reset">
<input type="datetime-local"> <input type="search">
<input type="email"> <input type="submit">
<input type="tel">
<input type="file">
<input type="text">
<input type="hidden"> <input type="time">
<input type="image"> <input type="url">
<input type="week">
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
❑L'attribut valeur:
Le value attribut input spécifie une valeur initiale pour un champ de saisie :
▪ Exemple

▪ Champs de saisie avec valeurs initiales (par défaut) :

▪ <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
❑L'attribut de formulaire:
L'attribut input form spécifie la forme <input> à laquelle appartient l'élément.
La valeur de cet attribut doit être égale à l'attribut id de l'élément <form> auquel il appartient.
▪ Exemple

▪ Un champ de saisie situé en dehors du formulaire HTML (mais faisant toujours partie du
formulaire) :
▪ <form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
❑L'attribut de formaction:
. Le formaction attribut input spécifie l'URL du fichier qui traitera l'entrée lorsque le formulaire est
soumis.
▪ Exemple

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
L'attribut readonly
L'attribut input readonly spécifie qu'un champ de saisie est en lecture seule.
Un champ de saisie en lecture seule ne peut pas être modifié (cependant, un utilisateur peut y accéder avec la
touche Tab, le mettre en surbrillance et copier le texte qu'il contient).
La valeur d'un champ de saisie en lecture seule sera envoyée lors de la soumission du formulaire !
▪ Exemple

▪ Un champ de saisie en lecture seule :

▪ <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
L'attribut handicapé:
Le disabled attribut d'entrée spécifie qu'un champ de saisie doit être désactivé.
Un champ de saisie désactivé est inutilisable et non cliquable.
La valeur d'un champ de saisie désactivé ne sera pas envoyée lors de la soumission du formulaire !
▪ Exemple

▪ Un champ de saisie désactivé :

▪ <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
Exemples pratiques

<form>
<h2>Formulaire complet</h2>

<!-- Texte simple -->

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

<!-- Mot de passe -->

<label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp" /><br />
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
<!-- Email -->
<label for="email">Email :</label>
<input type="email" id="email" name="email" /><br />

<!-- Numéro -->

<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="1" max="120" /><br />

<!-- Date -->

<label for="date">Date de naissance :</label>
<input type="date" id="date" name="date" /><br />

<!-- Heure -->

<label for="heure">Heure préférée :</label>
<input type="time" id="heure" name="heure" /><br />

<!-- Téléphone -->

<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel" /><br />
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
<!-- URL -->
<label for="site">Site Web :</label>
<input type="url" id="site" name="site" /><br />

<!-- Fichier -->

<label for="cv">CV (fichier) :</label>
<input type="file" id="cv" name="cv" /><br />

<!-- Couleur -->

<label for="couleur">Couleur préférée :</label>
<input type="color" id="couleur" name="couleur" /><br />

<!-- Case à cocher -->

<label>
<input type="checkbox" name="newsletter" />
S'abonner à la newsletter
</label><br /><!-- Boutons radio -->
<p>Sexe :</p>
<label><input type="radio" name="sexe" value="homme" /> Homme</label>
<label><input type="radio" name="sexe" value="femme" /> Femme</label><br />
Exemple pratique de structure de présentation d’une page
. 📝 7. Les Formulaires (<form>)✅ À quoi ça sert ?
<!-- Liste déroulante -->
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="france">France</option>
<option value="mali">Mali</option>
<option value="senegal">Sénégal</option>
</select><br />

<!-- Zone de texte -->

<label for="message">Message :</label><br />
<textarea id="message" name="message" rows="4" cols="40"></textarea><br />

<!-- Bouton -->

<button type="submit">Envoyer</button>
</form>
📝 Exercice : Créer une page de formation en ligne (E-learning)

Objectif :
Créer une interface web simple en HTML composée de plusieurs pages simulant une
plateforme de formation.

Consignes détaillées :

1. Créer une première page HTML nommée index.html contenant :

- Un titre principal : E-learning (utilise une balise <h1>).
- Un menu de navigation avec les liens suivants :
- Accueil
- À propos
- Blog
- Cours
- Contact
- S'inscrire
(Utilise des balises <a> pour créer ces liens)
2. Sous la navigation, ajoute :
- Une phrase en Titre balise et en gras :
"Innovez avec Confiance grâce à E-learning"
- Un paragraphe contenant ce texte :
"Plongez au cœur de l'excellence numérique avec Nagtic, votre partenaire de confiance
pour vos formations et services technologiques jusqu'à la réalisation de vos ambitions."
- Deux boutons :
- Apprendre plus
- Nos cours

3. Sous les boutons, ajoute une section de cours avec 4 images de formation :
- Chaque image doit avoir une largeur de 150 pixels et une hauteur automatique
(height="auto").
Créer deux autres pages HTML reliées :

4. Page apropos.html :
- Titre important : À propos de NAGTIC
- Texte à afficher :
"Nouvelle Génération Africaine TIC"
- Une image représentative à insérer sous le texte.

5. Page contact.html :
- Créer un formulaire de contact contenant :
- Une zone de texte pour le nom avec un placeholder : "Votre nom"
- Une zone de texte pour l’email avec un placeholder : "Votre email"
- Un champ sujet
- Une grande zone de texte (textarea) avec un placeholder : "Comment pouvons-nous
vous aider ?«
- Et button send Message au dessous
CSS signifie Cascading Style Sheets.

CSS permet de gagner beaucoup de temps.

Il permet de contrôler la mise en page de
plusieurs pages web simultanément.

Qu'est-ce que CSS ?

Les feuilles de style en cascade (CSS) sont utilisées
pour formater la mise en page d'une page Web.
Avec CSS, vous pouvez contrôler la couleur, la police,
la taille du texte, l'espacement entre les éléments, la
façon dont les éléments sont positionnés et disposés,
les images d'arrière-plan ou les couleurs d'arrière-plan
à utiliser, les différents affichages pour différents
appareils et tailles d'écran, et bien plus encore !
Astuce : Le terme « cascading » signifie qu'un style appliqué à un élément parent
s'appliquera également à tous les éléments enfants de ce parent. Ainsi, si vous
définissez la couleur du corps du texte sur « bleu », tous les titres, paragraphes et
autres éléments de texte du corps du texte auront la même couleur (sauf indication
contraire) !
Le CSS peut être ajouté aux documents HTML de 3 manières :

En ligne - en utilisant l' style attribut à l'intérieur des éléments HTML

Interne - en utilisant un <style> élément dans la <head>section
Externe - en utilisant un <link> élément pour créer un lien vers un fichier CSS externe
La méthode la plus courante pour ajouter du CSS consiste à conserver les styles dans des
fichiers CSS externes. Cependant, dans ce tutoriel, nous utiliserons des styles en ligne et
internes, car cela est plus facile à démontrer et à tester par vous-même.
❑ CSS en ligne:
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

❑ CSS interne
CSS interne

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS externe

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Voici à quoi ressemble le fichier « styles.css » :

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}