Cours HTML

HTML
Fredj Raouia
Email: Raouianour@gmail.com
Programme initiation au HTML
❑ Les bases d’un site web ❑ Les éléments de structuration du contenu

❑ Le HTML – généralités – La balise division <div>
– HTML et définition – La balise paragraphe <p>
– W3C et le WHATWG
– Espaces insécables Titres <h1> à <h6>
– Présentation rapide de quelques outils : éditeurs de
texte, wysiwyg et clients FTP – La balise <blockquote>
❑ La syntaxe HTML : balises, éléments et attributs ❑ Les liens hypertexte
– Le principe de balise et d'élément – Fonction d'un lien
– Attributs et valeurs
– La balise <a>
– Quelques exemples d'attributs
❑ Doctype, html, body : structure d'un document – Liens externes
valide – Liens internes et hiérarchisation du site
– Le doctype – Ouvrir un lien dans un nouvel onglet ou
– Les balises <html>, <head> et <body> laisser l'utilisateur choisir ?
– Les commentaires
– Les liens spéciaux : mailto, ancres, etc.
2
Programme initiation au HTML
❑ Les éléments de « mise en forme » ❑ Les tableaux HTML

– Créer un tableau : <table> <tr> <td>
de texte
– Un exemple de tableau simple
– Les balises <strong> et <em> – Ajout d'en-têtes avec <th>
– Légende de tableau
– La balise <span>
– Attributs avancés, dont colspan, rowspan
– D'autres balises (<sup>, <sub>, etc.)
❑ Les éléments de liste ❑ Les cadres
❑ Les formulaires
– Listes ordonnées
– Les formulaires sont partout autour de nous
– Listes non ordonnées – La balise <form>
–
❑ Ajouter des images avec la balise Le champ <input>
– Ajout de libellés avec <label>
<img> – Les placeholder HTML5
– Guide des formats d'image pour le web et – Zone de texte multiligne <textarea>
outils de compression – Bouton de validation <input type="submit">
– Présentation des autres éléments (checkbox, radio,
– La balise <img> et ses attributs <select>)
3
Les bases d’un site web
4
Une page Web c’est …
• Un fichier HTML est un format de fichier « texte » éditable dont les

éléments ont du sens
• Au format .html
• Peut contenir du texte, des images, des liens,
des médias, etc.
• Peut être liée à une autre page via des liens
11
Un site Web c’est ...
• Un ensemble de pages liées entre elles

• Accessible en ligne depuis n'importe où
12
Mais pas que ...
• Contenus textuels dans le fichier HTML, mais aussi images, sons,

vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers
sont chargés dans le navigateur pour créer une page web.
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
• FTP : File Transfer Protocol, protocole de communication destiné à

l'échange de fichiers sur un réseau TCP / IP.
• Permet de « mettre en ligne » son site web

• Une sorte d'explorateur sur un serveur à distance
• Ex : Filezilla
19
Le HTML - généralités
20
HTML : définition
• Hypertext Markup Language (HTML)

• Langage de balises qui permet de structurer des pages
• Différentes versions depuis 1989
• Aujourd’hui :
– XHTML (2000 – 2006)
– HTML5
14
Le W3C
• W3C : World Wide Web Consortium (1994)

– TBLee, fondateur du W3C et inventeur du HTML
– Chargé de promouvoir la compatibilité des technologies dans les
navigateurs
– 378 entreprises membres qui peuvent faire des propositions

(Microsoft, Apple, Mozilla, Opera, Adobe, etc.)
– Proposent un validateur http://validator.w3.org/
15
Générer du HTML avec un éditeur
Blocnote ou TextEdit, si vous

n’avez rien d’autre sous la main :
• Pas de coloration syntaxique

• Nécessite de connaître tout le
langage
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
• Coda : uniquement sur Mac (payant) http://panic.com/coda/
• Geany (Windows) gratuit http://www.geany.org/Download/Releases

• Notepad ++
• Komodo (Windows et Mac) http://www.activestate.com/komodo-ide
• Netbeans (Windows et Mac) gratuit http://netbeans.org/
18
Les éditeurs « WYSIWYG »
• What You See Is What You Get

