Faire son site 1

Dans la page "Intro" je disais que les pages avaient toutes (ou presque) la même structure. La page de démarrage du site que vous visitez ne respecte pas cette règle. Il y a trois pages sur une seule. Le titre en haut, le menu à gauche et la page principale. Cette méthode n'est plus très utilisée, on lui préfère aujourd'hui un assemblage de balises <div>.

Mon site sans rien savoir et sans un sou

On fait ici comme si on était entre des balises <body>

Dans la balise <body> vous placez un premier div dont vous ne donnez que la hauteur. Ce sera le titre de la page.

Dessous vous mettez un div dont vous donnez la largeur pour le menu et auquel vous ajoutez la propriété float:left de façon à ce que le troisième div, qui tiendra lieu de body vienne se coller à droite du menu.

Vous allez donner une couleur de fond au body (ce sera la couleur du menu), au titre et au div principal. Le seul inconvénient de cette méthode est qu'il faut recopier le menu et le titre dans chaque page.

Là n'était pas notre propos. Nous allons aborder ce que l'on appelle couramment les "frameset" ou jeux de frames. Comme exemple, nous allons prendre le même modèle car il est simple et c'est sans doute le plus utilisé. Pour cela, dans un même dossier, vous allez créer trois pages classiques, titre.html, menu.html et page1.html.

<html>
<head>
</head>
<body>
Titre, Menu ou Page1
</body>
</html>

Maintenant, vous allez créer une quatrième page baptisée index.html. Ce sera notre conteneur pour les trois autres pages que nous venons de créer.

Les balises <div> ont été remplacées par des balises <frameset> qui contrairement à <body> peuvent s'imbriquées les unes dans les autres. C'est le cas dans notre exemple. On commence par diviser notre page en deux parties horizontales, le titre qui fait 40 pixels de haut et le reste de la page. Ce reste est à son tour divisé en deux parties horizontales, le menu qui fait 150 pixels de large et le restant. On définit les lignes grâce à rows="" et les colonnes avec cols="".

rows="100,*" : crée une bande de 100 pixels et une deuxième qui occupe le reste de la page.
rows="100,*,250" : crée une première bande de 100 pixels en haut de la page, une deuxième de 250 pixels en bas de la page et laisse libre la partie entre les deux.
rows="50%,*" : divise la page en deux parties horizontales égales.
rows="25%,100,*" : crée 3 bandes, une première qui occupe le quart supérieur gauche de la page, une deuxième de 100 pixels en dessous et une troisième de hauteur variable.

Ce qui est valable pour les lignes (rows) l'est également pour les colonnes (cols). Comme vous pouvez le constater, cela ouvre pas mal de possibilités. Attention tout de même à ne pas transformer votre site en patchwork, ça risquerait de lasser vos visiteurs.

Si vous désirez que vos frames (Certains disent cadres), ajoutez border="x" à la balise frameset. Le x représente l'épaisseur de la bordure exprimée en pixels.

Une fois les frameset mis en place, il faut y mettre les pages. Cela se fait à l'aide de balises <frame>. Il y a deux propriétés obligatoires src="nom_de_page.html" qui indique le nom de la page qui va s'afficher dans le cadre et name="nom_du_cadre". Lorsque vous faites un lien à partir du menu vers la page principale de votre site, c'est le nom de votre cadre que vous indiquez dans target="nom".

Les deux autres propriétés sont facultatives mais bien utiles tout de même. scrolling="" indique si on veut les barres de défilement. Les valeurs possibles sont yes, no et auto. Si vous n'indiquez rien, c'est scrolling="auto" qui est la valeur par défaut. noresize interdit à l'utilisateur de modifier la taille d'un cadre. Dans notre exemple, sans l'utilisation de noresize, l'utilisateur pourrait agrandir la largeur du menu ou la hauteur du titre.

Jusqu'à présent, nous avons laissé l'espace entre les balises <head> et </head> vide. Nous allons voir ici ce que nous pouvons y mettre. Cette partie de notre page sert à des choses utiles comme la déclaration de feuilles de style ou bien le titre affiché dans l'onglet du navigateur par exemple. On y trouve des choses pas très utiles mais qui font bien plaisir à notre ego comme le nom de l'auteur des pages ou bien encore des choses qui ne servent strictement à rien.

<head>
<title>Mon site perso</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

La balise <title> contient le texte qui sera affiché dans l'onglet de votre navigateur. Si le navigateur ne trouve pas cette balise, il affichera l'adresse de votre page. Les deux autre balises indiquent simplement que votre page va utiliser des feuilles de style pour la première et des scripts javascript pour la seconde. Pour le moment, cette dernière ne vous sert à rien.

Afin que votre page sache où trouver soit vos feuilles de style soit vos fichiers de scripts JavaScript, vous l'indiquez comme ci-dessus. Pour les feuilles de style, la propriété media="" peut recevoir des arguments autres que "screen".

screen : réservé aux écrans
handheld : pour les mobiles et les tablettes
print : pour l'impression
aural : synthèse vocale
braille : pour les plages en braille
embossed : pour les imprimantes braille
projection : projecteurs ou présentations avec slides
tty : pour un style machine à écrire
tv : pour les téléviseurs
all : tous les styles précédents

Contrairement aux trois premières lignes que nous avons vues et qui sont uniques sur une page, ces deux dernières, doivent être répétées pour chaque fichier concerné.

Voici quatre autres balises, toujours à placer entre <head> et </head> qui font partie des grands classiques. Les deux premières lignes sont on ne peut plus facultatives. <meta name="author" content="Votre Nom"> vous permet de dire que c'est vous l'auteur du site. Ça peut être utile si vous avez une page géniale et qu'un quidam cherche à s'en approprier la paternité. Cette ligne plus la date du fichier vous met à l'abri des copieurs.

