ISCOM::HTML/CSS::session5 (20141119)

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

description

ISCOM::HTML/CSS::session5 (20141119)

Transcript of ISCOM::HTML/CSS::session5 (20141119)

Page 1: ISCOM::HTML/CSS::session5 (20141119)

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::session5 (20141119)

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::session5 (20141119)

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

Rappel du projet

3

Page 4: ISCOM::HTML/CSS::session5 (20141119)

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

Page 5: ISCOM::HTML/CSS::session5 (20141119)

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

Allons encore plus loin avec HTML5

5

Page 6: ISCOM::HTML/CSS::session5 (20141119)

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

HTML5• HTML 5 est la dernière norme au niveau HTML.

• Il fonctionne « main dans la main » avec CSS3.

• Il fonctionne avec tous les navigateurs modernes,

• Les anciens navigateurs reconnaissent les tags et les transforment (…mal).

• Point important, le doctype du document change :

• <!DOCTYPE html>

6

Page 7: ISCOM::HTML/CSS::session5 (20141119)

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

HTML5 et IE

• Pour pallier aux problèmes de transformation des tags HTML5 sur les anciennes versions des navigateurs, il existe un script simple qui permet de transformer les balises en HTML4.

• C'est un fichier javascript à télécharger simplement pour les navigateurs inférieur à IE9.

7

Page 8: ISCOM::HTML/CSS::session5 (20141119)

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

Les nouveaux tags HTML5

Page 9: ISCOM::HTML/CSS::session5 (20141119)

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

HTML5 Exercice• Exercice simple :

• Vous avez votre site responsive,

• Vous l’avez animer en CSS3 et chargé votre/vos police(s) Google Font.

• Utilisez maintenant les tags HTML5 pour créer votre header, votre footer, votre menu et vos sections.

• Ajouter une vidéo de type Youtube dont le sujet est en relation avec HTML5.

• Le site sera compatible IE9+, Firefox, Safari, Chrome, Opera et mobile.

9

Page 10: ISCOM::HTML/CSS::session5 (20141119)

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

Des questions ?

10