COURS DE DEVELOPPEMENT

WEB
L2 LMD informatique
Par ASS VICTOR MUELA

Année académique 2024-2025

 Plan du Cours
1. Technologie web
1.2. Introduction à Internet; 1.2. Les technologies web
1.3. Les composants d’une application web
2. XHTML : Un vocabulaire XML pour le web
2.1. Introduction à XHTML
2.2. Structure d’un programme XHTML
2.3. Programmes XHTML; 2.4. Les tableaux
2.5. Les feuilles de style; 2.6. Formulaire
3. Créer un site
3.1. Généralités; 3.2. Structure d’une page web
3.3. Recommandations;
3.4. Organisation du site et mise en ligne
4. Utilisation d’un outil de conception (Editeurs WYSIWYG)
4.1. Introduction
4.2. Présentation du Dreamwearver
5. Liste des thèmes proposés pour les travaux dirigés sur la conception des sites
web.

ASS2. VICTOR MUELA 2

 [Link] web
1.1. Introduction à l’internet et web
Internet
L’Internet (international Network) est fait de nombreux réseaux
distincts et interconnectés appartenant à des organisations
commerciales, académiques et gouvernementales, ainsi que de
fournisseurs de services Internet (FSI ou ISP, Internet Service
Provider).
Le web
C’est ce que les anglophones appellent « World Wide Web », d’où
l’acronyme www, et les francophones la « toile mondiale » n’est
qu’un moyen simple de cliquer pour explorer le volume gigantesque
des pages d’informations situées sur internet.
Le web est aussi une des possibilités offertes par le réseau Internet
de naviguer entre des documents reliés par des liens hypertextes.
Un site web (aussi appelé site internet ) est un ensemble de fichiers
HTML stockés sur un ordinateur connecté en permanence à internet
et hébergeant les pages web (serveur web).

ASS2. VICTOR MUELA 3

 [Link] web (2)
Un site web est habituellement architecturé autour d'une page
centrale, appelée «page d'accueil».
La création d'un site web est un projet à part entière comprenant 3
phases :
Conception qui représente la formalisation de l'idée ;
Réalisation qui correspond au développement du site web ;
Hébergement qui se rapporte à la mise en ligne du site, de
manière permanente.
On appelle « page web statique » une page web constituée d'un
fichier texte contenant du code HTML et éventuellement des
images et des liens vers d'autres documents.
Un site constitué de pages web statiques se verra ainsi qualifié de
« site web statique ». Et une page dynamique est générée à la
volée par un programme informatique.

ASS2. VICTOR MUELA 4

 On distingue trois types de sites

Site Statique : les requêtes portent sur des fichiers html.

Site Dynamique : les requêtes déclenche sur le serveur

l'execution d'un script. Le script produit une page HTML.

Site "Sapin de Noël" : les requêtes portent sur des fichiers html
contenant des scripts coté client.

ASS2. VICTOR MUELA 5

 1. Technologie web (3)
[Link] technologies web
Le W3C, l’organisme chargé de standardiser les normes relatives à
internet a actuellement spécifié la version XHTML 1.0 pour la
diffusion de documents sur le web.
Un site web statique est suffisant lorsqu'il ne contient que quelques
dizaines de pages mais son exploitation et sa mise à jour peuvent
vite atteindre les limites suivantes (une maintenance, l'impossibilité
de renvoyer une page personnalisée et de créer une page
dynamiquement selon les entrées d'une base de données etc.)
C'est pourquoi des technologies permettent d'automatiser la
génération de pages web. Parmi lesquelles les plus répandues sont :
CGI (Common Gateway Interface), le langage ASP (Active Server
Pages), le langage PHP (Hypertext preprocessor), et le langage JSP
(Java Server Pages).
Le DHTML (Dynamic HyperText Markup Language) est un ensemble
de langages complémentaires au HTML et permettant de rendre une
page web plus dynamique et non le contenu. Ces langages sont : le
Javascript, le DOM (Document Object Model) et les feuilles de style
(CSS - Cascading StyleSheets).
ASS2. VICTOR MUELA 6
 1. Technologie web (4)
1.3. Les composants d’une application web
Une application web est constituée d’une machine cliente et d’une
machine serveur comme illustrée dans la figure suivante.

ASS2. VICTOR MUELA 7

 2. XHTML : Un
vocabulaire XML pour le
web
 2.1. Introduction à XHTML
Définition : XHTML (eXtensible Hypertext Markup Language, en français
langage de balisage hypertexte extensible) est une recommandation du
W3C (www Consortium).
Pour créer des documents XHTML, il suffit de respecter les règles de XML,
avec quelques additions :
•Le document peut de manière optionnelle, commencer par une déclaration
XML.
•Une déclaration de DOCTYPE (Document Type) doit être présente,
référençant un des documents suivants : strict, transitional ou frameset. …
Le DOCTYPE, Document Type, déclare au navigateur la norme utilisée. Il doit
être placé en tout début du code source, avant la balise <html>. Le plus
utilisé Transitional :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]

