Cours html5-css3

FORMATION 2021
HTML 5 - CSS 3
INITIATION
f o rm ati o n @ d a m d . f r - ht tp s : //d i s c o r d .g g /u f g a c c z v wd 1
Sommaire
/LE HTML /LES CSS

A. Historique A. Définition et exemple
B. Les éléments et les attributs en HTML B. Implémentation et mise en place
C. Notre espace de travail et nos outils C. Class et id
D. Structure d’une page web D. Gestion des couleurs
E. Le HTML 5 E. Mise en page
1. Lien hypertexte F. Couleur et image de fond
2. Images G. Polices
3. Balise viewport H. Bordures et ombrages
4. Div et span I. Marges
5. Listes J. Display et position
6. Contenu multimédia K. Pseudo-classes et pseudo-éléments
7. Mise en forme du texte L. Transitions et animations
8. Éléments block et inline M. Responsive design et media queries
9. Tableaux
10. Formulaires
2
1A. HISTORIQUE
QUAND EST NÉ INTERNET ?
AU DÉBUT DES ANNÉES 1968 : Le projet Arpanet, est approuvé par l’ARPA et donc financé.
1960, J.C.R. LICKLIDER DU 1969 : Premier noeud de raccordement entre L’Université de Los Angeles et l’Université de Standford.
MASSACHUSETTS INSTITUTE OF 1972 : Mis au point par Ray Tomlinson, le premier courriel est envoyé & première démonstration publique d’Arpanet.
TECHNOLOGY (MIT) DÉCRIVIT 1983 : Arpanet adopte la norme TCP/IP, c’est le démarrage d’Internet avec un millier de poste connecté.
POUR LA PREMIÈRE FOIS LES 1991 : Tim Berners-Lee du CERN participe à la création du World Wide Web en développant un Système Hype texte
INTERACTIONS SOCIALES organisé en web, naissance du protocole http et de l’internet grand public.
POSSIBLES AVEC UN RÉSEAU Depuis 2000 : démocratisation de l’internet du haut débit vers le très haut débit. Google et son moteur de recherche
D’ORDINATEURS. devient incontournable tout comme les autres membres des GAFA.
1996 2004 2019

1983 36 000 000 Création de Plus de 4 milliards
Norme TCP/IP ordinateurs connectés Facebook d’utilisateurs
1968 1991 1998 2014

ARPANET Création du Création de Plus de 1 milliard
World Wide Web Google de sites web
3
1A. HISTORIQUE
LE HTML
Sur quoi repose tout ce développement en Les différentes versions du HTML

constante accélération ? sur le HTML, bien sûr !
Créé en 1991 lors de la création du World Wide Web (en même temps Il ne cesse de progresser depuis sa création, sous l’impulsion
que le protocole HTTP, l’hyperlien et les adresses web) le html n’est pas un du consortium W3C (world Wide Web Consortium) et du
langage de programmation mais un langage de balisage permettant de WHATWG (Web Hypertext Application Technology Working
présenter des documents web. Group) qui veillent à faire évoluer les standards :
/ 1995-1996 : HTML 2
Son sigle signifie “HyperText Markup Language” en anglais, littéralement
/ 1997: HTML 3.2 et HTML 4.0
“langage de marquage hypertexte”. Le balisage HTML est incorporé dans
/ 2000-2006 : xHTML
le texte du document et est interprété par un navigateur Web.
/ Depuis 2007 : HTML 5
La première page web est toujours en ligne : Chacune des ces versions a été l’occasion d’intégrer de
http://info.cern.ch/hypertext/WWW/TheProject.html nouvelles fonctionnalités pour s’adapter aux attentes toujours
plus grandes des internautes.
4
1A. HISTORIQUE
LE HTML
Comme tout langage, le HTML repose sur une syntaxe précise et sur des éléments possédants des attributs spécifiques.
Le but du cours n’est pas de connaître tous ces éléments (la liste est très longue et je vous invite à jeter un coup d’oeil à un recueil dédié à l’ensemble des
balises HTML) mais de comprendre la logique du langage et de savoir manipuler ses éléments de base indispensables.
Commençons par la logique de fonctionnement…
5
1B. ÉLÉMENTS, ATTRIBUTS ET BOÎTES EN HTML
LES BALISES EN HTML
Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit (plus rarement) d’une balise unique qu’on dit alors orpheline.
/ L’ÉLÉMÉNT P / L’ÉLÉMÉNT BR
L’élément p ci-dessous est constitué d’une balise ouvrante, d’un balise L’élément br ci-dessous (servant à créer un retour à la ligne) n’est lui
fermante (notez la présence du slash), et d’un contenu (textuel) entre constitué que d’une balise orpheline.
les balises.
ÉLÉMÉNT P ÉLÉMÉNT BR
<p>Je suis un paragraphe écrit en HTML</p> <br>
Balise ouvrante Contenu Balise fermante Balise orpheline
6
LES ATTRIBUTS EN HTML
La balise ouvrante d’un élément HTML peut contenir des attributs, qui sont parfois même obligatoires.Les attributs vont venir compléter les éléments en
les définissant plus précisément ou en leur apportant des informations supplémentaires. Un attribut contient toujours une valeur, qu’on peut cependant
parfois omettre dans le cas des attributs ne possédant qu’une seule valeur (la valeur est considérée comme évidente).
/ L’ÉLÉMÉNT A / L’ÉLÉMÉNT IMG

Par exemple, l’élément a (pour “anchor”) servant à créer des liens vers L’élément img, servant à insérer une image dans une page HTML, va
d’autres sites ou d’autres pages, va avoir besoin d’un attribut href lui demander deux attributs : src (source) et alt (texte alternatif d’une
(“hypertexte reference”) qui va prendre comme valeur l’adresse (relative image).
ou absolue) de la page vers laquelle on souhaite faire un lien.
ÉLÉMÉNT A ÉLÉMÉNT IMG
<a href=”http://www.monsite.com”>Mon site</a> <img src=”image.jpg” alt=”description de l’image”>
Attribrut href Texte visible Attribut src Attribut alt
Notez que cet élément n’est constitué que d’une seule balise orpheline,
tout comme l’élément br.
7
LE HTML
Toutes les balises HTML que nous allons voir répondront à ce schéma : une balise + des attributs qui lui sont propre
<p> <body> <span>

<strong>
<nav> <section>
<em>
<ul> <audio>
<div>
<h1> <form>
<table>
8
LE MODÈLE DES BOITES
Importance et définition Explication et illustrations du modèle des boîtes
Le modèle des boîtes est un concept essentiel et central pour la mise en

La première boîte (la boîte centrale) représente le contenu de
1 l’élément ou l’élément en soi.
page d’une page web.
Vous devez absolument comprendre le modèle des boîtes pour ensuite 2 Ensuite, autour du contenu, la deuxième boîte contient en plus la
marge intérieure de l’élément qu’on appelle en CSS le “padding”.
pouvoir positionner les différents éléments de votre page où vous le
souhaitez et créer de belles pages web. Le modèle des boîtes nous dit que 3 La troisième boîte va contenir en plus la bordure de l’élément.
“tout élément HTML peut être considéré comme une boîte

Enfin, la dernière boîte va également contenir la marge
rectangulaire”, qu’il soit de type block ou inline (voir plus loin).
4 extérieure de l’élément.
Autour de la “boîte” contenant l’élément en soi, on va pouvoir dessiner

Margin
d’autres boîtes contenant la marge intérieure (padding), les bordures et Border
finalement la marge extérieure de l’élément. Padding
4 3 2 1 Contenu
Grâce au modèle des boîtes, nous allons comprendre comment définir des
marges intérieures et extérieures et des bordures autour du contenu de
l’élément. Nous allons également pouvoir positionner les éléments les uns
par rapport aux autres de manière efficace.
9
1C. NOTRE ESPACE DE TRAVAIL ET NOS OUTILS
ORGANISONS-NOUS !
Avant de nous lancer dans le développement, préparons le terrain en nous organisant physiquement :
Créons un dossier “monsite”, sur le bureau par exemple, dans lequel nous allons créer l’arborescence suivante :
/ Mon site
/ CSS / JS / IMG / FONTS / HTML

style.css jquery.js background.jpg Lato-Bold.ttf index.html
bootstrap.css bootstrap.js logo.png Lato-Black.ttf about-us.html
favicon.png Lato-Regular.ttf contact-us.html
10
QUEL OUTILS POUR LE HTML ?
L’éditeur de texte
Le HTML étant avant tout un texte qui sera interprété par le navigateur, nous avons besoin d’un éditeur de texte. On pourrait très bien se débrouiller avec le
bloc-note de Windows ou un équivalent mais nous allons nous faciliter la tâche avec un éditeur spécialisé.
Je vous propose d’utiliser Visual Studio Code (mais Brackets ou un autre éditeur de ce genre pourrait très bien faire l’affaire).
Un navigateur
Les navigateurs actuels tels que Chrome, Firefox, Safari, Edge, etc. savent tous interpréter le HTML 5 avec plus ou moins quelques petites différences.
Je vous propose de travailler avec Chrome que nous allons enrichir avec une extension qui nous sera utile : Colorzilla
N’oubliez pas d’utiliser le mode de conception adaptative pour tester le mode responsive de votre site et voir l’aspect qu’il aura sur une tablette ou un
smartphone. Pour cela, cliquez sur le menu hamburger et choisissez “Développement web” puis “vue adaptative”
11
ADOPTONS LES BONNES PRATIQUES
L’accessibilité
L’accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s’adresse aux personnes ayant un handicap,
mais cela concerne également d’autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.
On peut aussi dire que l’accessibilité c’est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leurs
handicaps ou les circonstances. De la même manière qu’il est injuste d’empêcher une personne d’accéder à un bâtiment parce qu’elle est en fauteuil rou-
lant (les lieux publics sont souvent équipés de rampes d’accès ou d’ascenseur de nos jours), il est également injuste d’empêcher une personne d’accéder à
un site web parce qu’elle a des troubles de la vue, ou qu’elle utilise un téléphone portable.
Rendre son site accessible est la bonne chose à faire, mais c’est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents
pour qui vos services et vos produits ne seraient sinon pas accessibles.
L’accessibilité et les bonnes pratiques qu’elle implique peuvent bénéficier à tous :
/ Le HTML sémantique (qui rend votre site plus accessible grâce à des balises comme header, nav, article, aside, footer) rend également votre site plus
optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site.
/ Se préoccuper de l’accessibilité c’est faire preuve d’éthique et de morale, ce qui améliore votre image publique.
/ Des bonnes pratiques améliorent l’accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs
de téléphones portables, les personnes ayant un faible débit, etc. Le responsive design et l’optimisation de ses images prennent tout leur sens.
12
L’indentation
Indenter correspond à créer des retraits en début de ligne de façon cohérente et logique.
Indenter va nous permettre d’avoir un code plus propre et plus lisible, donc plus compréhensible. Indenter permet également de plus facilement
détecter les erreurs potentielles dans un code.
Le but de l’indentation est de nous permettre de discerner plus facilement les différents éléments ou parties de code.
Regardez plutôt les deux exemples suivants.
/ AVEC INDENTATION : / SANS INDENTATION :
13
Les commentaires
Les lignes de commentaires vont être des lignes de texte que l’on va écrire au milieu de notre code, afin de donner des indications sur ce que fait le
code en question. Ces commentaires seront invisibles pour vos visiteurs (sauf s’ils affichent le code source des pages), ils ne servent qu’aux développeurs
créant ou lisant le code.
Les commentaires vont être très utile dans deux situations :
/ Dans le cas d’un gros / long projet, afin de bien se rappeler soi même pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer
dans le code ;
/ Si l’on souhaite distribuer son code, ou si l’on travaille à plusieurs, cela fait beaucoup plus professionnel et permet aux autres développeurs
de comprendre beaucoup plus rapidement et facilement le code distribué.
Les commentaires peuvent être mono-ligne ou multi-lignes. Pour écrire un commentaire en HTML, nous allons nous y prendre de la façon suivante :
Faîtes bien attention à la syntaxe des commentaires :

il y a un point d’exclamation au début mais il n’y en a pas à la fin.
14
Validation de son code HTML
Vous devez toujours vous efforcer d’écrire un code valide. Cela évitera des bugs potentiels et votre site sera au final mieux référencé sur les moteurs de re-
cherche.
Pour vérifier la validité d’un code HTML ou CSS, le W3C (World Wide Web Consortium), c’est-à-dire l’organisme qui gère l’évolution des langages comme le
HTML et le CSS entre autres, a mis à disposition des validateurs de code, gratuits.
Vous pouvez trouver les validateurs HTML et CSS aux adresses suivantes : pour le HTML et pour le CSS.
15
1D. STRUCTURE D’UNE PAGE WEB
STRUCTURE
En simplifiant au maximum la structure d’une page web, deux éléments apparaissent : le head et le body
/ LE HEAD
Le HEAD ne contient pas d’informations destinées à l’internaute, mais
HEAD
des méta informations destinées aux navigateurs et aux outils de re-
cherche.
/ LE BODY
Le BODY contient quant à lui toutes les informations présentées aux
internautes ( images, contenu multimédia, texte …).
BODY
16
CRÉONS NOTRE PREMIÈRE PAGE
Spécifions le type de document à l’aide d’une instruction obligatoire. <!DOCTYPE html>
Quelle est la première balise HTML à insérer ? <HTML> bien sûr ! <HTML lang=“fr”>
Profitons-en pour déclarer la langue de notre page. Ici, nous avons

choisi le français “fr” mais on peut très indiqué “eng” si le site est en anglais.
On n’oublie surtout pas de refermer la balise <HTML> !!

</HTML>
L’ensemble des éléments de notre page doivent s’insérer à l’intérieur de la

balise <HTML>
17
CRÉONS NOTRE HEAD

<!DOCTYPE html>
Il est indispensable à notre page !
<HTML lang=“fr”>
Ouvrons la balise <head> <head>
Balise déclarant le type d’encodage utilisé. <meta charset=“utf-8“>
Balise déclarant le titre de la page. Les règles de l’art nous imposent une
<title>Mon titre de page</title>
balise title propre à chacune des pages.
<meta name=“Description“ content=“Voici

Cette balise donne une information complémentaire qui s’affichera sur les
mon site, ici toutes les informations sur
moteurs de recherche en dessous de votre URL.
mon site“>
On n’oublie pas de refermer les balises !
</head>
</HTML>
18
CRÉONS NOTRE BODY
C’est lui qui va accueillir le contenu de notre page <!DOCTYPE html>

