Vous avez décidé de comprendre le web et apprendre le langage HTML fait partie des prérequis. Quoi que vous fassiez, vous aurez du HTML : pour créer un site web, ou simplement pour rédiger un article de blog.

Vous devez donc apprendre à manier ce code.

Vous vous dites peut-être que vous n’êtes pas faits pour apprendre un langage informatique.

Mais pas de panique, c’est assez simple. Même les enfants peuvent l’apprendre. Nous allons donc ensemble avancer pas à pas pour comprendre les bases de ce langage. Vous aurez simplement besoin d’une connexion internet et d’un ordinateur, donc des choses que vous avez déjà !

Créer un site web grâce au langage HTML

Tous les sites web sont basés sur ce langage, inventé par un Tim Berners-Lee en 1991. Quand vous naviguez sur le web, c’est du HTML qu’il y a derrière. Pas seulement bien sûr, car le HTML et css vont de paire, qui le complète et sera l’objet d’un autre article.

Donc votre navigateur (chrome, Firefox, safari, opéra) traduit ce langage pour vous afficher ce que vous voyez à l’écran. Car en coulisses, cela ressemble à ça :

Code source page web

Le langage HTML vous permet d’écrire ce qui doit être affiché sur la page : du texte, des images ou des vidéos, des liens, etc.  Il définit le contenu, en précisant « ceci est du texte », « ceci est un titre », « ceci est une image ». Je dois préciser qu’il ne fait que définir le contenu, pas la présentation. Pour cette dernière, encore une fois, c’est le langage CSS qui s’en charge.

Avec le HTML seul, on a donc un affichage brut, sans fioriture, et somme toute peu esthétique.

Sans CSS :

Site web sans CSS

Avec CSS :

Autrement dit, une page peut fonctionner avec seulement du langage HTML, le CSS intervient dans un deuxième temps. C’est la raison pour laquelle nous allons déjà apprendre à coder en HTML.

L’éditeur de texte indispensable

Avant de vous lancer pour de bon, vous aurez besoin d’un éditeur de texte. Non pas Word de la suite Office, mais d’un logiciel dédié à la création de sites web. Vous pouvez par exemple utiliser l’éditeur de texte Bloc-notes, que vous avez par défaut sur votre ordinateur. Cependant, il y a d’autres éditeurs plus puissants et personne n’utilise réellement Bloc-notes. Personnellement, j’aime beaucoup l’éditeur de texte dédié à la programmation Notepad++.

Il est gratuit et facile d’utilisation. Il vous facilitera votre apprentissage, grâce à de nombreuses fonctionnalités comme la coloration syntaxique, l’indentation, la gestion précise des codages, les erreurs, etc.

Sous Mac, il existe plusieurs logiciels également, dont jEdit. À vous de choisir celui qui vous plait le mieux.

Notepad++

Le rôle du navigateur

Que ce soit Chrome, Firefox, ou Safari si vous êtes sur Mac, votre navigateur lit le code HTML pour afficher un résultat visuel à l’écran. Le rôle du navigateur est donc incontournable. Il en est de même sur votre smartphone, avec les navigateurs dédiés iPhone ou Android.

Parfois, l’affichage du code peut légèrement varier en fonction du navigateur et de sa version. Il est donc nécessaire quand on développe un site d’installer ces différents navigateurs sur son ordinateur pour vérifier le rendu du site sur chacun d’eux.

navigateurs internet-chrome, firefox,safari,edge, opéra

Créer une page web en HTML

Vous voilà prêt à créer votre première page web en HTML. Vous avez donc installé et ouvert votre éditeur de texte. Ne vous attendez pas à un résultat extraordinaire au début, mais patience, cela viendra…

éditeur de texte notepad++

Vous pouvez maintenant commencer à écrire ce qui vous vient en tête. Peu importe, le but est de vous montrer comment cette page va ensuite s’afficher sur votre navigateur. Si vous manquez d’inspiration, vous mettez du lorem ipsum.

notepad++ lorem ipsum

Ensuite, il n’y a plus qu’à enregistrer le fichier, comme dans tous les programmes. Vous allez dans le menu Fichier, enregistrer, la boite de dialogue s’ouvre et vous l’enregistrez au nom que vous voulez et à l’emplacement qui vous convient le mieux. En revanche, il faut terminer le nom du fichier par .html pour qu’il s’affiche sur votre navigateur. Il est très important de vérifier qu’il est bien enregistré en tant que fichier HTML.

enregistrement fichier html

Ouvrez ensuite l’explorateur de fichiers dans lequel vous avez placé votre enregistrement L’icône qui représente le fichier dépend de votre navigateur web par défaut. Le navigateur que j’utilise est Chrome, et si vous utilisez un autre navigateur, vous aurez une autre icône.

fichier html

Double-cliquez sur le fichier, votre navigateur s’ouvre et vous voyez le texte que vous venez de taper !

affichage page html

Le texte s’affiche tel un pavé sur votre écran. C’est tout à fait normal, il faut maintenant le structurer à l’aide de balises, qui vont donner des instructions au navigateur de votre ordinateur comme : aller à la ligne, afficher un titre, une image, une vidéo, un paragraphe, etc.

Les balises HTML

Et oui, cela aurait été un peu trop facile s’il avait juste fallu taper du texte, n’est-ce pas ? Il va falloir maintenant insérer des balises. Elles sont entourées de chevrons, comme cela <balise>. Elles servent tout simplement à indiquer la nature du texte qu’elles entourent. Elles s’ouvrent, contiennent du texte et se referment.

<titre>Ceci est le titre</titre>

<p>Ceci est du texte sous forme de paragraphe</p>

Structure d’une page HTML

Je vous invite maintenant à reprendre votre éditeur de texte et de copier-coller le morceau de code ci-dessous :

1 <! DOCTYPE HTML >
2 <html >
3 <head >
4 <meta charset = »utf -8″ />
5 <title >Titre </ title >
6 </ head >
7
8 <body >
9
10 </ body >
11 </ html >

Celui-ci correspond à la base de toute page en HTML. Vous remarquerez que les balises s’ouvrent et se ferment dans un ordre précis. La balise HTML est la première et aussi la dernière à être fermée. Pour faire simple, comprenez que les balises doivent être fermées dans le sens inverse de leur ouverture.

La première ligne est indispensable. Elle s’appelle le doctype et indique qu’il s’agit d’une page html5.

Puis vient la balise HTML qui englobe l’ensemble du contenu de la page. L’en-tête <head> et le body <body> sont les deux parties essentielles du code. Les informations données dans l’en-tête ne sont pas affichées sur la page, mais elles sont néanmoins essentielles pour votre navigateur, comme pour Google. Enfin, le body sera le contenu à proprement parler, celui qui sera sur la page. Il n’y a plus qu’à programmer 😉

Nous terminerons cette rapide présentation par une remarque importante : le code HTML de n’importe quel page internet est visible par tous. Une manipulation toute simple vous permet de l’afficher : clic droit, afficher le code source. Par conséquent, ne mettez aucune information confidentielle en commentaire ou autre mot de passe. Tout le monde y a accès. Si vous souhaitez aller plus loin et apprendre le langage HTML, de nombreux cours gratuits sont proposés en ligne. Je peux vous recommander de suivre ceux d’openclassrooms qui sont vraiment très bien faits.

Vous y trouverez de nombreux cours sur les langages de programmation, y compris des formations professionnalisantes de développeur. Pour aller plus loin, vous pouvez visionner cette vidéo de Pierre Giraud, qui est adaptée aux débutants et présente aussi le langage CSS3.

La théorie est une chose, mais rien ne remplace la pratique. Faites au fur et à mesure de la présentation vidéo pour bien intégrer le principe de la programmation. C’est en forgeant qu’on devient forgeron !

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire !
S'il vous plaît entrez votre nom ici