Scribd
Importer
12 vues36 pages

Prog Web-1

Ce document présente une introduction au langage HTML, expliquant sa structure de base, les balises essentielles, et la manière dont les navigateurs interprètent les fichiers HTML et CSS. Il aborde également la création d'une page web simple, les erreurs de conformité à corriger, et l'importance de l'encodage des caractères. Enfin, il décrit les éléments sémantiques, les listes, les images, et les liens externes en HTML.

Transféré par

Landry NDUWIMANA
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
12 vues36 pages

Prog Web-1

Ce document présente une introduction au langage HTML, expliquant sa structure de base, les balises essentielles, et la manière dont les navigateurs interprètent les fichiers HTML et CSS. Il aborde également la création d'une page web simple, les erreurs de conformité à corriger, et l'importance de l'encodage des caractères. Enfin, il décrit les éléments sémantiques, les listes, les images, et les liens externes en HTML.

Transféré par

Landry NDUWIMANA
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 36

TD1 Partie 1 – HTML - un

langage à balises pour


structurer les
documents Doctype et premières balises
Le but de ce TD est de comprendre comment sont écrites les
pages Web basiques, aussi appelées pages statiques (Web 1.0).
Une telle page Web contient deux parties :
1. HTML : Le fichier HTML contient la structure de la
page et son contenu ; en plus du texte brut, il donne du
sens au texte en indiquant ce qui relève d’un paragraphe,
d’un titre, etc, à l’aide de balises
(exemple <p>, <title>,…);
2. CSS : Le fichier CSS est responsable de la mise en page
de ces éléments (mettre ce paragraphe en rose, utiliser la
fonte “Sans Serif” pour ce titre,… )
Le navigateur (Firefox, Chrome, Safari, IE/Edge, …) est le
logiciel qui nous permet de visualiser les pages Web. Le but
de ce TD est de démystifier la façon dont sont interprétés ces
deux types de fichiers par le navigateur. Pour cela nous allons
réaliser un site dont le rendu correspond au fichier target.png,
en partant du fichier index.txt, qui contient le contenu
quasiment “brut” du site à réaliser.
Nous allons tout d’abord nous consacrer à préciser la structure
(le HTML donc) que l’on peut ajouter à notre contenu brut.
Nous verrons ensuite dans la deuxième partie du TD comment
atteindre le rendu proposé par target.png en réalisant un fichier
CSS.
Transformation d’un document texte en un document
HTML
Le rôle du navigateur

Comme dit précédemment, le rôle du navigateur (Firefox,


Chrome, Safari, IE/Edge, …) est de visualiser les pages Web.
Donc le navigateur transforme un fichier texte contenant du
langage HTML / CSS en un affichage mis en page, avec des
images…
1. La page du TD est une page Web. Ouvrez les sources
de cette page pour voir le code HTML qui est utilisé
pour afficher cette page (clic droit puis code source
ou Ctrl+U).
Pour créer une page Web, il suffit de créer un fichier texte et
de lui donner l’extension .html pour que le navigateur
comprenne qu’il doit l’interpréter comme un document
HTML.
1. Sauvegardez le fichier index.txt en local dans un
dossier HTMLCSS/TD1/.
Sauvegardez le même fichier index.txt en local dans le
dossier HTMLCSS/TD1/ en le renommantindex.html.
2. Ouvrez les deux fichiers index.txt et index.html dans
le navigateur.
Quelles différences d’affichage observez-vous ?
Pourquoi ?
Comment sont affichés des sauts de ligne d’un
document HTML ?
Comment est affiché un texte HTML entouré
de <!-- et --> ?
Le standard du langage HTML
Notre document index.html est bien interprété comme un
document HTML par le navigateur.
Le HTML, qui signifie HyperText Markup Language (langage
de balisage d’hypertexte), est donc un langage à balise
contenant des liens, dits hypertextes, vers d’autres documents.
Le HTML est un standard, c’est-à-dire un langage
complètement décrit (n’hésitez pas à jeter un rapide coup
d’œil à sa spécification, un document très technique mais
complet).
1. Testons la conformité de index.html au standard
HTML5 à l’aide du
validateurhttps://html5.validator.nu/. Quelles sont les
erreurs indiquées ?
2. Commençons par l’erreur
3. Error: Non-space characters found without seeing a doctype first. Expected
<!DOCTYPE html>.

Le validateur nous dit qu’il s’attendait à voir <!


DOCTYPE html> au début de notre document. Cette
balise sert à déclarer que le document est écrit en
HTML5. En effet, il existe plusieurs standards de
“langages HTML” : HTML4, XHTML, HTML5, …
Aujourd’hui, les gens utilisent majoritairement HTML5
et nous ferons de même.
Pour que le document soit valide et reconnu comme un
document HTML 5, ajoutez la balise <!DOCTYPE
html> au tout début du fichier.
Retestez la conformité de votre document.
4. Le validateur nous indique The character encoding
was not declared.
L’encodage indique la façon dont le fichier est
enregistré (UTF-8, ANSI, iso-8859-15, …). Si la
plupart des caractères sont enregistrés de manière
standard, les caractères spéciaux (accents, œ, …)
peuvent être enregistrés de manière très différente.
Lorsque l’encodage n’est pas spécifié, le navigateur
risque d’afficher é au lieu de é à cause d’une
mauvaise détection de l’encodage. En effet, le
caractère é est enregistré en UTF-8 de la même manière
que é est enregistré en iso-8859-15 (encodage
encore très utilisé dans Windows).
Spécifier l’encodage des caractères est donc nécessaire
pour que les caractères spéciaux de votre page soient
bien affichés. Nous utiliserons toujours l’encodage
UTF-8 (et idéalement tout le monde devrait aussi
l’utiliser).
i. Rajoutez donc la ligne suivante qui déclare
l’encodage dans l’en-tête du document juste après
le DOCTYPE.
ii. <meta charset="utf-8">

iii. Réouvrez index.html dans le navigateur et


