Cours d'initiation au HTML5

1. HTML
Version du 3 septembre 2017

2. “
http://thomas-bodin.com/cours/iim/html.pdf
2

3. Hello!
Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine du recrutement IT !
Retrouvez moi sur Twitter @ThomasBodinFr
3

4. Planning
4
Introduction
HTML 5
Environnement

5. Planning
5
Cours théorique avec des
live démo/live code
Mise en pratique avec des exercices

6. HTML (1/3)
Introduction
6

7. 1. Définition du HTML
2. Histoire du HTML
3. Les normes
7

8. 1. Définition du
HTML
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…
8
Les langages HTML et CSS
sont à la base du
fonctionnement de tous les
sites web

9. 9
HTML Résultat visible à l’écran

10. 2. Histoire du HTML
▫ HTML 1 : c'est la toute première version créée par Tim
Berners-Lee en 1991.
▫ HTML 2 : apparu en 1994, cette version posa les bases des
versions suivantes du HTML. Les règles et le fonctionnement
de cette version sont donnés par le W3C (tandis que la
première version avait été créée par un seul homme).
▫ HTML 3 : apparue en 1996, cette nouvelle version du HTML
ajoute de nombreuses possibilités au langage comme les
tableaux, les applets, les scripts, le positionnement du texte
autour des images, etc.
10
Au fil du temps, les langages
HTML et CSS ont beaucoup
évolué. Dans la toute
première version de HTML
(HTML 1.0) il n'était même
pas possible d'afficher des
images !

11. 2. Histoire du HTML
▫ HTML 4 : cette version aura été utilisée un long moment
durant les années 2000. Elle apparaît pour la première fois
en 1998 et propose l'utilisation de frames (qui découpent
une page web en plusieurs parties), des tableaux plus
complexes, des améliorations sur les formulaires, etc. Mais
surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS !
▫ HTML 5 : c'est LA dernière version. De plus en plus
répandue, elle fait beaucoup parler d'elle car elle apporte de
nombreuses améliorations comme la possibilité d'inclure
facilement des vidéos, un meilleur agencement du contenu,
de nouvelles fonctionnalités pour les formulaires, etc. C'est
cette version que nous allons découvrir ensemble.
11

12. 3. Les normes
Le W3C ou World Wide Web Consortium, est un organisme
international qui développe des standards pour le Web afin que
les gens puissent communiquer efficacement à travers Internet,
autour de formats ouverts.
W3C :
https://www.w3.org/
Valider son code aux normes w3c :
https://validator.w3.org/
12
Standards et validation w3c

13. HTML (2/3)
Environnement
13

14. 1. Nom de domaine
2. Hébergement
3. FTP
4. Éditeur de texte
5. Débugger
14

15. 1. Nom de domaine
Il s'agit en fait d'une adresse sur le Web : google.fr est par
exemple un nom de domaine.
Un nom de domaine est constitué de deux parties :
▫ Le nom de domaine proprement dit. Il s'agit d'un nom que
l'on peut en général choisir librement, tant que personne ne
l'a réservé avant nous.
▫ L'extension .fr pour la France, .be pour la Belgique, .ca pour
le Canada, etc.
15
Entre 7 et 12 euros par an

