1

INITIATION A LA
FONCTION DE TRAVAIL
HTML
 Les outils pour écrire du HTML
2

 Éditeur :
 Pour écrire du code HTML/CSS il faut utiliser un éditeur de
texte.
 Il faut idéalement choisir un éditeur adapté au langage
HTML/CSS.
 Quelques exemples d’éditeurs :
◼ Visual Studio Code
◼ Notepad++,
◼ Sublime text,
◼ Brackets,
◼ Atom,
◼…
 Les outils pour écrire du HTML
3

 Pour les besoins de ce cours nous allons utiliser Visual

Studio Code. Télécharger puis installer VSC.
 Préparation de VSC
4

 Cliquer sur Extensions, puis rechercher le module

Prettier. Ensuite cliquer sur Installer.
 Préparation de VSC
5

 Cliquer sur Extensions, puis rechercher le module Live

Server. Ensuite cliquer sur Installer.
 Les outils pour lire du HTML
6

 Pour lire ou exécuter le code HTML il faut utiliser

un navigateur (client Web) :
 Edge

 Chrome

 FireFox

 Opera

 Safari

…
 Les outils pour lire du HTML
7

 Pour les besoins de ce cours, nous allons utiliser le navigateur

Chrome.
 Les outils pour lire du HTML
8

 Nous allons également utiliser DevTools de Chrome afin

d’améliorer notre efficacité dans l’écriture du code
HTML.
Les principes du développement web
9

 Une application web est toujours composée de deux

principales parties :
 Le Front End
10

 Le Front End est la partie visible de l’application.

 Elle inclut :
 Les éléments visibles sur les pages web.
 Les éléments de l’interaction avec l’utilisateur.

 Le Front End nécessite la structuration des pages web

afin de répondre aux objectifs des usagers.
 Le Front End doit prendre en charge le choix et la
structuration du contenu informationnel de la page.
 Le Front End fait aussi appel à des compétences de
conception d’interfaces graphiques et de design.
 Le Back End
11

 Le Back End est la partie qui fait fonctionner le Front End. Elle
inclut :
 Les traitements et les calculs nécessaires à l’application.
 Les mécanismes de saisie et de contrôle de données.
 Le Back End est généralement structuré en couches :
 Serveur web
 Application
 Base de données
 L’une des principales missions du Back End est de gérer les
données :
 Créer
 Modifier
 Supprimer
 Interroger
 Le développement Front End
12

 Le développement de la partie Front End nécessite

plusieurs outils :

HTML Hypertext Markup Language

CSS Cascading Stylesheet

JavaScript Web programming language

 Le développement Front End
13

 Le langage HTML permet de présenter le contenu et de

l’organiser sur la page :
HTML
 Le développement Front End
14

 Le langage CSS permet d’ajouter des effets visuels au

contenu affiché par HTML. :
Couleur bleu des liens
CSS
Le mode Couleur jaune
gras pour
les titres
 Le développement Front End
15

 Le langage JavaScript permet d’ajouter des fonctionnalités

à la page web et de simuler des comportements.
JavaScript
 Fonctionnement de l’interaction web
16

 Le fonctionnement du web est basé sur la communication

entre le client et un serveur web :
 Envoi de requête par le client
 Retour d’une réponse par le serveur
 Fonctionnement de l’interaction web
17

 Il existe deux protocoles de communication sur le web :

 HTTP : Hypertext Transfert Protocol
 HTTPS : Hypertext Transfert Protocol Secure
 Analyse de l’interaction web
18

 Il est possible d’analyser une interaction web sur un

navigateur :
 Ouvrez votre navigateur Chrome.
 Aller sur une page web.

 Activer l’outil DevTools avec le raccourci Ctrl + Shift + i

 Analyse de l’interaction web
19

 Aller sur l’onglet Network.

 Rafraichissez la page web.
 Analyse de l’interaction web
20
 HTML, définition et origines
21

 HTML : Hyper Text Markup Language

 Version initiale en 1993
 Basé sur SGML : Structured Generalized Markup
Language.
 Plusieurs versions ont été développé.
 La version actuelle est la version 5.
 Définition d’une Balise
22

 Qu’est ce qu’une balise ?

 C’estun mot clé qui permet de baliser (identifier) un
contenu afin de préparer sa forme.
 Les deux principaux rôles d'une balise sont donc :
◼ Identifier le type de contenu.
◼ L’isoler du reste du contenu afin de préparer la mise en forme.

< balise > Texte à baliser </balise >

Début de balisage Fin de balisage

 Utilisation d’une Balise
23

 Les balises peuvent être insérées partout dans un

document HTML.
 Exemple :
< p > Texte à mettre en paragraphe < /p >

