• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/10/19

Créez votre premier site web

Log in or subscribe for free to enjoy all this course has to offer!

Découvrez les dessous des sites web

Avant de passer à la création à proprement parler de votre site web, prenons quelques minutes ensemble pour voir ce qui vous attend…

Allez sur n’importe quel site, par exemple celui de Class’Code : https://pixees.fr/classcode/accueil/

Faites un clic droit sur la page et sélectionnez “Voir le code source de la page” (“View page source”, en anglais).

Une nouvelle page s’affiche, qui ressemble à ça :

Vous l’avez deviné, il s’agit du code de votre page web, c’est-à-dire la manière dont elle a été codée pour apparaître dans votre navigateur.

Le HTML, c’est en effet le langage que vous allez utiliser pour coder votre première page web dans quelques instants. Si vous descendez un peu plus sur cette page, vous tomberez sur des blocs de texte, comme ça :

Et ce texte, vous le retrouvez bien sûr sur le site comme ceci, interprété par votre navigateur :

En comparant ces deux images, vous remarquerez peut-être que les bouts de texte du code source apparaissent différemment sur la page web : certains comme des titres, d’autres comme du texte “normal”, d’autres encore dans des couleurs différentes.

Vous souhaitez passer à l’action et tester tout ça ? Essayez tout de suite de créer et d’afficher une première page web dans votre navigateur !

Créez votre première page web

Si vous êtes sous Linux, ouvrez un éditeur de texte. Sous Windows, vous pouvez ouvrir le bloc-note, et sous Mac TextEdit. Tapez n’importe quoi dedans. Par exemple :

Puis enregistrez ce fichier en lui donnant un nom (sans espaces ni caractères spéciaux) et une extension. Ici, l’extension sera .html comme ceci :

Ouvrez ensuite le fichier avec un navigateur. Vous devriez voir ceci :

Comme vous avez précisé par l'extension que ce fichier était écrit en langage HTML, votre navigateur peut l’ouvrir : vous avez créé votre première page web !

Bon, c’est plutôt basique, me direz-vous, alors passons aux choses sérieuses et ajoutons un peu de code :)

Vous avez vu, dans le code source de la page web de Class’Code, que celui-ci commençait par <html>. Eh bien on appelle cela une “balise html”, et c’est ce qui signale, en plus de son extension, que c’est un document html. Mais cette balise ne fait “qu’ouvrir” le document, c’est pourquoi on l’appelle une balise ouvrante. Si vous vous rendez tout en bas du code source, vous constaterez que celui-ci se termine par : </html>. C’est ce qu’on appelle une balise fermante.

Bien entendu, il existe d’autres balises : nous allons essayer la balise <h2>, que vous pouvez voir sur la première ligne de cette image :

Je vous propose donc de reprendre votre fichier, et d’encadrer la totalité de son contenu entre les balises <html> et </html>. Puis encadrez une phrase avec la balise ouvrante <h2> et la balise fermante </h2>, comme ceci :

Enregistrez à nouveau votre fichier et lancez-le dans votre navigateur (ou rafraîchissez la page si vous ne l’aviez pas fermée).

Alors, vous comprenez à quoi sert la balise h2 ? ;)

N’hésitez pas à tester h1, h3, h4, etc. Évidemment, des balises html, il en existe beaucoup : elles permettent d’ajouter des liens, des images, de structurer la page, de la mettre en forme, etc. Nous verrons tout cela dans le prochain chapitre. Mais pour terminer celui-ci, je vous laisse en découvrir une autre : la balise <em>.

En résumé

  • Les pages web sont codées en langage html.

  • Pour accéder au code source d’une page web, il suffit de faire un clic droit sur cette page et de sélectionner “Voir le code source”.

  • Le langage html est constitué de balises ouvrantes et fermantes qui déterminent la structure et la mise en forme d’une page web.

Example of certificate of achievement
Example of certificate of achievement