CTT mela ol Cas PN oye) city ae: coder en HTMLS5 et CSS3SOMMAIRE Introduction Partie | - Les Bases en HTML et en CSS Chapitre 1 : Premiére Approche Théorique du HTML et du CSS Chapitre 2 : Les Bases en HTML Chapitre 3 : Les Bases en CSS Partie Il - Formater du Texte & Positionner des Eléments grace au CSS Chapitre 4 : Les Propriétés de Type « Font- » Chapitre 5 : Les Propriétés de Type « Text- » Chapitre 6 : Le Modéle des Boites Partie III —- Fonctionnalités Avancées Chapitre 7 : Gestion du Background (Le Fond) Chapitre 8 : Intégrer des Images, de |’Audio et de la Vidéo grace au HTML5 Chapitre 9 : Les Tableaux Chapitre 10 : Les Formulaires Partie IV — Aller plus Loin ConclusionINTRODUCTION Présentation du cours et de ses objectifs Le but premier de ce cours est de vous apprendre pas A pas & coder en HTMLS et en CSS3. Outre cela, je vais également m’appliquer & vous montrer la logique et les mécanismes derriére ces deux langages afin que vous compreniez ce que vous faites et que vous deveniez vite autonomes. Ce cours est divisé en trois parties, progressives : * Une premiére partie avec un peu de théorie dans laquelle nous poserons les bases pour un apprentissage solide ; * Une deuxiéme partie dans laquelle nous verrons comment positionner les différents éléments de notre site et comment personnaliser nos textes ; * Une demiére partie ot! nous explorerons les fonctionnalités avancées du HTML5 et du CSS3 (insertion de vidéos, formulaires, responsive design, etc.). Au fil de ce cours, nous aborderons également autres langages comme le XHTML ou le PhP lorsque cela justifié et afin que vous ayez une compréhension globale de ce que vous faites. A qui s‘adresse ce livre ? Les langages HTML et CSS sont, comme nous allons le voir, a la base de tout projet de programmation informatique. Par extension, ce cours s’adresse & tous, du plus parfait néophyte a l’expert ayant besoin d’un rafraichissement. Le HTML et le CSS sont des langages plutét simples 4 maitriser et a comprendre. J’ai voulu dans ce livre vous apporter une approche concréte et directe de ces langages. Ce cours offre une difficulté graduelle mais, en soi, il n’y a jamais rien d’insurmontable.En résumé, ce cours s‘adresse : * Aussi bien au néophyte qu’a la personne expérimentée ; * A tous ceux qui veulent apprendre a coder en HTML et en CSS A propos de I’auteur Je suis Pierre Giraud, j’ai 24 ans au jour de publication de ce livre et je suis passionné par |’entreprenariat et l’univers de la technologie en général. Voici mon parcours en quelques lignes. Aprés un baccalauréat scientifique, je me dirige vers une classe préparatoire économique option scientifique. A la suite de cette classe préparatoire, j’intégre l/EDHEC Lille. Dés mon entrée a /EDHEC, je commence en dehors des cours & me familiariser et & apprendre différents langages informatiques. Je débute par le HTML, puis le CSS, puis le PhP, le MySQL, le JavaScript... Je crée également trois start-ups, « pour tester », durant mes deux premiéres années d’école : un e-commerce, un site de services, un commerce d’achat/revente. Je connais deux (petits) succés et un échec relatif. Lors de mon année de césure (année de stage), je saute définitivement le pas et postule chez PrestaShop (distributeur de sa solution e- commerce Open Source). Je suis retenu et finit donc ma formation au sein de développeurs. Je suis aujourd’hui diplémé d’un double Master 2 Entreprenariat et de Gestion et peut me targuer d’étre un expert PrestaShop et dans le domaine de I’e-commerce ainsi qu’un bon développeur.PARTIE | LES BASES EN HTML ET EN CSSCHAPITRE 1 : PREMIERE APPROCHE THEORIQUE DU HTML ET DU CSS 1.1 Pourquoi apprendre les langages HTML et CSS ? Si le monde de |‘informatique vous plait et que vous étes tenté d/apprendre la programmation informatique, vous serez obligé de passer par I’apprentissage du HTML et du CSS et ceci pour deux raisons. Tout d’abord, il faut savoir que le HTML et le CSS sont deux véritables standards et n’ont donc, a ce titre, pas de concurrent comme cela peut étre le cas pour le langage PhP par exemple (concurrencé par Ruby on Rails et Django entre autres). Ensuite, les langages HTML et CSS sont véritablement le socle de tout projet de développement web. Que vous vouliez créer un site e- commerce, un blog, une application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les langages HTML et CSS. Cela étant, si vous connaissez un petit peu le monde du web, vous pouvez trés bien vous dire que coder en HTML et en CSS est inutile puisque vous pouvez utiliser des solutions toutes faites comme des frameworks (WordPress, PrestaShop), des éditeurs WYSIWIG (What You See Is What You Get) ou encore avoir recours aux services d’une agence spécialisée. Abattons dés maintenant quelques idées regues ! 1. Un framework, c’est génial. En effet, ce sont des centaines d’heures de travail économisées pour vous et également la garantie d’un travail bien fait a priori. Certes ! Toutefois, le jour ot vous voulez intégrer quelque chose comme disons... un systéme de paiement, comment faites-vous ? Idem si vous voulez modifier un peu I’apparence graphique de votre site.Tout ¢a pour vous dire que s‘il est vrai qu’installer un framework peut étre une bonne solution, ce n’est plus suffisant aujourd’hui sur le web. 2. Les éditeurs WYSIWIG sont des éditeurs qui codent « a votre place ». En gros, vous choisissez d’insérer un paragraphe, une image, un carré, etc. et |’éditeur crée le code correspondant. Un exemple célébre est Adobe Dreamweaver. Si ces éditeurs sont de plus en plus puissants et de mieux en mieux fait, il n’empéche qu’ils font et continueront toujours a faire des erreurs. En effet, il n’est pas possible pour un programme de penser comme un humain et ainsi votre code ne sera jamais tout a fait valide. De plus, certaines limitations demeurent. 3. Une agence spécialisée ou un freelance, cela semble étre un must. Encore une fois: attention! Tout d’abord, nombre de freelances et d’agences ne se résument en fait qu’a un étudiant cherchant 4 gagner un peu d’argent. Je vous laisse imaginer dans nombre de cas le résultat... De plus, les grosses agences reconnues ont des prix qui dépassent certainement votre budget a priori. Enfin, une fois le travail rendu, ne vous attendez pas 4 ce que votre freelance ou votre agence vienne vous dépanner en cas de probleme pendant des années. Encore une fois, je ne vous dis pas de ne pas travailler avec une agence, je vous dis simplement de prendre des précautions et de vous organiser avant. Apprendre le HTML et le CSS signifie entrer dans le monde des programmeurs et c’est donc commencer a les comprendre et a parler comme eux. Si vous comprenez le HTML et le CSS avant de faire appel & une agence, vous rédigerez alors un cahier des charges plus précis et demeilleure qualité et économiserez finalement beaucoup d’argent et de soucis. Finalement (on garde le meilleur pour la fin !), apprendre le HTML et le CSS c’est surtout et avant tout avoir un socle pour comprendre comment fonctionne son site et ainsi pouvoir le modifier ou corriger des problémes au besoin. Deviendriez-vous plombier sur un coup de téte ? Non, car vous n’y connaissez rien en plomberie. C’est exactement pareil sur le web. Vous n’imaginez pas le nombre de gens qui se lancent sur le web sans la moindre connaissance de leur environnement et le nombre d’échecs associés. N’oubliez pas qu’il est essentiel, pour qu’un commerce fonctionne (et aujourd'hui plus que jamais) d’avoir une comprchension de son propre business, de son architecture et infrastructure et de son environnement. Si vous faites I’effort de comprendre cela, vous avez d’ores-et-déja battu 95% de vos concurrents. Sans compter que pour optimiser votre référencement (donc votre visibilité sur le web), la maitrise du HTML et du CSS est indispensable. Convaincu ? Dans ce cas, passons a la suite ! Car je parle, je parle, mais nous ne savons toujours pas ce que signifient « HTML » et «CSS»! 1.2 Définitions et réles du HTML et du CSS HTML est l’abréviation de HyperText Markup Language, soit en frangais « langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens a du contenu.CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en 1996 et a pour rdle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles. Sachez-le: beaucoup de débutants, et méme des personnes expérimentées, confondons les fonctions respectives du HTML et du CSS et utilisent un langage pour faire le travail de l’autre. En Voccurrence, c’est le HTML qui est souvent utilisé 4 mauvais escient, pour mettre en forme du contenu. Je vais vous le répéter et vous le répéter & nouveau au fil de ce cours : c'est une trés mauvaise pratique ! Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS. Mais encore une fois, ne vous inquiétez pas, je vais vous le répéter encore et encore... Retenez donc que le HTML est utilisé pour baliser un contenu, c'est a dire pour le structurer et lui donner du sens. Le HTML sert, entre autres choses, 4 indiquer aux navigateurs quel texte doit étre considéré comme un paragraphe, quel texte doit étre considéré comme un titre, que tel contenu est une image ou une vidéo. Le CSS, quant-a-lui, est utilisé pour appliquer des styles a un contenu, c’est-a-dire 4 le mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positioner tel contenu A tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu. 1.3 Versions actuelles des langages HTML et CSS Les versions actuelles du HTML et du CSS sont HTMLS et CSS3. II faut savoir que, contrairement aux idées recues, ce sont encore des versions non finalisées. Cela signifie que ces versions sont toujours en développement et qu’elles sont toujours en théorie sujettes a changements et a bugs.En pratique, toutefois, on peut considérer ces versions comme totalement stables et c’est donc sur celles-ci que nous allons travailler. En effet, la version 5 d’HTML, tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalités longtemps attendues par les développeurs et il serait donc dommage de s’en priver. Parmi celles-ci, |’insertion simplifiée de vidéos et de contenus audio et de nouvelles balises améliorant la sémantique (on va y revenir, pas d’inquiétude !) pour mieux structurer nos pages en HTML ou encore la possibilité de créer des bordures arrondies en CSS. 1.4 Un mot sur le XHTML Avant de poursuivre plus avant notre découverte du HTML et du CSS, je dois vous parler du XHTML. XHTML signifie eXtensible HTML. Crée en 2000, il devait a l’origine succéder au HTML. En effet, il faut savoir que le HTML base sa syntaxe sur le langage SGML (Standard Generalized Markup Language) tandis que le XHTML se fonde sur le XML (eXtensible Markup Language). Or, a I’époque, le XML était une véritable petite révolution puisqu’il permettait de faire davantage de choses que le SGML et qu’il était dit plus simple a utiliser. Cependant, le HTML a continué a se développer en paralléle au XHTML et le XHTML est définitivement abandonné en 2009 ou plus exactement a été en partie intégré dans ce qui allait devenir le HTMLS.Le XHTML reste aujourd’hui encore utilisé pour réaliser certaines pages de code spécifique. Pour commencer, cependant, je vous recommande de vous concentrer sur le HTML5. 1.5 L’éditeur de texte Fini la théorie, il est temps de se préparer pour pratiquer ! Et pour coder en HTML et en CSS, c’est trés simple : nous n’avons besoin que d'un éditeur de texte. Il_ existe des centaines et des centaines d’éditeurs de texte et beaucoup se valent. Certains sont gratuits, d’autres sont payants. Je ne vais pas vous imposer le choix d’un éditeur, mais simplement vous donner des recommandations. Tout d’abord, je vous conseille de choisir un éditeur de texte gratuit. Une raison & cela: A moins d’étre un développeur expert, vous n’aurez quasiment jamais besoin des options disponibles avec les éditeurs payants. Deuxiéme conseil : essayez-en plusieurs avant de faire votre choix. En effet, comme je V'ai dit, les bons éditeurs possédent quasiment tous les _mémes fonctionnalités. La différence va donc se faire sur Vergonomie et la prise en main. Voici les éditeurs que je peux vous conseiller : * NotePad++, si vous étes sous Windows; * Komodo, pour Mac ou Linux * TextWrangler, pour Linux Personnellement, ‘utilise Komodo que je trouve trés intuitif et tres bien fait mais, encore une fois, le meilleur choix est le vétre. Une fois votre éditeur de texte choisi, je vous recommande vivement de changer la couleur de fond de celui-ci. En effet, les éditeurs utilisent en général par défaut le blanc comme couleur de fond pour 1les fichiers. Or, ce blanc risque de trés rapidement devenir fatiguant pour vos yeux comme pour votre cerveau. Je vous conseille donc de mettre du gris ou du noir en couleur de fond a la place. Pour faire cela, si vous avez un Mac comme moi, vous n’avez qu’a cliquer sur le nom de votre éditeur en haut a gauche de votre fenétre, puis « Préférences » et vous aurez accés 4 toutes les options de personalisation. Si vous étes sous Windows ou Linux, je ne peux malheureusement pas vous aider mais cela ne doit pas étre tres compliqué a trouver je suppose. A noter que, pour vous entrainer, vous pouvez également utiliser excellent site [Link] qui vous permet d’entrer du code en HTML, en CSS et / ou en JavaScript est d’avoir un apercu du résultat visuel en temps réel. Bref, une fois votre éditeur de texte choisi et installé ou le site JsBin lancé, il est temps de passer a la suite et de commencer notre initiation au HTML. 1?CHAPITRE 2 : LES FONDATIONS DU HTML 2.1 Eléments, balises et attributs lly a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont les termes élément, balise et attribut. Les éléments, tout d’abord, vont nous servir 4 définir des objets dans notre page. Grace aux éléments, nous allons pouvoir définir un paragraphe (élément p), des titres d’importances diverses (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a). Les éléments sont constitués de balises. Dans la majorité des cas, un élément est constitué d'une paire de balises : une balise ouvrante et une balise fermante. Been) — |

