html & css - Pierre Giraud

Download Report

Transcript html & css - Pierre Giraud 

PARTIE I
LES BASES
BIENVENUE !
• Ce cours a été optimisé pour des personnes
souhaitant :
– Travailler et optimiser leur référencement,
– Créez des sites innovants et optimisés,
• Une approche directe et concrète 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 problématiques de référencement.
PRESENTATION
• Plus de formations sur mon site : pierre-giraud.fr
• N’hésitez pas à vous abonner à ma chaîne 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 n’ont pas de concurrent et sont à la base de
tout projet de développement web;
• Une base pour comprendre son site, le modifier
et résoudre les problèmes au besoin;
• Indispensable pour optimiser son référencement;
• Pour comprendre et se faire comprendre des
développeurs 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 finalisées (encore en
développement) mais totalement stables et
déjà très largement utilisées.
• Introduisent de nouvelles fonctionnalités très
attendues : insérer des vidéos, bordures
arrondies, etc.
UN MOT SUR LE XHTML
• XHTML = Extensible HTML
– Version plus stricte, plus codifiée d’HTML…
Donc plus difficile à utiliser !
– Créé en 2000 pour succéder au HTML puis
abandonné en 2009 (ou plus exactement
intégré dans le HTML5).
L’EDITEUR DE TEXTE
• Pour coder en HTML ou en CSS, nous n’avons
besoin que d’un éditeur de texte, gratuit 
• Pc = Komodo, NotePad++, etc.
• Mac = Komodo, TextWrangler, etc.
• Linux = Komodo, gEdit, etc.
• Première chose à faire : changer la couleur du fond !
LES FONDATIONS DU HTML
ELEMENTS, BALISES & ATTRIBUTS
• Eléments =
– Définissent des objets dans notre page web
• L’élément p définit un paragraphe,
• Les éléments h1, h2, … , h6 définissent des titres,
• L’élément a définit un lien…
– Généralement constitués d’une paire de balises
:
• Balise ouvrante : <p>
• Balise fermante : </p>
• Exception : balises orphelines comme <br/>
ELEMENTS, BALISES ET ATTRIBUTS
• Attributs =
– Propriétés utilisées pour donner des indications
supplémentaires aux éléments.
– Ex: Indiquer la cible d’un lien.
Balise ouvrante
Balise fermante
<a href=“http://www.youtube.com”> Le site YouTube </a>
attribut
élément a
STRUCTURE D’UNE PAGE EN
HTML5
• Doctype : <!DOCTYPE html>
• Eléments :
– html,
– head,
– title,
– meta,
– body.
BONNES PRATIQUES, REGLES &
COMMENTAIRES
• Vous pouvez imbriquer des balises l’une
dans l’autre 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 ! N’écrivez donc pas d’infos sensibles
en commentaires comme des mots de passe
!
HEADING, PARAGRAPH, BREAK
• L’élément p définit un paragraphe.
• L’élément br crée un retour à la ligne.
• Les éléments h1, h2,… jusqu’à h6
définissent
des
titres
(par
ordre
d’importance).
• Vous ne devez jamais utiliser des éléments
pour appliquer un style à votre contenu !
STRONG, MARK, EMPHASIS
• L’élément strong est utilisé pour définir un
contenu comme important.
• L’élément em est utilisé pour définir un
contenu comme assez important.
• L’élément mark est utilisé pour faire ressortir
du contenu.
LISTES ORDONNEES & NONORDONNEES
• Pour créer une liste non-ordonnée, on utilise
les éléments ul (pour la liste) et li (pour les
éléments de la liste).
• Pour créer une liste ordonnée, on utilise ol
et li.
LISTES DE DEFINITIONS &
LISTES IMBRIQUEES
• Les listes de définition sont utilisées pour…
définir des termes.
– On utilise les éléments dl, dt et dd.
– Le terme à définir doit toujours être placé avant
la description.
– On peut avoir plusieurs descriptions pour le
même terme ou plusieurs termes pour une
description.
LISTES DE DEFINITIONS &
LISTES IMBRIQUEES
• Vous pouvez très simplement imbriquer des listes
en HTML :
<ul>
<li> Elément 1 </li>
<li> Elément 2
<ol>
<li> Elément 1 ol </li>
<li> Elément 2 ol </li>
</ol>
</li>
</ul>
LIENS INTERNES ET EXTERNES
• Liens internes = entre 2 pages d’un même
site.
• Liens externes = d’un site vers un autre site.
• Pour créer des liens, on utilise l’élément a
avec son attribut href (Hypertext reference).
LIENS INTERNES ET EXTERNES
• Pour créer des liens internes, on utilise un chemin
relatif. 3 cas :
– Même dossier : href = « page2.html »
– Sous-dossier : href = « sous_dossier/page2.html »
– Dossier parent : href=« ../page2.html »
• Pour des liens externes, on spécifie un chemin
absolu. La valeur de l’attribut href est l’adresse du
site.
• Pour ouvrir le lien dans une nouvelle fenêtre /
AUTRES TYPES DE LIENS
• Lien menant à un autre endroit de la même
page web : spécifier un id puis #.
• Lien pour envoyer un mail avec mailto:
• Lien pour télécharger un fichier en précisant
un chemin relatif.
ELEMENTS STRUCTURELS DU
HTML5
• Créés pour améliorer la sémantique et mieux
structurer les pages web.
• Eléments introduits : header, nav, article, section,
aside et footer.
• Vont avoir un rôle de plus en plus important dans le
futur concernant l’optimisation du référencement.
VALIDATION & COMPATIBILITE
• Différents navigateurs peuvent produire
différents résultats à partir d’un même code.
• Pourquoi ? Différents navigateurs et différents
versions de chaque navigateurs coexistent +
navigateurs mobiles !
• Nécessité de tester son code sous différents
navigateurs !
VALIDATION & COMPATIBILITE
• Le W3C met deux outils à notre disposition :
– Validateur HTML : http://validator.w3.org
– Validateur CSS : http://jigsaw.w3.org/cssvalidator
• Vous devez vous efforcer d’avoir toujours un
code valide.
LES FONDATIONS DU CSS
SELECTEURS, PROPRIETES,
VALEURS
• Un sélecteur détermine à quel élément un
style doit être appliqué.
• Une propriété détermine le style qui va être
appliqué à un élément.
• Une valeur détermine le comportement
d’une propriété.
SELECTEURS, PROPRIETES,
VALEURS
• Exemple:
sélecteur
propriété
s
p{
color: blue;
font-size: 16px;
}
valeurs
OÙ ECRIRE LE CSS ?
• 3 possibilités :
– Dans l’élément head du document HTML,
– Dans la balise ouvrante d’un élément,
– Dans un fichier CSS séparé.
Il est recommandé d’utiliser la dernière méthode.
• 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 très vite très longs : il
est donc essentiel de les commenter
proprement !
• Un commentaire en CSS :
/* Je suis un commentaire CSS */
LES SELECTEURS SIMPLES
• On appellera sélecteurs simples les éléments HTML
qui ne possèdent pas d’attribut (ex : p).
• Ces sélecteurs doivent être préférés autant que
possible car ils requièrent moins de code que des
sélecteurs plus complexes et le code s’exécute donc
plus vite.
• Limite : Comment appliquer un style différent à deux
CLASS & ID
• Class et Id sont deux attributs HTML, créés pour
pouvoir appliquer différents styles à des éléments de
même type.
• Class permet également d’appliquer le même style à
différents élément HTML (en leur appliquant la
même valeur pour l’attribut class).
• Différence ? Id ne peut être utilisé que pour cibler un
unique élément, au contraire de class.
DIV & SPAN
• Div et Span sont deux élément HTML créés, entre
autres, pour pouvoir appliquer un style à du contenu
n’ayant pas de balise.
• Div et Span servent de containers mais ne
possèdent aucune valeur sémantique.
On doit les utiliser seulement si cela est
nécessaire.
ELEMENTS DE TYPES BLOCK &
INLINE
• Tout élément, en HTML, est soit un élément
de type block, soit un élément de type inline.
• Div = élément de type block
• Span = élément de type inline
ELEMENTS DE TYPES BLOCK &
INLINE
• Les élément de type block…
– Commencent sur une nouvelle ligne,
– Occupent toute la largeur disponible,
– Peuvent être imbriqués les uns dans les autres et peuvent
contenir des élément de type inline.
• Les éléments de type inline…
– Ne commencent pas sur une nouvelle ligne,
– Occupent seulement la largeur nécessaire,
– Peuvent contenir d’autres éléments de type inline mais pas
d’éléments de type block.
ELEMENTS DE TYPES BLOCK &
INLINE
Eléments block
p
Eléments inline
em
h1, h2, h3…
strong
header, article, footer…
mark
ol, ul, dl
a
table
img
SELECTEURS AVANCES
• Il est possible de combiner les sélecteurs pour cibler
précisément du contenu.
• Sélecteur universel (sélectionne tous les éléments) :
*
• Appliquer un style aux élément A et B :
A, B { propriété: valeur; }
• Sélectionner un élément B contenu dans A :
SELECTEURS AVANCES
• Sélectionner le premier élément B suivant un élément A :
A + B { propriété: valeur; }
• Sélectionner tous les éléments C possédant un attribut en
particulier :
C[attribut] { propriété: valeur; }
• Sélectionner tous les éléments D possédant un attribut en
particulier et une valeur exactement :
D[attribut=« valeur »] { propriété: valeur; }
• Sélectionner tous les éléments E possédant un attribut en
particulier et une valeur :
E[attribut*=« valeur »] { propriété: valeur; }
L’HERITAGE
• Les éléments en HTML « héritent » des
styles de leurs parents. D’où le
« cascading » de CSS.
• En cas de conflit, le style le plus proche de
l’élément en question sera appliqué.