Séquence 3: APPRENDRE HTML 5 ET CSS 3

+237 650 76 22 79
contact@geniusmuna.com
BP : 8869 Douala, Cameroun
SEQUENCE 3 : LES BALISES HTML
Auteur : KOUMBIN BILITIK Cyril, Développeur PHP –WordPress & Expert SEO, mentor virtuel pour
le compte de Genius Center
1/ Introduction
Bonjour à vous mes très chers Génius et Bienvenue dans ce nouveau module de
formation HTML où aujourd’hui nous verrons un point essentiel que sont Les
Balises HTML. Dernièrement nous avons vu les éléments HTML. Vous ne vous en
souvenez déjà plus ? Je vous invite à jeter un coup sur la leçon précédente. Bon
comme je suis d’humeur plutôt gentille aujourd’hui, pour rappel, voici en résumé ce
que nous avions dit à propos : « Un élément HTML peut être soit constitué d’une
paire de balises (ouvrante et fermante) et d’un contenu, soit d’une balise unique
qu’on dit alors orpheline ».ça y est ? J’allume votre lanterne maintenant ?
Ok ! Aujourd’hui il sera question d’aborder en profondeur la notion de balises

HTML. Alors Sans plus tarder, allons-y moussaillons !
2/ Définition & Exemples de balises
Comme vous le savez déjà depuis la précédente leçon, le HTML utilise ce que l'on
nomme des balises afin de structurer les informations et pour transformer votre code
source en document correct affiché à l'écran.
Une balise à titre de rappel est l’élément de base du système de codage

HTML. Elle est composée du nom de l'élément entouré des symboles « < » et « > ».
Par exemple <html> est une balise.
Genius Muna est une marque portée par Genius Centers

NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229
www.geniusmuna.com
+237 650 76 22 79
Voici la liste de toutes les balises HTML
 Balises de premier niveau
Ces balises sont indispensables pour pouvoir commencer à coder une page web en
HTML. Elles vont permettre d’indiquer aux différents navigateurs Web qu’il s’agit de
pages en HTML et de séparer l’en-tête du corps de la page.
<html> – </html> : balise principale de toutes les pages web.
<head> – </head> : en-tête de la page
<body> – </body> : corps de la page
 Balises d’en-tête
Ces balises sont toutes situées dans l’en-tête de la page Web, c’est-à-dire entre la
balise <head> et la balise </head>. Vous remarquerez que quand un contenu se situe
entre deux balises html, la deuxième est quasi-identique à la première à ceci près qu’il
s’agit d’une balise fermante. Une balise fermante reprend la balise d’ouverture en y
ajoutant un slash (/) avant l’intitulé de la balise et après le signe inférieur (<). Comme
ici avec le <head> qui est la balise d’ouverture et le </head> qui est la balise de
fermeture. Certaines balises sont dites auto-fermantes (comme la balise image (img))
par exemple.
<link /> : liaison avec une feuille de style
<meta /> : métadonnées de la page web (charset, mots-clés, c’est aussi parmi ces
balises que l’on retrouve la balise meta description que nous nous aborderons
plus loin dans cette formation pour vous en présenter les intérêts en matière de
référencement naturel, même si cette dernière, rappelons-le pour nos petits Génius
qui ont déjà entendu parlé du SEO, n’est pas directement interprétée par l’algorithme
du moteur de recherche de Google…)
<script> – </script>: code JavaScript
<style> – </style> : code CSS

www.geniusmuna.com
+237 650 76 22 79
<title> – </title> : titre de la page. La fameuse balise title ! Une balise à bien
renseigner car elle est très importante pour le référencement naturel ! Même si
actuellement vous en êtes à réfléchir quant à savoir comment vous devez coder un
site Web, que ce soit votre futur site personnel ou celui d’une société ou association
pour laquelle vous travaillerez, vous allez voir, le SEO va en théorie vite devenir un
sujet qui va attirer toute votre attention.
 Balises de structuration du texte