16. 1. Nom de domaine
Pour réserver un nom de domaine, deux solutions :
▫ Passer par un registrar spécialisé. C'est un organisme qui
sert d'intermédiaire entre l'ICANN (l'organisation qui gère
l'ensemble des noms de domaine au niveau international) et
vous. 1&1, OVH et Gandi sont de célèbres registrars français.
▫ Encore mieux : vous pouvez commander le nom de domaine
en même temps que l'hébergement. De cette manière, vous
faites d'une pierre deux coups, vu que vous aurez de toute
façon besoin de l'hébergement et du nom de domaine.
16

17. 2. Hébergement
Sur Internet, tous les sites web sont stockés sur des ordinateurs
particuliers appelés serveurs. Ce sont des ordinateurs
généralement très puissants, qui restent tout le temps allumés. Ils
contiennent les pages des sites web et les délivrent aux
internautes qui les demandent, à toute heure du jour et de la nuit.
L'hébergeur est une entreprise qui se charge de gérer des baies
de serveurs. Elle s'assure du bon fonctionnement des serveurs
24h/24, 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites
présents sur la machine deviennent inaccessibles (et cela fait des
clients mécontents).
17
~ 44 euros par an

18. 3. FTP
FTP signifie File Transfer Protocol et, pour faire court et simple,
c'est le moyen que l'on utilise pour envoyer nos fichiers sur le
serveur.
18
Envoyez votre site sur le
web

19. 19
1. En haut, vous verrez apparaître les
messages qu'envoie et reçoit le logiciel.
2. C'est votre disque dur. Dans la partie du
haut, vous avez les dossiers et, dans la
partie du bas, la liste des fichiers du
dossier actuel.
3. À droite, c'est la liste des fichiers envoyés
sur le serveur sur Internet.
4. Enfin, en bas, vous verrez apparaître les
fichiers en cours d'envoi (et le
pourcentage d'envoi).

20. 4. Éditeur de texte
Il en existe des dizaines qui sont le plus souvent gratuits.
Nous utiliserons un outil dédié pour cela et qui a l’avantage de
vous aider à coder :
Sublime Text
On l'utilise aussi bien pour développer en HTML et CSS que dans
d'autres langages (Python, Ruby, etc.). Il fonctionne sur Windows,
Mac OS X et Linux.
Il a l'avantage d'être simple, épuré et facile à lire dès le départ. Pas
de centaines de boutons dont on ne comprend pas à quoi ils
servent.
20
De quel logiciel vais-je
avoir besoin pour créer mon
site web ?

21. 5. Debugger
▫ Le validateur W3C
Le validateur HTML va valider votre code et vous dire
l’ensemble de vos erreurs, il est très pratique pour débugger
mais également pour vous faire apprendre dès le départ les
bonnes pratiques.
▫ Chrome > Inspecter l’élément
Obligatoire pour créer un site web et comprendre ce qu’il se
passe.
▫ Éditeur de texte
Votre éditeur comprend ce que vous faites, il vous alertera
quand il trouvera quelque chose de bizarre. Un peu comme
word quand vous faites une faute.
21
Se faire aider quand ça ne
marche pas

22. 22
Éditeur de texte : Sublime Text ou Brackets
Debugger : Google Chrome
Acheter un serveur et un nom de domaine: ovh
FTP pour transférer vos fichiers sur Internet: FileZilla

23. Pré-requis
Un éditeur de texte pour coder
Télécharger Sublime Text
23
Un navigateur pour debugger
Télécharger Google Chrome

24. Mise en place de l'environnement :
1) Créer un dossier “HTML” sur votre ordinateur
2) Vous mettrez dans ce dossier des sous-dossiers pour
chaque exercice de ce cours
3) Ouvrez le dossier “HTML” dans Sublime Texte
4) Créer un fichier index.html dans le dossier “HTML”
5) Ecrire dans ce fichier : Hello world !
6) Ouvrir votre fichier index.html avec Google Chrome en
double cliquant dessus
24

25. HTML (3/3)
HTML 5
25

26. 1. Balises
2. Attributs
3. Structure d’une page web
4. Commentaire HTML
5. Présentation de balises HTML5
26

27. 1. Balises
Les balises définissent la nature du contenu 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.
<balise>Mon contenu</balise>
27

28. 1. Balises
<titre>Mon titre</titre>
On distingue une balise ouvrante :
<titre>
et une balise fermante :
</titre>
qui indique que le titre se termine.
Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces
deux balises… n'est pas un titre !
28

29. 2. Attributs Les attributs sont des paramètres que l’on applique aux balises.
Cela va nous êtes très utile quand nous ferons du CSS.
<balise attribut="valeur">
...
</balise>
29

30. 3. Structure d’une
page web
Le document html de base se présente ainsi :
30

31. 3. Structure d’une
page web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Contenu de votre site -->
</body>
</html>
31

32. 3. Structure d’une
page web Le doctype : 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.
La balise <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 !
32

