1 création de pages web vincent duro iut du havre cours site web 2ème année gea...
TRANSCRIPT
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
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/