Академический Документы
Профессиональный Документы
Культура Документы
fr/html
Formation HTML
&
Dreamweaver
www.insitu.fr/html
I – INTRODUCTION .........................................................................
1 – Le World Wide Web ........................................................................................................................3
2 – Le HTML ..................................................................................................................................3
3 - Structure principale d'une page html .........................................................................................................4
PARTIE 1 : LE HTML
I – INTRODUCTION
1 – Le World Wide Web
Le World Wide Web, communément appelé WWW, peut être considéré comme la plus grande
bibliothèque du monde. Cette Bibliothèque est situé sur un réseau mondial comptant plusieurs millions
d’ordinateurs spéciaux. Les « tomes » de cette bibliothèque consistent en documents qui sont
hébergés sur ces ordinateurs appelés serveurs Web.
Un serveur Web est un ordinateur qui, quelque part dans le monde, est connecté en permanence à
l’Internet et qui contient une collection de documents Web.
Le WWW contient de nombreux types de données : des images, du texte, des vidéos, mais aussi
beaucoup d’autres formats.
Sur presque tous les sites Web, nous trouvons un tronc commun de documents HTML proprement dit.
Le secret du succès du WWW est en effet la structure des pages en format HTML que vous allez
apprendre à utiliser.
Les documents HTML sont un type spécial de fichiers texte qui contiennent des instructions pour
l’affichage de leur contenu. Ce format les rend faciles à créer et à manipuler sur tous les types
d’ordinateurs, et la publication des pages Web sur Internet est à la portée de tous.
2 – Le HTML
HTML signifie Hyper Text Markup Language, on l'appelle aussi le langage de balises. Il est conçu sur
le même principe que les premiers traitements de textes.
C'est un langage qui permet de coder une page (via un éditeur) qui sera ensuite déchiffré par votre
navigateur ou browser.
En pratique, ce qu’on appelle un site Web consiste souvent en plusieurs documents HTML qui sont
combinés à d’autres types de fichiers.
Le HTML est un langage relativement simple dès lors que l'on en comprend le fonctionnement, en
effet, en HTML, on code une page mais on code aussi les instructions qui ne se voient pas en mode
texte ( police, gras, italique, souligné, couleur...).
<html>
<head>
-Vos Méta-Tags
-Le titre de votre page( entre <title> et </title> )
-La plupart de vos scripts ( Java et Javascripts )
</head>
<body>
-Vos textes
-Vos images
-Vos liens
-Vos tableaux
-...
</body>
</html>
Pour créer une page HTML on utilise, principalement, quatre couples de balises:
<HEAD>...</HEAD> marquent l'entête de la page. On pourra trouver, dans cette partie, une autre
balise (ou directive) <META> qui permet de mettre dans le document des informations qui seront lues
par le serveur. Ces informations sont généralement le nom (NOM) de l'auteur (AUTHOR), le contenu
(CONTENT), ou encore un ensemble de mots clés (KEYWORDS) qui pourra être examiné par les
moteurs de recherche.
<HTML>
<HEAD>
<META NAME="AUTHOR" CONTENT="MOI">
<TITLE>premier titre</TITLE>
</HEAD>
<BODY>
Ma première page en HTML
</BODY>
</HTML>
Enregistrer la page sous exo1.html (ou .htm) puis visualisez-la dans un navigateur.
II – MISE EN FORME
Pour mettre en forme un texte, on peut distinguer plusieurs types d’actions.
1 – Style de caractère
3 – Polices
Globale : (Explorer)
Il est possible de modifier la police d'une page entière. (Sauf les tableaux !)
Placez dans le conteneur <head>...</head> :
<head>
<basefont size="3" face="arial" color="white">
</head>
vous obtiendrez la police, la taille, et la couleur actuelle.
Locale :
Vous pouvez modifier la police d'un paragraphe, d'une phrase, d'un mot, d'une lettre.
Placez votre texte dans un conteneur <font> votre texte </font> dans le <body>
<font size="3" face="times" color="green">
texte : paragraphe, phrase, mot, lettre.
</font>
Les attributs size, color ... sont facultatifs.
Les balises <h1> à <h6> acceptent l'attribut align = "left" | "center" | "right" .
Exemple : <h2 align="right">Titre 2 aligné à droite.</h2> produit le résultat suivant :
Titre 2 aligné à droite.
Un titre de niveau 1 est un gros titre, alors que la taille 1 est la plus petite : Texte en taille 1
Le 6ème rang est le niveau le plus bas pour les titres, 7 est la plus grosse taille. Comparons :
taille 7
Notez que les titres saute un ligne.
Titre 1
5 - Alignement du texte
Aller à la ligne : "Enter" passe à la ligne dans votre code source, mais place uniquement un espace
dans le texte affiché. Pour aller à la ligne vous devez utiliser le marqueur <br>. Ce marqueur n'a pas
besoin d'être fermé par </br>
Notez que ce marqueur ne change pas de paragraphe.
Changer de paragraphe : C'est le rôle du marqueur <p> qui passe à la ligne et en saute une. <p>
possède des attributs. Dans ce cas vous devez fermer le conteneur par </p> pour arrêter ses effets.
<DIV> Pour faire une exception dans la règle ..."Pouce" dit l'enfant qui souhaite interrompre un
instant la règle du jeu !
Si on active <p align="right"> pour aligner un texte, il arrive souvent, qu'on souhaite un autre
alignement pour une partie seulement.
<div align="left"> alignera votre texte selon l'attribut, ici à gauche, jusqu'à </div>.
Après le texte reprend l'alignement précédent.
Le conteneur <div align="..."> ... </div>
réalise une île dans l'océan, une exception à la règle.
6 - Les couleurs
Les couleurs sont formées à partir du mélange de trois couleurs : Hexadécimale
Rouge Vert Bleu (RVB en français et RGB en anglais). Il suffit de Décimale
regarder l'écran avec une loupe pour le vérifier. Chacune de ses 3
composantes est codée de plus en plus, sur 8 bits, ce qui donne 00
28=256 valeurs possibles. Le nombre de mélanges, c'est à dire de 00
couleurs, est donc de 2563 ce qui donne plus de 16 millions de
couleurs. 33
Dans la pratique, on trouve encore beaucoup de système en mode 3*16+3=51
256 couleurs. Il faut donc utiliser un nombre x tel que x3=256. La
valeur entière la plus proche est 6, on obtiendra donc des résultats 66
plus fiables en se limitant aux 63=216 couleurs standards. Elles sont 6*16+6=102
obtenues pour les valeurs données dans les tableaux.
99
9*16+9=153
CC
12*16+12=204
FF
15*16+15=255
Vous pouvez obtenir 216 couleurs standards en sélectionnant chacune des composantes dans le
tableau ci-dessous.
Rouge Comment colorier ?
Vert
Bleu Le fond
<body bgcolor="#999999">
99
Du texte
99
<font color="#FF0000">texte</font>
99
Un tableau
<table bgcolor="#CCFFFF">
Une cellule
<td bgcolor="#CCFFCC">
Vous pouvez colorier le fond de vos pages ou les caractères avec le nom des couleurs ou le code
hexadécimale. Essayer des couleurs.
Colorier le fond :
Dans le marqueur <body> on place l'attribut bgcolor
La valeur de bgcolor est :
- Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
- Soit un nom "red", "green", "blue", etc.
<body bgcolor="#ffcc80"> donne la couleur de cette page.
C 0 L 0 R I E R les caractères :
Dans le marqueur <font> on place l'attribut color.
La valeur de color est :
- Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
- Soit un nom "red", "green", "blue", etc.
<font color="#0000ff"> Texte en bleu </font> donne Texte en bleu
7 - Caractère Spéciaux
HTML permet d'écrire sur le réseau mondial, mais chacun possède ses accents ! l'" é " est très utilisé
en français, et n'apparaît pas dans la langue anglaise. Les entités HTML permettent en partie de
résoudre votre problème. Exemples : _ , _ , Ñ , Ö , È , Æ , ÿ
Au début c'est pénible, mais très vite on s'y fait, et mieux, on s'amuse à les deviner : É
Â
Par contre, il est plus difficile de lire les documents sources. Essayez de lire "Noël à
Pâques". (Noël à Pâques)
4 - Liens relatifs
C'est atteindre un fichier situé dans un autre dossier, sur la même machine.
1. On réalise l'arborescence.
Il est très important d'archiver ses documents de façon structurée.
Voici un exemple, celui de ce cours (figure ci-contre)
Si votre configuration est bonne, votre logiciel de messagerie doit s'ouvrir avec l'adresse du
destinataire ! Magique ?
Plus fort encore...
en plus de l'ouverture de la messagerie avec le destinataire, on peut contraindre l'objet du
message :
<a href="mailto:E-mail de l'internaute ?subject=sujet_du_message" >Contacter TOTO</a>
Exemple : <a href="mailto:chenu@wanadoo.fr?subject=lecteur du cours">Ecrire à
l'auteur</a>
1. On marque d'abord la cible avec une ancre en utilisant le tag : <a> et l'attribut name.
Syntaxe : <a name="Ancre1"> Texte qui sera ciblé.</a>
Le texte cible est compris entre les tags <a> et </a>.
Le conteneur <a name="Ancre1">Texte qui sera ciblé.</a> est placé à l'endroit que l'on veut
atteindre.
Pour cela, on marque un texte ou une image avec le tag <a> et l'attribut href :
Syntaxe : <a href="#Ancre1"> Texte de l'hyper lien vers une ancre</a>
On utilise le tag <a> avec son attribut href pour le lien et <img src=... > pour l'image :
Syntaxe : <a href="fichier_cible.htm"> <img src=" fichier_image.gif ou .jpg "> </a>
Exemple : <a href="cibleimg.htm">< img src="imageli.gif"></a>
Notez : On met l'image à la place de l'hypermot.
Attention "link" est, soit un marqueur <link> , soit un attribut de <body link="...">.
1. Lien non visité : Par défaut c'est souvent bleu.
<body link="blue"> colorie les hypermots avant visite en bleu.
Il est possible d'utiliser le code hexadécimal : <body link="#0000FF">
2. Lien activé :
<body alink="red"> colorie les hypermots en rouge pendant le clic.
Il est possible d'utiliser le code hexadécimal : <body alink="#FF0000">
3. Lien visité : Par défaut c'est souvent violet.
<body vlink="green"> colorie les hypermots des liens visités en vert.
Il est possible d'utiliser le code hexadécimal : <body vlink="#00FF00">
4. Exemple : (Celui du sommaire et de cette page)
<body link="#0000ff" alink="#ff0000" vlink="#005500">
On utilise un formulaire
<form action=" fichier_cible.htm " >
<input type="submit" value=" etiquette_bouton">
</form>
Exemple :
<form action="../formulr/frfoenv.htm" target="_top">Voir les
<input type="submit" value="formulaires">
</form>
Remarque :
Ce lien existe sur les navigateurs. Ce sont les célèbres boutons ci-contre
:
<a href="#" onClick="window.history.go(-1)"><img src="histnet.gif"> </a>
Types Exemples
Local
<a href="local.htm">ReVoirLoc</a>
Même dossier
Vers un site
<a href="http://perso.wanadoo.fr/chatinais/index.htm">Site
URL
HTML</a>
indispensable
Absolu
Chemin
<a href="file://C:/dossier/absolu.htm">ReVoirAbs</a>
complet
indispensable
Relatif
<a href="../dossier/relatif.htm">ReVoirRel</a>
../ remonte
Courrier <a href="mailto:chenu@wanadoo.fr">Contactez</a>
Vers une <a
messagerie href="mailto:chenu@wanadoo.fr?subject=tester">Contactez</a>
Poser ancre : <a name="ici">Rendez vous</a>
Y aller : <a href="#ici">Aller</a>
Image <a href="image.htm"><img src="imagel.gif"></a>
<form action="libouton.htm">
Bouton <input type="submit" value="Go">
</form>
Retour <a href="#" onClick="window.history.go(-1)"> Retour </a>
12 – Exercices
A - Lien local dans un même dossier
Placez un lien dans chaque fichier pour naviguer de l'un à l'autre.
B - Atteindre un site
Faire une page qui vous permettra d'ouvrir vos sites préférés.
Ajoutez un lien pour permettre aux lecteurs de vous écrire.
C -Pour utiliser une ancre, il vous faut combien de fichier ?
Cet exercice vous permettra de faire des liens avancés.
1. Créer un fichier "alphabet.htm" avec l’alphabet en verticale.
2. Dans le haut de l'alphabet, posez un hyperlien "atteindre R" .
3. Dans votre premier fichier posez un lien pour atteindre R de "alphabet.htm"
D – Nous sommes dans la page ancrage.htm
Observez l'arborescence ci-dessous .Quelle sera le lien pour allez vers la page adam.htm ?
IV – LES IMAGES
Attention aux images. Elles utilisent beaucoup de place sur les disques, sont parfois très longues à
télécharger, et demandent beaucoup de temps si vous les créez !
<img src="nom_du_fichier.jpg ou gif"> insère l'image comme un caractère. Remarque : bien que
l'alignement soit verticale, on utilise align et pas valign comme dans les tableaux.
<img src=" disques.jpg "> place l'image comme un caractère et le texte continue en
bas. Si la ligne déborde, elle continue sous l'image. Pour juxtaposer, utilisez align="left" ou un tableau.
Largeur :
<img src="boules.jpg" width=40>
Hauteur :
<img src="boules.jpg" height=30>
Les deux :
<img src="boules.jpg" width=100 height=40>
JPG : Il accepte jusqu'à 24 bits ce qui donne 224 > 16 millions de couleurs !
C'est le format pour diffuser des photos sur le web.
Le taux de compression est paramétrable. Cherchez un bon compromis entre taille et qualité.
Image
modèle Border=1
<img src="coccinel.jpg" border=1>
les bordures
faites avec des Résultat :
logiciels de
dessins sont Border=5
souvent plus <img src="coccinel.jpg" border=5>
agréables :
Résultat :
5 - L’attribut ALT
Les images sont longues à charger. Informez votre lecteur en lui affichant un message.
Syntaxe :
< img src="bidon.gif" alt = " Grâce à ALT vous le savez ! " >
< img src="fichier.gif ou jpg" alt = " Message envoyé au lecteur en attendant ... " >
V – LES TABLEAUX
Ils sont très utiles. Les alignements ne sont pas toujours faciles avec l'HTML.
Les tableaux sont souvent la solution qui permet d'obtenir des alignements complexes.
<table>
Marqueur de tableau
<tr>
Marqueur de ligne ("r"=row=rangée=ligne)
Fin du tableau
</table>
Exemple :
<table border>
<tr> <th> Euros </th> <th> Francs </th> </tr>
<tr> <td> 1 E </td> <td> 6,56 F </td> </tr>
...ainsi de suite pour chaque nouvelle ligne...
<tr> <td> 15,24 E </td> <td> 100 F </td> </tr>
</table>
Résultat :
Euros Francs
1E 6,56 F
...ainsi de suite pour chaque nouvelle ligne...
15,24 E 100 F
Utilisez le "copier-coller" pour bâtir rapidement vos cellules.
Touche CTRL+C pour "copier" et CTRL+V pour "coller"
A2 A2 A2
B2 B2 B2
C2 C2 C2
Quadrillage :
<table border cellspacing="0"> <table border cellpadding="10">
Épaisseur du quadrillage Espace entre texte et quadrillage
A1 A1
B1 B1
C1 C1
A2 A2
B2 B2
C2 C2
Dimensions absolues :
<table width="400"> : Contraint le tableau à une largeur de 400 pixels.
Dimensions absolues :
<td width="400"> : Contraint la cellule à occuper une largeur de 400 pixels. (Si c'est possible)
<td height="10"> : Contraint la cellule à occuper une hauteur de 10 pixels.
Cellule avec width="400" pixels et height="10" pixels Reste
Voir cette cellule dans un tableau plus large (90%).
Observez l'occupation constante des 400 pixels.
A2 A2 A2 A2
B2 B2 B2 B2
C2 C2 C2 C2
On peut vérifier ce qui précède en plaçant notre tableau dans un tableau dont on centre les éléments :
<TABLE BORDER WIDTH="100%"> <TR> <TD ALIGN="CENTER">
<table border>
<tr><td>Tableau centré par un tableau</td> </tr>
</table>
</TD> </TR></TABLE>
Tableau centré par un tableau
En-tête :
<table>
<caption valign="top"> Titre du tableau </caption> C'est la valeur par défaut de caption.
<tr> <td> A1 </td> ... </tr> ... </table>
Titre du tableau
A1 B1 C1 D1
Pied :
<table>
<caption valign="bottom" align="right"> Légende du tableau </caption>
<tr> <td> A1 </td> ... </tr> ... </table>
Légende du tableau
A1 B1 C1 D1
A2
B2
C2
10 – Exercices
A - Essayez de dessiner le résultat sans regarder la réponse !
<HTML>
<HEAD></HEAD>
<BODY>
<table border bgcolor="#EEEEEE">
<tr><td><font color="#FF0000"><b>CHOISISSEZ</b></font></td></tr>
</table>
<p>
<TABLE BORDER>
<TR><TD><table border="6" width="100%">
<tr><td><a href="cinema.htm">CINEMA</a></td></tr></table></TD>
<TD>Films à l'affiche...</TD></TR>
<TR><TD><table border="6" width="100%">
<tr><td><a href="concert.htm">CONCERT</a></td></tr></table></TD>
<TD>Où irez-vous cette semaine ?</TD></TR>
<TR><TD><table border="6" width="100%">
<tr><td><a href="theatre.htm">THEATRE</a></td></tr></table></TD>
<TD>Un spectacle exceptionnel</TD></TR>
</TABLE>
</BODY>
</HTML>
Multiple Exemple :
Préfixe Symbole Multiplicateur
téra T 1012 1 500 000 000 octets
giga G 10 9 c'est
méga M 10 6 1,5 Go = 1500 Mo
kilo k 10 3
Solution A
CHOISISSEZ
CINEMA
Films à l'affiche...
CONCERT
Où irez-vous cette semaine ?
THEATRE
Un spectacle exceptionnel
Solution B
<HTML>
<HEAD>
</HEAD>
<BODY>
<p align="center">
<table border>
<tr><th colspan="3" align="center">Multiple</th><th>Exemple :</th></tr>
<tr><th>Préfixe</th><th>Symbole</th><th>Multiplicateur</th>
<td rowspan="5">1 500 000 000 octets <br>
c'est <br>
1,5 Go = 1500 Mo</td>
</tr>
<tr><td>téra</td><td>T</td><td>10<sup>12</sup></td></tr>
<tr><td>giga</td><td>G</td><td>10<sup> 9</sup></td></tr>
<tr><td>méga</td><td>M</td><td>10<sup> 6</sup></td></tr>
<tr><td>kilo</td><td>k</td><td>10<sup> 3</sup></td></tr>
</table>
</p>
</BODY>
</HTML>
VI – LES FRAMES
Attention : <frameset> remplace <body>
1 - Frames en colonnes
20
<frameset cols="20%,80%">
80
ici sera l'appel du contenu ...
</frameset>
2 - Frames en lignes
20
<frameset rows="20%,80%">
ici sera l'appel du contenu ... 80
</frameset>
<frameset rows="15%,85%"> 15
ici sera le contenu de la frame ligne 15%.
<frameset cols="20%,80%"> 20
ici seront les contenus des colonnes 20%, 80% dans la ligne 85% ... 80
Suite
</frameset>
</frameset>
B - Frames en quadrillage
.
*
<frameset rows="15%,*" cols="20%,*">
*
ici seront les contenus des 4 cadres ...
85% en hauteur
</frameset>
80% en largeur
Frames en colonnes :
<frameset cols="20%,80%">
<frame src=" fichierColG.htm" name=" ColG">
<frame src=" fichierColD.htm" name=" ColD">
</frameset>
Frames en lignes :
<frameset rows="20%,80%">
<frame src=" fichierLigH.htm" name=" LigH">
<frame src=" fichierLigB.htm" name=" LigB">
</frameset>
Frames imbriquées :
<frameset rows="20%,80%">
<frame src=" fichierLigHaut.htm" name=" ligHaute">
<frameset cols="20%,80%">
<frame src=" fichierLigBasColG.htm" name=" BasG">
<frame src=" fichierLigBasColD.htm" name=" BasD">
</frameset>
</frameset>
Il faut nommer vos cadres pour éviter la pagaille. Voyez les cibles réservées en cas de problème !
Ci-dessous : Les noms de fichiers et de frames sont en vert
Deux attributs : C'est le marqueur <a> qui assure les liens avec les attributs :
- href pour l'appel du fichier et
- l'attribut target pour la destination.
Syntaxe :
<a href="FichierAppelé.htm" target="NomDuCadreCible" > Aller vers</a>
Exemple :
Actuellement vous avez 2 frames. Celui de gauche "plan" contient les liens et celui de droite
"ColDroite" affiche le fichier appelé depuis "plan".
PARTIE 2 : DREAMWEAVER
1 - Création d’un site
Avant même de commencer à écrire quoi que ce soit, nous allons mettre en place l'ossature du site
dans votre répertoire personnel.
A l'aide de l'explorateur de Windows, crée un répertoire "Mon site Web" dans votre répertoire
personnel. Dans ce répertoire, une page index.htm, une page chanteur.htm, une page loisirs.htm,
une page chinois.htm et un sous-répertoire "images".
Conseil : Vérifiez que les fenêtres Insertion et Propriétés sont visibles, sinon, allez dans le
menu fenêtres et sélectionnez-les, elles sont très utiles pour la suite.
Par convention, la page d'accueil d'un site Web porte toujours le nom index.htm ou default.htm, il
faut donc commencer par reprendre la page index.htm enregistrée et la compléter.
Ajouter un titre
Modifier => Propriétés de la page. Dans la zone titre indiquez « Mon premier site Web ».
Nous allons maintenant insérer un texte minimal dans ta page d'accueil, ainsi qu'un menu qui
permettra aux visiteurs de naviguer dans ton site.
Indiquez quelques éléments d'informations vous concernant (nom, prénom,…). Ces éléments seront
centrés horizontalement dans la page. Utilisez le bouton de la fenêtre des propriétés pour centrer
ce texte.
Le menu du site
Nous allons créer un tableau invisible pour positionner le menu du site au centre de la page d'accueil.
Insertion=>tableau
Reproduire les directives reprises dans la copie d'écran ci-dessous
Un cadre qui sera invisible dans le navigateur apparaît ; nous allons maintenant le centrer.
Déplacez le pointeur de souris sur le coin supérieur gauche du cadre. Il prend alors la forme d'une
quadruple flèche.
Par un clic de souris, sélectionne le tableau puis centre-le en utilisant la palette de propriétés.
Utilisez la mise en forme liste a puce disponible à partir de la palette des propriétés .
Dans la boîte de dialogue, sélectionne le fichier chanteur.htm puis clique sur Sélectionner.
Crée un tableau invisible centré de 550 pixels comprenant une ligne et deux colonnes. Ce tableau
contiendra le texte du corps de la page. Dans ce tableau, on trouvera une photo du chanteur
(éventuellement récupérée sur le web) et une liste de ses principaux titres.
Partez à la recherche d'une photo de ton chanteur/ta chanteuse préféré(e) sur le web. Quand tu as
trouvé une image qui te convient, fais un clic du bouton droit sur cette image.
Par un clic de souris, positionne le curseur de texte à l'endroit où l'image doit apparaître dans ta page.
Ici, c'est dans la cellule gauche du tableau de la page "chanteur.htm".
Sélectionnez-la par un clic de souris sur le nom du fichier et insérez-la dans la page en cliquant sur le
bouton "Sélectionner".
Essayez d’obtenir un tableau du genre suivant, que vous complétez selon vos caractéristiques. Ce
tableau doit être centré sur la page.
Une couleur Le vert
Un acteur Richard Harris
Un animal L'hippopotame
Un objet Une plume de phénix
Un pays Le Tibet
Insérer votre email. Un lien vers une adresse email n'est rien d'autre qu'un lien hypertexte. Indiquer
donc ce lien à l'aide de la palette des propriétés.
o Le nom du site (afin de pouvoir le distinguer d'un autre site réalisé sur le même
ordinateur)
o L'endroit précis où se trouve le site sur le serveur local, clique sur l'icône pour
retrouver la localisation précise du fichier index.htm
Après quelques instants de travail, la structure du site est définie et nous allons pouvoir la découvrir:
La structure du site a maintenant été analysée par le logiciel Dreamweaver qui a suivi tous les liens intégrés aux
pages. Voyons ce qu'il a découvert.
La fenêtre d'analyse de la structure du site se divise en deux zones. La zone de droite reprend la liste des fichiers
inclus dans le répertoire personnel, la partie gauche est vide:
Dans la fenêtre fichiers, cliquer sur afficher/carte du site pour visualisez la structure "en arbre" du site web.
La commande "propriétés" du
menu "Fenêtre" déclenche
l'affichage de l'inspecteur de
propriété. Cet inspecteur est
contextuel. Il changera selon que
l'objet mis en surbrillance est du
texte, une image ou un tableau.
La frappe du texte se fait comme dans un traitement de texte classique et toute les commandes de
format, de couleur, etc... sont réglables dans cet inspecteur de propriétés
La fenêtre d'objet "En-tête" permet de rajouter les objets nécessaires tel que les "meta"
et les mots clés. N'oubliez pas de séparer ces derniers par le signe ";".
L'outil "image" de la fenêtre d'objets "commun" permet de choisir l'image dans une
fenêtre du genre "explorateur".
Une
prévisualisation
est présentée
ainsi qu'un
affichage des
propriétés de
l'image.
Une fois
affichée l'image
est
sélectionnable
par un simple
clic. Dans ce
cas l'inspecteur
de propriétés
change
d'aspect.
Il est fortement conseillé de ne pas changer les valeurs L et H pour que l'affichage soit correct.
Après validation le
tableau est inséré dans
la page.
L'inspecteur de
propriété du tableau
s'affiche en cliquant sur
les bords droits ou
inférieurs du tableau
ainsi que sur les limites
séparatives (sauf les
bords supérieurs et
gauche).
L'inspecteur change si
le curseur est dans une
cellule du tableau. Cela
permet d'accéder à
d'autres propriétés
La modification de ce
tableau se fait en
plaçant la surbrillance
dans le tableau et en
cliquant à droite.
Le passage de la souris sur les bordures gauche ou supérieure ou un balayage sur les cellules
sélectionne la ligne, la colonne ou les cellules concernées. Les commandes passées alors ne
s'appliqueront qu'à la sélection qui est encadrée.
Si le document doit être affiché dans une fenêtre particulière n'oubliez pas de le préciser en renseignant la case
"Cible".
Mettez le mot devant servir d'ancre en surbrillance et sélectionnez l'outil "ancre" dans
les objets invisibles. Nommez l'ancre dans le cadre "ad hoc" en n'utilisant qu'une chaîne
de caractères minuscules sans aucun caractère spécial ni d'espace.
Retournez au mot devant servir de point de départ au lien et utilisez le petit viseur en le
traînant sur le signe d'ancre. Le nom de l'ancre précédé du signe "#" s'affiche dans la
fenêtre "Lien". Si cette ancre est loin, faites défiler la page en mettant le viseur sur les
flèches de l'ascenseur.
La vérification d'un lien est une tentation fréquente. Un clic droit sur un lien affiche un
menu contextuel avec la commande "Afficher la page liée". Une nouvelle fenêtre
s'ouvre alors avec le fichier demandé.
La commande "Vérifier navigateur cible" vous permet de faire une analyse ligne par ligne de la
page écrite et de voir ainsi quelles seront les versions de navigateurs qui poseront des problèmes pour
afficher votre page.
- l'autre utilise une feuille de style externe liée au document ce qui permet d'utiliser la même feuille de style
pour un ensemble de page, voir pour tout un site.
Au moment de la mise en place sur le serveur n'oubliez pas de joindre votre feuille de style à vos fichiers
textes et images.
Lorsque l'on importe du code issu d'un autre logiciel d'édition html. Il peut être très intéressant de
nettoyer les fichiers des balises inutiles. Choisir pour cela "commandes" puis "nettoyer l'HTML"
Lors de la fermeture du jeu de cadre un message demandera si vous voulez enregistrer aussi bien les
modifications du jeu de cadre que celles affectant les fichiers affichés dans les cadres.
Un inspecteur de propriété
spécial est affecté aux calques.
Attention au choix de la balise.
Pour IE il faut utiliser "DIV" et
pour Netscape "LAYER". Les
deux systèmes ne sont pas
compatibles. Vérifiez le résultat
en faisant un aperçu dans le
navigateur de votre choix et
avertissez les clients.
Par prudence ne mélangez pas les calques avec des textes et des tableaux classiques. Le résultat
risque d'être illisible.
Retour
Les éléments flash et shokwave sont des animations conçues par des logiciels
spécifiques de macromédia. Vous devez avoir construit ces fichiers avant toute
incorporation dans une page. Pour l'incorporation utilisez l'outil de la palette
objets communs. Après avoir choisi le fichier correspondant dans la boîte de
dialogue, l'objet apparaît sous la forme d'une icône.
Un inspecteur de
comportement est
associé à cette icône
et permet de
paramétrer l'objet. Il
faudra visualiser la
page dans un
navigateur pour
vérifier son
fonctionnement.
Retour
M - Vérifier un site
A condition de saisir les caractéristiques du serveur d'hébergement du site, il est possible de faire le
téléchargement des pages sur le serveur. L'utilisation de ce module est cependant pleine d'aléas. Mieux vaut
utiliser les logiciels ftp spécialisés.
Le menu "Fichier"
contient les fonctions de
vérification des liens pour
les pages ou le site
entier.
La fenêtre du vérificateur
permet de pointer les
liens brisés, les liens
externes et les fichiers
orphelins. Opérez les
modifications et vous
verrez la liste diminuer
de longueur. Après un tel
contrôle plus besoin de
brosse à reluire pour
présenter un site "nickel".
La fabrication d'un lexique sous la forme d'une page html spécialement dédiée à cette fonction peut paraître a
première vue satisfaisante. Elle l'est beaucoup moins à l'usage car si l'appel de la page par un lien ne pose aucun
problème, le retour à la page d'appel n'est pas simple sauf pour les familliers du bouton "précédent". nous proposons
donc une alternative sous la forme d'une petite fenêtre surgissant lors du clic et ne renfermant que la définition du mot
cliqué
L'interversion d'image est l'une des manoeuvres interactives les plus courantes. Elle permet de faire
apparaître une image légendée ou un schéma à la place de l'image originale. Cette interversion est le
plus souvent déclenchée par le passage de la souris sur l'image.
Il est bien entendu indispensable que les deux images à intervertir existent au préalable et qu'elles
aient les mêmes dimensions. Elles doivent se trouver dans le répertoire qui contient le site.
La charte graphique permet d'assurer une homogénéité à l'intérieur d'un site et, entre les sites d'une
même entité, de contrôler l'image que l'entité souhaite véhiculer. Elle contient :
- Les couleurs principales,
- Les éléments graphiques communs à tout le site,
- L'organisation des pages,
- Les images de référence,
- Les zones de menu et éléments à utiliser pour la navigation,
- Les styles de caractères
Lors de la réalisation d'un site Internet, la charte graphique n'est donc surtout pas à négliger même s'il
est évident que le contenu, sa qualité et sa mise à jour, reste un élément essentiel à tout site visant à
acquérir une notoriété et des visiteurs toujours plus nombreux et fidèles.
• La vitesse d'affichage des pages et l'ergonomie de navigation à l'intérieur de votre site. Les
images ne doivent pas être trop lourdes pour que l'internaute ne soit pas tenté de "zapper" en
raison d'un temps d'attente trop long. Le faire attendre devant un écran vide, c'est tout
simplement lui donner toutes les raisons de quitter le site. Privilégiez donc les images
miniatures.
• De plus, il est primordial que le visiteur sache à tout moment où il se situe dans votre site.
Pensez à utiliser les cadres et barres de navigation.
Enfin, la richesse graphique, le dynamisme, la convivialité et l'interactivité de votre site feront l'ultime
différence. Ainsi, votre site retiendra l'attention de l'internaute ; il a de bonnes chances d'être
sélectionné dans ses favoris et sera donc visité régulièrement.
Quand vous insérez une image dans une page Web, elle est affichée par défaut dans sa taille
d’origine. Les dimensions d’une image affichée à l’écran se mesurent en pixels, comme la résolution
d’un écran : 1024x768 par exemple.
Vous pouvez facilement forcez la page Web à réduire ou agrandir l’image. Toutefois, cela donne
rarement un bon résultat.
Le meilleur principe est donc d’afficher les images à leur taille réelle. Vous devez donc créer des
versions de vos images qui sont adaptées à vos pages Web et dont la taille en pixels correspond
exactement à la taille d’affichage que vous souhaitez sur votre page web.
De plus, plus la taille des images est importante, plus le transfert est lent pour l’internautes :
Ex : avec un modem 56k
17Ko = 3,5 secondes
600Ko = + 2 minutes
Il est très rare que vous puissiez utiliser directement une image sans traitement. Il faut souvent
recadrer les images ou les rééchantillonner pour adapter leur taille.
Le JPEG
Utiliser pour les photos, compression variable.
Le Gif
256 couleurs maximum, utiliser pour les graphismes comportant des éléments de couleur unie, par
exemple dessins, logos, textes,…
Plusieurs logiciels permettent d’adaptez une image au Web dont les deux premiers incontournables :
• Adobe Photoshop
• Macromédia Fireworks
• IrfanView…
La manipulation est très simple puisque tous les logiciels se ressemblent dans leurs démarches.
1. Ouvrez votre image
2. Trouvez le menu qui correspond à la taille de votre image
3. Changer les caractéristiques de l’image comme vous le désirez
4. Enregistrez votre travaille et voila.
C’est bien entendu la méthode la plus simple quand on ne veut pas optimiser un maximum sont
images mais juste l’adaptez un minimum au Web.
Dans Photoshop et Fireworks par exemple, vous pouvez enregistrer les images en utilisant dans le
menu Fichier, les fonctions enregistrer pour le Web qui vous guidera dans l’échantillonnage de votre
image
Nous ne verrons dans ce cours que des images réalisées à partir de texte (boutons, logos,…)
Une fois que vous avez réservé un espace chez un hébergeur, vous recevrez des informations qui
vous permettent de placer vos pages Web sur Internet. Ces informations peuvent se présenter comme
suit :
Login : dougklas
Mot de passe : fddfgddMH
Adresse du serveur : web.arobasque.com
Adresse FTP : ftp.arob.cfr
Adresse WWW : http://www.dougklas.com
Beaucoup d’utilisateurs profitent d’un espace serveur gratuit, inclus dans leur abonnement Internet.
Vous pouvez aussi exploiter cette solution, mais l’adresse de vos pages en sera plus compliquée : elle
pointera vers un sous-domaine d’un autre serveur.
Ex : www.insitu.fr (domaine)
Perso.wanadoo.fr/insitu (sous-domaine)
Vous pouvez aussi utiliser les services d’un hébergeur gratuit, comme http://www.free.fr qui offre un
grand espace de stockage gratuitement et sans vous imposer d’afficher de la publicité.
Quel que soit le type de serveur que vous choisissez, vous devez télécharger vos pages sur le
serveur, typiquement à l’aide d’un programme FTP.
La communication la plus courante se fait avec le navigateur, quand vous pazssez d’une page Web à
une autre. Ici, le protocole HTTP. Pour le transfert de fichier, c’est le protocole FTP qui est utilisé. Ce
protocole est conçu spécialement pour gérer l’échange de fichiers entre ordinateurs, et l’échange se
fait à l’aide d’un programme.
Une fois Que vos pages Web sont terminés ( et bien testées), vous devez les transférer au serveur
que vous utilisez.
Le programme FTP que vous utilisez est sans importance, car ils se ressemblent tous. Commencez
par définir votre connexion FTP à l’aide des informations suivantes (elles vous sont fournis par votre
hébergeur) :
- L’adresse FTP
- Le nom d’utilisateur (ou login)
- Un code d’accès
Vous devez absolument connaître ces informations si vous voulez placer vos pages sur Internet.
Une fois la connexion établie, vous sélectionnez les fichiers que vous transférer, en général dans le
panneau de gauche du programme FTP, où vous pouvez naviguer dans votre disque dur.
Dans l’autre panneau, vous voyez les fichiers et dossiers du serveur Web auquel vous êtes connecté.
Il suffit alors de tirer les fichiers d’un panneau à l’autre. Le transfert prend rarement plus que quelques
minutes. Quand les pages Web sont sur le serveur, elles sont publiquement disponibles à tous les
internautes.
Pour afficher vos pages sur Internet, il vous suffira de taper leur adresse URL dans un navigateur
Web.
2 – Filezilla
A – Présentation
La fenêtre du logiciel FileZilla se présente comme sur l'illustration ci-dessous. Passe la souris et clique sur les
différentes zones afin de découvrir leur nom et leur rôle:
• La barre des menus est semblable à celle de presque tous les logiciels
• La barre de connexion rapide nous servira à indiquer l'adresse de l'ordinateur de l'hébergeur, notre nom
d'utilisateur et notre mot de passe
• La fenêtre de dialogue va nous permettre de lire le dialogue entre notre ordinateur et le serveur. Ces
échanges ne concernent que les ordinateurs; nous n'avons pas besoin de les comprendre.
• La fenêtre de l’ordinateur local permet de visualiser les fichiers que nous allons télécharger, un peu
comme dans l'explorateur de Windows
• La fenêtre de l’ordinateur distant s'ouvre sur la partie du disque dur que notre hébergeur nous a réservé
sur le serveur. Au démarrage du logiciel, nous n'avons pas encore contacté le serveur; la fenêtre est
donc vide.
• Zone de file d’attente des fichiers: ici s'indiquent les noms des fichiers qui vont être téléchargés.
Nous allons télécharger l'ensemble des fichiers de notre site vers l'espace Web dont nous disposons chez notre
hébergeur.
• Dans la fenêtre de l'ordinateur local, préparons une vue du répertoire qui contient l'ensemble de nos
fichiers;
La partie supérieure nous permet de naviguer dans les répertoires sur notre disque dur. La partie inférieure nous
montre les fichiers dans le répertoire sélectionné.
B - Connectons-nous au serveur
• Dans la zone "Adresse", indiquez l'adresse du serveur FTP chez l'hébergeur. Cette adresse est
généralement du type ftp.hebergeur.com
• Dans la zone "Mot de passe", indiquez le mot de passe pour accéder à notre espace web.
Si la connexion s'est bien faite, nous voyons apparaître notre répertoire sur le serveur dans la fenêtre du serveur.
Il se peut que, dans le cas certains hébergeurs, la vue soit un peu différente.
• Par un cliquer-glisser, déplace-les l'un après l'autre dans la fenêtre de l'ordinateur distant
Le transfert se fait automatiquement. La file d'attente indique les noms des fichiers transférés. Dans la fenêtre de
dialogue, le logiciel de FTP indique ce que se racontent les ordinateurs en contact.
Quand la file d'attente est vide, le site est en ligne. Félicitations, le monde est à vous.