AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

+ coder, c'est pas bien sorcier.


Partagez | .
 

+ coder, c'est pas bien sorcier.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
référante
avatar
◦ pseudo : elephant song.
◦ messages : 94
◦ avatar : antoine-olivier pilon.
MessageSujet: + coder, c'est pas bien sorcier.   Jeu 18 Déc 2014 - 2:26

coder, c'est pas bien sorcier.
le tout, c'est de comprendre ce qui se passe !


BON. Alors je sais que la plupart des gens sont absolument révulsés par les codages. JE SAIS que ça peut paraître difficile, et que parfois, croyez-moi, ça l'est. Laughing Le tutoriel que je vais vous rédiger ne va pas pouvoir vous apprendre à faire des forums entiers, parce que même moi j'en suis bien incapable, et pas mal de trucs sont difficiles à expliquer. Arrow Mais j'espère vous laisser la possibilité de faire pas mal de petites choses sympas. Et de vous aider à pouvoir toucher à des codes sans devenir fous.

Sur ce, si vous avez la moindre question, n'hésitez pas à la poser à la suite, vous ne serez peut-être pas le/la seul(e) à vous la poser. Et je mange pas. &&

NOTE : le tutoriel est rédigé avec mes propres mots. Je ne me sers d'aucun tutoriel déjà fait ou quoi. Alors soyez indulgents, please. Je suis une bidouilleuse, mais pas une codeuse professionnelle non plus. Laughing.

✩ introduction.
✩ pas plus compliqué que de cuisiner.
Le codage, dans les faits, c'est un peu comme une recette de cuisine : y a les ingrédients, les différentes parties, et quand on met certaines choses ensemble, ça donne certains goûts. Quand on met plein de trucs ensemble, ça donne un gâteau, un cake, un plat. Ou comparez ça à du français, pour les férus de français : on prend un verbe, on prend un mode, un temps, une personne, un genre, un nombre, et ça nous donne une conjugaison. Bref. En soi, c'est pas bien compliqué. Faut juste comprendre les différents éléments, ce qui se passe quand on les assemble, et le tour est joué. Wink