• Permet de visualiser le rendu
directement
• Code parfois pas toujours propre ou
optimisé
• Exemple : Dreamweaver (payant),
Blue Griffon (gratuit)
19
Générer du HTML depuis un CMS
• CMS : Content Management System ou systèmes de gestion de

contenu
• Développé dans un langage de programmation web (ex : PHP) et
fait appel à une base de données (ex : SQL)
• Éditeurs « visuels »
sans avoir besoin de
notions de code
• Ex : WordPress, Drupal,
Joomla, Prestashop, etc.
20
Générer du HTML depuis un langage côté serveur
• Possibilité de générer « automatiquement » du HTML depuis un

langage de programmation côté serveur
• PHP, Python, Ruby, etc.
21
22
La syntaxe HTML : balises,
éléments et attributs
33
Le principe de balise
• Les balises structurent le contenu de la page (texte, images, etc.)

• Chaque balise a un rôle et donne du sens au contenu présenté
<
> *
o
n
a
l
o
a
t
e l
34
i n
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
<p> Hooo un bloc !! </p>

<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>
25
• Touche < du clavier pour ouvrir : <

• Touche maj + < pour fermer : >
• Le nom des balises est prédéfini dans les spécifications HTML, on
ne peut donc PAS en inventer !
• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.
26
• Par convention et pour faciliter la lecture du code, toute balise

ouverte doit être fermée (sauf exception).
• Certaines balises bien particulières n’ont pas besoin d’être fermées,
on les dit « auto-fermantes », elles n’ont ni contenu ni balise
fermante.
• Note : je mets le / final par convention, mais pas obligatoire.
37
Attributs et valeurs
• Certaines balises peuvent être complétées par des attributs

précisant certains paramètres (l'adresse des liens, source d'une
image à afficher, etc.)
• Une balise peut contenir plusieurs attributs
28
Attributs et valeurs
! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

en « inventer »
! On peut les mettre entre simple quote, double quote ou rien. Par
convention nous choisissons les doubles quotes " "
<div id="kittens"> // <div id=kittens>
! Les attributs sont toujours dans la balise ouvrante
29
Exemples d’attributs
! src=" " : donner la source (d’une image par exemple)

– <img src="monimage.png" width="400" height="250" alt="image
de chatons" />
! href=" " : donner la destination d’un lien

– <a href="http://www.google.fr"> Texte du lien </a>
30
Exemples d’attributs
! id=" " : donner un identifiant à l’élément que l’on pourra utiliser en

CSS.
Les Ids doivent être uniques par page
– <p id="monid"> contenu </p>
! 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é
Décomposons balise par balise !
33
La notion de doctype
• Permet au navigateur de savoir quelle version de HTML (ou

XHTML) est utilisée sur la page
• Obligatoire pour valider une page (validateur W3C)

• Pas de doctype = « Quirks » mode : le navigateur fait ce qu’il peut
avec ce qu’il trouve, en mode rétro-compatibilité => peut expliquer
certains bugs sur IE
<!doctype html>
34
Le doctype HTML5
• Plus simple, plus concis

• «Future proof» : autant commencer aujourd’hui !
• <!doctype html>
• Vous pourrez utiliser des éléments HTML5 qui sont finalisés
Le DOCTYPE qu’il vous faut
35
La balise <html>
• Tout document HTML commence par la balise <html> qui se ferme

en fin de document : </html>
• La balise <html> contient nécessairement deux balises définissant
l'entête (<head>) et le corps (<body>) du document.
36
L'attribut lang
• Permet de spécifier la langue de traitement du document global

– Indexation dans la bonne langue par les moteurs de recherche
– Synthèse vocale
– Vérification orthographique des formulaires
<html lang="fr">
Spécifier la langue d’un document (X)HTML
37
La balise <head>
• Détermine l’entête du document et contient les méta-informations
38
La balise <title>
• On y trouve la balise <title> qui sera le titre du document

