st jean de luz créer un site web pour saint jean de luz.

Créer un site web

Nous allons essayer de montrer ici qu'il est plutôt facile de construire soi-même directement en html son site web.
Beaucoup de débutants appréhendent l'écriture directe de codes sources. Il est vrai qu'au premier abord balises et écritures paraissent un langage un peu mystérieux. Nous allons donc décrypter un peu tout cela ci-dessous.

Pour travailler en HTML il est possible d'utiliser la plupart des éditeurs de texte. Toutefois pour faire au plus simple, nous utiliserons le bloc note qui s'obtient sous Windows par :
(en bas à gauche de l'écran d'accueil Windows )
démarrer ==> programmes ==> accessoires ==> Bloc-notes

Pour commencer un certain nombre de balises doivent encadrer un document HTML. Nous ne les étudierons pas ici dans le détail, il suffira pour l'instant de savoir qu'elles sont indispensables et devront être reproduites intégralement dans le code de toute page. Comme ci-dessous :

Vous pouvez très bien à ce stade vous contenter de faire un copier-coller des balises ci-dessus sur la page bloc note que vous avez ouvert et l'enregistrer dans Mes documents dans le dossier qui vous plaira. Il suffit pour ce une fois le copier coller réalisé sur le bloc note, de cliquer en haut à gauche du bloc note sur "Fichier" puis "Enregistrer sous" . Dans la fenêtre qui s'ouvre en haut à "Enregistrer dans" sélectionnez le dossier de Mes Documents dans lequel vous voulez enregitrer votre fichier. Puis en bas à Nom du fichier tapez le nom que vous voulez en oubliant surtout pas de terminer ce nom par l'extension .html ou .htm. Si nous appelons notre fichier "saintjeandeluz-1" nous devons obligatoirement écrire saintjeandeluz-1.html ou saintjeandeluz-1.htm
Enfin ne surtout pas pas oublier de cliquer sur la flèche de la ligne suivante "Type" pour remplacer "Fichiers texte (.txt)" qui s'affiche par défaut par "Tous les fichiers", sans cela votre fichier resterait un fichier texte et ne serait donc pas exécuté par le navigateur.
Finir en cliquant à droite sur Enregistrer.
Fermer tout et vous rendre dans le dossier Mes Documents où vous avez enregistré saintjeandeluz-1.html
Double clic et vous devez obtenir ceci : exemple saint jean de luz 1
Une fois sur cette page vous pouvez toujours retrouver votre code source bloc note par un clic droit dans un vide de la page saintjeandeluz-1.html, puis un clic gauche sur "Afficher la source", et revoici le bloc note.
Enfin pour enregistrer une simple modification du code source bloc note, il suffit de cliquer en haut à gauche sur Fichier ==> Enregistrer ( et non pas enregistrer sous ). La modif opère dès qu'on actualise le fichier html correspondant par la touche F5 ou en fermant le fichier, ici donc saintjeandeluz-1.html, puis en le rouvrant en double cliquant dessus.
Note pour les débutants : nous ne répéterons pas le processus ci-dessus mais il va de soi qu'il est valable pour toute la suite, chaque nouveau code - cad encadré - nécesite d'être à nouveau traité comme ci-dessus.

Nous allons réaliser une première page minimum à titre d'exemple de démarrage.

La page exemple saintjeandeluz-1.html telle que vous l'obtenez en cliquant ci-dessus est très primaire.
Nous allons l'agrémenter un peu.
D'abord le fond de la page est par défaut blanc. Essayons une autre couleur. Par exemple "lemonchiffon" qui s'écrit en hexadécimal #fffacd.
Pour obtenir cette couleur de fond il suffit de modifier la balise body comme suit :

body bgcolor=#fffacd ou body bgcolor="lemonchiffon"

Comme dans l'encadré ci-dessous :

Ce qui nous donne :
exemple saint jean de luz 2( cliquer dessus pour voir ).
Il ne nous reste plus qu'à écrire un petit texte entre les deux balise body et /body. En lui donnant une couleur de caractères autre que celle par défaut qui est le noir. Essayons le rouge, en anglais red et en hexadécimal #ff0000
Nous écrivons tout simplement après la balise body, font color=red ou font color=#ff0000
Comme dans l'encadré ci-dessous :

Ce qui nous donne :
exemple saint jean de luz 22( cliquer dessus pour voir ).

Il est vrai que maintenant notre page apparaît un peu état brut.
Il convient donc de l'organiser un peu. Commençons par espacer les lignes. Nous allons utiliser :
1 - la balise br / comme suit :

Ce qui nous donne :
exemple saint jean de luz 222( cliquer dessus pour voir ).

A l'évidence la présentation de notre page laisse à désirer.
Il lui faut un titre en barre de titre et un autre en haut de la page. Nous allons donc remplacer entre les balises "title" le texte actuel "tapez ici ..." par "notre page en code html" comme suit :

