ISCOM::HTML/CSS::session5 (20141119)
-
Upload
nicolas-aguenot -
Category
Internet
-
view
105 -
download
1
description
Transcript of 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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Rappel du projet
3
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 4
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Allons encore plus loin avec HTML5
5
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 8
Les nouveaux tags HTML5
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Des questions ?
10