Sunteți pe pagina 1din 41

PARTIE I

LES BASES
BIENVENUE !
Ce cours a t optimis pour des personnes
souhaitant :
Travailler et optimiser leur rfrencement,
Crez des sites innovants et optimiss,

Une approche directe et concrte des


langages HTML et CSS.
PRESENTATION

Pierre 24 ans
Ecole de Commerce Master 2
Entrepreneur.
Employ chez PrestaShop.
Cr 5 e-commerces et a beaucoup tudi
les problmatiques de rfrencement.
PRESENTATION
Plus de formations sur mon site : pierre-giraud.fr

Nhsitez pas vous abonner ma chane YouTube


!

Pour me suivre :
Twitter : @pierregird
Facebook : Facebook.com/PierreGiraud.fr
G+, Twitter : cherchez Pierre Giraud
POURQUOI APPRENDRE LE HTML &
LE CSS ?
Les langages HTML et CSS sont incontournables
car nont pas de concurrent et sont la base de
tout projet de dveloppement web;
Une base pour comprendre son site, le modifier
et rsoudre les problmes au besoin;
Indispensable pour optimiser son rfrencement;
Pour comprendre et se faire comprendre des
dveloppeurs avec qui vous travaillez.
HTML & CSS : DEFINITION
HTML = HyperText Markup Language.
Cr en 1991
Fonction : donner du sens et structurer le
contenu

CSS = Cascading Style Sheets


Cr en 1996
Fonction : mettre en forme le contenu en lui
LES VERSIONS HTML & CSS
Versions actuelles :
HTML5 & CSS3
Toutes les deux non finalises (encore en
dveloppement) mais totalement stables et
dj trs largement utilises.

Introduisent de nouvelles fonctionnalits trs


attendues : insrer des vidos, bordures
arrondies, etc.
UN MOT SUR LE XHTML

XHTML = Extensible HTML


Version plus stricte, plus codifie dHTML
Donc plus difficile utiliser !
Cr en 2000 pour succder au HTML puis
abandonn en 2009 (ou plus exactement
intgr dans le HTML5).
LEDITEUR DE TEXTE
Pour coder en HTML ou en CSS, nous navons
besoin que dun diteur de texte, gratuit

Pc = Komodo, NotePad++, etc.


Mac = Komodo, TextWrangler, etc.
Linux = Komodo, gEdit, etc.

Premire chose faire : changer la couleur du fond !


LES FONDATIONS DU HTML
ELEMENTS, BALISES & ATTRIBUTS
Elments =
Dfinissent des objets dans notre page web
Llment p dfinit un paragraphe,
Les lments h1, h2, , h6 dfinissent des titres,
Llment a dfinit un lien
Gnralement constitus dune paire de balises
:
Balise ouvrante : <p>
Balise fermante : </p>
Exception : balises orphelines comme <br/>
ELEMENTS, BALISES ET ATTRIBUTS
Attributs =
Proprits utilises pour donner des indications
supplmentaires aux lments.
Ex: Indiquer la cible dun lien.
Balise ouvrante Balise fermante

<a href=http://www.youtube.com> Le site YouTube </a>

attribut lment a
STRUCTURE DUNE PAGE EN
HTML5
Doctype : <!DOCTYPE html>
Elments :
html,
head,
title,
meta,
body.
BONNES PRATIQUES, REGLES &
COMMENTAIRES
Vous pouvez imbriquer des balises lune
dans lautre mais vous devez les refermer
dans le bon ordre : <a> <b> </b> </a>.

Indentez votre code et commentez le pour


le rendre plus lisible, plus professionnel et
plus simple comprendre.
BONNES PRATIQUES, REGLES &
COMMENTAIRES
<!-- Voici un commentaire en HTML -->

! Tout le monde peut voir votre code


HTML ! Ncrivez donc pas dinfos sensibles
en commentaires comme des mots de passe
!
HEADING, PARAGRAPH, BREAK

Llment p dfinit un paragraphe.


Llment br cre un retour la ligne.
Les lments h1, h2, jusqu h6
dfinissent des titres (par ordre
dimportance).

Vous ne devez jamais utiliser des lments


pour appliquer un style votre contenu !
STRONG, MARK, EMPHASIS

Llment strong est utilis pour dfinir un


contenu comme important.
Llment em est utilis pour dfinir un
contenu comme assez important.
Llment mark est utilis pour faire ressortir
du contenu.
LISTES ORDONNEES & NON-
ORDONNEES

Pour crer une liste non-ordonne, on utilise


les lments ul (pour la liste) et li (pour les
lments de la liste).

Pour crer une liste ordonne, on utilise ol


et li.
LISTES DE DEFINITIONS &
LISTES IMBRIQUEES
Les listes de dfinition sont utilises pour
dfinir des termes.
On utilise les lments dl, dt et dd.
Le terme dfinir doit toujours tre plac avant
la description.
On peut avoir plusieurs descriptions pour le
mme terme ou plusieurs termes pour une
description.
LISTES DE DEFINITIONS &
LISTES IMBRIQUEES
Vous pouvez trs simplement imbriquer des listes
en HTML :
<ul>
<li> Elment 1 </li>
<li> Elment 2
<ol>
<li> Elment 1 ol </li>
<li> Elment 2 ol </li>
</ol>
</li>
</ul>
LIENS INTERNES ET EXTERNES
Liens internes = entre 2 pages dun mme
site.
Liens externes = dun site vers un autre site.

