Le code HTML le plus simple :
<html>
<head>
<title>Mon premier code HTML</title>
</head>
<body>
<p>Bonjour à tous les autodidactes.</p>
</body>
</html>
Ouvrez votre éditeur de texte (NotePad, Bloc-notes, ou autre);
copiez le code ci-dessus, et collez le dans votre bloc-notes;
enregistrez le document avec l'extension .html, par exemple : "1.html";
ouvrez ce document avec votre navigateur (Internet Explorer, Safari, Firefox ou autre).
Vous venez de créer votre premiére page web! Voir le résultat ici.
"Mon premier code HTML" s'affiche dans la barre tout en haut de votre navigateur.
"Bonjour à tous les autodidactes." s'affiche dans la page web; tout ce qui touve entre les balises <body> et </body> constitue le corps de la page.
OK, et si on rajoutait une image :
<html>
<head>
<title>Mon premier code HTML</title>
</head>
<body>
<p>Bonjour à tous les autodidactes.</p>
<img src="drapeau_fr.gif" alt="surtout aux français" />
</body>
</html>
Prenez une image (peu importe laquelle) et copier la dans le même dossier que votre document HTML;
ouvrez votre éditeur de texte (NotePad, Bloc-notes, ou autre);
copiez le code ci-dessus, et collez le dans votre bloc-notes;
remplacez : "drapeau_fr.gif" par le nom de votre image;
enregistrez le document avec l'extension .html, par exemple : "2.html";
ouvrez ce document avec votre navigateur (Internet Explorer, Safari, Firefox ou autre).
Vous venez de créer votre premiére page web avec image! Voir le résultat ici.
"Bonjour à tous les autodidactes." s'affiche dans la page web au dessus de votre image; c'est normal, votre navigateur interpréte les lignes de code dans l'ordre que vous lui indiquez.
Reprenez votre code (2.html) et placez la ligne image avant la ligne de texte, enregistrez le comme "2_bis.html".
Vous obtenez alors ceci.
Et oui, vous avez deviné, l'image se trouve desormais avant le texte.
Et maintenat, un lien hypertexte (ou plutôt 2) :
<html>
<head>
<title>Mon premier code HTML</title>
</head>
<body>
<p>Bonjour à tous les <a href="1.html">autodidactes</a>.</p>
<a href="2.html"><img src="drapeau_fr.gif" /></a>
</body>
</html>
Copiez le code ci-dessus, et collez le dans votre bloc-notes;
enregistrez le document avec l'extension .html, par exemple : "3.html";
ouvrez ce document avec votre navigateur (Internet Explorer, Safari, Firefox ou autre).
Vous venez de créer votre premiér site web! Voir le résultat ici.
Vous remarquez que vous pouvaez clicker le texte ou l'image; et en fonction de votre choix vous êtes redirigé vers la page web (1.html pour le texte et 2.html pour l'image) associé au lien!
Et ben ça y est, quel autodidacte vous faites!
Il existe des balises pour tout (mise en forme, couleur, positionnement, bordure, police de texte, ...); mais vous venez de voir les principales, de plus vous venez de découvrir le fonctionnement d'une page web et d'un site web. En effet un site web est composé de pages web liées entre elle par des liens hypertextes.