HTML, CSS
Contenu
HTML5
Présentation
Syntaxe
Structure d’un document
Présentation des balises
CSS3
Présentation
Syntaxe & Sélecteurs...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
HTML (Hypertext MarkupLanguage)
-
Form...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Langage de balisage
<element attribut=...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
<!DOCTYPE html>
<html>
<head>
<meta ch...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises d’en-tête <link />
<meta />
<s...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de structuration du texte <h1>...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de tableaux <table>
<caption>
...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Balises de médias <img />
<video>
<aud...
HTML5 | Présentation | Syntaxe | Structure d’un document | Présentation des balises
Plus d’informations
Liste des balises ...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
CSS Cascading Style Sheet (feuilles de sty...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
<!DOCTYPE html>
<html>
<head>
<meta charse...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Syntaxe
Générale sélecteur {
propriété: va...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Sélecteurs simples
*
élément
#id
élément.m...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Sélecteurs d’attributs
[attribut]
[attribu...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Pseudo-classes structurelles
élément:first...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Autres pseudo-classes
élément:active, élém...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Pseudo-éléments
élément:before
élément:aft...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notion de préfixe
élément {
-webkit-propri...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Formatage de texte
font-size
font-family
f...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Positionnement
display
float
position: rel...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Couleurs
Nom
Valeur hexadécimale
Valeur RG...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Background
background-color
background-ima...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Transitions
transition-property
transition...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Transformations 2D
transform: fonction(val...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Animations : définition
@keyframe monAnim
...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Animations : utilisation
animation
animati...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notions de Responsive design : viewport
<m...
CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design
Notions de Responsive design : media queri...
Prochain SlideShare
Chargement dans…5
×

HTML5 & CSS3

770 vues

Publié le

Initiation HTML5 et CSS3

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
770
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5 & CSS3

  1. 1. HTML, CSS
  2. 2. Contenu HTML5 Présentation Syntaxe Structure d’un document Présentation des balises CSS3 Présentation Syntaxe & Sélecteurs Styles Notions responsive design
  3. 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. 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” />
  5. 5. 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>
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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…)
  17. 17. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> <link rel="stylesheet" href="url" type="text/css"> <style type="text/css"> ... </style> </head> ... </html> Insérer son ou ses style(s)
  18. 18. CSS3 | Présentation | Syntaxe & Sélecteurs | Styles | Notions responsive design 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; }
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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)

×