Faire sa page dans le bloc-notes de Windows

Télécharger le tutorial complet pour l'utiliser hors connexion
Non, ce n'est absolument pas difficile de construire sa page dans le Bloc-notes de windows! J'ai découvert cette méthode par hasard et depuis, je me sens beaucoup plus libre dans la construction de mes pages, libre de suivre mon inspiration du moment et d'expérimenter de nouvelles idées...
Essayez, vous ne serez pas déçus!

Voici comment démarrer votre page dans le Bloc-notes de Windows:
(Je vous propose de vous déconnecter un moment si vous voulez tester ce tutorial qui fonctionnera hors connexion)


Base de page

1-Créez un nouveau dossier sur votre disque dur et appelez-le "monsite" ou "pol" ou "bob", c'est là que vous allez ranger tout ce que va contenir votre site (pages.htm, sons, images, etc...) et ouvrez ce dossier en double-cliquant sur son icône.
2-Créez un nouveau document ".text" en cliquant avec le côté droit de votre souris dans la fenêtre de votre dossier ensuite sur "Nouveau" puis sur "Document texte".
3-Ouvrez votre document et collez-y ce qui se trouve ci-dessous:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>titre de votre page</TITLE>
<META NAME="Author" CONTENT="Votre nom">
<META NAME="Description" CONTENT="description de votre site">
<META NAME="Keywords" CONTENT="mots, clés, destinés, aux, moteurs, de, recherche">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000080" VLINK="#800080" ALINK="#FF0000" LEFTMARGIN=20 TOPMARGIN=10>

Et ici, vous mettrez tout le contenu de votre page

</BODY>
</HTML>


4-Enregistrez votre document en cliquant sur fichier, puis sur enregistrer.
5-Fermez votre document.
6-Renommer votre fichier en changeant l'extension ".txt" par ".htm" et donner lui le nom que vous voulez. Si c'est la première page de votre site, il vaut mieux l'appeler "index.htm".
7-Double-cliquez sur la nouvelle icône et vous voyez apparaître devant vous une belle page web toute blanche avec une phrase dessus !
8-Cliquez dans la fenêtre de Internet Explorer sur "Affichage" "Source" et là, vous retrouvez le document texte, tel que vous l'aviez laissé!

Vous voilà prêt à travailler!

Les balises:

Juste un petit mot sur le principe des balises...
Les balises sont les caractères contenus entre les chevrons "<" et ">". En général, elles vont par paire, On dit alors qu'on a affaire à un conteneur. La balise terminale est la même que la balise de début, à ce détail près que le mot clé y est précédé d'un slash "/". La balise initiale peut être complété par des attributs qui donnent une précision complémentaire concernant la balise.

Voilà les balises obligatoires dans un document web:

<HTML>...</HTML> ====> au début et à la fin, c'est ça qui fait que votre document est une page web.

<HEAD>...</HEAD> ====> c'est l'en-tête, non visible dans laquelle on met par exemple, le titre qui sera affiché dans la barre de titre du navigateur, ainsi que les balises <META NAME= ... dans les quelles vous décrivez votre document pour les robots des moteurs de recherche.

<BODY>...</BODY> ====> c'est dans ce conteneur que vous mettrez ce que les visiteurs de votre page vont réellement voir, c'est à dire votre texte et vos images...

Allez-y!

Voilà, vous pouvez déjà commencer à taper quelque chose... Allez-y!
Ensuite, cliquez sur "fichier" "enregistrer", puis remettez la fenêtre d'Internet Explorer à l'avant-plan en cliquant sur son icône dans la barre des tâches ou n'importe où sur le bord de la fenêtre à l'écran si vous l'apercevez...
Evidemment, vous ne voyez toujours rien... Cliquez sur "Actualiser" dans la barre d'outils et, Miracle, vous voyez apparaître ce que vous avez tapé!
Voilà, c'est le grand principe du travail dans le bloc-notes...
Toutefois, méfiez-vous, préparez-vous quelques friandises et de quoi vous désaltérer car ce petit jeu devient vite captivant et vous ne verrez plus le temps passer!

