Accueil
Dernières images
Rechercher
S'enregistrer
ConnexionCour Html N°2 | Débutant |
Page 1 sur 1
Cour Html N°2 | Débutant |
par GreenNazareth Mar 7 Jan - 3:20
COUR DE CODAGE N°2
Le voila enfin ! Vous l'attendiez ? et bien le voila ! Le fameux cour numéro... DEUX ! Si tu es là, c'est que tu as réussis le premier cour, félicitation 
! Ce n'était pas bien difficile mais il fallait tout de même apprendre ! Dans de cours la... ce seras un peu la même chose 
! Ce n'était pas bien difficile mais il fallait tout de même apprendre ! Dans de cours la... ce seras un peu la même chose Hein la même chose ? Vas y What The DUCK ?!
- Oui oui, What the DUCK... les gros mots c'est le mal :] ! Alors oui, ce cours sera encore très initiatique... mais c'est en forgeant que l'on devient forgeron n'est ce pas ? Durant ce cour, vous allez apprendre... les arrondis, les ombres, le side scroll et quelque autre balises [ Et oui encore ! ] qui peuvent vous être utile vu votre utilisation du Codage HTML [ Bah oui... je vais pas vous apprendre à créer un site web. ]
COURS N°2
Et voila comment on ajoute une scrollbars ! Mouahaha :] Mais ne vous en faites pas, je vais vous expliquer comment
Et voila comment on ajoute une scrollbars ! Mouahaha :] Mais ne vous en faites pas, je vais vous expliquer comment
Voici ce que vous devrez obtenir à la fin de la seconde étape.Comme dis précédemment, un codage en HTML de type Style commence toujours par la balise <*Div style=" Ici le reste de votre codage*>... et fini par <*/div*>. Je vais donc vous détailler le corps même du codage, en vous donnant les clefs, en espérant que vous n'avez pas oublier l'ancien cours
LES BASES A SAVOIR | COUR N°1 RAPPEL
- Spoiler:
Background-color: #Code Hexa ou Nom de la couleur
Ceci de toute évidence vous permet de modifier la couleur de votre arrière plan (autrement dit background). Celle ci sera alors présente dans l'intégralité de votre cadre.
color: #Code Hexa ou Nom de la couleur
Ceci de toute évidence vous permet de modifier la couleur de votre police (autrement dit de l'écriture). Celle ci sera alors présente dans l'intégralité de votre cadre.
Width: Chiffrepx ou chiffre% ou auto
Ceci détermine la largeur de votre Cadre. Il faut savoir que si vous ignorez la taille en largeur d'un forum, mieux vos utiliser les % ou le Auto. Si vous utilisez Chiffrepx, le cadre prendra la dimension ordonné en pixel, si vous mettez chiffre% votre cadre occupera le pourcentage du corps de message ordonné et si vous mettez auto celui ci occupera la totalité de l'espace disponible. [Astuce : Perso j'utilise pour le " premier cadre " la notion % qui permet par exemple de ne pas déformer les pages]
Height: Chiffrepx ou chiffre% ou auto
Ceci détermine la longueur de votre Cadre. Il faut savoir que si vous ignorez la taille en largeur d'un forum, mieux vos utiliser les % ou le Auto. Si vous utilisez Chiffrepx, le cadre prendra la dimension ordonné en pixel, si vous mettez chiffre% votre cadre occupera le pourcentage du corps de message ordonné et si vous mettez auto celui ci occupera la totalité de l'espace disponible. [Astuce : Perso j'utilise pour le " premier cadre " la notion auto qui permet de ne pas avoir à régler la taille de mes codages à chaque fois que j'utilise ce code là pour diverse choses]
Text-align: valeur
Vous devais remplacer Valeur par left, center, right ou justify. Ceci appliquera le positionnement du texte à tout votre cadre.
Border: chiffre-d'épaisseurpx Statut #code Hexa ou nom de la couleur
Alors attention... le border c'est long à expliquer ! Tout d'abord le Chiffre d'épaisseur c'est pour définir... ET OUI l'épaisseur de votre bordure ! Ensuite vient le Statut... ceci définit l'apparence de votre bordure qui peut être solid ( un trait droit ), Dotted ( des point ), dashed ( des traits ), outset ( sorte de cadre intérieur ), inset ( sorte de cadre extérieur), grooved ( mélange de out et de in ), Double ( baah... un double quoi xD ), Ridge ( impression de cadre simple réaliste ). Puis au final vient la couleur du cadre souhaité !
Padding: chiffrepx
Ceci vous permet de laisser une marge entre votre phrase et le bord du cadre ce qui est bien plus appréciable lorsque l'on code quelques chose de long comme une présentation.
Margin: chiffrepx ou auto
Cela permet de crée une marge entre votre codage et la page... 20px placerais votre cadre a 20px du bord mais aussi du haut. Margin-left: permet d'ajouter une marge seulement à gauche... etc, et auto le place au centre.
LES BASES A SAVOIR | COUR N°2
Border-Radius : chiffrepx chiffrepx chiffrepx chiffrepx
Ceci donnera l'arrondis a votre cadre ! faite plusieurs teste pour vous rendre compte de l'arrondi que celui ci présente et n'hésitez pas a varier les valeurs ! Cependant, si vous ne voulais pas un résultat... bon ok assez laid... eviter de mettre 4 chiffres différent... rester sur l'idée de deux paires de chiffre ou de mettre quatre fois le même
Box-Shadox : chiffrepx chiffrepx chiffrepx #Code Hexa ou Nom de la couleur
Tout comme le précédant, voici un code à plusieurs valeur ! Celui ci permet de créer une ombre autour de votre cadre
! text-Shadox : chiffrepx chiffrepx chiffrepx #Code Hexa ou Nom de la couleur
Tout comme le précédant, voici un code à plusieurs valeur ! Celui ci permet de créer une ombre autour de vos écris
!Overflow: auto
Ceci est... la fameuse... scrollbars !! ET OUI ! à savoir que le seul overflox dont vous aurez besoin... c'est le Auto, qui crée, comme son nom l'indique la scrollbars automatiquement et vous permetrat donc de crée comme je l'ai fait dans l'exemple, un tout petit carré, renfermant pas mal de chose !!![/b][/color]
LES BASES A SAVOIR | COUR N°2.5
comme dis plus haut... certaines balises sont très utiles et son complétement indépendant de votre Div Style ! celle ci sont présente dans quasiment tout les codage sous forme de <*Mot*> Blah blah blah . en voici certaines, dont les gens se serve usuellement.
<*BLOCKQUOTE> Ajoute une tabulation sur tout le texte pris dans la tabulation...
Exemple :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna neque, aliquam in pellentesque vitae, vestibulum nec purus. Maecenas accumsan elementum urna, ac vestibulum lacus venenatis et. Proin rhoncus mattis orci, eleifend vestibulum mauris rutrum sagittis. Fusce odio libero, tempor non vulputate eget, scelerisque at massa. Ut tempor gravida sem at aliquam. Praesent ut quam fermentum, adipiscing tellus nec, auctor magna. Vivamus placerat hendrerit sapien. Nunc sollicitudin venenatis dignissim. Integer mollis bibendum accumsan. Integer eget adipiscing dolor, vel porttitor nunc.
<*BR*> Retour à la ligne forcé ! Permet aussi d'aéré les codage... entre deux cadre par exemple. Cette balise ne nécessite pas d'etre fermé et fonctionne seule
<*SELECT*> Pour un formulaire de sélection.
exemple :
- Code:
<select name="select">
<option value="value1">Belle</option>
<option value="value2" selected>Ingénieuse</option>
<option value="value3">Rusée</option>
</select>
Et Voila ! Le second cour se fini là :] ! Encore une fois j'espère que tout cela est clair et net et que ça vous permettra de vous améliorer dans ce monde merveilleux du.. Codaaaaaage ~
C'était Nymphe Eastmile en direct de la Lune ~
Si jamais tu as un soucis, surtout n'hésite pas et poste ta question promis je ne mange pas !
Si tu préfère, je suis aussi joignable par MP si cela concerne un codage que tu prépare pour toi et ne souhaite donc pas le montrer à tout le monde
Le cour t'a plus ? N'hésite pas à dire merci ça fait toujours plaisir *^*
Si tu préfère, je suis aussi joignable par MP si cela concerne un codage que tu prépare pour toi et ne souhaite donc pas le montrer à tout le monde
Le cour t'a plus ? N'hésite pas à dire merci ça fait toujours plaisir *^*
GreenNazareth- Newbie
- Messages : 17
Date d'inscription : 03/01/2014
Age : 30
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|