version PPS - TAL Paris 3

ED 268 : Savoir- Faire
Création d’une page Web
Natacha Espinosa
8 Octobre 2004
Création d’une page WEB

Prévoir la disposition du contenu

Prévoir les différents liens possibles entre
les pages

Connaître les bases du langage HTML
Il existe de nombreux logiciels de création de
page WEB mais la connaissance du langage
HTML permet une plus grande autonomie de
création.

OBJECTIFS DE LA JOURNEE
– Découvrir les bases du langage HTML (CM)
– Appliquer les connaissances à la création de
pages simples (TD)
Introduction

Le langage HTML (HyperText Markup Language)
C’est un langage de description (ou de formatage) de
Documents.
Ce n’est pas un véritable langage de programmation
 Il décrit les structures logiques d’un document : il a une
grammaire, une syntaxe et un vocabulaire.
 C’est un langage à balises (ou tag)
Un langage de description

Les éléments d’une structure logique d’un
document sont :
–
–
–
–
–
–
Les textes,
Les titres,
Les images,
Les liens,
Les chapitres,
Les éléments multimédias (son, vidéo, etc.)
Le langage HTML



Le langage HTML est issu du langage SGML (Structured
Generalized Markup Language, 1969)
Il existe différentes versions du langage en fonction de son
évolution : HTMLversion 2.O, 3.0, 3.2 et 4.0.
HTML est le langage le plus présent sur le World Wide Web.
Il se concentre essentiellement sur les fonctions d’hypertexte.
 Il est facile à apprendre.


Pour créer des pages WEB, il n’est pas
nécessaire d’être connecté sur le WEB

Deux programmes sont nécessaires :
– Un éditeur de textes (Bloc Note);
– Un logiciel de navigation (Internet explorer,
Netscape Navigator …)
Description d’un document html
(1)
– HTML est un langage permettant de mettre en
forme du texte, des images, du sons, etc. (la liste
s’allonge presque tous les jours) destinés à être
visualisés grâce à un navigateur (les plus connus
étant Microsoft Internet Explorer Netscape
Navigator, HotJava de Sun, on pourrait en citer
d’autres comme Mosaïc de SpyGlass, etc.).
Description d’un document html
(2)
– Ce langage de description de page utilise des tags - ou balises -
pour spécifier la façon dont un élément doit apparaître, pour
afficher des images ou définir des actions. C’est une façon de
formater le texte.
– Ces tags sont spécifiés par des chevrons “<” et “>” et agissent
très souvent par paire : la première spécifie le début d’application
du style (ou de l’action), la seconde, qui comporte le signe “/”,
marque la fin d’application du style (ou de l’action).

Ex : <b> cette partie du texte sera écrite en gras </b> mais pas celle-ci.
Description d’un document html
(3)
– Remarque : les balises peuvent être saisies
indifféremment en majuscule ou minuscule, tous les
éditeurs de documents html, ainsi que les
navigateurs, reconnaissent les deux type de
syntaxe.
– L’utilisation des minuscules ou majuscules est donc
un choix personnel, qui doit rester cohérente.

On évitera : *<B> blablabla </b>
Conception : objectifs
généraux

Objectif du site = QUOI
 Objectif de conception = COMMENT
– Critères ergonomiques
– Critères d ’évaluation quantifiables
– Exemples et applications
 « L’utilisateur doit toujours percevoir ce
qu ’il y a à explorer »
 « L’utilisateur doit toujours savoir où il se
trouve »
Conception d’un site

6 étapes
– Spécifier Objectifs généraux de conception
– Conception structure du site
– Conception navigation dans le site
– Conception du contenu des pages
– Conception de la présentation de la page
d ’accueil
– Conception de la présentation des autres pages
Conception : structure (1)

Définir la structure et organisation générale des
informations à représenter.
– Principe récursif partant de la page d ’accueil :
 Identifier toutes les pages accessibles depuis une
