Bac à sable

HTML

Documentation de référence : https://developer.mozilla.org/fr/docs/Web/HTML/Element

---

Le langage HTML permet de décrire le contenu d'une page web.

• 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'Omnis Bibliotheca<a></li>
         <li><a href="https://bibliotheque-imperiale.com/">lien vers la Bibliothèque Impériale<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 comme tel.

CSS

Documentation de référence : Documentation de référence: https://developer.mozilla.org/fr/docs/Web/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.

Exemple: Voici une règle ciblant toutes les tables de classe custom-table, indiquant de leur appliquer un background rouge et de colorer le texte en bleu.

Règle CSS :

table.custom {
   background: red;
   color: blue;
}

HTML cible :

<table class="custom-table">
...
</table>

Code wiki cible :

{| class="custom-table"
...
|}

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