Création de pages Web

Eric HittiEric.Hitti@univ-rennes1.fr

Plan

Session 1 : Une page simple

Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer

Réaliser une page Web simple Comment publier son site

Session 2 : Webmaster

Le langage HTML

Comment devenir Webmaster

Un serveur (CRI)Un espace réservé

Votre ordinateur

Un éditeur d’HTML(Netscape Composer)

Le Web mondial

Qu’est-ce q’un URL

http://perso.univ-rennes1.fr/Eric.Hitti/index.html

Type de « serveur » (http, ftp, telnet, file)

Nom de la machine(machine.domaine.pays)

répertoire nom du fichier

Quel type de pages

Pages personnellesCVDisponibilité (horaires, agenda)

Le site de l’équipe de rechercheVitrine des activitésOrganisation de l’information Mise à disposition de biblio, de programmesProposition de thèses et de DEA

Le site de l’équipe pédagogiqueTransparents en ligneQCM et formulaires en ligneRéservation de salles et de matériels

Page perso simple http://perso.univ-rennes1.fr/chrystele.alix/

Pages perso enseignement http://perso.univ-rennes1.fr/Patrick.Bauchat/

Pages perso recherche http://www.inrialpes.fr/is2/people/pgoncalv/ http://www-sigproc.eng.cam.ac.uk/~md283/

Réservation de matériel http://section-chimie.univ-rennes1.fr/reservation.htm

Site d’une équipe de recherche http://www.ircyn.prd.fr/irccyn/Equipes/ADTS/SignalF.html

Exemple de pages Web

Composition d’une page WEBVisible Le texte Les images fixes ou animées , du son, des icônes

Les liensLes tableaux

Les formulairesLes applications, …

Moins visibleLe titre de la pageTableau sans borduresDes cadres (frames), …

Pas visibleLe nom de l’auteurLa date de création et de modificationLes mots clés, …

L'origine de la page WEBTransmettre des informations à l'autre bout du mondeLe code ASCII=255 caractères

L'éditeur de texte(Bloc-notes)

Le traitement de texte(Word)

Le fichierinformatique

01000101 01110010 01101001 01100011

E r i c

E r i c Instructions de mise en forme balises

L'origine de la page WEB : éditeur simple

- Je veux : Eric

- Je visualise le résultat à l'aide d'un navigateur (Netscape) qui interprète le code

- Je créé un fichier .HTML Et j'utilise des balises de mise en forme

<i> Eric </i>

L'origine de la page WEB : éditeur évolué

- Je veux : Eric en gras

- L'éditeur modifie le code en insérant les balises au bon endroit

- Je sélectionne le texte avec ma souris

- J'utilise le bouton adéquat

Eric

-Et en même temps donne un aperçu du résultat

Fichier.html

<b> Eric </b>

L'origine de la page WEB : un fichier complet

La page source en .htm ou .htmlElle est créé à l'aide d'un simple éditeur de texteHTML n'est pas un langage de programmation !Ce n'est qu'un langage de description de documents.

Le navigateur (Netscape) permet de visualiser la page web en interprétant le code

Les éditeurs d’html

Éditeurs simples (on tape directement du HTML)- Tout éditeur de texte- Htmledit- Arachnophilia …

Éditeurs évolués (WYSIWYG)- Netscape Composer- Dreamweaver (Prendre contact avec le CRI)

- Frontpage (Prendre contact avec le CRI)

- AolPress

Site de téléchargementhttp://www.allhtml.com/telecharge/telecharge.php3

