archilinux.org - architecture, linux et infographie

découvrir, utiliser le système gnu/linux et les logiciels libres, par la pratique










ARCHITECTURE


LINUX


TECHNIQUES


MATERIEL


DIVERS


Rechercher :


Voir le glossaire pour les termes employés


A propos de ce site et de l'auteur


Accueil du site


me contacter



Création de pages 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.


Les cadres flottants (parfois nommés calques)

Pour la nouvelle version d'archilinux, j'emploie des cadres flottants. J'utilise principalement LibreOffice (successeur d'OpenOffice). Le principal avantage est de déterminer des zones fixes situées librement et n'importe où sur la page. Il n'y a plus de contraintes d'espace ni de point d'insertion.

Je remplie ensuite le cadre avec des images, des tableaux, bref tout ce qu'il est possible de faire (voir les différentes possibilités de cette pages).


Cliquez sur le menu Insertion, puis Cadre. Dans la fenêtre qui s'ouvre, cliquez sur Ancrer à la page pour un cadre dont la position sera libre.

Dans la fenêtre vous avez différentes options. Lorsque vous êtes prêt, cliquez sur Ok. La position et la taille peuvent être modifiées après directement et sans passer par la fenêtre.


La page que vous visualisez en est le parfait exemple. Il y a 3 cadres. A gauche, celui avec la recherche, le contact, le bouton de retour à l'accueil du site. En haut, un cadre contenant les 5 boutons des thèmes d'archilinux et le titre. Juste en dessous, celui contenant cet article.


Dans la page d'index, j'en ai rajouté 4 entre ces deux derniers cadres. Il servent à mettre les sujets à la Une.


J'ai ainsi trouvé le moyen de m'affranchir des contraintes des frames et surtout j'évite le problèmes des pages sans titre affichées par les moteurs de recherche. Il y a des méthodes qui permettent d'appeler directement un site complet à partir d'une page isolée mais c'est compliqué et je préfère éviter les scripts sur mon site (pour éviter les bloqueurs de scripts notamment).

Bref, j'ai trouvé là la solution idéale et plus claire pour vous.




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.


Voici les commandes html qui apparaissent dans un fichier mettant en place le cadre :

Nom du code

usage

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.




Pour composer vos cadres, je vous suggère un éditeur de texte simple, comme Kwrite qui suffit amplement (pressez Alt + F2 et tapez kwrite dans le cadre qui s'ouvre).


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é.



Créer une balise de texte

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 ...



Créer un lien

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.



Les tableaux

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.



Faire un texte « justifié » à l'aide d'un tableau


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

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.



Redirectionnement automatique

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.


Retourner en haut de la page


Dernière mise à jour août 2014