vérifiez que tous les accents s’affichent bien.
Note : Si les accents ne marchent toujours pas,
c’est parce qu’il ne suffit pas de dire que votre
fichier est en UTF-8. Il faut aussi que votre fichier
soit bien enregistré en UTF-8. Par exemple dans
Notepad++, l’encodage est marqué tout en bas à
droite. Vous pouvez convertir votre fichier en
UTF-8 en cherchant dans les menus.
iv. Retestez la conformité de votre document.
5. La dernière erreur nous parle d’un élément head auquel
il manque un title. Corrigez votre page Web en
insérant un titre après le <meta>.
6. <title>Le site non officiel de Chuck Norris</title>

À ce stade, le validateur indique que le


fichier index.html est un document HTML5 valide.
Structure usuelle d’un document HTML
Les balises HTML

Nous avons vu dans l’exercice précédent nos premières


balises <meta> et <title>. Les balises permettent de
structurer le document. Elles annotent le texte qu’elles
contiennent et permettent donc d’y rajouter du sens. On
distingue deux types de balises :
1. La plupart des balises englobent du contenu : elles
commencent par une balise ouvrante <mabalise>, puis
le contenu que l’on veut “annoter” et finissent par
une balise fermante </mabalise>.
Par exemple, la balise <title> sert à dire que le texte
qu’elle englobe sera le titre du document.
2. Certaines balises n’acceptent pas de contenu : elles
consistent juste d’une balise ouvrante.
Par exemple, nous avons vu la balise <meta> et nous
verrons bientôt <img>, <br> …
Autres exemples :
<p>Ceci est un paragraphe HTML puisqu'il est entouré des balises 'p' </p>
La balise 'br' du saut de ligne ne prend pas de contenu <br>

La structure de base

Servons-nous donc des balises pour créer une bonne structure


de base de document HTML :
<!DOCTYPE html>
<html>
<head>
<!-- L'en-tête du document avec au moins un titre -->
<title>Un titre qui s'affiche dans l'onglet du navigateur</title>
</head>
<body>
<!-- Le corps du document -->
</body>
</html>

Après la ligne <!DOCTYPE html> de déclaration du langage,


le document est inclus dans la balise <html>et est composé de
deux parties :
 l’en-tête <head> contient des informations sur le
document HTML, comme
o un <title> (balise obligatoire)

o un <meta> pour définir l’encodage

 le corps <body> contient le vrai contenu. Nous verrons


des exemples de balises dans la section Balises
communes.
Un document HTML est comme un arbre

Les balises HTML donnent une structure d’arbre au document.


Dans notre exemple index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Le site non officiel de Chuck Norris</title>
</head>
<body>
...
</body>
</html>

l’arbre est le suivant :


 <html> est l’élément racine
 <head> et <body> sont les deux fils de
l’élément <html>
 <title> et <meta> sont deux fils de l’élément <head>
 “Le site non officiel de Chuck Norris” est un fils de
l’élément <title>.
1. Mettez à jour votre page index.html pour qu’elle
respecte la structure HTML ci-dessus.
(Vous devez rajouter les
balises <html>, <head> et <body>)
2. Retestez la conformité de votre document.
Outils de développement Web
Dans la suite du TD, nous allons utiliser notre navigateur pour
“inspecter” notre page internet. Pour cela nous conseillons
Chrome ou Firefox. Appuyer sur la touche F12. Les outils de
développement affichent deux parties bien distinctes, une
dédiée au HTML et l’autre…aux CSS. Ces outils sont
fabuleux pour apprendre comment se construit une page
internet.
Il y a trois façons de s’intéresser à un élément en particulier :
 Un clic droit avec la souris dans la page affichée, suivi
d’un “Inspecter/Examiner l’élément”, permet de voir le
code HTML correspondant dans l’outil de
développement.
 Un clic sur dans l’outil de développement permet
d’aller inspecter une zone d’intérêt dans la page (par
survol avec la souris).
 Quand on passe la souris au-dessus d’un élément dans
l’outil de développement, il le colore dans la page.
Familiarisez-vous avec ces trois techniques en inspectant la
page du TD.
Par exemple faites un clic droit sur l’élément “il y a trois
façons…” puis “inspecter l’élément”. L’outil de
développement doit vous présenter le code HTML et vous
positionner directement sur <p>Il y a ....
Les balises communes du HTML
Les commentaires en HTML

Il est possible de rajouter des commentaires dans le HTML.


Ces commentaires ne sont pas interprétés par le navigateur, et
ne sont donc pas affichés (mais ils restent présents dans le
code source). Il s’agit donc d’informations laissées par des
développeurs pour des développeurs. On les place entre les
balises <!-- et --> :
<!--Cela est un commentaire dans un fichier HTML -->

Il y a justement des commentaires dans le


fichier index.html, comme autant de consignes afin de les
remplacer par du HTML. Nous expliciterons ces dernières
dans les sections suivantes.
Titres

Nous allons commencer par rajouter de la structure à notre


page. Pour ce faire nous allons utiliser les balises à
contenu <h1> à <h6> pour identifier les différentes sections :
 <h1> est utilisé pour les gros titres du document
 <h2> est utilisé pour les sections du document
 <h3> est utilisé pour les sous-sections du document et
ainsi de suite.
Par exemple, le titre ci-dessus est obtenu avec le code suivant :
<h2>Titres</h2>
1. Vérifier que le titre Titres juste au-dessus est bien
un <h3> à l’aide des outils de développement en faisant
un clic droit dessus.
2. Ajoutez la balise <h2> aux éléments
de index.html marqués par les commentaires : <!--
section -->.
3. Ajoutez la balise <h3> aux éléments
de index.html marqués par les commentaires : <!--
sous section -->.
4. Retestez la conformité de votre document.
Éléments de regroupement

Paragraphes

Utilisez maintenant les balises <p> et </p> autour des


paragraphes du document. Les paragraphes vous sont signifiés
par <!--début paragraphe --> et <!--fin
paragraphe -->.

Note : Si vous faites un clic droit suivit de “inspecter


l’élément” sur ce paragraphe, vous verrez justement que ce
texte est dans un paragraphe.
Listes

