PARTIE I LES BASES BIENVENUE ! Ce cours a été optimisé pour des personnes souhaitant :Ce cours a été optimisé pour des personnes souhaitant : –Travailler.

Présentation au sujet: "PARTIE I LES BASES BIENVENUE ! Ce cours a été optimisé pour des personnes souhaitant :Ce cours a été optimisé pour des personnes souhaitant : –Travailler."— Transcription de la présentation:

1

2 PARTIE I LES BASES

3 BIENVENUE ! Ce cours a été optimisé pour des personnes souhaitant :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.Une approche directe et concrète des langages HTML et CSS.

4 PRESENTATION Pierre – 24 ansPierre – 24 ans Ecole de Commerce – Master 2 Entrepreneur.Ecole de Commerce – Master 2 Entrepreneur. Employé chez PrestaShop.Employé chez PrestaShop. Créé 5 e-commerces et a beaucoup étudié les problématiques de référencement.Créé 5 e-commerces et a beaucoup étudié les problématiques de référencement.

5 PRESENTATION Plus de formations sur mon site : pierre-giraud.frPlus de formations sur mon site : pierre-giraud.fr N’hésitez pas à vous abonner à ma chaîne YouTube !N’hésitez pas à vous abonner à ma chaîne YouTube ! Pour me suivre :Pour me suivre : –Twitter : @pierregird –Facebook : Facebook.com/PierreGiraud.fr –G+, Twitter : cherchez Pierre Giraud Merci d’avance ! Merci d’avance !

6 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;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;Une base pour comprendre son site, le modifier et résoudre les problèmes au besoin; Indispensable pour optimiser son référencement;Indispensable pour optimiser son référencement; Pour comprendre et se faire comprendre des développeurs avec qui vous travaillez.Pour comprendre et se faire comprendre des développeurs avec qui vous travaillez.

7 HTML & CSS : DEFINITION HTML = HyperText Markup Language.HTML = HyperText Markup Language. –Créé en 1991 –Fonction : donner du sens et structurer le contenu CSS = Cascading Style SheetsCSS = Cascading Style Sheets –Créé en 1996 –Fonction : mettre en forme le contenu en lui ajoutant des styles

8 LES VERSIONS HTML & CSS Versions actuelles :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.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.Introduisent de nouvelles fonctionnalités très attendues : insérer des vidéos, bordures arrondies, etc.

9 UN MOT SUR LE XHTML XHTML = Extensible HTMLXHTML = 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).

10 L’EDITEUR DE TEXTE Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur de texte, gratuitPour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur de texte, gratuit Pc = Komodo, NotePad++, etc.Pc = Komodo, NotePad++, etc. Mac = Komodo, TextWrangler, etc.Mac = Komodo, TextWrangler, etc. Linux = Komodo, gEdit, etc.Linux = Komodo, gEdit, etc. Première chose à faire : changer la couleur du fond !Première chose à faire : changer la couleur du fond !

11 LES FONDATIONS DU HTML

12 ELEMENTS, BALISES & ATTRIBUTS Eléments =Eléments = –Définissent des objets dans notre page web L’élément p définit un paragraphe,L’élément p définit un paragraphe, Les éléments h1, h2, …, h6 définissent des titres,Les éléments h1, h2, …, h6 définissent des titres, L’élément a définit un lien…L’élément a définit un lien… –Généralement constitués d’une paire de balises : Balise ouvrante : Balise ouvrante : Balise fermante : Balise fermante : Exception : balises orphelines comme Exception : balises orphelines comme

13 ELEMENTS, BALISES ET ATTRIBUTS Attributs =Attributs = –Propriétés utilisées pour donner des indications supplémentaires aux éléments. –Ex: Indiquer la cible d’un lien. Le site YouTube Le site YouTube élément a attribut Balise ouvrante Balise fermante

14 STRUCTURE D’UNE PAGE EN HTML5 Doctype : Doctype : Eléments :Eléments : –html, –head, –title, –meta, –body.

15 BONNES PRATIQUES, REGLES & COMMENTAIRES Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez les refermer dans le bon ordre :.Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez les refermer dans le bon ordre :. Indentez votre code et commentez le pour le rendre plus lisible, plus professionnel et plus simple à comprendre.Indentez votre code et commentez le pour le rendre plus lisible, plus professionnel et plus simple à comprendre.

16 BONNES PRATIQUES, REGLES & COMMENTAIRES Tout le monde peut voir votre code HTML ! N’écrivez donc pas d’infos sensibles en commentaires comme des mots de passe ! ! !

17 HEADING, PARAGRAPH, BREAK L’élément p définit un paragraphe.L’élément p définit un paragraphe. L’élément br crée un retour à la ligne.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).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 !Vous ne devez jamais utiliser des éléments pour appliquer un style à votre contenu !

18 STRONG, MARK, EMPHASIS L’élément strong est utilisé pour définir un contenu comme important.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 em est utilisé pour définir un contenu comme assez important. L’élément mark est utilisé pour faire ressortir du contenu.L’élément mark est utilisé pour faire ressortir du contenu.

19 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 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.Pour créer une liste ordonnée, on utilise ol et li.

