Règlement
Viens te présenter!
Liste des élèves
Liste du personnel
Rejoignez l'équipe!
Partenaires
Contact

Lieux RPG
Grande Salle
Bibliothèque
Sabliers Géants
Salles de classe
APEM (Animations)
Galerie des portraits

Lieux RPG
Stade de Quidditch (Chat)
Vestiaires de Quidditch
Jeux et Divertissements

Les Trois Balais
Gazette du Sorcier
Ministère de la magie

Mes Badges
INSCRIPTION
Ma Valise (Profil)
Volière (Messagerie)
Connexion

:: [Tutoriel] BBcode et html - Qu'est ce donc ? ::

 
Poster un nouveau sujet   Répondre au sujet    Poudlard Etudes Magiques Index du Forum ->
->
-> Catégorie [Autre]
Sujet précédent :: Sujet suivant  
Auteur Message
Alysto Mahncen

Serdaigle


Hors ligne

Inscrit le: 05 Juil 2013
Messages: 365
Niveau: 1re année
Serdaigle
MessagePosté le: Dim 17 Nov - 15:59 (2013)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Après le franc succès du tutoriel basé sur la création d'avatar et le bidouillage d'Augustin Aqua (merci d'ailleurs pour ce tutoriel très explicite), je vais moi-même essayer d'aider ce qui de certaines difficultés avec ... la mise en page. 

 
Vous le savez peut être, mais la mise en page sur les forums (et notamment sur xooit ou encore forumactif) se base sur l'usage omniprésent du langage HTML (Hypertext Markup Langage) et, pour vous faciliter la tâche lorsque vous publier sur le forum, par l'usage du BBCode (Bulletin Board Code) 

 
tutoriel   : 
1) Explication de la barre html et BBCode 

 
1) Explication de la barre du html et du BBCode 
Pour ceux qui ne le savent pas encore, le simple fait de pouvoir taper du texte dans cette partie repose sur ce que l'on appelle le langage HTML qui est le langage utilisé pour mettre en forme les pages internet courante. Le domaine d'étude du langage est très vaste est n'est pas accessible à tout public (pour ceux qui par la suite voudrait faire des études en informatique notamment ou alors pour la culture générale
On va donc se concentrer sur la mise en forme de votre texte par l'usage du BBCode. 

 
 
