Comment créer une page Web statique en HTML

Si une invention a complètement changé le monde de notre vivant, c'est Internet. De plus en plus de gens veulent une présence sur le Web au-delà des réseaux sociaux : ils veulent un espace Web à eux. Les grands sites deviennent de plus en plus complexes avec du jargon intimidant (Flash, CSS, Perl, JavaScript), mais pas de panique. Quatre lettres suffisent pour avoir une présence Web rapidement : HTML (HyperText Markup Language). Ce langage de balisage utilise une série de balises pour créer une page Web statique. Plus vous connaissez de balises, plus vous pouvez faire.

Étape 1 : Squelette de base

Créez le squelette de base d'une page statique en copiant ce code dans un éditeur de texte simple (Bloc-notes) :

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

Enregistrez le fichier sous index.html (nom par défaut de la page principale) et ouvrez-le dans votre navigateur. Vous verrez une page blanche car vous n'avez rien mis dans le corps.

Ces balises ont un sens : <html> dit au navigateur qu'une page Web arrive. <head> contient des infos pour les moteurs de recherche. <body> signifie que la partie visible va commencer.

Étape 2 : Balises d'ouverture et de fermeture

Voyez HTML comme deux types principaux de balises (code entre crochets). L'une dit au navigateur de commencer quelque chose, l'autre d'arrêter.

Rendre ce texte gras

Tout ce qui suit <strong> (balise d'ouverture) sera en gras jusqu'à </strong> (balise de fermeture). Le « / » dit au navigateur d'arrêter.

Étape 3 : Ajouter du texte et du style

Ajoutez du texte dans le corps de la page. Tapez « Ceci est ma page Web » entre <body> et </body>. Enregistrez et regardez dans le navigateur. C'est basique. Essayez d'autres balises : <strong> </strong> pour le gras ; <em> </em> pour l'italique ; <font size="5"> </font> pour la taille (1 à 6) ; <font color="red"> </font> pour la couleur ; <center> </center> pour centrer.

Vous pouvez combiner plusieurs balises sur le même texte.

Ajoutez de l'espace entre éléments avec : <p> pour saut de paragraphe ; <br> pour saut de ligne ; <hr> pour une ligne horizontale.

Étape 4 : Ajouter des images

Utilisez la balise <img src="URL_de_votre_image" /> et remplacez l'adresse Web par l'emplacement de votre image. C'est l'une des rares balises sans balise de fin. Les images peuvent aussi être centrées.

Étape 5 : Créer un lien

Utilisez <a href="URL">Cliquez ici</a>. Ce code fait de « Cliquez ici » un lien vers un autre site. Vous pouvez aussi utiliser une image comme lien : <a href="URL"><img src="image.jpg" /></a>.

Astuce

Avec ces codes HTML, vous pouvez créer des pages statiques de toute complexité.
Pensez aux balises HTML comme des boîtes dans des boîtes (poupées russes). C'est l'imbrication (nesting), qui garde tout propre et lisible. Exemple : texte entre <strong><em><center></center></em></strong> sera gras, italique et centré.