Comment créer une page Web simple avec HTML?

Une fois que vous avez créé votre page Web, vous pouvez l'enregistrer en tant que document HTML et l'afficher dans votre navigateur Web.

Ce guide vous apprend à écrire une page Web simple avec HTML (langage de balisage hypertexte). HTML est l'un des composants essentiels du World Wide Web, constituant la structure des pages Web. Une fois que vous avez créé votre page Web, vous pouvez l'enregistrer en tant que document HTML et l'afficher dans votre navigateur Web. La création d'une page HTML est possible à l'aide d'éditeurs de texte de base disponibles sur les ordinateurs Windows et Mac.

Partie 1 sur 5: ajouter une tête à votre html

1
Ouvrez un éditeur de texte. Sur un ordinateur exécutant le système d'exploitation Windows, vous utiliserez généralement le Bloc-notes ou le Bloc-notes ++ alors que les utilisateurs de macOS utiliseront TextEdit:
- Windows - Ouvrez Démarrer, tapez notepad, ou notepad++ et cliquez sur Bloc - notes ou «Bloc-notes ++ ou sublime» en haut de la fenêtre.
- macOS - Cliquez sur Spotlight, saisissez textedit et double-cliquez sur Textedit en haut des résultats.
2

Tapez <!doctype html> et appuyez sur ↵ enter. Cela indique au navigateur Web qu'il s'agit d'un document HTML.
3

Tapez <html> et appuyez sur ↵ enter. Cette balise d'ouverture pour votre code HTML.
4

Tapez <head> et appuyez sur ↵ enter. C'est la balise qui ouvre votre tête HTML. Les informations d'en-tête HTML qui ne sont généralement pas affichées sur votre page Web. Ces informations peuvent inclure le titre, les métadonnées, les feuilles de style CSS et d'autres langages de script.
5

Tapez <title>. C'est la balise pour ajouter un titre à votre page.
6

Tapez un titre pour votre page Web. Cela peut être n'importe quel titre que vous souhaitez nommer votre page Web.
7

Tapez </title> et appuyez sur ↵ enter. C'est la balise pour fermer votre balise de titre.
8
Tapez </head> et appuyez sur ↵ enter. C'est le tag pour fermer la tête. Votre code HTML devrait ressembler à ceci.
```
<!DOCTYPE html> <html> <head> <title>Ma page Web</title> </head> 
```

Partie 2 sur 5: ajouter un corps et du texte à votre html

1

Tapez en <body> dessous de la balise "head" fermée. Cette balise ouvre le corps de votre document HTML. Tout ce qui se trouve dans le corps HTML s'affiche sur la page Web.
2

Tapez <h1>. C'est la balise pour ajouter un titre à votre document HTML. Un titre est un gros texte en gras qui se place généralement en haut de votre document HTML.
3

Tapez un titre pour votre page. Cela peut être le titre de votre page ou un message d'accueil.
4
Tapez </h1> après le texte de votre titre et appuyez sur ↵ enter. Cette balise ferme votre titre.
- Ajoutez des titres supplémentaires au fur et à mesure. Vous pouvez créer six en-têtes différents à l'aide des balises <h1></h1> through <h6></h6>. Ceux-ci créent des titres de différentes tailles. Par exemple, pour créer successivement trois titres de tailles différentes, vous pouvez écrire ce qui suit:
  <h1>Bienvenue sur ma page!</h1> <h2>Je m'appelle Bob.</h2> <h3>J'espère que vous l'aimerez ici.</h3>
- Les titres indiquent la priorité ou l'importance du texte. Mais il n'est pas nécessaire d'utiliser un titre supérieur si vous souhaitez utiliser un titre inférieur. On peut directement utiliser H3, même s'il n'y a pas de H1 dans votre post.
5

Tapez <p>. C'est la balise pour ouvrir un paragraphe. Le texte de paragraphe est utilisé pour afficher du texte de taille normale.
6