Je pense que vous l'avez tous reconnu : il s'agit de votre barre d'outil avec le BBCode classique 

 
On va donc maintenant voir à quoi chaque petit icône peut bien correspondre : 
~ La première (le T avec le tableau de couleur) correspond à la couleur que vous voulez choisir pour un texte sélectionné. 
Si vous cliquez dessus, une nouvelle fenêtre apparaît et vous n'aurez qu'à sélectionner la couleur dans la palette pour qu'elle soit appliquée à ce texte. 
 

 
Si vous ne parvenez pas à mettre votre texte en couleur, il va falloir utiliser les balises dites html (soit rédigées) 
2 types d'exemple : 
Soit vous entourez votre texte des balises [color=invalid-color:name_english] Votre_texte [/color] (avec name_english : red or blue ...) 
ou soit vous remplacer le name_english par un code couleur prédéfini par le html (car chaque couleur est associé à un code - exemple : #FE0000 pour rouge) 

 
Exemple : (color=red)Salut(/color) ou encore (color=#FE0000)Salut(/color) [veillez à remplacer les ( par des [ sinon ça ne fonctionnera pas] 
Dans cet exemple, le texte sera affiché en rouge 

 
~ la deuxième (le 12px) correspond à la taille de votre texte 
Si vous cliquez sur cette icône, une nouvelle fenêtre apparaît : 
 

 
Vous n'avez qu'à sélectionner le texte que vous souhaitez modifié puis cliquer sur la taille désirée. 

 
Balises : (size=number) Votre_texte (/size) --) number fait référence à la taille que vous souhaitez 

 
~ la troisième icône (aA) fait référence à la police du texte 
Si vous cliquez dessus, une nouvelle fenêtre apparaît :  
 

 
Vous n'aurez qu'à sélectionner la police dans laquelle vous voulez que votre texte soit écrit. 

 
Balises : (font=police) Votre_texte (/font) ----) police renvoie au nom de la police souhaitée 

 
~ les 4 prochains (G I S et B) sont les balises classiques de la mise en forme. 

 
G ---) le texte sélectionné est affiché en gras ---) Balises : (b) Votre_texte (/b) 
I ---) le texte sélectionné est affiché en italique ---) Balises : (i) Votre_texte (/i) 
S ---) le texte sélectionné est affiché en souligné ---) Balises : (u) Votre_texte (/u) 
B ---) le texte sélectionné est affiché en mode barré ---) Balises : (del) Votre_texte (/del)  
 

 
~ les 4 prochaines relèvent plus de la mise en page que de la forme du texte 

 
- La première correspond à un alignement à gauche ---) Balises : (left) Votre_texte (/left) 
- La seconde correspond à un alignement centré (celui utilisé dans ce message) ---) Balises : (center) Votre_texte (/center) 
- La troisième correspond à un alignement à droite ---) Balises : (right) Votre_texte (/right) 
- La quatrième icône correspond à une justification (c'est-à-dire un affiche où le texte prend la ligne complète sans déborder sur la suivante) ---) Balises : (justify) Votre_texte (/justify) 

 
~ Vient ensuite la balise de la citation où vous devez simplement sélectionner le texte et cliquer sur la balise pour que votre texte soit affiché en mode "citation" 

 
Balises : (quote) Votre_texte (/quote) 
 
La balise qui suit celle-ci est la balise "code". Elle ne vous sera pas utile dans la mise en forme de votre texte car elle l'est seulement quand l'on veut partager un code (ensemble de données mises sous forme d'un langage classique et traité par l'ordinateur après compilation). Les codes sont utilisés par les informaticiens pour créer tout ce qui est en relation avec l'ordinateur : Avant que votre programme de jeu ou votre navigateur ne puisse être lancer, il a fallu créer le code source et ces données sous forme de centaines de milliers de ligne)


~ Et voici maintenant les puces (numérotation/liste/...)
Elles servent à ordonner une liste en y ajoutant devant soit des points (la première) ou soit avec des numéros (la seconde)


Pour l'utiliser, il suffit de sélectionner les lignes que vous souhaitez numérotées.
Balises : 
(list) Vos_lignes (/list)
(list=) Vos_lignes (/list) quand il s'agit d'une liste ordonnée


La prochaine balise est la balise permettant de tracer des traits horizontaux sur la ligne sélectionnée (comme je le fais pour séparer mes explications). Il suffit de se placer sur la ligne est de taper : (hr) pour que le trait apparaisse (encore une fois avec des [ et non des (  pour que cela fonctionne).


~ Les 5 prochaines balises sont des balises d'insertion :


La première permet d'ajouter une image via l'URL de celle-ci (l'URL est l'adresse de la page --) URL de google : http://www.google.fr/ )
(Si votre image n'a pas d'URL car elle est stockée en local sur votre ordinateur, vous pouvez toujours l'importer via hostingpics par exemple)
Balises : (img) URL_de_votre_image (/img)


La seconde permet d'ajouter un fichier flash. Je ne pense pas que vous ayez un jour à l'utiliser dans le cas du forum mais, si besoin, envoyer moi un MP car c'est un peu long à expliquer ici.


La troisième permet d'insérer un média comme, par exemple, un fichier son ou une vidéo. Tout ce que vous avez besoin, c'est là-aussi de son url. Certains hébergeur permettent d'incrémenter une adresse URL à vos fichiers locaux (sur vos ordinateurs dans vos documents).
Balises : (media) URL_du_média (/media)
Attention : Vous remarquerez que les balises html et le BBCode ne contiennent jamais d'accent donc media s'écrit de cette manière et non média


La quatrième permet d'insérer un lien, là aussi en fonction de son URL. Elle se distingue cependant dans son fonctionnement car l'on peut affecter un nom au lien hypertexte.
Balises :  (url) URL_du_lien (/url) ou alors (url=URL_du_lien) Le nom que vous souhaitez lui donner (/url)


La dernière vous permet de créer un tableau en définissant d'avance les paramètres. Je vous conseille vivement d'essayer au moins une fois et de venir me voir si vous aviez un quelconque soucis.


En ce qui concerne la partie "autre", J'expliquerai seulement le Spoiler qui reste un incontournable quand l'on veut gagner de la place ou dévoiler certaines informations et les cacher (Spoil) 


Balises : (spoiler=Spoiler) Texte (/spoiler)



Et c'est ainsi que se termine ce petit tutoriel sur l'utilisation des balises HTML et du BBCode
Si vous avez des questions, veillez les poster ici pour que je puisse y répondre en live.


!! Merci !!

 

Hebergeur d'image


Alysto Mahncen

Professeur d'Arithmancie et de Botanique
Gardien de l'équipe de Serdaigle

Revenir en haut
Publicité







MessagePosté le: Dim 17 Nov - 15:59 (2013)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Malo Granade

Poufsouffle


Hors ligne

Inscrit le: 28 Avr 2013
Messages: 1 005
Niveau: 7e année
Poufsouffle
MessagePosté le: Dim 17 Nov - 18:11 (2013)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Ouah merci Alysto !
Ça va me servir énormément ! Sourire

Hebergeur d'image



Merci à Augustin pour mon ensemble !! (Qui date un peu mais que j'aime toujours autant Yes)
Revenir en haut
Alysto Mahncen

Serdaigle


Hors ligne

Inscrit le: 05 Juil 2013
Messages: 365
Niveau: 1re année
Serdaigle
MessagePosté le: Dim 17 Nov - 20:26 (2013)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Ma première visite Sourire De rien, c'est Augustin avec son tutoriel qui m'a donné l'idée puisque j'ai déjà eu pas mal de monde qui me demandait conseil. 
Si tu as encore un soucis avec le BBCode, tu me préviens Sourire 

Hebergeur d'image


Alysto Mahncen

Professeur d'Arithmancie et de Botanique
Gardien de l'équipe de Serdaigle

Revenir en haut
Jupotter

Directrice de Serpentard
Professeur
Farceuse


Hors ligne

Inscrit le: 21 Oct 2013
Messages: 964
Niveau: 7e année
Serpentard
MessagePosté le: Ven 6 Déc - 19:15 (2013)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

merci beaucoup alysto je sens que ce tutoriel va me servir

Hebergeur d'image




merci Hayvenn pour le kit
Revenir en haut
Face.Lightwood

Serdaigle


Hors ligne

Inscrit le: 23 Nov 2013
Messages: 26

MessagePosté le: Sam 7 Déc - 00:08 (2013)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Merci, merci Sourire Je n'arrivais pas à mettre de couleurs.... Merci pour ce topic qui m'est réellement  très utile Très Content

Hebergeur d'image

Face Lightwood, Sourire
Revenir en haut
Lolo

Professeur


Hors ligne

Inscrit le: 04 Aoû 2015
Messages: 1 562
Niveau: 7e année
Gryffondor
MessagePosté le: Sam 8 Aoû - 21:34 (2015)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Je suis d'accord avec Juju Potter ce tutoriel vas aussi me servir.

Hebergeur d'image



Avatar fait par ma marraine du tournois Cinderella
Revenir en haut
Fanny Granger

Gryffondor


Hors ligne

Inscrit le: 28 Déc 2015
Messages: 1 268
Niveau: 7e année
Gryffondor
MessagePosté le: Mer 18 Mai - 21:27 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Ce topic est vraiment intéressant merci beaucoup

Hebergeur d'image


MARY MÉRIDA HOLLY HAYVENN RAVEN LOLO CINDERELLA HANSTYVE Mignon Mignon I love you

De retour Sourire
Revenir en haut
Visiter le site web du posteur
alexis potter

Gryffondor


Hors ligne

Inscrit le: 18 Mai 2016
Messages: 26
Niveau: 1re année
Gryffondor
MessagePosté le: Lun 30 Mai - 18:13 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

comment on fait pour avoir un signature

Hebergeur d'image

alexis potter un grand fan
Revenir en haut
Fanny Granger

Gryffondor


Hors ligne

Inscrit le: 28 Déc 2015
Messages: 1 268
Niveau: 7e année
Gryffondor
MessagePosté le: Lun 30 Mai - 18:19 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Tu va dans mon profil sur le côté et tu as signature tu écris ce que tu veut et tu descends et il y a envoyer tu clique et tu a ta siqnture

Hebergeur d'image


MARY MÉRIDA HOLLY HAYVENN RAVEN LOLO CINDERELLA HANSTYVE Mignon Mignon I love you

De retour Sourire
Revenir en haut
Visiter le site web du posteur
alexis potter

Gryffondor


Hors ligne

Inscrit le: 18 Mai 2016
Messages: 26
Niveau: 1re année
Gryffondor
MessagePosté le: Lun 30 Mai - 18:38 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

je vois la signature mais pas envoyer

Hebergeur d'image

alexis potter un grand fan
Revenir en haut
Fanny Granger

Gryffondor


Hors ligne

Inscrit le: 28 Déc 2015
Messages: 1 268
Niveau: 7e année
Gryffondor
MessagePosté le: Lun 30 Mai - 18:59 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Tout tout tout en ba

Hebergeur d'image


MARY MÉRIDA HOLLY HAYVENN RAVEN LOLO CINDERELLA HANSTYVE Mignon Mignon I love you

De retour Sourire
Revenir en haut
Visiter le site web du posteur
alexis potter

Gryffondor


Hors ligne

Inscrit le: 18 Mai 2016
Messages: 26
Niveau: 1re année
Gryffondor
MessagePosté le: Lun 30 Mai - 19:31 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

dans frofil oui j arive a mettre une phrase mais pas une image

Hebergeur d'image

alexis potter un grand fan
Revenir en haut
Fanny Granger

Gryffondor


Hors ligne

Inscrit le: 28 Déc 2015
Messages: 1 268
Niveau: 7e année
Gryffondor
MessagePosté le: Lun 30 Mai - 20:55 (2016)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ? Répondre en citant

Il faut l'url est pour ça tu télécharge sur un Ordi la photo et tu fait clique gauche tu aura un truc URL tu copie l'url et après dans ta signature tu mets:
[img]tu mets l'url au milieu et tu mets[/hide]
Il faut que se soit tout coller

Hebergeur d'image


MARY MÉRIDA HOLLY HAYVENN RAVEN LOLO CINDERELLA HANSTYVE Mignon Mignon I love you

De retour Sourire
Revenir en haut
Visiter le site web du posteur
Contenu Sponsorisé







MessagePosté le: Aujourd’hui à 00:30 (2017)    Sujet du message: [Tutoriel] BBcode et html - Qu'est ce donc ?

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Poudlard Etudes Magiques Index du Forum ->
->
-> Catégorie [Autre]
Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Portail | Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation

Hebergeur d'image
nom de l'image nom de l'image nom de l'image
Poudlard Etudes Magiques © 2013 - 2017
Forum créé le 17 Février 2013 par Albus Dumbledore - Design par Severus Prince
Toute reproduction en totalité ou en partie est interdite.
Les images, noms et connotations en référence a Harry Potter sont une propriété de la Warner Bros Corporation et de J.K. Rowling.

Traduction par : phpBB-fr.com