– Sert en référencement (repris dans les résultats de recherche)
– Affichée dans l’onglet du navigateur
39
La balise <head> : les balises meta
• On y ajoutera également les appels pour les feuilles de style CSS et

certains JavaScripts
• On peut y trouver des balises « meta » parmi lesquelles

– <meta charset="UTF-8"/> : permet de définir l’encodage de caractère
de la page (à mettre directement sous le <head>)
A quoi servent les balises META
40
La balise <head> : les balises meta
– <meta name="description" content="description pour le

référencement"/> affiché dans les résultats de recherche
41
La balise <body>
! Délimite le contenu de la page

! Le contenu est constitué de texte, images et autres éléments qui
seront affichés
<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 !
! La validation reste un outil et non une fin en soi, mais un code

non valide a des chances de poser des soucis plus tard
54 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017

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
45
Les éléments de structuration du
contenu
46
La balise « division » <div>
47
La balise « division » <div>
• <div> est un conteneur

• Cette balise n’a aucune valeur sémantique (aucun « sens »)
• Élément de type bloc qui peut inclure n’importe quel autre balise
HTML
• Suivi d’un passage à la ligne

• Permet de regrouper d’autres blocs de HTML (paragraphes,
tableaux, etc.) et de leur donner un style CSS commun
48
Grille en div
49
La balise paragraphe <p>
50
La balise paragraphe <p>
• Les paragraphes sont des éléments de type « bloc », suivis d’un

passage à la ligne et d'une marge par défaut
• On peut imbriquer un paragraphe dans un div

• On ne doit PAS mettre un paragraphe dans un paragraphe
51
Espaces insécables
52
Espaces insécables
• Il existe des entités HTML pour encoder certains caractères

spéciaux comme les espaces insécables :
Caractères spéciaux et entités HTML
53
D'autres entités HTML
copypastecharacter.com
54
Les titres h1 – h6
Bien construire sa hiérarchie de titres
55
Les titres h1 – h6
• Il existe six niveaux de titre <h1> <h2> <h3> <h4><h5> et <h6>

(pas un de plus ! )
• Un nouveau niveau provoque un passage à la ligne, les éléments
de titre étant des éléments de bloc.
• La hiérarchisation visuelle est automatique (peut être modifiée via
CSS)
• Il est possible d’avoir plusieurs titres de même niveau

• On ne peut pas mettre un Hn dans un p, ou un p dans un Hn
56
Les éléments de « mise en
forme » de texte
57
Éléments en ligne « inline »
• Ces éléments sont des éléments dit « inline »

• On les place autour du contenu (et du texte)
• Ne crée pas de retour à la ligne
• Servent à donner du sens aux parties du texte/contenu
58
L’ élément <strong>
59
L’ élément <strong>
• <strong> élément sémantique qui marque du texte comme comme

fortement mis en valeur
• « en gras » par défaut dans les navigateurs
60
L’ élément <em>
61
L’ élément <em>
• <em> balise sémantique qui marque du texte comme en emphase

(mis en évidence) sert à « insister » sur une partie du texte
• en « italique» par défaut
62
L’ élément <span>
63
L’ élément <span>
• Un élément « générique » structurant de type « inline »

• Permet de styler facilement des morceaux de texte en CSS
• Par défaut affiche son contenu sans le modifier
• Aucune valeur sémantique
• (l’équivalent d’un div, en ligne)
64
D’autres éléments
• L'élément <sup> permet d’afficher un texte exposant
L'élément <sub> permet d’afficher un texte en indice
• L'élément <small> représente des annotations et des petits

caractères comme les informations légales ou liées au copyright
65
Les liens dans les documents
HTML
66
Fonction d'un lien
• Le lien est un élément cliquable qui renvoie l’utilisateur sur une

nouvelle page (ou lui permet de télécharger un fichier)
• Il est souvent stylé différemment (bleu souligné par défaut)

• Il peut renvoyer :
– vers un autre site (lien externe)
– vers une autre page du site (lien interne)
– vers des fichiers (image, .PDF, etc.)
67
La balise <a>
• On appelle « ancre de lien » le texte à l’intérieur de la balise