ASS2. VICTOR MUELA 9

 2.1.4. Editeurs XHTML
Un éditeur XHTML (ou éditeur Web) est un logiciel conçu
pour faciliter la préparation et la modification de documents
écrits en HTML. Il existe deux catégories d'éditeurs :
•Les éditeurs de texte (Notepad, Htmldit, Ecoder, …) éditent
directement en langage HTML : le code y apparaît et y est
traité comme du texte.
•Les éditeurs WYSIWYG, What You See Is What You Get
(Adobe GoLive, Dreamweaver, MS Frontage, …) permettent
d'éditer une page Web à peu près telle qu'elle apparaît dans
les navigateurs courants.
L'édition des images, des animations ou du son sont
effectuées avec les logiciels appropriés.

ASS2. VICTOR MUELA 10

 Structure d’un programme
XHTML
Typiquement, un document XHTML se présente avec la structure suivante :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>

ASS2. VICTOR MUELA 11

 Programmes XHTML
Exemple (utilisation de la structure)
Créer une page web qui va afficher à l’écran « Mon cours de programmation
web » et dans la barre de titre « Ma première page XHTML ».

ASS2. VICTOR MUELA 12

 Procédé :
Ouvrir le bloc-notes et taper le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<title>Ma première page XHTML</title>
</head>
<body>
Mon cours de programmation web
</body>
</html>
 Enregistrer le document avec l’extension html (ou htm). Par exemple
[Link]
 Ouvrir le fichier enregistré par partir du navigateur web.

ASS2. VICTOR MUELA 13

 Récapitulatif
<HTML> Ceci est le début d'un document de type HTML.

</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le début de la zone d'en-tête (prologue au
document proprement dit contenant des informations
destinées au browser).

</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du Titre de la page.
</TITLE> Ceci est la fin du Titre de la page.
<BODY> Ceci est le début du document proprement dit.

</ BODY> Ceci est la fin du document proprement dit.

ASS2. VICTOR MUELA 14

Styles de caractères
Balise Description
<b> ou <strong> Mettre le texte en gras
<i> ou <em> Mettre le texte en italique
<u> Souligner le texte
<s> Définir un texte barré
<marquee> Définir un texte défilant
<sup> Définir un texte en exposant
<sub> Définir un texte en indice
<font> Définir les attributs des caractères d’un
texte

ASS2. VICTOR MUELA 15

 Styles de caractères et saut de
ligne
Il suffit d’ajouter la fin de la ligne la balise <br/>.
Exercice 1: Créons une pages web : Exercice1 dont :
- Le contenu de la barre de titre : Cours de programmation
- Le contenu de la page :
Orientations :
Programmation procédurale
Programmation orientée objet
Programmation web

ASS2. VICTOR MUELA 16

 Solution
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<title>Cours de programmation</title>
</head>
<body>
<b><u>Orientations</u> : </b><br/>
Programmation procédurale</br>
Programmation orientée objet</br>
<i>Programmation web</i>
</body>
</html>

ASS2. VICTOR MUELA 17

 Balise marquee
La balise marquee peut être définie avec l’attribut direction qui déterminer le
sens du défilement qui par défaut est left (gauche). Cet attribut reçoit les
valeurs : right (droite), down (bas), up (haut)…
Exemple : Faire défiler le titre Orientations de l’exercice précédent :
Vers la droite : <marquee direction=“right”>

ASS2. VICTOR MUELA 18

