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...
Me, myself and I 
• Développeur web indépendant, 
• 5 années d’XP en agence web Lyonnaise, 1 an 1/2 d’XP en indépendant, 
...
Outils de versioning 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
4
GIT vs SVN #1 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
5
GIT vs SVN #2 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
6
GIT vs SVN #3 
• Outil permettant de gérer un projet à plusieurs personnes, 
• Outil permettant d’avoir des développements...
Why GIT ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
8
Why GIT ? 
• On ne copie pas un fichier ou un dossier mais une partie de l’information encodée, 
• Plus simple et plus rap...
Créer un repository GIT 
en 4 étapes 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27...
GIT #Step1 
On créé son compte sur github 
http://www.github.com 
Nom de compte : icom-[prenom] 
[nom] 
Exemple : icom-nic...
GIT #Step2 
On choisit le plan que l’on 
souhaite. 
Choisissez le plan « free » et 
cliquez sur « Finish sign up » 
Nicola...
GIT #Step 3 - Welcome to Github! 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 ...
GIT #Step 4 
- Création d’un repository : 
icom-htmlcss 
! 
- Repository Public, 
- On ajoute un README, 
- Sans .gitignor...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 15
GIT : Tips and tricks 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
16
GIT : Tips and tricks 
• Github fonctionne à partir d’un logiciel ou à partir de lignes de commandes… 
• …. nous allons l’...
GIT : Tips and tricks 
• Git clone : On récupère un repository 
• Git status : On regarde si des éléments sont prêt à être...
Vous voulez 
en savoir plus 
sur GIT ? 
Consulter ce site : 
https://www.atlassian.com/git/ 
tutorials/ 
Nicolas AGUENOT -...
GIT et le projet 
• Création d’une branche par session (session1, session2, session3, …), 
• On ajoute régulièrement nos m...
Comment organiser son projet ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20...
Comment organiser son projet ? 
• Chaque projet contient : 
• Des images : 
• Dans un répertoire images/ 
• Chaque type d’...
Comment organiser son projet ? 
• Des fichiers Javascript : 
• Dans un dossier javascript/ 
• Un fichier pour les éléments...
Comment organiser son projet ? 
Arborescence type 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com ...
GIT Branch « session1 » 
• On se place sur son dossier : 
cd /YOUR/PATH/TO/YOUR/REPO 
• On contrôle les branches existante...
Premier commit 
• On ajoute les fichiers sur cette branche : 
git status 
git add et git add -p 
• On commit ses changemen...
HTML : Les bases et balises 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52...
HTML : Les bases 
• HTML = HyperText Markup Language, 
• Langage qui permet de formater les données pour représenter les p...
HTML : Les bases 
• Une page contient une tête et un 
corps (un head et un body). 
• Le head va contenir les informations ...
HTML : Les balises 
• Les titres : 
• Les titres ont des balises allant de <h1>…</h1> à <h6>…</h6> 
• Il ne doit y avoir q...
HTML : Les balises 
• Un lien doit être déclaré comme suit : <a href=‘mon-lien.html’ title=‘mon title’ 
target=‘self|blank...
HTML : Les balises 
• Un formulaire est créé à partir de <form action=‘…’ method=‘POST|GET’> … </form> 
• Il peut contenir...
HTML : Les balises 
La liste complète 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 2...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 34
CSS 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
35
CSS 
• CSS = Cascading Style Sheets > Feuille de style en cascade, 
• Ce langage décrit la présentation des documents HTML...
Alternatives au CSS pur : 
Les CSS pre-processeurs 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 38
Our first job ! 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
39
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 40
Maquette 
• Maquette fictive, ne correspond à 
aucun site. 
• Base du travail, on peut faire 
beaucoup de choses à partir ...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 42
A vos papiers ! 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
43
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 44
Des questions ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
45
Prochain SlideShare
Chargement dans…5
×

ISCOM::HTML/CSS::session1 (20140930)

502 vues

Publié le

ISCOM::HTML/CSS::session1 (20140930)

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

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

Aucune remarque pour cette diapositive

