Sujet: Cour de Codage N°2 | Débutant | Dim 1 Déc - 1:22
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
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
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 :
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 *^*
Luxana S. Aylesburry Ranger
Messages : 112 Date de naissance : 14/03/1994 Date d'inscription : 21/11/2013 Âge réel : 30
Sujet: Re: Cour de Codage N°2 | Débutant | Dim 1 Déc - 1:45
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.
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
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
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
Code:
<div style="background-color: #3399cc; color:#ffffff; width: 400px; height: 500px; text-align: justify; border: 4px double #ffffff; padding: 10px; margin: 30px; border-radius : 10px 10px 10px 10px; box-shadow : 3px 3px 3px #336699; text-shadow : 2px 2px 2px #000000; overflow: auto">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.
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
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
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</div>
Voici ce que j'ai pu faire cette fois o/ J'ai bien sûr repris mon code du premier cours, pour une continuité et tout o/. Je trouve le résultat plutôt pas mal pour un début. J'ai, encore une fois, hâte d'en apprendre plus.
Mille merci Nymphounette, tu es génialissime. <3
Nymphe Eastmile
♥ Don't you trust me? ~
Messages : 128 Date de naissance : 22/10/1994 Date d'inscription : 05/11/2013 Âge réel : 29
Sujet: Re: Cour de Codage N°2 | Débutant | Dim 1 Déc - 20:03
Sympa, je vois aussi ça en création de sites en fait. xD Css intégré dans de l'html grâce à l'attribut style. Théoriquement, je pourrais déjà faire un bon petit truc bien sympa, mais je suis un peu flemmard et j'aime pas trop utiliser cette technique pour mes rps ( déjà qu'on se plaindrait presque de la longueur habituel... x'3 ), mais ça ne concerne que moi et ça ne me dérange absolument pas sur autrui. =3
J'ai quand même appris deux ou trois petites choses. ^^ Je ferai une petite démo, si j'ai le temps. =)
Accueil
Sujet: Cour de Codage N°2 | Débutant | 
Dim 1 Déc - 1:22
! 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 