Ce qui nous donne :
exemple saint jean de luz 3( cliquer dessus pour voir ).

Maintenant il nous faut mettre en page et pour ce nous allons rajouter:
1 - un titre en haut de page entre des balises h1 et center
Une règle très importante : toute balise ouverte doit toujours obligatoirement être refermée à la fin de son utilisation par la même écriture simplement précédée du sigle slash cad "/". C'est ce que vous lisez sur tous les codes, comme par exemple pour les écritures ci-dessous h1 fermée par /h1 et center fermée par /center autour de "Voici le titre de notre page HTML" Parcourez les codes et vous verrez que cette règle ne souffre aucune exception - sauf oubli du concepteur bien entendu -. Toute balise ouverte doit impérativement faire l'objet d'une fermeture à la fin de son utilisation. Le non respect de cette règle peut causer des problèmes de déséquilibres dans la page, voir d'inaffichage, difficiles à résoudre pour un débutant.
2 - Nous allons colorer ce titre en green ou #008000 par la balise déja vue : "font color=green" ( voir encadré ci-dessous ) Sans oublier de fermer cette balise par "/font" à la fin de son usage. Ssinon l'instruction continuerait à s'appliquer jusqu'au bas de la page
3 - Nous séparons ce titre du reste de la page par un trait horizontal "hr" auquel nous affectons une couleur "green", soit "hr color=green" comme dans l'écriture ci-dessous

Ce qui nous donne :
exemple saint jean de luz 33( cliquer dessus pour voir ).

Nous créons maintenant ci-dessous le texte de notre page entre les balises 'body' :

<html>
<head>
<title>notre page en code html</title>
<center><h1><font color=green>Voici le titre de notre page en code HTML</font></h1></center>

Après le titre vient la partie "head" ( tête ) du document.
Cette partie contient notamment un certain nombre de définition et informations notamment celles destinées  aux moteurs de recherche.

</head>

ici avec le body prend place la composition du corps de la page
Nous pouvons donc ici établir le texte de notre site : <br />
Il était une fois au clair de lune trois petits lapins qui jouaient aux cartes sur un tas de fagots. Un craquement soudain leur fit dresser les oreilles. <br />"Et si c'était le goupil ?" fit l'un d'eux inquiet.
<br />Le gros chien de la ferme le chasserait répondirent les autres.
<br />Mais il dort, objecta le premier des petits lapins.
<br />Ils décidèrent donc d'aller jouer dans la niche du chien,  sans trop savoir si ce dernier apprécierait  ... ...
<br /><br />

</body>
</html>

Ce qui nous donne :
exemple saint jean de luz 333( cliquer dessus pour voir ).

Nous allons maintenant aménager l'espace de notre page :
1 - Nous plaçons notre texte dans une "table" afin de l'ordonner - voir code ci-dessous - . Cette table aura une largeur de 80% ( indiquée en anglais width=80%). Et elle est précédée d'une balise "center" pour la centrer.
2 - On ajoute un "style" pour aligner le texte verticalement des deux côtés : c'est ce que l'on a écrit entre les balises "style" et "/style" entre les accolades soit {text-align:justify;} . Comme ce style doit être défini pour une portion de la page, on précède la première accolade du "p" indiquant un paragraphe. Puis l'on place dans le corps du texte une balise "p" à l'entrée de la portion de texte voulue, en fermant à la fin par "/p". ( voir ci-desous )

<html>
<head>
<title>notre page en code html</title>
<center><h1><font color=green>Voici le titre de notre page en code HTML</font></h1></center>
<hr color=green>

</head>

<body bgcolor="#fffacd">
<br />
<center>
<table width=80%>
<tr><td>
Après le titre vient la partie "head" ( tête ) du document.
Cette partie contient notamment un certain nombre de définition et informations notamment celles destinées  aux moteurs de recherche.

ici avec le body prend place la composition du corps de la page</font><br />
Nous pouvons donc ici établir le texte de notre site : <br />
<style>
p
{
text-align:justify;
}
</style>
<p>Il était une fois au clair de lune trois petits lapins qui jouaient aux cartes sur un tas de fagots. Ils riaient et s'amusaient sans le moindre égard pour le sommeil des poules, canards et pintades. Et leur joie semblait illuminer jusque les étoiles. Un craquement soudain leur fit dresser leurs grandes oreilles. "Serait-ce le goupil ?" fit l'un d'eux inquiet.
Le gros chien de la ferme le chassera répondirent les deux autres.
Mais le premier des petits lapins objecta que le molosse sur la digestion dormait souvent d'un sommeil plus qu'affaissé.
Alors allons jouer sur le ventre  du chien, proposa le troisième  des petits lapins, le renard ne viendra pas nous y chasser. "Pour sûr que non !" applaudirent les deux autres. Restait à savoir si le chien apprécierait que l'on tienne tripot sur son ventre ...
<br /><br />
</p>
<br />Pour retrouver le code source, cad l'encadré faire :<br />
clic droit ==> afficher la source<br /> <br />
<a href="stjeandeluz-creersiteweb2.htm">retour page st jean de luz creer site web</a>