Modifier l'apparence du texte saisi:

La police

Normalement, votre navigateur vous affiche le texte que vous avez saisi en petit caractère et avec la police "Times New Roman", c'est la police par défaut.
Pour personnaliser l'aspect de la police, vous devez utiliser la balise <FONT>...</FONT>.
Par exemple, vous pouvez spécifier la police qui sera affichée à l'écran, mais attention, ne choisissez pas une police peu courante car si le surfeur n'a pas cette police sur son ordinateur, il verra le texte dans la police par défaut! Donc, limitez-vous aux polices courantes: ARIAL et COMIC SANS MS sont les plus répandues

Placez juste avant la phrase que vous avez saisi la balise <FONT FACE="ARIAL"> et juste après la phrase, ajouter bien sûr </FONT>

Cela veut dire que le texte inclus dans le conteneur sera affichée avec la police "ARIAL"

Enregistrez, actualisez dans IE, visionnez, c'est chouette, non?

Et la couleur, me direz-vous?

Alors, là, il y deux possibilités:
1- Vous définissez la couleur par défaut de votre document dans la balise <BODY> avec l'attribut TEXT=COLOR, normalement, si vous avez copier le code ci-dessus, vous voyez que la couleur du texte est déjà spécifiée par TEXT="#000000", c'est à dire noir... Vous pouvez changer le code en "#008080" et vous aurez un texte vert bleuté...
Mais pour vous qui débutez, ce n'est pas très évocateur, ces chiffres, alors sachez que vous pouvez utilisez les noms des couleurs reconnues par les deux navigateurs... Essayez, par exemple, <....... TEXT COLOR="NAVY"....> et vous avez un beau bleu marine! Vous trouverez les noms de ces couleurs dans la page réservée aux 600 couleurs du web.

2- Vous voulez qu'une phrase soit affichée dans une couleur particulière? Dans ce cas, reprenez votre balise <FONT> et ajoutez-y l'attribut COLOR, par exemple:

<FONT FACE="ARIAL" COLOR="RED">votre belle phrase</FONT>
<FONT FACE="ARIAL" COLOR="MAGENTA">votre belle phrase</FONT>

Et la taille?

Ben ça, c'est pas compliqué, il suffit d'ajouter l'attribut SIZE, par exemple:

<FONT FACE="ARIAL" COLOR="BLACK" SIZE=4>votre belle phrase</FONT>
C'est déjà plus grand, n'est-ce pas? On peut indiquer une taille variant de 1 à 7...

Afficher en gras

Très simple et pas fatigant; il suffit de placer votre phrase dans le conteneur <B>...</B>, par exemple:
<B><FONT FACE="ARIAL" COLOR="BLACK" SIZE=3>Bienvenue sur ma page! </FONT></B>

Ben, ça en fait des balises à taper, me direz-vous? Ne négligez pas l'utilisation du copier coller, sans ça, la construction de votre site va vite devenir un travail de forçat...

Afficher en italique

Même principe que pour afficher en gras, sauf qu'ici, vous utilisez la balise <I>...</I>

Souligner

Ca, je vous déconseille fortement, car normalement, ce sont les liens qui sont soulignés, dans une page..
.Enfin, si vous êtes têtu, vous faites comme plus haut mais vous utilisez la balise <U>...</U>

Mais il y a quand même moyen de souligner, en traçant un trait sous le mot avec le marqueur <HR>

Tracer un trait

Pas fatigant et très précis : <HR> C'est un marqueur, c'est à dire qu'il n'y a pas besoin de fermer en faisant </HR>!
Ce qu'il y a de chouette, avec <HR>, c'est qu'on peux définir la longueur de la ligne, par exemple:

<HR WIDTH=60%> et vous aurez une ligne qui occupera 60% de la fenêtre...

Vous pouvez aussi spécifier la couleur de la ligne, mais, attention, seul IE4 affiche les couleurs pour les lignes, pas Netscape!

