ARTICLES

Réaliser sa 1ère page HTML

Publié le 13/07/2009

Pour réaliser votre 1ère page HTML, il suffit de créer un document et de lui donner l'extension .html. La page d'accueil du site est par défaut index.html. Une fois créé, ouvrez le fichier à l'aide d'un éditeur de texte tel que le bloc note, bien qu'un éditeur de texte à coloration syntaxique soit préférable.

Voici maintenant comment définir toute page HTML:

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

Les balises <strong><html></html></strong> indiquent au navigateur qu'il doit afficher une page en html, l'essentiel de votre code sera entre ces balises. Les balises <strong><head></head></strong> correspondent à l'en-tête de votre page: on y indiquera notamment le titre de la page et les meta (nécessaires au référencement). Comme vous pouvez le deviner, les balises <strong><title></title></strong> concernent le titre de la page qui apparaîtra en haut de la fenêtre de votre navigateur. N'oubliez pas de refermer les balises pour que le navigateur comprenne bien ce qu'il doit afficher.

L'arborescence d'un site

Pour profiter de l'arborescence que vous obtiendrez en mettant votre site en ligne, il vous faut mettre un place un serveur HTTP: le plus couramment utilisé étant Apache. La page d'accueil de votre site s'obtiendra alors en tapant simplement le nom de domaine (NDD) de votre site. La structure de votre site nécessitera sûrement l'utilisation de répertoires. Voici un exemple de structure de site:

/index.html
/stylesheet.css
/image/
/categorie/

On retrouve évidemment la page d'accueil index.html, une feuille de style stylesheet.css, CSS qui fera l'objet d'un prochain article, ainsi que des répertoires de façon à organiser au mieux les fichiers. Attention à ne pas utiliser d'accents, caractères spéciaux ou espaces pour le nom de vos fichiers et répertoires: vous risqueriez d'avoir des problèmes d'encodage. Remplacez les espaces par un - ou _ .

Nous allons donc réaliser une 1ère page HTML qui affichera "Hello World!" :

<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
< page précédente page suivante >