ZIK ! - Webmestres - Dossier : Votre première page Web !

Votre première page Web !

Avant de vouloir vous référencer pour attirer le maximum de personnes sur votre site ou de chercher des partenaires, il faut d'abord choisir un sujet puis, réaliser votre site avec l'aide d’un logiciel spécialisé telle que Front Page, Web Expert, Web Artiste… qui feront très bien l'affaire.

Le choix du sujet

Vous avez déjà une petite idée de ce que vous allez faire ... alors je vous laisse réfléchir ; mais si vous ne savez pas quoi faire, voilà quelques petites idées, que vous pourrez traitées sur votre site Web : votre vie (si elle sort de l'ordinaire ou si vous avez réalisé un exploit peu commun, ou encore si vous avez fréquenté une star,... ), vos idées, vos opinions, vos passions, votre gazette perso (actualités, critiques, événements,...), un fan club que vous avez créé ou encore une association,... et si tout cela ne vous inspire pas, allez faire un tour sur le Web, peut-être trouverez-vous des idées intéressantes !

Réaliser votre page Web - HTML

Le HTML, ce langage permet l'écriture de toutes sortes de textes ( choix des polices, tailles, couleurs, etc ... ), insérer des images, des sons, des formulaires et surtout des liens hypertextes pour donner à son site une certaine interactivité.
Mais avant tout, il faut savoir qu'une page HTML est constituée de deux parties :

Les balises <HTML> et </HTML> délimitent la page. Celle-ci commence par un en-tête (1ère partie) entre <HEAD> et </HEAD> dans lequel on trouvera des informations sur la page, comme son titre, sa description, on peut aussi y placer des fonctions Javascript. Ensuite on a le corps (2ème partie) de la page, entre <BODY> et </BODY>, c'est là que se trouvera le contenu de la page affiché à l'écran.

1. L'en-tête (HEAD) : Il n'est pas directement visible lorsque l'on consulte une page Web. Cette partie est délimitée par les balises <HEAD> et </HEAD>.

Le titre de la page : Le choix d'un titre pour votre page Web est très important. Ce titre apparaîtra dans la barre de titre de la fenêtre du navigateur lorsque l'on consulte la page, mais aussi, dans les listes de pages présentées par les moteurs de recherche. Pour changer le titre il faut ouvrir le fichier source de la page HTML. Le titre est inséré entre ces deux balises : <TITLE> et </TITLE>. Le résultat devrait ressembler à cet exemple : Vous pouvez personnalisé ce qui apparaît en rouge.
<title>Titre de cette page Web</title>

La description de la page : La description de votre site, comme pour le titre, est très important. Car ce texte va s'afficher dans les listes de sites présentées par les moteurs de recherche. Il faut donc qu'il soit assez explicite pour qu'il représente, au mieux, votre page Web. En affichant les fichiers sources de votre page HTML, vous devriez avoir votre texte descriptif, dans l'en-tête, après la balise DESCRIPTION, comme pour cet exemple : Vous pouvez personnalisé ce qui apparaît en rouge.
<meta name="description" content="Descriptif de votre site">

Les mots clés : Les mots clés que vous choisirez, décriront votre page Web. Eux aussi sont importants. Beaucoup de moteurs de recherche les analysent pour un meilleur référencement de votre page Web. Il vous suffit de savoir que les mots clés sont placés dans l'en-tête de chaque page après la balise KEYWORDS. La syntaxe est la même que celle utilisée pour le descriptif : Vous pouvez personnalisé ce qui apparaît en rouge.
<meta name="keywords" content="Mots clés, séparés par des virgules">

Le nom de l'auteur du site : Ce n'est pas indispensable, mais si vous voulez que votre nom soit inscrit vous pouvez le faire, en suivant cet exemple : Vous pouvez personnalisé ce qui apparaît en rouge.
<meta name="nameAutor" content="vous">

Voici maintenant, un exemple d'en-tête tout simple :
Vous pouvez personnalisé ce qui apparaît en rouge.

            <head>
            <title>Ma première page Web</title>
            <meta name="nameAutor" content="Mon nom et Mon prénom">
            <meta name="description" content="Descriptif de ma page Web">
            <meta name="keywords" content="Mots clés, séparés par des virgules">
            </head>

2. Le corps (BODY) : C'est la partie visible, celle qui sera affichée par le navigateur. Cette partie est délimitée par les balises <BODY> et </BODY>.

Le texte :
Vous pouvez choisir la police du texte tapé, la taille et la couleur grâce à la première balise. Vous pouvez choisir le type de police, la taille (de 1 à 7), et la couleur (normalement en hexadécimal, mais vous pouvez aussi inscrire le nom de la couleur en anglais : black, white, red, yellow, etc ...) : Vous pouvez personnalisé ce qui apparaît en rouge.
<FONT FACE="Times New Roman" SIZE=5 COLOR="#000000">Votre texte</FONT>

Quelques types d'enrichissement :

Gras, italique, souligné et barré :
Vous pouvez personnalisé ce qui apparaît en rouge.

- B pour avoir un texte en gras : <B>Votre texte</B>
- I pour un texte en italique : <I>Votre texte</I>
- U pour avoir un texte souligné : <U>Votre texte</U>
- STRIKE pour avoir un texte barré : <STRIKE>Votre texte</STRIKE>

Exemple :
FONT FACE="Arial" SIZE=5 COLOR="green"><B>Texte1,</B><I> Texte2, </I><U>Texte3,</U><STRIKE>Texte4 !</STRIKE></FONT>
Résultat : Texte1, Texte2, Texte3, ~~Texte4 !~~

La taille :
Vous pouvez personnalisé ce qui apparaît en rouge.

- H1 Pour écrire très grand : <H1>Votre texte</H1>
- H2 Pour écrire grand : <H2>Votre texte</H2>
- H3 Pour écrire moyen : <H3>Votre texte</H3>
- H4 Pour écrire petit : <H4>Votre texte</H4>
- H5 Pour écrire très petit : <H5>Votre texte</H5>
- H6 Pour écrire très très petit : <H6>Votre texte</H6>

- FONT SIZE (de1 à 7)
<FONT SIZE="1">Votre texte</FONT> : pour écrire très très petit
<FONT SIZE="2">Votre texte</FONT> : pour écrire très petit
<FONT SIZE="3">Votre texte</FONT> : pour écrire petit
<FONT SIZE="4">Votre texte</FONT> : pour écrire moyen
<FONT SIZE="5">Votre texte</FONT> : pour écrire grand
<FONT SIZE="6">Votre texte</FONT> : pour écrire très grand
<FONT SIZE="7">Votre texte</FONT> : pour écrire très très grand

Exemple :
<H3>Texte 1, </H3><FONT SIZE="6">Texte 3.</FONT>

Résultat :

Texte 1,

Texte 3.

L'alignement, gauche, centre, droite :
Vous pouvez personnalisé ce qui apparaît en rouge.

- LEFT, CENTER, RIGHT pour avoir un texte aligné à gauche, centré ou à droite horizontalement sur la page.
<DIV ALIGN="left">Votre texte</DIV>
<DIV ALIGN="center">Votre texte</DIV>
<DIV ALIGN="right">Votre texte</DIV>

Les lien hypertexte :
Les liens sont très importants, ils permettent de naviguer entre vos différentes pages ou de mettre un lien vers d'autres sites.
La balise spécifique d'un lien hypertexte est : <A> et </A> Il y a deux types de lien hypertexte, externe et interne. Le lien externe vous transporte vers une autre page de votre site ou un autre site tandis que le lien interne fait référence à une destination qui se trouve à l'intérieur d'une même page.

Les liens externes : Vous pouvez personnalisé ce qui apparaît en rouge.
Si vous voulez mettre un lien vers ZIK ! ou un autre site Web, faites comme ceci :
<A HREF="http://www.chez.com/zikwebsite">ZIK !</A>
Cela vous donnera ce résultat : ZIK !

Si vous voulez mettre un lien vers un page Web de votre site, par exemple, faites comme ceci :
<A HREF="index.htm">Page d'Accueil</A>
Cela vous donnera ce résultat : Page d'Accueil

Les liens internes : Vous pouvez personnalisé ce qui apparaît en rouge.
Si vous voulez mettre un lien interne, deux étapes sont nécessaires :
Tout d'abord, il faut mettre une marque à l'endroit où doit aboutir le lien, et lui donner un nom. Par exemple:
<A NAME="paragraphe1"></A>
Ensuite, pour se retrouver au "paragraphe1" (à partir d'un autre endroit de la page), il suffit alors de placer à l'endroit désiré :
<A HREF="#paragraphe1">Cliquez ici pour aller au Paragraphe 1</A>
Vous pouvez mettre autant de liens internes vers le "paragraphe1" que vous voulez, en changeant le commentaire si vous le désirez.

Il est aussi possible de mettre un lien d'une page vers un endroit précis d'une autre page. Pour cela, il faut que dans la page cible, un lien interne ait été défini de la même façon qu'un lien interne comme avant :
<A NAME="paragraphe1"></A>
Et de mettre le lien dans la première page comme ceci :
<A HREF="votrepage.htm#paragraphe1">Cliquez ici pour aller au Paragraphe 1 de la page suivante</A>
c'est-à-dire en rajoutant à un lien habituel le lien interne.

Les liens vers une adresse e-mail : Vous pouvez personnalisé ce qui apparaît en rouge.
Ce type de lien, permet d'envoyer directement un mail si le navigateur est configuré pour cela. Pour obtenir un tel lien, il suffit de remplacer http:// par mailto: et l'adresse e-mail :
<A HREF="mailto:zikwebsite@chez.com">Ecrivez-nous !</A>
Cela vous donnera ce résultat : Ecrivez-nous !

Le saut de paragraphe et le retour à la ligne :

Le saut de paragraphe se fait avec la balise <P>.

Exemple :
... c'est la fin d'un paragraphe
<P>
Et ça c'est le début du suivant ...

Résultat :
... c'est la fin d'un paragraphe

Et ça c'est le début du suivant ...

Le retour à la ligne se fait avec <BR> , cette balise s'insère telle quelle à la fin d'une phrase pour effectuer un changement de ligne.

Exemple :
... à la ligne
<BR>
Et voilà, c'est fait ...

Résultat :
... à la ligne
Et voilà, c'est fait ...

La couleur (du texte, du fond d'écran, des liens) :
Il y a deux moyens de définir une couleur : par son nom ou par sa valeur hexadécimale. Pour vous voici les couleurs de base connues par tous les navigateurs :
(Nom de couleur suivi de sa valeur hexadécimale)

aqua (vert d'eau) #00FFFF
black (noir) #000000
blue (bleu) #0000FF
fushsia (fuchsia) #FF00FF
gray (gris) #808080
green (vert) #008000
lime (citron vert) #00FF00
marron (marron) #800000

navy (bleu marine) #000080
olive (olive) #808000
purple (pourpre) #800080
red (rouge) #FF0000
silver (argent) #C0C0C0
teal (sarcelle) # 008080
white (blanc) #FFFFFF
yellow (jaune) #FFFFF00

Voici comment s'utilise le code hexadécimal :
Les trois couleurs de base sont rouge, vert et bleu, à partir desquelles les autres sont formées. Les proportions évoluent selon un nombre à deux décimales en base 16 :
0 1 2 3 4 5 6 7 8 9 A B C D E F.
Pour chacune des trois couleurs, de "00" à "FF" il y a 256 nuances soit plus de 16 millions de couleurs en combinant les trois. Par exemple, vert et rouge donne jaune (#FFFF00), bleu et rouge donne magenta (#FF00FF), bleu et vert donne cyan (#00FFFF). Petit hic, nos navigateurs ne supportent en fait que 216 couleurs, mais ça permet déjà d'avoir un choix plutôt vaste. Pourquoi 216? Parce qu'ils arrondissent et ne connaissent en fait que 00 33 66 99 CC FF, 6 possibilités pour chacune des 3 couleurs: 6*6*6=216, mais rien ne vous empèche de travailler comme si toutes les couleurs étaient là.

Ci-dessous, quelques balises qui permettent de modifier la couleur d'un élément :

Couleur de fond de page : <BODY BGCOLOR="white"> ou bien <BODY BGCOLOR="FFFFFF">
Couleur du texte : <BODY TEXT="black"> ou bien <BODY TEXT="000000">

Couleur des liens : <BODY LINK="#0000FF">
Couleurs des liens visités : <BODY VLINK="#FF0000">
Couleur des liens actifs : <BODY ALINK="#800080">

Quelques conseils :
Pour votre site, préférez un texte foncé sur un fond clair. Il est vrai qu'un texte clair sur un fond foncé donne un bel effet, mais est plus fatiguant à lire. Evitez des couleurs qui choquent et qui changent au fil des pages.

Les images :
Insérer une image est très simple : il suffit d'utiliser la balise IMG.

Par exemple, pour le logo du site, je fais :
<IMG SRC="http://www.chez.com/zikwebsite/Zik!.gif">
et vous voyez ça :

+++ PLUS +++ :
<IMG SRC="http://www.chez.com/zikwebsite/Zik!.gif" BORDER=0 WIDTH=170 HEIGHT=208>

SRC= Il faut indiquer le nom du fichier image (pensez à mettre les images dans le même répertoire que la page).
BORDER= Indique la largeur en pixel de la bordure qui encadre l'image (0 : pas de bordure).
WIDHT= et HEIGHT= Il faut indiquer respectivement la largeur et la hauteur en pixels de l'image.
ALIGN= Indiquer "left", "right" ou "center" pour aligner l'image horizontalement, ou "top", "middle" pour l'aligner verticalement. Si vous ne précisez pas cet attribut, l'image sera alignée en bas à gauche.

Vous souhaitez que votre image puisse servir de lien. Il faut alors utiliser les balises IMG et A combinées :
<A HREF="http://www.chez.com/zikwebsite"><IMG SRC="http://www.chez.com/zikwebsite/Zik!.gif"></A>
vous obtiendrez alors cela :

Si vous voulez qu'un petit texte s'affiche lorsque vous laissez la souris au-dessus de l'image, ou lorsqu'elle se charge, rajoutez ALT="texte".
<A HREF="http://www.chez.com/zikwebsite"><IMG SRC="http://www.chez.com/zikwebsite/Zik!.gif" border="0" ALT="ZIK !"></A>

Une fois votre site Web créé sur votre ordinateur, il faudra penser à son hébergement sur le Web, puis à son référencement !
Pour vous faire un peu d'argent , réfléchissez à des sponsors !