Formation
HTML CSS
Auteur : Cyrille Tuzi
http://formationhtml5.com
Création du projet
Doctype
Doctype
Le seul type de document à utiliser :
<!doctype html>
Structure technique
Structure technique
Le HTML a une structure arborescente, qui commence par :
<html>
Elle est composée de 2 grandes parties...
Localisation
Localisation
○ Pour indiquer la langue de la page :
<html lang="fr">
○ Le seul encodage de caractères à utiliser :
<meta c...
Titre et description
Titre et description
○ Les informations complémentaires (meta), invisibles pour
l'utilisateur, sont destinées aux moteurs ...
Référencement naturel
Quelques règles à respecter pour le référencement naturel :
○ informations courtes et pertinentes
○ ...
Icône
○ Le titre de la page s'affiche également dans l'onglet du
navigateur, avec une icône (favicon) :
<link rel="icon" h...
Feuilles de styles CSS
Feuilles de styles CSS
○ Pour inclure une feuille de styles (stylesheet) :
<link rel="stylesheet" href="styles.css">
○ Mau...
JavaScript
JavaScript
○ Pour inclure un script :
<script src="script.js"></script>
○ Mauvaises pratiques :
<script>function myFunctio...
Contenu HTML et sémantique
Titres et paragraphes
Titres et paragraphes
Il faut d'abord hiérarchiser le contenu.
<h1> à <h6> titres et sous-titres (headings)
<p> contenu cl...
Retour à la ligne
<br> revenir à la ligne (break) dans un paragraphe
Listes et menus
Listes
<ul> liste à puces (unordered list)
<ol> liste numérotée (ordered list)
<li> élément dans une liste (list item)
Menus
<ul>
<li>Rubrique 1
<ul>
<li>Sous-rubrique 1A</li>
<li>Sous-rubrique 1B</li>
<li>Sous-rubrique 1C</li>
</ul>
</li>
<...
Valorisation des contenus
Contenus importants
<strong> mot-clé important
<em> contenu mis en emphase
Mauvaise pratique : <b> <i> <u>
Caractères spéciaux
Caractères spéciaux
< devient &lt; (lower than, inférieur à)
> devient &gt; (greater than, supérieur à)
& devient &amp; (a...
Contenus multimédia et
interactif
Liens hypertextes
Liens hypertextes
Il existe plusieurs types de liens (anchors) :
○ lien vers une autre page du site :
<a href="page.html">...
Images
Images
Une image se place ainsi :
<img src="image.png" width="100" height="50">
On indique :
○ la source (src), le chemin ...
Accessibilité des images
alt Obligatoire, texte alternatif (accessibilité)
title Facultatif, texte au survol (ergonomie)
Sélecteurs CSS
Identifiants et classes
Identifiants et classes
Toute balise HTML peut :
○ id avoir un identifiant unique
○ class appartenir à un ou plusieurs gro...
Sélecteurs principaux
p tous les éléments de ce type
#header l'élément unique ayant cet identifiant
.text-big tous les élé...
Sélection arborescente
Sélection arborescente
ul li Tous les descendants (à l'intérieur de)
ul>li Seulement les enfants
Pseudo-classes
Pseudo-classes
Conditions
a:hover
#nav>li:first-child
Le graphisme en CSS
Textes et polices
Polices de caractères
font-style: normal | italic;
font-weight: normal | bold;
font-size: 2em;
line-height: 1.5;
font-fami...
Familles de polices
○ sans-serif (le plus courant)
○ serif
○ cursive (manuscrit)
○ fantasy
○ monospace (largeur identique)
Textes
text-align: left | center | right | justify;
text-decoration: none | underline | line-through;
text-transform: none...
Listes
list-style-type: disc | circle | square | none;
list-style-image: url(image.png) | none;
list-style-position: outsi...
Couleurs et unités
Couleurs
color: red;
○ rgb(0,255,0) red, green, blue
○ red couleurs simples
○ #00FF00 hexadécimal complet
○ #0F0 hexadécim...
Unités
○ Fixes :
px (pixels)
pt (points)
cm, mm
○ Relatives :
% par rapport à la taille parente
em multiplicateur par rapp...
Fonds
Fonds
background-image: url(image.png);
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-color: rgb...
Bordures et arrondis
Bordures et arrondis
border-width: 1px;
border-style: none | solid | dotted | dashed | double;
border-color: rgb(0,0,0);
b...
Cours HTML CSS complet
http://formationhtml5.com
@formationhtml5
Prochain SlideShare
Chargement dans…5
×

Formation HTML CSS

824 vues

Publié le

Nos formations HTML5 CSS3 : http://formationhtml5.com

Nous mettons à votre disposition les slides de nos tutoriels HTML CSS gratuits pour se former aux principales balises HTML et aux principaux styles CSS.

Ils font partie d’une formation HTML5 CSS3 complète, avec des outils méthodologiques pour devenir un intégrateur professionnel, et un exercice corrigé du cas pratique par excellence : la transformation d’une maquette Photoshop en page HTML CSS. Et le cours est mis à jour en continu au fil des nouveautés HTML5 CSS3.

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

Aucun téléchargement
Vues
Nombre de vues
824
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation HTML CSS

  1. 1. Formation HTML CSS Auteur : Cyrille Tuzi http://formationhtml5.com
  2. 2. Création du projet
  3. 3. Doctype
  4. 4. Doctype Le seul type de document à utiliser : <!doctype html>
  5. 5. Structure technique
  6. 6. Structure technique Le HTML a une structure arborescente, qui commence par : <html> Elle est composée de 2 grandes parties : ○ <head> : informations préalables (head), invisibles ○ <body> : le corps (body) de la page, contenu visible
  7. 7. Localisation
  8. 8. Localisation ○ Pour indiquer la langue de la page : <html lang="fr"> ○ Le seul encodage de caractères à utiliser : <meta charset="utf-8">
  9. 9. Titre et description
  10. 10. Titre et description ○ Les informations complémentaires (meta), invisibles pour l'utilisateur, sont destinées aux moteurs de recherche. <title>Titre de la page</title> <meta name="description" content="Description de la page.">
  11. 11. Référencement naturel Quelques règles à respecter pour le référencement naturel : ○ informations courtes et pertinentes ○ informations uniques (pas de contenus dupliqués) ○ ce qui est spécifique à la page est plus important que ce qui est générique au site
  12. 12. Icône ○ Le titre de la page s'affiche également dans l'onglet du navigateur, avec une icône (favicon) : <link rel="icon" href="favicon.png">
  13. 13. Feuilles de styles CSS
  14. 14. Feuilles de styles CSS ○ Pour inclure une feuille de styles (stylesheet) : <link rel="stylesheet" href="styles.css"> ○ Mauvaises pratiques : <style>p { color: red; }</style> <p style="color: red;">Texte</p>
  15. 15. JavaScript
  16. 16. JavaScript ○ Pour inclure un script : <script src="script.js"></script> ○ Mauvaises pratiques : <script>function myFunction() {}</script> <a onclick="myFunction()">Lien</a>
  17. 17. Contenu HTML et sémantique
  18. 18. Titres et paragraphes
  19. 19. Titres et paragraphes Il faut d'abord hiérarchiser le contenu. <h1> à <h6> titres et sous-titres (headings) <p> contenu classique (paragraph)
  20. 20. Retour à la ligne <br> revenir à la ligne (break) dans un paragraphe
  21. 21. Listes et menus
  22. 22. Listes <ul> liste à puces (unordered list) <ol> liste numérotée (ordered list) <li> élément dans une liste (list item)
  23. 23. Menus <ul> <li>Rubrique 1 <ul> <li>Sous-rubrique 1A</li> <li>Sous-rubrique 1B</li> <li>Sous-rubrique 1C</li> </ul> </li> <li>Rubrique 2</li> <li>Rubrique 3</li> </ul>
  24. 24. Valorisation des contenus
  25. 25. Contenus importants <strong> mot-clé important <em> contenu mis en emphase Mauvaise pratique : <b> <i> <u>
  26. 26. Caractères spéciaux
  27. 27. Caractères spéciaux < devient &lt; (lower than, inférieur à) > devient &gt; (greater than, supérieur à) & devient &amp; (ampersand, esperluette)
  28. 28. Contenus multimédia et interactif
  29. 29. Liens hypertextes
  30. 30. Liens hypertextes Il existe plusieurs types de liens (anchors) : ○ lien vers une autre page du site : <a href="page.html"> ○ lien vers un site externe (nouvel onglet/fenêtre) : <a href="http://example.com/" target="_blank"> ○ lien vers un fichier : <a href="fichier.pdf">
  31. 31. Images
  32. 32. Images Une image se place ainsi : <img src="image.png" width="100" height="50"> On indique : ○ la source (src), le chemin du fichier ○ les dimensions, en pixels
  33. 33. Accessibilité des images alt Obligatoire, texte alternatif (accessibilité) title Facultatif, texte au survol (ergonomie)
  34. 34. Sélecteurs CSS
  35. 35. Identifiants et classes
  36. 36. Identifiants et classes Toute balise HTML peut : ○ id avoir un identifiant unique ○ class appartenir à un ou plusieurs groupes (class) <div id="header" class="text-big color-main">
  37. 37. Sélecteurs principaux p tous les éléments de ce type #header l'élément unique ayant cet identifiant .text-big tous les éléments du groupe (class)
  38. 38. Sélection arborescente
  39. 39. Sélection arborescente ul li Tous les descendants (à l'intérieur de) ul>li Seulement les enfants
  40. 40. Pseudo-classes
  41. 41. Pseudo-classes Conditions a:hover #nav>li:first-child
  42. 42. Le graphisme en CSS
  43. 43. Textes et polices
  44. 44. Polices de caractères font-style: normal | italic; font-weight: normal | bold; font-size: 2em; line-height: 1.5; font-family: 'Tahoma', 'Arial', sans-serif; font
  45. 45. Familles de polices ○ sans-serif (le plus courant) ○ serif ○ cursive (manuscrit) ○ fantasy ○ monospace (largeur identique)
  46. 46. Textes text-align: left | center | right | justify; text-decoration: none | underline | line-through; text-transform: none | capitalize | uppercase | lowercase;
  47. 47. Listes list-style-type: disc | circle | square | none; list-style-image: url(image.png) | none; list-style-position: outside | inside; list-style
  48. 48. Couleurs et unités
  49. 49. Couleurs color: red; ○ rgb(0,255,0) red, green, blue ○ red couleurs simples ○ #00FF00 hexadécimal complet ○ #0F0 hexadécimal raccourci
  50. 50. Unités ○ Fixes : px (pixels) pt (points) cm, mm ○ Relatives : % par rapport à la taille parente em multiplicateur par rapport à la taille parente
  51. 51. Fonds
  52. 52. Fonds background-image: url(image.png); background-repeat: repeat | repeat-x | repeat-y | no-repeat; background-color: rgb(255,0,0); background
  53. 53. Bordures et arrondis
  54. 54. Bordures et arrondis border-width: 1px; border-style: none | solid | dotted | dashed | double; border-color: rgb(0,0,0); border: 1px solid rgb(255,0,0); border-radius: 5px;
  55. 55. Cours HTML CSS complet http://formationhtml5.com @formationhtml5

×