Ao No Exorcist
Hello ~
Nous vous souhaitons une agréable visite sur le forum en espérant vous voir parmi nous. Une question ou autres ? N'hésitez pas à venir voir une personne du Staff.


Amicalement, le Staff
Ao No Exorcist
Hello ~
Nous vous souhaitons une agréable visite sur le forum en espérant vous voir parmi nous. Une question ou autres ? N'hésitez pas à venir voir une personne du Staff.


Amicalement, le Staff
Ao No Exorcist
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Rin Okumura vient de découvrir qu'il est le fils de Satan et décide de devenir un exorciste. Quel camps gagnera ?
 
AccueilDernières imagesRechercherS'enregistrerConnexion
Le Deal du moment :
ETB Pokémon Fable Nébuleuse : où ...
Voir le deal

Ao No Exorcist :: Et puis... Floodez avec vos prières :: AutresPartagez | 
 

 Le HTML pour tous ?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Ethan Keynes


Ethan Keynes


Messages : 103
Date d'inscription : 11/06/2011
Age : 32
Localisation : Dans les méandres de ma conneries

Accréditation
Démon Famillier: Aucun
Qualifications: Guérisseur
Rénommé:
Le HTML pour tous ? Left_bar_bleue0/0Le HTML pour tous ? Empty_bar_bleue  (0/0)
Le HTML pour tous ? _
MessageSujet: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeDim 10 Juil - 12:30
    Comme vous avez put le constater, il est possible de faire de zouuuuuuli présentation pour vos textes. Je vais vous donner des modèles, mais vous pouvez tout aussi bien personnaliser vous même ! =D Et pour ça, je vais vous donner quelques codes de base pour que même ceux ne connaissant pas le HTML puisse tenter leur propre présentation ! =D Je sais qu'on n'est pas sur un forum spécialisé, mais peu importe ! =D

    ___&Background

    Ou les fonds, parlons en français =D Pour les fond, on peut choisir une couleur, ou même une image ! Mais pour ça, ce qu'on écrit est différent ! ^^

    __Couleur


    Code:
    <div style ="Background-color : red;">Quelque chose</div>

    Et voilà comment utiliser le fond couleur ! On peut y ajouter des "modifications", mais nous verrons ça après ! =3 Couleurs disponibles ici

    --> Les fonds ! =3


    Code:
    <div style ="background: url(adresse de l'image)">Ce que vous voulez xD</div>

    Et voilà les deux types de fonds existant ! =D Après, on peut y mettre plusieurs modifications ! Ici je l'ai laissé comme une bande, mais si vous écrivez tout un texte entre les balises, vous obtiendrez un "pavé de texte" ! =D Quelque chose que ce qui suis quoi...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.


    Et voilà La balise de base ! =D Oui, je sais que comme ça, ça fait très... Enfin, pas forcement très joli... Mais ne vous en faites pas, on va pouvoir personnaliser tout ça ! =D

    ___&Arrondis

    Ce paramètre sera très rapide ! =3

    Avant de vous donner le code, un peu de "compatibilité". Il faut savoir qu'il n'y a aucune balise arrondi pour Internet Explorer. Il y en a cependant pour Firefox, Chrome et Safari. Mais, malheur, ce sont trois codes différent, ce n'est pas pour nous simplifier la vie... N'ayant jamais utilisé ce dernier et connaissant peu de personne l'utilisant, je ne connais pas le code, vous ne l'aurez donc malheureusement pas... Mais bon, deux navigateurs c'est déjà ça ! =D

    >Pour Mozilla Firefox
    -moz-border-radius:0px 0px 0px 0px;
    Le premier : en haut à gauche, le deuxième en haut à droite, le troisième en bas à droite et le quatrième en bas à gauche =D Petit exemple~

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.

    Et comment on l'utilise ? =D On l'intègre dans la balise précédente ! =D

    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px;">Quelque chose x3</div>
    Bien sûr les valeurs ne sont que des exemples, à vous de voir ce que vous préférez ! =D

    Mais, malheur ! Je suis une utilisatrice de Google Chrome, je ne voit pas les arrondis !

    >Pour Google Chrome
    -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px;
    Et oui, ça fait beaucoup, mais il n'y a pas de balise "raccourci" pour Chrome... Mais au moins, on est sûr de pas se tromper au niveau de la position des arrondis ! =D On l'utilise de la même manière~

    Code:
    <div style ="Background-color : red; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;">Quelque chose x3</div>

    Et bien sûr, vous pouvez optimiser votre code pour que les arrondis soient visibles sur les deux navigateurs ! =D Il suffit donc de combiner les deux codes, regardez-donc~

    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;">Quelque chose x3</div>

    Nous en avons donc finis avec les arrondis ! =D Que vous les utilisiez pour des bandes ou des pavés, à vous de choisir le résultat~

    ___&Contours

    Le dernier paramètre de personnalisation que je connaisse... Mais pour lequel il y a plusieurs "paramètres ! =D Allons-y petit à petit~

    La balise de base porte le le nom "border". Vous pouvez donc l'utiliser directement si vous voulez Le même contour partout ! =D Mais après, vous pouvez aussi la décomposer ! Ce qui donne border-left, border-right, border-top et border-bottom =3

    A cette balise on attribut une épaisseur en pixel et une couleur...
    border : 3px white
    Par exemple... Vous pouvez aussi remplacer la couleur par le code hexagonal, vous savez, ce truc qui fait #FFFFFF ?

    Mais ce n'est pas fini, car il faut aussi lui attribuer un style !
    Solid : un simple contour, un simple trait =D
    Double : Un contour "double", avec deux traits quoi... A savoir que l'épaisseur minimum pour l'utiliser est 3px
    Dashed : Des tirets ! ----
    Dotted : Pointillés .......

    Et comme un exemple vaut mieux que miles mots ! =D Je vais donc mettre le simple à droite, le double à gauche, le dashed en haut et le dotted en bas ! =D

    Ce que vous voulez x3


    Code:
    <div style ="Background-color : red; border-left : double 3px white; border-right : solid 2px white; border-top : dashed 1px white; border-bottom : dotted 2px white;">[color=white]Ce que vous voulez x3[/color]</div>

    Bon, voilà la base ! =D Vous n'êtes bien sûr pas obligé de mettre un contour partout, à vous de voir ! =D

    Après; vous pouvez très bien utiliser les contours tout seul ! Pour souligner un texte, par exemple, comme ce qui suis =D

    Ce que vous voulez x3


    Code:
    <div style ="border-bottom : dotted 2px white;">[color=white]Ce que vous voulez x3[/color]</div>
    Bon, voilà tout ce qu'il faut savoir sur les contours, ou du moins tout ce que je sais =D

    On en a donc fini avec ce qu'on peut faire pour personnaliser l'apparence de vos backgrounds... Il est peut-être possible de faire une ombre, mais je n'en sais rien, désolée...

    ___&Textes

    Je vais être bref et précise ! Je vous épargnerai les mises en pages bateaux de base de forumactif que vous connaissez surement tous... Il doit y avoir beaucoup de choses que j'ignore bien sûr...

    Tout d'abord, point esthétique...

    > Comme vous l'avez vu, vos textes sont collés aux bords de vos fonds... Ce qui n'est parfois pas très lisible. La solution ? Le padding ! =D A écrire de la forme padding : Xpx; la balise peut, tout comme la balise border, être séparée selon les quatre directions =D

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium feugiat quam, eu faucibus justo ultrices non. Cras quis nibh tempor velit accumsan sodales. In at ante eros, eget tincidunt tortor. Nam ut erat eros, id ultrices ante. Sed augue magna, venenatis sed elementum a, consectetur non lectus. Integer turpis felis, varius non fringilla vitae, hendrerit eget leo. Vivamus dui dui, volutpat sed consequat id, porta eget lectus. Morbi viverra, ipsum a venenatis rutrum, magna libero sagittis lacus, et pellentesque urna lorem vitae neque. Curabitur lobortis porttitor volutpat. Sed tortor turpis, convallis vel porta non, malesuada sit amet urna. Morbi condimentum justo nec orci rhoncus suscipit.


    Code:
    <div style ="Background-color : red; -moz-border-radius:5px 5px 5px 5px; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; padding : 5px;"></div>

    C'est mieux, non ? =D

    >L'écart des lettres. Et oui, il est possible de jouer dessus, grâce à la balise letter-spacing, présentée sous la forme letter-spacing : Xpx. Il faut savoir qu'un chiffre négatif rapprochera les lettres, et qu'un chiffre positif les éloignes.

    Votre Texte~


    Code:
    <div style="letter-spacing : 3px;">Votre Texte~</div>

    L'utilité ? Bah ça peut être sympa de présenter un titre de cette manière ! =D

    >L'ombrage. Vous l'avez déjà vu quelque part sur ANE RPG, le QEEL notamment. Et bien il est facile à utiliser ! Et toujours à placer dans un < div style=" "> (sans espace entre < et le div)... La balise c'est, en entier, text-shadow: 2px 2px 3px #000000. Je sais que les deux premier c'est le décalage, d'abord à droite (ou gauche si c'est négatif) puis en bas (ou haut xD), mais le troisième j'ai jamais vraiment compris ce que c'était, le décalage ou la dispersion peut-être ? Et après c'est la couleur of course xD Mais elle peut se mettre avant aussi, sauf erreur de ma part...

    Votre Texte~


    Code:
    <div style="text-shadow: 2px 2px 3px #000000;">Votre Texte~</div>

    Bon, bah il me semble que c'est tout ce que je peux dire sur les textes...

    ___&Divers

    Bon, il me reste deux/trois points à vous présenter ! =D Donc on va mettre ça dans une même partie...

    >D'abord, ce que je vais appeler les pavés déroulants... Je vais d'abord vous en montrer un avec son code pour ensuite expliquer ce que vous pouvez changer

    Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla Bla bla bla bla bla bla


    Code:
    <div style="overflow: auto; height: 110px; width: 350px">Texte~</div>

    Donc, overflow, c'est pour créer la barre de défilement à partir du moment ou la taille du texte dépasserai du cadre délimité par Height (hauteur) et Width (Largeur). Il faut donc en conclure que si votre texte n'est pas assez grand, on ne verra pas le code...

    >Dans le même style, les menus déroulant



    Code:
    <form name="Menuderoulant" method="POST"> <select name="wxlmenu" size="1" style="width: 200px; "><option>....</option>
    <option> ....</option>
    <option>....</option></select></font></form>

    Donc, vous pouvez multipliez les < option> autant que vous voulez. Vous pouvez changez la largeur grâce au width, mais aussi y ajouter un contour avec les balises que l'on a déjà décrit =D A placer dans un style~

    >Les "pavé/titre". D'accord, je ne sais pas comment le décrire, alors je vais plutôt vous montrer !

    Titre Ton Texte


    Code:
    <fieldset ><legend style="font-family:georgia; font-size:11; font-weight:300;"> Titre </legend> Ton Texte </fieldset>

    ça a pas l'air très joli, mais vous pouvez modifier l'apparence du fieldset grâce au différentes balises montrées plus haut il suffit de les placer dans un style=" "

    A vous de jouer~

    >Enfin, parlons des tableaux... Je pense que vous savez les utiliser, mais il est possible de les personnaliser ! Pour ce faire, nous allons le regarder en BBCcode, que vous pouviez le faire directement avec le raccourci de forumactif =3 Prenons un tableau de 3 lignes et 3 colonnes.

    Code:
    [table border="1"]
    [tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr][tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr][tr]
    [td] [/td][td] [/td][td] [/td]
    [/tr]
    [/table]

    Pour les personnalisations que j'ai, enlevons le contour du tableau.

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Bon, comme ça, c'est un tableau tout ce qu'il y a de plus banal... Alors mettons un peu de couleur ! =D

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit


    Code:
    [table border="0"]
    [tr]
    [td bgcolor="red"]Le Titre[/td][td bgcolor="orange"] Titre[/td][td bgcolor="saddlebrown"] Un dernier[/td]
    [/tr][tr]
    [td bgcolor="brown"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="darkred"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr][tr]
    [td bgcolor="darkred"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="brown"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr]
    [/table]

    Et voilà ! =D Vous voyez donc bien quel est le code à utiliser ? =D Donc à vous de mettre vos couleurs ! =D

    Parlons maintenant de contour, car on peu les assigner à une cellule seulement ! =D Ce sont les même codes que dans la partie contour, donc si vous avez bien suivi ce "cours", vous savez quoi utiliser, nee~ ? <3

    Le Titre Titre Un dernier
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Code:
    [table border="0"]
    [tr]
    [td bgcolor="red" style="border-right : 5px double white"]Le Titre[/td][td bgcolor="orange" style="border-right : 5px double white"] Titre[/td][td bgcolor="saddlebrown"] Un dernier[/td]
    [/tr][tr]
    [td bgcolor="brown" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="darkred" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr][tr]
    [td bgcolor="darkred" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="brown" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td][td bgcolor="maroon" style="border-bottom : 2px dashed white"]Lorem ipsum dolor sit amet, consectetur adipiscing elit [/td]
    [/tr]
    [/table]

    Voilà tout ce que j'avais à vous apprendre sur les tableaux ! =D

    Notre petit cours de HTML est donc terminé ! >w< Si jamais vous avez des questions, que vous chercher un code ou que vous voulez en faire partager un, n'hésitez pas x3
Revenir en haut Aller en bas

Mizora NightMoon


Mizora NightMoon
L'Alpha te regarde ಠ_ಠ


Messages : 190
Date d'inscription : 11/04/2011
Age : 26
Localisation : DTC 3ième à gauche.. LoL .. non, sérieusement, je suis là où je peu tuer des Kikoos 8D

Accréditation
Démon Famillier: Wilburt
Qualifications: Dresseur & Dragon
Rénommé:
Le HTML pour tous ? Left_bar_bleue0/250Le HTML pour tous ? Empty_bar_bleue  (0/250)
Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeLun 18 Juil - 9:23
    CE TUTO VOS DE L'OR ! =D *PAN*

    Sérieusement, il est bien expliqué et tout, et tout, dommage que tu n'en mette pas plus vus ton talent =3=
Revenir en haut Aller en bas
https://ao-no-exorcist-rpg.forumgratuit.org

Ethan Keynes


Ethan Keynes


Messages : 103
Date d'inscription : 11/06/2011
Age : 32
Localisation : Dans les méandres de ma conneries

Accréditation
Démon Famillier: Aucun
Qualifications: Guérisseur
Rénommé:
Le HTML pour tous ? Left_bar_bleue0/0Le HTML pour tous ? Empty_bar_bleue  (0/0)
Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeLun 18 Juil - 14:17
    En même temps je met que les balises de base, je peux pas expliciter toutes les variantes/combinaisons possibles, ça prendrait vraiment trop de temps °3°" Parce qu'il y a toutes les balises que j'utilise, il en manque pas une... Après c'est juste une question de combinaison, et c'est peut-être le plus compliqué...