• On ajoute l’attribut href="cible_du_lien" pour indiquer vers quelle
page on veut envoyer l’utilisateur
• On peut ajouter l’attribut title="titre du lien" pour ajouter une
infobulle au survol et indiquer à l’utilisateur où il va arriver
<a href="index.html" title="titre"> Ancre du lien</a>
68
La balise <a> pour les liens
69
Lien externe vers un autre site
• La cible sera l’url (ou adresse) complète du site, http:// compris

• Il s’agit d’un lien absolu car on indique l’adresse complète
<a href="http://www.google.fr" title="Moteur de recherche

google"> lien externe vers google </a>
70
Liens internes et hiérarchisation du site
• Un site est constitué d'un ensemble de pages au sein d'un dossier

(appelé racine du site).
• Ces pages peuvent être organisées dans une hiérarchie de sous-
dossiers.
71
Liens internes et hiérarchisation du site
• Par convention, le fichier « racine » sera appelé index.html.

• C’est lui qui est affiché en priorité s'il existe quand l’utilisateur
demande le dossier.
72
Exercice !
• Créez un dossier « mon_premier_site »

• Créez y index.html
• Placez-y un second fichier appelé page1.html
86
Lien vers un fichier du même répertoire
• Lorsque deux fichiers sont dans le même répertoire, il suffit

d’appeler le nom du fichier comme cible.
• Ce sont des liens relatifs, car relatifs au site et dossier dans lequel
ils se trouvent.
<a href="page1.html" title="ma 1ere page"> ma page</a>
<a href="index.html" title="accueil du site">l'accueil</a>
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
• On peut avoir des répertoires et sous-répertoires

• On ajoute le nom du répertoire pour descendre : monrepertoire/
mapage.html
• On ajoute ../ pour remonter si on se trouve dans un sous répertoire :

../index.html
79
Descendre dans un sous répertoire
! Depuis la racine index vers page2 :

<a href="page_interne/page2.html">page 2</a>
! Si on avait d’autres sous-répertoires :