<HTML lang=“fr”>
<head>
La balise <body> vient se placer juste après celle de fermeture du <head>
<meta charset=“utf-8“>
<title>Mon super site</title>
La balise de fermeture du <body> vient se placer juste avant le </HTML>
<meta name=“Description“ content=“Voici mon
site, ici toutes les informations sur mon site“>
Enregistrons la page dans le répertoire “monsite” en la nommant :
</head>
“index.html”
<body>
N’oubliez pas !
</body>
Une page d’accueil se nomme toujours index.html ou index.php.
</HTML>
19
ON RÉCAPITULE...
/ Je déclare le type de mon fichier <!doctype html>
/ J’ouvre mon HTML et déclare la langue <html lang=“fr“>
/ J’ouvre le HEAD <head>
/ Je déclare ma table de caractères <meta charset=“utf-8“>
/ J’insère ma balise TITLE <title> </title>
/ J’insère ma balise DESCRIPTION <meta name=“description“ content=“XXX“>
/ Je ferme le HEAD </head>
/ J’ouvre le BODY <body>
/ Je n’oublie pas de fermer le BODY et le HTML </body>

</html>
20
LE RÉSULTAT
Notre première page est terminée, elle fonctionne mais elle est un peu vide…
Pour terminer cette première partie, je vous invite à répondre a ce petit Quizz !
21
HTML 5
22
1E. LE HTML 5
QU’EST-CE QUE LE HTML 5 ?
HTML5 est une combinaison de nouvelles balises HTML, de propriété CSS3, de JavaScript mais structurellement séparées de la spécification HTML5.
HTML 5 apporte un certains nombres d’améliorations :
Un code plus léger :
/ Le Doctype en html XHTML 1.0 :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
/ Le Doctype en HTML 5 :
<!DOCTYPE html>
/ Meta charset en XHTML 1.0 :

<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ />
/ Meta charset en HTML5 :

<meta charset=“utf-8“>
Une prise en compte native des formats multimédia (vidéos, sons …).
23
1E. LE HTML 5
POURQUOI CHOISIR LE HTML 5 ?
Le HTML5 a été créé pour répondre à un besoin d’unification de ce qui peut aujourd’hui être utilisé pour réaliser des sites Web, à savoir le HTML, les feuilles
de style (CSS) pour la partie graphique, et le JavaScript pour l’interactivité.
Il doit également répondre à un besoin de simplification de ce qui peut aujourd’hui exister, en minimisant à la fois l’utilisation de plugins externes dépas-
sés (comme Flash) et l’écriture de scripts dédiés à l’interactivité (en les remplaçant par des balises qui font déjà ce travail).
Le langage répond également à un besoin d’être multiplateformes, ce qui permet d’amener plus facilement le monde du Web sur les plateformes mobiles
par exemple (sites responsive).
Pour toutes ces raisons, le W3C recommande dès à présent aux développeurs Web d’utiliser HTML 5.
24
1E. LE HTML 5
STRUCTURE D’UNE PAGE HTML 5
On retrouve toujours le head et le body mais la structure propose de nouveaux éléments.
Le HEAD contient toujours les méta informations destinées aux navigateurs et aux
HEAD
outils de recherche.
Le header est l’entête de la page, on y retrouve des éléments tels qu’un logo, une ban-
<header>
nière, une accroche, etc.
<nav> La «nav », est le menu de votre site (par ex : accueil, mon cv, mon book, etc.)
Section : élément regroupant un même sujet.
<section>
<aside> Aside : section dont le contenu est complémentaire à un article (par ex. : les dernières
<article>
news relatives à un sujet cité)
Le pied de page contient habituellement des informations sur l’auteur, les données
<footer> relatives au droit d’auteur (copyright) ou les liens vers d’autres documents en relation.
25
LES INDISPENSABLES
AVANT DE COMMENCER
26
1E. LE HTML 5 - LE LIEN HYPERTEXTE
LE LIEN HYPERTEXTE
Avant d’aller plus loin dans la création de notre page, il nous faut comprendre ce qu’est un lien hypertexte.
Un lien hypertexte relie un mot, une expression ou une image d’un document à une autre partie d’un document ou à un autre fichier.
Un clic sur un lien hypertexte permet d’accéder à tout fichier qu’il soit sur un serveur distant ou en local.
Comment se « code un lien » ? à l’aide de la balise <a /> et de son attribut “href”
/ Pour un lien interne : <a href=“page1.html“></a>

<a href=“page2.html“></a>
etc.
/ Pour un lien externe (qui pointent vers un autre site) :

<a href=“page.html“ target=“_blank“>Intitulé du lien</a>
Par exemple : <a href=“http://www.google.fr“ target=“_blank“>Google</a>
/ L’attribut target=“_blank“ permet d’ouvrir le lien dans une nouvelle fenêtre ou onglet.
/ L’attribut target=“_parent“ ouvre la page cible à la place de la page en cours.
27
1E. LE HTML 5 - LES IMAGES
LES IMAGES
Pour insérer une image, nous utilisons la balise <img />.
C’est une balise de type orpheline (comme <br />). Cela veut dire qu’on n’a pas besoin de l’écrire en deux exemplaires comme la plupart des autres balises.
La balise doit être accompagnée de deux attributs obligatoires :
/ src : cela signigie “source“ indique où se trouve l’image que l’on veut insérer. Il s’agit soit d’un chemin absolu (ex. : http://www.site.com/fleur.png),
soit d’un chemin relatif (ce qu’on fait le plus souvent).
Ainsi, si votre image est dans un sous-dossier img, vous devrez taper : src=“img/fleur.png“.
/ alt : cela signifie “texte alternatif“. On doit toujours indiquer un texte alternatif à l’image, c’est-à-dire un court texte qui décrit ce que contient
l’image. Ce texte sera affiché à la place de l’image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs en mode texte desti-
nés aux mal voyants qui ne peuvent malheureusement pas “voir“ l’image.
Cela aide aussi les robots des moteurs de recherche pour les recherches d’images.
Pour la fleur, on mettrait par exemple : alt=“Une fleur“.
Quand votre image est un élément essentiel du contenu de votre page, elle doit toujours être insérer dans une balise <figure></figure> dans laquelle vous
pouvez, si vous le souhaitez, ajouter une légende à l’aide de la balise <figcaption></figcaption>
28
1E. LE HTML 5 - LES IMAGES
LES IMAGES (SUITE)
Insérer un titre
La balise <img /> peut également contenir une balise “title” qui est facultative :
<img src=“img/fleur.png» alt=“Une fleur” title=“Exemple de fleur” />
L’attribut permet d’afficher une bulle d’aide qui apparait au survol de la photo avec la souris.
Insérer un lien sur une image

Comme vous l’aurez certainement deviné, il suffit d’insérer notre balise image au sein d’une balise <a /> :
<a href=“mon lien”> <img src=“img/fleur.png» alt=“Une fleur”/></a>
Attention au poids de vos images qui risquent de rendre votre page longue à charger.
Pensez à les optimiser en amont : passage en 72 ppp (résolution des écrans) et taille raisonnable.
29
1E. LE HTML 5 - LA BALISE VIEWPORT
LA BALISE VIEWPORT
Avoir un site responsive est aujourd’hui indispensable (le contraire sera prochainement pénalisé par Google !), commençons donc par ajouter une nouvelle
balise indispensable qui doit être placer dans le HEAD :
<meta name=”viewport” content=”width=device-width, initial-scale=1” />
Traduction : “largeur de ma page = largeur du dispositif d’affichage”
Par cette balise l’affichage s’adaptera à la largeur de l’écran, que ce soit un ordinateur, une tablette ou un smartphone.
Cela nous permettra un peu plus tard de prévoir un affichage différent selon la largeur de l’écran sur lequel le site est affiché.
On reparlera de cette balise dans notre approche du responsive design dans les CSS.
30
1E. LE HTML 5 - LA BALISE DIV
LA BALISE DIV
L’élément HTML <div></div> (qui signifie division du document) est un

conteneur générique qui permet d’organiser le contenu sans représenter
rien de particulier.
Il peut être utilisé afin de grouper d’autres éléments pour leur appliquer
un style (en utilisant les attributs class ou id) ou parce qu’ils partagent des
attributs aux valeurs communes, tel que lang. Il doit uniquement être utili-
sé lorsqu’aucun autre élément sémantique (par exemple <article> ou <nav>)
n’est approprié.
Il nous sera très utile au moment d’appliquer des styles en CSS.
Vous noterez que les codes “<” et “>” servent à insérer les caractères
“<“ et “>” qui seraient interprétés comme du code s’ils étaient tapés
directement.
31
1E. LE HTML 5 - LA BALISE SPAN
LA BALISE SPAN
Cet élément va souvent servir de conteneur pour du contenu textuel.
Cet élément va s’avérer pratique dans certains cas où nous aimerions mettre
en forme une portion de texte à l’intérieur d’un élément sans pouvoir la
cibler de façon simple.
Il nous sera également très utile au moment d’appliquer des styles en CSS.
Ainsi, dans l’exemple à droite, je pourrais très facilement modifié l’apparence

de mon message “A vous de voir !” dans la feuille de style sans toucher au
reste du paragraphe.
Notez dès maintenant que l’on peut identifier des éléments en leur donnant
un id (comme ici) ou une class (voir dia précédente). Nous en reparlerons
plus tard dans les CSS où nous verrons que leur utilisation est indispensable.
32
1E. LE HTML 5 - LES LISTES
LES LISTES
Les listes HTML vont nous permettre d’ordonner du contenu en l’affichant sous forme… de liste.
Visuellement, une liste ressemble à ceci :

/ Premier élément de ma liste,
/ Deuxième élément de ma liste,
/ Troisième élément de ma liste.
Les listes vont être très utiles pour apporter de la clarté et de l’ordre à nos documents, ainsi que pour créer des menus de navigation.
Il existe deux grands types de listes en HTML :

/ les listes ordonnées (utilisation de la balise <ol>).
/ les listes non-ordonnées (utilisation de la balise <ul>).
Il existe également un troisième type de liste un peu particulier et moins utilisé : les listes de définitions (utilisation de la balise <dl>).
33
1E. LE HTML 5 - LES LISTES NON ORDONNÉES
LES LISTES NON ORDONNÉES
Les listes non-ordonnées vont être utiles pour lister des éléments sans
hiérarchie ni ordre logique.
Par exemple, si je souhaite lister les mots “pomme“, “vélo“ et “guitare“, sans
plus de contexte, j’utiliserai une liste non-ordonnée.
En effet, on ne peut pas dégager de notion d’ordre, de hiérarchie ou de su-

bordination entre ces trois termes.
Pour créer une liste non-ordonnée, nous allons avoir besoin d’un
élément ul (pour “unordered list“, ou “liste non-ordonnée“ en français) qui va
représenter la liste en soi ainsi que d’éléments li (“list items“ = “éléments de
liste“) représentant chaque élément de la liste.
C’est ce type de liste qui va nous permettre de créer facilement des menus.
34
1E. LE HTML 5 - LES LISTES ORDONNÉES
LES LISTES ORDONNÉES
Nous allons utiliser les listes ordonnées lorsqu’il y aura une notion d’ordre
ou de progression logique entre les éléments de notre liste.
Par exemple, si l’on souhaite lister les étapes naturelles de la vie, ou

lorsque l’on crée un sommaire, on utilisera généralement des listes ordonnées.
Pour créer une liste ordonnée, nous allons cette fois-ci utiliser l’élément ol
(pour “ordered list” ou “liste ordonnée”) pour définir la liste en soi et à nouveau
des éléments li pour les différents éléments de la liste.
Vous pouvez changer ce comportement et afficher plutôt des chiffres romains

ou des lettres grâce à l’attribut “type” des listes ordonnées :
/ “1” : valeur par défaut. Ajoute des chiffres devant chaque élément de la liste ;
/ “I” : Ajoute des chiffres romains majuscules devant chaque élément de la liste ;
/ “i” : Ajoute des chiffres romains minuscules devant chaque élément de la liste ;
/ “A” : Ajoute des lettres majuscules devant chaque élément de la liste ;
/ “a” : Ajoute des lettres minuscules devant chaque élément de la liste ;
Notez l’importance de l’indentation pour éviter d’être perdu dans les éléments
de liste !
35
1E. LE HTML 5 - LES LISTES DE DÉFINITIONS
LES LISTES DE DÉFINITIONS
Les listes de définitions, encore appelées «listes de descriptions» vont nous

permettre de lister des termes et d’ajouter des définitions ou descriptions
pour chacun de ces termes.
Pour créer une liste de définitions, nous allons cette fois-ci utiliser l’élément dl
signifiant «description list» ou «liste de description / définition» en français pour
définir la liste en soi, puis des éléments dt (description term) pour chaque
élément à décrire et enfin l’élément dd pour la définition / description en soi.
Pensez bien lorsque vous créez une liste de définitions à toujours placer le
terme à définir avant sa définition, c’est-à-dire l’élément dt avant l’élément dd.
Cela est normalement assez intuitif.
36
1E. LE HTML 5 - AU TRAVAIL !
AU TRAVAIL !
Pour mettre en pratique ce que nous voyons, je vous propose de travailler sur un cas concret qui va nous servir tout au long de la semaine.
Il s’agit de « BIGBURG », un food truck spécialisé dans la street food, pour qui nous allons construire un petit site.
Commençons donc par l’ébauche de la page d’accueil qui devra présenter un logo (que vous récupérez dans le dossier « boîte à outils » de notre répertoire
partagé et devrez placer dans votre répertoire “img”), un titre et un menu de navigation comprenant les éléments suivants :
/ Burgers
/ Produits
/ Services
/ Contact
37
1E. LE HTML 5 - BIGBURG
BIGBURG
<!DOCTYPE html>
Insérons tous les éléments que nous avons vus jusqu’à présent pour le <HTML lang=”fr”>
<head>. <head>
<meta charset=”utf-8”>
En ayant toujours à l’esprit mon futur référencement, je n’oublie pas <meta name=”viewport” content=”width=device-width, initial-scale=1” />
d’indiquer un titre pour ma page ainsi qu’une meta description explicite <title>BIGBURG - Le meilleur de la street food</title>
(elle sera reprise par les moteurs de recherche !). <meta name=”Description” content=”BIGBURG, le meilleur de la
street food, vous propose sa gamme de burgers.”>
Créons un <header> et insérons le logo du food truck que l’on a </head>
récupéré. <body>
<header>
N’oublions pas d’ajouter un titre ! <img src=”img/logo.png” alt=”logo BIGBURG”>
<p>Le food truck spécialisé dans les burgers</p>
Pour la navigation, <nav>, nous allons utiliser des liens dans une liste à </header>
puces : <nav>
/ la balise <ul></ul> ouvre et ferme la liste <ul>
/ les balises <li></li> représentent chacun des éléments de la liste. <li><a href=”#”>Nos burgers</a></li>
<li><a href=”#”>Nos produits</a></li>
Pour l’instant, nous avons insérer le caractère # à la place du lien pour <li><a href=”#”>Équipe</a></li>
indiquer qu’un lien est présent mais ne pointe vers rien <li><a href=”#”>Nous trouver</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</body>
</HTML>
38
1E. LE HTML 5 - FOOD & COOK
VOYONS CE QUE CELA DONNE
C’est un peu vide pour l’instant mais nous convient parfaitement !
39
1E. LE HTML 5 - INSERTION DE CONTENU MULTIMÉDIA
INSERTION DE CONTENU MULTIMÉDIA
Comme je vous l’ai dit, l’un des principaux intérêts du HTML 5 est la prise en compte native des formats multimédia. Donc profitons-en pour ajouter du son
et de la vidéo sans avoir besoin de passer par l’ajout d’un plug-in qui peut-être source de problème (Flash en est un bon exemple !).
Les balises à utiliser sont les suivantes : <audio controls> et <video controls>
Leur syntaxe est la suivante :
<audio controls>
<source src=“emplacement/fichier” type=“audio/type d’extension”>
</audio>
Les types d’extensions recommandés sont “mp3”, “mp4” ou “ogg”. En indiquant plusieurs sources avec des extensions différentes, on permet au navigateur
de sélectionner le fichier qui lui convient.
<video controls>
<source src=“emplacement/fichier” type=“video/type d’extension”>
</video>
Le type d’extension peut être “mp4” ou “mpg”. Là aussi, plusieurs sources peuvent être renseignées pour permettre au navigateur de choisir le fichier qu’il
saura lire.
40
1E. LE HTML 5 - INSERTION DE CONTENU MULTIMÉDIA
INSERTION DE CONTENU MULTIMÉDIA
La balise <video> contient également quelques attributs qui peuvent vous intéresser :
/ autoplay : qui indique que la vidéo doit automatiquement être lancée dès qu’elle peut être jouée sans être arrêtée par le chargement des données.
/ height et width : qui indiquent la hauteur et/ou la largeur de la zone où afficher la vidéo, exprimée en pixels.
/ loop : qui, lorsqu’il est présent, indique que la vidéo doit être jouée en boucle.
/ poster : qui indique une URL qui contient une vignette à afficher tant que la vidéo n’est pas lancée par l’utilisateur. Si cet attribut n’est pas utilisé, rien n’est
affiché jusqu’à ce que la première image de la vidéo soit disponible, ensuite, c’est cette image qui est affichée comme vignette sur la vidéo.
/ preload : cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l’auteur de la page). Il
peut prendre l’une des valeurs suivantes :
- none : la vidéo ne doit pas être préchargée.

