blue mermaid oh my universal Messages : 53
Date d'inscription : 08/07/2016
| Sujet: 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 |
|
blue mermaid oh my universal Messages : 53
Date d'inscription : 08/07/2016
| Sujet: 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 |
|
Othello oh my fantastic Messages : 30
Date d'inscription : 28/03/2016
| Sujet: 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. |
|
blue mermaid oh my universal Messages : 53
Date d'inscription : 08/07/2016
| Sujet: 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 |
|
Dreamzz modératrice Messages : 375
Age : 30
Date d'inscription : 09/07/2016
Localisation : Montréal
| Sujet: 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! |
|
Blake oh my universal Messages : 1521
Age : 24
Date d'inscription : 01/01/2016
Localisation : Dans le placard sous l'escalier
| Sujet: Re: Les bases du codage Lun 11 Juil - 18:22 | |
| Super ce tutoriel avec toutes les bases |
|
blue mermaid oh my universal Messages : 53
Date d'inscription : 08/07/2016
| Sujet: 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 |
|
Dreamzz modératrice Messages : 375
Age : 30
Date d'inscription : 09/07/2016
Localisation : Montréal
| Sujet: 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 (; |
|
blue mermaid oh my universal Messages : 53
Date d'inscription : 08/07/2016
| Sujet: Re: Les bases du codage Sam 16 Juil - 12:24 | |
| Voilà, c'est fait. Merci pour ton conseil |
|
| Sujet: Re: Les bases du codage | |
| |
|