Texte à mettre en paragraphe

La balise <p>
permet de mettre Fermeture de la
du texte en balise avec </p>
paragraphe
 Utilisation d’une Balise
24

 Les balises peuvent être insérées partout dans un

document HTML.
 Exemple :
< span > Texte à isoler </span >

Texte à isoler
La balise <span> est
Fermeture de la
un conteneur
balise </span>
générique en ligne
 Imbrication de balises
25

 Les balises peuvent être imbriquées dans un document

HTML.
 Exemple :
<p><span>Texte à mettre en gras et italique</span></p>

Imbrication des La fermeture des

balises <span> et balises doit se faire
<p> dans l'ordre inverse
de l'ouverture
 Logique d’imbrication des balises
26

 Les balises doivent respecter la logique d’imbrication

qu’on retrouve dans la programmation.
 Exemple :
Bonne imbrication :

<p><span>Texte à mettre en gras et italique</span></p>

Mauvaise imbrication :

<p><span>Texte à mettre en gras et italique</p></span>

 Imbrication de balises
27

 Il existe une infinité de manières pour imbriquer les

balises dans un document HTML.
 Exemple :

<p> Les <span>IDE</span> sont le principal<span> outil</span>du

développeur</p>

Les IDE sont le principal outil du développeur

 Balises et casse
28

 HTML est insensible à la casse.

 Mais les bonnes pratiques recommandent d’écrire toujours
les balises en minuscule pour garantir une compatibilité
avec d’autres langages comme XHTML.
 Exemple :
<span>Texte à mettre en gras et italique</span>
 <SPAN>Texte à mettre en gras et italique</SPAN>
 <Span>Texte à mettre en gras et italique</Span>

 Les Balises de base
29

 5 balises de base sont indispensables dans un document

HTML :
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 Avec HTML 5 :
◼ <!DOCTYPE html>
 <html> : C'est la racine d'un document HTML.
 <head> : C'est l'entête du document. Elle contient les méta-
informations tel que : <title>, <meta>, <link>, <style>, …
 <title> : Contient le titre de la page. Le titre s'affiche sur l'onglet
de la page web.
 <body> : C'est le corps du document. Il contient tout le reste du
code HTML.
 Les Balises de base
30

 Structure d'un page HTML :

 Premier exemple
31

 Créer un dossier sur le disque.

 Ouvrir le dossier à partir de VSC.
 Premier exemple
32

 Créer un nouveau fichier.

 Premier exemple
33

 Nommer le fichier index.html

 Premier exemple
34

 Presser Ctrl + b afin de commencer à éditer le fichier.

 Premier exemple
35

 Saisir le code ci-dessous :

 Premier exemple
36

 Pour exécuter la page web, plusieurs solutions sont

possibles :
 Double cliquer sur le nom du fichier à partir de l’explorateur
de fichiers.
 Premier exemple
37

 Exécuter la page en utilisant Live Server :

 Premier exemple
38

 Affichage sur le navigateur :

 Pour aller plus vite
39

 Presser Ctrl + b afin de commencer à éditer le fichier.

 Puis saisir le caractère ! suivi de la touche Tab.

Appuyer sur Tab

 Pour aller plus vite
40

 Remplacer le contenue de <title> par : Mon premier fichier

HTML. Remplacer en par fr
 Ajouter la phrase Hello world dans <body>
 Balise de paragraphes
41

 La balise pour les paragraphes :

 <p>…</p>
 Balise de paragraphes
42
 Balise de paragraphes
43

 Pour obtenir plusieurs paragraphes :

 P*8>lorem100
 Balise de paragraphes
44

 Pour afficher le texte dans la limite de la page, mettre

sur on l’option word wrap.
 Balise de paragraphes
45
 Balise de titres
46

 La balise pour les titres :

 <hn>…</hn>

n représente le niveau du titre.

 n peut varier de 1 à 6.
 Balises de titres
47

 Exemple de titres :
 h1 : Titre de niveau 1
 h2 : Titre de niveau 2
 h3 : Titre de niveau 3
 …
 Balises de titres
48
 Balises de structure
49

 Plusieurs balises de structuration sont proposées :

Nom Détails
Section générique regroupant un même sujet, une même fonctionnalité, de
<section>
préférence avec un en-tête, ou bien section d'application web

Section de contenu indépendante, pouvant être extraite individuellement du

<article>
document sans pénaliser sa compréhension

