Les balises

Les tableaux

Les cadres dans StarOffice

Les cadres - code html

Les mots clefs

Redirectionnement automatique

Créer un lien - image ou texte

Rollover html

Je vais vous montrer les principaux éléments pour faire un site, comprenant quelques pages, et utilisant le système de cadre, comme pour mon propre site, avec le sommaire à gauche et la page principale à droite. Si la plus part des logiciels permettent une automatisation des taches, je préfère vous montrer le « fait à la main », pour mieux comprendre comment ça fonctionne.

Rollover en code html

Il s'agit de faire une image clicable réactive au survol du curseur de la souris. C'est le moyen le plus simple pour faire un rollover, mais qui ne permet pas d'en faire d'évolués (toute l'image est réactive). Cela peut être préférable dans la mesure où les autres systèmes sont basés sur des scripts java et que des utilisateurs peuvent choisir de les désactiver.

J'ai utilisé ce principe pour les sept images du menu supérieur de ce site. Voici le code de base :

La position de l'image (à titre d'exemple) :

<P ALIGN=CENTER>

Le lien vers lequel pointe l'image :

<A HREF="linux-r.html" TARGET="rubrique">

TARGET sert à définir le cadre dans lequel doit être affiché linux-r.html - Ce n'est utile que si vous avez plusieurs cadres.

L'image affichée par défaut :

<img src="linux.png" border="0" width="70" height="70"

Avec ses dimensions ...

Le rollover « proprement dit » :

onMouseOver="this.src='linux2.png'" onMouseOut="this.src='linux.png'">

Avec l'image linux2.png qui apparaît lorsque le curseur de la souris passe au-dessus de l'image linux.png

On termine la ligne de code :

</A></P>

La seconde image n'est chargée qu'au moment du survol. Donc si elle est assez volumineuse, le « rollover » peut sembler ne pas fonctionner (l'image n'étant pas chargée assez vite).

Les cadres - code html - avec Openoffice ou tout autre éditeur html

Pour faire des cadres (on trouve souvent le terme de frames - anglais - même en français) avec OpenOffice/StarOffice7, vous devez les faire manuellement en tapant du code ...

Je ne vais pas vous faire un didacticiel complet sur la question, mais voici à titre d'exemple, comment j'ai procédé pour la présentation de mes différentes rubriques. Enfin, vous trouverez quelques exemples « tout prêt » pour vous aider.

J'ai décomposé l'interface de mon site en quatre parties :

(1) - cadre nommé « logo » qui appel le fichier logo.html qui ne contient qu'une image (liée à defaut.html)

(2) - cadre nommé « menu » qui appel menu.html (contenant le texte et les icônes)

(3) - cadre « table », qui appel un fichier html correspondant à la table des matière et dont les liens ouvrent des fichiers html dans le cadre (4)

(4) - cadre « maitre » qui reçoit les fichiers appelés par les liens de « table »

(1) et (2) sont les cadres apparaissant toujours quelque soit la rubrique, car (3) et (4) sont liés dans un autre cadre nommé « rubrique », dans le fichier index.html .

Lorsque l'on clique sur une icône (ou le nom) d'une rubrique, dans le cadre « menu », cela ouvre un fichier servant de cadre général à la rubrique, dans le cadre « rubrique » (3 et 4). Et ce même cadre général, qui contient (3) et (4) , ouvre du coup la table des matière et la page principale. Voici le code de l'un de ces cadre général :

<frame frameborder="no" scrolling="no" marginheight="0" marginwidth="6" name="table" src="linux.html"><frame frameborder="no" marginheight="0" name="maitre" src="linux-m.html">

Je n'ai fait qu' « empiler » deux système de cadre l'un dans l'autre. Donc si vous avez compris le principe, vous pouvez aisément en faire autant.

frameborder

Bordure du cadre

scrolling

Barre de défilement

marginwidth

Position du texte depuis gauche de la page ; si = 0 , le est texte au bord

marginheight

Position du texte par rapport au haut de la page

name

Nom du cadre (indispensable)

src

Le lien à ouvrir dans ce cadre

Suivant l'éditeur html, elles sont indifféremment en minuscules ou en majuscules.