<a href="page_interne/autre_sous_rep/page2.html">page 2</a>
80
Remonter d’un répertoire
! Depuis la page2 vers la racine :
<a href="../index.html"> l'accueil</a>
! Si on veut remonter plusieurs répertoires (autant de ../ que de

répertoires:
<a href="../../index.html"> l'accueil</a>
81
Mon premier site
82
Exercice !
• Ouvrez index.html et ajoutez un lien vers la page page2.html du

sous dossier page_interne
83
Exercice !
• Ouvrez page2.html, ajoutez lui un titre h1 et ajoutez un lien de

retour vers l'accueil (index.html) en remontant d'un dossier
84
Ouvrir un lien dans un nouvel onglet
! L’attribut target="_blank" permet d’ouvrir un lien dans une nouvelle

fenêtre/onglet en fonction du navigateur
<a href="index.html" target="_blank" >

! Laisser l'utilisateur garder le contrôle de son navigateur ?
85
http://www.visuodesign.com/
100
Un lien vers une adresse mail
! <a href="mailto:monmail@gmail.com"> permet

de créer un lien qui ouvrira automatiquement le
client mail de la personne (à éviter car mail en
dur donc récupérable pour spam => formulaire
de contact )
! <a href="tel:13371337"> : permet de définir un

numéro de téléphone à appeler
101
Les éléments de liste
102
Les listes non ordonnées <ul>
89
Les listes non ordonnées <ul>
• La balise <ul> permet de créer une liste non ordonnée (unordered

list). Il faut l’ouvrir en début de liste et la fermer après le dernier
élément de la liste
• La balise <li> permet de créer UN élément de la liste

Les listes ordonnées <ol>
91
Les listes ordonnées <ol>
• La balise <ol> permet de créer une liste ordonnée et numérotée

(par défaut dans le navigateur). Il faut l’ouvrir en début de liste et la
fermer après le dernier élément de la liste.
• La balise <li> permet de créer UN élément de la liste

Contenu d’une liste
• Les éléments <ul> et <ol> ne peuvent contenir que des éléments

<li>
• Chaque élément <li> peut contenir des éléments de bloc ou des
éléments incorporés (p, div, blockquote, h1, etc.).
• Les listes peuvent s'imbriquer

• On peut mélanger <ul> et <ol> à condition de les fermer
correctement
Exemple d’imbrication
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
• Le JPEG (.jpg, .jpeg) :

format compressé qui réduit
le poids des images pour le
web (donc temps de
chargement)
=> Pour la compression avec pertes très efficace pour des images
photographiques
100
Le format GIF - Graphics Interchange Format
• Utilise 256 couleurs

• Compression sans perte basée sur la succession de pixels de
même couleur
• Couleur de transparence sans couche alpha

• animation
• extension .gif
• => Utilisé pour les logos
http://lesjoiesducode.tumblr.com/
101
Quelques jolis GIFs
http://bisouslescopains.tumblr.com/
102
Le format PNG - Portable Network Graphics
• PNG8 : 256 couleurs, utilisé pour

les images nécessitant peu de
couleurs et motifs répétitifs
• PNG24 : 16 millions de couleurs,
transparence extension .png
• => Utilisé pour les icônes, logos et
fichiers qui ont besoin d’un fond
transparent
103
En résumé
• Une photo : un JPEG

• Une illustration avec peu de couleurs sans transparence
importante : PNG8
• Une illustration avec beaucoup de couleurs : PNG24

• Une image animée : GIF
104
La balise <img>
• Balise de type inline : pas de retour à la ligne, peut-être insérée

dans le corps du texte. On la place généralement dans un <p> ou
un <div> mais peut se placer n’importe où dans le body
• Balise auto-fermante
<img src="ref_image" alt="description de l’image" />
105
La balise <img> et source de l'image
• Un attribut src="image.jpg" pour donner le chemin vers la source

de l’image
– chemin sur le serveur
– url de stockage
– même principe que pour les liens
106
La balise <img> et attribut « alt »
• Un attribut alt="description du contenu de l'image" texte

alternatif qui décrit le contenu de l’image et la remplace si l’image
n’est pas téléchargée
107
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
– Aide les personnes en situation de déficience visuelle à comprendre
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)
• Attention à garder les proportions !
<img src="monimage.jpg" alt="description de l’image" width="300" height="450" />
109
Exemple
110
L'attribut title
Attribut facultatif qui permet d’afficher une info-bulle au survol de l’image

111
Les tableaux HTML
112
Les tableaux, introduction
• Un tableau sert à organiser des informations structurées sous forme

tabulaire
• Il se compose de lignes organisées elles-mêmes en cellules
113
Créer un tableau : <table>
! La balise <table> </table> permet d’indiquer le début et la fin du

tableau.
! La balise <tr> caractérise une nouvelle ligne

! La balise <td> marque le contenu d’une cellule dans une ligne
114
Exemple de tableau simple
115
Exemple de tableau simple
! Le nombre d'éléments <td> au sein des éléments <tr> doit rester le

même dans la mesure ou chaque ligne possède un même nombre de
cellules, nombre qui correspond au nombre de colonnes du tableau.
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
! Par défaut affiché en gras

et centré dans les
navigateurs
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)
! La valeur numérique de cet

attribut précise le nombre de
colonnes du tableau que
couvre la cellule.
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)
■ Comment définir ce qui doit être affiché

dans les cadres ?
<frame name="nom" src="URL">
■ name=
■ Nom du cadre / de la fenêtre
■ Utilisé pour qu’il soit la cible de liens :
▪ <a href="URI" target="nom"> … </a>
■ src=
■ URL de la page à afficher dans le cadre
124
Cadres : support ?
■ Si l’agent ne supporte pas les cadres ?

■ Les robots ne supportent pas les cadres
<noframes> … </noframes>
■ Ce qui sera affiché dans les résultats des moteurs de
recherche
125
Cadres : exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cadre principal</title>
</head>
<frameset cols="200,*">
<frame name="menu" src="menu.html">
<frameset rows="30%,*">
2 colonnes
<frame name="titre" src="titre.html">
<frame name="principal" src="principal.html">
</frameset>
2 lignes
<noframes>
Texte pour les moteurs de recherche
</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)
■ Permet de définir un cadre en mode ligne et d’y charger un document

