Vous êtes sur la page 1sur 15

+237 650 76 22 79

contact@geniusmuna.com

BP : 8869 Douala, Cameroun

SEQUENCE 2 : LES ELEMENTS HTML

Auteur : KOUMBIN BILITIK Cyril, Développeur PHP –WordPress & Expert SEO, mentor virtuel pour
le compte de Genius Center

1/ Introduction

Bonjour à vous les Génius et Bienvenue dans ce nouveau module de formation où je


vous propose de découvrir ensemble le HTML. Le HTML c’est un langage assez
important car il constitue la base de la plupart des sites internet que vous visitez
aujourd’hui. Eh ben, pour vous en rendre compte, il vous suffit d’aller sur un site
quelconque, à titre d’exemple rendons nous sur notre site préféré commun. Vous avez
deviné le quel je suppose ? Celui de Génius bien-entendu  !! Il est situé à cette
adresse https://geniusmuna.com/fr/ . Si vous y êtes comme moi, vous faites un
clic droit avec votre souris puis vous cliquez sur « afficher le code source de la
page » tel que nous le montre la capture suivante :

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

Cela étant fait, vous serez automatiquement conduis sur une nouvelle fenêtre de
votre navigateur qui elle, vous affiche à son tour un code.

Ce code que vous voyez là n’est ni plus ni moins que du HTML. Donc derrière
beaucoup de sites que nous avons l’habitude de consulter au quotidien tels que
Genius Muna notre préféré, Youtube, Wikipédia, Facebook, Google, Yahoo ! Etc. se
cache du HTML.

Ce n’est cependant pas le seul langage qui va nous permettre de faire fonctionner un
site web. A ce langage de base, nous en rajouterons deux autres langages, qui feront
l’objet des cours avenirs, que sont :
 Le CSS pour gérer le style des pages, on parle de mise en forme des pages. Si
nous revenons sur notre site préféré Génius Muna et qu’on lui enlève
l’ensemble de son style CSS, il ressemblera à ceci :

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

Vous voyez donc d’après cette image que le HTML seul ne suffit. Des liens qui
apparaissent en bleu, les éléments par très bien rangés, la police de texte par défaut
etc. Pour éviter cela, Il a minimum d’être non seulement complété par le langage de
style CSS mais aussi par un autre langage.

 Le JavaScript qui permettra entre autres à l’utilisateur d’interagir avec votre


site web histoire de le rendre plus vivant et sympa 

Sur ce, j’espère qu’à ce niveau tout semble assez claire. Je vous invite à présent à
entrer un tout petit peu dans le vif du sujet. A vos marques, partez !

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

2/ Définition du HTML

Dans cette partie nous allons définir le HTML. Qu’est-ce que le HTML ? A quoi sert-il
concrètement ?

Le HTML pour HyperText Markup Language est le code utilisé pour structurer une
page web et son contenu. Alors Qu’est-ce que cela signifie ? Cela signifie que le HTML
n’est pas un langage de programmation déjà mais un langage de balises qui vous
permettra d’élaborer la structure de votre page web.

Un langage de balises ? C’est quoi les balises ? Peut-être voulait-il dire


valises ?

Non, non j’ai bien dis balises. Une balise est un élément de base du système de
code HTML. En d’autres termes le langage HTML est un ensemble de balises. Ce sont
les balises HTML qui vont permettront de hiérarchiser et structurer votre contenu.
C’est assez clair maintenant ?

Donc grâce à ses balises, le langage HTML vous permet de dire « Ici j’ai un titre, en
dessous de ce titre, j’ai un paragraphe, là j’ai une image, là j’ai un tableau ou une liste
etc.».

Prenons un petit exemple pour illustrer ce qu’on vient de dire. Par exemple avec la
ligne de contenu suivante :

« Mon chat est très grincheux »

Si vous souhaitez que cette ligne reste ainsi, vous indiquerez qu'il s'agit d'un
paragraphe en l'entourant des balises paragraphe :

<p> Mon chat est très grincheux </p>

Regardons de plus près cet élément paragraphe :

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

Les composants principaux de notre élément sont :

1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre


deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-
ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
2. La balise fermante : ici on a également des chevrons et le nom de l'élément,
auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de
l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise
fermante est une erreur courante de débutant et peut conduire à de curieux résultats.

3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement notre texte : «Mon
chat est très grincheux”.

4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.

La plupart des balises en HTML s'écrivent sous la forme <balise>votre


texte</balise>. Nous y reviendront dans la leçon suivante consacrée aux balises
HTML. Pour l’instant, revenons sur notre sujet du jour.

3/ Les Eléments 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

Nous avons dit plus haut qu’un élément HTML se compose d'une balise ouvrante,
d'un contenu textuel et d'une balise fermante. Les éléments peuvent aussi avoir des «
attributs », ce qui ressemble à :

Les attributs contiennent des informations supplémentaires qui portent sur l'élément
et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple,
l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être
utilisé plus tard pour la mise en forme ou autre chose.
Un attribut doit toujours avoir :

1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a


plusieurs attributs) ;

2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;

3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.

Nous y reviendront plus en détail dans la leçon consacrée aux attributs


HTML 

Imbriquer des éléments

Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle
l'imbrication. Par exemple, si vous souhaitez montrer que votre chat
est très grincheux, vous pouvez placer le mot « très » dans un élément <strong>,
signifiant que le mot sera fortement mis en relief :

<p>Mon chat est <strong>très</strong> grincheux.</p>

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

Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns
dans les autres. Dans l'exemple précédent, on ouvre l'élément <p>, puis
l'élément <strong>. Nous devrons donc fermer l'élément <strong> d'abord, puis
l'élément <p>. Le code suivant est donc incorrect :

<p>Mon chat est <strong>très grincheux.</p></strong>

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient
clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le
navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que
vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

Les éléments vides

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides.
Prenons l'élément <img>, il est utilisé généralement comme ceci:

<img src="images/firefox-icon.png" alt="Mon image test" />

Cet élément contient deux attributs mais les balises ouvrante <img> et
fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun
contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est
d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.

Voilà en gros ce que nous pouvions dire sur les éléments HTML. Avant de nous
séparer, il serait intéressant de créer un visuel avec ces éléments justement ne croyez-
vous pas  ?

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

4/ Anatomie d’un document HTML

Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils
ne sont pas très utiles. Combinons-les pour créer une page HTML complète. Pour ce
faire, je vous propose de créer un fichier index.html dans notre dossier tests (créé lors
de la leçon précédente). Pour créer ce fichier, rien de plus de simple :
 Ouvrez votre éditeur de texte (sublime Text) ; vous pouvez saisir son nom
« sublime text » à la barre de recherche Windows puis cliquez sur le résultat
pour l’ouvrir comme le montre la figure suivante

 Une fois ouvert copier-coller ce bout de code

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<h1>Titre de ma page</h1>
<h2>Premier Sous-titre de ma page</h2>
<p>Ceci est le premier paragraphe et pour respecter la tradition nous
allons devoir afficher au paragraphe suivant :</p>
<p>La célèbre phrase: <strong>Hello World!</strong></p>
<h2>Deuxième Sous-titre de ma page</h2>
<p>Ceci est le deuxième paragraphe et on compte afficher à la suite
une image</p>
<img src="https://geniusmuna.com/img/core-
img/logo_genius_muna.png" alt="Mon image de test">
</body>
</html>

 Vous obtiendrez ainsi la figure suivante

 Une fois cela fait, vous cliquez en haut à gauche sur « File » puis sur « Save »
ou sur « Save As »

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

 Ceci étant, commencez par parcourir l’explorateur pour trouver votre dossier
« tests ». pour les utilisateurs de WAMP, cliquez successivement sur « C: » puis
« wamp », « www » et enfin sur « tests ». Et pour ceux qui utilisent XAMP,
cliquez sur « C: » puis « xamp », « htdocs » et enfin sur « tests ». Nommez
ensuite votre fichier « index.html » comme le montre la figure suivante :

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

Cliquez enfin sur « Save » et rendez-vous à l’adresse :


http://localhost/tests/index.html . Bravo ! Vous avez en face de vous votre
première page HTML

Cela ne fonctionne pas chez moi ! Je tombe sur une adresse


introuvable…Quelle peut en être la cause ?

