₪ Académie Keimoo ₪

In a decade, will you be there ?
 
AccueilAccueil  FAQFAQ  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 • Aide au Code •

Aller en bas 
AuteurMessage
Académie Keimoo
▼ Administrateur gestionnaire
▼ Administrateur gestionnaire
avatar

Poissons Age : 118
Compteur 424

KMO
                                   :

MessageSujet: • Aide au Code •   Lun 26 Jan 2015 - 1:38


Aide au Code


Voici, à votre demande, le topic d'aide au code tant attendu ! =)
Des tutoriels seront postés à la suite de ce message, et référencés ici même dans le premier post.
Si vous avez un tuto à soumettre, veuillez l'envoyer à Jin Ikeda par MP afin qu'il soit vérifié, puis postez-le à la suite dès que vous avez le feu vert. Il sera ajouté à l'index par nos soins !
Toute question est évidemment la bienvenue ! ;)





__________________________________________________
♪ En cas de constat d'une faute d'orthographe ou une erreur du compte Academy Keimoo, d'une annonce ou d'un post-it, merci de le signaler ici


Dernière édition par Academy Keimoo le Lun 26 Jan 2015 - 1:44, édité 1 fois
Revenir en haut Aller en bas
Jin Ikeda
♣ Université - 3ème année
avatar

Genre : Masculin Sagittaire Chèvre Age : 26
Adresse : (6) rue Oméga Immeuble Sarugaku, Apt 101
Compteur 136
Multicompte(s) : Quinn Blackwood • Creepy

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Lun 26 Jan 2015 - 1:43


Introduction au code


La première chose à retenir, le truc qu'on retrouve partout, c'est ça :

 
Code:
<div style="...">BLABLABLA</div>

La div, c'est la base !
Là où se trouvent les points de suspension, c'est là qu'apparaitront toutes les caractéristiques de votre code.
Chaque caractéristique sera suivie par un point-virgule. Si votre code ne fonctionne pas, vérifiez les points-virgule ! C'est souvent là qu'est le problème ! Ou alors, il peut s'agir des guillemets, qui doivent bien encadrer toutes les caractéristiques.

Tout le reste dépend de ce que vous voulez faire =)

• color:#71A0F7; → Tout simplement, la couleur de votre texte. Pour un maximum de couleurs à utiliser : http://www.code-couleur.com/

Exemple

 
Code:
<div style="color:#71A0F7;">Exemple</div>


• background-color:#ffffff; → La couleur de fond du texte. Seule, cette balise se contentera de surligner votre texte sur toute la largeur du forum.

Exemple

 
Code:
<div style="background-color:#D1D1D1;">Exemple</div>


• padding: 20px; → Le "padding", en gros, c'est la marge. Vous pouvez choisir son épaisseur et, à coup de "padding-left" ou "padding-right" ou "padding-top", décider de où elle sera.

Exemple

 
Code:
<div style="background-color:#D1D1D1;padding: 20px;">Exemple</div>

Exemple

 
Code:
<div style="background-color:#D1D1D1;padding-top: 20px;">Exemple</div>


• border-right:solid 7px #93AAC4;
border-left:solid 7px #93AAC4;
border:1px solid #000000
border-bottom: 1px dotted #999999;


→ Les balises "border" en tous genre servent à mettre un cadre. "border" seul mettra un cadre tout autour de votre texte ; en y ajoutant "right", "left", "top" ou "bottom", vous pouvez choisir de ne pas mettre de cadre partout =3
Vous pouvez le constater, lorsqu'une seule balise a plusieurs caractéristiques, elles sont placées toutes à la suite, séparées uniquement par des espaces.
Il existe de plus plusieurs style de borders :

     dotted (pointillé)
     dashed (tirets)
     solid (solide)
     double (double)
     groove (rainurée)
     ridge (relief)
     inset (relief intérieur)
     outset (relief extérieur)


Exemple

 
Code:
<div style="border:1px solid #000000;">Exemple</div>
Exemple

 
Code:
<div style="border-bottom: 1px dotted #999999;">Exemple</div>


• text-align:center; → L'alignement de votre texte ! "right", "left", "center" ou "justify"


