Exemple

Transcription

Exemple

Le web est en perpétuel mouvement. Et ce tutoriel qui va suivre se classe
dans une série de tutoriels qui verront le jour au fur et à mesure.
HTML & CSS | Elyham Software Solutions |
1 de 80
Table des matières
I. Le web : HTML, CSS, HTTP, W3C......................................................................................... 3
Chapitre I : Les bases du HTML..................................................................................................... 4
➢ 1 Associer une feuille de style à un document HTML :................................................... 4
➢ 2 Les navigateurs internet (Goole chrome, Firefox, Internet Explorer, Safari, Opéra)....5
➢ 3 Les différentes balises HTML :..................................................................................... 7
➢ 4 Les éléments HTML
......................................................................................... 8
➢ 5 Éléments HTML vides...................................................................................................8
➢ 6 Les attributs HTML....................................................................................................... 8
➢ 7 HTML et les quotations .............................................................................................. 11
➢ 8 HTML et l'élément <computercode>.......................................................................13
Chapitre II : La paire HTML/CSS................................................................................................. 15
➢ 1 Associer une feuille de style à un document HTML :................................................. 15
➢ 2 CSS Font : Propriétés de polices CSS (famille de polices CSS)................................. 16
➢ 3 Les liens HTML :.........................................................................................................20
➢ 4 Les liens HTML et les couleurs..................................................................................21
➢ 5 Les liens HTML – l'attribut Target...............................................................................22
➢ 6 Les liens image........................................................................................................... 22
➢ 7 Les liens HTML et le bookmark..................................................................................23
Chapitre III : HTML et CSS avancé.............................................................................................. 25
➢ 1 Les tableaux et les listes en HTML............................................................................. 25
➢ 2 Les listes en HTML (listes ordonnées et listes non-ordonnées).................................. 30
➢ 3 Les listes de description en HTML..............................................................................36
➢ 4 Les listes horizontales..................................................................................................38
➢ 5 L'élément <span>....................................................................................................... 42
➢ 6 L'attribut class .............................................................................................................42
➢ 7 L'élément <iframe> ..................................................................................................44
➢ 8 JavaScript et <script> ............................................................................................. 45
➢ 9 L'élément HTML <noscript>.................................................................................. 48
➢ 10 L'élément HTML <head>......................................................................................... 48
➢ 11 L'élément HTML layout ............................................................................................49
➢ 12 Le design responsive en démo...................................................................................51
Chapitre IV : Les formulaires en HTML.......................................................................................55
➢ 1 Les formulaires en HTML........................................................................................... 55
➢ 2 L'élément <input>.................................................................................................... 55
➢ 3 L'attribut Method......................................................................................................... 58
➢ 4 L'attribut name.............................................................................................................58
➢ 5 Les types en HTML5...................................................................................................59
➢ 6 La liste des restrictions des types d'input en HTML5..................................................70
Exemple pratique et réalisation d'un blog dans le prochain tutoriel
2 de 80
I. Le web : HTML, CSS, HTTP, W3C
1
HTML (Hyper Text Markup Language) est un langage de balisage pour la description des
documents Web. Il comporte plusieurs balises définissant les différents types de contenus d'un
document.
Un site web au début d'internet pouvait avoir une à plusieurs pages. Pour modifier la mise en page
(les couleurs ou les polices d'ecriture de certains titres et de certaines pages) de chacune des pages, il
fallait le faire dans le code de la page proprement dite, en modifiant les balises concernées.
Malheureusement, des modifications identiques devaient être faites de manière répétitive pour les
autres pages. Ce qui était épuisant, si on avait un site avec des milliers de pages. Avec l'évolution du
web, on a pu séparer la mise en page (l'esthétique ou la présentation) d'un document HTML (page
web) de sa structure (contenu ou technique).
Ainsi, la mise en page ou l'esthétique ou la présentation sont gérées par le CSS et la structure par
l'HTML.
2
CSS (Cascade Style Sheets) est un langage de feuille de style en cascade. Grâce aux
feuilles de style, il nous suffira d'une seule ligne de code pour assigner aux balises de nos sites
internet : les polices (taille des textes), les couleurs, fond de page, les marges et les dispositions de
tous les éléments HTML.
3
HTTP (HyperText Transfer Protocol) est un protocole de communication entre un client
(navigateur web) et un serveur.
Communication HTTP : Vous utilisez votre navigateur web (mozilla firefox, chrome, internet
explorer, safari, opéra) pour envoyer une requête (http://www.elyham.com ) à un serveur web (le
serveur qui héberge http://www.elyham.com). Le serveur à son tour cherche l'information et vous la
renvoie.
4
W3C (Word Wide Web Consortium) édite les standards du web, afin de contrôler
l'évolution du web et d'éviter qu'il aille dans tous les sens. À sa tête, se trouve Tim Berners Lee, le
co-inventeur d'internet.
Avant de débuter, je nous propose une petite astuce pour avoir le code HTML d'un site web.
1. Allez sur votre navigateur préféré
2. Choisissez un site web de votre choix.
3. Faites un clic droit.
4. Puis choisissez « Afficher le code source de la page « pour Chrome. « Code source de la
page « pour Firefox. » Afficher la source » pour Internet Explorer.
3 de 80
Chapitre I : Les bases du HTML
1
Associer une feuille de style à un document HTML :
Une balise ouvrante est de la forme <html> et se ferme ainsi </html>
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>

<meta charset="UTF-8">

<meta http-equiv="Content-Type" content="text/html;
charset="UTF-8">
</head>
<body>
<h1>Voici le titre d'une section</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
♠ Explication :

La déclaration DOCTYPE définit le type de document HTML et permet au navigateur
d'afficher les pages comme il se doit. DOCTYPE n'est pas sensible à la casse (donc
<!DOCTYPE html>, <!DOCTYPE HTML>, <!doctype html>, <!Doctype Html> sont tous
identiques, mais je préfère de loin la première).
 Entre la balise ouvrante <html> et la balise fermante </html>, nous décrivons tout le
contenu du document HTML.
 Les balises <head> et </head> donnent des informations sur le document HTML. Ces
balises (<head> et </head>) contiennent des metadonnées.
◦ Exemple de métadonnées : caractère de codage informatique UTF-8, ou <title>,
<style>, <meta>, <link >, <script> et <base>
 Les métadonnées : Les balises métadonnées nous permettent de donner des informations
précises de nos pages Web aux moteurs de recherche, ce qui améliore considérablement le
référencement. Les balises métadonnées doivent être placées entre les balises
<head></head>. Chaque page d'un site internet devrait avoir des balises META en relation
avec le contenu de cette page.
Syntaxe d'une balise META : <META name="xxxx" contenu="xxxx">
4 de 80



◦ http-equiv="Content-Type" content="text/html: Cette en-tête permet
d'indiquer le type de document et son encodage.
◦ charset="UTF-8" : permet de représenter les caractères spéciaux d'un document
HTML. À la place de "UTF-8", il est possible "ISO-8859-1" (si les serveurs
n'envoient pasd'informations surl'encodage)
◦ <style> : définit les feuilles de style CSS internes.
◦ <link> : définit les feuilles de style CSS externes.
◦ <title> : donne le titre du document HTML, mais ne sera pas affiché à l'écran, mais
sera affiché dans l'onglet du navigateur. Le texte entre <title> et </title> donne le
titre du document. Nombre de caractère limité à 100 max.
Le contenu entre <body> et </body> décrit la partie visible du contenu du document
HTML.
Le texte entre <h1> et </h1> décrit un titre.
Le texte entre <p> et </p> décrit un paragraphe.
2
Les navigateurs internet (Goole chrome, Firefox, Internet Explorer,
Safari, Opéra)
Ils sont prévus pour lire des documents HTML et les afficher à l'écran. Les balises ne sont pas
affichées, mais le navigateur les utilise, afin de déterminer comment afficher les documents web.
Éditeur : Un exemple d'éditeur pour écrire des documents Web est le Notepad++.
Mode d'opération : 1- Ouvrez votre éditeur et copiez-y le texte ci-dessous, puis enregistrez votre
fichier en « tutoriel_html.html » (ou comme vous le désirez).
<!DOCTYPE html>
<html>
<head>
<meta name="Description" content="Voici un site pour
tutoriels">
</head>
<body>
5 de 80
<h1>Ceci est un titre</h1>
<p>Celui-ci est un paragraphe.</p>
</body>
</html>
2- Exécutez votre programme en allant sur le menu « Exécution « et ensuite « Launch in Chrome
« ou autre navigateur de votre choix.
♠ Le résultat après l'exécution :
♠ La structure d'un fichier HTML : Une bonne indentation du code facilite la lecture
<html>
<head>
</head>
<body>
<h1>Titre de la page</h1>
<p>Premier paragraphe</p>
<p>Deuxième paragraphe</p>
</body>
</html>
6 de 80
3
Les différentes balises HTML :

Une balise HTML en anglais « Tags « est entouré de crochets (<>).
<nomdelabalise>contenu<nomdelabalise>
 Les balises HTML fonctionnent de pair.
Exemple : <html></html>
 La première balise de la paire est la balise ouvrante <html> et la deuxième balise est la
balise fermante </html>
 La deuxième balise (la balise fermante) débute avec un slash (/) dans les crochets(< >) avant
le nom de la balise (</html>).
♣ Les balises de titre :
Elles sont représentées par les balises <h1> à <h6>
<h1>ceci est notre titre H1</h1>
♣ La balise de paragraphe <p>
sert à délimiter les paragraphes
<p>Mon premier paragraphe.</p>
<p>Mon deuxième paragraphe.</p>
Après chaque balise fermante </p>, un saut de ligne est généré.
♣ Les balises de lien (HTML Links) : <a></a>
servent à spécifier la destination d'un site web, d'un fichier, d'une image ou …
La destination du lien est décrite dans l'attribut href. Les attributs sont utilisés pour fournir des
informations supplémentaires sur les éléments HTML.
♠ Exemple : <a
href="http://www.elyham.com">Ceci est un lien</a>
La balise <img> (pour les images) ne se ferment pas :
La source de l'image est décrite dans src, le texte alternatif est décrit dans alt, la largeur est
spécifiée par width, et la hauteur par height.
♠ Exemple :
<img src="fichier.png" alt="elyham.com" width="105" height="103">
7 de 80
4
Les éléments HTML
Ces éléments sont écrits dans des balises ouvrantes et fermantes, y compris leurs contenus. Par
contre, certains éléments ont des balises ouvrantes, mais pas de balises fermantes (Exemple :
<img>).
♠ Un élément HTML est de la forme
<nomdelabalise>contenu</nomdelabalise>. Un
élément HTML est tout ce qui débute et se termine après une balise fermante.
♠ Exemple d'élément HTML : <p>Monpremier paragraphe</p>
♠ Structure d'un élément HTML :
Début de balise Contenu de l'élément
Fin de balise
<h1>
Mon premier titre
</h1>
<p>
Mon premier paragraphe
</p>
<br>
5
Éléments HTML vides
Les éléments HTML sans contenus sont appelés des éléments vides.
<br> est un exemple d'élément vide sans balise fermante et définit un saut de ligne. Toutefois, les
éléments vides peuvent être fermés dans une balise ouvrante de la manière suivante : <br />
HTML5 n'impose pas de balise fermante pour les éléments vides. Par contre, pour permettre aux
documents HTML d'être lus par des parseurs XML, il suffira de fermer tous les éléments HTML.
6
Les attributs HTML
Les attributs fournissent des informations supplémentaires sur les éléments HTML.
 Les éléments HTML peuvent avoir des attributs
 Les attributs fournissent des informations supplémentaires sur un élément
 Les attributs sont toujours spécifiés dans la balise de début
 Les attributs se présentent sous forme de paires nom / valeur. Exemple : name="valeur"
♣ L'attibut Lang

La langue du document peut être déclarée dans la balise <html> grâce à l'attribut lang.
8 de 80

La déclaration d'une langue est importante pour les synthèses vocales (pour adopter le bon
accent). Cet attribut permet d'indiquer la langue du contenu au navigateur.
Les deux premières lettres (fr) indiquent la langue française de France (FR). Et (fr-CA), pour le
français canadien. (fr-BE) pour la Belgique ou (fr) tout court.
♣
L'Attribut paragraphe
Les paragraphes HTML sont définis grâce à la balise <p>.
Dans cet exemple qui va suivre, l'élément <p> a un attribut title. La valeur de l'attribut est
"Tutoriel des sages" :
<!DOCTYPE html>
<html lang="fr-FR">
<head>
</head>
<body>
<h1>Le tutoriel</h1>
<p title="Tutoriel des sages">
Elyham vous offre avec grand plaisir, ce tutoriel HTML. Dans
le prochain tutoriel suivra un travail pratique.</p>
</body>
</html>
N.B : Après l'exécution de ce code sur le navigateur, passez la souris sur le texte, et le titre
s'affichera dans une infobulle.
♠ Résultat :
♣ L'attribut href
Les liens HTML sont définis par la balise </a>. L'adresse du lien est déclarée dans l'attribut href :
<a href="http://www.elyham.com">Ceci est un lien</a>
♣ Les attributs size pour les dimensions (largeur, hauteur)
Les images HTML sont définies grâce à la balise <img>. Le nom de l'emplacement du fichier est
défini par src, la largeur de l'image par width et la hauteur par height (tous définis sous forme
d'attributs).
9 de 80
♠
Exemple : <img src="fichier.png" width="105" height="103">
La largeur de l'image est donnée en pixels : width= "105" signifie 105 pixels à l'écran.
♣ L'Attribut alt
L'attribut alt donne des informations sur un texte alternatif à utiliser, si l'image ne peut être
affichée à l'écran (problème de connexion, ou erreur sur l'adresse del'image), la valeur de l'attribut
s'affichera à l'écran. Ainsi, une personne malentendante ou malvoyante pourra entendre le texte
alternatif.
♠ Exemple :
Pour les attributs, on peut choisir de ne pas utiliser les crochets, mais plutôt des crochets simples, ou
pas du tout de crochets. Mais dans nos exemples suivants, les doubles crochets seront utilisés.
♠ Exemple : Les lignes suivantes produisent le même résultat
(toutefois, je préfère de loin la
première. Faites votre choix !).
<img src='fichier.png' alt='elyham.com' width='105' height='103'>
<img src=fichier.png
alt=elyham.com width=105 height=103>
♣ Les attributs HTML les plus usuels :
Attribut
Description
alt
Indique le texte alternatif d'une image, si l'image
ne peut être affichée à l'écran
disabled
Indique qu'un champ de saisie doit être désactivé
href
Indique l'adresse URL (site web) d'un lien
id
Indique un id unique pour un élément
src
Indique l'adresse URL d'une image
style
Spécifie un style CSS pour un élément
title
Attribut qui donne des informations supplémentaires
sur un élément (affiché en infobulle)
♠ Exemple de formatage HTML :
<p>Ceci est un texte classique.</p>
<p><b>Ce texte-ci est en gras(bold)</b>.</p>
<p><strong>Un texte important en gras</strong>.</p>
<p><i>Un texte en italique (italic)</i>.</p>
10 de 80
<p><em>Un texte mis en emphase (emphasize)</em>.</p>
<p>HTML <small>petit</small> formatage</p>
<p>Texte <mark>marqué </mark>mis en évidence</p>
<p>Le ciel avait une couleur <del>bleue</del> rouge.</p>
<p>La couleur du ciel est <ins>color</ins> is rouge.</p>
<p>J'affiche l'indice <sub>subscript</sub> dans mon code.</p>
<p>J'affiche le mot <sup>superscript</sup> plus haut.</p>
♠ Résultat :
7
HTML et les quotations
Les quotations HTML sont de la forme <abbr>...<abbr>, <address>...</address>,
<bdo>...</bdo>, <blockquote>...</blockquote>, <cite>...</cite>, <q>...</q>
indiquent le contenu de l'élément. Ces éléments ne nécessitent pas de paragraphes.
♣ Les quotations HTML et leur description :
Balise
Description
<abbr>
Définit une abréviation ou un acronyme
11 de 80
<address>
Définit les informations de contact de l'auteur /
propriétaire d'un document
<bdo>
Définit la direction du texte
<blockquote>
Utilisé pour les citations longues
<cite>
Définit le titre d'un livre, d'une chanson, d'un
film, ...
<q>
Définit une citation courte
<bdo></bdo> (bidirectional override) : permet quant à lui d'outrepasser la direction du texte.
Ainsi, il est possible de changer la direction du texte en spécifiant celle désirée dans l'attribut dir.
♠ Exemple : dir="rtl"
: de la droite vers la gauche (right-to-left).
dir="ltr" : de la gauche vers la droite (left-to-right).
dir="auto" : selon la nature du contenu, le navigateur décide de la direction.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titre de la section</h1>
<p>Le navigateur indente toujours les <blockquote> : <q>
<p>Qui sont des longues citations.</p>
<blockquote cite="http://www.elyham.com/nos-solutions">
Pour satisfaire votre demande, nos organiserons
plusieurs tutoriels de ce genre. Contactez-nous en cas
de difficultés ou si vous avez besoin de plus
d'explications.
</blockquote>
<p>The <abbr title="Elyham Software Solutions">ESS</abbr> vous
guide dans la réussite de vos applications Web.</p>
<address>
Édité par Elyham.<br>
Visitez-nous au :<br>
www.elyham.com<br>
35000, République<br>
12 de 80
FRANCE
</address>
<p><cite>Cette œuvre est réalisée</cite> par Elyham in
2016.</p>
<bdo dir="rtl">Ce texte s'affichera de la droite vers la
gauche.</bdo>
</body>
</html>
8
HTML et l'élément <computercode>
Balise
Description
<code>
Définit le code d'un langage de programmation
<kbd>
Définit l'entrée au clavier
<samp>
Définit la sortie d'un programme ou d'un système
informatique
<var>
Définit une variable
<pre>
Définit un texte pré-formaté
♠ Exemple pratique :
<kbd> définit les entrées au clavier
<kbd>Fichier | Ouvrir...</kbd>
♠ Résultat :
Fichier | Ouvrir...
<samp> Voulez-vous supprimer ce fichier ? </samp>
♠ Résultat :
<code>
var a = 23;
var b = 37;
document.getElementById("demo").innerHTML = a + b;
</code>
13 de 80
♠ Résultat :
L' élément HTML (<pre></pre>) permet de pré-formater nos textes, afin de les afficher avec une
largeur fixe en préservant les espaces et les sauts de ligne.
<pre>
<code>
var a = 23;
var b = 37;
document.getElementById("demo").innerHTML = a + b;
</code>
</pre>
♠ Résultat :
<var> définit les variables mathématiques ou informatiques
Le théorème de Pythagore : <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
♠ Résultat :
♣ Les commentaires en HTML :
Vos commentaires ne seront pas affichés à l'écran. Mais ils servent à laisser des notes dans son code,
afin de s'en souvenir en cas de besoin.

<p>Ce texte sera affiché à l'écran.</p>

Les commentaires conditionnels : le texte ci-dessous sera seulement exécuté par Internet Explorer

14 de 80
Chapitre II : La paire HTML/CSS
CSS (Cascading Style Sheets ) : Feuille de style
Ce langage de style définit la présentation ou l'esthétique des documents HTML. Il nous permet de
manipuler les polices d'écriture, les couleurs, les marges et les dispositions de tous les éléments
HTML. Je vous propose de suivre la suite du tutoriel pour découvrir de quoi il est vraiment capable.
N.B : HTML sert à créer la structure d' un document HTML, et le CSS permet de formater cette
structure.
1
Associer une feuille de style à un document HTML :
♣ 3 méthodes s'offrent à nous :
1. Inline : permet d'utiliser les attributs de style à l'intérieur des éléments HTML.
Cette méthode est utilisée afin d'appliquer un style unique à un seul élément HTML. L'exemple
suivant va changer la couleur de l'élément <h1> en bleu.
♠ Exemple : <h1
style="color:blue;">Voici un titre bleu</h1>
2. Internal : en utilisant un élément <style> dans la section <head>
Cette méthode permet d'appliquer un style à toute une page HTML. Ce style est défini dans la
section <head> d'une page HTML, à l'intérieur d'un élément <style>.
♠ Exemple : body
h1
p
{background-color:lightgrey;} : Toute la page sera de couleur grise
{color:blue;} : Tous les éléments <h1> seront bleus
{color:green;} : Tous les éléments <p> seront verts
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey ;}
h1
{color: blue ;}
p
{color:green ;}
</style>
</head>
<body>
<h1>Un titre</h1>
<p>Un paragraphe</p>
</body>
</html>
3. CSS importé (External) : En utilisant un ou plusieurs fichiers CSS externes.
15 de 80
Cette méthode est la plus usuelle, elle est utilisée pour formater une ou plusieurs pages à la fois. En
modifiant tout simplement un unique fichier CSS, on parvient à changer le design de tout son site
web.
Nous créerons un fichier de style « style.css « (vous pouvez choisir le nom de fichier désiré). Par
contre, sa terminaison doit être en .css. Donc vous pouvez aussi appeler votre fichier ''tutoriel.css''
ou ''xxx.css''.
♠ Exemple : tutoriel _html.html
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href= "style.css">
</head>
<body>
<h1>Un titre H1</h1>
</body>
</html>
♣ Fichier CSS : (style.css)
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color: green;
}
2
CSS Font : Propriétés de polices CSS (famille de polices CSS)
La propriété color de CSS est utilisé pour colorer les textes de votre site web
La propriété font-family de CSS définit la police de caractère ou une police générique. On peut
utiliser plusieurs polices séparées par des espaces.
La propriété font-size définit la taille du texte du site web ou du document HTML.
♠ Exemple : (Les propriétés CSS et le style-CSS inline)
16 de 80
<!DOCTYPE html>
<html>
<head>
<style>
h1
}
p
{
color: blue;
font-family: verdana;
font-size: 300%;
{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Un titre H1</h1>
</body>
</html>
♠ Résultat :
♣ Modèle Box CSS
Chaque élément HTML a une bordure même si on ne la voit pas souvent à l'oeil nu. La propriété
border du CSS définit une bordure pour un élément HTML.
♠ Exemple :
p {
}
border: 1px solid black;
17 de 80
♠ Explications : Nous avons la propriété border, ensuite le nombre de pixel (1px), le style de
brodure (solid), la couleur de la bordure ( black ), traduit en noir.
Exercice : Remplacez le style de bordure solid par les autres styles de bordure : dotted, dashed,
double, groove, ridge, inset, outset.
♠ Résultat :
♠ La propriété padding : définit l'espace à l'intérieur de la bordure.
♠ Exemple :
p {
18 de 80
padding: 10px;
}
♠ Résultat :
♠ La propriété margin : Définit l'espace à l'extérieur de la bordure.
♠ Exemple :
p {
}
margin: 10px;
♣ L'attribut id
N.B : Tous les exemples CSS ci-dessus utilisés formatent les documents HTML en général. Pour
définir un style particulier pour un élément unique, ajouter un attribut id à l'élément en question.
♠ Exemple : <p
id="pid">Je suis unique</p>
Le style CSS correspondant
#pid {
color: blue;
}
19 de 80
♣ L'attribut class
Pour définir un style spécial pour un type d'élément, utiliser l'attribut class.
<p class="pclass">Je suis une classe</p>
Le style CSS associé
p.pclass {
color: red;
}
♠ Conclusion : On utilise un attribut id pour un élément unique, et class pour un groupe
d'élément. Les noms des attributs sont choisis par vous.
3
Les liens HTML :
Les liens sont présents dans presque tous les contenus web. Ces liens permettent aux utilisateurs de
naviguer d'une page à l'autre.
Les liens HTML sont aussi des hyperliens. Un hyperlien peut être un texte ou une image sur lequel
on peut cliquer, afin d'ouvrir un document ou une image.
Les liens sont définis avec les balises <a></a>.
♣ Liens absolus (adresse complète) :
<a href="adresseurl">lien du texte à cliquer</a>
♠ Exemple : <a href="http://www.elyham.com/contact/">Contactez-nous !</a>
♠ Explication : L'attribut href donne l'adresse de destination, mais cette adresse n'est pas
affichée.
lien du texte à cliquer : est le texte visible sur lequel on doit cliquer pour atteindre
l'adresse de destination.
Le lien à cliquer ne doit pas forcément être un texte, il peut être une image, ou un élément HTML
quelconque.
♣ Liens relatifs (lien local) :
Un lien relatif est le lien sans ''http://www...''.
♠ Exemple : <a
href="/contact/">Contactez-nous !</a>
♠ Exercice : Faites un essai avec des images.
20 de 80
4
Les liens HTML et les couleurs
Allez sur un site et passez votre souris sur un lien, vous remarquerez 2 choses :
 La flèche de la souris se transformera en petite main
 La couleur du texte du lien changera également.
Par défaut, sur tous les navigateurs :
 Un lien non visité est souligné et bleu
 Un lien visité est souligné et pourpre
 Un lien active est souligné et rouge
N.B : Ces informations ci-dessus sont vraies si elles n'ont pas été modifées dans le fichier CSS.
Nous allons de ce pas modifier ces trois éléments cités plus haut.
♠ Exemple
:
<style>
a:link
{color:green; background-color:transparent; textdecoration:none}
a:visited {color:blue; background-color:transparent; textdecoration:none}
a:hover
{color:violet; background-color:transparent; textdecoration:underline}
a:active {color:chocolate; background-color:transparent; textdecoration:underline}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: blue;
}
a:hover {
color: violet;
text-decoration: underline;
21 de 80
}
a:active {
color: chocolat;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Nous changeons les couleurs du lien</p>
<a rel= "/contact/" href= "_blank" >Contactez-nous !</a>
</body>
</html>
5
Les liens HTML – l'attribut Target
Voir l'image ci-dessus
<a href="/contact/" target="_blank">Contactez-nous !</a>
Valeur de la
target
Description
_blank
Ouvre le document lié dans une nouvelle fenêtre
ou dans un nouvel onglet
_self
Ouvre le document lié dans le même cadre où le
lien a été cliqué
_parent
Ouvre le document lié dans le cadre parent
_top
Le document lié occupe toute la fenêtre
framename
Ouvre le document lié dans un cadre nommé
6
Les liens image
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<p>L'image ci-dessus est un lien HTML. Cliquez dessus !<br />
22 de 80
Pour tester, ajoutez une image dans le même repertoire que
votre fichier HTML</p>
<a href= "contact.html"> href= "_blank" >Contactez-nous !>
<img src= "smiley.gif" alt= "Lien image"
style="width:50px;height:50px;border:0" >Contactez-nous !>
</a>
<p>Nous fixons la bordure à 0 ("border:0") pour éviter que
IE9<br />
(et les versions antérieures) n'ajoutent une bordure autour de
l'image.</p>
</body>
</html>
♠ Résultat :
7
Les liens HTML et le bookmark
Imaginons un site web avec une seule page infiniment longue (façon de parler) et beaucoup d'autres
sections sur la même page.
Pour accéder directement à une section sans parcourir tout notre site web ou toute notre page
HTML, nous allons créer des bookmark, afin d'accéder directement à la section souhaitée lors d'un
clic.
Créer un bookmark avec un attribut id
<h2 id="tips">Chapitre 1</h2>
Ainsi pour créer un lien vers le Chapitre 1, nous ferons
<a href="#chap1">Allez au chapitre 1</a>
Ou créer un lien vers le bookmark d'une autre page de la manière suivante :
<a href="tutorielPHP.html#chap2">Chapitre 1 du tutoriel PHP</a>
♠ Exemple :
23 de 80
<!DOCTYPE html>
<html>
<head>
<title>Les bookmark en HTML</title>
</head>
<body>
<p><a href="#C7">Allez au chapitre 7</a></p>
<p><a href="#C10">Allez au chapitre 10</a></p>
<h2 id="#C1">Chapitre 1</h2>
<p>Voici le chapitre 1</p>
</body>
</html>
♠ Résultat : Je vous laisse le soin de vérifier.
24 de 80
Chapitre III : HTML et CSS avancé
1
Les tableaux et les listes en HTML
♣ Exemple de tableau en HTML :
Numéro
Prénom
Sexe
Âge
1
Eve
Femme
6500
2
Noé
Homme
3500
3
Jésus
Homme
2016
4
Jean-Baptiste
Homme
2016
Les tableaux peuvent contenir des textes, des images, des listes et d'autres tableaux.
Pour créer cet tableau ci-dessus, nous utiliserons les balise <table>, <tr> (table row traduit par
ligne), <td> (table data en français données d'un tableau), <th> (table headings sections de
tableau)
Les tableaux <table> sont divisées en lignes <tr> qui contiennent des données <td>,
Nous utiliserons l'attribut border.
♠ Exemple CSS : Collapse-border pour la fusion des lignes
table, th, td {
border-collapse: collapse;
}
Padding pour les tableaux. Si vous ne faites pas un padding, les cellules du tableau par défaut ne
seront pas très espacées.
La première ligne des tableaux est définie à l'aide des balises <th></th>.
♠ Astuces :
Pour permettre à une cellule de tableau d'avoir plusieurs colonnes, on utilisera l'attribut colspan :
Pour permettre à une cellule de tableau d'avoir plusieurs lignes, on utilisera l'attribut rowspan :
Pour donner une légende à nos tableaux, nous utiliserons les balises <caption></caption>
Pour donner un design spécial et unique à notre tableau, nous introduirons un id dans l'élément
tableau.
Le sélecteur nth-child : qui signifie ''n-ième enfant'' nous permet de sélectionner un ou plusieurs
enfants en fonction de leur ordre dans la source et selon des critères que nous déterminerons. W3C
25 de 80
les range parmi les ''pseudo-classes structurelles''. Les propriétés et les pseudo-classes CSS
permettent de mettre en forme l'élément <thead>.
Propriétés CSS
Description
border
Définit une bordure
border-collapse
Fusionne des bordures de cellules
padding
Ajoute de l'espace entre les cellules
text-align
Aligne le texte de la cellule vers la droite
(right), la gauche (left) ou au centre (center)
border-spacing
Distance entre les bordures des cellules d'un
tableau (table)
colspan
Définit le nombre de colonnes d'une cellule
rowspan
Définit le nombre de lignes d'une cellule
Margin/padding
Mettent en forme le contenu des cellules
Utilisez l'attribut id pour définir de façon unique un tableau
♠ Passons à la pratique :
<!DOCTYPE html>
<html>
<head>
<title>Les balises de tableau en HTML</title>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
border-spacing: 1px;
}
th, td {
padding: 15px;
text-align: left;
26 de 80
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: white;
color: Chocolate;
}
</style>
</head>
<body>
<p>Amusez-vous à créer des tableaux ! <br />
Essayez de faire beaucoup de tests</p>
<table>
<tr>
<th>Nom</th>
<th>Sexe</th>
<th>Âge</th>
</tr>
<tr>
<td>Ruth</td>
<td>Femme</td>
<td>50</td>
</tr>
<tr>
<td>Obed</td>
<td>Homme</td>
<td>94</td>
</tr>
<tr>
<td>Melchisédek</td>
<td>Homme</td>
<td>Inconnu</td>
</tr>
</table>
<br>
27 de 80
<table id="t01">
<tr>
<th>Nom</th>
<th>Sexe</th>
<th>Âge</th>
</tr>
<tr>
<td>Eve</td>
<td>Femme</td>
<td>6500+</td>
</tr>
<tr>
<td>Jésus-Christ</td>
<td>Homme</td>
<td>2016+</td>
</tr>
<tr>
<td>Jean-Baptiste</td>
<td>Homme</td>
<td>2016+</td>
</tr>
</table>
</body>
</html>
♠ Les balises d'un tableau en HTML
Balises
Description
<table>
Définit un tableau
<th> (table header
cell)
Définit une en-tête du tableau
<tr> (table row)
Définit une ligne dans un tableau
<td> (table cell)
Définit une cellule du tableau
<caption>
Définit une légende du tableau
<colgroup>
Regroupe une ou plusieurs colonnes à mettre en
forme dans un tableau. Cette balise permet
d'appliquer des styles à des colonnes entières,
au lieu de répéter des styles pour chaque cellule
et chaque ligne. On l'utilise avec la balise
28 de 80
<col>
<col>
Indique les propriétés de colonne pour chaque
colonne dans un élément <colgroup>
<thead> (table head)
Regroupe les contenus d'en-tête dans un tableau
<tbody> (table body)
Regroupe les contenus de body dans un tableau
<tfoot> (table foot)
Définit un ensemble de lignes régroupant les
colonnes d'un tableau
2
Les listes en HTML (listes ordonnées et listes non-ordonnées)
♣ Liste non-ordonnées
Valeur
Description
disc
La liste des éléments sera marquée par une puce
ronde pleine
circle
ronde vide
square
de forme carrée
none
La liste des items ne sera pas marquée de puces
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée avec puces rondes pleines
(Disc)</title>
</head>
<body>
<h2>Liste des cources</h2>
<ul style="list-style-type:disc">
<li>Pains</li>
<li>Beurre</li>
<li>Sucre</li>
29 de 80
</ul>
</body>
</html>
♠ Résultat :
Résultat 2.1 : Liste des courses
 Pains
 Beurre
 Sucre
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée avec puces rondes vides
(Circle)</title>
</head>
<body>
<h2>Liste des animaux domestiques</h2>
<ul style="list-style-type:circle">
<li>Chiens</li>
<li>Chat</li>
<li>Lapin</li>
</ul>
</body>
</html>
♠ Résultat :
Résultat 2.2 : Liste des animaux domestiques
o Chien
o Chat
o Lapin
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée avec puces carrées (Square)</title>
30 de 80
</head>
<body>
<h2>Liste des matières grasses</h2>
<ul style="list-style-type:circle">
<li>Huile d'olive</li>
<li>Huile de sésame</li>
<li>Huile d'amande</li>
</ul>
</body>
</html>
♠ Résultat :
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée sans puces (None)</title>
</head>
<body>
<h2>Liste des produits sucrés</h2>
<ul style="list-style-type:none">
<li>Sirop de citron</li>
<li>Nutella</li>
<li>Miel</li>
</ul>
</body>
</html>
31 de 80
♠ Résultat :
Résultat 2.3 sans numéro : Liste des produits sucrés
Sirop de citron
Nutella
Miel
♣ Les listes ordonnées :
Une liste ordonnée commence avec la balise <ol> . Chaque élément de la liste commence avec la
balise <li>. Chaque élément de la liste sera numéroté.
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec nombres</title>
</head>
<body>
<h2>Liste des produits sucrés</h2>
<ol style="1">
<li>Sirop de citron</li>
<li>Nutella</li>
<li>Miel</li>
32 de 80
</ol>
</body>
</html>
♠ Résultat :
Résultat 2.4 : Liste des produits sucrés
1. Sirop de citron
2. Nutella
3. Miel
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec lettres majuscules</title>
</head>
<body>
<h2>Liste des appareils électroniques</h2>
<ol style="a">
<li>Ordinateurs portables</li>
<li>Téléphones portables</li>
<li>Buffets</li>
</ol>
</body>
</html>
♠ Résultat :
Résultat 2.5 : Liste des meubles
A. Tables
B. Chaises
C. Buffets
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec lettres minuscules</title>
33 de 80
</head>
<body>
<h2>Liste des meubles</h2>
<ol style="a">
<li>Tables</li>
<li>Chaises</li>
<li>Buffets</li>
</ol>
</body>
</html>
Résultat 2.6 - style a : Liste des meubles
a.Tables
b.Chaises
c.Buffets
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec des nombres romains
majuscules</title>
</head>
<body>
<ol style="I">
<li>Router</li>
</ol>
</body>
</html>
♠ Résultat :
Résultat 2.7 : Liste des appareils électroniques – style romain
34 de 80
I.Ordinateurs portables
II.Téléphones portables
III.Router
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec nombres romains minuscules</title>
</head>
<body>
<ol style="i">
<li>Router</li>
</ol>
</body>
</html>
♠ Résultat :
Résultat 2.8 – style romain minuscule : Liste des appareils électroniques
i.Ordinateurs portables
ii.Téléphones portables
iii.Router
3
Les listes de description en HTML
En HTML, une liste de description est une liste de termes, avec une description de chaque terme. Le
<dl> définit la liste de description, le <dt> définit le terme (nom ), et le tag <dd> décrit chaque
terme :
♣ Listes ordonnées de description
Valeur
Description
<dl>
définit la liste de description
<dt>
définit le terme (nom)
35 de 80
<dd>
♠
définit chaque terme
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste ordonnée avec nombres romains minuscules</title>
</head>
<body>
<h2>Liste de description HTML</h2>
<dl>
<dt>Café nature</dt>
<dd>- noir très chaud</dd>
<dt>Café au lait</dt>
<dd>- blanc et froid</dd>
</dl>
</body>
</html>
♠ Résultat :
Liste de description HTML
Café nature
- noir très chaud
Café au lait
- blanc et froid
♣ Liste imbriquée en HTML
En HTML, certaines listes peuvent contenir d'autres listes. Les éléments de listes peuvent être des
listes, d'autres éléments HTML tels que des images, des liens, etc.
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste imbriquée HTML</title>
36 de 80
</head>
<body>
<h2>Liste imbriquée</h2>
<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé rouge</li>
<li>Thé vert au jasmin</li>
</ul>
</li>
<li>Lait</li>
</ul>
</body>
</html>
♠ Résultat :
Liste imbriquée
 Café
 Thé
