Accueil
Les Amis de Peiresc
à propos de ce site...

WyWiWyG.frlog-in

index < MDE_uploads.php < > editing_www.png >
Ici : Quelques notions de html, php, et wywiwyg
 Accueil .  ModedEmploi  more  html.php

Choisissez la section qui vous interesse, en cliquant dessus!

Close all sections

1-basic HTML

Les éléments de mise en forme dans le HTML qui sont réellement utiles sont très peu nombreux, et faciles à assimiler.

Ils apparaissent sous forme de "balise HTML", c'est à dire <balise>texte mis en forme avec la balise </balise>.
Il existe quelques balises qui ne se ferment pas avec </balise>. C'est le cas de <br>, <img src="chemin" >.
Un lien hypertexte (voir plus bas) est aussi créé, avec une balise "a" <a href="chemin" > le texte du lien ou l'image </a>

Voici les balises les plus fréquentes, et leur aspect sur ce site.

<h1>Titre1</h1>

<h2>Titre2</h1>

<h3>Titre3</h3>

<p> est un paragraphe neuf

<p> est un paragraphe neuf
<br> est un retour a la ligne forcé,
noter que l'espace entre lignes est different.

<p align=justify> est une balise de paragraphe, avec en plus un "attribut" d'alignement. Ici "justify". Cela peut aussi être "left", "right", "justify". Si on ne spécifie pas c'est "left".

  • <u> souligné(underline) </u>
  • <b> gras(bold) </b>
  • <big> gros(big) </big>
  • <big><big> très gros(big/big) </big> </big>
  • <small> petit(small) </small>

Liste et retrait <ul> ou <ol> <li> ... <li> ... </ol> ou </ul> :

    <ul>
  • <li> est une liste a puce, ul signifie unordered, </li>
  • </ul>
    <ul>
      <ul>
    • <li> est une liste a puce, ul induit un retrait, </li>
    • </ul>
    </ul>
    <ol> est le debut dune liste ordonnee
  1. <li> est une liste a puce </li>
  2. <li> est une liste a puce </li>
    1. <ol> est le debut dune liste ordonnee
    2. <li> est une liste a puce </li>
    3. <li> est une liste a puce </li>
    4. </ol>
  3. <li> est une liste a puce </li>
  4. </ol>

Remarque : il n'est pas gênant de ne pas fermer les balises "li" avec </li>

Un chemin vers une autre page, un document, ou une photo s'écrit de la façon suivante:

  1. s'ecrit "http://www.la_bas.com" si il s'agit d'un lien 'externe' a votre site
  2. s'ecrit "/dossier1/ici/...." si il s'agit d'un chemin absolu dans votre site, décrit à partir du tout premier dossier " / " du site. (Noter la première barre '/' dans le chemin).
  3. s'ecrit "dossier2/sousdoss/..." si il s'agit d'un chemin relatif DANS le dossier de la page ou apparait ce chemin (noter absence de '/').
La solution 3 est largement preferable, car error-safe, et beaucoup plus facile à "maintenir" quand on déplace des dossiers complets.

Cette notion de chemin relatif est absolument fondamentale. Elle sert à fabriquer les liens hypertexte, et à insérer des images.

Remarque : Avec WyWiWyG, les documents/dossiers dont le nom commencent par '_' (underscore) sont cachés au visiteur dans le catalogue, mais existent bel et bien. On peut donc faire des liens vers eux.

Deux exemples :

Lien hyper texte <a href="un chemin"> :

Voici un lien hypertexte Vers la racine du site
Ce lien hypertexte s'ecrit <a href="/">Vers la racine du site</a>

Voici un lien hypertexte Vers la racine du site
Ce lien hypertexte s'ecrit <a href="/" class=button>Vers la racine du site</a>

Mailto: support
S'ecrit: <a href="mailto:support@laurent-puech.fr">support </a>

In sérer une image <img src="un chemin vers l'image"height=60 > :

Le chemin "un chemin" doit conduire à l'image.

Remarque : éviter de fixer height and width a la fois sous peine de deceptions.

Exemple : <img src="horusani.gif" align=middle > produit ceci :

2-TABLES en HTML

TABLE<table border=1>...definition des lignes et des cellules...</table>
LIGNE<tr>...definition des cellules...</tr>
CELLULE<td>...definition de une cellule...</td>
CELLULE<th>...definition de une cellule comme 'titre'...</th>

