1. Présentation générale des pages Web
1.1 Qu'est-ce qu'une page Web ?
Une page Web est un document consultable c'est à dire un en gros un "texte" avec des images et des animations éventuelles. Une page web peut être locale, c'est-à-dire présente sur le disque dur de l'ordinateur ou distante, c'est à dire présente sur un autre ordinateur, que ce soit en intranet ou sur internet. Il serait donc plus correct de parler de "document HTML" que de "page Web" mais l'usage fait parfois force de loi...
Une page Web est aussi un fichier que le navigateur interprète en fonction de certains codes ou "balises" (tags, marqueurs...) ou d'instructions de programmation afin d'assurer un certain rendu, défini par des structures et des mises en forme. L'interprétation des codes différe suivant l'extension du fichier. Voici par exemple un texte avec des codes HTML.
<html> <head> <title> ceci est le titre du document </title> </head> <body> ceci est le corps du document. <!-- ici un commentaire (texte qui n'est pas affiché) --> </body> </html>
Le fichier PAGE01.HTM et le fichier PAGE01.TXT contiennent tous deux exactement ce même texte mais seul le fichier PAGE01.HTM est correctement interprété. De la meme façon, le fichier PAGE02.PHP et le fichier PAGE02.TXT contiennent exactement le même texte mais seul le fichier PAGE02.PHP est correctement interprété.
Enfin, une page Web est aussi un arbre dynamique, c'est-àd-dire une structure hiérarchique changeante, gérée par Javascript en fonction des différents événements-utilisateur (clics souris, frappe clavier..).
Pour charger une page Web, il faut faire référence au protocole d'ouverture de la page. Ce protocole est file:// pour un fichier local, http:// pour un fichier distant. Il existe d'autres protocoles comme ftp://, telnet:// que nous ne détaillerons pas ici. On appelle URL du fichier ou encore "adresse internet de la page" la désignation complète du fichier associé, selon le format
file://chemin d'accès/nom.extensionou
http://serveur/chemin d'accès/nom.extensionsuivant le protocole.
1.2 Les divers contenus d'une page web
Une page web peut se réduire à un simple texte, enrichi ou non avec du gras, du souligné, de l'italique, de la couleur. De telles pages web servent à transmettre une information, à fournir de la documentation, des listes de services, de références... Le texte de la page, c'est à dire son contenu et son enrichissement (formatage, mise en forme, en couleurs...) est
- soit écrit "à la main" dans un fichier avec Notepad, Word, emacs par exemple,
- soit écrit avec un logiciel spécifique comme DreamWeaver, GoLive, l'éditeur de Netscape, etc.,
- soit enfin produit par un programme (java, javascript, php, pascal, c etc.)
Si la page web contient des liens vers d'autres pages, on parle alors de "document hypertexte" (d'où le nom du protocole HTTP).
Une page web peut aussi servir à choisir quelle information on désire consulter : il peut par exemple s'agir d'un formulaire, avec des zones d'entrée, des boutons à cliquer, des cases à cocher...
Une page web est parfois le résultat d'un programme informatique, notamment dans le cas de "requêtes" appliquées à une ou plusieurs bases de données...
Lorsque la page Web est découpée en différentes parties séparées (mais souvent liées par leurs contenus respectifs), on parle de "pages-cadres" ou frames en anglais.
A titre de rappel, vous pouvez consulter
- un exemple d'une page fixe :
http://www.info.univ-angers.fr/pub/gh/vitrine/Democgi/fixe.htm- un exemple d'une page à contenu variable non dynamique
http://forge.info.univ-angers.fr/scripts/variable.rex- un exemple d'une page à contenu variable et dynamique
http://www.info.univ-angers.fr/pub/gh/vitrine/Democgi/dynamique.htm- des exemples de javascripts dont des frames communicantes
http://www.info.univ-angers.fr/pub/gh/tuteurs/demoJsf10.htm- une interrogation en PHP de bases de données SQL
http://forge.info.univ-angers.fr/~gh/stages/stagesl.php3En particulier, on peut utiliser l'URL mget.rex qui permet de tester comment un navigateur interprète les caractères spéciaux quand on saisit à la main une URL. De même, on pourra "jouer" avec l'URL principale de Google France, soit www.google.fr/search et ses options comme par exemple search?q=gilles+hunault et &meta=cr%3DcountryFR&safe=active.
1.3 Les langages HTML et XML
Les langages de la famille ML sont des langages "à balises" c'est à dire avec des caractères spéciaux ("marqueurs") et des mots spéciaux (ou "codes") qui servent à tout faire : délimiter, structurer, formater, gérer les informations correspondantes.
Si HTML décrit l'affichage, la mise en forme, il ne dit rien sur le contenu, la structure du texte. De plus il n'est prévu que pour l'écran : il n'y a aucune balise pour dire "passer à la page d'après" d'où parfois des textes pas très beaux quand on les imprime. Le texte suivant (qui est un extrait de page Web d'où la faute d'orthographe)
Les Histoires extraordinaires de Poe fures traduites en français en 1848 par Baudelaire qui publia les Fleurs du Mal en 1857 et trois ans plus tard les Paradis artificiels.
correspond à l'interprétation du code HTML
Les <b><font color="#880000">Histoires extraordinaires</font></b> de <b><font color="#880000">Poe</font></b> furent traduites en français en 1848 par <b><font color="#880000">Baudelaire</font></b> qui publia <b><font color="#880000">les Fleurs du Mal</font></b> en 1857 et trois ans plus tard <b><font color="#880000">les Paradis artificiels </font></b>.
Ce code ne dit rien quant à qui est auteur, qui est oeuvre, qui est date.
XML, quant à lui, permet d'écrire l'extrait de texte suivant :
Les <oeuvre>Histoires extraordinaires</oeuvre> de <auteur>Poe</auteur> furent traduites en français en <date>1848</date> par <auteur>Baudelaire</auteur> qui publia <oeuvre>les Fleurs du Mal</oeuvre> en <date>1857</date> et trois ans plus tard <oeuvre>les Paradis artificiels</oeuvre>.
Les balises XML définies pour ce document ne décrivent pas la forme mais le contenu. Ainsi le titre d'une oeuvre est contenu entre le début de balise <oeuvre> et la fin de balise </oeuvre> ; de même les balises <date> et <auteur> permettent de dresser une liste des auteurs et des dates.
XML permet de convertir les balises définies pour effectuer la mise en forme avec XSLT ; cela va plus loin que ce que vous pensez : si on peut naturellement convertir les balises en code HTML, il est également possible d'en faire des expressions RTF (rich text), PDF (acrobat), ou encore PS (postscript). Un même document XML associé à des fichiers XSLT différents pourra donc être automatiquement converti en un document HTML, RTF (pour Word), PDF ou PS.
La normalisation du codage des éléments a abouti à plusieurs grammaires de balises, grammaires nommées DOCTYPE en anglais. On indique la grammaire choisie en tout début de document, de façon à ce que le navigateur sache comment il doit interpréter les balises. Voir page exemple l'article en français de Jeffrey Zeldman à ce sujet. Attention, toutefois : on n'obtient pas toujours "pile poile exactement" la même chose avec tous les navigateurs...
1.4 Gestion des URL et des paramètres
La fin de l'adresse internet (ou URL) peut parfois contenir des paramètres. La liste des paramètres commence par un point d'interrogation. Les paramètres sont séparés par le symbole & et chaque paramètre est défini par un couple (nom,attribut) suivant le format nom=attribut.
Par exemple, le site de google France est http://www.google.fr/ et le script de recherche associé est http://www.google.fr/search. Si vous mettez comme paramètre q=giluno alors Google ouvre la page correspondant à la recherche de ce mot : http://www.google.fr/search?q=giluno. Et si vous ajoutez safe=on alors Google ne propose pas les pages considérées comme «sûres» (regardez par exemple le nombre de pages renvoyées) : http://www.google.fr/search?q=giluno&safe=on.
Voici une URL qui vous permettra de tester le fonctionnement des paramètres :
http://forge.info.univ-angers.fr/scripts/mget.rex
Certains sites autorisent l'affichage des répertoires des pages, d'autres l'interdisent (mais on peut parfois contourner cette restriction par des logiciels dits "aspirateurs"). L'affichage d'un répertoire aide parfois à trouver ce qu'on cherche plus rapidement qu'en parcourant les pages. Mais certains répertoires sont parfois longs...
- un répertoire "interdit" (message associé : Erreur HTTP 403 - Refusé)
http://forge.info.univ-angers.fr/scripts/- un répertoire autorisé (en 2005)
http://www.info.univ-angers.fr/pub/gh/tuteurs/1.5 Sauvegarde et visualisation des pages
Une pratique courante pour produire des documents agréables sur le Web est de recopier les documents des autres et de les adapter. On dispose en général de l'option "Enregistrer Sous" avec les navigateurs traditionnels. Il faut choisir
- soit de sauvegarder toute la page,
(avec ses images, ses documents annexes dans un sous-répertoire créé automatiquement),- soit de sauvegarder la page seule, sans les images et les autres documents annexes,
- soit enfin de sauvegarder dans un format texte, juste pour lire les balises et le texte.
Internet Explorer/Edge permettent également de sauvegarder au format ".MHT" ou ".MHTML" qui regroupe en un seul fichier (ou "archive") tout le document, texte, images et autres documents annexes compris.
Une façon simple et rapide pour annoter et reformater un document HTML avant de l'imprimer consiste à l'enregistrer localement sur le disque dur puis à l'ouvrir avec Microsoft Word ou Office Writer. Il est alors possible de gérer les sauts de page, de modifier la justification des paragraphes, d'en faire un document "beau à l'impression".
Lorsqu'une image est intéressante, un clic-droit de la souris et la validation de l'option "Enregistrer l'image sous..." permet de rapatrier localement l'image.
Si au lieu de cliquer sur un lien, on fait un "controle-clic" c'est à dire qu'on appuie sur l'une des touches "Ctrl" en même temps que l'on clique, il est possible avec certains navigateurs comme Netscape de demander l'enregistrement local du lien plutot que son affichage.
Il faut se souvenir que l'affichage des pages est liée au navigateur, que ce soit Internet Explorer, Netscape, Crazy Browser, Mozilla, Firefox, Chrome, Opera ou autre. Il y a parfois des différences dans le traitement des fichiers, des images, des vidéos, des scripts. On aura intérêt, pour une portabilité maximale à vérifier au moins sous Internet Explorer, Firefox (à cause de Linux) et Opera que les pages sont visibles et correctement interprétées partout.
Ainsi l'erreur 403 précédemment citée pour un répertoire interdit est affichée dans la page nommée "[HTTP 403(Refusé)]" avec Internet Explorer et Crazy Browser alors Netscape nomme la page "403 - Forbidden" même s'il est installé et configuré en français.
1.6 HTML, NTIC et multimedia
Il existe de nombreux standards en termes de multimedia. Ainsi une image Gif ou Jpg sera certainement lue et affichée par tous les navigateurs alors qu'une animation Flash requiert un programme local spécial nommé "plug-in".
La même remarque s'applique aux vidéos et à leur divers formats. Ainsi, QuickTime est un format MacIntosh au départ mais aujourd'hui de nombreux visualiseurs sont disponibles pour Windows et Linux. Le mode de transmission en "flux volatile" ou "streaming" en anglais est censé afficher la vidéo sans la stocker sur l'ordinateur mais certains logiciels sont capables de capturer ces vidéos "en ligne".
Le langage SMIL est aujourd'hui un standard émergeant pour la gestion interactive du multi-media, par exemple pour afficher un début de vidéo, poser une question avant de montrer la séquence vidéo suivante...
1.7 Repères pour la gestion d'un site
Gérer un site Web, que ce soit un site intranet ou extranet n'est pas un simple travail d'édition ou de traitement de textes. Nous fournissons ici quelques questions à se poser avant de développer le site car développer un site, c'est comme réaliser un projet informatique : plus le projet est d'importance, plus il faut de la méthode, de la rigueur et plus il faut de vérification, de validation...
Qui est le responsable du projet ? Quelle est la cible, le public ? Quels en sont les acteurs ? Sont-ils internes ou externes ? Faudra-t-il faire appel à une aide extérieure, une société de services ? Quel est alors le délai d'intervention, notamment en cas de mise à jour des pages ?
Qui est responsable du contenu des pages ? S'il y a un contenu officiel, qui est chargé de la vérification des pages ? Qui va relire les pages avant publication ? Qu'y a-t-il de prévu en cas d'absence, d'absence prolongée ou de maladie du ou des responsables correspondant ?
Qui est chargé(e) de la mise en page, de la mise en forme, de la relecture ? En particulier, comment envisage-t-on de gérer les fautes de français comme les fautes d'ortographes, les fautes de styles, de temps, de registre de langue ? Qu'y a-t-il de prévu en cas d'absence, d'absence prolongée ou de maladie du ou des responsables correspondant ?
Quelle est la fréquence de mise à jour du site ? Y a-t-il des obligations légales, des dates limites de dépot de dossier, de publication ?
Qui va gérer la sécurité du site ? Faut-il faire un audit sécurité car un site web avec des formulaires peut être un "trou de sécurité"...
La composante graphique est-elle importante pour le site ? Si oui, qui a les compétences de graphiste pour assurer cette composante ? Qu'y a-t-il de prévu en cas d'absence, d'absence prolongée ou de maladie du ou des responsables correspondant ?
Le site intégre-t-il des bases de données ? Si oui, qui gère ces bases de données ? Qu'y a-t-il de prévu en cas d'absence, d'absence prolongée ou de maladie du ou des responsables correspondant ?
Où se fait l'hébergement des pages ? Où est le serveur ? S'il s'agit d'une machine locale, qu'y a-t-il de prévu en cas de panne ou de remplacement de cette machine ?
Quelles pages du site doivent être référencées ? Avec quels "meta", pour quels critères ?
Le site doit-il être indexé ? Si oui, qui décide des index et qui les gère ? Autorise-t-on d'aspirer le site ? Fournit-on un plan détaillé du site ?
Retour au document général sur les pages web