En HTML nous pouvons faire des listes ordonnées


(numérotées) ou non ordonnées :
<ul> <!-- ul pour unordered list -->
<li>premier item non ordonné</li> <!-- li pour list item -->
<li>deuxième item</li>
</ul>
<ol> <!-- ol pour ordered list -->
<li>premier item ordonné</li>
<li>deuxième item</li>
</ol>

Ce qui donne une fois interprété par le moteur de rendu du


navigateur :
 premier item non ordonné
 deuxième item
1. premier item ordonné
2. deuxième item
1. Utilisez les balises <ul> et <li> pour structurer la liste
à puces <!--liste --> dans index.html.
(Ne vous souciez pas encore des commentaires <!--
lien externe -->)
2. Utiliser les balises <ol> et <li> pour structurer la liste
numérotée <!--liste numérotée --
> dans index.html.
3. Retestez la conformité de votre document. (En fait vous
devriez le tester régulièrement de vous même, mais on
vous tient par la main pour ce premier TD)
Image : un exemple d’élément embarqué

Pour insérer une image, on peut utiliser la balise


<img src="adresse_image" alt="texte alternatif mais obligatoire">

Cette balise n’a pas de balise fermante car elle ne peut avoir
de contenu (cf. le début du TD). On remarque qu’elle possède
deux champs src et alt que l’on appelle les attributs de la
balise. Les attributs se trouvent toujours dans la balise
ouvrante.
Précédemment, on avait vu une autre balise avec un attribut :
quelle était cette balise ?
L’attribut src doit contenir l’adresse de l’image.
L’attribut alt permet d’ajouter un texte alternatif pour les
navigateurs ne pouvant les afficher (navigateur textuel Lynx)
ou pour les personnes ne pouvant pas bien les distinguer
(aveugles ou déficits visuels légers). Attention,
l’attribut alt est obligatoire.
1. Enregistrez l’image chuck-jeune.jpg dans un
répertoire images par rapport à votre
fichier index.html.
2. Remplacez le commentaire <!--l'image de Chuck
Young doit être positionnée ici --> par la
balise <img> suivante
3. <img src="./images/chuck-jeune.jpg" alt="Une photo de Chuck Jeune, la
légende est en marche.">

Note : L’adresse ./images/chuck-jeune.jpg est


une adresse relative. Le point signifie “le dossier de la
page Web courante”. Donc on va aller chercher l’image
dans le dossier images du répertoire contenant la page
Web index.html.
4. Faites de même avec l’image beware.jpg à positionner
en lieu et place du commentaire <!--l'image de
Chuck Beware ici -->.
5. Devinez quoi ? Il faut retester la conformité de votre
document.
Éléments sémantiques

Liens externes

L’un des éléments les plus emblématiques du HTML est sans


doute la balise <a>. Elle permet de faire des liens hypertextes
(le HT dans HTML).
Un lien est composé principalement d’une URL cible et d’un
libellé (le texte cliquable souvent souligné en bleu) :
<a href="http://urlcible">le libellé</a>
On peut renseigner l’URL complète de la cible (URL en
chemin absolu), par exemple :
<a href="http://lynx.browser.org/">Lynx</a>

ou donner une adresse relative à la page courante (URL en


chemin relatif), par exemple :
<a href="./images/chuck-jeune.png">Image</a>

1. Remplacez les commentaires <!-- lien


externe ... par des balises <a> avec la bonne
adresse.
2. Testez la conformité …
Liens internes

On peut rajouter à ces liens externes une partie lien


interne basée sur les ancres #monancre. Toutes les balises
peuvent prendre un attribut id comme dans l’exemple
suivant. Attention, la valeur de cet attribut doit
être unique dans le document.
<h2 id="un_identifiant">

On peut alors faire un lien vers cette balise en


rajoutant #un_identifiant à la fin de l’URL. Par exemple,
voici un lien vers la balise
d’identifiant un_identifiant interne à la page Web
courante index.html :
<a href="index.html#un_identifiant">Exemple de lien interne</a>

On peut raccourcir l’URL comme suit. Si on n’indique pas le


document, c’est que l’on pointe vers le document courant par
défaut.
<a href="#un_identifiant">Exemple de lien interne</a>
1. Remplacez le commentaire <!-- lien
interne ...--> de index.html par une
balise <a> qui pointera sur l’une des premières balises.
Vous aurez donc besoin de rajouter un identifiant à
cette balise cible.
2. Testez vos liens en cliquant dessus. Ils doivent vous
emmener sur la balise dont l’identifiant correspond.
3. Testez la conformité …
Emphase

La balise <em> permet de mettre en évidence des passages


importants dans un texte.
Justement, il faut mettre en exergue le fait que Chuck Norris
est très fort dans différents arts martiaux. Pour cela il faut
mettre en emphase la phrase qui suit le commentaire : <!--
mettre en emphase cette phrase --> dans le
fichier index.html.
Note : Il existe un autre type d’emphase qui s’obtient avec la
balise <strong>.
Citation

Voici un magnifique exemple de citation :


Un biscuit ça n’a pas de ‘spirit’, c’est juste un biscuit. Mais
avant c’était du lait, des oeufs. Et dans les oeufs, il y a la vie
potentielle.
Jean-Claude Van Damme
Les citations permettent d’identifier un court texte sur lequel
on veut attirer l’attention. Cela est utilisé notamment pour
montrer qu’on a du ‘spirit’.
1. Allez voir le code source de notre citation à l’aide des
outils de développement. Quels sont les
deux nouvelles balises utilisées ?
La première balise (qui commence par un b) entoure la
citation complète tandis que la deuxième (qui
commence par un c) contient uniquement la référence
(l’auteur, le livre, …).
2. Utilisez ces deux balises pour mettre en avant la citation
en tout début de document (rechercher <!--
utiliser blockquote ici -->).
3. Avez-vous vérifié tout au long du TD que votre page
HTML reste valide ?
Fini !
Nous en avons fini en ce qui concerne le contenu et la
structure de notre site. Nous savons ajouter de la structure à
une page HTML avec des balises spécifiques.
Dans la partie 2 de ce TD, nous verrons comment améliorer
l’aspect du site.
Remarque : Pourquoi le fait de rajouter <h1> à un titre
change effectivement l’apparence des titres ? Cela n’est pas à
la charge du CSS justement ?
En fait, les navigateurs appliquent des styles CSS par défaut à
certaines balises HTML. Par exemple, les liens <a> sont en
bleus et soulignés sans que l’on ait rien à faire. Cela évite
d’avoir justement TOUT à refaire en CSS : le navigateur
propose un style par défaut.
Romain Lebreton, Sébastien Gagné, Jean-Phillipe Prost et Rémi Rabatel 2017,
licensed under CC-BY-SA 4.0.
Source code available on GitHub, static Website generated with Jekyll and kindly hosted
by GitHub. Structure of the website by Luca De Feo

