La bonne démarche pour programmer un site
Nous allons voir la démarche à suivre pour vous lancer dans la création de votre site web et organiser son contenu. En plus de permettre aux visiteurs de trouver facilement les informations recherchées, un site bien organisé sera mieux référencé.
Le visiteur d'un site internet doit pouvoir trouver facilement et instinctivement les informations qu’il recherche. Si votre site n’est pas compréhensible ou que l'utilisateur ne trouve pas l’information qu’il recherche en un minimum de clics. Il est fort probable qu’il retourne sur Google trouver l’information ailleurs. Au contraire, s’il trouve les informations rapidement et que votre site est riche, les visiteurs y passeront beaucoup plus de temps et reviendront.
Faire le plan de votre site
Avant de créer son site, vous devez réfléchir à la manière dont les informations vont être organisées sur les différentes pages. Imaginons que vous voulez créer un site internet de votre CV. Voyons comment nous pouvons organiser les informations sur différentes pages web. Un CV contient généralement les parties suivantes « Expérience », « Diplômes », « Loisirs ». Nous pouvons séparer ces informations en trois pages : « Mon expérience », « Mes études », « Mes loisirs ». Nous allons également rajouter une page d’accueil contenant une rapide présentation de votre profil.
Voici le plan de votre site à ce stade :
Il est important de déterminer une page d’accueil, qui reprend rapidement l’ensemble des informations disponibles sur votre site. Il s’agit de la première page que verront les visiteurs du site. Il ne faut pas la négliger.
Déterminer les noms des pages HTML
Les pages codées en HTML simple comportent l’extension « .html ». Pour notre site CV, on choisit va choisir les noms des différentes pages en suivant certaines règles voir ci-dessous.
Règles des noms de fichiers HTML :
Les noms des pages ne doivent pas contenir d’espace, d’accent ou d'apostrophe et sont de préférence en minuscules. Si vous souhaitez séparer deux mots dans le nom de votre page, utilisez des tirets « - ». Exemple : « mon-experience.html ».
« Le nom d'une page HTML ne doit pas comporter d'espace ou d'accent. »
La page d’accueil :
Vous devez toujours avoir votre page d’accueil nommée « index » sur votre serveur, donc « index.html » pour une page en HTML. Cette page sera ouverte par défaut lorsque l’on tape l’adresse de votre site.
Si le nom de votre site est « monsupersite.com », en tapant l’adresse dans votre navigateur, c’est la page « monsupersite.com/index.html » qui s’ouvrira automatiquement. Il important que votre site comporte une page « index », sinon une page d’erreur ou une liste des fichiers, risque de s’afficher lorsque que l’on tapera le nom de votre site.
« Tout les sites possèdent une page d'accueil nommée "index". »
Organiser le design de vos pages
Nous allons maintenant voir comment organiser le design de vos pages. Comme nous l’avons vu dans le cours d’initiation au HTML . Le code HTML contient toujours une partie <head> et une partie corps <body> qui contient la partie visible de la page. Il en est de même pour le design de votre page, une page internet comporte en générale toujours trois parties, comme une lettre : un entête, un corps (ou contenu) et un pied de page
Les trois principales parties d’une page internet :- un entête (à ne pas confondre avec le <head> du code)
- Le corps de votre page ou le contenu.
- un pied de page, « footer » en anglais.
Plan de base d'une page:
Les parties « entête » et « pied de page » changent généralement très peu d’une page à l’autre. Cela permet de garder une continuité au fil des pages d’un même site. Faites un tour sur le site : Decathlon.fr. Naviguez sur différentes pages et observez bien les « entête » et « footer ».
Peu importe que vous soyez sur la page d’accueil, en train de regarder les modèles de VTT ou sur une page produit. Les entêtes et pied de pages sont toujours identiques d’une page à l’autre. Vous pouvez faire de même avec le site Go-sport.com et sur la plupart des sites.
Gardez les en-têtes et pieds de page identiques sur tout le site permet de créer une certaine unité du site et d’améliorer la facilité d’utilisation de votre site.Que contiennent les différentes parties d'une page ?
L’entête contient généralement un menu permettant d’atteindre les principales pages. Il peut également contenir un logo, un slogan, un lien vers votre page Facebook…
Le pied de page peut contenir des informations utiles telles que votre adresse, votre numéro de téléphone ou des liens vers des pages secondaires : tels que les mentions légales, un formulaire de contact, ou par exemple dans notre cas un lien pour télécharger le CV en format PDF.
La partie « contenu » quant à elle changera à chaque fois.
Passer au HTML
Voici un exemple de la page d’accueil pour notre site de CV.
<html>
<head>
<meta charset="UTF-8">
<title>Mon CV en ligne</title>
</head>
<body>
<header>
<h1>CV de Julien </h1>
<h4>Le spécialité de la spécialisation</h4>
<a href="experience.html">Mon expérience</a> -
<a href="etudes.html">Mes études</a> -
<a href="loisirs.htlm">Mes loisirs</a>
</header>
<main>
<h2>Présentation </h2>
<p>Bonjour, je m’appelle Julien et voici mon CV en ligne<p>
</main>
<footer>
<h2>Me contacter</h2>
<p>Mon adresse mail: <a href="mailto:julien@exemple.com">
julien@exemple.com</a>.</p>
</footer>
</body>
</html>