<meta name="generator" content="fHTML version 1.0">. Cette ligne ne sert que si vous voulez indiquer le nom de l'outil qui vous sert à écrire vos pages. Personnellement, j'utilise fHTML qui est un logiciel que j'ai écrit dans les années 90. Je devais corriger des pages et comme je n'y connaissais rien, je n'ai rien trouver de mieux qu'écrire ce logiciel pour apprendre. Si vous utilisez un éditeur de texte comme Notepad, n'hésitez pas à le dire, ça montre qu'il y a encore des gens qui n'ont pas peur de mettre les mains dans le cambouis.

Plus intéressante, la ligne suivante va vous aider à vous rendre visible sur les moteurs de recherche. <meta name="description" content="Description succinte de votre site">. Cette ligne est particulièrement importante dans la mesure où les robots qui servent au référencement annalyse cette balise et en tirent des mots-clés.

Bien que n'étant plus beaucoup utilisée par les robots, la ligne suivante est tout de même intéressante à inclure. Ce sont les mts clés qui définissent votre site. <meta name="keywords" content="mot1, mot2, mot3, mot4, mot5.... motx">. Il est inutile de mettre trop de mots, seuls les premiers seront pris en compte. Mettez les dans l'ordre décroissant d'importance.

La première ligne sert à rafraîchir la page affichée. Elle est à utiliser avec modération. La valeur indiquée (ici, 60) est exprimée en secondes. Dans les sites pros, elle sert à mettre à jour des pages de pub. Personnellement, je l'utilise lorsque j'écris une page, elle me permet de voir immédiatement les modifications que j'ai faites. Je la retire dès que je mets la page en ligne.

Elle peut être utilisée par exemple pour remplacer une brève page de présentation par la page principale de votre site. Une utilisation, sans doute plus intéressante, consiste à faire un diaporama. Vous préparez chaque page avec une photo et un petit texte explicatif. Sur chaque page vous mettez la balise avec le nom de la page suivante. Quand vous êtes sur la dernière page, vous indiquez le nom de la première page et comme ça, vous avez une boucle sans fin. Pensez tout de même à prévoir un lien vers une autre page de façon à ce que vos visiteurs ne se retrouvent pas coincés sur votre diaporama. Cliquez pour voir un exemple de diaporama

La deuxième ligne sert simplement à indiquer la langue utilisée dans vos pages. Ci-dessous, la liste des principales langues utilisées. Il y en a bien d'autres mais franchement peu utilisées dans nos contrées.

Allemand : de
Anglais : en
Arabe : ar
Chinois : zh
Espagnol : es
Français : fr
Grec moderne : el
Hébreu : he
Italien : it
Japonais : ja
Néerlandais : nl
Portugais : pt
Russe : ru

Cette ligne vous permet de personnaliser votre site en ajoutant une icône sur l'onglet ou dans la barre d'adresse du navigateur de vos visiteurs. Bien qu'il soit possible d'utiliser d'autres formats d'images, privilégiez les fichiers .ico. Votre fichier doit avoir une taille de 16 x 16 pixels ou bien 32 x 32 pixels. Vous pouvez créer votre icône à partir de n"importe quel type d'image (jpeg, gif, png, bmp etc.). Si vous n'avez pas de logiciel pour créer votre icône, vous en trouverez un gratuit en cliquant sur ce lien. Rapide Créateur D'Icône

Je reviens sur le diaporama. J'ai commencé par créer 12 pages pratiquement identiques que j'ai appelées 01.html, 02.html....., 12.html. Tout ce qui varie d'une page à l'autre, c'est le nom de la photo ainsi que le nom de la page suivante dans la balise meta. Un petit fichier CSS pour ne pas avoir à trop me répéter. J'ai limité le temps d'affichage à 10 secondes car il n'y a pas de texte à lire. Le fichier CSS ne pose aucun problème. Je vous le mets ci-dessous.

body {
  background-color:lightskyblue;
  font-family:Arial;
  font-size:16px;
  color:blue;
}

#titre {
  font-size:36px;
  color: yellow;
  background-color:black;
}

a.lnk {
  color: #000000;
  text-decoration: none;
  background-color: gold;
}

a.lnk:hover {
  color: #ffffff;
  background-color: #000000;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="diapo.css" media="screen">
<title>Exemple de diaporama</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Frank Nauche">
<meta name="generator" content="fHTML version 1.0">
<meta name="description" content="Exemple de diaporama">

<meta http-equiv="refresh" content="10;url=02.html">
</head>
<body>
<center>
<span id="titre"> Exemple de diaporama zoo de Beauval </span>
<br><br>
<table bgColor="#776815" border="6"><tr><td>
  <table cellSpacing="0" cellPadding="0" border="2"><tr><td>
    <table borderColor="#008080" cellPadding="25" bgColor="#efe4a5" background="../../fdcadre.gif" border="3"><tr><td>
      <table cellSpacing="1" cellPadding="0" border="1">
        <tr><td><img src="01.jpg" alt="Zoo de Beauval" width="640" height="480" border=0></td></tr>
      </table></td></tr>
    </table></td></tr>
  </table></td></tr>
</table>
<br><br>
<a href="../frhead.html#diapo" class="lnk"> Retour </a>
</center>
</body>
</html>

Le code des pages est assez simple. La dernière ligne de l'entête donne le tempo du diaporama et le nom de la page qui remplacera celle affichée. La photo est encadrée par l'imbrication de quatre balises table. Les propriétés de ces balises datent d'avant la généralisation des feuilles de style. Vous reconnaîtrez facilement leur signification. Les douze photos du diaporama ont la même taille. C'est simplement pour une question de présentation. Je vous donnerai la liste des propriétés des balises dans une page future.

Les objets