- metadata : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.
- auto : le fichier entier peut être téléchargé, même si l’utilisateur ne s’en sert pas.
- la chaîne de caractères vide (““) : synonyme de la valeur auto.
41
1E. LE HTML 5 - MISE EN FORME DU TEXTE
MISE EN FORME DU TEXTE
Comme avec un traitement de texte traditionnel, le HTML permet de mettre en forme les caractères au sein de nos paragraphes insérés
grâce à la balise <p></p> :
/ En gras : avec la balise <strong></strong>

<p> ce texte sera en <strong>gras</strong></p>
/ En italique : avec la balise <em></em>

<p> ce texte sera en <em>italique</em></p>
/ En surligné : avec la balise <mark></mark>

<p> ce texte sera <mark>surligné</mark></p>
/ En exposant ou indice : avec les balise <sup></sup> et <sub></sub>

<p> ce texte sera en <sup>exposant</sup> et en <sub>indice</sub></p>
/ En couleur : avec la balise <font color></font>

<p> ce texte sera en <font color=“#ff0000”>rouge</font></p>
la couleur est à indiquer en format hexadécimal
42
1E. LE HTML 5 - MISE EN FORME DU TEXTE
MISE EN FORME DU TEXTE
Les titres <hn>
Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1> est le plus important et <h6> est le moins important.
Un élément de titre décrit brièvement le sujet de la section qu’il introduit.
A noter :
/ L’information d’un titre peut être utilisée, par exemple, pour construire automatiquement une table des matières d’un document.
/ Les niveaux inférieurs ne doivent pas être utilisé afin de réduire la taille de la police d’un titre (il faut pour cela utiliser la propriété CSS font-size à la place
comme nous le verrons plus tard).
/ On évitera de sauter des niveaux de titre : on commence toujours par <h1> puis <h2> et ainsi de suite. Pour être logique et dans un souci de cohérence (en
particulier avec les moteurs de recherche), il ne doit y avoir qu’un seul titre de niveau 1 sur une page.
Syntaxe :
<h1>Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>
43
1E. LE HTML 5 - A VOUS DE JOUER !
A VOUS DE JOUER !
Vous avez 30 mn pour mettre en forme du texte

et tester l’ajout de son, de video dans notre projet BIGBURG
Pour le contenu multimédia, je vous invite à télécharger un fichier sonore sous 2 formats mp3 et ogg sur http://lasonotheque.org ou utiliser ceux présent
dans la boîte à outils et à les placer ces fichiers dans le dossier /son.
Je vous invite également à télécharger un fichier vidéo sur : http://www.mazwai.com (prenez un extrait d’environ 30 s) ou récupérer la video de la boîte à
outils et placez la dans le dossier /video.
Placez les balises dans le code html et voyez comment le navigateur les interprète.
Ajoutez un titre h2 intitulé «Minuteur» pour le son et un titre h2 intitulé «Recette du jour» pour la vidéo.
44
1E. LE HTML 5 - ÉLÉMENTS BLOCK ET INLINE
ÉLÉMENTS EN LIGNE ET ÉLÉMENTS DE

BLOC
Nous pouvons considérer une page web comme une série d’éléments qui s’emboitent les uns dans les autres.
/ Les blocks qui se placent verticalement à la suite les uns des autres en occupant (par défaut) toute la largeur de la page
par un retour à la ligne automatique.
/ Les éléments de types inline, qui eux, se placent horizontalement à la suite les uns des autres.
A noter qu’un élément de type inline est toujours inclus dans un élément de type block.
Quelques exemples d’éléments blocks et inline.
BLOCKS INLINE
header <a>
footer <em>
<p> <strong>
<hn> <img>
45
1E. LE HTML 5 - LES TABLEAUX
LES TABLEAUX
La création des tableaux en HTML est ancienne et à, avant les évolutions de HTML 5, été détourné de sa fonction principale pour créer des mises en pages
élaborées. Si ces détournements n’ont plus lieu d’être, il est parfois utile de présenter des informations sous la forme de tableaux pour plus de clarté.
Comment construire un tableau en html 5 ?
Les balises à connaître :
/ <table></table> : balises de début et de fin de tableau
/ <th></th> : lignes d’entête du tableau
/ <tr></tr> : lignes de tableau
/ <td></td> : cellules
Le tableau a le mérite d’exister, mais il manque un peu de mise en forme. Heureusement, les CSS nous permettront d’arranger cela !
46
1E. LE HTML 5 - CAS PRATIQUE
CAS PRATIQUE
Vous avez 15 min
Ajoutez un titre h2 intitulé «Produits» suivi de 2 ou paragraphes (avec la balise <p>) pour donner un peu de «matière» à notre site.
Récupérez du faux texte sur le site http://www.faux-texte.com/ ou un texte d’un concurrent.
Créez un tableau de 3 colonnes et 4 lignes avec une ligne d’en-tête (intitulés : emplacement, jour, horaires) dans notre projet BIGBURG.
Emplacement Jour Horaires
47
1E. LE HTML 5 - LES FORMULAIRES
LES FORMULAIRES
Les formulaires HTML sont un des vecteurs principaux d’interaction entre un utilisateur et un site web ou une application. Ils lui permettent d’envoyer
des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-
même.
Un formulaire HTML est composé d’un ou plusieurs items. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes de
sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle.
Les balises de formulaire
/ <form></form> : sert à déclarer le formulaire. C’est entre ces balises que le formulaire est codé.
- action : c’est l’adresse de la page ou le programme qui va gérer le formulaire et qui enverra un message de confirmation à l’internaute
ou stockera le formulaire dans une base de données.
- method : est le procédé utilisé pour transmettre les données du formulaire => GET ou POST
/ <label></label> : il s’agit du libellé du champ à remplir
/ <input> : il s’agit du type de champ de donnée
/ <textarea></textarea> : il s’agit d’une zone de texte
/ <button></button> : il s’agit d’un bouton qui peut valider l’envoi (submit) ou remettre le formulaire à 0 (reset)
48
LES FORMULAIRES
1 2
Déclarons notre formulaire, indiquons vers quelle page les données
seront envoyées 1 et avec quelle méthode. 2
3
Incluons nos champs dans des <div> pour nous faciliter

la future mise en forme en CSS. 3
4
Nous avons aussi besoin de donner un nom à nos données dans la
balise <input>. Ces noms sont importants pour deux raisons. Du côté du
navigateur, cela sert à déclarer quelles données doivent être envoyées.
5
Du côté du serveur, chaque information doit avoir un nom pour être
manipulée correctement. 4
Notez l’utilisation de “placeholder” qui permet d’ajouter une indication

6
à l’intérieur du champs. 5
Nous ajoutons un bouton avec le type “submit” pour

pouvoir envoyer le formulaire. 6
Nom :
Email :
Message :
Notez bien que la balise <input> est orpheline au contraire de la balise
<textarea></textarea>
Envoyer votre message
49
LES FORMULAIRES
Méthodes GET et POST
Avec la méthode GET, les données du formulaire sont transmises directement dans l’url, ainsi n’importe qui pourrait récupérer des informations sensibles.
Si nous remplissons notre formulaire et cliquons sur “Envoyer le message”, on obtient :
L’internaute peut aussi à tout moment modifier directement les données dans l’url et retransmettre le formulaire => Attention à votre base de données !!
De plus, la méthode GET est limitée par la longueur maximum d’une URL (en théorie une chaîne de 255 caractères maximum).
Vous aurez donc compris que nous utiliserons plutôt la méthode POST dans nos formulaires pour plusieurs raisons : elle est indispensable pour des codes
non ASCII, des données de taille importante, et elle est recommandée pour modifier les données sur le serveur, et pour les données sensibles (comme ex-
pliqué par le W3C).
Pour plus d’information sur ces méthodes : web doc Mozilla.
50
1E. LE HTML 5 - LE FOOTER
LE FOOTER
Qu’est-ce qu’il manque à notre page ?

Un footer !
Comme dans le <header>, nous allons créer un menu sous forme de liste à
puces.
Nous ne mettons pas de liens pour l’instant et insérons un caractère # à la

place.
51
1E. LE HTML 5
ÇA Y EST ! NOTRE PAGE EST TERMINÉE !
Tous les éléments de notre structure sont en place :
/ un header avec son logo et son titre,
/ une navigation avec des liens,
/ du contenu avec des titres et du texte,
/ des éléments multimédia,
/ un tableau,
/ un formulaire,
/ un footer,
cependant il manque un peu de style pour rendre cela un peu plus

beau et efficace.
Il est donc temps de quitter le fond pour s’occuper de la forme

avec les CSS !
52
1E. LE HTML 5
RÉCAPITULATIF
Qu’est-ce que nous avons vu :
/ Certaines balises sont indispensables pour notre page :

<!doctype html>, <html>, <head>, les balises <meta>, <title>, <body>
/ Si je ne déclare pas d’encodage précis avec <meta charset=“utf-8”>, je vais au devant de problème avec les caractères accentués !
/ Mes pages sont toujours composées d’un Head et d’un Body qui est lui même composé d’un Header, d’une Nav, d’un contenu regroupé en Sections ou
Articles (avec éventuellement un Aside) et d’un Footer.
/ Mon contenu textuel est hiérarchisé grâce à des balises comme les <hn> et <em> ou <strong>.
/ Les listes non ordonnées me permettent de créer facilement un menu dans ma page.
/ L’utilisation des tableaux me permet de présenter des données plus clairement.
/ Je peux facilement ajouté du son et des vidéos grâce aux balises <audio controls> et <video controls>.
/ Je peux interagir avec un visiteur par l’intermédiaire d’un formulaire.
/ Je dois toujours prendre garde à préserver l’accessibilité de mon site : il doit être responsive, mes images doivent être adaptées (poids) et posséder des
balises Alt, mon contenu doit être pertinent et présenté de manière logique.
53
CSS
54
2A. LES CSS - DÉFINITION
CSS, C’EST QUOI ?
Les CSS (“Cascading Style Sheets” en anglais) ou feuilles de style en cascade forment un langage informatique de qui décrit la présentation des
documents HTML et XML. Alors que la structure d’un document est écrite dans un fichier HTML, toute la présentation est déportée dans une feuille de
style CSS séparée. Les styles sont donc appliqués au dernier moment, dans le navigateur web des visiteurs. Cette séparation fournit un certain nombre de
bénéfices, permettant d’améliorer l’accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l’architecture d’un document.
Ainsi, les avantages des feuilles de style sont multiples :
/ La structure du document et la présentation peuvent être gérées dans des fichiers séparés ;
/ La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d’être plus efficace ;
/ Dans le cas d’un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles.
Cette caractéristique permet de plus une remise en forme rapide de l’aspect visuel ;
/ Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l’impression et une pour la lecture à l’écran.
Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs ;
/ Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balises ni d’attributs de présentation.
/ Avec les CSS, le responsive est beaucoup plus facile.
Les standards définissant les CSS sont publiés par le W3C.
55
2A. LES CSS - STRUCTURE
UNE MÊME BASE, UNE FEUILLE DE

STYLE DIFFÉRENTE ET TOUT CHANGE !
/ SANS CSS / AVEC CSS
56
2A. LES CSS - STRUCTURE
UNE MÊME BASE, UNE FEUILLE DE

STYLE DIFFÉRENTE ET TOUT CHANGE !
57
2B. LES CSS - IMPLÉMENTER LES CSS
COMMENT IMPLÉMENTER LES CSS ?
Directement dans le code html Dans un fichier externalisé
✗ ✓
Ce n’est clairement pas la chose à faire : C’est clairement l’option à privilégier :
/ Cela alourdit le code html, or nous avons vu que l’usage des css devait / Cela n’alourdit pas le code html.
alléger le code.
/ En cas de modification d’un style, elle sera répercutée sur toutes les
/ Il nous faudra copier-coller autant de fois le css dans le html que nous pages du site qui font appel à lui de façon automatique.
aurons de pages => les pages devront être modifiées une par une en
cas de mise à jour. Si je veux que mes h1 soient bleus,
je le précise dans le seul fichier CSS.
Si je veux que mes h1 soient bleus, h1 bleu