■ Balise :
<iframe width="largeur"
height="hauteur"
src="url_page"
frameborder="0|1"
scrolling="yes|no|auto" >
Texte de substitution
</iframe>
128
Cadres en mode ligne : exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>IFRAME</title>
</head>
<body>
<p>Voici le site de google
<iframe src='http://www.google.fr’
width='800' height='500' name='cadre'>
Site de Google
</iframe> tel qu'il se présente aujourd'hui.
</body>
</html>
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
• Le formulaire sert à récupérer des données que l’utilisateur va

entrer et les envoyer au serveur pour un traitement (en PHP par
exemple) : login, formulaire de contact et même le chat de
Facebook
La balise <form>
• Balise principale du formulaire

• Deux méthodes :
– method="get" : limitée à 255 caractères, informations passées dans la
barre d’adresse
– method="post" : envoie les données dans le corps de la requête sans

passer par la barre d’adresse, c’est la méthode la plus utilisée
• Action : l’adresse du fichier ou programme qui va traiter les données
<form method="post" action="traitement.php">

Exemple de la balise form en action
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>
! La balise input est auto-fermante

! Ne génère pas de retour à la ligne.
! Il faut lui donner un nom avec l’attribut « name » pour que l’on
puisse récupérer sa valeur (éviter les espaces dans le name). Le
nom n’est PAS visible sur la page
Le label
! Son rôle est de décrire à un être humain la fonction du champ

(puisque name est invisible)
! Ajouter un for="nom" au label

! Ajouter id="nom" au champ
Associer le label au champ
• Permet à l’utilisateur de cliquer sur le label pour sélectionner le

champ (le for et l’id doivent être identiques mais peuvent être
différents du name)
• Balise inline, pas de retour à la ligne

L'attribut « value »
! value=" " : donne une valeur par défaut au champ

! Vide (ou inexistant) si on n'a pas de données récupérées dans la
base de donnée du site
L'attribut « value »
150
En résumé pour n'importe quel champ il faut toujours au moins
• Un label (avec un for=" ")

• Un champ avec :
– Un id (qui a la même valeur que le for)
– Un name pour entrer la valeur dans la base de donnée

• Facultatif : un attribut value (qui peut être vide) pour récupérer la
valeur dans la base de donnée
Attributs supplémentaires
! maxlength=" " : le nombre de caractères maximum acceptés

dans le champ
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>
• Une balise qu’il faut ouvrir et fermer

• Pas de retour à la ligne automatique
Attributs utiles pour textarea
• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
Les cases à cocher <input type="checkbox">
• Une case = une option = un input

• Plusieurs cases, toutes peuvent être cochées
• Éléments inline
• On peut mettre le label à gauche ou à droite
! Les cases à cocher peuvent avoir un attribut name distincts, ou identique

! Si la cache est cochée, il renvoie « on » lors du traitement, ou peuple le tableau PHP de sa valeur
(value)
On peut pré-cocher une checkbox avec checked="checked" ou just checked

Les boutons radio <input type="radio">
• Une case = une option = un input

• Un seul choix possible parmi tous les éléments
• Éléments inline
159
Les boutons radio <input type="radio">
• La value est importante : c’est elle qui est renvoyée au serveur

• value="femme" : on renvoie donc « femme » au serveur
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>
! La liste se trouve entre les éléments <select id="nomdeliste"> </

select>
! La balise <label for="nomdeliste"> permet de donner le nom de

la liste et est liée à <select>
! On crée un objet de la liste avec la balise <option> Nom </

option>
! L’attribut value permet de donner la valeur de l'option de la liste

Bouton d’envoi input type="submit"
! Pour envoyer le formulaire on utilise input type="submit"

! L’attribut value=" " est obligatoire et permet de donner le « titre » du
bouton
! Le formulaire est envoyé pour traitement au fichier que l’on a défini
dans action=" "
Petit résumé des
champs
input type = text
input type = checkbox
input type = radio
input type= submit
select + option
textarea
165
Bouton de reset, input type="reset"
• Pour remettre à zéro toutes les données du formulaire on utilise

