Création du site internet en HTML
Avant de commencer à concevoir techniquement un site internet, il faut au préalable réfléchir à son concept, ses objectifs, son coût (prestataire ou pas) et son graphisme.
Il est intéressant de préparer une maquette ou un plan reprenant les différentes pages du site. Un site internet HTML aura tendance à s'étoffer au fur et à mesure…
Il peut devenir un véritable labyrinthe pour les internautes si l'architecture de celui-ci n'a pas été pensée logiquement dès le départ...
Il faut faire un choix également entre l'écriture complète du site en HTML, avec l'aide éventuelle d'un éditeur, ou la création en ligne d'un site à l'aide d'un générateur de sites HTML automatiques style 'blogs' selon un canevas prédéfini...
Il est intéressant de préparer une maquette ou un plan reprenant les différentes pages du site. Un site internet HTML aura tendance à s'étoffer au fur et à mesure…
Il peut devenir un véritable labyrinthe pour les internautes si l'architecture de celui-ci n'a pas été pensée logiquement dès le départ...
Il faut faire un choix également entre l'écriture complète du site en HTML, avec l'aide éventuelle d'un éditeur, ou la création en ligne d'un site à l'aide d'un générateur de sites HTML automatiques style 'blogs' selon un canevas prédéfini...
A. Quelques règles de base de l'édition HTML
- Un Site web est un ensemble de fichiers (des pages ou documents) qui contiennent du texte (fichier.html ou autres), des images (image.gif ou .jpg), de la musique (fichier.wav ou .mid par ex.)...
- Un fichier texte ne contient au départ que du texte, mais il est important d'y positionner aussi des images, des fichiers "images.gif" ou "images.jpg". En fait vous y placez surtout le code qui servira à faire apparaître cette image à cet endroit. A part les fichiers textes, tous les autres fichiers sont donc des composants de la page et ne sont pas affichés seuls sur le Web.
- La première page du site html doit toujours se nommer index.html (ou index.htm) ! On accède aux autres pages du site à partir de la page d'accueil. Il est très important de lier toutes les pages entre-elles, de façon logique. Dès le départ, habituez-vous à écrire le nom des fichiers en minuscules, sans espaces, sans accents et pas trop long, au maximum 8 caractères plus l'extension .html ou .jpg... cela n'a rien d'obligatoire mais est fortement recommandé.
- Pensez très vite à l'architecture globale de votre site, donnez un nom logique à vos fichiers html et stockez-les dans des dossiers (ou répertoires) appropriés. Le dossier racine (ou dossier source) contiendra la page d'accueil (index.html). Le dossier qui contiendra toutes les images annexes s'appellera par exemple 'images'. Celui qui contiendra tous les fichiers PDF peut se nommer 'pdf'…
- Je conseille donc l'utilisation d'un logiciel éditeur HTML qui permet d'écrire du texte en clair, pour le transformer automatiquement en langage codé. Vous pouvez visualiser votre travail dans un navigateur en local avant de publier.
Claris Home Page version 3, logiciel léger, intuitif.
Il est quelque peu dépassé mais je ne connais pas d'autre logiciel aussi pratique pour débuter…
-> Téléchargez Claris Home Page 3 - téléchargez Dreamweaver 2
-> Téléchargez le manuel de Dreamweaver 2
- Il est indispensable de vous équiper d'un logiciel de transfert FTP des fichiers vers le serveur d'hébergement de votre site. Même si certains logiciels éditeurs HTML le font automatiquement, préférez la méthode manuelle et l'utilisation d'un logiciel dédié pour cette fonction délicate, comme le plus ancien et bien connu WS_FTP95.
-> Téléchargez WS_FTP 95
- Presque tous les Fournisseurs d'Accès à Internet mettent à votre disposition, pour héberger vos pages personnelles, un certain nombre de Méga octets (=minuscule partition d'un des disques durs dédiés à cet usage et dédiés aux clients). Il faut parfois effectuer une démarche d'activation... Pour transférer ses fichiers sur son hébergement web, il faut posséder trois paramètres : l'adresse d'hébergement (adresse URL ou IP de l'hôte 'host name'), le nom d'utilisateur (username ou login) et le mot de passe...
- Un fichier texte ne contient au départ que du texte, mais il est important d'y positionner aussi des images, des fichiers "images.gif" ou "images.jpg". En fait vous y placez surtout le code qui servira à faire apparaître cette image à cet endroit. A part les fichiers textes, tous les autres fichiers sont donc des composants de la page et ne sont pas affichés seuls sur le Web.
- La première page du site html doit toujours se nommer index.html (ou index.htm) ! On accède aux autres pages du site à partir de la page d'accueil. Il est très important de lier toutes les pages entre-elles, de façon logique. Dès le départ, habituez-vous à écrire le nom des fichiers en minuscules, sans espaces, sans accents et pas trop long, au maximum 8 caractères plus l'extension .html ou .jpg... cela n'a rien d'obligatoire mais est fortement recommandé.
- Pensez très vite à l'architecture globale de votre site, donnez un nom logique à vos fichiers html et stockez-les dans des dossiers (ou répertoires) appropriés. Le dossier racine (ou dossier source) contiendra la page d'accueil (index.html). Le dossier qui contiendra toutes les images annexes s'appellera par exemple 'images'. Celui qui contiendra tous les fichiers PDF peut se nommer 'pdf'…
- Je conseille donc l'utilisation d'un logiciel éditeur HTML qui permet d'écrire du texte en clair, pour le transformer automatiquement en langage codé. Vous pouvez visualiser votre travail dans un navigateur en local avant de publier.
Claris Home Page version 3, logiciel léger, intuitif.
Il est quelque peu dépassé mais je ne connais pas d'autre logiciel aussi pratique pour débuter…
-> Téléchargez Claris Home Page 3 - téléchargez Dreamweaver 2
-> Téléchargez le manuel de Dreamweaver 2
- Il est indispensable de vous équiper d'un logiciel de transfert FTP des fichiers vers le serveur d'hébergement de votre site. Même si certains logiciels éditeurs HTML le font automatiquement, préférez la méthode manuelle et l'utilisation d'un logiciel dédié pour cette fonction délicate, comme le plus ancien et bien connu WS_FTP95.
-> Téléchargez WS_FTP 95
- Presque tous les Fournisseurs d'Accès à Internet mettent à votre disposition, pour héberger vos pages personnelles, un certain nombre de Méga octets (=minuscule partition d'un des disques durs dédiés à cet usage et dédiés aux clients). Il faut parfois effectuer une démarche d'activation... Pour transférer ses fichiers sur son hébergement web, il faut posséder trois paramètres : l'adresse d'hébergement (adresse URL ou IP de l'hôte 'host name'), le nom d'utilisateur (username ou login) et le mot de passe...
B. Le plan du site
Par exemple, voici le plan d'un petit site concernant un voyage scolaire dans le sud de la France :
Il s'agit ici d'un petit site web composé de 4 pages HTML et un fichier PDF téléchargeable. En outre, il va contenir de nombreuses photos qui devront être "préparées" à l'avance (par exemple pour une page album photo) et du contenu visuel graphique sur chaque page...
- Une page html est donc un fichier qui peut être lu par un logiciel de navigation web (exemple: Internet Explorer, Firefox, Google Chrome, Safari,…).
- Chaque page doit donc posséder un nom de fichier (exemple: photo.html) et un titre de page (exemple: "Album photo du voyage scolaire dans le sud de la France").
- Chaque page doit être liée aux autres pages par des liens hypertextes.
- Le nom de fichier de la page d'accueil doit toujours être : index.html.
Il s'agit ici d'un petit site web composé de 4 pages HTML et un fichier PDF téléchargeable. En outre, il va contenir de nombreuses photos qui devront être "préparées" à l'avance (par exemple pour une page album photo) et du contenu visuel graphique sur chaque page...
- Une page html est donc un fichier qui peut être lu par un logiciel de navigation web (exemple: Internet Explorer, Firefox, Google Chrome, Safari,…).
- Chaque page doit donc posséder un nom de fichier (exemple: photo.html) et un titre de page (exemple: "Album photo du voyage scolaire dans le sud de la France").
- Chaque page doit être liée aux autres pages par des liens hypertextes.
- Le nom de fichier de la page d'accueil doit toujours être : index.html.
C. La charte graphique
Il est préférable de préparer une charte graphique du site.
Un site web doit être homogène. Il est conseillé par exemple d'utiliser au maximum deux (ou trois) polices de caractère pour tout le site html.
Il faut se méfier de la multiplication des couleurs et opter pour des options optimales de lisibilité, le minimalisme est de rigueur...
Voici un exemple de charte graphique pour un site html :
- Couleur de fond de page : blanc
- Police de caractère pour le texte : Trebuchet MS
- Couleur de la police de caractère pour le texte : Noir
- Taille de cette police : moyen (10 points)
- Police de caractère pour les titres : Tahoma
- Couleur de la police de caractère pour les titres : Rouge
- Taille de cette police : grand (14 points)
- Police de caractère pour les formulaires : Courrier
- Police de caractère pour les liens : Trebuchet MS
- Couleur de la police de caractère pour les liens : bleu
- Couleur de la police de caractère quand on survole les liens : rouge
- Couleur de la police de caractère quand on clique sur les liens : rouge clair
- Couleur de la police de caractère des liens que l'on a déjà visités : fushia
S'accompagne de cette charte, le canevas global de la page, les visuels graphiques, le logo, les images, les fond de pages et les boutons.
Chaque image ou photo du site doit avoir une résolution maximale de 72 dpi (résolution maximale des écrans).
Il est important de préparer ses images à l'avance, de les compresser avec un logiciel de traitement de l'image comme "Adobe Photoshop" ou "Gimp" afin d'alléger leur poids de fichier en Ko. Déposez ensuite tous vos fichiers images dans un dossier nommé par exemple 'images'.
Une page html peut se composer de différentes façons... choisissez un modèle épuré et conservez la même mise en forme pour toutes les pages du site, afin de lui donner une image professionnelle et de ne pas perdre l'internaute .
Exemples de mises en page :
Un site web doit être homogène. Il est conseillé par exemple d'utiliser au maximum deux (ou trois) polices de caractère pour tout le site html.
Il faut se méfier de la multiplication des couleurs et opter pour des options optimales de lisibilité, le minimalisme est de rigueur...
Voici un exemple de charte graphique pour un site html :
- Couleur de fond de page : blanc
- Police de caractère pour le texte : Trebuchet MS
- Couleur de la police de caractère pour le texte : Noir
- Taille de cette police : moyen (10 points)
- Police de caractère pour les titres : Tahoma
- Couleur de la police de caractère pour les titres : Rouge
- Taille de cette police : grand (14 points)
- Police de caractère pour les formulaires : Courrier
- Police de caractère pour les liens : Trebuchet MS
- Couleur de la police de caractère pour les liens : bleu
- Couleur de la police de caractère quand on survole les liens : rouge
- Couleur de la police de caractère quand on clique sur les liens : rouge clair
- Couleur de la police de caractère des liens que l'on a déjà visités : fushia
S'accompagne de cette charte, le canevas global de la page, les visuels graphiques, le logo, les images, les fond de pages et les boutons.
Chaque image ou photo du site doit avoir une résolution maximale de 72 dpi (résolution maximale des écrans).
Il est important de préparer ses images à l'avance, de les compresser avec un logiciel de traitement de l'image comme "Adobe Photoshop" ou "Gimp" afin d'alléger leur poids de fichier en Ko. Déposez ensuite tous vos fichiers images dans un dossier nommé par exemple 'images'.
Une page html peut se composer de différentes façons... choisissez un modèle épuré et conservez la même mise en forme pour toutes les pages du site, afin de lui donner une image professionnelle et de ne pas perdre l'internaute .
Exemples de mises en page :