AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

anipassion.com

    Partie 1 - Etape 1 : Mise en forme d'éléments de message

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Dim 9 Fév 2014 - 19:50

    Partie 1 - Etape 1 : Mise en forme d'éléments de message



    Les Langages (x)HTML et CSS



    Qu'est-ce que c'est ? A quoi ça sert ? Et pourquoi commencer par les deux à la fois au lieu de les apprendre séparément ?
    ... C'est vrai quoi ? C'est pas déjà assez compliqué comme ça sans en plus tout apprendre en même temps ?


    C'est vrai qu'en théorie, il serait idéal d'apprendre d'abord le html et après le CSS... Le problème, c'est que les séparer est impossible. Pour vous expliquer pourquoi, je vais vous définir ce que sont ces deux langages.

    Le (x)HTML : On parle généralement de "html", sans préciser le "x" qu'il y a devant. "HTML" signifie "HyperText Markup Langage" et le "x" ou "(x)" placé devant signifie "eXtensible". Inutile de retenir tout cela, il suffit de savoir que le html permet d'afficher des éléments sur une page grâce à des balises.

    Le CSS : "CSS" signifie "Cascade Style Sheet" ou en Français "Feuille de style en cascade". Retenez que le CSS c'est la mise en forme de vos éléments html : la couleur, les bordures, le "style", tout simplement.
    Pour résumer, le html vous sert à placer un élément (paragraphe, titre, zone en bloc ou en ligne...) et le CSS vous sert à l'agrémenter, à y mettre de la couleur, mais aussi des marges, un alignement précis, etc...

    Il est donc nécessaire d'apprendre à utiliser les deux à la fois sur votre forum, et en particulier dans la mise en forme des messages comme nous allons le voir, puisque du html sans css serait un texte simple, et du css sans html ne sert à rien puisque il n'y a rien à mettre en forme.


    Activer l'HTML sur votre forum



    Il est dans un premier temps important...que dis-je ? Vital ! d'activer sur votre forum la prise en compte de l'html, ou de vérifier qu'elle soit active. Pourquoi ? Tout simplement car si cette option n'est pas activée, c'est le code "pur" qui apparaitra dans le message et non la mise en forme que vous voulez.
    Pour autoriser la mise en forme HTML sur votre forum, allez dans le Panneau d'administration, dans l'onglet "Général", partie "Messages & Email". Cliquez ensuite sur "Configuration". Une page s'ouvre avec les options que vous pouvez mettre. Au début (premier cadre) vous avez "Autoriser le HTML" : oui/non. Il faut bien évidemment cocher "oui" !
    Par la suite, vous devez dans votre profil vous assurer que "Autoriser le HTML" est bien activé (dans la partie "Préférences").
    Cela fonctionne comme les signatures sur le forum finalement, vous pouvez avoir autorisé les membres à porter une signature, si dans leur profil c'est désactivé ils n'en auront pas. La différence avec le HTML c'est que si l'administrateur autorise le HTML dans le Panneau d'administration pour les membres l'option dans le profil sera automatiquement sur "autoriser".

    Une fois que vous vous êtes assuré que tout est actif sur votre forum vous êtes prêt à suivre la suite du cours.


    Le Principe des balises et les erreurs à éviter



    Lorsque vous rédigez un message sur un forum vous avez une mise en forme de base, même si vous n'en avez pas l'impression. Selon le choix de l'administrateur (votre choix si c'est votre forum) le texte est d'une couleur précise, d'une police définie, d'une taille définie... Il en va de même pour la couleur des liens par exemple. Pour changer cette mise en forme dans votre message, pour un titre précis et sans devoir modifier tout le reste de la mise en forme dans le Panneau d'administration, il va falloir agir dans le message en lui-même et imposer à chaque élément une mise en forme.

    Le BBcode ? Vous allez me dire que dans les messages ForumActif il y a déjà la possibilité de faire des mises en forme avec ce que FA appelle "le BBcode". Il s'agit des codes entre crochets que vous avez déjà pu voir, par exemple :
    Code:
    [b]Texte affiche en gras[/b]
    [url=adresse.html]Lien texte[/url]
    Evidemment, vous pouvez vous contenter du BBcode, il permet de faire des mises en forme standard de message, agrandir les polices, changer la police et la couleur du texte, changer les alignements de texte, etc... Mais il a ses limites, et vous voulez très probablement faire plus que ce que le BBcode vous propose, sinon vous ne seriez pas en train de lire ce cours ! x)

    Comment faire une mise en forme sans BBcode, avec du CSS ?


    Pour faire cela, la première chose à faire est de définir ces éléments, et pour cela il faut y mettre des "balises".

    Qu'est-ce qu'une balise ?
    Les balises sont en quelque sorte des "marqueurs" qui vont délimiter vos éléments. Vous les avez forcément déjà vue, en voici quelques exemples :
    Code:
    <img src="url.jpg" />
    Ceci permet d'afficher une image (avec l'adresse d'une image à la place de "url.jpg").

    Code:
    <a href="url">Ceci est un lien</a>
    Ceci permet de faire en sorte que le texte "Ceci est un lien" soit un lien menant vers le lien mis à la place de "url".

    Code:
    <b>Texte en gras</b>
    ou
    <strong>Texte en gras</strong>
    Celles-ci enfin (dont la première vous rappellera le premier BBcode que j'ai montré dans l'exemple plus haut) permet de simplement mettre un texte en gras.

    Jusque là, pas grandes différences avec le BBcode niveau possibilités, mais vous allez voir que cela permet nettement plus de choses.

    Comme pour le BBcode ou comme dans tout langage, il y a des règles à respecter pour utiliser les balises ! Il y'en a peu, et il faut absolument les avoir en tête et les suivre à la lettre.


    Règle numéro 1 : Toute balise ouverte doit être ensuite refermée
    Vous pouvez le voir dans mes exemples, il ne suffit pas d'ouvrir une balise pour y mettre un élément, il faut que l'élément soit enfermé dans la balise. C'est le "slash" ("/") placé dans la balise de fin qui permet de refermer la dite balise.
    Code:
    <span>Je viens d'ouvrir une balise de ligne... Et je la referme maintenant avec ceci : </span>
    Mais alors vous me direz que dans mon exemple avec l'affichage d'une image, la balise n'est pas refermée... Regardez :
    Code:
    <img src="adresse img" />
    En réalité si, la balise est bien refermée, seulement celle-ci se referme avec un simple "/>". C'est une exception (il en faut bien ! Ce serait trop simple sinon^^) et c'est la seule, avec le marqueur de retour à la ligne dont nous parlerons plus loin.

    Règle numéro 2 : Prenez l'habitude de tout écrire en minuscule dans vos codages, et sans caractères spéciaux
    N'utilisez pas d'accents, pas de symboles, sauf le trait bas "_" (touche Cool. Les chiffres sont autorisés sans problème.

    Règle numéro 3 : Les valeurs doivent être entre guillemets ou apostrophes
    Prenez par exemple le code pour afficher une image ou une adresse, l'adresse se trouve entre guillemets. J'utilise les guillemets uniquement, donc je vous apprends de cette façon là aussi, sachez juste qu'il est possible d'utiliser l'apostrophe.

    Règle numéro 4 : Les attributs doivent avoir une valeur
    Un exemple tout bête : dans le cas présent vous ne pouvez afficher l'adresse avec simplement le "href" sans sa valeur. Le code serait incorrect. Par conséquent, chaque fois que vous voulez préciser quelque chose dans le code avec ce qu'on appelle un attribut, vous devez lui mettre une valeur entre guillemets. Ne vous inquiétez pas, il est normal que cette règle soit peu claire encore, vous verrez qu'elle deviendra tout à fait logique avec la pratique au point que vous vous demanderez comment il est possible d'oublier la valeur de votre attribut !

    Règle numéro 5 : Les codes doivent s'imbriquer correctement
    En clair : apprenez à jouer aux poupées russes ! Et ce n'est pas une blague... x). La très grande majorité des balises vont pas deux, l'un ouvrant, l'autre fermant. Imaginez que ces deux parties sont les deux moitiés d'une poupée russe. Maintenant regardez ce code :
    Code:
    <span>Je commence mon texte et je mets <strong>quelques mots en gras.</span></strong>
    Ma première balise est ouverte, puis ma deuxième... mais j'ai refermé la première avant la deuxième balise. Ce code est FAUX. Il est incorrect et aboutira à des erreurs d'affichage si vous prenez de mauvaises habitude. Pensez toujours à refermer les balises dans l'ordre, imaginez vos poupées russes : le "span" est la grosse poupée, le "strong" est la petite : si vous refermez la grande poupée avec seulement la moitié de la petite à l'intérieur...et bien vous ne pourrez plus refermer la petite x).
    Voici comment présenter le code :
    Code:
    <span>Je commence mon texte et je mets <strong>quelques mots en gras.</strong></span>


    Mettre en forme un titre de message



    Passons à du plus concret avec la mise en forme de votre titre de message pour commencer. Afin d'isoler le titre et n'imposer la mise en forme qu'à lui, nous allons l'entourer d'une balise, comme ceci :
    Code:
    <span>Votre titre</span>

    Le résultat ? Bien vu ! Il n'y a rien du tout ! ^^ La balise n'apparait évidemment pas, mais rien n'a changé, avec ou sans balise tout est identique, votre texte n'a que la mise en forme de base. Pour quelle raison ? Et bien tout simplement car il va maintenant falloir intégrer quelque chose d'essentiel dans notre balise : du CSS !.

    Hop hop ! Minute, minute... Cette balise, là, ce "span", qu'est-ce que c'est ?


    C'est une balise que l'on appelle "générique", qui peut s'appliquer dans beaucoup de cas, et qui délimite un contenu en ligne, autrement appelé en terme Anglais "inline". Son opposé (ou complémentaire, plutôt) est la balise "div", qui elle est aussi générique mais ne délimite non pas une ligne mais un bloc (ensemble de lignes, zone large) et qui a donc la propriété "block" au lieu du "inline" du span, tout cela semble logique.

    Nous allons donc intégrer sur CSS à notre titre, et donc dans notre "span"
    Pour cela, nous allons directement noter le CSS à l'intérieur de la balise, comme ceci :
    Code:
    <span style="valeur">Votre titre</span>
    Inutile d'essayer ce code, il vous indique simplement comment procéder. Vous voyez désormais votre attribut : "style=" et votre valeur : ici simplement indiquée par le mot "valeur" qui devra être remplacé par le CSS que vous souhaitez imposer.

    Comment afficher du CSS ? Là aussi il y a des normes, et ce pour que le navigateur puisse lire et surtout comprendre le code que vous lui demander de transcrire. Voici comment s'écrit un code :
    Code:
    <span style="background-color: #ffffff;">Votre titre</span>
    Décomposons le code :
    - span => votre balise, ici de type "inline" (= en ligne), sans css elle ne changera rien au texte.
    - style => ici l'attribut indique qu'un style va être appliqué à ce qui se trouve dans la balise. Du coup, tout ce qui est indiqué entre guillemets (donc la "valeur" de cet attribut) va être imposé au texte "Votre titre".
    - background-color => indique sur quoi porte la mise en forme, cette indication doit obligatoirement être suivie de deux points ":", peu importe les espaces par contre, j'ai pour habitude d'en mettre un après les deux points et pas avant, mais il peut ne pas y'en avoir du tout.
    - #ffffff => il s'agit du code couleur qui correspond au blanc. Il vous faudra utiliser soit ces codes-là, soit les noms officiels des couleurs. L'un et l'autre vous pouvez les trouver sur le net : Codes couleurs et Nom de la couleur, mais aussi sur votre logiciel en ce qui concerne les codes couleurs.
    - ; => attention ! Ce point virgule ne parait pas très important, il est en fait capital ! C'est en effet avec lui que vous séparez deux données de css, donc deux valeurs. Oubliez-le et votre css précédent et/ou suivant ne sera plus pris en compte !


    Voici ce que donne ce code tout simple :

    Votre titre

    C'est simple, cela parait peu, mais une fois ce système compris vous pouvez faire plein de choses !

    Voici une petite liste de ce que vous pouvez employer pour commencer avec cette simple balise :

    ELEMENT MODIFIENOM DE LA PROPRIETEVALEURS POSSIBLESEXEMPLES
    Police de textefont-familyarial; - time new roman; - georgia; - trebuchet; etc... (attention, n'utilisez que des polices de base, c'est préférable)Arial - Arial black - Impact - Time new roman - Georgia...
    Taille du textefont-size12px; - 24px; ... tout chiffre en px (pixel) mais aussi small; - x-small; - large; (il existe d'autres mesures plus complexes dont vous n'aurez pas l'utilité dans l'immédiat, ni peut-être jamais d'ailleurs)10 px - 14 px - large - x-large...
    Couleur du textecolor#ffffff; (blanc), #000000; (noir) - ou tout autre code couleur possible, les noms des couleurs fonctionnent aussi, reportez vous aux liens mis plus haut pour le background.#000000 - #ff6c00 - Blue - Darkred...
    Espacement des lettresletter-spacingun chiffre en pixel, attention de ne pas trop élargir non plus. Conseillé : entre 1 et 4 pixels.Espace - Encore plus d'espace - Quatre pixels d'espace - Et ça marche en négatif aussi !
    Espacement des motsword-spacingvaleur en pixel, attention à la lisibilité !Entre deux mots 5 pixels - Entre deux mots 10 pixels
    Epaisseur du textefont-weightlighter; normal; bold; bolder; (certains n'ont pas d'effet avec certaines polices)Lighter - Normal - Bold - Bolder
    Transformation du textetext-transformuppercase (tout en majuscule), capitalize (première lettre en majuscule), lowercase (tout en minuscule)uppercase - Lowercase - capitalize
    Variantes de textefont-variantnormal ou small-caps (tout en majuscule mais petite majuscules)Small Caps
    Décoration de textetext-decorationoverline (souligné dessus), line-through (barré), underline (souligné dessous), blink (clignotant : déconseillé)Overline - Line through - Underline - Blink
    Couleur de fondbackground-colorcode couleur ou nom de couleur comme expliqué pour la couleur de texte#FFFFFF - Yellow - #b5b5b5

    Vous pouvez bien évidemment coupler autant de propriétés que vous voulez, faites seulement attention : votre texte doit être lisible, c'est quand même le but premier. Avant qu'il soit agréable à l'oeil c'est son sens que votre joueur/membre/lecteur recherche !


    Quelques exemples ?
    Code:
    <span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>

    Votre titre

    Code:
    <span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>

    Votre titre

    Code:
    <span style="font-family: impact; font-size: 34px; letter-spacing: 1px; color: #1a56d0;">Votre titre</span>

    Votre titre

    De nombreuses combinaisons sont possibles, et elles seront encore plus nombreuses à la fin de la partie suivante...


    Les Bordures



    Elles sont un outil très intéressant à utiliser et elles le sont beaucoup généralement. Regardez simplement sur ce site et observez les bordures utilisées. Chaque cadre texte en possède. Les titres peuvent également entre entourés avec cela de diverses façons.

    Voilà quelques exemples de bordure qui vous permettra d'en voir de nombreuses possibilités d'utilisation :

    PROPRIETEVALEURRESULTAT
    border1px solid #000000Bordure simple
    border1px dotted blueBordure points
    border1px dashed greenBordure tirets
    border4px double brownBordure double
    border2px inset greyBordure effet creusé
    border2px outset purpleBordure effet bombé
    border4px groove redBordure en relief
    border4px ridge darkredBordure en relief

    La taille des bordures peu être changée et à peu près toutes les combinaisons peuvent être faites. Cependant, les effets creusés ou en relief ne se voient pas sur des traits de 1px, il faut un minimum de largeur de trait pour que l'effet se voit.
    Attention également car les bordures en relief sont "lourdes" d'aspect, ça plombe un peu votre esthétique globale, je vous conseille donc de les utiliser modérément.


    Il est possible de faire d'autres variantes en ne mettant qu'un bord sur les quatre, par exemple... Voici quelques possibilités :

    PROPRIETEVALEURRESULTAT
    border-bottom3px solid #77563dBordure "soulignement" épaisse
    border-bottom2px dotted #1b95c8Bordure "soulignement" points
    border-top
    border-bottom
    (deux différents)
    1px dashed #ff7e00Double bordure pointillés
    border-left5px solid #70389bBordure gauche épaisse

    Vous pouvez ainsi dériver à l'infini ! N'oubliez simplement pas que pour n'afficher que deux bordures différentes au lieu de toutes ou une seule vous devez recommencer votre morceau de CSS, même su la bordure est identique ! Voici ci-dessous le code servant à afficher l'exemple numéro 3 dans le tableau (double bordure pointillés), vous devriez comprendre plus facilement...


    Code:
    <span style="border-bottom: 1px dashed #ff7e00; border-top: 1px dashed #ff7e00;">Double bordure pointillés</span>

    Pas besoin d'ordre, dès lors que les deux "border" sont présents.

    Un petit exemple en ajoutant une bordure à l'un des résultats précédents :

    Code:
    <span style="font-family: impact; font-size: 34px; letter-spacing: 5px; color: #1a56d0; text-transform: uppercase; border-top: 3px dotted #232087; border-bottom: 3px dotted #232087;">Votre titre</span>

    Votre titre

    C'est mieux non ? Vous pouvez ainsi vous amuser avec les bordures selon les cas, à mettre une bordure complète ou qu'un morceau... A votre convenance !

    Cependant, il reste un problème : ne trouvez-vous pas que la bordure est parfois trop collée au texte ? Si ? Alors il faut y remédier ! Ne pensez jamais que quelque chose est impossible en codage... Il faut toujours tout tenter car l'on se rend compte qu'on peut tout trouver.

    Pour passer de ceci : Bordure "soulignement" épaisse à cela
    Bordure "soulignement" épaisse il y a une solution toute simple : ajouter une marge intérieure à votre CSS !

    Pour cela, rien de bien complexe, il vous suffit d'ajouter à votre css la propriété suivante :
    Code:
    padding: 4px;

    Ce qui nous fait aller de ceci :

    Code:
    <span style="border-bottom: 3px solid #77563d;">Bordure "soulignement" épaisse</span>

    Bordure "soulignement" épaisse

    ...à cela :
    Code:
    <span style="border-bottom: 3px solid #77563d; padding: 4px;">Bordure "soulignement" épaisse</span>

    Bordure "soulignement" épaisse

    La propriété "padding" impose une marge intérieure et elle fonctionne comme la propriété "border", c'est à dire que vous pouvez choisir d'imposer une marge que sur l'un des quatre côtés par exemple, ou bien seulement en haut et en bas, etc... Pour cela affichez, comme pour la bordure, l'endroit où vous voulez la marge :

    padding-top = marge intérieur en haut

    padding-bottom = marge intérieure en base

    padding-left = marge intérieure à gauche

    padding-right = marge intérieure à droite



    Mises en forme de liens ou d'image



    Pour imposer le même genre de mise en forme à des liens ou des images, nous allons procéder à peu près de la même façon, à l'exception cependant que nous n'allons pas mettre une balise supplémentaire autour de notre lien ou de notre image, puisque eux-même en sont déjà. Nous allons simplement les écrire avec du html, et non avec du BBcode ! Je rappelle l'écriture d'un lien et d'une image :
    Code:
    <a href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
    <img src="adresse_image.jpg" />
    Puisqu'il s'agit de balises, il est tout à fait possible d'insérer à l'intérieur les mêmes données CSS que dans notre "span" un peu plus haut ! Il suffit donc d'ajouter "style=" et le tour est joué ! Voici ce que cela peut donner, en guise d'exemple :
    Code:
    <a style="color: red; font-family: arial black; font-size: 16px; border-bottom: 2px dotted blue;" href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
    Texte/Lien vers Never-Utopia
    Code:
    <img src="http://img11.hostingpics.net/pics/338564Yuni010.jpg" alt="" style="border: 4px solid #000000;" />


    Un simple essai avec l'un des avatars que je porte ^^

    Le "src" fait appel à l'adresse de l'image que vous avez hébergée. Le "alt" pour ceux qui s'interrogeraient est pour "alternatif", il s'agit d'un texte que vous pouvez mettre entre les guillemets et qui s'affichera si l'image ne peut pas s'afficher (si son lien est mort, par exemple). Cela peut vous paraitre peu utile, mais si vous souhaitez être aux normes il faut le mettre, quitte à ce qu'il soit vide. Il est cependant préférable qu'il ne le soit pas pour un souci d'accessibilité. En effet, pour certaines personnes (mal voyants par exemple) équipées d'un navigateur particulier, ce "alt" et les mots qu'il contient sont leur seuls moyens de savoir à quoi se rapporte l'image, s'il s'agit d'une bannière, d'un lien vers quelque chose de précis, etc...


    Remarque : il est possible d'insérer le "style="...."" soit avant ou après l'adresse du lien ou de l'image, comme dans les deux exemples, mais il ne faut pas "couper" les valeurs, ce qui est entre guillemets doit forcément se suivre sans être coupé par autre chose.


    Il est possible que sur certains forum la mise en forme d'une image de cette façon-là ne fonctionne pas. Dans ce cas il y a d'autres solutions que vous verrez dans les étapes suivantes.



    Autres balises utiles



    Pour votre début de mise en forme, vous pourrez également vous servir de la balise suivante :
    Code:
    <center>Votre texte</center> => centre le texte
    Première remarque : dans la mise en forme des messages ForumActif, un retour à la ligne en appuyant sur la touche "entrée" de votre clavier produit effectivement un retour à la ligne, si vous codiez une page stricte (vierge, codée d'un bout à l'autre, type page de site web par exemple) ça ne serait pas le cas et vous seriez contraints d'utiliser la balise :
    Code:
    <br />
    ...pour faire votre retour à la ligne.

    Seconde remarque : Même s'il faut éviter de trop mélanger le BBcode et le codage en html/css comme on vient de le voir, il est possible de combiner légèrement les deux. Par exemple, une fois votre lien mis en forme, vous pouvez l'aligner à droite en utilisant le BBcode ForumActif avec la mise en forme normale située en haut de votre cadre de saisie de texte.

    Résumons :
    • Il vous est possible d'utiliser une mise en forme en html/css si vous vous assurez que cette option est active sur votre forum.
    • Le html sert à placer des éléments, le css sert à leur imposer un aspect esthétique, les deux s'utilisent forcément ensemble.
    • Il y a des règles strictes pour utiliser les balises, mais elles sont peu nombreuses et finalement évidentes, soyez cependant minutieux lorsque vous écrivez vos codes.
    • De nombreuses données css peuvent être incluses dans une balise grâce à l'attribut "style".
    • il est possible d'inclure l'attribut "style" également dans les balises d'image et de lien


    Etape suivante


    Dernière édition par Sparrow-style le Mar 13 Mai 2014 - 10:29, édité 1 fois



    Cassius
    FémininAge : 20Messages : 9

    le Ven 28 Fév 2014 - 14:15

    (je ne sais pas si on est autorisé à poster à la suite...)
    Merci beaucoup pour ce petit tuto, il est vraiment détaillé et très bien expliqué !

    J'ai une petite question, (je débute en codage du coup je suis vraiment nulle désolée x___x ) ; je n'ai pas bien compris la partie sur les balises.
    Il en existe plein de différentes mais toutes ont bien un usage spécifique.
    Mais quelle serait la balise la plus générale, celle qui englobe le codage intégral ? uniquement :
    Code:
    <span></span>
    ?

    Et du coup, est-ce qu'on doit mettre nos autre balises à l’intérieur de celle ci ?
    Comme :
    Code:
    <span><span style ="(codage)">texte</span style><img src="adresse img" /></span>

    Je sais pas si j'ai été très claire, désolée ^^'
    Et ma question est peut-être stupide D:
    Merci quand même (:
    Ehawee
    FémininAge : 24Messages : 4513

    le Mer 7 Mai 2014 - 18:51

    Hey =) désolée de répondre si tard U_U *pastaper*

    Non, non ^^ c'est pas stupide du tout comme question =)
    Je me permets de te répondre (j'avais pas vu ta question ^^' et je crois que le cap'taine non plus xD) Et pour ce qui est de poster à la suite, j'en sais rien, mais ça doit pas poser de problème, si? xD autant avoir les questions & les réponses au même endroit ^^

    En fait, t'as plusieurs types de balises, et une balise span peut tout à fait contenir d'autres balises à l'intérieur du genre....

    Je mets deux balises en cascade!


    Code:
    <center><span style="font-weight: bold; color: blue; ">Je mets<span style="color=red"> deux balises en cascade!</span></span></center>

    Et tu vois, comme le style est en cascade, les propriétés de la première balise qui ne sont pas contrée par celles de la deuxième balise (la couleur de la première balise est contrée par la deuxième balise, mais l'épaisseur des lettres le "font-weight" lui ne l'est pas) s'appliquent aux deux.

    En terme de balise "générale" en fait il y en a deux.

    le "span" qui traite les informations en ligne et le "div" qui traite les infos en bloc. Exemple...

    voici un span avec un "color" white et un "background-color" black

    voici un div avec un "color" white et un "background-color" black


    Comme tu le vois, le span se cantonne à son contenu, donc on peut en mettre plusieurs à la suite, regarde:

    one! two! three!

    Alors que les div traitent les informations en bloc, donc le div, par défaut se poursuivra jusqu'aux limites de ce qui le contient (ici la zone de texte du forum)

    one!
    two!
    three!


    et pour répondre à toutes tes questions sur les "div" l'étape suivante du cursus et ta meilleure amie. Et si tu veux voir des usages du span, n'hésite pas à z'yeuter du côté du TP





    gif1gif2
    Ehawee
    FémininAge : 24Messages : 4513

    le Mer 7 Mai 2014 - 18:58

    Et désolée du double post (je peux pas éditer ici TT-TT) Je tenais juste à signaler qu'il y a une petite erreur dans ton codage, le "style" ne se met que sur la première balise ^^

    Code:
    <span style="codage"></span>

    et pas

    Code:
    <span style="codage"></span style>

    En fait le "style" est une caractéristique de ta balise, donc c'est inutile de la répéter lors de la fermeture ^^ l'ordi comprend les codages de façon linéaire.

    //petit moment "Jaja se prend pour un ordi" //

    exemple, je suis un ordinateur, et je lis....

    < tiens, une balise s'ouvre span Ah bah c'est un conteneur de type inline style Oh bah mince alors, on va lui mettre une mise en forme! ="propriété: valeur; " Et cette mise en forme affecte telle propriété en lui donnant telle valeur! > bon, et le contenu auquel on applique ça, c'est quoi? CONTENU ah bah voila! < une nouvelle balise! que va-t-il se passer? /span> Ah bah y's'passe rien en fait, c'est la fermeture de la balise!





    gif1gif2
    Angie H.-Carter
    FémininAge : 33Messages : 672

    le Dim 1 Juin 2014 - 19:20

    Je viens de commencer à lire je me suis dit que même si j'avais déjà commencer à faire un peu de codage je trouve cette première étape super instructive^^ j'en apprend un peu plus sur les attributs et je comprend mieux....

    Narja merci pour l'explication c'est toujours bien de lire les question réponse Wink (lol le mode ordi XD)

    En tout cas donc merci pour tout ^^



    Your my brillant! You shine into the darkness and you guide me in my  life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    Lottie Yami
    FémininAge : 19Messages : 130

    le Lun 25 Aoû 2014 - 16:44

    Bonjour,

    je voulais m'excuser, j'ai voté "-" sans savoir ce que c'était. Je croyais que c'était un bouton pour allez directement à la fin. Je vais allez me pendre.

    En tout cas merci pour ce tutoriel, il est super. Et j'en apprend un peu plus !
    Merci !
    Natsumi13
    FémininAge : 20Messages : 64

    le Sam 6 Sep 2014 - 20:33

    Bonjour, j'aimerais juste savoir, pourquoi on n'a pas ajouté le "font-style" dans la tableau? ^^"
    L'a-t-on oublié? Ou bien... C'est fait exprès? Bref, si c'est le premier cas, je pense que vous pouvez l'ajouter maintenant Wink
    Celte
    MasculinAge : 27Messages : 63

    le Sam 4 Oct 2014 - 9:45

    Bonjour, et déjà merci pour ce super cours qui me fait reprendre les bases (ce qui n'est pas inintéréssant Razz )

    Pour te répondre Natsumi13 :

    @Okhmhaka a écrit:Voici une petite liste de ce que vous pouvez employer pour commencer avec cette simple balise :

    Petite liste pour commencer = que tout n'est pas mis dedans.

    Bonne journée



    Juliette21
    FémininAge : 19Messages : 48

    le Dim 26 Oct 2014 - 23:08

    Yeees ! Je cherchais a apprendre les bases du codage et je suis comblée !
    Merci pour ce tuto !


    Sakuya-chan
    FémininAge : 17Messages : 5

    le Mar 4 Nov 2014 - 22:07

    Merci pour ce tuto'! Très bien expliqué en plus! Very Happy

    Sinon, j'ai une question. Dans mon forum, lorsque je mets le message en "Prévisualiser" je vois mon entête mais lorsque je l'envoie, le code apparaît! Pourtant l'HTML est bien activé. Savez-vous ce qui ne va pas? >o<
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Mer 5 Nov 2014 - 10:30

    Salut !

    Il faut que tu vérifies qu'il soit bien activé aussi dans ton profil, puisque le compte a été fait lorsqu'il n'était pas encore actif via le PA. Pour les inscrits suivant c'est automatique, mais le fondateur doit le faire manuellement. Si c'est bon dans ton profil vérifie également que l'option n'est pas restée cochée en "désactiver" dans le message lui-même, en dessous quand tu l'édites ^^



    Sakuya-chan
    FémininAge : 17Messages : 5

    le Mer 5 Nov 2014 - 17:49

    Aaah, d'accord! J'y avais pas pensé x)

    ça marche, merci beaucoup! ^w^
    Ryuuno
    MasculinAge : 16Messages : 12

    le Mer 31 Déc 2014 - 4:41


    Hey ça groove ce soir

    Super tutoriel ! cheers

    Et juste en passant le lien dans "Décomposons le code :" > "#ffffff" > "Nom de la couleur" est mort :pleure:
    Onyx
    FémininAge : 23Messages : 2614

    le Mer 31 Déc 2014 - 5:28

    Fais attention, les lancés de dés ne sont pas pour ça XD

    Le lien marche bien chez moi pourtant O_o



    Grapherleo
    MasculinAge : 22Messages : 13

    le Dim 4 Jan 2015 - 12:12

    Merci beaucoup pour ce tutoriel très instructif et très bien construit qui m'a vraiment beaucoup aidé !
    Ryukaï
    MasculinAge : 18Messages : 522

    le Lun 26 Jan 2015 - 17:18

    Merci bien, je penserais à l'utiliser.
    Je deviendrais le meilleur codeur du monde!!!



    Tyragrio
    MasculinAge : 36Messages : 15

    le Mar 27 Jan 2015 - 12:15

    Merci pour ce Tuto , j'ai déjà mal a la tête ça promet pour la suite :mdr:
    Shaneliae
    FémininAge : 20Messages : 667

    le Sam 4 Avr 2015 - 15:12

    Merci beaucoup pour ce tutoriel !

    Je connaissais déjà beaucoup de choses mais j'en ai encore apprises d'autres et cela m'a permit d'éclaircir des points un peu sombre ^^



    Alumine
    FémininAge : 19Messages : 486

    le Dim 5 Avr 2015 - 18:02

    Merci, c'est sympa !




    Before...:

    mon ange gardien ♥
    Kiowa
    FémininAge : 27Messages : 210

    le Mar 16 Juin 2015 - 2:58

    Merci pour ce bon début de Cursus. Un vrai retour au source de quoi permettre de repartir sur de bonne base!
    Mafeliquement
    FémininAge : 21Messages : 377

    le Sam 20 Juin 2015 - 1:18

    C'est un tuto super agréable à lire et facile à comprendre. Tout ce que je cherchais pour apprendre les bases ! Merci :)

    (Mafé se met au codage, ca va faire des ravages mouahaha !)



    L'autruche a t-elle le même gout que le poulet ?

    DrWeaver
    FémininAge : 30Messages : 36

    le Dim 21 Juin 2015 - 14:22

    Super tuto. Je ne savais faire aucun codage. Je viens de faire le premier ^^
    Tayu
    FémininAge : 21Messages : 10

    le Lun 29 Juin 2015 - 20:49

    Merci pour ce tuto des mieux réalisé ! Ca va bien m'aider pour mon forum !
    Tortouya
    FémininAge : 21Messages : 9

    le Mar 25 Aoû 2015 - 19:44

    Merci beaucoup pour ces explications ! Même si je possède une base en codage, je trouve cette étape primordiale pour une meilleure compréhension (:
    Jinny
    FémininAge : 32Messages : 253

    le Lun 31 Aoû 2015 - 7:34

    C'est un tuto super sympathique.

    J'avais quelques bases, mais je les avais perdues, ne pratiquant pas. Faudrait que je pratique un peu plus.

    Merci pour ces explications claires et précises. :)



    Contenu sponsorisé

    Aujourd'hui à 7:53


      La date/heure actuelle est Sam 10 Déc 2016 - 7:53