Fiche de réponses
Résumé des rps
Fiche de relations
Signature
Fiche de présentations
Codes divers
Avatars 200x320
Graphisme
Problème avec un code
Commandes
Partenaires



 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

Graphiorum :: Le coin des codes :: Boîte à codesVoir le sujet précédent Voir le sujet suivant Aller en bas 
Tutoriel : Quelques bases

Libella

Libella
Admin

Tutoriel : Quelques bases Empty
MessageSujet: Tutoriel : Quelques bases Tutoriel : Quelques bases Icon_minitimeMer 15 Juil 2015 - 11:24
Base du codage
Bonjour/Bonsoir à tous Coeur

Voici une explication rapide des bases du codage et un petit listing des codes, que je dirais, de base.

D'abord, il faut savoir que le codage, c'est comme une sorte de "rangement décoratif". On crée des boîtes qu'on emboîte dans d'autres. Et chaque boîte peut être peintes, colorées, etc. Pour définir une "boîte", on utilise la balise "div", ce qui donne en html :
Code:
<div>
Ce qui est important, c'est qu'il faut toujours fermer une boîte pour que le contenu ne sorte pas. Pour fermer une boîte, on ajoute un slash. Ce qui donne :
Code:
<div>Le contenu</div>

Comme c'est stylé d'avoir une boîte décorée, on ajoute un "style" pour définir le style de la boîte. Pour séparer chaque décoration, on met un point virgule ";" entre chaque. Ce qui donne :
Code:
<div style="la décoration traduite en code">Le contenu</div>

Maintenant place à la décoration des boîtes. Le code est toujours en anglais. Voici un petit listing des codes de base pour décorer vos boîtes:

