Le HTML de base

Cours 4
Cours 4
La publication d’un site web
-Retour sur le dernier cours
-La structure d’un site WEB
(l’utilisation des dossiers)
-La sélection d’un service d’hébergement
- La création d’un site WEB
- La publication des pages et fichiers sur un
serveur d’hébergement
1
Retour: Cours 3
Voici ce que vous avez appris d’important au
dernier cours:
-Les liens via la balise <A HREF=“page.html”>
-La balise de commentaires <!-- … -->
-Les fichiers multimédias <EMBED>
-Les fameux TABLEAUX!!! <TABLE>
-Le texte défilant <MARQUEE>
rs
u
o
C
tk
.
L
TM
H
.
n
hilip
P
06
he
P
pe
w
- ww
20La structure des dossiers
t
h
rig
y
p
Co
• Lorsqu’on crée un site Web, on peut séparer
son contenu dans des dosiers (Pages,
images, multimédia). Cela permets de
mieux se retrouver!
• Par contre, pour retrouver un fichier qui se
trouve dans un dossier quelconque, l’emploi
de la barre oblique (/) fait toute une
différence!
2
Vous êtes sur la page
index.html …
SRC="image1.jpg"
L’image se trouve dans le
même dossier que la
page Web.
SRC="images/image2.jpg"
L’image se trouve dans le
dossier «images» qui se
trouve dans le même
répertoire que la page
Web.
Vous êtes sur la page
page2.html …(membres)
SRC="/image1.jpg"
L’image se trouve dans un
niveau inférieur à celui de
la page Web.
SRC="/images/image2.jpg"
L’image se trouve dans le
dossier «images» qui se
trouve dans un niveau
inférieur à celui de la
page Web.
3
Les dossiers… (suite)
• Dans le fond, pour ne pas se mêler avec les
barres obliques, il suffit de ne pas employer
de dossiers!
rs
u
o
C
tk
.
L
TM
H
.
n
hilip
P
06
he
P
pe
w
- ww
20 Le serveur d’hébergement
t
h
rig
y
p
Co
• Lorsque votre site sera terminé ou prêt à être
envoyé en ligne (Il devrait être prêt…) il faudra se
choisir un serveur d’hébergement.
• Un serveur d’hébergement est un site, (serveur)
qui offre le service d’héberger des sites Web
(pages html, images, musiques et autres fichiers)
• Voici des exemples connus d’hébergeurs:
Lycos-Multimania, Tiscali Pages persos,
Wanadoo, I-France I-Québec, Angelfire, Yahoo
Geocities, Voilà, etc.
4
La sélection du serveur d’hébergement
• Avant de s’inscrire au premier serveur
d’hébergement proposé par Google lors de la
recherche, il faut connaître quelques caractéristiques
à tenir compte lors de la comparaison.
• Espace d’hébergement : Pour un site personnel qui
n’est pas destiné à offrir des fichiers MP3 à
télécharger, un espace de 10 à 20 MO est suffisant.
• Publicités : Est-ce qu’il va y avoir des publicités?
Généralement les services gratuits vont avoir de la
publicité. Ce sera soit une barre publicitaire en
haut/en bas ou un Pop-UP.
• Bande passante (MO/mois): C’est la limite de
téléchargement de contenu à partir du serveur vers
les visiteurs. Plus la bande passante est grande,
plus de visiteurs pourront visiter votre site en un
mois.
• Temps d’activation du compte : Le temps que ça
prends avant que votre compte soit actif après une
inscription. Le mieux: Activation instantanée
• Adresse de l’hébergement : Si l’adresse du serveur
d’hébergement est trop longue comme : http://
www.serveurdhebergementfictifgratuitdemontreal.qc
.ca/votrecompte/index.html
Ce ne sera pas très beau! Choisissez un serveur
dont l’adresse est court et facile à retenir!
5
• Gestion des fichiers : Est-ce que l’hébergeur offre un
gestionnaire des fichiers en ligne [File manager]
et/ou vous devez/pouvez y accéder par F.T.P. ?
• Autres caractéristiques : Offre t-il un compte d’e-mail
POP3? Garantie t-il la disponibilité et fonctionnement
des serveurs à 99,5% du temps? Supporte t-il le
PHP3? Supporte-il le CGI-Script? Supporte-il les
base de données My SQL? Offre t-il un support
technique?
rs
u
o
C
tk
.
L
TM
H
.
n
20
t
h
rig
y
p
Co
hilip
P
06
he
P
pe
w
- ww
• Voici deux services d’hébergements dont les caractéristiques
sont semblables et dont le processus d’inscription et le même.
• AtSpace : http://www.atspace.com
(Hébergeur actuel du site CoursHTML)
GRATUIT, sans publicités, 50 MO d’espace disque,
hébergement illimité de sites par compte, bande passante
illimitée, gestionnaire de fichier en ligne ET par FTP, Compte
d’e-mail POP3, réseau de serveurs ultra rapides. Limite de
200ko/fichier. ACTIVATION INSTANTANNÉE !
• 50Webs : http://www.50webs.com
GRATUIT, sans publicités, 60 MO d’espace disque,
hébergement illimité de sites par compte, bande passante
illimitée, gestionnaire de fichier en ligne ET par FTP, réseau de
serveurs linux ultra rapides. Limite de 300ko/fichier.
ACTIVATION INSTANTANÉE !
6
L’inscription sur l’un des deux
services d’hébergement gratuit
• Les étapes de l’inscription ne seront pas
expliqués en détail ICI étant donné que ça ne
servirait pas à grand chose.
• C’est déjà bien expliqué dans les notes de
cours!
• Il sera aussi possible de voir ces étapes sur le
site CoursHTML à la page «Votre serveur
d’hébergement» à la section DIVERSASTUCES lorsque vous devrez vous créer un
compte!
• Pour ceux qui veulent utiliser AtSpace,
rendez-vous sur le site www.atspace.com
et cliquez sur SING UP dans le menu en
haut.
• Pour ceux qui veulent utiliser 50Webs,
rendez-vous sur le site www.50webs.com
et cliquez sur SING UP dans le menu en
haut. Sélectionnez le choix de droite
(FREE) et cochez Use a subdomain.
7
• Sur la page d’inscription (SING UP),
entrez correctement les informations
demandées ; le nom d’utilisateur n’est
pas le nom qui sera utilisé comme
adresse du site.
• Vous allez recevoir le mot de passe par
E-mail. Vous pourrez par la suite changer
ce mot de passe sur le panneau de
contrôle sur le site d’hébergement.
rs
u
o
C
tk
.
L
TM
H
.
n
hilip
P
06
he
P
pe
w
- ww
0
2changement
t
Le
de mot de passe et la
h
g
i
r
y
création d’un site Web
Cop
• Il sera aussi possible de voir ces étapes illustrés
sur le site CoursHTML aux pages suivantes:
Pour le mot de passe :«Votre serveur
d’hébergement»
Pour la création d’un site Web: «L’envoi de
fichiers sur votre compte d’hébergement»
Tout ceci à la section DIVERS-ASTUCES.
8
• Rendez-vous sur le site du serveur
d’hébergement et connectez-vous avec le
mot de passe que vous aurez reçu par email
• www.atspace.com/members
• www.50webs.com/members
9
rs
u
o
C
tk
.
L
TM
H
.
n
hilip
P
06
he
P
pe
w
- ww
20
t
h
ri•g Sur le panneau d’administration, cliquez
y
p
Co
sur Change [account] Password pour
changer le mot de passe.
• Lorsque ce sera fait, cliquez sur Add
virtual host (AtSpace) ou Add Website
(50Webs) pour obtenir un site Web.
• Choisissez le nom du site. Ce sera ce qui
doit être tapé pour s’y rendre c’est à dire:
• http://votrechoix.hebergeur.com
10
• Lorsque vous aurez choisi un nom, cliquez sur
confirmer pour le créer!
• Ça devrait prendre environ 5-10 minutes avant
que le site soit fonctionnel et en ligne.
• En attendant, pour ne pas perdre du temps,
vous pouvez envoyer les fichiers sur le site
c’est-à-dire les pages HTML (index…), les
images et les autres fichiers.
• Cela se fait avec le « FILE MANAGER »
Panneau de contrôle sur 50Webs
11
Gestionnaire de fichiers (FILE MANAGER) 50Webs
Première page: sélection du site
rs
u
o
C
tk
.
L
TM
H
.
n
he
P
pe
w
- ww
hilip
P
Gestionnaire
06 de fichiers (FILE MANAGER) 50Webs
0
2
ht
g
i
r
Deuxième page: l’envoi des fichiers
y
p
o
C
12
Panneau de contrôle sur AtSpace
Gestionnaire de fichiers (FILE MANAGER) AtSpace
13
rs
u
o
C
tk
.
L
TM
H
.
n
0
hilip
P
06
he
P
pe
w
- ww
2 moyen de pouvoir envoyer des fichiers
t
Un
autre
h
rigsur un compte d’hébergement est l’emploi du
y
p
Co
proframme FTP (File Transfert Program). On se
sert de ce programme lorsque le service
d’hébergement ne propose pas de gestionnaire
des fichiers en ligne ou lorsque l’on ne désire pas
se connecter sur le site pour envoyer des fichiers.
L’utilisation d’un FTP est expliqué sur le site
CoursHTML à la page “Le FTP – Comment s’en
servir” à la section DIVERS-ASTUCES
14
Activité de pratique
• Améliorez votre site et publiez-le en ligne!!!
– Améliorez vos pages avec ce que vous avez
appris durant les trois derniers cours et lorsque
vous serez prêts:
– Créez-vous un compte soit sur AtSpace ou sur
50Webs et envoyez vos fichiers en ligne!
– http://www.atspace.com
– http://www.50webs.com
Comme «devoir »…
• Continuez à embellir votre site et
amusez-vous bien.
• J’espère que ces quatre cours ont
permis de vous intéresser à la création
de site Web!
• Bonne chance à tous et bon succès
pour votre site!
• Si vous avez des questions, le FORUM
du site CoursHTML restera disponible!
15
Cours 4 - FIN
Voilà ce qui conclut votre dernier cours.
Ce que vous avez appris aujourd’hui:
-La structure d’un site Web - dossiers
-Le sélection d’un service d’hébergement
-La création d’un compte d’hébergement
tk
.
L
TM
-L’envoi de fichiers sur ce compte d’hébergement
rs
u
o
C
H
.
n
20
t
h
rig
y
p
Co
hilip
P
06
he
P
pe
w
- ww
FIN
16