Tapez du texte. Il peut s'agir d'une description de votre page Web ou de toute autre information que vous souhaitez partager.
7
Tapez </p> après votre texte et appuyez sur ↵ enter. C'est la balise pour fermer le texte de votre paragraphe. Voici un exemple de texte de paragraphe en HTML:
```
<p>Ceci est mon paragraphe.</p> 
```
- Vous pouvez ajouter plusieurs lignes de paragraphe à la suite afin de créer une série de paragraphes sous un même titre.
- Vous pouvez changer la couleur de n'importe quel texte en encadrant le texte avec les balises <font color="color"> et </font>. Assurez-vous de taper votre couleur préférée dans la section "couleur" (vous garderez les guillemets). Vous pouvez transformer n'importe quel texte (par exemple, les en-têtes) dans une couleur différente avec cet ensemble de balises. Par exemple, pour rendre le texte d'un paragraphe bleu, vous écririez le code suivant:<p><font color="blue">Whales are majestic creatures.</font></p>
- Vous pouvez ajouter des gras, des italiques et d'autres formats de texte à l'aide de HTML. Voici des exemples de mise en forme de texte à l'aide de balises HTML:
  <b>Texte en gras</b> <i>Texte en italique</i> <u>Texte souligné</u> <sub>Texte en indice</sub> <sup>Texte en exposant</sup>
- Si vous utilisez du texte en gras et en italique pour mettre l'accent, pas seulement pour le style, utilisez les éléments <strong> et <em> au lieu de <b> et <i>. Cela rend votre page Web plus facile à comprendre lorsque vous utilisez des technologies comme un lecteur d'écran ou le mode lecteur fourni dans certains navigateurs.

Comment lier une page HTML à une autre page HTML?

Partie 3 sur 5: ajouter des éléments supplémentaires à votre html

1
Ajoutez une image à votre page. Vous pouvez ajouter une image à votre code HTML en procédant comme suit:
- Tapez <img src= pour ouvrir votre balise d'image.
- Copiez et collez l'URL de l'image après le signe "=" entre guillemets.
- Tapez > après l'URL de l'image pour fermer votre balise d'image. Par exemple, si l'URL de l'image est "http://mypicture.com/lake", vous devez écrire ce qui suit:
  <img src="http://mypicture.com/lake.jpg">
2
Lien vers une autre page. Vous pouvez ajouter un lien vers votre code HTML en procédant comme suit:
- Tapez <a href= pour ouvrir votre balise de lien.
- Copiez et collez l'URL après le signe "=" entre guillemets.
- Tapez > après l'URL pour fermer la partie lien du code HTML.
- Tapez un nom pour le lien après le crochet fermant.
- Tapez </a> après le nom du lien pour fermer le lien HTML. Voici un exemple de lien vers Facebook.
  <a href="https://facebook.com">Facebook</a>.
3

Ajoutez un saut de ligne à votre code HTML. Vous pouvez ajouter un saut de ligne en tapant <br> votre code HTML. Cela crée une ligne horizontale qui peut être utilisée pour diviser différentes sections de votre page.

Lisez aussi: Comment modifier les commentaires sur Facebook?

Partie 4 sur 5: fermeture de votre document HTML

1

Tapez </body> pour fermer votre corps. Après avoir terminé d'ajouter tout votre texte, images et autres éléments au corps de votre document HTML, ajoutez cette balise au bas de votre document HTML pour fermer le corps de votre document HTML.

2

Tapez </html> pour fermer votre document HTML. Cette balise passe sous la balise pour fermer votre corps HTML à la fin de votre document HTML. Cela indique au navigateur Web qu'il n'y a plus de code HTML après cette balise. L'ensemble de votre document HTML devrait ressembler à ceci:

<!DOCTYPE html> <html> <head> <title>guide Fan Page</title> </head> <body> <h1>Bienvenue sur ma page!</h1> <p>Ceci est une fan page pour guide. Faites comme chez vous!</p> <h2>Dates importantes</h2> <p><i>15 janvier 2019</i> - anniversaire du guide</p> <h2>Liens</h2> <p> Voici un lien pour vous guider: <a href="http://google.com">guide</a></p> </body> </html>