TD1 Partie 2 – Les bases du


CSS Un langage de mise en page
Les standards définissant le CSS sont publiés par le World
Wide Web Consortium (W3C) à
l’adressehttp://www.w3.org/Style/CSS/.
Cascading Style Sheets (CSS) est un mécanisme simple pour
ajouter du style (exemple fonte, couleurs, espace) à un
document web.
W3C
Le CSS est responsable du rendu du site sur votre écran, mais
aussi sur smartphone et des impressions papier (des ensembles
de règles CSS peuvent être spécifiés pour chacun de ces
médias).
Savoir les bases du CSS est relativement facile et
indispensable pour qui veut travailler dans les métiers du Web.
En maîtriser tous les aspects est un métier (celui d’intégrateur
Web, qui traduit en HTML et CSS le travail du Web-
designer).
Tutoriel d’introduction
Voici un exemple de règle CSS
h3 {
font-style:italic;
color:blue;
}
Cette règle CSS donne à toutes les balises <h3> le style
italique et défini comme couleur de texte le bleu.
Une règle CSS est composée de deux parties:
 un sélecteur CSS qui indique à quels éléments HTML
s’applique le style. Dans notre exemple, le
sélecteur h3 signifie que nous allons appliquer le style
suivant à toutes les balises HTML <h3> ;
 un bloc de déclarations composé de plusieurs paires
propriété CSS / valeur. Dans notre exemple, le bloc
contient deux déclarations :
1. nous donnons la valeur italic à la propriété
CSS font-style;
2. nous donnons la valeur blue à la propriété
CSS color.
Mettons en place nos règles CSS :
1. Nous allons travailler principalement sur ce TD sur un
fichier styles.css. Créer un fichier texte
vide styles.css dans un nouveau répertoire css/.
Nous déclarerons dans ce fichier des règles CSS.
2. Copiez dans styles.css le style ci-dessus h3 { ...
}.
Ouvrez la page index.html et remarquez que le style
ne s’est pas appliqué car nous n’avons pas encore lié le
HTML avec le CSS.
3. Dans le fichier index.html, ajouter la ligne suivante
dans l’en-tête du document HTML (dans la
partie head) :
4. <link rel="stylesheet" type="text/css" href="css/styles.css">

Cette ligne permet de charger le fichier de style


CSS styles.css et de l’appliquer à la page Web.
5. Réouvrez la page index.html et notez que le style est
désormais appliqué.
Nous allons vous présenter quelques propriétés CSS et la
façon de concevoir des sélecteurs.
Les outils de développement sont vos amis
Pour la partie HTML, les outils de développement étaient déjà
vos amis ; pour le CSS, ils sont promus au grade de “best-
friend-forever”. Sélectionner un élément HTML avec les
outils de développement ne permet pas seulement de voir les
règles CSS appliquées à ce dernier, il permet aussi de
les changer. Autant dire qu’il est conseillé d’abuser de cet
outil pendant le TD pour bidouiller tout et n’importe quoi.
1. Inspectez avec les outils de développement ( F12) l’un
des textes en rouge. Dans la colonne de droite, vous
voyez les styles CSS appliqués à cette balise.
2. Désactiver la déclaration color:#d00 et remarquez le
changement.
3. Remarquez que vos changements disparaissent quand
vous rafraîchissez la page (F5). En effet, il faut les
reporter dans la feuille de style pour les sauvegarder.
Commentaires
En CSS, seuls les commentaires avec /* et */ sont autorisés.
Si vous utilisez // dans votre fichier styles.css vous allez
avoir des problèmes (les règles CSS suivantes ne seront pas
appliquées).
Commentez la règle CSS h3 { ... } dans styles.css et
remarquez que les titres <h3> ne sont plus en bleu ni en
italique.
Quelques propriétés CSS
Comme dit précédemment, les blocs de déclarations
comportent plusieurs déclarations de la
forme proprieteCSS:valeur;. Nous présentons ici
quelques exemples de propriétés CSS et de valeurs associées.
Couleurs

Les couleurs peuvent s’utiliser sur plusieurs attributs d’un


élément HTML :
 la couleur du texte : color:red;
 la couleur du fond : background-color:blue;
 la couleur de la bordure : border-color:yellow; …
Les 16 mots clés suivants peuvent être utilisés pour définir une
couleur : aqua, gray, navy, silver, black, green, olive,
teal, blue, lime, purple, white, fuchsia, maroon, red,
yellow. Ils ont été choisis pour désigner 16 couleurs bien
réparties comme le montre le diagramme suivant :
.
Le CSS3 les a complétés par 147 mots-clés de couleurs que
vous pouvez retrouver à l’adressehttp://www.w3.org/TR/css3-
color/#svg-color.
Vous pouvez être plus précis et accéder aux 16 millions de
couleurs que peut afficher un écran en donnant les
valeurs R, V et B en hexadécimal des composantes Rouge,
Verte et Bleue respectivement de la couleur. Cela s’écrit avec
le format #RRVVBB (ou #RVB qui est un raccourci). Par
exemple :
 #000000 est noir,
 #FFFFFF est blanc,
 #F00, qui est un raccourci pour #FF0000, est rouge,
 #FF00FF est rose, que l’on peut aussi accéder avec le
