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

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

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

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
3

Outils de versioning
4

GIT vs SVN #1
5

GIT vs SVN #2
6

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…
7

Why GIT ?
8

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

Créer un repository GIT
en 4 étapes
10

GIT #Step1
On créé son compte sur github
http://www.github.com
Nom de compte : icom-[prenom]
[nom]
Exemple : icom-nicolasaguenot
11

GIT #Step2
On choisit le plan que l’on
souhaite.
Choisissez le plan « free » et
cliquez sur « Finish sign up »
12

GIT #Step 3 - Welcome to Github!
13

GIT #Step 4
- Création d’un repository :
icom-htmlcss
!
- Repository Public,
- On ajoute un README,
- Sans .gitignore,
- Sans licence,
14

GIT : Tips and tricks
16

• 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
17

• 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
18

Vous voulez
en savoir plus
sur GIT ?
Consulter ce site :
https://www.atlassian.com/git/
tutorials/
19

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

Comment organiser son projet ?
21

• 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)
• …
22

• 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.
23

Arborescence type
24

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
25

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
26

HTML : Les bases et balises
27

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>
28

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

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

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’ />
31

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’ />
32

HTML : Les balises
La liste complète
33

CSS
35

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

Alternatives au CSS pur :
Les CSS pre-processeurs
37

Our first job !
39

Maquette
• Maquette fictive, ne correspond à
aucun site.
• Base du travail, on peut faire
beaucoup de choses à partir d’une
maquette comme celle-ci.
41

A vos papiers !
43

Des questions ?
45

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

Contenu connexe

En vedette (20)

Similaire à ISCOM::HTML/CSS::session1 (20140930) (20)

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