« DocModif » : différence entre les versions

De WikInSituFr
Aller à la navigation Aller à la recherche
Ligne 521 : Ligne 521 :
Exemple :  
Exemple :  


<div class="one_page flex x_center y_center" style="border: 1px solid">Cette div fait une page imprimée.</div>
<div class="one_page flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait une page imprimée.</p><p>La bordure noir n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div>


=== gif ===
=== gif ===

Version du 12 décembre 2023 à 13:48



Liens utiles

Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) : Spécial:Pages spéciales

Pour uploader des images : Spécial:Téléverser

Lien direct vers la css : MediaWiki:Global.css

Lien direct vers le js : MediaWiki:Global.js


Menus latéraux

Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.

{{:nom_de_l'article}}

Noms et lien des articles contenant les menus

Menus du wiki fr

Menus du wiki en

Menus du wiki es

Menus du wiki nl

  • Nl_Installer
  • Nl_Configurer
  • Nl_Concevoir
  • Nl_Décorer
  • Nl_Gabarits
  • En_Visualiser
  • En_Vendre
  • Menus du wiki de

    https://de.wiki.insitu.education/index.php?title=Hauptseite



    Syntaxe

    Liens

    Liens internes

    Navigation

    Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.

    [[nom_de_l'article|Texte que l'utilisateur voit]]

    Exemple : Page très utile

    Inclusion
    D'un article

    L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.

    {{:nom_de_l'article}}

    Exemple:

    Installation.png
    Installer
    D'une image

    Pour inclure une image dans un article, il faut d'abord commencer par l'uploader. Une image uploadée est inclue grâce à la syntaxe suivante

    [[Fichier:nom_de_l_image]]

    ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même

    [[Image:nom_de_l_image]]

    Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien

    [[Fichier:nom_de_l_image|link=]]
    [[Image:nom_de_l_image|link=]]

    Exemple : Sans "|link=" : Exemple img.jpg Avec "|link=" : Exemple img.jpg (cliquez sur chacune des images pour voir la différence)

    Liens externes

    Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante

    [https//www.adresse_du_site.fr texte visible du lien(optionnel)]

    Exemple : Lien très très cool

    Classes de mise en page

    Classes générales (couleur, gras, etc.)

    big

    Cette classe permet de mettre un texte en plus grand.

    <p class="big">Je suis grand</p>

    Exemple :

    Je suis grand

    bold

    Cette classe permet de mettre un texte en gras.

    <p class="bold">Je suis gras</p>

    Exemple :

    Je suis gras

    sup

    Cette balise permet de mettre un texte en exposant.

    <p>Texte ordinaire<sup>Texte en exposant</sup></p>

    Exemple :

    Texte ordinaireTexte en exposant

    txt-is

    Cette classe sert à mettre un texte en orange, "couleur InSitu".

    <p class="txt-is">InSitu</p>

    Exemple :

    InSitu

    txt-gris

    Cette classe sert à mettre un texte en gris.

    <p class="txt-gris">Texte gris</p>

    Exemple :

    Texte gris


    Présentation particulière d'un élément

    chiffre

    Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.

    <span class="chiffre">0</span>

    Exemple :

    0


    encadre

    Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.

    Pour un paragraphe :

    <p class="encadre">Contenu textuel</p>

    Pour plusieurs paragraphes :

    <div class="encadre">
    Contenu textuel 1
    
    Contenu textuel 2
    </div>

    Exemple :

    You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.

    The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

    Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.


    <p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p>

    blabla blabla blabla.

    info

    Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.

    <span class="info">i</span>
    <span class="chiffre info">i</span>

    Exemple :

    Info seul : i

    Info avec la classe "chiffre" : i

    important

    Cette classe sert à mettre en évidence une information.

    <p class="important">Ceci est absolument crucial !</p>

    Exemple :

    Ceci est absolument crucial !

    Placer les éléments sur la page

    flex

    Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.

    ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !

    ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.

    ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.

    <div class="flex">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    </div>

    Exemple :

    Exemple img.jpg

    Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.


    Classes relatives au flex

    ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.

    col

    Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.

    <div class="flex col">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    <div>[[lien d'une image]]</div>
    </div>

    Exemple :

    Exemple img.jpg

    Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.

    Exemple img.jpg

    wrap

    Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.

    <div class="flex wrap">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    div>[[lien d'une image]]</div>
    </div>

    Exemple :

    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    x_center

    Cette classe permet de centrer horizontalement des éléments d'un flex.

    <div class="flex x_center">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    <div>[[lien d'une image]]</div>
    </div>

    Exemple :

    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    x_evenly

    Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.

    <div class="flex x_evenly">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    <div>[[lien d'une image]]</div>
    </div>

    Exemple :

    Exemple img.jpg
    Exemple img.jpg
    Exemple img.jpg
    y_center

    Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.

    <div class="flex y_center">
    <div>[[lien d'une image]]</div>
    <p>Texte</p>
    <div>[[lien d'une image]]</div>
    </div>

    Exemple :

    Exemple img.jpg

    One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth 𝕄𝔼𝕆𝕎 but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.


    txt-center

    Cette classe permet de centrer des éléments.

    <div class="txt-center">Contenu divers</div>
    <p class="txt-center">Contenu textuel</p>

    Exemple :

    Exemple img.jpg


    txt-right

    Cette classe permet d'aligner les éléments sur la droite.

    <div class="txt-right">Contenu divers</div>
    <p class="txt-right">Contenu textuel</p>

    Exemple :

    Exemple img.jpg

    Ajouter de l'espace autour d'un élément

    m-20

    Cette classe ajoute un peu d'espace autour d'un élément (20 px).

    <div class="m-20"></div>
    <p class="m-20"></p>

    Exemple :

    Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.

    Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.

    Exemple img.jpg

    Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?

    Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.


    mb-20

    Cette classe ajoute un peu d'espace sous un élément (20px).

    <div class="mb-20"></div>
    <p class="mb-20"></p>

    Exemple :

    Exemple img.jpg

    I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.


    ml-20

    Cette classe ajoute un peu d'espace à gauche d'un élément (20px).

    <div class="ml-20"></div>
    <p class="ml-20"></p>

    Exemple :

    Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.

    Exemple img.jpg


    mr-20

    Cette classe ajoute un peu d'espace à droite d'un élément (20px).

    <div class="mr-20"></div>
    <p class="mr-20"></p>

    Exemple :

    Exemple img.jpg

    Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.


    mt-20

    Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).

    <div class="mt-20"></div>
    <p class="mt-20"></p>

    Exemple :

    Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?

    Exemple img.jpg


    Changer la taille d'un élément

    style et width

    La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.

    Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).

    ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.

    <div style="width:00px;">Contenu divers</div>
    <p style="width:00%;">Contenu textuel</p>

    Exemple :

    Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?

    I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.

    Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.


    img-full

    Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).

    <div class="img-full">[[Lien de l'image]]</div>

    Exemple :

    Exemple img.jpg

    Exemple img.jpg

    Exemple img.jpg

    Classes relatives à l'impression

    barre_menu

    Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.


    div.one_page

    Classe à mettre UNIQUEMENT sur une balise div. Cette div fera la taille d'une page pour l'impression.

    ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre. CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.

    <div class="one_page"></div>

    Exemple :

    Cette div fait une page imprimée.

    La bordure noir n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.

    gif

    Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.

    <div class="cadreimg gif">[[lien du gif]]</div>

    Ancienne façon de faire

    <p class="cadreimg gif">[[lien du gif]]</p>

    Exemple :

    Gif invisible à l'impression.

    Exemple gif.gif


    replace_gif

    Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.

    <div class="cadreimg replace_gif">[[lien de l'image]]</div>

    Ancienne façon de faire

    <p class="cadreimg replace_gif">[[lien de l'image]]</p>

    Exemple :

    Image visible seulement à l'impression

    Exemple img.jpg