Partie 5 sur 5: enregistrer et ouvrir votre page Web

1

Convertissez votre document en texte brut (utilisateurs mac uniquement). Cliquez sur l' élément de menu Format en haut de l'écran, puis cliquez sur Créer du texte brut dans le menu déroulant résultant.
2

Cliquez sur Fichier. C'est dans la barre de menu en haut de l'écran.
3
Cliquez sur Enregistrer sous. C'est dans le menu déroulant sous "Fichier".
- Alternativement, vous pouvez appuyer sur Ctrl+ S(Windows) ou ⌘ Command+ S(Mac) pour le faire.
- Cette étape n'est ni nécessaire ni possible sous Windows.
4

Saisissez un nom pour votre document HTML. Tapez le nom que vous voulez pour votre document dans la zone de texte "Nom de fichier" (Windows) ou "Nom" (Mac).
5
Modifiez le type de fichier du document. Vous devrez changer le document d'un fichier texte en un fichier HTML. Utilisez les étapes suivantes pour modifier le type de fichier:
- Windows - Cliquez sur la liste déroulante «Type de fichier», cliquez sur Tous les fichiers, puis saisissez .html à la fin du nom du fichier.
- Mac - Remplacez le .txt à la fin du nom du fichier par à la .html place.
6
Cliquez sur Enregistrer. C'est en bas de la fenêtre. Cela créera un fichier HTML.
- Les fichiers HTML s'ouvrent généralement avec votre navigateur Web par défaut.
7

Fermez votre éditeur de texte. À ce stade, vous êtes prêt à ouvrir votre fichier HTML dans votre navigateur afin de pouvoir afficher votre page Web.
8
Ouvrez le document HTML avec votre navigateur. Dans la plupart des cas, vous pourrez double-cliquer sur le document HTML pour ce faire. Si un double-clic sur le document génère une erreur, procédez comme suit:
- Windows - Cliquez avec le bouton droit sur le document, sélectionnez Ouvrir avec et cliquez sur votre navigateur préféré.
- Mac - Cliquez une fois sur le document, cliquez sur Fichier, sélectionnez Ouvrir avec, puis cliquez sur votre navigateur préféré.
9
Modifiez le document HTML si nécessaire. Vous remarquerez peut-être une erreur dans votre page HTML. Pour le modifier, vous pouvez modifier le texte du document HTML:
- Sous Windows, vous pouvez cliquer avec le bouton droit sur le document et cliquer sur Modifier dans le menu déroulant résultant (si vous avez installé Notepad ++, cela indiquera Modifier avec notepad ++ à la place).
- Sur Mac, vous voudrez cliquer sur le document pour le sélectionner, cliquez sur Fichier, sélectionnez Ouvrir avec, puis cliquez sur Textedit. Vous pouvez également faire glisser le document dans TextEdit.

Ce guide vous apprend à écrire une page Web simple avec HTML (langage de balisage hypertexte).

Conseils

Les balises doivent toujours être fermées dans une image miroir de leurs homologues ouverts. Par exemple, <tag1><tag2>devrait être fermé en tant que </tag2></tag1>.
Vous pouvez ajouter du texte à défilement latéral à votre site Web à l'aide de la <marquee></marquee>balise, mais gardez à l'esprit que cette balise peut ne pas être reconnue par certains navigateurs.
De nombreuses personnes utilisent Notepad++ pour écrire et compiler leur code.
Si vous souhaitez centrer une image dans votre page, vous pouvez taper <class="center">après le nom de l'image dans la balise img (par exemple, <img src="" class="center">).

Mises en garde

Il est préférable d'héberger vos propres images sur Imgur ou similaire si vous envisagez de télécharger des images sur votre page Web. La publication des photos d'autres personnes peut entraîner une violation du droit d'auteur.