Bac à sable : Différence entre versions

De La Bibliothèque Impériale
(Création de la page)
m
 
(24 révisions intermédiaires par 4 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
−
La créature connue sous le nom de '''Moonclaw''', aussi connue comme le '''Fils de Morrslieb''', le '''Prince fou''' et l''''Enfant de l'Orbe Gravide''' n'est pas née de parents mortels, mais a été plutôt vomie du ventre pâle de [[Morrslieb]] lorsqu'elle fut plus boursouflée qu'elle n'a jamais été. Bien qu'au premier abord il puisse ressembler à un [[Hommes-Bêtes|Homme-Bête]] particulièrement hideux, Moonclaw ne vient pas de ce monde. Car Moonclaw est complétement et irrémédiablement fou, ses actions sont aussi imprévisibles qu'elles sont mortelles.
+
__NOTOC__
 +
=HTML=
  
−
==Histoire==
+
:''Documentation de référence : https://developer.mozilla.org/fr/docs/Web/HTML/Element
−
Lors de la [[Geheimnisnacht]] sous laquelle Moonclaw est venu au monde, Morrslieb semblait proche et pleine dans le firmament comme le ventre d'une sorcière enceinte. Les forêts résonnaient des festins orgiaques des tribus d'Homme-Bêtes. Au coup de l'heure des sortilèges, une comète cornue et enflammée traversa les cieux. Elle traça rapidement une cicatrice verte à travers les astres avant de transpercer les nuages et de s'écraser dans un bosquet sacré à la base des [Collines Stériles]]. Une vague de force verte et noire nivela la forêt à des lieues alentour. Rien ne survécut à l'impact désastreux hormis Moonclaw lui-même, qui sortit entouré de vapeur des restes brisés d'une bosse en forme d'œuf faite de la [[Malepierre]] la plus pure, sa fourrure scintillante reluisante de fluides indescriptibles couvrant tout son corps. Ainsi Moonclaw sortit de la substance maudite de sa mère lunaire dans le [[Vieux Monde]].
+
<hr>
  
−
Depuis ce jour, Moonclaw a vagabondé sur les terres dans une stupeur, en parlant dans des syllables glottales dans une langue inversée. Ses yeux brillants et qui ressemblent à ceux d'un bouc semblent voir dans un autre monde, et ses mouvements erratiques laissent des traces vestigiales dans les airs. Où que les Hommes-Bêtes trouvent les flammes noires et vertes chatoyantes qui entourent Moonclaw, ils tombent à genoux d'adoration.
 
  
−
Lorsque Morrslieb est au plus proche de la terre, le pouvoir de Moonclaw atteint son apex. C'est alors que Moonclaw invoque la drôle de bête à deux têtes, [[Umbralok]], qui lui sert de destrier, et chevauche à la tête d'une grande armée. Pendant ces nuits il recherche les [[Pierre Gardienne Elfique|Pierres Gardiennes]] présentes à travers le Vieux Monde, des édifices encore plus vieux que la race de l'Homme. Moonclaw ne désire rien de plus que de les voir abattues et souillées pour que le [[Chaos|sombre pouvoir]] qu'elles endiguent puisse s'écouler à travers le monde. C'est ainsi que Moonclaw mêne ses adeptes contre les races civilisées, sa forme tordue et mutante craquant de pouvoir à peine contenu sur le dos de son diabolique destrier. Peu peuvent tolérer la vague de folie qui précède Moonclaw pendant ces nuits les plus démoniaques, encore moins faire face alors que des éclats tranchants de roche lunaire tombant du ciel s'abattent afin d'exterminer tous ceux qui attisent le mécontentement de Moonclaw.
+
Le langage '''HTML''' permet de décrire le '''contenu''' d'une page web.
  
