Site internet Partie 2: Bases de HTML et CSS

Faire une première page web#

Dans la première partie, nous avons vu les éléments qui constituent ce que l’on appelle “le web”. Parmi eux, le langage HTML est celui qui permet d’écrire et d’afficher des pages web dans le navigateur. Nous allons maintenant en voir les principes de base.

Choisir son éditeur de texte#

Les fichiers .html sont des fichiers textes. Un fichier texte est un fichier qui, comme son nom l’indique, ne contient que du texte. Ces fichiers sont généralement créés par des logiciels que l’on appelle des éditeurs de texte.

ATTENTION: un éditeur de texte (text editor en anglais) ne doit pas être confondu avec un traitement de texte (word processor) comme Microsoft Word ou LibreOffice. Le traitement de texte est déjà une opération de mise en forme. Un document word contient déjà des informations qui ne sont pas du texte telles que l’aspect des marges, la taille de la feuille de texte etc.

Les éditeurs de texte les plus couramment fournis sont Notepad sur Windows ou TextEdit¹ sous Mac. Cependant leurs possibilités sont limitées et ils offrent assez peu d’outils pour écrire du code html facilement. D’autres logiciels existent utilisant des moyens modernes pour faciliter l’édition de code et de projets de page webs.

Une alternative gratuite et open-source disponible sur Windows, Mac ou Linux est le logiciel Sublime Text, mais vous pouvez aussi utiliser VSCode (de Microsoft) ou Pulsar. Le choix de l’éditeur est un choix personnel qui dépend de vos conditions de travail et de vos préférences. N’hésitez cependant pas à changer si vous n’êtes pas satisfait de votre éditeur actuel ou si vous préférez essayer autre chose. Un bon ouvrier a toujours de bons outils et c’est à vous de déterminer ce qui vous convient le mieux.

Dans la suite nous utiliserons Sublime Text par simplicité.

Écrire un fichier#

Crèez un dossier mon-site et ouvrez un fichier texte nommé index.html à l’aide de Sublime Text.

Le nom index.html est un nom spécial à retenir. Les navigateurs cherchent des fichiers index.html ou index.php lorsqu’ils explorent un site. C’est la racine à laquelle ils se greffent.

Dans ce fichier écrivez le code suivant:

<p>
  Ceci est un paragraphe en html.
</p>

Enregistrez le fichier, et ouvrez le avec votre navigateur. Vous devriez voir le contenu suivant.

C’est probablement votre première page web. Si tel est le cas, bravo! Comme vous pouvez le voir, le texte que vous avez écrit est simplement affiché dans le navigateur, mais en réalité il se passe déjà beaucoup de choses.

Votre fichier texte est rudimentaire mais contient déjà les éléments de base qui nous permettront de décrire le fonctionnement du HTML. Commençons par les éléments entre les chevrons < et >.

Le langage HTML est effectivement un langage balisé.² Cela signifie que des balises entourent les éléments et signalent au navigateur en quoi consiste le contenu que la balise entoure. Dans le fichier que vous avez écrit, la balise est ouverte avec <p> et fermée avec </p>. Le texte contenu dans cette balise sera considéré comme un Paragraphe.

Il existe trois principaux types de balises en HTML:

• Les balises bloc comme <p></p> qui signalent que le contenu de la balise sera un bloc indépendant (un paragraphe, un titre etc…). C’est à dire que ce bloc sera mis en forme de manière indépendante des blocs qui le précèdent et qui le suivent.
• Les balises en-ligne (inline) sont des balises de modifications locales des éléments qu’elles contiennent. Par exemple la balise <b></b> met le texte en gras.
• Les éléments vides qui sont des balises qui n’encadrent pas d’autres éléments. L’exemple le plus commun est la balise <img> qui sert à placer des images. Ces balises utilisent généralement leurs attributs pour caractériser les éléments. Par exemple, dans le cas des images, on utilisera l’attribut src pour localiser l’image: <img src='mon-image.png'> affichera l’image qui sera dans le fichier mon-image.png.

La liste complète des balises se trouve sur le site de la W3 school. Rassurez-vous, il n’est pas indispensable de les apprendre par cœur. et un petit nombre à connaître suffit pour la plupart des applications.

Imbriquer les balises#