-La taille
Largeur: width:chiffrepx (px étant l'unité)
Hauteur: height:chiffrepx

Le contenu de la boîte


Ce qui donne avec une largeur de 200px et une hauteur de 150px:
Code:
<div style="width:200px; height:150px; background-color:#fff">Le contenu de la boîte</div>

J'ai rajouté un fond à la boîte pour que ça soit visible. Cela nous amène aux couleurs de la boîte !
Donc pour le fond:
background-color:#code la couleur ou le nom en anglais donc ici #fff ou white

Pour la couleur du texte, simplement :
color:#code couleur ou juste le nom en anglais. Ce qui donne :
Le contenu de la boîte

Code:
<div style="width:200px; height:150px; background-color:#fff; color:#000">Le contenu de la boîte</div>

ou

Le contenu de la boîte

Code:
<div style="width:200px; height:150px; background-color:#fff; color:black">Le contenu de la boîte</div>

Passons aux bordures de la boîte. Pour ça, il faut utiliser la balise "border". Il faut définir sa couleur, son épaisseur et son style "pointillé, trait plein, etc". Comme on reste dans la même customisation, on ne sépare pas les informations par un ";" juste un espace. Cela donne donc :
Code:
border: son type de trait épaisseur en px couleur

En pratique :
Le contenu de la boîte

Code:
<div style="width:200px; height:150px; background-color:#fff; color:black; border: solid 2px #D1B48C">Le contenu de la boîte</div>

Pour les autres types de trait, il suffit de remplacer solid par :
-dotted pour des pointillés:
-dashed pour un trait discontinu
-double pour un trait double
-groove, ridge, inset ou outset pour un effet 3D

On peut choisir de mettre une bordure que d'un côté de la boîte. Il faut donc le définir. Pour ça, il faut savoir que le nom des bordures. Une fois qu'on le sait, on la nomme en l'attachant à la bordure par un tirer. Ce qui donne:
-Bordure du haut (top en anglais) : border-top
-Bordure du bas (bottom en anglais) : border-bottom
-Bordure à droite (right en anglais) : border-right
-Bordure à gauche (left en anglais) : border-left

On définit leur style de la même façon. Ainsi, en combinant tout ça, on peut obtenir, par exemple :

Le contenu de la boîte


Code:
<div style="width:200px; height:150px; background-color:#fff; color:black; border-top: solid 2px #D1B48C; border-bottom: dotted 2px #D1B48C; border-right: dashed 2px #D1B48C; border-left: groove 6px #D1B48C">Le contenu de la boîte</div>

Le contenu de la boîte


Code:
<div style="width:200px; height:150px; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C">Le contenu de la boîte</div>

On peut ajouter une ombre à la boîte. La boite, c'est box en anglais et ombre c'est shadow. On attache donc l'ombre à la boîte et on définit l'ombre. Ce qui donne
Code:
box-shadow: 5px 8px 3px #ECD9B9
Le 5px : pour définir horizontalement (droite ou gauche)
Le 8px : pour définir verticalement (haut ou bas)
Le 3px : L'intensité/l'estompage

Ce qui donne :
Le contenu de la boîte


Code:
<div style="width:200px; height:150px; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C; box-shadow: 5px 8px 3px #ECD9B9">Le contenu de la boîte</div>



Dernière édition par Libella le Jeu 11 Jan 2018 - 14:09, édité 3 fois
Revenir en haut Aller en bas

Libella

Libella
Admin

Tutoriel : Quelques bases Empty
MessageSujet: Re: Tutoriel : Quelques bases Tutoriel : Quelques bases Icon_minitimeMer 15 Juil 2015 - 12:22
Base du codage
Passons au texte !

D'abord, si le texte est trop long pour la boîte et qu'on ne veut pas qu'il sorte, il faut lui permettre de glisser. On va donc ajouter une "scroll" de l'anglais "faire défiler". Pour ça le code est "overflow:auto" à mettre après avoir défini la taille. Ce qui donne :

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.


Code:
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>

J'ai enlevé l'ombre et agrandi la boîte, pour que ça soit plus visible.

Ensuite, si on veut que le texte soit moins contre les bords de la boîte, on peut lui donner de l'air, avec la balise "padding". On définit alors la taille qu'on lui laisse, toujours en px:

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.


Code:
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;padding: 25px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>

Comme on donne de l'air, on dilate la boîte. Elle s'agrandit. Il faut donc penser à baisser sa taille (width et height) si ses nouvelles dimensions vous gênent.

Là encore, on peut définir où on donne de l'air (haut, bas, droite, gauche). On peut soit faire "padding-top: xpx; padding-bottom, etc" ou tout d'un coup: "padding:8px 10px 1px 3px".
8px : haut (top)
10px : droite (right)
1px : bas (bottom)
3px : gauche (left)
Exemple :

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.


Code:
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;padding:8px 10px 1px 3px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>

Pour la mise en forme du texte, en listing:

Pour l'espacement : unité : pt, comme on est en anglais, les virgules sont des points, donc si on veut mettre des virgules, comme 1,5, on met 1.5.
-Alignement : text-align:center/right/left/justify
-Barré : text-decoration: line-through
-Couleur : color:#code couleur ou le nom en anglais
-Espacement entre les lettres : letter-spacing: xpt (si vous mettez un chiffre positif, l'espacement sera grand et un chiffre négatif, l'espacement faible)
-Espacement entre les lignes : line-height: xpt
-Espacement entre les mots : word-spacing: xpt
-Gras : font-weight: bold
-Italique : font-style: italic
-Majuscule (tout le texte en majuscule) : text-transform: uppercase
-Minuscule (tout le texte en minuscule) : text-transform: lowercase
-Ombre : text-shadow: xpx xpx xpx #code couleur/nom en anglais
-Police : font-family: titre de la police
Si vous mettez une police dont vous n'êtes pas sûrs qu'elle existe sur d'autres ordinateurs, mettez-en une de secours. Séparez-les par une virgule. Exemple : font-family: Georgia, Verdana
-Souligné : text-decoration: underline
-Taille : font-size: xpx

Comme je disais que le codage c'est des boîtes dans des boîtes, nous allons en faire. On aurait pu tout faire dans une. C'est juste à titre d'exemple. Des fois, on a pas le choix de faire plusieurs boîtes.

Une boîte rangement et une boîte texte :
La boite rangement
Code:
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;"></div>

La boîte texte
Code:
<div style="padding:10px; text-align:justify;color:#0000ff;letter-spacing: 1.4pt;word-spacing: 1.6pt;line-height: 1.2;text-transform: uppercase; text-shadow: 0px 0px 5px #66ccff; font-family: verdana; font-size: 12px"></div>

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.


Code:
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;"><div style="padding:10px; text-align:justify;color:#0000ff;letter-spacing: 1.4pt;word-spacing: 1.6pt;line-height: 1.2;text-transform: uppercase; text-shadow: 0px 0px 5px #66ccff; font-family: verdana; font-size: 12px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div></div>

On a donc la boîte texte dans la boîte rangement.

Revenir en haut Aller en bas
Tutoriel : Quelques basesVoir 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
Graphiorum :: Le coin des codes :: Boîte à codes-
Sauter vers: