HTML
HTML (Hyper Text Markup Language) est un
langage de programmation principalement utilisé
pour créer des site web en collaboration avec le
CSS
•Installation de Vscode et des extensions(sur
Windows)
Vscode est un editeur de code utilisé dans le
mode de la programmation il permet de coder
avec plusieurs langages différentes
Rechercher Vscode sur un navigateur de
recherche puis cliquer sur le lien et
selectionne la version pour votre ordinateur
•Installation sur android
Sur Play Store recherchez code editor et et
commencer l’installation
NB : Avant de commencer il est primordiable
d’avoir un éditeur de code pour appliquer
directement ce qu’on va apprendre aujourd’hui
-Pour ce qui utilise vscode vous devez télécharger
les extensions suivantes :
-Live Server Lancer un serveur local pour visualiser les
changements HTML/CSS/JS en direct.
-Prettier permet de formater le code html
Les balises HTML
Les balises en html sont des éléments qui
permet de structurer et d’organiser le
contenue d’une page web
-Elles sont entouré de chevrons < >.
-La plupart du temps, elle a une balise
Ouvrante <balise> et une balise fermante
</balise>
-Certaines balises sont autonomes (auto-
Fermantes), comme <img> ou <br>
Exemple :
<p> Ceci est un paragraphe. </p>
<img src="[Link]" alt="une photo">
Liste des balises HTML
• structure de base :
•< !DOCTYPE html> :Sert a déclarer le type
de document(exemple :HTML5) .Exemple
d’utilisation :< !DOCTYPE html>
•<html> :est la racine du document utiliser
principalement pour les langues. Exemple
d’utilisation :< html lang= « fr »
… </html>
•<head> :sert à déclarer les métadonnées
(titre, style, script, charset)
Exemple d’utilisation :
<head>
<title>Ma page</title>
</head>
(donne le nom de la page de connexion)
•<body> : Corps de la page web contient les
contenue visible de la page .
Exemple d’utilisation :
<body>
<h1>Bienvenue</h1>
</body>
• Balises d'en-tête :
C’est balise sont situées ente <head>et
</head>
•<link>permet de lié le page a une feuille de
style .
Exemple d’utilisation :
<link rel="stylesheet" href="[Link]">
(Permet de lier notre page a une feuille de
style de CSS)
•<meta> : Les métadonnées de la page web
(collections de caractères, mots-clés, etc.)
<meta> est une balise orpheline cela signifie cela
veut dire qu’il est autonome(auto-femer).exemple
d’utilisation :<meta charset=UTF-8>
•<script> : permet de lier notre page a une
script javascript
Exemple d’utilisation :
<script src="[Link]"></script>
(lie notre page a [Link])
•<title> : Titre de la page
Exemple de structure d’une page web :
<!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>
•Balises de section sémantique :
•<header> :En-tête d’une page ou section .
Exemple d’utilisation :
<header><h1>Titre</h1></header>
•<footer> : Le pied de page Exemple d’utilisation :
<footer>© 2025</footer>
•<main> : Contenu Principal unique Exemple
d’utilisation :
<main><article>Texte</article></main>
•<nav> :Créé des liens de navigations Exemple d’utilisation :
<nav><a href="#">Accueil</a></nav>
•Texte :
•<h1>à<h6> : Titre différentes niveaux.
Exemple d’utilisation
Sur la page sur le web
<h1> niveau 1</h1> niveau 1
<h2> niveau 2</h2> niveau 2
<h3> niveau 3</h3> niveau 3
<h4> niveau 4 </h4> niveau 4
<h5> niveau 5</h5> niveau 5
<h6> niveau 6</h6> niveau 6
•<p> : Sert à créer un paragraphe
Exemple d’utilisation :
<p>Voici un texte</p>
•<br> : Utilisé pour les saut de ligne
Exemple d’utilisation :
<p>bonjour<br>comment ça va ?</p>
•<hr> : utilisé pour mettre une ligne
horizontale entre deux balises
Exemple d’utilisation :
<h1> niveau 1</h1> niveau 1
<hr>
<h2> niveau 2</h2> niveau 2
•<strong> : permettre de mettre en valeur une
partie important
Exemple d’utilisation :
<p>Je suis la partie <strong>important</strong> du texte </p>
Resultat sur le web
Je suis la partie important du texte
•<em> : permet de faire du texte accentué.
Exemple d’utilisation :
<p>Je suis la partie <em >important</em> du texte </p>
Resultat sur le web :
Je suis la partie important du texte
•<b> : Modifier le texte et le mettre en gras
Exemple d’utilisation :
<p>Je suis<b>Texte</b> la partie </p>
Résultat sur le web
Je suis Texte la partie
•<u> :permet de souligné un texte choisi
Exemple d’utilisation :
<p>Je suis<u>Texte</u> la partie </p>
Résultat sur le web
Je suis Texte la partie
•<mark> : modifier le texte choisie en texte
surligné
Exemple d’utilisation :
<p>Je suis la partie <mark>important</mark> du texte </p>
Résultat sur le web
Je suis la partie important du texte
•<del> :permet de barrer un texte Exemple
d’utilisation :
<p>Je suis<del>Ancien prix</del></p>
Résultat sur le web
Je suisAncien prix Ancien prix
•<address> :Utiliser pour donner les coordonnées
de l’auteur d’un article ou d’une page Exemple
d’utilisation :
<address>
Ecrit par <a href="malto:contact@[Link]">Jean Dupont</a><br>
123 Rue des Fleurs, Paris<br>
France
</address>
•<kbd> : Représente une saisie clavier (une touche
ou une combinaison)
Permet de montrer à l’utilisateur ce qu’il doit
taper au clavier
Exemple d’utilisation :
<p>pour copier , appuyer sur <kbd>Ctrl</kbd> + <kbd>C</kbd> </p>
<p>pour coller , appuyer sur <kbd>Ctrl</kbd> + <kbd>V</kbd> </
•<time> : Représenter une date ou horaire
Exemple d’utilisation :
<p>L'evenement aura lieu le <time datetime="2025-09-15"> 15 septembre
2025</time> .</p>
<p>Le train part à <time datetime="8:30">8h30</time></p>
•<progress> : Afficher une barre de progression
Permet de montrer l’avancement d’une tâche
(téléchargement ,chargement ,examen en cours)
Exemple d’utilisation :
<label for="files">Telecharement en cours:</label>
<progress id="files" value="70" max="100">70%</progress>
•Liens et medias :
•<a>: permet d’ajouter des lien hypertexte à
notre page :Exemple d’utilisation :
<a href= [Link] (affiche
un lien vers google)
•<img> :Permet d’ajouter des images
Exemple d’utilisation :
<img src= « [Link] » alt= « Un chat »>
(src= « permet d’ajouter limage et alt demande une
description de l’image)
•<video> :Permet d’ajouter des Vidéo.
Exemple d’utilisation :
<video controls><source src= « film.mp4 » type= « video/mp4 »</video>
•<embed> :Permet d’ajouter des Contenu
externe(flash, pdf) Exemple d’utilisation :
<embed src="[Link]">
•<audio> : :Permet d’ajouter des Audio.
Exemple d’utilisation :
<audio controls><source src = « son.mp3 »></audio>
NB :Ne jamais mettre un audio a la place de la
vidéo
Mettez toujours le chemin du fichier utlisé dans
src
•Listes :
•<ul> :sert a créée une liste non ordonnée
.Exemple d’utilisation :
<ul>
<li>Item</li>
<li>Item2</li>
</ul>
•<ol> : sert a créé une liste ordonnée
Exemple d’utilisation :
<ol >
<li>1er</li>
<li>2e</li>
</ol>
•<li> :Désigne l’élément de la liste.
Exemple d’utilisation :
<li>élément</li>
•<dl> :Permet de créer une liste de définition
Exemple d’utilisation :
<dl>
<dt>HTML</dt>
<dd>Langage</dd>
</dl>
ça crée une liste Html puis donne sa définition en
bas
•<dt> :Le terme a définir et <dd> : la définition du
terme
NB :
-Ne jamais oublié les <li>
-ne mets pas <li> hors de <ul> ou <ol>
•Tableaux :
•<table> :Permet de créer un tableau .
Exemple d’utilisation :
<table>
<tr>
<td>Cellule</td>
</tr>
</table>
•<tr> :sert a créé les ligne d’un tableau .
Exemple d’utilisation :
<tr>
<td>Cellule</td>
</tr>
•<td>: Permet de créer les cellules normales d’un
tableau.
Exemple d’utilisation :
<td>Cellule</td>
•<th>: Permet de créer les cellules d’en-tête
normales d’un tableau.
Exemple d’utilisation :
<th>Nom</th>
NB :
-Ne jamais utiliser <td>,<th> et <tr> hors de
<table>
•Formulaires :
•<form> :permet de créer un formulaire.
Exemple d’utilisation :
<form action="[Link]" method="POST">
</form>
•<input> :Créé un champ de saisie.
Peut être texte, mot de passe, email, fichier,
bouton, radio (pour sélectionner une ou plusieurs
options), checkbox(pour cocher une ou plusieurs case),
etc, grâce à l’attribut type
Exemple d’utilisation :
<input type="text" placeholder="Nom">
(ça demande à l’utilisateur de saisi son nom ; vous pouvez
remplacer le type pour demander soit un email soit un fichier)
Pour imposer qu’ un champ soit obligatoire on utilise required :
<input type="text" required>
•<label> : Sert à associer deux ou plusieurs
champs pour les mettre cote à cote.
Améliore l’accessibilité et permet de cliquer sur le
texte pour activer le champ
Exemple d’utilisation :
<label for="nom">Nom:</label>
<input type="text" id="nom">
•<select> et <option> : Menu déroulant
Permet de choisir une ou plusieurs options
Exemple d’utilisation :
<select>
<option>python</option>
<option>Java</option>
<option>C++</option>
</select>
(créé un menu capable de choisir entre python, java, C++)
•<Button> :Création d’un bouton .
Exemple d’utilisation :
<button type="submit">Envoyer</button>
Crée un Bouton de type submit(envoyer)Vous pouvez toujours changé le
type(submit(envoyer), reset(efface tout), buton(dirige vers une autre page) )
•<option> :sert à créer une option de menu
Exemple d’utilisation :
<optgroup label="Langues">
<option>FR</option>
</optgroup
•<fieldset> et <legend> : Grouper des champs de
formulaires
Permet d’organiser et donnez un titre au groupe
Exemple d’utilisation :
<fieldset>
<legend>Information personnelle</legend>
<label>Nom : <input type="text"></label>
<label>Age : <input type="number"></label>
</fieldset>
•<datalist> :Liste d’options prédédinies pour un
champ de saisie
Permet la suggestion automatique
Exemple d’utilisation :
<input list="Langage">
<datalist id="Langage">
<option value="python"></option>
<option value="Java"></option>
<option value="Javascript"></option>
</datalist>
•Les commentaires :
Les Commentaire sont des textes qui n’ont aucune
impacte sur la page web Exemple d’utilisation :
<!-- Ceci est un commentaire -->
NB :
-Tous le monde peut voir votre commentaire et
code html :Pour se faire dans le navigateur de la
page ,Faite un clique droit et sélectionner l’option
afficher le code source