mot clé pink.
Remarque : Vous pouvez utiliser le site
Web http://www.colorpicker.com/ pour trouver facilement le
code #RRVVBB de n’importe quelle couleur.
Dimensions

Certains éléments peuvent avoir une taille définie par CSS,


d’autres épousent la place minimale nécessaire à leur rendu.
L’unité absolue de mesure la plus utilisée est le “pixel
CSS” px. Cette unité correspond souvent avec les pixels
physiques de l’écran mais avec certaines subtilités :
1. les navigateurs actuels permettent de zoomer, ce qui a
pour effet d’afficher un “pixel CSS” sur plusieurs pixels.
2. certains médias comme l’imprimante ne disposent pas de
pixels ; le pixel CSS est alors défini comme une échelle
permettant une bonne lisibilité sur le média.
Les dimensions sont utilisées sur différentes parties d’un
élément. Par exemple, les propriétés
CSS width et height permettent de forcer respectivement la
largeur et la hauteur d’un élément (ici les balises <img>) :
img {
width:50px;
height:100px;
}

On peut aussi donner des dimensions relatives en


pourcentages ; width:50% va diminuer de moitié la largeur
par rapport à celle qui aurait été calculée normalement.
Référence : Pour plus de détails sur les unités
disponibles http://www.w3.org/TR/css3-values/#absolute-
lengths
Fontes
Nous allons lister ici les propriétés les plus utilisées sur les
fontes :
1. font-size : Cette propriété permet de définir la taille de
la police. Exemple :
2. font-size:12px;

3. font-weight : Cette propriété permet de passer en


mode gras. Exemple :
4. font-weight:bold;

5. font-style : Cette propriété permet de définir le style


de la fonte (i.e. italique ou non). Exemple :
6. font-style:italic;

7. font-family : Cette propriété permet de choisir la fonte


que vous souhaitez utiliser. Exemple :
8. font-family: "Lucida Sans Unicode", "Arial", "sans-serif";

Important : Les deux dernières fontes précisées par la


règle sont des fontes de secours (fallback) : elles seront
utilisées si et seulement si les précédentes ne sont pas
disponibles sur le navigateur. Quelques fontes classiques
sont répertoriées
sur http://www.w3schools.com/cssref/css_websafe_fonts.
asp.
Importer de nouvelles fontes : Vous pouvez associer à votre
page Web de nouvelles fontes à l’aide de la règle @font-
face. Exemple :
@font-face {
font-family: myFontName;
src: url(path/to/font/font.otf);
}

Si vous souhaitez en savoir plus, allez


sur https://developer.mozilla.org/fr/docs/Web/CSS/@font-
face. Voici deux sites pratiques pour télécharger de nouvelles
fontes
: http://www.1001fonts.com ethttp://www.fontsquirrel.com.
Référence
: http://www.w3.org/TR/CSS21/fonts.html et http://www.w3.o
rg/TR/css-fonts-3/.
Textes

Nous allons lister ici les propriétés les plus utilisées


concernant l’affichage des paragraphes de texte :
1. text-align : Cette propriété affecte l’alignement des
lignes de texte. Exemple :
2. text-align:center; /* ou left, right, justify */

Pour rappel, un paragraphe justifié est un paragraphe où


les lignes s’arrêtent à la marge à droite et à gauche.
3. line-height : Cette propriété permet d’espacer
verticalement les lignes de texte. Exemple :
4. line-height:150%;

5. text-indent : Cette propriété indente la première ligne


du texte, c’est-à-dire qu’elle la décale horizontalement.
Exemple :
6. text-indent:12px;

Si l’on donne un pourcentage comme valeur de text-


indent, celui-ci est compris comme un pourcentage de
la largeur de l’élément parent.
Exercices

1. Couleurs : Le fond de notre page est tout blanc par


défaut. Nous allons changer cela en donnant
au <body> la couleur qu’a choisi le graphiste / Web-
designer : #838892.
2. Dimensions : plusieurs études (cf. 1 et 2 ) suggèrent que
des lignes trop longues ou trop courtes nuisent gravement
à la lisibilité d’un site. Pour traiter grossièrement le
problème, limitez la largeur de
l’élément <body> à 600px.
3. Les titres des sections doivent avoir leur texte centré.
4. le texte doit être aéré : utiliser une hauteur de ligne
de 150%.
5. Chaque paragraphe doit être indenté de 5px.
6. Allez chercher une fonte de votre choix
sur http://www.fontsquirrel.com. Liez-là à votre
document avec la règle @font-face. Appliquez-la aux
titres de section <h2> en n’oubliant pas de mettre des
fontes en fallback (fonte de recours).
Attention : Ne mettez pas d’espaces dans le nom de
votre fonte, ou sinon entourez-là avec des guillemets.
7. Le CSS est un standard au même titre que le HTML.
Testez la conformité de votre fichier CSS avec le
validateur https://jigsaw.w3.org/css-validator.
Les sélecteurs CSS de base
Les sélecteurs CSS permettent de préciser les éléments qui
vont être impactés par la règle CSS. Ils sont aussi utilisés sur
d’autres problématiques du développement Web que nous
verrons l’année prochaine. Bref vous en aurez au partiel, c’est
sûr.
Comme vous le savez depuis le TD1 HTML une balise peut
prendre des attributs. Deux attributs sont très importants pour
les règles CSS : l’identifiant id et la classe class d’une
balise.
Par exemple :
<h2 id="monidentifiant" class="skill feature">...</h2>

Ce code HTML déclare une balise HTML <h2> avec comme


identifiant unique monidentifiant et ayant deux
classes : skill et feature. Attention, un identifiant est
unique pour toute la page HTML. Un élément peut avoir
plusieurs classes comme dans l’exemple précédent et ces
classes sont faites pour être attribuées à de multiples éléments
de la page.
Les classes, identifiant et le type des balises permettent de
construire 95 % des sélecteurs CSS de base. Voyons la
syntaxe pour les utiliser.
Les sélecteurs de balises

Il s’agit juste d’utiliser le nom de la balise (a, p, img,…) sans


autre décorateur. Si on veut donner la couleur rose à tous les
liens d’une page, il faut écrire
a {
color: purple ;
}

Les sélecteurs d’identifiant

Le décorateur associé à l’identifiant est le caractère '#'. Si on


veut donner une largeur de 100px à l’unique balise
d’identifiant monidentifiant, il faut écrire
#monidentifiant {
width: 100px;
}

Les sélecteurs de classes

Le décorateur associé aux classes est le caractère .. Si on veut


donner une hauteur de 200px à tous les éléments qui ont la
classe skill, il faut écrire
.skill {
height: 200px;
}

Exercices
Tout va principalement se passer dans styles.css.
1. Conformément à la maquette du designer target.png, il
faut alterner comme couleurs de fonds pour les titres des
sections les valeurs #5BBDBF et #FF5850. Pour cela il
nous faudra rajouter une classe “pair” et “impair” aux
éléments h2 et h3 et leur associer le style adéquat
dans styles.css.
2. L’image beware.jpg a du style, mais elle prend un peu
trop de place : limitez sa hauteur à 300px.
Attention : la limite de 300px doit s’appliquer seulement
l’image beware.jpg et pas à chuck-jeune.jpg.
Comment faire ?
3. On veut mettre en avant les innombrables arts martiaux
4. que maîtrise Chuck Norris. Pour ce faire :
i. on va entourer chacun de ces arts martiaux
(Taekwondo, Ju-Jitsu, …) d’une balise <span> avec
la classe skill dans le fichier HTML.
ii. D’un autre côté, il faut créer dans le CSS la règle qui
associe à tous les éléments ayant la classe skill la
mise en page suivante : texte en rouge et en italique
(ou ce qui vous fait plaisir).
5. Testez la conformité de votre fichier CSS avec le
validateur https://jigsaw.w3.org/css-validator.
Remarques finales
Le CSS et HTML : des rôles bien distincts et complémentaires

Il y a une séparation claire entre les rôles du HTML (Contenu


avec des balises pour donner du sens ) et des CSS
(présentation / mise en page). Ce choix n’est pas évident au
premier abord : par exemple votre document “Word” ne
sépare pas la présentation du contenu. Mais cette séparation
est indispensable et très puissante :
 Elle permet de réutiliser une présentation d’une page à
l’autre. Par exemple quand lemonde.fr publie un nouvel
article, il ne refait pas le style expressément pour ce
dernier: il s’agit d’un nouveau document HTML
partageant le même CSS que les articles précédents ;
 Elle permet de refaire un site Web en se concentrant sur
les CSS sans (trop) toucher au HTML ;
 Elle permet de changer la présentation d’un document
suivant s’il est destiné à l’impression ou à être visualisé
avec un navigateur.

Romain Lebreton, Sébastien Gagné, Jean-


Phillipe Prost et Rémi Rabatel 2017, licensed under CC-BY-SA 4.0.
Source code available on GitHub, static Website generated with Jekyll and kindly hosted
by GitHub. Structure of the website by Luca De Feo

Les formulaires

Introduction
Nous allons ajouter un formulaire d’inscription à notre site de
fans de Chuck Norris, en utilisant la balise <form>. Cette
balise <form> nous permettra d’avoir des réponses à des
questions des plus ouvertes (“Que voulez-vous dire à
Chuck ?”) aux plus fermées (“Parmi ces trois choix quel est
votre sport favori ?”, “Quel est votre sexe ?” … ). Il y a
beaucoup de types de questions, correspondant chacune à un
type de balises<input> ou <textarea> que nous verrons par
la suite.
La balise <form> et les balises <input>
Le coeur du formulaire est constitué par deux types de
balises: <form> et <input>.
La balise <form> délimite le contenu du formulaire et
renseigne plusieurs attributs nécessaires au fonctionnement du
formulaire:
 method: nom de la méthode HTTP utilisée pour envoyer
les données. Peut prendre pour valeur postou get :
o get envoie les données comme composantes de

l’URL du serveur et requiert par conséquent que :


1. les données soient encodées pour être
compatibles avec les spécifications URL,
2. l’ensemble des données du formulaire plus
l’URL du serveur forment une chaîne de
caractères de moins de 2000 caractères (limite
imposée par certains navigateurs).
o post envoie les données dans le corps de la requête

HTTP et ne présente pas la limitation de taille, elle


est donc à privilégier.
 action : URL du serveur où les données du formulaire
doivent être envoyées.
La balise <input> permet de définir différents champs dans
lesquels l’utilisateur peut entrer des données. Ces champs
offrent plus ou moins de liberté d’expression selon le type
utilisé. La balise <input> a pour attributs:
 type : définit l’apparence visuelle du champ et la nature
des données qui peuvent y être renseignées.
 value : la valeur envoyée au serveur. Si elle est déjà
renseignée lors de la création du formulaire, elle fait
office de valeur par défaut.
 name : le nom que prendra la donnée envoyée au serveur.
Si l’input a pour name “firstname” et pour valeur “Éric”,
dans le cas d’une method get l’URL lors la soumission
du formulaire contiendra ‘firstname=Éric’ et si la
méthode est post ces valeurs seront transmises via les
champs Form Data de la requête HTTP.
Afin de pouvoir être envoyé, votre formulaire doit
obligatoirement contenir une balise <input> avec
l’attribut type fixé à “submit”. Cette balise définit le bouton
qui déclenchera l’envoi des données au serveur lorsque l’on
cliquera dessus.
Nous allons voir comment est envoyée la valeur
d’un <input> lorsque l’on soumet un formulaire.
1. Créez une nouvelle page inscription.html au site
de Chuck Norris. Cette page va contenir le formulaire
d’inscription au fan-club de Chuck que nous allons
construire dans ce TD.
2. Ajoutez à la page inscription.html le formulaire
suivant :
3. <form action="sendToMySecondYearInIut.php" method="post">
4. <input name="uname" type="text" >
5. <input type="submit" value="Envoyer">
6. </form>

7. Sous Chrome relativement récent uniquement :