Essayez <HR WIDTH=60% COLOR="MAGENTA">, vous devrez obtenir ceci:

Vous pouvez donc souligner comme ceci:

La culture des potirons dans le Poitou

Aller à la ligne

Normalement, vous tapez votre texte au kilomètre, comme on dit, car ça ne sert à rien d'aller à la ligne dans le Bloc-notes, vous ne le verrez pas affiché dans le navigateur! Donc, quand vous voulez aller à la ligne, vous devez l'indiquer par le marqueur <BR>

Ce marqueur sera sans doute celui que vous utiliserez le plus car il sert aussi à aérer du texte ou des images quand une marque de paragraphe est trop importante à votre goût...

Marquer un paragraphe

Pour cela, vous utiliserez la balise<P>...</P> ou plutôt <DIV>...</DIV> Pourquoi <DIV>? Parce que Netscape n'interprète pas correctement les attributs que vous pouvez ajouter pour formater les paragraphes si vous utilisez la balise<P>

Paragraphe vide

Parfois, vous souhaiterez laisser des espaces vides sur votre page. Dans ce cas tapez ceci:

<P>&nbsp;</P>

Si l'espacement est trop grand, n'oubliez pas que vous pouvez utiliser aussi le marqueur <BR> qui est la moitié d'un <P>.

Formater un paragraphe

Comme en traitement de texte, un paragraphe peut être aligné à gauche, à droite, centré ou justifié de la façon suivante:

<DIV ALIGN="LEFT">...</DIV>, mais en général, si on ne met rien, il s'aligne à gauche par défaut

<DIV ALIGN="RIGHT">...</DIV>, alignement à droite.

<DIV ALIGN="CENTER">...</DIV>, alignement centré

<DIV ALIGN="JUSTIFY">...</DIV>, alignement justifié

Et, maintenant, petite récréation!

Je vais vous reparlez un peu des couleurs...
Vous avez vu qu'il y a deux façon de coder les couleurs: soit avec le nom reconnu de la couleur, ex: "BLACK" ou alors avec des chiffres, ex : "#000000".

Il est vrai que c'est moins astreignant de taper un mot que six chiffres, toutefois, sachez qu'avec les codes couleur chiffrés, vous avez le choix, non plus entre 600 couleurs, mais entre 16 millions!
Comment ça fonctionne? Ben, c'est simple... En informatique, on utilise trois couleurs pour en faire 16 millions ou même plus... Le rouge, le vert et le bleu, d'ou l'abréviation RGB.
Le code utilisé ici est le code hexadécimal qui utilise les chiffre de 0 à 9 et les lettres de A à F.
Chaque couleur a droit a deux chiffres ou lettres, mais toujours dans le même ordre: rouge, vert, bleu.
Si vous mettez les trois couleurs à fond, vous avez "#FFFFFF", c'est à dire blanc.
Si vous ne mettez aucune couleur, vous avez "#000000", c'est à dire noir.

Alors, faites des tests, juste pour vous amuser en tapant ceci:

<B><FONT FACE="ARIAL" COLOR="#000000" SIZE=3>Bienvenue sur ma page! </FONT></B>

Et puis changer juste le code... Par exemple, si vous tapez "#D2D2D2", vous aurez du gris, et si vous donnez toujours la même valeur à chaque couleur, vous aurez toujours du gris!

Essayez: "#FF99FF", "#99CC99", "#66CCFF", "#FF99CC", "#99CC66", "#66CCCC" ou laissez faire votre imagination...
C'est amusant, non?

L'arrière plan de votre page

Puisque vous êtes familiarisé avec les couleurs, vous pouvez maintenant choisir une couleur pour votre fond de page.
Vous spécifiez cela à l'intérieur de la balise <BODY> de la façon suivante:

<BODY BGCOLOR="#FFFFBD"> et là vous aurez un fond jaune pâle... Dans le code ci-dessus, la couleur de fond choisie est "#FFFFFF", c'est à dire blanc.

