dev web
partie 1

Créer une page web

Il vous faut

Cherchez disableAIFeatures dans les settings pour désactiver Copilot et les fonctionnalités IA de VS Code.

Ensuite,

Votre fichier index.html devrait ressembler à ça :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
        
  </body>
</html>

Premières observations

Remarque #1

Les balises :

Remarque #2

L'imbrication des balises :

Remarque #3

Les attributs de balises :

C'est quoi un fichier HTML ?

HTML → HyperText Markup Language → Langage de Balisage HyperText

Pour consulter un fichier html dans votre navigateur, vous devez utiliser un serveur HTTP. Avec LiveServer vous avez un bouton "Go Live" en bas à droite de VS Code qui en lancera un pour vous.

Personnaliser le contenu de son site

Ça se passe à l'intérieur du body :

<body>
  <h1>Bonjour :)</h1>
  <div>ceci est mon nouveau site</div>
</body>

Allons un peu plus loin :

<body>
  <h1>Bonjour :)</h1>
  <div>
    <p>ceci est mon <strong>nouveau</strong> site</p>
    <img width="200" src="image.jpg">
  </div>
  <div>
    <p>Pour aller voir <em>ailleurs</em>, <a href="https://example.com">cliquez ici</a></p>
  </div>
</body>

Créer d'autres pages dans mon site

Souvent, on a besoin de pouvoir segmenter l'information en plusieurs pages. La page d'accueil donne le ton général et sert de table des matières, puis on créé des pages spécifiques par projets, par articles, …

Pour faire ça, c'est presque la même chose que pour l'index : on créé un fichier html, on décrit son contenu, et on fait un lien pour y accéder.

Dans l'explorer de VS Code: clic-droit > new file… > article-1.html,

Et on décrit le contenu de notre fichier article-1.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article 1</title>
  </head>
  <body>
    <h1>Mon premier article :')</h1>
  </body>
</html>

Ensuite on fait fait un lien vers cette page depuis index.html :

...
<p>Pour en lire davantage, <a href="article-1.html">ça se passe ici</a></p>
...

Pour faire un lien de retour vers la page d'accueil depuis article-1.html, on utilise le chemin « racine » / comme adresse :

...
<p>Pour retourner à l'accueil, <a href="/">cliquer ici</a></p>
...

Listes des balises utilisées

div

La balise générique, elle permet de diviser le document (en section, en bloc, …) :

<div>
  contenu de mon bloc
</div>

a Liens

Lorsqu'on clique dessus, elle redirige vers l'adresse définie dans l'attribut href — a pour anchor (ancre), href pour hyper-reference :

<a href="https://example.com">cliquez ici</a>

à noter: pour ouvrir le lien dans un nouvel onglet, il faut ajouter l'attribut target="_blank".

h1, h2, h3, ... En-têtes

Les balises h1, h2, h3, h4, h5 et h6 permettent de créer des titres (header) jusqu'à 6 niveaux de hiérarchie :

<h1>Camille Dupond</h1>
<h2>Typographe</h2>

p Paragraphe

On définit un paragraphe avec la balise p. Contrairement à une div qui a une fonction générique (diviser la page en blocs abstraits), la balise p a une réelle fonction de mise en page, et s'utilise pour afficher du texte, gérer les espacement, etc.

<p>De tout temps à jamais, la communication entre les humains a revêtu une importance capitale</p>
...
<p>En conclusion, nous pouvons dire que le web est une création majeure du XXe sicèle.</p>

img

On affiche des images avec la balise img et on définit le chemin vers cette image avec l'attribut src (source).

<img src="image-01.jpg"/>
<!-- image-01.jpg est située dans le même dossier que ma page sur le disque -->
<img src="images/02.jpg"/>
<!-- 02.jpg est située dans un dossier "images", lui-même dans au même niveau que ma page sur le disque -->
<!-- on utilise : dossier/sous-dossier/fichier.extension -->

à noter: la balise img n'a pas de contenu à proprement parler, et n'a donc pas de balise fermante. On dit qu'elle est auto-fermante.

// commentaires

On peut écrire du texte sans l'afficher dans le navigateur en utilisant des commentaires. On utilise alors :

<!-- ce commentaire sera lisible dans le fichier, mais pas afficher dans le navigateur -->
<!-- c'est pratique pour documenter du code, ou pour désactiver temporairement une balise sans l'effacer -->

Pour aller plus loin : Principales balises HTML