Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 Tutoriel : Quelques bases

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

Messages : 458
Date d'inscription : 20/08/2010
Localisation : Bonne question

MessageSujet: Tutoriel : Quelques bases   Mer 15 Juil - 10: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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Libella
Admin
avatar

Messages : 458
Date d'inscription : 20/08/2010
Localisation : Bonne question

MessageSujet: Re: Tutoriel : Quelques bases   Mer 15 Juil - 11: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 sûrs qu'elle existe sur d'autres ordinateur, 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>

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

Tutoriel : Quelques bases

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

 Sujets similaires

-
» Tutoriel de Jetico Personal Firewall
» Tutoriel SpywareBlaster
» quelques ajouts
» Quelques mots sur moi
» Tutoriel JottiQ

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Graphiorum :: Le coin des codes :: Boîte à codes-
Poster un nouveau sujet   Répondre au sujet