Embed Size (px)
Citation preview
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
Préambule
1) Web2) L’informatique en science
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
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
Structure d’une page Web
=>
HTML Page Web
Titre onglet
Structure d’une page Web
=>
HTML Page Web
Titre onglet
Structure d’une page Web
=>
HTML Page Web
Titre onglet
Structure d’une page Web
=>
HTML Page Web
Titre onglet
Structure d’une page Web
=>
HTML Page Web
Titre onglet
Structure d’une page Web
HTML Page Web
Titre onglet
<h1> = Header (Titre) de niveau 1
Structure d’une page Web
HTML Page Web
Titre onglet
<p> = Paragraphe
Structure d’une page Web CV F. Lechat
Titre d’une page CV F. Lechat
<title> = titre de la page
Centrer + Titre de niveau 1 CV F. Lechat
<center> = Centrer<h1>= Header 1
Image CV F. Lechat
<img> = Imagesrc = sourcewidth = Largeur (pixel ou %)
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
Liste à puce CV F. Lechat
<ul> = Unordered List<li> = List Item
Paragraphe CV F. Lechat
<p> = Paragraphe
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
Liste ordonnée - Ordered List = <ol> .CV F. Lechat
<ol> = Ordered List<li> = List Item
Paragraphe CV F. Lechat
<p> = Paragraphe
Titre de niveau 2 CV F. Lechat
<h2> = Header 2
Mise en Gras CV F. Lechat
<b> = Bold (Gras)
Lien Hypertexte CV F. Lechat
<a> = Ancre
Lien Hypertexte CV F. Lechat
<href> = Hypertext Reference
Lien Hypertexte CV F. Lechat
Texte de l’ancre
Figure et légende
Figure et légende
Tableaux
<h2> = Header 2
Tableaux
<table> = Tableau
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
Tableaux<tr> = Table Row (Ligne)<th> = Table Header (Titre)
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>
Structure d’un site Web
Page d’accueil (index.html)
Pages principales
Pages secondaires
Autres pages
Balise Meta
!Toutes les méta informations vont dans la section entête (head)
Balise Meta
!Elles servent aux moteurs de recherche.
Ces informations ne sont pas affichées !
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...
Balise Meta
Brève description du contenu de la page Web
Balise Meta
Mots clé du contenu de la page Web
Balise Meta
Nom de l’auteur de la page Web
Balise Meta pour les réseaux sociaux
og = Open Graph
TitreTypeAdresse WebImage
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
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é
Styles : CSSDans une balise html
Styles : CSSDans l’entête <head>
Styles : CSSDans l’entête <head>
Styles : CSSDans l’entête <head>
Styles : CSSDans l’entête <head>
Styles : CSSDans un fichier à part :
index.html
styles.css
Les Flexbox
ContaineurParent
Elements (item)Enfants (Children)
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 ...
Les Flexbox
Elles sont définies dans un fichier CSS :
Les Flexbox
Elles sont définies dans un fichier CSS :
Les Flexbox
...et utilisées dans un fichier HTML :Elles sont définies dans un fichier CSS...
pour donner la page Web voulue :
Les Flexbox
Les Flexbox : organisation des items
En ligne : ROW
Les Flexbox : organisation des items
En colonne : COLUMN https://css-tricks.com/snippets/css/a-guide-to-flexbox
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
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
Les Flexbox : organisation des items
Aligner les items en haut :
1 2 34
Aligner les items en bas :
1 2 34
Les Flexbox : organisation des items
Aligner les items en centre :
1 2 3 4
Aligner les items en étiré :
1 2 3 4
Tableaux avancés
Tableaux avancés
Tableaux avancés : test avec CodePen
Page Responsive
Page Responsive
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
