IT 130
INTRODUCTION AUX TECHNOLOGIES WEB
M. Dodji EDOU
Octobre 2024
M. Dodji EDOU IT 130 Octobre 2024 1 / 86
OBJECTIFS DU COURS
Une introduction à Internet, au World Wide Web et au développement
Web pour les étudiants ayant un fort intérêt pour la technologie.
Les élèves créeront des pages Web interactives en écrivant du HTML et
du CSS et en programmant en JavaScript.
Les sujets abordés comprennent les origines du Web, les rôles et les
opérations des navigateurs Web et des serveurs Web, l’interaction avec
les applications Web via des formulaires et l’utilisation de feuilles de
style pour séparer la structure et la mise en forme des documents.
L’objectif principal de ce cours est de fournir une compréhension
générale de l’informatique en se concentrant sur le Web et ses
technologies. Les objectifs spécifiques comprennent :
▶ Expliquer comment les sites Web sont organisés ;
▶ Développer des pages Web utiles ;
▶ Rédiger des programmes simples ;
M. Dodji EDOU IT 130 Octobre 2024 2 / 86
OBJECTIFS DU COURS
L’objectif principal de ce cours est de fournir une compréhension
générale de l’informatique en se concentrant sur le Web et ses
technologies. Les objectifs spécifiques comprennent :
▶ Apprendre à rechercher de la documentation pour apprendre par
vous-même
▶ Diagnostiquer les problèmes de code informatique en traçant les états du
programme, en prédisant les résultats et en expliquant les écarts entre
les résultats prévus et le comportement réel ;
▶ Expliquer le rôle des programmes et des algorithmes pour résoudre des
problèmes scientifiques ;
▶ Identifier les difficultés et les limites de l’utilisation de la technologie
informatique pour résoudre des problèmes.
M. Dodji EDOU IT 130 Octobre 2024 3 / 86
PLAN
PARTIE 1 : Ctéez votre site web avec HTML5 et CSS3
PARTIE 2 : Dynamisez votre site web avec Javascript
M. Dodji EDOU IT 130 Octobre 2024 4 / 86
PARTIE 1 : CTÉEZ VOTRE SITE WEB AVEC HTML5 ET
CSS3
M. Dodji EDOU IT 130 Octobre 2024 5 / 86
CHAPITRES COUVERTS DANS CETTE PARTIE
Chapitre 1 : Généralités sur le web
Chapitre 2 : Les bases de HTML5
Chapitre 3 : Mise en forme avec CSS
Chapitre 4 : Mise en page du site
Chapitre 5 : Fonctionnalités évoluées
M. Dodji EDOU IT 130 Octobre 2024 6 / 86
CHAPITRE 2 : LES BASES DE HTML5
Comment fait-on pour créer des sites web ?
Votre première page web en HTML
Organiser son texte
Créer des liens
Les images
M. Dodji EDOU IT 130 Octobre 2024 7 / 86
2.1. COMMENT FAIT-ON POUR CRÉER DES SITES
WEB ?
M. Dodji EDOU IT 130 Octobre 2024 8 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Non, n’ayez pas peur de poser des questions même si vous pensez qu’elles
sont bêtes . Il est très important que nous en parlions un peu avant de nous
lancer à fond dans la création de sites ! Je suis certain que vous consultez
des sites web tous les jours. Pour cela, vous lancez un programme appelé le
navigateur web en cliquant sur l’une des icônes représentées à la figure
suivante :
M. Dodji EDOU IT 130 Octobre 2024 9 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Figure 1: Les icônes des navigateurs web les plus répandus
M. Dodji EDOU IT 130 Octobre 2024 10 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Avec le navigateur, vous pouvez consulter n’importe quel site web. Voici par
exemple un navigateur affichant le célèbre site web Wikipédia
Figure 2: Le site web Wikipédia
M. Dodji EDOU IT 130 Octobre 2024 11 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Je suis sûr que vous avez l’habitude d’utiliser un navigateur web !
Aujourd’hui, tout le monde sait aller sur le Web. . . mais qui sait vraiment
comment le Web fonctionne ?
Q: J’ai entendu parler de HTML, de CSS, est-ce que cela a un
rapport avec le fonctionnement des sites web ?
Tout à fait ! Il s’agit de langages informatiques qui permettent de créer des
sites web. Tous les sites web sont basés sur ces langages, ils sont
incontournables et universels aujourd’hui. Ils sont à la base même du Web.
Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991. . .
M. Dodji EDOU IT 130 Octobre 2024 12 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Tim Berners-Lee suit encore aujourd’hui avec attention l’évolution du Web.
Il a créé le World Wide Web Consortium (W3C) qui définit les nouvelles
versions des langages liés au Web. Il a par ailleurs créé plus récemment la
World Wide Web Foundation qui analyse et suit l’évolution du Web.
Le 27 septembre 2024, après avoir milité pendant plus de 15 ans en faveur
d’un web libre et ouvert, la Web Foundation ferme officiellement ses “portes
virtuelles”. Selon les cofondateurs de l’organisation, sa mission a été
essentiellement accomplie et il est maintenant temps de se concentrer sur
de nouvelles initiatives pour s’assurer que le web reste sûr et accessible à
l’avenir.
M. Dodji EDOU IT 130 Octobre 2024 13 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
M. Dodji EDOU IT 130 Octobre 2024 14 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Remarque: De nombreuses personnes confondent (à tort) Internet
et le Web. Il faut savoir que le Web fait partie d’Internet. Internet
est un grand ensemble qui comprend, entre autres : le Web, les
e-mails, la messagerie instantanée, etc. Tim Berners-Lee n’est
donc pas l’inventeur d’Internet, c’est “seulement” l’inventeur du
Web.
M. Dodji EDOU IT 130 Octobre 2024 15 / 86
2.1.1. LE FONCTIONNEMENT DES SITES WEB
Les langages HTML et CSS sont à la base dufonctionnement de tous les
sites web. Quand vous consultez un site avec votre navigateur, il faut savoir
que, en coulisses, des rouages s’activent pour permettre au site web de
s’afficher. L’ordinateur se base sur ce qu’on lui a expliqué en HTML et CSS
pour savoir ce qu’il doit afficher, comme le montre la figure 11.
HTML et CSS sont deux “langues” qu’il faut savoir parler pour créer des
sites web. C’est le navigateur web qui fera la traduction entre ces langages
informatiques et ce que vous verrez s’afficher à l’écran. Vous vous
demandez sûrement pourquoi il faut connaître deux langages pour créer des
sites web ? Je vous réponds sans plus tarder !
M. Dodji EDOU IT 130 Octobre 2024 16 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Pour créer un site web, on doit donner des instructions à l’ordinateur. Il ne
suffit pas simplement de taper le texte qui devra figurer dans le site (comme
on le ferait dans un traitement de texte Word, par exemple), il faut aussi
indiquer où placer ce texte,insérer des images, faire des liens entre les pages,
etc.
Les rôles de HTML et CSS
Pour expliquer à l’ordinateur ce que vous voulez faire, il va falloir utiliser un
langage qu’il comprend. Et c’est là que les choses se corsent, parce qu’il va
falloir apprendre deux langages !
M. Dodji EDOU IT 130 Octobre 2024 17 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Langage HTML et CSS
Figure 4: Du code HTML
M. Dodji EDOU IT 130 Octobre 2024 18 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Résultat visible a l’écran
Figure 5: Du HTML à l’écran
M. Dodji EDOU IT 130 Octobre 2024 19 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Question : Pourquoi avoir créé deux langages ? Un seul aurait
suffit, non ?
Vous devez vous dire que manipuler deux langages va être deux fois plus
complexe et deux fois plus long à apprendre. . . mais ce n’est pas le cas !
Je vous rassure, s’il y a deux langages c’est, au contraire, pour faciliter les
choses. Nous allons avoir affaire à deux langages qui se complètent car ils
ont des rôles différents :
HTML (HyperText Markup Language) : il a fait son apparition dès
1991 lors du lancement du Web. Son rôle est de gérer et organiser le
contenu. C’est donc en HTML que vous écrirez ce qui doit être affiché
sur la page : du texte, des liens, des images. . . Vous direz par
exemple : “Ceci est mon titre, ceci est mon menu, voici le texte
principal de la page, voici une image à afficher, etc.”.
M. Dodji EDOU IT 130 Octobre 2024 20 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) :
le rôle du CSS est de gérer l’apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte. . .). Ce langage
est venu compléter le HTML en 1996.
M. Dodji EDOU IT 130 Octobre 2024 21 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Vous avez peut-être aussi entendu parler du langage XHTML. Il
s’agit d’une variante du HTML qui se veut plus rigoureuse et qui
est donc un peu plus délicate à manipuler. Pour faire simple, le
HTML est apparu le premier en 1991. Début 2000, le W3C a
lancé le XHTML en indiquant que ce serait l’avenir. . . mais le
XHTML n’a pas percé comme on l’espérait. Retour aux sources
en 2009 : le W3C abandonne le XHTML et décide de revenir au
HTML pour le faire évoluer. Il y a beaucoup de confusion autour
de ces langages, alors qu’ils se ressemblent beaucoup. Aucun n’est
vraiment meilleur que l’autre, il s’agit de deux façons de faire
différentes. Dans ce cours, nous allons travailler,sur la dernière
version de HTML (HTML5) qui est aujourd’hui le langage d’avenir
que tout le monde est incité à utiliser.
M. Dodji EDOU IT 130 Octobre 2024 22 / 86
2.1.2. HTML ET CSS : DEUX LANGAGES POUR CRÉER
UN SITE WEB
Vous pouvez très bien créer un site web uniquement en HTML, mais
celui-ci ne sera pas très beau : l’information apparaîtra “brute”. C’est
pour cela que le langage CSS vient toujours le compléter.
Pour vous donner une idée, la figure 6.1 montre ce que donne la même
page sans CSS puis avec le CSS
Le HTML définit le contenu (comme vous pouvez le voir, c’est brut de
décoffrage !). Le CSS permet, lui, d’arranger le contenu et de définir la
présentation : couleurs, image de fond, marges, taille du texte. . .
Comme vous vous en doutez, le CSS a besoin d’une page HTML pour
fonctionner. C’est pour cela que nous allons d’abord apprendre les
bases du HTML avant de nous occuper de la décoration en CSS. Vos
premières pages ne seront donc pas les plus esthétiques,mais
qu’importe ! Cela ne durera pas longtemps.
M. Dodji EDOU IT 130 Octobre 2024 23 / 86
HTML (Sans CSSS)
M. Dodji EDOU IT 130 Octobre 2024 24 / 86
HTML + CSS
M. Dodji EDOU IT 130 Octobre 2024 25 / 86
2.1.3. L’ÉDITEUR DE TEXTE
Question : De quel logiciel vais-je avoir besoin pour créer mon site web ?
Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je
vais mettre des mois à comprendre ?
Il existe effectivement de nombreux logiciels dédiés à la création de
sites web. Mais, je vous rassure, vous n’aurez pas à débourser un seul
centime. Pourquoi aller chercher un logiciel payant et compliqué, alors
que vous avez déjà tout ce qu’il faut chez vous ?
Eh oui, accrochez-vous bien parce qu’il suffit de. . . Bloc-Notes !
Incroyable mais vrai : on peut tout à fait créer un site web uniquement
avec BlocNotes, le logiciel d’édition de texte intégré par défaut à
Windows. D’ailleurs, j’avoue, c’est comme cela que j’ai commencé
moi-même il y a quelques années.
M. Dodji EDOU IT 130 Octobre 2024 26 / 86
2.1.3. L’ÉDITEUR DE TEXTE
Il y a cependant des logiciels plus puissants aujourd’hui et personne
n’utilise vraiment Bloc-Notes. On peut classer ces logiciels de création
de site web en deux catégories :
▶ Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez
Est Ce Que Vous Obtenez) : ce sont des programmes qui se veulent très
faciles d’emploi, ils permettent de créer des sites web sans apprendre de
langage particulier. Parmi les plus connus d’entre eux : Mozilla
Composer, Microsoft Expression Web Dreamweaver. . .et même Word !
Leur principal défaut est la qualité souvent assez mauvaise du code
HTML et CSS qui est automatiquement généré par ces outils. Un bon
créateur de site web doit tôt ou tard connaître HTML et CSS, c’est
pourquoi je ne recommande pas l’usage de ces outils.
▶ Les éditeurs de texte : ce sont des programmes dédiés à l’écriture de
code. On peut en général les utiliser pour de multiples langages, pas
seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les
créateurs de sites web !
M. Dodji EDOU IT 130 Octobre 2024 27 / 86
2.1.3. L’ÉDITEUR DE TEXTE
Vous l’aurez compris, je vais vous inviter à utiliser un éditeur de texte dans
ce cours. Voici quelques conseils, selon que vous êtes sous Windows, Mac
OS X ou Linux.
M. Dodji EDOU IT 130 Octobre 2024 28 / 86
Le logiciel Bloc-notes de Windows
M. Dodji EDOU IT 130 Octobre 2024 29 / 86
2.1.3. L’ÉDITEUR DE TEXTE
Sous Windows
Il existe une grande quantité d’éditeurs de texte, je ne pourrai pas vous les
présenter tous. Néanmoins, je vous invite à vous pencher sur Sublime Text,
l’un des plus utilisés parmi ceux disponibles pour Windows. Ce logiciel est
simple, en français et gratuit
Voici à quoi ressemble Sublime Text lorsque vous le lancez
M. Dodji EDOU IT 130 Octobre 2024 30 / 86
Figure 8: Sublime Text
M. Dodji EDOU IT 130 Octobre 2024 31 / 86
2.1.3. L’ÉDITEUR DE TEXTE
Il existe d’autres éditeurs disponibles sous Windows. Si Sublime Text ne
vous convient pas, vous pouvez essayer :
jEdit ;
PSpad ;
ConTEXT ;
Notepad++
. . . et bien d’autres si vous recherchez “Éditeur de texte” sur le Web.
M. Dodji EDOU IT 130 Octobre 2024 32 / 86
2.1.4. LES NAVIGATEURS
Pourquoi le navigateur est important
Le navigateur est le programme qui nous permet de voir les sites web.
Comme je vous l’ai expliqué plus tôt, le travail du navigateur est de lire le
code HTML et CSS pour afficher un résultat visuel à l’écran. Si votre code
CSS dit “Les titres sont en rouge”, alors le navigateur affichera les titres en
rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement
complexe. En effet, comprendre le code HTML et CSS n’est pas une mince
affaire. Le principal problème, vous vous en rendrez vite compte, c’est que
les différents navigateurs n’affichent pas le même site exactement de la
même façon ! Il faudra vous y faire et prendre l’habitude de vérifier
régulièrement que votre site fonctionne correctement sur la plupart des
navigateurs.
M. Dodji EDOU IT 130 Octobre 2024 33 / 86
2.1.5. EN RÉSUMÉ
Le Web a été inventé par Tim Berners-Lee au début des années 1990.
Pour créer des sites web, on utilise deux langages informatiques :
▶ HTML : permet d’écrire et organiser le contenu de la page (paragraphes,
titres. . .) ;
▶ CSS : permet de mettre en forme la page (couleur, taille. . .).
Le navigateur web est un programme qui permet d’afficher des sites
web. Il lit les langages HTML et CSS pour savoir ce qu’il doit afficher.
Dans ce cours, nous allons apprendre à utiliser les langages HTML et
CSS. Nous travaillerons dans un programme appelé “éditeur de texte”
(Sublime text, Notepad++, jEdit, vim. . .).
M. Dodji EDOU IT 130 Octobre 2024 34 / 86
2.2. VOTRE PREMIÈRE PAGE WEB EN HTML
M. Dodji EDOU IT 130 Octobre 2024 35 / 86
2.2. VOTRE PREMIÈRE PAGE WEB EN HTML
Ça y est, vous avez installé tous les logiciels ? Vous devriez maintenant
avoir un éditeur de texte pour créer votre site (comme Sublime Text) et
plusieurs navigateurs pour le tester (Mozilla Firefox, Google Chrome,
Microsoft Edge. . .)
Dans ce sous chapitre, nous allons commencer à pratiquer ! Nous allons
découvrir les bases du langage HTML et enregistrer notre toute première
page web ! Alors oui, bien sûr, ne vous attendez pas encore à réaliser une
page web exceptionnelle dès ce second sous chapitre, mais patience. . . cela
viendra.
M. Dodji EDOU IT 130 Octobre 2024 36 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
Allez, mettons-nous en situation ! Comme je vous l’ai dit, nous allons créer
notre site dans un éditeur de texte. Vous avez dû en installer un suite à mes
conseils dans le premier sous chapitre : qu’il s’appelle Sublime Text, PSpad,
Notpad ++, jEdit, vim, TextWrangler. . . peu importe. Ces logiciels ont un
but très simple : vous permettre d’écrire du texte !
Dans la suite de ce cours, je travaillerai avec Sublime Text. Je vais donc
l’ouvrir
M. Dodji EDOU IT 130 Octobre 2024 37 / 86
Figure 9: Ouverture de Sublime Text
M. Dodji EDOU IT 130 Octobre 2024 38 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
Bon, qu’est-ce qu’on fait maintenant ? Qu’est-ce qu’on écrit sur cette
feuille blanche ?
On va faire un petit essai. Je vous invite à écrire ce qui vous passe par la
tête, comme moi à la figure suivante :
M. Dodji EDOU IT 130 Octobre 2024 39 / 86
Figure 10: Du texte dans Sublime Text
M. Dodji EDOU IT 130 Octobre 2024 40 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
Vous pouvez écrire les mêmes phrases que moi ou ce que vous voulez ; le
but est d’écrire quelque chose.
Maintenant, enregistrons ce fichier. Pour cela, c’est très simple : comme
dans tous les programmes, vous avez un menu Fichier > Enregistrer. Une
boîte de dialogue vous demande où enregistrer le fichier et sous quel nom.
Enregistrez-le où vous voulez. Donnez au fichier le nom que vous voulez, en
terminant par .html, par exemple [Link], comme indiqué à la figure
suivante :
M. Dodji EDOU IT 130 Octobre 2024 41 / 86
Figure 11: Enregistrement d’un fichier sous Sublime Text
M. Dodji EDOU IT 130 Octobre 2024 42 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
Ouvrez maintenant l’explorateur de fichiers dans le dossier où vous avez
enregistré votre page. Vous y verrez le fichier que vous venez de créer
comme sur la figure suivante :
M. Dodji EDOU IT 130 Octobre 2024 43 / 86
Figure 12: Le fichier dans l’explorateur
M. Dodji EDOU IT 130 Octobre 2024 44 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
L’icône qui représente le fichier dépend de votre navigateur web par défaut.
Ici, l’icône est celle de Google Chrome, mon navigateur par défaut, mais le
fichier a peut-être une autre icône chez vous.
Faites simplement un double-clic sur ce fichier et. . . votre navigateur
s’ouvre et, commeà la figure suivante, affiche le texte que vous avez écrit.
M. Dodji EDOU IT 130 Octobre 2024 45 / 86
2.2.1. CRÉER UNE PAGE WEB AVEC L’ÉDITEUR
Remarque : Cela ne marche pas bien, on dirait ! Tout le texte
s’affiche sur la même ligne alors qu’on avait écrit deux lignes de
texte différentes ! ?
En effet, bien vu ! Le texte s’affiche sur la même ligne alors qu’on avait
demandé à l’écrire sur deux lignes différentes. Que se passe-t-il ?
En fait, pour créer une page web il ne suffit pas de taper simplement du
texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce
qu’on appelle des balises, qui vont donner des instructions à l’ordinateur
comme “aller à la ligne”, “afficher une image”, etc.
M. Dodji EDOU IT 130 Octobre 2024 46 / 86
Figure 13: La page web affichée
M. Dodji EDOU IT 130 Octobre 2024 47 / 86
2.2.2. LES BALISES ET LEURS ATTRIBUTS
Bon, tout cela était trop facile. Évidemment, il a fallu que ces satanés
informaticiens s’en mêlent et compliquent les choses. Il ne suffit pas d’écrire
simplement du texte dans l’éditeur, il faut aussi donner des instructions à
l’ordinateur. En HTML, on utilise pour cela des balises.
M. Dodji EDOU IT 130 Octobre 2024 48 / 86
[Link]. LES BALISES
Les pages HTML sont remplies de ce qu’on appelle des balises. Celles-ci
sont invisibles à l’écran pour vos visiteurs, mais elles permettent à
l’ordinateur de comprendre ce qu’il doit afficher. Les balises se repèrent
facilement. Elles sont entourées de chevrons c’est-à-dire des symboles < et
>, comme ceci : À quoi est-ce qu’elles servent ? Elles indiquent la nature
du texte qu’elles encadrent. Elles veulent dire par exemple : Ceci est le titre
de la page , Ceci est une image , Ceci est un paragraphe de texte , etc. On
distingue deux types de balises : les balises en paires et les balises
orphelines.
M. Dodji EDOU IT 130 Octobre 2024 49 / 86
[Link]. LES ATTRIBUTS
Les attributs sont un peu les options des balises. Ils viennent les compléter
pour donner des informations supplémentaires. L’attribut se place après le
nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
<citation auteur =" Neil Armstrong " date ="21/07/ 1969 ">
C'est un petit pas pour l'homme , mais un bond de
géant pour l'humanité.
</citation
M. Dodji EDOU IT 130 Octobre 2024 50 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Reprenons notre éditeur de texte. Je vous invite à écrire ou à copier-coller le
code source ci-dessous dans Sublime Text. Ce code correspond à la base
d’une page web en HTML5 :
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf -8"/>
<title>Titre </title>
</head>
<body>
</body>
</html>
M. Dodji EDOU IT 130 Octobre 2024 51 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Copié dans Sublime Text, cela donne la figure 14
Vous noterez que les balises s’ouvrent et se ferment dans un ordre précis.
Par exemple, la balise
est la première que l’on ouvre et c’est aussi la dernière que l’on ferme (tout
à la fin du code, avec < html>). Les balises doivent être fermées dans le
sens inverse de leur ouverture. Un exemple :
<html><body></body></html> : correct. Une balise qui est ouverte
à l’intérieur d’une autre doit aussi être fermée à l’intérieur.
<html><body></html></body> : incorrect,les balises s’entremêlent.
M. Dodji EDOU IT 130 Octobre 2024 52 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Euh, on pourrait avoir des explications sur toutes les balises que
l’on vient de copier dans l’éditeur, m’sieur ?
Bien sûr, c’est demandé si gentiment. Ne prenez pas peur en voyant toutes
ces balises d’un coup, je vais vous expliquer leur rôle !
Le doctype
<!DOCTYPE html>
M. Dodji EDOU IT 130 Octobre 2024 53 / 86
Figure 14: Code HTML5 minimal dans Sublime Text
M. Dodji EDOU IT 130 Octobre 2024 54 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
La toute première ligne s’appelle le doctype. Elle est indispensable car c’est
elle qui indique qu’il s’agit bien d’une page web HTML. Ce n’est pas
vraiment une balise comme les autres (elle commence par un point
d’exclamation), vous pouvez considérer que c’est un peu l’exception qui
conFIRrme la règle.
La balise </html>
<html>
</html>
C’est la balise principale du code. Elle englobe tout le contenu de votre
page. Comme vous pouvez le voir, la balise fermante </html> se trouve
tout à la fin du code !
M. Dodji EDOU IT 130 Octobre 2024 55 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
L’en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
L’en-tête <head> : cette section donne quelques informations générales
sur la page comme son titre, l’encodage (pour la gestion des caractères
spéciaux), etc. Cette section est généralement assez courte. Les
informations que contient l’en-tête ne sont pas affichées sur la page, ce
sont simplement des informations générales à destination de
l’ordinateur. Elles sont cependant très importantes !
Le corps <body> : c’est là que se trouve la partie principale de la page.
Tout ce que nous écrirons ici sera affiché à l’écran. C’est à l’intérieur
du corps que nous écrirons la majeure partie de notre code.
M. Dodji EDOU IT 130 Octobre 2024 56 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Pour le moment, le corps est vide (nous y reviendrons plus loin).
Intéressons-nous par contre aux deux balises contenues dans l’en-tête. . .
L’encodage (charset)
<meta charset ="utf -8"/>
Cette balise indique l’encodage utilisé dans votre fichier .html
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué,
l’encodage indique la façon dont le fichier est enregistré. C’est lui qui
détermine comment les caractères spéciaux vont s’afficher (accents,
idéogrammes chinois et japonais, caractères arabes, etc.).
M. Dodji EDOU IT 130 Octobre 2024 57 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
l y a plusieurs techniques d’encodage portant des noms bizarres et utilisées
en fonction des langues : ISO-8859-1, OEM 775, Windows-1253. . . Une
seule cependant devrait être utilisée aujourd’hui autant que possible :
UTF-8. Cette méthode d’encodage permet d’afficher sans aucun problème
pratiquement tous les symboles de toutes les langues de notre planète !
C’est pour cela que j’ai indiqué utf-8 dans cette balise.
Il faut aussi que votre fichier soit bien enregistré en UTF-8. C’est le cas le
plus souvent sous Linux par défaut mais, sous Windows, il faut
généralement le dire au logiciel.
M. Dodji EDOU IT 130 Octobre 2024 58 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Le titre principal de la page
<title>
C’est le titre de votre page, probablement l’élément le plus important !
Toute page doit avoir un titre qui décrit ce qu’elle contient. Il est conseillé
de garder le titre assez court (moins de 100 caractères en général)
Le titre ne s’affiche pas dans votre page mais en haut de celle-ci (souvent
dans l’onglet du navigateur). Enregistrez votre page web et ouvrez-la dans
votre navigateur. Vous verrez que le titre s’affiche dans l’onglet, comme sur
la figure 15
M. Dodji EDOU IT 130 Octobre 2024 59 / 86
Figure 15: Le titre de la page apparaît en haut du navigateur
M. Dodji EDOU IT 130 Octobre 2024 60 / 86
2.2.3. STRUCTURE DE BASE D’UNE PAGE HTML5
Il faut savoir que le titre apparaît aussi dans les résultats de recherche,
comme sur Google (figure 16).
Autant vous dire que bien choisir son titre est important !
M. Dodji EDOU IT 130 Octobre 2024 61 / 86
Figure 16: Le titre de la page apparaît dans les recherches Google
M. Dodji EDOU IT 130 Octobre 2024 62 / 86
2.2.4. LES COMMENTAIRES
Nous avons appris à créer notre première vraie page HTML dans ce chapitre.
Avant de terminer, j’aimerais vous présenter le principe des commentaires.
Un commentaire en HTML est un texte qui sert simplement de mémo. Il
n’est pas affiché, il n’est pas lu par l’ordinateur, cela ne change rien à
l’affichage de la page.
Bref, cela ne sert à rien ?
Eh bien si ! Cela sert à vous et aux personnes qui liront le code source de
votre page. Vous pouvez utiliser les commentaires pour laisser des
indications sur le fonctionnement de votre page.
Quel intérêt ? Cela vous permettra de vous rappeler comment fonctionne
votre page si vous revenez sur votre code source après un long moment
d’absence. Ne rigolez pas,cela arrive à tous les webmasters.
M. Dodji EDOU IT 130 Octobre 2024 63 / 86
2.2.4. LES COMMENTAIRES
Insérer un commentaire
Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- Ceci est un commentaire -->
Vous pouvez le mettre où vous voulez au sein de votre code source : il n’a
aucun impact sur votre page, mais vous pouvez vous en servir pour vous
aider à vous repérer dans votre code source (surtout s’il est long)
M. Dodji EDOU IT 130 Octobre 2024 64 / 86
2.2.4. LES COMMENTAIRES
<!DOCTYPE html>
<html>
<head>
<!-- En -tête de la page -->
<meta charset ="utf -8"/>
<title >Titre </title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>
M. Dodji EDOU IT 130 Octobre 2024 65 / 86
2.2.5. EN RESUME
On utilise l’éditeur de texte (Sublime Text, Notepad++, jEdit, vim. .
.) pour créer un fichier ayant l’extension .html (par exemple :
[Link]). Ce sera notre page web.
Ce fichier peut être ouvert dans le navigateur web simplement en
faisant un doubleclic dessus.
À l’intérieur du fichier, nous écrirons le contenu de notre page,
accompagné de balises HTML.
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).
M. Dodji EDOU IT 130 Octobre 2024 66 / 86
2.2.5. EN RESUME
Les balises sont parfois accompagnées d’attributs pour donner des
indications supplémentaires (exemple : <image nom="[Link]"
/>).
Une page web est constituée de deux sections principales : un en-tête
(<head>) et un corps (<body>).
M. Dodji EDOU IT 130 Octobre 2024 67 / 86
2.3. ORGANISER SON TEXTE
M. Dodji EDOU IT 130 Octobre 2024 68 / 86
2.3. ORGANISER SON TEXTE
Bon , la page blanche c’est bien joli, mais votre site web risque d’avoir un
succès mitigé si vous le laissez comme cela.
Nous allons découvrir de nombreuses balises HTML dans ce sous chapitre.
Certaines existent depuis la toute premièreversion de HTML, d’autres ont
été introduites plus récemment dans HTML5.
Nous allons voir successivement dans ce sous chapitre :
comment rédiger des paragraphes ;
comment structurer sa page avec les titres ;
comment donner de l’importance à certains mots de son texte ;
comment organiser les informations sous forme de listes.
Motivés ? Allez, vous allez voir, ce n’est pas compliqué
M. Dodji EDOU IT 130 Octobre 2024 69 / 86
2.3.1. LES PARAGRAPHES
La plupart du temps, lorsqu’on écrit du texte dans une page web, on le fait
à l’intérieur de paragraphes. Le langage HTML propose justement la balise
pour délimiter les paragraphes.
<p>Bonjour et bienvenue sur mon site !</p>
<p> signifie “Début du paragraphe” ;
</p> signifie “Fin du paragraphe”.
Comme je vous l’ai dit au sous chapitre précédent, on écrit le contenu du
site web entre les balises <body></body>. Il nous suffit donc de mettre
notre paragraphe entre ces deux balises et nous aurons enfin notre première
vraie page web avec du texte !
Je reprends donc exactement le même code qu’au sous chapitre précédent
et j’y ajoute mon paragraphe :
M. Dodji EDOU IT 130 Octobre 2024 70 / 86
2.3.1. LES PARAGRAPHES
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf -8"/>
<title>Paragraphes </title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
M. Dodji EDOU IT 130 Octobre 2024 71 / 86
2.3.1. LES PARAGRAPHES
Essayez, vous allez voir le résultat ! Bon, ok, ce n’est pas encore le nirvana
mais c’est un bon début.
Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant
quelque chose d’un peu particulier en HTML : le saut de ligne. Cela paraît
simple et pourtant, cela ne fonctionne pas vraiment comme dans un
traitement de texte habituel. . .
M. Dodji EDOU IT 130 Octobre 2024 72 / 86
[Link]. SAUTER UNE LIGNE
En HTML, si vous appuyez sur la touche Entrée , cela ne crée pas une
nouvelle ligne comme vous en avez l’habitude.
Eh bien devinez quoi : il existe une balise “Aller à la ligne” ! C’est une
balise orpheline qui sert juste à indiquer qu’on doit aller à la ligne :
<br/>. Vous devez obligatoirement la mettre à l’intérieur d’un
paragraphe.
M. Dodji EDOU IT 130 Octobre 2024 73 / 86
2.3.2. LES TITRES
Lorsque le contenu de votre page va s’étoffer avec de nombreux
paragraphes, il va devenir difficile pour vos visiteurs de se repérer.C’est
là que les titres deviennent utiles.
HTML, on est verni, on a le droit d’utiliser six niveaux de titres
différents. Je veux dire par là qu’on peut dire :
▶ Ceci est un titre très important ,
▶ Ceci est un titre un peu moins important ,
▶ Ceci est un titre encore moins important , etc.
M. Dodji EDOU IT 130 Octobre 2024 74 / 86
2.3.2. LES TITRES
On a donc six balises de titres différentes :
▶ <h1> </h1> : signifie titre très important . En général, on s’en sert
pour afficher le titre de la page au début de celle-ci.
▶ <h2> </h2> : signifie titre important .
▶ <h3> </h3> : pareil, c’est un titre un peu moins important (on peut
dire un sous titre si vous voulez).
▶ <h4> </h4> : titre encore moins important.
▶ <h5> </h5> : titre pas important.
▶ <h6> </h6> : titre vraiment, mais alors là vraiment pas important du
tout
M. Dodji EDOU IT 130 Octobre 2024 75 / 86
2.3.3. LA MISE EN VALEUR
Au sein de vos paragraphes, certains mots sont parfois plus importants que
d’autres et vous aimeriez les faire ressortir. HTML vous propose différents
moyens de mettre en valeur le texte de votre page.
M. Dodji EDOU IT 130 Octobre 2024 76 / 86
[Link]. METTRE UN PEU EN VALEUR
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em>
</em>. Son utilisation est très simple : encadrez les mots à mettre en
valeur avec ces balises et c’est bon !
M. Dodji EDOU IT 130 Octobre 2024 77 / 86
[Link]. METTRE BIEN EN VALEUR
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui
signifie fort , ou important si vous préférez. Elle s’utilise exactement de la
même manière que <em>
M. Dodji EDOU IT 130 Octobre 2024 78 / 86
[Link]. MARQUER LE TEXTE
La balise <mark> permet de faire ressortir visuellement une portion de texte.
L’extrait n’est pas forcément considéré comme important mais on veut qu’il
se distingue bien du reste du texte. Cela peut être utile pour faire ressortir
un texte pertinent après une recherche sur votre site par exemple.
Par défaut, <mark> a pour effet de surligner le texte. On pourra changer
l’affichage en CSS (décider de surligner dans une autre couleur, d’encadrer
le texte, etc.). C’est le même principe que ce que je vous disais pour les
balises précédentes : elles indiquent le sens des mots et non pas comment
ceux-ci doivent s’afficher.
M. Dodji EDOU IT 130 Octobre 2024 79 / 86
2.3.4. LES LISTES
Les listes nous permettent souvent de mieux structurer notre texte et
d’ordonner nos informations. Nous allons découvrir ici deux types de listes :
les listes non ordonnées ou listes à puces ;
les listes ordonnées ou listes numérotées ou encore énumérations
M. Dodji EDOU IT 130 Octobre 2024 80 / 86
[Link]. LISTE NON ORDONNEE
Une liste non ordonnée ressemble à ceci : -Fraises -Framboises -Cerises
<ul >
<li>Fraises </li>
<li>Framboises </li>
<li>Cerises </li>
</ul>
M. Dodji EDOU IT 130 Octobre 2024 81 / 86
[Link]. LISTE ORDONNEE
Une liste ordonnée fonctionne de la même façon, seule une balise change : il
faut remplacer <ul></ul> par <ol></ol>. À l’intérieur de la liste, on ne
change rien : on utilise toujours des balises <li></li> pour délimiter les
éléments.
<h1>Ma journ ée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois .</li>
<li>Je retourne me coucher .</li>
</ol>
M. Dodji EDOU IT 130 Octobre 2024 82 / 86
2.3.5. EN RESUME
Le HTML comporte de nombreuses balises qui nous permettent
d’organiser le texte de notre page. Ces balises donnent des indications
comme “Ceci est un paragraphe”, “Ceci est un titre”, etc.
Les paragraphes sont définis par la balise <p> </p> et les sauts de
ligne par la balise <br/>.
Il existe six niveaux de titre, de
</h1> à <h6> </h6>, à utiliser selon l’importance du titre.
On peut mettre en valeur certains mots avec les balises <strong>,
<em> et <mark>.
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non
ordonnée) ou <ol> (liste ordonnée). À l’intérieur, on insère les
éléments avec une balise <li> pour chaque item
M. Dodji EDOU IT 130 Octobre 2024 83 / 86
2.4. CREER DES LIENS
M. Dodji EDOU IT 130 Octobre 2024 84 / 86
2.4. CREER DES LIENS
Au au sous chapitre précédent, vous avez appris à créer une page HTML
toute simple. D’accord, elle n’était pas franchement magnifique, mais
c’était une vraie page HTML quand même.
Comme vous le savez, un site web est composé de plusieurs pages.
Comment faire pour aller d’une page vers une autre ? À l’aide de liens pardi
! Dans ce chapitre, nous allons justement apprendre à créer des liens entre
nos pages.
Je suppose que chacun d’entre vous sait ce qu’est un lien : il s’agit d’un
texte sur lequel on peut cliquer pour se rendre sur une autre page. On peut
faire un lien d’une page [Link] vers une page [Link], mais on peut aussi
faire un lien vers un autre site (par exemple, [Link]
Dans les deux cas, nous allons voir que le fonctionnement est le même.
M. Dodji EDOU IT 130 Octobre 2024 85 / 86
2.4.1. UN LIEN VERS UN AUTRE SITE
Il est facile de reconnaître les liens sur une page : ils sont écrits d’une façon
di fférente (par défaut, en bleu et soulignés) et un curseur en forme de main
apparaît lorsqu’on pointe dessus. Je vous propose d’essayer de coder le lien
qui amène vers le Site du Zéro, comme à la figure
M. Dodji EDOU IT 130 Octobre 2024 86 / 86