−
==Source==
+
* Le code HTML s'écrit par '''balises''' qui vont s'imbriquer les unes dans les autres.
−
* ''Livre d'Armée: Hommes-Bêtes (septième édition)
+
* Chaque balise définit la nature du contenu. Quelques exemples :
−
** ''page 59''
+
** '''<nowiki><p>...</p></nowiki>''' : paragraphe
 +
** '''<nowiki><a>...</a></nowiki>''' : un lien internet
 +
** '''<nowiki><table>...</table></nowiki>''' : une table
 +
** '''<nowiki><ul>...</ul></nowiki>''' : une liste
 +
** '''<nowiki><li>...</li></nowiki>''' : un élément d'une liste
 +
** '''<nowiki><div>...</div></nowiki>''' : un conteneur générique en bloc (prend par défaut toute la largeur de son contenant)
 +
** '''<nowiki><span>...</span></nowiki>''' : 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:'''
 +
<pre>
 +
 
 +
<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>
 +
 
 +
</pre>
 +
 
 +
'''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 <span style="color: red;">il ne faudra pas mettre d'espaces vides en début de ligne</span>, 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
 +
<hr>
 +
 
 +
 
 +
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 :
 +
<pre>
 +
table.custom {
 +
  background: red;
 +
  color: blue;
 +
}
 +
</pre>
 +
:HTML cible :
 +
<pre>
 +
<table class="custom-table">
 +
...
 +
</table>
 +
</pre>
 +
:Code wiki cible :
 +
<pre>
 +
{| class="custom-table"
 +
...
 +
|}
 +
</pre>
 +
 
 +
 
 +
'''N.B: Il existe l'extension wiki [https://www.mediawiki.org/wiki/Extension:CSS 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
 +
 
 +
<pre>
 +
{|
 +
|-
 +
! En-tête 1 !! En-tête 2 !! En-tête 3
 +
|-
 +
| A1 || A2 || A3
 +
|-
 +
| B1 || B2 || B3
 +
|-
 +
| C1 || C2 || C3
 +
|}
 +
</pre>
 +
 
 +
 
 +
===Code HTML équivalent===
 +
 
 +
<pre>
 +
 
 +
<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>
 +
 
 +
</pre>
 +
 
 +
 
 +
==Table avec code CSS==
 +
 
 +
Voici un exemple de codage d'une table avec code CSS.
 +
 
 +
{| 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 wiki avec code CSS===
 +
Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr
 +
 
 +
<pre>
 +
{| 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
 +
|}
 +
</pre>
 +
 
 +
 
 +
===Code HTML équivalent avec code CSS===
 +
 
 +
<pre>
 +
 
 +
<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>
 +
 
 +
</pre>
 +
 
 +
 
 +
 
 +
==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 <table> de classe "wikitable".
 +
 
 +
{| class="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
 +
 
 +
<pre>
 +
{| class="wikitable"
 +
|-
 +
! En-tête 1 !! En-tête 2 !! En-tête 3
 +
|-
 +
| A1 || A2 || A3
 +
|-
 +
| B1 || B2 || B3
 +
|-
 +
| C1 || C2 || C3
 +
|}
 +
</pre>
 +
 
 +
 
 +
===Code HTML équivalent avec classe associée===
 +
 
 +
<pre>
 +
 
 +
<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>
 +
 
 +
</pre>
 +
 
 +
 
 +
===Règles CSS des tables de classe "wikitable"===
 +
 
 +
Voici les règles CSS définit sur le serveur du wiki.
 +
 
 +
<pre>
 +
 
 +
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;
 +
}
 +
 
 +
</pre>
 +
 
 +
 
 +
A SUIVRE ...

Version actuelle datée du 29 novembre 2023 à 19:49

HTML[modifier]

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[modifier]

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[modifier]

Table simple[modifier]

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[modifier]

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[modifier]


<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[modifier]

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[modifier]

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[modifier]


<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[modifier]

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[modifier]

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[modifier]


<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"[modifier]

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 ...
Récupérée de « https://bibliotheque-imperiale.com/index.php?title=Bac_à_sable&oldid=42236 »