fr ⟩
Programmation / codage ⟩
HTML ⟩

Comment faire votre première page web (HTML)

Comment faire votre première page web (HTML)

Name: faire votre première page web (HTML)
Prep time: 20 min
Total time: 20 min
Ingredients: Éditeur de texte; Navigateur internet; PC

created 7.3 y • edited 7 y by Richard Foulon • Updates history (12)

This guide also exist in:

English (English)

● Easy 🚩 10 étapes 🕗 20 minutes

To faire votre première page web (HTML), you need 3 things:

Éditeur de texte ▼

shoppingbag View guides which use Éditeur de texte blueprint Find info page about Éditeur de texte workbench Find a guide to know how to make a Éditeur de texte Find a guide to know how to find a Éditeur de texte

Navigateur internet ▼

shoppingbag View guides which use Navigateur internet blueprint Find info page about Navigateur internet workbench Find a guide to know how to make a Navigateur internet Find a guide to know how to find a Navigateur internet

PC ▼

shoppingbag View guides which use PC blueprint Find info page about PC workbench Find a guide to know how to make a PC Find a guide to know how to find a PC

Ce guide vous permettra de créer votre première page web avec HTML.

Tout ce que vous avez besoin est un éditeur de texte comme Bloc notes Windows.

Le but de ce guide est de vous permettre de comprendre les bases d'une page web, comment c'est fait. Donc la page que vous allez créer n'a pas besoin d'être en ligne. Vous avez juste à l'ouvrir dans votre navigateur comme une "vraie" page web. Le navigateur va la lire directement depuis votre PC, au lieu de l'obtenir d'un serveur web. Donc la page que vous allez créer ne sera accessible que par vous à moins que vous décidiez de l'uploader sur un serveur web pour que tout le monde puisse la voir. Le bon coté c'est que vous pouvez vous entraîner hors-ligne simplement avec un éditeur de texte et un navigateur pour afficher la page

Allez, faison votre première page web !

Ouvrez Bloc notes Windows

Ouvrez le Bloc notes de Windows ou tout autre éditeur de texte basique de votre préférence.

Par éditeur de texte basique je veux dire un simple éditeur texte, où il impossible de mettre en forme le texte qu'on tappe (n'utilisez pas Wordpad, Word, open office etc. qui sont plus pour faire des documents stylisés)

Comprenez la structure par balise

En HTML, tout est fait avec des balises. C'est comme ça que vous dites au navigateur où les choses sont. C'est comme mettre des cônes de signalisation sur la route pour aider les conducteurs à aller à un endroit ou pour définir une certaine zone.

Chaque balise (ou tag) permet de faire une chose particulière ou définir une zone particulière dans la page.

Donc comment les balises fonctionnent ? C'est simple : vous écrivez le début et la fin du marquage, simplement à l'endroit qu'il doit être.

Par exemple imaginez que quelqu'un a fait une tarte aux pommes et vous demande de quelle grandeur vous souhaitez votre part. Donc vous utilisez vos doigts pour lui dire où la part commence et où elle se termine ainsi la personne pourra couper votre part de tarte exactement comme vous le souhaitez. C'est la même chose avec les pages web, mais à la place d'utiliser les doigts vous utiliserez des balises HTML pour débuter le marquage, et une autre pour terminer la zone de marquage.

Écrivez la première balise, qui sert à dire au navigateur le language utilisé (HTML).

Donc vous avez besoin d'écrire la balise de *début*, ajoutez quelques lignes vides, puis la balise de *fin*.

La balise de fin est la même que celle pour le début, mais elle possède un `/` en plus.

<html>

</html>

Écrivez la balise HEAD

Une page HTML peut contenir beaucoup d'informations non visibles pour les utilisateurs, mais utiles pour le navigateur ou les moteurs de recherche.

Toutes ces choses là vont aller dans la balise head ("tête" en anglais). Mais pour l'instant écrivez juste cette balise sans rien dedans.

Ajoutez la balise

<head>

