La charte graphique d’un site web

apcpedagogie > Les cours de programmation > html > La charte graphique d’un site web

La charte graphique d’un site web

10 octobre 2018
Posté par: Riadh HAJJI
Catégorie: html

1 360 vues

La charte graphique d’un site web

Objectifs

Connaitre la charte graphique d’une page web

Présentation

Créer un site web, c’est d’abord créer une charte graphique que l’on va retrouver sur les différentes pages web.
Une charte graphique est un ensemble de règles graphiques (visuels, couleurs, typographies) qui vont permettre d’identifier un projet sur différents supports. Avec le logo comme élément de base, la charte graphique va permettre de véhiculer l’identité visuelle du projet
La charte graphique est votre identité visuelle, c’est un guide qui détermine tous les éléments graphiques, leurs utilisations, leurs caractéristiques…
En entrant sur un site la première impression c’est le graphisme, il faut donc qu’il présente bien l’image de votre entreprise et votre professionnalisme.

Pourquoi créer une charte graphique

Elle améliore la confiance de l’internaute envers votre site grâce à un design professionnel.
Elle accompagne l’ergonomie en favorisant l’accès à l’information.
Elle apporte une valeur ajoutée à votre contenu textuel.
Elle permet à vos clients de se souvenir de vous et d’identifier votre marque facilement.

Description

Dans chaque page, on doit pouvoir distinguer du premier coup d’oeil les grandes zones qui la
composent comme l’en‐tête, la zone de navigation permettant de surfer à l’intérieur du site, la zone
principale, dans laquelle est situé le contenu propre de la page, et le pied de page.
HTML offre un ensemble d’éléments qui délimitent les zones du document possédant une valeur
sémantique particulière.
Leur rôle est de structurer la page en plusieurs grandes zones dont le simple nom
de l’élément est évocateur de son utilité. Il s’agit des éléments <header>, <footer>, <aside> et <nav>.
La structure d’un site a un impact énorme sur le référencement naturel. Une mauvaise conception pose problème: perte de positionnement, contenus non indexés, incompréhension du visiteur…
Notre page html5 est, ici, composée de quelques éléments:

Un en-tête de page :<header>
Une barre de navigation :<nav>
Une colonne de gauche : <aside>
Une zone principale pour le contenu : <article>
Une zone section pour un regroupement thématique de contenu : <section>
Un pied de page : <footer>

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma structure complète en HTML5 </title>
<meta charset="utf‐8">
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ma structure complète en HTML5 </title>

</head>

<body>

</header>

</section>

</body>

</html>

Sommaire du cours HTML