• font-variant: small-caps;
• font-size:20px; → Taille du texte
• font-family: 'century gothic'; → Police de charactère
• letter-spacing: 4px; → Espace entre les lettres
→ Les divers moyens de personnaliser le texte en lui-même.
A savoir que toutes les polices ne fonctionnent pas, seules les plus "classiques" sont autorisées ! (mais il existe d'autres moyens d'être original là-dessus, on en parlera une autre fois ♥)

Exemple

 
Code:
<div style="font-variant: small-caps;font-size:20px;font-family: 'century gothic';letter-spacing: 4px;">Exemple</div>



On continue...?


• width:200px; → Largeur
• height:200px; → Hauteur
→ Ça, c'est primordial, c'est ce qui détermine la largeur et la hauteur de votre cadre !
Vous pouvez bien sûr utiliser les deux séparément.

Exemple

 
Code:
<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;">Exemple</div>

Et si vous craignez d'avoir trop de texte comparé à la taille de votre box, il suffit d'ajouter overflow: auto;, qui, au besoin, ajoutera une barre de défilement sur le côté \o/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus euismod vehicula. Suspendisse feugiat nibh non tincidunt porta. Maecenas vel neque quam. Ut vitae egestas nisl. Nulla bibendum nibh sed efficitur suscipit. Nulla rhoncus vitae tortor vel dapibus. Aenean porttitor sagittis libero sed viverra. Etiam venenatis id metus sit amet congue. Nulla feugiat dui non massa mattis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis est sit amet dolor imperdiet ultricies. Quisque quis condimentum dui. Phasellus tempus vehicula tempor. Mauris faucibus sagittis facilisis. In ligula ligula, luctus non velit ac, blandit facilisis ante.

 
Code:
<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;overflow: auto;">Exemple</div>


• border-radius:30px;
border-top-left-radius:60px;
border-bottom-right-radius:60px;


→ La balise "border-radius" s'utilise pour arrondir les bords. En utilisant "top", "bottom", "left" et "right", on peut choisir quel coin arrondir.

Exemple

 
Code:
<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;border-radius:30px;">Exemple</div>
A prendre en compte : on ne peut arrondir un coin où il y a une barre de défilement.


Toujours motivés ? Allez, on va mélanger tout ça !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus euismod vehicula. Suspendisse feugiat nibh non tincidunt porta. Maecenas vel neque quam. Ut vitae egestas nisl. Nulla bibendum nibh sed efficitur suscipit. Nulla rhoncus vitae tortor vel dapibus. Aenean porttitor sagittis libero sed viverra.

Etiam venenatis id metus sit amet congue. Nulla feugiat dui non massa mattis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis est sit amet dolor imperdiet ultricies. Quisque quis condimentum dui. Phasellus tempus vehicula tempor. Mauris faucibus sagittis facilisis. In ligula ligula, luctus non velit ac, blandit facilisis ante. Donec consectetur sed velit nec mollis. Maecenas posuere ut urna a elementum. Proin purus sapien, blandit ut iaculis sit amet, posuere nec urna.

 
Code:
<div style="background-color:#C7CCE2;color:#1B2651;padding:20px;width:400px;height:200px;overflow: auto;border: 1px solid #DCE1F7;font-variant: small-caps;border-top-left-radius:60px;">Exemple</div>


Pas trop perdus ? =3

Dernier point : Les div peuvent s'emboiter à l'infini, c'est pas beau, ça ? =D Une div, dans une div, dans une div, dans... Mouhaha.

 
Allez, courage ! Surtout, n'oubliez pas de fermer vos div, vérifiez les points-virgule et les guillemets, et, avant tout, soyez patients ♥


__________________________________________________
Revenir en haut Aller en bas
http://tokyo109.forum-actif.net/ http://keimoo.forum-actif.net/t8789-jin-ikeda-20 http://keimoo.forum-actif.net/t5707-9658-chrono-de-jin-despicable-me#169251
Narcisse De Lioncourt
▼ Civil - Mannequin
avatar

Balance Buffle Age : 32
Compteur 404
Multicompte(s) : Ayame Igarashi & Andrea Stormfield

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Lun 26 Jan 2015 - 1:45


Des polices pour vos titres


Vous avez sûrement remarqué que souvent, dans les codes un peu travaillés, on retrouve du texte dont les polices ne sont pas proposées sur Forumactif... Et qui ne sont pas des images (cf. le titre de ce post, par exemple). Sorcellerie, me direz-vous !
Mais non, mais non... Juste Google Fonts =D

Google Fonts, c'est ça.

