Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

PARTIE I LES BASES BIENVENUE ! • Ce cours a été optimisé pour des personnes sou

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 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 : • Balise fermante : • Exception : balises orphelines comme 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 a attribut 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> </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 ! 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 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électeur proprié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 uploads/Geographie/ apprenez-a-coder-en-html-et-css-partie-1.pdf