page
 Identifier les liens entre pages identifiées et de
même niveau
Conception : navigation (1)

Fournir une description des moyens offerts pour
se déplacer dans la structure du site
 Très important car équivalent aux processus
de manipulation des objets réels
 Définit la navigation possible et autorisée
dans le site


Principe
– Pour chaque bouton, lien, forme cliquable, lister les
effets perçus par l ’utilisateur
– Déterminer le sens à donner (back, top, front, …) et le
type à utiliser (bouton, hypertext, menu, …)
3 formes de navigation
 Globale : navigation présente sur chaque page
 Parallèle : navigation entre pages sœurs
 Locale : navigation à l’intérieur d ’une page
Conception : navigation (2)

Caractérisation de la navigation
 Hiérarchisée = arborescence sous forme d ’arbre
– Navigation globale et parallèle
 Linéaire = contraignante
– Navig. globale réduite à un lien vers la Home Page
– Navig. parallèle réduite à suivant et précédent
 Linéaire avec des choix
– Pb signification du back (en fin …)
 Hiérarchique et linéaire combinée
– Linéarité pour succession de chapitres,
– Hiérarchisation pour les sous-chapitres
 Toile d ’araignée = liberté absolue, pas de structure
Conception : contenu

Définir la nature des informations et leurs
arrangements
 Outils
 Story Board
 Analogie aux journaux : titre + description
brève
 Analogie aux brochures : tables des matières
+ liens sur la page

Remarques
 Lecture fatiguante = nb caractères limités
(2500 pour un article important OnLine)
 Vérifier compatibilité avec l ’impression
(format A4)
– S ’assurer de la clarté du message pour
l ’utilisateur visé (vocabulaire, abréviations lexique?-, …)
Conception : page d’accueil
– 1ère page à concevoir
Soucis de cohérence interne
 Explique et couvre complètement le contenu du site
– Doit ...
 Respecter les requis non fonctionnels
 Tenir compte des spécifications techniques (liens sur
plugins)
 Etre évaluée sur écran !
 C’est une étape capitale qui requiert le collaboration de tous
les membres de l ’équipe

Écrire et visualiser
une page HTML


Nous allons écrire une page HTML dans un
éditeur de texte (Bloc notes)
[Démarrer/Programmes/ Accessoires/Bloc notes]
En parallèle, nous allons visualiser cette page
dans un navigateur (Internet Explorer)
Description d’un document html
(3)
Structure d’une page HTML
<html>
En-tête
<head>
</head>
<body>
Corps
Texte du document
</body>
</html>
Présentation des Tags les plus
courants
<b> gras </b>
<i> italique </i>
<u> souligné </u>
<strike> texte barré </strike>
<center> texte centré </center>
( de même <right> <left>)
<H1> Titre de niveau 1 </H1> (il existe 6 niveaux, 6 étant le plus faible
niveau)
<br> retour à la ligne
<p> paragraphe
<hr> insertion d’une ligne horizontale
( ce tag peut avoir un attribut largeur <hr width=« 16% » et largeur de
ligne ex = <hr size=3>)
Présentation des Tags les plus
courants
Créer une liste numérotée :
<ol>
<li> point n°1 </li>
<li> point n°2 </li>
</ol>
Créer une liste à puces :
<ul>
<li> 1er point </li>
<li> 2ème point </li>
</ul>
1. Point n°1
• 1er point
2. Point n°2
• 2ème point
•Les Tags peuvent se combiner mais il est préférable de
conserver l’ordre des instructions :
Ex : <H1><i><u> texte </u></i></H1>
Et non * <H1><i><u> texte <H1></u></i>
Les liens dits relatifs
Les liens permettent de passer d’une page à une autre
si celles ci se situent dans le même dossier.
Avant de concevoir les liens, il faut penser à la structure de
son site.
Exemple :
Mon_site Ma_page.html (avec des liens vers les deux fichiers)
Mes_publication.html
Mon_CV.html
Les liens
•
Insérer une image : <img src= « fichier_image.jpg » >
Ce tag peut aussi avoir des attributs : ex: <img src=«…» border=X align= X >
•
Insérer un lien :
vers une page2 : <a href= « ma_page2.html » > lien vers page2 </a>
Vers une page Web : <a href= «http://… » > lien vers une page Web </a>
vers une adresse électronique : <a href=« mailto:[email protected] »>
</a>
Les liens
Pour insérer un pointeur (lien hypertexte-hypermédia), il faut indiquer une
référence (appelée URL pour Uniform Ressource Locator) et un élément,
texte ou image, visible à l'écran sur lequel on doit cliquer pour y accéder.
Voici un exemple de code pour obtenir un pointeur:
<A HREF="dossier/menu_du_jour.HTML">Menu du jour</A>
 Le pointeur apparaît alors en couleur contrastée et souligné dans le
navigateur. Il suffit ensuite de cliquer sur le texte Menu du jour pour activer le
lien vers le fichier spécifié "dossier/menu_du_jour.HTML">. Le lien ne sera
plus actif après le tag de fermeture </a>.




Pour créer un pointeur, il s'agit tout simplement de définir le type de
document dans la commande A HREF comme dans les exemples
qui suivent:
Site HTTP (WWW)
– Le code:<A HREF="http://WWW.fsaa.ulaval.ca">Serveur
WWW de la FSAA</A>donne accès à un serveur WWW,
notamment à celui de la Faculté des sciences de l'agriculture et
de l'alimentation de l'Université Laval.
Site FTP
– Le code:<A HREF="ftp://ftp.apple.com/pub">Site FTP de la
compagnie Apple</A>donne accès à un dossier public sur un
serveur FTP de la compagnie Apple inc.
Faisons un petit test…
-Ouvrez
l’éditeur de textes :
Bloc- notes (Démarrer/Programme/Accessoires)
- Puis, un navigateur (ex :IE)
<html>
<head>
<title> Ma page WEb</title>
</head>
<body>
<center> <H1> <u> Ma page Web </u> </h1> </center>
<br>
<ul>
<li><i>Mes coordonnées </i></li>
<br>
<div align=right> Dupont laurent
<br> 4 allée des platanes
<br> 65087 monvila
<br><a href="mailto:"[email protected]">Mon
adresse électronique </a>
</div>
<li><b>mon CV </b></li>
<li><strike>mes domaines de recherche</strike> </li>
<li><a href=« publication.html »>Mes publications
</a> </li>
</ul>
<hr size=7>
<H5>dernière mise à jour Octobre 2002 </H5>
<hr>
</body>
</html>
Ajoutons un peu de mise en
forme
 Ajoutez des attributs au Tag <body> :
Couleur de fond : <body bgcolor=[couleur]>
Du corps du texte : <body text=[couleur]>
Des liens visités : <body vlink=[couleur]>
 Ces attributs peuvent se combiner :
Ex : <body bgcolor=[couleur] text=[couleur] vlink=[couleur]>

Définir des couleurs pour des éléments
particuliers de la page :
<font color=[couleur]> texte </font>
On peut travailler la mise en forme de la police :
<font size=[nombre de 1à7 avec 3 la taille par défaut]> texte </font>
<html>
<head>
<title> Ma page WEb</title>
</head>
<body bgcolor=blue Text=silver vlink=red>
<center> <H1> <u> Ma page Web </u> </h1> </center>
<br>
<ul>
<li><i>Mes coordonnées </i></li>
<br>
<div align=right>
<font color=black size=6> Dupont laurent</font>
<br><font color=green size=4> 4 allée des
platanes
<br> 65087 monvila
<br><a
href="mailto:"[email protected]">Mon adresse
électronique </a>
</font>
</div>
<li><b>mon CV </b></li>
<li><strike>mes domaines de recherche</strike> </li>
<li><a href=publication.html>Mes publications </a> </li>
</ul>
</body>
</html>
Les ancres