Le gros avantage par rapport à OpenOffice (que vous pouvez utiliser malgré tout) est qu'il utilise des couleurs différentes en fonction des « éléments » du code (voir ci-dessous). Cela permet évidemment de mieux s'y retrouver !

La seule différence visible dans l'éditeur html d'OpenOffice, est entre le code (en général) et le texte (qui apparaît en gris), ce qui est franchement limité ...

Je vous ai fait trois systèmes de cadres de base :

Composition de 2 cadres

Composition de 3 cadres

Composition de 4 cadres

Vous pouvez avoir accès au répertoire contenant les différents éléments, en cliquant ici. A vous de vous en inspirer pour réaliser d'autres types de compositions de cadres.

Eviter que les cadres ne se déforment avec la résolution

Les valeurs indiquées pour les lignes (ROWS) et les colonnes (COLS) dans le code html, doivent être des valeurs entières (ex. ROWS=''150,30''). Cela peut arriver si vous avez réalisé votre site avec un écran de résolution 1024x768, mais qu'une majorité de vos visiteurs possède un écran en 1280x960.

Pour voir ce que la déformation peut donner, vous pouvez soit changer la résolution de votre écran (si cela est possible), soit déformer la fenêtre de votre navigateur, pour la rendre plus ou moins grande.

Dans l'image ci-dessus, les valeurs ne sont pas entières (ex. ROWS=''13%,86%'') ce qui entraîné une déformation suivant les résolutions. C'est d'ailleurs le cas des trois premiers exemples. Voici donc trois exemples à « valeur entière » :

Composition2 de 2 cadres

Composition2 de 3 cadres

Composition2 de 4 cadres

Vous pouvez avoir accès au répertoire contenant les différents éléments, en cliquant ici. Pour ces exemples, j'ai également supprimé les bordures (espaces entre les cadres).

Lorsque l'on ne peut utiliser une valeur entière, on utilise une étoile (ex. ROWS=''150,*''). Cela permet à la ligne ou à la colonne de s'ajuster en fonction du contexte (une image, les autres parties du cadre, etc. ...).

Vous pouvez désormais utiliser OpenOffice pour mettre en forme le contenu de votre site, comme un simple traitement de texte, ou également en utilisant l'éditeur html intégré.

Le cadre a pour fonction de délimiter plusieurs espaces correspondants chacun à une page html. Sur l'image ci-dessous, chaque cadre est représenté par une couleur (les possibilités sont nombreuses, autant par le nombre que par la position des cadres).

Attention toutefois, plus vous augmentez le nombre de cadres, moins il y aura de place pour celui de la page principale de votre site (ici en bleu).

Ouvrez StarOffice et allez dans Fichier , puis Nouveau , et FrameSet.

Dans le nouveau document qui apparaît, il n'y a pas grand chose. Même la plus part des icônes ont disparues. La barre propre à modifier ce type de document est des plus simple :

Remarquez le cadre vide - il s'agit de la taille de la bordure, en pixel. S'il est vide, il y en aura toujours une par défaut. Mettez 0 (zéro) pour effacer la bordure.

Cliquez sur la 2e icône pour créer le cadre rouge. Cela divise verticalement le premier cadre. Comme pour un tableau, amenez le curseur sur la limite (il devient une double flèche horizontale) et en cliquant, amenez le bord du cadre sur la gauche.

Pour créer le cadre vert, cliquez dans le cadre de droite, puis cliquez sur la 1ere icône. Cela divise cette fois ci horizontalement le cadre. Relevez la partie centrale pour obtenir les mêmes proportions que sur l'image.

Faites un clic droit au milieu d'un cadre et choisissez Propriétés.

Dans ce cadre, nommez le futur emplacement de chaque page html. Par exemple, dans le menu bleu, mettez « maitre » - pour la page principale. Pour le rouge, mettez « sommaire » et pour le vert « notes ». Ensuite, lorsque vous aurez déterminé (sauf si déjà fait) les pages a afficher dans chaque espace, allez les chercher (le bouton à droite de Contenu) pour les afficher. Toujours dans ce cadre, vous déterminez si vous voulez des barres de défilement.