Remarque: la table ce dessus est sensiblement ceci :
<table border=1 align=center>
<tr><th>TABLE</th><td>...definition des lignes et des cellules...</td></tr>
<tr><th>LIGNE</th><td>...definition des cellules...</td></tr>
<tr><th>CELLULE</th><td>...definition de une cellule...</td></tr>
<tr><th>CELLULE</th><th>...definition de une cellule comme 'titre'...</th></tr>
</table>

Remarque: une cellule peut contenir elle même une table entiere!

Remarque: le nombre de cellule/ligne peut varier, c'est pas grave, ca se demerde toujours

Remarque: Il est très fréquent de mettre une table avec une seule cellule très large, qui remplit une partie le la largeur de la page. Celà permet de ressembler à un journal. C'est le cas de cette "section" ; et c'est écrit comme ceci :. <table border=1 align=center width=50%><tr><td>
...du bla bla
.... </td></tr></table>

3-Les pages de WyWiWyG.php

Elles sont de deux sortes:
  1. Les pages ".php" normales. Ce sont des pages web, du type "machin.php", dans des dossiers. Chaque page contient de l'information qui lui est propre.

    Voici typiquement une page "normale" dans wywiwyg:

    <?php include_once('lp_include.php');
    showpath() ;//affiche un chemin cliquable jusqu'à la page (le petit poucet automatique de wywiwyg).
    ?>
    <h1>Ici le texte html que vous voulez</h1>
    ...
    Si vou voulez afficher un compteur d'accès à cette page, ajoutez:
    <?php sqlcount(1); ?>

  2. Les pages "index.php". Ce sont des pages web particulières qui s'affichent lorsque on donne au navigateur l'adresse d'un dossier. Il n'y en a qu'une par dossier. Une page index.php contient en générale une explication sur le contenu du dossier, et affiche le catalogue avec la fonction dirindex(). Elle montre donc de l'information qui ne lui est pas propre.

    Voici typiquement une page "index.php" dans wywiwyg:

    <?php include_once('lp_include.php');
    ?>
    <h1>Ici le texte html que vous voulez</h1>
    ...
    <?php 
    dirindex
    ();//affichera le chemin cliquable vers le dossier, puis le catalogue du dossier.
    sqlcount(1); ?>
    (Si vous voulez afficher un compteur d'accès à cette page, ajoutez le.)

Le document suivant Mode d'emploi de new dirs...upload explique ou sont pris les "modèles" pré-renseignés de pages "*.php" et de pages "index.php".
Vous pouvez personaliser ces modèles.

4-Cinq 'trucs', et fonctions de WYWIWYG.php

Pour avoir du code php dans votre page *.php, il suffit de: <?php ....mettre du code en PHP....; ?> entre les deux balises <?php et ?>

Fonctions TRES UTILES:

La grande puissance de WYWIWYG.php est en fait cachée dérrière les possibilités ouvertes à l'utilisateur par l'appel (dans vos pages) de seulement deux fonctions de WYWIWYG : showpath(); et dirindex();

Les trucs et fonctions réellement utiles à "l'éditeur" ne sont que au nombre de 5. Les voici.
Elles seront accessibles à votre page si vous mettez <?php include_once('lp_include.php'); ?> en tout début de page ".php"

  • showpath();//chemin cliquable des pochettes imbriquees
  • dirindex();//catalogue du dossier
  • include_from_path("la_page_a_inclure.php");//recherche "la_page_a_inclure.php" en remontant l'abrorescence, et l'inclut lorsqu'il la trouve.

    Ceci permet de faire des "barres de navigation" ou des "entetes homogènes", de façon extrêmement simple et souple.

  • <?php if(lp_section("Bla bla")){?>

    ...Ceci permet d'avoir des sections 'depliables' et numérotées dans une page. Le titre sera Bla bla...
    C'est comme ceci que fonctionnent les sections de la presente page.

    <?php }?>

  • if(!isset($_REQUEST['sort']))$_REQUEST['sort']=3;
    afficherait dirindex avec un classement par colonne 3 (par sujet).

    0=par Nom de fichier, 1=par date de modification, 3= par sujet, 4 etc... les differentes "meta infos" des documents.
    La valeur par defaut est zéro = par nom de fichier/dossier.

    Il y a bien d'autres trucs, pour des usages plus avancés.

5-Mαths, Grec, πλuσ de hτμλ...


Ceci s'écrit:

M&alpha;ths, Gr<sup>e</sup><sub>c</sub>, &pi;&lambda;u&sigma; de h&tau;&mu;&lambda;...