Post on 22-Mar-2016
description
PARTIE ILES 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
Merci d’avance !
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
ajoutant des styles
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.
<a href=“http://www.youtube.com”> Le site YouTube </a>
élément aattribut
Balise ouvrante Balise fermante
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 & NON-ORDONNEES
• 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 / onglet, on utilise l’attribut target et sa valeur « _blank ».
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/css-validator
• 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:
p {color: blue; font-size: 16px; }
sélecteurpropriétés
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 paragraphes ?
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 Eléments inlinep em
h1, h2, h3… strongheader, article, footer… mark
ol, ul, dl atable 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 : A B { propriété: valeur; }
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é.