Ce guide vous apprendra à créer une page web simple en HTML (en anglais pour « hypertext markup language »). HTML est l'un des composants fondamentaux d'Internet, étant essentiellement la structure de nombreuses pages virtuelles. Une fois créé, vous pouvez l'enregistrer en tant que document HTML et le visualiser dans votre navigateur. La création d'une page HTML est possible à l'aide de simples éditeurs de texte disponibles à la fois sous Windows et macOS.
Pas
Méthode 1 sur 6: Ajout de l'en-tête
Étape 1. Ouvrez un éditeur de texte
Sur un ordinateur Windows, vous pouvez généralement utiliser le Bloc-notes ou le Bloc-notes ++, tandis que sur macOS, TextEdit sera le choix le plus courant:
- Windows: cliquez sur Début
Windowsstart , taper Bloc-notes ou bloc-notes++ et cliquez sur Bloc-notes, Bloc-notes++, Sublime ou similaire.
- macOS: cliquez sur projecteur
Spotlight , taper éditeur de texte puis cliquez sur Éditeur de texte en tête des résultats.
Étape 2. Tapez et appuyez sur ↵ Entrée
Cela indique au navigateur qu'il s'agit d'un document HTML.
Étape 3. Tapez et appuyez sur ↵ Entrée
Il s'agit de la balise d'ouverture de votre code HTML.
Étape 4. Tapez et appuyez sur ↵ Entrée
C'est la balise qui ouvre votre en-tête HTML. Les informations ici ne sont généralement pas visibles sur la page finale et peuvent inclure le titre, les métadonnées, les feuilles de style CSS et d'autres langages de script.
Étape 5. Tapez
Il s'agit de la balise indiquant le titre de la page.
Étape 6. Entrez un titre pour votre page
Soyez aussi créatif que vous le souhaitez lorsque vous nommez votre page.
Étape 7. Tapez et appuyez sur ↵ Entrée
C'est la balise responsable de la fermeture de l'espace de titre.
Étape 8. Tapez et appuyez sur ↵ Entrée
Cette balise ferme l'espace d'en-tête. Le code HTML sera maintenant à côté de ceci:
Ma page
Méthode 2 sur 6: Ajout de corps et de texte
Étape 1. Tapez sous la balise d'en-tête
Elle est chargée d'ouvrir le corps du document. Tout ce qui est entré ici sera visible sur la dernière page.
Étape 2. Tapez
C'est la balise responsable de l'insertion d'un en-tête dans le document HTML. Il s'agit d'un gros texte en gras qui apparaît généralement en haut de la page.
Étape 3. Saisissez un en-tête pour la page
Il peut s'agir d'un titre ou d'un message d'accueil.
Étape 4. Tapez
après le texte dans l'en-tête et appuyez sur Entrez.
Cette balise sert de fermeture.
- Ajoutez des en-têtes supplémentaires si nécessaire. Il existe six options différentes à créer à l'aide des balises a. Ils servent à créer des en-têtes de différentes tailles. Pour en créer trois de tailles différentes et successives, par exemple, vous pouvez taper:
Bienvenue sur ma page
Je m'appelle Roberto
J'espère que vous l'aimez ici
- Les titres démontrent la priorité ou l'importance du texte. Néanmoins, il n'est pas nécessaire d'utiliser un en-tête supérieur si vous ne souhaitez pas utiliser les paliers inférieurs. En d'autres termes, il est possible d'ajouter un directement même s'il n'y a pas dans ton code.
Étape 5. Chiffre
C'est la balise responsable de l'ouverture d'un paragraphe. Le texte qu'il contient sera affiché en taille normale.
Étape 6. Entrez du texte
Il peut s'agir de la description de votre page ou de toute autre information que vous souhaitez partager.
Étape 7. Tapez
après le texte et appuyez sur Entrez.
Il s'agit de la balise de fin de paragraphe. Voici un exemple de texte dans un paragraphe HTML:
Ceci est mon paragraphe.
- Vous pouvez insérer plusieurs lignes de paragraphe d'affilée pour créer plusieurs paragraphes sous le même titre.
-
Vous pouvez changer la couleur de n'importe quel texte en le plaçant entre les balises et. N'oubliez pas de taper le nom de la couleur que vous préférez dans la section "couleur" (en anglais et en gardant les guillemets). Vous pouvez laisser n'importe quel texte (comme les en-têtes) dans une couleur différente avec ces balises. Pour le rendre bleu, il suffit d'écrire:
Les baleines sont des créatures fascinantes.
. - Vous pouvez également utiliser le gras, l'italique et d'autres formats en HTML. Voici quelques exemples de mise en forme de texte avec des balises HTML:
texte en gras Texte en italique texte souligné Texte souscrit texte en exposant
- Si vous souhaitez utiliser les caractères gras et italiques comme forme d'emphase, en plus du style, utilisez les éléments et à la place de et. Cela facilite la compréhension de la page grâce à des technologies telles qu'un lecteur numérique ou le mode de lecture proposé par certains navigateurs.
Méthode 3 sur 6: Ajout d'éléments supplémentaires au code
Étape 1. Insérez une image sur la page
Il est possible d'ajouter une image au code HTML en suivant les étapes suivantes:
- taper <img src=" pour ouvrir la balise.
- Copiez et collez le lien de l'image après le signe égal entre guillemets.
- taper > après le lien pour fermer la balise. S'il s'agit de "http://www.minhafoto.com.br/lago", par exemple, tapez simplement:
Image >
Étape 2. Créez un lien vers une autre page
Vous pouvez l'insérer dans le code en suivant les étapes suivantes:
- taper <a href= pour ouvrir la balise.
- Copiez et collez le lien après le signe égal entre guillemets.
- taper > après le lien pour fermer cette partie du code.
- Entrez un nom pour le lien après la fermeture.
- Tapez après le nom du lien pour fermer la balise HTML. Voici un exemple de lien vers Facebook:
Facebook
Étape 3. Insérez un saut de ligne dans le code
Vous pouvez l'ajouter en tapant
. Il s'agit de créer une ligne horizontale utilisée pour diviser différentes sections de la page.
Méthode 4 sur 6: Personnalisation des couleurs
Étape 1. Vérifiez les noms HTML officiels et les codes de couleur
Le World Wide Web Consortium (W3C) gère une liste de couleurs officielle qui peut être trouvée à l'adresse https://www.w3.org/wiki/CSS/Properties/color/keywords. Chacun d'eux a un nom officiel, un code hexadécimal à six chiffres et une valeur décimale. Vous pouvez utiliser n'importe lequel d'entre eux pour colorer les éléments de votre page. Dans l'exemple, les noms anglais officiels seront utilisés.
Étape 2. Définissez la couleur d'arrière-plan sur la balise
Pour cela, vous allez ajouter l'attribut style. Supposons que la couleur à utiliser soit lavande ("lavande"):
Étape 3. Définissez la couleur du texte dans n'importe quelle balise
Vous pouvez également utiliser l'attribut style pour spécifier la couleur à utiliser dans une balise spécifique. Imaginez, par exemple, que vous vouliez l'utiliser dans une de vos balises
la couleur bleu nuit ("bleu nuit").
-
Cette variation n'affectera que le texte qui se trouve à l'intérieur de la balise.
. Lors du démarrage d'une nouvelle balise
qui doit aussi avoir cette teinte, vous devrez définir ce style de la même manière.
Étape 4. Définissez la couleur d'arrière-plan d'un en-tête ou d'un paragraphe
Tout comme lorsque la couleur de fond a été définie dans la balise, il est également possible de définir les couleurs de fond dans d'autres balises. Imaginez que vous vouliez marquer
une couleur gris clair ("gris clair") et dans un en-tête la couleur bleu ciel clair ("bleu ciel clair"):
Méthode 5 sur 6: Fermeture du document HTML
Étape 1. Tapez pour fermer le corps
Une fois que vous avez terminé d'ajouter du texte, des images et d'autres éléments au corps du document HTML, ajoutez cette balise en bas pour le fermer.
Étape 2. Tapez pour terminer le document HTML
Cette balise passe en dessous de celle chargée de remplir l'intégralité du document, une fois terminé. Il indique au navigateur qu'il n'y aura plus de code HTML à venir. L'ensemble du document sera à côté de l'exemple:
wikiHow Fanpage Bienvenue sur ma page
Ceci est une page de fans de wikiHow. Fais comme chez toi!
Rendez-vous importants
15 janvier 2019 - anniversaire de wikiHow
Liens
Voici un lien vers wikiHow: wikiHow
Méthode 6 sur 6: Enregistrer et ouvrir votre page
Étape 1. Convertissez le document en texte brut (utilisateurs de MacOS uniquement)
cliquez sur le menu Format en haut de l'écran puis dans Convertir en texte brut dans le menu déroulant.
Cette étape n'est ni nécessaire ni possible sous Windows
Étape 2. Cliquez sur Fichier
Cette option se trouve dans la barre de menu en haut de l'écran.
Étape 3. Cliquez sur Enregistrer sous… dans le menu déroulant nouvellement ouvert
- Sinon, vous pouvez également appuyer sur Ctrl+S sous Windows ou Commande+S sur macOS.
Étape 4. Saisissez un nom pour votre document HTML
Utilisez le nom que vous souhaitez étiqueter le document dans la zone de texte "Nom", sous Windows ou macOS.
Étape 5. Modifiez le format de fichier
Il faudra changer le document d'un fichier texte pour qu'il devienne un fichier HTML en suivant les étapes suivantes:
- Windows: cliquez sur la case d'option « Type: », cliquez sur « Tous les fichiers » et tapez .html à la fin du nom de fichier.
- macOS: remplacer . SMS à la fin du nom de fichier par .html.
Étape 6. Cliquez sur Enregistrer
Le bouton est situé en bas de la fenêtre. Cela créera un fichier HTML.
Les fichiers HTML sont généralement ouverts avec votre navigateur par défaut
Étape 7. Fermez l'éditeur de texte
À ce stade, vous êtes prêt à ouvrir le fichier HTML dans votre navigateur pour l'afficher sous forme de page virtuelle.
Étape 8. Ouvrez le document HTML dans le navigateur
Dans la plupart des cas, un double-clic sur le document HTML le fera. Si cela génère une erreur, procédez comme suit:
- Windows: clic droit sur le fichier, sélectionnez Ouvrir avec et choisissez le navigateur de votre choix.
- macOS: cliquez une fois sur le document, dans Déposer, sélectionnez Ouvrir avec et choisissez le navigateur de votre choix.
Étape 9. Modifiez le document HTML selon vos besoins
Vous pouvez rencontrer des erreurs présentes sur la page. Pour le changer, il suffit de modifier le texte dans le code.
- Sous Windows, cliquez simplement sur le document et cliquez sur Éditer dans le menu déroulant (ou dans Éditer avec le Bloc-notes++ si vous utilisez ce programme).
- Sous macOS, cliquez simplement sur le document pour le sélectionner, cliquez sur Déposer, Ouvrir avec est sur Éditeur de texte. Vous pouvez également simplement faire glisser le fichier sur l'icône du programme.
Des astuces
- Les balises doivent toujours être fermées afin de refléter leurs homologues. Par exemple, ils doivent être fermés avec.
- Vous pouvez ajouter du texte défilant à l'aide de la balise, mais gardez à l'esprit qu'il peut ne pas être reconnu par certains navigateurs.
- De nombreuses personnes choisissent Notepad++ pour écrire et compiler leur code.
- Si vous souhaitez centrer une image présente sur la page, vous pouvez taper après le nom du fichier dans la balise img (par exemple,).