20 LISTES DE DEFINITIONS & LISTES IMBRIQUEES Les listes de définition sont utilisées pour… définir des termes.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.

21 LISTES DE DEFINITIONS & LISTES IMBRIQUEES Vous pouvez très simplement imbriquer des listes en HTML :Vous pouvez très simplement imbriquer des listes en HTML :<ul> Elément 1 Elément 1 Elément 2 Elément 2<ol> Elément 1 ol Elément 1 ol Elément 2 ol Elément 2 ol </ol></li></ul>

22 LIENS INTERNES ET EXTERNES Liens internes = entre 2 pages d’un même site.Liens internes = entre 2 pages d’un même site. Liens externes = d’un site vers un autre 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).Pour créer des liens, on utilise l’élément a avec son attribut href (Hypertext reference).

23 LIENS INTERNES ET EXTERNES Pour créer des liens internes, on utilise un chemin relatif. 3 cas :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 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 ».Pour ouvrir le lien dans une nouvelle fenêtre / onglet, on utilise l’attribut target et sa valeur « _blank ».

24 AUTRES TYPES DE LIENS Lien menant à un autre endroit de la même page web : spécifier un id puis #.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 envoyer un mail avec mailto: Lien pour télécharger un fichier en précisant un chemin relatif.Lien pour télécharger un fichier en précisant un chemin relatif.

25 ELEMENTS STRUCTURELS DU HTML5 Créés pour améliorer la sémantique et mieux structurer les pages web.Créés pour améliorer la sémantique et mieux structurer les pages web. Eléments introduits : header, nav, article, section, aside et footer.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.Vont avoir un rôle de plus en plus important dans le futur concernant l’optimisation du référencement.

26 VALIDATION & COMPATIBILITE Différents navigateurs peuvent produire différents résultats à partir d’un même code.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 !Pourquoi ? Différents navigateurs et différents versions de chaque navigateurs coexistent + navigateurs mobiles ! Nécessité de tester son code sous différents navigateurs !Nécessité de tester son code sous différents navigateurs !

27 VALIDATION & COMPATIBILITE Le W3C met deux outils à notre disposition :Le W3C met deux outils à notre disposition : –Validateur HTML : http://validator.w3.org http://validator.w3.org –Validateur CSS : http://jigsaw.w3.org/css- validator http://jigsaw.w3.org/css- validatorhttp://jigsaw.w3.org/css- validator Vous devez vous efforcer d’avoir toujours un code valide.Vous devez vous efforcer d’avoir toujours un code valide.

28 LES FONDATIONS DU CSS

29 SELECTEURS, PROPRIETES, VALEURS Un sélecteur détermine à quel élément un style doit être appliqué.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 propriété détermine le style qui va être appliqué à un élément. Une valeur détermine le comportement d’une propriété.Une valeur détermine le comportement d’une propriété.

30 SELECTEURS, PROPRIETES, VALEURS Exemple:Exemple: p { color: blue; font-size: 16px; } sélecteur propriété s valeurs

31 OÙ ECRIRE LE CSS ? 3 possibilités :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 :Pour lier un fichier HTML avec un fichier CSS, on écrit :

32 LES COMMENTAIRES EN CSS Les fichiers CSS sont très vite très longs : il est donc essentiel de les commenter proprement !Les fichiers CSS sont très vite très longs : il est donc essentiel de les commenter proprement ! Un commentaire en CSS :Un commentaire en CSS : /* Je suis un commentaire CSS */

33 LES SELECTEURS SIMPLES On appellera sélecteurs simples les éléments HTML qui ne possèdent pas d’attribut (ex : p).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.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 ?Limite : Comment appliquer un style différent à deux paragraphes ?

34 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 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).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.Différence ? Id ne peut être utilisé que pour cibler un unique élément, au contraire de class.

35 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 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.Div et Span servent de containers mais ne possèdent aucune valeur sémantique. On doit les utiliser seulement si cela est nécessaire.

36 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.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 blockDiv = élément de type block Span = élément de type inlineSpan = élément de type inline

37 ELEMENTS DE TYPES BLOCK & INLINE Les élément de type block…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…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.

38 ELEMENTS DE TYPES BLOCK & INLINE Eléments blockEléments inline pem h1, h2, h3…strong header, article, footer…mark ol, ul, dla tableimg

39 SELECTEURS AVANCES Il est possible de combiner les sélecteurs pour cibler précisément du contenu.Il est possible de combiner les sélecteurs pour cibler précisément du contenu. Sélecteur universel (sélectionne tous les éléments) : *Sélecteur universel (sélectionne tous les éléments) : * Appliquer un style aux élément A et B :Appliquer un style aux élément A et B : A, B { propriété: valeur; } Sélectionner un élément B contenu dans A :Sélectionner un élément B contenu dans A : A B { propriété: valeur; }

40 SELECTEURS AVANCES Sélectionner le premier élément B suivant un élément A :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 :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 :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 :Sélectionner tous les éléments E possédant un attribut en particulier et une valeur : E[attribut*=« valeur »] { propriété: valeur; }

41 L’HERITAGE Les éléments en HTML « héritent » des styles de leurs parents. D’où le « cascading » de CSS.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é.En cas de conflit, le style le plus proche de l’élément en question sera appliqué.