Accueil » Articles » Apprenez à coder en HTML et en CSS !

Apprenez à coder en HTML et en CSS !

CHAPITRE 2 : LES FONDATIONS DU HTML

Eléments, balises et attributs

Il y 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 à définir des objets dans notre page. Grâce 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.

Les éléments et balises en HTML

Les balises reprennent le nom de l’é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’é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 l’élément br qui va nous servir à créer un retour à la ligne.

L’é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’élément. Notez également que ce slash n’est pas obligatoire et que certains développeurs l’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 à dire vers quel site le lien doit mener.

Notez que les attributs se placent toujours à l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline le cas échéant).

Illustration des attributs en HTML

Dans l’exemple ci-dessus, on discerne l’élément a composé :

  • d’une balise ouvrante elle-même composée d’un attribut href ;
  • d’une ancre textuelle ;
  • d’une balise fermante.

L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre lien, en l’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 l’unique partie visible pour eux.

Voici ce que les visiteurs de votre site verront :

L'attribut href : illustration

Si vous vous sentez un peu perdu pour le moment, ne vous inquiétez pas, c’est tout-à-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 !

Structure de base d’une page en HTML5

En programmation comme dans beaucoup d’autres disciplines, vous l’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 l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc :

Doctype HTML

Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu particulier.

Ensuite, pour que notre page HTML5 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.).

Voilà où nous en sommes rendus pour le moment :

Premiere page en HTML

Mais ce n’est pas fini ! Pour que la page soit valide, l’é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-8 ».

Voici à quoi vous devriez arriver en pratique :

La structure minimale d'une page valide en HTML

Et voilà, vous venez, sans vous en rendre compte, de créer votre première page valide en HTML5 ! Retenez bien ce schéma, il sera toujours le même quelque soit la page HTML5 que vous créerez.

Afficher un document en HTML5 dans mon navigateur

Si vous avez utilisé JsBin.com dans l’exercice précédent, vous devriez avoir vu le résultat (la page telle qu’elle serait apparue dans n’importe quel navigateur) instantanément sur la droite de votre écran.

Cependant, si vous avez utilisé votre éditeur de texte, il se peut que vous soyez un peu perdu. Pas d’inquiétude, j’arrive !

La première chose à faire, une fois un nouveau fichier ouvert dans votre éditeur de texte, est d’en changer le type pour mettre votre document en « html ». Pour cela, deux solutions : soit vous trouvez l’onglet où vous pourrez définir le type de votre document, soit vous enregistrez-sous votre document en lui donnant un nom du type : document.html. Cela aura pour effet de changer le type de document en un document HTML.

Ensuite, pour visualiser votre fichier dans un navigateur, vous avez à nouveau deux choix. Soit votre éditeur possède une option vous proposant de pré-visualiser votre document dans le navigateur de votre choix (c’est le cas de Komodo), soit vous devrez enregistrer votre document (sur votre bureau, par exemple), puis double cliquer dessus, tout simplement, afin que la page s’ouvre dans votre navigateur par défaut.

Simple, non ? Allez-y, essayez !

Ah et, un conseil : pensez bien à enregistrer dans votre éditeur votre document à chaque fois que vous souhaitez l’ouvrir dans votre navigateur et à rafraîchir la page dans votre navigateur si votre document était déjà ouvert (ctrl+r ou cmd+r) sans quoi vous ne verrez aucun changement.

Cela semble évident mais si vous saviez le nombre d’heures que nous avons tous perdu en cherchant pourquoi telle ou telle chose ne fonctionnait pas… Alors que nous avions simplement oublié d’enregistrer les changements effectués au préalable ou de rafraichir notre document !

Bonnes pratiques, règles et commentaires

Je suis de ceux qui pensent qu’il n’est jamais trop tôt pour apprendre les bonnes manières, donc commençons immédiatement, cela évitera de mauvaises habitudes par la suite !

Tout d’abord, vous l’avez remarqué, le HTML permet d’imbriquer des éléments les uns à l’intérieur des autres. C’est même l’une des possibilités qui font toute sa force.

Dans l’exemple précédent, par exemple, notre élément title était à l’intérieur de notre élément head, lui même contenu dans un élément html.

Imbriquer des balises en HTML

Toutefois, si le HTML permet d’imbriquer des éléments les uns dans les autres, vous devrez toujours faire bien attention de refermer les balises dans le bon ordre.