Ces balises permettent de disposer des blocs dans la page contenant du texte, des
images ou encore des menus.
<abbr> – </abbr> : abréviation
<blockquote> – </blockquote> : citation longue
<q> – </q> : citation courte
<cite> – </cite> : citation du titre d’une œuvre ou d’un événement
<sub> – </sub> : mise en indice
<sup> – </sup> : mise en exposant
<h1> – <h6> : titre de différents niveaux
<img /> : image grâce aux attributs src (adresse de l’image) et alt (texte de
remplacement)
<mark> – </mark> : mise en valeur visuelle (le texte est surligné)
<strong> – </strong> : mise en valeur forte (le texte est en gras)
<em> – </em> : mise en valeur faible (le texte est en italique)
<figure> – </figure> : figure (image, code…)
<figcaption> – </figcaption> : description de la figure

www.geniusmuna.com
+237 650 76 22 79
<audio> – </audio> : son
<video> – </video> : vidéo
<source> – </source> : indique un format possible pour les balises <audio> et

<video>
<a> – </a> : lien hypertexte grâce à l’attribut href.
<br /> : retour à la ligne
<p> – </p>: paragraphe
<hr /> : ligne de séparation horizontale
<address> – </adresss> : adresse de contact
<del> – </del> : texte supprimé
<ins> – </ins> : texte inséré
<dfn> – </dfn> : définition
<kbd> – </kbd> : indiquer un code que doit taper le visiteur
<progress> – </progress> : barre de progression
<time> – </time> : date ou heure
<pre> – </pre> : le texte à l’intérieur de la balise sera sous forme de code
 Balises de listes
Ces balises permettent de créer des listes (numérotées, à puces…).
<ul> – </ul>: liste à puces, non numérotée
<ol> – </ol> : liste numérotée

www.geniusmuna.com
+237 650 76 22 79
<li> – </li>: élément de la liste à puces
<dl> – </dl> : liste de définitions
<dt> – </dt> : définition du terme
 Balises de tableau
Ces balises ont pour but de créer un tableau structuré avec des lignes et des colonnes.
<table> – </table> : tableau
<caption> – </caption> : titre du tableau
<tr> – </tr>: ligne de tableau
<th> – </th> : cellule d’en-tête
<td> – </td> : cellule
<thead> </thead> : section de l’en-tête du tableau
<tbody> – </tbody> : section du corps du tableau
<tfoot> – </tfoot> : section du pied du tableau
 Balises de formulaire
Ces balises permettent de créer des formulaires de contact par exemple.
<form> – </form> : délimite un formulaire (method : indique la méthode d’envoi du

formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post / action : la
page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire. )
<fieldset> – </fieldset> : permet de regrouper plusieurs éléments d’un formulaire
<legend> – </legend> : titre d’un groupe dans un formulaire
<label> – </label> : titre d’un élément de formulaire
<input /> : champ de formulaire grâce à l’attribut type

www.geniusmuna.com
+237 650 76 22 79
<textarea> – </textarea> : zone de saisie multiligne grâce aux attributs rows et cols
(nombre de lignes et de colonnes)
<select> – </select> : liste déroulante
<option> – </option> : élément d’une liste déroulante
<optgroup> – </optgroup> : groupe d’éléments d’une liste déroulante
 Balises de section
Ces balises nous servent à construire les éléments de base d’un site web.
<header> – </header> : en-tête
<nav> – </nav>: liens principaux de navigation
<footer> – </footer> : pied de page
<section> – </section> : section de page
<article> – </article> : article (contenu autonome)
<aside> – </aside> : informations complémentaires
 Balises génériques
Il y a deux balises génériques : l’une est inline, l’autre est block. Elles n’ont pas de
sens sémantique.
<span> – </span> : balise générique de type inline
 Autorise les autres éléments à venir s’asseoir à gauche et à droite.

 Ne se redimensionne pas avec width et height.
 Respecte les marges gauches et droites, mais pas les marges haut et bas.
<div> – </div> : balise générique de type block
 Force un passage à la ligne.

www.geniusmuna.com
+237 650 76 22 79

 Ne tolère pas d’élément à gauche ou à droite.
 Se redimensionne avec width et height.
 Respecte toutes les marges.
Aaaah je crois que ma tête va exploser. Donc il me faudra connaitre