Revenir en haut Aller en bas

Mizora NightMoon


Mizora NightMoon
L'Alpha te regarde ಠ_ಠ


Messages : 190
Date d'inscription : 11/04/2011
Age : 26
Localisation : DTC 3ième à gauche.. LoL .. non, sérieusement, je suis là où je peu tuer des Kikoos 8D

Accréditation
Démon Famillier: Wilburt
Qualifications: Dresseur & Dragon
Rénommé:
Le HTML pour tous ? Left_bar_bleue0/250Le HTML pour tous ? Empty_bar_bleue  (0/250)
Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeLun 18 Juil - 15:09
    Roh purée, dans ce cas t'es trop fort ! °w°
Revenir en haut Aller en bas
https://ao-no-exorcist-rpg.forumgratuit.org

Seikaku Gyakuno


Seikaku Gyakuno
Dual Personalities ~ Mad Endearing


Messages : 146
Date d'inscription : 28/04/2011
Age : 27
Localisation : Derrière toi~

Accréditation
Démon Famillier: -
Qualifications: Paladin & Dragon
Rénommé:
Le HTML pour tous ? Left_bar_bleue0/0Le HTML pour tous ? Empty_bar_bleue  (0/0)
Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeVen 22 Juil - 10:46
    Ouaw, tu peux pas savoir a quel point je te suis reconnaissant pour ce tuto Ethan!! *-*
Revenir en haut Aller en bas

Renzô Shima


Renzô Shima


Messages : 9
Date d'inscription : 07/07/2011

Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitimeMer 24 Aoû - 11:00
    Oups, j'avais oublié de te remercier pour ça, donc mercii *o*
Revenir en haut Aller en bas

Contenu sponsorisé






Le HTML pour tous ? _
MessageSujet: Re: Le HTML pour tous ?   Le HTML pour tous ? Icon_minitime
Revenir en haut Aller en bas
 

Le HTML pour tous ?

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ao No Exorcist :: Et puis... Floodez avec vos prières :: Autres-
Sauter vers: