Cours de Développement Web
Rappels HTML5/CSS3
Frédéric Flouvat
Université de la Nouvelle-Calédonie
frederic.flouvat@univ-nc.nc
HyperText Markup Language (HTML)
<!DOCTYPE html>
<html lang="fr">
<head>
<title>mon titre</title>
</head>
<body>
<p>Voici ma première page</p>
</body>
</html>
Un couple de balises encadrant un texte lui donne une signification
particulière pour l'interprétation
Notion de balises ouvrantes (<nom_balise>) et fermantes (</nom_balise>)
• première ouverte, dernière fermée
2
Structure d'une page HTML
<html> … </html> encadre tout le document HTML
<body> … </body> encadre le contenu
<head> … </head> encadre le titre et les méta-informations de la page
• méta-informations utilisées par exemple par les moteurs de recherche
<!DOCTYPE html>
<html lang="fr">
<head>
<title>mon titre</title>
<meta name="keywords" content="cours, html, essai" />
<meta name="description" content="Accueil" />
</head>
…
</html>
Les commentaires sont délimités pas <!-- et -->
3
Ajouter du texte dans la page
<!DOCTYPE html>
<html lang="fr">
<head>
<title> Ma page personnelle </title>
<meta name="keywords" content="page perso, flouvat, calédonie, université" />
<meta name="description" content="Page personnelle de Frédéric Flouvat" />
</head>
<body>
<p>Bienvenu sur ma page personnelle !
Je suis maître de conférence en informatique à l'Université de la Nouvelle-
Calédonie depuis le 1er septembre 2008.
</p>
</body>
</html>
<p>texte</p> texte forme un paragraphe (saut de ligne avant et après)
Certains caractères doivent être codés < <
> >
par des mots-clés & &
" "
4
Problèmes avec les caractères spéciaux (accents,
cédilles...)
Dans certains cas, on peut obtenir l'affichage suivant
alors que le code HTML est correcte …
5
Problèmes avec les caractères spéciaux (accents,
cédilles...)
Ø Problème de reconnaissance de l'encodage du fichier
• avec quel genre de caractères le fichier a-t-il été écrit ?
• p.ex. Windows = Windows-Latin 1, MacOs = MacOS Roman
Ø Définir l'encodage du fichier dans les méta-informations du document HTML
<!DOCTYPE html>
<html lang="fr">
<head>
…
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
…
</body>
</html>
6
Ajouter des titres et des listes
<body>
Titres: <h1>Frédéric Flouvat</h1>
• <h1>texte</h1> gros titre <p> Laboratoire ISEA<br />
• <h2>texte</h2> plus petit que h1 Université de la Nouvelle-Calédonie <br />
email: frederic[dot]flouvat[at]univ-nc[dot]nc
• … </p>
• <h6>texte</h6> plus petit titre
<h2>A propos de moi</h2>
<p> Bienvenu sur ma page personnelle ! …
</p>
</body>
Liste ordonnées (ordered list)
<ol>
<li> premier élément </li>
<li> deuxième élément </li>
</ol>
Liste non ordonnées (unordered list)
<ul>
<li> premier élément </li>
<li> deuxième élément </li>
</ul>
7
Ajouter des tableaux
<table>
<tr>
<th>titre colonne 1</th> <th>titre colonne 2</th> <th>titre colonne 3</th>
</tr>
<tr>
<td> cellule 1,1 </td> <td> cellule 1,2 </td> <td> cellule 1,3 </td>
</tr>
<tr>
<td> cellule 2,1 </td> <td> cellule 2,2 </td> <td> cellule 2,3 </td>
</tr>
</table>
Définition ligne après ligne
Chaque ligne doit contenir le même
nombre de cellules
Possibilité d'ajouter une légende : <caption> … </caption>
Possibilité de fusionner des cellules
• au niveau des lignes: attribut rowspan de <td>
• au niveau des colonnes: attribut colspan de <td>
§ ex. <td colspan="2" > cellule 1,1 + 1,2 </td> <td> cellule 1,3 </td>
8
Ajouter un lien hypertexte
…
<h1> <a href="images/photo.jpg">Frédéric Flouvat</a> </h1>
<p>
Bureau BG4 <br />
<a href="http://ppme.univ-nc.nc/">Laboratoire PPME</a> <br />
<a href="http://www.univ-nc.nc/">Université de la Nouvelle-Calédonie</a> <br />
…
</p>
….
href : une adresse Web ou
un chemin relatif vers un fichier
• mettre des "/" et pas des "\"
• jamais de chemin absolu (p.ex. "c:\site\contacts.html"), sinon ça ne
marchera plus sur le serveur Web
<a> : peut encadrer n'importe quel contenu (texte, liste, tableau, image,…)
9
Ajouter des images
<body>
…
<p>
<img src="images/foot.jpg" alt="Affichage du bandeau UNC"/>
<a href="#debut">revenir en haut de la page</a>
</p>
</body>
alt: texte à afficher à la place de l'image si celle-ci ne peut être affichée
Attention à la taille des images
• grosse image = temps de chargement de la page long
Ø redimensionner physiquement les images (avec un logiciel de traitement
d'images)
Ø ne pas insérer directement de grosses images
– faire 2 versions de l'image: une petite (taille "vignette") et une taille réelle
– insérer dans la page la petite, puis y associer un lien hypertexte vers la
grande
10
Ajouter du contenu audio et vidéo
<audio src="medias/son.mp3" controls></audio>
<video controls loop autoplay>
<source src="medias/butterfly.mp4" type="video/mp4">
<source src="medias/butterfly.ogv" type="video/ogg">
</video>
Attention: syntaxe HTML5 non supportée par tous les navigateurs
• cf. http://caniuse.com
Possibilité d'inclure des vidéos externes (p.ex. Youtube)
• génération du code à partir de Youtube : Partager > Intégrer
<iframe width="560" height="315" src="https://www.youtube.com/embed/2q2Wx5H6wkg"
frameborder="0" allowfullscreen> </iframe>
11
Les balises sémantiques du HTML5
Apporter de la sémantique en regroupant les
balises du document en fonction de leur contenu
* Alsacréations
<section> une section d'un document regroupant des
informations sur un même sujet
<article> un article d'un document
<nav> liens de navigations principaux
<aside> contenu, information complémentaire
<header> en-tête de page, introduction d'une section
ou d'un article
<footer> pied de page, conclusion d'une section ou
d'un article
<figure> illustration, diagramme, photos, … (avec
(<figcaption>) possibilité de définir un titre)
… …
Attention: non compatible Internet Explorer < 9
<!--[if lt IE 9]-->
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<!--[endif]-->
12
La validation du code HTML
Vérifie que le document est bien écrit
• site W3C validator (http://validator.w3.org/)
• https://validator.w3.org/nu/
• outils de développement intégrés aux navigateur
– p.ex. en affichant le code source dans Firefox (regarder ce qui est en rouge)
Attention: les pages non validées risquent d'être affichées différemment en
fonction des navigateurs
Rq: lorsque le code est valide, pensez à ajouter l’icône de validation du W3C
• http://www.w3.org/html/logo/
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png"
width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered">
</a>
13
Les feuilles de style CSS
CSS = Cascading Style Sheets
Ø Séparer fond et forme
Ø 1 contenu, plusieurs affichages
Ø faciliter le développement et la maintenance
.html
<p style="text-align:justify; color:gray; font-family:sans-serif; font-size:12pt">
Premier paragraphe de texte avec un style. Si je veux faire un second paragraphe, il
faut que je répète tous les ordres de style.
</p>
<p style="text-align:justify; color:gray; font-family:sans-serif; font-size:12pt">
…
</p>
<p style="text-align:justify; color:gray; font-family:sans-serif; font-size:12pt">
…
</p>
Ø beaucoup de copier/coller !!
• nécessité de modifier toutes les pages en cas de mise à jours du style du site
Ø une seule mise en page par site
• PC ? tablette ? mobile ?
14
Les feuilles de style CSS
…
<p…class="paragraphe">
<p…class="paragraphe">
Premier paragraphe de texte avec un
<p class="paragraphe">
Premier
style. Si je paragraphe
veux faire un desecond
texte avec un
Premier paragraphe
style. Si je ilveux faire de texte avec un
unrépète
second
paragraphe, faut que je tous
style. Si je ilveux
paragraphe, faut faire
que unrépète
je secondtous .paragraphe {
les ordres de style.
paragraphe,
les ordres de style.il faut que je répète tous text-align:justify;
</p>
les ordres de style. color:gray;
<p</p>
class="paragraphe">
</p> font-family: sans-serif;
…<p<p class="paragraphe">
… class="paragraphe">
</p> font-size:12pt;
… }
<p</p>
class="paragraphe">
</p>
…<p class="paragraphe">
…<p class="paragraphe">
</p> …
…</p> style.css
…</p>
…
Notion importante en CSS: les classes de style
Les CSS par l'exemple : http://www.csszengarden.com/
15
Faire le lien avec la feuille de style
<html lang="fr">
<head>
<link rel="stylesheet" href="style.css">
...
</head>
…
</html>
Possibilité d'ajouter l'attribut media pour associer une feuille de style à un
support spécifique
• valeur = all, braille, handheld, print, screen, tv, …
<head>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="small.css" media="screen and (max-width: 800px)" >
<link rel="stylesheet" href="print.css" media="print">
</head>
16
Redéfinir, regrouper et combiner les styles
Dans le HTML,
• Combiner des classes <p class="aligneGauche styleAncien">
• Associer une même classe à des éléments <p class= "styleTexte">
...
différents <span class= "styleTexte">
Dans le CSS,
p{
• Redéfinir le style par défaut des balises color: red ;
– pout tout le document font-family: helvetica ;
}
• Possibilité de définir plusieurs informations en même temps pour
certains attributs de style (p.ex. font)
styleTexte { font: bold 12pt helvetica; }
• Décrire plusieurs styles en même temps
h1 { color : red; }
h1, h2 { color : red; }
h2 { color : red; }
17
Héritage et CSS
Héritage en cascade des styles
<!DOCTYPE html> <html>
<html lang="fr">
<head> <head>
…
</head> <body>
<body>
<h1>Frédéric Flouvat</h1> <h1>
<p>Laboratoire ISEA <br /> <p>
Université de la Nouvelle-Calédonie <br />
email: frederic[dot]flouvat[at]univ-nc[dot]nc <h2>
</p> <p>
<h2>A propos de moi</h2>
<p> Bienvenu sur ma page personnelle ! <br /> <a>
Je suis maître de conférence en informatique à l'
<a href="http://www.univ-nc.nc">Université de la
Nouvelle-Calédonie</a> depuis le 1er septembre Les styles non redéfinis sont
2008.
</p> répercutés dans tous les
… éléments contenus
</body>
</html>
18
Héritage et CSS
Héritage en cascade des styles
<!DOCTYPE html> Objectif: mettre en bleu et en gras les
<html lang="fr"> liens qui sont dans un paragraphe, et
<head>
…
laisser les autres en noir et en italique
</head>
<body>
body {
<h1>Frédéric Flouvat</h1> color: black;
<p> Bureau BG4 <br /> font-family: Arial;
Laboratoire PPME <br /> }
style.css
Université de la Nouvelle-Calédonie <br />
BPR4 - 98851 Nouméa Cedex <br /> p{
email: frederic[dot]flouvat[at]univ-nc[dot]nc
font-family: Helvetica;
</p>
<h2>A propos de moi</h2>
}
<p> Bienvenu sur ma page personnelle ! <br />
Je suis maître de conférence en informatique à l' a{
<a href="http://www.univ-nc.nc">Université de la color: blue;
Nouvelle-Calédonie</a> depuis le 1er font-weight: bold;
septembre 2008. }
</p>
…
Problème: tous les liens hypertextes de
</body>
</html> la page seront modifiés
19
Héritage et CSS
Héritage en cascade des styles
<!DOCTYPE html> Solution:
<html lang="fr">
<head> body {
… color: black;
</head>
font-family: Arial;
<body>
<h1>Frédéric Flouvat</h1> font-weight: normal;
<p> Bureau BG4 <br /> }
Laboratoire PPME <br />
style.css
Université de la Nouvelle-Calédonie <br /> p{
BPR4 - 98851 Nouméa Cedex <br /> font-family: Helvetica;
email: frederic[dot]flouvat[at]univ-nc[dot]nc }
</p>
<h2>A propos de moi</h2>
<p> Bienvenu sur ma page personnelle ! <br />
a{
Je suis maître de conférence en informatique à l' font-style: italic;
<a href="http://www.univ-nc.nc">Université de la }
Nouvelle-Calédonie</a> depuis le 1er septembre
2008. pa{
</p> color: red;
…
font-weight: bold;
</body>
</html> }
20
Limiter la portée d'un style
Dans le CSS,
• Restreindre le style à une balise
<p class= "styleTexte">
le texte est rouge
p.styleTexte { color : red ; } </p>
<p> le texte n'est pas rouge </p>
• Appliquer un style uniquement s'il est imbriqué
dans une balise (ou un autre style)
<p>La couleur <strong>rouge</strong> est appliquée
p strong { color : red ; } ici, mais aussi <del><strong>là</strong></del></p>
<h2> Mais pas là</h2> <body>
<p>
<strong>
<del>
• Appliquer un style uniquement s'il est descendant <strong>
<h2>
direct d'une balise (ou un autre style)
<p>La couleur <strong>rouge</strong> est appliquée
p > strong { color : red ; } ici, mais aussi <del><strong>là</strong></del></p>
<h2> Mais pas là</h2>
21
Limiter la portée d'un style
Dans le CSS,
• Appliquer un style uniquement s'il suit immédiatement une balise (ou
un autre style)
<p>La couleur <strong>rouge</strong> est appliquée
p + h2 { color : red ; } ici, mais aussi <del><strong>là</strong></del></p>
<h2> Mais pas là</h2>
• Rq: Possibilité de combiner tous ces sélecteurs contextuels
<ul class= "texteBleu">
.texteBleu { <li> Hello <em>Red</em> </li>
color: blue; </ul>
}
<ul>
ul.texteBleu li em { <li> Hello <em> Black </em> </li>
</ul>
color:red;
} <p class="texteBleu"> texte en <em> bleu </em></p>
22
Les pseudo-classes
Ajouter un style particulier lorsqu'un élément est dans un certain état
Liste de pseudo-classes associées aux liens (dans l'ordre de déclaration)
• :focus style particulier lorsque le lien à le focus
• :link style particulier lorsque pour les liens non visités
• :visited style particulier lorsque pour les liens visités
• :hover style particulier lorsque la souris passe sur un lien
• :active style particulier lorsque le lien est activé
a:link { color: rgb(255,80,0); }
a:visited { color: rgb(255,80,0); }
a:hover { color: black; }
a:active { color: green; }
23
id versus class
id="nom"
• élément unique dans la page
• dans le fichier CSS référencé par #nom
<section id="coordonnees">
#coordonnees { <p> Bureau BG4 <br />
font-family: helvetica; Laboratoire PPME <br />
font-size: 12 pt; Université de la Nouvelle-Calédonie <br />
} BPR4 - 98851 Nouméa Cedex <br />
email: frederic[dot]flouvat[at]univ-nc[dot]nc
</p>
…
</section>
class="nom"
• plusieurs éléments possibles
• dans le fichier CSS référencé par .nom
.publications { <section class="publications">
<article>
font-family: arial;
…
font-size: 10 pt; </article>
} </section>
24
Quelques propriétés CSS
Le fond de la page
• background, background-attachment, background-color, background-image,
background-position, background-repeat, background-clip, background-origin,
background-size
La police
• font, font-family, font-size, font-style, font-variant, font-weight, @font-face, font-size-
adjust, font-stretch
Le texte
• color, direction, letter-spacing, line-height, text-align, text-decoration, text-indent, text-
transform, …
Les listes
• list-style-image, list-style-position, list-style-type, …
…
Remarque sur les différentes unités
• en pourcentage %, en pixel px, en unité d'imprimerie pt, en fonction de la
taille courante em, …
• Attention: toujours préciser l'unité (sauf pour 0)
25
Le modèle d'affichage CSS
Notion de flux: ordre d'affichage à l'écran = ordre apparition dans le code
Deux catégories d'éléments en HTML, et donc deux types d'affichage
• les éléments en "blocs"
– les éléments blocs s'empilent les uns sur les autres (sur toute la largeur)
– un élément bloc peut contenir d'autres éléments blocs et/ou lignes
– p.ex. : article, aside, audio, figure, figcaption, footer, form, h1 ... h6, header, li,
ol, p, section, nav, table, ul, video, div … container générique souvent utilisé pour faire
de la mise en page et structurer le document
• les éléments en lignes
– les éléments en ligne se placent les uns à coté des autres
– un élément en ligne peut contenir d'autres éléments en ligne (mais pas blocs)
– un élément en ligne doit être dans un bloc container générique permettant de regrouper
– p.ex. : a, img, br, em, strong, span, … du texte et de lui appliquer un style différent
<h2>A propos de moi</h2> A propos de moi
<p> Bienvenu sur ma page personnelle ! <br /> Je
suis maître de conférence en informatique à l' <a Bienvenu sur ma page personnelle !
href="http://www.univ-nc.nc">Université de la Je suis maître de conférence en informatique à
Nouvelle-Calédonie</a> depuis le 1er septembre l'Université de la Nouvelle-Calédonie depuis le 1er
2008. septembre 2008.
</p>
Les marges et les dimensions des éléments
width
Les éléments en lignes
• marge intérieur: padding, padding-top,
padding-bottom, padding-left, padding-
height
right
Les éléments en blocs
• marge intérieure: padding, padding-top, padding-bottom, padding-left,
padding-right
• marge extérieure: margin, margin-top, margin-bottom, margin-left,
margin-right
• dimensions: width, height, min-height, max-height, min-width, max-width
Ø Utiliser la propriété display pour modifier la classe d'un élément
• none, inline, block, inline-block, list-item, table-cell, flex, grid…
27
Mise en page du contenu : propriété display
Affichage Flexbox : moyen efficace de disposer, d'aligner et de répartir l'espace
entre les éléments d'un conteneur, même lorsque leur taille est inconnue et/ou
dynamique (d'où le mot «flex») container
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0; item
margin: 0; <ul class="flex-container">
list-style: none; <li class="flex-item">1</li>
} <li class="flex-item">2</li>
<li class="flex-item">3</li>
.flex-item { <li class="flex-item">4</li>
background: tomato; <li class="flex-item">5</li>
padding: 5px; <li class="flex-item">6</li>
height: 150px; <li class="flex-item">7</li>
margin-top: 10px; <li class="flex-item">8</li>
} </ul>
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 28
Mise en page du contenu : propriété display
Affichage Grid : système de mise en page en deux dimensions sous la forme d'une grille
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container { <div class="container">
display: grid; <div class="item-a"> header </div>
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto; <div class="item-b"> main </div>
grid-template-areas:
<div class="item-c"> sidebar </div>
"header header header header"
"main main . sidebar" <div class="item-d"> footer </div>
"footer footer footer footer"; </div>
}
https://css-tricks.com/snippets/css/complete-guide-grid/ 29
Mise en page du contenu : Flexbox vs Grid
https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412
Flexbox est mieux quand
• on a une mise en page simple avec peu de lignes et peu de colonnes
• on a besoin d'aligner des éléments
• on a besoin d'un design dont le focus est le contenu
Grid est mieux quand
• on a une mise en page complexe
• on a besoin d'espaces (gap) entre des blocs
• on a besoin de superposer des éléments
• on a besoin d'un design dont le focus est la mise en page
Ø Possibilité de mixer les deux :
https://blog.logrocket.com/flexbox-vs-css-grid/ 30
Encore et toujours valider …
Vérifier que la feuille de styles CSS est bien écrite
• https://jigsaw.w3.org/css-validator
Attention: les pages non validées risquent d'être affichées différemment en
fonction des navigateurs
Rq: lorsque le code est valide, pensez à ajouter l'icône de validation du W3C
• http://www.w3.org/html/logo/
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS Valide !" />
</a>
</p>
31
Les frameworks et les prototypes
Outils mis à disposition par des industriels et des consortiums de développeurs
pour faciliter le développement d'applications web
• tout en suivant des standards, des bonnes pratiques et en garantissant un maximum
de compatibilité avec les principaux navigateurs (même les anciennes versions)
Deux grandes familles d'outils
• les prototypes = squelettes d'application, des modèles, permettant d'initier
rapidement le développement de pages web
Ø HTML5 Boilerplate (H5BP)
• les frameworks de création d'interfaces = collections d'outils permettant de
créer des interfaces "responsive" rapidement
Ø Twitter Bootstrap, Zurb Foundation, Pure, …
Ø limites: lourd, complexe, "moins de créativité"
32
HTML5 Boilerplate
Un modèle HTML5 permettant de démarrer (starter template)
• fournit une structure de base pour les fichiers et les répertoires
– HTML, CSS, JavaScript, .htaccess (configuration serveur Apache), …
• permet aux pages de s'afficher sur les navigateurs "légers" des appareils
mobiles, les anciens navigateurs et IE
Ø un concentré de bonnes pratiques et d'optimisations
Comment utiliser ?
• télécharger simplement la dernière version sur
https://html5boilerplate.com et décompresser
• modifier les fichiers et insérer votre code
33
HTML5 Boilerplate
34
Bootstrap
Un front-end framework
• fournit des fichiers CSS, des composants JavaScript,
des icones et des polices
• permet d'avoir une interface responsive, compatible
avec les différents navigateurs
• basé sur un système de grilles
Comment utiliser ?
• télécharger et installer la dernière version sur
http://getbootstrap.com
• référencer un des fichier CSS et utiliser ses classes
35