Hyperliens
Les liens permettent de naviguer entre les pages web.

Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la
nouvelle page.
Il y a 3 types de liens :
Les liens internes à un site.
Les liens internes à une page (ou ancre).
Les liens externes.
La structure d’un lien est définie comme suit :
<a href="xxx"> Lien</a>

ASS2. VICTOR MUELA 19

Liens internes à un site
On suppose que la page vers laquelle est faite le lien se trouve dans le même
répertoire que la page web en cours :
<a href="[Link]">Lien vers la page 2</a>
Sinon, on précise le chemin d’accès:

<a href="sous_repertoire/[Link]">Lien vers une page2</a>; sous

répertoire

<a href="../repertoire/[Link]">Lien vers une page2</a>; autre répertoire.

N.B. : Il est également possible d’utiliser une image à la place du texte.

Exemple : Définir lien entre [Link], texte « programmation web » vers

l’exercice1.

ASS2. VICTOR MUELA 20

 Liens internes à une page
1. On marque d'abord la cible (l'endroit que l'on veut atteindre):
<a id="Ancre1"> Texte qui sera ciblé </a>
2. On réalise le lien vers cette cible en marquant un texte ou une image avec :
<a href="#Ancre1"> Texte de l'hyperlien </a>

ASS2. VICTOR MUELA 21

Liens externes au site
<a href="http ://url">Lien vers le site externe</a>
Exemple
<a href="http ://[Link]/[Link]">UNIKIN</a>

Adresser un message
électronique
Ecrire un mail à un correspondant:
<a href="MAILTO:adresse_correspondant?Subject=Obj
et_du_message"> ancre </a>
Ecrire un mail à plusieurs correspondants :
<a href="MAILTO:adresse1?cc=adresse2&bcc=
adresse3&Subject=Info"> ancre </a>

ASS2. VICTOR MUELA 22

 Gestion des images
La balise <img …/> permet d'insérer une image dans une page XHTML. Les seuls
formats d'images acceptés par W3C sont : jpeg (.jpg), png et gif. Les principaux
attributs :
src : Indique l'emplacement de l'image
align : Spécifie l'alignement de l'image par rapport au texte adjacent (TOP,
MIDDLE, et BOTTOM)
width : Permet de spécifier la largeur de l'image.
height : Permet de spécifier la hauteur de l'image.
Exemple : <img src="[Link]" alt="Photo junior" title="Junior à 2 ans"/>

ASS2. VICTOR MUELA 23

 Gestion de multimédias
La basile embed permet d'insérer un fichier audio ou vidéo (le multimédia)
dans une page XHTML. Certains formats ne sont pas pris en charge.
Les principaux attributs de la balise sont les suivants :
 src : Indique l'emplacement du fichier (il est obligatoire).
 autostart : Spécifie si l’élément va se lancer automatiquement à l’affichage
de la page web ou pas.

ASS2. VICTOR MUELA 24

 Exemples sur la gestion de
multimédias
Déterminer l’emplacement du fichier. De préférence, le mettre dans le même
dossier que la page, puis insérer la balise dans le code XHTML.
Fichier audio :
<embed src="carl.mp3" autostart=false>
Fichier vidéo :
<embed src= "Dan.3gp" autostart=True>

ASS2. VICTOR MUELA 25

 La mise en page (1)
La balise font
Elle est destinée à définir les attributs des caractères d’un texte, et peut dont
recevoir les attributs :
 size (taille) qui peut prendre la valeur 1 à 7, avec taille par défaut 3.
 face (police) qui peut prendre la valeur : arial, tahoma, courrier, …
 color (couleur) qui peut prendre une valeur des couleurs données.

ASS2. VICTOR MUELA 26

 La mise en page (2)
L’attribut color (couleur) qui peut prendre une des valeurs suivant
le tableau ci-après :
Couleur Code RVB Couleur Code RVB Couleur Code RVB

Black violet #EE82EE orange

#000000 #FFA500
blue #0000FF gray #808080 beige #F5F5DC

green #008000 navy #000080 Cyan ou #00FFFF

aqua
red #FF0000 purple #800080 maroon #800000

yellow #9ACD32 white #FFFFFF Magenta ou #FF00FF

fuchsia
lime #00FF00 olive #808000 sylver #C0C0C0

ASS2. VICTOR MUELA 27

 La mise en page (3)
Pour définir une couleur de fond de la fenêtre d’une page XHTML, on utilise
l’attribut bgcolor :

