Apprenez À Coder en HTML Et CSS Partie 1

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 : 
Balise fermante : 
Exception : balises orphelines comme 
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> </a>.
Indentez votre code et commentez le pour

le rendre plus lisible, plus professionnel et
plus simple comprendre.
BONNES PRATIQUES, REGLES &
COMMENTAIRES

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

Apprenez À Coder en HTML Et CSS Partie 1

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apprenez À Coder en HTML Et CSS Partie 1

Hochgeladen von

Copyright:

Verfügbare Formate

PARTIE I

Une approche directe et concrte des

Nhsitez pas vous abonner ma chane YouTube

CSS = Cascading Style Sheets

Introduisent de nouvelles fonctionnalits trs

XHTML = Extensible HTML

Pc = Komodo, NotePad++, etc.

Premire chose faire : changer la couleur du fond !

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

Indentez votre code et commentez le pour

! Tout le monde peut voir votre code

Llment p dfinit un paragraphe.

Vous ne devez jamais utiliser des lments

Llment strong est utilis pour dfinir un

Pour crer une liste non-ordonne, on utilise

Pour crer une liste ordonne, on utilise ol

Pour crer des liens, on utilise llment a

Pour des liens externes, on spcifie un chemin

Pour ouvrir le lien dans une nouvelle fentre /

Lien pour envoyer un mail avec mailto:

Lien pour tlcharger un fichier en prcisant

Elments introduits : header, nav, article, section,

Vont avoir un rle de plus en plus important dans le

Pourquoi ? Diffrents navigateurs et diffrents

Ncessit de tester son code sous diffrents

Le W3C met deux outils notre disposition :

Vous devez vous efforcer davoir toujours un

Pour lier un fichier HTML avec un fichier CSS, on

Les fichiers CSS sont trs vite trs longs : il

On appellera slecteurs simples les lments HTML

Ces slecteurs doivent tre prfrs autant que

Limite : Comment appliquer un style diffrent deux

Class et Id sont deux attributs HTML, crs pour

Class permet galement dappliquer le mme style

Diffrence ? Id ne peut tre utilis que pour cibler un

Div et Span sont deux lment HTML crs, entre

Div et Span servent de containers mais ne

On doit les utiliser seulement si cela est

Div = lment de type block

Les lments de type inline

Elments block Elments inline

Slecteur universel (slectionne tous les lments) :

Appliquer un style aux lment A et B :

Slectionner un lment B contenu dans A :

Slectionner tous les lments C possdant un attribut en

Slectionner tous les lments D possdant un attribut en

Slectionner tous les lments E possdant un attribut en

Les lments en HTML hritent des

En cas de conflit, le style le plus proche de

Das könnte Ihnen auch gefallen