Cadeau!

Ben, comme vous avez été bien courageux de tenir le coup jusqu'ici, je vais vous offrir une bon outil pour travailler de façon très précise avec les codes couleurs...
Il s'agit d'une applet que j'ai trouvée sur le web et je remercie l'auteur dont j'ignore le nom, malheureusement... Vous tracassez pas, cette applet est librement utilisable!
Donc, vous télécharger le fichier zip de l'applet, vous le dézipper avec Winzip, par exemple (Réservez un nouveau dossier pour cette applet, afin que tous les fichiers restent bien ensemble et ne se perdent pas sur votre disque dur).
Ensuite, dans ce dossier, vous cliquez sur la page .htm qui s'y trouve et là, vous trouvez une belle applet qui vous rendra mille fois service et même plus! Vous jouez avec les tirettes et quand une couleur vous plaît, vous regardez en bas et vous voyez le code exact! Magique, non?

Maintenant, si vous travaillez comme un horloger et que vous voulez, par exemple, la couleur exacte du fond de l'image que vous avez inséré, vous ouvrez votre image dans un soft image un peu élaboré, quand même, vous prenez l'outil "pipette", vous cliquez sur la couleur qui vous intéresse et vous devez voir quelque part les valeurs RGB de cette couleur, par exemple 255,255,255, c'est blanc. Vous prenez la page avec l'applet, vous positionnez les tirettes afin d'avoir les mêmes valeurs et en bas, qu'est-ce vous voyez? Le code hexadécimal correspondant à ces valeurs! Et en plus, elle fonctionne au poil, cette applet, juste un peu gourmande en ressource, mais c'est la seule qui fonctionnait parfaitement parmi toutes celles que j'ai trouvées sur le web...

Un peu de musique?

Pourquoi pas? Ca mettra un peu d'ambiance dans votre page... Toutefois, essayez de ne pas choisir un morceau trop gros à charger, sinon, le surfeur aura quitté votre page avant d'en avoir entendu une seule note!

Je ne connais qu'un code qui fonctionne avec les deux navigateurs et c'est :

<embed src=votrechanson.mid autostart=true loop=true hidden=true volume=100%>

Remplacez "votrechanson" par le nom du morceau que vous voulez faire jouer et surtout, n'oubliez pas de placer le fichier .mid dans le dossier contenant les pages de votre site! Vous voyez, on peut même régler le volume!

N.B. Vous trouverez sur mon site des centaines de fichiers midi et surtout, la perle du site: le TOP 100 MIDI où vous pouvez aller choisir, à votre aise, le morceau qui mettra de l'ambiance sur votre page!

Insérer une image

Votre belle-mère ressemble à Kim Bassinger? Alors il faut absolument mettre sa photo sur le web!
Comment? Facile! D'abord, il faut la prendre en photo, forcément -:)) Ensuite, vous scannez la photo en question, vous la convertissez en format .jpg, vous mettez l'image dans le dossier de votre page et vous inscrivez la balise suivante :

<IMG SRC="bellemere.jpg"> et c'est tout!

Mais on peut faire mieux : <CENTER><IMG SRC="bellemere.jpg" WIDTH=400 HEIGHT=300 BORDER=0 ALT="La photo de ma belle-mère!"></CENTER>

De cette façon, vous définirez la position de l'image dans la page ainsi que la taille à laquelle elle devra être affichée... Ce n'est pas obligatoire, mais comme l'image arrivera après le texte, sa place sera déjà dimensionnée et réservée. Pensez donc à noter sa taille dans votre soft image.

L'attribut ALT sert à afficher un texte de remplacement pendant que l'image charge et aussi à faire apparaître une infobulle quand le surfeur pointera son curseur sur l'image. Vous y inscrivez ce que vous voulez...

L'attribut BORDER sert à entourer votre image d'une bordure, on s'en sert peu...

Conseils