<body bgcolor="nom_de_la_couleur" ou "code_RVG">

Ex : <body bgcolor="#FFFFFF"> permet d’obtenir une page XHTML sur un
fond blanc alors que par défaut, le fond est gris.
L’attribut background permet de spécifier une image résidant sur le serveur.
<body background ="nom_de_l’image">
Ex : <body background="[Link]">
N.B. : Ceci augmente malheureusement le temps de chargement de la page
vers le navigateur.

ASS2. VICTOR MUELA 28

 La mise en page (4)
Alignement du texte
 La balise <p> …</p> permet de définir un paragraphe. Sa balise ouvrante
fait passer à la ligne et en sauter une. Parmi ses attributs, align détermine
l’alignement du texte. Il reçoit les valeurs : left pour texte aligné à gauche
(c'est l'alignement par défaut), center pour texte centré, right pour texte
aligné à droite et justify pour texte justifié.
Exemple : Arranger un long texte en terme de paragraphes.
 Pour centrer un texte, on peut également utiliser : <center>Texte à
centrer</center>

ASS2. VICTOR MUELA 29

 La mise en page (5)
Le mode journal
 La basile <multicol> permet la mise en forme d’un document en colonnes
multiples, comme dans un journal. Ses principaux attributs sont : cols qui
spécifie le nombre de colonnes de largeur égale, Width qui permet de
déterminer la largeur en pixels des colonnes et Gutter qui définit la largeur
en pixels de la gouttière (espace entre deux colonnes).
Exemple : Définir un long texte en plusieurs colonnes.

ASS2. VICTOR MUELA 30

 Les listes et les titres
Les listes
Pour présenter une certaine arborescence dans un sommaire par
exemple, il est souvent pratique d'utiliser une liste.
 La balise <ul>…</ul> avec l’attribut "type" prenant les valeurs (disc,
circle, square) permet de créer une liste à puces. Chaque élément de
la liste est placé dans <li>…</li>.
 Et la balise <ol>…</ol> avec l’attribut "type" prenant les valeurs (1, 2,
… ou a, b, …ou A, B, … ou i, ii, … ou I, II, …) permet de créer une liste
numérotée (avec des chiffres ou des lettres). Chaque élément de la
liste est placé dans <li>…</li>. Et l’attribut start détermine la valeur
du début de la liste.

ASS2. VICTOR MUELA 31

 Les listes et les titres (1)
Exemple 1:
<body>
<b>Plan du cours :</b>
<ul type="disc">
<li> Technologies web</li>
<li> XHTML : un vocabulaire XML pour le web </li>
<li> Créer un site</li>
<li> Utilisation d’un outil de conception</li>
</ul>
</body>

ASS2. VICTOR MUELA 32

 Les listes et les titres (2)
Exemple 2:
<body>
<b>Plan du cours :</b>
<ol type="i">
<li> Technologies web</li>
<li> XHTML : un vocabulaire XML pour le web </li>
<li> Créer un site</li>
<li> Utilisation d’un outil de conception</li>
</ol>
</body>

ASS2. VICTOR MUELA 33

 Les listes et les titres (3)
Exemple des listes imbriquées :
<body>
<b><u>Horaire</u></b>
<ol type="I">
<li>Lundi à Vendredi</li>
<ol type="a">
<li>Avant-midi</li>
<ul> <li>8h à 10h</li> <li>10h à 12h</li> </ul>
<li>Après-midi</li>
<ul> <li>13h à 15h</li></ul>
</ol> <li>Samedi</li>
<ul> <li>8h à 10h</li> <li>10h à 12h</li> </ul>
</ol>
</body>

ASS2. VICTOR MUELA 34

 Les listes et les titres (4)
Titres
Les titres permettent d’organiser le contenu en rubrique et en
sous-rubrique, à votre convenance, comme vous le ferez dans
un document structuré.
Le navigateur affiche le titre en gras et en grand, suivant chaque
niveau : h1, h2, …, h6.
Exercice : Proposer un code qui affiche les six premiers mois de
l’année comme des titres de niveau : h1, h2, …, h6.
<h1>Janvier</h1> …

ASS2. VICTOR MUELA 35

 Les tableaux
