Comment écrire une page HTML?
Pour tout document HTML que vous créez, vous commencerez le document avec une balise "type de document" (), une balise HTML () et une balise BODY ().
Ce guide vous apprend à créer une page Web en utilisant HTML. Certains éléments de votre page Web peuvent inclure du texte, des liens et des images.
Partie 1 sur 7: se préparer à écrire
- 1Ouvrez un simple éditeur de texte. Sur les ordinateurs Windows, l'éditeur de texte simple par défaut est le Bloc-notes, tandis que les utilisateurs Mac ont un programme appelé TextEdit:
- Windows - Cliquez sur Démarrer, saisissez notepad et cliquez sur Bloc-notes.
- Mac - Cliquez sur Spotlight, tapez textedit, puis cliquez sur TextEdit dans les résultats.
- 2Comprendre les balises HTML. Lors de l'écriture en HTML, les différents éléments de la page sont indiqués par des balises ouvertes (<>) et des balises fermées (</>), le texte d'un élément s'insérant entre les balises.
- Par exemple, un paragraphe est créé en saisissant la balise de paragraphe ouvert (<p>), en saisissant le texte que vous souhaitez utiliser, puis en saisissant une balise de paragraphe fermé </p>.
- Chaque ligne de code doit aller sur sa propre ligne, vous devrez donc normalement appuyer sur ↵ Enteraprès avoir écrit une ligne de code.
- 3Passez en revue le format HTML de base. Pour tout document HTML que vous créez, vous commencerez le document avec une balise "type de document" (<!DOCTYPE html>), une balise HTML (<html>) et une balise BODY (<body>). Vous terminerez également le document par une balise BODY fermée, puis une balise HTML fermée. Par example:
<!DOCTYPE html><html><body></body></html>
- 4Envisagez de vous renseigner sur les css. CSS est un langage qui agit comme un complément au HTML; il couvre le formatage de la page (par exemple, les couleurs, le texte centré, etc.) et d'autres aspects visuels de la page Web.
Partie 2 sur 7: créer une page de texte
- 1Configurez le document. Ajoutez le texte HTML initial de votre document:
<!DOCTYPE html><html><body>
- 2Créez le titre de votre page Web. Ceci est également connu sous le nom de "tête" et définit le texte qui apparaît sur l'onglet du navigateur. Pour ce faire, ajoutez le texte suivant à votre document, en veillant à remplacer «Votre titre» par votre texte préféré:
<head><title>Your Title</title></head>
- 3Ajoutez un en-tête. Tapez <h1>Text</h1> et appuyez sur ↵ Enter. Vous pouvez placer n'importe quel texte que vous souhaitez utiliser entre les balises
<h1>et</h1>.- Les en-têtes peuvent être empilés sur toute la page. Pour chaque en-tête que vous utilisez après le premier, augmentez simplement le nombre (par exemple, pour le deuxième en-tête, utilisez
<h2></h2>).
- Les en-têtes peuvent être empilés sur toute la page. Pour chaque en-tête que vous utilisez après le premier, augmentez simplement le nombre (par exemple, pour le deuxième en-tête, utilisez
- 4Créez un paragraphe. Tapez <p>Text</p> et appuyez sur ↵ Enter, en veillant à remplacer "Texte" par le texte de votre paragraphe.
- Vous pouvez placer chaque ligne de texte sur une nouvelle ligne en répétant les
<p></p>balises pour chaque ligne de texte.
- Vous pouvez placer chaque ligne de texte sur une nouvelle ligne en répétant les
- 5Répétez le processus d'en-tête et de paragraphe. Vous pouvez ajouter autant d'en-têtes et de paragraphes à votre page Web que vous le souhaitez.
- 6Ajoutez des pauses dans votre page. Tapez <br>Text</br> et appuyez sur ↵ Enter. Cela créera des espaces entre vos paragraphes si vous souhaitez espacer différentes parties.
- 7Mettez en forme le texte de vos paragraphes. Vous pouvez utiliser différentes balises à l'intérieur des
<p></p>balises (par exemple,<p><em></em></p>) pour indiquer la mise en forme:<em>text</em>- Crée du texte en italique.<strong>text</strong>- Crée du texte en gras.<ins>text</ins>- Crée du texte souligné.<del>text</del>- Crée du texte avec une ligne à travers elle.<small>text</small>- Crée un petit texte.<! - -text - ->- Crée du texte invisible. Utilisé pour ajouter des notes à votre page Web.
- 8Fermez les balises BODY et HTML de votre document. Lorsque vous avez terminé d'ajouter du texte, saisissez </body> et appuyez sur ↵ Enter, puis saisissez </html> pour fermer le document. Maintenant que votre page de texte est techniquement terminée, vous pouvez y ajouter d'autres éléments tels que des liens, des puces et des images.
Vous terminerez également le document par une balise BODY fermée, puis une balise HTML fermée.
Partie 3 sur 7: ajouter des liens
- 1Trouvez un endroit dans votre page Web pour ajouter un lien. Si vous souhaitez ajouter un lien vers une page Web au milieu d'un paragraphe, par exemple, vous accédez à ce paragraphe et recherchez le mot ou la phrase que vous souhaitez utiliser comme lien.
- 2Copiez l'URL du site Web. Accédez au site Web vers lequel vous souhaitez créer un lien, puis sélectionnez son adresse dans la barre située en haut de la fenêtre et appuyez sur Ctrl+ C(Windows) ou ⌘ Command+ C(Mac).
- 3Saisissez une balise de lien ouvert. Tapez <a href=> dans l'espace juste avant le mot ou la phrase que vous souhaitez utiliser comme lien.
- 4Collez l'URL du site Web. Cliquez entre le
href=et>puis appuyez sur Ctrl+ V(Windows) ou ⌘ Command+ V(Mac). Vous devriez voir le lien apparaître à droite duhref=texte.- Par exemple, si vous créez un lien vers YouTube, vous verrez
<a href=https://youtube.com/>ici.
- Par exemple, si vous créez un lien vers YouTube, vous verrez
- 5Ajoutez la balise de lien fermé. De l'autre côté du texte que vous souhaitez utiliser comme lien, tapez </a>. Par exemple, dans une ligne qui dit «Suivez-moi sur Twitter» où vous créez un lien vers Twitter et utilisez «sur Twitter» comme lien, votre code ressemblerait à ce qui suit:
<a href=https://twitter.com/>on Twitter</a>
- 6Ajoutez une étiquette d'identification. Les balises d'identification vous permettent de lier un morceau de texte à une autre section dans un paragraphe différent sur la même page. Faire cela:
- Remplacez la
<p>balise par<p id=text> - Recherchez le texte que vous souhaitez utiliser comme lien.
- Tapez <a href=#text> avant le texte. Assurez-vous que le texte après "#" correspond au texte après "id=" ici.
- Tapez </a> après le texte.
- Remplacez la
Partie 4 sur 7: ajouter des puces
- 1Trouvez un endroit où ajouter des puces. Les puces sont les mieux adaptées pour répertorier des informations ou créer des étapes organisées. Une fois que vous avez trouvé un paragraphe sous lequel vous souhaitez ajouter des puces, continuez.
- 2Ajoutez un saut de page. Au-dessus de l'endroit où vous souhaitez placer votre liste à puces, tapez <br> et appuyez sur ↵ Enter.
- 3Créez la première puce. Tapez <li>text</li> et appuyez sur ↵ Enter, en veillant à remplacer "texte" par le texte de votre puce.
- 4Ajoutez plus de puces. Tant que vous utilisez les
<li></li>balises autour des lignes de texte, le texte entre les balises sera formaté sous forme de puce. - 5Créez un sous-point. Tapez <ul>text</ul> et appuyez sur ↵ Enter. Votre texte apparaîtra en retrait sous la puce précédente.
- Le texte avec les
<ul></ul>balises n'aura pas de puce avant.
- Le texte avec les
- 6Fermez votre saut de page. Si vous avez choisi d'utiliser un saut de page plus tôt, saisissez </br> et appuyez sur ↵ Enter. Votre liste à puces sera seule sur la page.
CSS est un langage qui agit comme un complément au HTML; il couvre le formatage de la page (par exemple, les couleurs, le texte centré, etc.) et d'autres aspects visuels de la page Web.
Partie 5 sur 7: ajouter des images
- 1Trouvez un endroit pour insérer une image. L'image apparaîtra sur la page Web partout où vous insérez le code de l'image.
- 2Créez la balise d'image. Pour ce faire, saisissez
<imgmais n'appuyez pas sur ↵ Enter. Étant donné que la balise "image" est une balise complète en soi, elle n'a pas besoin de balise de fermeture. - 3Ajoutez la balise "source". Tapez src= après la
<imgbalise, en veillant à placer un espace entre "img" et "src". - 4Saisissez l'adresse d'une image. Copiez l'URL de l'image que vous souhaitez ajouter, puis collez-la à droite de la balise source.
- 5Ajoutez la balise "style". Tapez style=, puis tapez width:px;height:px.
- 6Entrez les dimensions de l'image. Saisissez la largeur de l'image en pixels après «largeur:», puis saisissez la hauteur de l'image en pixels après «hauteur:».
- 7Entrez la description alternative. C'est le texte qui s'affiche si l'image ne se charge pas. Pour ce faire, saisissez alt= puis saisissez la description.
- 8Fermez la balise d'image. Pour ce faire, placez un > crochet après le dernier caractère de la description alternative.
- 9Vérifiez le code de votre image. Il doit ressembler à ce qui suit:
<img src=https://w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
Lisez aussi: Comment activer les cookies dans Safari?
Partie 6 sur 7: enregistrer le document sous Windows
- 1Cliquez sur Fichier. C'est dans le coin supérieur gauche de la fenêtre du Bloc-notes. Un menu déroulant apparaîtra.
- 2Cliquez sur Enregistrer sous.... Vous le trouverez en haut du menu déroulant Fichier.
- 3Sélectionnez un emplacement de sauvegarde. Cliquez sur un dossier sur le côté gauche de la fenêtre (par exemple, Bureau).
- 4Saisissez un nom HTML pour votre fichier. Tapez le nom que vous souhaitez utiliser pour le fichier suivi de .html dans le champ de texte "Nom du fichier".
- Pour un fichier nommé "meow", par exemple, vous entreriez meow.html ici.
- 5Cliquez sur la liste déroulante «enregistrer sous le type». Un menu déroulant apparaîtra.
- 6Cliquez sur Tous les fichiers. C'est dans le menu déroulant.
- 7Cliquez sur Enregistrer. Vous le verrez dans le coin inférieur droit de la fenêtre. Cela enregistre votre fichier texte en tant que page HTML.
- Vous pouvez ouvrir le fichier de page HTML dans la plupart des navigateurs en cliquant et en faisant glisser le fichier dans une fenêtre de navigateur ouverte.
Lors de l'écriture en HTML, différents éléments de la page sont indiqués par des balises ouvertes () et des balises fermées (), le texte d'un élément s'insérant entre les balises.
Partie 7 sur 7: enregistrer le document sur mac
- 1Cliquez sur Modifier le texte. C'est dans le coin supérieur gauche de l'écran. Un menu déroulant apparaîtra.
- 2Cliquez sur Préférences.... Vous le trouverez en haut du menu déroulant. La fenêtre Préférences s'ouvrira.
- 3Cliquez sur l' onglet Ouvrir et enregistrer. C'est en haut de la page.
- 4Décochez la case "ajouter l'extension ".txt" aux fichiers en texte brut". C'est sous l'en-tête "Lors de l'enregistrement d'un fichier".
- 5Fermez la fenêtre des préférences. Cliquez sur le cercle rouge dans le coin supérieur gauche de la fenêtre pour le faire.
- 6Cliquez sur Formater. C'est un élément de menu en haut de l'écran.
- 7Cliquez sur Créer du texte brut. Cette option se trouve dans le menu déroulant.
- 8Cliquez sur Fichier. C'est dans le coin supérieur gauche de l'écran.
- 9Cliquez sur Enregistrer. C'est près du haut du menu déroulant.
- 10Saisissez un nom HTML pour votre fichier. Remplacez le nom dans le champ de texte "Enregistrer sous" par le nom de votre choix suivi de .html.
- Par exemple, pour un document nommé "mon_site Web", vous devez saisir my_website.html ici.
- 11Cliquez sur Enregistrer. Votre document HTML sera enregistré dans votre emplacement de sauvegarde par défaut (par exemple, Desktop).
- Vous pouvez ouvrir le fichier de page HTML dans la plupart des navigateurs en cliquant et en faisant glisser le fichier dans une fenêtre de navigateur ouverte.
- L'utilisation d'un éditeur de code dédié comme Notepad ++ rendra la saisie en HTML beaucoup plus facile et plus intuitive que d'utiliser Notepad ou TextEdit.
- Vérifiez toujours votre code avant de le télécharger sur un site en ligne.
Questions et réponses
- Puis-je coder du HTML sur un appareil Android?Oui, vous pouvez mais pour cela, vous devez installer un éditeur de texte (au format.apk).
- Comment puis-je écrire des balises HTML en HTML?Vous pouvez écrire des balises HTML entre crochets angulaires et en majuscules. Si vous souhaitez écrire une balise HTML de fin, placez une barre oblique entre les crochets angulaires et écrivez la balise après cela.
- Comment puis-je utiliser la couleur d'arrière-plan des balises ou la couleur du texte?Vous ne pouvez pas le faire avec HTML. Vous devez utiliser CSS, un langage pour lequel vous pouvez trouver de nombreux tutoriels sur ce site.
- y a-t-il deux méthodes d'écriture HTML?Il n'y a qu'une seule méthode, malheureusement. Vous pensez peut-être au CSS, mais c'est un langage différent, et non HTML.
- Comment télécharger du code HTML sur un site Web public?Connectez-vous à la CLI de la page Web, initialisez votre service d'hébergement et déployez-le là-bas.
Questions sans réponse
- Comment télécharger ma page HTML?
- Comment télécharger des éléments sur ma page HTML?
- Comment coder du HTML sur mon appareil Android?
Les commentaires (2)
- Génial, 5 étoiles.
- C'était génial, et merci d'avoir fourni un exemple.