Basiquement, c'est une banque de polices gratuites à intégrer dans de l'HTML ou du CSS.

Les polices sont présentées comme ça, directement sur la page d'accueil de Google Fonts :



Pour vous en servir, cliquez sur le bouton "Quick use"



Vous voilà donc sur la page de la police que vous avez choisi.

Les cadres 1 et 2 sont généralement déjà configurés comme il faut, vous n'aurez donc probablement pas à y toucher.
Dans le cadre 1, vous trouverez les différentes versions de la police sélectionnée - ici, par exemple, il n'y en a qu'une seule.



Le cadre 2 concerne les différents types de caractères. Si vous choisissez de ne sélectionner que "Latin", vous aurez uniquement notre alphabet. En ajoutant "Cyrillic", vous pourrez écrire en Russe o/ C'est pas magnifique ?




Le cadre 3 est une étape indispensable. En gras italique souligné, oui, j'insiste.
Ici, vous devrez sélectionner le code disponible dans l'onglet "Standard", et le coller dans votre message. Peu importe l'endroit où il sera, il n'apparaîtra pas une fois le message posté, et il fonctionnera pour toute la page (généralement, on le met en haut du premier message).




Viens ensuite le moment d'utiliser ladite police dans une div !



A partir de là, on retombe sur les principes expliqués par Jin dans le premier post : intégrez le code disponible dans le cadre 4 comme suit, sans oublier d'ajouter la taille souhaitée pour votre texte :
Code:
<div style="font-family: 'Lobster', cursive; font-size: 24px;">Exemple</div>

• Exemple



Voilà pour aujourd'hui ! o/ N'hésitez pas à demander si vous avez des questions =)


__________________________________________________

Revenir en haut Aller en bas
http://keimoo.forum-actif.net/fiches-validees-f111/narcisse-v2-t6574.htm#184012 http://keimoo.forum-actif.net/t7736-trough-the-looking-glass
Jin Ikeda
♣ Université - 3ème année
avatar

Genre : Masculin Sagittaire Chèvre Age : 26
Adresse : (6) rue Oméga Immeuble Sarugaku, Apt 101
Compteur 136
Multicompte(s) : Quinn Blackwood • Creepy

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Lun 26 Jan 2015 - 1:54


De bien beaux tableaux


Dans les codes des fiches et des chronologies, s'il y a bien un truc qui sert à tout, ce sont les tableaux.
Seul problème : bien qu'il s'agisse d'une fonction de base de Forumactif, ils sont loin d'être instinctifs à utiliser.

C'est le dernier de cette ligne, si vous vous posez la question ♥

Je vais donc tenter de réunir ici tout ce que je sais à leur sujet, histoire de les rendre un peu plus amicaux =)

Le code d'un tableau simple à deux colonnes et deux lignes se présente comme ceci :

Code:
[table][tr][td][/td][td][/td][/tr]
[tr][td][/td][td][/td][/tr][/table]

Vu comme ça, c'est barbare.
La balise "table" correspond au tableau dans son ensemble.
La balise "tr" désigne une ligne, et c'est dans celle-ci que se trouveront les balises "td" qui correspondent aux colonnes.

