Créer son propre site

Ce texte à été écrit par : Alain MALVOISIN Le 00 0000

1/4 Voir en plein écran, imprimer

CREEZ VOTRE PROPRE SITE

C'est trés simple, il ne faut pas utiliser de logiciels spécialisés dans la création de site tel DREAMWEAVER ou FRONTPAGE, utiliser un simple éditeur de texte. Sinon, vous pouvez toujours utiliser les meilleurs, à mon avis, c'est WebExpert pour l'html et Style Master pour les styles, mais pour l'instant, vous pouvez utiliser simplement le 'BLOC NOTE'.
On vient de voir quels outils vous allez utiliser, maintenant il s'agit de définir sous quelle forme vous voulez voir apparaitre votre site, pour cela, munissez vous d'une feuille de papier et d'un crayon, vous allez dessiner les zones de l'écran que vous voulez voir apparaitre, par exemple: une zone pour indiquer le titre de votre page, une zone où vous fairez apparaitre un menu de choix, une zone d'écriture du texte principal de la page, une zone ou vous aurez des images ou des photos, une zone où vous ferai apparaitre des liens avec d'autre sites etc.
Avez vous définis les zones de votre écran? Alors maintenant, c'est de plus en plus simple, vous allez donnez des noms à ces zones, par exemple: titre, menu, texte, photo, liens ...
C'est fait ? Alors on va écrire le programme, ensuite on écrira la définition de l'écran, c'est à dire la position des différentes zones, leurs aspect, la police de caractére, les couleurs etc. Tout d'abord écrivons le programme
Il y a quelques 'balises' à écrire qui y sont systématiquement et que je ne décrirai pas pour l'instant, voila ce qu'il faut écrire:

Ensuite il faut écrire notre vrai programme, enfin, il suffit de placer toute les zones qu'on à énuméré sous la forme: <div id="nom de la zone"> </div> , 'div' veut dire une division ou une zone, il faut donc placer cette phrase entre les balises <body> et </body> , voici l'exemple du programme final :

Voila le programme écrit, maintenant il faut écrire la mise en forme, la position de toute les zones ou divisions, leurs couleurs de fonds etc.
Pour faire cela on à un deuxiéme fichier à écrire, pour écrire ce fichier on peut toujours utilise l'éditeur qu'on à employer jusque là, mais il sera bon d'utiliser le logiciel "Style Master", pour l'instant, dans le cadre de notre petite formation, un simple éditeur suffira. Voici ce qu'on va y écrire :

#titre {
position: absolute;
top: 0px;
left:0px;
width: 600px;
height: 100px;
background-color: red;
}

#menu {
position: absolute;
top: 100px;
left:0px;
width: 600px;
height: 50px;
background-color: blue;
}

#texte {
position: absolute;
top: 150px;
left:0px;
width: 600px;
height: 400px;
background-color: gray;
}

#photo {
position: absolute;
top: 0px;
left:600px;
width: 400px;
height: 550px;
background-color: green;}

Voilà les deux fichier sont écrit, il suffit de les nommer, le premier on l'appera "index.htm", le deuxiéme on l'appelera "style.css". Mais avant d'essayer ce programme, on va inclure dans le premier fichier une ligne, qu'on va placer entre les balises <head> </head> et cette ligne s'écrira comme ceci :