Les tableaux permettent de dresser des listes de données en lignes et en
colonnes. Ils sont définis comme étant des suites de lignes et sont parfois
utilisés pour faire de la mise en page, que l’on effectue plus efficacement
avec le CSS.
 Le tableau est encadré par les balises <table> et </table>.
 Son titre par <caption> </caption>
 Chaque ligne par <tr> </tr> (Table Row : ligne du tableau).
 Les cellules d'en-tête par <th> </th> (pour Table Header : En-tête de tableau)
 Les cellules des valeurs par <td> </td> (Table Data: Donnée de tableau)

ASS2. VICTOR MUELA 36

Les tableaux (2)

ASS2. VICTOR MUELA 37

 Les feuilles de style
Une feuille de style ou CSS (Cascading Style Sheet) est un
document au format texte qui définit comment une page XHTML
doit être affichée.
Le principe des feuilles de style consiste à regrouper dans un
même document des caractéristiques de mise en forme associées
à des groupes d'éléments. Il suffit de définir par un nom un
ensemble de définitions et de caractéristiques de mise en forme,
et de l'appeler pour l'appliquer à un texte.
En fait, le navigateur web parcourt le document XHTML, lorsqu’il
rencontre une balise, il demande à la CSS de quelle manière il doit
l’afficher.

ASS2. VICTOR MUELA 38

 Les feuilles de style (1)
Les styles peuvent être incorporés au sein du document
XHTML suivant ces trois manières :
Style en ligne, c'est-à-dire en tant qu'attribut des
balises
Style du document : déclaré dans l'en-tête, c'est-à-dire
au sein des balises <head> et </head>
Style externe, déclaré dans un fichier à part dont
l'extension est .css

ASS2. VICTOR MUELA 39

 Le Style en ligne
Le style est défini au sein même d'une balise d'un document. On
appelle ce type de déclaration une déclaration en ligne.
Il suffit de renseigner l'attribut style de la balise XHTML à laquelle on
souhaite appliquer un style particulier :
<balise style="propriété:valeur;"> ... </balise>
Exemple :
<h1 style="font-family: Verdana; font-weight:bold; color: red;">
Programmation </h1>.
Qui définit le style à appliquer au texte « Programmation » qui est un
titre de niveau 1 avec une police Verdana, en gras et de couleur rouge.

ASS2. VICTOR MUELA 40

 Le Style du document
Les feuilles de style d'une page web sont déclarées grâce à la
balise style, au sein des balises <head> et </head>:
<style type="text/css">
Définition des styles;
</style>
L'attribut type="text/css" de la balise <style> permet de spécifier
le type de feuille de style utilisée.
La définition a pour syntaxe : sélecteur {propriété : valeur ;
propriété : valeur ; …}

ASS2. VICTOR MUELA 41

 Le Style du document (1)
Exemple : Définissons un style à appliquer aux liens hypertextes
(balise <a>) :
<style type="text/css">
a{
font-family : verdana, arial, sans-serif ;
font-size: 18px;
font-style: bold;
color: yellow;
}
</style>
N.B. : En dehors de ces propriétés de styles, il y en a d’autres.

ASS2. VICTOR MUELA 42

 Le Style externe
Intérêt : limiter le travail, au lieu de copier le code CSS dans
chaque page, vous le copiez dans un fichier à part et, dans
chaque page XHTML, qui doit l’utiliser, vous faites un lien vers ce
fichier.
Il s'agit dans un premier temps de créer un fichier texte
contenant les feuilles de style et dont l'extension est .css ;
Et dans un second temps de créer dans chaque page XHTML le
raccourci vers cette page de définition de style

ASS2. VICTOR MUELA 43

 Le Style externe (2)
Exemple d’un [Link] :
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
li{font: 1em Verdana;}
b{font: 2em times new roman; font-weight: bold;}
a{
font-size:1em;
font-family:Verdana;
font-weight: bold;
color=black;
}
h1{font: 1em arial; font-weight: bold; color=black;}
h2{font: 1em arial; font-weight: bold; color=black;}
-->
ASS2. VICTOR MUELA 44
 Le Style externe (3)
