1 création de pages web vincent duro iut du havre cours site web 2ème année gea...

1

Création de pages Web

Vincent DUROIUT du HavreCours Site WEB 2ème année GEAvincent.duro421@univ-lehavre.fr

2

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

3

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

4

Comment devenir Webmaster

Un serveur (CRI)Un espace réservé

Votre ordinateur

Un éditeur d’HTML(Netscape Composer)

Le Web mondial

5

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

6

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

7

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

8

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

9

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, …

10

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

11

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>

12

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>

13

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

14

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

15

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- NVU

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

16

- 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

17

- 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

18

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

19

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

20

Utilisation deNetscape Composer

21

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

22

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

23

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

24

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

25

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

26

Netscape Composer : Le résultat

Vérifier le résultat sur plusieurs navigateurs

Netscape : en utilisant l'icône

Internet explorer , Mozilla firefox, …

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

27

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

28

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é.

29

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

30

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

Références :

- Cours « création de pages WEB » de Eric Hitti (Université de Rennes)

- Cours « Introduction au langage HTML » de Jean-Luc Mari (UnivMed_Esil)

- « Cours HTML » http://www.creation-de-site.net/tutoriaux/html/