[HTML/CSS] - Chapitre 4. Première page web en HTML

par Tychic Obanda

---

HTML | 10645 commentaires

---

Nous voici arrivé à notre quatrième chapitre et pour la première fois, nous allons toucher aux codes. Oui nous allons créer notre première page web en HTML. Une page web qui ne contiendra pas une chose extraordinaire mais elle sera importante pour vous car c'est peut-être la première de le faire.

On va créer une page simple et je vais vous expliquer la notion des balises en HTML. Les pages web sont remplies des balises mais celles-ci sont invisibles à l'écran pour vos visiteurs mais elles permettent au navigateurs web de comprendre ce qu'il faut afficher.

<balise></balise> ou <balise/>

Une balise est formée de 4 éléments : un chevron ouvert, le nom de la balise, un chevron fermé, et un slache pour indiquer une balise fermé. Dans cet exemple, le mot balise sera remplacé par le nom de la balise; on verra ça dans la prochaine vidéo.

Balises paires et balises orphelines

Nous avons deux types de balises en HTML : balise paire et balise orpheline. Une balise paire est une balise qui est composée de deux parties : ouvrante et fermante tandis qu'une balise orpheline est une balise composée d'une seule partie qui est ouvrante et fermante à la fois.

Exemple d'une balise paire : <balise></balise>

Exemple d'une balise orpheline : </balise>

Le but de ce chapitre est simplement de créer notre première page web et on verra plus de détail sur les balises dans le prochain chapitre.

Préparer son ordinateur

Maintenant il est temps de préparer votre ordinateur pour créer notre première page web. Vous avez déjà un éditeur de texte( de préférence Sublime Text) et un navigateur web je pense. Si ce n'est pas le cas, regardez ce chapitre et revenez après : HTML/CSS – 3. Les logiciels et installation

Créer un dossier sur votre ordinateur depuis le bureau et nommez le cours-html.

Ouvrez maintenant Sublime Text. Je suis sûr que votre ST(je vais utiliser ST s'il s'agit de Sublime Text) est en anglais et rendez vous sur l'onglet Project puis cliquez sur Add Folder to Project. Une fenêtre va s'ouvrir pour sélectionner un dossier et le dossier que vous allez sélectionner, c'est le dossier cours-html que nous venons de créer depuis le bureau.

Cette manipulation consiste à faire apparaitre le dossier de notre projet depuis ST. ce qui va nous permettre d'avoir accès à tout les fichiers et dossiers de notre projet depuis ST. Vous remarquerez l’apparition d'une colonne à gauche sur ST avec le texte FOLDERS contenant notre dossier cours-html.

Notre première page web HTML

On crée maintenant notre première page web. Faites Ctrl + N ou allez dans l'anglet File puis cliquez sur New File ou encore allez dans notre dossier cors-html depuis FOLDERS puis faites un clic droit et choisissez New File; pour créer un nouveau fichier. Renommez ce fichier page-web.html.

Maintenant allez sur ce fichier depuis FOLDERS et faites un clic droit puis choisissez Open Containing Folder… Une fois arrivé sur le dossier, double-cliquer sur le fichier page-web.html pour l'ouvrir depuis le navigateur.

Vous venez donc de créer votre première page web qui ne contient rien pour le moment. Et vous avez une page blanche sur votre navigateur web avec une adresse semblable à celle-ci : file:///C:/Users/243tech/Desktop/cours-html/page-web.html.

Enfaite une page html n'est entre autre qu'un fichier texte et tout ce qu'on peut écrire sur lui, sera affiché dans le navigateur.

Insérez n'importe quel texte sur ce fichier depuis votre éditeur et enregistrez-le. Actualisez maintenant la page sur votre navigateur. Vous verrez du texte que vous avez inséré sur le fichier html.

Mais le problème est que le navigateur ne comprend pas le texte simple. Ce qui va impliquer ce qu'on va voir dans le prochain chapitre.

---

• ← [HTML/CSS] - 10. Comment ajouter des images en HTML

• [HTML/CSS] - 1. Introduction →