Le bon ordre est : , c’est à dire que le dernier élément ouvert est toujours le premier refermé. Vous ne devrez jamais écrire .

Normalement, si vous refermez bien chaque balise juste après l’avoir ouverte, plutôt que de dire « c’est bon, j’y penserai plus tard », vous ne devriez jamais faire l’erreur.

Autre bonne pratique maintenant : l’indentation. Indenter son code, c’est tout simplement l’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 à gauche du a) à chaque fois que j’ouvre une nouvelle balise à 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 l’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 simplement car la balise meta n’est pas contenue dans l’élément title mais seulement dans l’élément head. Elle est donc au même niveau de hiérarchie que le title.

L’indentation peut peut-être vous paraître 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 dernière 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 (à moins que ceux-ci n’affichent le code source de la page).

Voici comment on écrit un commentaire en HTML :

Comment commenter en HTML

Pourquoi commenter son code ? Pour plusieurs raisons.

Tout d’abord, pour vous. En effet, lorsque vous commencerez à 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 façon.

Ensuite, pour les personnes à 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.

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 à votre code HTML.

Pour vous en convaincre, n’hésitez pas à aller sur n’importe quel site (Wikipédia par exemple), puis à faire un clic droit sur la page et choisir l’option « inspecter l’élément » ou « afficher le code source » selon votre navigateur.

Tout le monde peut voir votre code HTML

Vous aurez alors accès au code HTML de la page, quelque soit le site.

Code HTML visible par tous

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 !

Comment afficher l'option développer avec Safari

Les éléments Heading, Paragraph et Break

Le HTML, je vous l’ai dit, sert à différencier d’un point de vue sémantique les différents objets que l’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 à créer des paragraphes, des titres, et à faire des retours à la lignes en HTML.

Pour créer des paragraphes, tout d’abord, on va utiliser l’é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 à la ligne est automatiquement effectué.

Si maintenant vous désirez créer un retour à la ligne à l’intérieur même d’un paragraphe, il faudra utiliser l’é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 l’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é.

Voilà ce que ça donne en image :
Nos premiers éléments en HTML : p, br et h

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 là où j’en reviens à 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 faîte par votre navigateur, une interprétation visuelle de ce que vous avez donné à 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 faîtes votre cours, et d’un coup vous dîtes à vos élèves « attention, ce point là est très important » (à l’aide d’une balise h1). Vos élèves vont avoir tendance à surligner cette partie du cours.

C’est exactement ce que fait votre navigateur. Cependant, en tant que professeur, vous n’allez pas dire à vos élèves « ce point là 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 l’aspect visuel plus tard avec le CSS. Le CSS peut nous permettre de faire réellement tout ce que l’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 à apprendre à « 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 l’élément strong pour mettre un texte en gras !

L’élément em, pour emphasis (« emphase » en français) est proche de l’élément strong. Il sert lui aussi à 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 l’intérêt de ces éléments, il est avant tout dans l’optimisation du référencement de votre site. En effet, normalement, vous devriez avoir ciblé des mots clefs et essayer d’être bien référencé sur ces mots là. Les balises strong et em vous aident à atteindre ce but, entre autres.

Enfin, l’é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 l’affichage de résultats suite à une recherche d’un de vos visiteurs par exemple.

Utilisation des elements strong, em et mark

Voilà donc pour les éléments dits de base, il est maintenant tant de s’attaquer à des éléments relativement plus complexes, et nous allons commencer avec les listes.

Listes ordonnées et non-ordonnées

Les listes servent à ordonner du contenu, à lui donner un ordre cohérent.

Visuellement, les listes en HTML correspondent à ce que vous créez lorsque vous utilisez des puces dans un document Word ou PowerPoint par exemple, comme ceci :

  • 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 : l’élément ul (abréviation de unordered list), qui va contenir toute la liste et l’é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 :

Creerr une liste non ordonne en HTML

Dans l’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 l’élément ul par l’élément ol (pour ordered list).

Creer une liste ordonnee en HTML

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 l’introduction avant la conclusion) ; on utilise donc une liste ordonnée.

Listes de définitions

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’élément dl (pour definition list), l’élément dt (pour definition term) et l’élément dd pour la définition en soi.

Il n’y a qu’une règle à respecter lorsque l’on crée une liste de définitions : vous devez toujours placer l’élément dt avant l’élément dd, c’est-à-dire le terme à 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 à fait possible d’associer plusieurs termes à une définition ou même plusieurs définitions à un même terme.

Voici un exemple de liste de définitions :

Créer une liste de definition en HTML

Listes imbriquées

Ca commence à devenir vraiment intéressant ! En effet, le HTML nous offre la possibilité d’imbriquer les listes les unes dans les autres très simplement.

Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde à l’intérieur d’un élément de la première (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 à l’intérieur d’une liste ordonnée :

On peut imbriquer des listes en HTML

Comme vous le voyez, si on n’oublie pas d’élément, les listes restent très simples à utiliser et à manipuler. J’espère que vous comprenez mieux désormais l’importance de bien indenter son code !

C’est tout pour les listes, n’hésitez pas à vous entraîner 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.

Liens internes et liens externes

Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour l’instant, 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’élément « a » accompagné de son attribut href (pour Hypertext Reference) qui sert à indiquer la cible (c’est à 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 l’attribut href.

Commençons donc avec les liens internes. Nous avons trois cas à distinguer :

  • 1er cas : La page à 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 l’attribut href.
  • 2ème 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 l’attribut href.
  • 3ème 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.

Voilà donc en images comment cela fonctionne :

Créer des pages différentes pour les liens internes

J’ai donc 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 page1.html et page2.html dans le même dossier, la page page3.html dans un sous-dossier relativement à ma page page1.html et la page page4.html dans un dossier parent par rapport à ma page page1.html.

Je vais donc maintenant créer des liens de ma page page1.html vers mes pages page2.html, page3.html et page4.html grâce à l’élément a et à l’attribut href :

Element a utilise pour créer des liens internes

Et voilà, c’est fini ! Si vous ouvrez votre page page1.html, celle-ci doit maintenant ressembler à cela :

Nous avons cree nos liens internes

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 l’URL complète de la page vers laquelle on veut faire un lien en valeur de l’attribut href.

En pratique, pour faire un lien vers la page d’accueil de Wikipédia par exemple, on écrira :

Les liens externes

Et voilà, 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 l’attribut target qui est selon moi indispensable à connaître.

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 à l’attribut target. Un exemple immédiatement en image :

Utilisation attribut target en HTML

Attribut à 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.

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.

Commençons avec les liens de type ancre. Les liens de type ancre sont des liens menant à 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 à vos visiteurs un accès rapide à 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, ça se complique un peu à partir de là !

Pour créer une ancre, on commence par rajouter un attribut id à une balise ouvrante HTML à l’endroit où l’on veut envoyer le visiteur. On peut attribuer n’importe quelle valeur à cet attribut, le mieux étant de choisir une valeur qui fasse sens.

Ensuite, on crée le lien cliquable en soi qui va amener à notre id. Pour cela, on utilise toujours notre élément a avec son attribut href (on ne réinvente pas la roue à chaque fois), mais cette fois ci on va devoir placer un dièse avant d’écrire la valeur de l’attribut href.

La valeur inscrite pour l’attribut href doit être strictement la même que celle donnée à notre id.

Comme rien ne vaut un bon dessin, voici l’illustration en image :

Ancres HTML

Faites attention à bien choisir des valeurs différentes pour chaque id sinon votre lien ne saura pas où ramener !

Pour envoyez un mail, maintenant, on donne tout simplement une valeur de type « mailto : » à notre attribut href comme ceci :

Comment créer des liens de type mail

Enfin, voyons les liens permettant à vos visiteurs de télécharger un fichier. Pour cela, il va tout d’abord falloir nous armer d’un fichier (au format zip, pdf, xls ou autre) que l’on va placer dans le même dossier que la page web à partir de laquelle on crée le lien.

Ensuite, il ne reste plus qu’à créer un lien comme on en a l’habitude en utilisant un chemin relatif. Comme notre fichier et notre page web sont dans le même dossier, nous n’avons donc que le nom du fichier à renseigner en valeur de l’attribut href.

Par exemple, si mon fichier est un pdf qui s’appelle « fichier », on aura :

Créer des liens pour telecharger un fichier

Notez que si vous cliquez sur le lien, rien ne devrait se passer (tout au moins, sur Mac, rien ne se passe) tout simplement car vous possédez déjà le fichier. Cependant, vos visiteurs pourront tout à fait télécharger votre fichier une fois votre page hébergée sur serveur.

Ca y est, on en a enfin fini (pour le moment tout au moins) avec les liens ! N’hésitez pas à prendre une petite pause et à revoir cette partie à tête reposée car c’est vraiment très important et, si vous comprenez la mécanique des liens, vous n’aurez aucun mal à comprendre le reste.

Pour les plus vaillants d’entre vous, poursuivons !

Validation et compatibilité entre navigateurs

Je voulais terminer cette première partie d’introduction au langage HTML sur une note de théorie et avec quelques mises en garde : il n’est jamais trop tôt pour apprendre les bonnes manières.

Tout d’abord, vous devez savoir qu’un même code interprété par différents navigateurs peut produire différents résultats. Autrement dit, il est possible que votre code s’affiche différemment selon le navigateur utilisé par vos visiteurs.

Pas de panique toutefois : cela est de moins en moins vrai aujourd’hui avec les dernières versions des grands navigateurs qui sont toutes standardisées. De plus, nous verrons comment contourner ce problème par la suite avec les reset CSS entre autres.

Sachez cependant pour votre culture personnelle que ce qui est vrai aujourd’hui était loin de l’être il y a quelques années tout juste et que ces problèmes de compatibilité ont fait s’arracher les cheveux à plus d’un codeur.

Le problème viendra très souvent des anciennes versions d’Internet Explorer qui ne reconnaît pas ou interprète différemment certains éléments en HTML ou propriétés en CSS. Ceci est un vestige du temps où Microsoft était tout puissant et tenter d’imposer sa loi et ses propres propriétés non standardisées.

Prudence donc, même aujourd’hui ! Pensez à tester votre code avec différents navigateurs et différentes versions de chaque navigateur lorsque vous avez un doute : cela ne coûte pas grand chose et ne pas le faire peut s’avérer catastrophique !

Deuxième mise en garde ou plutôt bonne pratique, toujours dans cette idée d’avoir un code propre et qui fonctionne bien : pensez systématiquement à vérifier sa validité.

Pour cela, le W3C (World Wide Web Consortium – l’autorité en matière de codification des langages informatiques) met à notre disposition différents outils, et notamment des validateurs HTML et CSS.

Pour pouvez trouver ces validateurs ici :

Tout est gratuit, n’hésitez pas à vous en servir !

Il est temps sur ces mots de clore notre introduction au HTML et de passer à la suite : la découverte du CSS.

58 commentaires

  1. Salut pierre j’ai déjà lu certaines de vos vidéos sur youtube et c’est là que je ai connu… honnêtement avec vous j’ai vite appris les bases et c’est pourquoi j’ai cherché votre site… Et je suis sûr qu’en suivant tous vos cours je pourrais me débrouiller, j’apprécie votre travail c’est vraiment une bonne pédagogie que vous suivez et cela aide les débutants comme nous surtout que les cours avec ce genre de méthode est difficile à trouver en français… Bon courage et je vous remercie pour le temps que vous avez pris pour faire ces cours, on sent que vous avez vraiment mis du sérieux

  2. Je tiens à vous remercier et à vous féliciter pour la simplicité et la clarté des tuto. Les videos sont une méthode très utiles et efficace pour apprendre la programmation. Vous êtes méthodique ce qui facilite la compréhension, mais ce que j’ai pas aimé c’est la pagination en fin d’articles. Je crois qu’un menu pour pouvoir accéder à un cour précis serai plus utile si on veut faire une petite révision.
    J’ai parcouru les tuto PHP, c’est génial, vous allez surement avoir du succès donc continuez comme ça, enrichissez la bibliothèque francophone, je sais que gérer un site à long terme et maintenir la même cadence n’est pas si facile que ça.
    J’adore la programmation web et je passe mon temps entre les sites, je suis heureux de tomber sur le votre par hasard en faisant une recherche google sur les fonctions PHP.
    J’utilise wordpress, je serai heureux si vous écriviez des tuto sur ce CMS, notamment la création d’un thème en utilisant des videos.
    Merci encore Pierre Giraud, bonne continuation.

    • Bonjour,

      Merci beaucoup pour votre commentaire et vos encouragements ! Je prends également note de vos remarques. Merci encore !
      Je vais essayer de faire quelques cours sur WordPress prochainement.

      Amicalement,
      Pierre

    • Bravo Pierre,
      Vos cours sont géniaux. De plus les mots employés par vous sont précis et explicites.
      Merçi et bonne continuation.

  3. Heu… désolé il y a bien un sommaire sur votre site… mille excuses !

  4. Bonjour,
    Votre site est très pédagogique et très bien conçu. Je l’utilise depuis une dizaine de jours. Comme la chronologie des thèmes abordés me convient très bien, j’y reviens chaque jour. Il manque un sommaire pour reprendre la lecture là où je l’avais laissée. Cela éviterait une recherche fastidieuse à la « molette » et améliorerait grandement le confort de l’utilisateur.
    J’ai hâte de découvrir vos œuvres sur PhP et JavaScript… pour le moment je n’est trouvé que des cours « lourding » et indigeste.
    Encore merci !

    • Bonjour,

      Merci pour votre commentaire ! Je réfléchis depuis quelques temps déjà à comment proposer une ergonomie optimale pour les lecteurs tout en gardant un format « blog »… Ce n’est pas si simple que cela, mais j’y travaille !

      Amicalement,
      Pierre

  5. Merci pour ces cours que vous mettez a la porte de tout le monde. Je suis passionne du web comme vous et le tuto me permet de me forme en autodidacte.
    Merci encor

  6. Bonjour,
    votre cour est très impressionnant. Moi je l’adore beaucoup.
    Et j’ai une question, au fait au niveau du css on ne pas créer d’autre papier(fichier)? ou c’est dans le seul papier css (style.css) qu’on a crée qu’ on va mettre tous nos codes css liés à différents pages.

    • Bonjour,

      Merci pour votre commentaire. Vous pouvez créer autant de fichier CSS que vous le souhaitez, le tout étant de ne pas oublier de lier les fichiers CSS voulus aux fichiers HTML.

      Amicalement,
      Pierre

  7. Bonjour Pierre Giraud! C’est cherchant des vidéos sur youtube concernant le HTML / CSS que je suis tombé sur par hasard une de tes vidéos:HTML/CSS. J’avoue que le cours sur HTML/CSS est très pédagogique simple . Je suis sûr qu’avec tes cours je vais savoir coder tout comme toi.

    Merci!

  8. bonjour Pierre,
    je saisi cela peut paraître c..
    mais je ne parviens pas à trouver une adresse mail pour télécharger js bin, lol
    on me renvois systématiquement à node que j’ai téléchargé, et puis … ?

    je suis sur mac maverick,;textWrangler

    merci; A+

  9. Bonjour Pierre,

    Merci infiniment pour vos cours (je suis celui sur le html/css actuellement.
    C’est clair et bien enseigné.

  10. Boivin Christophe

    Bonjour Pierre,

    C’est simple, l’un des meilleur tutoriel (voir le meilleur) pour apprendre HTML et CSS.
    Je commence à peine la construction de mon futur site dédié au Moyen Age.
    J’ai plus appris avec ce tutoriel en quelques heures que d’autres en plusieurs jours.

    Merci

  11. Bonjour Pierre,

    Il se fait tard, mais après avoir regarder tes quelques 4h30 de cours html/css, je ne pouvais pas m’endormir sans te laisser un commentaire. Ton approche pédagogique est tout bonnement incroyable (moi qui passe le concours de prof dans l’année, ça met la pression 🙂 ). Et j’en ai vu des tutos de tout genre, mais je dois dire que rares sont ceux avec une voix aussi agréable à écouter pendant plusieurs heures derrière un écran. Je ne peux que te féliciter pour ton travail en espérant pouvoir suivre tes prochaines vidéos (notamment sur le responsive design). Bon trêves de compliments, tu y prendrais gout…soit certain que je passerai par toi une fois mon site terminé pour prendre un herbergeur qui te rapporte quelques piecettes. Encore bravo et à bientôt.
    Boris

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait très plaisir à lire, d’autant plus de la part d’un futur professeur (je l’espère !) ! Et merci d’avance pour l’attention quant à l’hébergeur. Bon courage pour la suite !

      Amicalement,
      Pierre

  12. super votre approche – pouvez vous m’envoyer le fichier PDF
    merci
    cordialement
    alain

  13. Bjr mr Pierre avant tout merci pour ce tuto sur comment crée un site avec HTML et CSS encore merci mes j’aimerai avoir aussi la suite de vos vidéo pour ce cour. Je vais m’abonner maintenant sur votre compte youtube et j’espère avoir un liens pour avoir la suite des cours

    Merci

    • Bonjour,

      Vous pouvez trouver toutes les vidéos de mon cours HTML / CSS sur mon site dans l’article relatif, ou sur YouTube. Le cours est complet et toutes les vidéos sont là.

      Amicalement,
      Pierre

  14. Bonjour, et bonne et heureuse année 2015.
    Merci de votre aide pour un grand débutant comme moi. En formation Community Manager depuis 1 mois, j’ai effectivement compris qu’il va m’être utile d’avoir des bases pour gagner du temps avec les développeurs par exemple.
    Vos vidéos sont pédagogiques. Cela fait plaisir quand on trouve quelqu’un qui se met à la portée des autres.
    Pourriez vous en retour m’envoyer le support sur ma boite mail. Je vous écris en parallèle sur pierre.giraud@edhec.com.
    Bien à vous
    OA

  15. Bonjour,

    Tout d’abord une très bonne année à toi. Ensuite un grand merci pour tes tutos qui sont très explicites et très complets. Je me suis abonné à ta chaine Youtube et je vais suivre l’évolution de ton site. si j’ai besoin de ton aide je n’hésiterai pas à faire appel à toi. Encore merci pour tes tutos 😉

  16. Salut Pierre,

    tout d’abord, merci beaucoup pour tes cours et je te souhaite une très bonne et heureuse année. J’espère apprendre le HTML, le CSS et tout savoir sur le PHP via tes cours :). Autrement dit, j’espère que tu nous réserve encore de nombreuses vidéos. 🙂 Je n’ai malheureusement pas eu le doc PDF. Peux-tu me l’envoyer par mail stp ? 🙂

  17. Salut,
    Merci bcp pour tes efforts, je suis débutant et j’ai une petite question concernant le problème d’affichage des accents sachant que j’ai utilisé le metacharset « utf-8 » comme indiqué, et j’ai toujours des points d’interrogations à la place. Peux-tu m’aider sur ce point s’il te plait ?
    N.B. j’utilise un mac ; j’ai testé sur Firefox et Safari (même problème d’accents).
    Merci encore une fois.

    • Bonjour,

      Le meta charset va aider Google (ou Yahoo, etc.) à savoir comment lire ta page. Il n’y aura donc pas de problème d’accent une fois sur le web. Cependant, si tu travailles en local, il faut bien faire attention à ce que ton éditeur soit lui aussi en tuf-8. Par défaut, je sais qu’avec Mac on a droit au format étrange « Mac-Rom »… Il faut donc chercher l’onglet « encodage » dans ton éditeur de texte et fixer ça.

      Amicalement,
      Pierre

      • Mohamed FERSSIWI

        Je te souhaite d’abord une année 2015 pleine de succès dans tes projets.

        Effectivement, j’ai changé dans les préférences de Komodo « Custom encoding » et « Default encoding » à « Utf-8 » j’ai écrasé mes anciens fichiers html mais les « ? » persistent sur firefox et safari même avec un test en ligne !

        Merci bcp !

        • Bonjour,

          Merci, bonne année à toi aussi !

          Si tu utilises Komodo, regarde en bas de ta fenêtre lorsque tu as un fichier ouvert. Tu peux changer l’encodage à partir de là également. Ensuite, normalement, il n’y a plus qu’à enregistrer le fichier et à rafraichir la page si elle était déjà ouverte. Les points d’interrogations devraient disparaitre… en théorie.

          Bon courage !

  18. bonjour et MERCI.

    Super travail, tutos clairs, nets et précis (sans parler de la qualité pédagogique des vidéos).
    Vidéos découvertes par hasard au gré de mes navigations sur le web… maintenant votre site est épinglé dans mes favoris, et je viens le voir régulièrement.
    SUPER
    Philippe

  19. bonjour pierre
    j’essaye de partager sur fbook pour telecharger le pdf mais ca ne marche pas.
    je vous envoies alors un email à pierre.giraud@edhec.com

  20. Salut,
    J ai un soucis je tweet je share mais rien ne passe.j aimerai bien avoir le tuto en pdf ce serait plus utile pr moi.Merci d avance.

  21. Je viens de parcourir rapidement vos tutos,ils sont impecable.Merci de continuer avec cette allure.J;ai aussi le même problème avec un des internautes concernant le téléchargement.Voici mon adresse mail

  22. Salut Pierre,

    Merci beaucoup pour ces tutos très bien conçus !
    Je voulais télécharger le pdf mais malgré un partage sur twitter, et le partage facebook qui ne fonctionne pas, je n’ai pas pu me le procurer.
    Si tu peux faire qqch 🙂

    Merci à toi !

    Deborah

  23. J »ai prix gout aux html et css grace à tes tutos.ces derniers moments, je me suis vraiment accroché à mon ordi pour revoirr agréablement et sans cesse tes tutos.Bon courage et merci.

  24. Juste un grand merci pour toutes ces formations, ce temps passé à nous expliquer (ce que tu fais très bien).
    Un grand MERCI encore et continue c super !!!!!!

  25. Bonjour Mr.Pierre:
    Je voudrais vous remercier pour votre formation si instructive,mais,est-ce à tout ce qu’il y a à savoir dans ces deux langages ? Je veux apprendre plus
    Par exemple,votre formation PhP e SQL sur youtube ,est elle complète ou y a t-il d’autres vidéos à venir ?
    Et pour finr,où pourais-je apprendre plus ?

    • Bonjour,

      Il y a toujours à apprendre ! Mais concernant HTML et CSS, je fais quand même un joli tour d’horizon avec ce cours, donc on peut dire que la formation est « complète ». Concernant mon cours sur PhP et MySQL, celui ci est en cours; et est assez loin d’être terminé !

      Il existe de nombreuses autres ressources pour apprendre à coder, comme le site du w3c par exemple. Je vous laisse chercher sur ce point.

      Amicalement,
      Pierre

  26. Salut Pierre,

    Je viens de terminer cette excellente formation sur le html et le css. Merci de donner de ton temps et de partager tes connaissances! C’est un vrai plaisir de te suivre.
    Je commence de suite ta formation sur le php!

    A bientôt
    Grégory

  27. Bjr Pierre , j’ai suivi le cours sur html et css, c’est vraiment très claire et compréhensible, j’ai créer un compte sur youtube mais je ne sais pas comment acédé à vos vidéo étand dans mon compte youtube je vx uniquement suivre vos cours car tu explique clairement et ça m’aide à avancé sur le codage htmal & css.

    Que Dieu vous prolonge la vie bcp des d’années ,afin que d’autre génération soient former par votre expérience.
    MERCI EN TOUT CAS Pierre tu es excellent;

    J’attend impatiemment les cours de langage PHP

    Merci à vous !

  28. j’ai suivi vos cours avec beaucoup d’intérêt. ils sont vraiment très bien agencés, merci bcp!!
    par ailleurs, je ne sais toujours pas comment découper une page comme ta page d’accueil.

    encore merci

  29. Merci Pierre Giraud pour votre formation sur le HTML et le CSS, grâce à vous je suis prêt à attaquer le PHP et le SQL !

    Encore merci !

  30. Bonjour

    Merci, beaucoup pour la presentation, mais est ce tu peux m’aider à telechrger le jsbin pour et l’exemple de la presentation afin de relire l’esempe à tete repose.
    ça urge pour mettre l’evemple en ppratique afin de maitriser bien les cours .
    et est ce que tu as fait les cours de Javascript et PHP Merci d’avance et à bientot

    • Bonjour,
      Impossible de télécharger JsBin : c’est un service offert sur le web sous forme de site web, pas un logiciel téléchargeable. Concernant Js et PhP je suis en train de créer les scripts.
      Amicalement,
      Pierre

  31. fodemoudou kaba

    je suis lnformaticien et je souhaitrais apprendre beaucoup de langage avec pierre car j’aime sa façon d’enseigner c’est un vrai pédagogue

  32. Bonjour,

    Je navigue depuis longtemps sur le WEB pour examiner les tutoriels proposés sur divers sujets.
    Concernant l’apprentissage du HTML et du CSS, je trouve que vos cours sont d’une excellente qualité, même par rapports à des concurrents tels que le site du ZERO qui excelle dans la méthode.
    Bravo les 4 vidéos sont géniales.
    Apres avoir travaillé de longs mois sur ces 2 langages, j’essaie d’aborder doucement le JavaScript.
    Qui vivra verra !!
    Bravo encore et merci

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait plaisir à lire ! Je suis heureux que mes cours vous aient plu & aient pu vous être utiles.
      J’ai été un petit peu débordé par les événements ce mois-ci (déménagement, site e-commerce à créer…) ce qui explique le manque d’article. Cependant, je compte bien finir mon cors sur HTML et CSS et ensuite poursuivre sur ma lancée avec du PhP et le JavaScript. N’hésitez donc pas à revenir jeter un coup d’oeil de temps en temps !

      Dans tous les cas, bon courage dans votre apprentissage et encore merci,
      Pierre

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*