Je suis un paragraphe en HTML

rey Pritt ouvrante PTET Les balises reprennent le nom de I’élément et sont entourées de chevrons. La balise fermante posséde en plus un slash qui précéde le nom de |’élément. Cependant, certains éléments ne sont constitués que d’une balise qu’on appelle alors balise orpheline. C’est par exemple le cas de I'élément br qui va nous servir a créer un retour a la ligne. U’écriture en HTML est alors la suivante :
. Notez que, dans le cas des balises orphelines, le slash se situe aprés le nom de |’élément. Notez également que ce slash n’est pas obligatoire et que certains développeurs |’omettent volontairement.Je vous conseille cependant, pour des raisons de propreté de code et de compréhension, de mettre le slash dans un premier temps. Les attributs, enfin, vont venir compléter les éléments en leur donnant des indications ou des instructions supplémentaires. Par exemple, dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible du lien, c’est 4 dire vers quel site le lien doit mener. Notez que les attributs se placent toujours a l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline le cas échéant). Cres ec | Men Cm Mees Calas Ce Ce aL el bo ——————— Este aud Dans I’exemple ci-dessus, on discerne I’élément a composé : + dune balise ouvrante elle-méme composée d’un attribut href ; + d’une ancre textuelle ; + d'une balise fermante. Lattribut href (initiales de « Hypertexte Reference ») sert indiquer la cible de notre lien, en occurrence le site Wikipédia. L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur Wikipédia et également I’unique partie visible pour eux. Voici ce que les visiteurs de votre site verront :ra Premigre: page HTML Ge) ) 2) file:/f/Users/Plerre/Desktop/[Link]| ¢ Je suis un paragraphe en HTML (Cliguez ici pour aller sur WikiPédia Si vous vous sentez un peu perdu pour le moment, ne vous inquiétez pas, c’est tout-a-fait normal ! Continuez le cours, vous allez voir : avec un peu de pratique, tout cela va trés vite se décanter et vous aurez tout compris avant méme de vous en rendre compte ! 2.2 Structure de base d’une page en HTML5S En programmation comme dans beaucoup d’autres disciplines, vous V'aurez compris, il y a des régles. Ainsi, toute page écrite en HTML5 doit comporter une certaine structure, un « squelette » qui sera toujours le méme. Ce squelette est bien évidemment constitué de divers éléments. Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un « doctype ». Le doctype, comme son nom Vindique, sert 4 indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc : Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu particulier.Ensuite, pour que notre page HTMLS soit valide, il va nous falloir indiquer trois nouveaux éléments : html, head (« en-téte ») et body (« corps de page »). L’élément html va contenir toute la page. L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et des meta-data (des données invisibles pour les utilisateurs mais essentielles — nous en reparlerons plus tard). L’élément body contiendra tout le contenu de notre page (paragraphes, images, tableaux, etc.). Voila ot nous en sommes rendus pour le moment : Mais ce n’est pas fini ! Pour que la page soit valide, I’élément head doit lui méme contenir un élément title, qui correspond au titre de la page et le meta charset qui prendra comme valeur le type d’encodage choisi. Pour les langues latines, nous choisirons généralement la valeur « utf- 8B». Voici & quoi vous devriez arriver en pratique : 16>Ma premiére page valide en HTML5Ma premiére page valide en HTML5 , c’est a dire que le dernier élément ouvert est toujours le premier refermé. Vous ne devrez jamais Scrire . Normalement, si vous refermez bien chaque balise juste aprés I'avoir ouverte, plutt que de dire « c’est bon, j'y penserai plus tard », vous ne devriez jamais faire l’erreur. Autre bonne pratique maintenant : I’indentation. Indenter son code, c‘est tout simplement I’aérer en ajoutant des espaces au début de certaines lignes afin de le rendre plus lisible pour vous comme pour les autres. Il n'y a pas de régle absolue concernant l’indentation, certains accentuant plus ou moins le retrait en début de ligne. Pour ma part, j‘utilise une tabulation (la touche a gauche du a) a chaque fois que j‘ouvre une nouvelle balise a l’intérieur d’un élément. Cela permet de bien hiérarchiser son code et de voir immédiatement quel élément est imbriqué dans quel autre. Par exemple, on voit bien dans I'exemple ci-dessus que j’ai ajouté de nouveaux espaces lorsque j’ai ouvert ma balise head et title, mais que je n’en ai pas ajouté pour le meta charset. Pourquoi? Tout 19simplement car la balise meta n’est pas contenue dans |’élément title mais seulement dans |’élément head. Elle est donc au méme niveau de hiérarchie que le title. L’indentation peut peut-étre vous paraitre superflue pour le moment, mais je vous garantis que c’est une pratique extrémement utile et qu’une bonne indentation est souvent ce qui fait la différence entre un codeur moyen et un bon codeur. Troisiéme et dernivre bonne pratique dont je voulais vous parler : le fait de commenter son code. Commenter son code, c’est tout simplement y ajouter des commentaires. Ces commentaires sont spéciaux: il ne seront pas visibles par vos visiteurs (a moins que ceux-ci n’affichent le code source de la page). Voici comment on écrit un commentaire en HTML : 2nSDV n aries Yee era Lesa: alut, je suis un gros titre | Et moi je suis un paragraphe: Salut, je suis un gros titre ! Et moi je suis un paragraphe Pourquoi commenter son code ? Pour plusieurs raisons. Tout d’abord, pour vous. En effet, lorsque vous commencerez a véritablement savoir coder, vos pages vont s’allonger et se complexifier. Commenter va alors devenir indispensable pour vous repérer dans votre page web et pour vous rappeler pourquoi vous avez fait telle chose de telle fagon. Ensuite, pour les personnes a qui vous pourriez distribuer votre code. Rappelez vous qu'il existe autant de maniéres de coder que d’esprits humains ou presque et qu’il est donc essentiel de donner des indications sur votre code afin que les personnes puissent le comprendre plus rapidement et plus facilement. a1En bref : commenter n’est pas un luxe mais souvent ce qui sépare un développeur moyen d’un bon développeur, tout simplement. Attention & ne jamais mettre d’informations sensibles en commentaire, comme des mots de passe par exemple. En effet, rappelez vous que tout le monde peut avoir accés au code source de votre page, et donc a votre code HTML. Pour vous en convaincre, n’hésitez pas a aller sur n’importe quel site (Wikipédia par exemple), puis a faire un clic droit sur la page et choisir l’option « inspecter |’élément » ou « afficher le code source » selon votre navigateur. . Bienvenue sur Wikipédia W Li projet tanaclopdte oe que vous pouvoe ambtorar ° a “A ‘Ais — Géogrephie ~ Hstoice — Sciences — Socibt6 — Sport — Liste des portals thémaiques ve Lumiére sur aack Los A. Tam Sessions soot unb sbi 60 cn) Reload Page se lone dvb toiale de hut minutes, ubites Surtntamet¢ Open in Dashboard. "am place dans ie Seronityyors, tuners 6 tion dea sto le Seriraues entio. tun thirapoute de 'Académio» manus do SHOMPAIE SOwEE atta jeuno iscnectgenmnonnmecamer Seats: | PEGE Publdes-6e mani non offeete (whedon un premier tomps ice impiquts), ous videos constituaioat une mamermeransseny emery le fm Sorenity, Los « sossions » ont 6té publibos sur intomet erive lo 16 act ete 5 septomre 2005, at sont incluses sur eeion collector du Blu-ray do Soromy sous lo ttre Session 516. Lire la sate ‘Contenus de quakté + Bons contenus + Stlection » Programme: Vous aurez alors accés au code HTML de la page, quelque soit le site. 22nvenue sur Wikipédia La projet dloneyclopiti ars que vous power aenitoner : ia wo Liste dos portals thérnatquos at une sbrke de tna courtes viees en * Theete"/aakuftoar et lane titler"@air et Blasc*>oeir et blancs ra> drone daree tataia de hale Minutes, publiéer sur Taternat sr” 15s falesiSose,sbedon’ #1 les dose Whedartsdors Whedon? Notez que, selon votre navigateur, vous devrez au préalable activer les extensions pour développeur afin de pouvoir inspecter des éléments ou afficher le code source d’une page. Pour cela, rendez- vous dans les options avancées de votre navigateur ! 225__Safari_ File Edit View History, Bookmarks Develop Window Help. @00 Advanced Never use font sizes smallerthan 9 © Press Tab to highlight each item on a webpage Option-Tab highlights each tem. Bonjour: (Include Bonjour in the Bookmarks menu } Include Bonjour in the Favorites bar Internet plug-ins: Stop plug-ins to save power Plug-ins start automatically on 16 websites ( Details Style sheet: | None Selected = Default encoding: | Western (ISO Latin 1) Proxies: | Change Settings... (@ Show Develop menu in menu bar 2.5 Les éléments Heading, Paragraph et Break Le HTML, je vous l’ai dit, sert a différencier d’un point de vue sémantique les différents objets que |’on peut rencontrer et dont on peut avoir besoin (titre, paragraphe, espace, image, etc.). Pour faire cela, le HTML va utiliser des éléments. Et le moment est arrivé pour nous d’apprendre a créer des paragraphes, des titres, et & faire des retours a la lignes en HTML. Pour créer des paragraphes, tout d'abord, on va utiliser ’élément p. On peut créer autant de paragraphes que l’on souhaite dans une page. Pour chaque nouveau paragraphe, il faut rouvrir une balise

