Comment faire son propre site internet ?

Création de Site Internet, Comment faire ?

Internet est devenu un moyen de communication incontournable.
Il se peut que pour votre travail ou simplement pour votre plaisir, vous ayez à créer un site Internet .
Voici les bases indispensables à connaître :
Qu’est-ce qu’un site Internet ?
Définition
• Internet et le Web
Internet fait référence au réseau mondial d’ordinateurs.
Ces ordinateurs peuvent ainsi s’échanger n’importe quel type de données.
Le Web se réfère à un ensemble de réseaux (Intranet et Internet ) auxquels on peut avoir accès par un navigateur du Web.
Le courrier électronique, les groupes de discussion, les jeux en ligne sont des exemples d’application Internet qui ne font pas nécessairement partie du Web.

• un serveur
Un serveur est juste un ordinateur configuré et connecté. Il est ainsi accessible depuis d’autres ordinateurs, mais pour cela, il lui faut être assez costaud (stable...) et avoir une connexion rapide et permanente à Internet . Il doit aussi être protégé des virus du système, des coupures de courant et des pirates informatiques...

• un site Internet
C’est simplement un certain nombre de fichiers stockés sur le disque dur d’un serveur. Le serveur possède une application qui permet à l’utilisateur connecté à Internet de transférer les fichiers du serveur à sa propre machine.
Quand vous visitez un site Web, vous passez d’abord par un serveur DNS . Ce serveur regroupe en fait les adresses de tous les sites existants. Il va associer à l’adresse du site une adresse IP , qui est en fait une suite de chiffres tels que 192-41-2-10. Si l’adresse n’est pas correcte, il vous enverra un message d’erreur. Si l’adresse est correcte, il enverra une requête au site pour transférer les fichiers qui correspondentà votre demande. Les fichiers envoyés par le site repasseront par le serveur DNS avant d’être envoyés sur votre machine, par l’intermédiare de votre FAI (Fournisseur d’Accès Internet ). Ces fichiers seront temporairement sauvés sur votre disque dur .

• un navigateur
C’est un logiciel qui vous permet de naviguer sur Internet .

• référencement
Les internautes recherchent des informations et des services sur Internet en passant par des moteurs et annuaires de recherche. Près de 80% du trafic généré sur un site provient des annuaires et moteurs.

Une liste de réponses va leur être retournée. Cette liste contient une centaine de sites classés du plus pertinent au moins pertinent (chaque moteur de recherche adopte une méthode de classement différente, la liste retournée est donc différente d’un moteur à un autre).
Le référencement correspond au fait d’apparaître en bonne position dans ces moteurs et annuaires afin d’attirer les internautes sur votre site.
• compatibilité La compatibilité d’un site correspond à sa faculté à être visualisable sur toutes les configurations (matériels et logiciels/navigateurs).
• éditeur WYSIWYG Anglais : What You See Is What You Get, Français : ce que vous voyez à l’écran est ce que vous obtiendrez à l’impression ou encore tel écran -tel écrit.

Qu’est-ce qu’un site Internet ?
Le langage
Il existe beaucoup de langages différents qui permettent de créer son site Internet . Le principal est aujourd’hui le langage HTML (Hyper Text Markup Language). Ce n’est pas un langage de programmation de base comme C++, Basic... Il est plus correctement décrit comme un langage de « description de pages ». Il vous permet de créer des pages de textes, des images et d’autres éléments, qui, grâce à l’utilisation d’un logiciel appelé navigateur, pourront être vues sur Internet . En employant HTML, vous pourrez créer des pages textes avec divers types de formatage comme celles créées avec une machine de traitement de texte. Plus intéressant, vous pourrez inclure des hyperliens qui sont des raccourcis pour vous mener à peu près à tout, à peu près n’importe où. Rappelez-vous qu’un fichier HTML est juste un « jeu d’instructions » pour créer une page sur un écran d’ordinateur.
Le langage HTML est en fait un langage qui est interprété par le navigateur. Il existe d’autres langages, comme le PHP, Java ou C++ qui seront aussi interprétés par le serveur. Il faut alors avoir un serveur puissant et configuré pour être capable d’interpréter le (ou les) langage
(s) utilisé(s).
Bien sûr, chaque langage a ses propriétés, ses avantages et ses
inconvénients. Néanmoins, le langage prédominant est le langage HTML.