Ajoutons plus de contenu à notre page web. Écrivez-les éléments suivants dans votre fichier index.html:

<h1> Ceci est mon titre.</h1>

  <h2> Ceci est ma première section.</h2>

    <p>
      Voici l'introduction de la section.
    </p>

    <h3> Ceci est une sous-section.</h3>

    <p>
      Voici le contenu de la sous-section. Il devrait y avoir une image ici.
    </p>
    <img src="Chien.jpg" alt="Une image de chien.">

  <h2> Ceci est ma seconde section.</h2>

    <p>
      Cette section contient une liste!
    </p>

    <ul>
      <li>Premier élément de la liste.</li>
      <li>Second élément de la liste.</li>
    </ul>

Votre page web devrait commencer à prendre forme dans votre navigateur et vous devriez voir les titres et les sections avec une mise en page différente de celle des paragraphes. Il y a même une liste à puce à la fin de votre page. C’est cool non? Mais l’image ne s’affiche pas…

Détaillons point par point le contenu de notre fichier. Il y a beaucoup de nouvelles balises.

• Les balises <h1>, <h2> et <h3> indiquent respectivement le titre de la page, des sections et des sous-sections. Notez que le numéro ne dépend pas de l’avancée chronologique le long de la page mais du niveau de profondeur. On peut voir la relation entre les niveaux comme celle entre un livre (votre page), ses chapitres (vos sections), et les différentes sections du chapitre (vos sous-sections). C’est pourquoi le titre de la seconde section est une balise <h2>. Elle est un niveau au dessus de la balise <h3> précédente. Il y a en tout 6 niveaux de titres mais il est rarement nécessaire de déscendre aussi profond.
• Vous pouvez voir que la liste à puces est composée de deux éléments, les balises <ul> et les balises <li>. La première balise indique le type de liste, ul signifie “unordered list” qui est une liste sans ordre. Si vous changez cette balise par <ol> (n’oubliez pas la balise fermante en bas), vous aurez une liste ordonnée (ordered list). Les éléments de la liste sont chacun définis par la balise <li> (pour list) et n’ont pas besoin d’être changé si vous changez le type de liste.
• Je vous ai dit que la balise <img> sert à afficher des images. Mais aucune image ne s’est affiché dans votre navigateur. C’est normal! Il n’existe normalement pas de fichier nommé “Chien.png” dans votre dossier.Vous pouvez cependant voir le texte qui est passé à l’attribut alt. Cet attribut contient le texte alternatif qu’affichent les navigateurs lorsqu’ils ne trouvent pas les images correspondantes. Les attributs sont des options propres à chaque balise qui peuvent être utilisées pour modifier leur comportement et leur contenu. Essayons de voir un exemple.

Utiliser les attributs: Ajouter une image et créer un lien.#

Nous n’avons pas d’image de chien mais pourquoi ne pas aller en chercher une sur internet? J’ai trouvé celle-ci directement sur Wikipedia qui propose des images libres de droit.

En collant directement le lien dans la balise, le navigateur est capable d’aller la chercher lui-même et de l’afficher dans notre page. N’est-ce pas merveilleux?³

Modifions la balise contenant l’image de la manière suivante dans le fichier:

  <img
  src="https://upload.wikimedia.org/wikipedia/commons/e/e9/NICO_looks_at_himself.jpg"
  alt="Image de chien prise par Georgia Pinaud, Lille , France, Domaine
  publique.">

Si vous rechargez la page vous devriez voir une image de Chien grand format apparaitre. C’est très bien mais ça n’est pas très esthétique… Essayons de réduire sa taille. Nous pouvons utiliser deux autres attributs pour les images: width et height pour la largeur et la hauteur. Modifions encore la balise:

  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/NICO_looks_at_himself.jpg"
  alt="Image de chien prise par Georgia Pinaud, Lille , France, Domaine publique."
  width="320"
  height="240">

Si vous rechargez la page, le résultat devrait être bien plus adapté à votre écran. Les attributs sont spécifiques à chaque balise.