Pour vos images, ne dépassez pas une certaine taille de fichier, restez raisonnable. Si l'image sert juste à décorer un peu votre page, ne dépassez pas 10 à 15 ko. Si vous voulez afficher un chef d'oeuvre de création graphique en 640*480, fabriquer une réduction de cette image avec une taille de 100*75 pixels, par exemple, et faites un lien au départ de cette vignette vers l'image en taille réelle, comme ceci:

<A HREF="oeuvre.jpg><IMG SRC="bellemere.jpg" WIDTH=100 HEIGHT=75 BORDER=0 ALT="Mon chef d'oeuvre de création graphique"></A>

Pour centrer l'image, vous ajouter simplement le conteneur: <CENTER>.........</CENTER>

GIF ou JPG?

Vous avez le choix entre ces deux formats pour afficher vos images sur le web. Toutefois, personnellement, j'utilise de préférence le format .jpg parce que le format .gif ne permet d'affficher au maximum que 256 couleurs, il y a donc altération de l'image avec une apparition de points ou de plage de couleur unie.
Le format .gif est intéssant et même obligatoire pour les gifs animés (forcément -:) ). A ce propos, j'ai une très belles collection de liens vers les plus grands sites de gifs animés dans ma page de liens. Vous pouvez également avoir un aperçu de quelques gifs animés que j'ai apprécié sur ma page réservée aux gifs animés.

En ce qui concerne le format .jpg, votre soft image vous proposera sûrement plusieurs degrés de compressions. Ne choisissez pas un taux de compression trop bas, parce que vous abîmerez votre image, ni trop haut non plus, parce que votre fichier sera trop gros, faites donc plusieurs essais avant de vous décider et surtout faites d'abord une sauvegarde de votre image en format .bmp, tif ou .psd, de façon à pouvoir la récupérer si le résusltat de la compression de vous convient pas...
Evitez aussi de retravailler votre image une fois qu'elle est compressée, car chaque fois que vous allez la réenregistrer, sa qualité va devenir de plus plus médiocre et vous ne le verrez peut-être pas de suite...

Afficher une image en arrière-plan

Pour enjoliver encore votre page, vous pouvez aussi insérer une petite image qui sera affichée en mosaïque sur le fond. Pour ce faire, insérez cet attribut à l'intérieur de la balise <BODY................................>:

BACKGROUND="fond.jpg"

A ce propos, je mets à votre disposition sur ce site plus d'une centaine de fonds de page, pour y accéder, cliquez sur le bouton "Fonds d'écran" dans le menu situé dans le frame de gauche.

Les liens

Vous voudrez sûrement ajouter des liens dans votre page...
Sachez qu'il y a deux sortes de liens et même trois...
1- Les liens internes vers les autres pages de votre site.
2- Les liens externes vers des pages extérieures à votre site.
3- Si votre page fait deux kilomètres, il faut aussi envisager des liens pointant vers certains endroits dans votre page, pour que le surfeur puisse sauter d'une section à l'autre.

Dans tous les cas, on utilise la balise <A HREF=".......">.........</A>

N.B. Vous pouvez spécifier la couleur dans laquelle s'afficheront les liens de votre page dans la balise <BODY>.
LINK="#000080" Les liens non visités
VLINK="#800080" Les liens déjà visités
ALINK="#FF0000" La couleur que prend le lien au moment où on clique dessus.

Les liens internes

Ce sont des liens relatifs à condition que vos autres pages se trouvent bien sur le même serveur. C'est à dire qu'on indiquera uniquement le nom de fichier de l'autre page. Exemple:

<A HREF="galerie.htm" Visiter ma galerie d'images.</A>

Les liens externes

Ce sont des liens absolus, en ce sens que vous devez indiquer l'URL complète de la page. Exemple:

Je vous invite à visiter<A HREF="http://perso.infonie.fr/kissfamily/gallery.htm"> Kissfamily's virtual Landscapes</A>, une très belle galerie de paysages virtuels!

Cela apparaîtra comme ceci :

Je vous invite à visiter Kissfamily's virtual Landscapes, une très belle galerie de paysages virtuels!

