Transcript Savoir faire Page WEB 2004
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 : cette partie du texte sera écrite en gras 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 : * blablabla
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
En-tête Corps Texte du document
Présentation des Tags les plus courants
gras italique souligné texte barré
( de même
Titre de niveau 1
(il existe 6 niveaux, 6 étant le plus faible niveau)
retour à la ligne
paragraphe
insertion d’une ligne horizontale
( ce tag peut avoir un attribut largeur
)
Présentation des Tags les plus courants
Créer une liste numérotée :
- point n°1
- point n°2
Créer une liste à puces :
- 1er point
- 2ème point
•
Les Tags peuvent se combiner mais il est préférable de conserver l’ordre des instructions :
Ex :
texte
Et non * texte
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
: Ce tag peut aussi avoir des attributs : ex:
•
Insérer un lien :
vers une page2 : lien vers page2 Vers une page Web : lien vers une page Web vers une adresse électronique :
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: Menu du jour 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 .
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:Serveur WWW de la FSAAdonne 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:Site FTP de la compagnie Appledonne 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)
Ma page Web
- Mes coordonnées
- mon CV
dernière mise à jour Octobre 2002
Ajoutons un peu de mise en forme
Ajoutez des attributs au Tag :
Couleur de fond :
[couleur]
> Du corps du texte :
[couleur]
> Des liens visités :
[couleur]
> Ces attributs peuvent se combiner : Ex :
[couleur]
text=
[couleur]
vlink=
[couleur]
>
Définir des couleurs pour des éléments particuliers de la page :
[couleur]> texte [nombre de 1à7 avec 3 la taille par défaut]> texte
Ma page Web
- Mes coordonnées
- mon CV
mes domaines de recherche
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 : début de la page) ce qui indique au navigateur où se trouve la section visée. (ici le Pour se rendre à cet endroit, il faut taper la référence comme ceci à différents endroits du texte : Retour en haut de page
Quelques commandes…
– – – – La commande
permet d'emprisonner un paragraphe telle une citation en alinéa La commandeCaractè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 (non accentué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: 
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:
Cette commande est la commande principale pour ouvrir une zone de tableaux.
Tableaux
· · ·
Commande pour définir chaque ligne du tableau.
données.
Commande pour spécifier les données pour chaque cellule de
Commande pour spécifier les cellules d’en tête du tableau.
| titre de la colonne 1 | titre de la colonne 2 |
|---|---|
| contenu dela deuxième ligne de la colonne 1 | contenu dela deuxième ligne de la colonne 2 |
Nous pouvons ajouter des attributs au Tag