Nous avons par ailleurs dit que le web est composé de nombreuses pages web liées les unes aux autres. Est-ce que ça ne serait pas super chouette de faire un lien vers la page? Ces liens sont réalisés à l’aide de la balise <a> (qui signifie ancre, ou anchor en anglais). Le contenu des balises <a> devient un lien cliquable qui redirige vers le contenu de son attribut href. Il suffit alors simplement de mettre l’image à l’intérieur de notre balise!

  <a href="https://fr.wikipedia.org/wiki/Chien">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/NICO_looks_at_himself.jpg"
  alt="Image de chien prise par Georgia Pinaud, Lille , France, Domaine publique."
  width="320"
  height="240">
  </a>

Rechargez la page et cliquez sur l’image. Vous serez redirigé vers la page wikipedia sur les chiens! Le HTML n’est pas si compliqué, pas vrai?

Head et Body: les métadonnées.#

Si vous regardez l’onglet contenant votre site, vous remarquerez que contrairement à la plupart des sites, votre navigateur n’affiche que le nom du fichier et une icone générique.

Vous avez pourtant donné un titre à votre page web en utilisant la balise <h1>! En réalité cette balise est le premier en-tête qui contient généralement le titre à destination du lecteur. Le navigateur ne lit pas le titre de votre page ici. Ce dernier peut-être d’ailleurs différent en fonction de ce que vous voulez afficher sur la page et dans le navigateur.

Les informations sur la page qui ne sont pas destinées à l’affichage sont généralement mise en dans une section à-part au début du document signalée par la balise <head>. Par opposition, ce qui sera affiché est mis dans une balise <body>. Vous vous demandez sans doute à quoi servent des éléments qui ne sont pas affichés, mais ils ont leur utilité. Par exemple des éléments de style peuvent être passés au navigateur pour contrôler l’affichage de la page.

Continuons à modifier notre document et ajoutons des éléments à la balise <head>:

<head>
  <title>Ma super page web!</title>
  <style>
    h1 {color: red, text-align: center}
    p {color: green, text-align: center}
  </style>
</head>

<body>
<h1> Ceci est mon titre.</h1>

  <h2> Ceci est ma première section.</h2>

    <p>
      Voici l'introduction de la section.
    </p>

    <h3> Ceci est une sous-section.</h3>

    <p>
      Voici le contenu de la sous-section. Il devrait y avoir une image ici.
    </p>
    <img src="Chien.jpg" alt="Une image de chien.">

  <h2> Ceci est ma seconde section.</h2>

    <p>
      Cette section contient une liste!
    </p>

    <ul>
      <li>Premier élément de la liste.</li>
      <li>Second élément de la liste.</li>
    </ul>
</body>

Rechargez la page et… Heu la! Le texte du titre et des paragraphes s’est déplacé au centre! Remarquez que seuls les balises <h1> et <p> ont été affectées. Mais vous voyez maintenant une première manière d’affecter l’affichage des éléments de la page. Vous allez me dire que s’il faut donner toutes les caractéristiques d’affichage et de positions de toutes les balises, on est pas sortis de l’auberge et que c’est bien compliqué de faire un site!

Rassurez-vous, nous verrons plus tard comment le faire de manière moins laborieuse et plus élégante. Pour le moment retenez qu’en HTML, l’apparence et le contenu sont généralement séparés.

Structure d’un document HTML#

Récapitulons la structure générale à laquelle nous sommes arrivés en allégeant le contenu. Nous avons une section <head> et une section <body> qui sont les deux grandes parties de notre page web. La première contient tout ce qui est important pour le navigateur mais qui n’est pas important à afficher, la seconde est le contenu de la page. Pour être tout à fait exhaustif, une page web correctement formatée signale aussi au navigateur que son contenu sera écrit en html. Il existe donc une balise particulière qui englobe le tout <!DOCTYPE html> ... </html>. Promis, c’est la dernière! Le résultat final sera donc:

<!DOCTYPE html>
  <head>
    <title>titre de la page</title>
    <style>
      feuille de style CSS ou attributs de style
    </style>
  </head>

  <body>
    contenu de la page
  </body>
</html>

Formattage du texte#

Comme dans tous les documents, le texte en HTML contient des éléments que l’on peut vouloir mettre en avant par des procédés visuels: gras, soulignage etc. Il existe une série de balises en ligne qui peuvent être utilisée pour ce faire. En voici un rapide tableau récapitulatif: