création de pages web html + css +...
TRANSCRIPT
![Page 1: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/1.jpg)
Création de pages WebHTML + CSS + Flexbox
Pascal BALLET, Ahcène BOUNCEUR, Sophie GIRE, Philippe LE-PARC
Département d’Informatique - Licence 1 - UE Introduction à l’informatique
Université de Bretagne Occidentale
![Page 2: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/2.jpg)
Préambule
1) Web2) L’informatique en science
![Page 3: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/3.jpg)
TABLE DES MATIÈRES
1. HTML
Structure d’une page
Liens hypertexte
Listes
Images, tableaux
2. CSS
Objectifs
Syntaxe
Fichier séparé
3. FlexBox
Principes
Mises en pages
![Page 4: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/4.jpg)
HTML : HyperText Markup Language
- Langage de balisage utilisé pour la création de pages web
- Créé dans les années 1990
- Au CERN (Centre Européen de Recherche Nucléaire à Genève)
- Pour partager des documents
![Page 5: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/5.jpg)
Structure d’une page Web
=>
HTML Page Web
Titre onglet
![Page 6: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/6.jpg)
Structure d’une page Web
=>
HTML Page Web
Titre onglet
![Page 7: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/7.jpg)
Structure d’une page Web
=>
HTML Page Web
Titre onglet
![Page 8: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/8.jpg)
Structure d’une page Web
=>
HTML Page Web
Titre onglet
![Page 9: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/9.jpg)
Structure d’une page Web
=>
HTML Page Web
Titre onglet
![Page 10: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/10.jpg)
Structure d’une page Web
HTML Page Web
Titre onglet
<h1> = Header (Titre) de niveau 1
![Page 11: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/11.jpg)
Structure d’une page Web
HTML Page Web
Titre onglet
<p> = Paragraphe
![Page 12: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/12.jpg)
Structure d’une page Web CV F. Lechat
![Page 13: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/13.jpg)
Titre d’une page CV F. Lechat
<title> = titre de la page
![Page 14: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/14.jpg)
Centrer + Titre de niveau 1 CV F. Lechat
<center> = Centrer<h1>= Header 1
![Page 15: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/15.jpg)
Image CV F. Lechat
<img> = Imagesrc = sourcewidth = Largeur (pixel ou %)
![Page 16: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/16.jpg)
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
![Page 17: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/17.jpg)
Liste à puce CV F. Lechat
<ul> = Unordered List<li> = List Item
![Page 18: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/18.jpg)
Paragraphe CV F. Lechat
<p> = Paragraphe
![Page 19: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/19.jpg)
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
![Page 20: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/20.jpg)
Liste ordonnée - Ordered List = <ol> .CV F. Lechat
<ol> = Ordered List<li> = List Item
![Page 21: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/21.jpg)
Paragraphe CV F. Lechat
<p> = Paragraphe
![Page 22: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/22.jpg)
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
![Page 23: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/23.jpg)
Mise en Gras CV F. Lechat
<b> = Bold (Gras)
![Page 24: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/24.jpg)
Lien Hypertexte CV F. Lechat
<a> = Ancre
![Page 25: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/25.jpg)
Lien Hypertexte CV F. Lechat
<href> = Hypertext Reference
![Page 26: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/26.jpg)
Lien Hypertexte CV F. Lechat
Texte de l’ancre
![Page 27: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/27.jpg)
Figure et légende
![Page 28: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/28.jpg)
Figure et légende
![Page 29: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/29.jpg)
Tableaux
<h2> = Header 2
![Page 30: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/30.jpg)
Tableaux
<table> = Tableau
![Page 31: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/31.jpg)
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
![Page 32: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/32.jpg)
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
![Page 33: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/33.jpg)
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
![Page 34: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/34.jpg)
Exemple de mises en forme
Gras (bold) : <b>Texte en gras</b>
Italique : <i>Texte en italique</i>
Sur-ligné (mark) : <mark>Texte surligné</mark>
Texte centré : <center>Texte ou image ou etc centré</center>
![Page 35: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/35.jpg)
Structure d’un site Web
Page d’accueil (index.html)
Pages principales
Pages secondaires
Autres pages
![Page 36: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/36.jpg)
Balise Meta
!Toutes les méta informations vont dans la section entête (head)
![Page 37: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/37.jpg)
Balise Meta
!Elles servent aux moteurs de recherche.
Ces informations ne sont pas affichées !
![Page 38: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/38.jpg)
Balise Meta
Encodage UTF 8 : code l’ensemble des caractères de toutes les langues du monde (1 000 000 max).
Le vieux code ASCII encode seulement 255 caractères...
![Page 39: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/39.jpg)
Balise Meta
Brève description du contenu de la page Web
![Page 40: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/40.jpg)
Balise Meta
Mots clé du contenu de la page Web
![Page 41: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/41.jpg)
Balise Meta
Nom de l’auteur de la page Web
![Page 42: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/42.jpg)
Balise Meta pour les réseaux sociaux
og = Open Graph
TitreTypeAdresse WebImage
![Page 43: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/43.jpg)
Styles : CSS
● CSS est un langage à part pour styliser des pages Web et ce en cascade
● CSS = Cascading Style Sheets = feuilles de style en cascade
● Permet de donner des couleurs (et autre) aux page web
![Page 44: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/44.jpg)
Styles : CSS
Il existe trois manières de styliser le texte
1. Dans une balise html
2. Dans l’entête <head>
3. Dans un fichier séparé
![Page 45: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/45.jpg)
Styles : CSSDans une balise html
![Page 46: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/46.jpg)
Styles : CSSDans l’entête <head>
![Page 47: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/47.jpg)
Styles : CSSDans l’entête <head>
![Page 48: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/48.jpg)
Styles : CSSDans l’entête <head>
![Page 49: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/49.jpg)
Styles : CSSDans l’entête <head>
![Page 50: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/50.jpg)
Styles : CSSDans un fichier à part :
index.html
styles.css
![Page 51: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/51.jpg)
Les Flexbox
ContaineurParent
Elements (item)Enfants (Children)
![Page 52: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/52.jpg)
Les Flexbox
Chaque Box peut contenir du code HTML classique :
Ceci est du texte dans une Flexbox. Cette Flexbox contient 4 autres Flexbox :
Texte 1
Texte ...
![Page 53: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/53.jpg)
Les Flexbox
Elles sont définies dans un fichier CSS :
![Page 54: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/54.jpg)
Les Flexbox
Elles sont définies dans un fichier CSS :
![Page 55: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/55.jpg)
Les Flexbox
...et utilisées dans un fichier HTML :Elles sont définies dans un fichier CSS...
pour donner la page Web voulue :
![Page 56: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/56.jpg)
Les Flexbox
![Page 57: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/57.jpg)
Les Flexbox : organisation des items
En ligne : ROW
![Page 58: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/58.jpg)
Les Flexbox : organisation des items
En colonne : COLUMN https://css-tricks.com/snippets/css/a-guide-to-flexbox
![Page 59: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/59.jpg)
Les Flexbox : organisation des items
Justifiés le contenu au début :1 2 3 4
flex-direction : row
Justifiés le contenu à la fin :
4 3 2 1
flex-direction : row-reverse
flex-direction : row
flex-direction : row-reverse
1 2 3 4
4 3 2 1
![Page 60: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/60.jpg)
Les Flexbox : organisation des items
Justifier le contenu au milieu :1 2 3 4
flex-direction : row
Justifier le contenu avec espacement :
4 3 2 1
flex-direction : row-reverse
flex-direction : row
flex-direction : row-reverse
1 2 3 4
4 3 2 1
![Page 61: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/61.jpg)
Les Flexbox : organisation des items
Aligner les items en haut :
1 2 34
Aligner les items en bas :
1 2 34
![Page 62: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/62.jpg)
Les Flexbox : organisation des items
Aligner les items en centre :
1 2 3 4
Aligner les items en étiré :
1 2 3 4
![Page 63: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/63.jpg)
Tableaux avancés
![Page 64: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/64.jpg)
Tableaux avancés
![Page 65: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/65.jpg)
Tableaux avancés : test avec CodePen
![Page 66: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/66.jpg)
Page Responsive
![Page 67: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/67.jpg)
Page Responsive
![Page 68: Création de pages Web HTML + CSS + Flexboxlab-sticc.univ-brest.fr/~leparc/Etud/Licence/IntroInfo/... · 2019-11-15 · Création de pages Web HTML + CSS + Flexbox Pascal BALLET,](https://reader034.vdocuments.site/reader034/viewer/2022052518/5f09447f7e708231d42601af/html5/thumbnails/68.jpg)
Site Web noté (BONUS)- 0 = pas fait, 1 = non finalisé ou mal fait, 2 = projet fait.- On n'impose pas de gabarit, mais raisonnablement il doit y avoir au moins : * 4 flexbox * 1 liste à puce * 1 liste numérotée * 1 tableau * 1 image (photo pour le CV) * 2 hyperliens : 1 relatif et 1 absolu * CV reponsive pour que le CV s'affiche correctement sur un smartphone (mode portrait - que l'on peut tester en réduisant la largeur du navigateur Web) * l'utilisation du CSS est obligatoire * le CV devra être bien structuré : <h1>, <h2>, <p>, etc * des mises en formes : gras et italiques * dans le CSS, changer les styles h1, h2, p * ajouter un style bien à soi (par ex. un style "important" texte en rouge et gras) * changer la couleur ou l'image du background