1. introduction 2 le nom du site web 2. structure du site web 4

Informatique 2 – NTE
Partie 2 : Créer un site Web
1. INTRODUCTION
Informatique 2 – NTE
Partie 2 : Créer un site Web
2 LE NOM DU SITE WEB
Vouloir créer un site web peut paraître compliquer si on ne sait pas par où commencer. Beaucoup
d'éditeurs de pages web sont disponibles, citons à titre d'exemple : FrontPage, DreamWeaver,
NamoWeb, WebExpert, etc.
Personnellement j'ai manipulé tous ces éditeurs. Chacun a ces avantages et ses inconvénients par
rapport aux autres. Le manuel de TP sera exploité sur DreamWeaver (version 8) car j'ai jugé qu'il
appartient au monde des professionnels d'une part et qu'il est le plus complet de l'autre. Pour votre
projet, vous avez le plein droit d'utiliser l'éditeur qui vous convient.
Avant de commencer
Trouver le bon nom
Il est maintenant temps de trouver votre nom de domaine.
La majorité des hébergeurs vont vous proposer une adresse de type :
www.fournisseur.com/nom_d'usager/
Le nom d'usager peut être votre nom ou un surnom représentatif de votre site internet.
Cependant, d'autres fournisseurs vous permettront d'utiliser votre propre nom de domaine
"www.monsite.com".
Trouver un sujet
La première chose à faire avant de vous lancer dans la conception d'un site web est de trouver un sujet.
Vous pouvez choisir parmi vos centres d'intérêts et passions pour commencer. Lorsque vous aurez plus
d'expérience pour la création de site web, vous pourrez faire un site Internet sur des sujets plus
spécialisés et originaux.
Un site Internet n'aura plus de chance d'attirer un grand nombre de visiteurs s'il n'est pas commun ou
ordinaire.
Vérification
Une fois que votre nom de site de domaine est choisi, vous devez vérifier s'il n'est pas déjà utilisé. Il
arrive que les hébergeurs fassent cette vérification pour vous à l'inscription.
La façon la plus rapide de faire cette vérification est de tapez l'adresse choisie dans votre navigateur. Si
le nom n'est pas choisi, la page retournée vous l'indiquera. Pour un nom de domaine, il existe aussi des
sites spécialisés qui vous permettent de faire cette recherche et vous donne des informations sur le
propriétaire du nom de domaine s'il est déjà utilisé. Pour plus de détails, consultez le tutoriel
Rechercher un nom de domaine (/fr/tutoriels/tut_details.asp?domainid=27&coursid=20&leconid=121)
Mais pour débuter, commencez par un sujet que vous maîtrisez bien!
Trouver un hébergement
2. STRUCTURE DU SITE WEB
Pour afficher votre site sur le web, il faudra trouver un espace sur un serveur connecté à Internet.
Vous possédez maintenant le nom de votre site, il faut passer à la conception du site.
Fournisseur d'accès Internet
Il n'est pas obligatoire mais recommander de jeter les bases de votre site sur papier avant de vous
attaquer à la programmation de votre site. Cette étape vous permettra de rassembler vos idées et de les
visualiser. Ce qui peut vous faire gagner du temps lors de la programmation.
Les fournisseurs d'accès Internet offre généralement à leurs clients un espace sur leur serveur. L'espace
alloué varie d'un fournisseur à l'autre, mais il devrait être suffisant pour héberger un petit site Internet.
Contactez votre FSI (fournisseurs de services Internet) pour obtenir de l'information sur son service
d'hébergement.
4. CHOISIR UN EDITEUR HTML
Espace gratuit
Une autre possibilité qui s'offre à vous est d'opter pour les services des serveurs gratuits disponibles
sur internet.
En voici quelques-uns:
i.
ii.
iii.
iv.
v.
Vous pouvez faire une esquisse de votre site pour voir où seront placés la barre de navigation, les
images, le texte, etc. Il n'est pas nécessaire d'avoir une précision au pixel!
Une page web est constituée d'un ensemble de code HTML enregistré dans un fichier .html. Ce
fichier sera lu et interprété par les navigateurs Internet. Pour écrire ce code, il est possible d'utiliser
différents outils. Par ailleurs, certains hébergeurs vous proposent un assistant pour vous aider dans la
création de votre site qui ne nécessite aucune programmation.
Pour les aventuriers qui connaissent bien la programmation HTML, un simple éditeur de texte comme
le Bloc note de Windows ou SimpleText de Mac/OS. Vous pouvez consulter le tutoriel HTML
('http://webd.webdonline.com/fr/tutoriels/tut_details.asp?domainid=26&coursid=23) de WebD pour
obtenir plus d'information sur la programmation HTML.
Persocité (http://persoinscription.francite.com/fr/index.asp)
CitéWeb (http://citeweb.net/)
iQuébec (http://www.iquebec.com/heberg/)
iFrance (http://www.ifrance.com/heberg/)
Forez.com (http://www.forez.com/portail/)
Pour un liste plus complète allez à : www.webdoline.com/fr/ressources/index.asp?cat=7
Vous pouvez utiliser un éditeur WYSIYG pour créer vos pages web. En voici quelques-uns :
Fethi Ben Amor
Fethi Ben Amor
Page - 21 -
Page - 22 -
Informatique 2 – NTE
•
•
•
•
Partie 2 : Créer un site Web
Informatique 2 – NTE
Partie 2 : Créer un site Web
Tapez donc votre titre à l'intérieur des balises de titre :
WebExpert
Frontpage
Dreamweaver
GoLive
<title>Ma première page web</title>
6 AJOUTER DU CONTENU
Pour obtenir d'autres suggestions, consultez la section Ressources
(http://www.webdonline.com/fr/ressources/index.asp?cat=1) de WebD.
Ajouter du texte
Il existe aussi des applications disponibles sur Internet qui vous permettront de construire vos pages
web :
Une page internet est constituée en parti par du texte. Le texte devra être entré à l'intérieur des balises
pour que les navigateurs puissent l'afficher.
<body>
Homestead (www.homestead.com)
Enfin, vous pouvez utiliser un logiciel de traitement de texte, comme MS Word ou WordPerfect, pour
faire votre site. Ils offrent plusieurs fonctionnalités pour la création de page Internet en plus de faire la
conversion d'un document texte en document HTML. Pour cela, il suffit de cliquer Fichier >
Enregistrer sous et de choisir le type de fichier HTML.
5 CONSTRUIRE UNE PREMIERE PAGE WEB
Si vous êtes déjà familier avec ces concepts, vous pouvez passer à la section suivante.
Pour les fins de ce tutoriel, nous tiendrons compte que vous utilisez un éditeur de texte, comme bloc
note pour Windows ou SimpleText pour Mac, pour faire votre page web. Si vous avez choisi d'utiliser
un éditeur HTML, nous vous référons à nos tutoriels WebExpert ou Frontpage.
Définir la structure de la page web
Toute page web devrait contenir les codes HTML suivants:
Bonjour et bienvenue sur ma première page web.
Je m'appelle André, j'ai 45 ans et j'habite l'arrière pays.
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!
</body>
</html>
Vous allez maintenant visualiser ce que le navigateur affichera sur internet.
ƒ
ƒ
ƒ
ƒ
ƒ
Enregistrez votre page en format HTML (ex.: page1.html);
Ouvrez votre navigateur;
Dans le menu fichier, cliquez Ouvrir;
Sélectionnez votre fichier
Cliquer Ouvrir.
Voilà votre première page HTML! Mais elle manque un peu de finition.
<html>
<head>
<title></title>
</head>
<body>
Mettre en page votre texte
Vous avez sûrement remarqué que le texte n'a pas encore été mis en page.
</body>
</html>
•
Ma première page
Bienvenue à tous!
Voici maintenant le temps de passer à l'action. Vous allez créer votre première page web pour vous
familiariser avec les concepts d'une page web. Pour en savoir plus sur Internet :
/fr/tutoriels/tut_details.asp?domainid=27&coursid=20
•
•
Entrez votre texte :
<html> <head>
<title>Ma première page web</title>
</head>
<body>
Les codes <html></html> définissent les documents Internet.
Les codes <head></head> contiennent de l'information sur le document comme le titre ou les
mots clé.
Les codes <body></body> contiennent le contenu de la page Internet.
Ouvrez un éditeur de texte et tapez le code précédent.
Pour ajouter un titre à votre page, vous pouvez utiliser les balises suivantes: <h1></h1>,
<h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>;, <h6></h6>. Ces balises afficheront le
texte en gras et de différente taille où 1 est le plus grand et 6 le plus petit.
Pour séparer chaque ligne, utilisez la balise <br> qui effectue un retour de chariot ou <p></p> qui
définit un paragraphe en plus de faire un retour de chariot.
Retourner à votre document dans l'éditeur de texte et modifiez-le de la façon suivante :
Choisir le titre de la page
<html>
Le titre d'une page web est inséré entre les balises <title></title>. Ces balises permettent d'afficher le
titre de vos pages web dans la barre de titre des navigateurs internet.
<head>
<title>Ma première page web</title>
</head>
Fethi Ben Amor
Fethi Ben Amor
Page - 23 -
Page - 24 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
<body>
<h1>Ma première page</h1>
Informatique 2 – NTE
ƒ
Partie 2 : Créer un site Web
Cliquer Enregistrer.
Dans votre page web, modifiez le code de la façon suivante :
<h5>Bienvenue à tous!</h5>
<p>Bonjour et bienvenue sur ma première page web.</p>
<html>
Je m'appelle André, j'ai 45 ans et j'habite l'arrière pays. <br><br>
<head>
<title>Ma première page web</title>
</head>
<body>
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!
</body>
</html>
<h1>Ma première page</h1>
Enregistrez votre document à nouveau, retournez à votre navigateur et cliquez le bouton Actualiser
pour afficher la dernière version de votre document.
<h5>Bienvenue à tous!</h5>
<p>Bonjour et bienvenue sur ma première page web.</p>
Je m'appelle André, j'ai 45 ans et j'habite l'arrière pays. <br><br>
Voilà qui est mieux!
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!<br><br>
7 AJOUTER UNE IMAGE
Voici mon humble demeure :<br><br>
Les pages web peuvent contenir des images puisqu'il s'agit de document multimédia.
Pour ajouter une image, utiliser la balise <img>. La source de l'image est spécifiée par l'attribut src.
Vous pouvez afficher une légende à votre image par l'attribut alt. Pour en savoir plus sur la balise
<img> : /fr/tutoriels/tut_details.asp?domainid=26&coursid=23&leconid=165
Voici une image que vous pourrez afficher sur votre page :
<img src="maison.gif" alt="ma charmante maison">
</body>
</html>
Enregistrez votre document à nouveau, retournez à votre navigateur et cliquez le bouton Actualiser
pour afficher la dernière version de votre document.
8 AJOUTER DES HYPERLIENS
Pour permettre à vos visiteurs de naviguer, vous devez insérer des hyperliens. Il en existe de deux
types :
Lien externe
Renvoi vers une autre page que la page courante.
Lien interne
Renvoi vers un autre point dans la page courante.
Les deux types de liens sont définis par les balises <a></a>. Seuls les attributs permettent de les
différencier.
Insérer un lien externe
Pour insérer un lien externe, il faut utiliser l'attribut href qui contient le URL de la page de destination.
Insérer un hyperlien externe en modifiant votre code de la façon suivante :
<html>
ƒ
ƒ
ƒ
<head>
<title>Ma première page web</title>
</head>
<body>
Cliquer sur l'image avec le bouton droit;
Cliquer Enregistrer l'image sous... du menu contextuel;
Choisissez le même répertoire que votre page;
Fethi Ben Amor
<h1>Ma première page</h1>
Page - 25 -
Fethi Ben Amor
Page - 26 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
Informatique 2 – NTE
Partie 2 : Créer un site Web
9 PERSONNALISER UN SITE WEB
<h5>Bienvenue à tous!</h5>
<p>Bonjour et bienvenue sur ma première page web.</p>
Couleurs de police, d'arrière plan, hyperlien, etc
Je m'appelle André, j'ai 45 ans et j'habite l'arrière pays. <br><br>
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!<br><br>
La première chose qu'il est possible de personnaliser est la couleur de votre site.
Voici mon humble demeure :<br><br>
Voici comment définir la couleur d'arrière plan de votre site web :
<img src="maison.jpg" alter="ma charmante maison"> <br><br> <br><br>
Cliquez <a href="http://www.webdonline.com">ici</a> pour accéder à mon site internet
favori. <br><br> <br><br>
Ajouter à l'intérieur de la balise <body> l'attribut bgcolor qui définit la couleur d'arrière plan de la
page.
Voici un exemple :
</body>
</html>
<body bgcolor="silver">
Allez tester votre lien dans le navigateur.
Insérer un lien interne
Ce code affichera la couleur argent en arrière plan.
Un lien interne est composé de deux éléments, une ancre et un lien. L'ancre sert de destination au lien.
Maintenant, vous pouvez choisir d'afficher votre texte en une autre couleur que noir. Voici le code
suivant qui définit la couleur de vos hyperliens, titre et police, ainsi que le type de police.
L'ancre est définie par l'attribut name, tandis que le lien utilise href. Au contraire du lien externe, qui
appèle le URL de la page de destination, on indique le nom de l'ancre comme destination.
Insérez un hyperlien interne en modifiant le code de votre page de la façon suivante :
<style type="text/css">
<!-A {color: lime}
P { font: verdana;
color: silver}
<html>
H1 {color: red}
<head>
<title>Ma première page web</title>
</head>
<body>
<a name="haut"></a>
<h1>Ma première page</h1>
H3 {color: yellow}
H5 {color: yellow}
<h5>Bienvenue à tous!</h5>
-->
</style>
<p>Bonjour et bienvenue sur ma première page web.</p>
Ces instructions doivent apparaître à l'intérieur des balises <head></head>.
Je m'appelle André, j'ai 45 ans et j'habite l'arrière pays. <br><br>
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!<br><br>
Voici mon humble demeure :<br><br>
<img src="maison.jpg" alter="ma charmante maison"> <br><br> <br><br>
Cliquez <a href="http://www.webdonline.com">ici</a> pour accéder à mon site internet favori. <br><br>
<br><br>
Cliquez <a href="#haut">ici</a> pour retourner en haut de la page. <br><br>
La définition des styles s'appliquera à toutes les balises inscrites entre les balises <body></body>.
Içi, la définition de style indique que les hyperliens (A) apparaîtront en vert lime. Le texte des
paragraphes sera en argent et utilisera une police verdana. Enfin, les titres H1 seront en rouge et les
titres H3 et H5 seront en jaune.
Pour plus de détail, consultez le tutorial sur les feuilles de style
(/fr/tutoriels/tut_details.asp?domainid=26&coursid=30&leconid=153).
Arrière plan
</body>
</html>
Pour insérer une image d'arrière plan, il faut utiliser l'attribut background de la balise <body>. Voici
un exemple :
Voilà vous connaissez maintenant les bases de la programmation HTML pour concevoir votre premier
site Internet.
<body background="background.jpg">
L'image d'arrière plan devrait être en format jpeg (.jpg) ou gif (.gif). De plus, l'image devrait être
placée dans le même répertoire que la page web.
Fethi Ben Amor
Page - 27 -
Fethi Ben Amor
Page - 28 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
Informatique 2 – NTE
Partie 2 : Créer un site Web
Vous pouvez construire votre propre image d'arrière plan en utilisant des outils de graphisme comme
Corel Draw ou Photoshop. Il est aussi possible de trouver une image en consultant la section Images
<tr></tr>.
gratuites
(http://www.gograph.com/fusion/IntegrationProcessor.cfm?user=332&Page=Result&Refresh=012008)
(/fr/tutoriels/tut_details.asp?domainid=26&coursid=23&leconid=167).
sur
Le tableau est défini par les balises <table></table>. Chaque rangée est définie par les balises
Enfin, chaque cellule d'une rangée est définit par les balises <td></td>. Pour en savoir
plus sur les tableaux, consultez le tutorial HTML
WebD qui pourra vous servir de logo.
Votre barre de navigation comportera une rangée avec autant de cellule qu'il y a de lien.
Lignes horizontales
Les lignes horizontales sont de bons éléments pour séparer visuellement les sujets importants ou les
différentes sections de votre page.
Pour insérer une ligne horizontale, utilisez la balise <hr>. Pour plus de détail,
HTML (/fr/tutoriels/tut_details.asp?domainid=26&coursid=23&leconid=162#hr).
consultez le tutoriel
Logo
Un logo est utilisé pour donner une image à votre site. Généralement, le logo apparaît dans la partie
supérieure de vos pages.
Vous pouvez construire votre propre logo en utilisant des outils de graphisme comme Corel Draw ou
Photoshop. Il est aussi possible de trouver une image en consultant la section image gratuite sur WebD
qui pourra vous servir de logo.
Les logos sont insérés de la même manière qu'une image, en utilisant la balise <img>.
Voici un exemple :
<table width="100%">
<tr bgcolor="#000099">
<td width="25%" align="center"
d'accueil</a></td>
<td width="25%" align="center"
<td width="25%" align="center"
<td width="25%" align="center"
</tr>
</table>
valign="bottom"><img src="home.gif"><a href="l">page
valign="bottom"><a href="">page 1</a></td>
valign="bottom"><a href="">page 2</a></td>
valign="bottom"><a href="">page 3</a></td>
Cette barre de navigation contient 4 cellules sur une couleur de fond bleu (#000099 qui est noté en
RGB) et inclut une icône pour représenter la page d'accueil.
10 MISE EN PAGE DU MODELE
Il est maintenant temps de rassembler tous les éléments de votre modèle et de les mettre en page. Voici
un exemple de modèle :
<img src="logo.gif">
<html>
<head>
<title>Nom du site web</title>
Icônes
Les icônes sont utilisés de la même manière qu'un bouton. Ils abritent généralement des hyperliens.
Vous pouvez construire vos propres icônes en utilisant des outils de graphisme comme Corel Draw ou
Photoshop. Il est aussi possible de trouver des images en consultant la section Images gratuites sur
WebD qui pourront vous servir d'icônes.
Pour insérer un hyperlien sur une image, il suffit d'insérer une image à l'aide de la balise <img> à
l'intérieur des balises de lien <a></a>.
Vous pouvez utiliser cette icône pour faire l'exemple :
<style type="text/css">
<!-A {color: lime}
P { font: verdana,arial;
color: silver}
H1 {color: red}
H3 {color: yellow}
H5 {color: yellow}
-->
</style>
</head>
<body bgcolor="blue" background="background.gif">
<table>
<tr>
<td><img src="logo2.gif" alter="mon logo"></td>
<td><h1> Inscrire le nom du site</h1></td>
</tr>
</table>
Voici un exemple :
<a href=http://www.webdonline.com><img src="home.gif"></a>
Barre de navigation
Il faut d'abord créer une structure pour recevoir les liens. Cette structure sera un tableau parce qu'il est
facile de les manipuler et de les mettre en page et de changer les couleurs de fond.
<table width="100%">
<tr bgcolor="#000099">
<td width="25%" align="center"
d'accueil</a></td>
<td width="25%" align="center"
<td width="25%" align="center"
<td width="25%" align="center"
</tr>
</table>
Fethi Ben Amor
Fethi Ben Amor
Une barre de navigation pourra être utile pour aider vos visiteurs à naviguer sur votre site. On retrouve
dans la barre de navigation un lien vers la page d'accueil et vers les pages principales de votre site.
Voici comment construire une barre de navigation simple :
Page - 29 -
valign="bottom"><img src="home.gif"><a href="">page
valign="bottom"><a href="">page 1</a></td>
valign="bottom"><a href="">page 2</a></td>
valign="bottom"><a href="">page 3</a></td>
Page - 30 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
Informatique 2 – NTE
Partie 2 : Créer un site Web
Placer les images et icônes
<a name="haut"><h3 align="center">Titre de la page</h3>
<hr align="center">
<h5>titre de la section</h5>
Utilisez la balise <img> pour insérer vos images et icônes.
<p>Entrer le texte ici<br><br>
Si vous voulez insérer un lien sur une icône, l'image devra se trouver entre les balises <a></a>.
Entrer le texte ici<br>
Cliquez <a href="">Entrez un lien ici</a> <br><br>
Voici un exemple :
<h5>titre de la section</h5>
<a href=http://www.webdonline.com><img src="home.gif"></a>
<p>Entrer le texte ici<br><br>
Faire les liens internes et externes vers d'autre site internet
Cliquez <a href="#haut">ici</a> pour retourner en haut de la page. <br><br>
Maintenant, procédez à l'insertion des liens internes et externes vers des pages à l'extérieur de votre
site. Vous créerez les liens vers les autres pages de votre site lorsque toutes les pages seront créées.
</body>
</html>
Visualisez le modèle
Notez que vous êtes libre d'aménager votre modèle comme vous le souhaitez et qu'il est possible qu'un
des éléments ne soit pas approprié. Pour ce modèle, il n'est pas nécessaire d'inscrire le nom du site
entre les balises <h1></h1> puisque son nom apparaît dans le logo.
Pour un lien internet, il faut créer une ancre (<a name="ancre">) et un lien (<a href="#ancre">). Voici
un exemple :
<a name="ancre">
...
Cliquez<a herf="#ancre">ici</a> pour aller en haut de la page.
Créez votre site en étant imaginatif...
Pour un lien externe, il suffit de faire le lien vers la page de destination. Voici un exemple :
Enregistrer le modèle
Une fois que votre modèle est créé, enregistrez-le sous un nom significatif, comme modele.html, afin
de le retrouver facilement lors de la conception de votre site.
11 CONCEVOIR UNE PAGE WEB
Enregistrez la page web
Voilà, votre page est terminée, il faut maintenant la sauvegarder en cliquant Fichier > Enregistrer.
Votre modèle est créé, passons à la conception de votre site. Nous vous conseillons de terminer par la
page d'accueil puisqu'il sera alors plus facile de faire les liens externes vers les autres pages de votre
site si elles sont déjà construites.
Ouvrez le modèle
D'abord, ouvrez votre modèle et enregistrer-le immédiatement sous un autre nom pour ne pas perdre le
modèle.
ƒ
ƒ
ƒ
Cliquez<a herf="http://www.webdonline.com">ici</a> pour aller vers mon site préféré.
Cliquez Fichier > Enregistrez sous;
Choisissez le nom de votre page;
Cliquez OK.
Vous allez maintenant visualiser ce que le navigateur affichera sur internet:
ƒ
ƒ
ƒ
ƒ
Ouvrez votre navigateur;
Dans le menu fichier, cliquez Ouvrir;
Sélectionnez votre fichier
Cliquer Ouvrir.
Recommencez pour les autres pages
Recommencez pour toutes les autres pages de votre site, à l'exception de la page d'accueil.
12 CONSTRUIRE UNE PAGE D'ACCUEIL
La page d'accueil est une page spéciale. C'est sur cette page que vos visiteurs arriveront. Elle fait le
lien vers les autres pages de votre site.
Choisir le titre de la page
À l'endroit approprié sur votre page, entrez le nom de votre page. Par exemple, dans notre modèle,
nous inscririons le nom de la page entre les balises <h3></h3>
Entrez le texte de votre page
Tapez le texte qui doit apparaître dans votre page aux endroits appropriés. Ajoutez devant chaque
paragraphe la balise <p> et la balise <br> pour chaque changement de ligne.
Elle doit être attrayante et originale pour inciter vos visiteurs à parcourir votre site.
Cependant, elle reste une page web et elle est conçue de la même façon que les autres pages de votre
site.
Ouvrir le modèle
Prenez soin de supprimer les phrases <p>Entrer le texte ici<br><br> de votre modèle.
Fethi Ben Amor
Page - 31 -
Fethi Ben Amor
Page - 32 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
Informatique 2 – NTE
Partie 2 : Créer un site Web
D'abord, ouvrez votre modèle et enregistrez-le immédiatement sous un autre nom pour ne pas perdre le
modèle. Le nom que vous choisissez doit être parmi les noms index.html ou default.html.
14 AJOUTER DES SERVICES
Ce nom permettra au serveur web qui hébergera votre site de diriger les internautes vers votre page
d'accueil automatique lorsqu'il reconnaîtra l'adresse de votre site.
Vous pouvez rendre votre site web encore plus interactif et plus attirant aux yeux des internautes en
vous offrant une gamme de services tels que : des compteurs, chats, forum, livre d'or et plus encore.
ƒ
ƒ
ƒ
Visitez la section des outils pour webmasters ('http://www.webdonline.com/fr/index.asp) pour obtenir
plus de détail sur les outils offert.
Cliquez Fichier > Enregistrez sous;
Choisissez le nom de votre page, soit index.html ou default.html;
Cliquez OK.
15 PUBLIER VOTRE SITE INTERNET
Construire votre page
Votre site est maintenant prêt pour être lancé sur internet. Si vous utilisez un hébergeur disponible sur
Internet, vous trouverez toutes les instructions pour mettre en ligne votre site sur le site web de
l'hébergeur.
Ajoutez aux endroits appropriés le titre de la page, le texte et les images.
Faire les liens internes et externes vers les pages de votre site
Créez maintenant tous les hyperlien en incluant les liens vers les autres pages de votre site, par
exemple, dans la barre de navigation.
Voici comment procéder pour un hébergement type :
Logiciel FTP
Enregistrez votre page
Pour mettre en ligne votre site internet, vous devez posséder un logiciel FTP qui vous permettra de
télécharger votre site sur le serveur de votre hébergeur.
Enregistrez à nouveau votre page.
Vous allez maintenant visualiser ce que le navigateur affichera sur internet.
ƒ
ƒ
ƒ
ƒ
Si vous ne possédez aucune application FTP, nous vous proposons d'utiliser WS_FTP LE 5.08 puisque
vous pourrez le télécharger gratuitement. Pour obtenir d'autres suggestions de logiciel FTP, visitez la
section sur les logiciels FTP (/fr/ressources/index.asp?cat=2).
Ouvrez votre navigateur;
Dans le menu fichier, cliquez Ouvrir;
Sélectionnez votre fichier
Cliquer Ouvrir.
Avant de télécharger
Pour effectuer le téléchargement, vous devez posséder les informations suivantes :
•
•
•
13 COMPLETER LES HYPERLIENS
Votre site est presque terminé, il ne vous reste qu'à compléter les hyperliens que vous insérerez pour
permettre la navigation entre les pages de votre site Internet.
Votre nom d'usager et mot de passe pour accéder au serveur;
L'adresse IP du serveur;
Le chemin d'accès à votre répertoire dans lequel sera conservé votre site (si nécessaire).
S'il vous manque l'une ou l'autre de ces informations, vous devrez contacter votre hébergeur pour
obtenir les renseignements manquants.
Ouvrez tour à tour vos pages et complétez les liens, par exemple, ceux de la barre de navigation.
Ensuite, enregistrez les changements.
Télécharger votre site
Une fois terminé, vérifiez vos liens à l'aide de votre navigateur.
Vous allez maintenant transférer votre site sur le serveur de votre hébergeur :
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
Ouvrez votre navigateur;
Dans le menu fichier, cliquez Ouvrir;
Sélectionnez votre fichier;
Cliquez Ouvrir;
Cliquez sur tous les liens.
Notez que certains éditeurs HTML WYSIWYG fournissent des outils pour faire cette vérification.
Fethi Ben Amor
Page - 33 -
Ouvrez votre logiciel FTP;
Connectez-vous au serveur: il faut inscrire dans la fenêtre Propriété de session :
•
•
•
Fethi Ben Amor
Votre nom d'usager (user ID),
Votre mot de passe (Password);
L'adresse IP (Host name/Address);
Page - 34 -
Informatique 2 – NTE
ƒ
Partie 2 : Créer un site Web
Transférez votre site;
•
•
•
•
•
Informatique 2 – NTE
Partie 2 : Créer un site Web
Notes :
Dans la fenêtre de gauche, nommée Local
system, représente votre disque dur. Retrouvez le
répertoire qui contient votre site;
La fenêtre de droite, nommée Remote site, est le
répertoire de votre site web sur le serveur;
Sélectionnez les fichiers que vous voulez
transférer, en incluant les images;
Cliquer sur le bouton Transfer pour télécharger
vos fichiers;
Cliquez le bouton Close pour terminer la session
FTP.
Notez que si votre site contient des sous-répertoires, par exemple pour conserver vos images, il est
important de conserver la même structure de répertoire sur le serveur. Vous pouvez créer un nouveau
répertoire sur le serveur en cliquant le bouton MkDir de la fenêtre Remote site.
Lorsque vous avez terminé, allez visiter votre site en tapant votre URL dans le navigateur pour vérifier
que le transfert est bien complété.
16 REFERENCER VOTRE SITE
Une fois que votre site est en ligne, vous devez le référencer pour le faire connaître aux autres
internautes. Consultez le tutoriel (/fr/tutoriels/tut_details.asp?domainid=27&coursid=20&leconid=126)
sur le référencement de site pour obtenir plus d'information.
Vous pouvez inscrire votre site sur le site de Francité. Vous serez alors inscrit automatiquement sur 15
moteurs de recherches :
ƒ
ƒ
ƒ
Cliquez ici pour vous rendre sur le site de Francité;
Cliquez le lien Ajouter un site;
Suivez les instructions pour votre inscription.
17 METTRE A JOUR VOTRE SITE INTERNET
Pour mettre à jour votre site, il suffit de modifier les fichiers que vous voulez mettre à jour et qui se
trouve sur votre disque dur. Vous pouvez aussi ajouter de nouvelles pages, mais il faut prendre soins
d'ajouter les liens nécessaires sur les pages existantes.
Une fois que vous aurez terminé vos modifications. Il faut mettre à jour les fichiers sur le serveur
d'hébergement.
ƒ
ƒ
ƒ
Ouvrez votre logiciel FTP;
Connectez-vous;
Transférez les fichiers que vous avez modifiés. Il peut être plus prudent de transférer à nouveau
tous les fichiers de votre site pour être certain que le serveur possède la dernière version de votre
site web.
Fethi Ben Amor
Page - 35 -
Fethi Ben Amor
Page - 36 -
Informatique 2 – NTE
Partie 2 : Créer un site Web
Notes
Fethi Ben Amor
Informatique 2 – NTE
Partie 2 : Créer un site Web
Notes
Page - 37 -
Fethi Ben Amor
Page - 38 -