il faut que je l’indique dans chacune de mes pages.
h1 bleu h1 bleu h1 bleu
58
2B. LES CSS - MISE EN PLACE
MISE EN PLACE DES CSS
Créons d’abord un fichier texte que nous appellerons “style.css” et que nous placerons dans le répertoire “monsite/css”.
Créons maintenant le lien entre notre fichier HTML et la feuille de style, vide pour l’instant, que nous venons de créer en ajoutant cette ligne dans le <head>
de “index.html” :
<link rel=”stylesheet” href=”src/css/style.css” />
J’ai volontairement fait une faute dans cette ligne, la retrouverez-vous ?
Il s’agit du chemin du lien href : notre feuille de style est dans le dossier css du sous-répertoire “src” de “monsite”, il faut donc écrire :
<link rel=”stylesheet” href=”css/style.css” />
pour que notre fichier HTML puisse aller puiser dans le css
59
2B. LES CSS - MISE EN PLACE
MISE EN PLACE DES CSS
Intéressons-nous maintenant au fichier “style.css” et commençons par déclarer l’encodage UTF-8 pour être conforme aux normes recommandées :
@charset “utf-8”;
Nous sommes prêts à créer notre feuille de style !
Un peu de syntaxe…
En CSS, le “;” correspond au point de séparation des règles que nous allons créer.
La syntaxe est toujours :
sélecteur { Exemple : .maDiv {

règle-un; background:#000000;
règle-deux; color:#e44d26;
} }
60
2C. LES CSS - CLASS ET ID
IDENTIFIER LES ÉLÉMENTS AVEC LES

ATTRIBUTS CLASS ET ID
On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d’une page, mais il existe une différence fondamentale :
/ un id s’applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page.
/ une class peut caractériser plusieurs objets (identiques ou non).
Par exemple, il est possible d’avoir ce code :
✓
<div class=”toto”></div>
<div class=”toto”></div>
/* L’élément unique id=”header”, par exemple <div id=”header”> */
#header {
Mais il n’est pas correct d’avoir ce code : background:red;
}
✗
<div id=”toto”></div>
<div id=”toto”></div> /* Tous les éléments de classe ”liens” : <ul class=”liens”> etc.. */
.liens {
color:blue;
En effet, l’id ne doit désigner qu’un seul objet du document. On peut
}
bien sûr définir autant d’id que l’on veut dans la feuille de style, mais il
faut qu’ils soient uniques dans la page html.
/* Tous les paragraphes de classe ”article” : <p class=”article”> */
p.article {
Pour la feuille de style CSS, les règles seront écrites avec la syntaxe
text-align:justify;
#nom_id pour les id et .nom_de_classe pour les class.
}
61
IDENTIFIER LES ÉLÉMENTS AVEC LES

ATTRIBUTS CLASS ET ID
Pour du code «rigoureux», ce qui est syntaxiquement le plus juste doit être privilégié. Utilisez les id en priorité lorsque vous le pouvez et les class lorsque
vous ne pouvez pas. Une balise HTML peut posséder un id et une (ou plusieurs) class mais pas l’inverse. On peut ainsi cibler une balise particulière au sein
d’un ensemble d’éléments possédant la même classe.
Par exemple : commencez à utiliser id systématiquement pour les objets unique pour faciliter la lecture du code. Donnez un id à votre body (pour ancre),
à votre bloc en-tête, votre bloc gauche, droit, la navigation...
En revanche pour les paragraphes ou listes de menu utilisez les classes lorsqu’il y aura plusieurs objets de ce type.
/* L’élément unique id=”header”, par exemple <div id=”header”> */

#header {
background:red;
}
/* Tous les éléments de classe ”liens” : <ul class=”liens”> etc.. */

.liens {
color:blue;
}
/* Tous les paragraphes de classe ”article” : <p class=”article”> */

p.article {
text-align:justify;
}
62
CLASS ET I.D.
Avantages et inconvénients
Quelle peut être l’utilité d’un id qui ne sert qu’une fois par rapport à la classe qui semble remplir les mêmes fonctions ?
Il y a plusieurs raisons à cela, en voici deux parmi d’autres :
/ L’id est pratique car il permet en JavaScript de désigner les éléments avec la fonction document.getElementById(), ce qui facilite la compatibilité
entre tous les navigateurs.
/ L’id peut servir d’ancre nommée, puisqu’il permet de remplacer (pour cette fonctionnalité) l’attribut name.
On pourra donc écrire un lien pour se rendre en haut de page comme ceci :
<body id=”top”>
<a href=”#top”>aller en haut</a>
63
2C. LES CSS - MISE EN PRATIQUE
MISE EN PRATIQUE
Commençons par quelque chose de simple :
Je souhaite que tous les paragraphes de texte de ma page soient en corps 15 et en rouge
sélecteur { 1 p{
règle-un: valeur; 2 font-size: 15px;
règle-deux: valeur; 3 color: red;
} }
1 En indiquant “p” comme sélecteur, j’indique que je souhaite modifier tous les éléments paragraphes.
2 Avec la règle “font-size”, je définis la taille de ma police en pixel.
3 Avec la règle “color”, je définis la couleur de la police.
64
2D. LES CSS - GESTION DES COULEURS
GÉRER LES COULEURS

Dans notre exemple, j’ai choisi “red” mais j’aurais pu indiquer “yellow”, “blue” ou “green”. Heureusement, l’étendue des couleurs sur le web est bien plus
large que ces quelques couleurs de base.
Pour élargir ce spectre, je dois insérer un code hexadécimal du type “#ffffff” comme valeur de couleur et j’ai besoin d’un “color picker” ou d’une
bibliothèque de références.
Le plus simple est d’utiliser le plug-in “colorzilla”

que nous avons installé et qui comporte un color picker
C’est cette valeur qui m’intéresse
Vous pouvez aussi aller sur color.adobe et utiliser les outils

pour vous aider à construire la charte de couleurs de votre site.
Je vous invite à répondre a ce petit Quizz !
65
2E. LES CSS - MISE EN PAGE
LES RÈGLES DE MISE EN PAGE

Comme en HTML, les CSS disposent de règles qui vous permettent de mettre en forme vos textes.
Les alignements
/ TEXTE ALIGNÉ À GAUCHE / TEXTE CENTRÉ / TEXTE ALIGNÉ À DROITE / TEXTE JUSTIFIÉ
Dum apud Persas, ut supra Dum apud Persas, ut supra Dum apud Persas, ut supra Dum apud Persas, ut supra
narravimus, perfidia regis mo- narravimus, perfidia regis mo- narravimus, perfidia regis narravimus, perfidia regis
tus agitat insperatos. tus agitat insperatos. motus agitat insperatos. motus agitat insperatos.
text-align: left; text-align: center; text-align: right; text-align: justify;
Les filets
/ TEXTE SOULIGNÉ / FILET AU DESSUS / TEXTE SURLIGNÉ
Dum apud Persas Dum apud Persas Dum apud Persas
text-decoration: underline; text-decoration: overline; text-decoration: line-through;
66
2E. LES CSS - MISE EN PAGE
LES RÈGLES DE MISE EN PAGE

Le style de caractère
/ TEXTE EN MINUSCULES / TEXTE EN MAJUSCULES / TEXTE CAPITALISÉ

dum apud persas, ut supra DUM APUD PERSAS, UT SU- Dum Apud Persas, Ut Supra
narravimus, perfidia regis mo- PRA NARRAVIMUS, PERFIDIA Narravimus, Perfidia Regis
tus agitat insperatos. REGIS MOTUS AGITAT. Motus Agitat Insperatos.
text-transform: lowercase; text-transform: uppercase; text-transform: capitalize;
Les espacements
/ INTERLETTRAGE / ENTRE LES MOTS
D u m a p u d Pe r s a s Valeur par défaut pour la police Valeur manuelle (peut être négative)
letter-spacing: Xpx; word-spacing: normal; word-spacing: Xpx;
67
2F. LES CSS - COULEUR ET IMAGE DE FOND
COULEUR ET IMAGE DE FOND
Couleur
Afin de mettre une couleur de fond sur notre page, nous utiliserons la body {
propriété “background-color“. background-color : #E80C7A;
}
Celle-ci peut servir à coloriser tout ou partie de notre page selon le sélecteur section { 1
choisi : background-color : RGB(200, 200, 000, 0.5);;
}
En optant pour un choix de couleur en RGB ou RGBa, la quatrième valeur 1

nous permet de choisir une opacité qui sera comprise entre 0 (transparent) body {
et 1 (opaque). background-color : #E80C7A;
opacity: 0.5;
La propriété “opacity” agit exactement de la même manière : }
68
Image
Pour mettre une image en fond sur notre page, nous utiliserons la propriété body {
“background-image“ background-image: url(“img/nom-image.jpg”);
}
En voici la syntaxe pour une image nommé “mon-image.jpg” placée dans le
dossier “/img” de notre répertoire principal :
Par défaut, si notre image est plus petite que l’écran, elle sera répétée horizontalement et verticalement.
Cette répétition peut être gérée avec la propriété “background-repeat” qui peut prendre les valeurs suivantes :
/ repeat (valeur par défaut) : l’image se répète horizontalement et verticalement ;
/ repeat-x : l’image va se répéter horizontalement seulement ;
/ repeat-y : l’image va se répéter verticalement seulement ;
/ no-repeat : l’image ne se répétera pas.
69

Image (suite)
Fixer ou faire défiler le fond en CSS

On va pouvoir choisir de «fixer» notre image de fond ou de la faire défiler en même temps qu’un utilisateur va descendre dans la page grâce à la propriété
CSS “background-attachment».
Cette propriété peut prendre deux valeurs différentes : fixed (pour fixer le fond) et scroll (valeur par défaut).
Redimensionner une image de fond en CSS

Il est toujours préférable de redimensionner une image avant de la mettre sur son serveur, afin de gagner en performance mais il peut arriver que nous
n’ayons pas le choix et que nous devions redimensionner une image à postériori. Dans ces cas là, vous pouvez utiliser la propriété “background-size”.
Cette propriété va utiliser deux valeurs : la nouvelle largeur de votre image et sa nouvelle hauteur.
Vous pouvez indiquer des valeurs absolues ou relatives. En cas de valeurs relatives, faites bien attention : l’image de fond occupera un pourcentage de la
taille de l’élément auquel elle est appliquée, et non pas un pourcentage de sa taille originale. Dans ce cas là, il vaut mieux ne préciser qu’une valeur (la lar-
geur de l’image).
Avec la valeur “background-size:cover”, notre image va être agrandie proportionnellement pour recouvrir toute la largeur de l’écran
(attention aux effets de pixellisation !)
70

Image (suite)
Modifier la position d’une image de fond en CSS

On va encore pouvoir modifier la position d’une image de fond grâce à la propriété “background-position”.
Cette propriété est généralement utilisée avec “background-repeat:no-repeat” et lorsque l’on souhaite utiliser plusieurs images de fond.
La propriété “background-position” accepte toutes sortes de valeurs. Généralement, nous utiliserons soit deux mots clefs (comme “top right” par exemple,
pour placer l’image en haut à droite), soit deux valeurs en pixels pour régler l’écart de l’image par rapport au coin supérieur gauche de l’élément auquel
elle est appliquée.
Ajouter plusieurs images de fond en CSS

On peut finalement ajouter plusieurs images de fond à un même La syntaxe sera alors la suivante :
élément HTML. Pour cela, il suffit de séparer les déclarations pour
chaque image par une virgule pour chacune de nos propriétés.
body {
Imaginons par exemple que l’on souhaite attacher deux images de background-image: url(“img/mon-image.jpg“), url(“img/mon-image-2.jpg”);
fond à notre élément body. Je commence pour cela par placer une background-size: 50%, 50%;
deuxième image (que j’appelle «mon-image-2.jpg») dans le même background-repeat: no-repeat, no-repeat;
dossier. background-position: top left, top right;
}
On veut que nos deux images soient redimensionnées à 50% de
l’élément body en largeur. De même, on souhaite avoir notre
première image en haut à gauche et notre deuxième en haut à
droite.
71
MISE EN PRATIQUE
En appliquant ce que nous venons de voir, je voudrais que vous mettiez en place les styles suivants sur page “index.html” :
/ vos h2 doivent être de couleur #1b2a49, en majuscules et en taille 48 et en «capitalize».

/ vos paragraphes doivent être justifiés, en taille 18 et avoir un interligne de 1.2.

/ votre page doit comporter une div avec un motif de fond qui se répète et est fixé.
A vous de jouer ! vous avez 30 mn.
72
2G. LES CSS - GESTION DES POLICES
GESTION DES POLICES

Comme nous n’avons pour l’instant donné aucune information concernant le type de police (serif, sans serif, cursive, etc.), notre page n’utilise que les po-
lices “système” de la machine sur laquelle elle est ouverte.
Si nous voulons indiquer une police particulière, il faut utiliser la propriété “font-family” de la façon suivante :
font-family: arial, verdana, courrier;
Il faut bien penser à indiquer plusieurs polices différentes pour palier l’éventuelle absence d’une police sur la machine de l’internaute !
Times Helvetica Reey Courrier new

serif : sans-serif : monospace :
cursive :
polices à empattement polices à empattement polices à chasse fixe (largeur
polices simulant l’écriture à la
(exemples : Times New Roman, (ex : Arial, Helvetica, Tahoma, utilisée pour chaque caractère)
main (ex: Lucida Handwriting,
Georgia, Garamond, etc.) Verdana, etc.) (ex : Courier New, Lucida Console,
mais aussi Comic Sans MS, etc.)
etc.)
73
GESTION DES POLICES

Si nous voulons encore plus personnalisé notre site, nous pouvons utiliser une police moins “classique” mais il faut permettre à l’internaute de la récupérer
sur sa machine.
Deux solutions :
/ Utiliser la propriété “@font-face” disponible en CSS 3.
/ Utiliser un service tel que Google-fonts.
Propriété @font-face
Nous avons besoin de récupérer une police gratuite :

rendons-nous sur https://www.fontsquirrel.com/
74
GESTION DES POLICES

Propriété @font-face Choisissez une police et cliquez sur “Webfont kit”
Cochez le format WOFF et cliquez sur “Download @font-face kit”
Activons les filtres à droite

Vous télécharger alors un fichier, très pratique, qui contient différents les styles de votre police :
et cochons “Webfont”
/ .woff (Web Open Font Format) : nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les
autres navigateurs. Il existe d’autres formats, mais ils sont désormais ”obsolètes” pour le web (.ttf, .eot, .svg).
Placer les fonts choisies dans votre dossier /font.
Vous allez récupérer également un fichier css dont vous n’aurez qu’à faire un copier-coller dans votre feuille
de style.
75
GESTION DES POLICES

Propriété @font-face
Voici le code que nous avons copié-collé dans notre “style.css”.

Il manque quelque chose pour que cela marche, mais quoi ???
@font-face {
font-family: ‘robotoregular’;
src: url(‘Roboto-Regular-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
Nous devons l’adapter à notre arborescence !

l’URL doit être modifiée => src: url(‘‘font/robotoregular’’);
76
GESTION DES POLICES

Google fonts
Rendez-vous sur https://fonts.google.com et choisissez l’une des polices.
Dans la fenêtre de la police retenue, cliquez sur “Select this font” et dépliez la barre noir en bas à droite.
Tout ce dont nous avons besoin est de recopier cette ligne 1

dans le <head> de notre page HTML et de bien spécifier la valeur
indiquée pour la propriété “font-family” dans notre feuille de styles 2
La police n’est pas téléchargée dans notre site mais directement

recherchée sur les serveurs de Google.
77
GESTION DES POLICES

Avantages et inconvénients des deux solutions
/ @FONT-FACE / GOOGLE FONTS
✓ ✗ ✓ ✗
Pas de limites dans On fait charger les polices On charge directement les Le nombre de polices est
le choix des polices. par le navigateur de l’inter- polices depuis les serveurs limité (~900) On dépend du
naute donc il y a risque de de Google-fonts bon vouloir de Google !
lenteur quand il y a trop de
polices.
78
MISE EN PRATIQUE
En appliquant ce que nous venons de voir, je voudrais que vous mettiez en place les styles suivants sur la page “index.html” du food truck :
/ vos h2 doivent être en police incorporée Roboto bold, en taille 24 et soulignés,
/ vos paragraphes doivent être en Google font Alegreya, en taille 16.
A vous de jouer ! vous avez 20mn.
79
2H. LES CSS - LES BORDURES
LES BORDURES EN CSS

Les CSS vous permettent d’intégrer facilement des bordures à vos éléments grâce à la propriété “border”.
Sa syntaxe est la suivante : border: 3px solid red;

1 2 3
1 c’est la taille de la bordure

2 c’est le type de bordure (voir ci-après)
3 c’est la couleur de la bordure
Les type de bordures
/ none : pas de bordure (par défaut) / groove : en relief
/ solid : un trait simple / ridge : autre type de relief
/ dotted : pointillés / inset : 3D global enfoncé
/ dashed : tirets / outset : 3D global surélevé
/ double : bordure double
80
2H. LES CSS - LES BORDURES
LES BORDURES EN CSS

Ces bordures peuvent être affinée, notamment au niveau de l’arrondi des coins :
border: 10px solid red;

border-radius: 10px 7px 10px 7px;
On peut également limité la bordure à un ou plusieurs côtés :
border-top: 10px dotted red;

border-left: 20px solid blue;
N’oubliez pas que la lisibilité est un critère important pour votre site donc attention à ne pas abuser des bordures !
81
2H. LES CSS - LES OMBRAGES
LES OMBRAGES EN CSS

Les CSS vous permettent d’intégrer des ombrages à vos éléments grâce à la propriété “boxshadow”. Sa syntaxe est la suivante :

box-shadow: 2px 3px 4px;
1 2 3
1 c’est le décalage horizontal de l’ombre

2 c’est le décalage vertical de l’ombre
3 c’est l’adoucissement de l’ombre
La couleur de l’ombre peut être ajoutée après ces 3 valeurs ainsi que l’attribut “inset”
pour indiquer une ombre intérieure (ex: “box-shadow: 1 px 2px 3px blue inset;”).
On peut également ombrer de la même manière un texte à l’aide de la propriété “text-shadow” :

text-shadow: 1px 1px 3px;
A vous de tester !
82
2I. LES CSS - LES MARGES
LES MARGES
Marges intérieures et marges extérieures
En CSS, nous allons devoir distinguer deux types de marges : les marges intérieures (le padding) et les marges extérieures (le margin).
/ Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Ainsi, définir une marge intérieure importante va éloigner la
bordure de l’élément de son contenu. Si on définit une couleur de fond pour notre élément, celle-ci s’applique également dans l’espace
correspondant aux marges intérieures.
/ Les marges extérieures, au contraire, vont définir l’espace autour d’un élément. Les marges extérieures se trouvent en dehors des bordures d’un
élément et servent généralement à éloigner un élément d’un autre. Comme les marges extérieures se trouvent «en dehors» d’un élément, celles-ci
ne sont pas affectées par la couleur de fond donnée à un élément.
Ces deux types de marges peuvent prendre des valeurs absolues, en px, ou des valeurs relatives, en %. Les marges extérieures accepte également une va-
leur “auto” qui est utile pour centrer horizontalement un élément par rapport à un élément parent.
83
LES MARGES
Marges extérieures (margin)
Comme pour l’alignement du texte à l’aide de l’attribut “text-align”, on peut jouer sur les marges des blocs à l’aide des attributs margin-left, margin-right,
margin-top et margin-bottom.
Ainsi, si je veux déplacer le bloc à l’ID “mon-bloc” à 20px de la marge de gauche, la syntaxe sera :
#mon-bloc {
margin-left: 20px;
}
Notation simplifiée
Pour éviter d’indiquer systématiquement les 4 valeurs différentes, nous pouvons tout simplement enchaîner les quatre valeurs à la suite. La première valeur
correspond à la marge haute 1 , la seconde à la marge droite 2 , la troisième à la marge basse 3 et la dernière à la marge gauche 4 .
#mon-bloc {
margin-left: 10px 20px 10px 20px;
} 1 2 3 4
On peut également ne préciser que deux valeurs.

Dans ce cas, la première correspond aux marges haute et basse et la seconde aux marges droite et gauche.
84
LES MARGES
Marges extérieures (margin)
A votre avis, qu’est-ce que ces attributs peuvent nous permettre de faire ?
=> centrer notre site par exemple !
Si nous plaçons tout notre body dans une div à laquelle nous donnons l’id “global”, nous pouvons créer la règle suivante pour centrer tout notre site et lui
donner une largeur de 1024px :
#mon-bloc {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
En indiquant “auto” pour les marges gauches et droites j’indique qu’elles deviennent flottantes : chacune d’elles est égale à
(largeur de l’écran - valeur de width)/2 dans notre cas, si l’écran fait 1024px, elles sont égales à 0.
85
LES MARGES
Marges intérieures (padding)
Comme pour les marges extérieurs, on peut jouer sur les marges intérieurs à l’aide des attributs
#mon-bloc {
padding-left, padding-right, padding-top et padding-bottom.
padding-right: 20px;
}
Ainsi, si je veux ajouter un padding à droite de 20px au bloc à l’ID “mon-bloc”, la syntaxe sera :
Notation simplifiée
Là aussi, nous pouvons utiliser une notation simplifiée dans laquelle la première valeur correspond
#mon-bloc {
au padding haut 1 , la seconde à celui de droite 2 , la troisième à celui du bas 3 et la dernière à
padding: 10px 20px 10px 20px;
celui de gauche 4 .
} 1 2 3 4
On peut également ne préciser que deux valeurs. Dans ce cas, la première correspond aux marges haute et basse et la seconde aux marges droite et
gauche.
86
LES MARGES - MISE EN PRATIQUE

Dans notre page d’accueil, nous allons jouer avec les différentes marges pour mettre des éléments en valeur.
/ Ajoutons un padding de 10px à notre logo.
/ Ajoutons une marge extérieure gauche de 15px aux paragraphes sur le concept.
/ Ajoutons une marge globale de 20px à notre tableau.
87
2J. LES CSS - DISPLAY
DISPLAY
Par défaut, les éléments HTML vont s’afficher soit sous forme de «bloc», soit «en ligne». C’est la différence majeure entre les éléments de type block et inline.
La propriété display est une propriété CSS très puissante, puisqu’elle va nous permettre de maîtriser la façon dont un élément va être affiché, et ainsi de
gérer la mise en page de nos éléments.
La propriété display peut prendre différentes valeurs nous permettant de gérer précisément la façon dont chaque élément va être affiché.
Voici les valeurs les plus utilisées :
/ display: inline
/ display: block
/ display: inline-block
/ display: none
88
DISPLAY
Display : inline
Lorsque l’on donne la valeur inline à la propriété display, l’élément ciblé va se comporter comme un élément de type inline et donc n’occuper que la largeur
qui lui est strictement nécessaire.
Par exemple, en appliquant un display:inline à des éléments HTML <p>, ceux-ci vont venir se coller les uns à côté des autres selon la place disponible.
/ SANS DISPLAY : INLINE / AVEC DISPLAY : INLINE
Un premier paragraphe. Un premier paragraphe. Un autre paragraphe.

Un autre paragraphe.
Sans l’attribut “inline”, les paragraphes sont les uns à Avec l’attribut “inline”, les paragraphes se collent les
la suite des autres. uns à côté des autres.
89
DISPLAY
Display : block
En attribuant la valeur block à la propriété display, les éléments ciblés vont se comporter comme des éléments HTML de type block et ainsi prendre toute la
largeur disponible.
On peut par exemple appliquer un display:block à un élément HTML span (qui est par défaut de type inline) afin d’observer la modification du
comportement de celui-ci.
/ DISPLAY : BLOCK
Un premier paragraphe.
Un
autre
paragraphe.
Ici, nous avons appliqué une bordure à deux éléments HTML span afin de bien voir la modification du comportement. Ensuite, nous n’avons appliqué un
display:block qu’à notre deuxième élément <span>. Celui-ci se comporte alors comme un élément de type block et occupe toute la largeur disponible.
90
DISPLAY
Display : inline-block
En HTML, les éléments sont soit de type inline, soit de type block. La propriété display va nous permettre de créer des éléments d’un troisième type qui est
une combinaison des deux premiers grâce à sa valeur inline-block.
La valeur inline-block va nous permettre d’emprunter certaines propriétés des éléments de type block et certaines propriétés des éléments de type inline.
Ainsi, l’élément en soi va être de type inline tandis que ce qu’il contient («l’intérieur de la boîte») va être considéré comme étant de type block.
Cela va nous permettre entre autres d’afficher plusieurs éléments côte–à-côte tout en maîtrisant précisément la taille de chacun d’entre eux.
/ DISPLAY : INLINE-BLOCK
Un premier paragraphe. Un autre paragraphe.
Ici, nous avons appliqué une bordure à deux éléments HTML <p> afin de bien voir la modification du comportement.
Ensuite, nous leur avons appliqué un display:inline-block et avons attribué une largeur de 55% pour le 1er et de 40% pour le second.
91
DISPLAY
Display : none
La valeur none va nous permettre tout simplement de ne pas afficher un élément. Cela peut se révéler très pratique dans de nombreux cas, notamment
lorsqu’on veut modifier l’affichage de nos pages selon l’appareil utilisé par nos visiteurs (ordinateur de bureau, téléphone portable, tablette, etc.).
/ DISPLAY : NONE
Un premier paragraphe.
Mon deuxième paragraphe est masqué
92
GÉRER LES MENUS AVEC DISPLAY

1 Je donne une largeur fixe, une couleur 1 nav {
Créer un menu vertical de fond et des bordures à mon menu. width: 250px;
background-color: #c00;
Comment passer d’une liste à puce à un border-style: solid;
menu vertical comme celui ci-dessous à border-color: #600;
l’aide de la propriété Display ? border-width: 1px 1px 0px 1px;
En suivant les étapes ci-contre }
2 Je réduit les marges et padding de 2 nav ul {

mon <ul> à 0. padding: 0;
margin: 0;
}
3 J’aligne les li et ajoute une bordure en 3 nav li {

bas et je fais disparaître les puces à text-align: center;
l’aide de “list-style-type”. border-bottom: 1px solid #600;
list-style-type: none;
}
nav a {
4 Je travaille les liens <a> en les passant 4
en block et en jouant sur leur couleur, display: block;
leur police ainsi que le padding. color: #fff;
Je fais disparaitre le souligné à l’aide de font-family: “Trebuchet MS“, Arial, sans-serif;;
“textdecoration: none”. text-decoration: none;

padding: 8px 16px;
}
nav li a:hover, nav li a:focus, nav li a:active {
5 J’ajoute des modifications au passage 5
de la souris sur les liens <a> des li. background-color: bisque;
color: black;
}
93

Créer un menu horizontal 1 nav, nav ul {
margin: 0;
Comment passer d’une liste à puce à un menu horizontal comme celui ci-dessous padding: 0;
à l’aide de la propriété Display ? En suivant les étapes ci-contre : overflow: hidden;
background-color: #333;
}
2 nav li {
float: left;
list-style-type: none;
1 Je réduit les marges et padding de mon <ul> à 0. border-right: 1px solid #bbb;
J’utilise la propriété “overflow” pour rogner si besoin mon contenu afin qu’il }
s’inscrive dans la boîte de remplissage (padding). 3 nav li:last-child {
border-right: none;
2 J’indique à mes <li> de flotter à gauche et ajoute une bordure de séparation }
et je fais disparaître les puces à l’aide de “liststyle- type”. 4 nav a {
display: block;
3 Je désactive la bordure droite du dernier élément de mon menu. color: #fff;
font-family: “Trebuchet MS“, Arial, sans-serif;;
4 J’indique à mes liens <a> de s’afficher comme des blocs. text-align: center;
text-decoration: none;
5 J’ajoute des modifications au passage de la souris sur les liens (a) des <li>. padding: 14px 16px;
}
5 nav li a:hover, nav li a:focus, nav li a:active {
background-color: #c00;
}
94

Créer un menu horizontal V2 1 nav, nav ul {
margin: 0;
Comment passer d’une liste à puce à un menu horizontal comme celui ci-dessous padding: 0;
à l’aide de la propriété Display ? En suivant les étapes ci-contre : text-align: center;
color: #fff;
}
2 nav li {
display: inline;
list-style: none;
1 Je réduit les marges et padding de mon <ul> à 0 et aligne mon texte au }
centre. 3 nav a {
display: inline-block;
2 J’indique à mes li de s’afficher en ligne et de masquer les puces. background-color: #18b7e6;
color: #fff;
3 J’indique à mes liens <a> de s’afficher comme des inline-block. font-family: “Trebuchet MS“, Arial, sans-serif;;
text-align: center;
4 J’ajoute l’apparition d’une image au passage de la souris sur les liens <a> text-decoration: none;
des <li>. padding: 14px 16px;
}
4 nav li a:hover, nav li a:focus, nav li a:active {
background:#c00 url(“img/fond.png“) repeat;;
}
95
2J. LES CSS - MENUS MISE EN PRATIQUE
LES MENUS - MISE EN PRATIQUE