Affichez la page et ouvrez la console (F12) pour aller
sur l’onglet ‘Réseau’, cocher la case “Preserve log”,
donnez la valeur dupont au champ texte, puis cliquez
sur le bouton “Envoyer” du formulaire. Vous devez voir
une requête
contenantsendToMySecondYearInIut dans la
console. Cliquez sur cette ligne et cherchez la
valeur dupontdans les détails de la transaction.
8. Donnez à l’attribut method du formulaire la
valeur get. Cliquez sur le bouton “Envoyer” du
formulaire, l’URL doit maintenant finir par
“sendToMySecondYearInIut.php?uname=dupont”.
Note : il est normal que
l’URL sendToMySecondYearInIut.php n’existe pas (le
fameux code de retour HTTP 404 apparaît dans la console),
puisque vous êtes en première année. Nous verrons en
deuxième année dans le cours “Programmation Web - Côté
Serveur” comment le serveur peut récupérer les données
envoyées par notre formulaire et les traiter.
La balise <label>
Il serait bien de préciser à l’utilisateur à quoi notre
champ <input> fait référence. La balise <label>permet
d’associer la question sous-tendue (“Nom?”) à l’input. Cette
balise comporte un attribut for qui doit prendre pour valeur la
valeur de l’attribut id du champ auquel est associé
le label (il faut donc penser à donner un id à
notre <input>).
1. Remplacez le code de votre champ <input> par le
code suivant :
2. <label for="surname">Nom</label>
3. <input id="surname" name="uname" type="text">

4. Rajoutez au formulaire une entrée qui correspondra au


prénom (calqué sur l’exemple précédent).
5. Validez ce dernier et vérifiez que vos deux champs sont
bien présents dans l’URL du navigateur (l’URL doit
finir par sendToMySecondYearInIut.php?
uname=dupont&firstname=super et la methoddu
formulaire doit toujours être get).
6. Les deux champs apparaissent les uns à la suite des
autres. Avec quelle balise vue dans le TD précédent
peut-on les englober pour qu’il y est un saut de ligne
entre les deux ?
Les principaux types de balises <input>
Il existe un assez grand nombre de types d’input :
 Le type radio permet de ne sélectionner qu’une seule
des options possibles.
 Le type checkbox (case à cocher) permettent de
sélectionner autant des options que l’utilisateur le
souhaite.
 Le type password masque automatiquement les
caractères entrés.
 Les types email, URL, tel, date, time et number, etc.
permettent d’adapter le clavier virtuel quand la page est
affichée sur un smartphone. Suivant le navigateur, une
présentation différente peut être associée. Des validateurs
sont associés à ces champs (nous le verrons plus loin),
une valeur de champ email doit par exemple contenir un
“@”.
A l’aide de w3schools, ajoutez dans le formulaire
les <input> libellés :
1. “Sexe” avec les deux valeurs que vous connaissez.
2. “Date de naissance” avec le type d’input date.
3. “Mot de passe” avec le type d’input password.
4. “Email” avec le type d’input de type … email.
5. “Niveau en karaté” avec le type d’input number allant
de 0 à 5.
6. “Niveau d’engagement” avec un choix parmi trois
valeurs libellées “Basique (5 €) “, “Gold (15 €)” et
“Tatane in your face (50 €)”.
7. “J’ai bien lu les clauses que je n’ai pas lues” associé à
une case à cocher.
8. Vérifier par envoi du formulaire que tous les champs
sont bien renseignés, on rappelle que c’est
l’attribut name de l’input qui est utilisé.
9. Faite en sorte qu’il y ait un saut de ligne entre
chaque <input> (comme dans le dernier exercice de la
section précédente).
Notes :
 Certains de ces inputs sont issus de la norme HTML5. De
fait leurs adoptions au sein des navigateurs n’est pas
uniforme. Les développeurs web peuvent être amenés à
demander la nature du parc informatique cible du site
web qu’ils doivent implémenter (en clair ils demandent :
“quelle est la version d’Internet Explorer encore en cours
sur votre parc ?”). Le site caniuse.com permet ensuite de
savoir si nous pouvons utiliser tel ou tel aspect pour la
réalisation d’un site. Les types date et time par exemple
sont plus ou moins bien supportés par les navigateurs. Le
type number l’est un peu plus. Vous pouvez constatez
quelques différences d’apparence dans votre formulaire
suivant si vous êtes sur Chrome, Firefox, Internet
Explorer ou Edge.
 A propos du mot de passe, remarquez que ce dernier
apparaît en clair dans l’URL si vous êtes en getlors de
l’envoi via à sendToMySecondYearInIut.php.
Définitivement donc, un envoi avec post doit être
privilégié, même si cela n’augmente pas vraiment la
sécurité puisque le mot de passe transite toujours en clair
sur le réseau (utilisez l’onglet Réseau comme dans
l’exercice 1 pour le voir).
La balise <select>
Voyons maintenant un autre élément important d’un
formulaire, correspondant à la balise <select>. Il permet de
choisir parmi un ensemble de valeurs présentées par un menu
déroulant. Tout comme <input>, cet élément peut aussi être
libellé via un <label>. La liste déroulante permet de base de
ne sélectionner qu’une option. Plusieurs options peuvent être
sélectionnées si l’attribut multiple est ajouté à la
balise <select>. Des groupes de choix peuvent être proposés
avec la balise <optgroup>.
A l’aide de developer.mozilla.org, ajoutez dans le formulaire
les <input> libellés :
1. Ajoutez un <select> libellé “Pays d’origine” qui
prend comme valeur de
pays U.S.A , France, Chineet Viêt Nam,
les values associées ne doivent pas dépendre de la
langue du formulaire (la valueassociée à France doit
être fr par exemple). L’utilisateur ne peut pas
sélectionner plusieurs valeurs, le pays sélectionné par
défaut est la France (indépendamment de l’ordre des
balises <option> dans le HTML).
2. Ajoutez à la suite de ce champ un autre sélecteur libellé
“Arts-martiaux préférés”. Les valeurs sont “Kung fu” ,
“Karaté” et “Full-contact”. L’utilisateur peut
sélectionner plusieurs valeurs.
La balise <textarea>
La balise <textarea> permet de proposer une grande zone
de texte pour que l’utilisateur puisse s’exprimer.
1. Ajoutez un champ à votre formulaire libellé “Message
pour Chuck” associé à un <textarea> sur lequel
l’utilisateur peut s’épancher.
La balise <fieldset>
La balise <fieldset> permet de regrouper visuellement
différents champs <input>.
A l’aide de cette page, regroupez les champs sur ces trois
grands axes suivant :
 “Informations personnelles” (contenant “Nom”,
“Prénom”, “Email”, etc.),
 “Les sports de combat” (contenenant “Sport de combat

préféré”” et “Niveau en karaté”),


 “Inscription” (contenant “Message personnel à Chuck”,

“Mot de passe”, la coche “J’ai bien lu..”, “Niveau


d’engagement’, etc.).
Ergonomie et convivialité
Navigation

