3. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
HTML (Hypertext MarkupLanguage)
-
Format de données standardisé par le W3C permettant de représenter
une page web
-
Structure les données contenues dans le document
-
Permet d’inclure des ressources multimédia
-
Depuis HTML4, ne doit plus contenir de style
4. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Langage de balisage
<element attribut=“valeur”>Contenu</element>
Balises “autofermantes”
<element attribut=“valeur” />
6. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>
Version HTML (ici HTML5)
Les balises indispensables
7. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>
Englobe tout le document
Les balises indispensables
8. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>
Métadonnées sur la page
Encodage
Titre du site
Les balises indispensables
9. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>
Balise principale du site, contient les
données affichées par le navigateur
Les balises indispensables
10. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma première page web.</p>
</body>
</html>
Version HTML (ici HTML5)
Englobe tout le document
Métadonnées sur la page
Encodage
Titre du site
Balise principale du site, contient les
données affichées par le navigateur
Les balises indispensables
11. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises d’en-tête <link />
<meta />
<script>
<style>
Liaison avec une feuille de style
Métadonnées de la page web (charset, mots-clés, etc.)
Code JavaScript
Code CSS
Balises sectionnantes <header>
<nav>
<footer>
<section>
<article>
<aside>
En-tête
Liens principaux de navigation
Pied de page
Section de page
Article (contenu autonome)
Informations complémentaires
Balises génériques <div>
<span>
Balise générique de type block
Balise générique de type inline
12. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de structuration du texte <h1>...<h6>
<p>
<blockquote>
<q>
<sup>
<sub>
<strong>
<a>
<br />
<pre>
Titres de niveaux 1 à 6
Paragraphe
Citation (longue)
Citation (courte)
Exposant
Indice
Mise en gras (fort)
Lien hypertexte
Retour à la ligne
Affichage formaté (respecte espaces et tabulations)
Balises de listes <ul>
<ol>
<li>
Liste à puce
Liste numérotée
Élément de la liste
13. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de tableaux <table>
<caption>
<tr>
<th>
<td>
<thead>
<tbody>
<tfoot>
Tableau
Titre du tableau
Ligne de tableau
Cellule d'en-tête
Cellule
Section de l'en-tête du tableau
Section du corps du tableau
Section du pied du tableau
Balises de formulaires <form>
<input />
<textarea>
<select>
<option>
Formulaire
Champ de formulaire (texte, nombre, email...)
Zone de saisie multilignes
Liste déroulante
Élément d’une liste déroulante
14. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de médias <img />
<video>
<audio>
<source>
Image
Vidéo
Son
Lien et format des sources des les balises de vidéo et son
Commentaires <!-- … --> Commentaires sur une ou plusieurs lignes
15. HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Plus d’informations
Liste des balises HTML et de leurs attributs :
http://41mag.fr/liste-des-balises-html5
https://www.vectorskin.com/balises-html5
Liste des attributs (et les éléments auxquels ils s’appliquent) :
https://developer.mozilla.org/fr/docs/Web/HTML/Attributes
16. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
CSS Cascading Style Sheet (feuilles de style en cascade)
-
Permet de décrire la présentation d’un document HTML ou XML
-
Standard du W3C
-
CSS3 : dernière version de CSS ajoutant de nombreuses fonctionnalités
(nouveaux sélecteurs, media queries, polices persos, dégradés,
transitions…)
19. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Sélecteurs simples
*
élément
#id
élément.maclasse
.maclasse
élément1 élément2
élément1 > élément2
élément1 + élément2
élément1 ~ élément2
Tous les éléments
Tous les éléments “élément” dans le HTML
L’élément avec id=”monid”
Le ou les éléments “élément” avec class=”maclass”
Idem, peu importe le type d’élément HTML
Tous les“élément2” contenu dans un élément “élément1”
Tous les “élément2” ayant pour parent “élément1”
Tous les “élément2” placé juste après “élément1”
Tous les “élément2” précédé par “élément1”
20. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Sélecteurs d’attributs
[attribut]
[attribut=mavaleur]
[attribut*=mavaleur]
[attribut^=mavaleur]
[attribut$=mavaleur]
Tous les éléments avec l’attribut “attribut”
Tous les éléments dont la valeur de “attribut” vaut “mavaleur”
Tous les éléments dont la valeur de ”attribut” contient “mavaleur”
Tous les éléments dont la valeur de ”attribut” commence par “mavaleur”
Tous les éléments dont la valeur de ”attribut” finit par “mavaleur”
21. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Pseudo-classes structurelles
élément:first-child
élément:last-child
élément:nth-child(n)
élément:nth-last-child(n)
élément:first-of-type
élément:last-of-type
élément:only-child
élément:only-of-type
élément:not(sélecteur)
Premier enfant de “élément”
Dernier enfant de “élément”
Tous les “élément” qui sont n-ieme enfant de son parent
Tous les “élément” qui sont n-ieme enfant de son parent, en comptant à
partir de la fin
Tous les “éléments” premier enfant de type “élément” de son parent
Tous les “éléments” dernier enfant de type “élément” de son parent
Tous les “éléments” seul enfant de leur parent
Tous les “éléments” seul enfant du type “élément” de leur parent
Tous les “éléments” qui ne correspondent pas au “sélecteur”
22. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Autres pseudo-classes
élément:active, élément:focus, élément:hover
élément:link
élément:visited
élément:checked
Tous les “élément” durant les actions de l’utilisateur
Tous les “élément” cible d’un hyperlien pas encore visité
Tous les “élément” cible d’un hyperlien déjà visité
Tous les “éléments” cochés (action de l’utilisateur)
23. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Pseudo-éléments
élément:before
élément:after
élément::first-line
élément::first-letter
Ajoute du contenu avant “élément”
Ajoute du contenu après “élément”
Première ligne formatée de chaque “élément”
Première lettre formatée de chaque “élément”
24. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notion de préfixe
élément {
-webkit-propriété: valeur; // Chrome, Safari, Android...
-moz-propriété: valeur; // Mozilla
-ms-propriété: valeur; // Microsoft (Internet Explorer)
-o-propriété: valeur; // Opéra
propriété: valeur; // Toujours finir par la
déclaration
}
25. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Formatage de texte
font-size
font-family
font-style
font-weight
text-decoration
text-align
@font-face
Taille de la police
Famille de police
Style de police (italique...)
Graisse de la police
Décoration du texte
Alignement du texte
Définition d’une police personnalisée
26. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Positionnement
display
float
position: relative
position: absolute
position: fixed
width, height
margin, padding
Affichage des éléments en ligne, en bloc ou flexible
Flottement des boîtes
Position relative des éléments les uns par rapport aux autres
Positionnement absolue
Positionnement fixe
Largeur et hauteur des éléments
Marges extérieurs et marges intérieures
27. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Couleurs
Nom
Valeur hexadécimale
Valeur RGB
Valeur RGBA
white, black, green…
#FFFFFF, #000000, #008000
rgb(255,255,255), rgb(0,0,0)...
rgba(0,0,0,1), rgba(0,0,0,0.5)...
Pour des couleurs simples, le nom explicite
Valeur hexadécimale de la couleur
Valeur RGB
Valeur RGB avec gestion de la couche alpha,
pour modifié l’opacité
color
border-color
background-color
Couleur du texte
Couleur de la bordure d’un bloc
Couleur de fond d’un bloc
28. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Background
background-color
background-image
background-repeat
background-position
background-size
background-image: gradient(...)
Couleur de fond d’un bloc
Lien d’une image à mettre en fond
Répétition du fond (X, Y ou none)
Position d’origine du fond (valeurs numériques ou littérales)
Taille de l’image de fond : valeurs numériques (X et Y) ou
littérale (cover ou contain)
Dégradé de couleurs, “gradient” définit le style de dégradé
(linéaire, radial…)
29. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Transitions
transition-property
transition-duration
transition-timing-function
transition-delay
Précise les propriétés CSS à transformer
Précise la durée de la transition
Précise la fonction de transition à utiliser, le modèle
d'interpolation (accélération, décélération...)
Précise le retard (ou l'avance) du départ de la transition
30. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Transformations 2D
transform: fonction(valeur);
transform-origin: x y;
Les fonctions de transformation principales sont :
- Translation (translate)
- Mise à l'échelle (scale)
- Rotation (rotate)
- Inclinaison (skewX et skewY)
- Matrice (matrix)
31. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Animations : définition
@keyframe monAnim
@-webkit-keyframes monAnim
@keyframes monAnim {
from {propriété: valeur1; propriétéN:
valeur1;}
to {propriété: valeur2; propriétéN:
valeur2;}
}
@keyframes monAnim {
0% {propriété: valeur1; propriétéN:
valeur1;}
25% {propriété: valeur2; propriétéN:
valeur2;}
50% {propriété: valeur3; propriétéN:
valeur3;}
Définit les règles de l’animation qui a pour nom
“monAnim”
Webkit nécessaire pour Chrome, Safari, Opera
Deux possibilités pour définir les règles d’une
animation :
- from et to qui équivalent à 0% et 100%
- Des pourcentages afin de définir plusieurs
étapes à l’animation
32. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Animations : utilisation
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Une propriété raccourcie pour combiner les valeurs utilisées pour lancer
l’animation (sauf animation-play-state et animation-fill-mode)
Définit le nom de l’animation à exécuter
Définit le temps d’un cycle d’animation
Définit la fonction de transition à utiliser, le modèle d'interpolation
(accélération, décélération...)
Définit le délai avant de démarrer l’animation
Définit le nombre de fois où l’animation sera jouée (peut être infini)
Définit le sens dans lequel l’animation sera jouée (inversé, alterné…)
Définit le style appliqué à l’élément en dehors de l’animation (avant qu’elle
débute ou lorsqu’elle est finie)
Définit si l’animation est en lecture ou en pause
33. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notions de Responsive design : viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Différence entre surface réelle et surface en “pixels CSS”
Définition de “width” et “initial-scale” dans la balise meta pour plus de compatibilité
Pour plus d’explications et de précisions
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
34. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notions de Responsive design : media queries
@media condition opérateur conditionN {...}
@media only screen and (min-width: 300px) {...}
Définit pour à quelles conditions les styles s’appliqueront.
Dans la majorité des cas, les media queries sont composées :
- D’un ensemble de médias (screen, print, all…)
- D’un opérateur logique (not, and, only)
- D’une expression (entre parenthèses)