Scribd
Importer
195 vues353 pages

Initiation HTML CSS

Ce document décrit le programme d'un cours d'initiation au HTML et CSS. Le cours couvre les bases de la structure et du contenu d'un site web, ainsi que la mise en forme avec des balises HTML et des feuilles de style CSS.

Transféré par

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

Initiation HTML CSS

Ce document décrit le programme d'un cours d'initiation au HTML et CSS. Le cours couvre les bases de la structure et du contenu d'un site web, ainsi que la mise en forme avec des balises HTML et des feuilles de style CSS.

Transféré par

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

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.
Le cours est une initiation, nous n’aurons pas le temps de voir en
détail toutes les balises et positionnement mais des liens seront
fournis afin de permettre aux étudiants d’approfondir leur expertise.

4
Programme initiation au HTML

• Les bases d’un site web • Les éléments de structuration du contenu


• Le HTML – généralités – La balise division <div>
– HTML et définition – La balise paragraphe <p>
– W3C et le WHATWG
– Espaces insécables Titres <h1> à <h6>
– Présentation rapide de quelques outils : éditeurs de
texte, wysiwyg et clients FTP – La balise <blockquote>
• La syntaxe HTML : balises, éléments et attributs • Les liens hypertexte
– Le principe de balise et d'élément – Fonction d'un lien
– Attributs et valeurs
– La balise <a>
– Quelques exemples d'attributs
– Liens externes
• Doctype, html, body : structure d'un document
valide – Liens internes et hiérarchisation du site
– Le doctype – Ouvrir un lien dans un nouvel onglet ou
– Les balises <html>, <head> et <body> laisser l'utilisateur choisir ?
– Les commentaires – Les liens spéciaux : mailto, ancres, etc.

3
Programme initiation au HTML

• Les éléments de « mise en forme » • Les tableaux HTML


– Créer un tableau : <table> <tr> <td>
de texte
– Un exemple de tableau simple
– Les balises <strong> et <em> – Ajout d'en-têtes avec <th>
– Légende de tableau
– La balise <span>
– Attributs avancés, dont colspan, rowspan
– D'autres balises (<sup>, <sub>, etc.)
• Les formulaires
• Les éléments de liste – Les formulaires sont partout autour de nous
– La balise <form>
– Listes ordonnées
– Le champ <input>
– Listes non ordonnées – Ajout de libellés avec <label>

• Ajouter des images avec la balise – Les placeholder HTML5


– Zone de texte multiligne <textarea>
<img> – Bouton de validation <input type="submit">
– Guide des formats d'image pour le web et – Présentation des autres éléments (checkbox, radio,
outils de compression <select>)

– La balise <img> et ses attributs

4
Programme initiation au CSS

• CSS : introduction et notions de base • Généalogie et différents types de


– Ajoutez du style à vos pages ! sélecteurs
– CSS : Cascading Style Sheets, une définition
– Le sélecteur usuel d'élément HTML
– Les CSS, un peu d'histoire
– Différents rendus entre les navigateurs : le pixel – Hiérarchie et généalogie : notion d'enfants, de
perfect n'existe pas parent, de descendance
• Appliquer un style, oui mais où ? – Sélecteur de groupe, de classe
– Le CSS inline et inconvénients – L'id ou identifiant
– Le CSS "interne" intégré au document et
– Espace entre sélecteurs, ou pas ?
inconvénients
– Feuille de style externe et balise <link>
– Les pseudos-classes sur les liens

• Syntaxe CSS – Les autres pseudo-classes


– La syntaxe de base : selecteur, propriété, valeur • Couleurs et unités
– La déclaration CSS – Notation des couleurs en CSS
– Les commentaires CSS
– Les unités fixes en CSS
– Les unités fluides en CSS
– En web, quelle unité utiliser ?

5
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

– Font-family et polices utilisables – Dimensions maximum et minimum


– 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
conflits de flottants
– Arrière-plan et propriétés background

6
Programme initiation au CSS

• Propriété display • Aller plus loin


– Valeurs block, inline-block, inline et – Mises en page avec Flexbox et Grid
none
Layout
– Créer une navigation à partir des
propriétés de display – Avant-goût du Responsive Web

• Positionnement CSS relative, Design

absolute et fixed
– Position relative pour déplacer des
éléments
– Position fixe et barre de navigation
fixée en haut
– Position absolue et déplacement
d'élément dans bloc

7
Les bases d’un site web

8
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
Un site Web c’est ...