Pour les utilisateurs avancés, la navigation à l’aide de la


touche “tabulation” permet de parcourir très vite le formulaire.
L’attribut “autofocus” permet de spécifier au navigateur quel
élément du formulaire doit avoir le focus quand la page est
chargée. L’attribut “tabindex” permet de spécifier l’ordre dans
lequel les éléments sont parcourus en appuyant sur
“tabulation”.
 Vérifiez que vous pouvez accéder à tous les champs avec
la touche tabulation. Modifier l’ordre de tabulation avec
la propriété “tabindex”.
Convivialité

Quelques attributs permettent d’améliorer la convivialité des


champs de votre formulaire:
 placeholder: permet d’afficher une ligne de texte dans
le champ qui disparaît dès lors que l’utilisateur tape une
information. Cela permet de donner à l’utilisateur des
renseignements sur le contenu attendu. À utiliser
impérativement avec les champs pour lesquels vous avez
spécifié un “pattern”, sous peine de cause une extrême
frustration à l’utilisateur. Vous devez alors utiliser
l’attribut placeholder pour spécifier le format attendu,
les caractères interdits/autorisés, etc.
ex: placeholder=“Entrez votre nom ici.”
 checked / selected : pour les types “radio” et
“checkbox”, et pour <option> respectivement. Cet
attribut permet de spécifier que l’option en question est
sélectionnée/cochée par défaut. Utile quand vous savez
que l’une des options sera utilisée beaucoup plus
fréquemment que les autres. Vous épargnez alors du
temps à l’utilisateur.
1. Ajouter un placeholder de valeur
“[email protected]” au champ Email.
2. Ajoutez un attribut placeholder dans
le <textarea> avec le texte suivant “Un inscrit sera
tiré au sort, et verra son message transmis à Chuck
Norris.”
3. Faite en sorte que le pays sélectionné par défaut dans
“Pays d’origine” soit la France (et cela
indépendamment de l’ordre des balises <option> dans
le HTML).
Note : Il existe depuis peu un pseudo attribut
css ::placeholder, mais celui-ci est moins bien supporté
que l’attribut.
Contrôle du contenu

La sécurité de votre serveur et de vos utilisateurs impose que


vous contrôliez toujours au niveau du serveur les données
entrées (cf. cours l’an prochain). Toutefois, le contrôle par le
serveur demande que les données soient envoyées, que le
serveur teste, puis réponde ; l’opération peut être longue.
Afin d’éviter une attente inutile aux utilisateurs de votre
formulaire, vous pouvez demander au navigateur d’effectuer
directement certains tests de validation, afin de prévenir les
erreurs courantes (ex: mauvais numéro de téléphone, mauvaise
date…). Attention: cela ne vous dispense quand même pas de
procéder aux vérifications côté serveur ! Deux attributs
permettent de vérifier le contenu du formulaire:
 required: spécifie que le champ doit être
obligatoirement rempli. Attribut à ajouter à tous les
champs dont la légende comporte une *
 pattern: attribut spécifique aux champs “libres”, il
permet de spécifier une expression régulière. Cette chaîne
de caractère au format particulier indique au navigateur
tous les formats d’entrée autorisés pour le champ et le
navigateur refusera d’envoyer le formulaire si un champ
n’est pas correctement rempli. Par exemple, un “pattern”
égal à 0[1-9](\.\d{2}){4} permettra de s’assurer
qu’un numéro de téléphone respecte bien les règles de
numérotation françaises, tandis que le pattern [a-z0-
9._-]+@[a-z0-9.-]+\.[a-z]{2,4} bloquera les
erreurs d’adresse email les plus grossières. Vous
trouverez de nombreux exemples de patterns utilisables
dans ce cas du HTML5pattern.
Note : les patterns HTML sont automatiquement évalués
contre la totalité de l’entrée. Il est donc inutile de les
encadrer entre ^ et $ comme une expression régulière
classique.
1. Rendre la coche “J’ai bien lu les clauses que je n’ai pas
lues” obligatoire. Vérifiez si l’envoi du formulaire est
bien impossible alors.
2. Rendre aussi les champs “Nom” “Mot de passe” et
“Email” obligatoires.
3. Par convention d’usage, le nom des champs obligatoires
est suivi d’une “*”. Ajoutez la aux labels
des <input> obligatoires.
4. Ajoutez au champ password un pattern pour que ne soit
accepter que des caractères de l’alphabet latin ou
numériques.
5. Faites en sorte que le mot de passe acceptable soit
d’une longueur de 8 caractères minimum.
Note : Pour être toujours protégé contre les bugs lorsque vous
cogitez sur une expression régulière, ne sortez jamais sans
votre Regulex. Regulex, le visualisateur de machine d’état
qu’il vous faut pour vos expressions régulières.
Romain Lebreton, Sébastien Gagné, Jean-Phillipe Prost et Rémi Rabatel 2017,
licensed under CC-BY-SA 4.0.

Source code available on GitHub, static Website generated with Jekyll and kindly hosted
by GitHub. Structure of the website by Luca De Feo

Vous aimerez peut-être aussi