Création de la première page web

La création d’un site internet pour son usage personnel est simple, il faut cependant inclure dans sa page internet un minimum d’informations pour cette page soit facilement lisible pour les navigateurs utilisés sur le net. Il existe des standards qui permettre de faciliter cette comunication.

Votre serveur web a été créé et il est fonctionnel (voir L’installation d’un serveur web). Maintenant nous allons voir comment créer une page internet. Je parlerai ici la création via un éditeur de texte, pour Linux, nano suffit et pour windows, un bloc est suffisant, mais notepad++ est encore le mieux. Il n’y a pas d’assistant dans l’écriture du code mais ce qui est important est de comprendre ce que l’on fait.

Faire sa première page internet en html

Pour faire sa première page, on ouvre son éditeur de texte favori, et on enregistre directement un nouveau fichier sur la racine de son site (si pour l’instant, vous n’avez pas configurer de virtual host, il devrait se trouver en /var/www/ ou /var/www/html, vous faites en sorte de bien mettre l’extension .html. Par exemple bonjour.html.

Ecrire à l’intérieur :Bonjour
Voyez le résultat :
bonjourJ’ai pris pour habitude, d’enregistrer mes fichier en .php, l’avantage sera pour plus tard lorsque vous allez vouloir rendre vos pages dynamiques.

Structure d’une page web

C’est bien beau ce bonjour mais avec ça je ne vais pas aller bien loin et rien que si je mets des accents ou des caractères spéciaux, ça pose problème :

Ecrire dans ce même fichier cette phrase L’encodage des fichiers et les caractères spéciaux.

Résultat :

accent non corrigé
accent non corrigé

Que c’est moche, maintenant on va dire plusieurs choses à votre navigateur pour qu’il affiche correctement les choses : Je suis une page web html et j’écris avec des caractères bien définis

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv=Content-Type charset="utf-8" />
     <title>Titre</title>
     <meta name="description" content="indiquer une description de la page" />
</head>
<body>
     Je suis une page web html et j'écris avec des caractères bien définis.
</body>
</html>
  • La première ligne est la pour dire quel type de document il s’agit.
  • La seconde ligne est une balise ouvrante, toutes les balises ouvertes doivent être refermées (enfin presque), la première ouverte sera la dernière fermée.
  • <head></head> est l’entête, elle contient les informations de la page.
  • <meta http-equiv=Content-Type charset= »utf-8″ />, utf-8 correspond à un codage de caractères informatiques, cette ligne permettra l’affichage des caractères spéciaux. Avec cette balise, pas besoin de balise fermante.
  • <title>Titre</title>, on indique le titre de la page ici, il s’affiche en haut du navigateur ou en haut de l’onglet.
  • <meta name= »description » content= »indiquer une description de la page » />, cette balise sera utile plus tard, elle entrera en jeu avec les moteurs de recherche.
  • Les balises <body></body> contiennent le corps de votre page web.

Résultat :

accent corrigés
accent corrigés

Référencement et SEO

Pour l’instant, j’ai parlé des éléments de bases pour construire une page.

Ils ne sont pas à négliger, ces éléments seront important pour référencer votre site auprès des moteurs de recherches. Avant même de penser faire son site, il faut savoir pour qui et pour qu’elles raisons on le fait.

Vous pouvez voir cet article.

Voilà comment réaliser une page internet de base, bien sur il y a beaucoup plus de balise que celle citées, mais elles représentes déjà un bon début, après il faudra y mettre des liens, des images, des tableaux … Et sans oublier une mise en page.

Laisser un commentaire