DANS la balise précédente (html) :

<html>
<head>
</head>
</html>

(?) — Maintenant on peut ajouter la balise la plus importante : la balise *body* (*corps* en anglais). La balise *body* contient la plupart du contenu de la page.

Ajoutez simplement la balise *body* à l'intérieur de la balise *html*, APRES la balise *head* :

<html>

<head>
</head>

<body>
</body>

</html>

Vous pouver ajouter des espaces ou des lignes vides pour faire une structure de balises plus compréhensive.

La page HTML contient le texte lisible par les utilisateurs. Mais elle ne contient pas les images, videos etc. Elle a seulement leur adresse URL pour que le navigateur aille les chercher et les afficher dans la page.

Ajoutez du texte

Ok bon maintenant on a une structure de base.

Vous pouvez maintenant ajouter du texte dans la balise body !

<html>

<head>
</head>

<body>
Bonjour mon nom est John est ceci est ma première page HTML !
</body>

</html>

Visualisez votre page

Sauvegardez votre page HTML sur votre ordinateur en tant que

mapage.html

et ouvrez la dans votre navigateur internet afin que vous puissiez voir à quoi ça ressemble pour un utilisateur.

Pour ouvrir votre page HTML dans un navigateur internet, retrouvez le fichier

.html

que vous avez enregistré, faites un clic droit dessus, puis Ouvrir avec > Google Chrome ou un sutre navigateur web que vous avez d'installé.

Si vous vous amusez un peu avec le code pour voir comment ça ressort sur le navigateur, n'oubliez pas d'💾 Enregistrer (

Ctrl

) les changements dans l'éditeur de texte, puis dans le navigateur 🔄 Recharger (

) la page. Sinon vous ne verrez pas les changements que vous faites

Essayez des balises simples / Formatez votre texte

Pour formatter votre texte, ajoutez juste la balise correspondante autour du mot ou paragraphe désiré.

Faisons apparaitre le mot "John" en gras par exemple. Ajoutez juste Just <b> avant John et </b> après :

<html>

<head>
</head>

<body>
Bonjour mon nom est <b>John</b> est ceci est ma première page HTML !
</body>

</html>

Enregistrez le code, rafraichissez votre navigateur et vous verrez le texte en gras

Voici quelques balises que vous pouvez tester :

<h1></h1> Fait un gros titre
<i></i> Italique
<p></p> Fait un paragraphe
<blockquote></blockquote> cite du texte de quelqu'un ou d'une page
<code></code> Affiche le texte comme du code de programmation

Essayez les balises "solitaires"

Certaines balises n'on pas besoin d'être fermées, car il n'est pas nécessaire d'indiquer où le marquage s'arrête.

Quelques balises "solitaires" :
<hr> Fait une ligne horizontale
<br> Fait un retour ligne

(i) — Si vous souhaitez donner plus d'informations sur une chose balisée aux navigateurs web et aux moteurs de recherche, des données supplémentaires peuvent être ajoutées dans la balise de *début* de certaines balises HTML.

Par exemple la balise *blockquote* peut avoir la page source dedans. Donc au lieu d'écrire la balise de base :

<blockquote> ... </blockquote>

On ajoute juste la *propriété*="*valeur*" correspondante, ici c'est la page source qui est citée :

<blockquote cite="http://www.exemple.com/page257.html"> ... </blockquote>

Certaines balises ne peuvent pas avoir de données supplémentaires (elles seront ignorées), et celles qui le peuvent doivent avoir des propriétés valides pour HTML. Par exemple c'est inutile d'ajouter des propriétés au hasard, les navigateurs et les moteurs de recherche ne les comprendront pas.

Maintenant vous savez comment faire une page HTML de base, comment l'essayer dans un navigateur internet, et vous avez fait la connaissance de quelques balises HTML

____________
Photos utilisées :
pixabay.com/en/website-internet-int…

◄

HTML

Have some advice, techniques or tips to share about HTML?

📝 Create a guide

Share this guide with your friends! 141