</td>
</tr>
</table>
</center>
</body>
</html>

Ce qui nous donne :
exemple saint jean de luz 4( cliquer dessus pour voir ).

Comme on imagine mal un site sans illustration, nous allons maintenant ajouter une image. Rien de plus facile, il suffit d'employer le code :
img src="monImage"
Voir dans encadré ci-dessous où monImage est tout simplement le code de votre photo ou image.
Ici la photo employée étant : sjl1.jpg. Que l'on place avant la "table".
Comme sjl1.jpg est une trop grande photo, nous la limitons en lui imposant un % de largeur par l'instruction width=98%.
Ce qui donne l'appel de l'image ci-dessous : img src="sjl1.jpg" width=98%

<html>
<head>
<title>notre page en code html</title>
<center><h1><font color=green>Voici le titre de notre page en code HTML</font></h1></center>
<hr color=green>

</head>

<table width=80% >
<tr><td>
<br />Après le titre vient la partie "head" ( tête ) du document.
Cette partie contient notamment un certain nombre de définition et informations notamment celles destinées  aux moteurs de recherche.

ici avec le body prend place la composition du corps de la page</font><br />

</td>
</tr>
</table>
</center>
</body>
</html>

Ce qui nous donne :
exemple saint jean de luz 44( cliquer dessus pour voir ).

Il est évident qu'à ce stade notre page est largement inesthétique.
La couleur de fond ne convient plus du tout, nous remplaçons donc ""body bgcolor=fffacd" par "body bgcolor=navy".
La couleur des caractères dès lors ne va plus non plus. Partout nous la modifions en : "font color=white". Nous modifions de même la couleur du titre h1 en écrivant "font color=adff2f".

La police des caractères est modifiée par l'instruction :
"font face=sans-serif,tahoma, georgia, serif"
Ce qui signifie un ordre de priorité : d'abord sans-serif, si le navigateur ne le trouve pas, ce sera tahoma, s'il ne trouve toujours pas ce sera georgia etc ... étant entendu que dans 90% des cas il trouvera le premier, vous pouvez bien sûr modifier l'ordre en plaçant par exemple tahoma - ou ce que vous voudrez - en premier.

<html>
<head>
<title>notre page en code html</title>
<center><h1><font color="#adff2f">voici le titre de notre page en code html</font></h1></center>
<hr color="green">

</head>

<table width=80% >
<tr><td>
<br />
<font color=white>
<font face=sans-serif,tahoma>Après le titre vient la partie "head" ( tête ) du document.
Cette partie contient notamment un certain nombre de définition et informations notamment celles destinées  aux moteurs de recherche.
</font>
<br /><br />

<font color=#ff0000">
<font face=sans-serif,tahoma>
ici avec le body prend place la composition du corps de la page</font><br />
</font>
<style>
p
{
text-align:justify;
}
</style>
<p>
<font color=white>
<font face=sans-serif,tahoma>Il était une fois au clair de lune trois petits lapins qui jouaient aux cartes sur un tas de fagots. Ils riaient et s'amusaient sans le moindre égard pour le sommeil des poules, canards et pintades. Et leur joie semblait illuminer jusque les étoiles. Un craquement soudain leur fit dresser leurs grandes oreilles. "Serait-ce le goupil ?" fit l'un d'eux inquiet.
Le gros chien de la ferme le chassera répondirent les deux autres.
Mais le premier des petits lapins objecta que le molosse sur la digestion dormait souvent d'un sommeil plus qu'affaissé.
Alors allons jouer sur le ventre  du chien, proposa le troisième  des petits lapins, le renard ne viendra pas nous y chasser. "Pour sûr que non !" applaudirent les deux autres. Restait à savoir si le chien apprécierait que l'on tienne tripot sur son ventre ...
<br /><br /></font>
</p>
<br />
<font color=white>
<font face=sans-serif,tahoma, georgia, serif>Pour retrouver le code source, cad l'encadré faire :<br />
clic droit ==> afficher la source<br /> <br />
</font>
<a href="stjeandeluz-creersiteweb.htm"><font color=lightblue><font face=sans-serif,tahoma>retour page st jean de luz creer site web</font></a>

</td>
</tr>
</table>
</center>
</body>
</html>

Ce qui nous donne :
exemple saint jean de luz 444( cliquer dessus pour voir ).

Enfin s'agissant de la page d'accueil d'un site, donc automatiquement nommée : index.htm ou index.html, il faut lui assurer une liaison avec les pages internes que l'on créera.
Il suffit pour cela tout simplement d'écrire en dernière position juste avant les balises de fermeture /body et /html le code :

où "page1.html" est le nom du fichier html de notre première page intérieure.

Ce qui nous donne : première page intérieure 1

retour sommaire