Wikihuy:Bacasable 49 : Différence entre versions

De Wikihuy
Aller à : navigation, rechercher
m
 
(33 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
==Page de test par Philippe==
 
==Page de test par Philippe==
===Mise en forme des caractères===
+
===Déposer une ancre ===
====couleur====
+
 
 +
<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}}.  
 
{{Rouge|Texte}}.  
  
Ligne 13 : Ligne 38 :
 
{{Barrer|Barré}}
 
{{Barrer|Barré}}
  
F-->
+
-->
Indice<sub>2</sub>
+
  
<font size="7">tres gros
+
===Mise en forme des paragraphes===
<font size="4">normal
+
<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>
 
Exposant<sup>3</sup>
  
{{centrer|Texte}}
 
  
{{droite|et à droite ?}}
+
====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====
  
{{boîte déroulante
 
| titre = Titre
 
| contenu = Texte
 
}}
 
Pour empécher l'interprétation
 
 
<pre>
 
<pre>
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
+
Utiliser la balise
</pre>
+
  
 +
<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>
 
   <p style="background-color:red;">fond en Rouge</p>
<p style="color:rgb(255,0,0);">rouge métode rgb</p>
+
 
  <p style="color:gold;"jaune;</p>
+
<span style="background-color:yellow;">le texte à surligner</span>
  <p style="color:Green;">R
+
===Dessin formes géométriques===
Vert</p>
+
 
  <p style="color:blue;">bleu text</p>
+
<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===
 
===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====
 
====wiki====
 +
Bonjour
 +
 +
 +
 
===taille===
 
===taille===
 
avec la balise big
 
avec la balise big
Ligne 47 : Ligne 180 :
 
avec la balise small
 
avec la balise small
 
<small>petit</small>
 
<small>petit</small>
 +
 
avec la balise font size="x"
 
avec la balise font size="x"
 
{| class="wikitable"
 
{| class="wikitable"
Ligne 56 : Ligne 190 :
 
| <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="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">1 moins petit<font size="4">||  || <font size="7">7 très gros<font size="4">  
+
|  <font size="3">3 moins petit<font size="4">||  || <font size="7">7 très gros<font size="4">  
 
|}
 
|}
 
==== autre====
 
==== autre====
Ligne 84 : Ligne 218 :
 
| style="width:50%;" |
 
| style="width:50%;" |
 
[[Fichier:Godet pignon janvier 2021.71.jpg|vignette|centré|7 janvier 2021]]
 
[[Fichier:Godet pignon janvier 2021.71.jpg|vignette|centré|7 janvier 2021]]
 +
 
|}
 
|}
 
===Photo===
 
===Photo===
Ligne 89 : Ligne 224 :
 
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 
300 px<br>
 
300 px<br>
[[Fichier:IMG 3708.92.71.jpg|300x300px|vignette|gauche|Pignon 19.12.2017]]
+
[[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'''.
 
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'''.
Ligne 95 : Ligne 230 :
 
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é.
 
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. -->
+
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:Godet facade janvier 2021.71.jpg|500x500px|vignette|droite|Façade janvier 2021]]
Ligne 102 : Ligne 238 :
 
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 
[[Fichier:IMG 3708.92.71.jpg|500x500px|vignette|gauche|Pignon 19.12.2017]]
 
[[Fichier:DSC02623.71.JPG|500x500px|vignette|gauche|03.06.2022 ]]
 
[[Fichier:DSC02623.71.JPG|500x500px|vignette|gauche|03.06.2022 ]]
 +
 +
 +
 +
 +
 +
  
  
  
 
<center>Evolution<br>dans le temps</center>
 
<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]]
 +
|-
 +
|}
 +
| --->

Version actuelle en date du 8 janvier 2024 à 11: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