ISCOM::HTML/CSS::session1 (20140930)

  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. Me, myself and I • Développeur web indépendant, • 5 années d’XP en agence web Lyonnaise, 1 an 1/2 d’XP en indépendant, • Travaille sur des projets nationaux et internationaux pour des marques (presque) connues de tous, • Membre de la communauté eZ Publish (sujet passionnant dont vous m’entendrez parler durant les différentes sessions), • Réelle expertise sur les CMS/CXM d’un point de vue technique et gestion de projet, • Grosses compétences en intégrations HTML / CSS, • Me suivre : @nicolasaguenot | +nicolasaguenot Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Outils de versioning Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 5. GIT vs SVN #1 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 5
  6. 6. GIT vs SVN #2 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 6
  7. 7. GIT vs SVN #3 • Outil permettant de gérer un projet à plusieurs personnes, • Outil permettant d’avoir des développements à jour, • Outil permettant d’avoir un historique des modifications effectuées… • … et par conséquent de revenir en arrière si on a fait une erreur… Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 8. Why GIT ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
  9. 9. Why GIT ? • On ne copie pas un fichier ou un dossier mais une partie de l’information encodée, • Plus simple et plus rapide à prendre en main, • Process de branches pouvant être utilisé au maximum. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
  10. 10. Créer un repository GIT en 4 étapes Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
  11. 11. GIT #Step1 On créé son compte sur github http://www.github.com Nom de compte : icom-[prenom] [nom] Exemple : icom-nicolasaguenot Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 11
  12. 12. GIT #Step2 On choisit le plan que l’on souhaite. Choisissez le plan « free » et cliquez sur « Finish sign up » Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 12
  13. 13. GIT #Step 3 - Welcome to Github! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 13
  14. 14. GIT #Step 4 - Création d’un repository : icom-htmlcss ! - Repository Public, - On ajoute un README, - Sans .gitignore, - Sans licence, Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 14
  15. 15. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 15
  16. 16. GIT : Tips and tricks Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 16
  17. 17. GIT : Tips and tricks • Github fonctionne à partir d’un logiciel ou à partir de lignes de commandes… • …. nous allons l’utiliser à grâce aux lignes de commandes, • Par défaut, on est sur une branche nommée « master ». • Les mots communs lorsqu’on utilise GIT : clone, add (-p), commit, push, pull, branch, checkout • On peut récupérer le lien d’un repo GIT à cloner à partir du champ sur la droite Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 17
  18. 18. GIT : Tips and tricks • Git clone : On récupère un repository • Git status : On regarde si des éléments sont prêt à être envoyé au repository • Git add : On ajoute un élément • Git add -p : On ajoute une partie d’un fichier • Git commit : On met en mémoire ses éléments • Git push : On envoi ces éléments au repository • Git pull : On récupère les éléments du repository, • Git branch : On créé / consulte les branches, • Git checkout : On change de branche Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 18
  19. 19. Vous voulez en savoir plus sur GIT ? Consulter ce site : https://www.atlassian.com/git/ tutorials/ Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 19
  20. 20. GIT et le projet • Création d’une branche par session (session1, session2, session3, …), • On ajoute régulièrement nos modifications avec des messages clairs (les messages sont visibles), • Avant de finir la session, on pense à finaliser ces éléments et on les push. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 20
  21. 21. Comment organiser son projet ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 21
  22. 22. Comment organiser son projet ? • Chaque projet contient : • Des images : • Dans un répertoire images/ • Chaque type d’images se trouve dans un dossier (exemple : header/, footer/, homepage/, …) • Des fichiers CSS : • Dans un dossier stylesheets/ • Un fichier pour les éléments globaux, un fichier pour les éléments du type de page (global.css et style.css par exemple) • … Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 22
  23. 23. Comment organiser son projet ? • Des fichiers Javascript : • Dans un dossier javascript/ • Un fichier pour les éléments globaux, un fichier pour les librairies externe par exemple. • Des fichiers HTML : • A la racine du projet, • Un fichier par page. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 23
  24. 24. Comment organiser son projet ? Arborescence type Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 24
  25. 25. GIT Branch « session1 » • On se place sur son dossier : cd /YOUR/PATH/TO/YOUR/REPO • On contrôle les branches existantes : git branch -v • On créé sa branche : git branch session1 • On contrôle si la branche a bien été créée : git branch -v • On change de branche : git checkout session1 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 25
  26. 26. Premier commit • On ajoute les fichiers sur cette branche : git status git add et git add -p • On commit ses changements (avec un message) : git commit -m ‘My first commit’ • On envoie les éléments sur le repo : git push Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 26
  27. 27. HTML : Les bases et balises Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 27
  28. 28. HTML : Les bases • HTML = HyperText Markup Language, • Langage qui permet de formater les données pour représenter les pages web. • Permet de monter une page web simplement avec des balises de type <div>…</div>. • On trouve du HTML dans toutes les pages web, c’est la base du web et de la génération de pages lisible à partir d’un navigateur, • Les données doivent être structurées en utilisant les bonnes balises au bon endroit. • Chaque balises peuvent contenir des attributs très utiles pour les styles : • <div class=‘…’ id=‘…’ my-attr=‘…’> …… </div> Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 28
  29. 29. HTML : Les bases • Une page contient une tête et un corps (un head et un body). • Le head va contenir les informations permettant de référencer un site, les feuilles de style, les fichiers javascript. • Le body contient le contenu et les balises des pages. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 29
  30. 30. HTML : Les balises • Les titres : • Les titres ont des balises allant de <h1>…</h1> à <h6>…</h6> • Il ne doit y avoir qu’un seul <h1> … </h1> par page, les autres balises peuvent être dupliquées. • Les éléments textuels : • On englobe un paragraphe par un <p> … </p>, • On englobe un texte en gras par un <strong> … </strong> ou un <b> … </b>, • On englobe un texte en italique par un <em> … </em> ou un <i>…</i>, • On englobe un texte souligné par un <u> … </u>, • Les éléments doivent être englober par des <div> … </div>. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 30
  31. 31. HTML : Les balises • Un lien doit être déclaré comme suit : <a href=‘mon-lien.html’ title=‘mon title’ target=‘self|blank’>…</a>, • Les éléments doivent être englober par des <div> … </div> (pour les blocs) et par des <span>…</span> (pour les éléments en ligne), • Une liste à puce peut être : • Ordonnée (ol) : <ol> <li> … </li> <li> … </li></ol> • Désordonnées (ul) : <ul> <li> … </li> <li> … </li></ul> • Une image est chargée à partir de <img src=‘…’ alt=‘alternative text’ /> Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 31
  32. 32. HTML : Les balises • Un formulaire est créé à partir de <form action=‘…’ method=‘POST|GET’> … </form> • Il peut contenir : • Des champs texte : <input type=‘text’ name=‘my-input-text’ value=‘…’ placeholder=‘My default text’ /> • Des champs mot de passe : <input type=‘password’ name=‘my-input-password’ value=‘…’ /> • Des champs email : <input type=‘email’ name=‘my-input-email’ value=‘…’ placeholder=‘My default email’ /> • Des blocs de texte : <textarea name=‘my-textarea’> … </textarea> • Des champs de sélection : <select name=‘my-select-field’><option value=‘1’>Option 1</option> <option value=‘2’>Option 2</option> </select> • Envoyer son formulaire : <input type=‘submit’ name=‘submit’ value=‘Send’ /> Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 32
  33. 33. HTML : Les balises La liste complète Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 33
  34. 34. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 34
  35. 35. CSS Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 35
  36. 36. CSS • CSS = Cascading Style Sheets > Feuille de style en cascade, • Ce langage décrit la présentation des documents HTML et XML. • Les standards sont publiés par le W3C. • On intègre le style dans un fichier css après avoir déclaré des classes dans le fichier HTML sur les balises, • Pour bien commencer son projet, toujours mettre en place un reset css, • 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 36
  37. 37. Alternatives au CSS pur : Les CSS pre-processeurs Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 37
  38. 38. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 38
  39. 39. Our first job ! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 39
  40. 40. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 40
  41. 41. Maquette • Maquette fictive, ne correspond à aucun site. • Base du travail, on peut faire beaucoup de choses à partir d’une maquette comme celle-ci. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 41
  42. 42. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 42
  43. 43. A vos papiers ! Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 43
  44. 44. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 44
  45. 45. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 45

×