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

Partagez | 
 

 HTML & CSS n°1

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

Admin


MES POSTS : 20
CHROMOSOME : Féminin
CARNET DE ROUTE
•• AFFINITÉS :
•• PUF: Pseudo
•• CLAN & RANG:

MessageSujet: HTML & CSS n°1   Dim 17 Juil - 8:03

# . CREER UNE DIV
    Saluuuuuuut mes cacahuètes d'amour <3 Aujourd'hui, votre tata Mélopée va vous apprendre a créer une "div". Qu'est-ce qu'une "div" me diriez vous ? Eh bien, c'est tout simplement deux balises que l'on peut modifier pratiquement a l'infini ! Cela permet d'enfermer vos liens, vos textes et vos images dans une espèce de boîte - mon cours est prisonnier d'une DIV, par exemple x'). C'est la partie majeure du codage HTML .... Je tiens a vous dire que je ne me casse pas le derrière pour que vous fassiez un stupide copier/coller, je veux avant tout que vous compreniez ce que je vais vous apprendre. Prêts ? Accrochez vous, c'est parti !


    1 - Bordure && Fond

[list]Bon. Pour vous aider, je vais parler par métaphore. Voyez la boîte que nous allons faire comme une maison. Quand on construit une maison, on ne s'intéresse pas directement à l'esthétisme, eh bien pour une boîte, c'est la même chose. Il faut commencer par faire les fondations. Aussi, on commence par mettre ceci dans notre message :
Code:
<div style=" "> </div>
TOUT le code que nous allons mettre devra être mis entre guillemets ! C'est capital ! Jusqu'ici vous devriez suivre, c'est assez simple.

Nous allons dresser les "murs" de la maison, et j'entends par là la bordure de la boîte. Dans les guillemets, on ajoute le code "border". Je vous montre un exemple de bordure :
Code:
<div style="border: 3px double ##d890ff">Test</div>

Ce qui donne :
Test

    3px : épaisseur de votre bordure
    Double: Bordure en double. Il y a d'autres styles de bordures, que je vous laisse découvrir : il vous suffit de remplacer "dashed" par : solid ( trait uni), dashed ( petits traits ) ou dotted ( petits points ).
    #d890ff : Le code couleur. ici, du rose foncé. Pour sélectionner rapidement vos codes couleurs, RDV ici


Maintenant, passons au fond de notre boîte. C'est toujours assez dur d'équilibrer la couleur du contour avec celle du fond, mais nous allons y arriver, vous verrez !
Pour ajouter un fond a notre boîte, nous avons deux choix. Soit avec une couleur, soit avec une image. Je vais faire ma boîte avec une couleur car c'est plus simple, mais voici le codage pour ceux qui veulent utiliser un fond avec motif : background: url('URL DE VOTRE IMAGE'). Pour le codage couleur, c'est simple, vous rajoutez : background-color: #CODE COULEUR. Ici aussi, le sélecteur de codes vous sera utile. Exemple :
Code:
<div style="border: 3px double #d890ff; background-color: #f5e0ff">Test</div>
Test

Ah, avant que j'oublie. Vous remarquez le point-virgule entre les deux propriétés ? Il est impératif de le mettre, suivi d'un espace. ça permet de séparer les deux codes :)
Jusqu'ici vous suivez ? Alors continuons.

    2 - Propriétés de Texte


Vous voyez, notre Div COMMENCE a ressembler a un truc sympa ! Mais il nous reste encore quelques petites choses a explorer. Par exemple, les propriétés de texte.
Pour que l'exemple soit plus flagrant, je vais remplacer mon petit "test" par un texte - il est en latin, z'étonnez pas si vous comprenez rien
Exemple :

Code:

<div style="border: 3px double #d890ff; background-color: #f5e0ff"; text-align: justify; text-shadow: 3px 3px 3px #000000; letter-spacing: 2px>
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>

Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.


    Text-align L'alignement de votre texte. Ici, justifié. Vous pouvez aussi mettre : left, right & center.
    Text-shadow: L'ombre sous le texte. Le "3px 3px 3px" qui suit n'est pas a modifier si vous ne vous y connaissez pas trop. Quand au codage couleur, vous agissez a votre guise.
    Letter-spacingOn ajoute de l'espace entre les lettres. Dans le genre, y'a aussi "word-spacing" ça ajoute de l'espace entre les mots.
    Color couleur du texte. Ici, violet foncé.

    On a presque fini, courage !

      3 - Autres propriétés


    Ouh làà ... ça commence a être mignon, mais y'a quelque chose qui me gène ... pas vous ? M'enfin, la div est complétement collée aux parois du forum ! On va arranger ça, avec une petite propriété appelée "padding". ça va ajouter de l'espace : voyez vous même.

    Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.


    Code:
    <div style="border: 3px double #d890ff; background-color: #f5e0ff; text-align: justify; text-shadow: 3px 3px 3px #ffa0fa; letter-spacing: 2px; color: #500050; padding: 5px">Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>

    C'est presque fini ! Je rajoute juste un petit truc qui ne sera pas pour vous déplaire =) Le code -moz-border-radius: 20px ( sachant que le nombre peut varier ) arrondira le cadre de ma DIV.

    Code:
    <div style="border: 3px double #d890ff; background-color: #f5e0ff; text-align: justify; text-shadow: 3px 3px 3px #ffa0fa; letter-spacing: 2px; color: #500050; padding: 5px; -moz-border-radius: 20px">Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>

    Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.



    Et voilàààà =) J'ai hâte de voir vos résultats !
    Il existe de nombreuses autres propriétés CSS mais c'est plus dur ... a voir dans le prochain cours :P

    (c) MELOW
    TUTORIEL EXCLUSIF POUR WOH
    TOUTE REPRODUCTION INTERDITE




Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://warriors-of-hell.forumgratuit.org
 

HTML & CSS n°1

Voir 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
 :: Préambule :: Question & Idées :: Questions-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit