Bali Ses

Table des matières
1. Les Balises de Base ................................................................................................................ 3

<html> .................................................................................................................................... 3
<head> .................................................................................................................................... 3
<body> ................................................................................................................................... 3
2. Les Balises de Titre ................................................................................................................ 3
<h1>, <h2>, ..., <h6> ............................................................................................................. 3
3. Les Balises de Paragraphe et de Texte ................................................................................... 3
<p> ......................................................................................................................................... 4
<br> ........................................................................................................................................ 4
<strong> et <em> ................................................................................................................... 4
4. Les Balises de Liste ................................................................................................................ 4
<ul> ........................................................................................................................................ 4
<ol> ........................................................................................................................................ 4
<dl> ........................................................................................................................................ 5
5. Les Balises d'Image et de Média ............................................................................................ 5
<img> ..................................................................................................................................... 5
<video>................................................................................................................................... 5
<audio>................................................................................................................................... 5
6. Les Balises de Liens ............................................................................................................... 5
<a> .......................................................................................................................................... 6
7. Les Balises de Tableau ........................................................................................................... 6
<table> .................................................................................................................................... 6
<th> ........................................................................................................................................ 6
<caption> ................................................................................................................................ 6
8. Les Balises de Formulaire ...................................................................................................... 7
<form> .................................................................................................................................... 7
<input> ................................................................................................................................... 7
<select> et <option> ............................................................................................................... 7
<textarea> ............................................................................................................................... 7
<button> ................................................................................................................................. 8
9. Les Balises de Média et d'Incorporation ................................................................................ 8
<iframe> ................................................................................................................................. 8
<embed> et <object>.............................................................................................................. 8
10. Les Balises de Formatage et de Style ................................................................................... 8
<div> ...................................................................................................................................... 8
<span> .................................................................................................................................... 8
<style> .................................................................................................................................... 9
11. Les Balises de Sectionnement .............................................................................................. 9
<header> ................................................................................................................................. 9
<footer> .................................................................................................................................. 9
<nav> ...................................................................................................................................... 9
<section> .............................................................................................................................. 10
<article> ............................................................................................................................... 10
<aside> ................................................................................................................................. 10
<main> ................................................................................................................................. 10
<figure> et <figcaption> ...................................................................................................... 10
12. Les Balises de Meta-information ....................................................................................... 11
<meta> .................................................................................................................................. 11
<title> ................................................................................................................................... 11
13. Les Balises de Scripting ..................................................................................................... 11
<script>................................................................................................................................. 11
<noscript>............................................................................................................................. 11
1. Les Balises de Base
<html>
Rôle : La balise <html> englobe tout le contenu d'une page web et indique au navigateur que
le document est écrit en HTML.
<head>
Rôle : La balise <head> contient des informations sur la page, telles que le titre, les
métadonnées et les liens vers des feuilles de style ou des scripts.
<head>
<title>Titre de la Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
Rôle : La balise <body> contient le contenu visible de la page web, tel que le texte, les
images, les liens et autres éléments.
<body>
<h1>Titre Principal</h1>
<p>Ceci est un paragraphe.</p>
<img src="image.jpg" alt="Image">
</body>
2. Les Balises de Titre

<h1>, <h2>, ..., <h6>
Rôle : Les balises de titre définissent les niveaux de titres sur une page web, allant de <h1>
(plus important) à <h6> (moins important).
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
3. Les Balises de Paragraphe et de Texte

<p>
Rôle : La balise <p> est utilisée pour créer des paragraphes de texte.
<p>Ceci est un paragraphe.</p>
<br>
Rôle : La balise <br> est utilisée pour insérer un saut de ligne dans le texte.
Première ligne <br> Deuxième ligne
<strong> et <em>
Rôle : Les balises <strong> et <em> permettent de mettre en évidence le texte en gras et en
italique respectivement.
<p>Ceci est un texte <strong>important</strong> et <em>emphatique</em>.</p>
4. Les Balises de Liste

<ul>
Rôle : La balise <ul> est utilisée pour créer une liste à puces non ordonnée.
<ul>
<li>Élément 1</li>
</ul>
<ol>
Rôle : La balise <ol> est utilisée pour créer une liste ordonnée avec des numéros.
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
<dl>
Rôle : La balise <dl> est utilisée pour créer une liste de définitions, avec des termes associés à
leurs définitions.
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>
5. Les Balises d'Image et de Média

<img>
Rôle : La balise <img> est utilisée pour insérer des images dans une page web.
<img src="image.jpg" alt="Description de l'image">
<video>
Rôle : La balise <video> est utilisée pour insérer des vidéos dans une page web.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Votre navigateur ne supporte pas les vidéos HTML5.
</video>
<audio>
Rôle : La balise <audio> est utilisée pour insérer des fichiers audio dans une page web.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Votre navigateur ne supporte pas les fichiers audio HTML5.
</audio>
6. Les Balises de Liens

<a>
Rôle : La balise <a> est utilisée pour créer des liens vers d'autres pages web ou des
ressources.
<a href="https://www.example.com">Cliquez ici</a> pour visiter le site.
7. Les Balises de Tableau

<table>
Rôle : La balise <table> est utilisée pour créer un tableau dans une page web.
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<th>
Rôle : La balise <th> est utilisée pour définir une cellule d'en-tête dans un tableau.
<table>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>
<caption>
Rôle : La balise <caption> est utilisée pour ajouter un titre à un tableau.
<table>
<caption>Titre du Tableau</caption>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>
8. Les Balises de Formulaire

<form>
Rôle : La balise <form> est utilisée pour créer un formulaire interactif dans une page web.
<form action="/traitement.php" method="post">

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<input type="submit" value="Envoyer">
</form>
<input>
Rôle : La balise <input> est utilisée pour créer des champs de saisie, des boutons, des cases à
cocher, etc.
<input type="text" name="nom">

