Initiation HTML CSS
Transféré par
ayman.amer.casualInitiation HTML CSS
Transféré par
ayman.amer.casualINSTITUT THECHNIQUE DES SCIENCES NOUVELLES
Initiation HTML et CSS
Apprendre les bases du langage
pour créer des sites web
Réalisée par : AMGHAR Sara.
[email protected]
Initiation HTML et CSS -2019/2020
Description du cours
• Le but de ce cours de formation initiation au HTML et
CSS est de permettre aux étudiants d’appréhender les
bases du HTML et CSS afin de pouvoir ensuite créer
de manière autonome des sites web..
4 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Programme initiation au HTML
• Les bases d’un site web • Les éléments de structuration du
• Le HTML – généralités contenu
– HTML et définition – La balise division <div>
– W3C et le WHATWG – La balise paragraphe <p>
– Présentation rapide de quelques – Espaces insécables Titres <h1> à
outils : éditeurs de texte, wysiwyg <h6>
et clients FTP – La balise <blockquote>
• La syntaxe HTML : balises, éléments • Les liens hypertexte
et attributs – Fonction d'un lien
– Le principe de balise et d'élément – La balise <a>
– Attributs et valeurs – Liens externes
– Quelques exemples d'attributs
– Liens internes et hiérarchisation du
• Doctype, html, body : structure d'un site
document valide – Ouvrir un lien dans un nouvel
– Le doctype
onglet ou laisser l'utilisateur
– Les balises <html>, <head> et
choisir ?
<body>
– Les liens spéciaux : mailto,
– Les commentaires
ancres, etc.
3 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Programme initiation au HTML
• Les éléments de « mise en forme » • Les tableaux HTML
de texte – Créer un tableau : <table> <tr>
– Les balises <strong> et <em> <td>
– – Un exemple de tableau simple
La balise <span>
– Ajout d'en-têtes avec <th>
– D'autres balises (<sup>, <sub>,
etc.) – Légende de tableau
– Attributs avancés, dont colspan,
• Les éléments de liste
rowspan
– Listes ordonnées
• Les formulaires
– Listes non ordonnées – Les formulaires sont partout autour
• Ajouter des images avec la balise de nous
<img> – La balise <form>
– Guide des formats d'image pour le – Le champ <input>
web et outils de compression – Ajout de libellés avec <label>
– La balise <img> et ses attributs – Les placeholder HTML5
– Zone de texte multiligne <textarea>
– Bouton de validation <input
type="submit">
4 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Programme initiation au CSS
• CSS : introduction et notions de • Généalogie et différents types
base de sélecteurs
– Ajoutez du style à vos pages ! – Le sélecteur usuel
– CSS : Cascading Style Sheets, d'élément HTML
une définition – Hiérarchie et généalogie : notion
– Les CSS, un peu d'histoire d'enfants, de parent, de
– Différents rendus entre les descendance
navigateurs : le pixel perfect – Sélecteur de groupe, de classe
n'existe pas – L'id ou identifiant
• Appliquer un style, oui mais où ? – Espace entre sélecteurs, ou pas ?
– Le CSS inline et inconvénients
– Les pseudos-classes sur les liens
– Le CSS "interne" intégré au
– Les autres pseudo-classes
document et inconvénients
– Feuille de style externe et • Couleurs et unités
balise <link> – Notation des couleurs en CSS
• Syntaxe CSS – Les unités fixes en CSS
– La syntaxe de base : – Les unités fluides en CSS
selecteur, propriété, valeur – En web, quelle unité utiliser ?
– La déclaration CSS
5
– Les commentaires CSS Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Programme initiation au CSS
• Propriétés de typographie, polices et • Dimensions, margin et padding
– Différences entre inline et block
puces – Largeur et hauteur avec width et height
– – Dimensions maximum et minimum
Font-family et polices utilisables
– Marge extérieure margin
– Propriété typographiques (gras, italique, – Centrer horizontalement à l'aide de margin
interlignage, etc.) – Marge intérieure padding
– Calcul des dimensions réelles d'un élément
– Changer la couleur du texte – S'affranchir du calcul avec box-sizing: border-box
– Alignements de texte – Gestion des dépassements avec overflow
– Décoration de texte (soulignement, etc.) • Positionnement CSS : les flottants pour placer des
images
– Changer les icônes d'une liste à puce – Les flottants et le flux
• Bordures et arrières plans – Ferrer les images à gauche et à droite
– Nettoyer les flottants avec clear
– Bordures et styles, bords arrondis CSS3 – Notion de contexte de formatage de bloc et gestion des
– Arrière-plan et propriétés background conflits de flottants
6 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les bases d’un site web
7
Une page Web c’est …
• Un fichier HTML est un format de fichier « texte » éditable dont les
éléments ont du sens
• Au format .html
• Peut contenir du texte, des images, des liens,
des médias, etc.
• Peut être liée à une autre page via des liens
11 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Un site Web c’est ...
• Un ensemble de pages liées entre elles
• Accessible en ligne depuis n'importe où
12
Mais pas que ...
10 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mais pas que ...
• Contenus textuels dans le fichier HTML, mais aussi images, sons,
vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers
sont chargés dans le navigateur pour créer une page web.
11 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mettre son site en ligne
12
Le principe de « serveur web »
Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
13
Transférer un fichier sur le serveur
Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y
14
accéder.
18
Le client FTP
• FTP : File Transfer Protocol, protocole de communication destiné à
l'échange de fichiers sur un réseau TCP / IP.
• Permet de « mettre en ligne » son site web
• Une sorte d'explorateur sur un serveur à distance
• Ex : Filezilla
19 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le HTML - généralités
20
HTML : définition
• Hypertext Markup Language (HTML)
• Langage de balises qui permet de
structurer des pages
• Différentes versions depuis 1989
• Aujourd’hui :
– XHTML (2000 – 2006)
– HTML5
18 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
HTML : définition
• Le HTML5 est un langage de base pour la création
de site internet, il sert à structurer vote document.
D’autre langage peuvent s’ajouter lors de la
conception, mais tout les sites web contiennent du
HTML. HTML5 désignant la version du langage
HTML.
19 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
HTML : définition
• Le HTML5 est un langage très facile à apprendre. Il est
généralement appris en parallèle du CSS. Afin de
visualiser pour mieux comprendre, le HTML5 vous
permettra de coder votre contenue pendant que le
CSS le mettra en forme (couleur, choix des polices de
caractère, disposition des éléments …).
20 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
HTML : Historique
• HTML4 en 1999, beaucoup de changements depuis…
• Cooperation entre le World Wide Web Consortium
(W3C) et le Web Hypertext Application Technology
Working Group (WHATWG).
• WHATWG travaillait sur de nouveaux formulaires et
applications, le W3C sur XHTML 2. En 2006, ils ont
décidé de coopérer pour créer HTML5.
21 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le W3C
• W3C : World Wide Web Consortium (1994)
– TBLee, fondateur du W3C et inventeur du HTML
– Chargé de promouvoir la compatibilité des
technologies dans les navigateurs
– 378 entreprises membres qui peuvent faire des
propositions (Microsoft, Apple, Mozilla, Opera,
Adobe, etc.)
– Proposent un validateur http://validator.w3.org/
22 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le WHATWG
• WHATWG : Web Hypertext Application Technology
Working Group (2004)
– Collaboration non officielle de développeurs de
navigateurs
– Tentative de réponse à la lenteur des standards du
W3C
– Mozilla Foundation, Opera, Apple, etc.
23 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Générer du HTML avec un éditeur
Blocnote ou TextEdit, si vous
n’avez rien d’autre sous la
main :
• Pas de coloration syntaxique
• Nécessite de connaître tout
le langage
24 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Brackets.io
• http://brackets.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration
syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
25
Atom
• https://atom.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration
syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
26
D’autres éditeurs
• Coda : uniquement sur Mac (payant) http://panic.com/coda/
• Geany (Windows) gratuit
http://www.geany.org/Download/Releases
• Notepad ++
• Komodo (Windows et Mac)
http://www.activestate.com/komodo-ide
• Netbeans (Windows et Mac) gratuit http://netbeans.org/
27 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les éditeurs « WYSIWYG »
• What You See Is What You Get
• Permet de visualiser le rendu
directement
• Code parfois pas toujours propre ou
optimisé
• Exemple : Dreamweaver (payant),
Blue Griffon (gratuit)
28 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Générer du HTML depuis un CMS
• CMS : Content Management System ou systèmes de
gestion de contenu
• Développé dans un langage de programmation web (ex
: PHP) et fait appel à une base de données (ex : SQL)
• Éditeurs « visuels
» sans avoir
besoin de
notions de code
• Ex : WordPress,
Drupal, Joomla, etc.
29 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La syntaxe HTML : balises,
éléments et attributs
33
Le principe de balise
• En HTML5, les balises sont partout. Pour preuve, un
fichier HTML commence par une balise et finis par
une balise.
• Chaque balise à un nom qui lui est propre. Prenons
comme premier exemple la balise P. Le nom de cette
balise est le diminutif de Paragraph – le nom des
balise est toujours en anglais.
34
Le principe de balise
• Les balises structurent le contenu de la page (texte, images, etc.)
• Chaque balise a un rôle et donne du sens au contenu présenté
<
> *
o
l e
n l
34
a n
o t
Initiation nHTML CSS - Stéphanie Walter i- 2016 /
Le principe de balise
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
<p> Hooo un bloc !! </p>
<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>
33 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le principe de balise
• Touche < du clavier pour ouvrir : <
• Touche maj + < pour fermer : >
• Le nom des balises est prédéfini dans les spécifications HTML, on
ne peut donc PAS en inventer !
• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>,
etc.
34 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le principe de balise
• Par convention et pour faciliter la lecture du code, toute balise
ouverte doit être fermée (sauf exception).
• Certaines balises bien particulières n’ont pas besoin d’être fermées,
on les dit « auto-fermantes », elles n’ont ni contenu ni balise
fermante.
• Note : je mets le / final par convention, mais pas obligatoire.
<
i
g
37 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Attributs et valeurs
• Certaines balises peuvent être complétées par des attributs
précisant certains paramètres (l'adresse des liens, source d'une
image à afficher, etc.)
• Une balise peut contenir plusieurs attributs
36 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Attributs et valeurs
! Les attributs sont des éléments prédéfinis dans le HTML on ne peut
en « inventer »
! On peut les mettre entre simple quote, double quote ou rien. Par
convention nous choisissons les doubles quotes " "
<div id="kittens"> // <div id=kittens>
! Les attributs sont toujours dans la balise ouvrante
37 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemples d’attributs
! src=" " : donner la source (d’une image par exemple)
– <img src="monimage.png" width="400" height="250" alt="image
de chatons" />
! href=" " : donner la destination d’un lien
– <a href="http://www.google.fr"> Texte du lien
</a>
38 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemples d’attributs
! id=" " : donner un identifiant à l’élément que l’on pourra utiliser en
CSS.
Les Ids doivent être uniques par page
– <p id="monid"> contenu </p>
! class=" " : donner une classe à l’élément que l’on pourra utiliser en
CSS.
Les classes peuvent être dupliquées sur la page
– <p class="maclasse"> contenu </p>
39 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Doctype, html, body : structure
d'un document valide
42
Structure d’un document HTML simplifié
Décomposons balise par balise !
41 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La notion de doctype
• Permet au navigateur de savoir quelle version de HTML (ou
XHTML) est utilisée sur la page
• Obligatoire pour valider une page (validateur W3C)
• Pas de doctype = « Quirks » mode : le navigateur fait ce qu’il peut
avec ce qu’il trouve, en mode rétro-compatibilité => peut
expliquer certains bugs sur IE
<!doctype html>
42 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le doctype HTML5
• Plus simple, plus concis
• «Future proof» : autant commencer aujourd’hui !
• <!doctype html>
• Vous pourrez utiliser des éléments HTML5 qui sont finalisés
Le DOCTYPE qu’il vous faut
43 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <html>
• Tout document HTML commence par la balise <html> qui se ferme
en fin de document : </html>
• La balise <html> contient nécessairement deux balises définissant
l'entête (<head>) et le corps (<body>) du document.
44 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L'attribut lang
• Permet de spécifier la langue de traitement du document global
– Indexation dans la bonne langue par les moteurs de recherche
– Synthèse vocale
– Vérification orthographique des formulaires
<html lang="fr">
Spécifier la langue d’un document (X)HTML
45 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <head>
• Détermine l’entête du document et contient les méta-informations
46 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <title>
• On y trouve la balise <title> qui sera le titre du document
– Sert en référencement (repris dans les résultats de
recherche)
– Affichée dans l’onglet du navigateur
47 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <head> : les balises meta
• On y ajoutera également les appels pour les feuilles de style CSS et
certains JavaScripts
• On peut y trouver des balises « meta » parmi lesquelles
– <meta charset="UTF-8"/> : permet de définir l’encodage de caractère
de la page (à mettre directement sous le <head>)
A quoi servent les balises META
48 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <head> : les balises meta
– <meta name="description" content="description pour le
référencement"/> affiché dans les résultats de recherche
49 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <body>
! Délimite le contenu de la page
! Le contenu est constitué de texte, images et autres éléments qui
seront affichés
<body>
Contenu de la page
</body>
50 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En résumé
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Titre de ma page </title>
</head>
<body>
Contenu de la page
</body>
</html>
53
C’est valide !
! La validation reste un outil et non une fin en soi, mais un code
non valide a des chances de poser des soucis plus tard
54 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les commentaires dans le HTML
Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
53
Les éléments de structuration
du contenu
54
La balise paragraphe <p>
55 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise paragraphe <p>
• Les paragraphes sont des éléments de type « bloc », suivis d’un
passage à la ligne et d'une marge par défaut
• On peut imbriquer un paragraphe dans un div
• On ne doit PAS mettre un paragraphe dans un paragraphe
56 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Espaces insécables
57 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Espaces insécables
• Il existe des entités HTML pour encoder certains caractères
spéciaux comme les espaces insécables :
Caractères spéciaux et entités HTML
58 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
D'autres entités HTML
copypastecharacter.com
59 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les titres h1 – h6
Bien construire sa hiérarchie de titres
60 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les titres h1 – h6
• Il existe six niveaux de titre <h1> <h2> <h3> <h4><h5> et <h6>
(pas un de plus ! )
• Un nouveau niveau provoque un passage à la ligne, les éléments
de titre étant des éléments de bloc.
• La hiérarchisation visuelle est automatique (peut être modifiée via
CSS)
• Il est possible d’avoir plusieurs titres de même niveau
• On ne peut pas mettre un Hn dans un p, ou un p dans un Hn
61 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Blockquote, une citation
62 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Blockquote, une citation
• La balise <blockquote> marque une citation
• Une citation est suivie d'un retour à la ligne
63 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple de blockquote stylée
https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
64 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise « division » <div>
65 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise « division »<div>
• <div> est un conteneur
• Cette balise n’a aucune valeur sémantique (aucun « sens »)
• Élément de type bloc qui peut inclure n’importe quel autre balise
HTML
• Suivi d’un passage à la ligne
• Permet de regrouper d’autres blocs de HTML (paragraphes,
tableaux, etc.) et de leur donner un style CSS commun
66 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Grille en div
67 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les éléments de « mise en
forme » de texte
68
Éléments en ligne « inline »
• Ces éléments sont des éléments dit « inline »
• On les place autour du contenu (et du texte)
• Ne crée pas de retour à la ligne
• Servent à donner du sens aux parties du texte/contenu
69 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’ élément <strong>
70
L’ élément <strong>
• <strong> élément sémantique qui marque du texte comme comme
fortement mis en valeur
• « en gras » par défaut dans les navigateurs
71 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’ élément <em>
72 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’ élément <em>
• <em> balise sémantique qui marque du texte comme en emphase
(mis en évidence) sert à « insister » sur une partie du texte
• en « italique» par défaut
73 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’ élément <span>
74 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’ élément <span>
• Un élément « générique » structurant de type « inline »
• Permet de styler facilement des morceaux de texte en CSS
• Par défaut affiche son contenu sans le modifier
• Aucune valeur sémantique
• (l’équivalent d’un div, en ligne)
75 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
D’autres éléments
• L'élément <sup> permet d’afficher un texte exposant
L'élément <sub> permet d’afficher un texte en indice
• L'élément <small> représente des annotations et des petits
caractères comme les informations légales ou liées au copyright
76 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les liens dans les documents
HTML
77
Fonction d'un lien
• Le lien est un élément cliquable qui renvoie l’utilisateur sur une
nouvelle page (ou lui permet de télécharger un fichier)
• Il est souvent stylé différemment (bleu souligné par défaut)
• Il peut renvoyer :
– vers un autre site (lien externe)
– vers une autre page du site (lien interne)
– vers des fichiers (image, .PDF, etc.)
78 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <a>
• On appelle « ancre de lien » le texte à l’intérieur de la balise
• On ajoute l’attribut href="cible_du_lien" pour indiquer vers quelle
page on veut envoyer l’utilisateur
• On peut ajouter l’attribut title="titre du lien" pour ajouter une
infobulle au survol et indiquer à l’utilisateur où il va arriver
<a href="index.html" title="titre"> Ancre du lien</a>
79 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <a> pour les liens
80 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Lien externe vers un autre site
• La cible sera l’url (ou adresse) complète du site, http:// compris
• Il s’agit d’un lien absolu car on indique l’adresse complète
<a href="http://www.google.fr" title="Moteur de recherche
google"> lien externe vers google </a>
81 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Liens internes et hiérarchisation du site
• Un site est constitué d'un ensemble de pages au sein d'un dossier
(appelé racine du site).
• Ces pages peuvent être organisées dans une hiérarchie de sous-
dossiers.
82 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Liens internes et hiérarchisation du site
• Par convention, le fichier « racine » sera appelé index.html.
• C’est lui qui est affiché en priorité s'il existe quand l’utilisateur
demande le dossier.
83 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exercice !
• Créez un dossier « mon_premier_site »
• Créez y index.html
• Placez-y un second fichier appelé page1.html
86
Lien vers un fichier du même répertoire
• Lorsque deux fichiers sont dans le même répertoire, il suffit
d’appeler le nom du fichier comme cible.
• Ce sont des liens relatifs, car relatifs au site et dossier dans lequel
ils se trouvent.
<a href="page1.html" title="ma 1ere page"> ma page</a>
<a href="index.html" title="accueil du site">l'accueil</a>
85 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mon premier site
86 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exercice !
! Ouvrez index.html, ajoutez lui un titre h1 et ajoutez un lien vers la
page1.html
87
Exercice !
! Ouvrez page1.html, ajoutez lui un titre h1 et ajoutez un lien de
retour à l’index
88
Exercice !
! Ajoutez un répertoire « page_interne »
! Ajoutez-y une page « page2.html »
89
Liens vers un autre répertoire
• On peut avoir des répertoires et sous-répertoires
• On ajoute le nom du répertoire pour descendre : monrepertoire/
mapage.html
• On ajoute ../ pour remonter si on se trouve dans un sous
répertoire :
../index.html
90 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Descendre dans un sous répertoire
! Depuis la racine index vers page2 :
<a href="page_interne/page2.html">page 2</a>
! Si on avait d’autres sous-répertoires :
<a href="page_interne/autre_sous_rep/page2.html">page 2</a>
91 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Remonter d’un répertoire
! Depuis la page2 vers la racine :
<a href="../index.html"> l'accueil</a>
! Si on veut remonter plusieurs répertoires (autant de ../ que de
répertoires:
<a href="../../index.html"> l'accueil</a>
92 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mon premier site
93 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exercice !
• Ouvrez index.html et ajoutez un lien vers la page page2.html du
sous dossier page_interne
94
Exercice !
• Ouvrez page2.html, ajoutez lui un titre h1 et ajoutez un lien de
retour vers l'accueil (index.html) en remontant d'un dossier
95
Ouvrir un lien dans un nouvel onglet
! L’attribut target="_blank" permet d’ouvrir un lien dans une nouvelle
fenêtre/onglet en fonction du navigateur
<a href="index.html" target="_blank" >
! Laisser l'utilisateur garder le contrôle de son navigateur ?
96 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Des liens « internes » ou ancres internes
! Comme dans Word, permet de renvoyer l’utilisateur à l’intérieur
d’une page
! La cible est définie par un id="ancre_du_lien"
! On utilise <a href="#ancre_du_lien"> pour créer le lien
!
Utilisé pour les liens « retour en haut de page », wikipedia, etc.
!
L’ancre apparaît dans l’url :
https://fr.wikipedia.org/wiki/
Hypertext_Markup_Language#Description_de_HTML
97 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
http://www.visuodesign.com/
100
Un lien vers une adresse mail
! <a href="mailto:[email protected]"> permet
de créer un lien qui ouvrira automatiquement
le client mail de la personne (à éviter car mail
en dur donc récupérable pour spam =>
formulaire de contact )
! <a href="tel:13371337"> : permet de définir un
numéro de téléphone à appeler
101 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les éléments de liste
102
Les listes non ordonnées <ul>
101 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les listes non ordonnées <ul>
• La balise <ul> permet de créer une liste non ordonnée (unordered
list). Il faut l’ouvrir en début de liste et la fermer après le dernier
élément de la liste
• La balise <li> permet de créer UN élément de la liste
102 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les listes ordonnées <ol>
103 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les listes ordonnées <ol>
• La balise <ol> permet de créer une liste ordonnée et numérotée
(par défaut dans le navigateur). Il faut l’ouvrir en début de liste et la
fermer après le dernier élément de la liste.
• La balise<li> permet de créer UN élément de la liste
104 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Contenu d’une liste
• Les éléments <ul> et <ol> ne peuvent contenir que des éléments
<li>
• Chaque élément <li> peut contenir des éléments de bloc ou des
éléments incorporés (p, div, blockquote, h1, etc.).
• Les listes peuvent s'imbriquer
• On peut mélanger <ul> et <ol> à condition de les fermer
correctement
105 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple d’imbrication
106 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple d’imbrication
107 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les listes en pratique – les onglets
http://getbootstrap.com/javascript/#tabs
108
Les listes en pratique – les navigations
http://www.mobify.com/
109
Les listes en pratique – • http://
les navigations flexslider.woothemes.com
/
112 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Ajouter des images avec la
balise <img>
113
Le format JPEG- Joint Photographic Experts Group
• Le JPEG (.jpg, .jpeg) :
format compressé qui réduit
le poids des images pour le
web (donc temps de
chargement
=> Pour la compression avec pertes très efficace pour des images
photographiques
112 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le format GIF - Graphics Interchange Format
• Utilise 256 couleurs
• Compression sans perte basée sur la succession de pixels de
même couleur
• Couleur de transparence sans couche alpha
• animation
• extension .gif
• => Utilisé pour les logos
http://lesjoiesducode.tumblr.com/
113 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Quelques jolis GIFs
http://bisouslescopains.tumblr.com/
114 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le format PNG - Portable Network Graphics
• PNG8 : 256 couleurs, utilisé pour
les images nécessitant peu de
couleurs et motifs répétitifs
• PNG24 : 16 millions de couleurs,
transparence extension .png
• => Utilisé pour les icônes, logos et
fichiers qui ont besoin d’un fond
transparent
115 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En résumé
• Une photo : un JPEG
• Une illustration avec peu de couleurs sans transparence
importante : PNG8
• Une illustration avec beaucoup de couleurs : PNG24
• Une image animée : GIF
116 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Compresser une image JPEG outils
• En ligne :
– https://imagify.io/ outil en ligne avec traitement
par lots
– https://tinypng.com/ jusqu’à 20 images en même temps
• En Local :
– https://imageoptim.com/fr.html sur mac PNG et JPG
– http://luci.criosweb.ro/riot/ sur windows, PNG et JPG
– http://pnggauntlet.com/ sur windows, PNG et JPG
• Photshop, Fireworks, etc.
117 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <img>
• Balise de type inline : pas de retour à la ligne, peut-être insérée
dans le corps du texte. On la place généralement dans un <p> ou
un <div> mais peut se placer n’importe où dans le body
• Balise auto-fermante
<img src="ref_image" alt="description de l’image" />
118 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <img> et source de l'image
• Un attribut src="image.jpg" pour donner le chemin vers la source
de l’image
– chemin sur le serveur
– url de stockage
– même principe que pour les liens
119 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <img> et attribut « alt »
• Un attribut alt="description du contenu de l'image" texte
alternatif qui décrit le contenu de l’image et la remplace si l’image
n’est pas téléchargée
120 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <img> et attribut « alt »
• L'attribut est obligatoire, mais il peut être vide pour les images
décoratives
– Lu vocalement par les lecteurs d'écran
– Aide les personnes en situation de déficience visuelle à
comprendre
121 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Attributs width et height
• Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
• Sans width/height le navigateur « devine » la taille ce qui crée des
sauts de page quand l’image se charge
• En général, il vaut mieux la redimensionner avant dans un logiciel,
plutôt que charger une grande image et la rétrécir (performance)
• Attention à garder les proportions !
<img src="monimage.jpg" alt="description de l’image" width="300" height="450" />
122 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple
123 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L'attribut title
Attribut facultatif qui permet d’afficher une info-bulle au survol de l’image
124
Bonus : intégrer une vidéo
• La plupart des sites de vidéo
proposent une intégration
via iframe qui se présente
sous cette forme :
<iframe width= …> … </
iframe>
• Il faut donc retrouver l’endroit
où le site propose l’iframe
125 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bonus : intégrer une vidéo
126 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bonus : intégrer du son
• Beaucoup de sites de partage
audio proposent également
une intégration via iframe.
• Même principe que pour les
vidéos : on récupère le code
de l’iframe et on le colle sur
notre site
127 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bonus : intégrer du son
130 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
D’autres types d’iframe
• Généralement les sites qui vous proposent d’intégrer leur contenu
vont vous proposer une iframe. C’est le cas par exemple de :
– Google maps pour des cartes interactives
– Slideshare pour partager des diaporamas et présentations
– Vimeo, un autre service de partage de vidéos
– Les boites de partages de réseaux sociaux comme Facebook
131 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les tableaux HTML
130
Les tableaux, introduction
• Un tableau sert à organiser des informations structurées sous forme
tabulaire
• Il se compose de lignes organisées elles-mêmes en cellules
131 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Créer un tableau : <table>
! La balise <table> </table> permet d’indiquer le début et la fin du
tableau.
! La balise <tr> caractérise une nouvelle ligne
! La balise <td> marque le contenu d’une cellule dans une ligne
132 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple de tableau simple
133 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple de tableau simple
! Le nombre d'éléments <td> au sein des éléments <tr> doit rester le
même dans la mesure ou chaque ligne possède un même nombre de
cellules, nombre qui correspond au nombre de colonnes du tableau.
134 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Un avant-goût de CSS
• Pour la suite et y voir plus clair, nous allons ajouter une bordure à
notre tableau avec la propriété CSS
135 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Ajouter une entête avec ! <th> peut remplacer <td>
<th>
pour créer une cellule
d’entête au tableau
! Par défaut affiché en gras
et centré dans les
navigateurs
136 Initiation HTML CSS - Stéphanie Walter - 2016 /
2017
Ajouter un titre au ! On utilise <caption> pour
tableau
donner un titre au
! tableau
La balise se place au
début du tableau
137 Initiation HTML CSS - Stéphanie Walter - 2016 /
2017
Bonus - Fusion de ! Il est possible de fusionner
cellules certaines cellules entre elles avec
l’attribut colspan="
nombredecellules" qui se place
sur la cellule (th ou td)
! La valeur numérique de cet
attribut précise le nombre de
colonnes du tableau que
couvre la cellule.
140 Initiation HTML CSS - Stéphanie Walter - 2016 /
2017
Bonus - Fusion de • Il est possible de fusionner
lignes des lignes avec l’attribut
rowspan="
nombredelignes" qui se
place sur la cellule (th ou td)
141
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les formulaires
142
Les formulaires sont partout autour de nous
• Le formulaire sert à récupérer des données que l’utilisateur va
entrer et les envoyer au serveur pour un traitement (en PHP par
exemple) : login, formulaire de contact et même le chat de
141 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La balise <form>
• Balise principale du formulaire
• Deux méthodes :
– method="get" : limitée à 255 caractères, informations passées dans la
barre d’adresse
– method="post" : envoie les données dans le corps de la requête sans
passer par la barre d’adresse, c’est la méthode la plus utilisée
• Action : l’adresse du fichier ou programme qui va traiter les
données
<orm method="post" >
142 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Exemple de la balise form en action
Par défaut si elle est vide, c’est comme n’importe quel élément, rien n’est affiché
145
La zone de texte monoligne <input>
! La balise input est auto-fermante
! Ne génère pas de retour à la ligne.
! Il faut lui donner un nom avec l’attribut « name » pour que l’on
puisse récupérer sa valeur (éviter les espaces dans le name). Le
nom n’est PAS visible sur la page
144 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le label
! Son rôle est de décrire à un être humain la fonction du champ
(puisque name est invisible)
! Ajouter un for="nom" au label
! Ajouter id="nom" au champ
145 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Associer le label au champ
• Permet à l’utilisateur de cliquer sur le label pour sélectionner le
champ (le for et l’id doivent être identiques mais peuvent être
différents du name)
• Balise inline, pas de retour à la ligne
146 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L'attribut « value »
! value=" " : donne une valeur par défaut au champ
! Vide (ou inexistant) si on n'a pas de données récupérées dans la
base de donnée du site
147 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L'attribut « value »
150 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En résumé pour n'importe quel champ il faut toujours au
moins
• Un label (avec un for=" ")
• Un champ avec :
– Un id (qui a la même valeur que le for)
– Un name pour entrer la valeur dans la base de donnée
• Facultatif : un attribut value (qui peut être vide) pour récupérer la
valeur dans la base de donnée
149 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Attributs supplémentaires
! maxlength=" " : le nombre de caractères maximum acceptés
dans le champ
150 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les placeholder (ne sont pas des labels ! )
! placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.
Attention, ne remplace PAS le label
! Pas supportés partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un polyfill)
153
Zone de texte multiligne <textarea>
• Une balise qu’il faut ouvrir et fermer
• Pas de retour à la ligne automatique
152 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Attributs utiles pour textarea
• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
153 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les cases à cocher <input type="checkbox">
• Une case = une option = un input
• Plusieurs cases, toutes peuvent être cochées
• Éléments inline
• On peut mettre le label à gauche ou à droite
154 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les cases à cocher <input type="checkbox">
! Les cases à cocher peuvent avoir un attribut name distincts, ou identique
! Si la cache est cochée, il renvoie « on » lors du traitement, ou peuple le tableau PHP de sa valeur
(value)
155
Les cases à cocher <input type="checkbox">
On peut pré-cocher une checkbox avec checked="checked" ou just checked
156
Les boutons radio <input type="radio">
• Une case = une option = un input
• Un seul choix possible parmi tous les éléments
• Éléments inline
159 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les boutons radio <input type="radio">
• La value est importante : c’est elle qui est renvoyée au serveur
• value="femme" : on renvoie donc « femme » au serveur
169 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Groupe de boutons radio
! Pour que le navigateur comprenne que des éléments forment un groupe, il faut leur donner le
même attribut name
! On peut pré-cocher un bouton radio avec checked="checked"
161
Les listes déroulantes <select>
160 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les listes déroulantes <select>
! La liste se trouve entre les éléments <select id="nomdeliste"> </
select>
! La balise <label for="nomdeliste"> permet de donner le nom de
la liste et est liée à <select>
! On crée un objet de la liste avec la balise <option> Nom </
option>
! L’attribut value permet de donner la valeur de l'option de la liste
161 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bouton d’envoi input type="submit"
! Pour envoyer le formulaire on utilise input type="submit"
! L’attribut value=" " est obligatoire et permet de donner le « titre » du
bouton
! Le formulaire est envoyé pour traitement au fichier que l’on a défini
dans action=" "
162 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Petit résumé des
champs
input type = text
input type = checkbox
input type = radio
input type= submit
select + option
textarea
165
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bouton de reset, input type="reset"
• Pour remettre à zéro toutes les données du formulaire on utilise
input type="reset"
• Merci de ne pas en abuser.
164 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bouton <button type="button">
! Syntaxe différente de la balise input
!
Possibilité d'ajouter des images à l'intérieur (balise non auto-fermante)
!
Trois types :
– button : bouton cliquable (utilisable en JavaScript)
– reset : remettre à zéro le
– formulaire submit : envoyer le
formulaire
165 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bouton <button type="button">
http://getbootstrap.com/javascript/#modals
166 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Désactiver un champ : disabled="disabled"
! L’attribut disabled="disabled" peut-être utilisé pour désactiver un
champ.
! Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les données
soient remplies
! Note : on peut aussi juste mettre disabled en attribut
167 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Désactiver un champ : disabled
! Note : on peut aussi juste mettre disabled en attribut
170 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les champs de mot de passe <input type="password">
! input type="password" : permet de masquer un mot de passe
169 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Uploader un fichier : type = file
! Pour télécharger vers le serveur un fichier on utilise input
type="file"
! Si on envoie un fichier, il faut permettre au formulaire d’envoyer des
données avec l’attribut enctype="multipart/form-data" sur l’élément
form.
170 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Cacher un champ type="hidden"
! On peut cacher un champ avec input type="hidden"
! Permet d’envoyer des données sans que l’utilisateur ne doive les
remplir ou ne les voie.
171 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Liste non exhaustive de quelques balises
! body ! form
! div ! table
! p ! iframe
! h1- h6 ! etc.
! ul
! ol
! li
! bl
o
c
k
Memento des balises HTML
q
172
u Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
CSS : Introduction et notions
de base
175
CSS : Cascading Style Sheets
• CSS : feuille de style en cascade
• Permettent de générer la présentation d’une page HTML : séparer
la structure (HTML) de sa présentation (CSS)
• Ensemble de règles stylistiques applicables à un, ou plusieurs
documents HTML => gain de taille du fichier HTML
• Facilite la mise à jour graphique, favorise l’accessibilité
• Gestion des différents médias possible (print, screen, mobile
etc.)
174 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
CSS : Cascading Style Sheets
• csszengarden.com: le même contenu, et différentes présentations
175 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En bref
• Couleur de texte, image de
fond, style de police, menu à
gauche ou à droite : c’est
CSS qui va contrôler tout ça
176 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Un peu d’histoire
• Le CSS est né en 1996
• Avant, on utilisait des balises de présentation directement dans le
HTML
• CSS1, CSS2, CSS3 aujourd’hui la version finalisée est CSS3.1
177 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Différents rendus entre les navigateurs
• C’est le navigateur qui va interpréter le CSS, des différences de
rendu sont donc possibles.
• Le pixel perfect n’existe pas !
R
e
n
180
d
Différents degrés de compréhension
• Certains navigateurs ne connaissent pas (encore) toutes les
propriétés
• Tester le rendu graphique sur le plus de navigateurs
possibles
Caniuse donne des listes de
compatibilité de certaines
propriétés
179 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Tester sur différents navigateurs
https://www.browserstack.com/
180 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Et pour Internet Explorer ?
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
183
Console de debug : clic droit + inspecter
184 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Et pour Internet Explorer ?
• Outils de développement intégrés avec la touche F12
• (toolbardepuis IE6, inclus depuis IE8)
185 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Web Developer
• Pour Firefox et Chrome
• Gestion des images, du JavaScript
• Redimensions, outils de mesure, de formulaires et de gestion des cookies
• Validation locale du HTML et CSS
184 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Appliquer un style, oui
mais où ?
185
Le CSS “en ligne” dans la balise HTML
! Attribut style = …;
! « Je veux des titres roses
»<h1 style="color:pink;" >
! Et des sous titres avec une couleur de
fond violette
<h2 style="background-
color:purple">
186 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Problèmes de maintenabilité
• Et si je veux appliquer un style à tous les titres ?
• Et si je veux changer tous les titres d’un coup ?
• Long et fastidieux
• MAIS c’est comme ça que le JavaScript inject du CSS donc vous
risquez de le voir dans l’inspecteur d’élément.
187 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le CSS « interne» dans l’entête du HTML
! On place une balise <style> dans la balise <head> du document
! Changer la couleur de tous les titres H2 en blanc :
<style type="text/css">
h2{
color: #fff;
}
</style>
190 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le CSS « interne» dans l’entête du HTML
! Avantage :
– Possibilité d’appliquer une règle sur tous les mêmes éléments d’un
même document
! Inconvénient :
– Ne s’applique qu’à ce document, et non au site en entier
– Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages,
modifier les styles sur les 10 fichiers)
• MAIS certains plugins de CMS (WordPress par exemple) mal conçus
l’utilisent encore. Vous le verrez aussi dans le code de newsletters.
189 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La/les feuille(s) de style externe(s)
! Nous utiliserons les mêmes conventions de chemin que pour les
images et pages
! Création d’un nouveau fichier appelé « styles.css » (notez
l’extension .css ici) et on lie la feuille de styles au HTML
! On « lie » la feuille de style au document HTML avec une balise
<link>dans le <head>
<link rel="stylesheet" href="styles.css"/>
190 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La feuille de style externe
index.html
styles.css
191 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La feuille de style externe
• Avantages :
– Séparation totale de la structure
et de la présentation :
possibilité d’avoir des
présentations alternatives
– Possibilité d’appliquer la même
feuille de style sur plusieurs
pages (donc le site en entier)
sans devoir la dupliquer
– Cohérence de la présentation sur
tout le site et les pages futures.
192 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Récapitulatif
! index.html : pour le
contenu
! styles.css : pour la mise
en page / présentation
193 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La syntaxe CSS
194
La syntaxe de base
! La syntaxe est composée de 3 éléments :
– Le sélecteur est l’élément sur lequel on applique les propriétés (balise
HTML, id, classe, etc.)
– La propriété est l’effet que l’on va vouloir donner (ex couleur de texte,
positionnement, couleur de fond, etc.)
– La valeur de la propriété CSS (rouge, 10px, etc.)
selecteur {
propriete: valeur
propriete:
valeur
...
}
197 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
La déclaration CSS
! On appelle « une déclaration CSS » l’ensemble propriété +
valeur . On peut en avoir plusieurs pour un même élément et elles
sont séparées par le symbole point virgule
e
l
198
c Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les commentaires CSS
• Pour créer un commentaire CSS, on utilise
/* commentaire */
• Le commentaire n’est pas visible dans le navigateur
• Sert au développeur à prendre des notes, laisser des messages
aux autres et savoir à quoi servent les lignes de code
199 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Généalogie et différents
types de sélecteurs
200
Le sélecteur usuel d'élément HTML
! On peut sélectionner n’importe quel élément HTML et lui appliquer
un style.
! Une propriété appliquée sur un élément HTML, s’applique par
défaut à tous les éléments présents dans le document
HTML.
p{
color : blue;
}
=> Tous les paragraphes auront une couleur de texte bleu
201 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Hiérarchie et généalogie
200 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Hiérarchie et généalogie
201 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Notion d’enfant et de descendance
• h1, p, h2, p sont enfants de
div
• a, strong et em sont enfant du
p dans lequel ils sont
contenus (mais pas de l’autre
p)
• a, strong et em (et h1, p, h2
et p) sont descendants de div
202 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Notion de parent et d'ancêtre
! div est parent de h1 p, h2, p
! Le 2ème p est parent de a,
strong et em.
! div est ancêtre de a,
strong et em (et de h1, p
h2 et p)
203 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Sélecteur de hiérarchie
! Pour sélectionner le a
descendant de p, nous allons
pouvoir écrire :
pa{…}
(notez l’espace entre le p et le
a)
204 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Sélecteur de groupe
! Pour sélectionner plusieurs
éléments et leur appliquer la
même valeur, on les sépare
par une virgule.
h1, h2 { color: red; }
=> Va donner la couleur rouge à
tous les h1 ou h2
205 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les sélecteurs de classe
! class=" " est un attribut qui peut se mettre sur n’importe quelle
balise
Il permet de cibler de manière plus « spécifique » certains
éléments
<p class="important"> Un paragraphe
spécifique qui est mis en avant </p>
206 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les sélecteurs de classe
207 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Classes multiples
! Il est possible d’avoir plusieurs classes sur un élément, on les
sépare d’un espace.
<p class="remarque important"> Une remarque mis en avant </
p>
210 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Classes multiples
209 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Classes multiples
! Une même classe peut être utilisée sur plusieurs balises dans le
même document
<p class="remarque"> une remarque paragraphe</p>
<blockquote class="remarque "> une remarque citation</
blockquote>
210 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Classes multiples
211 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Cibler une classe indépendamment de la balise
! Si on veut cibler une classe, sans se préoccuper de la
balise on utilise le « point ».
.nomdeclasse { }
212 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Cibler une classe indépendamment de la balise
! Par exemple .remarque { } va cibler
<p class="remarque"> … </p>
<blockquote class="remarque"> …. </blockquote>
Une même classe peut être utilisée sur plusieurs balises HTML
213 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Cibler une balise HTML avec une classe
! Pour cibler un élément doté d'une classe en CSS on procède de la
manière suivante (notez qu’il n’y a pas d’espace)
element.maclasse { }
! Par exemple : p.toto { } va cibler tous les éléments comme celui-
ci :
<p class="toto"> … </p>
214 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Cibler une balise HTML avec une classe
! Et button.btn.btn-default{ } va cibler
<button type="button" class="btn btn-default"> … </button>
Si l'on met plusieurs classes et un élément sans espace dans la
déclaration, il faut donc que TOUTES les conditions soient
vrais
http://getbootstrap.com/css/#buttons
215 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
L’id (identifiant)
! Il a le même rôle qu’une classe, mais doit être unique sur la page
(donc on va moins l’utiliser)
! Un seul attribut id par balise est possible
!
On le note <element id="monid">
!
On le cible en CSS avec #monid { }
216 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Un joyeux mélange !
! Il est possible de mélanger balise, id, classe et hiérarchisation :
p#monid.maclasse { }
! Souvent cela crée du CSS trop spécifique, donc la bonne pratique
veut que l’on est le moins spécifique possible.
217 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Espace ou pas ?
! Pas d’espace signifie que toutes les conditions DOIVENT être
vraies
! p.toto { } cible tous les paragraphes ET qui ont une classe « toto »
<p class="toto"> ... </p>
220 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Espace ou pas ?
! Un espace entre deux « sélecteurs » détermine la généalogie :
p .toto { } cible tous les éléments qui ont pour classe « toto » et qui
sont descendants d’un paragraphe
<p> …. <a class="toto"> … </a> </p>
<p> …. <span class="toto"> … </span> </p>
<p> …. <em class="toto"> … </em> </p>
...
219 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Convention de nommage
! Un nom de classe ou d'ID ne doit pas avoir d'accent ou caractères
spéciaux
! On a tendance à éviter le « tout majuscule »
! Un nom d'ID ne prend jamais d'espace
! Un nom de classe ne prend pas d'espace, sinon c'est une nouvelle
classe
220 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En résumé
CSS HTML ciblé
p{} <p> …. </p>
.maclasse { } <element class="maclasse"> ... </element>
#monid { } <element id="monid"> ...
</element>
p.maclasse { } <p class="maclasse"> … </p>
<p> <element class="maclasse"> …. </element>
p .maclasse { }
</p>
<p> … <p>
p, div { }
<div> … </div>
221 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Qui est ciblé ?
div {
...
}
.first {
...
}
p.first {
...
}
222 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Qui est ciblé ?
.sugar {
...
}
.sugar p {
...
}
p.sugar {
...
}
223 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Qui est ciblé ?
h1 #hautpage {
...
}
h1#hautpage {
...
}
224 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Qui est ciblé ?
.first a {
...
}
.first .sugar {
...
}
.important, #toffee {
...
}
225 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
flukeout.github.io
228 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les pseudos-classes sur les liens
! Le sélecteur a:link désigne les liens hypertextes non visités.
!
Le sélecteur a:visited désigne les liens hypertextes déjà visités
!
Le sélecteur a:hover désigne un lien survolé.
! Le sélecteur a:active désigne un lien cliqué.
! Pour retenir l’ordre : LoVe Hate : link, visited, hover, active
229 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Démonstration de :hover sur du bouton
http://tympanus.net/Development/CreativeButtons/
230
Les autres pseudo-classes
! :hover peut être appliqué sur d’autres éléments que des liens (à
partir de IE6).
! On peut écrire p:hover pour créer un effet au survol d’un
paragraphe par exemple
229 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Subtle Hover effects
230 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
:focus sur les liens et inputs
! :focus appliqué sur les liens, boutons, ou inputs lorsqu’ils « ont le
focus »
231 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Couleurs et unités CSS
232
La synthèse additive des couleurs
233 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les couleurs en CSS
236 Initiation HTML CSS - Stéphanie Walter -
2016 / 2017
Les couleurs en CSS
• Notation hexadécimale : #ffffff (blanc)
• Notation hexadécimale courte (qui est doublée pour obtenir la
version longue) : #fff
• Notation RGB : rgb(255,255,255) / rgba(255,255,255,1)
• Notation HSL : hsl(0, 0%, 100%); / hsla(0, 0%, 100%,1);
• Mot clé : white
E
237 Initiation HTML CSS - Stéphanie Walter - 2016 /
2 017
http://colours.neilorangepeel.com/
238
Les couleurs en CSS
• La couleur est une propriété utilisable sur :
– color
– background
– border
– …
• En savoir plus sur les couleurs >>
239 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Récupérer une couleur
• Colozilla ou Rainbow
• Copie automatique de la couleur dans le presse papier
• Choix de couleurs hexa, RGB, HSL, etc.
• Création de palettes de couleurs, etc.
249 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le Pixel - px
• Unité « fixe »
• Dépendance à la résolution du périphérique
• Valeur « compilée » finale en CSS
239 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le cadratin - em
• Unité fluide utilisée pour les polices d’écriture
• Sa taille est relative à la taille de la police de l’élément parent.
240 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Le cadratin - em
• Utiliser des polices en em permet de garder le rythme
typographique et les proportions entre les différents éléments
241 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Conversion d'em
http://pxtoem.com/
244
Le pourcentage : %
• Unités fluides (relatives à la taille de leur parent) :
– %: proportion relative à la dimension de l'élément parent ou la taille de
la police selon la propriété.
245 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
En web, quelle unité utiliser ?
• "px" pour exprimer une dimension fixe (indépendante de la taille de
la police)
• "em" pour attribuer des tailles de polices en fonction de la taille de
la police de leur parent.
• "%" pour attribuer des dimensions proportionnées aux dimensions
de l'élément parent.
Une mise en page fluide s'appuie généralement sur un
dimensionnement des éléments en pourcentage
P
o
246 Initiation HTML CSS - Stéphanie Walter -
Propriétés de typographie,
polices et puces
247
Font-family
body {
font-family: Arial, Helvetica, sans-
serif;
}
248 Initiation HTML CSS - Stéphanie Walter - 2016 /
2017
Font-family
! font-family : indiquer la (ou les) polices à utiliser
body { font-family: Arial, Helvetica, sans-serif;}
! L’ordre des polices appliquées est celui de la propriété de gauche à
droite
249 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Polices utilisables
• Il faut que la police soit présente sur le poste de l’utilisateur, sinon le
navigateur passe à la suivante.
• www.cssfontstack.com : liste des polices websafe par système
d’exploitation
• 21 familles de polices prêtes pour le Web
259 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Police utilisables
! @font-face permet l’utilisation de polices non « safe » :
– Attention au poids au téléchargement
– Attention aux licences
251
Polices utilisables
• Quelques ressources pour trouver des polices compatibles :
– Google Web Fonts API
252 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Polices utilisables
• http://www.fontsquirrel.com
• Autre outil : https://
everythingfonts.com/font-face
• Autre fonderie intéressantes :
https://typekit.com/
253
Font-size
body {
font-size: 18px;
}
254
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Font-size
! font-size : valeur en unité permet de définir la taille d’une police (=
la « hauteur »)
! On utilise les unités vues précédemment (px, em, etc.)
255 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mettre un
paragraphe en gras
p{
font-weight: bold;
}
256
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Font weight
! font-weight: valeur permet de déterminer l’épaisseur de la police.
!
Principales valeurs possibles : normal, bold (gras)
!
Permet de mettre en gras d'autres éléments
257 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Mettre le paragraphe
en italique
p{
font-style: italic;
}
258
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Font-style
! font-style : valeur permet de préciser le style de police
!
Principales valeurs possibles : normal, italic, oblique.
!
Permet de mettre en italique des éléments
259 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Augmenter
l’interlignage
body {
line-height: 1.5;
}
260
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Line-height
! line-height: valeur change l’interlignage
! Les valeurs possibles sont des valeurs numériques en unité de
mesure (px, em, %) mais il vaut mieux ne pas mettre d’unité du tout
pour garder plus de flexibilité.
261 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Color
h1 {
color: #008499;
}
262
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Color
! color: valeur permet de donner la couleur du texte
! Les valeurs possibles sont toutes les couleurs présentées
précédemment
261 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-align
! text-align : valeur permet d’aligner le texte à gauche, droite ou
milieu
! Les valeurs possibles sont : left, right, center, justify (comme sur
Word)
! L’alignement se fait sur le contenu des balises de type bloc
(paragraphes, titres, divs, etc.)
262 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-align
p{ p{
text-align: left; text-align: right;
} }
263 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-align
p{ p{
text-align: center; text-align: justify;
} }
264 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Astuce : centrer une image
Pour centrer une image, on la place dans p.align-center {
un paragraphe (ou une div) dont le text-align: center;
contenu est aligné au centre }
265 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-transform
! text-transform permet de transformer le texte en majuscule,
minuscule
! Valeurs possibles :
! none
! capitalize
! uppercase
!
lowercase
266 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-transform
h2 { h2 {
text-transform: none; text-transform: capitalize;
} }
267 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-transform
h2 { h2 {
text-transform: uppercase; text-transform : lowercase;
} }
270 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Font-variant
! font-variant : valeur permet de changer la casse de la police
! Principales valeurs possibles :
! normal
! small-caps
269 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Font-variant
h2 { h2 {
font-variante: normal; font-variante: small-caps;
} }
270 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-decoration
! text-decoration : valeur permet de changer différents valeurs de
« décoration »
! Valeurs possibles :
– none: permet d'empêcher l'héritage de la propriété et plus
particulièrement de supprimer le soulignement par défaut des liens
– overline : surlignement
– underline : soulignement
– line-through: texte barré
271 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Enlever le soulignement des liens et le remettre au survol
a{ a:hover {
text-decoration: none; text-decoration: underline;
} }
/* enlever le soulignement des liens par défaut */ /* remettre le soulignement pour les liens survolés */
272 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Text-
indent
! text-indent : valeur (négative ou positive) permet de spécifier un
décalage de la première ligne d’un texte
! Valeurs : unités de mesure de police, positif ou négatif
! Ne fonctionne que sur des éléments de type bloc (ou inline-block)
273 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Indentation de 10px
p{
text-indent: 10 px;
}
276 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Listes à puces
• list-style-type : permet de spécifier le type de puce ou de
numérotation (appliqué sur le ul / ol)
• Valeurs possibles
– none (pas de puce), disc, circle, square
275 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Listes ordonnées
• Valeurs possibles
– decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-roman (VII),
etc.
276 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Retirer les puces
ul {
li
st
-
st
yl
e-
ty
p
e:
n
o
n
279 e; Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Utiliser une image comme puce
ul {
list-style-image: url("img/liste.png");
}
278 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Utiliser une image comme puce
• list-style-image : pour utiliser une image personnalisée en
guise de puce
• Valeur : le chemin d’une image url("cheminimage");
279 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Bordures et arrières plans
280
Les bordures
! La propriété border permet d'ajouter une bordure à un élément
!
Elle a 3 « sous propriétés » possibles : style, color et width.
!
On regroupe souvent comme ceci :
border: width style color;
281 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les bordures
h2 {
border: 2px solid #009860 ;
}
282 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les bordures
! On peut décomposer les 4 bordures de la manière suivante :
border-top: …;
border-left: …;
border-right: …;
border-bottom: …;
! Si on ne précise pas à quelle bordure on applique la propriété, elle
s’applique aux 4.
283 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les bordures
h2 {
border-top: 1px solid gray;
}
284 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Style de bordure
! none : pas de bordure (par défaut);
! dotted : pointillés;
! dashed : tirets;
! solid : un trait simple;
! double : bordure double;
! groove : en relief;
! ridge : autre effet relief;
! inset : effet 3D global enfoncé;
! outset : effet 3D global surélevé.
285 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Des bords arrondis : CSS3 !
! border-radius : valeur permet de faire des bords arrondis (supporté
à partie de IE9, propriété CSS3)
! Valeur : une valeur en unité de mesure (px, em ou même %)
– Le même arrondi partout : border-radius : 10px;
– Un arrondi par angle (en haut à gauche, en haut à droite, en bas à droite, en bas à
gauche ) : border-radius : 2px 20px 5px 10px;
286 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Des bords arrondis : CSS3 !
div { div {
border-radius : 10px; border-radius : 2px 20px 5px
} 10px;
}
287 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-color
! background-color : valeur permet de donner une couleur de
fond.
! Valeurs : n’importe quelle couleur CSS
! Sur un élément bloc (prend toute la largeur) ou inline (prend la
largeur du contenu)
290 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-color
body {
background-color: #E6E6E6;
}
289 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-image
! background-image : valeur permet de définir une image
de fond pour l'élément
! Valeur : none ou url("monimage.png" )
! Par défaut : l’image se répète horizontalement et verticalement
(comme une mosaïque)
290 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-image
body {
background-image: url("img/bg.png");
}
Les chemins utilisés ont la même notation que vu jusqu’à présent
291 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-repeat
! background-repeat permet de définir la façon dont l’image va se
répéter.
292 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-repeat
! Valeurs possibles :
– no-repeat : l’image ne sera pas répétée
– repeat-x : l’image sera répétée horizontalement
– repeat-y : l’image sera répétée verticalement
n repeat-x repeat-y
o
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
295
-
Background-repeat en pratique
! Quelques exemples
– http://kellianderson.com/blog/
– http://launchfactory.org/
296 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-repeat en pratique
! Trouver de jolies textures de fond : http://subtlepatterns.com/
295 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-position
! background-position : valeur permet de donner la position de l’image de fond par
rapport au coin haut gauche. A utiliser avec background-repeat: no-repeat.
! Valeurs possibles :
– Des valeurs numériques sur des axes x et y : background-position: 10px 30px;
– Valeurs en toute lettre background-position:right top (en haut à droite):
! top : en haut
! bottom : en bas
! left : à gauche
! center : centré
! right : à droite
296 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Une étoile alignée en
bas à droite
.backgroundposition {
background-color: #A4D0F2;
background-image: url('img/
etoile.png');
background-repeat: no-
repeat;
background-position: right
bottom;
299
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-attachment
! background-attachment: valeur est très peu utilisé, et permet de définir
si l’image de fond défile par rapport au document
! Valeurs : par défaut (et si on le précise pas), la valeur est scroll.
! On peut utiliser background-attachment:fixed si on veut que l’image
reste visible et que le contenu scroll par-dessus.
298 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Background-attachment
Quelques jolis exemples en ligne :
– http://elefant-art.com/
299 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Tout dans une ligne !
Il est possible de combiner toutes ces propriétés dans une seule et même ligne :
background : propriete1 propriete2 propriete3;
h2 {
background:#7AAAAF url("img/etoile.png") no-repeat center left;
}
300 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Dimensions, margin et
padding
301
Petit rappel inline et block
• Sans altération CSS, les éléments de bloc prennent toute la largeur
de leur parent, et sont suivis d’un retour à la ligne (body, html, p, div,
h1, etc.)
• Les éléments de type inline prennent la largeur de leur contenu, et
ne sont pas suivis d’un retour à la ligne (span, a, strong, img,
etc.).
302
Largeur et hauteur d'un élément : width et height
! width (largeur) et height (hauteur) ne sont applicables QUE sur
des éléments de bloc
! Valeurs possibles : auto (par défaut, toute la taille du parent), valeur
numérique en px, % ou même em. body{ width: 800px;}
303 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Max et min
! On peut utiliser max et min pour déterminer des tailles maximums
et minimums (ne fonctionne pas sous IE6) : min-width, min-height,
max-width et max-height
! Valeurs : numériques
! Permet par exemple de gérer un débordement d’image :
img { max-width: 100%; } : les images sont limitées à la taille de leur
parent
304 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Marges
! Il existe deux types de marges : intérieure appelée padding, et extérieure appelée margin
(s'il y a une bordure elle est elle aussi ajoutée à la largeur effective des éléments)
305 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Marge extérieure « margin »
! La propriété margin détermine l’espace entre le bord de l’élément,
et l’élément suivant.
! Par défaut margin: valeur applique la même valeur aux 4 cotés
! Valeur possible : auto, valeur en unité de mesure, positive ou
négative
306 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Marge extérieure « margin »
! On peut la décomposer individuellement en
– margin-top : marge extérieure haute
– margin-right : marge extérieure droite
– margin-bottom : marge extérieure basse
– margin-left : marge extérieure gauche
! Ou rassembler les 4 valeurs : margin: 10px 5px 8px 15px; (dans
l’ordre : haut, droite, bas, gauche)
307 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Ajouter une marge
sous un paragraphe
p{
margin-bottom: 30px;
}
308
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Ajouter une marge
sous un titre
h2 {
margin: 50px 0;
}
Ici 50px correspondent à la
marge haute et basse et 0
aux marges gauches et
droites
309
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Centrer horizontalement à l’aide de margin
Pour centrer un élément de type bloc body {
horizontalement dans son parent il faut width: 800px;
lui donner une largeur (width), et margin: 0 auto;
appliquer une marge auto à gauche et à }
droite
310 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Margin et éléments inline
• Par défaut, une margin top ou bottom sur un élément inline ne
fonctionnera pas (puisqu’il est dans le flux de la page).
• Une marge left ou right fonctionnera par contre
311 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Padding : la marge « intérieure »
! La propriété padding détermine un espacement entre le bord de
la boite et son contenu
! Par défaut padding : valeur applique la même valeur aux 4 côtés
! Valeur possible : valeur en unité de mesure
312 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Padding : la marge « intérieure »
! On peut la décomposer individuellement en
– padding-top : marge intérieure haute
–
padding-right : marge intérieure droite
–
padding-bottom : marge intérieure basse
–
padding-left : marge intérieure gauche
! Ou rassembler les 4 valeurs : padding: 10px 5px 8px 15px;
(dans l’ordre : haut, droite, bas, gauche)
313 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Ajouter du padding au body
body {
padding: 10px 15px;
}
316
Ajouter du padding à
un titre pour décoller la
bordure
h2 {
padding-bottom: 10px
15px;
}
317
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Padding sur élément en inline
Ajouter du padding sur des éléments a{
inline permet de « changer leur taille » padding: 5px 15px;
sans passer par un width / height }
(attention aux débordements) Pour agrandir le lien
316 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Retirer les marges et padding par défaut du navigateur
Par défaut, le navigateur applique des ul {
marges (comme par exemple sur les margin: 0;
listes). Pour les retirer on peut écrire }
margin:0;
317 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Retirer les marges et padding par défaut du navigateur
Par défaut, le navigateur applique aussi ul {
du padding (comme par exemple sur les margin: 0;
listes). Pour le retirer on peut écrire padding: 0;
padding:0;
}
320 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Padding et calcul de dimension d’élément
Attention le padding entre en compte dans la
dimension « affichée » de l’élément et s’ajoute à sa
valeur « width » (tout comme la bordure)
321 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Padding et calcul de dimension d’élément
body { Valeur affichée de body :
width: 800px; 800 + 15 + 15 = 830px !
padding: 10px 15px;
320
Box-sizing:border-box - changer le modèle de boîte
! Pour faire en sorte que le padding (et la bordure) soit calculé à
l'intérieur de la boîte on peut changer le modèle de calcul à l'aide
de box-sizing : border-box;
.element {
box-sizing: border-box;
}
321 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Box-sizing:border-box - changer le modèle de boîte
body { Valeur affichée de body :
width: 800px; 800px
padding: 10px 15px;
box-sizing: border-
box;
}
322 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Overflow : pour éviter que ça dépasse
! Il est possible que du contenu texte dépasse l'élément qui le
contient (surtout si on défini des hauteurs fixes)
! Exemple : p {height: 100px}, le contenu « dépasse » du paragraphe
323 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Overflow: hidden - cacher ce qui dépasse
! overflow: hidden permet de cacher tout ce qui dépasse.
! Problème : on perd tout ce qui est caché, impossible de le voir
324 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Overflow: auto - afficher une barre de défilement
! overflow: auto; permet d’afficher une bar de défilement si
nécessaire
325 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Positionnements CSS
Les « flottants » et le flux
326
Les « flottants » et le flux
! La propriété float:valeur permet d’extraire des éléments du flux de la
page, ce qui signifie que le reste du contenu « coule »autour
! Elle prend 3 valeurs : left, right et none (permet de remettre un élément
dans le flux)
327 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Float:left
! Un exemple de float : left sur une img.floatleft {
image : float: left;
}
328
Float right;
Exemple de float: right sur une image : img.floatright {
float: right;
}
329
Problème des flottants
! Comme le contenu « coule » autour, on se retrouve avec ce genre
de problèmes
330 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Clear : bloquer le dépassement des flottants
! La propriété clear : valeur permet à un élément de cesser le
contournement des éléments flottants. Il se positionne alors sous les
éléments flottants précédents comme si ces derniers étaient restés dans
le flux.
! Valeurs possibles :
– clear: left permet d’empêcher le contournement des blocs flottants à gauche
– clear: right permet d’empêcher le contournement des blocs flottants à droite
– clear : both permet d’empêcher le contournement des blocs flottants à
gauche et à droite
331 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Clear : bloquer le dépassement des flottants
• On l'applique sur le premier élément « suivant » dont on veut cesser
le contournement.
332 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Problème des flottants
On applique clear:both; sur l'élément qui .content {
ne doit plus être affecté par les flottants clear:both;
}
333 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
BFC et contenir les flottants dans un bloc
• Les éléments flottants peuvent « dépasser » de leur parent si le
contenu de celui-ci n'est pas suffisant
334 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
BFC et contenir les flottants dans un bloc
• Un « contexte de formatage de bloc » (ou BFC) est un élément
avec des « super pouvoirs » :
– Il peut « contenir » les flottants (qui ne peuvent plus en
dépasser)
– Il ne s'écoule pas autour des flottants
335 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Overflow : hidden
! Ajouter overflow:hidden au
parent des flottants
permet de créer un «
contexte de formatage de
bloc » et résoudre notre
problème
336 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Overflow : hidden
.parent {
overflow : hidden;
}
339
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Les flottants appliqués à la mise en page
• Il est possible d'utiliser des flottants pour créer une mise en page en
colonnes. C’est notamment utilisé dans d’anciennes versions de
bootstrap et ressemble à ça. On privilégie cependant flexbox
aujourd’hui pour une mise en page de site web.
340 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Positionnements CSS
La propriété « display » pour mise en page
339
La propriété « display » pour mise en page
! La propriété display: valeur va permettre une mise en forme
avancée.
! Quelques unes des valeurs possibles sont : block, inline, inline-
block et none
! Ces valeurs sont appliquées par défaut en fonction des éléments
– p, div, h1, etc. : display :block;
– span, a, em, strong, etc. : display : inline;
340 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:block
! Il est possible de transformer un élément inline en élément de bloc
avec display: block
! Il a alors toutes les propriétés d’un élément de bloc : par défaut, il
prend toute la largeur de son parent, on peut en changer la
dimension ET est suivi d’un retour à la ligne. On peut alors lui
appliquer des marges.
341 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:block
a{ Pour transformer les liens inline en
éléments de bloc
display:block;
}
342 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:block
Exemple : transformer les liens de la
navigation en éléments de bloc
.header a,
.header li {
display: block;
.header a {
background: #98C9E2;
margin-bottom: 5px;
width: 150px;
345
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:inline
• Nous connaissons déjà display:inline appliqué sur les éléments de
type inline (span, a, em, strong, etc.).
• Il permet aux éléments de rester sur une seule ligne (on ne peut
alors pas leur donner de largeur)
344 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:inline
p{ Confère un à un élément toutes les
background: rgb(255, 191, 203); propriétés d’un élément en ligne, sans
display: inline; retour à la ligne
}
345 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:inline-block
! display: inline-block est une propriété hybride qui permet à un
élément d’avoir les propriétés d’un élément en ligne (pas de retour
à la ligne après l’élément), mais avec les propriétés d’un bloc
(possibilité d’avoir une dimension et des marges)
Display inline-block, une valeur trop peu utilisée >>
346 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:inline-block et
navigation display: inline-block sur une liste de liens
horizontale
permet par exemple de créer une
navigation horizontale
.header li {
display: inline-block;
}
.header li
a{ display:
block;
padding: 5px;
349
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:inline-block et bugs connus
• La propriété crée une colonne blanche entre les éléments. Plus sur
ce problème ici
348 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Display:none
! display: none permet de retirer un élément du flux de la page : il
n’est plus visible, et la place qu’il occupait est disponible pour
d’autres éléments, c’est comme s’il n’existait pas.
! Les éléments en display:none ne sont pas lus par les lecteurs
d’écran
! Pour rendre l’élément à nouveau visible, il faut lui appliquer par
exemple display:block
349 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Positionnement CSS
Position relative, absolute et fixed
350
Positionnement CSS
! La propriété position:valeur permet de positionner les éléments
dans la page
! Les valeurs possibles sont : static (valeur par défaut) ,relative,
absolute et fixed
351 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position:static;
! static est la valeur par défaut de tous les éléments
! Un élément avec position: static; n'est positionné d'aucune manière
spéciale.
! Un élément static est dit non positionné et un élément avec une
propriété position ayant une valeur autre que static est dit
positionné.
352 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position:relative;
! Un élément positionné avec position:relative; se comporte par
défaut de la même manière que static.
! On peut utiliser les propriété top, left, right et bottom pour déplacer
l'élément
! Le reste du contenu ne sera pas affecté
! top, left right et bottom peuvent prendre des valeurs positives ou
négatives (10px, -30px, etc.)
353 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position:relative;
.content a { Déplacer un élément de quelques pixels
position:relative;
top:-15px;
}
354 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position:relative;
.picto {
position: relative;
top:5px;
357
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position:relative;
Faire un lien qui s’enfonce de 2px quand .button:active{
on l’active position: relative;
top:2px;
356 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: fixed
! Un élément en position: fixed; ne bougera pas, même si on fait
défiler la page. Il sort du flux et se positionne au dessus des autres
éléments.
! Il se positionne par rapport à l'espace affichable du navigateur
357 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position :fixed
! Exemple de position : fixed d'une barre de navigation en haut
360 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position :fixed
.nav {
Sortir la navigation du flux
position: fixed;
}
359 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position :fixed
.nav {
La positionner en haut à 0px des 3 coins
position: fixed;
pour qu’elle s’affiche toujours
top: 0;
left: 0;
right: 0;
}
360 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: fixed dans la vraie vie
! Utilisation en « top bar » ou navigation « sticky » en haut :
– http://designmodo.com/
– http://www.lesechos.fr/
363 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: fixed dans la vraie vie, un peu trop d’ailleurs
http://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/ ?sf=ozpplo
364
Position: absolute;
! Un élément en position: absolute;
– sort du flux (les autres éléments se réorganisent comme s’il n’était pas là)
– vient se positionner par rapport à son dernier ancêtre positionné, à l’intérieur
de celui-ci.
! Par défaut, si aucun ancêtre n’est positionné (et qu’on a modifié top, left,
right ou bottom) il se positionne par rapport à l'élément racine <html>.
! Pour positionner le parent, on donne au parent une position: relative |
fixed | absolute;
363 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: absolute;
364 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Centrer une légende d’image
365 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: absolute;
.caption { Préparer l’image avec les couleurs
background:
rgba(0,0,0,0.8); color: #fff;
padding: 20px;
}
366 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: absolute;
.caption {
Préparer le positionnement de l’image
position: absolute;
bottom: 150px;
left: 0;
right: 0;
}
367 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Position: absolute;
.img-caption { Positionner le parent pour que la
position: relative; légende se place par rapport aux bords
de ce dernier
}
370 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
CSS et mise en page
• Pendant longtemps nous avons utilisé des fottants pour faire des
mises en page. Vous retrouvez encore cette technique sur
beaucoup de sites développés jusqu’il y a encore quelques années.
• Aujourd’hui, la mise en page de sites web moderne se fait avec
deux techniques : flexbox (pour des mises en page fluides) et grid-
layout (plus récent et moins bien supporté mais qui permet de créer
facilement des sites sur des principes de grilles.
369 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
CSS et mise en page avancée : Flexbox
• Flexbox pour créer des mises en page fluides :
– https://css-tricks.com/snippets/css/a-guide-to-flexbox/
– https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-
avec-html5-et-css3/la-mise-en-page-avec-flexbox
– https://developer.mozilla.org/fr/docs/Web/CSS/
Disposition_des_bo%C3%AEtes_flexibles_CSS/
Utilisation_des_flexbox_en_CSS
– https://www
.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-
module.html
370 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
CSS et mise en page avancée : Grid Layout
• Grid layout pour créer une grille CSS (attention au support)
– https://la-cascade.io/css-grid-layout-guide-complet/
– https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
– https://css-tricks.com/snippets/css/complete-guide-grid/
371 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Adapter son site au mobile : le responsive webdesign
• http://mediaqueri.es/
372 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Rapide aperçu de la syntaxe
<link rel="stylesheet" media="screen and (max-width: 640px)"
href="smallscreen.css" />
@media screen and (max-width: 640px) {
.bloc
{ display:block;
}
L
e
s
373 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
Liens utiles pour aller plus loin
• learnlayout.com un site qui résume le tout (en anglais)
• MDN CSS : références CSS, tutoriels et démos
• http://fr.openclassrooms.com/ : site plus généraliste pour apprendre
toutes sortes de langages
• https://www.alsacreations.com/ forum d’entre aide
• W3C en français
• Feuilles de styles CSS - Conseils et bonnes pratiques
• https://groups.diigo.com/group/html_css_front des ressources
sélectionnées par moi même
374 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017
www.stephaniewalter.fr @WalterStephanie
Visual & UX Designer.
Mobile enthusiast Pixel et CSS
Lover.
Illustration by Laurence V.
377
Ces slides initiation HTML CSS sont disponibles sous la
licence Creative Commons suivante :
Attribution - Pas d’Utilisation Commerciale - Partage
dans les Mêmes Conditions
CC BY-NC-SA
378 Stéphanie Walter – cours de 2016-2017
Vous aimerez peut-être aussi
- #Cours Langage de Base Developpement Web v2Pas encore d'évaluation#Cours Langage de Base Developpement Web v2387 pages
- Initiation HTML/CSS pour débutantsPas encore d'évaluationInitiation HTML/CSS pour débutants352 pages
- Introduction à HTML5 pour débutantsPas encore d'évaluationIntroduction à HTML5 pour débutants66 pages
- Fili Ère:: Infrastructure Digital Option System Et RéseauPas encore d'évaluationFili Ère:: Infrastructure Digital Option System Et Réseau36 pages
- PP - DW - Lecon - 1 Developpement WebPas encore d'évaluationPP - DW - Lecon - 1 Developpement Web30 pages
- Apprendre HTML et CSS pour débutantsPas encore d'évaluationApprendre HTML et CSS pour débutants67 pages
- Apprenez À Créer Votre Site Web Avec HTML5 Et CSS3Pas encore d'évaluationApprenez À Créer Votre Site Web Avec HTML5 Et CSS3361 pages
- Apprenez A Creer Votre Site Web Avec html5 Et css3 - 2016 PDFPas encore d'évaluationApprenez A Creer Votre Site Web Avec html5 Et css3 - 2016 PDF240 pages
- Vodafone Coding Course - P1 HTML - P2 CSSPas encore d'évaluationVodafone Coding Course - P1 HTML - P2 CSS61 pages
- Créez Votre Site Web Avec HTML5 Et CSS3 - OpenClassroomsPas encore d'évaluationCréez Votre Site Web Avec HTML5 Et CSS3 - OpenClassrooms8 pages
- Partie 1 - Matriser Les Bases HTMLPas encore d'évaluationPartie 1 - Matriser Les Bases HTML105 pages
- Introduction Au HTML - Apprendre Le Développement Web - MDNPas encore d'évaluationIntroduction Au HTML - Apprendre Le Développement Web - MDN4 pages
- Apprenez A Creer Votre Site Web Avec Html5 Et Css3100% (1)Apprenez A Creer Votre Site Web Avec Html5 Et Css3272 pages
- Langage de Programmation Web1 UhtglPas encore d'évaluationLangage de Programmation Web1 Uhtgl139 pages
- HTML : Guide de mise en forme et balisagePas encore d'évaluationHTML : Guide de mise en forme et balisage65 pages
- Introduction au HTML pour débutantsPas encore d'évaluationIntroduction au HTML pour débutants4 pages
- La Decouverte Du HTML: Un Guide Théorique Complet Qui Vous Familiarise Avec Le Langage Du Web HTML100% (1)La Decouverte Du HTML: Un Guide Théorique Complet Qui Vous Familiarise Avec Le Langage Du Web HTML16 pages
- Introduction à HTML et CSS pour débutantsPas encore d'évaluationIntroduction à HTML et CSS pour débutants23 pages
- Livre Informatique - 1ère - A - ESG - Cameroun Du 3 Juillet 2012 PDFPas encore d'évaluationLivre Informatique - 1ère - A - ESG - Cameroun Du 3 Juillet 2012 PDF183 pages
- Atelier HTML5 : Balises StructurantesPas encore d'évaluationAtelier HTML5 : Balises Structurantes10 pages
- Gestion des emplacements de bureauxPas encore d'évaluationGestion des emplacements de bureaux53 pages
- Rapport PFE: GameHub et Business IntelligencePas encore d'évaluationRapport PFE: GameHub et Business Intelligence19 pages
- Découverte Ludique de la ProgrammationPas encore d'évaluationDécouverte Ludique de la Programmation130 pages
- TP PHP : Formulaires et IntégrationPas encore d'évaluationTP PHP : Formulaires et Intégration2 pages
- Programmation Web: Html/Css/Js/Php/MysqlPas encore d'évaluationProgrammation Web: Html/Css/Js/Php/Mysql19 pages
- Évaluation Informatique HTML 1ère CDPas encore d'évaluationÉvaluation Informatique HTML 1ère CD2 pages
- Master Spécialisé - Lexicographie, Terminographie (Lille 3)Pas encore d'évaluationMaster Spécialisé - Lexicographie, Terminographie (Lille 3)32 pages
- Formulaires Forms ( Widgets ) - Documentation de Django - Django PDFPas encore d'évaluationFormulaires Forms ( Widgets ) - Documentation de Django - Django PDF13 pages
- Création d'un Site Web de ChaussuresPas encore d'évaluationCréation d'un Site Web de Chaussures9 pages