A vous de jouer ! vous avez 30mn.
Maintenant que vous avez vu comment passer d’une liste à puce à un menu, je voudrais que vous mettiez en forme le menu du site BIGBURG
selon la première version horizontale que nous venons de voir.
Pensez à utiliser les couleurs du logo et les couleurs complémentaires (merci colorzilla ou adobe color !) pour construire l’identité du site.
Exemple de couleur :

#0c4c7b #fbb731
#1e2f40 #f37335

96
2J. LES CSS - POSITION
POSITION
On va pouvoir gérer le positionnement de nos éléments HTML en CSS grâce à la propriété ”position”. Cette propriété est très puissante.
Grâce à position, nous allons pouvoir positionner nos différents éléments HTML de façon absolue ou relativement par rapport à d’autres éléments HTML ou
par rapport à leur place d’origine entre autres.
La propriété CSS position supporte quatre valeurs principales :
/ static
/ relative
/ fixed
/ absolute
Nous allons utiliser la propriété position conjointement aux propriétés top, right, bottom et left afin de positionner précisément nos éléments. Ces quatre
propriétés vont pouvoir prendre des valeurs en pixels qui vont indiquer un déplacement d’un élément par rapport à sa position initiale sur un certain bord.
97
POSITION
Position : static
La valeur static correspond au positionnement par défaut des éléments HTML dans une page.
Tout élément positionné de façon ”static” ne pourra pas être affecté par les propriétés top, right, bottom et left.
/ LE HTML / LE CSS / RÉSULTAT
<!DOCTYPE html> div { Position

<html> background-color: #89B;
<head> width: 400px; Un premier paragraphe
<title>Le modèle des boîtes</title> border: 5px solid #777;
<meta charset= ”utf-8”> } Un autre paragraphe
</head> .para1 {
position: static;
<body> top: 100px; Malgré les valeurs top et left,
<div> left: 50px; le paragraphe 1 ne bouge pas !
<h1>Position</h1> }
<p class=”para1”>Un premier paragraphe.</p>
<p class=”para2”>Un autre paragraphe</p>
</div>
</body>
</html>
98
POSITION
Position : relative
Un élément positionné grâce à position:relative va être repositionné relativement par rapport à sa position par défaut.
Par exemple, si on positionne un élément HTML de façon relative et qu’on lui ajoute left:50px, l’élément sera déplacé de 50 pixels vers la droite par rapport à
sa position par défaut.
<!DOCTYPE html> div { Position

<head> width: 400px; Un premier paragraphe
<meta charset= ”utf-8”> } Un autre paragraphe
</head> .para1 {
position: relative;
<body> left: 50px; Attention, ne pas confondre avec les
<div> } marges (margin / padding) !
<h1>Position</h1>
</div>
</body>
</html>
99
POSITION
Position : fixed
Un élément HTML possédant un positionnement ”fixed” va toujours rester à la même place, même si l’un de vos visiteurs descend (”scroll”) dans la page.
Cette valeur est très utile pour conserver un élément constamment visible, comme un menu ou un sommaire par exemple.
<!DOCTYPE html> h1 { Un premier paragraphe

Position
<head> width: 200px; Un autre paragraphe
<meta charset= ”utf-8”> position: fixed; B
</head> top: 0;
left: 200px; 1
<body> }
<div> a
<h1>Position</h1>
<p class=”para1”>Un premier paragraphe.</p> B
<p>B</p><br><br><p>1</p><br><br><br>
Même en scrollant, le titre restera à la
<p>a</p><br><br><br><p>B</p><br><br><br>
même position !
</div>
</body>
</html>
100
POSITION
Position : absolute
La valeur absolute de la propriété position va nous permettre de positionner un élément de façon relative par rapport à son parent le plus proche auquel on
a appliqué un positionnement spécifique (relative, fixed ou absolute).
Prenez garde, si l’élément possède des marges, elles sont ajoutées aux décalages.
/ LE HTML / LE CSS
Attention : si l’élément auquel on applique
<!DOCTYPE html> h1 { position:absolute ne possède pas d’élément parent
<html> position: absolute; positionné spécifiquement, celui-ci va se
<head> bottom: 0; positionner par rapport à la page entière.
<title>Le modèle des boîtes</title> right: 0;

<meta charset= ”utf-8”> } Faîtes bien attention à l’utilisation de cette
</head> div { valeur, car si vous ne maitrisez pas parfaitement la

background-color: #89B; propriété position vous risquez d’arriver assez vite à
<body> width: 300px; un comportement non désiré, car la valeur absolute
<div> position: fixed; sort totalement un élément HTML du flux normal
<h1>Position</h1> top: 50px; de la page web.
<p class=”para1”>Un premier paragraphe.</p> left: 100px;

Le h1 est positionné par rapport à la page en bas
<p class=”para2”>Un autre paragraphe</p> }
et à droite.
<p>B</p><br><br><p>1</p><br><br><br> .para1 {
<p>a</p><br><br><br><p>B</p><br><br><br> position: absolute;
La div est fixée selon les valeurs top et left.
</div> right: 0;
</body> top: 0px;
Le paragraphe 1 est positionné par rapport à la
</html> }
div.
Je vous invite à répondre a ce petit Quizz ! 101

2K. LES CSS - LES PSEUDO-CLASSES
LES PSEUDO-CLASSES
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d’indiquer l’état spécifique dans lequel l’élément doit être pour être ciblé par
la déclaration.
La pseudo-classe :hover, par exemple, permettra d’appliquer une mise en forme spécifique lorsque l’utilisateur survole l’élément ciblé par le sélecteur
(changer la couleur d’un bouton par exemple).
#bouton:hover {
background-color: #F89B4D;
}
Les pseudo-classes permettent d’appliquer un style à un élément non seulement en fonction de son contenu mais aussi en fonction de facteurs externes
(l’historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover).
Quelques pseudo-classes standards :
/ :active (permet de cibler un élément lorsque celui-ci est activé par l’utilisateur).

/ :focus (permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris comme
par exemple le champ d’un formulaire).
/ :hover (permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer).
/ :visited (permet de modifier l’aspect d’un lien après que l’utilisateur l’a visité).
102
2K. LES CSS - LES PSEUDO-ÉLÉMENTS
LES PSEUDO-ÉLÉMENTS
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l’élément ciblé par la règle.
Ainsi, le pseudo-élément ::first-line permettra de ne cibler que la première ligne d’un élément visé par le sélecteur.
p::first-line {
color: blue;
text-transform: uppercase;
}
À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.
Quelques pseudo-éléments :
/ ::first-letter sélectionne la première lettre de la première ligne d’un bloc, si elle n’est pas précédée par un quelconque autre contenu
(comme une image ou un tableau en ligne) sur sa ligne.
/ ::first-line applique la décoration à la première ligne d’un élément.
/ ::placeholder qui permet de mettre en forme le placeholder d’un input ou d’un textarea
103
2L. LES CSS - LES TRANSITIONS
LES TRANSITIONS
Les transitions vont nous permettre de modifier la valeur d’une propriété CSS de façon fluide, dans le temps, créant ainsi une transition entre les diffé-
rentes valeurs de notre propriété. On va par exemple pouvoir changer progressivement la couleur ou la taille d’un bloc.
Nous allons utiliser la propriété CSS transition pour créer des transitions en CSS qui regroupe en fait quatre propriétés :
/ Transition-delay : indique quand doit commencer la transition ;
/ Transition-duration : indique la durée de la transition ;
/ Transition-property : définit la propriété à laquelle la transition doit s’appliquer ;
/ Transition-timing-function : définit la courbe de vitesse de notre transition.
Parmi ces quatre propriétés, seules les valeurs de transition-duration et transition-property vont être obligatoires à préciser pour utiliser la
propriété transition.
Ces deux valeurs vont donc correspondre à la durée de la transition en secondes (”s”) ainsi qu’au nom de la propriété CSS à laquelle on souhaite appliquer la
transition.
Afin qu’une transition démarre, il va également falloir que la propriété ciblée connaisse un changement de valeur. Nous allons souvent changer la valeur
d’une propriété lors d’un changement d’état de l’élément auquel elle est associée. Ainsi, nous utiliserons souvent les transitions avec les pseudo classes et
particulièrement avec :hover.
104
LES TRANSITIONS
Prenons un exemple concret : au passage de la souris sur mes paragraphes, je souhaite que le bloc qui les accueille change de taille et de couleur.
<!DOCTYPE html> .div-un { / Hors survol

<html> width: 200px;
Un premier paragraphe
<head> height: 200px;
Un deuxième paragraphe
<title>Transitions !</title> background-color: green;;
Un troisième paragraphe
<meta charset= ”utf-8”> -webkit-transition: width 2s, background-color 5s;
</head> 3 -moz-transition: width 2s, background-color 5s;
-o-transition: width 2s, background-color 5s; / Au survol
<body> transition: width 2s, background-color 5s; Un premier paragraphe

<div class=”div-un”> } 1 2 1 2 Un deuxième paragraphe
<h1>Les transitions en CSS</h1> Un troisième paragraphe
<p class=”para1”>Un deuxième paragraphe.</p> .div-un:hover{
<p class=”para2”>Un troisième paragraphe</p> width: 400px;

1 définit la propriété à laquelle la
</div> background-color: #e7314a;
transition doit s’appliquer.
</body> }
</html>
2 définit la durée de la transition.
3 ajout des préfixes vendeurs pour

la prise en charges des anciens
navigateurs.
105
LES TRANSITIONS
Parce que l’implémentation des transitions est relativement récente, nous avons dû utiliser les préfixes vendeurs afin de «forcer» la compatibilité de nos
propriétés pour les anciennes versions des navigateurs.
Voici la liste de ces préfixes :
/ -o- pour Opera
/ -moz- pour Gecko (Mozilla)
/ -webkit- pour Webkit (Chrome, Safari, Android…)
/ -ms- pour Microsoft (Internet Explorer)
Notez également que Internet Explorer dans ses versions inférieures à 10 ne gère tout simplement pas du tout les transitions, que ce soit sans ou avec son
préfixe vendeur.
106
LES TRANSITIONS
Création d’une transition CSS en utilisant toutes les valeurs
Nous allons compléter notre exemple en indiquant les valeurs de

transition-delay et de transition-timing-function pour la transition concernant la va-
leur “width” :
.div-un {
1 La propriété transition-delay va spécifier le temps d’attente avant que la
width: 200px;
transition démarre. Cette propriété va donc prendre en valeur un nombre
height: 200px;
de secondes.
background-color: green;;
-webkit-transition: 2s width 2s ease, background-color 5s;
2 La propriété transition-timing-function va définir la courbe de vitesse de
-moz-transition: 2s width 2s ease, background-color 5s;
notre transition. On va pouvoir choisir parmi cinq valeurs simples :
-o-transition: 2s width 2s ease, background-color 5s;
transition: 2s width 2s ease, background-color 5s;
/ Ease : La transition commence lentement puis accélère au milieu pour
} 1 2
finir lentement
/ Ease-in : la transition commence lentement ;

.div-un:hover{
width: 400px;
/ Ease-out : la transition se termine lentement ;
background-color: #e7314a;
}
/ Ease-in-out : la transition commence et se finit lentement ;
/ Linear : transition linéaire.
107
2L. LES CSS - LES ANIMATIONS
LES ANIMATIONS
Les animations en CSS vont nous permettre de changer le style d’un élément HTML. Contrairement aux transitions, on va pouvoir grâce aux animations
modifier le style d’un élément HTML sans changement d’état de celui-ci et autant de fois que voulu.
Les animations sont une fonctionnalité relativement récente du CSS. Ainsi, la compatibilité avec d’anciennes versions de navigateurs n’est pas parfaite et
nous allons devoir utiliser des préfixes vendeurs (à noter qu’Internet Explorer, dans ses versions antérieures à la version 10, ne supporte tout simplement
pas les animations).
Pour créer une animation en CSS, nous allons utiliser la propriété animation ainsi que la règle ”@keyframes”.
La règle “@keyframes” et la propriété “animation”.
On appelle @keyframes une ”règle” en CSS, qui va nous permettre de modifier progressivement le style d’un élément.
La propriété CSS animation est en fait la notation short-hand des propriétés relatives aux animations suivantes :
/ animation-name : nom de l’animation, qu’on réutilisera dans la déclaration du @keyframes ;

