CENTRE DE RESSOURCES PÉDAGOGIQUES

Université Paris 2

Présentation de documents en ligne

2012-2013

Partie théorique : Internet.....................................................................................................................................3Les services d’Internet..........................................................................................................................................3

Telnet................................................................................................................................................................3Ftp (File Transfer Protocol)..............................................................................................................................3News et chats....................................................................................................................................................3E-mail................................................................................................................................................................3Le Web..............................................................................................................................................................3

L’accès à Internet..................................................................................................................................................4Les fournisseurs d’accès...................................................................................................................................4Les navigateurs.................................................................................................................................................4

Les outils de recherche..........................................................................................................................................4Les annuaires.....................................................................................................................................................4Les moteurs de recherche..................................................................................................................................4

Partie théorique : présentation de documents en ligne.......................................................................................5Le HTML..........................................................................................................................................................5Les éditeurs HTML...........................................................................................................................................6Publier son site sur Internet...............................................................................................................................6

Partie pratique : créer un petit site web en composant des pages HTML à l'aide du logiciel Libre Office...7Créer le dossier qui contiendra le site...................................................................................................................8Créer la page d'accueil index.html........................................................................................................................8Créer un titre et mettre en forme le texte de la page index.html.........................................................................12Créer les pages ecrit_xxx.html............................................................................................................................16Créer des liens hypertexte...................................................................................................................................17Modèle de page "ecriture"...................................................................................................................................20

2

Centre de Ressources Pédagogiques2012 - 2013

PARTIE THÉORIQUE : INTERNET

INTERconnection of NETworksTCP/IP est le double protocole de communication entre les machines de l’Internet :

o IP (Internet Protocol) réalise l’envoi des messages en les découpant en paquets.o TCP (Transmission Control Protocol) contrôle la validité de la transmission et assure l’intégrité du

message lorsqu’il est arrivé à destination :- remise en ordre des paquets- contrôle de la validité de chaque paquet- réémission éventuelle des paquets perdus

Chaque ordinateur connecté à Internet a une adresse unique au monde : adresse IP ou adresse physique, suite de 4 entiers compris entre 0 et 255.

Tous les services de l’Internet s’appuient sur des protocoles de communication faisant appel à TCP-IP.

Les services d’Internet

Telnet Protocole permettant de se connecter à une machine distante pour lui envoyer des commandes et récupérer les résultats de ces commandes. Il permet donc d’utiliser les ressources informatiques d'une machine distante, à condition de disposer d’un compte sur cette machine distante.

Ftp (File Transfer Protocol)Protocole permettant de se connecter à un serveur distant pour transférer des données du serveur vers son ordinateur (téléchargement - download) ou transférer des données de son ordinateur vers le serveur (chargement - upload)

News et chatsLes news représentent l’ensemble des forums électroniques, gérés par le protocole spécifique NNTP.Les chats permettent la communication en temps réel d’utilisateurs multiples sur des canaux réservés. Protocole spécifique : IRC (Internet Relay Chat)

E-mailCourrier électronique permettant l'échange de messages entre utilisateurs. Protocole : SMTP (Simple Mail Transfer Protocol).

Le WebDéveloppé en 1992 au CERN à Genève pour faciliter les communications entre physiciens, et piloté par le World Wide Web Consortium (W3C), le Web s’appuie sur deux protocoles :

o HTML (Hyper Text Markup Language) pour coder les pages Web avec des liens hypertexte (notion inventée en 1945. Des liens -links- permettent de passer d’une page à une autre, offrant ainsi plusieurs chemins de lecture possibles : c'est la navigation).

o HTTP (Hyper Text Transfer Protocol) pour transférer les pages Web

Un serveur Internet (aussi appelé serveur HTTP ou serveur WEB) héberge un ou plusieurs sites Web : ensemble de pages Web situées sur un même serveur et relatives à une même organisation : université, entreprise, ministère, particulier, etc.

3

Un site a une page d’entrée, à partir de laquelle on peut atteindre les autres pages. Chaque site Web constitue ainsi une arborescence, où on passe d’une page à une page de niveau inférieur en cliquant sur un lien et on revient à la page précédente par un lien explicite vers la page précédente ou par le bouton « Précédente » de la barre de menu du navigateur.

La notion d’URL Chaque page du WEB (fichier HTML) a un nom unique au monde, son URL (Uniform Resource Locator) :

http://http://wwwwww..googlegoogle..comcom/index./index.htmhtm(l)(l)

préfixe indiquantpréfixe indiquantle type de protocole (icile type de protocole (iciHyperTextTransferProtocolHyperTextTransferProtocol))

adresse adresse du serveur WEBdu serveur WEB

Nom et chemin d’accèsNom et chemin d’accèsau fichier HTML sur le au fichier HTML sur le serveur WEBserveur WEB

Pages Web statiquesDes pages Web sont dites statiques lorsqu’elles sont stockées sous leur forme définitive sur le serveur Web. Elles sont écrites exclusivement en langage HTML, mais des outils de composition de pages permettent de les créer sans connaître le HTML. Exemple : la page d’entrée de Google.

Pages Web dynamiquesDes pages Web sont dites dynamiques lorsqu’elles sont générées par un serveur Web suite à une demande d’un utilisateur. Elles affichent généralement les résultats de l’interrogation d’une base de données. Elles sont partiellement écrites en HTML et complétées par des scripts écrits en langage de programmation informatique. Exemples : résultat d’une recherche avec Google, consultation d’un horaire SNCF…

L’accès à Internet

Les fournisseurs d’accèsUn utilisateur accède au réseau Internet par l’intermédiaire d’un fournisseur d’accès (provider) public (université, la poste, etc.) ou privé (entreprise). Il se connecte au serveur de ce fournisseur d’accès à l’aide d’un modem via le réseau téléphonique, des lignes spécialisées (Renater pour l’Université), le câble, une clef 3G...

Les navigateursLes principaux navigateurs sont Internet Explorer (Windows), Mozilla, Firefox, Opéra (Windows et Linux). Leur rôle : afficher correctement des pages HTML. Ils comportent tous un interpréteur HTML pour la page elle-même, un interpréteur JavaScript pour les animations locales, d’autres interpréteurs chargés en cas de besoin.

Le résultat de l’affichage d’une page HTML par un navigateur dépend du contenu de la page (sa mise en forme avec les balises HTML), du navigateur (ils ne font pas tous exactement la même chose) et des choix de l’utilisateur (taille de la fenêtre, police, etc.).

Les outils de recherche

Les annuairesGuides de l’Internet gérés par des humains, fondés sur des critères (sujets particuliers). Reçoivent des demandes de référencement de sites ; si un site correspond au sujet, il est validé et ajouté au guide. Les annuaires fournissent donc une liste de sites classés par thèmes, mais le référencement peut prendre plusieurs semaines

Les moteurs de rechercheOutils gérés par un programme (appelé robot), situé sur une (grosse) machine. Il visite en permanence les sites WEB, constitue une liste de mots-clés et associe à ces mots-clés les URLs des pages HTML correspondantesCe sont donc des gigantesques bases de données mises à jour continuellement.

4

Centre de Ressources Pédagogiques2012 - 2013

PARTIE THÉORIQUE : PRÉSENTATION DE DOCUMENTS EN LIGNE

Le HTMLLangage simple de description des documents destinés au Web, basé sur SGML (Standard Generalized Markup Language), norme ISO définissant la syntaxe des langages de description de documents.

Les fichiers HTML sont interprétés par le navigateur qui les affiche correctement, mais le HTML ne définit pas de façon stricte la présentation du document.

Les fichiers HTML sont composés simplement de texte. o S’ils sont écrits avec le "bloc-notes" de Windows ou avec WordPad, ils doivent être enregistrés au

format Texte seulement avec l’extension .htm ou .html. o Mais des logiciels permettent de créer des pages Web sans connaître le langage HTML : DreamWeaver,

FrontPage, Netscape Composer… Ils permettent de visualiser le code HTML généré par le logiciel.

Pour que les pages HTML soient lues par tous les navigateurs :o Appeler la première page d’un site index.html ou index.htmo Écrire le nom des fichiers en minuscules o Ne mettre aucun espace et éviter les lettres accentuées dans les noms des fichiers o Ne pas mettre plus de huit caractères dans le nom du fichier

Le HTML est un langage de balises (tags) :o Les balises, écrites sous la forme : <balise>texte affecté par la balise</balise>, ne s’affichent pas à

l’écran mais sont interprétées par le navigateur au moment de l’affichage du document o A une balise ouvrante <balise> correspond généralement une balise fermante </balise> ; tout ce qui

figure entre les deux balises est affecté par la baliseo Certaines balises à action ponctuelle (retour à la ligne, trait horizontal) n'ont pas de balise fermanteo Certaines balises sont complétées d’attributs.

Structure d’une page (les balises notées en gras sont obligatoires) :

<html><head>

<title>Page exemple</title></head><body>

<h1>Le corps de la page 1</h1>Texte de la page...

</body></html>

On peut écrire les balises en minuscules ou majuscules, mais la norme XHTML (qui commande l'évolution de HTML vers XML) demande d'écrire toutes les balises entièrement en minuscules.

Dans la section définie par les balises <head> (en-tête) et </head>, on trouve :o le titre de la page : le texte placé entre les balises <title> et </title> apparaît en effet dans la barre de

titre du navigateuro des informations relatives au référencement de la page (balises <meta>) : ces balises meta sont utilisées

pour donner des informations aux robots informatiques des moteurs de recherche. Exemples : <meta name="Description" lang=Fr content="mon site"> <meta name="Keywords" lang="Fr" content="les mots clés de la page"><meta name="Author" content="auteur">

Dans la section définie par les balises <body> (corps) et </body>, on trouve toutes les informations devant être affichées sur la page ainsi que les modalités de la mise en forme par le navigateur.

5

Les éditeurs HTMLLe bloc note est l'outil le plus rustique pour développer un site Web (on tape le texte et les balises soi-même). De nombreux sites sur le Web proposent des cours de HTML.

Mais il existe d’autres solutions ne demandant pas l’apprentissage du HTML :

o La majorité des logiciels qui produisent des documents sont capables de sauvegarder les documents en HTML. Exemples : Word (Enregistrer sous HTML), Excel, Powerpoint, Access, Publisher, CorelDraw, Open Office, etc.

o L'alternative la plus intéressante est l'utilisation d'éditeurs HTML spécialisés qui, outre des outils puissants de mise en page, offrent des capacités à gérer l'administration du site (publication automatique, vérification des liens...). Exemples : Frontpage 2000, Dreamweaver, Homesite, Golive, Pagemill, Webeditor, Frontpage Express, FirstPage…

o D’autres outils gravitent autour du travail de création de site et sont spécialisés dans certains domaines : graphisme (Photoshop, Fireworks, Paintshop Pro...), animation (Flash, Corel Rave...), vidéo (Real), etc.

Publier son site sur Internet

Faire héberger un siteIl faut disposer d’un espace sur un disque dur d’un serveur Internet pour y déposer les pages et les images. C’est ce que proposent les hébergeurs. Le principe est généralement le même : on remplit un formulaire d'inscription sur le site en précisant un nom de site, un mot de passe, un email et quelques autres informations.

Lorsqu’on s’abonne à Internet, les fournisseurs d'accès proposent la plupart du temps une offre d'hébergement incluse dans l'abonnement de base (Orange, Free...). Mais on peut faire héberger son site ailleurs.

Quelques hébergeurs connus dont la plupart sont gratuits :http://www.multimania.fr http://www.ifrance.fr http://www.altern.orghttp://www.chez.com http://www.free.fr

Un critère est à prendre en compte : la taille de l'espace mis à à disposition pour le site. Mais la place offerte de nos jours suffit dans la grande majorité des cas.

Publier un sitePour publier le site (le transférer sur le serveur de l’hébergeur), on utilise une ou plusieurs de ces possibilités (selon l’hébergeur qui précise comment faire) :

o une page Web de gestion du siteo le FTP (ou File Transfer Protocol), protocole permettant d'envoyer des fichiers vers le serveur comme

s'il s'agissait d'un disque dur distanto une publication automatique depuis FrontPage.

6

Centre de Ressources Pédagogiques2012 - 2013

PARTIE PRATIQUE : CRÉER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML À L'AIDE DU LOGICIEL LIBRE OFFICE

Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte graphique des interfaces est un peu différente dans chacun d'eux), libres de droits, téléchargeables gratuitement sur Internet (traitement de texte dans Writer – avec pages html dans Writer/Web, tableur dans Calc, création de formules dans Math, outil de présentation dans Impress, création de dessins dans Draw, base de données dans Base).

Writer/Web est un éditeur HTML - tel que Dreamweaver, FrontPage, NVU, composeur de Mozilla ou de Netscape. Il permet de fabriquer des pages web sans avoir à saisir directement les codes du langage HTML. Son interface ressemble à celle d'un traitement de texte.

Vous allez réaliser un petit site, dont vous pouvez voir la page d'accueil ci-après.

Une recherche sur Internet a permis de collecter des informations sur le sujet et de choisir les images qui seront insérées dans les pages : un fichier texte "ecriture.doc" et des images "---.gif" et "---.jpg" sont sauvegardés dans le dossier "accompagnement_siteweb".

7

Créer le dossier qui contiendra le site

Créez sur le bureau un nouveau dossier que vous appellerez par exemple "www.ecriture.fr".

Créez à l'intérieur de ce dossier un dossier "images" et copiez-y les images du dossier "accompagnement_siteweb".

Nota très important pour une mise en ligne ultérieure de site : toutes les pages et images d'un site doivent être enregistrées dans un même dossier "nom_site", et cet enregistrement se fera avant toute insertion d'image ou création de lien hypertexte.

Créer la page d'accueil index.html

Ouvrez Libre Office Writer en double-cliquant sur son icône figurant sur le bureau.

Ouvrez un nouveau document par

Fichier Nouveau

et choisissez Document HTML.

L'éditeur Writer /Web s'ouvre et présente une fenêtre telle que ci-après :

8

Centre de Ressources Pédagogiques2012 - 2013

Ouvrez le fichier "ecriture.doc", qui contient tous les textes à insérer sur les différentes pages du site et Copiez dans le document html le texte destiné à la page d'accueil : de " Voici un peu plus de 3 000 ans " à " situé à l’adresse http://classes.bnf.fr/ ".

Nota : Utiliser la commande Édition Collage spécial… Texte non formaté pour coller le texte dans la page html, de façon à supprimer tous les caractères cachés de Word.

Enregistrez la page sous le nom index.html, dans le dossier créé pour recevoir le site.

Nota : l'enregistrement de la page en cours de création à son emplacement définitif doit être fait le plus tôt possible, avant toute insertion d'image ou de lien hypertexte.

9

Dans le menu Format, choisissez l'option Styles et formatage, ou cliquez sur la touche F11.

Le styliste s'ouvre.

Remarque : le styliste s'est peut-être déjà ouvert par défaut à l'ouverture. S'il disparaît au cours de votre travail, rouvrez-le comme indiqué ci-dessus.

Cliquez sur le style Corps de texte avec le bouton droit de la souris, et choisissez l'option Modifier du menu contextuel.

La fenêtre de dialogue Style de paragraphe : Corps de texte s'ouvre.

Choisissez les caractéristiques de votre choix pour le style "Corps de texte" en parcourant les options des différents onglets : ci-dessus, la fenêtre de l'onglet Police.

10

Centre de Ressources Pédagogiques2012 - 2013

Les retours à la ligne du texte saisi dans Word ont été transformés en sauts de paragraphe.

Effacez les sauts de paragraphe indésirables,

et remplacez-les par un retour à la ligne en appuyant simultanément sur la touche Entrée et sur la touche Maj.

Dans le menu Fichier, choisissez l'option Propriétés. La fenêtre de dialogue Propriétés de index s'ouvre. Remplissez obligatoirement la zone Titre de l'onglet Description, pour donner un titre à votre page.

Enregistrez les modifications, allez dans votre dossier "www.ecriture.fr" et cliquez sur le fichier index.html pour l'ouvrir avec le navigateur : regardez en particulier où s'affiche le titre de la page.

Remarque : En laissant la page ouverte dans le navigateur, vous l'actualiserez après chaque nouvelle modification enregistrée, de façon à visualiser votre mise en forme au fur et à mesure de sa création.

11

Créer un titre et mettre en forme le texte de la page index.html

Placez-vous en haut de votre page, cliquez sur Insertion Tableau

et remplissez la fenêtre de dialogue comme indiqué ci-contre.

Tapez le texte "L'aventure des écritures : les mythes de naissance" à l'intérieur du tableau. Appliquez le style Titre1 à votre titre à l'aide du styliste (double Clic sur Titre 1 avec le bouton droit de la souris).

Centrez le titre.Placez-vous à l'intérieur du tableau, cliquez sur Tableau Propriétés du tableau et remplissez la fenêtre de dialogue comme indiqué ci-dessous, dans l'ordre suivant : Alignement Centrer, Largeur Relatif, puis 80%..

12

Centre de Ressources Pédagogiques2012 - 2013

En ouvrant les autres onglets de la fenêtre, choisissez la forme et la couleur de la bordure et la couleur de l'arrière-plan, comme montré sur le modèle de la page d'accueil.

Faites un saut de paragraphe sous le tableau de titre pour créer un espace, puis placez-vous juste avant la phrase "L'aventure des écritures s'apparente à un voyage à travers tous les temps et tous les univers."

Insérez un tableau 7 colonnes et 1 ligne, sans titre et sans bordure.

Tapez à l'intérieur de chaque cellule l'intitulé de la page qui s'ouvrira à partir de ce texte, à savoir respectivement : "Écritures africaines", "Écriture chinoise", "Écritures cunéiformes", "Écriture égyptienne", "Écriture grecque", "Écritures indiennes", "Écritures précolombiennes". Ne soulignez pas les textes (le soulignement vient de la transformation du texte en hyperlien).

Sélectionnez toutes les cellules et centrez le texte avec Format Paragraphe Alignement Centre.

13

Pour insérer l'image correspondant aux écritures africaines, placez-vous à l'intérieur de la cellule "Écritures africaines", juste avant le texte, cliquez sur Insertion À partir d'un fichier.

puis recherchez l'image concernée dans l'arborescence du dossier contenant le site,

et double-cliquez sur le fichier image ecrit_africaine_icone.gif pour insérer l'image.

L'image s'insère telle que ci-dessous :

14

Centre de Ressources Pédagogiques2012 - 2013

Pour redimensionner l'image, sélectionnez l'image, cliquez sur Format Image… et renseignez l'onglet Type.

L'image devient telle que ci-dessous :

Pour centrer l'image dans la cellule, il faut l'ancrer "Comme caractère".

Replacez le texte sous l'image en insérant un saut de ligne (Maj + Entrée) après l'image.

L'onglet Options de la fenêtre de dialogue permet d'affecter à l'image son texte alternatif.

Dans le navigateur, le texte apparait lors du survol de l'image.

15

Insérez de la même façon les autres images.

Terminez la mise en forme en mettant en gras ou en italique les zones de texte que vous souhaitez mettre en valeur ou différencier, changez de couleur les caractères etc.

Enregistrez à nouveau la page.

Créer les pages ecrit_xxx.html

Vous en savez assez pour créer et enregistrer l'une des pages ecrit_africaines.html, ecrit_chinoise.html, ecrit_cuneiformes.html, ecrit_egyptienne.html, ecrit_grecque.html, ecrit_indiennes.html, ecrit_precolombiennes.html, par exemple sur le modèle donné en dernière page de ce support.

Nota 1 :

Pour que le texte "tourne" autour d'une image, sélectionnez l'image, cliquez sur Format Image… et choisissez son "habillage" dans l'onglet "Adaptation du texte" de la fenêtre de dialogue image.

Nota 2 :

Pour positionner un texte face à une image, utiliser un tableau " 1 ligne, 2 colonnes" et insérez l'image dans 1 des cellules, placez le texte dans l'autre..

16

Centre de Ressources Pédagogiques2012 - 2013

Créer des liens hypertexte

On souhaite créer des liens hypertexte entre les pages en suivant le synoptique ci-dessous :

Pour créer un lien intérieur au site, on sélectionne le texte porteur du lien, ou l'image qui servira de lien, et on clique sur Insertion Hyperlien. La fenêtre de dialogue Hyperlien s'ouvre. La zone de texte Document / Chemin reçoit l'adresse de la page HTML destinataire du lien. Elle est tapée directement, ou obtenue automatiquement en cliquant sur le nom de cette page après avoir cliqué sur l'icône Ouvrir le dossier située à droite de la zone de saisie.

Pour créer un lien extérieur au site (donc vers une page Web d'un autre site), on sélectionne le texte porteur du lien, on ouvre la fenêtre de dialogue Hyperlien, on sélectionne l'icône Internet et on écrit l'adresse complète http://... dans la zone de texte Document / Chemin.

Pour créer un lien vers une boîte aux lettres électronique, permettant d'envoyer un message, on sélectionne le texte porteur du lien, on ouvre la fenêtre de dialogue Hyperlien, on sélectionne l'icône Mail et News et on écrit l'adresse de la boîte précédée de mailto: dans la zone de texte Document / Chemin.

17

Application 

Créez les liens intérieurs au site : de la page d'accueil vers chacune des pages ecrit_xxx.html, et de chacune des pages décrivant les mythes de naissance des écritures vers la page d'accueil : lien sur le texte "Retour vers la page d'accueil" et sur l'icône située en haut de page, à gauche,en procédant comme indiqué page précédente.

Pour choisir la couleur des liens, ainsi que leurs autres paramètres de mise en forme, surlignez l'un des liens hypertextes que vous venez de créer dans la page.Dans le Styliste, cliquez sur l'icône Caractères.

Clic droit sur le style, puis sur Modifier… : la fenêtre de dialogue "Styles de caractères" s'ouvre. Choisissez les caractéristiques de style pour les liens de la page.

Faire de même pour les liens visités, si vous souhaitez également modifier leur mise en forme par défaut.

Nota : le style des liens doit être modifié dans chaque page html.

Sur la page d'accueil, tapez "Pour en savoir plus..." après la référence au site de la BNF, et faites-en un lien vers le site précité.

Toujours sur la page d'accueil, tapez "Contact" et faites-en un lien vers votre boîte aux lettres électronique.

Réenregistrez les pages que vous avez modifiées.

18

Centre de Ressources Pédagogiques2012 - 2013

Regardez le code HTML des pages en cliquant sur Affichage Source HTML.

Un nouveau clic sur Affichage Source HTML permet de revenir à l'affichage habituel de la page.

Via l'explorateur, double-cliquez sur la page index.html du dossier www.ecriture.fr et vérifiez le fonctionnement correct de votre site en suivant tous les liens.

Modifiez les pages dont vous souhaitez changer l'apparence, corrigez les liens s'ils ne fonctionnent pas

Réenregistrez les pages après modifications et testez-les à nouveau.

Quand le site vous convient, fermez toutes les pages et quittez Libre Office.

19

Modèle de page "ecriture"

20