Bac à sable

HTML

Le langage HTML permet de décrire le contenu de ta page.

• Le code HTML s'écrit par balises qui vont s'imbriquer les unes dans les autres.
• Chaque balise définit la nature du contenu. Quelques exemples :
  • <p>...</p> : paragraphe
  • <a>...</a> : un lien internet
  • <table>...</table> : une table
  • <ul>...</ul> : une liste
  • <li>...</li> : un élément d'une liste
  • <div>...</div> : un conteneur générique en bloc (prend par défaut toute la largeur de son contenant)
  • <span>...</span> : un conteneur générique en ligne ( prend juste la place nécessaire)
• A chaque balise on peut définir des attributs. Les attributs sont divers, mais chacun défini une informations associé à la balise en question. Par exemple, l'attribut href permet de définir l'adresse d'un lien d'une balise <a>. Nous verrons plus loin que les attributs style et class permettront d'associer des règles CSS au contenu HTML.

Exemple:

<div>
   <p>Mon premier paragraphe.</p>
   <p>Deuxième paragrapge.</p>
   <p>Voici quelques liens 
      <ul>
         <li><a href="https://omnis-bibliotheca.com/">lien vers l'OB<a></li>
         <li><a href="https://omnis-bibliotheca.com/">lien vers l'OB<a></li>
         <li><a href="https://omnis-bibliotheca.com/">lien vers l'OB<a></li>
      </ul>
   </p>
</div>

N.B: Il est possible d'intégrer du code HTML directement dans une page wiki. Dans l'exemple ci-dessus, le code HTML a été indenté (aéré) pour plus de lisibilité, cependant dans une page wiki il ne faudra pas mettre d'espaces vides en début de ligne, car cela a une signification bien précise dans la syntaxe wiki, ce qui emêchera le code HTML d'être reconnu comem tel.

CSS

Le CSS permet de définir des règles d'affichage du contenu HTML. C'est au navigateur web de procéder au rendu graphique (d'où le problème entre les différents navigateurs qui ont parfois des comportement un peu différents sur certaines règles CSS).

• Le code HTML peut intégrer lui-même directement du code CSS à appliquer pour une balise, via l'attibut style.
• Une autre manière (plus structurée) d'appliquer du CSS, c'est de définir des règles CSS. Chaque règle commence par indiquer sa cible dans le HTML, puis le code CSS à lui appliquer. Dans un wiki, les Admins du site peuvent définir des règles CSS du site dans une page consacré : MediaWiki:Common.css.
  • Une manière d'invoquer des règles CSS depuis le HTML, est de définir un ou plusieurs nom de classe via l'attribut class. Ces nom de classe pourront être utiliser pour définir les cibles des règles CSS.

N.B: Il existe l'extension wiki Extension:CSS à installer sur le serveur d'un wiki, permettant de définir des règles CSS directement dans la page d'un wiki, sans passer par la page MediaWiki:Common.css.

Applications

Table simple

Voici un exemple de codage d'une table simple.

En-tête 1	En-tête 2	En-tête 3
A1	A2	A3
B1	B2	B3
C1	C2	C3

Code wiki

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{|
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|-
| A1 || A2 || A3
|-
| B1 || B2 || B3
|-
| C1 || C2 || C3
|}

Code HTML équivalent

<table>
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr>
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr>
        <td> C1 </td>
        <td> C2 </td>
        <td> C3 </td>
    </tr>
</table>

Table avec code CSS

Voici un exemple de codage d'une table avec code CSS.

En-tête 1	En-tête 2	En-tête 3
A1	A2	A3
B1	B2	B3
C1	C2	C3

Code wiki avec code CSS

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{| style="background: white; color: blue; text-align: center; width: 350px; border: 4px solid green;"
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|- 
| A1 || A2 || A3
|- style="font-style: italic; color: green;"
| B1 || B2 || B3
|- style="font-weight: bold; color: red;"
| style="background: lightgrey;" | C1
| style="background: grey;" | C2
| style="background: teal;" | C3
|}

Code HTML équivalent avec code CSS

<table style="background: white; color: blue; text-align: center; width: 350px; border: 4px solid green;">
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr style="font-style: italic; color: green;">
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr style="font-weight: bold; color: red;">
        <td style="background: lightgrey;"> C1 </td>
        <td style="background: grey;"> C2 </td>
        <td style="background: teal;"> C3 </td>
    </tr>
</table>

Table avec classe associée

Voici un exemple de codage d'une table à laquelle il a été associé la classe "wikitable".

Ce qui n'apparait pas ici, c'est qu'il existe des régles CSS existante sur le site qui s'appliquent à toute de classe "wikitable".

En-tête 1	En-tête 2	En-tête 3
A1	A2	A3
B1	B2	B3
C1	C2	C3

Code wiki avec classe associée

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{| class="wikitable"
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|-
| A1 || A2 || A3
|-
| B1 || B2 || B3
|-
| C1 || C2 || C3
|}

Code HTML équivalent avec classe associée

<table class="wikitable">
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr>
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr>
        <td> C1 </td>
        <td> C2 </td>
        <td> C3 </td>
    </tr>
</table>

Règles CSS des table de classe "wikitable"

Voici les règles CSS définit sur le serveur du wiki.

table.wikitable {
    background-color: #f8f9fa;
    color: #222;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}

table.wikitable > tr > th {
    background-color: #eaecf0;
    text-align: center;
}
table.wikitable > tr > th,
table.wikitable > tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}

A SUIVRE ...