• Un ensemble de pages liées entre elles


• Accessible en ligne depuis n'importe où

12
Mettre son site en ligne

11
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

17
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/

18
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

2
5
Atom

• https://atom.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source

2
6
Les éditeurs de texte plus avancés et spécialisés

• http://www.sublimetext.com/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne,
colorisation syntaxique
• Plugins, snippets, mode « sans
distraction »
• 30 jours essai Windows/Mac/ Linux
puis payant

23
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


http://www.activestate.com/komodo

• Netbeans (Windows et Mac) gratuit http://netbeans.org/

24
La syntaxe HTML : balises,
éléments et attributs

33
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
n
a o t a

34
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>

31
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.

32
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
fermantes », elles n’ont ni contenu ni balise
fermante.

• Note : je mets le / final par convention, mais pas obligatoire.

37
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

34
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


kittens>

! Les attributs sont toujours dans la balise ouvrante

35
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"
.google.fr"> Texte du lien </a>

36
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>

37
Doctype, html, body : structure
d'un document valide

42
Structure d’un document HTML simplifié

Décomposons balise par balise !

39
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é
rétro => peut expliquer
certains bugs sur IE

<!doctype html>

40
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

41
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.

42
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">
lang=

Spécifier la langue d’un document (X)HTML

43
La balise <head>

• Détermine l’entête du document et contient les méta-informations

44
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

45
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

46
La balise <head> : les balises meta

– <meta name="description" content="description pour le


référencement"/> affiché dans les résultats de recherche

47
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>

48
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
51
Les éléments de structuration
du contenu

52
La balise « division » <div>

53
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

54
Grille en div

55
La balise paragraphe <p>

56
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

57
Espaces insécables

58
Espaces insécables

• Il existe des entités HTML pour encoder certains caractères


spéciaux comme les espaces insécables : &nbsp;

Caractères spéciaux et entités HTML

59
D'autres entités HTML

copypastecharacter.com

60
Les titres h1 – h6

Bien construire sa hiérarchie de titres

61
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

62
Blockquote, une citation

63
Blockquote, une citation

• La balise <blockquote> marque une citation


• Une citation est suivie d'un retour à la ligne

64
Exemple de blockquote stylée

https://css-tricks.com/snippets/css/simple
tricks.com/snippets/css/simple-and-nice-blockquote-styling/

65
Les éléments de « mise en
forme » de texte

66
É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

67
L’ élément <strong>

68
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

69
L’ élément <em>

70
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

71
L’ élément <span>

72
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)

73
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

74
Les liens dans les documents
HTML

75
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.)

76
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>

77
La balise <a> pour les liens

78
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
http://www.google.fr" title="Moteur de recherche
google"> lien externe vers google </a>

79
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.

80
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.

81
Exercice !

• Créez un dossier « mon_premier_site »


• Créez y index.html
• Placez-y un second fichier appelé page1.html

8
6
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>

83
Mon premier site

84
Exercice !

! Ouvrez index.html, ajoutez lui un titre h1 et ajoutez un lien vers la


page1.html

85
Exercice !

! Ouvrez page1.html, ajoutez lui un titre h1 et ajoutez un lien de


retour à l’index

86
Exercice !

! Ajoutez un répertoire « page_interne »


! Ajoutez-y une page « page2.html »

87
Liens vers un autre répertoire

• On peut avoir des répertoires et sous-répertoires


sous
• 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

88
Descendre dans un sous répertoire

! Depuis la racine index vers page2 :


<a href="page_interne/page2.html
page2.html">page 2</a>

! Si on avait d’autres sous-répertoires


répertoires :
<a href="page_interne/autre_sous_rep/
page_interne/autre_sous_rep/page2.html">page 2</a>

89
Remonter d’un répertoire

! Depuis la page2 vers la racine :

<a href="../index.html"> l'accueil</a>


</a>

! Si on veut remonter plusieurs répertoires (autant de ../ que de


répertoires:

<a href="../../index.html"> l'accueil</a>


l'accueil

90
Mon premier site

91
Exercice !

• Ouvrez index.html et ajoutez un lien vers la page page2.html du


sous dossier page_interne

92
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

93
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


_blank" >
! Laisser l'utilisateur garder le contrôle de son navigateur ?

94
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

95
http://www.visuodesign.com/
100
Un lien vers une adresse mail

! <a href="mailto:[email protected]">
[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
Les éléments de liste

102
Les listes non ordonnées <ul>

99
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

100
Les listes ordonnées <ol>

101
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

102
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

103
Exemple d’imbrication

104
Exemple d’imbrication

105 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017


Les listes en pratique – les onglets

http://getbootstrap.com/javascript/#tabs
106
Les listes en pratique – les navigations

http://www.mobify.com/
107
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

110
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/
111
Quelques jolis GIFs

http://bisouslescopains.tumblr.com/

112
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

113
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

114
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.

115
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" />

116
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

117
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

118
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

119
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" />

120
Exemple

121
L'attribut title

Attribut facultatif qui permet d’afficher une info-bulle


info au survol de l’image
122
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

123
Bonus : intégrer une vidéo

124
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

125
Bonus : intégrer du son

130
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
Les tableaux HTML

128
Les tableaux, introduction

• Un tableau sert à organiser des informations structurées sous forme


tabulaire

• Il se compose de lignes organisées elles-mêmes


elles en cellules

129
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

130
Exemple de tableau simple

131
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.

132
Un avant-goût
goût de CSS

• Pour la suite et y voir plus clair, nous allons ajouter une bordure à
notre tableau avec la propriété CSS

133
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

134
Ajouter un titre au ! On utilise <caption> pour
tableau donner un titre au tableau
! La balise se place au
début du tableau

135
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
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
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
Facebook

139
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

<form method="post" action="traitement.php">


action
140
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


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

142
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

143
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

144
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

145
L'attribut « value »

150
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

147
Attributs supplémentaires

! maxlength=" " : le nombre de caractères maximum acceptés


dans le champ

148
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

150
Attributs utiles pour textarea

• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante

151
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

152
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)

153
Les cases à cocher <input type="checkbox">

On peut pré-cocher une checkbox avec checked="checked" ou just checked


154
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
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
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
cocher un bouton radio avec checked="checked"

161
Les listes déroulantes <select>

158
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

159
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=" "

160
Petit résumé des
champs

input type = text

input type = checkbox

input type = radio

input type= submit

select + option

textarea

165
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.

162
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

163
Bouton <button type="button">

http://getbootstrap.com/javascript/#modals

164
Désactiver un champ : disabled="disabled"

! L’attribut disabled="disabled" peut-être


peut 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

165
Désactiver un champ : disabled

! Note : on peut aussi juste mettre disabled en attribut

170
Les champs de mot de passe <input type="password">

! input type="password" : permet de masquer un mot de passe

167
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"
enctype="multipart/form sur l’élément
form.

168
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.

169
Liste non exhaustive de quelques balises

! body ! form
! div ! table
! p ! iframe
! h1- h6 etc.
!

! ul
! ol
! li
!
blockquote

Memento des balises HTML

170
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.)

172
Un peu d’histoire

• Le CSS est né en 1996


• Avant, on utilisait des balises de présentation directement dans le
HTML

• CSS1, CSS2, aujourd’hui la version finalisée est CSS2.1


• CSS3 : en cours de rédaction, certaines propriétés sont finalisées,
d’autres moins => utilisable à différents degrés aujourd'hui

175
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 !

180
Appliquer un style, oui
mais où ?

183
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">

184
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.

185
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
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.

187
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"/>

188
La feuille de style externe

index.html

styles.css

189
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.

190
Récapitulatif

! index.html : pour le
contenu
! styles.css : pour la mise
en page / présentation

191
La syntaxe CSS

192
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:
propriete valeur
propriete:
...
}
197
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

s
e
l
e
c
t
e
198
u
r
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
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
Hiérarchie et généalogie

198
Hiérarchie et généalogie

199
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

200
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)

201
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)

202
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

203
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>

204
Les sélecteurs de classe

205
Classes multiples

! Il est possible d’avoir plusieurs classes sur un élément, on les


sépare d’un espace.

<p class="remarque
remarque important">
important Une remarque mis en avant </
p>

210
Classes multiples

207
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
remarque "> une remarque citation</
blockquote>

208
Classes multiples

209
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 { }

210
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

211
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>

212
Cibler une balise HTML avec une classe

! Et button.btn.btn-default{ } va cibler

<button type="button" class="btn


btn btn-default">
btn … </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

213
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 { }

214
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.

215
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
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>
...

217
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

218
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>

219
Qui est ciblé ?

div {
...
}

.first {
...
}

p.first {
...
}

220
Qui est ciblé ?

.sugar {
...
}

.sugar p {
...
}

p.sugar {
...
}

221
Qui est ciblé ?

h1 #hautpage {
...
}

