Conception de premières pages WEB

Transcription

Service informatique
Enseignement
Recherche
Conception
de premières pages
WEB
Fiche n°34, 26 mai 2002
Florence Le Priol
Responsable du Service informatique Enseignement Recherche
PARIS IV - 1, rue Victor Cousin 75005 PARIS - Tél.: 01 40 46 22 11 - Fax : 01 49 46 25 88 - www.paris4.sorbonne.fr
Service informatique Enseignement Recherche - 96, bd Raspail 75006 PARIS - Tél.: 01 44 39 35 92 - Fax : 01 44 39 35 91
[email protected] - www.paris4.sorbonne.fr/ser/
Fiche n° 34 : Conception de premières pages WEB
Service informatique Enseignement Recherche, ©FLP
Table des matières
Table des matières ................................................................................................................................. 3
Internet : Concepts généraux ............................................................................................................... 5
Les différents protocoles de communication....................................................................................... 5
TCP/IP................................................................................................................................................. 5
POP3 ................................................................................................................................................... 5
SMTP .................................................................................................................................................. 5
PPP...................................................................................................................................................... 5
FTP...................................................................................................................................................... 6
HTTP................................................................................................................................................... 6
Le langage HTML ................................................................................................................................. 6
Les éléments de base........................................................................................................................... 6
Un fichier HTML............................................................................................................................ 6
La visualisation............................................................................................................................... 8
Les balises....................................................................................................................................... 8
Les caractères spéciaux ................................................................................................................ 10
Les éléments complexes.................................................................................................................... 10
Fichiers HTML ............................................................................................................................. 10
La visualisation............................................................................................................................. 12
Les balises..................................................................................................................................... 12
Les éditeurs de sites............................................................................................................................. 12
Les éditeurs HTML........................................................................................................................... 12
Les éditeurs WYSIWYG .................................................................................................................. 13
Les éditeurs payants...................................................................................................................... 13
Les éditeurs gratuits...................................................................................................................... 13
Premières pages WEB : pas à pas...................................................................................................... 13
Définition des objectifs et du public visé.......................................................................................... 13
Organisation de la structure des pages .............................................................................................. 14
Décomposez votre site en catégories. ........................................................................................... 14
Page 3
Décidez du lieu de stockage des éléments tels que les images et les fichiers son. ....................... 14
Conception du plan de navigation..................................................................................................... 15
Création des pages web..................................................................................................................... 15
Amaya (Windows, Linux) ............................................................................................................ 15
Netscape Composer (Windows, MacOS) ..................................................................................... 15
Intégration d’images animées ........................................................................................................... 16
Mise en ligne..................................................................................................................................... 16
Les fournisseurs d’accès ............................................................................................................... 16
Les hébergeurs gratuits ................................................................................................................. 16
Dans le site de l’université............................................................................................................ 16
Téléchargement ............................................................................................................................ 16
En résumé.......................................................................................................................................... 18
Annexes ................................................................................................................................................ 19
Page 4
Internet : Concepts généraux
Le World Wide Web (www ou W3) ou Web est un réseau d’ordinateurs à l’échelle mondiale crée dans
les années 60 formant internet, c’est-à-dire la toile mondiale.
Au départ, internet nécessitait la connaissance de nombreuses commandes pour son utilisation mais
aussi pour récupérer les données sur des ordinateurs distants. En 1992, Tim Berners-Lee et d’autres
chercheurs ont été à l’origine du lancement du Web qui permettait de parcourir internet sans
connaissance de commandes complexes. Dans les années qui suivirent l’apparition des navigateurs
(Internet Explorer et Netscape) a accentué la simplification de l’utilisation du Web.
La clé du Web est l’hypertexte, une méthode conçue dans les années 60 pour des blocs ou des pages
de données. Au cours des années 90, Berners-Lee et ses collègues appliquent le concept de
l’hypertexte à internet grâce à ce qu’ils nomment http. Si l’hypertexte et l’http sont à la base de la
création du Web, c’est le HTML qui est à la source des pages web. L’évolution des pages et
l’intégration de dynamisme font appel à des scripts écrits en javascript, au format DHTML (Dynamic
HTML), PHP, Flash…
Les différents protocoles de communication
TCP/IP
Le protocole TCP/IP (Transmission Control Protocol/Internet Protocol) est un ensemble des
protocoles de communication utilisés dans Internet, permettant de gérer la circulation des données
dans le réseau tout en assurant le bon échange des données entre un point et un autre du réseau.
Pour pouvoir communiquer sur Internet, chaque ordinateur doit posséder une adresse unique,
exactement comme l’adresse d’un bâtiment. Sur Internet, l’adresse qui identifie chaque ordinateur
branché sur le réseau s’appelle une adresse IP. Ce sont ces adresses numériques qui relient ensemble
tout le réseau d’Internet afin de permettre la transmission de données entre ordinateurs. Que vous ayez
un serveur, un site Internet, ou que ce soit un simple accès Internet, chacune de ces actions impliquera
un ordinateur munit d’une adresse IP unique. Lors d’une connexion par modem, le fournisseur d’accès
vous attribue une adresse IP pour le temps de la connexion.
Il y a plus d'une centaine de protocoles réunis dans le protocole TCP-IP. Mis à part les protocoles TCP
et IP, les trois autres principaux protocoles de cette famille sont le protocole SMTP régissant le
courrier électronique, le protocole FTP pour le transfert de fichiers et le protocole Telnet pour la
connexion à distance dans Internet.
POP3
Le protocole POP3 ( Post Office Protocol ) permet à un utilisateur d'interroger son courrier situé dans
la boîte aux lettres de son serveur ou fournisseur.
SMTP
Le protocole SMTP (Simple Mail Transfert Protocol ) est employé pour les envois de courrier
électronique.
PPP
Le protocole PPP (Point to Point Protocol) permet d'utiliser une ligne téléphonique et un modem en
TCP/IP.
Page 5
FTP
Le protocole FTP (File Transfer Protocol) permet le transfert de fichiers entre le serveur FTP et votre
ordinateur. Grâce au téléchargement (downloading : serveur Æ client, uploading : client Æ serveur)
FTP, de nombreux fichiers, logiciels, sons, images, sont à votre disposition sur Internet.
On distingue le serveur, l’ordinateur où se situe les sites à consulter, du client, votre ordinateur,
émettant des requêtes à fin de consulter ces sites.
HTTP
Le Protocole HTTP ( HyperText Transfert Protocol ) est un protocole de transfert indispensable pour
que deux ordinateurs connecté à internet se comprennent. Comme la plupart des protocoles internet,
c'est un protocole texte basé sur TCP. Il suffit donc d'ouvrir une connexion TCP sur le port 80 du
serveur, et d'envoyer une requête texte vers le serveur.
Le langage HTML
HTML (HyperText Markup Language) est un langage de balises qui permet aux navigateurs WEB
(Netscape, Internet Explorer) de visualiser les fichiers. Pour éditer un fichier HTML, un éditeur de
texte simple suffit (NotePad sur PC, SimpleText sur MAC).
Les balises respectent la syntaxe suivante :
<balise ouvrante> le texte entre la balise ouvrante et la balise fermante </balise fermante>
Les éléments de base
Un fichier HTML
<html>
<head>
<title>Le Langage HTML</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>aligné à gauche</p>
<p align="center">centré</p>
<p align="right">aligné à droite</p>
<p><b>gras</b></p>
<p><i>italique</i></p>
<p><font color="#0000FF">bleu</font></p>
<p><font color="#FF0000">rouge</font></p>
<p><font face="Comic Sans MS">police Comic sans MS</font></p>
<p><font size="1">taille1</font></p>
<p><font size="3">taille3, par défaut</font></p>
<h1>En-tête 1</h1>
<h2>En-tête 2</h2>
<h3>En-tête 3</h3>
<h4>En-tête 4</h4>
<h5>En-tête 5</h5>
<h6>En-tête 6</h6>
<p>lien vers le mail du <a href="mailto:[email protected]">ser</a></p>
Page 6
<p>lien vers la <a href="page2.htm">page 2</a> du site, qui s'affiche dans
la page courante</p>
<p>lien vers la page internet du <a
href="http://www.paris4.sorbonne.fr/ser/" target="_blank">ser</a>,
qui s'affiche dans une nouvelle page</p>
<p>une image de hauteur 100 pixels et de largeur 150 pixels <img
src="images/189.6.19.jpg" width="150" height="100"></p>
<p>une autre image <a href="http://www.paris4.sorbonne.fr/ser/"
target="_blank"><img src="images/269.3.20.jpg" width="66" height="100"
border="0"></a>
de hauteur 100 pixels et de largeur 66 pixels et qui est un lien vers la
page
du ser, la page s'affiche dans une nouvelle fenêtre </p>
<ul>
<li>puce1</li>
<li>puce2</li>
<li>puce3</li>
</ul>
<ol>
<li>liste1 1</li>
<li>liste1 2</li>
<li>liste1 3</li>
<li>liste1 4</li>
</ol>
<ol>
<li>liste2 1</li>
<li>liste2 2</li>
</ol>
<p>accent aigu sur la e = é</p>
<p>accent grave sur le a = à</p>
<p>accent circonflexe sur le u = û</p>
<p>tréma sur le i = ï</p>
<p>c cédille = ç</p>
<p> </p>
</body>
</html>
Page 7
La visualisation
Les balises
Le principe général est d’avoir une balise ouvrante et une balise fermante encadrant le texte sur lequel
s’applique cette balise. Certaines balises peuvent être complexifiées par différents paramètres
permettant d’agir sur la mise en page par exemple.
<html> </html>
encadre le document
<head> </head>
Page 8
encadre l’en-tête du document
<title> </title>
encadre le titre du document
<body bgcolor="#FFFFFF" text="#000000"> </body>
encadre le corps du document.
Le paramètre bgcolor permet de spécifier la couleur du fond de la page, le paramètre text permet de
spécifier la couleur du texte. Ces deux paramètres ne sont pas obligatoire.
<p>…</p>
<p align="center">…</p>
<p align="right">…</p>
encadre chaque paragraphe
Le paramètre align permet de spécifier l’alignement. Par défaut, le texte est aligné à gauche.
<b>…</b>
Le texte compris entre ces deux balises est mis en gras.
<i>…</i>
Le texte compris entre ces deux balises est mis en italique.
<font color="#0000FF">…</font>
<font face="Comic Sans MS">…</font>
<font size="1">…</font>
permet de spécifier la couleur color, la police face ou la taille size du texte situé entre les balises
Les paramètres peuvent être cumulés. Il suffit d’écrire, à l’intérieur de la balise font les différents
paramètres avec leur valeur en les séparant d’un blanc.
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
encadre les titres dont les styles vont être différents
<a href="mailto:[email protected]">ser</a>
le texte situé entre les balises est un lien hypertexte vers l’adresse mail spécifiée
<a href="http://www.paris4.sorbonne.fr/ser/">ser</a>
<a href="http://www.paris4.sorbonne.fr/ser/" target="_blank">ser</a>
<a href="http://www.paris4.sorbonne.fr/ser/" target="_blank"><img
src="images/269.3.20.jpg" width="66" height="100" border="0"></a>
Page 9
le texte ou l’image situé entre les balises est un lien hypertexte vers la page web spécifiée ; elle
s’affiche dans la page courante ou dans une nouvelle page (target="_blank")
<img src="images/189.6.19.jpg" width="150" height="100">
affiche l’image de largeur 150 pixels et de hauteur 100 pixels dont le chemin est spécifié entre
guillemet
<ul>…</ul>
encadre une série de puces
<ol>…</ol>
encadre une série énumérative
<li>…</li>
encadre un puce ou une numération
Les caractères spéciaux
é
accent aigu sur la e
à
accent grave sur le a
û
accent circonflexe sur le u
ï
tréma sur le i
ç
ç
 
ligne vide
Les éléments complexes
Fichiers HTML
<html>
<head>
<title>Page 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="80,*" frameborder="NO" border="2" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="Page2-gauche.htm">
<frame name="mainFrame" src="Page2-droite.htm">
</frameset>
<noframes>
</body>
</noframes>
</html>
Page 10
<html>
<head>
<title>Page 2 - gauche</title>
</head>
<p>Cadre gauche</p>
<p>  </p>
</body>
</html>
<html>
<head>
<title>Page 2 - droit</title>
</head>
<h1 align="center"><font face="Comic Sans MS" color="#CC3366"><b>cadre
droit</b></font></h1>
<p>Tableaux</p>
<table width="100%" border="2">
<tr>
<td>ligne1 colonne 1</td>
<td>ligne 1 colonne 2</td>
<td>ligne 1 colonne3</td>
</tr>
<tr>
<td>ligne2 colonne 1</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Page 11
La visualisation
Les balises
<frameset cols="80,*" frameborder="NO" border="2" framespacing="0"> </frameset>
encadre la définition d’une page avec des frames (cadres)
<frame name="leftFrame" scrolling="NO" noresize src="Page2-gauche.htm">
spécifie chaque partie du cadre en donnant sa position et en spécifiant le nom du fichier
<noframes>…</noframes>
encadre la définition de la page (optionnelle) sans frame
<table width="100%" border="2">…</table>
encadre les éléments qui définissent le tableau; le paramètre width permet de spécifier la largeur
d’affichage par rapport à la page, le paramètre border spécifie la largeur de la bordure du tableau
<tr>…</tr>
marque les lignes, encadre les éléments qui définissent les colonnes
<td>…</td>
marque les colonnes
Les éditeurs de sites
Les éditeurs HTML
Les éditeurs HTML ressemblent à des éditeurs de textes améliorés. En effet, vous devez absolument
connaître le HTML pour pouvoir vous servir de ces éditeurs. Certes ces logiciels possèdent quelques
fonctions prédéfinies mais il faut savoir comment et quand les utilisés.
Page 12
Le bloc-notes de Microsoft (Windows) et SimpleText (MacOS) peuvent très bien vous servir d'éditeur
HTML. Il vous suffira de taper vos lignes de codes et d'enregistrer le ficher au format *.htm ou *.html.
Les éditeurs WYSIWYG
Avec les éditeurs WYSIWYG (what you see is what you get) vous tapez votre texte, vous créez des
tableaux, vous insérez des images sur vos pages et c'est le logiciel qui crée le code HTML à votre
place. Ils vous permettent de créer des pages assez rapidement, sans presque aucune connaissance du
langage HTML. Cependant, vous ne contrôler pas toujours totalement le code que génère votre
logiciel et il arrive que de temps en temps qu'il y aie des irrégularités que vous ne pourriez détecter et
corriger si vous ne connaissez rien au langage HTML.
Les éditeurs payants
Dreamweaver
DreamWeaver (Windows, MacOS) est l’éditeur de site de Macromédia. C’est un éditeur très complet
qui est très utilisé actuellement.
URL : http://www.macromedia.fr
FrontPage
FrontPage (Windows) est l’éditeur de site de Microsoft disponible dans le pack Premium. Le code
HTML produit est très complexe et difficilement modifiable.
URL : http://www.microsoft.fr
Microsoft Word
Micorsoft Word (Windows, MacOS) permet d’enregistrer des pages au format HTML. Le code
HTML produit est très complexe et difficilement modifiable.
Les éditeurs gratuits
Amaya
Amaya (Windows, Linux)est un éditeur de sites simple d’utilisation.
URL : http://www.w3.org/amaya/
FrontPage Express
FrontPage Express (Windows) est une version très allégée de FrontPage. Le code HTML produit est
très complexe et difficilement modifiable.
Nestcape Composer
Netscape Composer (Windows, MacOS) est un éditeur de site simple, intégré à Netscape.
URL : http://www.netscape.com/download/index.html
Premières pages WEB : pas à pas
Définition des objectifs et du public visé
Avant de créer vos pages web, déterminez précisément vos objectifs. Mettez noir sur blanc tout ce à
quoi vous aspirez, afin de ne rien oublier au moment de la réalisation. Cette étape préalable de
définition des objectifs vous aide à focaliser et à cibler les pages web en fonction de vos besoins
spécifiques.
Page 13
Il faut réfléchir à qui le site web s'adressera. A votre avis, quels types d'ordinateurs les internautes qui
vont regarder vos pages possèdent-ils et quelles plates-formes exploitent-ils (Macintosh, Windows,
Linux, etc.) ? Quelle est leur vitesse moyenne de connexion (modem 33,6 ou DSL) ? Quels types de
navigateurs emploient-ils et quelle est, en moyenne, la taille de leurs moniteurs ? Tous ces facteurs
peuvent affecter considérablement l'aspect et les performances de vos pages web.
Supposons, par exemple, un public ciblé avec pour environnement Windows, des moniteurs 17 pouces
et Internet Explorer 3.0 ou ultérieur. Créez vos pages web, puis testez votre site sous Windows, dans
Microsoft Internet Explorer, sur écran 800 x 600 pixels. N'oubliez pas non plus de tester votre site sur
d'autres moniteurs, avec d'autres navigateurs (Netscape Navigator, par exemple) et sur Macintosh ;
l'aspect des pages web peut s'avérer moins précis que dans l'environnement préconisé pour le public
ciblé.
Organisation de la structure des pages
Organisez avec soin vos pages, cela vous fera gagner beaucoup de temps par la suite. Si vous
commencez à créer des documents sans avoir auparavant réfléchi à l'emplacement exact qu'ils
occuperont au sein de la hiérarchie du site, vous risquez de vous retrouver avec un énorme dossier
désordonné, contenant des fichiers reliés les uns aux autres, mais éparpillés dans une demi-douzaine
de dossiers aux noms plus ou moins identiques.
Habituellement, la configuration d'un site passe par la création, sur votre disque dur local, d'un dossier
distinct où sont stockés tous les fichiers servant à la structure de votre site (appelé, à ce niveau, site
local) et par la création et la modification de documents au sein même de ce dossier. Ensuite, vous
copiez les fichiers enfin prêts pour la publication sur un serveur web, pour le mettre à la disposition du
grand public. Cette méthode paraît mieux adaptée que le fait de créer et modifier les fichiers
directement sur le site web public ; elle permet, en effet, de tester les changements au niveau du site
local avant de le rendre public et, une fois que vous avez terminé, vous pouvez ensuite simultanément
télécharger les fichiers du site local et mettre à jour le site public entier.
Décomposez votre site en catégories.
Placez l'ensemble des pages associées les unes aux autres dans un même dossier. Utilisez des sousdossiers pour regrouper les différents thèmes. L'entretien du site et la navigation seront beaucoup plus
faciles avec ce type d'organisation.
Décidez du lieu de stockage des éléments tels que les images et les fichiers son.
Il est pratique de mettre toutes les images un endroit donné, ainsi, quand vous désirez insérer une
illustration dans une page, vous savez immédiatement où la trouver. Certains concepteurs placent tous
les éléments non HTML d'un site dans un dossier appelé Elements. Ce dossier peut lui-même contenir
d'autres dossiers, par exemple un dossier Images, un dossier Shockwave et un dossier Son.
Page 14
Conception du plan de navigation
S'il est un autre domaine où la planification est fort utile, c'est celui de la navigation. Lorsque vous
concevez votre site, imaginez comment les utilisateurs vont pouvoir se déplacer d'un endroit à un
autre. Prenez en compte les points suivants :
-
Les internautes doivent toujours savoir où ils se trouvent sur votre site et comment revenir à la
page d'accueil.
-
Donnez aux internautes le moyen d'accéder facilement aux informations qu'ils recherchent.
-
Donnez aux internautes la possibilité de contacter l'administrateur web (s'il y en a un) si le site
fonctionne mal, ainsi que toute autre personne associée à l'entreprise ou au site.
Soignez l'aspect de la navigation. La navigation doit rester cohérente dans tout le site. Si vous placez
une barre de navigation dans la partie supérieure de votre page d'accueil, faites en sorte qu'elle figure
également dans toutes les pages web associées.
Création des pages web
Amaya (Windows, Linux)
Consulter la fiche n°35 (en annexe) pour plus d’informations
Netscape Composer (Windows, MacOS)
Consulter la fiche n°36 (en annexe) pour plus d’informations
Page 15
Intégration d’images animées
Voici quelques adresses de sites où sont regroupées des images animées.
http://evelynwolf.free.fr/
collection de gifs animés classés par catégorie
http://gifsmaniac.free.fr/
http://membres.lycos.fr/brunosimon/index.htm
Gifs animés, icônes, vidéo… sur les Simpson
http://stephan.brachet.free.fr/
http://www.ifrance.com/da80/
Images et gifs animés concernant les dessins
animés des années 80
http://www.lyline.com/defaultneuf.asp
http://www.mediatheque.org/gifa.htm
Liens vers des sites de gifs animés
Mise en ligne
Les fournisseurs d’accès
Tous les fournisseurs d’accès fournissent à leurs abonnées une adresse de site web et un espace de
téléchargement.
Les hébergeurs gratuits
Il existe également des hébergeurs gratuits qui contre une publicité s’affichant à l’ouverture de votre
site vous fournissent une adresse de site web et un espace de téléchargement.
Quelques exemples d’hébergeurs
Espace
http://www.chez.tiscali.fr/creez/default.asp
100 Mo
http://www.multimania.lycos.fr/myaccount/freehosting/
50 à 100 Mo
http://www.ifrance.com/heberg/offre_site/gratuit.htm
100 Mo
Dans le site de l’université
Les enseignants qui désirent publier des pages web sur le site de l’université, doivent prendre contact
avec le Service de la Communication Electronique afin de signer la charte d’utilisation du serveur
web.
Si les pages doivent être directement intégrées au site de l’université, le SCE se chargera de les publier
à partir des fichiers HTML fournis par l’enseignant.
Si les pages doivent être intégrées dans le site d’un centre de recherche, l’enseignant doit prendre
contact avec la personne du centre de recherche responsable de la gestion du site.
Pour plus d’informations, consulter l’intranet :
http://rimbaud.paris4.sorbonne.fr/html/sce/ecoles/accueil_ecol.htm
Téléchargement
Le téléchargement des fichiers de votre ordinateur au serveur se fait avec un logiciel permettant de
faire du FTP. Plusieurs logiciels gratuits existent : CuteFTP, WinFTP, WS_FTP, Fetch…
Page 16
Ci-dessous l’interface du logiciel WS_FTP (http://www.ipswitch.com), un des plus complet pour
Windows, consulter la fiche n° 37 (en annexe) pour plus d’informations.
Ci-dessous l’interface du logiciel Fetch (http://fetchsoftworks.com/ ), la référence pour MacOS,
consulter la fiche n° 38 (en annexe) pour plus d’informations.
Page 17
En résumé
Voici un résumé rapide des différentes étapes que vous devez suivre pour créer vos pages web.
1. Définir les objectifs et le public visé
2. Organiser la structure des pages
3. Concevoir le plan de navigation
4. Créer les différents fichiers à l’aide d’un éditeur de sites
5. Mettre en ligne les pages
Page 18
Annexes
Page 19

Conception de premières pages WEB

Transcription

Documents pareils

Fetch 3.03 - Florence Le Priol

Configurer sa messagerie dans Mail (Mac OS X) Créer un

Examen du 20 avril 2015

H02 L`Europe des Lumières Boston Tea Party, 1773 Depuis la

Configuration de messagerie avec Outlook

Vider votre compte - Florence Le Priol

Procédure pour la connexion

Offre d`emploi : Webmaster (Chargé(e) de missions web) Le

affiche Belle époque.indd - Université Sorbonne Nouvelle