AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  



 
-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

Partagez
 

 Les bases du codage

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

blue mermaid
blue mermaid
oh my universal
Messages : 53
Date d'inscription : 08/07/2016

Les bases du codage Empty
MessageSujet: Les bases du codage   Les bases du codage EmptyDim 10 Juil - 13:50

Tutoriel créé par blue mermaid - première partie.

Sujet : les bases du codage.
Niveau : facile.
Application : partout.

Bonjour à tous !  Les bases du codage 781856399
Aujourd'hui, je vous propose un petit tutoriel qui reprend les codages de base, qui pourront vous servir un peu partout sur votre forum. J'espère que cela permettra aux débutants de pouvoir faire leurs premiers pas dans le monde parfois abstrait du codage  Les bases du codage 3674946257

0. Introduction

La séquence div style vous permet de délimiter votre codage. Le texte ou l'image encadré(e) par cette balise recevra les propriétés que vous avez mis en place.

Code:
<div style="codage1;codage2;">Texte/image</div>

1. Cadre

Pour créer un cadre autour de votre texte ou de votre image, il vous suffit d'utiliser la propriété border. Grâce à d'autres propriétés, vous pourrez déterminer sa couleur, son épaisseur, sa largeur, sa longueur, etc. Ci-dessous, vous trouverez un exemple de cadre simple.

Texte


Code:
<div style="border:solid 1px #000000;">Texte</div>

La propriété solid détermine le style de la bordure. Ici, elle est pleine. Mais vous pouvez également faire en sorte qu'elle arbore d'autres styles : dotted (pointillé), dashed (tirets), solid (plein), double (double), groove (rainurée), ridge (relief), inset (relief intérieur) et outset (relief extérieur). Il vous suffit de remplacer solid dans le code ci-dessus par une autre propriété pour qu'elle soit appliquée.

La propriété 1px détermine l'épaisseur du cadre. Vous pouvez remplacer le chiffre 1 par n'importe quel chiffre pour obtenir l'épaisseur voulue.

La propriété #000000 détermine la couleur du cadre. Vous pouvez la remplacer par le code couleur que vous souhaitez.

1.1. Bords arrondis

Pour que votre cadre ait des coins arrondis, il vous faudra utiliser la propriété border-radius. Celle-ci est suivie de quatre nombres, qui déterminent l'amplitude de l'arrondi de chaque coin. Le premier nombre renvoie au coin supérieur gauche, le second au coin supérieur droit, le troisième au coin inférieur droit et le quatrième au coin inférieur gauche. Vous pouvez indiquer les mêmes chiffres pour les quatre coins ou, au contraire, alterner.

Texte


Code:
<div style="border:solid 1px #000000;border-radius:50px 50px 50px 50px;">Texte</div>

Texte


Code:
<div style="border:solid 1px #000000;border-radius:50px 100px 50px 100px;">Texte</div>


1.2. Alternance des bordures

Vous avez également la possibilité d'appliquer certains codes à certaines bordures seulement, en utilisant les propriétés border-left (bordure gauche), border-right (bordure droite), border-top (bordure haute) et border-bottom (bordure basse).

Texte


Code:
<div style="border-left:solid 1px #000000;border-radius:50px 100px 50px 100px;border-right:solid 1px #000000;border-top:dotted 1px #555555;border-bottom:dotted 1px #555555;">Texte</div>

1.3 Fond du cadre

Vous pouvez également appliquer un fond à votre cadre. Soit, vous optez pour une couleur et dans ce cas, il vous faudra utiliser la propriété background-color. Soit, vous préférez une image et là, vous devrez utiliser la propriété background-image.

Texte


Code:
<div style="border:solid 1px #000000;background-color:#555555;">Texte</div>

Texte


Code:
<div style="border:solid 1px #000000;background-image:  url('http://img11.hostingpics.net/pics/917082fond.jpg');">Texte</div>

1.4. Longueur et largeur

Pour déterminer la longueur et la largeur de votre cadre, il vous faudra utiliser les propriétés width (largeur) et height (longueur). Celles-ci doivent être suivies d'un nombre de votre choix. Si la longueur du texte est trop importante par rapport à la longueur du cadre, vous pouvez mettre en place une scrollbar qui apparaîtra lorsque la longueur du cadre sera dépassée grâce à la propriété overflow:auto.

Texte


Code:
<div style="border:solid 1px #000000;width:300px;height:100px;overflow:auto;">Texte</div>

1.5. Marges

Vous pouvez appliquer des marges à l'intérieur ou à l'extérieur de votre cadre grâce aux propriétés margin (extérieur) et padding (intérieur). Cela vous permettra, notamment, de faire en sorte que le texte ne soit pas collé au cadre.

Texte


Code:
<div style="border:solid 1px #000000;width:300px;height:100px;overflow:auto;margin:5px;padding:10px;">Texte</div>

1.6. Ombres

Afin que votre cadre ait plus de relief, vous pouvez l'agrémenter d'une ombre grâce à la propriété box-shadow. Vous pouvez choisir l'amplitude et la couleur de l'ombre.

Texte


Code:
<div style="border:solid 1px #000000;width:300px;height:100px;box-shadow: 2px 2px 2px #000000;">Texte</div>


Dernière édition par blue mermaid le Lun 11 Juil - 13:53, édité 1 fois
Revenir en haut Aller en bas

blue mermaid
blue mermaid
oh my universal
Messages : 53
Date d'inscription : 08/07/2016

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyDim 10 Juil - 14:12

Tutoriel créé par blue mermaid - deuxième partie.

2. Texte