h1#hautpage {
...
}

222
Qui est ciblé ?

.first a {
...
}

.first .sugar {
...
}

.important, #toffee {
...
}

223
flukeout.github.io

228 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017


Les pseudos-classes
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
Démonstration de :hover sur du bouton

http://tympanus.net/Development/CreativeButtons/
230
Les autres pseudo-classes
pseudo

! :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

227
Subtle Hover effects

228
:focus sur les liens et inputs

! :focus appliqué sur les liens, boutons, ou inputs lorsqu’ils « ont le


focus »

229
Couleurs et unités CSS

230
La synthèse additive des couleurs

231
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

237
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
Le Pixel - px

• Unité « fixe »
• Dépendance à la résolution du périphérique
• Valeur « compilée » finale en CSS

237
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.

238
Le cadratin - em

• Utiliser des polices en em permet de garder le rythme


typographique et les proportions entre les différents éléments

239
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
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

246
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
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
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
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
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
Font
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
Mettre un
paragraphe en gras

p{
font-weight: bold;
}

256
Font weight

! font-weight: valeur permet de déterminer l’épaisseur de la police.


! Principales valeurs possibles : normal,
normal bold (gras)
! Permet de mettre en gras d'autres éléments

257
Mettre le paragraphe
en italique

p{
font-style: italic;
}

258
Font--style

! font-style : valeur permet de préciser le style de police


! Principales valeurs possibles : normal,
normal italic, oblique.
! Permet de mettre en italique des éléments

259
Augmenter
l’interlignage

body {
line-height: 1.5;
}

260
Line-height
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
Color

h1 {
color: #008499;
}

262
Color

! color: valeur permet de donner la couleur du texte


! Les valeurs possibles sont toutes les couleurs présentées
précédemment

259
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.)

260
Text--align

p{ p{

text-align: left; text-align: right;

} }

261
Text--align

p{ p{

text-align: center; text-align: justify;

} }

262
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 }

263
Text-transform
transform

! text-transform permet de transformer le texte en majuscule,


minuscule
! Valeurs possibles :
! none
! capitalize

! uppercase

! lowercase

264
Text-transform
transform

h2 { h2 {

text-transform: none; text-transform: capitalize;

} }

265
Text-transform
transform

h2 { h2 {

text-transform: uppercase; text-transform : lowercase;

} }

270
Font-variant
variant

! font-variant : valeur permet de changer la casse de la police


! Principales valeurs possibles :

! normal
! small-caps

267
Font-variant
variant

h2 { h2 {

font-variante: normal; font-variante: small-caps;

} }

268
Text-decoration
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é

269
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 */

270
Text-indent
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)

271
Indentation de 10px

p{
text-indent: 10 px;
}

276
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

273
Listes ordonnées

• Valeurs possibles
– decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-roman (VII),
etc.

274
Retirer les puces

ul {
list-style-type: none;
}

279
Utiliser une image comme puce

ul {
list-style-image: url("img/liste.png");
}

276
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");

277
Bordures et arrières plans

278
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;

279
Les bordures

h2 {
border: 2px solid #009860 ;
}

280
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.

281
Les bordures

h2 {
border-top: 1px solid gray;
}

282
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é.

283
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
radius : 10px;
– Un arrondi par angle (en haut à gauche, en haut à droite, en bas à droite, en bas à
gauche ) : border-radius : 2px 20px 5px 10px;

284
Des bords arrondis : CSS3 !

div { div {

border-radius : 10px; border-radius : 2px 20px 5px


10px;
}
}

285
Background
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
Background
Background-color

body {
background-color: #E6E6E6;
}

287
Background
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)

288
Background
Background-image

body {
background-image: url("img/bg.png");
}

Les chemins utilisés ont la même notation que vu jusqu’à présent

289
Background
Background-repeat
! background-repeat permet de définir la façon dont l’image va se
répéter.

290
Background
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
repeat-x repeat-y
o
-
295
r
Background-repeat
repeat en pratique

! Quelques exemples
– http://kellianderson.com/blog/

– http://launchfactory.org/

296 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017


Background-repeat
repeat en pratique

! Trouver de jolies textures de fond : http://subtlepatterns.com/

293 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017


Background
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:
background 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


position:right top (en haut à droite):
! top : en haut
! bottom : en bas
! left : à gauche
! center : centré
! right : à droite

294
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
Background
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
attachment:fixed si on veut que l’image
reste visible et que le contenu scroll par-dessus.

296
Background
Background-attachment