o Thé
rouge
o Thé vert au jasmin
 Lait
4
Les listes horizontales
Les propriétés ''display''. Cette balise donne 2 résultats différents. Elle nous permet d'avoir les
affichages en ''block'' (signifie en bloc) et en ''inline'' (signifie sur la ligne).
Les balises s'affichant en ''block'' prennent complèment la largeur disponible et s'affiche par défaut
avec un saut de ligne avant et après. Les balises HTML s'affichant par défaut en ''block'' (bloc) sont :
<div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ul>, <ol>, <li>, <blockquote>,
<table>.
Les balises s'affichant en ''inline'' (sur la ligne) prennent uniquement la largeur dont elles ont besoin,
sans saut de lignes. Les balises HTML s'affichant par défaut en ''inline'' (sur une ligne) sont :
<span>, <a>, <strong>, <em>, <u>, <img>.
37 de 80
♣ Exemple de liste horizontale : (display:inline)
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Liste horizontale</title>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: chocolate;
color: white;
padding: 10px 20px;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: purple;
}
</style>
</head>
<body>
<h2>Liste horizontale pour tutoriel</h2>
<ul id="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
38 de 80
</ul>
</body>
</html>
♠ Résultat :
♠ Conclusion :
Balise
Description
<ul>
Définit une liste non ordonnée
<ol>
Définit lune liste ordonnée
<li>
Définit un élément de liste
<dl>
Définit une liste de description
<dt>
Définit le terme description
<dd>
Définit les données de description
<style>
Définit le style de puce
<type>
Définit le type de numérotation
Les listes peuvent être imbriquées à l'intérieur d'autres listes
Liste des éléments peut contenir d'autres éléments HTML
La propriétés CSS display : inline affiche une liste horizontale.
♣ 2 modes d'affichage pour les éléments HTML :
Les balises <div> et <span> permettent de structurer le contenu, elles ont un rôle complémentaire.
1- Block (Bloc) /<div> : commence sur une nouvelle ligne et occupe toute la largeur disponible. Si
deux éléments block se suivent dans une page, il sera positionné l'un sous l'autre par défaut.
♠ Exemple : <div>, <h1> - <h6>, <p>, <form>
<div>Jean 3:16</div><div>Jean 1:1-3</div><div>Luc 6:31-32</div>
♠ Résultat :
Jean 3:16
Jean 1:1-3
39 de 80
Luc 6:31-32
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<div style="background-color:chocolate;color:white;padding:50px;">
<h2>Jérusalem</h2>
<p>Jérusalem est la ville sainte des chrétiens et des
juifs.</p>
<p>JApocalypse 21 : 1 Puis je vis un nouveau ciel et une
nouvelle terre; car le premier ciel et la première terre avaient disparu,
et la mer n'était plus. 2Et je vis descendre du ciel, d'auprès de Dieu,
la ville sainte, la nouvelle Jérusalem, préparée comme une épouse qui
s'est parée pour son époux.</p>
</div>
</body>
</html>
♠ Résultat :
2- Inline (En-ligne)/<span> : L'élément <span> est souvent utilisé comme un conteneur pour
d'autres éléments HTML. Il est inline et retourne donc une ou plusieurs lignes. On ne peut lui
assigner ni une hauteur ni une largeur ni l'entourer d'une marge..
♠ Exemple : <span>, <a>, <img>
<span>Jean 3:16</span><span>Jean 1:1-3</span><span>Luc 6:31-32</span>
♠ Résultat : Jean 3:16Jean 1:1-3Luc 6:31-32
40 de 80
♣ Balises d'affichage HTML
Balise
Description
<div>
Est un bloc avec les attributs margin, padding,
width, height
Structure le contenu du document HTML.
Suivie d'un saut de ligne
<span>
Sert à associer un style à une partie du texte.
<span> est une inline et n'a pas de saut de ligne
5
L'élément <span>
L' élément <span> est souvent utilisé comme un conteneur pour un texte. Il peut être placée à
l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans modifier l'apparence du texte.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<h1>Mon titre <span style="color:red">Important</span></h1>
</body>
</html>
♠ Résultat :
6
L'attribut class
Il permet de définir des styles égaux pour des éléments avec le même nom de classe. Cet attribut est
utilisé pour des éléments HTML. Dans l'exemple ci-dessous, l'élément <div> pointe vers le même
nom de classe.
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
41 de 80
<style>
div.verset
{
background-color: #81BEF7;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="verset">
<h2>Jean 1</h2>
<p>
1 Au commencement était la Parole, et la Parole était
avec Dieu, et la Parole était Dieu.
</p>
<p>
2 Elle était au commencement avec Dieu.
</p>
<p>
3 Toutes choses ont été faites par elle, et rien de ce
qui a été fait n'a été fait sans elle.
</p>
</div>
<h2>Jean 3</h2>
<p>
16 Car Dieu a tant aimé le monde qu'il a donné son
Fils unique, afin que quiconque croit en lui ne périsse point, mais qu'il
ait la vie éternelle.
</p>
<p>
17 Dieu, en effet, n'a pas envoyé son Fils dans le
monde pour qu'il juge le monde, mais pour que le monde soit sauvé par
lui.
</p>
</div>
<h2>Luc 6</h2>
<p>
42 de 80
31 Ce que vous voulez que les hommes fassent pour
vous, faites-le de même pour eux.
</p>
<p>
32 Si vous aimez ceux qui vous aiment, quel gré vous
en saura-t-on ? Les pécheurs aussi aiment ceux qui les aiment.
</p>
</div>
</body>
</html>
♠ Résultat :
43 de 80
7
L'élément <iframe>
L'élément HTML <iframe> (inline frame) définit l'intégration d'une page HTML dans la page
courante. Un frame HTML est définit par la balise <iframe>. L'attribut src définit l'adresse URL
pour une page iframe. height et width définissent les dimensions de l'iframe. Ces attributs
peuvent être exprimés en pixel ou en pourcentage. Par défaut, ils sont exprimés en pourcentage.
Un iframe a une bordure tout autour.
 On peut supprimer la bordure en appliquant l'attribut <style> et en utilisant la propriété
border.
 On peut aussi changer les dimensions, le style et la couleur des bordures de l'iframe.
 On peut ouvrir un document dans une autre page ou dans la même page avec l'attribut
target.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<iframe red="http://www.elyham.com" style="border:2px solide
#81BEF7 ;" height="500" width="400"></iframe>
</body>
</html>
♠ Résultat :
44 de 80
8
JavaScript et <script>
La balise <script> est utilisée pour définir un script côté client (JavaScript ). Soit l'élément
<script> contient des déclarations de script , soit il pointe vers un fichier de script externe par
l'attribut src. JavaScript permet de manipuler les images, de valider des formulaires, et de changer
dynamiquement du contenu. L'exemple JavaScript ci-dessous affiche "Bonjour JavaScript ! " dans
un élément HTML avec id="affichage" :
♠ Exemple1 JavaScript
<!DOCTYPE html>
<html>
<body>
<button type="button"
onclick="document.getElementById('affichage').innerHTML = Date()">
Cliquez ici pour afficher la date et l'heure.</button>
<p id="affichage"></p>
</body>
</html>
♠ Résultat1 JavaScript :
♠ Exemple2 JavaScript :
<!DOCTYPE html>
<html>
<body>
<h1>Mon deuxième programme JavaScript</h1>
<p id="affichage">JavaScript peut changer le style d'un
élément HTML.
</p>
<head>
<script>
function myFunction() {
document.getElementById("affichage").style.fontSize = "40px"
45 de 80
document.getElementById("affichage").style.color = "blue"
}
</script>
</head>
<button type="button" onclick="myFunction()"> Cliquez-moi !
</button>
</body>
</html>
♠ Résultat2 JavaScript :
JavaScript peut changer des attributs HTML comme les images
♠ Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Tutoriel HTML pour débutants</title>
<meta charset="UTF8">
<meta name="description" content="Tutoriel HTML">
<meta name="keywords" content="HTML, CSS, XML,
JavaScript">
<meta name="author" content="Elyham Software Solutions">
<base target="_blank" href="http://www.elyham.com">
<script>
function interrupteur(valeur) {
var etat;
if (valeur == 0) {
etat = "eteindre.gif")
} else {
etat = "allumer.gif")
}
46 de 80
document.getElementById("imageampoule").src =
etat;
}
</script>
<noscript>
Désolé,votre navigateur ne supporte JavaScript.
</noscript>
</head>
<body>
<h1>Éteindre et allumer une ampoule avec JavaScript</h1>
<img id="imageampoule" src="eteindre.gif" width="130"
height="200">
<p>
<button type="button" onclick="interrupteur(1)">
Allumez-moi !
</button>
<button type="button" onclick="interrupteur(0)">
Éteignez-moi !
</button>
</p>
</body>
</html>
♠ Résultat :
9
L'élément HTML <noscript>
Il définit une section de code HTML qui doit être insérée si le script a été désactivé par défaut ou
n'est pas pris en charge par le navigateur.
47 de 80
10
L'élément HTML <head>
Il fournit des informations générales (métadonnées : données sur les données) sur le document
HTML et est placé entre la balise <html> et <body>. Il contient un titre, des liens ou des
définitions vers des scripts et feuilles de style.
Les éléments qu'on utilise à l'intérieur de l'élément <head> sont : <title>, <base>, <link>,
<style>, <meta>, <script>, <noscript>, <command>.
L' élément <head> est un conteneur pour les métadonnées (données sur les données) et est placé
entre la balise <html> et <body>. Les métadonnées HTML sont des données sur le document
HTML. Les métadonnées ne sont pas affichées, mais sont utilisées par les navigateurs (pour afficher
convenablement les informations) pour les moteurs de recherche et d'autres services web. Elles
définissent généralement le titre du document, la chaîne de caractères, des styles, des liens, des
scripts, l'auteur, mot-clés, la description, et d'autres méta-informations. Les balises suivantes
décrivent les métadonnées : <title>, <style>, <meta>, <link >, <script> et <base>.
11
L'élément HTML layout
Il est approprié pour les magazines et les journaux
♠ Exemple :
!DOCTYPE html>
<html>
<head>
<title>Tutoriel HTML : Les layouts</title>
<meta charset="UTF8">
<meta name="description" content="Tutoriel HTML">
<meta name="keywords" content="HTML, CSS, XML,
JavaScript">
<meta name="author" content="Elyham Software Solutions">
<meta http-equiv="refresh" content="30">
<base target="_blank" href="http://www.elyham.com">
<style>
div.container
{
width: 100%;
border: 1px solid gray;
}
header,footer
48 de 80
{
padding: 1em;
color: white;
background-color: chocolate;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
<noscript>
Désolé,votre navigateur ne supporte JavaScript.
</noscript>
</head>
<body>
<div class="container">
<header>
<h1>La bonne nouvelle</h1>
</header>
<nav class="nav">
49 de 80
<ul>
<li><a href="#">Jean 1</a></li>
<li><a href="#">Jean 3</a></li>
<li><a href="#">Luc 6</a></li>
</ul>
</nav>
<article class="article">
<h1>Jean 1</h1>
<p>
1 Au commencement était la Parole, et la
Parole était avec Dieu, et la Parole était Dieu.
</p>
<p>
2 Elle était au commencement avec Dieu.
</p>
<p>
3 Toutes choses ont été faites par elle,
et rien de ce qui a été fait n'a été fait sans elle.
</p>
<p>
<strong>Redimensionner cette page pour voir
que ce qui se passe !</strong>
</p>
</article>
<footer>
Copyright © www.elyham.com
</footer>
</div>
</body>
</html>
12
Le design responsive en démo
Le design responsive permet à votre site d'être présentable sur destop, tablettes et téléphones
mobiles.
Le web designer utilise du CSS et du HTML pour redimensionner, cacher, rétrécir, agrandir ou
déplacer le contenu d'une page web afin qu'il corresponde à la dimension de l'écran désiré
♠ Exemple :
<!DOCTYPE html>
<html>
50 de 80
<head>
<style>
.verset
{
float:left;
width:100%;
padding:2px 0;
}
.cadre
{
color:#FFF!important;
background-color:#255e89!important;
padding:0.01em 16px;
}
@media only screen and (min-width:601px){
.verset {
width:33.33333%
}
}
@media only screen and (min-width:993px){
.verset {
width:33.33333%
}
}
</style>
</head>
<body>
<div class="cadre">
<h1>Le design responsive en démo</h1>
<h2>Redimensionner la page responsive !</h2>
</div>
<div>
<h2>Jean 1</h2>
<p>
1 Au commencement était la Parole, et la Parole était
avec Dieu, et la Parole était Dieu.
</p>
<p>2 Elle était au commencement avec Dieu.
51 de 80
</p>
<p>3 Toutes choses ont été faites par elle, et rien de ce
qui a été fait n'a été fait sans elle.
</p>
</div>
<h2>Jean 3</h2>
<p>16 Car Dieu a tant aimé le monde qu'il a donné son
Fils unique, afin que quiconque croit en lui ne périsse point, mais qu'il
ait la vie éternelle.</p>
<p>17 Dieu, en effet, n'a pas envoyé son Fils dans le
monde pour qu'il juge le monde, mais pour que le monde soit sauvé par
lui.</p>
</div>
<h2>Luc 6</h2>
<p>31 Ce que vous voulez que les hommes fassent pour
vous, faites-le de même pour eux.
</p>
<p>32 Si vous aimez ceux qui vous aiment, quel gré vous
en saura-t-on ? Les pécheurs aussi aiment ceux qui les aiment.
</p>
</div>
</body>
</html>
♠ Résultat :
52 de 80
53 de 80
54 de 80
Chapitre IV : Les formulaires en HTML
1
Les formulaires en HTML
Ils sont prévus pour recevoir les informations saisies par les utilisateurs à l'écran. L'élément <form>
définit un formulaire HMTL et se présente sous la forme :
<form>
...
</form>
Les éléments de formulaires sont de type : input, checkbox, boutons radio, boutons de
sumission(submit, reset, button).
2
L'élément <input>
Il est le plus important des éléments du <form> qui permette de créer des contrôles interactifs dans
les formulaires web. Il a plusieurs plusieurs variantes et dépend du type de l'attribut.
♣ <input
type="text">
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form>
<fieldset>
<legend>Information personnelle :</legend>
Prénom :<br>
<input type="text" name="prenom" value="Prénom"
checked>
<br>
Nom :<br>
<input type="text" name="nom" value="Nom" checked>
<br><br>
<input type="submit" name="Envoyer">
</fieldset>
</form>
55 de 80
</body>
</html>
♠ Résultat :
Type
Description
text
Définit un champ de formulaire pour la saisie des textes
radio
Définit un bouton radio (permet de faire un choix unique ou
des choix multiples)
submit
Définit un bouton de soumission (pour la soumission d'un
formulaire)
♣ <input
type="password">
Il définit un champ réservé aux mots de passe.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Input type password</title></head>
<form>
Nom d'utilisateur :<br>
<input type="text" name="nom">
<br>
Mot de passe :<br>
<input type="password" name="mdp">
</form>
<p>Les caractères dans un champ de mot de passe sont masqués
(représentés par des astérisques ou des cercles).</p>
</body>
</html>
♠ Résultat :
56 de 80
♣ <input
type="radio">
: permet de sélectionner un ou plusieurs choix
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Input type text</title></head>
<form>
<input type="radio" name="sexe" value="masculin"
checked>
Homme
<br>
<input type="radio" name="sexe" value="feminin"
checked>
Femme
<br>
Autre
<input type="radio" name="sexe" value="autre"
checked>
</form>
</body>
</html>
♠ Résultat :
<form> est généralement une page du côté serveur avec un script pour le traitement des données
saisies par l'utilisateur. Il est défini dans l'attribut action. Si l'attribut action n'est pas défini, le
formulaire ne sera pas soumis.
57 de 80
3
L'attribut Method
Cet attribut spécifie la méthode HTTP (GET ou POST) qui est utilisée lorsque le formulaire est
soumis.
<form action="action_page.php" method="get">
ou
<form action="action_page.php" method="post">
Si GET est utilisé, les données du formulaire seront visibles dans la barre d'adresse.
POST offre plus de sécurité, car les données envoyées ne seront pas visibles dans la barre d'adresse
Les balises ''block'', ''inline'' et ''inline-block''.
4
L'attribut name
Chaque champ de saisies doit avoir un attribut name, afin que la soumission s'exécute
convenablement.
L'élément HTML <fieldset> est utilisé pour regrouper plusieurs contrôles interactifs ainsi que
des étiquettes <label> dans un formulaire web.
<legend> (legend field) est un élément HTML qui représente une légende pour le contenu de son
élément parent <fieldset>
L'élément HTML <select> définit un contrôle qui présente un menu avec des options. Les options
de ce menu sont représentées par des éléments <option> pouvant être regroupés par des éléments
<optgroup>. Les options peuvent être pré-sélectionnées.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut name</title></head>
<form>
<select name="sexe">
<option value="masculin">Homme</option>
<option value="feminin">Feminin</option>
<option value="autre">Autre</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
58 de 80
</html>
♠ Résultat :
♣
<input type="checkbox"> : Traitement de données de type checkbox
Les checkbox permettent à l'utilisateur de sélectionner zéro ou plusieurs choix.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type checkbox</title></head>
<form>
<input type="checkbox" name="verset1" value="jean1">Jean1
<br><br>
<input type="checkbox" name="verset2" value="jean3">Jean3
<br><br>
</form>
</body>
</html>
♠ Résultat :
5
Les types en HTML5
Avec l'arrivée de l'HTML5, d'autres types se sont ajoutés. Les types qui ne seront pas supportés par
certains navigateurs se comporteront comme des types input text. La liste des types input sont les
suivants : color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
59 de 80
♣ <input
type="number"> est utilisé pour les valeurs numériques. Des restrictions
peuvent être appliquées sur ces nombres.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Les types HTML5 : number</title></head>
<p>Dépendamment de votre navigateur :<br>
Des restrictions numériques peuvent être appliquées au champ.</p>
<form action="action_page.php">
chiffres (compris entre 1 et 5) :
<input type="number" name="chiffre" min="1" max="5">
</form>
<p><b>N.B :</b>type="number" n'est pas supporté par IE9 et
moins.</p>
</body>
</html>
♠ Résultat :
♣ <input
type="date">
L'input type date est utilisé pour un champ de saisie qui doit contenir une date. En fonction des
navigateurs, un sélecteur de date apparaîtra dans le champ.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Les types HTML5 : date</title></head>
60 de 80
Date d'anniversaire :
<input type="date" name="dateanniversaire">
</form>
<p><b>N.B :</b>type="date" n'est pas supporté par IE9 et
moins.</p>
</body>
</html>
♠ Résultat :
♠ Le même exemple avec plus de restrictions : saisir des dates avant le 1er Janvier 1980 et après
le 1er Janvier 2000.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Les types HTML5 : date (avec
restrictions)</title></head>
Saisir une date avant 1980-01-01 :<br>
61 de 80
<input type="date" name="dateanniversaire" name="1979-1231">
Saisir une date avant 2000-01-01 :<br>
<input type="date" name="dateanniversaire" name="2000-0102">
</form>
<p><b>N.B :</b>type="date" n'est pas supporté par IE10 et
moins.</p>
</body>
</html>
♠ Résultat :
♣ <input
type="color">
Le type input color (HTML5) est utilisé pour les champs qui doivent contenir une couleur. Un
sélecteur de couleur peut apparaître lorsqu'un utilisateur fait une saisie dans le champ.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type color</title></head>
Un sélecteur de couleur peut apparaître lorsqu'un utilisateur active le
champ de saisie.</p>
Sélectionner ma couleur favorite :<br>
<input type="color" name="couleurfavorite"
value="#ff00ff">
</form>
<p><b>N.B :</b>type="color" n'est pas supporté par IE10 et
moins.</p>
</body>
</html>
♠ Résultat :
62 de 80
♣
<input type="range">
: contrôle permettant de saisir un nombre retournant une
valeur numérique qui correspond à la position du curseur. Il es possible de personnaliser et de
contraindre les valeurs retournées.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type range</title></head>
Range peut affichera un slider contrôlable.</p>
<form action="action_page.php method="get">
<input type="range" value="15" min="0" max="50" step="5">
</form>
<p><b>N.B :</b>type="range" n'est pas supporté par IE9 et
moins.</p>
</body>
</html>
♠ Résultat :
♣
<input type="month">
: permet à l'utilisateur de sélectionner un mois et une année
63 de 80
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type HTML5 : month</title></head>
<p>Dépendamment de votre navigateur, <br>
un sélecteur de date apparaîtra si l'utilisateur clique dans le champ de
saisie. </p>
Date (mois et année) :
<input type="month" name="choixdate">
</form>
<p><b>N.B :</b>type="month" n'est pas supporté par IE10 et
moins.</p>
</body>
</html>
♠ Résultat :
♣ <input
type="week"> :
permet à l'utilisateur de sélectionner un mois et une année
♠ Exemple :
<!DOCTYPE html>
<html>
64 de 80
<body>
<head><title>Le type HTML5 : week</title></head>
saisie. </p>
Sélectionner une semaine :
<input type="week" name="semaine">
</form>
<p><b>N.B :</b>type="week" n'est pas supporté par IE10 et
moins.</p>
</body>
</html>
♠ Résultat :
♣
<input type="time"> : Permet de sélectionner une heure
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type HTML5 : time</title></head>
65 de 80
saisie. </p>
Sélectionner une heure :
<input type="time" name="heure">
</form>
<p><b>N.B :</b>type="time" n'est pas supporté par IE10 et
moins.</p>
</body>
</html>
♠ Résultat :
♣
<input type="datetime-local"> : permet de sélectionner une date et une
heure
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Les types HTML5 : datetime-local</title></head>
saisie. </p>
Date et heure (date et heure) :
<input type="datetime-local" name="dateetheure">
<input type="submit" value="Envoyer">
</form>
<p><b>N.B :</b>type="datetime-local" n'est pas supporté par
Firefox, ou IE10 et moins.</p>
</body>
66 de 80
</html>
♠ Résultat :
♣
<input type="email">
: permet de créer un champ qui contiendra une adresse
émail. En fonction du navigateur, l'adresse émail saisie peut être automatiquement validée. Certains
smartphones reconnaissent les adresses émails en ajoutant un ".com" au clavier.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Les types HTML5 : email</title></head>
E-mail :
<input type="email" name="email">
</form>
<p><b>N.B :</b> type="email" n'est pas supporté par IE9 et les
précédentes versions.</p>
</body>
</html>
♠ Résultat :
67 de 80
♣
<input type="url">
: permet de créer un champ qui contiendra une adresse url. En
fonction du navigateur, l'adresse url saisie pourra être automatiquement validée. Certains
smartphones reconnaissent les adresses url en ajoutant un ".com" au clavier.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>Le type HTML5 : URL</title></head>
E-mail :
<input type="url" name="pageinternet">
</form>
<p><b>N.B :</b> type="url" n'est pas supporté par IE9 et les
</body>
</html>
♠ Résultat :
À tester par l'étudiant :
♣ <input
type="search">
: permet de créer des champs de recherche. Ce champ de
recherche se présente comme un champ de texte normal.
♠ Exemple :
68 de 80
<!DOCTYPE html>
<html>
<body>
<head><title>Le type HTML5 : Recherche google</title></head>
Recherche Google :
<input type="search" name="recherchegoogle">
</form>
</body>
</html>
♣ <input
type="tel"> permet de créer des champs qui contiendront un numéro de
téléphone. Le type "tel" est seulement supporté par Safari 8 actuellement.
♠ Exemple :
!DOCTYPE html>
<html>
<body>
<head><title>Le type HTML5 : tel</title></head>
Numéro de téléphone :
<input type="tel" name="nrdetel">
</form>
</body>
</html>
6
La liste des restrictions des types d'input en HTML5
Attribut Description
disabled
Indique qu'un champ de saisie doit être désactivé
max
Indique la valeur maximale à saisir dans un champ (HTML5)
maxlength
Indique le nombre maximal de caractères d'un champ de saisie
min
Indique la valeur minimale à saisir dans un champ (HTML5)
pattern
Indique une expression regulière que doit satisfaire la
saisie (HTML5)
readonly
Indique qu'un champ de saisie est en lecture seule (ne peut
69 de 80
être modifié)
required
Indique qu'un champ nécessite une saisie (HTML5)
size
Indique la largeur (en caractères) d'un champ de saisie
step
Indique le pas de l'incrémentation et de la décrémentation
dans un champ. Les valeurs négatives étant admises (peut être
conbiné à min et max) (HTML5)
value
Indique la valeur par défaut à saisir dans un champ
7
♣
Les attributs HTML
L'attribut "value" : il spécifie la valeur initiale pour un champ input.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML value</title></head>
<form>
<input type="text" name="nom" value="Admin">
<br>
Prénom :<br>
<input type="text" name="prenom">
</form>
</body>
</html>
♣ L'attribut "readonly" :
L'attribut readonly spécifie que le champ de saisie est en lecture seule (ne peut être modifié).
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML readonly</title></head>
<form>
<input type="text" name="nom" value="Admin" readonly>
<br>
70 de 80
Prénom :<br>
</form>
</body>
</html>
♣ L'attribut disabled
indique que le champ d'entrée est désactivé. Un élément désactivé est non utilisable et non cliquable.
Les éléments désactivés ne seront pas soumis.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML disabled</title></head>
<form>
<input type="text" name="nom" value="Admin" disabled>
<br>
Prénom :<br>
</form>
</body>
</html>
♠ Résultat :
L' attribut disabled n'a pas de valeur. C'est aussi possible d'écrire disabled="disabled".
♣ L'attribut size
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML size</title></head>
71 de 80
<form>
<input type="text" name="nom" value="Admin" size="40">
<br>
Prénom :<br>
</form>
</body>
</html>
♠ Résultat :
♣ L'attribut maxlength
Il spécifie le nombre maximal de caractères autorisés pour le champ input. Si l'utilisateur ne respecte
pas la condition, aucune alerte ne sera retourné.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML maxlength</title></head>
<form>
<input type="text" name="nom" value="Admin"
maxlength="10">
<br>
Prénom :<br>
</form>
</body>
</html>
Les nouveaux attributs HTML5 pour l'élément <input>
autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate,
formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder,
required, step
72 de 80
Les attributs pour l'élément <form>
autocomplete, novalidate
♣ L'attribut autocomplete
L'attribut autocomplete indique si un champ de formulaire ou d'entrée doit avoir autocomplete
activé ou désactiver. Lorsque <autocomplete> est activé, le navigateur automatiquement des
valeurs complètes basées sur les valeurs que l'utilisateur a entré auparavant. Astuce : Il est possible
d'avoir autocomplete " on" pour la forme, et "off" pour les champs d'entrée spécifiques , ou vice
versa. L'attribut autocomplete fonctionne avec <form> et <input> types suivants : text, search,
url, tel, email , password, date, range, et la color.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML autocomplete pour <input> et
<form></title></head>
<form action="action_page.php" autocomplete="on">
Prénom : <input type="text" name="prenom"><br>
Nom : <input type="text" name="nom"><br>
Prénom : <input type="email" name="email"
autocomplete="off"><br>
</form>
<p>En remplissant les champs, vous remarquerez le mécanisme
d'autocomplemention.</p>
<p>Notons que autocomplete est activée pour "form" et
désactivée pour le champ émail.</p>
</body>
</html>
♠
N.B : Avec certains navigateurs web,vous serez obligés d'activer la fonction
d'autocomplétion.
♠ Résultat :
73 de 80
♣ L'attribut novalidate
C'est un attribut de <form>, il empêche les données d'un formulaire d'être validées pendant la
soumission.
♠ Exemple :
<!DOCTYPE html>
<html>
<body>
<head><title>L'attribut HTML novalidate pour <input> et
<form></title></head>
<form action="action_page.php" novalidate>
E-mail : <input type="email" name="adresseemail">
</form>
<p><strong>N.B : </strong>L'attribut novalidate de la balise
"form" n'est pas supporté par Safari, Internet Explorer 9 et les versions
antérieures.</p>
<p>Notons que autocomplete est activé pour "form" et désactivé
pour le champ émail.</p>
</body>
</html>
♣
L'attribut autofocus
c'est un attribut boolean qui indique si oui ou non la page devrait sélectionner le contrôle après son
chargement, sauf si l'utilisateur remplit un autre contrôle.
N.B : Si l'attribut type vaut hidden, l'attribut autofocus ne peut être appliqué. Un seul élément par
document form peut avoir un attribut autofocus.
♠ Exemple :
…
Prénom : <input type="text" name="prenom" autofocus><br>
74 de 80
</form>
...
♣ L'attribut form
Cet attribut permet de disposer des éléments <input> Un élément input ne peut être qu'associé à un
seul élément du formulaire. L'élément <form> doit avoir un identifiant par attribut s'il y a plusieurs
<form>.
…
<form action="action_page.php" id="form1">
Prénom : <input type="text" name="prenom" autofocus><br>
</form>
Nom : <input type="text" name="nom" form="form1"><br>
...
♣ L'attribut formaction
Il spécifie l'URL d'un fichier qui traite le contrôle d'entrée lorsque le formulaire est soumis.
L'attribut Formaction outrepasse l'attribut action de l' élément <form> et est utilisé avec le
type="submit" et type="image".
…
<input type="submit" value="Envoyer"><br>
<input type="submit" formaction="action2_page.php"
value="Validation admin">
</form>
...
♣ L'attribut formenctype
Cet attribut définit le type de contenu utilisé pour envoyer un formulaire au serveur, si un bouton
d'envoi ou d'image est spécifié. Il s'utilise avec les type="submit", type="image", la méthode
"POST" et outrepasse l'attribut enctype de l'élément <form>.
Les différentes valeurs possibles de cet attribut sont :

