Page 1 sur 1

[Tutoriel] La bonne utilisation des balises

MessagePublié: 27 Avr 2012, 23:44
par Sevenfold
Petite MàJ - D'après l'idée de Sevenfold
Ancienne version ~by Sevenfold
Spoiler: Voir
Voila j'ai remarquer que pas mal de petit nouveaux membres ne savent pas comment mettre d'image ou de vidéo sur le forum.
Donc je vais faire un petit tuto pour vous aidez a corriger ce problème. :Youpi4:

Tous ce qui est sous spoil, sont des screens pour savoir ou sa ce situ exactement

Mettre une image

Si vous utiliser Mozilla / Google Chrome :

Un petit clic droit sur l'image et vous faite copier l'adresse de l'image ou enregistrer l'image sous.

Image
Image

(( Entre temps si vous voulez la redimensionner pour pas que sa prenne trop de place, vous allez sur un site d' hébergement ( HostingPics, Imageshack ou Casimages par exemple ) Imageshack et HostingPics vous proposera directement sur le site de vous les redimensionner mais pour Casimages faudra redimensionner l'image avec un logiciel et la mettre sur l'hébergeur. ))

Après pour la mettre sur le forum vous faites :

Code : Tout sélectionner
[img]http://exeloworld.free.fr/galerie/albums/Ecchi/Autres_4/Ecchi-Autres-3765.png[/img]


Pour Internet Explorer :

Clic droit sur l'image, Propriété et vous copier l'adresse url de l'image ou enregistrer l'image sous.

Image
Image

Et vous faites pareil que pour Mozilla pour la mettre sur le forum :

Code : Tout sélectionner
[img]http://exeloworld.free.fr/galerie/albums/Ecchi/Autres_7/Ecchi-Autres-6087.jpg[/img]


Mettre une vidéo

Pour Youtube :

Sous le lecteur Youtube vous verrez marquer PARTAGER ou Share en anglais, une adresse url va apparaitre, vous la copier puis coller sur le forum et vous enlevez tous ce qui est avant / que vous enlèverez également.

Image
Image

Puis quand vous êtes sur le forum, vous faites :

http://youtu.be/55scxwG1TLA ( Supprimer ce qui est en rouge ) puis vous faites
Code : Tout sélectionner
[youtube]55scxwG1TLA[/youtube]


Pour Dailymotion :

Vous copier l'adresse url en haut, vous enlevez tous ce qui est avant le / et ce qui est après le _

Image

http://www.dailymotion.com/video/x2pw5k_dionysos-tes-lacets-sont-des-fees_music?start=1#from=embed ( Tous ce qui est en rouge est a supprimer )

Code : Tout sélectionner
[dmotion]x2pw5k[/dmotion]


Voila j’espère que sa vous aidera, si vous avez d'autres question a propos du forum, comment mettre ceci? cela? Je serais ravi de vous aidez.


Balise B :
Sert à mettre en gras une partie d'un texte.
Utilisation :
Code : Tout sélectionner
Mon [b]texte[/b] en gras.

Visualisation : Mon texte en gras.


Balise i :
Sert à mettre en italique une partie d'un texte.
Utilisation :
Code : Tout sélectionner
Mon [i]texte[/i] en italique.

Visualisation : Mon texte en italique.


Balise u :
Sert à souligner une partie d'un texte.
Utilisation :
Code : Tout sélectionner
Mon [u]texte[/u] souligné.

Visualisation : Mon texte souligné.


Balise Quote :
Sert à citer quelqu'un. Si un texte est mis entre guillemets après le mot quote et le signe =, il apparaîtra au dessus de la citation.
Utilisation :
Code : Tout sélectionner
[quote]Mon texte est cité.[/quote]
[quote="Mr Chirac"]Mangez des pommes[/quote]

Visualisation :
Mon texte est cité.

Variante :
Mr Chirac a écrit:Mangez des pommes !



Balise Code :
Pré-formate un texte, rendant les balises inopérantes. Utile pour montrer l'utilisation des balises :) (Ou pour copier un code de programmation sans tout déstructurer)
Utilisation :
Code : Tout sélectionner
[code]Mon [u]texte[/u] souligné.[/code]

Visualisation :
Code : Tout sélectionner
Mon [u]texte[/u] souligné.



Balise List :
Créer une liste. Les pastilles sont créées par la balise [*]texte[/*].
Utilisation :
Code : Tout sélectionner
[list]
[*]Je veux dire ça.[/*]
[*]Et puis ça aussi.[/*]
[/list]

Visualisation :
  • Je veux dire ça.
  • Et puis ça aussi.


Balise List= :
Créer une liste ordonnée. Les pastilles sont créées par la balise [*]texte. Les valeurs après le = peuvent être : 1 (incrémentation numérique), a (incrémentation alphabétique minuscule), A (incrémentation alphabétique majuscule), I (incrémentation chiffres romains). N'hésitez pas à en essayer d'autres.
Utilisation :
Code : Tout sélectionner
[list=1]
[*]Je veux dire ça.[/*]
[*]Et puis ça aussi.[/*]
[/list]

Visualisation :
  1. Je veux dire ça.
  2. Et puis ça aussi.


Balise [*] :
Objet d'une liste. Ne marche pas s'il est en dehors des balises List. Il n'est pas obligatoire de les fermer.
Utilisation :
Code : Tout sélectionner
[list][*]Mon texte est un objet d'une liste.[/*][/list]

Visualisation :
  • Mon texte est un objet d'une liste.


Balise Img :
Prérequis : Avoir une image hébergé sur le net. Voilà une méthode by Sevenfold © un peu arrangée.
Si vous utiliser Mozilla / Google Chrome :
Un petit clic droit sur l'image et vous faite copier l'adresse de l'image ou enregistrer l'image sous.
Spoiler: Voir
Image
Image

Pour Internet Explorer :
Clic droit sur l'image, Propriété et vous copiez l'adresse url de l'image ou enregistrer l'image sous.
Spoiler: Voir
Image
Image


(( Entre temps si vous voulez la redimensionner pour pas que ça prenne trop de place, vous allez sur un site d'hébergement ( HostingPics, Imageshack ou Casimages par exemple ). Imageshack et HostingPics vous proposeront directement sur le site de vous les redimensionner mais pour Casimages il faudra redimensionner l'image avec un logiciel type Paint ou The GIMP et la mettre sur l'hébergeur. ))

/!\ Si l'image est déjà hébergé sur un site, il n'est pas nécessaire de la ré-hébergée autre part. Attention cependant, certains sites (Zerochan par exemple) n'accepte pas ce genre de pratique. Vous serez donc obligé de la ré-hébergée ailleurs./!\

Une fois l'adresse de l'image en main :
Utilisation :
Code : Tout sélectionner
[img]http://le-lien-de-l-image.png[/img]

Visualisation : Image


Balise url :
Permet de transformer un texte en un lien. Plusieurs solutions :
  • Encapsuler un lien directement. Un peu inutile car le navigateur le reconnait directement.
  • Encapsuler un élément (texte, image, ...) afin de le rendre clicable.
Utilisation :
Code : Tout sélectionner
[url]http://anime-ultime.net[/url]
Viens voir ce [url=http://anime-ultime.net]super site ![/url]
Clic sur l'image pour accéder au plaisir ultime : [url=http://anime-ultime.net][img]http://le-lien-de-l-image.png[/img][/url]

Visualisation :
http://anime-ultime.net
Viens voir ce super site !
Clic sur l'image pour accéder au plaisir ultime : Image


Balise Flash :
Intègre une animation flash. À éviter !
Utilisation :
Code : Tout sélectionner
[flash=x,y]http://le-lien-du-flash.swf[/flash]

x et y étant la largeur et la hauteur de l’animation flash.


Combobox de la taille
Change la taille du texte. On ne peut pas mettre de balise [size] dans une autre balise [size] ! Il faut fermer la première avant.
Utilisation :
Code : Tout sélectionner
[size=10]Mon texte.[/size]
[size=50]Mon texte.[/size]
[size=80]Mon texte.[/size]
[size=130]Mon texte.[/size]

Visualisation :
  • Mon texte.
  • Mon texte.
  • Mon texte.
  • Mon texte.


Couleur de la police :
Change la couleur du texte. La couleur est défini avec 6 caractères (situés après le #). Ils représentent les codes hexadécimaux du rouge, du vert et du bleu (RGB). Chaque caractère est codé de 0 à F (soit 16 possibilités) [0 1 2 3 4 5 6 7 8 9 A B C D E F]. Il y a deux caractères pour chaque couleur, soit 256 possibilités par couleur (de 0 avec 00 à 255 avec FF). Le 0 représentant le noir, tandis que le 255 représente la couleur en elle même. Il y a déjà des couleurs prédéfinies, mais vous pouvez vous amuser avec les 256³ = 16777216 de couleurs.
On ne peut pas mettre de balise [color] dans une autre balise [color] ! Il faut fermer la première avant.
Utilisation :
Code : Tout sélectionner
[color=#134BD7]Mon texte[/color]

Visualisation : Mon texte


Balise center :
Centre le texte.
Utilisation :
Code : Tout sélectionner
[center]Mon texte[center]

Visualisation :
Mon texte



Balise deezer :
Permet d'insérer un plugin deezer afin d'écouter une chanson du site. Il suffit de mettre l'id de la chanson entre les balises. (Sur le site, cliquer sur Partager à coté d'une chanson pour avoir un lien. L'id se trouve dedans. Ex : http://www.deezer.com/track/66499470 )
Utilisation :
Code : Tout sélectionner
[deezer]66499470[/deezer]

Visualisation :

Découvrez Deezer!


Balise Vidéo :
Sevenfold est de retour !
Mettre une vidéo
Pour Youtube :
Sous le lecteur Youtube vous verrez marquer Partager ou Share en anglais, une adresse url va apparaître. Vous ne gardez que la partie après le /. Vous pouvez aussi prendre la partie après le v= dans l'url de la page.
Spoiler: Voir
Image
Image

Exemple :
http://youtu.be/5thgJcPD1CU ( C'est la partie rouge qui nous intéresse )

Pour Dailymotion :
Vous copier l'adresse url en haut, vous enlevez tous ce qui est avant le / et ce qui est après le _
Spoiler: Voir
Image

Exemple :
http://www.dailymotion.com/video/x2pw5k_dionysos-tes-lacets-sont-des-fees_music?start=1#from=embed ( C'est la partie rouge qui nous intéresse )

Pour Vimeo :
Copiez l'url de la page de la vidéo, et ne gardez que les chiffres après le /.
Exemple :
http://vimeo.com/13085676 ( C'est la partie rouge qui nous intéresse )

Une fois cet identifiant en main, vous allez sur le forum et vous faites :
Pour Youtube :
Code : Tout sélectionner
[youtube]5thgJcPD1CU[/youtube]

Pour Dailymotion :
Code : Tout sélectionner
[dmotion]x2pw5k[/dmotion]

Pour Vimeo :
Code : Tout sélectionner
[vimeo]13085676[/vimeo]



Balise Imageshackslide :
À éviter ! Elle fait lagguer le forum (en plus d'être moche).


Balise mp3 :
Permet d'insérer un plugin de lecture de musique. Il faut un .mp3 hébergé sur le net. Une fois le lien direct sur le morceau, il suffit de mettre le lien entre les balises. Je ne sais pas si d'autres formats fonctionnent.
Utilisation :
Code : Tout sélectionner
[mp3]http://le-lien-vers-le-mp3.mp3[/mp3]

Visualisation :

Podcast




Balise r :
Permet de rayer un élément de texte.
Utilisation :
Code : Tout sélectionner
[r]Mon texte rayé.[/r]

Visualisation : Mon texte rayé.


Balise spoil :
Permet de cacher des éléments. Pratique pour parler de la fin d'un animé sans le dévoiler à tout le monde !
On ne peut pas mettre une balise [ spoil ] dans une autre balise [ spoil ].
Utilisation :
Code : Tout sélectionner
[spoil]Mon texte caché.[/spoil]

Visualisation :
Spoiler: Voir
Mon texte caché.



Sauf indications contraires, toutes les balises s'encapsulent les unes dans les autres.

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 27 Avr 2012, 23:51
par mjeff
merci Seven, très bon tuto, avec des astuces ^^ c'est bien complet !

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 28 Juin 2012, 17:24
par BigBangParty
Bine complet avec des jolies images pour expliquer :)
J'aime bien celle de Corbier, très original

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 28 Juin 2012, 17:28
par Avenger
Tuto très utile et complet, épinglé.

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 12:43
par mjeff
petite remarque, je pense qu'une section Aide et Tutoriels serait bienvenue dans le forum AU car ce n'est pas évident de trouver ce topic de façon logique, ou d'autres tutos disséminés dans les sous forums ^^

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 13:05
par Sevenfold
C'est pas faux :3

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 16:29
par Celser
Seven aurais-tu vu ma sign par le plus grand des hasards ? :D
Sinon merci beaucoup pour le tuto, c'est un trou noir de combler ! :D

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 16:59
par Sevenfold
" PS : Est-ce qu'un topic pourrait être créer, pour expliquer tous les boutons dans les messages, code, list, etc... Ainsi que de mettre des photos sur le forum à partir des fichiers de nos ordinateurs. Merci "

De quels boutons tu parle? Pour le topic pour mettre des images a partir de notre pc (si tu parle des hébergeur ), j'en ferais un ^^

Mais j’attends que Jeff ou un admin fasse si c'est possible une section aide comme sa je posterais dedans.

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 17:01
par Celser
Et bien en fait je me doute de ce à quoi ils doivent servir mais je ne sais pas comment les utiliser... ^^'
Mais y en a je sais vraiment pas à quoi ils servent, flash, deezer, dmotion, etc...

Merci du coup de main !

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 17:03
par Sevenfold
ah sa bah je l'expliquerais dans un tuto aussi si tu veux ^^

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 17:13
par Celser
Merci bien. :)
Car il y a beaucoup de tuto de photoshop, mais ils se perdent dans la masse à force, et pareil pour celui-ci, à force de commenter les nouvelles aides sont "perdus dans la masse"
JE me critique moi-même en disant ça... ^^'
Donc voilà une idée, mais ça sera juste une idée car je saurais pas comment aider -_-. C'est de créer une autre grande section, avec en sous-parties, une qui créerais que des topics de tuto, et un autre sous-forum qui, lui, serait réservé à poser des questions sur ce que nous n'arrivons pas à faire, histoire de compléter la première section.
Pour la sous-partie des tutos, on pourrait même la diviser en genre de tutoriels (par exemple : un sous forum tuto message, un autre concernant les images, ou encore comment compléter son profil, etc...)
Je sais, ça prendra beaucoup de temps à des gens, et à mon avis ce sera les mêmes, et même si je dis ça, ce ne sera pas moi qui ferais le gros du travail loin de là... Je ferais même parti de la deuxième catégorie...

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 30 Juin 2012, 18:06
par Sevenfold
Ne t’inquiète pas on va faire travailler le staff de AU :D

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 26 Juil 2012, 16:58
par JMkamina
Merci pour le tuto video :D ! :Youpi4:

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 21 Août 2012, 22:01
par Zangetssu
Merci, tuto très simple a comprendre et détaillé.

Re: Tutoriel : Comment mettre une image ou une video sur le

MessagePublié: 08 Oct 2012, 10:51
par ReaperCore
Merci pour le tuto youtube, en effet sans savoir qu'il fallait enlever toute la partie http:// etc.. j'aurai cherché encore pas mal de temps..

Re: [Tutoriel] La bonne utilisation des balises

MessagePublié: 03 Mai 2013, 22:03
par Jöül
Grosse mise à jour !


J'ai rajouté le guide d'utilisation de toutes les balises !

Re: [Tutoriel] La bonne utilisation des balises

MessagePublié: 03 Mai 2013, 22:18
par Fibouille
Good job, quelques unes que je connaissais pas, ça fait plaisir :kyahoo:

Re: [Tutoriel] La bonne utilisation des balises

MessagePublié: 03 Mai 2013, 22:41
par mjeff
bon boulot Jöül !

Re: [Tutoriel] La bonne utilisation des balises

MessagePublié: 03 Mai 2013, 22:52
par Sevenfold
GG Jöül !
Merci de l'avoir fait a ma place ^^

*repars dans sa tanière*