Création de pages Web
HTML + 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) Web
2) L’informatique en science
TABLE DES MATIÈRES
1. HTML 2. CSS 3. FlexBox
Structure d’une page Objectifs Principes
Liens hypertexte Syntaxe Mises en pages
Listes Fichier séparé
Images, tableaux
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
Titre onglet
=>
HTML Page Web
Structure d’une page Web
Titre onglet
=>
HTML Page Web
Structure d’une page Web
Titre onglet
=>
HTML Page Web
Structure d’une page Web
Titre onglet
=>
HTML Page Web
Structure d’une page Web
Titre onglet
=>
HTML Page Web
Structure d’une page Web
Titre onglet
<h1> = Header (Titre) de niveau 1
HTML Page Web
Structure d’une page Web
Titre onglet
<p> = Paragraphe
HTML Page Web
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> = Image
src = source
width = 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 ([Link])
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
Titre
Type
Adresse Web
Image
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 : CSS
Dans une balise html
Styles : CSS
Dans l’entête <head>
Styles : CSS
Dans l’entête <head>
Styles : CSS
Dans l’entête <head>
Styles : CSS
Dans l’entête <head>
Styles : CSS
Dans un fichier à part :
[Link]
[Link]
Les Flexbox
Containeur Elements (item)
Parent 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 Texte
1 ...
Les Flexbox
Elles sont définies dans un fichier CSS :
Les Flexbox
Elles sont définies dans un fichier CSS :
Les Flexbox
Elles sont définies dans un fichier CSS... ...et utilisées dans un fichier HTML :
pour donner la page Web voulue :
Les Flexbox
Les Flexbox : organisation des items
En ligne : ROW
Les Flexbox : organisation des items
En colonne : COLUMN [Link]
Les Flexbox : organisation des items
Justifiés le contenu au début :
1 2 3 4
flex-direction : row
4 3 2 1
flex-direction : row-reverse
Justifiés le contenu à la fin :
1 2 3 4
flex-direction : row
4 3 2 1
flex-direction : row-reverse
Les Flexbox : organisation des items
Justifier le contenu au milieu :
1 2 3 4
flex-direction : row
4 3 2 1
flex-direction : row-reverse
Justifier le contenu avec espacement :
1 2 3 4
flex-direction : row
4 3 2 1
flex-direction : row-reverse
Les Flexbox : organisation des items
Aligner les items en haut :
1 4
2 3
Aligner les items en bas :
2 3
1 4
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