input type="reset"
• Merci de ne pas en abuser.
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

Bouton <button type="button">
http://getbootstrap.com/javascript/#modals
Désactiver un champ : disabled="disabled"
! L’attribut disabled="disabled" peut-être utilisé pour désactiver un

champ.
! Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les données
soient remplies
! Note : on peut aussi juste mettre disabled en attribut
Désactiver un champ : disabled
! Note : on peut aussi juste mettre disabled en attribut
170
Les champs de mot de passe <input type="password">
! input type="password" : permet de masquer un mot de passe
162
Uploader un fichier : type = file
! Pour télécharger vers le serveur un fichier on utilise input

type="file"
! Si on envoie un fichier, il faut permettre au formulaire d’envoyer des
données avec l’attribut enctype="multipart/form-data" sur l’élément
form.
Cacher un champ type="hidden"
! On peut cacher un champ avec input type="hidden"

! Permet d’envoyer des données sans que l’utilisateur ne doive les
remplir ou ne les voie.

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

❑ Les bases d’un site web ❑ Les éléments de structuration du contenu

❑ Les éléments de « mise en forme » ❑ Les tableaux HTML

• Un fichier HTML est un format de fichier « texte » éditable dont les

• Un ensemble de pages liées entre elles

• Contenus textuels dans le fichier HTML, mais aussi images, sons,

• FTP : File Transfer Protocol, protocole de communication destiné à

• Permet de « mettre en ligne » son site web

• Hypertext Markup Language (HTML)

• W3C : World Wide Web Consortium (1994)

– 378 entreprises membres qui peuvent faire des propositions

– Proposent un validateur http://validator.w3.org/

Blocnote ou TextEdit, si vous

• Pas de coloration syntaxique

• Coda : uniquement sur Mac (payant) http://panic.com/coda/

• Geany (Windows) gratuit http://www.geany.org/Download/Releases

• Komodo (Windows et Mac) http://www.activestate.com/komodo-ide

• Netbeans (Windows et Mac) gratuit http://netbeans.org/

• What You See Is What You Get

• CMS : Content Management System ou systèmes de gestion de

• Possibilité de générer « automatiquement » du HTML depuis un

• PHP, Python, Ruby, etc.

• Les balises structurent le contenu de la page (texte, images, etc.)

<p> Hooo un bloc !! </p>

• Touche < du clavier pour ouvrir : <

• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.

• Par convention et pour faciliter la lecture du code, toute balise

• Note : je mets le / final par convention, mais pas obligatoire.

• Certaines balises peuvent être complétées par des attributs

• Une balise peut contenir plusieurs attributs

! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

<div id="kittens"> // <div id=kittens>

! Les attributs sont toujours dans la balise ouvrante

! src=" " : donner la source (d’une image par exemple)

! href=" " : donner la destination d’un lien

! id=" " : donner un identifiant à l’élément que l’on pourra utiliser en

Décomposons balise par balise !

• Permet au navigateur de savoir quelle version de HTML (ou

• Obligatoire pour valider une page (validateur W3C)

• Plus simple, plus concis

Le DOCTYPE qu’il vous faut

• Tout document HTML commence par la balise <html> qui se ferme

• Permet de spécifier la langue de traitement du document global

– Vérification orthographique des formulaires

Spécifier la langue d’un document (X)HTML

• Détermine l’entête du document et contient les méta-informations

• On y trouve la balise <title> qui sera le titre du document

– Affichée dans l’onglet du navigateur

• On y ajoutera également les appels pour les feuilles de style CSS et

• On peut y trouver des balises « meta » parmi lesquelles

A quoi servent les balises META

– <meta name="description" content="description pour le

! Délimite le contenu de la page

! La validation reste un outil et non une fin en soi, mais un code

54 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017

• <div> est un conteneur

• Suivi d’un passage à la ligne

• Les paragraphes sont des éléments de type « bloc », suivis d’un