La commande A NAME ou ancre
– La commande A NAME enregistre un point d'accès
à l'intérieur d'un document HTML. On peut parler de
lien interne au document.
Par exemple si on souhaite permettre à l’utilisateur de
retourner à un endroit précis du document, on va
spécifier cette action par les tags suivants :
<a name="hautpage"> </a> ce qui indique au
navigateur où se trouve la section visée. (ici le
début de la page)
Pour se rendre à cet endroit, il faut taper la référence
comme ceci à différents endroits du texte :
<a href="#hautpage">Retour en haut de page</a>
Quelques commandes…
– La commande <BLOCKQUOTE></BLOCKQUOTE>
permet d'emprisonner un paragraphe telle une
citation en alinéa
– La commande <STRIKE></STRIKE> permet de
rayer un texte
– La commande <SUB></SUB> permet d'utiliser les
indices dans des formules comme dans l'exemple
qui suit: H 2 O. (2 sera noté en plus petit)
– La commande <SUP></SUP> permet d'utiliser les
exposants dans des formules
Caractères spéciaux dans HTML
– Certains caractères ont une signification spécifique dans
HTML.
– Pour les utiliser comme tels dans une page, il faut utiliser
les commandes alternatives pour les afficher
correctement à l'écran. Ces commandes sont:
 < pour: <
 > pour: >
 & pour: &
 " pour: "
À propos des accents...
– L'utilisation des caractères accentués sur le WWW
pose un certain nombre de problèmes car il y a
plusieurs façons de traiter les caractères
diacritiques.
– On peut en effet utiliser une des deux méthodes
suivantes:


Les caractères référencés (entity references en anglais)
Les caractères ISO Latin-1 (ISO-8859-1)
Les caractères référencés
– Avec cette méthode, on utilise seulement le jeu de
caractères ASCII standard.
– Ce dernier ne contient que 127 caractères (nonaccentués) et n'utilise que sept bits sur les huit
que contient Un octet (l'unité fondamentale
permettant de représenter un caractère latin sur
les ordinateurs).
Images

Les navigateurs HTML reconnaissent généralement deux formats
d'images; les images GIF et les images JPEG. Ces deux formats
d'images sont comprimés.
– L'insertion d'une image est possible en tapant la commande
suivante: <img src="images/telephone.gif">
Le segment IMG SRC indique qu'il s'agit de la source d'une image,
le premier terme entre les guillemets indique le nom du dossier
où se trouve la ou les images, le deuxième terme indique le nom
du fichier contenant l'image et le format de celle-ci.
Une image en format GIF se termine par .GIF alors qu'une image
en format JPEG se termine par .JPEG ou .JPG .
Tableaux

Il est possible de créer un ou plusieurs tableaux dans
une page Web.
Le tableau permet par exemple d’afficher des données
indépendantes les unes des autres (frames).
 Commandes de base
Les commandes de base pour créer des tableaux
en HTML sont les suivantes:
<TABLE>
</TABLE>
Cette commande est la commande principale
pour ouvrir une zone de tableaux.
Tableaux
· <TR></TR> Commande pour définir
chaque ligne du tableau.
· <TD></TD> Commande pour spécifier
les données pour chaque cellule de
données.
· <TH></TH> Commande pour spécifier
les cellules d’en tête du tableau.










<table>
<tr>
<th> titre de la colonne
1</th>
<th> titre de la colonne
2</th>
</tr>
<tr>
<td> contenu dela
deuxième ligne de la
colonne 1</td>
<td> contenu dela
deuxième ligne de la
colonne 2</td>
</tr>
</table>
Nous pouvons ajouter des attributs au Tag
<Table> afin d’appliquer une mise en forme à
notre tableau :
<table border=[chiffre] bgcolor=[couleur]
bordercolor= [couleur] > … </table>
Quelques éditeurs

First Page
 Front page
 Publisher