/ animation-duration : durée de l’animation, en secondes ;
/ animation-timing-function : courbe de vitesse de l’animation ;
/ animation-delay : délai de l’animation ;
/ animation-iteration-count : nombre de fois que l’animation doit être jouée ;
/ animation-direction : spécifie si l’animation doit se jouer à l’envers ou selon des cycles alternés, c’est-à-dire en changeant de sens à chaque fois.
/ animation-fill-mode : both => permet de stopper l’animation à la fin des transformations.
Parmi toutes ces propriétés, seules les valeurs relatives aux deux premières doivent obligatoirement être précisées dans la propriété “animation”.
108
2L. LES CSS - LES ANIMATIONS
LES ANIMATIONS
.div {
width: 150px;
Créer une animation complète en CSS 1
height: 150px;
position: relative;
On va maintenant tenter de créer une animation plus complète pour notre div, avec les
background-color: green;;
différentes propriétés “animation-xx”.
animation-name: chgt-couleur;
animation-duration: 4s; 2
On va faire changer notre div de couleur plusieurs fois dans notre @keyframes en
animation-iteration-count: infinite;
précisant des valeurs en pourcentage et la faire bouger dans notre page en lui attribuant
nimation-direction: alternate;;
une position relative.
}
1 Ici, nous commençons par définir la taille, une couleur de fond par défaut et le
/* Syntaxe standard | -webkit- | moz- */
positionnement de notre div.
@keyframes chgt-couleur {
0% {background-color: green; top: 0px; left: 0px}
2 Ensuite, nous lui appliquons les propriétés animation-name, animation-duration,
25% {background-color: yellow; top: 0px; left: 300px}
animation-iteration-count et animation-direction.
50%{background-color: red; top: 300px; left: 300px} 3
75%{background-color: blue; top: 300px; left: 0px}
/ La propriété animation-iteration-count définit combien de fois notre animation va
100% {background-color: green; top: 0px; left: 0px}
être jouée. Elle prend en valeur soit un nombre, soit un mot clef comme “infinite”
}
(l’animation sera répétée indéfiniment).
/ La propriété animation-direction va définir le sens de l’animation. Notre animation peut aller en sens inverse (valeur reverse), en cycles alternatifs
(une fois à l’endroit, une fois à l’envers avec la valeur alternate) ou encore en cycles alternatifs inversés.
3 Finalement, nous utilisons notre @keyframes pour préciser la nature de notre transition et lui donner un effet fluide. Comme prévu, nous utilisons
des valeurs en pourcentage pour définir à quel moment dans l’animation doit commencer chaque nouvel effet et attribuons les pourcentages
souhaités à chaque effet d’animation. Dans le cas présent, nous changeons la couleur de fond du div à chaque fois ainsi que sa place relativement
à sa place de départ.
109
2M. LES CSS - LE RESPONSIVE DESIGN
LE RESPONSIVE DESIGN
Définition
Les mots “responsive design”, en anglais, peuvent être traduits en français par “design adaptable”.
Par extension, le “responsive design” désigne généralement l’ensemble des techniques nous permettant d’adapter nos pages web à toutes les tailles
d’écrans afin d’avoir un bon rendu.
La problématique du responsive design est apparue avec l’apparition des tablettes et des smartphones pouvant se connecter à Internet : en effet, com-
ment faire pour que mon site s’affiche aussi bien sur un petit écran de téléphone portable que sur un ordinateur de salon ?
Trois façons d’adapter son site sur tous les écrans
/ 1. Créer un site dédié pour chaque terminal différent (un site mobile, un site pour ordinateur, etc.).
/ 2. Créer une application mobile en plus de notre site web (gérant l’environnement Androïd et iOS).
/ 3. Utiliser les outils offerts par le HTML et le CSS et créer une version “responsive” de notre site.
C’est cette dernière option que nous allons utiliser.
110
Présentation du viewport
Quand nous avons commencé à créer des pages html, nous avons ajouté une balise
<meta name=“viewport“ content=“width=device-width, initial-scale=1“ />
Comme je vous l’avais dit, ce “viewport” correspond à la taille de la fenêtre web de vos visiteurs.
Une première méthode, très simple, pour commencer à optimiser son site web pour un affichage sur mobile ou tablette est d’utiliser et de manipuler le
viewport.
En HTML5, nous pouvons prendre “contrôle” de la taille de la fenêtre grâce à l’élément meta et aux attributs name et content.
On va demander à ce que nos pages web s’adaptent à la taille de la fenêtre de chacun de nos visiteurs, afin que notre contenu la remplisse.
Cela ne va évidemment pas toujours fournir un résultat parfait, mais ce sera déjà un bon début !
111
Utilisation des valeurs en pourcentage en CSS
En plus de l’emploi de l’élément meta, nous pouvons utiliser des valeurs en pourcentages en CSS pour définir les tailles de certains éléments plutôt
que des valeurs en pixels.
Si votre code est bien pensé et bien construit, cela aura pour effet de redimensionner les différents éléments de vos pages en même temps que la fenêtre
va se rétrécir ou s’agrandir.
Lorsque vous utilisez cette méthode, pensez bien que les tailles exprimées sont un pourcentage de la taille de l’élément parent des éléments que vous
ciblez actuellement.
Ainsi, si vous définissez une largeur de 50% pour une div enfant direct du body, la taille de la div sera toujours égale à 50% de celle du body.
Si maintenant vous définissez à nouveau une largeur égale à 70% pour les paragraphes à l’intérieur de votre div, les paragraphes occuperont 70% de
la largeur de la div.
De même, si vous définissez une taille égale à 100% pour votre élément “img”, l’image occupera toujours toute la largeur de l’écran, quelque soit sa
résolution.
112
2M. LES CSS - LE RESPONSIVE DESIGN : LES MEDIA QUERIES
LES MEDIA QUERIES

Présentation
Les media queries correspondent à une technique introduite en CSS3 et qui va se servir de la règle ”@media”.
Grâce aux media queries, nous allons pouvoir appliquer différentes propriétés ou différentes valeurs à des éléments HTML selon la taille de l’écran et
le type de media utilisé (écran, imprimante, etc.) par vos visiteurs.
Cela va nous permettre par exemple de ne pas afficher certains éléments pour des tailles d’écran trop petites ou de réorganiser nos pages web grâce aux
propriétés CSS.
Utilisation de @media en CSS
Nous allons obligatoirement devoir préciser une chose avec “@media” : le type de media pour lequel les déclarations CSS doivent s’appliquer.
Dans l’immense majorité des cas, nous utiliserons @media screen, afin d’appliquer nos propriétés à tous les médias dotés d’un écran tels que téléphone
portable, tablette, ordinateur de bureau, etc. (on peut également utiliser @media print, par exemple, afin de n’appliquer certaines règles que pour les im-
primantes ou encore @media speech, pour les ordinateurs spéciaux qui vont “lire à haute voix” une page).
Finalement, on peut également utiliser @media all pour appliquer des déclarations à tous les types de media.
Avec @media screen, nous préciserons également une taille ou un intervalle de tailles d’écran au sein duquel les propriétés vont s’appliquer. C’est cette
fonctionnalité qui va nous permettre de créer un site responsive en soi.
113
LES MEDIA QUERIES

Un exemple simple
Selon la taille de l’écran, je veux que le fond de ma page soit de couleur différente.
/ LE HTML / LE CSS
<!DOCTYPE html> @media screen and (max-width: 480px) {

<html> body{
<head> background-color: orange;
<title>Responsive design</title> }
<meta charset= ”utf-8”> }
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<link rel=”stylesheet” href=”styles.css”> @media screen and (min-width: 481px) and (max-width: 1279px) {
</head> body{
<body> background-color: blue;
<h1>Responsive design</h1> }
}
</body>
</html>
@media screen and (min-width: 1280px) {
body{
background-color: green;
Pour un écran dont la largeur sera au maximum de 480px, mon fond sera orange.
}
}
Pour un écran dont la largeur sera comprise entre 481px et 1279px, mon fond sera bleu.
Pour un écran dont la largeur sera au minimum de 1280px, mon fond sera vert.
114
LES MEDIA QUERIES

Utiliser les media queries pour changer l’agencement des éléments HTML
Les media queries vont être particulièrement intéressants pour masquer certains éléments ou pour modifier leur agencement selon la taille de l’écran de
vos visiteurs. Pour faire cela, nous allons pouvoir utiliser les propriétés display, position et les valeurs relatives en pourcentages de façon générale. Imaginons
par exemple une page web composée de trois div côte à côte et d’un pied de page.
/ LE HTML / LE CSS
<!DOCTYPE html> body {

<html> margin: 0;
<head> padding: 0;
<title>Responsive design</title> }
<meta charset= ”utf-8”> .div1, .div2, .div3 {
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”> display: inline-block; Pour chacune des 3 div, j’ai choisi “display: inline-block”
<link rel=”stylesheet” href=”styles.css”> width: 28%; pour qu’elles se placent les unes à côté des autres
</head> height: 100px;
<body> border: 3px solid #AAA;
<h1>Responsive design</h1> margin: 1%;
<div class=”div1”> }
.div1 { .div1 .div2 .div3
<p>Je suis un paragraphe appartenant au premier div.</p>
</div> background-color: orange;
<p>Je suis un paragraphe appartenant au deuxième div.</p> .div2 {
</div> background-color: #28B;
.footer
<p>Je suis un paragraphe appartenant au troisième div.</p> .div3 {
</div> background-color: #2B8;
<div class=”footer”> }
<p>Je suis un pied de page.</p> .footer {
</div> width: 100%;
</body> height: 200px;
</html> margin-top: 20px;
border-top: 1px solid black;
text-align: center;
background-color: #CCC; 115
}
LES MEDIA QUERIES body {

margin: 0;
padding: 0;
}
Utiliser les media queries pour changer l’agencement des éléments .div1, .div2, .div3 {
display: inline-block;
HTML (suite) width: 28%;
height: 100px;
border: 3px solid #AAA;
Imaginons maintenant que je souhaite que sur tous les écrans de tablettes et de smartphones (on va
margin: 1%;
dire en dessous de 781px de largeur) mes 3 div se placent les unes en dessous les autres et que mon }
footer soit masqué. Je n’ai que quelques lignes à ajouter à ma feuille de style : .div1 {
background-color: orange;
}
.div2 {
@media et orientation background-color: #28B;
.div1 }
.div3 {
On peut également définir des règles spécifiques
background-color: #2B8;
selon l’orientation de l’écran de vos visiteurs (utile pour }
l’affichage sur tablette ou iPhone entre autres). .div2 .footer {
width: 100%;
height: 200px;
Pour cela, on peut utiliser “orientation : landscape” margin-top: 20px;
pour définir des règles spécifiques pour les écrans border-top: 1px solid black;
.div3
tournés en mode “paysage” : text-align: center;
background-color: #CCC;
@media screen and (orientation:landscape)
}
@media screen and (max-width: 780px) {
.footer .div1, .div2, .div3{
width: 100%;
border: none;
margin: 1% 0px;
}
.footer{
display: none;
}
}
116
2N. LES CSS - LES TABLEAUX
LES TABLEAUX EN CSS

Ajoutons un peu de forme à notre premier tableau
Avant
<!DOCTYPE html> @charset ”utf-8”;
<html>
<head> Cours Durée Date
/* Fusion des bordures */
<title>Les tableaux !</title> HTML 5 5 jours 12 au 16/03
<meta charset= ”utf-8”> table {
</head> border-collapse: collapse;
<body> }
<h1>Les tableaux en CSS</h1> Après
<table>
<caption>Liste des cours</caption> /* Bordures et marges intérieures pour les lignes d’en-tête
<tr> et du tableau*/ Cours Durée Date
<th>Cours</th> td, th {
<th>Durée</th th > HTML 5 5 jours 12 au 16/03
border: 1px solid gray;
<th>Date</th>
</tr> padding: 10px 10px;
Wordpress 3 jours 19 au 20/03
<tr> }
<td>HTML 5</td>
<td>5 jours</td>
/* couleur d’arrière-plan et mise en forme texte en-tête */
<td>du 12 au 16/03</td>
</tr> th {
<tr> background-color: #db3b1a;
<td>Wordpress</td>
color: #fff;
<td>3 jours</td>
<td>19 au 20/03</td> font-family: sans-serif;
</tr> }
</table>
</body>
</html>
117
LES TABLEAUX EN CSS

Passons à un tableau un peu plus élaboré
/ LE HTML / LE CSS
…. @charset ”utf-8”;
<body> /* Fusion des bordures */
<h1>Les tableaux en CSS</h1> table {
<table>
border-collapse: collapse;
<thead> 
<tr class=”tableau2”> }
<th>Titre du film</th> /* Bordures et marges intérieures pour les lignes d’en-tête et du tableau*/
<th>Pour enfants ?</th> td, th {
<th>Pour adolescents ?</th> border: 1px solid gray;
</tr> padding: 10px 10px;
</thead>
 }
<tfoot>  /* couleur d’arrière-plan et mise en forme texte en-tête */
<tr class=”tableau2”> th {
<td colspan=”3”>Mon pied de tableau</td> background-color: #505050;
</tr> color: #fff;
</tfoot>
font-family: sans-serif;
<tbody> 
<tr class=”tableau2”> }
<td>Massacre à la tronçonneuse</td> /* couleur d’arrière-plan différente une ligne sur deux */
<td >Non, trop violent</td> tbody .tableau2:nth-child(2n) {
<td>Oui</td> background-color: #e0e0e0;
</tr> }
<tr class=”tableau2”>
<td>Les bisounours font du ski</td> /* Couleur d’arrière plan au survol*/
<td>Oui, adapté</td> tbody .tableau2:hover {
<td>Pas assez violent...</td> background: #5bd0ff;
</tr> }
<tr class=”tableau2”> /* Pied de tableau*/
<td>Lucky Luke, seul contre tous</td>
tfoot .tableau2 {
<td colspan=”2”>Pour toute la famille !</td>
</tr> text-align: center;
</tfoot> background-color: beige;
</table> }
</body>
</html>
118
LES TABLEAUX EN CSS

Dans ce tableau, la structure est enrichie à l’aide de nouvelles sections “thead”, “tbody” et “tfoot”.
Vous remarquez que je peux fusionner des colonnes avec :
colspan=“nbre de cellules à fusionner”
Vous vous doutez que je peux faire de même avec des rangées :
rowspan=“nbre de cellules à fusionner”
On peut aussi attribuer une couleur d’arrière-plan différente une ligne sur deux grâce à tr:nth-child(2n).
119
2N. LES CSS - LES FORMULAIRES
LES FORMULAIRES
Voici une partie du fichier HTML d’un formulaire que nous allons retravailler avec les CSS. Notez que certains éléments que nous n’avions pas utilisé
jusqu’ici ont été ajoutés comme l’élément “fieldset” qui permet de regrouper des champs dans une zone que l’on pourra nommer à l’aide de l’élément
“legend” ou encore lesvcheckbox”.
Récupérez le HTML sur le réseau afin que nous puissions travailler notre CSS.
<body>
<h1>Les formulaires en CSS</h1>
<form action=“#“>
<p><i>Complétez le formulaire. Les champs marqué par </i><em>*</em> sont <em>obligatoires</em></p>
<fieldset>
<legend>Contact</legend>
<label for=“nom“>Nom <em>*</em></label>

<input id=“nom“ placeholder=“John Doe“ autofocus=““ required=““><br>
<label for=“telephone“>Portable</label>

<input id=“telephone“ type=“tel“ placeholder=“06xxxxxxxx“ pattern=“06[0-9]{8}“><br>
<label for=“email“>Email <em>*</em></label>
<input id=“email“ type=“email“ placeholder=“prenom.nom@gmail.com“ required=““ pattern=“[a-zA-Z]*.[a-zA-Z]*@gmail.com“><br>
</fieldset>
…
120
2N. LES CSS - LES FORMULAIRES
LES FORMULAIRES
@charset “utf-8“; 5 input:focus {
1 Nous fixons la largeur du formulaire. p{ background: #eaeaea;
margin-top: 0px; }
2 Nous indiquons une marge inférieur à nos } input, textarea {
field set pour les espacer verticalement. form { width: 249px;
1 width: 530px; }
} textarea {
3 Nous indiquons à nos légendes d’utiliser fieldset { height: 100px;
les petites capitales. margin-bottom: 15px; }
2 padding: 10px; select {
background-color: azure; width: 254px;
4 Nous donnons une largeur identique à
} }
toutes nos étiquettes et les alignons en
legend { input[type=checkbox] {
haut padding: 0px 3px; 6 width: 10px;
verticalement. Nous les “décollons” du font-weight: bold; }
3
fieldset à l’aide d’une marge. font-variant: small-caps; input[type=submit] {
font-family: sans-serif; width: 150px;
7
} padding: 10px;
5 Nous ajoutons une variation de l’aspect
label { }
que le champs de saisie à le focus pour width: 110px;
indiquer où se situe l’internaute. 4 display: inline-block;
vertical-align: top;
margin: 6px;
6 Nous limitons la largeur des checkbox
}
pour ne pas repousser le texte adjacent em {
trop loin de la case à cocher. font-weight: bold;
font-style: normal;
color: #f00;
7 Nous fixons la largeur de notre bouton
}
“Envoyer”.
121
2N. LES CSS - LE PETIT PLUS
LE PETIT PLUS
Sachez que même sans utiliser de Javascript (donc uniquement avec du HTML et une CSS), on peut faire des choses assez élaborées,
je vous invite à regarder les quelques exemples ci-dessous !
/ Un slider dynamique avec effet à chaque changement d’image : https://codepen.io/nathantaylor/pen/PJGqdE
/ Un Carousel dynamique avec puce et bouton pour changer d’image : https://codepen.io/Schepp/pen/WNbQByE
/ Une animation d’oiseaux volants et tranversants toute la largeur du site : https://codepen.io/matchboxhero/pen/RLebOY
/ Un effect de Card pour présenter un produit par exemple : https://codepen.io/pgalor/pen/WKoXqM
/ Une animation de chat qui dort : https://codepen.io/pork00chops/pen/bGwBXVa
122
LES CSS - FLEXBOX
FLEXBOX
Le principe de la mise en page avec Flexbox est simple : vous définissez un conteneur, et à l’intérieur vous placez plusieurs éléments.
Imaginez une boîte dans laquelle vous rangez plusieurs objets :
Conteneur
Élement 1 Élement 2 Élement 1
Sur une même page web, vous pouvez sans problème avoir plusieurs conteneurs (plusieurs cartons si vous préférez ).
Ce sera à vous d’en créer autant que nécessaire pour obtenir la mise en page que vous voulez.
123
LES CSS - FLEXBOX
FLEXBOX
Voyons un exemple avec le code suivant : Avec un peu de CSS, ajoutons au conteneur et une couleur de fond aux éléments :
<div id=“conteneur“>
<div class=“element“>Elément 1</div>
</div>
Comme les div sont des blocs, les éléments se positionnent les uns au dessus des autres !
Maintenant, ajoutons juste la valeur Flex pour la propriété Display du conteneur : Les éléments se placent alors par défaut les uns à côté des autres :
#conteneur {
display: flex;
}
124
LES CSS - FLEXBOX
FLEXBOX
La direction
Flexbox nous permet d’agencer ces éléments dans le sens que l’on veut. Avec flex-direction, on peut les positionner verticalement ou encore les inverser.
Il peut prendre les valeurs suivantes :
/ row : organisés sur une ligne (par défaut)
/ column : organisés sur une colonne
/ row-reverse : organisés sur une ligne, mais en ordre inversé
/ column-reverse : organisés sur une colonne, mais en ordre inversé
Exemple
#conteneur {
display: flex;
flex-direction: column;
}
125
LES CSS - FLEXBOX
FLEXBOX
Vous pourriez vous dire que c’est pareil qu’au début non ? On avait le même résultat sans Flexbox !
C’est vrai. Mais maintenant que nos éléments sont flex, ils ont tout un tas d’autres propriétés utiles que nous allons voir juste après.
Essayez aussi de tester l’ordre inversé pour voir :
#conteneur {
display: flex;
flex-direction: column-reverse;
}
126
LES CSS - FLEXBOX
FLEXBOX
Le retour à la ligne
Par défaut, les blocs essaient de rester sur la même ligne s’ils n’ont pas la place (ce qui peut provoquer des bugs de design parfois). Si vous voulez, vous pou-
vez demander à ce que les blocs aillent à la ligne lorsqu’ils n’ont plus la place avec flex-wrap qui peut prendre ces valeurs :
/ nowrap : pas de retour à la ligne (par défaut)
/ wrap : les éléments vont à la ligne lorsqu’il n’y a plus la place
/ wrap-reverse : les éléments vont à la ligne lorsqu’il n’y a plus la place en sens inverse
#conteneur { les éléments se resserrent tant qu’ils peuvent

