Cours HTML / CSS 
Learn to code 
HTML/CSS easily 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com -...
Cours HTML / CSS 
• 6 Sessions de ~3 heures > ~18 heures au total, 
• A chaque sessions aura des objectifs à atteindre pou...
Rappel du projet 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
CSS : Définition des balises 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 5...
CSS : Définition des balises 
• Rappel : 
• Les déclarations CSS peuvent : 
• Ne rien avoir si on appel un tag de balise, ...
CSS : Définition des balises 
• On a donc : 
• Un Reset CSS 
• Une déclaration de tag de balise, 
• Un état pour un tag de...
CSS : Définition des balises 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 5...
CSS : Définition des balises 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 5...
CSS : Définition des balises 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 5...
CSS : Définition des balises 
• Les padding ne doivent pas être combiné avec des 
width et des height. 
• Un float ne peut...
CSS : Définition des balises 
• Les padding ne doivent pas être combiné avec des 
width et des height. 
• Un float ne peut...
CSS : Les pseudo classes 
• Une pseudo classe peut être utilisé pour définir un état d’un élément. 
• Elle se définit par ...
A vous de jouer ! 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
14
Compatibilité navigateur 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
1...
Compatibilité navigateurs 
• Chaque système à son propre navigateur par défaut (IE pour Windows, Safari pour 
Mac, …) 
• …...
What’s 
The 
Problem 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
? 
17
Compatibilité navigateurs 
• Chaque navigateur a des versions différentes. 
• Certains sont mis à jour automatiquement … 
...
Comment rendre mon site compatible 
avec les principaux navigateurs ? 
Et comment faire si des fonctionnalités 
ne sont pa...
Compatibilité navigateurs 
• Cas concret : 
• Vous travaillez dans une agence, vous avez de gros clients. 
• Point importa...
Compatibilité navigateurs 
• Solution(s) simple(s) : 
• Pour commencer, un code propre… 
• Faire une feuille de style spéc...
Compatibilité navigateurs 
• La solution de la feuille de style spéficique pour IE8 
est la plus répandue. 
• On déclare u...
Des questions ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
23
Prochain SlideShare
Chargement dans…5
×

ISCOM::HTML/CSS::session2 (20141008)

1 121 vues

Publié le

ISCOM::HTML/CSS::session2 (20141008)

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

ISCOM::HTML/CSS::session2 (20141008)

  1. 1. Cours HTML / CSS Learn to code HTML/CSS easily Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
  2. 2. Cours HTML / CSS • 6 Sessions de ~3 heures > ~18 heures au total, • A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session, • 30% de théorie et 70% de pratique, • Finalité : Monter un site en HTML / CSS responsive, • En bonus, utilisation d’outil de versioning Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 2
  3. 3. Rappel du projet Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 5. CSS : Définition des balises Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 5
  6. 6. CSS : Définition des balises • Rappel : • Les déclarations CSS peuvent : • Ne rien avoir si on appel un tag de balise, • Avoir un # si on appelle un id, • Avoir un . si on appelle une classe. • Il faut toujours mettre en place un reset CSS. • Pour les classes et les id, gardez la même logique: • CamelCase, • séparé par des - ou des _. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 6
  7. 7. CSS : Définition des balises • On a donc : • Un Reset CSS • Une déclaration de tag de balise, • Un état pour un tag de balise, • Un id (#wrapper), • Une classe (.my-custom-class). • Différence entre un id et une classe ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 8. CSS : Définition des balises Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
  9. 9. CSS : Définition des balises Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
  10. 10. CSS : Définition des balises Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
  11. 11. CSS : Définition des balises • Les padding ne doivent pas être combiné avec des width et des height. • Un float ne peut être cumulé avec un clear, • Les propriétés peuvent être concaténée (exemple1), • De même pour les margin et padding (exemple 2), • Des éléments peuvent être conditionné (exemple 3) Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 11
  12. 12. CSS : Définition des balises • Les padding ne doivent pas être combiné avec des width et des height. • Un float ne peut être cumulé avec un clear, • Les propriétés peuvent être concaténée (exemple1), • De même pour les margin et padding (exemple 2), • Des éléments peuvent être conditionné (exemple 3). Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 12
  13. 13. CSS : Les pseudo classes • Une pseudo classe peut être utilisé pour définir un état d’un élément. • Elle se définit par selector:pseudo-class{ property:value} • Les plus courantes : • :hover, :visited, :focus, :active, :link, … • :first-child, • ::first-letter, ::first-line, • :before, :after, Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 13
  14. 14. A vous de jouer ! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 14
  15. 15. Compatibilité navigateur Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 15
  16. 16. Compatibilité navigateurs • Chaque système à son propre navigateur par défaut (IE pour Windows, Safari pour Mac, …) • … mais on peut aussi mettre d’autre navigateurs (Firefox, Chrome, Opera, …). Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 16
  17. 17. What’s The Problem Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 ? 17
  18. 18. Compatibilité navigateurs • Chaque navigateur a des versions différentes. • Certains sont mis à jour automatiquement … • … d’autre non ! • Certaines entreprises bloque les mises à jour automatique … • … et on se retrouve avec un problème de taille ! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 18
  19. 19. Comment rendre mon site compatible avec les principaux navigateurs ? Et comment faire si des fonctionnalités ne sont pas disponible pour certains navigateur ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 19
  20. 20. Compatibilité navigateurs • Cas concret : • Vous travaillez dans une agence, vous avez de gros clients. • Point important : Le navigateur utilisé dans la société est Internet Explorer 8. • Les utilisateurs du site seront à 40% des personnes de la société. • Il faut prendre en considération cette données pour le développement. Le site doit être visible sur IE8 quoi qu’il en soit ! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 20
  21. 21. Compatibilité navigateurs • Solution(s) simple(s) : • Pour commencer, un code propre… • Faire une feuille de style spécifique pour Internet Explorer 8 pour surcharger la feuille de style existante, • Des solutions javascript existent, • Si (et seulement si) ces solutions ne règlent pas nos problèmes : Les hack CSS. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 21
  22. 22. Compatibilité navigateurs • La solution de la feuille de style spéficique pour IE8 est la plus répandue. • On déclare une feuille de style dans un tag html permettant à Internet Explorer de contrôler si la feuille de style existe pour la version d’Internet Explorer sur laquelle on se trouve. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 22
  23. 23. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 23

×