Vous êtes sur la page 1sur 14

+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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

<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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

<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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

<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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

<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.

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun


 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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

 Pour créer des exemples de tableau en HTML, ajoutez ce bout de code à la


suite de la liste que nous avons créé.

 <!-- Tableau simple avec en-tête -->


 <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>

 <!-- Tableau utilisant thead, tfoot, et tbody -->
 <table>

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

 <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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

 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>

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

Nous y sommes, Testez : http://localhost/tests/index.html

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

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>

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

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

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
contact@geniusmuna.com

BP : 8869 Douala, Cameroun

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 ! 

Genius Muna est une marque portée par Genius Centers


NIU : M0317126170081W , RCCM : RC/DLA/2017/B/1229
www.geniusmuna.com

Vous aimerez peut-être aussi