Cours n°2 - Structure HTML
##Correction du cours précédent Pour ce faire, il faudra passer votre code au validateur W3C (World Wide Web Consortium*).
###Passer son code au validateur Copiez le code de votre page et rendez vous sur la page du validateur. Une fois sur la page, cliquez sur “Validate by direct input” Ensuite, collez votre code et cliquez sur “Check”
Si votre code est correct, vous devriez voire quelque chose comme ceci :
Si ce n’est pas le cas, vous devriez avoir ce genre de message (en plus d’un tape spirituelle sur les doigts) :
Mais cela fait partie de la vie de l’intégrateur, il faudra alors débuguer votre page.
###Débug Comment je fais ça moi ? C’est facile, car le validateur ne se contente pas de vous dire que votre page est correcte ou non, il vous indique aussi l’endroit où vous avez fait une erreur :
Il suffit alors de vous rendre à la ligne indiquée, de constater votre erreur et de la corriger!
Par exemple à la ligne 49 de mon code, j’ai une fermeture de balise </span> en trop.
N’ayez pas peur si vous avez un nombre impressionnant d’erreur, parfois, une correction peut vous corriger une dizaine, voir toutes vos erreur d’un seul coup !
Une fois que vous avez corriger toutes vos erreurs, vous pouvez passer à la suite.
*W3C : Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non lucratif, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, SPARQL, CSS, XSL, PNG, SVG et SOAP. Fonctionnant comme un consortium international, il regroupe au 26 février 2013, 383 entreprises partenaires2.
Le leitmotiv du W3C est « Un seul web partout et pour tous » (source Wikipedia)
##Sémantique du code
La sémantique du code, c’est ce qui va donner un sens à celui ci, un sens pour vous, pour les moteurs de recherches mais aussi pour votre navigateur. En clair, il faudra utiliser les bonnes balises à bon escient.
C’est une pratique trop peu utilisée, bon nombre d’intégrateurs se contentent d’un affichage correct à l’écran sans se soucier du sémantisme de leur code. C’est un grave erreur !
Une bonne utilisation des balises vous permet d’avoir un code plus clair, de limiter l’utilisation abusive de classe CSS, de permettre aux moteurs de recherche à mieux comprendre votre code et donc à un meilleur référencement naturel de votre page.
Un exemple vaut mieux qu’un long discours :
<div class="entete">
<span class="titre">Voici mon titre</span>
</div>
Ce code est correct d’un point de vue purement technique. Le validateur n’y verra aucune erreur et vous pourriez très bien avoir le rendu espéré à l’écran. Ceci dit, ce code est sémantiquement NUL !!!
Il faut savoir que la balise <div> et <span> , très utiles pour une mise en forme ont une valeur sémantique nulle. Il faut entendre par là que ce n’est qu’une façon pour vous de séparer un bout de code d’un autre. Mais elles ne donnent absolument aucune information sur la nature du contenu à l’intérieur.
Voici ce qu’on aurait dû écrire ;
<header>
<h1>Voici un titre</h1>
</header>
Le rendu à l’écran peut être identique avec le CSS, mais notre code ici nous renseigne que nous somme dans une en-tête grâce à la balise <header>, et que nous avons un titre : la balise <h1>.
Il existe tout un tas de balises servant à renseigner la nature du contenu, alors pourquoi s’en priver ? Une bonne connaissance de ces balises est essentielle à tout bon intégrateur.
Je vous invite à consulter le très bon article d’OpenClassRooms sur la sémantique, il nous montre les principales balises ainsi que leur champs d’utilisation.
##Structure HTML de base
###Petit exercice
Nous allons créer une nouvelle page HTML avec une structure de base (voire précédent cours).
Pour avoir un contenu conséquent, nous allons prendre un article d’un site d’actualité. Choisissez donc votre article sur le web.
Petit travail laborieux, vous allez copier tout le contenu de l’article dans votre page HTML, en prenant bien soin d’utiliser des balises cohérente en fonction de la nature de votre contenu. Généralement dans un article, il y a peu de balises utilisées, on y retrouve le <p>, des titres <h1>, <h2> etc., des images <img>, des liens <a> et parfois des listes <ul> ou <ol> et des tableaux, que nous aborderons plus tard.
Voici un exemple du code attendu :
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Mon article</title>
<link rel="stylesheet" href="css/styles.css" media="all">
</head>
<body>
<header>
<h1>CHARTS US : LA XBOX ONE CONTRE-ATTAQUE</h1>
</header>
<article>
<p><img src="http://cdn-static.gamekult.com/gamekult-com/images/photos/30/50/37/89/charts-us-la-xbox-one-contre-attaque-ME3050378987_1.jpg" alt=""></p>
<p><strong>Après dix mois consécutifs de domination de la PS4 et une avance de plus d’un million au total des ventes, la Xbox One se retrouvait en très mauvaise posture aux États-Unis, qui est pourtant, avec le Royaume-Uni, le territoire où Microsoft est le mieux installé. La bataille de novembre, cruciale en raison du Black Friday, promettait d’être dure, et ça n’a pas loupé : à force de promotions agressives, la Xbox One est arrivé en tête des ventes en novembre.</strong></p>
<p>Il faut dire que Microsoft avait mis le paquet. L’abandon de Kinect et la baisse de prix de 100 $, le tout cumulé avec l’exclusivité TitanFall n’étaient pas suffisants, il fallait faire plus. La grosse arme de novembre fut le bundle Assassin’s Creed, qui réunit la console avec Unity et Black Flag, vendu à 350 $, soit 50 $ de moins que la PS4 nue. Une promotion temporaire mais qui est encore d’actualité, et qui était même parfois accentuée à 330 $ lors du Black Friday, tandis que les offres de Sony se sont révélées moins agressives, avec des bundles qui ne passaient pas en dessous des 400 $ et seulement pour quelques jours.</p>
<p>La victoire est d’autant plus totale que l’écart entre les deux consoles s’élève à environ 400.000 exemplaires le mois dernier, ce qui réduit considérablement l’avance accumulée par Sony. Et la tendance du mois de novembre se confirme généralement en décembre, le mois le plus vendeur de l’année. Si la situation en Europe continentale, où la Xbox One est totalement dépassée par la PS4, semble inchangée, l’affrontement américain (et dans une moindre mesure, britannique, où Microsoft annonce également être arrivé en tête des ventes en novembre) est totalement relancé.</p>
<p><img src="http://cdn-static.gamekult.com/gamekult-com/images/photos/30/50/37/89/charts-us-la-xbox-one-se-rebiffe-ME3050378975_1.jpg" alt=""></p>
<p>Dans tous les cas, les deux consoles continuent d’afficher une santé insolente. Un an après les démarrages record de ces machines, la "new gen" version Sony et Microsoft surpasse toujours les performances des précédentes consoles. Et même de la Wii, qui au même stade de sa carrière se contentait d’un mois de novembre inférieur à un million, tout en subissant certes des problèmes d’approvisionnement. La Xbox 360, qui accumule aujourd’hui un total de ventes identique à celui de la Wii aux États-Unis, a de son côté attendu 2010, cinq ans après son lancement, pour atteindre un si gros score en dehors de décembre, et la PS4 égale presque le record de la PS3 en novembre, qui date lui de 2011, également cinq ans après sa commercialisation.</p>
<p>Le vrai perdant de la période est donc finalement Nintendo, pour qui la Wii U réalise des chiffres nettement inférieurs à ceux de la Wii en son temps – ce n’est plus vraiment surprenant – mais aussi de la GameCube, laquelle dépassait les 700.000 ventes au même stade de sa carrière (mais à l’époque grâce à une baisse de prix particulièrement agressive qui amenait la console à 100 $). La 3DS fait quant à elle mieux, mais reste bien loin des performances des consoles de salon de Sony et Microsoft avec entre 500.000 et 600.000 ventes, ce qui est une fois de plus nettement en-dessous de ce que réalisait la DS ou même la GBA, capable de dépasser le million en novembre au même stade de sa carrière.</p>
<h2>LE DÉCLIN DE CALL OF DUTY SE CONFIRME</h2>
<p>Mais au-delà du feuilleton de la guerre des consoles, le mois de novembre est avant tout crucial pour les jeux, et l’armada des "AAA" qui débarquent à cette période hautement concurrentielle. On rappellera une fois de plus que NPD ne comptabilise que les ventes de jeux en magasin et non le dématérialisé qui prend une importance grandissante. Pour situer, on sait que les ventes sur l’eShop de Super Smash Bros. for Wii U représentent moins de 6 % du total des ventes du jeu sur la période. Mais l’exemple de Nintendo n’est probablement pas le plus représentatif et des éditeurs comme Ubisoft, Activision et Electronic Arts évoquent davantage une part qui s’approcherait des 20 % pour leurs gros jeux sur la nouvelle génération (et d’environ 10 % sur PS3 ou 360, et de toute évidence bien plus sur PC). Notez enfin que, comme d’habitude, l’ordre dans lequel les supports sont indiqués dans le classement ci-dessous représente les ventes (Call of Duty s’est donc mieux vendu sur Xbox 360, puis sur Xbox One, puis PS4, etc.). Ce classement ne tient néanmoins pas compte des ventes de jeux fournis en bundle, ce qui a son importance pour certains titres comme Assassin’s Creed Unity, dont sa version en bundle avec la Xbox One a réalisé davantage de ventes que le jeu seul sur l’ensemble des supports, mais il s'agit d'un cas particulier.</p>
<p><img src="http://cdn-static.gamekult.com/gamekult-com/images/photos/30/50/37/89/charts-us-la-xbox-one-se-rebiffe-ME3050378977_2.jpg" alt=""></p>
<p>Le premier du classement est un habitué qui domine sans surprise les ventes de novembre. Mais ses chiffres démontrent un flagrant déclin : moins de 4,5 millions de ventes, alors que le pic de popularité, Modern Warfare 3, dépassait les 9 millions. La bonne revue de presse de cet Advanced Warfare n’a pas su enrayer la dégringolade et si Call of Duty continue de réaliser des scores incroyables (il s’agit du meilleur démarrage de l’année), la série se dirige bien vers la fin de son phénomène.</p>
<p>Juste derrière, c’est Grand Theft Auto V qui s’impose grâce aux versions PS4 et Xbox One, nouvelle démonstration du fait que les "Remasters" constituent un filon particulièrement lucratif pour les éditeurs : pourtant vieux de plus d’un an, GTAV version "new gen" réalise ainsi un meilleur démarrage que la plupart des blockbusters inédits de cette fin d’année. Ainsi, les seules versions PS4 et XBO représentent plus de 1,1 million de ventes en novembre, là aussi l’un des meilleurs démarrages de l’année.</p>
<p>En ce qui concerne la deuxième moitié du Top 10, les résultats se situent dans l’ensemble entre 600.000 et 700.000 ventes. Ce qui représente une très bonne performance pour Far Cry 4, pas si loin du démarrage de son prédécesseur, qui avait fait plus d’un million mais pour une sortie en décembre, période bien plus vendeuse. Assassin's Creed Unity réalise en revanche une grosse contre-performance. Certes plus adapté au marché américain, Assassin's Creed III s’imposait à l’époque sur le podium, uniquement dépassé par Call of Duty et Halo 4, avec presque 3 millions de ventes à son compteur. Ce dernier opus est néanmoins sauvé par sa présence dans le bundle phare de Microsoft, lequel représente environ 800.000 ventes en novembre, ce qui amène le total d’Assassin’s Creed Unity non loin de 1,5 million.</p>
<p>Soulignons enfin l’absence de certains gros titres dans ce top 10. Dragon Age Inquisition ne s’en tire pas si mal, avec un peu moins de 600.000 ventes, tandis qu’aucun chiffre n’a fuité sur certains habitués du classement de novembre, ici absents : Skylanders (septième l’an dernier, sixième en 2012) et Just Dance (huitième l’an dernier, quatrième en 2012). Les jeux de sport font en revanche toujours recette.</p>
<p>Du côté des jeux de niche, on souligne un score de presque 50.000 ventes pour Persona Q, ce qui n’est pas si mal pour un jeu de cette envergure. Bayonetta 2 réalise un peu moins de 70.000 ventes soit un total d’environ 130.000 depuis sa sortie. Toujours sur Wii U, Sonic Boom se vend quant à lui à environ 25.000 exemplaires, témoignage d’une déchéance pitoyable pour une série qui était capable de dépasser le million sur GameCube uniquement avec des portages de jeux Dreamcast.</p>
<h2>PENDANT CE TEMPS, NINTENDO</h2>
<p>Grand perdant du mois en tant que constructeur, Nintendo pourrait bien être considéré comme le grand vainqueur en tant qu’éditeur. Son nouveau Super Smash Bros. se place dans le podium mensuel, et la société japonaise s’en félicite en étant une fois de plus le seul acteur de l’industrie à communiquer publiquement des chiffres, en cumulant à chaque fois les données de NPD (ventes en magasin) avec ses chiffres internes pour le dématérialisé (ventes sur l’eShop). Ainsi, la version 3DS de Super Smash Bros. compte désormais plus de 1,5 million de ventes aux USA, ce qui en fait, d’après Nintendo, le jeu le plus vendu de l’année sur console portable. La version Wii U, elle, réalise pas loin de 710.000 ventes, bien au-dessus du démarrage de Mario Kart 8 à 375.000 exemplaires, même s’il est vrai que ce dernier ne profitait alors que de deux jours de commercialisation comptabilisés (il atteignait 885.000 ventes avec un mois supplémentaire) contre neuf pour Smash Bros., et à une période bien moins vendeuse.</p>
<p><img src="http://cdn-static.gamekult.com/gamekult-com/images/photos/30/50/37/89/charts-us-la-xbox-one-se-rebiffe-ME3050378979_1.jpg" alt=""></p>
<p>L’autre atout massif de la société, c’est le dernier Pokémon, qui atteint presque 1,5 million pour ce premier mois de commercialisation, un score d’autant plus impressionnant qu’il ne s’agit là que d’un remake et sur moins de dix jours comptabilisés. Enfin, la société semble avoir trouvé sa nouvelle poule aux œufs d’or avec les amiibo. Ces figurines lancées en même temps que Super Smash Bros. for Wii U auraient déjà accumulé environ 700.000 ventes sur la période selon Nintendo, qui a clairement réussi son coup avec cette nouvelle source de revenus. Pour l’anecdote, la figurine de Link est la plus populaire, suivie par Mario et enfin Pikachu.</p>
</article>
<footer>
</footer>
</body>
</html>
*Contenu Gamekult : La Xbox One contre-attaque
N’oubliez pas de passer votre code au validateur pour vous assurer qu’il soit correct.
Sauvegardez votre page dès que vous en êtes satisfait, elle nous servira de base de travail pour le prochain cours.
##Les caractères spéciaux
Petite parenthèse sur les caractères spéciaux. Comme nous l’avons vu, nous utilisons beaucoup plus de caractères que nos amis anglo-saxons. Qui n’avaient pas prévu qu’un beau jour, nous aussi pourrions utiliser, et programmer l’internet :)
Nous allons donc provoquer une erreur : dans votre code, retirer (ou commentez*) la balise <meta> qui se situe dans le <head> de votre fichier.
Regardez un peu le rendu à l’écran, c’est immonde non ? Il y a plein de chose affichées étrangement
Aujourd’hui, il est simple de corriger ceci grâce à notre balise <meta>, mais autrefois, nous étions obligés d’écrire nos accent et autres caractères spéciaux de manière à ce que le navigateur le comprenne !
Ainsi, un simple “é” devait être écrit de cette façon : “é”, un € “€” et un “<” de cette façon “<”.
Ça a l’air compliqué comme ça mais c’est en fait de l’anglais… pour le é, il faut comprendre “la lettre e, avec un accent aigu, donc e acute. Le “&” et le “;” servant de délimiteur de caractère spéciaux.
Voici une liste de caractères spéciaux, vous ne devriez normalement pas les utiliser pour créer une nouvelle page car le web à évoluer dans le bon sens, mais vous serez peut-être amenés à les rencontrer si vous modidier d’anciennes pages, ou dans certains cas précis. Il vaut donc mieux les connaitre, ou en tout cas les reconnaître pour le pas être surpris.
*Commentaire HTML: Les commentaires servent de repères dans notre code, mais également à masquer un bout de code que l’on ne souhaite pas afficher, mais que l’on garde quand même. On commente le HTML de cette façon :
<!-- tout ce qui est ici ne sera pas affiché sur la page -->
ou sur plusieurs lignes :
<!--
<p>Ce code ne sera pas affiché</p>
-->
Tout ce qui se trouve entre nos délimiteurs de commentaires ne sera pas visible à l’écran.
##Bonus : les snippets dans SublimeText
Taper du code peut vite devenir répétitif et laborieux. Pour éviter de répéter certains bout de code, SublimeText nous facilite déjà bien le travail au travers d’extensions comme Emmet qui nous fournit pas mal de raccourci (voir la vidéo du site).
Mais saviez vous que vous pouvez créer vos propres raccourci dans SublimeText ? Voici comment faire :
Dans SublimeText, cliquez sur “Tools”, puis “New snippet”, cela va vous ouvrir un nouveau fichier qui ressemblera à ça :
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
###Comment ça marche ?
Malgré un fichier au premiers abords complexe, c’est en fait très simple.
Il suffit de mettre le code que l’on veut à la place de “Hello, ${1:this} is a ${2:snippet}.”, donc à l’intérieur du <![CDATA[ votre code ]]>.
Ensuite, décommenter la ligne contenant le “tabTrigger”, et remplacer “hello” par un mot de votre choix, par exemple “toto”. Sauvegardez bien votre ficher (dans le dossier que SublimeText vous propose), mettez lui un nom mais pas d’extension, SublimeText s’en charge pour vous.
Maintenant, chaque fois que vous taperez “toto”, puis tab, SublimeText taperas automatiquement tout le code que vous aviez mis à l’intérieur du CDATA. Pratique non ?
##Pour la semaine prochaine Reprendre l’article de Gamekult, et insérer tous les liens que vous trouvez sur l’article dans votre code, veillez à ce que votre code soit valide.