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

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. 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. Rappel du projet
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
3

4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4

5. Balises meta
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
5

6. Balises meta
• Une balise meta est une information sur la nature et le contenu d’une page web, ajoutée dans l’en-tête
de la page au moyen de marqueurs HTML.
• Depuis quelques mois, le nombre de balise meta a considérablement augmenter.
• Nous avons :
• les balises de base (meta charset, viewport, …)
• les balises utile pour le référencement (meta description, keywords, title, favicon, …),
• les balises de partage social (opengraph) (meta og:title, og:description, …),
• les balises de personnalisation (meta apple-touch-icon, msapplication-TileColor, …),
• les balises personnalisées (vos propres meta non compatible W3C).
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
6

7. Balises meta
• Une liste non exhaustive est disponible dans ce repository :
https://github.com/icom-nicolasaguenot/metalist
• Vous pouvez le récupérer sur vos instances locales en faisant un git clone :
git clone git@github.com:icom-nicolasaguenot/metalist.git
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
7

8. La syntaxe MarkDown (fichiers *.md)
• Cette syntaxe est simple à prendre en main et permet de créer des fichiers lisible
rapidement par les intervenants d’un projet.
• Toute la syntaxe est présentée ici :
http://bit.ly/1CsYJDL
Lien complet : https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
8

9. Exercice final
• Créer un fichier myProject.md dans votre repository GIT.
• Si vous avez du mal à créer le même fichier :
http://bit.ly/1xpnIbc
• Intégrer le contenu comme sur l’image à droite.
• Répondez à ces 3 questions en argumentant vos réponses :
• Pourquoi mon projet est-il organisé de cette manière ?
(Avantages et inconvénient de cette organisation)
• Comment suis-je arrivé à ce résultat ? (Différentes étapes,
problématiques d’organisation)
• Quelles sont les difficultés rencontrés durant ces 6
sessions ?
• Une fois terminé, dernier commit -m ‘final commit’ et
dernier push.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
9

10. Des questions ?
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
10