Vous n’avez pas le même rendu après avoir cliqué sur le lien ? Pas de panique !
Examinons ensemble les cas de figure possible :

1. Soit votre serveur WAMP ou XAMP n’est pas démarré. Dans ce cas, démarrez-le et
réessayez !

2. Votre fichier n’a pas l’extension « .html ». Vérifier si cela est bel et bien le cas, mettez
cette extension et réessayez à nouveau !

Cela fonctionne ? BRAVO ! Maintenant voyons ce que nous avons écrit dans notre
fichier « 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

Il contient :

 <!DOCTYPE html> — le doctype. Au début de HTML, dans les années 1991-1992,


les doctypes étaient utilisés pour faire référence à des ensembles de règles qu'on
pouvait utiliser pour dire qu'un document était du HTML « valide » et détecter les
erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd'hui et sont juste
présents pour s'assurer que la page puisse fonctionner y compris sur les anciens
navigateurs. Pour le moment, c'est tout ce qu'il y a à savoir à propos des doctypes.
 <html></html> — l'élément <html>. Cet élément encadre tout le contenu de la
page. Cet élément est parfois appelé l'élément racine.
 <head></head> — l'élément <head>. Cet élément est utilisé comme un container
pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du
contenu affiché. C'est dans cet élément qu'on mettra des mots-clés, une description de
la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à
utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi
de suite.
 <body></body> — l'élément <body>. Cet élément est celui qui contient tout le
contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être
du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
 <meta charset="utf-8"> — Cet élément définit le jeu de caractères qui devrait être
utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des
caractères connus utilisés dans les différents langages humains. Généralement, utf-8
permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas
de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard.
 <title></title> — L'élément <title> définit le titre de votre page. C'est ce titre qui
apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera
utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.
 Enfin nous avons les balises <h1></h1> (titre de niveau 1 ou titre principal de la
page), <h2></h2> (titre de niveau 2 ou sous-titres), <p></p> (paragraphes),
<strong></strong> (mise en relief) et <img /> (balise d’image avec deux attributs

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

« src » et « alt » qui contiennent respectivement l’adresse de l’image et son texte


descriptif)

5 /En résumé
 Le HTML est à la base de la majorité des sites web
 On peut afficher le code source (HTML) de n'importe quelle page web en
faisant un clic droit puis en sélectionnant « Afficher le code source de la page »
 Le HTML n’est pas un langage de programmation mais un langage de balises
qui permet de hiérarchiser et structurer une page web
 Le HTML ne suffit pas à lui tout seul de créer un site web. Il a besoin d’être
complété avec le langage de style CSS et celui de script JavaScript
 Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et
d'une balise fermante
 Les balises peuvent avoir plusieurs formes :<balise> </balise> : elles
s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par
exemple). <balise /> : balises orphelines (on ne les insère qu'en un seul
exemplaire), elles permettent d'insérer un élément à un endroit précis (par
exemple une image).
 Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple : <image nom="photo.jpg" />).
 Une page web est constituée de deux sections principales : un en-tête
(<head>) et un corps (<body>).

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

6 /QUIZ

1. Que signifie HTML?


o Hyper Text Markup Language
o Hyperlinks and Text Markup Language
o Home Tool Markup Language

2. Qui fait les standards Web?


o Microsoft
o Google
o World Wide Web Consortium
o Mozilla

3. Quel caractère est utilisé pour indiquer une balise de fin?


o /
o <
o ^

4. Les commentaires HTML commencent par <! - et se terminent par ->


o Vrai
o Faux

5. Quel doctype est correct pour HTML5?


o <!DOCTYPE html>
o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"
"http://www.w3.org/TR/html5/strict.dtd">
o <!DOCTYPE HTML5>

6. Quel élément HTML est correct ?


o </p>mon premier paragraphe <p>
o <p>mon <em>premier</p>paragraphe</em>
o <p>mon premier paragraphe </p>

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

 Listez 20 balises HTML 5 et leur utilité

 Quelles sont les attributs des balises <meta>, <img>, <a> et <link> ? A Quoi
servent-ils ? Illustrer vos propos par des exemples concrets.

Genius Muna est une marque portée par Genius Centers


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