Remerciez-le!

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

12/09/2018 1 HTML5 –CSS3 LIAGE 1 2017-2018 ISM-LIAGE1 M. NDIAYE 1 PARTIE I LES

12/09/2018 1 HTML5 –CSS3 LIAGE 1 2017-2018 ISM-LIAGE1 M. NDIAYE 1 PARTIE I LES BASES ISM-LIAGE1 M. NDIAYE 2 12/09/2018 2 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. ISM-LIAGE1 M. NDIAYE 3 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 ISM-LIAGE1 M. NDIAYE 4 12/09/2018 3 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. ISM-LIAGE1 M. NDIAYE 5 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). ISM-LIAGE1 M. NDIAYE 6 12/09/2018 4 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. ISM-LIAGE1 M. NDIAYE 7 LES FONDATIONS DU HTML ISM-LIAGE1 M. NDIAYE 8 12/09/2018 5 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 ISM-LIAGE1 M. NDIAYE 9 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. ISM-LIAGE1 M. NDIAYE 10 <a href=“http://www.youtube.com”> Le site YouTube </a> élément a attribut Balise ouvrante Balise fermante 12/09/2018 6 STRUCTURE D’UNE PAGE EN HTML5 • Doctype : <!DOCTYPE html> • Eléments : • html, • head, • title, • meta, • body. ISM-LIAGE1 M. NDIAYE 11 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. ISM-LIAGE1 M. NDIAYE 12 12/09/2018 7 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 ! ISM-LIAGE1 M. NDIAYE 13 ! 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 ! ISM-LIAGE1 M. NDIAYE 14 12/09/2018 8 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. ISM-LIAGE1 M. NDIAYE 15 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. ISM-LIAGE1 M. NDIAYE 16 12/09/2018 9 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. ISM-LIAGE1 M. NDIAYE 17 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> ISM-LIAGE1 M. NDIAYE 18 12/09/2018 10 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). ISM-LIAGE1 M. NDIAYE 19 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 ». ISM-LIAGE1 M. NDIAYE 20 12/09/2018 11 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. ISM-LIAGE1 M. NDIAYE 21 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. ISM-LIAGE1 M. NDIAYE 22 12/09/2018 12 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 ! ISM-LIAGE1 M. NDIAYE 23 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. ISM-LIAGE1 M. NDIAYE 24 12/09/2018 13 LES FONDATIONS DU CSS ISM-LIAGE1 M. NDIAYE 25 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é. ISM-LIAGE1 M. NDIAYE 26 12/09/2018 14 SELECTEURS, PROPRIETES, VALEURS ISM-LIAGE1 M. NDIAYE 27 • 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 »/> ISM-LIAGE1 M. NDIAYE 28 12/09/2018 15 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 */ ISM-LIAGE1 M. NDIAYE 29 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 ? ISM-LIAGE1 M. NDIAYE 30 12/09/2018 16 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. ISM-LIAGE1 M. NDIAYE 31 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. ISM-LIAGE1 M. NDIAYE 32 12/09/2018 17 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 ISM-LIAGE1 M. NDIAYE 33 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 uploads/s3/ support-html5-css3-pdf.pdf