application/x-www-form-urlencoded : est la valeur par défaut de l'attribut s'il n'est pas
renseigné.

multipart/form-data : Cette valeur doit être utilisée si un élément <input> possède
l'attribut type e avec une valeur file.
75 de 80

text/plain
…
<form action="demo_post_enctype.php">
<input type="submit" formenctype="Multipart/form-data"
value="Validation Multipart/form-data">
</form>
...
♣ L'attribut formmethod
Il définit la méthode HTTP à utiliser par le navigateur pour soumettre un formulaire à L'URL
spécifié. Formmethod outrepasse la méthode de l'attribut <form>. Il peut être utilisé avec les
type="submit"et type="image".
Les différentes valeurs de formmethod sont :
 post : Les données du formulaire sont incluses dans le corps du formulaire et envoyées au
serveur.
 get : Les données du formulaire sont concaténées à l'URI de l'attribut form, séparées par un
'?'. L'URI résultant est envoyé au serveur. Cette méthode ne doit être utilisée que lorsque le
formulaire n'a pas d'effets de bord et ne contient seulement que des caractères ASCII.
…
<input type="submit" formmethod="post"
formaction="action_post.php" value="Validation avec POST">
</form>
<p><strong>N.B : </strong>L'attribut formmethod de la balise
input n'est pas supporté par IE9 et les versions.antérieures</p>
...
♣
L'attribut formnovalidate
Cet attribut boolean utilisant le type="submit" définit si oui ou non le formulaire ne doit pas être
validé lorsqu'il est soumis. Si cet attribut est renseigné, il outrepasse l'attribut novalidate de
l'élément <form> propriétaire de l'élément <input>.
…
76 de 80
<input type="submit" formnovalidate value="Envoyer sans
validation">
</form>
<p><strong>N.B : </strong>L'attribut formnovalidate de la
balise input n'est pas supporté par Safari, IE9 et les
versions.antérieures</p>
…
♣
L'attribut formtarget
Il spécifie un nom ou un mot-clé qui indique l'espace d'affichage de la réponse reçue après la
soumission du formulaire. Son utilisation outrepasse l'attribut target de l'élément formulaire
propriétaire de l'élément <input>. Formtarget peut être utilisé avec les type="submit" et
type="image".
…
<input type="submit" value="Envoi normal"><br>
<input type="submit" formtarget="_blank" value="Envoyer
nouvelle fenêtre">
</form>
<p><strong>N.B : </strong>L'attribut formtarget de la balise
…
Les mots-clés pour formtarget sont les suivants :
_self : Charge la réponse dans le même contexte de navigation. C'est la valeur par défaut.
_blank : Charge la réponse dans un nouveau contexte de navigation, ce dernier n'a pas de nom.
_parent : Charge la réponse dans le contexte de navigation parent. S'il n'y a pas de parent, cette
option se comporte comme _self .
_top : Charge la réponse dans le contexte de navigation de plus haut niveau (autrement dit le
contexte de navigation qui est un ancre du contexte courant et qui n'a pas de parent). S'il n'y a pas de
parent, cette option se comporte comme _self.
♣ L'attribut list
Il se réfère à un <datalist> et contient des options prédéfinies à suggérer à l'utilisateur (pour un
élément <input>). Cet attribut est ignoré si la valeur de l'attribut type est hidden, checkbox, radio,
file ou button. La valeur de cet attribut doit être l'identifiant (id) d'un élément <datalist> du
même document.
…
77 de 80
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><strong>N.B : </strong>La balise datalist n'est pas
supporté par Safari, IE9 et les versions.antérieures</p>
…
♠ Résultat :
♣ Les attributs min et max
ces attributs spécifient la valeur minimale et maximale pour un élément <input>. Les types
compatibles avec les attributs min et max sont les suivants : number, range, date, datetime,
datetime-local, month, time et week.
…
Saisir une date avant le 01-01-1980 :
<input type="date" name="dateavant" max="31-12-1979"><br>
Saisir une date après le 01-01-2000 :
<input type="date" name="dateapres"><br>
Chiffre entre 1 et 5 :
<input type="number" name="chiffre" min="1" max="5"><br>
</form>
<p><strong>N.B : </strong>Les attributs min et max de la
balise input ne sont pas supportés par Firefox, par IE9 et les
78 de 80
<p><strong>N.B : </strong>Les attributs min et max ne seront
pas actifs pour les dates et les heures avec IE10 et les
versions.antérieures</p>…
♣ L'attribut multiple
Cet attribut boolean indique si oui ou non l'utilisateur peut saisir plus d'une valeur dans l'élément
<input>. Cet attribut est pris en compte dans le cas où l'attribut type="file" ou
type="email", sinon il est ignoré.
…
Sélectionner une ou plusieurs images :
<input type="file" name="img" multiple>
</form>
<p>Essayer de sélectionner plus d'un seul fichier.</p>
<p><strong>N.B : </strong>L'attribut multiple de la balise
…
♣ L'attribut pattern
Cet attribut est une expression regulière contenue dans l'élément <input> qui sert à vérifier une
valeur (motif). La valeur doit correspondre au contenu entier et pas seulement à un fragment.
L'attribut title est utilisé pour décrire la valeur et fournir une aide à l'utilisateur. Cet attribut ne
s'applique uniquement que lorsque la valeur de l'attribut type est text, search, tel, url ou email.
…
Code du pays :
<input type="text" name="code_pays" pattern="[A-Za-z]{3}"
title="Le code du pays en 3 lettres">
</form>
<p><strong>N.B : </strong>L'attribut pattern de la balise
input n'est pas supporté par Safari, IE9 et les versions.antérieures</p>
…
♣ L'attribut placeholder
Donne une indication à l'utilisateur sur ce qui peut être saisi dans le champ de saisie. Cet attribut
fonctionne pour les type text, search, tel, url ou email.
N.B : Cet attribut ne devrait pas être utilisé à la place de l'élément <label>.
…
79 de 80
Code du pays :
<input type="text" name="prenom" placeholder="JeanPierre"><br>
<input type="text" name="nom" placeholder="Leroy"><br>
</form>
<p><strong>N.B : </strong>L'attribut placeholder de la balise
…
♣ L'attribut required
La présence de cet attribut boolean indique que l'utilisateur doit saisir une valeur avant la
soumission du formulaire. Il ne peut pas être utilisé lorsque la valeur de l'attribut type est hidden,
image ou button (submit, reset ou button). Required fonctionne avec les types : text, search, url, tel,
email, password, date pickers, number, checkbox, radio, et file.
…
Nom d'utilisateur :
<input type="text" name="utilisateur" required>
</form>
<p><strong>N.B : </strong>L'attribut required de la balise
input n'est pas supporté par Safari, IE9 et les versions.antérieures</p>
…
♣ L'attribut step
indique le pas d'incrémentation et de la décrémentation pour un champ de saisie. Il fonctionne avec
les attributs min et max pour limiter l'incrémentation
…
<input type="number" name="chiffre" step="3">
</form>
<p>Dans notre exemple, la valeur numérique sera incrémentée
de '3' toutes les fois. Exemple : 0, 3, 6. Idem pour la décrémentation,
mais négativement. </p>
<p><b>N.B :</b> L'attribut step n'est pas supporté par IE9 et
les versions antérieures.</p>
…
80 de 80

Exemple

Transcription

Documents pareils

La propriété BACKGROUND-COLOR

Exercices PHP

DUT SRC - Webchronique

HTML/CSS - Travaux Pratiques 2

Le langage HTML

HTMLTD1 Texte de base en HTML

VENDS RAQUETTES HEAD

Les sites Internet dynamiques

Fiche 23 - HTML facile

Html et html5 1 - pierre