Wikihuy:Bacasable 49 : Différence entre versions

De Wikihuy
Aller à : navigation, rechercher
(Page créée avec « ==TEST== {| class="wikitable centre" style="width:100%;" |+ Évolution dans le temps |- ! scope=col | Colonne 1 ! scope=col | Colonne 2 |- | style="width:50%;" | Contenu... »)
 
m
 
(57 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
==TEST==
+
==Page de test par Philippe==
 +
===Déposer une ancre ===
  
{| class="wikitable centre" style="width:100%;"
+
<pre>
 +
Utiliser la balise span
 +
 
 +
<span id="nom de l'ancre">texte affiché du point d'ancrage</span>
 +
</pre>
 +
 
 +
Dans le lien utiliser # et le nom de l'ancre
 +
exemple
 +
<pre>
 +
[[Bacasable 47#Gauche|Test lien]]
 +
 
 +
</pre>
 +
 
 +
 
 +
===Texte Encadré===
 +
 
 +
 
 +
 
 +
<p style="border: 5px solid black; padding; width:60%"
 +
>Cette Oeuvre à été imaginée par<br>les élèves des 5e et 6e primaires<br>des écoles de l'entité avec la coll-<br>-aboration de l'artiste G. Gelmi<br>grâce à la participation financière<br>du Petit Patrimoine Wallon, de la<br>section FNAPG et de l'Administra-<br>-tion communale d'Ouffet.<br>Ce texte sera encadré grâce à la balise <p> et aux styles CSS définis.</p>
 +
 
 +
<pre> la balise <p style="width:60%"</pre> indique 60% de la largeur de l'écran <br>
 +
 
 +
 
 +
<!--
 +
balise wiki qui ne vont pas
 +
{{Rouge|Texte}}.
 +
 
 +
{{Petit|Pour écrire petit}}
 +
 
 +
{{Grossir|Pour écrire gros}}
 +
 
 +
{{Souligner|Souligné}}
 +
 
 +
{{Barrer|Barré}}
 +
 
 +
-->
 +
 
 +
===Mise en forme des paragraphes===
 +
<pre> <p> balise paragraphe
 +
 
 +
align="right"
 +
align="justify"
 +
 
 +
aussi la balise <div> division ou section 
 +
 
 +
 
 +
</pre>
 +
 
 +
<div style="border: 5px solid black; padding; width:30%">
 +
Cette Oeuvre à été imaginée par<br>les élèves des 5e et 6e primaires<br>des écoles de l'entité avec la coll-<br>-aboration de l'artiste G. Gelmi<br>grâce à la participation financière<br> </div>
 +
 
 +
 
 +
====texte centré====
 +
 
 +
 
 +
<center>Texte centré</center>
 +
==== texte à droite====
 +
 
 +
<div align="right">Ce texte est à droite </div>
 +
 
 +
==== texte justifié ====
 +
Exemple
 +
<div align="justify">
 +
Ouffet au coeur du Condroz Liégeois, au Sud de Durbuy, plus petite ville du monde en Province de Luxembourg. Outre les monuments, fermes et seigneuries remarquables, il y a lieu de signaler la Vallée du Néblon qui longe la limite Sud-Est de la commune et qui constitue un univers de fraîcheur et de verdure dans ce beau coin d'Ardenne.
 +
Calme, espace, charme et confort sont les maîtres mots de cette belle ancienne ferme, spécialement adaptée pour organiser des retrouvailles familiales. </div> .
 +
<br>
 +
===Mise en forme des caractères===
 +
====indice et exposant====
 +
 
 +
Indice<sub>2</sub>
 +
Exposant<sup>3</sup>
 +
 
 +
 
 +
====texte en gras====
 +
Trois façons <pre> <b> , <strong> et '''texte'''</pre>
 +
1 <b> BOLD </b>
 +
 
 +
2 <strong> STRONG </strong>
 +
 
 +
3 '''Wiki'''
 +
<br>
 +
Il est difficile de voir la différence
 +
<br>
 +
====Pour empécher l'interprétation des balises ====
 +
 
 +
'''Méthode html'''<br> placer la balise <nowiki> <pre> et </pre> </nowiki>
 +
<pre> exemple : [[Fihier:IMG 3708.92.71.jpg|500x500px| et||Pignon 19.12.2017]]</pre>
 +
Le texte est sur fond gris
 +
'''Methode wikicode'''
 +
<pre>utiliser la balise <nowiki> </pre>
 +
 
 +
<nowiki> exemple : [[Fichier:IMG 3708.92.71.jpg|500x500px| et||Pignon 19.12.2017]]</nowiki><br>
 +
Le texte reste normal
 +
 
 +
====couleur====
 +
 
 +
<pre>
 +
Utiliser la balise
 +
 
 +
<p style="color:la couleur;">
 +
façon simple
 +
avec la couleur en anglais : red, green, blue, yellow
 +
plus complexe :
 +
<p style="color:rgb(255,0,0);>
 +
255,0,0 :rouge - 0,255,0 : vert - 0,0,255 : bleu - blanc 255,255,255 - noir 0,0,0
 +
</pre>
 +
exemple :
 +
<p style="color:rgb(255,0,0);">rouge métode rgb</p>
 +
  <p style="color:yellow;">jaune;</p>
 +
  <p style="color:Green;">Vert</p>
 +
  <p style="color:blue;">bleu</p>
 +
  <p style="background-color:red;">fond en Rouge</p>
 +
 
 +
<span style="background-color:yellow;">le texte à surligner</span>
 +
===Dessin formes géométriques===
 +
 
 +
<office:body>
 +
<office:drawing>
 +
<draw:enhanced-geometry>
 +
    svg:viewBox="0 0 10 10"
 +
    draw:type="non-primitive"
 +
    draw:modifiers="6"     
 +
    draw:enhanced-path="M 0 0 L 10 $0 0 10 Z" >
 +
    <draw:handle draw:handle-position="10 $0" draw:handle-range-y-minimum="0" draw:handle-range-y-maximum="10"/>
 +
</draw:enhanced-geometry>
 +
</office:drawing>
 +
</office:body>
 +
 
 +
 
 +
 
 +
===Tableau===
 +
Simple utiliser l’icône du menu
 +
<br>
 +
aller voir [http://tableaux https://www.mediawiki.org/wiki/Help:Tables/fr]
 +
https://www.mediawiki.org/wiki/Help:Tables/fr
 +
Test
 +
{|  |+Légende
 +
 
 +
|-Ligne
 +
 
 +
|}<!-- fin de tableau -->
 +
{|
 +
|Orange
 +
|Pomme
 +
|-
 +
|Pain
 +
|Tarte
 +
|-
 +
|Beurre
 +
|Crème glacée
 +
|}
 +
{| class="wikitable" style="margin:auto"
 +
|+ Texte de la légende
 +
|-
 +
! Texte de l’en-tête !! Texte de l’en-tête !! Texte de l’en-tête
 +
|-
 +
| Exemple || Exemple || Exemple
 +
|-
 +
| Exemple || Exemple || Exemple
 +
|-
 +
| Exemple || Exemple || Exemple
 +
|}
 +
 
 +
 
 +
 
 +
 
 +
====wiki====
 +
Bonjour
 +
 
 +
 
 +
 
 +
===taille===
 +
avec la balise big
 +
<big>gros</big>
 +
 
 +
avec la balise small
 +
<small>petit</small>
 +
 
 +
avec la balise font size="x"
 +
{| class="wikitable"
 +
|-
 +
! Petit !! Normal!! Gros
 +
|-
 +
| <font size="1">1 tres petit<font size="4"> ||  ||  <font size="5">5 gros<font size="4">
 +
|-
 +
| <font size="2">2 petit<font size="4">  || <font size="4">4 normal<font size="4"> || <font size="6"> 6 gros<font size="4">
 +
|-
 +
|  <font size="3">3 moins petit<font size="4">||  || <font size="7">7 très gros<font size="4">
 +
|}
 +
==== autre====
 +
{| class="wikitable gauche" style="width:70%;"
 
|+ Évolution dans le temps
 
|+ Évolution dans le temps
 +
<!-- ligne sur 2 colonne -->
 
|-
 
|-
! scope=col | Colonne 1
+
! scope=col | Avant transformation
! scope=col | Colonne 2
+
! scope=col | Après transformation
 +
<!-- une seule colonne -->
 +
|-
 +
| style="text-align:center;" colspan="3" |Facade
 +
|-
 +
| style="text-align:center;" colspan="6" |Facade
 
|-
 
|-
 
| style="width:50%;" |
 
| style="width:50%;" |
Contenu 1
+
[[Fichier:IMG 3717.92.71.jpg|vignette|upright=1.6|centré|19 décembre 2017]]
 
| style="width:50%;" |
 
| style="width:50%;" |
Contenu 2
+
[[Fichier:Godet facade janvier 2021.71.jpg|vignette|upright=1.6|centré|7 janvier 2021]]
 +
|-
  
 +
| style="text-align:center;" colspan="3" |
 +
Pignon
 
|-
 
|-
| style="width:33%;" |
+
| style="width:50%;" |
Contenu 3
+
[[Fichier:IMG 3708.92.71.jpg|vignette|centré|120px|19 décembre 2017]]
| style="width:34%;" |
+
| style="width:50%;" |
Contenu 4
+
[[Fichier:Godet pignon janvier 2021.71.jpg|vignette|centré|7 janvier 2021]]
 +
 
 +
|}
 +
===Photo===
 +
500 px<br>
 +
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 +
300 px<br>
 +
[[Fichier:IMG 3708.92.71.jpg|300x300px|vignette|droite|Pignon 19.12.2017]]
 +
<!--
 +
Bonjour Philippe,<br>Je n'ai aucun doute sur tes capacités à gérer le "html" mais il y a sur Wikihuy un raccourci beaucoup plus simple et plus rapide (4 lignes, 5 minutes) pour ce travail.<br>Compliquer les choses ne sauraient que perturber et décourager les moins doués, mieux vaudrait s'en tenir aux outils proposés par le site '''quand ils existent'''.
 +
 
 +
On peut réduire ou agrandir les images en diminuant ou augmentant le nombre de pixels tout en gardant la même qualité d'image.<br>Choisir les dimensions pour un modèle carré est plus simple, l'application "oublie" automatiquement l'espace inutilisé.
 +
 
 +
Je pense que tu as un problème avec ton appareil photo, il laisse un halo à gauche de l'image entre le milieu et la partie supérieure. Regarde attentivement l'objectif de ton appareil photo, une goutte d'eau séchée est souvent la cause de cette imperfection.
 +
-->
 +
 
 +
[[Fichier:Godet facade janvier 2021.71.jpg|500x500px|vignette|droite|Façade janvier 2021]]
 +
[[Fichier:IMG 3717.92.71.jpg|500x500px|vignette|gauche|Façade 19.12.2017]]
 +
[[Fichier:Godet pignon janvier 2021.71.jpg|500x500px|vignette|droite|Pignon janvier 2021]]
 +
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 +
[[Fichier:DSC02623.71.JPG|500x500px|vignette|gauche|03.06.2022 ]]
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<center>Evolution<br>dans le temps</center>
 +
=== inserer du pdf ===
 +
[[media:Document (11).pdf|ceci est un test]]
 +
 
 +
[[Fichier:Foot 15.71.jpg|vignette|droite| '''[[Foot 15.71|Voir les noms]]''']]
 +
<imagemap>
 +
Fichier:Cliquez ici (2).jpg|vignette|droite
 +
rect 29 31 2215 863 [[Catégorie:Ouffet]]
 +
</imagemap>
 +
<!==
 +
===Texte Encadré===
 +
====un====
 +
{{encadré texte
 +
|align=right
 +
|width=400px
 +
|texte=En raison de la nature des fonctions exercée par M………… en cas de rupture du présent contrat à quelque époque et pour quelque cause que ce soit, M………… s’interdit de s’intéresser à quelque titre que ce soit, directement ou indirectement à toute entreprise ayant une activité susceptible de concurrencer en tout ou partie celle de la société………… [et celles des sociétés du groupe………… au sein desquelles M………… aura été amené à intervenir].
 +
}}
 +
====deux====
 +
{{Encadré
 +
| alignement = <!-- facultatif -->
 +
| image = <!-- facultatif -->
 +
| lien = <!-- facultatif -->
 +
| fond = <!-- facultatif -->
 +
| largeur = <!-- facultatif -->
 +
| taillepolice =120
 +
| titre = test
 +
| contenu =  la nature des fonctions exercée par M………… en cas de rupture du
 +
}} ===>
 +
===Galerie de photos===
 +
<!-- <gallery perrow="4" caption="Côté droit" mode="nolines"> --->
 +
<gallery perrow="4" caption="Coté droit" heights="300px" widths="200px" >
 +
Ferme Dawance.JPG|[[Ouffet, ferme Dawance|'''La ferme Dawance rue Halbadet''']]
 +
IMG 0240.71.jpg|[[Ouffet, ferme de Houp le Loup|'''La ferme de Houp le Loup]]
 +
PM0166.71.jpg|[[Ouffet, ferme de Temme (Germain)|'''La ferme Gillet rue de Temme''']]
 +
PM0155.71.jpg|[[Ouffet, ferme de Temme (Wautelet)|'''La ferme Wautelet rue de Temme''']]
 +
IMG_1562.71.jpg|[[Ouffet, ferme d'Odeigne|'''La ferme d'Odeigne''']]
 +
IMG_3377.71.jpg|[[Ouffet, ferme de Crossée|'''La ferme de Crossée''']]
 +
</gallery>
 +
 
 +
<!--
 +
{| class="wikitable";style="text-align:center; width:80%;"
 +
|-
 +
|<font size="5">Situation en 1971||<font size="5">Situation en 2021<font size="4">
 +
|-
 +
| [[Fichier:Tige Pirette en 1971.71.jpg|vignette|800x800px|Situation 1971]]  || [[Fichier:Tige Pirette en 2021.71.jpg|vignette|800x800px|Situation 2021]]
 
|-
 
|-
| style="text-align:center;" colspan="3" |
 
Ligne 1
 
 
|}
 
|}
 +
| --->

Version actuelle en date du 8 janvier 2024 à 12:11

Page de test par Philippe

Déposer une ancre

 
Utiliser la balise span

<span id="nom de l'ancre">texte affiché du point d'ancrage</span>
 

Dans le lien utiliser # et le nom de l'ancre exemple

 
[[Bacasable 47#Gauche|Test lien]]


Texte Encadré

Cette Oeuvre à été imaginée par
les élèves des 5e et 6e primaires
des écoles de l'entité avec la coll-
-aboration de l'artiste G. Gelmi
grâce à la participation financière
du Petit Patrimoine Wallon, de la
section FNAPG et de l'Administra-
-tion communale d'Ouffet.
Ce texte sera encadré grâce à la balise <p> et aux styles CSS définis.

 la balise <p style="width:60%"
indique 60% de la largeur de l'écran


Mise en forme des paragraphes

 <p> balise paragraphe

align="right"
align="justify"

aussi la balise <div> division ou section  


Cette Oeuvre à été imaginée par
les élèves des 5e et 6e primaires
des écoles de l'entité avec la coll-
-aboration de l'artiste G. Gelmi
grâce à la participation financière


texte centré

Texte centré

texte à droite

Ce texte est à droite

texte justifié

Exemple

Ouffet au coeur du Condroz Liégeois, au Sud de Durbuy, plus petite ville du monde en Province de Luxembourg. Outre les monuments, fermes et seigneuries remarquables, il y a lieu de signaler la Vallée du Néblon qui longe la limite Sud-Est de la commune et qui constitue un univers de fraîcheur et de verdure dans ce beau coin d'Ardenne.

Calme, espace, charme et confort sont les maîtres mots de cette belle ancienne ferme, spécialement adaptée pour organiser des retrouvailles familiales.
.


Mise en forme des caractères

indice et exposant

Indice2 Exposant3


texte en gras

Trois façons
 <b> , <strong> et '''texte'''

1 BOLD

2 STRONG

3 Wiki
Il est difficile de voir la différence

Pour empécher l'interprétation des balises

Méthode html
placer la balise <pre> et </pre>

 exemple : [[Fihier:IMG 3708.92.71.jpg|500x500px| et||Pignon 19.12.2017]]

Le texte est sur fond gris Methode wikicode

utiliser la balise <nowiki> 

exemple : [[Fichier:IMG 3708.92.71.jpg|500x500px| et||Pignon 19.12.2017]]
Le texte reste normal

couleur

Utiliser la balise 

 <p style="color:la couleur;">
façon simple
avec la couleur en anglais : red, green, blue, yellow
plus complexe : 
<p style="color:rgb(255,0,0);>
255,0,0 :rouge - 0,255,0 : vert - 0,0,255 : bleu - blanc 255,255,255 - noir 0,0,0

exemple :

rouge métode rgb

jaune;

Vert

bleu

fond en Rouge

le texte à surligner

Dessin formes géométriques

<office:body> <office:drawing> <draw:enhanced-geometry>

    svg:viewBox="0 0 10 10"
    draw:type="non-primitive"
    draw:modifiers="6"      
    draw:enhanced-path="M 0 0 L 10 $0 0 10 Z" >
    <draw:handle draw:handle-position="10 $0" draw:handle-range-y-minimum="0" draw:handle-range-y-maximum="10"/>

</draw:enhanced-geometry> </office:drawing> </office:body>


Tableau

Simple utiliser l’icône du menu
aller voir https://www.mediawiki.org/wiki/Help:Tables/fr https://www.mediawiki.org/wiki/Help:Tables/fr Test

Orange Pomme
Pain Tarte
Beurre Crème glacée
Texte de la légende
Texte de l’en-tête Texte de l’en-tête Texte de l’en-tête
Exemple Exemple Exemple
Exemple Exemple Exemple
Exemple Exemple Exemple



wiki

Bonjour


taille

avec la balise big gros

avec la balise small petit

avec la balise font size="x"

Petit Normal Gros
1 tres petit 5 gros
2 petit 4 normal 6 gros
3 moins petit 7 très gros

autre

Évolution dans le temps
Avant transformation Après transformation
Facade
Facade
19 décembre 2017

Pignon

19 décembre 2017

Photo

500 px

Pignon 19.12.2017

300 px

Pignon 19.12.2017
Façade 19.12.2017
Pignon 19.12.2017
03.06.2022





Evolution
dans le temps

inserer du pdf

ceci est un test

Catégorie:OuffetCliquez ici (2).jpg

<!==

Texte Encadré

un

Modèle:Encadré texte

deux

Modèle:Encadré ===>

Galerie de photos