33. 3. Structure d’une
page web
Une page web est constituée de deux parties :
L'entê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 !
et 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.
33

34. 3. Structure d’une
page web
L’encodage : 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.).
La balise <title> : C’est le titre principal de la page web. Celui-ci
ne s’affiche pas dans la page mais dans l’onglet du navigateur et
comme texte principale sur Google
34

35. 3. Structure d’une
page web
Les balises s'ouvrent et se ferment dans un ordre précis !
Par exemple, la balise <html> 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>).
35

36. Exemples
<html>
<body>
</body>
</html>
Cela est correct, une balise qui est ouverte à l'intérieur d'une
autre doit aussi être fermée à l'intérieur.
<html>
<body>
</html>
</body>
Cela est incorrect, les balises s'entremêlent.
36

37. 4. Commentaire
Il est possible d’écrire des commentaires dans son code. Cela ne
sera pas affiché par le navigateur, les commentaires vous servent
pour vous repérez et pour prendre des notes directement dans le
code.
<!-- Titre principal de la page web. Cela s’affiche dans
l’onglet du navigateur et comme texte principale sur Google
-->
<title>Mon titre</title>
37

38. Exercice 1 :
1. Créer votre première page web en utilisant la structure
HTML5.
2. Faire apparaître dans votre onglet de navigateur votre nom
et votre prénom.
3. Afficher un texte “lorem ipsum” sur votre page web.
4. Faire valider votre site au w3c
38

39. 39

40. 5. HTML5
Titres et sous-titres
Une page web est structuré comme un document word. On définit
des titres pour chaque partie avec des sous parties.
La balise est <h1> avec le numéro qui peut aller de 1 à 6. Le HTML
propose 6 niveaux de titres avec deux règles :
▫ Le h1 est unique et obligatoire pour chaque page web
▫ Les autres h sont possible que si il existe un hn-1 (h3 n’est
pas possible si il n’y a pas de h2)
40

41. 5. HTML5
Titres et sous-titres
<h1>Titre très important</h1>
<h2>Titre important</h2>
<h3>Sous-titre</h3>
<h4>Titre moins important</h4>
<h5>Titre pas important</h5>
<h6>Titre pas du tout important</h6>
41

42. 5. HTML5
Paragraphe
Pour afficher du texte, un paragraphe, sur une page web il existe
la balise <p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo Consequat.
</p>
42

43. 5. HTML5
Saut de ligne
Il est possible de sauter des lignes dans un paragraphe ( balise
<p> ) à l’aide de la balise <br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo Consequat.
</p>
43

44. Exercice 2 :
Réaliser une page html composée des éléments suivants
(exemple ci-dessous) :
▫ un titre de niveau 1
▫ deux titres de niveau 2
▫ deux paragraphes avec des sauts de lignes
Penser à faire valider votre site au w3c
44

45. 45

46. 5. HTML5
Liste
La création d’une liste à puce ou à numéros comme sur word se
fait 2 balises.
Une balise <ul> qui définit le début et la fin d’une liste et la balise
<li> qui définit une puce.
Si vous préférez des numéros à la place des puces, il suffit de
changer <ul> en <ol>
<ul>
<li>Master</li>
<li>Licence</li>
<li>DUT</li>
</ul>
46

47. 5. HTML5
Liste
Il est tout à fait possible d’imbriquer une liste dans une autre liste.
Il faut ajouter à l’intérieur d’un <li> une balise d’ouverture de liste
(<ul> ou <ol>)
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
</ul>
47

48. Exercice 3 :
Créer des listes numérotés et des listes à puce comme dans
l’exemple ci-dessous.
Penser à faire valider votre site au w3c
48

49. 49

50. 5. HTML5
Hyperlien
Un hyperlien est un lien menant vers un autre site web. Vous
pouvez donc définir un contenu (texte, image,...) qui est cliquable
et qui pointe vers un site web.
La balise doit être accompagnée d’un attribut obligatoire qui est
href. Sa valeur est l’url du site avec le “http://”
<a href="https://google.fr">lien vers google</a>
50

51. 5. HTML5
Lien relatif
Ce type de lien va vous permettre de construire votre menu. En
cliquant sur ce type de lien vous accéderez aux autres pages de
votre site.
La balise doit être accompagnée d’un attribut obligatoire qui est
href. Sa valeur est le chemin vers votre fichier.
<a href="experience.html">Mes expériences</a>
51

52. 5. HTML5
Lien relatif
La valeur du href change en fonction du nom et de l’emplacement
du fichier de destination.
Deux pages situés dans un même dossier :
<a href="experience.html">Mes expériences</a>
<a href="index.html">Accueil</a>
52

53. Exercice 4 :
Créer plusieurs page web :
▫ Accueil : textes de l’exercice 2
▫ Expériences : liste avec lien vers les sites des entreprises
▫ Formations : liste de l’exercice 3
▫ Contact : formulaire de l’exercice 6
Permettre à chaque page web de naviguer vers les autres pages.
Penser à faire valider votre site au w3c
53

54. 54

55. 5. HTML5
Image
Pour afficher une image la balise est particulière. En effet, elle est
auto fermante, c’est à dire que la balise s’ouvre et se referme sur
elle même.
La balise doit être accompagnée de deux attributs obligatoires qui
sont src et alt
src : permet de définir la source de l’image (son chemin)
alt : description de l’image
<img src="img/foret.jpg" alt="Fôret">
55

56. Exercice 5 :
Sur la page “Expériences” de l’exercice précédent, faire
apparaître les logos des différentes entreprises à la place des
noms tout en gardant le lien sur l’image.
Ces logos doivent être dans un dossier “img”.
Penser à faire valider votre site au w3c
56

57. 57

58. 5. HTML5
Formulaire
Le formulaire est incontournable sur un site web.
Pour récupérer et traiter les données (en PHP) d’un formulaire il
faut le définir en HTML en mettant les champs et le bouton de
validation à l’intérieur des balises <form>
<form>
...
</form>
58

59. 5. HTML5
Formulaire
La création d’un champs se fait avec la balise auto-fermante
<input>. Cette balise contient des attributs dont le type de
champs qui peut être text, email, url, tel, date, number,...
<input type="text">
59

60. 5. HTML5
Formulaire
Pour les champs de type radio ou de type checkbox, cela se fait
également avec la balise <input>.
▫ Le type radio signifie que le choix est simple (ex: Homme -
Femme)
▫ Le type checkbox permet de cocher 1 ou plusieurs choix (ex:
dut, licence, master, doctorat)
<input type="radio" name="gender">
<input type="checkbox" name="education">
60

61. 5. HTML5 Formulaire
Chaque champs à une description permettant de savoir ce qu’il
faut faire, c’est la balise <label>
<label>Email :</label>
<input type="email">
61

62. 5. HTML5
Formulaire
Pour faire une liste déroulante dans un formulaire il faut définir le
début et la fin de cette liste avec <select> et pour chaque
possibilité la balise <option>
<label>Pays :</label>
<select>
<option>Belgique</option>
<option>France</option>
<option>Suisse</option>
</select>
62

63. 5. HTML5
Formulaire
La balise <input> peut permettre de définir un champs de type
texte. Mais si nous voulons une plus grande zone de texte, il faut
utiliser la balise <textarea>
<label>Messsage : </label>
<textarea></textarea>
63

64. 5. HTML5
Formulaire
Pour envoyer/valider le formulaire il faut terminer celui-ci par un
bouton.
<button type="submit">Envoyer</button>
64

65. Exercice 6 :
Insérer les différents types d'input html afin de réaliser un
formulaire d'inscription.
Créer un formulaire (voir l’exemple ci-dessous) qui contient les
éléments suivants :
▫ Deux boutons radio pour le choix du sexe
▫ Champs de saisie de nom, prénom et e-mail
▫ Deux boutons radio pour connaître l’âge
▫ Une liste de choix pour les pays
▫ Des cases à cocher pour choisir les domaines d'activités
▫ Un champs texte pour sa biographie
Penser à faire valider votre site au w3c
65

66. 66

67. 67
Merci !
@ThomasBodinFr
hi@thomas-bodin.com