Accueil
Gestion du profil
Sujets & Messages
Le règlement
MP & Newsletters
Problèmes & Litiges
Rangs, Groupes & Droits
Connexion et Enregistrement
Comment s'intégrer ?
Questions Courantes
Plan du Forum
Trophées & BlackMail Box
Sujets et Messages
Bienvenue sur la catégorie Sujets et Messages !!
tu trouveras toutes les informations sur la création, la modification des sujets mais aussi sur l'intégration d'images, de liens, de vidéos !
Si tu cherches d'autres trucs et astuces, une section dédiée a été crée sur le forum à cet endroit : Trucs & Astuces . Dans cette section, tu trouveras par exemple des infos sur les TOP-Sites, sur le modèle d'article officiel du forum, sur la toolbar, la page d'accueil etc etc ! (oui en fait j'ai juste la flemme de les ajouter à la FAQ à chaque fois)
Création et Modifications des sujets et messages
Comment puis-je poster un sujet sur le forum ?
Fermer l'onglet
Comment puis-je poster un sujet sur le forum ?
va dans la section du forum dans lequel tu veux créer un nouveau sujet puis cliques sur le bouton "nouveau" !!
tu pourras ensuite taper ton message, n'oublies pas de mettre un titre et ensuite cliques sur "Envoyez" !
Avant de créer un nouveau sujet, il faudra déjà vérifier que celui-ci n'a pas déjà été crée.
Pour cela, fais une recherche préalable !
Comment puis-je poster un sujet sur le forum ?
va dans la section du forum dans lequel tu veux créer un nouveau sujet puis cliques sur le bouton "nouveau" !!
tu pourras ensuite taper ton message, n'oublies pas de mettre un titre et ensuite cliques sur "Envoyez" !
Avant de créer un nouveau sujet, il faudra déjà vérifier que celui-ci n'a pas déjà été crée.
Pour cela, fais une recherche préalable !
Comment répondre à un sujet sur le forum ?
Fermer l'onglet
Comment répondre à un sujet sur le forum ?
Deux possibilités :
- premièrement tout en bas du sujet en question, tu auras un cadre de réponse rapide, tu peux taper ton texte et envoyer
- deuxièmement, cliques sur "répondre", une page se charge, tapes ton message et envoyes !
Comment répondre à un sujet sur le forum ?
Deux possibilités :
- premièrement tout en bas du sujet en question, tu auras un cadre de réponse rapide, tu peux taper ton texte et envoyer
- deuxièmement, cliques sur "répondre", une page se charge, tapes ton message et envoyes !
Comment puis-je éditer ou supprimer un message ?
Fermer l'onglet
Comment puis-je éditer ou supprimer un message ?
Normalement, tu ne pourras éditer ou supprimer que tes propres messages.
Pour éditer ton message (attention, au bout d'un certain temps tu ne pourras plus le faire) il te suffit de cliquer sur "Editer" pour corriger le message souhaité.
Tu ne pourras plus supprimer ton message si quelqu'un à déjà répondu !
Comment puis-je éditer ou supprimer un message ?
Normalement, tu ne pourras éditer ou supprimer que tes propres messages.
Pour éditer ton message (attention, au bout d'un certain temps tu ne pourras plus le faire) il te suffit de cliquer sur "Editer" pour corriger le message souhaité.
Tu ne pourras plus supprimer ton message si quelqu'un à déjà répondu !
Que sont les nouveaux sujets / nouveaux messages?
Fermer l'onglet
Que sont les nouveaux sujets / nouveaux messages?
Sur le forum, de petites images carrées avec écrit "Nouveau" t'annoncent les sujets sans réponse, mais les forums sans nouveau sujet/message! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les nouveaux sujets / nouveaux messages?
Sur le forum, de petites images carrées avec écrit "Nouveau" t'annoncent les sujets sans réponse, mais les forums sans nouveau sujet/message! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les sujets RAS / messages RAS ?
Fermer l'onglet
Que sont les sujets RAS / messages RAS ?
Sur le forum, de petites images carrées avec écrit "RAS" t'annoncent les sujets sans réponse, mais les forums sans nouveau sujet/message! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les sujets RAS / messages RAS ?
Sur le forum, de petites images carrées avec écrit "RAS" t'annoncent les sujets sans réponse, mais les forums sans nouveau sujet/message! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les sujets verrouillés / messages verrouillés ?
Fermer l'onglet
Que sont les sujets verrouillés / messages verrouillés ?
Sur le forum, de petites images carrées avec écrit "Verrouillé" t'annoncent les sujets verrouillés dont tu n'as plus accès, mais les forums verrouillés! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les sujets verrouillés / messages verrouillés ?
Sur le forum, de petites images carrées avec écrit "Verrouillé" t'annoncent les sujets verrouillés dont tu n'as plus accès, mais les forums verrouillés! (les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les messages : Annonces ?
Fermer l'onglet
Que sont les messages : Annonces ?
Sur le forum, de petites images carrées avec écrit "Annonce"(avec nouveau ou non) t'annoncent les sujets importants. Les annonces seront sur toutes les pages des forum dans lesquelles elles ont été postées (les images des annonces sont un peu plus grandes que celles des sujets/messages).
Sur ce forum, le rappel des règles se fera principalement par "Annonces".
Que sont les messages : Annonces ?
Sur le forum, de petites images carrées avec écrit "Annonce"(avec nouveau ou non) t'annoncent les sujets importants. Les annonces seront sur toutes les pages des forum dans lesquelles elles ont été postées (les images des annonces sont un peu plus grandes que celles des sujets/messages).
Sur ce forum, le rappel des règles se fera principalement par "Annonces".
Que sont les messages : Note ?
Fermer l'onglet
Que sont les messages : Note ?
Sur le forum, de petites images carrées avec écrit "Note"(avec nouveau ou non) t'annoncent les sujets importants. (les images des notes sont un peu plus grandes que celles des sujets/messages).
Sur ce forum, les sujets importants sont sous forme de "note".
Que sont les messages : Note ?
Sur le forum, de petites images carrées avec écrit "Note"(avec nouveau ou non) t'annoncent les sujets importants. (les images des notes sont un peu plus grandes que celles des sujets/messages).
Sur ce forum, les sujets importants sont sous forme de "note".
Que sont les messages : Hyper important ?
Fermer l'onglet
Que sont les messages : Hyper important ?
Sur le forum, de petites images carrées avec écrit "Hyper important" t'annoncent les sujets très importants, lorsqu'il y a un bug ou un gros soucis mais aussi une annonce très importante pour la vie de la communauté !
Ces sujets se répéterons sur tous les forums !(les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Que sont les messages : Hyper important ?
Sur le forum, de petites images carrées avec écrit "Hyper important" t'annoncent les sujets très importants, lorsqu'il y a un bug ou un gros soucis mais aussi une annonce très importante pour la vie de la communauté !
Ces sujets se répéterons sur tous les forums !(les images des sous-forums ou des catégories sont un peu plus grandes que celles des sujets/messages).
Règles des sujets et messages
Règles de base sur les sujets/messages du forum !
Fermer l'onglet
tu pourras retrouver les points suivants dans le règlement mais il est toujours bon de le rappeler !
- Fais attention à ton orthographe : C'est à dire pas de SMS, pas trop d'abréviations (je sais que c'est difficile, au lycée et à la fac on t'apprend à écrire vite et tout).
Essais de te corriger un peu. Utilises une grammaire à peu près correcte, une ponctuation etc etc.
Bref ce n'est pas parce que tu te comprends que tout le monde le pourra donc un petit effort !
Bon, ne t'inquiètes pas, tout le monde fait des fautes, on pourra te dire de faire attention mais on va pas te bannir pour ça !
- N'écris pas en majuscule, choisis des couleurs lisibles... : Oui écrire en majuscule sur ce forum signifie "CRIER" hors crier est assez agressif... Ici nous voulons juste nous amuser pas tomber dans un brouhaha.
De la même façon attention à tes couleurs de texte, police d'écriture, taille de police etc etc, il faut que ça reste lisible !!
- N'insultes personne : Oui comme dit juste au dessus, nous sommes là pour nous amuser donc pas d'insultes ni sur le forum ni en MP (messages perso). Dans le même esprit : les propos/images à caractères racistes, pédophiles, pornographiques, homophobes, antisémites, xénophobes, nazis, contenant des allusions à la mort, incitant au suicide ou contenant des propos discriminatoires quels qu'ils soient, sont exclus!
Des liens vers des sites / forum (autre) proposant ce genre de choses sont évidement interdit aussi.
Encore des trucs à éviter : parler de piratage, de téléchargement illégale
Sois poli et respectueux et évites les conflits.
Et si tu as un problème avec un membre, parles-en aux modérateurs/admins
Faire attention aux sujets, messages... :
- Recherche : Avant de créer un nouveau sujet, il faudra déjà vérifier que celui-ci n'a pas déjà été crée.
Pour cela, fais une recherche préalable et vérifies dans les topics " liste des sujets " avant d'en créer un.
- Doublon : Si tu as un doute ou si tu as créé un sujet " doublon " parles en a un modérateur / administrateur
- Endroit : Choisis bien l'endroit où tu postes ton sujet. Les sujets qui n'ont pas leur place dans le sous-forum seront déplacés. Les messages qui n'ont pas leur place dans un sujet seront supprimés.
- Titre : Choisis un titre clair et concis : un " aides-moi " n'est pas un titre clair et concis.
- Les images : Les images sont à limiter, notamment les grosses images qui pourraient déformer le forum. Si tu veux mettre une image de plus de 600px de large, tu peux la mettre en spoiler ou mettre des liens (attention pas de liens abusifs)
- Les smileys : Ne pas mettre plus de 5 smileys dans un message !
- Pas de doubles posts Tu as une option pour éditer ton message !
Mais pour certains jeux, des galeries... tu peux faire des doubles posts !
Et tu peux relancer un sujet si personne n'y a répondu dans les 48h. - Le flood : Le flood (les messages inutiles qui nuisent a la lisibilité d'un sujet) est interdit sauf dans la partie concernée.
Cela dénature les topics donc s'il te plait ne floode pas ou pas trop !!!
tu pourras retrouver les points suivants dans le règlement mais il est toujours bon de le rappeler !
- Fais attention à ton orthographe : C'est à dire pas de SMS, pas trop d'abréviations (je sais que c'est difficile, au lycée et à la fac on t'apprend à écrire vite et tout).
Essais de te corriger un peu. Utilises une grammaire à peu près correcte, une ponctuation etc etc.
Bref ce n'est pas parce que tu te comprends que tout le monde le pourra donc un petit effort !
Bon, ne t'inquiètes pas, tout le monde fait des fautes, on pourra te dire de faire attention mais on va pas te bannir pour ça !
- N'écris pas en majuscule, choisis des couleurs lisibles... : Oui écrire en majuscule sur ce forum signifie "CRIER" hors crier est assez agressif... Ici nous voulons juste nous amuser pas tomber dans un brouhaha.
De la même façon attention à tes couleurs de texte, police d'écriture, taille de police etc etc, il faut que ça reste lisible !!
- N'insultes personne : Oui comme dit juste au dessus, nous sommes là pour nous amuser donc pas d'insultes ni sur le forum ni en MP (messages perso). Dans le même esprit : les propos/images à caractères racistes, pédophiles, pornographiques, homophobes, antisémites, xénophobes, nazis, contenant des allusions à la mort, incitant au suicide ou contenant des propos discriminatoires quels qu'ils soient, sont exclus!
Des liens vers des sites / forum (autre) proposant ce genre de choses sont évidement interdit aussi.
Encore des trucs à éviter : parler de piratage, de téléchargement illégale
Sois poli et respectueux et évites les conflits.
Et si tu as un problème avec un membre, parles-en aux modérateurs/admins
Faire attention aux sujets, messages... :
- Recherche : Avant de créer un nouveau sujet, il faudra déjà vérifier que celui-ci n'a pas déjà été crée.
Pour cela, fais une recherche préalable et vérifies dans les topics " liste des sujets " avant d'en créer un.
- Doublon : Si tu as un doute ou si tu as créé un sujet " doublon " parles en a un modérateur / administrateur
- Endroit : Choisis bien l'endroit où tu postes ton sujet. Les sujets qui n'ont pas leur place dans le sous-forum seront déplacés. Les messages qui n'ont pas leur place dans un sujet seront supprimés.
- Titre : Choisis un titre clair et concis : un " aides-moi " n'est pas un titre clair et concis.
- Les images : Les images sont à limiter, notamment les grosses images qui pourraient déformer le forum. Si tu veux mettre une image de plus de 600px de large, tu peux la mettre en spoiler ou mettre des liens (attention pas de liens abusifs)
- Les smileys : Ne pas mettre plus de 5 smileys dans un message !
- Pas de doubles posts Tu as une option pour éditer ton message !
Mais pour certains jeux, des galeries... tu peux faire des doubles posts !
Et tu peux relancer un sujet si personne n'y a répondu dans les 48h. - Le flood : Le flood (les messages inutiles qui nuisent a la lisibilité d'un sujet) est interdit sauf dans la partie concernée.
Cela dénature les topics donc s'il te plait ne floode pas ou pas trop !!!
Règles spécifiques aux fiches !
Fermer l'onglet
Règles spécifiques aux fiches !
Sur ce forum, tu pourras trouver deux sections avec des fiches :
- la section "# L'esprit Geek" où tu pourras parler de tout et de rien.
- la section "# L'esprit Otaku" reservé à la japanimation et associée
Avant de créer une fiche, merci de vérifier si :
1 ) cette fiche n'est pas présente : dans ce cas crées un suje en suivant le modèle des fiches et les règles des fiches
2) cette fiche est présente mais qu'il n'y a ni avis, ni synopsis :
dans ce cas crées en un nouveau en recopiant les infos données!
3) cette fiche est pas dans la liste des fiches réservées !!! bah faut pas la faire :p
/!\ fais une petite recherche sur le forum en utilisant les outils de recherche /!\
Ensuite suivre le modèle indiqué dans chaque section !
Règles spécifiques aux fiches !
Sur ce forum, tu pourras trouver deux sections avec des fiches :
- la section "# L'esprit Geek" où tu pourras parler de tout et de rien.
- la section "# L'esprit Otaku" reservé à la japanimation et associée
Avant de créer une fiche, merci de vérifier si :
1 ) cette fiche n'est pas présente : dans ce cas crées un suje en suivant le modèle des fiches et les règles des fiches
2) cette fiche est présente mais qu'il n'y a ni avis, ni synopsis :
dans ce cas crées en un nouveau en recopiant les infos données!
3) cette fiche est pas dans la liste des fiches réservées !!! bah faut pas la faire :p
/!\ fais une petite recherche sur le forum en utilisant les outils de recherche /!\
Ensuite suivre le modèle indiqué dans chaque section !
Règles spécifiques aux jeux à flood & discussions !
Fermer l'onglet
Règles spécifiques aux jeux à flood & discussions !
Pour les discussions, tu devras utiliser le modèle indiqué dans chaque section !
Règles spécifiques aux jeux à flood & discussions !
Pour les discussions, tu devras utiliser le modèle indiqué dans chaque section !
Règles spécifiques aux galeries !
Fermer l'onglet
Règles spécifiques aux galeries !
Pour les galeries, tu devras utiliser le modèle indiqué dans la section : avec un tableau comprenant 4 rangées de 5 images soit 20 images maximum par messages. Bien entendu, il faut mettre des miniatures !!
Tu peux mettre une image taille réelle en haut du sujet si tu le souhaites !
Les doubles posts sont autorisés pour les galeries mais juste pour ceux qui rajoutent 20 images par sujet !!
Règles spécifiques aux galeries !
Pour les galeries, tu devras utiliser le modèle indiqué dans la section : avec un tableau comprenant 4 rangées de 5 images soit 20 images maximum par messages. Bien entendu, il faut mettre des miniatures !!
Tu peux mettre une image taille réelle en haut du sujet si tu le souhaites !
Les doubles posts sont autorisés pour les galeries mais juste pour ceux qui rajoutent 20 images par sujet !!
Intégration d'images, de liens, de vidéos...
Comment intégrer une image ?
Fermer l'onglet
Comment intégrer une image ?
Voici les informations sur les images :)
1 ) la taille et la quantité d'image :
Les images sont à limiter, notamment les grosses images qui pourraient déformer le forum.
Si tu veux mettre une image de plus de 600px de large, tu peux les mettre en spoiler ou mettre des liens (attention pas de liens abusifs)
Pour les fiches : 3 images maximum taille 600px, ensuite Mets des miniatures !
Pour les galeries : 25 miniatures maximum par message
2) l'hébergement des images :
Nous exigeons que toute les images soient réuploadée avant d'être postées sur le forum !
il est interdit de prendre une image sur un site et de la poster comme ça, nous n'aimons pas le hotlinking !
voici quelques sites :
http://www.servimg.com
http://imageshack.us
http://www.casimages.com/
3) pour ceux qui utilisent l'hébergeur d'image interne au forum :
cliques sur ce bouton :
> une image reprise sur le net ?
Il suffit de copier l'url de l'image, cliquer sur l'icône de l'hébergeur d'image, cliquer sur "url" copier l'url et choisir le redimensionnement de l'image (640px ou 320px) et cliquer sur "Envoyer" ! Ensuite, tu récupères le deuxième lien "Image" et tu le copies dans la fenêtre de l'éditeur de texte !!
> une image de ton pc ?
Il suffit de choisir le fichier, redimensionner l'image et cliquer sur "Envoyer" ! Ensuite, tu récupères le deuxième lien "Image" et tu le copies dans la fenêtre de l'éditeur de texte !!
4) comment mettre une image et comment fait-on pour qu'elle s'affiche :
Soit tu copies l'url donnée par ton hebergeur d'image en version forum,
Soit tu copies ton lien et tu ajoutes les "[img]" avant et "[/img]" apres
Soit tu cliques sur cette icone :
n'oublies pas qu'en cas de soucis tu peux demander !!
Comment intégrer une image ?
Voici les informations sur les images :)
1 ) la taille et la quantité d'image :
Les images sont à limiter, notamment les grosses images qui pourraient déformer le forum.
Si tu veux mettre une image de plus de 600px de large, tu peux les mettre en spoiler ou mettre des liens (attention pas de liens abusifs)
Pour les fiches : 3 images maximum taille 600px, ensuite Mets des miniatures !
Pour les galeries : 25 miniatures maximum par message
2) l'hébergement des images :
Nous exigeons que toute les images soient réuploadée avant d'être postées sur le forum !
il est interdit de prendre une image sur un site et de la poster comme ça, nous n'aimons pas le hotlinking !
voici quelques sites :
http://www.servimg.com
http://imageshack.us
http://www.casimages.com/
3) pour ceux qui utilisent l'hébergeur d'image interne au forum :
cliques sur ce bouton :
> une image reprise sur le net ?
Il suffit de copier l'url de l'image, cliquer sur l'icône de l'hébergeur d'image, cliquer sur "url" copier l'url et choisir le redimensionnement de l'image (640px ou 320px) et cliquer sur "Envoyer" ! Ensuite, tu récupères le deuxième lien "Image" et tu le copies dans la fenêtre de l'éditeur de texte !!
> une image de ton pc ?
Il suffit de choisir le fichier, redimensionner l'image et cliquer sur "Envoyer" ! Ensuite, tu récupères le deuxième lien "Image" et tu le copies dans la fenêtre de l'éditeur de texte !!
4) comment mettre une image et comment fait-on pour qu'elle s'affiche :
Soit tu copies l'url donnée par ton hebergeur d'image en version forum,
Soit tu copies ton lien et tu ajoutes les "[img]" avant et "[/img]" apres
Soit tu cliques sur cette icone :
n'oublies pas qu'en cas de soucis tu peux demander !!
Comment intégrer un lien ?
Fermer l'onglet
Comment intégrer un lien ?
Tu as plusieurs méthodes pour insérer des liens !
1) Un lien sur un mot ou une phrase
Pour accèder au blog par exemple, on va cliquer sur les mots "Accèder au blog !" :
[url=https://www.anb.geek-otaku-news.com]Accèder au blog ![/url]
Tu remarqueras que le lien ouvre une nouvelle fenêtre, l'utilisateur peut donc continuer à parcourir les forums s'il le souhaite.
2) Mettre juste le lien entre balise
Pour accèder au blog par exemple, on va cliquer sur "https://www.anb.geek-otaku-news.com" :
[url]https://www.anb.geek-otaku-news.com[/url]
3) Utiliser la fonctionnalité appelé 'Magic Links'
Juste copier l'url en question !! par exemple pour le blog : https://www.anb.geek-otaku-news.com
Note : Une sécurité contre les spammeurs a été mis en place !
Pour pouvoir mettre des liens, une seule solution :) attendre 7 jours et tout fonctionnera !!
Comment intégrer un lien ?
Tu as plusieurs méthodes pour insérer des liens !
1) Un lien sur un mot ou une phrase
Pour accèder au blog par exemple, on va cliquer sur les mots "Accèder au blog !" :
[url=https://www.anb.geek-otaku-news.com]Accèder au blog ![/url]
Tu remarqueras que le lien ouvre une nouvelle fenêtre, l'utilisateur peut donc continuer à parcourir les forums s'il le souhaite.
2) Mettre juste le lien entre balise
Pour accèder au blog par exemple, on va cliquer sur "https://www.anb.geek-otaku-news.com" :
[url]https://www.anb.geek-otaku-news.com[/url]
3) Utiliser la fonctionnalité appelé 'Magic Links'
Juste copier l'url en question !! par exemple pour le blog : https://www.anb.geek-otaku-news.com
Note : Une sécurité contre les spammeurs a été mis en place !
Pour pouvoir mettre des liens, une seule solution :) attendre 7 jours et tout fonctionnera !!
Comment intégrer une vidéo ?
Fermer l'onglet
Comment intégrer une vidéo ou une animation flash ?
Ajouter une animation flash à un message
tu disposes de deux méthodes pour insérer une animation flash dans ton message.
1) le BBcode flash: [flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/flash]
2) le BBcode embed-flash : [embed-flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/embed-flash]
N'oublies pas indiquer la largeur puis la hauteur de l'animation flash entre les parenthèses de la balise BBcode utilisée.
Ajouter une vidéo à un message
tu peux poster dans tes messages des vidéos que tu rencontres sur l'un de ces deux sites :
1) Youtube.
tu devras copier le code se trouvant dans le champ Embed et procéder ainsi : [youtube]code - Embed[/youtube]
2) Dailymotion.
tu devras copier le code se trouvant dans le champ Lecteur Exportable et procéder ainsi : [dailymotion]code - lecteur Exportable[/dailymotion]
N'oublies pas de copier le code entre les deux balises bbcodes correspondant à l'hébergeur que tu as choisi.
Comment intégrer une vidéo ou une animation flash ?
Ajouter une animation flash à un message
tu disposes de deux méthodes pour insérer une animation flash dans ton message.
1) le BBcode flash: [flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/flash]
2) le BBcode embed-flash : [embed-flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/embed-flash]
N'oublies pas indiquer la largeur puis la hauteur de l'animation flash entre les parenthèses de la balise BBcode utilisée.
Ajouter une vidéo à un message
tu peux poster dans tes messages des vidéos que tu rencontres sur l'un de ces deux sites :
1) Youtube.
tu devras copier le code se trouvant dans le champ Embed et procéder ainsi : [youtube]code - Embed[/youtube]
2) Dailymotion.
tu devras copier le code se trouvant dans le champ Lecteur Exportable et procéder ainsi : [dailymotion]code - lecteur Exportable[/dailymotion]
N'oublies pas de copier le code entre les deux balises bbcodes correspondant à l'hébergeur que tu as choisi.
Les sondages
Comment puis-je créer un sondage ?
Fermer l'onglet
Comment puis-je créer un sondage ?
Lorsque tu postez un nouveau sujet (ou éditez le premier message d'un sujet, si t'en as le droit) tu devriez apercevoir une partie "Ajouter un sondage" dans le formulaire en dessous de la partie "Poster un nouveau sujet" (si tu ne le voyez pas, c'est que tu n'as probablement pas le droit de créer des sondages).
tu devras entrer un titre pour le sondage et au moins deux options (pour entrer la liste de choix, il tu suffit de taper les choix en les séparant par un saut de ligne, tu peux entrer 20 choix au maximum. tu peux également définir une date limite pour le sondage, 0 est un sondage infini.).
Comment puis-je créer un sondage ?
Lorsque tu postez un nouveau sujet (ou éditez le premier message d'un sujet, si t'en as le droit) tu devriez apercevoir une partie "Ajouter un sondage" dans le formulaire en dessous de la partie "Poster un nouveau sujet" (si tu ne le voyez pas, c'est que tu n'as probablement pas le droit de créer des sondages).
tu devras entrer un titre pour le sondage et au moins deux options (pour entrer la liste de choix, il tu suffit de taper les choix en les séparant par un saut de ligne, tu peux entrer 20 choix au maximum. tu peux également définir une date limite pour le sondage, 0 est un sondage infini.).
Pourquoi ne puis-je pas voter dans un sondage ?
Fermer l'onglet
Pourquoi ne puis-je pas voter dans un sondage ?
Seuls les utilisateurs enregistrés peuvent voter dans un sondage (afin d'éviter le trucage des résultats). Si tu tu es enregistrés et que tu ne peux toujours pas voter, alors tu n'as probablement pas les droits d'accès appropriés.
Pourquoi ne puis-je pas voter dans un sondage ?
Seuls les utilisateurs enregistrés peuvent voter dans un sondage (afin d'éviter le trucage des résultats). Si tu tu es enregistrés et que tu ne peux toujours pas voter, alors tu n'as probablement pas les droits d'accès appropriés.
Comment puis-je éditer ou supprimer un sondage ?
Fermer l'onglet
Comment puis-je éditer ou supprimer un sondage ?
Comme pour les messages, les sondages peuvent uniquement être édités par le posteur d'origine, un modérateur ou un administrateur. Pour éditer un sondage, cliques sur le bouton 'Editer' du premier message du sujet (il a toujours le sondage associé avec lui). Si personne n'a encore voté, tu peux alors supprimer le sondage ou éditer n'importe quelle option du sondage, par contre, si une personne a déjà voté, seuls les modérateurs et administrateurs pourront l'éditer ou le supprimer. Ceci pour éviter aux gens de truquer les sondages en modifiant les options au milieu de la durée du sondage.
Comment puis-je éditer ou supprimer un sondage ?
Comme pour les messages, les sondages peuvent uniquement être édités par le posteur d'origine, un modérateur ou un administrateur. Pour éditer un sondage, cliques sur le bouton 'Editer' du premier message du sujet (il a toujours le sondage associé avec lui). Si personne n'a encore voté, tu peux alors supprimer le sondage ou éditer n'importe quelle option du sondage, par contre, si une personne a déjà voté, seuls les modérateurs et administrateurs pourront l'éditer ou le supprimer. Ceci pour éviter aux gens de truquer les sondages en modifiant les options au milieu de la durée du sondage.
BBCodes, HTML, CSS : "Décorer" un message
Qu'est-ce que le BBCode ?
Fermer l'onglet
Qu'est-ce que le BBCode ?
Le BBCode est une implémentation spéciale du HTML, l'activation de l'utilisation du BBCode est déterminée par l'administrateur (tu peux aussi le désactiver sur un message en particulier lors de sa composition). Le BBCode en lui-même est similaire au style du HTML, les balises sont contenues dans des crochets [ et ] à la place de < et >, et offrent un meilleur contrôle sur la manière dont quelque chose doit être affichée. Pour plus d'informations sur le BBCode, va voir le guide, accessible depuis le formulaire de publication.
Memento des balises BBCode [pour ceux qui veulent utiliser les balises BBCodes]
- Mise en forme du Texte -
- Créer du texte en gras, italique, souligné et barré
Le BBCode comprend des balises qui te permettent de changer rapidement le style de ton texte. Cela se réalise des manières suivantes :
Pour rendre une partie de texte en gras: [b]Salut[/b]
Pour souligner un texte: [u]Bonjour[/u]
Pour mettre un texte en italique: [i]Super![/i]
Pour barrer un texte: [strike]test[/strike]
- Changer la taille, la couleur ou la police du texte
Pour changer la couleur, la taille ou la police de ton texte, les balises suivantes peuvent êtres utilisées (ayez en tête que le rendement du texte dépendra de ton navigateur internet et de ton système d'exploitation):
Pour changer la couleur de ton texte, tu peux spécifier soit un nom de couleur reconnu (ex: red, blue, yellow, etc.), ou soit un code couleur hexadecimal (ex: #FFFFFF, #000000): [color=red]Couleur rouge (red)[/color] ou [color=#FF0000]Couleur rouge (#FF0000)[/color]
Pour changer la taille de ton texte se réalise, tu devras spécifier la taille du texte en pixels, de 1 (tellement petit que tu le verras pas) jusqu'à 29 (très grand): [size=9]PETIT[/size] ou [size=24]ENORME[/size]
Pour changer la police, tu devras spécifier une police reconnue (ex: Verdana, Arial) si un utilisateur ne dispose pas de cette police une par défaut lui sera affiché : [font=Arial]Police Arial[/font] ou [font=Comic Sans Ms]Police Comic Sans Ms[/font]
- Puis-je combiner les balises de mise en forme ?
Oui, bien sûr que tu peux, par exemple pour attirer l'attention de quelqu'un, tu peux écrire: [size=18][color=red][b]Regardes MOI ![/b][/color][/size]
Néanmoins, nous ne tu recommandons pas d'écrire beaucoup de texte comme ci-dessus ! Rappelez-tu que c'est à tu de t'assurer de fermer les balises correctement. Par exemple, ce qui suit est incorrect:[b][u]Ceci est incorrect[/b][/u]
La forme qui convient est : [b][u]Ceci est correct[/u][/b]
- Citation et texte à pas-fixe -
Citation dans les réponses
Il y a deux méthodes pour citer un texte, avec ou sans référence.
L'exemple de la référence, pour citer un texte écrit par M. Dupont, tu devras entrer:Code:[quote="M. Dupont"]Le texte écrit par M. Dupont devras être placé ici[/quote]
Rappelez-tu que tu devras inclure les guillemets "" autour de la référence que tu citez, ils ne sont pas optionnels.
La seconde méthode te permet de citer quelque chose sans faire référence à l'auteur. Pour l'utiliser :[quote]Citation sans référence[/quote]
Code ou police à pas-fixe
Si tu veux afficher des lignes de code (HTML ou autres) ou toute chose qui nécessite une police à pas-fixe (exemple avec la police "Courrier"), tu devras Utilises le bbcode suivant : [code]echo "Ceci est du code";[/code]
C'est exactement ce que nous utilisons dans cette aide pour tu montrer tous les bbcodes que tu peux Utilises.
- Création de Listes -
Créer une liste non-ordonnée
Une liste non-ordonnée produit une liste dont les entrées sont les unes en-dessous des autres et indentées avec une puce.
Pour créer une liste non-ordonnée, Utilises :[list][*]Rouge[*]Bleu[*]Jaune[/list]
Créer une liste ordonnée
Le second type de liste tu donne le contrôle sur ce qui va être affiché avant chaque entrée. Pour créer une liste ordonnée, deux possibilités s'offre à tu :
Une liste numérotée : [list=1][*]Faire les magasins[*]Acheter un nouvel ordinateur[*]Injurier son ordinateur lorsqu'il plante[/list]
Une liste alphabétique :[list=a][*]La première réponse possible[*]La seconde réponse possible[*]La troisième réponse possible[/list]
- Créer un lien vers un autre site -
Le BBCode supporte plusieurs méthodes pour créer des liens, plus connus sous le sigle URLs.
Première méthode, par exemple pour créer un lien vers forumactif.com tu devras utiliser : [url=http://www.forumactif.com/]Visitez forumactif.com ![/url]
tu remarquerez que le lien ouvre une nouvelle fenêtre, l'utilisateur peut donc continuer à parcourir les forums s'il le souhaite.
Deuxième méthode, si tu veux que le lien affiche directement l'URL :[url]http://www.forumactif.com/[/url]
Troisième méthode, ce forum possède une fonctionnalité appelé 'Magic Links', celle-ci convertira automatiquement une URL en un lien cliquable sans que t'ayez à insérer une balise BBCode ou http://. : www.forumactif.com
- Affichage d'images dans les messages -
Le BBCode inclut une balise pour incorporer des images à tes messages. Deux importants points à retenir lors de l'utilisation de cette balise sont que premièrement, beaucoup d'utilisateurs n'apprécient guères un trop plein d'images dans un message et deuxièment l'image que tu veux afficher doit déjà être disponible sur internet (elle ne peut pas seulement exister sur ton ordinateur par exemple, à moins que ton ordinateur soit lui-même un serveur internet !). tu peux héberger gratuitement tes images sur Internet grâce aux hébergeurs d'images tel que www.servimg.com.
Pour afficher une image, tu devras procéder comme ceci : [img]http://illiweb.com/fa/i/forumactif.png[/img]
tu peux placer une image dans un lien si tu le souhaites (c'est à tu de t'assurer que l'ordre des balises d'ouverture et de fermeture est correct), par exemple: [url=http://www.forumactif.com/][img]http://illiweb.com/fa/i/forumactif.png[/img][/url]
- Positionnement du texte -
Quatre possibilités de positionnements tu sont proposés :
L'alignement à gauche : [left]Phrase alignée à gauche[/left]
Le centrage :[center]Phrase centrée[/center]
L'alignement à droite : [right]Phrase alignée à droite[/right]
La justification :[justify]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac tortor eu dolor mollis malesuada. Nam arcu dui, cursus a, ullamcorper ut, fringilla nec, velit. Duis tempor arcu eu orci. Ut vehicula massa eu est. Sed ac odio. Integer dictum eros. Etiam facilisis sem non lacus. Donec volutpat ligula ac est. Aliquam erat volutpat. Pellentesque justo tellus, porta et, interdum et, consequat sit amet, eros.[/justify]
- Insérer des médias dans les messages -
Ajouter une animation flash à un message
Tu disposes de deux méthodes pour insérer une animation flash dans ton message.
Première méthode avec le BBcode flash: [flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/flash]
Deuxièment méthode avec le BBcode embed-flash : [embed-flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/embed-flash]
N'oublies pas indiquer la largeur puis la hauteur de l'animation flash entre les parenthèses de la balise BBcode utilisée.
Ajouter une vidéo à un message
Tu peux poster dans tes messages des vidéos que tu rencontres sur l'un de ces deux sites :
Le premier site est Youtube. tu devras copier le code se trouvant dans le champ Embed et procéder ainsi : [youtube]code - Embed[/youtube]
Le deuxièment site est Dailymotion. tu devras copier le code se trouvant dans le champ Lecteur Exportable et procéder ainsi : [dailymotion]code - lecteur Exportable[/dailymotion]
N'oublies pas de copier le code entre les deux balises bbcodes correspondant à l'hébergeur que tu as choisi.
- Création de tableaux -
Créer un tableau dans un message
Le BBCode pour insérer un tableau dans un message est identique aux balises utilisées en HTML. Pour créer un tableau, tu devras commencer par définir un tableau 'table' puis lui insérer une ligne 'tr'. Cette ligne peut contenir une ou plusieurs cellules 'td', de même qu'un tableau peut contenir plusieurs lignes 'tr'.
Par exemple, pour créer un tableau de deux lignes et de trois colonnes, tu devras procéder ainsi : [table] [tr][td] Ligne 1 - Cellule 1 [/td] [td] Ligne 1 - Cellule 2 [/td] [td] Ligne 1 - Cellule 3 [/td][/tr] [tr][td] Ligne 2 - Cellule 1 [/td] [td] Ligne 2 - Cellule 2 [/td] [td] Ligne 2 - Cellule 3 [/td][/tr][/table]
tu peux également rajouter des arguments dans le BBcode 'table'. Ces derniers sont identiques à ceux utiliser pour le HTML. tu peux par exemple ajouter un contour au tableau ci dessus grâce à l'attribut 'border'. [table border=1] [tr][td] Ligne 1 - Cellule 1 [/td] [td] Ligne 1 - Cellule 2 [/td] [td] Ligne 1 - Cellule 3 [/td][/tr] [tr][td] Ligne 2 - Cellule 1 [/td] [td] Ligne 2 - Cellule 2 [/td] [td] Ligne 2 - Cellule 3 [/td][/tr][/table]
D'autres attributs disponibles sont par exemple: cellspacing, cellpadding, width, etc.
Les tableaux sont à manipuler avec précaution, veilles à bien respecter l'ouverture puis la fermeture des BBcodes. Si une erreur d'ouverture ou fermeture est commise, tu risqueras de ne pas obtenir ce que tu souhaites.
- Défilement d'un message -
Faire défiler un message horizontalement
Si tu désires faire défiler un texte horizontalement,tu devras utiliser le BBcode suivant : [scroll]Mon message[/scroll]
Faire défiler un message verticalement
La deuxième façon de faire défiler un texte est verticalement grâce au BBcode suivant : [updown]Mon message[/updown]
- BBcodes d'apparence -
Insérer une ligne
Si tu souhaites aérer ton message en y insérant des lignes, tu peux utiliser ce BBcode : Mon premier message[hr]Mon deuxième message
Mettre en indice ou en exposant
Si tu souhaites mettre du texte en indice ou exposant (utile pour les maths), deux BBcodes tu sont proposés :
Première méthode, pour mettre en indice :x[sub]a+b[/sub]
Deuxième méthode, mettre en exposant : 2[sup]ème[/sup] jour
- BBcodes d'effets -
Quatre BBcodes produisant des effets sur les messages sont à ta disposition. Néanmoins, ces BBcodes ne sont compatibles que sous Internet Explorer avec un forum en version phpBB2.
- La première est une effet miroir vertical (symétrie verticale) sur le texte :[flipv]Effet miroir vertical[/flipv]
- La deuxième est un effet miroir horizontal (symétrie horizontale) sur ton message : [fliph]Effet miroir horizontal[/fliph]
- Si tu souhaites un effet flou sur ton message, tu peux utiliser ce BBcode :[blur]Message flou[/blur]
- Le dernier BBcode d'effet est celui du dégradé sous la forme de : [fade]Effet de dégradé[/fade]
- Divers BBcodes -
Obtenir un nombre aléatoire
Si tu désires obtenir un nombre aléatoire selon un intervalle, tu peux utiliser le BBcode suivant :
Premier cas d'utilisation, l'intervalle est spécifié au minimum et maximum : [rand]50,100[/rand]
Deuxième cas d'utilisation, l'intervalle est spécifié au maximum : [rand]50[/rand]
- Cacher ou masquer du texte -
Cacher du texte :
Utilises les balises : [hide][/hide]
Note: le texte sera caché pour les personnes qui n'ont pas posté dans le sujet.
En revanche, les administrateurs et les modérateurs verront le texte caché sans avoir à poster dans le sujet.
Masquer du contenu :
Utilises les balises : [spoiler][/spoiler]
Tu peux aussi ajouter un "titre" aux spoiler en écrivant : [spoiler="titre"][/spoiler]
Qu'est-ce que le BBCode ?
Le BBCode est une implémentation spéciale du HTML, l'activation de l'utilisation du BBCode est déterminée par l'administrateur (tu peux aussi le désactiver sur un message en particulier lors de sa composition). Le BBCode en lui-même est similaire au style du HTML, les balises sont contenues dans des crochets [ et ] à la place de < et >, et offrent un meilleur contrôle sur la manière dont quelque chose doit être affichée. Pour plus d'informations sur le BBCode, va voir le guide, accessible depuis le formulaire de publication.
Memento des balises BBCode [pour ceux qui veulent utiliser les balises BBCodes]
- Mise en forme du Texte -
- Créer du texte en gras, italique, souligné et barré
Le BBCode comprend des balises qui te permettent de changer rapidement le style de ton texte. Cela se réalise des manières suivantes :
Pour rendre une partie de texte en gras: [b]Salut[/b]
Pour souligner un texte: [u]Bonjour[/u]
Pour mettre un texte en italique: [i]Super![/i]
Pour barrer un texte: [strike]test[/strike]
- Changer la taille, la couleur ou la police du texte
Pour changer la couleur, la taille ou la police de ton texte, les balises suivantes peuvent êtres utilisées (ayez en tête que le rendement du texte dépendra de ton navigateur internet et de ton système d'exploitation):
Pour changer la couleur de ton texte, tu peux spécifier soit un nom de couleur reconnu (ex: red, blue, yellow, etc.), ou soit un code couleur hexadecimal (ex: #FFFFFF, #000000): [color=red]Couleur rouge (red)[/color] ou [color=#FF0000]Couleur rouge (#FF0000)[/color]
Pour changer la taille de ton texte se réalise, tu devras spécifier la taille du texte en pixels, de 1 (tellement petit que tu le verras pas) jusqu'à 29 (très grand): [size=9]PETIT[/size] ou [size=24]ENORME[/size]
Pour changer la police, tu devras spécifier une police reconnue (ex: Verdana, Arial) si un utilisateur ne dispose pas de cette police une par défaut lui sera affiché : [font=Arial]Police Arial[/font] ou [font=Comic Sans Ms]Police Comic Sans Ms[/font]
- Puis-je combiner les balises de mise en forme ?
Oui, bien sûr que tu peux, par exemple pour attirer l'attention de quelqu'un, tu peux écrire: [size=18][color=red][b]Regardes MOI ![/b][/color][/size]
Néanmoins, nous ne tu recommandons pas d'écrire beaucoup de texte comme ci-dessus ! Rappelez-tu que c'est à tu de t'assurer de fermer les balises correctement. Par exemple, ce qui suit est incorrect:[b][u]Ceci est incorrect[/b][/u]
La forme qui convient est : [b][u]Ceci est correct[/u][/b]
- Citation et texte à pas-fixe -
Citation dans les réponses
Il y a deux méthodes pour citer un texte, avec ou sans référence.
L'exemple de la référence, pour citer un texte écrit par M. Dupont, tu devras entrer:Code:[quote="M. Dupont"]Le texte écrit par M. Dupont devras être placé ici[/quote]
Rappelez-tu que tu devras inclure les guillemets "" autour de la référence que tu citez, ils ne sont pas optionnels.
La seconde méthode te permet de citer quelque chose sans faire référence à l'auteur. Pour l'utiliser :[quote]Citation sans référence[/quote]
Code ou police à pas-fixe
Si tu veux afficher des lignes de code (HTML ou autres) ou toute chose qui nécessite une police à pas-fixe (exemple avec la police "Courrier"), tu devras Utilises le bbcode suivant : [code]echo "Ceci est du code";[/code]
C'est exactement ce que nous utilisons dans cette aide pour tu montrer tous les bbcodes que tu peux Utilises.
- Création de Listes -
Créer une liste non-ordonnée
Une liste non-ordonnée produit une liste dont les entrées sont les unes en-dessous des autres et indentées avec une puce.
Pour créer une liste non-ordonnée, Utilises :[list][*]Rouge[*]Bleu[*]Jaune[/list]
Créer une liste ordonnée
Le second type de liste tu donne le contrôle sur ce qui va être affiché avant chaque entrée. Pour créer une liste ordonnée, deux possibilités s'offre à tu :
Une liste numérotée : [list=1][*]Faire les magasins[*]Acheter un nouvel ordinateur[*]Injurier son ordinateur lorsqu'il plante[/list]
Une liste alphabétique :[list=a][*]La première réponse possible[*]La seconde réponse possible[*]La troisième réponse possible[/list]
- Créer un lien vers un autre site -
Le BBCode supporte plusieurs méthodes pour créer des liens, plus connus sous le sigle URLs.
Première méthode, par exemple pour créer un lien vers forumactif.com tu devras utiliser : [url=http://www.forumactif.com/]Visitez forumactif.com ![/url]
tu remarquerez que le lien ouvre une nouvelle fenêtre, l'utilisateur peut donc continuer à parcourir les forums s'il le souhaite.
Deuxième méthode, si tu veux que le lien affiche directement l'URL :[url]http://www.forumactif.com/[/url]
Troisième méthode, ce forum possède une fonctionnalité appelé 'Magic Links', celle-ci convertira automatiquement une URL en un lien cliquable sans que t'ayez à insérer une balise BBCode ou http://. : www.forumactif.com
- Affichage d'images dans les messages -
Le BBCode inclut une balise pour incorporer des images à tes messages. Deux importants points à retenir lors de l'utilisation de cette balise sont que premièrement, beaucoup d'utilisateurs n'apprécient guères un trop plein d'images dans un message et deuxièment l'image que tu veux afficher doit déjà être disponible sur internet (elle ne peut pas seulement exister sur ton ordinateur par exemple, à moins que ton ordinateur soit lui-même un serveur internet !). tu peux héberger gratuitement tes images sur Internet grâce aux hébergeurs d'images tel que www.servimg.com.
Pour afficher une image, tu devras procéder comme ceci : [img]http://illiweb.com/fa/i/forumactif.png[/img]
tu peux placer une image dans un lien si tu le souhaites (c'est à tu de t'assurer que l'ordre des balises d'ouverture et de fermeture est correct), par exemple: [url=http://www.forumactif.com/][img]http://illiweb.com/fa/i/forumactif.png[/img][/url]
- Positionnement du texte -
Quatre possibilités de positionnements tu sont proposés :
L'alignement à gauche : [left]Phrase alignée à gauche[/left]
Le centrage :[center]Phrase centrée[/center]
L'alignement à droite : [right]Phrase alignée à droite[/right]
La justification :[justify]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac tortor eu dolor mollis malesuada. Nam arcu dui, cursus a, ullamcorper ut, fringilla nec, velit. Duis tempor arcu eu orci. Ut vehicula massa eu est. Sed ac odio. Integer dictum eros. Etiam facilisis sem non lacus. Donec volutpat ligula ac est. Aliquam erat volutpat. Pellentesque justo tellus, porta et, interdum et, consequat sit amet, eros.[/justify]
- Insérer des médias dans les messages -
Ajouter une animation flash à un message
Tu disposes de deux méthodes pour insérer une animation flash dans ton message.
Première méthode avec le BBcode flash: [flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/flash]
Deuxièment méthode avec le BBcode embed-flash : [embed-flash(200,40)]http://illiweb.com/fa/i/test_bbcode.swf[/embed-flash]
N'oublies pas indiquer la largeur puis la hauteur de l'animation flash entre les parenthèses de la balise BBcode utilisée.
Ajouter une vidéo à un message
Tu peux poster dans tes messages des vidéos que tu rencontres sur l'un de ces deux sites :
Le premier site est Youtube. tu devras copier le code se trouvant dans le champ Embed et procéder ainsi : [youtube]code - Embed[/youtube]
Le deuxièment site est Dailymotion. tu devras copier le code se trouvant dans le champ Lecteur Exportable et procéder ainsi : [dailymotion]code - lecteur Exportable[/dailymotion]
N'oublies pas de copier le code entre les deux balises bbcodes correspondant à l'hébergeur que tu as choisi.
- Création de tableaux -
Créer un tableau dans un message
Le BBCode pour insérer un tableau dans un message est identique aux balises utilisées en HTML. Pour créer un tableau, tu devras commencer par définir un tableau 'table' puis lui insérer une ligne 'tr'. Cette ligne peut contenir une ou plusieurs cellules 'td', de même qu'un tableau peut contenir plusieurs lignes 'tr'.
Par exemple, pour créer un tableau de deux lignes et de trois colonnes, tu devras procéder ainsi : [table] [tr][td] Ligne 1 - Cellule 1 [/td] [td] Ligne 1 - Cellule 2 [/td] [td] Ligne 1 - Cellule 3 [/td][/tr] [tr][td] Ligne 2 - Cellule 1 [/td] [td] Ligne 2 - Cellule 2 [/td] [td] Ligne 2 - Cellule 3 [/td][/tr][/table]
tu peux également rajouter des arguments dans le BBcode 'table'. Ces derniers sont identiques à ceux utiliser pour le HTML. tu peux par exemple ajouter un contour au tableau ci dessus grâce à l'attribut 'border'. [table border=1] [tr][td] Ligne 1 - Cellule 1 [/td] [td] Ligne 1 - Cellule 2 [/td] [td] Ligne 1 - Cellule 3 [/td][/tr] [tr][td] Ligne 2 - Cellule 1 [/td] [td] Ligne 2 - Cellule 2 [/td] [td] Ligne 2 - Cellule 3 [/td][/tr][/table]
D'autres attributs disponibles sont par exemple: cellspacing, cellpadding, width, etc.
Les tableaux sont à manipuler avec précaution, veilles à bien respecter l'ouverture puis la fermeture des BBcodes. Si une erreur d'ouverture ou fermeture est commise, tu risqueras de ne pas obtenir ce que tu souhaites.
- Défilement d'un message -
Faire défiler un message horizontalement
Si tu désires faire défiler un texte horizontalement,tu devras utiliser le BBcode suivant : [scroll]Mon message[/scroll]
Faire défiler un message verticalement
La deuxième façon de faire défiler un texte est verticalement grâce au BBcode suivant : [updown]Mon message[/updown]
- BBcodes d'apparence -
Insérer une ligne
Si tu souhaites aérer ton message en y insérant des lignes, tu peux utiliser ce BBcode : Mon premier message[hr]Mon deuxième message
Mettre en indice ou en exposant
Si tu souhaites mettre du texte en indice ou exposant (utile pour les maths), deux BBcodes tu sont proposés :
Première méthode, pour mettre en indice :x[sub]a+b[/sub]
Deuxième méthode, mettre en exposant : 2[sup]ème[/sup] jour
- BBcodes d'effets -
Quatre BBcodes produisant des effets sur les messages sont à ta disposition. Néanmoins, ces BBcodes ne sont compatibles que sous Internet Explorer avec un forum en version phpBB2.
- La première est une effet miroir vertical (symétrie verticale) sur le texte :[flipv]Effet miroir vertical[/flipv]
- La deuxième est un effet miroir horizontal (symétrie horizontale) sur ton message : [fliph]Effet miroir horizontal[/fliph]
- Si tu souhaites un effet flou sur ton message, tu peux utiliser ce BBcode :[blur]Message flou[/blur]
- Le dernier BBcode d'effet est celui du dégradé sous la forme de : [fade]Effet de dégradé[/fade]
- Divers BBcodes -
Obtenir un nombre aléatoire
Si tu désires obtenir un nombre aléatoire selon un intervalle, tu peux utiliser le BBcode suivant :
Premier cas d'utilisation, l'intervalle est spécifié au minimum et maximum : [rand]50,100[/rand]
Deuxième cas d'utilisation, l'intervalle est spécifié au maximum : [rand]50[/rand]
- Cacher ou masquer du texte -
Cacher du texte :
Utilises les balises : [hide][/hide]
Note: le texte sera caché pour les personnes qui n'ont pas posté dans le sujet.
En revanche, les administrateurs et les modérateurs verront le texte caché sans avoir à poster dans le sujet.
Masquer du contenu :
Utilises les balises : [spoiler][/spoiler]
Tu peux aussi ajouter un "titre" aux spoiler en écrivant : [spoiler="titre"][/spoiler]
Qu'est-ce que le HTML ?
Fermer l'onglet
Qu'est-ce que le HTML ?
L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
La plupart des balises se retrouvent dans les codes BBcode mais tu pourras les personnaliser d'avantage en utilisant la méthode HTML :)
Structuration d'une page web :
Tu n'utiliseras pas cette structuration sur le forum mais autant tu l'indiquer au cas ou !!
Voici donc à quoi doit ressembler ta page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre de ta page</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/ico" href="lien vers ton favicon" />
<!-- appel des fichiers css. -->
<link rel="stylesheet" href="lien vers le fichier css" type="text/css" />
</head>
<body>
CONTENU DE LA PAGE
</body>
</html>
Memento des principales balises HTML [pour ceux qui veulent utiliser les balises HTML]
- Balises de structuration du texte -
- Mettre le texte en exposant <sup> texte </sup>
- Mettre le texte en indice <sub> texte </sub>
- Mettre fortement en valeur (mise en gras) <strong>texte</strong>
- Mettre faiblement en valeur (mise en italique) <em>texte </em>
- Mettre un titre de <h1>texte </h1> à <h6>texte</h6> (h1 étant le plus gros et h6 le plus petit)
- Mettre une image : <img src="lien de l'image"> title="titre de l'image" alt="texte alternatif de l'image" width="taille de l'image" / >
- Mettre un lien : <a href="lien du site"> Référence du site </a>
- Mettre un retour à la ligne : <br/>
- Mettre un paragraphe : <p> ce que contient le paragrape </p>
- Mettre un trait horizontal : <hr style="width : épaisseur du trait; color : couleur du trait;" />
- Balises de liste -
- Mettre une liste à puce non numérotées:
<ul>
<li> élément 1 </li>
<li> élément 2 </li>
<li> élément 3 </li>
</ul>
- Mettre une liste à puce numérotées:
<ol>
<li>Elément numero 1</li>
<li>Elément numero 2</li>
lt;/ol>
- Mettre une liste de définitions il faut alterner chaque terme ("dt") par sa définition ("dd")
<dl>
<dt>Porte</dt>
<dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
<dt>Théâtre</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
- Balises de tableau -
- structure de base du tableau
<table>
<tr>
<td> Ligne 1 - Cellule 1 </td>
<td> Ligne 1 - Cellule 2 </td>
<td> Ligne 1 - Cellule 3 </td>
</tr>
<tr>
<td> Ligne 2 - Cellule 1 </td>
<td> Ligne 2 - Cellule 2 </td>
<td> Ligne 2 - Cellule 3 </td>
</tr>
</table>
-Balises élémentaires
<table> : crée un tableau
<caption> : légende du tableau (optionnel)
<tr> : ligne du tableau
<th> : cellules d'en-tête du tableau
<td> : cellules du tableau
- Balises complémentaires
<thead> : groupe de cellules d'en-tête
<tbody> : groupe de cellules de corps de tableau
<tfoot> : groupe de cellules de pied de tableau
-Pour fusionner des cellules : ajouter les eléments suivant dans les balises <td> ou <th> (exemple : <th rowspan="2">bouh</th> )
les cellules en ligne : colspan="n" ; les cellules en colonnes, c'est rowspan="n" dans la balise td, th ou table (n étant de le nombre de cellules fusionnées)
- Les bordures :
On peut ajouter une bordure au tableau ou à une cellule en ajoutant "border=n" dans la balise td, th ou table (n étant de l'épaisseur de la bordure) dans les balises
- Aligner les textes dans les cellules :
Pour aligner horizontalement le texte dans une cellule, il faut ajouter "align=X" dans la balise td ou th (X correspondant a : center, left, right ou justify)
Pour aligner verticalement le texte dans une cellule, il faut ajouter "valign=X" dans la balise td ou th (X correspondant a : top, middle, bottom)
- Balises de formulaire -
- Délimiter un formulaire : <form> contenu du formulaire</form>
tu devras généralement donner 2 attributs à la balise "form".
method : indique la méthode d'envoi du formulaire (get ou post). Si tu ne sais pas quoi utiliser, utilise post.
action : la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé ton formulaire.
- Donner un titre à un élément de formulaire :<label> titre de l'élément </label>
- Ajouter un champ de formulaire :<input/>
Il y a différents champs possibles ! En fonction de l'élément voulu, tu devras choisir un attribut "type" !
* Zone de texte d'une ligne : <input type="text" name="nom du champ" />
* Mot de passe (le texte est caché) : <input type="password" name="nom du champ"/>
* Envoi de fichier : <input type="file" name="nom du champ"/>
* Case à cocher : <input type="checkbox" name="nom du champ"/>
* Bouton d'option : <input type="radio" name="nom du champ" />
* Bouton : <input type="button" name="nom du champ"/>
* Bouton d'envoi : <input type="submit" name="nom du champ"/>
* Bouton de remise à zéro : <input type="reset" name="nom du champ"/>
* Champ caché : <input type="hidden" name="nom du champ"/>
- Ajouter une zone de saisie sur plusieurs lignes :<textarea rows="nb lignes" cols="nb colonne">ton blabla</textarea>
- Ajouter un liste déroulante :
<select name="ton baka préféré">
<option value="nikos">Nikos</option>
<option value="ririx">Ririx</option>
<option value="kira">Kira</option>
</select>
- Balises génériques -
tu peux entourer des contenus avec deux balises :
* la balise "span" : une balise de type En-ligne autour de quelques mots ou une phrase : <span> blabla </span>
* la balise "div" : une balise de type Bloc autour un paragraphe ou autour d'un groupe de paragraphe : <div> blabla </div>
Ces deux balises permettent d'intégrer des styles css puisque tu peux ajouter un argument "id=" ou class="... mais t'en sauras plus en lisant le passage sur le css !!
Qu'est-ce que le HTML ?
L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
La plupart des balises se retrouvent dans les codes BBcode mais tu pourras les personnaliser d'avantage en utilisant la méthode HTML :)
Structuration d'une page web :
Tu n'utiliseras pas cette structuration sur le forum mais autant tu l'indiquer au cas ou !!
Voici donc à quoi doit ressembler ta page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre de ta page</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/ico" href="lien vers ton favicon" />
<!-- appel des fichiers css. -->
<link rel="stylesheet" href="lien vers le fichier css" type="text/css" />
</head>
<body>
CONTENU DE LA PAGE
</body>
</html>
Memento des principales balises HTML [pour ceux qui veulent utiliser les balises HTML]
- Balises de structuration du texte -
- Mettre le texte en exposant <sup> texte </sup>
- Mettre le texte en indice <sub> texte </sub>
- Mettre fortement en valeur (mise en gras) <strong>texte</strong>
- Mettre faiblement en valeur (mise en italique) <em>texte </em>
- Mettre un titre de <h1>texte </h1> à <h6>texte</h6> (h1 étant le plus gros et h6 le plus petit)
- Mettre une image : <img src="lien de l'image"> title="titre de l'image" alt="texte alternatif de l'image" width="taille de l'image" / >
- Mettre un lien : <a href="lien du site"> Référence du site </a>
- Mettre un retour à la ligne : <br/>
- Mettre un paragraphe : <p> ce que contient le paragrape </p>
- Mettre un trait horizontal : <hr style="width : épaisseur du trait; color : couleur du trait;" />
- Balises de liste -
- Mettre une liste à puce non numérotées:
<ul>
<li> élément 1 </li>
<li> élément 2 </li>
<li> élément 3 </li>
</ul>
- Mettre une liste à puce numérotées:
<ol>
<li>Elément numero 1</li>
<li>Elément numero 2</li>
lt;/ol>
- Mettre une liste de définitions il faut alterner chaque terme ("dt") par sa définition ("dd")
<dl>
<dt>Porte</dt>
<dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
<dt>Théâtre</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
- Balises de tableau -
- structure de base du tableau
<table>
<tr>
<td> Ligne 1 - Cellule 1 </td>
<td> Ligne 1 - Cellule 2 </td>
<td> Ligne 1 - Cellule 3 </td>
</tr>
<tr>
<td> Ligne 2 - Cellule 1 </td>
<td> Ligne 2 - Cellule 2 </td>
<td> Ligne 2 - Cellule 3 </td>
</tr>
</table>
-Balises élémentaires
<table> : crée un tableau
<caption> : légende du tableau (optionnel)
<tr> : ligne du tableau
<th> : cellules d'en-tête du tableau
<td> : cellules du tableau
- Balises complémentaires
<thead> : groupe de cellules d'en-tête
<tbody> : groupe de cellules de corps de tableau
<tfoot> : groupe de cellules de pied de tableau
-Pour fusionner des cellules : ajouter les eléments suivant dans les balises <td> ou <th> (exemple : <th rowspan="2">bouh</th> )
les cellules en ligne : colspan="n" ; les cellules en colonnes, c'est rowspan="n" dans la balise td, th ou table (n étant de le nombre de cellules fusionnées)
- Les bordures :
On peut ajouter une bordure au tableau ou à une cellule en ajoutant "border=n" dans la balise td, th ou table (n étant de l'épaisseur de la bordure) dans les balises
- Aligner les textes dans les cellules :
Pour aligner horizontalement le texte dans une cellule, il faut ajouter "align=X" dans la balise td ou th (X correspondant a : center, left, right ou justify)
Pour aligner verticalement le texte dans une cellule, il faut ajouter "valign=X" dans la balise td ou th (X correspondant a : top, middle, bottom)
- Balises de formulaire -
- Délimiter un formulaire : <form> contenu du formulaire</form>
tu devras généralement donner 2 attributs à la balise "form".
method : indique la méthode d'envoi du formulaire (get ou post). Si tu ne sais pas quoi utiliser, utilise post.
action : la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé ton formulaire.
- Donner un titre à un élément de formulaire :<label> titre de l'élément </label>
- Ajouter un champ de formulaire :<input/>
Il y a différents champs possibles ! En fonction de l'élément voulu, tu devras choisir un attribut "type" !
* Zone de texte d'une ligne : <input type="text" name="nom du champ" />
* Mot de passe (le texte est caché) : <input type="password" name="nom du champ"/>
* Envoi de fichier : <input type="file" name="nom du champ"/>
* Case à cocher : <input type="checkbox" name="nom du champ"/>
* Bouton d'option : <input type="radio" name="nom du champ" />
* Bouton : <input type="button" name="nom du champ"/>
* Bouton d'envoi : <input type="submit" name="nom du champ"/>
* Bouton de remise à zéro : <input type="reset" name="nom du champ"/>
* Champ caché : <input type="hidden" name="nom du champ"/>
- Ajouter une zone de saisie sur plusieurs lignes :<textarea rows="nb lignes" cols="nb colonne">ton blabla</textarea>
- Ajouter un liste déroulante :
<select name="ton baka préféré">
<option value="nikos">Nikos</option>
<option value="ririx">Ririx</option>
<option value="kira">Kira</option>
</select>
- Balises génériques -
tu peux entourer des contenus avec deux balises :
* la balise "span" : une balise de type En-ligne autour de quelques mots ou une phrase : <span> blabla </span>
* la balise "div" : une balise de type Bloc autour un paragraphe ou autour d'un groupe de paragraphe : <div> blabla </div>
Ces deux balises permettent d'intégrer des styles css puisque tu peux ajouter un argument "id=" ou class="... mais t'en sauras plus en lisant le passage sur le css !!
Qu'est-ce que le CSS ?
Fermer l'onglet
Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
En gros, le css permet de gérer la mise en forme/page d'une page web.
Quoi faire du CSS ?
On peut pas mettre du css n'importe ou n'importe comment.
1) Dans un fichier .css
Dans la majorité des cas, tu l'utilisera dans un fichier dont l'extension sera ".css" et tu lierez cette page ".css" à ta page HTML de cette façon : <link rel="stylesheet" href="style.css" />
2) Dans la balise head
Une autre façon d'utiliser le css : en le mettant directement sur la page HTML entre les balises "head" de cette façon :
<style>
les différents éléments du css
</style>
3) Directement dans le HTML
Cependant, si tu souhaites utiliser du css sur ce forum, tu devras l'utiliser directement dans le HTML (même si ce n'est pas trop recommandé): <span style="color: black;">le texte que tu veux "décorer"</span>
Structuration du CSS
Le code du CSS se structure en fonction de la technique utilisée...
Dans l'exemple suivant, on veut que le paragraphe soit écrit en "rose" (poutrelle un jour, poutrelle toujours)
1) Dans un fichier .css
Le code ressemblera à ça :
p {
color: pink;
}
2) Dans la balise head
Le code ressemblera à ça :
<style>
//<!--
p {
color: pink;
}
//-->
</style>
3) Directement dans le HTML
Le code ressemblera à ça :
<p style="color: pink;">le texte contenu dans le paragraphe </p>
Id et Class
Hum... le css permet donc d'apporter un style à des balises HTML classiques, comme "p", "a"... mais dans ce cas là, tous les paragraphes et tous les liens auront le même style. Si tu souhaites avoir des paragraphes particuliers, tu pourras utiliser des "id" ou des "class"... Les "id" étants reservés à des éléments uniques et les "class" aux éléments récurrants !
tu pourras ajouter les id ou les class aux balises "p", "a" ou autres mais aussi en utilisant les balises "span" ou "div".
La méthode est donc la suivante !
1) Dans le HTML
La première chose est d'identifier l'élément pour lequel tu souhaites apporter un style particulier, ensuite, t'y ajouter un id ou une class en faisant "id=nom de l'id que tu souhaites" ou "class=nom de la classe que tu souhaites" (un conseil, Mets des noms qui décrivent bien ce que tu veux avec des nom comme "id2" ou "class64", tu pourrais tu perdre facilement).
exemple : un paragraphe unique que je veux mettre en vert !
<p id="paragraphe_vert"> le paragraphe à mettre en vert</p>
exemple : j'y ajoute deux mots à mettre en jaune :
<p id="paragraphe_vert"> le paragraphe <span class="mot_jaune">à</span> mettre <span class="mot_jaune">en</span> vert</p>
2) Dans le CSS
Voici le code à insérer dans un fichier .css ou dans le "head" (toujours entre les balises "style").
Pour utiliser les id et les class, dans le css, tu devras réutiliser le nom que tu as choisi mais tu devras ajouter des symboles devant !
Pour un id, ce sera un "#" et pour une class, un "." :
/*paragraphe rose de base*/
p {
color: pink;
}
/*paragraphe vert unique*/
#paragraphe_vert{
color: green;
}
/*mots en jaune*/
.mot_jaune{
color: yellow;
}
Memento des principales propriétés Css [pour ceux qui veulent utiliser le CSS]
- Propriétés de formatage de texte -
- Nom de police : "font-family".
Pour utiliser cette propriété, tu n'auras qu'a ajouter "font-family :police1, police2..., serif, sans-serif" dans le css. Mais attention, pour fonctionner sur tous les ordinateurs, les polices indiquées doivent être présentes sur les pc de tous les utilisateurs ! Pour que l'ordinateur utilise une police voisine, rajoutez "serif" ou "sans-serif".
tu peux aussi utiliser les "font google" : WebFont (choisis une police et suis les indications fournies.
C'est d'ailleurs ce que j'utilise dans cette FAQ !
- Taille du texte : "font-size".
Pour utiliser cette propriété, tu n'auras qu'a indiquer la taille du texte.
Cependant, tu peux le faire avec différentes unités !
px (pixels), % (pourcentage, 100% = normal), em (taille relative, 1.0 = normal), nom de taille (xx-small : très très petit, x-small : très petit, small : petit, medium : moyen, large : grand, x-large : très grand, xx-large : très très grand)
- Gras : "font-weight".
Voici les valeurs que tu pourras utiliser :
bold (gras), bolder (plus gras), lighter (plus fin) ou normal (par défaut)
- Italique : "font-style".
Voici les valeurs que tu pourras utiliser :
italic (italique), oblique (autre façon de mettre en italique), normal (par défaut)
- Décoration : "text-decoration".
Voici les valeurs que tu pourras utiliser :
underline (souligné), overline (ligne au-dessus), line-through (barré), blink (clignotant), none (par défaut)
- Petites capitales : "font-variant".
Voici les valeurs que tu pourras utiliser :
small-caps (petites capitales), normal (par défaut)
- Capitales : "text-transform".
Voici les valeurs que tu pourras utiliser :
uppercase (tout mettre en majuscules), lowercase (tout mettre en minuscules), capitalize (début des mots en majuscules), normal (par défaut)
- Super-propriété de police : "font".
Pour utiliser cette propriété, en fait c'est tout simple !!
Il faut mettre les différentes valeurs que tu veux pour font-weight, font-style, font-size, font-variant, font-family ! si toutes les propriétés peuvent être mises dans le desordre, tu devras quand même mettre les font-family en dernier !
Exemple : font: bold italic underline 12px verdana; tu auras un texte en gras, en italic, souligné, avec une taille de 12px et avec la police verdana !
- Propriétés d'alignement -
- Alignement horizontal "text-align"
Voici les valeurs que tu pourras utiliser :
left (à gauche (par défaut)), center (centré), right (à droite), justify (texte justifié) - Alignement vertical "vertical-align"
Ce type d'alignement est surtout utilisé dans les cellules des tableaux.
Voici les valeurs que tu pourras utiliser :
top (en haut), middle (au milieu), bottom (en bas)
- Hauteur de ligne "line-height"
Indiquer une valeur en pixels (px) ou en pourcentage (%)
- Alinéa "text-indent"
Indiquez une valeur en pixels (px) pour définir l'alinéa de tes paragraphes.
tes paragraphes commenceront avec le retrait que tu as indiqué.
- Césure "white-space"
Voici les valeurs que tu pourras utiliser :
normal (le passage à la ligne est automatique (par défaut)), nowrap (pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit présente), pre (le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>))
- Césure forcée "word-wrap"
Voici les valeurs que tu pourras utiliser :
normal(par défaut), break-word (arrivé pret du bord du bloc, le mot est coupé et envoyé à la ligne)
- Ombre de texte "text-shadow"
Cette propriété est composée par 4 éléments : Décalage horizontal, décalage vertical, adoucissement, couleur
A utiliser de cette façon par exemple : text-shadow: 5px 5px 2px pink;
- Propriétés de couleur -
- Couleur de texte "color"
Deux méthodes pour indiquer une couleur !
1) en mettant le nom de la couleur en anglais (pink, red, green,...)
2) en mettant le code haxadécimal de la couleur : en gros il s'agit d'un "#" suivi de 6 chiffres (#000000). Je t'invite à aller sur ce site afin de trouver la => couleur hexadécimale de ton choix.
- Couleur de fond "background-color"
1) en mettant le nom de la couleur en anglais (pink, red, green,...)
2) en mettant le code haxadécimal de la couleur : en gros il s'agit d'un "#" suivi de 6 chiffres (#000000). Je t'invite à aller sur ce site afin de trouver la => couleur hexadécimale de ton choix.
- Propriétés pour mettre une image de fond -
- Image de fond "background-image"
Il suffit d'ajouter l'URL de l'image :
background-image:url("images/fond.png"); /* Notation relative */
background-image:url("http://www.monsite.com/images/fond.png"); /* Notation absolue */
- Fond fixé "background-attachment"
Voici les valeurs que tu pourras utiliser :
fixed (le fond reste fixe quand on descend plus bas sur la page), scroll (le fond défile avec le texte (par défaut)).
- Répétition du fond "background-repeat"
Voici les valeurs que tu pourras utiliser :
repeat (le fond se répète (par défaut)), repeat-x (le fond ne se répète que sur une ligne, horizontalement), repeat-y (le fond ne se répète que sur une colonne, verticalement), no-repeat (le fond ne se répète pas, il n'est affiché qu'une fois).
- Position du fond "background-position"
Pour mettre une position à un fond, il y a deux methodes :
1) En donnant une distance par rapport au coin en haut gauche (en px ou %).
Exemple : background-position:50px 200px; /* 50 px à droite, 200px en bas */
2) En utilisant des valeurs verticales et horizontale : background-position : vertical horizontal;
Les valeurs verticales sont : top (en haut), center (au milieu), bottom (en bas)
Les valeurs horizontales sont : left (à gauche), center (au centre), right (à droite)
Exemple : background-position : bottom right; /* en bas à droite */
- Super-propriété de fond "background"
Pour cette propriété, tu pourras mettre toutes les autres propriétés de background, l'ordre n'étant pas obligatoire (background-image, background-repeat, background-attachment, background-position.).
Exemple : /* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */
background:url("images/fond.png") no-repeat fixed top right;
- Transparence "opacity"
Cette proprieté utilise des valeurs entre 0 (transparence totale) et 1 (opacité totale). Pour une transparence de 40% t'utilisera le code suivant : opacity:0.4;
- Propriétés des dimensions -
- Largeur "width"
Cette proprieté utilise des valeurs en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
- Hauteur "height"
Cette proprieté utilise des valeurs en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
- Propriétés des marges -
Pour bien comprendre le système de marges, j'ai fait un petit dessin, saches qu'il y a deux types de marges : les marges internes (les "padding") et les marges externes ("margin").
- Propriétés des bordures -
- Epaisseur de la bordure "border-width"
Indiquer une valeur en px.
- Couleur de la bordure "border-color"
Indiquer une valeur de couleur.
- Type de bordure "border-style"
Voici les valeurs que tu pourras utiliser :
none (pas de bordure (par défaut)), hidden (bordure cachée), solid (ligne pleine), double (ligne double (nécessite une taille de bordure de 3px minimum)), dashed (en tirets), dotted (en pointillés), inset (effet 3D "enfoncé"), outset (effet 3D "surélevé"), ridge (autre effet 3D)
- Bordure à gauche "border-left"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure en haut "border-top"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-top: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure à droite "border-right"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-right: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure en bas "border-bottom"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-bottom: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Super-propriété de bordure "border"
Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.
- Bordure arrondie "-moz-border-radius"
Indiquer une valeur en px, ou 4 valeurs pour chacun des coins, en partant de celui en haut à gauche.
- Ombre "box-shadow"
Indiquer les valeurs de décalage horizontal, décalage vertical, adoucissement, couleur.
Exemple : box-shadow: 2px 2px 4px black;
- Propriétés d'affichage -
- Type d'élément "display"
Voici les valeurs que tu pourras utiliser :
none (l'élément ne sera pas affiché), block (l'élément devient de type "block" (bloc comme <p />)), inline (l'élément devient de type "inline" (en ligne, comme <strong />)), inline-block (l'élément est affiché comme un inline mais peut être redimensionné comme un block), list-item (l'élément devient de type "élément de liste à puce" (comme <li/>))
- Affichage "visibility"
Voici les valeurs que tu pourras utiliser :
hidden (masqué), visible (visible (par défaut)) Note : display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à prendre de la place sur l'écran.
- Limiter les dimensions "overflow"(afficher un ascenseur aussi)
Voici les valeurs que tu pourras utiliser :
visible (tout l'élément sera affiché (par défaut)), hidden ( l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée), scroll (tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte), auto (c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur "scroll").
- Propriétés de positionnement -
- Flottant "float"
Voici les valeurs que tu pourras utiliser :
left (flottant à gauche), right (flottant à droite), none :(pas de flottant (par défaut)).
- Stopper un flottant "clear"
Voici les valeurs que tu pourras utiliser :
left (supprime l'effet d'un flottant à gauche précédent), right (supprime l'effet d'un flottant à droite précédent), both (supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite), none (pas de suppression de l'effet du flottant (par défaut)).
- Type de positionnement "position"
Voici les valeurs que tu pourras utiliser :
absolute (position absolue par rapport au coin en haut à gauche), fixed (position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas dans la page.), relative (position relative, par rapport à la position "normale" de l'élément), static (positionnement normal (par défaut)).
- Position par rapport au haut "top"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport au bas "bottom"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport à gauche "left"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport à droite "right"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Ordre d'affichage "z-index"
En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre. Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.
Par exemple, si tu as 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.
- Propriétés des listes -
- Pour les listes non ordonnées (<ul>) : "list-style-type"
Voici les valeurs que tu pourras utiliser :
disc (un disque noir), circle (un cercle (par défaut)), square (un carré), none (aucune puce ne sera utilisée).
- Pour les listes ordonnées (<ol>) : "list-style-type"
Voici les valeurs que tu pourras utiliser :
decimal (des nombres 1, 2, 3, 4, 5... (par défaut)), decimal-leading-zero (des nombres commençant par zéro (01, 02, 03, 04, 05...)), upper-roman (numérotation romaine, en majuscules (I, II, III, IV, V...)), lower-roman (numérotation romaine, en minuscules (i, ii, iii, iv, v...)), upper-alpha (numérotation alphabétique, en majuscules (A, B, C, D, E...)), lower-alpha (numérotation alphabétique, en minuscules (a, b, c, d, e...)), lower-greek (numérotation grecque).
- Position en retrait "list-style-position"
Voici les valeurs que tu pourras utiliser :
inside (sans retrait), outside (avec retrait (par défaut))
- Puce personnalisée "list-style-image"
Indiquer l'url de l'image qui servira de puce. Exemple : list-style-image: url("images/puce.png"); - Super-propriété de liste "list-style"
tu peux réunir les valeurs de list-style-type, list-style-position et list-style-image. tu n'es pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
- Propriétés des tableaux -
- Type de bordure "border-collapse"
Voici les valeurs que tu pourras utiliser :
collapse (les bordures du tableau et des cellules sont mélangées), separate (les bordures du tableau et des cellules sont séparées (par défaut)).
- Cellules vides "empty-cells"
Voici les valeurs que tu pourras utiliser :
show (les bordures des cellules vides sont affichées), collapse (les cellules vides sont masquées (par défaut)).
- Autres propriétés -
- Curseur de souris "cursor"
Voici les valeurs que tu pourras utiliser :
auto (curseur automatique (par défaut)), default (curseur standard), pointer (curseur en forme de main, comme quand on pointe sur un lien), text (curseur utilisé quand on pointe sur du texte), wait (curseur utilisé pour indiquer une attente (sablier)), progress (curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)), help (curseur en forme de point d'interrogation, indiquant une aide), move (curseur en forme de croix, indiquant un déplacement possible), url (curseur personnalisé, de type .cur ou .ani).
Exemple : cursor: url("images/curseur.cur"), auto;
tu devras utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani. Notez aussi la présence du mot auto à la fin. Cela signifie que le navigateur tentera de charger le curseur personnalisé. S'il n'a pu être chargé pour une quelconque raison, le curseur correspondant à la valeur auto sera utilisé.
Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
En gros, le css permet de gérer la mise en forme/page d'une page web.
Quoi faire du CSS ?
On peut pas mettre du css n'importe ou n'importe comment.
1) Dans un fichier .css
Dans la majorité des cas, tu l'utilisera dans un fichier dont l'extension sera ".css" et tu lierez cette page ".css" à ta page HTML de cette façon : <link rel="stylesheet" href="style.css" />
2) Dans la balise head
Une autre façon d'utiliser le css : en le mettant directement sur la page HTML entre les balises "head" de cette façon :
<style>
les différents éléments du css
</style>
3) Directement dans le HTML
Cependant, si tu souhaites utiliser du css sur ce forum, tu devras l'utiliser directement dans le HTML (même si ce n'est pas trop recommandé): <span style="color: black;">le texte que tu veux "décorer"</span>
Structuration du CSS
Le code du CSS se structure en fonction de la technique utilisée...
Dans l'exemple suivant, on veut que le paragraphe soit écrit en "rose" (poutrelle un jour, poutrelle toujours)
1) Dans un fichier .css
Le code ressemblera à ça :
p {
color: pink;
}
2) Dans la balise head
Le code ressemblera à ça :
<style>
//<!--
p {
color: pink;
}
//-->
</style>
3) Directement dans le HTML
Le code ressemblera à ça :
<p style="color: pink;">le texte contenu dans le paragraphe </p>
Id et Class
Hum... le css permet donc d'apporter un style à des balises HTML classiques, comme "p", "a"... mais dans ce cas là, tous les paragraphes et tous les liens auront le même style. Si tu souhaites avoir des paragraphes particuliers, tu pourras utiliser des "id" ou des "class"... Les "id" étants reservés à des éléments uniques et les "class" aux éléments récurrants !
tu pourras ajouter les id ou les class aux balises "p", "a" ou autres mais aussi en utilisant les balises "span" ou "div".
La méthode est donc la suivante !
1) Dans le HTML
La première chose est d'identifier l'élément pour lequel tu souhaites apporter un style particulier, ensuite, t'y ajouter un id ou une class en faisant "id=nom de l'id que tu souhaites" ou "class=nom de la classe que tu souhaites" (un conseil, Mets des noms qui décrivent bien ce que tu veux avec des nom comme "id2" ou "class64", tu pourrais tu perdre facilement).
exemple : un paragraphe unique que je veux mettre en vert !
<p id="paragraphe_vert"> le paragraphe à mettre en vert</p>
exemple : j'y ajoute deux mots à mettre en jaune :
<p id="paragraphe_vert"> le paragraphe <span class="mot_jaune">à</span> mettre <span class="mot_jaune">en</span> vert</p>
2) Dans le CSS
Voici le code à insérer dans un fichier .css ou dans le "head" (toujours entre les balises "style").
Pour utiliser les id et les class, dans le css, tu devras réutiliser le nom que tu as choisi mais tu devras ajouter des symboles devant !
Pour un id, ce sera un "#" et pour une class, un "." :
/*paragraphe rose de base*/
p {
color: pink;
}
/*paragraphe vert unique*/
#paragraphe_vert{
color: green;
}
/*mots en jaune*/
.mot_jaune{
color: yellow;
}
Memento des principales propriétés Css [pour ceux qui veulent utiliser le CSS]
- Propriétés de formatage de texte -
- Nom de police : "font-family".
Pour utiliser cette propriété, tu n'auras qu'a ajouter "font-family :police1, police2..., serif, sans-serif" dans le css. Mais attention, pour fonctionner sur tous les ordinateurs, les polices indiquées doivent être présentes sur les pc de tous les utilisateurs ! Pour que l'ordinateur utilise une police voisine, rajoutez "serif" ou "sans-serif".
tu peux aussi utiliser les "font google" : WebFont (choisis une police et suis les indications fournies.
C'est d'ailleurs ce que j'utilise dans cette FAQ !
- Taille du texte : "font-size".
Pour utiliser cette propriété, tu n'auras qu'a indiquer la taille du texte.
Cependant, tu peux le faire avec différentes unités !
px (pixels), % (pourcentage, 100% = normal), em (taille relative, 1.0 = normal), nom de taille (xx-small : très très petit, x-small : très petit, small : petit, medium : moyen, large : grand, x-large : très grand, xx-large : très très grand)
- Gras : "font-weight".
Voici les valeurs que tu pourras utiliser :
bold (gras), bolder (plus gras), lighter (plus fin) ou normal (par défaut)
- Italique : "font-style".
Voici les valeurs que tu pourras utiliser :
italic (italique), oblique (autre façon de mettre en italique), normal (par défaut)
- Décoration : "text-decoration".
Voici les valeurs que tu pourras utiliser :
underline (souligné), overline (ligne au-dessus), line-through (barré), blink (clignotant), none (par défaut)
- Petites capitales : "font-variant".
Voici les valeurs que tu pourras utiliser :
small-caps (petites capitales), normal (par défaut)
- Capitales : "text-transform".
Voici les valeurs que tu pourras utiliser :
uppercase (tout mettre en majuscules), lowercase (tout mettre en minuscules), capitalize (début des mots en majuscules), normal (par défaut)
- Super-propriété de police : "font".
Pour utiliser cette propriété, en fait c'est tout simple !!
Il faut mettre les différentes valeurs que tu veux pour font-weight, font-style, font-size, font-variant, font-family ! si toutes les propriétés peuvent être mises dans le desordre, tu devras quand même mettre les font-family en dernier !
Exemple : font: bold italic underline 12px verdana; tu auras un texte en gras, en italic, souligné, avec une taille de 12px et avec la police verdana !
- Propriétés d'alignement -
- Alignement horizontal "text-align"
Voici les valeurs que tu pourras utiliser :
left (à gauche (par défaut)), center (centré), right (à droite), justify (texte justifié) - Alignement vertical "vertical-align"
Ce type d'alignement est surtout utilisé dans les cellules des tableaux.
Voici les valeurs que tu pourras utiliser :
top (en haut), middle (au milieu), bottom (en bas)
- Hauteur de ligne "line-height"
Indiquer une valeur en pixels (px) ou en pourcentage (%)
- Alinéa "text-indent"
Indiquez une valeur en pixels (px) pour définir l'alinéa de tes paragraphes.
tes paragraphes commenceront avec le retrait que tu as indiqué.
- Césure "white-space"
Voici les valeurs que tu pourras utiliser :
normal (le passage à la ligne est automatique (par défaut)), nowrap (pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit présente), pre (le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>))
- Césure forcée "word-wrap"
Voici les valeurs que tu pourras utiliser :
normal(par défaut), break-word (arrivé pret du bord du bloc, le mot est coupé et envoyé à la ligne)
- Ombre de texte "text-shadow"
Cette propriété est composée par 4 éléments : Décalage horizontal, décalage vertical, adoucissement, couleur
A utiliser de cette façon par exemple : text-shadow: 5px 5px 2px pink;
- Propriétés de couleur -
- Couleur de texte "color"
Deux méthodes pour indiquer une couleur !
1) en mettant le nom de la couleur en anglais (pink, red, green,...)
2) en mettant le code haxadécimal de la couleur : en gros il s'agit d'un "#" suivi de 6 chiffres (#000000). Je t'invite à aller sur ce site afin de trouver la => couleur hexadécimale de ton choix.
- Couleur de fond "background-color"
1) en mettant le nom de la couleur en anglais (pink, red, green,...)
2) en mettant le code haxadécimal de la couleur : en gros il s'agit d'un "#" suivi de 6 chiffres (#000000). Je t'invite à aller sur ce site afin de trouver la => couleur hexadécimale de ton choix.
- Propriétés pour mettre une image de fond -
- Image de fond "background-image"
Il suffit d'ajouter l'URL de l'image :
background-image:url("images/fond.png"); /* Notation relative */
background-image:url("http://www.monsite.com/images/fond.png"); /* Notation absolue */
- Fond fixé "background-attachment"
Voici les valeurs que tu pourras utiliser :
fixed (le fond reste fixe quand on descend plus bas sur la page), scroll (le fond défile avec le texte (par défaut)).
- Répétition du fond "background-repeat"
Voici les valeurs que tu pourras utiliser :
repeat (le fond se répète (par défaut)), repeat-x (le fond ne se répète que sur une ligne, horizontalement), repeat-y (le fond ne se répète que sur une colonne, verticalement), no-repeat (le fond ne se répète pas, il n'est affiché qu'une fois).
- Position du fond "background-position"
Pour mettre une position à un fond, il y a deux methodes :
1) En donnant une distance par rapport au coin en haut gauche (en px ou %).
Exemple : background-position:50px 200px; /* 50 px à droite, 200px en bas */
2) En utilisant des valeurs verticales et horizontale : background-position : vertical horizontal;
Les valeurs verticales sont : top (en haut), center (au milieu), bottom (en bas)
Les valeurs horizontales sont : left (à gauche), center (au centre), right (à droite)
Exemple : background-position : bottom right; /* en bas à droite */
- Super-propriété de fond "background"
Pour cette propriété, tu pourras mettre toutes les autres propriétés de background, l'ordre n'étant pas obligatoire (background-image, background-repeat, background-attachment, background-position.).
Exemple : /* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */
background:url("images/fond.png") no-repeat fixed top right;
- Transparence "opacity"
Cette proprieté utilise des valeurs entre 0 (transparence totale) et 1 (opacité totale). Pour une transparence de 40% t'utilisera le code suivant : opacity:0.4;
- Propriétés des dimensions -
- Largeur "width"
Cette proprieté utilise des valeurs en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
- Hauteur "height"
Cette proprieté utilise des valeurs en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
- Propriétés des marges -
Pour bien comprendre le système de marges, j'ai fait un petit dessin, saches qu'il y a deux types de marges : les marges internes (les "padding") et les marges externes ("margin").
| Type | Propriété marge interieure | Propriété marge exterieure | Valeurs |
| Marge en haut | "padding-top" | "margin-top" | Cette proprieté utilise des valeurs en px ou em. |
| Marge en bas | "padding-bottom" | "margin-bottom" | Cette proprieté utilise des valeurs en px ou em. |
| Marge à gauche | "padding-left" | "margin-left" | Cette proprieté utilise des valeurs en px ou em. |
| Marge à droite | "padding-right" | "margin-right" | Cette proprieté utilise des valeurs en px ou em. |
| Super-propriété de marge | "padding" | "margin" |
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que tu Mets, la signification change : 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche. |
- Propriétés des bordures -
- Epaisseur de la bordure "border-width"
Indiquer une valeur en px.
- Couleur de la bordure "border-color"
Indiquer une valeur de couleur.
- Type de bordure "border-style"
Voici les valeurs que tu pourras utiliser :
none (pas de bordure (par défaut)), hidden (bordure cachée), solid (ligne pleine), double (ligne double (nécessite une taille de bordure de 3px minimum)), dashed (en tirets), dotted (en pointillés), inset (effet 3D "enfoncé"), outset (effet 3D "surélevé"), ridge (autre effet 3D)
- Bordure à gauche "border-left"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure en haut "border-top"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-top: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure à droite "border-right"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-right: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Bordure en bas "border-bottom"
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple : border-bottom: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
- Super-propriété de bordure "border"
Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.
- Bordure arrondie "-moz-border-radius"
Indiquer une valeur en px, ou 4 valeurs pour chacun des coins, en partant de celui en haut à gauche.
- Ombre "box-shadow"
Indiquer les valeurs de décalage horizontal, décalage vertical, adoucissement, couleur.
Exemple : box-shadow: 2px 2px 4px black;
- Propriétés d'affichage -
- Type d'élément "display"
Voici les valeurs que tu pourras utiliser :
none (l'élément ne sera pas affiché), block (l'élément devient de type "block" (bloc comme <p />)), inline (l'élément devient de type "inline" (en ligne, comme <strong />)), inline-block (l'élément est affiché comme un inline mais peut être redimensionné comme un block), list-item (l'élément devient de type "élément de liste à puce" (comme <li/>))
- Affichage "visibility"
Voici les valeurs que tu pourras utiliser :
hidden (masqué), visible (visible (par défaut)) Note : display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à prendre de la place sur l'écran.
- Limiter les dimensions "overflow"(afficher un ascenseur aussi)
Voici les valeurs que tu pourras utiliser :
visible (tout l'élément sera affiché (par défaut)), hidden ( l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée), scroll (tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte), auto (c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur "scroll").
- Propriétés de positionnement -
- Flottant "float"
Voici les valeurs que tu pourras utiliser :
left (flottant à gauche), right (flottant à droite), none :(pas de flottant (par défaut)).
- Stopper un flottant "clear"
Voici les valeurs que tu pourras utiliser :
left (supprime l'effet d'un flottant à gauche précédent), right (supprime l'effet d'un flottant à droite précédent), both (supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite), none (pas de suppression de l'effet du flottant (par défaut)).
- Type de positionnement "position"
Voici les valeurs que tu pourras utiliser :
absolute (position absolue par rapport au coin en haut à gauche), fixed (position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas dans la page.), relative (position relative, par rapport à la position "normale" de l'élément), static (positionnement normal (par défaut)).
- Position par rapport au haut "top"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport au bas "bottom"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport à gauche "left"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Position par rapport à droite "right"
Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
- Ordre d'affichage "z-index"
En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre. Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.
Par exemple, si tu as 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.
- Propriétés des listes -
- Pour les listes non ordonnées (<ul>) : "list-style-type"
Voici les valeurs que tu pourras utiliser :
disc (un disque noir), circle (un cercle (par défaut)), square (un carré), none (aucune puce ne sera utilisée).
- Pour les listes ordonnées (<ol>) : "list-style-type"
Voici les valeurs que tu pourras utiliser :
decimal (des nombres 1, 2, 3, 4, 5... (par défaut)), decimal-leading-zero (des nombres commençant par zéro (01, 02, 03, 04, 05...)), upper-roman (numérotation romaine, en majuscules (I, II, III, IV, V...)), lower-roman (numérotation romaine, en minuscules (i, ii, iii, iv, v...)), upper-alpha (numérotation alphabétique, en majuscules (A, B, C, D, E...)), lower-alpha (numérotation alphabétique, en minuscules (a, b, c, d, e...)), lower-greek (numérotation grecque).
- Position en retrait "list-style-position"
Voici les valeurs que tu pourras utiliser :
inside (sans retrait), outside (avec retrait (par défaut))
- Puce personnalisée "list-style-image"
Indiquer l'url de l'image qui servira de puce. Exemple : list-style-image: url("images/puce.png"); - Super-propriété de liste "list-style"
tu peux réunir les valeurs de list-style-type, list-style-position et list-style-image. tu n'es pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
- Propriétés des tableaux -
- Type de bordure "border-collapse"
Voici les valeurs que tu pourras utiliser :
collapse (les bordures du tableau et des cellules sont mélangées), separate (les bordures du tableau et des cellules sont séparées (par défaut)).
- Cellules vides "empty-cells"
Voici les valeurs que tu pourras utiliser :
show (les bordures des cellules vides sont affichées), collapse (les cellules vides sont masquées (par défaut)).
- Autres propriétés -
- Curseur de souris "cursor"
Voici les valeurs que tu pourras utiliser :
auto (curseur automatique (par défaut)), default (curseur standard), pointer (curseur en forme de main, comme quand on pointe sur un lien), text (curseur utilisé quand on pointe sur du texte), wait (curseur utilisé pour indiquer une attente (sablier)), progress (curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)), help (curseur en forme de point d'interrogation, indiquant une aide), move (curseur en forme de croix, indiquant un déplacement possible), url (curseur personnalisé, de type .cur ou .ani).
Exemple : cursor: url("images/curseur.cur"), auto;
tu devras utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani. Notez aussi la présence du mot auto à la fin. Cela signifie que le navigateur tentera de charger le curseur personnalisé. S'il n'a pu être chargé pour une quelconque raison, le curseur correspondant à la valeur auto sera utilisé.
Que sont les Smileys ?
Fermer l'onglet
Que sont les Smileys ?
Les Smileys, ou Emoticons sont de petites images qui sont utilisées pour exprimer certains sentiments en utilisant un petit code, ex: :) signifie joyeux, :( signifie triste. tu peux voir la liste complète des emoticons lors de la composition d'un message. Essais de ne pas utiliser abusivement ces smileys, car ils peuvent vite rendre un message illisible et un modérateur pourrait décider de l'éditer voire même de le supprimer entièrement.
Tu les trouveras sur la gauche en créant ou en répondant aux messages mais aussi sur le panneau de réponse rapide !
Un nouveau panel de smiley se trouve à cette page : Nouveaux Smileys
Quelques exemples de smileys disponibles sur ce forum : catégorie chats marrons (11)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
Que sont les Smileys ?
Les Smileys, ou Emoticons sont de petites images qui sont utilisées pour exprimer certains sentiments en utilisant un petit code, ex: :) signifie joyeux, :( signifie triste. tu peux voir la liste complète des emoticons lors de la composition d'un message. Essais de ne pas utiliser abusivement ces smileys, car ils peuvent vite rendre un message illisible et un modérateur pourrait décider de l'éditer voire même de le supprimer entièrement.
Tu les trouveras sur la gauche en créant ou en répondant aux messages mais aussi sur le panneau de réponse rapide !
Un nouveau panel de smiley se trouve à cette page : Nouveaux Smileys
Quelques exemples de smileys disponibles sur ce forum : catégorie chats marrons (11)
Comment utiliser des caractères spéciaux ?
Fermer l'onglet
Comment utiliser des caractères spéciaux ?
Les caractère spéciaux sont les caractères que tu peux afficher en utilisant diverses combinaisons de touches au clavier.
tu trouveras une liste complète sur wikipedia : Caractères spéciaux mais je vais t'en lister quelques uns :)
Comment utiliser des caractères spéciaux ?
Les caractère spéciaux sont les caractères que tu peux afficher en utilisant diverses combinaisons de touches au clavier.
tu trouveras une liste complète sur wikipedia : Caractères spéciaux mais je vais t'en lister quelques uns :)
|
- Symboles musicaux ♩ ♩ ♪ ♪ ♫ ♫ ♬ ♬ ♭ ♭ ♮ ♮ ♯ ♯ |
- Symboles religieux ☥ ☥ ☧ ☧ ☨ ☨ ♱ ♱ ✝ ✝ ✞ ✞ ✟ ✟ |
Si malgré tout, ta question n'a aucune réponse, tu peux nous contacter par Mp (à Waha/Cécile ou Nikos) ou par mail à :
geek.otaku.news[@]gmail.com (en enlevant les "[" et "]") !!!
Copyright © 2008-2026, Akihabara-no-Sasayaki Tous droits réservés
Toute reproduction de ce site, aussi bien partielle que complète, est illégale, sauf autorisation contraire.
Site réalisé en langage PHP par Waha/Cécile (codage, texte, images et design).
Cette Foire aux questions est fortement inspirée de la FAQ proposée par Forumactif, pour les explications des langages HTML, BBCodes et css, wikipédia et le site openclassroom ont été utilisés.
La FAQ et le règlement sont susceptibles d'être modifiés. Tu en seras cependant avertis.
FAQ mise à jour le 14/01/2026 par Waha/Cécile.