Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Cours HTML

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 164

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
Le principe de balise

• 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
Le principe de balise

• 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
Le principe de balise

• 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 : &nbsp;

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 <input type="checkbox">

! 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)
Les cases à cocher <input type="checkbox">

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.

Vous aimerez peut-être aussi