Cours HTML
Cours HTML
Cours HTML
Fredj Raouia
Email: Raouianour@gmail.com
Programme initiation au HTML
2
Programme initiation au HTML
3
Les bases d’un site web
4
Une page Web c’est …
11
Un site Web c’est ...
12
Mais pas que ...
7
Mettre son site en ligne
8
Le principe de « serveur web »
Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
9
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
10
accéder.
18
Le client FTP
19
Le HTML - généralités
20
HTML : définition
– HTML5
14
Le W3C
15
Générer du HTML avec un éditeur
16
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
17
D’autres éditeurs
18
Les éditeurs « WYSIWYG »
19
Générer du HTML depuis un CMS
20
Générer du HTML depuis un langage côté serveur
21
22
La syntaxe HTML : balises,
éléments et attributs
33
Le principe de balise
<
> *
o
n
a
l
o
a
t
e l
34
i n
Le principe de balise
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
25
Le principe de balise
26
Le principe de balise
37
Attributs et valeurs
28
Attributs et valeurs
29
Exemples d’attributs
30
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>
31
Doctype, html, body : structure
d'un document valide
42
Structure d’un document HTML simplifié
33
La notion de doctype
<!doctype html>
34
Le doctype HTML5
35
La balise <html>
36
L'attribut lang
– Synthèse vocale
<html lang="fr">
37
La balise <head>
38
La balise <title>
39
La balise <head> : les balises meta
40
La balise <head> : les balises meta
41
La balise <body>
<body>
Contenu de la page
</body>
42
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
C’est valide !
Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
45
Les éléments de structuration du
contenu
46
La balise « division » <div>
47
La balise « division » <div>
48
Grille en div
49
La balise paragraphe <p>
50
La balise paragraphe <p>
51
Espaces insécables
52
Espaces insécables
53
D'autres entités HTML
copypastecharacter.com
54
Les titres h1 – h6
55
Les titres h1 – h6
56
Les éléments de « mise en
forme » de texte
57
Éléments en ligne « inline »
58
L’ élément <strong>
59
L’ élément <strong>
60
L’ élément <em>
61
L’ élément <em>
62
L’ élément <span>
63
L’ élément <span>
64
D’autres éléments
65
Les liens dans les documents
HTML
66
Fonction d'un lien
67
La balise <a>
68
La balise <a> pour les liens
69
Lien externe vers un autre site
70
Liens internes et hiérarchisation du site
71
Liens internes et hiérarchisation du site
72
Exercice !
86
Lien vers un fichier du même répertoire
74
Mon premier site
75
Exercice !
! Ouvrez index.html, ajoutez lui un titre h1 et ajoutez un lien vers la
page1.html
76
Exercice !
! Ouvrez page1.html, ajoutez lui un titre h1 et ajoutez un lien de
retour à l’index
77
Exercice !
! Ajoutez un répertoire « page_interne »
! Ajoutez-y une page « page2.html »
78
Liens vers un autre répertoire
79
Descendre dans un sous répertoire
80
Remonter d’un répertoire
81
Mon premier site
82
Exercice !
83
Exercice !
84
Ouvrir un lien dans un nouvel onglet
85
http://www.visuodesign.com/
100
Un lien vers une adresse mail
101
Les éléments de liste
102
Les listes non ordonnées <ul>
89
Les listes non ordonnées <ul>
91
Les listes ordonnées <ol>
94
Exemple d’imbrication
95
Les listes en pratique – les onglets
http://getbootstrap.com/javascript/#tabs
96
Les listes en pratique – les navigations
http://www.mobify.com/
97
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
100
Le format GIF - Graphics Interchange Format
http://lesjoiesducode.tumblr.com/
101
Quelques jolis GIFs
http://bisouslescopains.tumblr.com/
102
Le format PNG - Portable Network Graphics
103
En résumé
104
La balise <img>
• Balise auto-fermante
105
La balise <img> et source de l'image
– url de stockage
106
La balise <img> et attribut « alt »
107
La balise <img> et attribut « alt »
• L'attribut est obligatoire, mais il peut être vide pour les images
décoratives
108
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)
109
Exemple
110
L'attribut title
112
Les tableaux, introduction
113
Créer un tableau : <table>
114
Exemple de tableau simple
115
Exemple de tableau simple
116
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
117
Ajouter une entête avec ! <th> peut remplacer <td>
<th> pour créer une cellule
d’entête au tableau
118
Ajouter un titre au ! On utilise <caption> pour
tableau donner un titre au tableau
! La balise se place au
début du tableau
119
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)
140
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
Cadres (frames)
122
Cadres (frames)
■ Déprécié mais intéressant !
■ Diviser la fenêtre du navigateur en cadres
■ Utiliser la DTD HTML 4.01 Frameset
<frameset rows="liste"> … </frameset>
<frameset cols="liste"> … </frameset>
■ Liste : espacements des colonnes ou des lignes
■ en pixels : 30, en % : 20%, ce qu’il reste : *
■ <frameset> peut contenir
– <frameset>
– <frame>
– <noframes>
123
Cadres (frames)
124
Cadres : support ?
125
Cadres : exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Cadre principal</title>
</head>
<frameset cols="200,*">
<frameset rows="30%,*">
2 colonnes
<frame name="titre" src="titre.html">
</frameset>
2 lignes
<noframes>
</noframes>
</frameset>
</html>
126
Cadres : exemple
<frameset cols="200,*">
<frame name="menu" src="menu.html">
<frameset rows="30%,*">
<frame name="titre" src="titre.html">
30%
<frame name="principal" src="principal.html">
</frameset>
</frameset>
200px
127
Cadre en mode ligne (iframe)
128
Cadres en mode ligne : exemple
129
Cadres en mode ligne : exemple
130
Nouveaux éléments de section, article, header, footer, aside, nav
L'en-tête <header>
Plutôt que de se cantonner à un simple <div id="header"> le
nouvel élément <header> convient parfaitement à l'introduction
d'un document. Tout comme l'élément <nav> qui remplace
avantageusement <div id="menu">.
Le contenu principal et annexe
L'élément aside revêt le rôle de barre latérale, et
l'élément section est appelé pour regrouper le contenu principal.
Le <footer>
Sans suprise l'élément footer est destiné au pied-de-page. Il peut
accueillir des mentions spécifiques, un rappel du titre et du logo, des
liens de navigation, etc.
131
132
Les formulaires
133
Les formulaires sont partout autour de nous
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>
150
En résumé pour n'importe quel champ il faut toujours au moins
143
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>
• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
Les cases à cocher <input type="checkbox">
159
Les boutons radio <input type="radio">
169
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>
153
Les listes déroulantes <select>
select + option
textarea
165
Bouton de reset, input type="reset"
http://getbootstrap.com/javascript/#modals
Désactiver un champ : disabled="disabled"
170
Les champs de mot de passe <input type="password">
162
Uploader un fichier : type = file