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

Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 21 -
1. INTRODUCTION
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.
A
Av va an nt t d de e c co om mm me en nc ce er r
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.
Mais pour débuter, commencez par un sujet que vous maîtrisez bien!
Trouver un hébergement
Pour afficher votre site sur le web, il faudra trouver un espace sur un serveur connecté à Internet.
Fournisseur d'accès Internet
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.
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. Persocité (http://persoinscription.francite.com/fr/index.asp)
ii. CitéWeb (http://citeweb.net/)
iii. iQuébec (http://www.iquebec.com/heberg/)
iv. iFrance (http://www.ifrance.com/heberg/)
v. Forez.com (http://www.forez.com/portail/)
Pour un liste plus complète allez à : www.webdoline.com/fr/ressources/index.asp?cat=7
Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 22 -
2 LE NOM DU SITE WEB
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".
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)
2. STRUCTURE DU SITE WEB
Vous possédez maintenant le nom de votre site, il faut passer à la conception du site.
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.
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!
4. CHOISIR UN EDITEUR HTML
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.
Vous pouvez utiliser un éditeur WYSIYG pour créer vos pages web. En voici quelques-uns :

Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 23 -
• WebExpert
• Frontpage
• Dreamweaver
• GoLive
Pour obtenir d'autres suggestions, consultez la section Ressources
(http://www.webdonline.com/fr/ressources/index.asp?cat=1) de WebD.
Il existe aussi des applications disponibles sur Internet qui vous permettront de construire vos pages
web :
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
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
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:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
• 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.
Choisir le titre de la page
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.
Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 24 -
Tapez donc votre titre à l'intérieur des balises de titre :
<title>Ma première page web</title>
6 AJOUTER DU CONTENU
Ajouter du texte
Une page internet est constituée en parti par du texte. Le texte devra être entré à l'intérieur des balises
<body> pour que les navigateurs puissent l'afficher.
Entrez votre texte :
<html> <head>
<title>Ma première page web</title>
</head>
<body>
Ma première page
Bienvenue à tous!
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.
Mettre en page votre texte
Vous avez sûrement remarqué que le texte n'a pas encore été mis en page.
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 :
<html>
<head>
<title>Ma première page web</title>
</head>

Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 25 -
<body>
<h1>Ma première page</h1>
<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>
Ce sont mes premiers pas sur le web et je trouve ça facile d'écrire en HTML!
</body>
</html>
Enregistrez votre document à nouveau, retournez à votre navigateur et cliquez le bouton Actualiser
pour afficher la dernière version de votre document.
Voilà qui est mieux!
7 AJOUTER UNE IMAGE
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 :
 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;
Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 26 -
 Cliquer Enregistrer.
Dans votre page web, modifiez le code de la façon suivante :
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
<h1>Ma première page</h1>
<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>
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.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>
<h1>Ma première page</h1>

Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 27 -
<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>
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>
</body>
</html>
Allez tester votre lien dans le navigateur.
Insérer un lien interne
Un lien interne est composé de deux éléments, une ancre et un lien. L'ancre sert de destination au lien.
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 :
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
<a name="haut"></a>
<h1>Ma première page</h1>
<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>
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>
</body>
</html>
Voilà vous connaissez maintenant les bases de la programmation HTML pour concevoir votre premier
site Internet.
Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 28 -
9 PERSONNALISER UN SITE WEB
Couleurs de police, d'arrière plan, hyperlien, etc
La première chose qu'il est possible de personnaliser est la couleur de votre site.
Voici comment définir la couleur d'arrière plan de votre site web :
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 bgcolor="silver">
Ce code affichera la couleur argent en arrière plan.
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.
<style type="text/css">
<!--
A {color: lime}
P { font: verdana;
color: silver}
H1 {color: red}
H3 {color: yellow}
H5 {color: yellow}
-->
</style>
Ces instructions doivent apparaître à l'intérieur des balises <head></head>.
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
Pour insérer une image d'arrière plan, il faut utiliser l'attribut background de la balise <body>. Voici
un exemple :
<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.

Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 29 -
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
gratuites
(http://www.gograph.com/fusion/IntegrationProcessor.cfm?user=332&Page=Result&Refresh=012008) sur
WebD qui pourra vous servir de logo.
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, consultez le tutoriel
HTML (/fr/tutoriels/tut_details.asp?domainid=26&coursid=23&leconid=162#hr).
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>.
<img src="logo.gif">
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 :
Voici un exemple :
<a href=http://www.webdonline.com><img src="home.gif"></a>
Barre de navigation
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 :
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.
Informatique 2 – NTE Partie 2 : Créer un site Web
Fethi Ben Amor Page - 30 -
Le tableau est défini par les balises <table></table>. Chaque rangée est définie par les balises
<tr></tr>. 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
(/fr/tutoriels/tut_details.asp?domainid=26&coursid=23&leconid=167).
Votre barre de navigation comportera une rangée avec autant de cellule qu'il y a de lien.
Voici un exemple :
<table width="100%">
<tr bgcolor="#000099">
<td width="25%" align="center" valign="bottom"><img src="home.gif"><a href="l">page
d'accueil</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 1</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 2</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 3</a></td>
</tr>
</table>
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 :
<html>
<head>
<title>Nom du site web</title>
<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>
<table width="100%">
<tr bgcolor="#000099">
<td width="25%" align="center" valign="bottom"><img src="home.gif"><a href="">page
d'accueil</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 1</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 2</a></td>
<td width="25%" align="center" valign="bottom"><a href="">page 3</a></td>
</tr>
</table>