Votre première page web

Votre première page web en HTML

Pour télécharger les vidéos de ce cours, cliquer sur Telecharger !

Ça y est, vous avez installé tous les logiciels ? Vous devriez maintenant avoir un éditeur de texte pour créer votre site (comme Sublime Text) et plusieurs navigateurs pour le tester (Mozilla Firefox, Google Chrome…).

Dans ce chapitre, nous allons commencer à pratiquer ! Nous allons découvrir les bases du langage HTML et enregistrer notre toute première page web !
Alors oui, bien sûr, ne vous attendez pas encore à réaliser une page web exceptionnelle dès ce second chapitre, mais patience… cela viendra !

Créer une page web avec l'éditeur

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons créer notre site dans un éditeur de texte. Vous avez dû en installer un suite à mes conseils dans le premier chapitre : qu'il s'appelle Sublime Text, Notepad++, Brackets, jEdit, vim, TextWrangler… peu importe. Ces logiciels ont un but très simple : vous permettre d'écrire du texte !

Dans la suite de ce cours, je travaillerai avec Sublime Text. Je vais donc l'ouvrir :

Bon, qu'est-ce qu'on fait maintenant ? Qu'est-ce qu'on écrit sur cette feuille blanche (euh... noire) ?

On va faire un petit essai. Je vous invite à écrire ce qui vous passe par la tête, comme moi à la figure suivante.

Vous pouvez écrire les mêmes phrases que moi ou ce que vous voulez ; le but est d'écrire quelque chose.

Maintenant, enregistrons ce fichier. Pour cela, c'est très simple : comme dans tous les programmes, vous avez un menuFichier>Enregistrer (ouFile >Save en anglais) Une boîte de dialogue vous demande où enregistrer le fichier et sous quel nom. Enregistrez-le où vous voulez. Donnez au fichier le nom que vous voulez, en terminant par.html, par exempletest.html, comme indiqué à la figure suivante.

Enregistrement d'un fichier sous Sublime Text

Ouvrez maintenant l'explorateur de fichiers dans le dossier où vous avez enregistré votre page (l'Explorateur sous Windows ou le Finder sous Mac). Vous y verrez le fichier que vous venez de créer:

L'icône qui représente le fichier dépend de votre navigateur web par défaut en général. Vous pouvez y voir une icône de Firefox, de Chrome... ou un aperçu comme ici. N'y prêtez pas attention. Faites simplement un double-clic sur ce fichier et… votre navigateur s'ouvre et affiche le texte que vous avez écrit.

Cela ne marche pas bien, on dirait ! Tout le texte s'affiche sur la même ligne alors qu'on avait écrit deux lignes de texte différentes !?

En effet, bien vu !
Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire sur deux lignes différentes. Que se passe-t-il ?

En fait, pour créer une page web il ne suffit pas de taper simplement du texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des instructions à l'ordinateur comme « aller à la ligne », « afficher une image », etc.

Les balises et leurs attributs

Bon, tout cela était trop facile. Évidemment, il a fallu que ces satanés informaticiens s'en mêlent et compliquent les choses. Il ne suffit pas d'écrire « simplement » du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on utilise pour cela des balises.

Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles<et>, comme ceci :<balise>

À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :




<titre>Ceci est un titre</titre>

On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre.




Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre

Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».

Une balise orpheline s'écrit comme ceci :




<image />

Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :




<balise attribut="valeur">

À quoi cela sert-il ? Prenons la balise<image />que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :




<image nom="photo.jpg" />

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichierphoto.jpg.

Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :




<citation auteur="Neil Armstrong" date="21/07/1969">


C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité.


</citation>

Structure de base d'une page HTML5

Reprenons notre éditeur de texte (dans mon cas Sublime Text). Je vous invite à écrire ou à copier-coller le code source ci-dessous dans votre éditeur de texte. Ce code correspond à la base d'une page web en HTML5 :




<!DOCTYPE html>


<html>


    <head>


        <meta charset="utf-8" />


        <title>Titre</title>


    </head>





    <body>


    


    </body>


</html>

Copié dans Sublime Text, vous devriez voir:

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise<html>est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec</html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

<html><body></body></html>: correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.
<html><body></html></body>: incorrect, les balises s'entremêlent.

Euh, on pourrait avoir des explications sur toutes les balises que l'on vient de copier dans l'éditeur, m'sieur ?

Bien sûr, c'est demandé si gentiment.

Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rôle !

Le doctype




<!DOCTYPE html>

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation). Vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

La balise`</html>`




<html>





</html>

C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante</html>se trouve tout à la fin du code !

L'en-tête`<head>`et le corps`<body>`

Une page web est constituée de deux parties :

L'en-tête<head>: cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !
Le corps<body>: c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre aux deux balises contenues dans l'en-tête…

L'encodage (`charset`)




<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans votre fichier.html.

Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète ! C'est pour cela que j'ai indiquéutf-8dans cette balise.

Il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est heureusement le cas désormais par défaut dans la plupart des éditeurs de texte.

Le titre principal de la page




<title>

C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet, comme sur la figure suivante.

Le titre de la page apparaît en haut du navigateur

Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google (figure suivante).

Le titre de la page apparaît dans les recherches Google

Autant vous dire que bien choisir son titre est important !

Les commentaires

Nous avons appris à créer notre première vraie page HTML dans ce chapitre. Avant de terminer, j'aimerais vous présenter le principe des commentaires.

Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.

Bref, cela ne sert à rien ?

Eh bien si !
Cela sert à vous et aux personnes qui liront le code source de votre page. Vous pouvez utiliser les commentaires pour laisser des indications sur le fonctionnement de votre page.

Quel intérêt ? Cela vous permettra de vous rappeler comment fonctionne votre page si vous revenez sur votre code source après un long moment d'absence. Ne rigolez pas, cela arrive à tous les webmasters.

Insérer un commentaire

Un commentaire est une balise HTML avec une forme bien spéciale :




<!-- Ceci est un commentaire -->

Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans votre code source (surtout s'il est long).




<!DOCTYPE html>


<html>


    <head>


        <!-- En-tête de la page -->


        <meta charset="utf-8" />


        <title>Titre</title>


    </head>





    <body>


        <!-- Corps de la page -->


    </body>


</html>

Tout le monde peut voir vos commentaires… et tout votre code HTML !

Terminons par une remarque importante : tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il suffit de faire un clic droit sur la page et de sélectionner « Afficher le code source de la page » (l'intitulé peut changer selon votre navigateur), comme le montre la figure suivante.

Le code source s'affiche alors (figure suivante).

Vous pouvez tester cette manipulation sur n'importe quel site web, cela marche ! Garanti à 100%. Cela s'explique assez facilement : le navigateur doit obtenir le code HTML pour savoir ce qu'il faut afficher. Le code HTML de tous les sites est donc public.

La morale de l'histoire ? Tout le monde pourra voir votre code HTML et vous ne pouvez pas l'empêcher. Par conséquent, ne mettez pas d'informations sensibles comme des mots de passe dans les commentaires… et soignez votre code source, car je pourrai venir vérifier si vous avez bien suivi mon cours à la lettre !

En résumé

On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension.html(par exemple :test.html). Ce sera notre page web.
Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-clic dessus.
À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.
Les balises peuvent avoir plusieurs formes :
- <balise> </balise>: elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple).
- <balise />: balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit précis (par exemple une image).
Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires (exemple :<image nom="photo.jpg" />).
Une page web est constituée de deux sections principales : un en-tête (<head>) et un corps (<body>).
On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnantAfficher le code source de la page

Rechercher dans ce blog

Classeweb

Translate