. A chaque nouveau paragraphe, un retour a la ligne est automatiquement effectué. 24Si maintenant vous désirez créer un retour a la ligne a |’intérieur méme d’un paragraphe, il faudra utiliser I’élément br (diminutif de break). Cet élément est constitué d’une seule balise orpheline, qu’on notera donc
. Pour créer des titres, on va utiliser les éléments h1, h2, h3, h4, h5 et h6. Pourquoi autant d’éléments différents ? Pour pouvoir créer des titres de diverses importances. Ainsi, un titre h1 sera considéré comme un titre trés important tandis qu’un titre h6 sera considéré comme trés peu important. En pratique, on n’utilisera que trés rarement les titres de niveau h4, h5 et h6. Si vous vous interrogez encore sur V'intérét d’avoir tous ces éléments, pensez que cela est trés important pour le référencement entre autres. En effet : plus vous serez clair et mieux un moteur de recherche vous comprendra, mieux vous serez référencé. Voila ce que ¢a donne en image : 25eee an i aca Se ee yee Seirrensti cme Se eran ccna aeNaeren eee Sree ee ne CC Quieres en tie SD ornate ek Salut, je suis un gros titre ! Je suis un titre un peu moins important Je sls un titre moyeonement important ey, su prrete Jepuisunceanine ppagipte shee on ar laipse ane Vous avez remarqué ? Oui, les titres apparaissent en gras et ont des tailles différentes selon leur degré d’importance. Et c'est précisément la ou j’en reviens a mon premier point: vous ne devez JAMAIS utiliser le langage HTML pour mettre en forme le contenu. Ce que vous voyez n’est qu’une mise en forme automatique faite par votre navigateur, une interprétation visuelle de ce que vous avez donné a votre navigateur. Cependant, vous ne devez jamais utiliser un titre de niveau h1 pour mettre un texte en gros et en gras. JA-MAIS. Pour bien vous faire comprendre ce qu'il se passe, vous pouvez imaginer que votre navigateur est un éléve et vous un professeur. Vous faites votre cours, et d’un coup vous dites a vos éléves « attention, ce point 1a est trés important » (a l'aide d’une balise h1). Vos élaves vont avoir tendance a surligner cette partie du cours. 26C’est exactement ce que fait votre navigateur. Cependant, en tant que professeur, vous n’allez pas dire A vos éléves «ce point A est important » juste pour que vos éléves surlignent une partie de votre cours, cela serait stupide. Vous leur direz « prenez vos surligneurs et surlignez cela ». Et c'est ce que nous allons faire ave le CSS. Tout cela pour vous dire que la taille et le poids du texte rendu par votre navigateur n’est que le résultat d’une interprétation et n’est qu’une mise en forme automatique. Si vous avez compris cela, vous avez tout compris ! Et pas d’inquiétudes non plus si vous ne voulez pas avoir vos titres en gras, on s’occupera de I’aspect visuel plus tard avec le CSS. Le CSS peut nous permettre de faire réellement tout ce que I’on désire d’un point de vue visuel : créer des styles tout comme enlever des styles automatiques. Les éléments Strong, Emphasis et Mark Continuons a apprendre a « parler» en HTML et donc dans la découverte de nos éléments avec trois nouveaux éléments: les éléments strong, em (diminutif de emphasis) et mark. L'élément strong, tout d’abord, est utilisé pour indiquer aux moteurs de recherche qu'un contenu est particuliérement important, afin que celui-ci soit traité avec plus d’importance. Le résultat visuel est une mise en forme automatique en gras. Mais encore une fois, on n/utilise pas I’élément strong pour mettre un texte en gras ! L’élément em, pour emphasis (« emphase » en francais) est proche de élément strong. Il sert lui aussi a signifier qu’un contenu est important, mais moins important tout de méme qu’un contenu entre des balises strong. Encore une fois, si vous vous demandez Iintérét de ces éléments, il est avant tout dans |’optimisation du référencement de votre site. En effet, normalement, vous devriez avoir ciblé des mots clefs et essayer 27d’étre bien référencé sur ces mots la. Les balises strong et em vous aident a atteindre ce but, entre autres. Enfin, ’élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne sera pas forcément considéré comme important, mais cette balise peut servir dans le cas de |’affichage de résultats suite 4 une recherche d’un de vos visiteurs par exemple. Core ea SRC ee ea a Beret Sees och saeco taka ee renee ntact Ore Cette fois, on va parler des éléments strong, em et mark Je sls on parva contenant on mot is Important Mol sus je conices soit mes [Link] poo mola ingorsts out de ane ei jepson eH RE SIE Voila donc pour les éléments dits de base, il est maintenant tant de s‘attaquer 4 des éléments relativement plus complexes, et nous allons commencer avec les listes. 2.7 Listes ordonnées et non-ordonnées Les listes servent a ordonner du contenu, a lui donner un ordre cohérent. Visuellement, les listes en HTML correspondent a ce que vous créez lorsque vous utilisez des puces dans un document Word ou PowerPoint par exemple, comme ceci : aR* Elément numéro 1 * Elément numéro 2 * Elément numéro 3 En HTML, les listes vont avoir deux grands intéréts pour nous : on va pouvoir les utiliser pour créer des menus ou, dans leur forme brute, pour mieux présenter du contenu pour un blog par exemple. Il existe trois grands types de listes en HTML : les listes ordonnées, les listes non-ordonnées et un dernier type un peu particulier : les listes de définition. Nous allons commencer avec les listes ordonnées et non-ordonnées. La différence entre les listes ordonnées et non-ordonnées est que les listes ordonnées possédent un aspect de subordination, d’ordre logique, de classement tandis que ce n’est pas le cas pour les listes non-ordonnées. Pour créer une liste non-ordonnée, on va avoir besoin de deux nouveaux éléments : I’élément ul (abréviation de unordered list), qui va contenir toute la liste et I’élément li (pour list item) que l’on va utiliser pour créer chaque élément de la liste. Voyons immédiatement comment cela fonctionne en pratique : 294 STC a ar eo 5 see Uae Mam eM nC ah Cosa ecole 12 pibeiay vanes

Route

pipes Counts 4 ieee nce ig D vvewers manele det tten. 2 rier rer besiop ovencorrT itr men Aujourd'hui, on parle de listes non-ordonnées » Fraise » Route + maison + Chavssure Dans I’exemple précédent, les différents éléments de la liste n’ont pas de cohérence entre eux et on ne peux donc pas les classer, les ordonner (sans contexte du moins). C’est pourquoi j’ai utilisé une liste non-ordonnée. Pour créer une liste ordonnée maintenant, nous allons simplement remplacer I’élément ul par I’élément ol (pour ordered list). 2nDUvnivers mervetieun cesses. % FED ties srusersirierresoeswcope Cours ort siesta Tl est temps de traiter le cas des listes ordonnées 1, Introduction 2. Partie 3. Partie Il 4, Partie IIT 5. Conclusion Cette fois-ci, il y a une relation de subordination, un ordre logique et naturel entre les éléments de la liste (on met généralement Vintroduction avant la conclusion); on utilise donc une liste ordonnée. Dernier grand type de listes que nous allons voir ensemble, les listes de définition son utilisées pour définir des termes. Pour créer une liste de définition, il va nous falloir utiliser |’élément dl (pour definition list), I’élément dt (pour definition term) et I’élément dd pour la définition en soi. Il _n’y a qu’une régle a respecter lorsque I’on crée une liste de définitions : vous devez toujours placer |’élément dt avant |’élément 21dd, c’est-a-dire le terme a définir avant sa définition. Cela est assez intuitif et ne devrait donc pas vous poser de probléme. En revanche, il est tout a fait possible d’associer plusieurs termes une définition ou méme plusieurs définitions 4 un méme terme. Voici un exemple de liste de définitions : NN a roreierraeduon tara ione hm Les listes de définition arse [ETM signife Hyper Text Marup Language. Colon 1991, le ETM. Listes imbriquées Ca commence a devenir vraiment intéressant ! En effet, le HTML nous offre la possibilité d’imbriquer les listes les unes dans les autres tres simplement. Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde a l’intérieur d’un élément de la premiere (on peut évidemment imbriquer plus de deux listes en répétant le méme processus). Voici une illustration, en imbriquant par exemple une liste non- ordonnée a l’intérieur d’une liste ordonnée : 22ee ae a aC a CRs la ee Q recy @ Lunivers menveiieur des tstes @Alezr sees #erce/Desktop/Cours2OHTML livre htt Les listes imbriquées 1, Natation ‘© Maillot © Bonnet ‘o Lunettes 2. Vélo 3. Course a pied Comme vous le voyez, si on n’oublie pas d’élément, les listes restent trés simples a utiliser et & manipuler. J'espre que vous comprenez mieux désormais |importance de bien indenter son code ! C’est tout pour les listes, n’hésitez pas a vous entrainer afin d’étre certain de bien maitriser tout ce que l’on a vu jusqu’ici car le prochain chapitre est capital : nous allons apprendre & créer des liens. 232.10 Liens internes et liens externes Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour Vinstant, nous allons nous concentrer sur les eux types les plus « classiques » : les liens internes et les liens externes. Quelle différence entre ces deux types de liens ? Un lien interne est un lien créé entre deux pages d’un méme site web tandis qu’un lien externe est un lien menant d’un site web vers un autre site web. Dans tous les cas, pour créer un lien, nous allons utiliser |’élément « a » accompagné de son attribut href (pour Hypertext Reference) qui sert a indiquer la cible (c’est a dire la destination) du lien. Quel que soit le type de liens créés, la seule chose qui va changer va tre ce que l’on va indiquer en valeur pour |’attribut href. Commengons donc avec les liens internes. Nous avons trois cas & distinguer : * 1° cas: La page a partir de laquelle on fait un lien et celle vers laquelle on fait un lien se trouvent dans le méme dossier. Dans ce premier cas, il suffit de préciser le nom de la page dans Vattribut href. + 2° cas: La page vers laquelle on souhaite faire un lien se trouve dans un sous-dossier. Dans ce cas, il faudra en tenir compte et inclure le nom du sous-dossier dans la valeur de Vattribut href. + 3° cas : La page vers laquelle on veut faire un lien se trouve dans un dossier parent. Dans ce cas, nous devrons rajouter « ../ » dans la valeur de l’attribut href. Voila donc en images comment cela fonctionne : 24b oocumerts © Downioses. EDoeves | rooms : 2 nny ties Aiden oe om Applications pagent pagezet Seus-Coser Gl dasteep eno GG Seve Danii (5 Dacoments Boron fesse B Aimy sites © Ndr, ae en Vai done créé quatre pages en HTML (j'ai simplement écrit la structure minimale pour chacune d’entre elles afin de les rendre valide). J'ai placé les pages [Link] et [Link] dans le méme dossier, la page [Link] dans un sous-dossier relativement & ma page [Link] et la page [Link] dans un dossier parent par rapport A ma page [Link]. Je vais donc maintenant créer des liens de ma page page!.html vers mes pages [Link], [Link] et [Link] grace a |’élément a et a l’attribut href : a5ecu eee icnte re Ma rieri weenie SRR ee Ree cea! Cec iC ato Et voila, c’est fini ! Si vous ouvrez votre page [Link], celle-ci doit maintenant ressembler a cela : @60 Liens internes 4) > SO) (2) L+ He file: 1 sets ers Desstin Bieee [Link]/| Ce lien vous transporte de la page 1 vers la page 2 Ce lien vous améne de la page | vers la page 3 Celien vous améne de la page | vers la page 4 Lorsque vous ou vos visiteurs cliquerez sur « page 2 », « page 3 » ou « page 4 », vous serez redirigés vers la page en question. Pour créer des liens externes, maintenant, vous allez voir que c'est beaucoup plus simple : il suffit d’indiquer ' URL complete de la page vers laquelle on veut faire un lien en valeur de |’attribut href. En pratique, pour faire un lien vers la page d'accueil de Wikipédia par exemple, on écrira : 26eee ae ere ee a ee ay air Spo Dee er ea emntet 6 DSN ocr erm corre perme i vnc ese Ora SSRI arg rs nO ‘Cee osname peg Sit Os a pa (Ce von 2 page tesa it er yousren Wied, elqper Et voila, c’est tout pour les liens externes. Simple, non ? A noter qu’il existe pour les liens internes et externes des attributs facultatifs qui peuvent modifier le comportement par défaut de ces liens. C’est par exemple le cas de |’attribut target qui est selon moi indispensable a connaitre. L’attribut target va vous permettre de choisir si vous voulez que la cible de votre lien s‘ouvre dans une nouvelle fenétre / nouvel onglet ou pas. Pour que la cible de votre lien s‘ouvre dans une nouvelle fenétre ou un nouvel onglet, on attribuera la valeur _blank & Vattribut target. Un exemple immédiatement en image : 27Attribut a retenir donc, car celui-ci peut s‘avérer trés utile dans de nombreux cas (lorsque vous ne voulez pas que vos visiteurs quittent votre site par exemple). Notez en revanche que vous ne pouvez pas choisir si le lien va s‘ouvrir dans un nouvel onglet ou dans une nouvelle fenétre. 1 Les autres types courants de liens Les liens internes et externes sont trés certainement les types de liens les plus courants, mais c’est loin d’étre les seuls ! En effet, on peut utiliser les liens pour faire bien d’autres choses. Dans ce nouveau chapitre, nous allons nous concentrer sur les liens de type « ancre », les liens pour envoyer un mail et les liens pour télécharger un fichier. Commencons avec les liens de type ancre. Les liens de type ancre sont des liens menant a un autre endroit d’une méme page web. Ils peuvent étre utile dans le cas d’une page web trés longue pour donner a vos visiteurs un accés rapide a une section en particulier par exemple. Vous comprendrez qu'il va donc tout d’abord nous falloir rajouter quelques lignes de textes dans notre page HTML pour pouvoir tester les ancres (sinon, on n’en verra pas l'effet). Attention, soyez attentif, ca se complique un peu a partir de [a | aRPour créer une ancre, on commence par rajouter un attribut id a une balise ouvrante HTML 4 l’endroit ot I’on veut envoyer le visiteur. On peut attribuer n’importe quelle valeur a cet attribut, le mieux étant de choisir une valeur qui fasse sens. Ensuite, on crée le lien cliquable en soi qui va amener a notre id. Pour cela, on utilise toujours notre élément a avec son attribut href (on ne réinvente pas la roue a chaque fois), mais cette fois ci on va devoir placer un diése avant d’écrire la valeur de I’attribut href. La valeur inscrite pour I’attribut href doit étre strictement la méme que celle donnée a notre id. Comme rien ne vaut un bon dessin, voici l’illustration en image : area "gpartiel">Partie I : nous allons parler du HTMLPortie II ; voyons ensenble le CSS< eee Beaucoup de Sete eer es Carer See eee rer et ae ee ee et een ee eee es Pret as beeen ar rer ts See ee ene ee ener ees Beaucoup de texte. Beaucoup de [Link] de texte: Se en ee ee ee eee Beaucoup de texte. Beaucoup de [Link] de texte: jeaucoup de [Link] de [Link] de text Faites attention a bien choisir des valeurs différentes pour chaque id sinon votre lien ne saura pas oll ramener ! 29