Le fait de nommer les différents espaces est très utile pour pouvoir ouvrir une page dans un cadre à l'aide d'un lien présent dans une page d'un autre cadre. Par exemple, un lien dans une page verte, s'ouvre dans l'espace bleu.

Enregistrez ce jeu de cadres, une fois les espaces déterminés.

A noter :

Pour éditer un jeu de cadres, ouvrez-le et cliquez sur le menu Edition puis en bas du menu, choisissez Frameset.

Vous pouvez le nommer index.html pour pouvoir l'avoir directement à l'ouverture, lorsque l'on tape l'adresse de votre site dans un navigateur. C'est le cas de ce site : si vous tapez dans mozilla « www.archilinux.org » cela appel automatiquement le fichier index, qui est mon fichier de cadre (sans pour autant que le nom index.html apparaisse).

En haut de cette page, il y a des liens qui renvoient à des balises sur cette même page. Cela permet de proposer une sorte de sommaire au visiteur, lui évitant d'avoir à consulter toute la page pour trouver l'information qu'ils cherchent. Voici comment procéder.

Lorsque vous cliquez sur l'icône suivante, vous visualisez le code html de la page -

ce qui ressemble à ça (pour le texte ci-après) :

Faire la balise (lien qui renvoie en un point donné de la page)

Transformez alors « Faire une balise » en hyperlien, amenant à #balise

En sélectionnant « Faire une balise » et en faisant un clic droit dessus, puis dans le menu, cliquez sur Caractère...

Ceci ouvre le cadre permettant de modifier la chaîne de caractères sélectionnée. A l'onglet Hyperlien, mettez à URL, #balise

Maintenant cliquez sur l'icône pour passer en code html. Parcourrez la page en vous repérant avec le texte écrit (ici en gris et en noir), par exemple, jusqu'au titre du paragraphe concerné, là où vous voulez que le lien pointe :

vous placez entre le <P> et <FONT :

- <A NAME=''balise''> sert de marque pour le lien #balise

Si votre éditeur html contient un système de contrôle, vous pouvez mettre la phrase en début de toute ligne, s'il y a lieu, le logiciel fera la correction, ce qui est le cas d'OpenOffice (mise en forme correcte du code html).

