AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  



 

Partagez | 
 

 Les bases du codage

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

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

MessageSujet: Les bases du codage   Dim 10 Juil - 13:50

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

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

Bonjour à tous !  
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  

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
Voir le profil de l'utilisateur

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

MessageSujet: Re: Les bases du codage   Dim 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  

J'espère que ça aura pu aider les plus novices  

Si vous avez la moindre question, n'hésitez pas  


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
Voir le profil de l'utilisateur

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

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

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

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

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

De rien, ça me fait plaisir de pouvoir aider

N'hésite surtout pas à me poser des questions, je tenterai d'y répondre au mieux
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

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

MessageSujet: Re: Les bases du codage   Lun 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
Voir le profil de l'utilisateur

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

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

Super ce tutoriel avec toutes les bases
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

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

MessageSujet: Re: Les bases du codage   Mer 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
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 ?

Blake a écrit:
Super ce tutoriel avec toutes les bases

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

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

MessageSujet: Re: Les bases du codage   Mer 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
Voir le profil de l'utilisateur

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

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

Voilà, c'est fait. Merci pour ton conseil
Revenir en haut Aller en bas
Voir le profil de l'utilisateur


Contenu sponsorisé

MessageSujet: Re: Les bases du codage   

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

-
» Les bases du codage
» EADS Barracuda
» Pansements au SILVER...c'est parti mon Kitco...!!!
» Utiliser la bases de donnée Acomba sur le web.
» Génération automatique du numéro de facture trop lent

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