Indigo Yashima Lazy Admin ~ ObserverMessages : 1006 Date d'inscription : 28/10/2009 Age : 32 Localisation : N'importe où, en train de prendre des photos
| Sujet: Le HTML pour tous ? =D Sam 30 Oct - 15:05 | |
| Comme vous avez put le constater au niveau des présentations, fiches de liens ou récapitulatif de RP, il est possible de faire de zouuuuuuli présentation pour vos textes. Je vous ait proposer des exemples, 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 ! =D
__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
>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 ! =D 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 LA, la page d'accueil 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 >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, vous savez-donc quoi utiliser ? =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" 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
Dernière édition par Indigo Yashima le Ven 16 Déc - 18:57, édité 1 fois |
|