toutes ces balises et leurs utilités par cœur ? Je suis certes un Genius
mais sûrement pas une encyclopédie moi  !!!
Tout doux on se calme  !!! Connaître toutes les balises par cœur n'est heureusement
pas nécessaire mais il faut en avoir bien compris le principe pour pratiquer le HTML.
On a de plus tendance à utiliser un nombre de balises plus restreint qu'il n'y paraît.
Par contre il serait judicieux de Tester chacune des balises pour voir le résultat
concret. Ceci tombe à pic car c’est de cela dont il question justement dans les cas
pratiques suivants.
3 /Cas pratiques
Notre cas pratique se résumera modifier le code source HTML qui se trouve entre les
balises <body> – </body> dans notre bon vieux fichier index.html. Ceci enfin de
rajouter à la suite les éléments de listes, tableau et formulaire. C’est parti !!
 Pour un exemple de liste, ajoutez ce bout de code à la suite
 <ul>
 <li>Café</li>
 <li>Thé</li>
 <li>Lait</li>
 </ul>
Une fois cela fait, testez en cliquant sur ce lien : http://localhost/tests/index.html

www.geniusmuna.com
+237 650 76 22 79
 Pour créer des exemples de tableau en HTML, ajoutez ce bout de code à la

suite de la liste que nous avons créé.
 

 <table>
 <tr>
 <th>Prénom</th>
 <th>Nom</th>
 </tr>
 <tr>
 <td>Jean</td>
 <td>Dupont</td>
 </tr>
 <tr>
 <td>Marion</td>
 <td>Duval</td>
 </tr>
 </table>

 
 <table>

www.geniusmuna.com
+237 650 76 22 79
 <thead>
 <tr>
 <th>Contenu d'en-tête 1</th>
 <th>Contenu d'en-tête 2</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Contenu interne 1</td>
 <td>Contenu interne 2</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td>Pied de tableau 1</td>
 <td>Pied de tableau 2</td>
 </tr>
 </tfoot>
 </table>
Le résultat parle de lui-même, Testez : http://localhost/tests/index.html

www.geniusmuna.com
+237 650 76 22 79
 Pour un exemple de formulaire, ajoutez ce bout de code à la suite :
 <form action="/ma-page-de-traitement" method="post">

 <h2>Mon premier formulaire Genius</h2>
 <div>
 <label for="name">Nom :</label>
 <input type="text" id="name" name="user_name">
 </div>
 <div>
 <label for="mail">e-mail :</label>
 <input type="email" id="mail" name="user_mail">
 </div>
 <div>
 <label for="msg">Message :</label>
 <textarea id="msg" name="user_message"></textarea>
 </div>
 <div>
 <input type="submit" value="Envoyer"/>
 </div>
 </form>

www.geniusmuna.com
+237 650 76 22 79
Nous y sommes, Testez : http://localhost/tests/index.html

www.geniusmuna.com
+237 650 76 22 79
5 /En résumé
 Une balise à titre de rappel est l’élément de base du système de codage HTML
 Les différents types de balises sont : les balises de premier niveau, les balises
d’en-tête, les balises de structuration du texte, les balises de listes, les balises
de tableau, les balises de formulaire, les balises de section, les balises
génériques
 Les balises de premier niveau <html> – </html>, <head> – </head> et

<body> – </body> sont essentielles et obligatoires car permettent d’indiquer
aux différents navigateurs Web qu’il s’agit de pages en HTML et séparent l’en-
tête du corps de la page
 il n'est pas nécessaire de retenir toutes ces balises mais il faut bien comprendre
le principe pour pratiquer le HTML
6 /QUIZ
1. Laquelle de ces balises est utile au référencement SEO d’une page HTML ?
o <body>
o <title>
o <img/>
2. Quel est le code HTML correct pour insérer une image?

o <image src=" mon_image.png" alt="Mon image de test">
o <img name=" mon_image.png" alt="Mon image de test">
o <img src=" mon_image.png" alt="Mon image de test">
o <image href=" mon_image.png" alt="Mon image de test">
3. Lesquels de ces éléments sont tous des éléments <table>?

o <table><head><tr>
o <table><tr><td>

www.geniusmuna.com
+237 650 76 22 79
o <table><body><tfoot>
o <table><tbody><tt>
4. Comment pouvez-vous faire une liste à puces?

o <ol></ol>
o <list></list>
o <dl></dl>
o <ul></ul>
5. Quel est le code HTML correct pour créer une liste déroulante?
o <input type=”check”>
o <input type=”checkbox”>
o <check>
o <checkbox>
6. Quel élément HTML définit le titre d'un document?

o <meta>
o <title>
o <head>
o <header>
7. Quel est l'élément HTML correct pour la lecture de fichiers vidéo?

o <movie>
o <audio>
o <media>
o <video>
8. En HTML, que définit l'élément <aside>?

o Contenu mis à part le contenu de la page
o The ASCII character-set; to send information between computers on the
Internet
o Une liste de navigation à afficher à gauche de la page

www.geniusmuna.com
+237 650 76 22 79
7 /ACTIVITE
Il vous ait demandé de realiser le début d’une page HTML. Le site se nomme « TEST
GENIUS » et sera le site de test que nous aurons à réaliser pas à pas au fil des
activités. Dans cette activité en particulier, nous ferons le header et le début de la
partie centrale de sa page d’accueil dont voici le schéma et les indications nécessaires.
Je compte sur vous ! 

www.geniusmuna.com

Langue

Séquence 3: APPRENDRE HTML 5 ET CSS 3

Transféré par

Informations du document

Description :

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Séquence 3: APPRENDRE HTML 5 ET CSS 3

Titre original :

Transféré par

Description :

Droits d'auteur :

+237 650 76 22 79

BP : 8869 Douala, Cameroun

SEQUENCE 3 : LES BALISES HTML

Ok ! Aujourd’hui il sera question d’aborder en profondeur la notion de balises

2/ Définition & Exemples de balises

Une balise à titre de rappel est l’élément de base du système de codage

Genius Muna est une marque portée par Genius Centers

BP : 8869 Douala, Cameroun

Voici la liste de toutes les balises HTML

 Balises de premier niveau

<html> – </html> : balise principale de toutes les pages web.

<head> – </head> : en-tête de la page

<body> – </body> : corps de la page

<link /> : liaison avec une feuille de style

<script> – </script>: code JavaScript

<style> – </style> : code CSS

Genius Muna est une marque portée par Genius Centers

BP : 8869 Douala, Cameroun

 Balises de structuration du texte

<abbr> – </abbr> : abréviation

<blockquote> – </blockquote> : citation longue

<q> – </q> : citation courte

<cite> – </cite> : citation du titre d’une œuvre ou d’un événement

<sub> – </sub> : mise en indice

<sup> – </sup> : mise en exposant

<h1> – <h6> : titre de différents niveaux

<mark> – </mark> : mise en valeur visuelle (le texte est surligné)

<strong> – </strong> : mise en valeur forte (le texte est en gras)

<em> – </em> : mise en valeur faible (le texte est en italique)

<figure> – </figure> : figure (image, code…)

<figcaption> – </figcaption> : description de la figure

Genius Muna est une marque portée par Genius Centers

BP : 8869 Douala, Cameroun

<audio> – </audio> : son

<video> – </video> : vidéo

<source> – </source> : indique un format possible pour les balises <audio> et

<a> – </a> : lien hypertexte grâce à l’attribut href.

<br /> : retour à la ligne

<p> – </p>: paragraphe

<hr /> : ligne de séparation horizontale

<address> – </adresss> : adresse de contact

<del> – </del> : texte supprimé

<ins> – </ins> : texte inséré

<dfn> – </dfn> : définition

<kbd> – </kbd> : indiquer un code que doit taper le visiteur

<progress> – </progress> : barre de progression

<time> – </time> : date ou heure

<pre> – </pre> : le texte à l’intérieur de la balise sera sous forme de code

Ces balises permettent de créer des listes (numérotées, à puces…).

<ul> – </ul>: liste à puces, non numérotée

<ol> – </ol> : liste numérotée

Genius Muna est une marque portée par Genius Centers

BP : 8869 Douala, Cameroun

<li> – </li>: élément de la liste à puces

<dl> – </dl> : liste de définitions

<dt> – </dt> : définition du terme

<table> – </table> : tableau

<caption> – </caption> : titre du tableau

<tr> – </tr>: ligne de tableau

<th> – </th> : cellule d’en-tête

<td> – </td> : cellule