Il est utile de connaître le langage HTML pour
utiliser aisément ces éditeurs.
First page
Front Page

Front Page est un éditeur HTML intégré au pack
office de Microsoft.
 Très grande comptabilité avec le navigateur Internet
Explorer
 Interface et barre d’outils proches de celles des
logiciels de Microsoft.
 Éditeur complet car proche des éditeurs de type
Wysiwyg (What you see is what you get)
Même barre d’outils que les
autres logiciels de Microsoft
3 modes d’affichage :
Composition de la page par le
concepteur
La transcription en langage HTML
L’aperçu de la page (= à un
navigateur)
Composition de la page à l’aide des
outils :
Mise en forme (proches de ceux des logiciels
Microsoft) :
Taille de caractère,
couleur,
police,
Style (cette fonction permet de choisir style
titre, style liste à puce…)
Création de liens
Insertion d’images
Etc.
Aperçu de la transcription HTML de la page composée
Aperçu de la page dans un navigateur
Créer des Tableaux avec Front page
Publisher

Publisher est un programme de publication assistée
par ordinateur : mise en page professionnelle
 Deux possibilités :
– Convertir une composition existante en une
page Web.
– Créer une page Web (Assistant disponible)
– Limite : pages volumineuses
Utilisez
l’Assistant
Visualisation dans un navigateur
La visualisation du langage
HTML peut se faire dans le
navigateur
Vous remarquerez que le codage est
beaucoup plus complexe…
Une page HTML conçue avec Publisher est un
peu plus volumineuse.
Créer des Tableaux avec Publisher
Créer des Frames

Les Frames permettent de diviser la zone
d’affichage du navigateur en plusieurs zones de
données indépendantes les unes des autres.
(un fichier HTML dans chaque Frame)
Plusieurs Frames associés s’appellent un Frameset
Soit : <Frameset>….</Frameset>
Exemple de Frameset
<html>
<head><title>Ma page personnelle</title>
</head>
<frameset border="0" framespacing="0"
frameborder="0" rows= "25%,75%" >
<frame src="sommaire.html"
name="sommaire" scrolling="none"
target="principal" marginwidth=1>
<frame src="accueil.html"
name="accueil" scrolling="auto" >
</frameset>
</html>
Créer des Frames
Les Frames ont longtemps été à la mode chez
les concepteurs de sites.
Aujourd’hui, la composition à l’aide de
tableau est davantage appréciée.
Mettre en ligne sa page WEB

Pour héberger votre page il suffit de
s’inscrire auprès d’un fournisseur d’accès,
gratuits (free.fr) ou payants.
 Puis il faut transférer un dossier contenant
vos pages, en utilisant un logiciel FTP (ex :
FTP expert :
http://www.visic.com/ )
Adresse de
l’hébergeur
Pages
créées
dans
C:
FTP Expert
Identifiant et mot de passe
Visualisation des
fichiers transférés
Déplacement des
fichiers
Leech FTP
Leech FTP

De nombreux fournisseurs proposent leur
propre logiciel FTP;
 Ainsi que des outils pour optimiser votre
site (compteur, CGI, etc.)
–Pour aller plus loin, manuels en lignes :

sur le site TAL
–http://www.cavi.univparis3.fr/ilpga/ilpga/tal/html/index.htm
–balises HTML : http://www.cavi.univparis3.fr/ilpga/ilpga/tal/html/balise.htm

etc...

http://guidewebmaster.free.fr

Vous possédez maintenant les outils de base
pour concevoir une ou plusieurs pages Web

Quand vous serez familiarisé avec ces outils,
vous pourrez ajouter des Tags dynamiques
pour animer votre site
Il n’est pas nécessaire de se connecter au réseau
pour créer des pages!
TD du 8 Octobre 2004

Rendez-vous au LABO C à 14h
(inscription souhaitable)

N’hésitez pas à apporter votre CV ou
d’autres idées de pages personnelles.
Merci.