23
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1 Cours HTML / CSS Learn to code HTML/CSS easily

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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

2

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Rappel du projet

3

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 4

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

CSS : Définition des balises

5

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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 _.

6

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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 ?

7

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 8

CSS : Définition des balises

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 9

CSS : Définition des balises

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 10

CSS : Définition des balises

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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)

11

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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

12

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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,

13

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

A vous de jouer !

14

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Compatibilité navigateur

15

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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

16

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

What’s The

Problem ?

17

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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 !

18

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Comment rendre mon site compatible avec les principaux navigateurs ?

Et comment faire si des fonctionnalités

ne sont pas disponible pour certains navigateur ?

19

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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 !

20

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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.

21

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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.

22

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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Des questions ?

23