Comment créer une page HTML - Letecode
Suivez nous
Table de matière
  1. Tutoriels
  2. Tutoriel HTML5
  3. HTML : Mise en route
Chapitres

HTML : Mise en route

Dernière mise à jour : 02/02/2022

Un fichier HTML est simplement un fichier texte enregistré avec une extension .html ou .htm.

Commençons

Dans ce tutoriel, vous apprendrez à quel point il est facile de créer un document HTML ou une page Web. Pour commencer à coder du HTML, vous n'avez besoin que de deux éléments : un éditeur de texte simple et un navigateur Web.

Eh bien, commençons par créer votre première page HTML.

Création de votre premier document HTML

Passons en revue les étapes suivantes. À la fin de ce tutoriel, vous aurez créé un fichier HTML affichant le message "Hello world" dans votre navigateur Web.

Étape 1 : Création du fichier HTML

Ouvrez l'éditeur de texte de votre ordinateur et créez un nouveau fichier.

Astuce : Nous vous suggérons d'utiliser le Bloc-notes (sur Windows), TextEdit (sur Mac) ou un autre éditeur de texte simple pour ce faire ; n'utilisez pas Word ou WordPad ! Une fois que vous avez compris les principes de base, vous pouvez passer à des outils plus avancés tels que VS code, Adobe Dreamweaver et autres.

 

Étape 2 : Tapez du code HTML

Commencez avec une fenêtre vide et tapez le code suivant :

<!DOCTYPE html>

<html lang="fr">

<head>

    <title>Un document HTML</title>

</head>

<body>

    <p>Hello World!<p>

</body>

</html>

Étape 3 : Enregistrer le fichier

Enregistrez maintenant le fichier sur votre bureau sous le nom "premierepage.html".

Il est important que l'extension .html soit spécifiée - certains éditeurs de texte, tels que le Bloc-notes, l'enregistreront automatiquement, sinon ça sera .txt.

Pour ouvrir le fichier dans un navigateur. Accédez à votre fichier puis double-cliquez dessus. Il s'ouvrira dans votre navigateur Web par défaut. Si ce n'est pas le cas, ouvrez votre navigateur et faites-y glisser le fichier.

Explication du code

Vous pourriez penser à quoi ressemblait ce code. Eh bien, découvrons.

  • La première ligne <!DOCTYPE html> est la déclaration du type de document . Il indique au navigateur Web que ce document est un document HTML5. Il est insensible à la casse.
  • L'élément <head> est un conteneur pour les balises qui fournit des informations sur le document, par exemple, <title> la balise définit le titre du document.
  • L'élément <body> contient le contenu réel du document (paragraphes, liens, images, tableaux, etc.) qui est rendu dans le navigateur Web et affiché à l'utilisateur.

Vous en apprendrez plus sur les différents éléments HTML dans les prochains chapitres. Pour l'instant, concentrez-vous uniquement sur la structure de base du document HTML.

Une déclaration DOCTYPE apparaît en haut d'une page Web avant tous les autres éléments ; cependant la déclaration doctype elle-même n'est pas une balise HTML. Chaque document HTML nécessite une déclaration de type de document pour garantir que vos pages s'affichent correctement.

Conseil : Les balises <html>, <head>et <body> constituent le squelette de base de chaque page Web. Le contenu à l'intérieur de <head> et </head> est invisible pour les utilisateurs à une exception près : le texte entre les balises <title> et </title>qui apparaît comme titre dans un onglet du navigateur.

 

Balises et éléments HTML

HTML est écrit sous la forme d'éléments HTML constitués de balises de balisage. Ces balises de balisage sont la caractéristique fondamentale du HTML. Chaque balise de balisage est composée d'un mot-clé, entouré de crochets angulaires, tels que <html>, <head>, <body>, <title>, <p>, etc.

Les balises HTML viennent normalement par paires comme <html>et </html>. La première balise d'une paire est souvent appelée balise d'ouverture (ou balise de début), et la deuxième balise est appelée balise de fermeture (ou balise de fin).

Une balise ouvrante et une balise fermante sont identiques, à l'exception d'une barre oblique ( /) après le crochet angulaire ouvrant de la balise fermante, pour indiquer au navigateur que la commande est terminée.

Entre les balises de début et de fin, vous pouvez placer le contenu approprié. Par exemple, un paragraphe, qui est représenté par l'élément p, s'écrirait comme suit :

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

<p>

    Ceci est un <b>autre</b> paragraphe.

</p>

Vous découvrirez les différents éléments HTML dans le prochain chapitre.

 

Quiz

5 pts

Que signifie l'acronyme HTML ?

Introduction Les balises et éléments HTML