Les outils nécessaires pour créer une page HTML
Certains logiciels très basiques permettent de créer des pages/sites Web. Par exemple, techiquement, le bloc note de windows permet de créer des documents (pages et site). C’est l’outil le plus basique pour cela. Il demande cependant une grande connaissance de la « programmation » pure en HTML, car bien sûr, il ne possède pas de raccourcis, d’assistant et son interface n’est pas grahique. Ce logiciel est essentiellement utilisé pour la confection de sites ou de pages personnelles. Bien sûr, certains puristes préfèrent faire tout leur site en utilisant le bloc notes, mais cela reste quand même très long (rien ne permet d’automatiser les tâches), laborieux (taper tout le code ) et se revèle très vite trop limité pour gérer un site en entier.
Il existe des logiciels conçus exprès pour ce type de programmation. On peut citer les éditeurs HTML comme Web Expert, HomeSite. Ils possèdent un certain nombre de raccourcis et de fonctionnalités pour vous permettre de programmer beaucoup plus rapidement (saisie semi Votre e-mail

De plus, avec ces logiciels, vous pourrez mettre en mémoire le modèle de votre site, c’est-à-dire la trame que l’on retrouve à toutes les pages.
Il faut cependant bien comprendre que les logiciels professionels comme WebExpert, Dreamweaver, qui sont ou pas WYSIWYG, sont indispensables pour créer et gérer les véritables sites professionnels.
Les autres éditeurs (souvent gratuits ou bon marché) font cependant largement l’affaire pour faire quelques pages et modifier quelques petites choses sur des pages.
Voir la zone de téléchargements pour les logiciels de création de pages Web.

Les erreurs à éviter avant de commencer

Ce paragraphe regroupe quelques petites astuces pour éviter les erreurs classiques de débutants.
Vous aurez besoin de définir des noms de dossiers et des noms de fichiers lors de la création de votre site. Pour définir ces noms, évitez d’utiliser des majuscules, des accents ou des espaces. Le nom doit comporter au maximum 8 caractères. Cela vous évitera des erreurs par la suite et facilitera la lecture de vos fichiers par votre serveur.
Si vous voulez éviter que votre site passe pour un site amateur, évitez de faire un fond coloré. Préférez le blanc ou le noir. Ceci permettra une meilleure harmonie entre le fond et les images que vous allez intégrer. Toutefois, vous pouvez utilisez un fond coloré si la couleur est très estompée.
Pour faciliter l’accès des internautes à votre site Web, il faut s’assurer de la rapidité du téléchargement des pages de votre site. Pour augmenter la rapidité de téléchargement et la lisibilité du site :

• essayez de compresser vos images. Mieux vaut mettre des images petites avec un hyperlien vers ses images aggrandies.
• il faut essayer de réduire la longueur des pages si c’est possible. Il vaut mieux découper la page en plusieurs et faire des liens.
• il faut éviter d’intégrer dans le site des images GIF animés ou qui clignotent, elles sont longues à télécharger et pénibles à voir à la longue.
• de plus, la strucure de votre site doit tourner autour des tableaux. Il vaut mieux faire plusieurs petits tableaux qu’un un seul avec beaucoup de cellules.
-il faut éviter le plus possible d’utiliser des FrameSet. Ce système constitue à construire une page à partir de « l’assemblage » de plusieurs pages. Il vaut mieux, dans ce cas, utiliser des tableaux pour découper la page. Cela facilite la gestion des pages, le référencement de votre site et sa compatibilité avec les différents navigateurs Internet . Votre e-mail

Tous les internautes n’utilisent pas les mêmes systèmes d’exploitation ( windows , MacOS, Linux). Il existe plusieurs types de navigateurs (Nescape Navigator, Internet Explorer..) et plusieurs langages de programmation de site Web. Quand on veut créer un site, il faut donc s’assurer de la comptabilité de son site sur toutes les configurations. Par exemple, il est possible que le site présente des défauts si il est vu sur Nescape Navigator alors qu’il n’en présente pas sur Internet Explorer. Il existe en effet quelques différences entre ces deux navigateurs. Il faut donc regarder l’aperçu de son site aussi bien sur Internet Explorer que sur Nescape Navigator.

Créer un plan de la structure du site
Il est indispensable avant de commencer la programmation du site de penser à sa structure. Ceci prend en compte le nombre approximatif de pages, les différentes sections de votre site (section de téléchargements, de liens, de partenaires en plus des sections de contenu...), des différentes pages et les liens qui vont être mis en place entre ces pages. On va ainsi obtenir un schéma en forme d’organigramme.

Ceci permet d’éviter le problème d’organisation surtout quand votre site s’étoffera, avec par exemple plus de 100 pages de contenu. Dans ce cas, il devient difficile de retrouver les sections, liens... si votre site n’est pas bien structuré !
Mettre en place une charte graphique
La mise en place de la charte graphique va permettre d’harmoniser toutes les pages du site : même police et taille d’écriture, harmonisation des hyperliens (couleurs, polices..)..
C’est une étape indispensable. Voici un exemple type d’une charte graphique. Elle définit la police de chaque titre, la police , la couleur et la taille des hyperliens.

BODY, TDBODY, BLOCKQUOTE, DIV, LI, OL, TABLE, TD, TH, TR, UL,
P {FONT-FAMILY: Verdana, arial; FONT-SIZE: 8pt;}
A:link {FONT-FAMILY: Verdana, arial; color: navy; FONT-SIZE: 8pt;
TEXT-DECORATION: none}
A:visited {FONT-FAMILY: Verdana, arial; color: navy; FONT-SIZE: 8pt;
TEXT-DECORATION: none }
A:active {FONT-FAMILY: Verdana, arial; color: navy; FONT-SIZE: 8pt;
TEXT-DECORATION: underline}
Votre e-mail
A:hover {FONT-FAMILY: Verdana, arial; color: red; FONT-SIZE: 8pt;
TEXT-DECORATION: underline}
h3 {FONT-FAMILY: Verdana, arial; color: navy; TEXT-DECORATION:
none}
h5 {FONT-FAMILY: Verdana, arial; color: navy; TEXT-DECORATION:
none}
h1 {FONT-FAMILY: Verdana, arial; color: navy; TEXT-DECORATION:
none}

Organiser son disque dur

Avant de créer votre site, vous allez devoir créer un certain nombre de répertoires sur votre disque dur . Vous devez tout d’abord créer un répertoire général qui porte en général le nom du site.
Vous pouvez après partager ce répertoire selon le contenu de votre site, par exemple en reprenant le découpage du sommaire de votre site. N’oubliez pas de consacrer également un répertoire pour enregistrer le modèle de votre site si vous travaillez avec un logiciel WYSIWYG.

Créer les pages du site
La page de départ

La page de départ doit comporter une brève présentation du site, et en général, une colonne de gauche présente le sommaire du site avec des hyperliens. Cette page de départ doit être enregistrée comme index.htm ou index. html. C’est obligatoire. En effet, quand on écrit une adresse comme www.informatiquepourtous.com, on écrit en fait www. informatiquepourtous.com/index.html. Le serveur va automatiquement chercher la page index.html. C’est ainsi qu’il fait la différence entre la première page et les pages suivantes. Cette page est la racine du serveur. Si vous ne nommez pas la première page ainsi, le serveur ne pourra pas reconnaître la première page du site des autres pages et lancera, à la place, une sorte d’explorateur vous proposant la liste des fichiers présents dans ce répertoire du serveur où est hébergé le site.

Les autres pages

Les pages suivantes doivent être réalisées sur le même modèle que la page de départ en utilisant la charte graphique. Il est également possible avec certains logiciels de mettre en mémoire le modèle du site. Ceci permet de ne pas répéter pour chaque page la partie fixe. Le modèle ainsi que ses différents composants (images...) sont en général enregistrés sous un répertoire à part dans le répertoire principal. Les pages suivantes doivent être enregistrées ainsi: nomdelapage.htm ou .html. Il faut veiller à indexer toutes les pages de la même manière: . htm ou .html. Il faut savoir que ces deux écritures sont à peu près équivalentes.
Les liens
L’utilisation de liens dans le site permet à l’internaute de se déplacer rapidement et selon sa demande sur votre site. Ils doivent être utilisés aussi souvent que nécessaire, mais toujours de façon adéquate. Un site est lisible si l’internaute peut accéder à la page répondant à sa demande en utilisant au maximum 4 liens (pour ne pas lasser l’internaute). Votre e-mail

Créer son site Internet

La programmation pure en langage HTML
Nous allons maintenant aborder la technique de programmation en ellemême.
Les en-têtes
Le langage HTML fonctionne avec un système d’en-têtes. Les commandes HTML ont une marque de début et une marque de fin.
Certaines marques de fin sont facultatives.
Les commandes HTML utilisent les caractères < et > comme délimiteurs.

Exemple : <TITLE>
Cette commande donne un titre au document HTML</TITLE>
Les commandes HTML peuvent être écrites en minuscules ou en majuscules.
Un fichier rédigé en HTML doit être suffixé par .html ou .html.

Les en-têtes (aussi appelés balises et tags) de bases sont :

Commandes de début et de fin du document HTML
· <HTML>
</HTML>

Informations non affichées concernant le document
· <HEAD>
</HEAD>

Titre du document
· <TITLE>
</TITLE>
Cette information apparait dans la barre de titre www.

• <META ...>
Situées dans l’en-tête de votre page HTML, ces commandes guident les moteurs de recherche pour indexer votre page.

Corps du document
· <BODY>
</BODY>

• Pour insérer des commentaires :

Voici l’exemple type d’une structure de base de document HTML :

<HTML>
<HEAD>
<TITLE>Titre du site</TITLE>
<META NAME= »Nom de l’auteur » CONTENT= »Mots-clès du contenu du
site »>
</HEAD>
<BODY>
...
... Le document HTML
...
</BODY>
</HTML>

La programmation pure en langage HTML
Les styles de texte
style physique

texte : le texte inclus dans ce tag est en gras
texte : le texte inclus dans ce tag est en italique
texte : le texte inclus dans ce tag est souligné (très peu
utilisé pour éviter confusion avec les liens).

<S>texte</S> : le texte inclus dans ce tag est barré
<BIG>texte</BIG> : le texte inclus dans ce tag est plus gros
que normalement

texte : le texte inclus dans ce tag est plus
petit que normalement

texte : le texte inclus dans ce tag est en indice
texte : le texte inclus dans ce tag est en exposant

style logique et titre
Les tags <H..>texte</H..> indiquent la taille du texte. On peut aller de H1 (taille maximale) à H6 (plus petite taille). Ce tag crée automatiquement un saut de ligne.
Par exemple :
<H2>titre</H2> donne :

« titre »
Sauts de ligne
Pour forcer un saut de ligne à un endroit précis, utilisez le tag (il ne nécessite pas de tag de fin).
Pour désactiver les sauts de lignes, utilisez le tag texte
Attention, avec ce tag, le texte risque de déborder de la fenêtre du navigateur.

Paragraphe

Afin de rendre votre texte plus structuré, vous pouvez créer des paragraphes. Pour ceci, vous utilisez le tag : texte permet de mettre le texte dans un paragraphe et crée automatiquement un saut de ligne.
L’espace vertical créé par ce tag est plus important que celui créé par le tag .
PS : tout le paragraphe réagit de manière homogène. Toute modification de taille, de style et de couleur s’applique à tout le paragraphe.

Alignement

La plupart des tags acceptent ALIGN comme attribut . Il détermine l’alignement horizontal et vertical du texte.

Pour insérer un texte à droite, il faut utiliser l’ attribut ALIGN=RIGHT
Pour insérer un texte à gauche, il faut utiliser l’ attribut ALIGN=LEFT
Pour centrer un texte, il faut utiliser l’ attribut ALIGNÎNTER

Par exemple, pour un paragraphe que l’on veut centrer, on utilisera :
 paragraphe à centrer

Il n’est pas nécessaire de ressaisir l’ attribut d’alignement pour un tag de fin. Vous pouvez utiliser l’alignement avec les titres, les images...

Remarque :
Pour centrer plusieurs objets en une seule opération, il faut utiliser les tags <CENTER>....</CENTER>.

Taille des caractères

Vous pouvez choisir votre taille de caractère en utilisant le tag (où X a une valeur entre 1 et 7).
Par exemple pour mettre un texte en taille 1 (maximum), il faut faire :
 Texte en taille 1

Caractères d’un texte

Vous pouvez choisir avec quelle police vous voulez que votre page soit écrite. Il faut pour cela utiliser le tag et son attribut FACE. Vous pouvez également définir des polices alternatives au cas où l’ordinateur de l’internaute qui vient voir votre page n’aurait pas celle que vous avez choisie.

Voici un exemple d’un texte écrit en arial (attention aux guillemets) :

texte en arial

Pour choisir des polices alternatives, séparez-les par des virgules :
Texte en arial si la police est présente, sinon en helvética
Avec le tag font, vous pouvez également utiliser l’ attribut SIZE.

Pour mettre un texte en taille 2 et en arial : texte en taille 2 et en arial

PS : les attributs du tag « font » peuvent être combinés (cela est très conseillé pour ne pas surcharger le code de la page) :

Exemple :

Lignes horizontales de séparation

Vous pouvez tracer des lignes de séparations horizontales. Vous modifiez alors leur aspect à l’aide d’ attribut . Pour tracer une ligne horizontale, il faut utiliser le tag <HR> (il ne nécessite pas de tag de fermeture). Le tag <HR> possède comme attributs ALIGN, WIDTH, SIZE, HEIGH. Normalement, les attributs WIDTH et HEIGHT sont exprimés en pixels, mais il est possible de définir une largeur en pourcentage de la largeur de la feuille.

La programmation pure en langage HTML
La création d’hyperliens

La caractéristique principale de l’utilisation du langage HTML est la possibilité de créer des liens. Ainsi, simplement en cliquant sur un texte ou sur une image de la page Web, l’internaute peut se rendre directement sur une autre page.
Pour créer un lien vers un autre site Internet depuis votre page Web, il suffit d’utiliser l’entête
A HREF. Il faut donc écrire : <a href= »htttp://www.informatiquepourtous.com »>Le texte du lien </a>
Voici un lien vers le site Internet daifen.com
Pour créer un lien vers une adresse E-mail, c’est un peu différent.
Tout d’abord, au lieu d’inscrire <A HREF= »http:// www.monsite.com »>, il faut déclarer que le lien pointe vers une adresse E-mail.
Pour cela, il suffit d’employer l’ attribut mailto : --> mailto:login@monsite.com à la place de l’adresse: « http://www.monsite.com. »
Voici ce que vous obtiendrez comme tag : <a href= »mailto:webmaster@informatiquepourtous. com »></a>
Si un internaute clique sur ce lien, son logiciel de messagerie électronique se lancera et créera un nouveau message destiné dans cet exemple à webmaster@informatiquepourtous.com.
A noter que si vous le souhaitez, vous pouvez prédéfinir le champ de saisie Sujet de ce message. Pour cela, il sufit d’ajouter la syntaxe suivante: ? subject=sujetdumail après l’adresse e-mail dans le tag A HREF. Votre e-mail
Voici le résultat que vous obtiendrez : <a href= »mailto:webmaster@iptsos.com? subject=sujetdumail>texte du lien</a>
Voici un exemple de lien mail vers l’adresse du webmaster d’Informatique Pour Tous

Les renvois :
Les renvois permettent de faire pointer un lien vers un endroit précis d’une page de votre site ou de la page en cours
Voici un exemple de renvoi qui pointe vers le haut de cette page
• commencez par mettre une « ancre » à l’endroit où doit pointer le lien Pour cela, insérez le tag <a name= »nom de l’ancre »></a>
• mettez un lien <a href= »page.html#nom de l’ancre »></a>
Mettre de la couleur sur un lien :
Nous allons maintenant nous intéresser à la manière de mettre de la couleur sur un lien. Il existe
3 types de liens :
· liens pas encore visités,
· liens déjà visités,
· liens actifs ( sur lesquels un clic est en cours )
.
Les liens pas encore visités sont pris en charge par l’ attribut LINK.
Les liens déjà visités sont pris en charge par l’ attribut VLINK.
Les liens actifs sont pris en charge par l’ attribut ALINK.

Ces attributs font partie du tag <BODY> et acceptent un nom de couleur ou un code RVB.

Exemple :
<BODY BGCOLOR=”BLACK” LINK=”RED”
ALINK=”GREEN” VLINK=”BLACK”>

La programmation pure en langage HTML
L’insertion d’images

Le temps de transmission des images est un gros problème. Il faut donc utiliser des images compressées. Il existe 2 formats d’images très répandus sur Internet :
Les images GIF : elles sont composées au maximum de 256 couleurs. La compression est assez élevée sans perte de qualité. Avec ce format, vous pouvez également faire des images transparentes (une couleur fait office de couleur transparente).
Les images JPG ( JPEG ) : l’avantage de ce format est de réduire l’espage disque occupé grâce à une compression très poussée. Le format JPG peut comporter jusqu’a 65 556 couleurs soit 16 bits.
Voir le dossier sur les formats d’images

PS : le format JPG ou JPEG ne gère pas la couleur transparente

Quand vous trouvez une image que vous voulez intégrer dans le site, vous devez donc l’enregistrer sous image. GIF ou image.jpg dans le répertoire de votre site. Vous pouvez maintenant insérer l’image dans votre page web.

Pour cela, vous utiliserez le tag <IMG>.

Vous indiquerez le nom du fichier graphique ainsi que son chemin d’accès : <IMG SRC= »image.gif »>

Ce tag charge donc l’image Image. GIF contenu dans le dossier courant et l’affiche dans la taille et la résolution originale.

Pour modifier à l’écran la taille de l’image, on dispose des attributs HEIGHT pour la hauteur et WIDTH pour la largeur :
<IMG SRC= »image.gif » WIDTHp HEIGHTp>

L’alignement de l’image est défini comme d’habitude par l’ attribut ALIGN. Voici les valeurs autorisées :

• TOP Alignement sur la bordure supérieure de la ligne
• MIDDLE Alignement sur le milieu de la ligne
• BOTTOM Alignement sur la bordure inférieure de la ligne
-TEXTTOP(N) Alignement sur la bordure supérieure du texte Votre e-mail
• ABSMIDDLE(N) Alignement sur le centre
• BASELINE(N) Alignement sur la ligne de base du texte
• ABSBOTTOM Alignement sur la bordure inférieure de la ligne
D’autres paramètres d’image sont auss idisponibles :
• ALT Texte : texte qui sera affiché par un navigateur ne sachant pas traiter l’image ou lorsque vous survolez l’image avec la souris.
Exemple de « ALT » sur une image :

• BORDER : indique la largeur de la bordure de l’image (par défaut, les images n’ont pas de bordure). Si l’image est définie comme lien, elle est encadrée par défaut d’une bordure que vous serez obligé de désactiver par BORDER=0 si elle vous gêne.
• HSPACE : pour créer un espace vide à gauche et à droite de l’image. HSPACE met en place un espace vierge de 20 points à gauche et à droite de l’image.
• VSPACE : pour créer un espace vide avant et après l’image. VSPACE met en place un espace vierge de 20 points au-dessus et au-dessous de l’image.
• UNITS : indique l’unité de mesure utilisée pour les attributs HEIGHT et WIDTH (par défaut, il s’agit du pixel ).
Un lien depuis/vers une image.
<a href=”http://www.informatiquepourtous.com”><img src=”image.gif” width=”127” height=”79” align=”absmiddle” border=”0”></a>
Voici en exemple une image qui pointe vers le site daifen.com

La programmation pure en langage HTML
La mise en page
Couleur du texte

Le tag a un attribut : COLOR. Celui-ci permet de définir la couleur des caractères inclus entre les tags et . L’ attribut COLOR doit être affecté d’un des seize noms de couleurs reconnus ou d’un code RVB (rouge, vert, bleu) qui est précédé du signe #.
Voici la liste des couleurs reconnues :
aqua : bleu
clair

gray : grisnavy : bleu silver : gris argent
foncé black : noir green : vert olive : vert olive teal : gris acier
lime : ocreblue : bleu ciel
white : blanc
purple : violet maroon : brun foncé

fuchsy : brun
clair yellow : jaune red : rouge
Par exemple pour mettre un texte en rouge, vous avez 2 solutions :
Texte en rouge
ou Texte en rouge

Remarque : ne pas oublier le #

Couleur d’arrière plan

C’est exactement pareil pour la couleur d’arrière plan. Cette couleur est définie par l’ attribut BGCOLOR du tag <BODY>, avec la possibilité de mettre un nom de couleur ou un code RVB (avec le # ). La couleur reste la même sur toute la page, on ne peut pas la changer à la moitié de la page. <BODY BGCOLOR=RED> ou <BODY BGCOLOR=#FF0000>
La mise en forme de la page
Il existe deux solutions de base pour mettre en forme une page Web :
• créer des tableaux.
Pour cela, on utilise le tag TABLE.
Par exemple : <table width= »65% » border= »0 »>.

• créer des FrameSet, c’est-à-dire intégrer plusieurs pages pour faire une seule page.
Cette technique est déconseillée pour éviter les problèmes de référencement et de compatibilité du site.

Publier son site Internet
L’hébergement

Une fois que le site Web a été créé, il va falloir l’envoyer sur votre serveur. Pour cela, il faut passer par l’intermédiaire d’un hébergeur. Contre paiement mensuel, vous allez louer de l’espace sur le disque dur d’un hébergeur.
Bien sûr, certains fournisseurs d’accès Internet comme AOL, Free... vous permettent d’héberger gratuitement votre site Internet . Cependant, leurs services sont très basiques et de qualité médiocre (rapidité, services intégrés, hotline...) et c’est pourquoi ils hébergent essentiellement les sites ou les pages personnelles.
Evidemment, pour un site professionnel, vous avez tout intérêt à passer par un hébergeur professionnel.
Les hébergeurs proposent des packs (tout compris) ou du sur mesure. Les services proposés ne sont pas équivalents (qualité, quantité et prix).
Voici une liste des éléments à prendre en considération :
capacité de stockage mise à votre disposition
prix
serveur unix ou NT
langages exploitables sur le serveur (PHP, mysql, cgi...)
rapidité du serveur
noms de domaine compris ou pas
nombre d’adresses E-mail
gestions des listes (d’information...)
gestion des paiements
qualité/fiabilité/quantité des statistiques

Votre hébergeur peut aussi être votre fournisseur d’accès Internet , mais pas nécessairement.

Les logiciels FTP

Par exemple FtpExpert, CuteFtp, WSFTP...
C’est en utilisant ce logiciel que vous pourrez envoyer des informations à votre hébergeur. FTP signifie File Transfert Protocole. C’est donc un protocole qui vous permet de transférer des fichiers.
Vous devez tout d’abord vous connecter à Internet . Vous ouvrez ensuite FTP et entrez le nom de votre hébergeur, votre login et votre mot de passe. Le FTP va vous connecter au serveur.
Vous allez voir apparaître une fenêtre composée de deux colonnes :
• sur l’une sont inscrits les fichiers de votre ordinateur
• sur l’autre les fichiers de l’ordinateur de votre serveur. Il est maintenant facile de déplacer ou d’échanger des fichiers.

Vous devez toujours conserver sur votre disque dur une copie complète de votre site Web. Quand vous voulez faire une modification sur une page, vous utilisez la copie de votre ordinateur, puis vous remplacez le fichier du serveur par le nouveau fichier.

Donner un nom de domaine à son site
Qu’est-ce qu’un nom de domaine?

La recherche d’un site Web particulier ressemble à la recherche d’un numéro de téléphone. Chaque serveur Web a un numéro unique qui l’identifie, appelé adresse IP . Une adresse IP ressemble à cela: 64.176.16.196 (vous pouvez tapez cela à la place de l’adresse www.iptsos.com pour accéder au site).

Pour des raisons évidentes, personne ne peut se rappeler ce genre d’adresses.

C’est pourquoi, tôt dans le développement du Web, le système des noms de domaines a été inventé. C’est un nom facile à se souvenir, composé de lettres et/ou de chiffres, qui correspondent à une adresse IP particulière. C’est le serveur DNS (Serveur des Noms de Domaine) qui traduit l’adresse URL (adresse http://...) en adresse IP pour vous diriger au bon endroit (cette opération est totalement transparente).

Un nom de domaine classique est composé de deux parties séparées par un point.
La partie de droite fait référence à votre pays ou à l’organisation à laquelle vous appartenez.

Par exemple :

.fr pour la France,
.de pour l’Allemagne,
.com pour les sites américains à l’origine. Certains sites commerciaux, non américains, l’utilisent très fréquemment aujourd’hui.
.org pour les organisations à but non lucratif,
.edu pour les établissements scolaires,
.gov pour les agences du gouvernement,

Les noms de domaines gratuits
Noms de domaines gratuits : Votre e-mail
Certains services vous proposent des noms de domaines gratuits. C’est le cas des fournisseurs d’accès Internet comme AOL, Free, Multimania...

Le nom de votre site sera, avec eux, par exemple :
nomdusite.free.fr ou encore nomdusite.fr.st.
Bien sûr, ce genre de service gratuit est pratique dans le cas des sites personnels.

Noms de domaines payants :

Pour un site professionnel, mieux vaut employer bien sûr un nom de domaine payant de la forme http://www.monsite. com... pour ne pas passer pour un site amateur, mieux protéger votre site et être cohérent dans l’image que vous voulez donner.
Vous devez aussi vous occuper de déposer le nom de votre site. Vous avez deux solutions :
• soit vous passez par un hébergeur qui vous fournit en même temps un nom de domaine (comme amen.fr),
• soit vous passez par un site Internet qui répertorie tous les noms de site employés. Vous pourrez ainsi vérifier si le nom que vous voulez donner à votre site n’est pas déjà utilisé et acheter le nom de votre site. L’adresse de ce site est http:// www.leregistrar.com

Les noms de domaines .com et .fr

Le nom de domaine .com est payant. Vous pourrez l’utiliser en échange d’un versement de 30 - 60 € tous les deux ans. Pour utiliser ce nom de domaine, renseignez-vous auprès d’un site qui fournit ce service (http://www.leregistrar.com).
Vous pouvez aussi acheter le nom de domaine .fr. Ce nom est également torie tous les noms de site employés. Vous pourrez ainsi vérifier si le nom que vous voulez donner à votre site n’est pas déjà utilisé et acheter le nom de votre site. L’adresse de ce site est http://www.leregistrar.com
Les noms de domaines .com et .fr
Le nom de domaine .com est payant. Vous pourrez l’utiliser en échange d’un versement de 30 - 60 € tous les deux ans. Pour utiliser ce nom de domaine, renseignez-vous auprès d’un site qui fournit ce service (http://www.leregistrar.com).
Vous pouvez aussi acheter le nom de domaine .fr. Ce nom est également payant, de l’ordre de 120 € par mois. Il est réservé aux entreprises, il faut en effet fournir le numéro Siret de l’entreprise lors de l’inscription. L’avantage de ce nom de domaine est qu’il est mieux protégé.

Promouvoir votre site Internet

La promotion d’un site Internet passe par une bonne COMMUNICATION. Elle consiste à faire connaître son site auprès des internautes. Plusieurs méthodes existent :
Le référencement :
Cela consiste à inscrire son site dans les annuaires et les moteurs de recherche

Un annuaire répertorie des sites selon leur thème.
Le moteur de recherche répertorie en temps réel les sites qui répondentà la demande de l’internaute.

Pour s’inscrire sur des moteurs de recherche comme Yahoo, Voila... il faut suggérer votre site, par une description et une catégorisation. Le moteur de recherche va venir voir votre site et va décider ou non de le classer. Le temps de réponse peut varier de 2 semaines à 3 mois.

Il existe aussi des sites comme Altavista qui font annuaire et moteur de recherche. Vous devez soumettre votre site à un indexeur automatique (robot=spiders). C’est un programme automatique (un Spider) qui va regarder les Méta (mots-clés de la page que vous rentrez dans la partie <META> du texte source), les Title (c’est le titre de la page), les Alt de votre site et les premiers mots de la page de départ. Si le site est classé, l’indexation se fera sur la totalité du site. Le temps de réponse est de 7 mois. Si vous versez au préalable une certaine somme d’argent, il y a de grande chance pour que le temps de réponse soit écourté.

La méthode pour être bien référencé dans ces moteurs de recherche est d’utiliser des Méta et des Title personnalisés pour chaque page du site, ceci surtout si votre site aborde beaucoup de thèmes.

Il existe aussi des sites qui vous permettent directement de vous inscrireà plusieurs moteurs de recherche.

Pour être bien référencé, mieux vaut s’inscrire au plus grand nombre d’annuaires et de moteurs de recherche possible.

Il faut aussi savoir qu’il existe des sociétés spécialisées dans le référencement de sites.

Les autres moyens :

Les partenaires
Le partenariat vous permet d’échanger des liens ou des logos avec un autre site. Evidemment, ce genre de partenariat est surtout utile si votre partenaire est un site important bien référencé. La mise en place de partenariat se fait directement en contactant le site. L’idéal est de trouver des sites complémentaires à votre contenu, pour mieux satisfaire l’internaute.

Les affiliations

Si vous rendez service à un site, en lui fournissant par exemple une rubrique, il peut vous proposer en échange un lien direct vers votre site, par exemple à la fin de la rubrique, . C’est une bonne méthode pour faire venir des visiteurs. Par exemple, vous
pouvez avoir un très bon programme TV gratuit sur votre site
les moyens traditionnels Tous les moyens plus traditionnels de publicité peuvent aussi être utilisés comme les prospectus, les cartes de visite, la publicité dans des magazines...

Les moyens détournés

• la publicité sur les listes de discussions
• les forums de discussions
• les échanges de publicité dans des listes...