<input type="submit" value="Envoyer">
<input type="checkbox" name="accepte">
<select> et <option>
Rôle : Les balises <select> et <option> sont utilisées pour créer des listes déroulantes.
<select name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
</select>
<textarea>
Rôle : La balise <textarea> est utilisée pour créer un champ de texte multiligne.
<textarea name="commentaire">Ceci est un commentaire.</textarea>

<button>
Rôle : La balise <button> est utilisée pour créer un bouton dans un formulaire.
<button type="submit">Envoyer</button>
9. Les Balises de Média et d'Incorporation

<iframe>
Rôle : La balise <iframe> permet d'incorporer une autre page web dans une page web.
<iframe src="https://www.example.com"></iframe>
<embed> et <object>
Rôle : Les balises <embed> et <object> permettent d'incorporer des éléments multimédias tels
que des vidéos, des fichiers audio, etc.
<embed src="video.mp4">
<object data="video.mp4"></object>
10. Les Balises de Formatage et de Style

<div>
Rôle : La balise <div> est utilisée pour créer une division ou un conteneur qui peut être stylisé
avec CSS.
<div style="background-color: lightblue; padding: 10px;">

Contenu du div...
</div>
<span>
Rôle : La balise <span> est utilisée pour appliquer des styles à une partie du texte sans
affecter la mise en page globale.
Ceci est un <span style="color: red;">texte coloré</span>.
<style>
Rôle : La balise <style> est utilisée pour inclure des règles de style CSS directement dans la
page HTML.
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
11. Les Balises de Sectionnement

<header>
Rôle : La balise <header> est utilisée pour définir l'en-tête ou la zone d'introduction d'une
page ou d'une section.
<header>
<h1>Titre de l'en-tête</h1>
<p>Description de l'en-tête</p>
</header>
<footer>
Rôle : La balise <footer> est utilisée pour définir le pied de page ou la zone de conclusion
d'une page ou d'une section.
<footer>
<p>Texte du pied de page</p>
</footer>
<nav>
Rôle : La balise <nav> est utilisée pour définir une section de navigation.
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#a-propos">À Propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section>
Rôle : La balise <section> est utilisée pour définir une section indépendante dans un
document.
<section>
<h2>Titre de la section</h2>
<p>Contenu de la section</p>
</section>
<article>
Rôle : La balise <article> est utilisée pour définir un contenu autonome et indépendant qui
peut être réutilisé.
<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article</p>
</article>
<aside>
Rôle : La balise <aside> est utilisée pour définir un contenu complémentaire ou une section
latérale.
<aside>
<h3>Contenu complémentaire</h3>
<p>Informations supplémentaires</p>
</aside>
<main>
Rôle : La balise <main> est utilisée pour définir le contenu principal d'une page.
<main>
<h1>Contenu Principal</h1>
<p>Ceci est le contenu principal de la page.</p>
</main>
<figure> et <figcaption>
Rôle : Les balises <figure> et <figcaption> sont utilisées pour créer une figure ou une
illustration avec une légende.
<figure>
<img src="image.jpg" alt="Image">
<figcaption>Légende de l'image</figcaption>
</figure>
12. Les Balises de Meta-information

<meta>
Rôle : La balise <meta> est utilisée pour inclure des métadonnées dans l'en-tête de la page.
<meta charset="UTF-8">
<meta name="description" content="Description de la page">
<title>
Rôle : La balise <title> est utilisée pour définir le titre de la page qui s'affiche dans l'onglet du
navigateur.
<title>Titre de la Page</title>
13. Les Balises de Scripting

<script>
Rôle : La balise <script> est utilisée pour inclure des scripts JavaScript dans une page web.
<script type="text/javascript">
// Script JavaScript ici...
</script>
<noscript>
Rôle : La balise <noscript> est utilisée pour afficher un contenu alternatif lorsque JavaScript
n'est pas activé dans le navigateur du visiteur.
<noscript>
<p>Voici le cours complet sur les balises HTML avec leurs rôles et des
exemples. Vous pouvez copier et coller ce code dans un fichier HTML pour
voir les balises en action et explorer davantage les possibilités offertes
par HTML.
N'hésitez pas à pratiquer et à expérimenter avec ces balises pour

approfondir vos compétences en développement web avec HTML. Bonne
continuation dans votre apprentissage du développement web ! Si vous avez
d'autres questions ou besoin d'aide supplémentaire, n'hésitez pas à me
demander.

Bali Ses

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bali Ses

Transféré par

Droits d'auteur :

Formats disponibles

Table des matières

1. Les Balises de Base ................................................................................................................ 3

2. Les Balises de Titre

3. Les Balises de Paragraphe et de Texte

<p>Ceci est un paragraphe.</p>

Première ligne <br> Deuxième ligne

<p>Ceci est un texte <strong>important</strong> et <em>emphatique</em>.</p>

4. Les Balises de Liste

5. Les Balises d'Image et de Média

<img src="image.jpg" alt="Description de l'image">

6. Les Balises de Liens

<a href="https://www.example.com">Cliquez ici</a> pour visiter le site.

7. Les Balises de Tableau

8. Les Balises de Formulaire

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

<input type="text" name="nom">

<textarea name="commentaire">Ceci est un commentaire.</textarea>

9. Les Balises de Média et d'Incorporation

10. Les Balises de Formatage et de Style

<div style="background-color: lightblue; padding: 10px;">

11. Les Balises de Sectionnement

12. Les Balises de Meta-information

13. Les Balises de Scripting

N'hésitez pas à pratiquer et à expérimenter avec ces balises pour

Vous aimerez peut-être aussi