Vous pouvez agrémenter votre texte de toute une série de fantaisies grâce au codage. Les différentes propriétés pouvant s'appliquer au texte seront développées dans les sous-parties à la suite.

2.1. Couleur

La couleur du texte peut être définie grâce à la propriété color.

Texte


Code:
<div style="color:#cff445;">Texte</div>

2.2. Alignement, police, taille

Le texte peut soit être centré, aligné à gauche/droite ou être justifié. Pour cela, il faut utiliser la propriété text-align. La propriété font-family permet de définir la police et font-size la taille de la police.

Texte


Code:
<div style="color:#000000;text-align:right;font-family:times new roman;font-size:20px;">Texte</div>

2.3. Ombres

Le texte peut également être agrémenté d'une ombre grâce à la propriété text-shadow. Elle suit le même principe que la propriété permettant d'ombrer un cadre.

Texte


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

2.4. Espacement des lettres

Les lettres de votre texte peuvent être espacées grâce à la propriété letter-spacing. Celle-ci est suivie d'un nombre de votre choix.

Texte


Code:
<div style="color:#000000;letter-spacing:3px;">Texte</div>

2.5. Capitales et minuscules

Vous pouvez imposer à l'ensemble de votre texte d'être écrit entièrement en lettres minuscules (lowercase) ou capitales (uppercase) grâce à cette simple propriété du text-transform.

Texte

Texte


Code:
<div style="color:#000000;text-transform:uppercase;">Texte</div>
<div style="color:#000000;text-transform:lowercase;">Texte</div>


Voilà les grandes lignes pour vous aider à vous familiariser avec le codage  Les bases du codage 3674946257

J'espère que ça aura pu aider les plus novices  Les bases du codage 1582600951

Si vous avez la moindre question, n'hésitez pas  Les bases du codage 781856399


Si vous possédez votre propre forum, vous pouvez utiliser la propriété div class → en savoir plus


Dernière édition par blue mermaid le Sam 16 Juil - 12:24, édité 1 fois
Revenir en haut Aller en bas

Othello
Othello
oh my fantastic
Messages : 30
Date d'inscription : 28/03/2016

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyDim 10 Juil - 18:05

oh merci beaucoup lola pour toutes ces astuces, ça fait longtemps que je rêvais d'y comprendre quelque chose. Les bases du codage 480662828
je vais tester quelques uns de tes enseignements et si j'ai des questions je te les poserais. Les bases du codage 1747585289
Revenir en haut Aller en bas

blue mermaid
blue mermaid
oh my universal
Messages : 53
Date d'inscription : 08/07/2016

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyLun 11 Juil - 13:56

De rien, ça me fait plaisir de pouvoir aider Les bases du codage 781856399

N'hésite surtout pas à me poser des questions, je tenterai d'y répondre au mieux Les bases du codage 3674946257
Revenir en haut Aller en bas

Dreamzz
Dreamzz
modératrice
Messages : 375
Age : 30
Date d'inscription : 09/07/2016
Localisation : Montréal

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyLun 11 Juil - 14:59

Merci pour le partage!
Toutefois, je pense que ça serait une bonne idée de préciser quelque part dans le sujet que lorsque c'est possible d'utiliser les "class" plutôt que "style" c'est préférable. Mettre le css directement dans le html ça se fait, mais ça peut être à l'origine de certains bugs d'affichage!

En tout cas, tu expliques bien les différentes propriétés, on se retrouve facilement!
Revenir en haut Aller en bas

Blake
Blake
oh my universal
Messages : 1521
Age : 24
Date d'inscription : 01/01/2016
Localisation : Dans le placard sous l'escalier

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyLun 11 Juil - 18:22

Super ce tutoriel avec toutes les bases Les bases du codage 3987223942
Revenir en haut Aller en bas

blue mermaid
blue mermaid
oh my universal
Messages : 53
Date d'inscription : 08/07/2016

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyMer 13 Juil - 12:30

Dreamzz a écrit:
Merci pour le partage!
Toutefois, je pense que ça serait une bonne idée de préciser quelque part dans le sujet que lorsque c'est possible d'utiliser les "class" plutôt que "style" c'est préférable.  Mettre le css directement dans le html ça se fait, mais ça peut être à l'origine de certains bugs d'affichage!

En tout cas, tu expliques bien les différentes propriétés, on se retrouve facilement!

De rien Les bases du codage 3674946257
Justement, j'ai créé un sujet réservé à la propriété div class dans les tutos. Tu penses que je devrais mettre un lien vers ce sujet dans ce post ? Les bases du codage 3674946257

Blake a écrit:
Super ce tutoriel avec toutes les bases Les bases du codage 3987223942

Merci Les bases du codage 2697903431
Revenir en haut Aller en bas

Dreamzz
Dreamzz
modératrice
Messages : 375
Age : 30
Date d'inscription : 09/07/2016
Localisation : Montréal

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptyMer 13 Juil - 12:49

Ça pourrait être une bonne idée oui! Ton autre tutoriel est bien écrit aussi (;
Revenir en haut Aller en bas

blue mermaid
blue mermaid
oh my universal
Messages : 53
Date d'inscription : 08/07/2016

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage EmptySam 16 Juil - 12:24

Voilà, c'est fait. Merci pour ton conseil Les bases du codage 781856399
Revenir en haut Aller en bas


Contenu sponsorisé

Les bases du codage Empty
MessageSujet: Re: Les bases du codage   Les bases du codage Empty

Revenir en haut Aller en bas
 

Les bases du codage

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

 Sujets similaires

-
» Commande de codage d'une montre connectée

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
OH MY RPG! :: OH MY SERVICES ! :: Le codage :: Tutoriels-