display: flex;
flex-wrap: wrap;
}
les éléments passent à la ligne
les éléments passent à la ligne à l’envers
127
LES CSS - FLEXBOX
FLEXBOX
Alignements
Les éléments sont organisés soit horizontalement (par défaut), soit verticalement.
Cela définit ce qu’on appelle l’axe principal.
Il y a aussi un axe secondaire (cross axis) :
/ Si vos éléments sont organisés horizontalement, l’axe secondaire est l’axe vertical.
/ Si vos éléments sont organisés verticalement, l’axe secondaire est l’axe horizontal.
128
LES CSS - FLEXBOX
FLEXBOX
Aligner sur l’axe vertical
Pour changer l’alignement des éléments organisés horizontalement

(par défaut), on va utiliser justify-content, qui peut prendre ces valeurs :
1 / flex-start : alignés au début (par défaut)

1
2 / flex-end : alignés à la fin
3 / center : alignés au centre

2
4 / space-between : les éléments sont étirés sur tout l’axe

(il y a de l’espace entre eux)
3
5 / space-around : idem, les éléments sont étirés sur tout l’axe,
mais ils laissent aussi de l’espace sur les extrémités
4
Exemple
#conteneur {
display: flex; 5
justify-content: space-around;
}
129
LES CSS - FLEXBOX
FLEXBOX
Bien évidemment, ça marche aussi si vos éléments sont dans une direction verticale. Dans ce cas, l’axe vertical devient l’axe principal,
et justify-content s’applique aussi :
Exemple
#conteneur {
display: flex;
flex-direction: column;
justify-content: center;
height: 350px;
/* Un peu de hauteur pour que les éléments aient la place de bouger */
}
130
LES CSS - FLEXBOX
FLEXBOX
Aligner sur l’axe secondaire
Comme nous l’avons vu, si nos éléments sont placés dans une direction horizontale (ligne), l’axe secondaire est vertical.
Et inversement, si nos éléments sont dans une direction verticale (colonne), l’axe secondaire est horizontal.
Avec align-items, nous pouvons changer leur alignement sur l’axe secondaire. Il peut prendre ces valeurs :
/ stretch : les éléments sont étirés sur tout l’axe (valeur par défaut)

/ flex-start : alignés au début

/ flex-end : alignés à la fin

/ center : alignés au centre

/ baseline : alignés sur la ligne de base (semblable à flex-start)
Exemple
#conteneur {
display: flex;
align-items: center;
}
131
LES CSS - FLEXBOX
FLEXBOX
Vous voulez appliquer un centrage vertical et horizontal ? Cela peut être obtenu très facilement :
Dites que votre conteneur est une flexbox et établissez des marges automatiques sur les éléments à l’intérieur. C’est tout !
#conteneur {
display: flex;
}
.element {
margin: auto;
}
132
LES CSS - FLEXBOX
FLEXBOX
Aligner un seul élément
Il est possible de faire une exception pour un seul des éléments sur l’axe secondaire avec align-self :
Exemple
#conteneur {
display: flex;
flex-direction: row;
align-items: center;
}
.element:nth-child(2) { /* On prend le deuxième bloc élément */

background-color: blue;
align-self: flex-end; /* Seul ce bloc sera aligné à la fin */
}
133
LES CSS - FLEXBOX
FLEXBOX
Répartir plusieurs lignes
Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment celles-ci seront réparties avec align-content.
Exemple
<div id=”conteneur”> #conteneur {

<div class=”element”></div> display: flex;
<div class=”element”></div> flex-wrap: wrap;
<div class=”element”></div> }
<div class=”element”></div>
</div>
134
LES CSS - FLEXBOX
FLEXBOX
Répartir plusieurs lignes
Voyons voir comment les lignes se répartissent différemment avec la nouvelle propriété align-content . Elle peut prendre ces valeurs :
/ flex-start : les éléments sont placés au début
/ flex-end : les éléments sont placés à la fin
/ center : les éléments sont placés au centre
/ space-between : les éléments sont séparés avec de l’espace entre eux
/ space-around : idem, mais il y a aussi de l’espace au début et à la fin
/ stretch (par défaut) : les éléments s’étirent pour occuper tout l’espace
135
LES CSS - FLEXBOX
FLEXBOX
Changer l’ordre des éléments
Sans changer le code HTML, nous pouvons modifier l’ordre des éléments en CSS grâce à la propriété order. Indiquez simplement un nombre,
et les éléments seront triés du plus petit au plus grand nombre.
Exemple
#conteneur {
display: flex;
}
element:nth-child(1) {
order: 3; order: 1; order: 2; order: 3;
}
order: 1;
}
order: 2;
}
136
LES CSS - FLEXBOX
FLEXBOX
Changer Faire grossir ou maigrir les éléments des éléments
Avec la propriété flex, nous pouvons permettre à un élément de grossir pour occuper tout l’espace restant.
Exemple
flex: 1; flex: 1;
}
Le nombre que vous indiquez à la propriété flex indique dans quelle mesure il peut grossir par rapport aux autres.
flex: 2;
}
flex: 1;
}
Ici, le premier élément peut grossir 2 fois plus que le second élément
137
EXERCICE FINAL
EXERCICE FINAL
A l’aide de tout ce que nous avons vu, construisez la page d’accueil du site web du food truck “BIGBURG”.
Attention, il ne s’agit pas de se faire plaisir sur le design et l’accessibilité mais de répondre à un cahier des charges !
Voici les exigences du client :
/ le site doit être responsive et être bien lisible sur mobile (en particulier sur les iPhone 6+ et 7 et Samsung Galaxy S7+ et S8) car sa clientèle
est plutôt jeune et amateur de smartphones,
/ les couleurs doivent être en accord avec les couleurs du logo,
/ les photos doivent être de qualité pour susciter l’envie,
/ le menu doit être lisible et présenter les burgers, les produits, les services ainsi qu’un lien de contact,
/ le contenu textuel n’est pas encore disponibles mais peut être remplacé par du texte générique,
/ il veut un formulaire pour s’abonner à sa newsletter en Une mais pas trop envahissant.
A VOUS DE JOUER !
138
LIENS UTILES
LIENS UTILES
/ Bibliothèque d’icônes ou de dessin vectoriel : flaticon.com, freepik.fr, icons8.com
/ Photos gratuites et libres de droits : unsplash.com, pixels.com, pexels.com
/ Palettes de couleurs : color.adobe.com, uigradients.com, coolors.co, colorhunt.co
/ Grilles à imprimer pour maquettes : gridprint.in
/ Mockups : mockupworld.co, placeit.net/c/mockups
/ Wireframes : wireframes.tumblr.com, wirify.com, flairbuilder.com (type Balsamiq)
/ La bible du HTML/CSS, JavaScript et bien plus : w3schools.com
/ Partage et recherche de code HTML/CSS, JavaScript, PHP etc... : codepen.io
/ Discord en rapport avec la formation. J’essaie de répondre le plus rapidement possible à vos questions en rapport avec la formation mais également à vos
questions sur le métier de webdesigner, intégrateur, les agences, etc.. : Discord
139

Cours html5-css3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours html5-css3

Transféré par

Droits d'auteur :

Formats disponibles

FORMATION 2021

/LE HTML /LES CSS

QUAND EST NÉ INTERNET ?

1996 2004 2019

1968 1991 1998 2014

Sur quoi repose tout ce développement en Les différentes versions du HTML

http://info.cern.ch/hypertext/WWW/TheProject.html nouvelles fonctionnalités pour s’adapter aux attentes toujours

plus grandes des internautes.

Commençons par la logique de fonctionnement…

LES BALISES EN HTML

<p>Je suis un paragraphe écrit en HTML</p> <br>

Balise ouvrante Contenu Balise fermante Balise orpheline

LES ATTRIBUTS EN HTML

/ L’ÉLÉMÉNT A / L’ÉLÉMÉNT IMG

(“hypertexte reference”) qui va prendre comme valeur l’adresse (relative image).

ou absolue) de la page vers laquelle on souhaite faire un lien.

ÉLÉMÉNT A ÉLÉMÉNT IMG

<a href=”http://www.monsite.com”>Mon site</a> <img src=”image.jpg” alt=”description de l’image”>

Attribrut href Texte visible Attribut src Attribut alt

<p> <body> <span>

LE MODÈLE DES BOITES

Importance et définition Explication et illustrations du modèle des boîtes

Le modèle des boîtes est un concept essentiel et central pour la mise en

“tout élément HTML peut être considéré comme une boîte

Autour de la “boîte” contenant l’élément en soi, on va pouvoir dessiner

finalement la marge extérieure de l’élément. Padding

marges intérieures et extérieures et des bordures autour du contenu de

par rapport aux autres de manière efficace.

/ CSS / JS / IMG / FONTS / HTML

QUEL OUTILS POUR LE HTML ?

ADOPTONS LES BONNES PRATIQUES

L’accessibilité et les bonnes pratiques qu’elle implique peuvent bénéficier à tous :

ADOPTONS LES BONNES PRATIQUES

/ AVEC INDENTATION : / SANS INDENTATION :

ADOPTONS LES BONNES PRATIQUES

Les commentaires vont être très utile dans deux situations :

Faîtes bien attention à la syntaxe des commentaires :

ADOPTONS LES BONNES PRATIQUES

Validation de son code HTML

CRÉONS NOTRE PREMIÈRE PAGE

Spécifions le type de document à l’aide d’une instruction obligatoire. <!DOCTYPE html>

Profitons-en pour déclarer la langue de notre page. Ici, nous avons

On n’oublie surtout pas de refermer la balise <HTML> !!

L’ensemble des éléments de notre page doivent s’insérer à l’intérieur de la

CRÉONS NOTRE HEAD

Ouvrons la balise <head> <head>

Balise déclarant le type d’encodage utilisé. <meta charset=“utf-8“>

<meta name=“Description“ content=“Voici

CRÉONS NOTRE BODY

C’est lui qui va accueillir le contenu de notre page <!DOCTYPE html>

/ Je déclare le type de mon fichier <!doctype html>

/ J’ouvre mon HTML et déclare la langue <html lang=“fr“>

/ J’ouvre le HEAD <head>

/ Je déclare ma table de caractères <meta charset=“utf-8“>

/ J’insère ma balise TITLE <title> </title>

/ J’insère ma balise DESCRIPTION <meta name=“description“ content=“XXX“>

/ Je ferme le HEAD </head>

/ J’ouvre le BODY <body>

/ Je n’oublie pas de fermer le BODY et le HTML </body>

QU’EST-CE QUE LE HTML 5 ?

HTML 5 apporte un certains nombres d’améliorations :

Un code plus léger :

/ Le Doctype en html XHTML 1.0 :