Académique Documents
Professionnel Documents
Culture Documents
4
Programme initiation au HTML
5
Programme initiation au HTML
6
Les bases d’un site web
10
Une page Web c’est …
11
Un site Web c’est ...
12
Mais pas que ...
15
Le principe de « serveur web »
Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
16
Transférer un fichier sur le serveur
Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y
17
accéder.
18
Le client FTP
• Ex : Filezilla
19
Le HTML - généralités
20
HTML : définition
– HTML5
21
Le W3C
22
Le WHATWG
23
Générer du HTML avec un éditeur
24
Brackets.io
• http://brackets.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
25
Atom
• https://atom.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
26
Les éditeurs de texte plus avancés et spécialisés
• http://www.sublimetext.com/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne,
colorisation syntaxique
• Plugins, snippets, mode « sans
distraction »
• 30 jours essai Windows/Mac/ Linux
puis payant
27
D’autres éditeurs
• VsCode : Toutes les plateformes (gratuit) https://code.visualstudio.com/
• Coda : uniquement sur Mac (payant) http://panic.com/coda/
28
Les éditeurs « WYSIWYG »
29
Générer du HTML depuis un CMS
30
Générer du HTML depuis un langage côté serveur
31
32
La syntaxe HTML : balises,
éléments et attributs
33
Le principe de balise
<
p
> *
C
B B o
n B
a o t a
34
Le principe de balise
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
35
Le principe de balise
36
Le principe de balise
37
Attributs et valeurs
38
Attributs et valeurs
39
Exemples d’attributs
40
Exemples d’attributs
! class=" " : donner une classe à l’élément que l’on pourra utiliser en
CSS.
Les classes peuvent être dupliquées sur la page
– <p class="maclasse"> contenu </p>
41
Doctype, html, body : structure
d'un document valide
42
Structure d’un document HTML simplifié
43
La notion de doctype
<!doctype html>
44
La balise <html>
– Synthèse vocale
<html lang="fr">
47
La balise <head>
48
La balise <title>
49
La balise <head> : les balises meta
50
La balise <head> : les balises meta
51
La balise <body>
<body>
Contenu de la page
</body>
52
En résumé
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Titre de ma page </title>
</head>
<body>
Contenu de la page
</body>
</html>
53
Les commentaires dans le HTML
Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
55
Les éléments de structuration
du contenu
56
La balise « division » <div>
57
La balise « division » <div>
• Élément de type bloc qui peut inclure n’importe quel autre balise
HTML
58
Grille en div
59
La balise paragraphe <p>
60
La balise paragraphe <p>
61
Espaces insécables
62
D'autres entités HTML
64
Les titres h1 – h6
65
Les titres h1 – h6
66
Blockquote, une citation
68
Exemple de blockquote stylée
69
Les éléments de « mise en
forme » de texte
70
Éléments en ligne « inline »
71
L’ élément <strong>
72
L’ élément <strong>
73
L’ élément <em>
74
L’ élément <em>
75
L’ élément <span>
76
L’ élément <span>
77
D’autres éléments
78
Les liens dans les documents
HTML
79
Fonction d'un lien
80
La balise <a>
81
La balise <a> pour les liens
82
Lien externe vers un autre site
83
Liens internes et hiérarchisation du site
84
Liens internes et hiérarchisation du site
85
Lien vers un fichier du même répertoire
88
Exercice !
89
Exercice !
90
Exercice !
91
Liens vers un autre répertoire
92
Descendre dans un sous répertoire
93
Remonter d’un répertoire
94
Mon premier site
95
Exercice !
96
Exercice !
97
Ouvrir un lien dans un nouvel onglet
98
Des liens « internes » ou ancres internes
https://fr.wikipedia.org/wiki/
Hypertext_Markup_Language#Description_de_HTML
99
Un lien vers une adresse mail
101
Les éléments de liste
102
Les listes non ordonnées <ul>
103
Les listes non ordonnées <ul>
104
Les listes ordonnées <ol>
105
Les listes ordonnées <ol>
106
Contenu d’une liste
107
Exemple d’imbrication
108
Les listes en pratique – les onglets
http://getbootstrap.com/javascript/#tabs
110
Les listes en pratique – les navigations
http://www.mobify.com/
111
Les listes en pratique – • http://
les navigations flexslider.woothemes.com/
112
Ajouter des images avec la
balise <img>
113
Le format JPEG- Joint Photographic Experts Group
=> Pour la compression avec pertes très efficace pour des images
photographiques
114
Le format GIF - Graphics Interchange Format
• animation
• extension .gif
http://lesjoiesducode.tumblr.com/
115
Le format PNG - Portable Network Graphics
117
En résumé
118
Compresser une image JPEG outils
• En ligne :
– https://imagify.io/ outil en ligne avec traitement par lots
• En Local :
– https://imageoptim.com/fr.html sur mac PNG et JPG
119
La balise <img>
• Balise auto-fermante
120
La balise <img> et source de l'image
– url de stockage
121
La balise <img> et attribut « alt »
122
La balise <img> et attribut « alt »
• L'attribut est obligatoire, mais il peut être vide pour les images
décoratives
– Lu vocalement par les lecteurs d'écran
123
Attributs width et height
• Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
• Sans width/height le navigateur « devine » la taille ce qui crée des
sauts de page quand l’image se charge
• En général, il vaut mieux la redimensionner avant dans un logiciel,
plutôt que charger une grande image et la rétrécir (performance)
• Attention à garder les proportions !
124
Exemple
127
Bonus : intégrer une vidéo
128
Bonus : intégrer du son
129
Bonus : intégrer du son
130
D’autres types d’iframe
131
Les tableaux HTML
132
Les tableaux, introduction
133
Créer un tableau : <table>
134
Exemple de tableau simple
135
Exemple de tableau simple
136
Un avant-goût de CSS
• Pour la suite et y voir plus clair, nous allons ajouter une bordure à
notre tableau avec la propriété CSS
137
Ajouter une entête avec ! <th> peut remplacer <td>
<th>
pour créer une cellule
d’entête au tableau
! Par défaut affiché en gras
et centré dans les
navigateurs
138
2017
Ajouter un titre au ! On utilise <caption> pour
tableau
donner un titre au tableau
! La balise se place au
début du tableau
139
2017
Bonus - Fusion de ! Il est possible de fusionner
cellules certaines cellules entre elles avec
l’attribut colspan="
nombredecellules" qui se place
sur la cellule (th ou td)
! La valeur numérique de cet
attribut précise le nombre de
colonnes du tableau que
couvre la cellule.
140
2017
Bonus - Fusion de • Il est possible de fusionner
lignes des lignes avec l’attribut
rowspan="
nombredelignes" qui se
place sur la cellule (th ou td)
141
Les formulaires
142
Les formulaires sont partout autour de nous
143
La balise <form>
Par défaut si elle est vide, c’est comme n’importe quel élément, rien n’est affiché
145
La zone de texte monoligne <input>
146
Le label
147
Associer le label au champ
148
L'attribut « value »
149
En résumé pour n'importe quel champ il faut toujours au
moins
151
Attributs supplémentaires
152
Les placeholder (ne sont pas des labels ! )
! placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.
Attention, ne remplace PAS le label
! Pas supportés partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un polyfill)
153
Zone de texte multiligne <textarea>
154
Attributs utiles pour textarea
• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
155
Les cases à cocher <input type="checkbox">
156
Les cases à cocher <input type="checkbox">
157
Les cases à cocher <input type="checkbox">
159
Les boutons radio <input type="radio">
160
Groupe de boutons radio
! Pour que le navigateur comprenne que des éléments forment un groupe, il faut leur donner le
même attribut name
! On peut pré-cocher un bouton radio avec checked="checked"
161
Les listes déroulantes <select>
162
Les listes déroulantes <select>
163
Bouton d’envoi input type="submit"
164
Petit résumé des
champs
select + option
textarea
165
Bouton de reset, input type="reset"
166
Bouton <button type="button">
!
Syntaxe différente de la balise input
! Possibilité d'ajouter des images à l'intérieur (balise non auto-fermante)
! Trois types :
– button : bouton cliquable (utilisable en JavaScript)
– reset : remettre à zéro le formulaire
– submit : envoyer le formulaire
167
Bouton <button type="button">
http://getbootstrap.com/javascript/#modals
168
Désactiver un champ : disabled="disabled"
169
Désactiver un champ : disabled
170
Les champs de mot de passe <input type="password">
171
Uploader un fichier : type = file
172
Cacher un champ type="hidden"
173
Liste non exhaustive de quelques balises
!
body ! form
! div !
table
! p ! iframe
! h1- h6 ! etc.
! ul
! ol
! li
!
blockquote
174