HTML5 & CSS3

Contenu
HTML5
Présentation
Syntaxe
Structure d’un document
Présentation des balises
CSS3
Présentation
Syntaxe & Sélecteurs
Styles
Notions responsive design

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

Langage de balisage
<element attribut=“valeur”>Contenu</element>
Balises “autofermantes”
<element attribut=“valeur” />

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Version HTML (ici HTML5)
Les balises indispensables

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Englobe tout le document

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Métadonnées sur la page
Encodage
Titre du site

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Balise principale du site, contient les
données affichées par le navigateur

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="url" type="text/css">
<style type="text/css">
...
</style>
</head>
...
</html>
Insérer son ou ses style(s)

Syntaxe
Générale sélecteur {
propriété: valeur;
}
Multiples sélecteurs sélecteur, sélecteurN {
propriété: valeur;
}
Propriétés “combinées” sélecteur {
propriété: valeur valeurN;
}

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”

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”

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”

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)

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”

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
}

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

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

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

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

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

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)

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

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

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

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)

HTML5 & CSS3

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à HTML5 & CSS3 (20)

HTML5 & CSS3