Donc Maintenant (après avoir sauvegardé le document), si vous ouvrez cette page dans un navigateur (ou à l'aide du module de contrôle de l'éditeur s'il y en a un), et que vous cliquez sur le lien en tête de page, le navigateur vous amène aussitôt au niveau de la balise.

Autre exemple, le lien ci-dessous (haut de page) vous conduira en haut de la page ...

Un lien est l'un des élément essentiel d'un site, dans la mesure où il est utile pour diriger le lecteur, d'une partie à l'autre. Le lien est présent un peu partout : dans les (haut de page) qui utilise une balise ; dans les sommaires à gauche de ce site (où chaque mot est lié à une page html ; etc. ...

Pour le faire, procéder comme pour la balise : en sélectionnant le texte servant de repère au lien « texte repère » et en faisant un clic droit dessus, puis dans le menu, cliquez sur Caractère...

Ceci ouvre le cadre permettant de modifier la chaîne de caractères sélectionnée. A l'onglet Hyperlien, mettez à URL, le chemin du fichier que vous voulez lier (ou pressez Sélectionner) ce qui donne à peu près ceci : file:///web/crea-html/crea.html

Le texte repère, peut ainsi pointer vers un fichier html ; un ficher d'un autre type (s'il n'est pas compatible avec le navigateur, il vous est proposé de le télécharger) ; une image (attention aux formats compatibles : GIF, JPEG, PNG sont les plus courants).

OpenOffice

Une image sert de lien (repère) - dans OpenOffice, double-cliquez sur l'image et dans le cadre qui s'ouvre, allez sur l'onglet hyperlien (hyperlink) et remplissez comme ci-dessus.

Pour éditer de nouveau l'image et modifier un paramètre, il est nécessaire de presser Alt pour cliquer et sélectionner l'image. Vous pouvez alors faire un double-clic dessus.

Il arrive que suivant la configuration par défaut de KDE, Alt + « un déplacement de la souris » entraîne un déplacement de la fenêtre au lieu de pouvoir éditer l'image !

Pour y remédier, allez dans le menu K et dans le sous menu Configuration, choisissez Centre de configuration de KDE. Dans l'index à gauche, allez dans le menu Bureau et dans le sous-menu Comportement des fenêtres. A droite, Allez sur l'onglet Actions et en bas, dans la partie Intérieur de la fenêtre, barre de titre et cadre, devant Modificateur, mettez Méta à la place de Alt.

Pour déplacer la un fenêtre par la suite, il suffira de cliquer sur la barre du haut (là où est noté le titre de la page).

La seconde méthode consiste à déplacer la souris sur le bord de l'image. Le curseur devient une flèche et en cliquant à ce moment sur l'image, les points de sélection apparaissent et vous pouvez éditer l'image en double-cliquant dessus.

En l'absence de tableau, le texte s'adapte à la taille de la fenêtre du navigateur. Cela ne pose en général aucun problème, si celui qui regarde votre site dispose d'un écran ayant la même que le votre (qui a servit à concevoir votre site). Mais dès lors qu'il est supérieur, le texte risque fort de faire de grandes lignes désagréables à lire.

Sur cette page, j'ai utilisé des tableaux, pour « conditionner » le texte. Cela me permet de l'aligner par rapport aux différents cadres du site, et j'utilise l'alignement justifié pour qu'il soit régulier de gauche à droite.

Cliquez sur l'icône en haut de la barre d'outil de gauche, avec le bouton gauche de la souris, et sans relâcher la pression, dans le menu déroulant de celle-ci, arrêtez vous sur la même icône. Un cadre apparaît, en descendant dessus, vous choisirez le nombre de case (en orange) du tableau à insérer. Relâchez la souris, le cadre apparaît.

Le tableau apparaît par défaut avec une double bordure et occupe toute la largeur de l'écran. Par contre, comme il est vide, il n'occupe en hauteur que peu d'espace. Lorsque vous déplacez le curseur de la souris sur le bord du tableau, il se change en flèche horizontale. Cliquez alors (gauche) pour en modifier la taille.

Lorsque vous cliquez sur le tableau, la barre d'icônes ci-dessous apparaît et vous permet de le modifier. Vous pouvez également faire un clic droit avec le curseur dans le tableau, et choisir dans le menu « Tableau ». Le cadre qui apparaît vous donne un peu plus d'options.

Maintenant, dans ce tableau, tapez votre texte. Une fois celui-ci terminé, sélectionnez le (Ctrl+A), faites un clic droit dessus, et choisissez Paragraphe. Dans le cadre qui apparaît, à l'onglet Alignement, choisissez « Justifié ».

L'avantage du tableau, est de pouvoir faire une mise en page correcte, sans que le tableau ne se voie ensuite dans le navigateur. Sauf si on lui donne une couleur de fond.

Les mots clef d'une page sont utiles pour l'usage d'un moteur de recherche, qu'il soit interne ou externe. Dans StarOffice ou OpenOffice, allez dans le menu Fichier, puis Propriétés :

Entrez les mots-clef dans l'onglet Description. Ils doivent être séparés par une virgule, sans espace.

Vous avez une nouvelle adresse (cette page va donc rediriger vers une adresse) ou vous avez une page de présentation pour votre site et vous voulez que les visiteurs la voient, avant d'accéder à la page principale (cette page va donc rediriger vers un fichier).

Au minimum, votre page doit contenir ceci :

<html>

<head>

<meta http-equiv="refresh" content="5;URL=http://www.mon-adresse.com">

</head>

<body>

vous allez être redirigé vers ma nouvelle adresse dans 5 secondes

</body>

</html>

Content="5 - le temps en seconde, au bout du quel la page est redirigée

URL= - mettez l'adresse internet souhaitée - vous pouvez aussi mettre un fichier html (si par exemple, vous faites cela dans le cadre d'un réseau privé) - URL=/nom1/nom.html

le texte «  vous allez être redirigé vers ma nouvelle adresse dans 5 secondes  » est facultatif.