BLABLA
BLABLA
Les tableaux peuvent être centrés, alignés à gauche, ou à droite (ce n'était pas le cas il y a quelques temps, vous avez de la chance ♥)


Ils peuvent être placé dans une "div", et chaque cellule (les "td") peut en contenir également ! En revanche, ce n'est pas le cas des "tr".

BLA
BLA
BLA
BLA


Code:
<div style="background-color:#74A4ED;padding:10px;">[table][tr][td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td]
[td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td][/tr]
[tr][td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td]
[td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td][/tr][/table]
</div>

Évidemment, toutes les méthodes de personnalisation des div fonctionnent ici.
C'est d'ailleurs grâce à elles que vous pourrez, notamment, délimiter proprement vos cellules, décider de leur taille, etc... ! En effet, la taille des cellules dépend entièrement de leur contenu ; ainsi, si une cellule contient une div de 50x50 px, elle fera 50x50 px. Tout simplement ! Veillez tout de même à prendre en compte la petite marge qui est automatiquement ajoutée autour des cellules.

BLA
BLA
BLA
BLA


Code:
<div style="background-color:#74A4ED;padding:10px;height:150px;width:150px;border:1px dotted black;">[table][tr][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][/tr]
[tr][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][/tr]
[/table]
</div>

Dernier point : chaque fois qu'on édite ou qu'on prévisualise, Forumactif a tendance à mettre des passages à la ligne partout ; c'est assez moche et ça peut tout décaler u_u Veillez à ce qu'il n'y en ai pas quand vous postez !


Et voilà ! Celui-là est assez court, et pourra paraître évident à certain(e)s, mais on ne sait jamais, y'en a peut-être que ça peut aider ♥


__________________________________________________


Dernière édition par Jin Ikeda le Jeu 19 Fév 2015 - 16:05, édité 2 fois
Revenir en haut Aller en bas
http://tokyo109.forum-actif.net/ http://keimoo.forum-actif.net/t8789-jin-ikeda-20 http://keimoo.forum-actif.net/t5707-9658-chrono-de-jin-despicable-me#169251
Cammy Logan
♦ Civil - {Pluri-emploi} Itinérante
♦ Civil - {Pluri-emploi} Itinérante
avatar

Genre : Féminin Poissons Cheval Age : 28
Adresse : Arms of Mother Nature
Compteur 870
Multicompte(s) : Shiki & Erik

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Lun 2 Fév 2015 - 19:08

Juste pour aider à trouver le bon support pour vos codes, je recommande le logiciel Notepad++
Il vous permettra de vous assurer que vos balises ouvertes soient bien fermées entre autres, et de sauvegarder convenablement vos travaux.

Lorsqu'une page est ouverte, penser à bien sélectionner le bon langage dans l'onglet...bah "Langage" en haut.
Langage -> H -> HTML

Ca marche aussi pour le BBcode, et pour ceux qui l'utilisent, le CSS =)

__________________________________________________
Autres comptes
Revenir en haut Aller en bas
http://keimoo.forum-actif.net/t8967-cammy-logan-23-ans-f-australienne http://keimoo.forum-actif.net/t7927-just-a-tear-drop-away#200099
Joshua Coda
♥ Professeur d'Anglais et Français {Lycée}
♥ Professeur d'Anglais et Français {Lycée}
avatar

Genre : Masculin Gémeaux Chat Age : 31
Adresse : Chez Kami Otagame
Compteur 159

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Dim 3 Mai 2015 - 9:47


Je n'ai pas de tutoriels à soumettre mais je souhaitais remercier très vivement tous ceux qui ont participé à ce topic, ça va beaucoup m'aider personnellement et je ne pense pas être la seule, surtout que c'était moi qui en avait fait la demande. J'espère un jour pouvoir vous rendre la pareille.
En attendant, un grand
MERCI

__________________________________________________

Avatar par Cammy Logan
Signature par Narcisse de Lioncourt  A01

Récompenses:
 
Revenir en haut Aller en bas
http://www.revedemay.canalblog.com http://keimoo.forum-actif.net/t9710-judikael-coda-professeur-de-francais-anglais#220309 http://keimoo.forum-actif.net/t9722-melancholic-language-teacher
Académie Keimoo
▼ Administrateur gestionnaire
▼ Administrateur gestionnaire
avatar

Poissons Age : 118
Compteur 424

KMO
                                   :

MessageSujet: Re: • Aide au Code •   Ven 17 Juil 2015 - 2:34

Voici la liste des codes couleurs de chaque groupes, que vous pouvez utiliser comme bon vous semble.

Citation :

Populaires : #DE4264
Sportifs : #545F91
Artistes : #53A4BD
Intellos : #FFAC5E
Racailles : #B33030
Rebelles : #40613C
Creepies : #A8566E
Punks : #6BBD06
Gothiques : #291E1E
Professeurs : #73548C
Personnels : #6FA883
Civils : #919191
Gossip : #AE82BD

__________________________________________________
♪ En cas de constat d'une faute d'orthographe ou une erreur du compte Academy Keimoo, d'une annonce ou d'un post-it, merci de le signaler ici
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: • Aide au Code •   

Revenir en haut Aller en bas
 
• Aide au Code •
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Aide CSS please
» Fiches de RP / Liens [Aide & Libre Service]
» [Aide] Je scan les QR code
» Code Pénal Ayisyen an demode.
» Du code d'éthique de l'Armée Mainoise

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
₪ Académie Keimoo ₪ :: ₪ Discussion générale ₪ :: Commandes-
Sauter vers: