Tutoriel HTML chapitre 2: première page web

groupetma-html-css-banner

Ma première page web

Ça y est, tu as installé tous les logiciels? Tu devrais maintenant avoir un éditeur de texte pour créer ton site et plusieurs navigateurs pour le tester. Dans ce chapitre, vous commencerez à découvrir les bases du langage HTML et créer votre toute première page web!

Note: tout au long de cette formation, j’utiliserai l’éditeur de texte Brackets. Il se peut que vous en choisissez un autre qui fait tout aussi bien le travail. Mais sachez que quelques différences pourraient exister et vous devrez alors ajuster le tir de votre côté. Notez aussi que peu importe l’éditeur choisi, vos documents HTML seront tout aussi valides.

Avant de poursuivre

Je recommande de créer un nouveau dossier sur votre bureau nommer formation_html afin que tous les fichiers de votre site soient au même endroit.

Comment nommer des fichiers pour le web

Lorsqu’il s’agit du web, il ne faut en aucun cas utiliser des espaces, des ponctuations (mis à part le point de l’extension), caractères spéciaux Caractères spéciaux à ne pas utiliser
# $ + % ! ` & ‘ | { } ? “ = : \ @
et éviter les lettres accentuées. Utilise seulement des lettres, chiffres,  _ ou des – pour que la valeur soit reconnue par tous les navigateurs. Dans certains cas, ça pourrais fonctionner mais ce sera toujours selon la capacité du navigateur à les interpréter et cela varie beaucoup.

Créer une page web avec l’éditeur de texte

La première chose à réaliser avec une éditeur de texte c’est que lorsqu’on crée une page HTML, ça ressemble à du code. Je veux dire que l’on ne voit pas le look réel avant de lire notre page dans un navigateur web. Au début c’est difficile, surtout lorsqu’on est habitués avec Adobe InDesign, Quark ou même Microsoft Word qui nous donnent l’heure juste en temps réel. Les applications payantes vous permettent souvent un aperçu de votre page mais encore là, ce n’est qu’un aperçu! La vrai vie c’est toujours le navigateur web qui l’affichera.

Exercice 2.1: créer un fichier HTML

Pour ce premier exercice, simplement créer un nouveau document dans Brackets et entrer ces quelques lignes de HTML.

1. Créer un nouveau document.

2. Entrez le texte suivant (je l’expliquerai plus tard):

<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>

Cela vous donne un texte balisé banal régulier qui devrait ressembler à ceci.

exercice-1-texte-banal

Texte balisé dans un document régulier Adobe Brackets

Exercice 2.2: sauvegarder en format HTML

1. Enregistrez ce document en ajoutant l’extension .html à la fin.

Sauvegarde html brackets

Sauvegarde en ajoutant .html à la fin du nom

Vous remarquez quelque chose? Regardez bien vos balises, elle ont maintenant une couleur.

exercice-2-texte-balise-couleur

Texte balisé dans un document HTML Adobe Brackets

2. Ajoutez un paragraphe (sans utiliser copier/coller).

<p>Ceci est un autre paragraphe</p>

Maintenant que Brackets sais qu’il s’agit d’une page HTML, il ajoutera les balises fermante automatiquement.

exercice-2-texte-balise-ajout

Adobe Brackets (tout comme d’autres éditeur de texte nommés dans le chapitre précédent), ajoutera les balises fermantes automatiquement.

Les balises et attributs HTML

En HTML, en plus du texte que l’on écrirais dans une application régulière, nous devons aussi l’encadrer de ce qu’on appelle des balises, qui vont donner des instructions au navigateur. Elles indiquent la nature des informations qu’elles encadrent, par exemple, «ceci est le titre de la page», «ceci est une image», «ceci est un paragraphe de texte», etc.

Les pages HTML sont remplies de balises qui sont invisibles à l’écran pour les visiteurs, mais permettent au navigateur de comprendre ce qu’il doit afficher. Les balises se repèrent facilement car elles sont composées des symboles comme ceci < >.

Dans votre navigateur, vous pouvez faire un clique droit sur une page web et choisir l’option qui affichera le code source. Faites-le si vous êtes curieux et voyez de quoi je parles lorsque je dis qu’une page web est remplies de balise!

Deux types de balises

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

Les balises en paires

Les balises en paire sont les plus communes. Elles s’ouvrent, contiennent du texte, puis se ferment plus loin. Voici à quoi elles ressemblent.

<titre>Ceci est un titre</titre>

Remarquez qu’il y a une balise ouvrante qui indique où le titre commence <titre>, et une balise fermante </titre> où le titre se termine.

Les balises orphelines

Les balises orphelines 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:

<img />

Notez que le  /  de fin de la balise orpheline n’est pas obligatoire. Néanmoins, pour ne pas les confondre avec le premier type de balise, la bonne pratique recommande d’ajouter un barre oblique à la fin d’une balise orpheline.

Les attributs de balises

Les attributs viennent compléter les balises pour donner de l’information supplémentaire. La plupart des balises n’en ont pas besoin.

À quoi cela sert-il? Prenons la balise <img /> que nous venons de voir. Seule, elle ne sert pas à grand chose car le navigateur sais qu’il doit insérer une image mais où se trouve-t-elle? Ajouter un attribut indiquera au navigateur où se trouve l’image à afficher:

<image source="photo.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>

Dans cet exemple, nous avons une balise citation et les attributs auteur et date. Il n’y a pas vraiment de limite en ce qui concerne les attributs, mais sachez que plus il y a ‘information, plus votre page sera longue à interpréter.

Note: Toutes les balises que nous venons de voir sont fictives. Le but était de bien établir le lien entre la balise et son contenu. M. Tom Berners-Lee étant un anglophone, les noms réel de balises HTML sont tous en anglais.

Structure de base d’une page HTML5

Retournons dans notre éditeur de texte.

Exercice 2.3: Retranscrivez le code source ci-dessous dans votre éditeur de texte.

Souvenez-vous que les couleurs de votre éditeur peuvent être différentes de celles dans cette page.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
</body>
</html>

Ce code correspond à la base minimum d’une page web en HTML5. Pas de panique en voyant toutes ces balises d’un coup, je vais expliquer leur rôle plus tard!

Remarquez qu’il y a des espaces devant les différentes balises. Ce n’est pas obligatoire et cela n’a aucun impact sur l’affichage de la page. On appelle cela l’indentation et le but est de rendre le code source plus lisible. Dans votre éditeur, il suffit d’appuyer sur la touche Tab pour avoir le même résultat (ou faire 4 espaces).

<!doctype>
La toute première ligne s’appelle le doctype (type de document). 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 car elle commence par un point d’exclamation.

<html>
C’est la balise principale du code. Elle englobe tout le contenu de votre page. Aucun contenu ne doit se trouver après la balise fermante.

<head>
Contraîrement à ce que l’on pourrait croire, il ne s’agit pas de l’entête qui sera affichée par le navigateur. L’en-tête <head> donne quelques informations générales destinée au navigateur sur la page. Malgré que ces informations ne soient pas affichées par le navigateur, elles sont cependant très importantes!

<meta>
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 table de caractère que le fichier utilise. C’est lui qui détermine comment les caractères spéciaux vont s’afficher, comme les accents, par exemple.

Voici un exemple d’une table de caractère fictive pour illustrer le propos:

table-fictive-dencodage

Si vous écrivez le mot «bebe» en spécifiant que vous utilisez l’encodage «abc», le navigateur verra «2525», et affichera à l’écran «bebe». Mais si l’encodage n’est pas spécifié, ou que le fichier est enregistré avec un autre encodage, le navigateur pourra très bien utiliser la table «xyz». Il vera alors «2525» et affichera «cfcf»

<title>
C’est le titre de ta page et il devrait décrire ce qu’elle contient. Il est conseillé de garder le titre court (moins de 100 caractères). Le titre ne s’affiche pas dans la page mais en haut de la fenêtre du navigateur, ainsi que dans la fenêtre de résultat de recherche.

groupe-tma-titre-page

Ce qui se trouve dans la balise title se retrouve dans le titre de la fenêtre du navigateur

groupe-tma-resultats-google

Ce qui se trouve dans la balise title est affiché dans les résultats de recherche

Autant te dire que bien choisir son titre est important!

<body>
C’est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l’écran. Pour le moment, le corps est vide (nous y reviendrons plus loin).

Exercice 2.4: ajoutons du contenu à notre page web

Nous avons vu que le titre de notre page se trouve entre les balises <title>, et que le contenu se trouve entre les balises <body>. Donc nous allons donner un titre à notre page et y mettre du contenu.

1. Dans la partie <head>, entre les balises <title>, inscrire un titre pour notre page web.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mon super site web</title>
</head>
...

bien entendu, les … signifie qu’il y a une suite au code mais qu’il n’est pas affiché dans cette partie. Vous ne devez pas inscrire les …

2. Dans la partie <body>, ajoutons un titre <h1> ainsi qu’un paragraphe <p> à notre page web.
...
<body>
<h1>Mon super site</h1>
<p>Voilà tout ce que ça prends pour faire une page web!</p>
</body>
</html>

3. faite une sauvegarde et ouvrez votre document .html dans un navigateur.

Et voilà! Vous avez produit une page web. C’est pas la plus belle mais au moins, la glace est brisée! Votre page web a:

  • <title> un titre pour la fenêtre
  • <h1> un titre pour votre contenu
  • <p> un paragraphe.
ma-premiere-page-web

Une première page web. Avec du CSS, nous pourrons l’améliorer plus tard.

L’importance de l’ordre des balises

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, alors elle doit être la dernière que l’on ferme </html> (tout à la fin du code). Les balises doivent être fermées dans le sens inverse de leur ouverture. Par exemple:

Correct

<html><body></body></html>

Une balise qui est ouverte à l’intérieur d’une autre doit aussi être fermée à l’intérieur.

Incorrect

<html><body></html></body>

Les balises s’entremêlent, ce qui causera des erreurs d’affichage.

En résumé

On utilise l’éditeur de texte pour créer un fichier ayant l’extension «.html».

À l’intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.

Il existe deux types de balises:

  • Balises en pairs: elles s’ouvrent et se ferment pour délimiter le contenu (début et fin d’un titre, par exemple).
  • 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 (par exemple l’emplacement d’une image).

Une page web est constituée de deux sections principales:

  • une en-tête <head>
  • un corps <body>

On peut afficher le code source de n’importe quelle page web en faisant un clic droit, puis en sélectionnant «Afficher le code source de la page».

Tutoriel HTML chapitre 1  &verbar;  Tutoriel HTML chapitre 3


Loading...