Quelques jolis exemples en ligne :


– http://elefant-art.com/

297
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
no center left;
}

298
Dimensions, margin et
padding

299
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.).

300
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.
em body{ width: 800px;}

301
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

302
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)

303
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

304
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)

305
Ajouter une marge
sous un paragraphe

p{
margin-bottom: 30px;
}

306
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

307
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

308
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

309
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

310
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)

311
Ajouter du padding au body

body {
padding: 10px 15px;
}

31
6
Ajouter du padding à
un titre pour décoller la
bordure

h2 {
padding-bottom: 10px
15px;

317
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

314
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;

315
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
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
Padding et calcul de dimension d’élément

body { Valeur affichée de body :

width: 800px; 800 + 15 + 15 = 830px !

padding: 10px 15px;

318
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;
box;
}

319
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;

320
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

321
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

322
Overflow: auto - afficher une barre de défilement

! overflow: auto; permet d’afficher une bar de défilement si


nécessaire

323
Positionnements CSS

Les « flottants » et le flux

324
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)

325
Float:left

! Un exemple de float : left sur une img.floatleft {


image : float: left;
}

326
Float right;

Exemple de float: right sur une image : img.floatright {


float: right;
}

327
Problème des flottants

! Comme le contenu « coule » autour, on se retrouve avec ce genre


de problèmes

328
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

329
Clear : bloquer le dépassement des flottants

• On l'applique sur le premier élément « suivant » dont on veut cesser


le contournement.

330
Problème des flottants

On applique clear:both; sur l'élément qui .content {


ne doit plus être affecté par les flottants clear:both;
}

331
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

332
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

333
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

334
Overflow : hidden

.parent {
overflow : hidden;
}

339
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
Positionnements CSS

La propriété « display » pour mise en page

337
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;

338
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.

339
Display:block

a{ Pour transformer les liens inline en


éléments de bloc
display:block;
}

340
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
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)

342
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

343
Display:inline
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,
block, une valeur trop peu utilisée >>

344
Display:inline-block et
navigation horizontale display: inline-block
inline sur une liste de liens
permet par exemple de créer une
navigation horizontale

.header li {
display: inline-block;
}

.header li a{
display: block;
padding: 5px;

349
Display:inline-block
block et bugs connus

• La propriété crée une colonne blanche entre les éléments. Plus sur
ce problème ici

346
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

347
Positionnement CSS

Position relative, absolute et fixed

348
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

349
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é.

350
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.)

351
Position:relative;

.content a { Déplacer un élément de quelques pixels

position:relative;
top:-15px;
}

352
Position:relative;

.picto {
position: relative;
top:5px;

357
Position:relative;

Faire un lien qui s’enfonce de 2px quand .button:active{


on l’active position: relative;
top:2px;

354
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

355
Position :fixed

! Exemple de position : fixed d'une barre de navigation en haut

360
Position :fixed

.nav {
Sortir la navigation du flux
position: fixed;
}

357
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;
}

358
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
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;

361 Initiation HTML CSS - Stéphanie Walter - 2016 / 2017


Position: absolute;

362
Centrer une légende d’image

363
Position: absolute;

.caption { Préparer l’image avec les couleurs


background: rgba(0,0,0,0.8);
color: #fff;
padding: 20px;
}

364
Position: absolute;
.caption {
Préparer le positionnement de l’image
position: absolute;
bottom: 150px;
left: 0;

right: 0;
}

365
Position: absolute;

.img-caption { Positionner le parent pour que la


légende se place par rapport aux bords
position: relative;
de ce dernier
}

370
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.

367
CSS et mise en page avancée : Flexbox

• Flexbox pour créer des mises en page fluides :


– https://css-tricks.com/snippets/css/a
tricks.com/snippets/css/a-guide-to-flexbox/
– https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-
https://openclassrooms.com/courses/apprenez
avec-html5-et-css3/la-mise-en-page
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
.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-
module.html

368
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
layout-guide-complet/

– https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

– https://css-tricks.com/snippets/css/complete
tricks.com/snippets/css/complete-guide-grid/

369
Adapter son site au mobile : le responsive webdesign

• http://mediaqueri.es/

370
Rapide aperçu de la syntaxe

<link rel="stylesheet" media="screen


screen and (max-width: 640px)"
href="smallscreen.css" />

@media screen and (max-width:


width: 640px) {
.bloc {

display:block;

Les Media Queries CSS3

371
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

372

Vous aimerez peut-être aussi