HTML5 & CSS3

HTML, CSS

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 pageEncodageTitre 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 documentMétadonnées sur la pageEncodageTitre 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-html5https://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

http://41mag.fr/liste-des-balises-html5

https://www.vectorskin.com/balises-html5

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

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

Internet

Transcript of HTML5 & CSS3