Pour crer des liens, on utilise llment a


avec son attribut href (Hypertext reference).
LIENS INTERNES ET EXTERNES
Pour crer des liens internes, on utilise un chemin
relatif. 3 cas :
Mme dossier : href = page2.html
Sous-dossier : href = sous_dossier/page2.html
Dossier parent : href= ../page2.html

Pour des liens externes, on spcifie un chemin


absolu. La valeur de lattribut href est ladresse du
site.

Pour ouvrir le lien dans une nouvelle fentre /


AUTRES TYPES DE LIENS
Lien menant un autre endroit de la mme
page web : spcifier un id puis #.

Lien pour envoyer un mail avec mailto:

Lien pour tlcharger un fichier en prcisant


un chemin relatif.
ELEMENTS STRUCTURELS DU
HTML5
Crs pour amliorer la smantique et mieux
structurer les pages web.

Elments introduits : header, nav, article, section,


aside et footer.

Vont avoir un rle de plus en plus important dans le


futur concernant loptimisation du rfrencement.
VALIDATION & COMPATIBILITE
Diffrents navigateurs peuvent produire
diffrents rsultats partir dun mme code.

Pourquoi ? Diffrents navigateurs et diffrents


versions de chaque navigateurs coexistent +
navigateurs mobiles !

Ncessit de tester son code sous diffrents


navigateurs !
VALIDATION & COMPATIBILITE

Le W3C met deux outils notre disposition :


Validateur HTML : http://validator.w3.org
Validateur CSS : http://jigsaw.w3.org/css-
validator

Vous devez vous efforcer davoir toujours un


code valide.
LES FONDATIONS DU CSS
SELECTEURS, PROPRIETES,
VALEURS
Un slecteur dtermine quel lment un
style doit tre appliqu.
Une proprit dtermine le style qui va tre
appliqu un lment.
Une valeur dtermine le comportement
dune proprit.
SELECTEURS, PROPRIETES,
VALEURS
Exemple:

slecteur p{ valeurs
color: blue;
proprit
s font-size: 16px;
}
O ECRIRE LE CSS ?

3 possibilits :
Dans llment head du document HTML,
Dans la balise ouvrante dun lment,
Dans un fichier CSS spar.
Il est recommand dutiliser la dernire mthode.

Pour lier un fichier HTML avec un fichier CSS, on


crit :
<link rel= stylesheet href= fichiercss.css />
LES COMMENTAIRES EN CSS

Les fichiers CSS sont trs vite trs longs : il


est donc essentiel de les commenter
proprement !

Un commentaire en CSS :
/* Je suis un commentaire CSS */
LES SELECTEURS SIMPLES

On appellera slecteurs simples les lments HTML


qui ne possdent pas dattribut (ex : p).

Ces slecteurs doivent tre prfrs autant que


possible car ils requirent moins de code que des
slecteurs plus complexes et le code sexcute donc
plus vite.

Limite : Comment appliquer un style diffrent deux


CLASS & ID

Class et Id sont deux attributs HTML, crs pour


pouvoir appliquer diffrents styles des lments de
mme type.

Class permet galement dappliquer le mme style


diffrents lment HTML (en leur appliquant la
mme valeur pour lattribut class).

Diffrence ? Id ne peut tre utilis que pour cibler un


unique lment, au contraire de class.
DIV & SPAN

Div et Span sont deux lment HTML crs, entre


autres, pour pouvoir appliquer un style du contenu
nayant pas de balise.

Div et Span servent de containers mais ne


possdent aucune valeur smantique.

On doit les utiliser seulement si cela est


ncessaire.
ELEMENTS DE TYPES BLOCK &
INLINE
Tout lment, en HTML, est soit un lment
de type block, soit un lment de type inline.

Div = lment de type block


Span = lment de type inline
ELEMENTS DE TYPES BLOCK &
INLINE
Les lment de type block
Commencent sur une nouvelle ligne,
Occupent toute la largeur disponible,
Peuvent tre imbriqus les uns dans les autres et peuvent
contenir des lment de type inline.

Les lments de type inline


Ne commencent pas sur une nouvelle ligne,
Occupent seulement la largeur ncessaire,
Peuvent contenir dautres lments de type inline mais pas
dlments de type block.
ELEMENTS DE TYPES BLOCK &
INLINE

Elments block Elments inline


p em
h1, h2, h3 strong
header, article, footer mark
ol, ul, dl a
table img
SELECTEURS AVANCES
Il est possible de combiner les slecteurs pour cibler
prcisment du contenu.

Slecteur universel (slectionne tous les lments) :


*

Appliquer un style aux lment A et B :


A, B { proprit: valeur; }

Slectionner un lment B contenu dans A :


SELECTEURS AVANCES
Slectionner le premier lment B suivant un lment A :
A + B { proprit: valeur; }

Slectionner tous les lments C possdant un attribut en


particulier :
C[attribut] { proprit: valeur; }

Slectionner tous les lments D possdant un attribut en


particulier et une valeur exactement :
D[attribut= valeur ] { proprit: valeur; }

Slectionner tous les lments E possdant un attribut en


particulier et une valeur :
E[attribut*= valeur ] { proprit: valeur; }
LHERITAGE

Les lments en HTML hritent des


styles de leurs parents. Do le
cascading de CSS.

En cas de conflit, le style le plus proche de


llment en question sera appliqu.