Section possédant des liens de navigation principaux (au sein du document ou

<nav>
vers d'autres pages)
Section dont le contenu est un complément par rapport à ce qui l'entoure, qui
<aside> n'est pas forcément en lien direct avec le contenu mais qui peut apporter des
informations supplémentaires.
Section d'introduction d'un article, d'une autre section ou du document entier
<header>
(en-tête de page).
Section de conclusion d'une section ou d'un article, voire du document entier
<footer>
(pied de page).
 Modèles d’utilisation des balises
50

Dans ce modèle
l’article est la
structure principale, il
contient des sections.

Dans ce modèle la
section est la structure
principale, elle
contient des articles.
 Modèles d’utilisation des balises
51

Dans ce modèle la navigation Dans ce modèle la

est horizontale. Les bandes navigation et les
verticales sont réservées aux compléments se partagent
compléments (aside). les bandes verticales.
 Balises de structure
52

 Exemple d'utilisation de balises de structure :

 Balises de structure
53

 Exemple d'utilisation de balises de structure :

 Balises de structure
54

 La balise <div> : permet de créer un conteneur de type bloc

qui ne peut pas être réparti sur plusieurs lignes.
 Ce conteneur est indépendant en termes de structure et
peut accueillir d'autres balises de structure.
 Un objet div est toujours précédé et suivie d'un saut de
ligne.
 Cette balise possède les attributs suivants :
 Margin : Marge autour du bloc DIV
 Padding : Espace à l'intérieur de la bordure, entre la bordure et le
contenu (texte ou autre).
 Width : Largeur du bloc.
 Height : Hauteur du bloc.
 Balises de structure
55

 Exemple avec la balise <div> :

 Balises de structure
56

 La balise <span> : permet de créer un conteneur interne

à un élément.
 Elle est essentiellement utilisée pour isoler une partie
d'un contenu afin de lui appliquer une mise en forme
particulière.
 Cette balise ne possède pas d'attributs spécifiques.
 Balises de structure
57

 Exemple avec la balise <span> :

 Balises de listes
58

 Liste non triée, liste à puces :

 <ul>…</ul>

 Liste triée, liste à numéros :

 <ol>…</ol>

 Élément d’un liste :

 <li>…</li>
 Balises de listes
59

 Exemple de liste simple :

 Balises de listes
60

 Imbrication des balises <ul> :

 Balises de listes
61

 Liste à numérotation hétérogène :

 Balises de listes
62

 Le style des listes <ul> et <ol> peut être personnalisé avec

la propriété :
 list-style-type : Cette propriété peut avoir les valeurs :
◼ disc
◼ circle
◼ square
◼ decimal
◼ lower-roman
◼ upper-roman
◼ lower-greek
◼…
 Balises de séparation
63

 Les commentaires :
 <!--…-->
 Saut à la ligne :
 <br>
◼ br fait partie des balises qui ne nécessitent pas d'être fermées.
◼ Elle peut s'écrire au format <br /> Il s'agit d'une balise ouvrante et
fermante en même temps.
◼ Cela permet au code HTML d'être compatible avec XHTML.
◼ XHTML exige que toute balise doit être fermée.

 Ligne horizontale de séparation :

 <hr>
 Balises de séparation
64

 Exemple d'utilisation de <hr> :

 Balises de séparation
65

 Exemple d'utilisation de <hr> :

 Balises de séparation
66

 Exemple d'utilisation de <hr> avec des propriétés :

 Balises de séparation
67

 Exemple d'utilisation de <hr> avec des propriétés :

 Balises de listes de définition
68

 Ce type de liste est composé de deux parties :

 un terme

 une description

 L'utilisation la plus appropriée ressemble à celle d'un

dictionnaire ou un glossaire.
 Un mot ou une expression : <dt> serait défini par une
courte explication : <dd>
 Le tout placé dans une balise conteneur de définition :
<dl>
 Balises de listes de définition
69

 Exemple :
 Balises de listes de définition
70

 Exemple :
 Balises de mise en forme de texte
71

 Le texte en exposant : ^…

 Le texte en indice : _…
 La police de caractères : <font>…</font>
 Plusieurs attributs sont disponibles pour gérer le format des
caractères :
◼ color : Couleur de la police de caractères
◼ face : Type de la police de caractères
◼ size : Taille de la police de caractères
 Balises de mise en forme de texte
72

 L’attribut color : <font color="#ff0000">…</font>

 Rouge : #ff0000
 Bleu : #0000ff

 Vert : #00ff00

 L’attribut face : <font face="calibri"> …</font>

 L’attribut size : <font size="10">…</font>
 Il est possible de regrouper plusieurs attributs avec la
même balise : <font color="#ff0000" face="calibri"
size="10">…</font>
 Balises de mise en forme de texte
73

 Réaliser sur une page web l’affichage suivant :

 Balises de mise en forme de texte
74

 Exemple :
 Balises de mise en forme de texte
75

 Exemple :
 Balises de mise en forme de texte
76

 Exemple :
 Commandes des caractères spéciaux
77

 Les commandes sont au format : &commande;

Caractère Commande Caractère Commande

à agrave ç ccedil
â acirc & amp
é eacute > gt
è egrave < lt
ê ecirc '' nbsp
 Commandes des caractères spéciaux
78

 Exemple :
 Commandes des caractères spéciaux
79

 Exemple :
 Commandes des caractères accentués
80

 Il est possible également d’utiliser :

<head>
<meta charset="UTF-8">
</head>
 Notamment pour afficher correctement les caractères
accentués.
 Balises d'insertion d'images
81

 Balise : <img>…</img>
 Attributs :
 src : indique le chemin du fichier image.
 alt : indique un texte alternatif à afficher si l'image
indiquée dans "src" est introuvable.
 align : indique l'alignement de l'image sur la page.

 border : indique l'épaisseur de la bordure.

 height : indique la hauteur de l'image.

 width : indique la largeur de l'image.

 Balises d'insertion d'images
82

 Attributs :
 src : lorsque l’image se trouve au même emplacement que
le fichier html, il suffit d’indiquer le nom de fichier avec
l’extension.
 Balises d'insertion d'images
83

 Attributs :
 src : lorsque l’image se trouve dans un sous dossier, il faut
utiliser un chemin relatif.
 Balises d'insertion d'images
84

 Attributs :
 src : lorsque l’image se trouve dans un chemin complètement
différent du projet, il faut utiliser un chemin absolu.
 L’utilisation de file:/// est nécessaire pour que le chemin soit
reconnu par le navigateur.
 Balises d'insertion de tableaux
85

 Balise : <table>…</table>
 Attributs :
 align : Alignement du tableau (position)
 bgcolor : couleur de fond
 border : entier indiquant l'épaisseur du cadre.
 cellpadding : entier indiquant la distance du texte à la
bordure.
 cellspacing : entier indiquant l'épaisseur des traits
internes.
 width : entier en % indique la largeur du tableau
 height : entier en % indique la hauteur du tableau
 Balises d'insertion de tableaux
86

 Balise d'une ligne d'un tableau : <tr>…</tr>

 Attributs :
 align : Alignement
 valign : Alignement vertical

 bgcolor : Couleur de fond

 border : Epaisseur de la bordure

 Balises d'insertion de tableaux
87

 Balise d'une cellule d'un tableau : <td>…</td>

 Attributs :
 rowspan : Nombre de lignes (entier)
 colspan : Nombre de colonnes (entier)

 width : Largeur (entier %)

 align : Alignement (middle, left, right)

 Balises d'insertion de tableaux
88

 Balise d'une cellule d'entête : <th>…</th>

 Attributs :
 rowspan : Nombre de lignes (entier)
 colspan : Nombre de colonnes (entier)

 width : Largeur (entier %)

 align : Alignement (middle, left, right)

 Balises d'insertion de tableaux
89

 Exemple :
 Balises d'insertion de tableaux
90

 Exemple :
 Balises d'insertion de tableaux
91

 Exercice : Ecrire le code HTML pour afficher le tableau

suivant :
 Balises de lien
92

 Balise d'un lien hypertexte : <a>…</a>

 Attributs :
 href : URL
 name : chaine de caractères

 title : Ajoute une bulle de description sur le lien hypertexte.

 target : permet d’ouvrir la page sur un autre onglet lorsque

la valeur est « _blank"
 Exemple :
 Balises de lien
93

 Balise de lien avec ouverture de la page sur un nouvel

onglet:
 Balises de lien
94

 Balise de lien interne (dans le même document) :

 Il faut d'abord marquer une zone de la page :

 Il faut ensuite écrire à l'endroit voulut, le lien vers la zone

marquée :
 Balises de lien
95

 Balise d'un lien mailto :

 Balises de formulaire
96

 Les balises de formulaire permettent à l’utilisateur

d’interagir avec la page web.
 Elles sont principalement utilisées pour la saisie et
l’affichage de données.
 Elles permettent également l’interaction avec une
source de données tel que les bases de données.
 Cependant, la manipulation des données n’est pas
assurée avec HTML.
 Il faut faire appel à un langage de programmation
web tel que Java script, php, …
 Balises de formulaire
97
 Balises de formulaire
98
 Exercice
99

 Présentez sur une page HTML un descriptif des 5 sens

humains :
 Les 5 sens doivent être présentés sous forme de liens
hypertexte qui renvoient vers 5 paragraphes qui se trouvent
dans le même document.
 A la fin de chaque paragraphe, un lien permet de retourner
au début du document.