|
page1 --- page 2
--- page3 --- page 4 ---
page 5
03 - Création du contenu texte
Vous avez ouvert une page dans Outlook Express et en bas vous avez repéré
les 3 onglets.
En vous aidant des outils de la barre de formatage vous tapez du texte, que
vous choisissez de positionner à gauche, au centre, à droite,
justifié c'est-à-dire alifné à droite et à
gauche, avec diverses polices, tailles, et couleurs. Dans le dossier OE vous
avez stocké quelques images et en avez utilisé une première
pour agrémenter votre page.
Vous allez ensuite ouvrir une page de votre Bloc-notes pr^te pour recevoir
le source de votre page réalisée avec Outlook Express.
Ceci préparé, vous allez cliquer l'onglet "Source"
du message d'Outlook Express et avec le bouton droit de votre souris, vous "Sélectionnez
tout" puis "Copier".
Il vous reste à copier sur la page du Bloc-notes et à enregistrer
dans le dossier OE, sous le nom : essai1.htm
Jusque là pour n'avoir jamais utilisé le code HTML ni ouvert
un quelconque logiciel éditeur de page, vous obtenez avec votre seul
logiciel de messagerie, quelque chose qui transféré sur le Web
fonctionne parfaitement.
03a - Code source de la première page
En bleu le texte que vous avez tapé
à votre clavier.
En noir les codes qui permettent à tout naviagteur consultant
votre page, de retrouver votre texte correctement trancrit sur le Web.
En rose, le code correspondant à
l'image placée dans la page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2769" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial>
<DIV align=center><FONT face=Arial color=#ff0000 size=4><STRONG>Page
d'essai
n°1</STRONG></FONT></DIV>
<DIV align=justify><FONT face=Arial size=4><STRONG></STRONG></FONT> </DIV>
<DIV align=justify><FONT face=Arial><STRONG>Bonjour
tout le monde, je commence ce texte en police "Arial" taille 12,
<FONT color=#0000ff>et maintenant en couleur bleue
jusqu'ici inclus.</FONT></STRONG></FONT></DIV>
<DIV align=justify><FONT face=Arial
color=#0000ff><STRONG></STRONG></FONT> </DIV>
<DIV align=justify><FONT face=Arial><FONT color=#008000><STRONG><FONT
face="Calligraph421 BT">Je continue en vert,
police</FONT> <FONT face="Calligraph421 BT">Calligraph421
BT, et bien entendu vous faites en sorte de conserver une harmonie des couleurs
(2 à 3 au plus) pour ne pas construire un sapin de Noël !</FONT></STRONG></FONT></FONT></DIV>
<UL>
<LI>
<DIV align=justify><FONT face=Arial><STRONG>Primo,
je reviens en Arial, et j'utilise le bouton des "Puces de mise en forme"
n°9.</STRONG></FONT></DIV><LI><DIV align=justify><FONT
face=Arial><STRONG>Secundo, je vais
en rester là pour le texte et appliquer pour finir un alignement justifié,
en sélectionnant la page entière et en cliquant sur le bouton
15.</STRONG></FONT></DIV><LI><DIV align=justify><FONT
face=Arial><STRONG>Tertio, nous allons simplement
ajouter une image centrée, que nous avons au préalable déposée
dans le dossier "OE" du disque dur de l'ordinateur.</STRONG></FONT></DIV></LI></UL><FONT
face=Arial>
<DIV align=justify><BR><BR><STRONG>Un
clic sur l'onglet <FONT color=#0000ff>"Aperçu"</FONT>
du bas de page, pour vérifier que tout va bien,
et
retour sur l'onglet </STRONG><FONT color=#0000ff><STRONG>"Modifier".<BR><BR><FONT
color=#000000>Pour placer une image, je centre par
exemple mon point d'insertion du pointeur, en cliquant sur le bouton de formatage
13, puis je clique le bouton de formatage18 et une fenêtre
s'ouvre qui me permet d'aller chercher l'image de mon choix dans le dossier
OE : (profitez-en dans cette fenêtre, pour remplir la zone de saisie marquée
"Texte de légende" qui permet au passage du pointeur sur l'image,
d'afficher la légende choisie. vérifiez en cliquant l'onglet "Aperçu",
puis revenez sur l'onglet "Modifier".)</FONT></STRONG></FONT></DIV>
<DIV align=justify><STRONG></STRONG> </DIV>
<DIV align=center><STRONG></STRONG> </DIV>
<DIV align=center><FONT color=#0000ff><FONT color=#000000><STRONG></STRONG></FONT></FONT></DIV>
<DIV align=center><FONT color=#0000ff><FONT color=#000000><STRONG></STRONG></FONT></FONT></DIV>
<DIV align=center><FONT color=#0000ff><FONT color=#000000><STRONG><IMG
alt="pas à pas" hspace=0
src="D:Documents and SettingshenryMes documentsaidenetOEoe11.jpg"
align=baseline border=0></STRONG></FONT></FONT></DIV>
<DIV align=center><STRONG></STRONG><FONT color=#0000ff> </DIV>
<DIV align=justify></FONT></FONT><FONT face=Arial><STRONG>Voici
une première avancée, mais avant de fermer cette page, <FONT
color=#ff0000>TRES
IMPORTANT,</FONT> il faut sauvegarder son
ouvrage : </STRONG></FONT></DIV><DIV align=justify><FONT
face=Arial><STRONG>Ouvrez une page vierge de
votre BLOC-NOTES, cliquez sur "Source" de cette page messagerie, sélectionnez
tout, copiez et collez sur la page du Bloc-notes.</STRONG></FONT></DIV>
<DIV align=justify><STRONG><FONT face=Arial>Enregistrez
alors cette page du Bloc-notes dans le dossier bien connu OE, sous le nom suivant
(par exemple) :
<FONT color=#ff0000>essai1.htm.</FONT></FONT> </STRONG></DIV>
<DIV align=justify><FONT face=Arial color=#ff0000><STRONG></STRONG></FONT> </DIV>
<DIV align=justify><FONT face=Arial color=#0000ff><STRONG>Cette
page d'Outlook Express est maintenant inutile, mais il est souhaitable
de la conserver pour éventuellement la modifier . Elle vous
a servi à générer le code HTML du texte en clair et de
l'image que comporte ce premier fichier. Complétez la zone de saisie
"Objet" par exemple par "essai1".</STRONG></FONT></DIV><DIV
align=justify><FONT face=Arial color=#0000ff><STRONG>Cliquez
enfin sur la petite croix rouge dans l'angle supérieur droit, et enregistrez
là, elle va se stocker directement dans le dossier "Brouillons"
du logiciel de messagerie, où vous aurez si besoin tout loisir pour la
retrouver.</STRONG></FONT></DIV></FONT></DIV></BODY></HTML>
03b - Conclusions et bilan provisoire
Naturellement le code utilisé est correct vu que ça fonctionne,
mais on peut dire aussi qu'il est "assez lourd" et peut être
simplifié par endroits. Mais là n'est pas notre propos.
Avez-vous remarqué que sur l'en-tête de la fenêtre du navigateur,
lorsque vous visualisez la page "essai1.htm", il y a un véritable
charabia ?
Allez-voir en cliquant sur ce lien >>> là
et ensuite refermez la fenêtre pour revenir ici.
Page suivante vous allez porter remède à ce défaut de
présentation et placer quelques liens hypertextes, vous savez ces liens
soulignés qui lorsque vous cliquez dessus vous permettent de naviguer.
Vous allez les créer, c'est facile et le résultat final toujours
agréable.
On passe >>> page 04
page1 --- page 2
--- page3 --- page 4 ---
page 5
Tous droits
réservés © 1997- 2006. www. aidenet.com
|