Voilà notre programme est écrit, il n'y a plus qu'à le tester.
Pour l'essayer, il suffit d'ouvrir le premier fichier, nommé "index.htm", avec votre explorateur internet. Voilà, c'est fait? alors, le resultat est intéressant? vous avez une zone en rouge, c'est le titre, vous avez une zone en bleu, c'est le menu, vous avez une zone en gris, c'est le texte, vous avez une zone en vert, c'est la photo. bon c'est pas trés beau, mais il suffira dans changer les couleurs, les positions, les tailles, ça deviendra beaucoup mieux, mais vous me dites, qu'il n'y a rien d'écrit, il suffit d'écrire dans le premier fichier entre les balise <div> et </div> et maintenant qu'en pensez vous?
Vous voulez sans doute quelques explications, et bien en voilà. Dans le premier fichier vous avez mis des balises, c'est écrit sous la forme <balise> pour le debut de la balise et </balise> pour la fin, et entre les balise de début et de fin on peut écrire du texte, et ce texte apparaitra sur l'écran, vous avez remarqué que les balises de début peuvent avoir des informations complémentaires, comme dans <div id="titre"> l'attribut id= contient un identifiant de la balise, par exemple l'identification du titre id="titre". Dans le deuxieme fichier on rapelle les identifiant qu'on avait dans le premier tel par exemple #titre, et on va définir les caractéristiques de cet identifiant, par exemple le premier defini que l'objet identifié est placé de manième absolue "position: absolute;", le deuxiéme défini la position par raport au haut de l'écran "top :150 px;", le sigle "px" signifie pixel, par exemple si vous avez un écran qui fait 1024 x 728 pixel, vous vous rendez compte de la taille? , le troisiéme défini la position par rapport à la gauche de l'écran "left:200 px;", le quatrième défini la largeur de la zone "width:400px;" le cinquième défini la hauteur "height:300px;", le sixiéme défini la couleur du fond de la zone identifié "background-color: #006699;", mais il y a beaucoup d'autre paramêtres qu'on peut définir tel l'image du fond, la couleur du texte, la police, la taille du texte etc..
Aprés cette petite explication nous allons voir un peu plus de balises dans le fichier HTML et quelque définitions de style dans le fichier CSS. Déja la balise <div> que nous avons déjà vu, cette balise sert à définir une division du document, et bien sachez que l'on peut inclure une division à l'intérieur d'une division ce qui permet de pratiquement tout faire en position sur l'écran, ça c'est déjà bien, une balise supplémentaire intérresante est la possibilité d'inclure des images dans votre page en plus du texte, il s'agit de la balise <img> qui peut elle aussi contenir des attributs, tel "id" pour l'identifier, comme on l'a déjà vu avec la balise <div> mais aussi "src=" qui signifie la source de l'image on peut écrire par exemple

Ce qui affichera l'image, on peut définir les propriétés de l'image dans le fichier CSS, mais il peut être intérressant de définir les propriétés de l'image directement avec la balise <img>, il exite pour cela deux attributs qui entre dans la balise, qui sont: "height=" qui défini sa hauteur et "width=" qui défini sa largeur, on peut donc écrire :

Voilà, on sait faire apparaitre des images.
Aprés avoir vu un balise supplémentaire dans le fichier HTML, nous allons voir un attribut supplémentaire dans le fichier CSS, c'est l'attribut qui permet de mettre une image dans le fond d'un objet HTML, par exemple: on peut mettre une image en fond de la division #menu.

#menu {
background-image: url(Photos/Alain.GIF);
..
}

Il y a encore des balise utiles à voir, comme par exemple un retour chariot, un retour à la ligne si vous préférez, il suffit d'écrire <br />
dans le texte pour avoir un passage à la ligne. Il y a aussi une balise trés utile, qui permet d'appeler une autre page en cliquant sur un texte ou sur une image, c'est la balise <a href="edit.html"> appel </a>, il suffit de cliquez sur appel pour faire apparaitre la page "edit.html", il y a d'autre attribut avec la balise <a> que nous étudierons plus tard. Il y a aussi une balise, qui est trés importante, puisque c'est la seule qui permet de communiquer avec le serveur et donc d'avoir un site dynamique, c'est à dire que l'utilisateur peut rentrer une information, la transmettre au serveur et avoir une réponse, cette balise si importante est la balise <form > </form> à l'intérieur de laquelle on aura d'autre balises, qui permettrons à l'utilisateur d'écrire, comme par exemple <input > </input> ou <select > ou <textarea >, mais le sujet mérite d'être vue de manière approfondi et je vous donne rendez vous dans un prochain numéro pour en parler.
A part cela, il y a beaucoup d'autre balises qui ne sont pas d'une grande necessité, c'est à dire qu'avec le balises qu'on vient de voir, on est capable de tout faire. Mise à part un tableau, mais comme vous avez vu, avec la balise div et le fichier CSS on est capable de faire un tableau, maintenant si vous voulez faire un vrai tableau tel que vous le feriez sur WORD ou sous EXCEL, pour faire une facture par exemple, ou une liste d'article, il existe une balise appropriée, qui est <table > </table >, à l'interieur de laquelle on aura des balises que permette de définir des colonnes <td> </td> et des lignes <tr > </tr>.
Il y a aussi une balise d'une certaine utilité, c'est celle permettant d'afficher une autre page sur une portion de la page courante, cette balise c'est <iframe > toujours terminer par </ifameɚ. Et il y a enfin des balises trés utiles qui permettent de faire éxécuter un programme sur l'ordinateur du navigateur, mais attention, ces programme sont la plupart du temps très utiles tel par exemple: une animation vidéo, mais qui sont parfois trés nefastes tel les virus, ces balise s'appelle <object >, <embed >, <applet >

Combien de points pour ce texte?.....

le WebMaster : webmaster@labase-malvoisin.net