La balise « raccourci » à placer dans la balise <head> de toutes les
pages web qui devront utiliser les styles définis dans [Link] :
<link rel="stylesheet" type="text/css" href="[Link]">
La balise <link> avertit le navigateur qu'il doit chercher un document
situé à l'extérieur de la page XHTML.
L'attribut rel="stylesheet" précise que le document en question est
une feuille de style externe.
L'attribut type="text/css" précise le type de feuille de style.
L'attribut href=" URL " donne l'URL de la feuille de style., c'est-à-dire
son emplacement sur le serveur ou sur Internet.

ASS2. VICTOR MUELA 45

 Le Formulaire
Les formulaires permettent aux auteurs de pages Web de doter leur page web
d'éléments interactifs permettant un dialogue avec leurs visiteurs.
L’internaute saisit des informations en remplissant des champs ou en cliquant
sur des boutons, puis appuie sur un bouton de soumission (submit) pour les
envoyer.
La balise <form> … </form> délimite le formulaire et permet de regrouper
plusieurs éléments (boutons, zones de saisie,...) de celui-ci. Elle possède les
attributs obligatoires suivants :
method (post ou get) qui indique sous quelle forme seront envoyées les
réponses.
action qui indique l'adresse d'envoi (script ou email).

ASS2. VICTOR MUELA 46

 Le Formulaire (2)
La balise input permet de créer des boutons radio, des cases à cocher, … sa
syntaxe est :
<input type="valeur" value="valeur par défaut" name="nom_élt">

Attribut Valeur Résultat Effet visuel

type effectue l'action prévue
submit Envoyer
dans la balise <form>
text Une ligne de texte dont la
longueur est donnée par
l'attribut size
reset Initialise le formulaire Rétablir

radio bouton radio

checkbox case à cocher
name Nom
size Taille du texte

ASS2. VICTOR MUELA 47

 Le Formulaire (3)
La balise textarea permet de définir une zone de saisie plus vaste et la balise
select permet de créer une liste déroulante d'éléments :

Balise Attribut Résultat Effet visuel

<textarea> name
… rows Zone de saisie
</textarea> cols
<select> name Choix 1

<option> ... multiple plusieurs choix

</option> Choix 1
possibles
</select>

ASS2. VICTOR MUELA 48

 Exemple d’un formulaire
Voici un exemple récapitulant les points ci-dessus et montrant comment
mettre en page un formulaire à l'aide d'un tableau :
<form method=post action=“tkafunda@[Link]">
Enregistrement d'un utilisateur
<table border=0>
<tr>
<td>Nom</td><td><input type=text name="nom“></td>
</tr>
<tr>
<td>Prénom</td><td><input type=text name="prenom“></td>
</tr>
<tr>
<td>Sexe</td>
<td>Homme : <input type=radio name="sexe" value="M">

ASS2. VICTOR MUELA 49

 Exemple d’un formulaire (2)
<br/>Femme : <input type=radio name="sexe" value="F“></td>
</tr>
<tr>
<td>Fonction</td>
<td>
<select name="fonction">
<option value="enseignant">Enseignant</option>
<option value="etudiant">Etudiant</option>
<option value="ingenieur">Ingénieur</option>
<option value="retraite">Retraité</option>
<option value="autre">Autre</option>
</select>
</td>
</tr>

ASS2. VICTOR MUELA 50

Exemple d’un formulaire (3)
<tr>
<td>Commentaires</td>
<td>
<textarea rows="3" name="commentaires">
Tapez ici vos commentaires</textarea>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Envoyer">
</td>
</tr>
</table>
</form>

ASS2. VICTOR MUELA 51

 Créer un site
Le terme « webdesign » désigne la discipline consistant à structurer les éléments
graphiques d'un site web afin de traduire, à travers une dimension esthétique, l'identité
visuelle de l’entreprise ou de l'organisation et de procurer un sentiment de confiance à
l'utilisateur. (compromis : graphisme admirable et navigation modéré)
Comme un architecte, le webmaster construit le site en fonction de l’usage auquel il le
destine.
Pistes à méditer pour mettre en place le site :
Qu’est-ce qui est le plus important ? Est-ce visible et facile d’accès ?
Comment le rendre encore plus facile d’accès ?
La navigation est-elle intuitive ? Les noms de liens sont-ils explicites et faciles à
trouver ?
Quelle taille de texte et couleur utilisés, pour que la lecture soit facile ?
Quelle taille donner aux images ?

ASS2. VICTOR MUELA 52