Les liens à l'intérieur d'une même page

Là, il faut placer des marquages aux endroits que voulez faire atteindre au visiteur. Donc vous placez aux endroits concernés cette balise:

<A NAME="TOP"></A> "TOP" étant un mot de code convenu par vous-même.

Ensuite, pour qu'on puisse atteindre cet endroit, vous insérez cette autre balise:

<A HREF="#TOP">Retour en haut de la page</A>

Les caractères accentués et les entités de caractère

Vous ne le remarquerez sans doute pas avec Internet Explorer sur votre machine, mais certains navigateurs sur certaines machines ne sont pas capables d'interpréter les caractères accentués, comme, par exemple: é è à ç ù î ô. Donc, l'idéal serait de remplacer tous ces caractères par des entités de caractères.
L'entité de caractère commence généralement par un "&" et se termine par un ";".

Les entités les plus courantes:

  • &eacute; signifie "é"
  • &egrave; signifie "è"
  • &ecirc; signifie "ê"
  • &agrave; signifie "à"
  • &ccedil; signifie "ç"
  • &nbsp; signifie un caractère vide, c'est à dire un espace. On s'en sert beaucoup pour aérer entre deux images juxtaposées, par exemples

Maintenant, ne vous affolez pas... Avec un peu d'organisation, on s'en sort très bien... Tapez votre texte normalement. Quand le résultat vous semble satisfaisant, commencer par un caractère à la fois, "é", par exemple. Sélectionnez le premier "é" que vous rencontrez et retaper dessus l'entité de caractère correspondante, dans ce cas "&eacute;" et ensuite copier juste l'entité dans le presse papier... Vous n'avez plus qu'à chasser tout les "é", les sélectionner et copier chaque fois l'entité dessus. Et si vous en oubliez une ou deux, ce n'est pas grave, votre page restera quand même compréhensible pour vos visiteurs.

Votre email

Comme vos visiteurs voudront certainement vous féliciter pour votre page, il serait bien que vous leur laissiez la possibilité de la faire en insérant votre email.
Voilà la balise que j'utilise:

Webmaster: <A HREF="mailto:kissfamily@infonie.be">Kissfamily </A>

Cela va donner ça : Webmaster: Kissfamily

De cette façon, quand le surfeur cliquera sur mon pseudo, cela va déclencher l'ouverture de son logiciel de courrier électronique avec mon email inscrit déjà dedans!

! Attention !

  • Faites très attention à ne pas oublier de fermer vos balises et marqueurs. En effet, si vous oublier un seul "<" ou ">", cela va altérer l'affichage de votre page...
  • Très important aussi, faites attention aux guillemets. Si vous en oubliez, cela empêchera l'affichage de certaine choses comme les images ou rendra inutilisable vos liens...
  • Pour vos fichiers, n'utilisez que des minuscules et pas de caractères accentués. Sur votre ordi, il n'y aura aucun problème, mais une fois sur le serveur, vous risquez de ne plus voir vos images ou que vos liens ne fonctionnent plus.
    Donc respectez la casse. En effet, les serveurs tournent souvent avec UNIX qui lui, fait la différence entre Index.htm et index.htm, ou entre Image.jpg et image.jpg ou image.JPG.

Allez, au boulot!

Ben voilà, si vous suivez scrupuleusement les indications ci dessus, vous êtes à même de réaliser votre page sans même devoir vous lancer dans l'apprentissage du maniement d'un soft HTMLet en plus, vous n'aurez pas à débourser un franc. D'autre part, vous contrôlez absolument tout, puisque vous tapez vous même les balises. D'autre part, même après avoir enregistrer et visionner dans Internet Explorer, vous pouvez toujours annuler la dernière modification dans le bloc-notes. C'est la raison pour laquelle je vous conseille, si vous avez un doute, d'enregistrer et de visionner immédiatement, comme ça, si quelque chose ne va pas, vous le verrez tout de suite et vous pourrez l'annuler ou le rectifier de suite.