✩ template, css, html.
Un rapide petit topo sur ces trois outils. Ce tutoriel traite bien entendu du HTML, mais parce que je vais parfois parler de css, je tiens à vous expliquer ce que à quoi template et css correspondent. (si vous vous en fichez et ne voulez pas vous embrouiller l'esprit non plus, n'hésitez pas à sauter, ce n'est pas bien important.)

Les templates sont situés dans le panneau d'administration d'un forum, et servent à donner une apparence à chaque page qui s'affiche, à chaque partie de page, parfois. Par exemple, il y a un template pour l'affichage de la liste des sujets dans un forum, un template pour l'affichage d'un sujet en lui-même (comment s'organise votre profil, la position de l'avatar, du pseudo, etc.), un template pour l'affichage des catégories, pour le « qui est en ligne », etc. Bref, invasion de templates.

Le CSS, lui, permet d'organiser un peu toute cette apparence. Dites-vous que si on devait faire chaque template avec tous ses petits codes, et répéter à chaque fois les combinaisons, ce serait bien long ! Le CSS sert à faire des codes prédéfinis, en quelque sorte. C'est un peu le travail préparatoire, fait en amont, qui contient toutes les informations du codage. Le CSS est composés de codes « clés », si je puis dire, qui sont ensuite divisés en une liste de propriétés. Ces codes clés sont ensuite insérés dans les templates (ou dans du HTML, parfois), et leurs propriétés s'appliquent directement.

Je ne sais pas si ces petites explications vous permettent d'y voir plus clair (pour ceux qui n'ont pas l'habitude du tout des termes). Mais en somme, les templates sont les os, le css correspond aux muscles et à la peau qui s'y rattachent, et qui donnent la possibilité aux os de se mouvoir et de s'articuler. Et vous, dans la vie de tous les jours, vous voyez le corps bouger !

Le HTML, quant à lui... Et bien, ça correspond tout simplement à la manière de coder, à la forme des codes, si je puis dire. Les templates sont en partie composés de codes HTML (pour le CSS, c'est plus compliqué). Et c'est ce que je vais vous apprendre, en partie, dans ce sujet.

✩ chapitre 1 : les balises, ou fondations.

✩ du crochets au chevrons ?
Les codes que je vais vous aider à construire ne sont pas entourés de crochets « classiques », comme les formes simples [b] [i] ou encore [color=#000000] etc. Là, on parle des fameuses balises div et span, entourées de petits chevrons comme ceci : <> : c'est ce qu'on appelle donc du code HTML. (NOTE : je ne peux pas vous les mettre pour de vrai entre chevrons. Toutes celles qui seront entre chevrons seront dans des balises
[code*] pour la simple et bonne raison que ces balises, div et span entourées de <>, ne s'affichent pas, et sont TOUJOURS invisibles. L'un des pièges de les mettre : on ne sait jamais si on a bien refermé toutes les balises, ou non.)


✩ div et span.
Div et span sont les principales balises des codages avec des chevrons. Span correspond à la mise en forme du texte, principalement : sa police, sa taille, sa couleur, l'interligne, son opacité, etc. Vous ne pourrez pas mettre en page un texte avec une simple balise span (cadre, tableau, marges, largeur, etc.). Pour ça, vous aurez besoin d'une balise div. La balise div sert à coder absolument tout, et inclut l'apparence du texte ET sa mise en page. Ce qui explique qu'elle soit partout. Et d'où le fait qu'il faille faire particulièrement attention au nombre qu'on ouvre, et à celui qu'on ferme.

Vous me direz, si div fait tout, pourquoi est-ce qu'on ne l'utilise pas tout le temps ? Et bien tout simplement car la balise span ne déforme jamais la page, puisqu'elle s'applique essentiellement sur l'apparence du texte, et non sa place. Ainsi, vous pourrez mettre des balises span partout sans que ça n'influe sur la mise en page. La balise div, elle, entraîne toujours un retour à la ligne à son ouverture, et un retour à la ligne à sa fermeture. Et ça peut être embêtant. Donc quand on voudra juste modifier la police, la taille des caractères, etc., on aura recours à span, plutôt qu'à div.

✩ on ouvre, et on ferme.
La première chose qu'il faut savoir, et qui s'applique à toutes les balises, aussi bien [] que <>, c'est qu'une balise, ça s'ouvre et ça se referme. On l'ouvre avec ses crochets normaux : <> et []. Et on la referme avec les mêmes crochets, en plaçant simplement un / juste après le crochet d'ouverture. Comme ceci : (le bla est bien sûr à remplacer par le reste de la balise, qu'on va créer).
Code:
<div> = balise d'ouverture
</div> = balise de fermeture

✩ et en ouvrant, on donne les informations.
La balise d'ouverture contient toujours toutes les informations nécessaires à votre code, alias tout ce que vous allez vouloir mettre comme propriétés à votre code. Par exemple, si vous désirez faire un cadre, vous allez pouvoir avoir envie de régler sa largeur, sa hauteur, le défilement, la couleur du texte, et la couleur du fond. Ces cinq propriétés seront contenues dans la balise d'ouverture. La balise de fermeture, elle, est sobre, et ne contient que le support de la balise d'ouverture. Par exemple, si on code avec des balises div, voilà ce que ça va vous donner : (note : contenu correspond à ce que vous voulez modifier, mettre en page)
Code:
<div LESINFORMATIONSÀLASUITE>contenu</div>

✩ chapitre 2 : les informations.

✩ class ou style ?
Sans hésiter, pour ce tutoriel, style. Class sert à insérer un codage déjà prêt, et disponible dans une page CSS (par exemple, quand dans les signatures des membres je propose une balise div avec class="signa1titre", ça veut dire qu'au préalable, dans ce qu'on appelle le CSS du forum, il y a un code qui correspond à "signa1titre", et qui contient toutes les informations nécessaires à mettre en page votre titre ; la balise class l'applique. Je vous apprendrai à créer des codes CSS dans un autre tutoriel, mais plus tard. Pour le moment, éloignez class de votre esprit, et ne gardez que style. C'est ce qui va vous permettre de faire des

✩ la mise en page des informations.
Les informations s'insèrent donc dans la balise d'ouverture. C'est elles qui vont commander votre code. Elles sont introduites par « style= », et placées entre guillemets anglais "", comme ceci :
Code:
<span style="INFORMATIONS">contenu</span> pour les balises span
OU
<div style="INFORMATIONS">contenu</div> pour les balises div
Les informations seront toutes introduites entre les guillemets anglais. Elles se présenteront ensuite sous la forme d'un élément, auquel sera associé une valeur. Par exemple, nous aurons l'élément largeur (width) auquel sera associé, donc, une valeur (comme 450px, pour une image de 450px de largeur). Les deux seront séparés par deux points, et la valeur sera suivie d'un point virgule, comme ceci :
Code:
élément: valeur;
Pour la suite, vous ajoutez donc autant d'éléments que vous ne voulez réglez de paramètres. Ce qui, au final, nous donne un code semblable à cela : (exemple pour une balise div, c'est la même chose avec une balise span)
Code:
<div style="élément1: valeur1; élément2: valeur2; élément3: valeur3;">contenu</div>


Voilà à quoi ressemblent les innombrables choses que vous voyez s'étaler sous vos yeux lorsque vous regardez des codes. Le tout, ensuite, c'est de comprendre les éléments, à quoi ils correspondent, et quelles sont les valeurs associées. Pour ça, suite dans le prochain post.

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
référante
avatar
◦ pseudo : elephant song.
◦ messages : 94
◦ avatar : antoine-olivier pilon.
MessageSujet: Re: + coder, c'est pas bien sorcier.   Jeu 18 Déc 2014 - 4:06

LA MISE EN PAGE RESTE À VOIR, C'EST UN PREMIER JET, JE VAIS FAIRE AU MIEUX POUR AMÉLIORER LA NAVIGATION


✩ éléments et de leurs valeurs
Nous avons donc vu de quoi sont composés des codes HTML « complexes ». En effet, certains sont plus simples, et ne requièrent pas l'usage des balises span, ou div. Vous les retrouverez dans la catégorie suivante, « les éléments de base ». Wink

Pour le reste, voici donc, en spoiler, une liste d'éléments qui pourraient vous servir, d'à quoi ils correspondent, et des valeurs qui y sont associées.

✩ color (comme son nom l'indique... c'est pour la couleur. la couleur de la police, ici.)
    → ATTENTION. les valeurs sont à indiquer SOIT avec leur nom précis, et dans ce cas il ne sera précédé de rien ; SOIT en codes couleurs, que vous pourrez trouver sur des sites de graphisme, ou dans la nouvelle version de l'éditeur de couleurs de forumactif, ou sur un panneau d'administration : à ce moment-là, le code de la couleur devra être précédée d'un #.

exemple (fonctionne avec div et span) :
 


✩ font (elle correspond à la police ; en HTML, elle n'est pas utilisée seule. voir balises suivantes.)

✩ size (règle la taille de la police : couplé avec font, donne « font-size »)
    → les valeurs peuvent être en « pt » ou en « px ». pour vous donner une référence, la police principale du forum est de taille 11px. sachez que la police influe sur la taille.

exemple (fonctionne avec div et span) :
 


✩ family (règle la famille de la police : couplé avec font, donne « font-family »)
    → les valeurs sont des valeurs écrites, des noms de polices. vous pourrez récupérer des polices spéciales à mettre dans vos posts, je vous les donnerai dans un autre sujet.

exemple (fonctionne avec div et span) :
 


✩ line-height (règle la taille de l'interligne)
    → les valeurs peuvent être en « pt » ou en « px ». perso, je fais des tests pour régler comme je veux xD

exemple (fonctionne avec div et span) :
 


✩ opacity (règle l'opacité d'un élément)
    → les valeurs sont comprises entre 0 (complètement invisible) et 1 (opaque). La décimale est à séparer de son chiffre par un point, et non une virgule.

exemple (fonctionne avec div et span) :
 


✩ width (règle la largeur de tout et n'importe quoi, y compris d'une zone de texte si vous voulez juste faire en sorte que votre texte ne dépasse pas de la largeur de votre image, par exemple)
    → les valeurs sont à indiquer en pixels (px), en fonction de la largeur que vous désirez.

exemple (fonctionne avec div) :
 


✩ height (règle la hauteur de tout et n'importe quoi, y compris d'une zone de texte si vous voulez juste faire en sorte que votre texte)
    → les valeurs sont à indiquer en pixels (px), en fonction de la hauteur que vous désirez.
    l'exemple sera fourni avec celui de l'élément overflow, ci-dessous.

✩ overflow (permet le défilement des éléments dans une zone donnée. pratique, notamment quand on a donné une certaine hauteur à son cadre de texte, et qu'on veut quand même pouvoir tout lire !)
    → la valeur habituelle est "auto", pour rendre le défilement automatique dans le cas d'une valeur trop petite pour le texte disponible.
    l'exemple inclut celui de l'élément height.

exemple (fonctionne avec div) :
 

ET PLEIN D'AUTRES À VENIR, BE PATIENT


✩ éléments de base




à venir :
 

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

+ coder, c'est pas bien sorcier.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» DE GABRIEL BIEN AIME A MARC BAZIN LES PRIMAIRES SANG UN CONSEIL ELECTORAL !e
» Réfléchie bien !
» Faut bien trouver une occupation... [ PV : Patte d'Hiver ]
» Vous dirai-je « tu », ou bien me diras-tu « vous » ? »
» [Réservé]Du mal pour faire du bien [Rang D]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
INDIGO HOME. :: la détente :: dreamland :: tutoriels-