Structure traditionnelle d’un site

ASS2. VICTOR MUELA 53

 Recommandations
Charte graphique : (le menu doit occupé la position sur toutes les pages, les liens, le
logo dans le même ordre, pas de grand changement dans les couleurs)
Dimension des pages (souhaitable de ne pas dépasser trois à cinq hauteurs d'écran →
fatigue, lenteur chargement), horizontal (garantir un affichage optimal pour la majeure
partie des visiteurs, en %)
Position des informations (l'information située en haut de page aura plus de chances
d'être lue)

Choix des couleurs (utiliser pas plus de 3 couleurs différentes afin de respecter le
critère de sobriété. Le choix devra correspondre, le cas échéant, aux couleurs de
l'organisation et exprimer une ambiance particulière).
Choix des images (Elles agrémentent le site, mais leur abus peut gêner le confort visuel,
ainsi que le chargement des pages).
Couleur d'arrière-plan (mal choisi il peut gêner la lisibilité et arrière-plan graphique →
amateurisme)

ASS2. VICTOR MUELA 54

 Recommandations (2)

Typographie (contre-indiqué d'utiliser plus de deux polices sur un

site web et recommandé de police classique (Arial, Verdana,
Helvetica, etc.)
Symboles graphiques (utiliser seulement les pictogrammes
reconnus : loupe, drapeau, …)
Importance du contenu (contenu intéressant car les visiteurs
reviennent généralement sur un site pour son contenu)
Qualification de l'information (titre, nom de l’auteur, date de la
dernière modification, …)

ASS2. VICTOR MUELA 55

 Organisation du site
Dossier du travail
Un site se compose des plusieurs pages web, des fichiers à
télécharger, des photos, images, etc qui nécessitent une bonne
organisation. Il est conseillé de placer les pages XHTML à la racine
du site, les autres éléments dans des dossiers correspondants.
Donner au fichier un nom qui ait un sens, sans espace, ou de
caractères accentués.
Travailler localement
Faites vos essais sur votre ordinateur que sur le serveur, pour
travailler plus rapidement, le modifier, l’enregistrer sur
l’ordinateur et enfin en renvoyer une copie sur le serveur.

ASS2. VICTOR MUELA 56

 Mise en ligne du site
Pour que vos pages web soient disponibles aux visiteurs, vous devez
télécharger (upload) sur un serveur relié en permanence à Internet tous
les éléments constitutifs de votre site (pages web, photos, images, sons,
vidéos, dossiers…).
Le FTP (File Transfert Protocole) ou protocole de transfert de fichier
permet justement de faire cela.
Votre hébergeur doit vous communiquer les coordonnées d’accès au
FTP :
Une adresse du genre ftp.texte1_texte2
Un mot de passe
Et un identifiant
Techniquement il est possible d'héberger son site Internet soi-même à
condition de posséder un débit en sens montant suffisamment
important.

ASS2. VICTOR MUELA 57

 Hébergeurs

Afin de rendre un service de qualité aux visiteurs, il est conseillé

de recourir aux services d'un hébergeur (société proposant
l'hébergement du site internet sur des serveurs spécialisés
connectés en permanence à internet à très haut débit).
On distingue généralement deux types d'hébergement : gratuit
et professionnel.
Pour l’hébergement gratuit, les fournisseurs d'accès à internet
proposent généralement un espace de stockage assez limité et
exigent un coin pour leurs publicités. D'autre part la
disponibilité du site web n'est pas garantie.

ASS2. VICTOR MUELA 58

 Un mot sur les éditeurs WYSIWYG
Ils proposent les fonctions classiques des traitements de texte et des
palettes d’outils qui permettent d'éditer des pages Web, au contenu
multimédia (texte, images, animations, son …), à peu près telles
qu'elles apparaissent dans les navigateurs courants, sans écrire le code
html vous même.
Ses deux avantages : la facilité d'utilisation et l'observation immédiate
du rendu graphique et désavantages : le manque de maîtrise sur la
qualité du document HTML produit et les risques d'incompatibilité
avec des navigateurs non prévus par l'éditeur.
Les éditeurs WYSIWYG couramment utilisés sont : Adobe
Dreamweaver, Microsoft Expression Web (Ms FrontPage) sur
Windows et autres;

ASS2. VICTOR MUELA 59