- Repérer les sites - enregistrer- modifier- Copier les images et les icônes intéressantes- Stocker les sites (l'adresse) dont l’aspect est intéressant- Utiliser les minuscules pour tous les noms de fichiers - Des images de petite taille < 50 Ko, - Répartir l'information sur plusieurs fichiers- Petits fichiers visualisés sur deux écrans maxi- L'information dans chaque fichiers doit pouvoir être comprise indépendamment du contexte du document qui l'a appelé- Utiliser une table des matières ou un index- Utiliser plusieurs fenêtres indépendantes ? (frames)- Donner la date de la version actuelle (un historique des modifications)

- Conserver les mêmes conventions de graphique et de style sur l'ensemble de vos documents

Conseils

- Préparez une arborescence de votre site - Spécifiez les liens vers vos différentes pages - Votre site doit être modulable (pour accueillir de nouvelles rubriques) - Pour que votre site soit correctement visible dans une résolution de 800 x 600, basez vous sur une largeur de 750

Conseils :suite

Quelques sites de références

Site de téléchargementhttp://www.allhtml.com/telecharge/telecharge.php3

Université Numérique de Bretagnehttp://nte.univ-rennes1.fr/unb/

Cours de HTMLhttp://perso.univ-rennes1.fr/Yannick.Letertre/http://www.asi.fr/~ericbon/htmldoc.htmhttp://www.loria.fr/~charoy/htmlfrench/html.htmlhttp://www.grr.ulaval.ca/grrwww/manuel/manuelhtml.html

Plan

Session 1 : Une page simple

Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer

Réaliser une page Web simple Comment publier son site

Session 2 : Webmaster

Le langage HTML

Utilisation deNetscape Composer

Titre de la page

Ma page persoUniversité rennes1

adresse

mail

Enseignement

Recherchea

b

Biblio1

2

TitreMots clésDescription

En-tête 1

En-tête 2

Lien site univ

Lien courrier

Tableau invisibleCentré, réduit

Liste à puces abc

Liste à puces 123

Fond d'écran

Exemple de page à réaliser

TableauCellule de taille et couleurs

Une photo

Netscape Composer

Fichier-Nouveau-Page viergeFichier-Enregistrer sous

Donner le nom du fichierDonner le titre de la page HTML

Format-Propriétés et couleurs de la pageGénérales : Titre, Auteur, Description, Mots clésCouleurs et arrières plans(utiliser l’aide)La seul modification visible est dans le titre de la page, le reste n’est visible que dans la source de la page

Netscape Composer : caractères

Format-Propriétés des caractères(Sélectionner au préalable avec la souris le texte à traiter)

Gestion de la police (type, taille, style, couleurs,…) Associer un lien d'une source (texte cliquable)

vers un document (nom_fichier)vers un email (mailto:adresse)vers un site (http://nomdusite)

Gestion du paragraphe liste à puces, alignement, titre de niveau n

Truc : La fin d'un paragraphe est défini par Entrée, pour rester dans le même paragraphe en réalisant un saut de ligne utiliser : shift+Entrée

Netscape Composer : Images

Insérer-ImagesDonner l’adresse de l’imageAlignement de l’image et rebouclage du texte autour de l’imageDimensions de l’images (peut être régler avec la souris)Définir un lien quand on clique sur l’image

Trucs : -Mettre toutes vos images dans un même répertoire et tous les noms en minuscules-Utiliser un chemin relatif

Netscape Composer : Tableau

Insérer-TableauLargeur des bords = 0 sans encadrementsArrière-plan (couleurs, images) par cellule, par ligne, par tableauTaille, alignement (par cellule ou par ligne)Une cellule vide pas d'encadrement sur cette cellule

(il faut mettre au mini un espace)

Format-Propriétés du tableauPermet de modifier (centrage, couleur de fond, …) la cellule ou la ligne correspondant à l'emplacement du curseur.

Truc : cliquer sur Appliquer pour voir un aperçu sans quitter la boite de dialogue

Netscape Composer : Le résultat

Vérifier le résultat sur plusieurs navigateurs

Netscape : en utilisant l'icône

Internet explorer ,…

L'interprétation n'est pas toujours la même et certains peuvent mal interpréter ou ne pas interpréter du tout.

Il ne vous reste plus qu'à publier votre page

Plan

Session 1 : Une page simple

Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer

Réaliser une page Web simple Comment publier son site

Session 2 : Webmaster

Le langage HTML

Comment éditer ses pages

Pages perso (recherche , enseignement, agenda, …)1- Demande d’hébergement du site

http://perso.univ-rennes1.fr/2- Transfert des fichiers sur le seveur du CRI

Utilisation de RearSite : http://perso.univ-rennes1.fr:8080/rs/Login.html

3- Tests et corrections

Pages labo ou équipePrendre contact avec le CRI pour définir l’adresse du sitehttp://www.cri.univ-rennes1.fr//services/web/offre.html

Truc : votre première page doit s’appeler index.html pour que le site soit référencé automatiquement dans l’annuaire de l’université.

RearSite

Ce site permet de :- Déposer des documents sur un service Web, - Créer des forums- Créer des salons de bavardage (chat)- Créer calendriers partageables- Bâtir des QCM multimédias (en cours de construction).

Pour y avoir accès : http://perso.univ-rennes1.fr/

Pour l'utiliser : http://perso.univ-rennes1.fr:8080/rs/Login.html