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.


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

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31718

    le Dim 9 Fév 2014 - 19:50

    Rappel du premier message :

    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



    Cruelly
    FémininAge : 23Messages : 2436

    le Sam 19 Sep 2015 - 8:34

    Merci beaucoup pour cette étape ^^ j'ai réaliser ceci avec tes conseil ^^

    Titre



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    Okhmhaka
    FémininAge : 31Messages : 31718

    le Sam 19 Sep 2015 - 14:49

    Super ! Very Happy

    Pour éviter que le trait ne soit collé au texte tu peux ajouter dans ton span un "padding-left: 10/20px". Après tout n'est que question de goût et de préférences évidemment^^



    Shoki
    FémininAge : 15Messages : 1276

    le Jeu 15 Oct 2015 - 18:27

    Merci pour ce tuto ! Je commence à mieux comprendre mes codes de fiche rp maintenant c:





    Valou712
    FémininAge : 33Messages : 21

    le Ven 27 Nov 2015 - 6:28

    Excellent tutoriel, simple et clair !! Comme beaucoup l'ont dit précédemment ce retour aux bases est très instructif alors merci !!
    Invité

    le Ven 27 Nov 2015 - 8:15

    Merci pour votre générosité et cette partie 1-1 ! Wink
    Milia
    FémininAge : 26Messages : 116

    le Dim 13 Déc 2015 - 18:03

    Merci encore pour ce tutoriel vraiment très instructif et très bien expliqué. Je vais m'entraîner un peu et passer avec plaisir à la deuxième partie. ^^
    Selen
    FémininAge : 23Messages : 4

    le Mar 15 Déc 2015 - 22:31

    Bonsoir !

    Han, je ne pensais pas qu'en fait c'était aussi "simple" ! Ou bien est-ce bien expliqué ? Huhu.

    Bref, merci beaucoup pour ce tutoriel de qualité. ~
    Elocha
    FémininAge : 66Messages : 255

    le Jeu 14 Jan 2016 - 11:42

    excellent tuto, merci <3

    par contre maintenant il faudrait que j'arrive à me rappeler de tout ça ><



    eLoChA.
    Heyfu
    FémininAge : 16Messages : 4

    le Mer 20 Jan 2016 - 23:44

    Merci pour ce tuto vraiment génial !

    Code:
    <span style="background-color: #FF0000; font-family: georgia; color: #FFFFFF; font-size: 24px">Merci pour ce tuto vraiment génial !</span>
    Misterax
    FémininAge : 24Messages : 25

    le Lun 1 Fév 2016 - 13:13

    Merci pour ce tutoriel très bien expliqué, tout parait plus simple maintenant :).



    Fiery Aura
    FémininAge : 17Messages : 54

    le Mar 23 Fév 2016 - 20:04

    Merci beaucoup pour ce petit tutoriel sur les bases !
    Je pense avoir compris beaucoup, et on testera ça par la suite ! Merci beaucoup !
    Marjoly
    FémininAge : 21Messages : 4

    le Jeu 21 Juil 2016 - 2:22

    Bonjour !

    Merci beaucoup pour ce tuto qui est vraiment super clair, moi qui cherche depuis plusieurs jours à apprendre le codage sans succès, voilà ce que j'ai pu faire entre celui-ci et le TP suivant :

         

    Voici ma première en-tête !
    Et un petit sous-titre.

    Code:
    <center><img src="http://i35.servimg.com/u/f35/11/61/67/72/test_g10.jpg" />      <img src="http://i35.servimg.com/u/f35/11/61/67/72/test_b10.jpg" /></center>
    <span style = "font-family: impact ; font-size: 40px ; text-shadow: 1px 1px 1px #333333 ; color: #500A14 ; display: block ; text-align: center ; border-bottom: 4px double #AF2850 ; border-top: 4px double #AF2850 ; width: 40% ; margin-right: auto ; margin-left: auto ; font-variant: small-caps ; padding-top: 10px ; padding-bottom: 20px ; margin-top: -32px"><span style = "font-family: vivaldi ; color: #AF2850 ; text-shadow: 2px 2px 2px #333333">V</span>oici ma première en-tête !</span>
    <span style = "font-family: impact ; font-size: 10px ; display: block ; text-align : center ; color: #333333 ; margin-top: -20px">Et un petit sous-titre.</span>

    Par contre, maintenant, j'ai quelques petites questions, puisque j'ai tenté dans ma réalisation et qui m'a semblé impossible, mais sait-on jamais :

    Est-il possible, dans une bordure, d'utiliser deux valeurs différentes ?
    Je m'explique. Dans cette en-tête, j'ai fait une bordure (en haut et en bas) double. Mais j'aurais bien voulu tenter d'en faire une double ET en pointillé, j'ai essayé de mettre les deux mais bien sur cela n'a rien donné. De même pour l'espacement entre la bordure double, peut-on les séparer davantage ?

    Seconde question :
    Ici, encore, la bordure passe derrière l'image alors que le texte passe devant. Y a-t-il possibilité de changer ça, aussi ?

    Si les réponses à mes questions sont dans les cours suivant, je m'excuse tout de suite ... Peut-être trop curieuse, trop envie de tout savoir maintenant ? :p

    En tout cas, encore une fois merci à vous !

    (En ce qui concerne les images, j'ai juste utilisé les personnalités avatars sur le forum où je fais du RPG.)


    Marjoly.


    PS : Une autre question qui vient de me sauter aux yeux puisque je n'arrive à rien faire. Lorsque ma signature est la dernière ligne du message, elle est coupé en bas lors de l'envoi (la prévisualisation, dans mon cas). Ainsi, j'ai essayé de faire un "margin-bottom: auto" puis un "margin-bottom: 20px" en agrandissant peu à peu les valeurs mais rien n'a changé. Comment faire dans ce cas ?
    Elea-
    FémininAge : 18Messages : 6

    le Dim 31 Juil 2016 - 0:57

    Merci beaucoup pour ce tuto très bien expliqué, je vais pouvoir commencer à bosser le codage *^*
    Redyan
    FémininAge : 12Messages : 6

    le Ven 26 Aoû 2016 - 0:47

    Merci pour ce super tuto !
    NBK
    FémininAge : 27Messages : 11

    le Dim 27 Nov 2016 - 0:00

    Une première étape claire et concise !

    Merci beaucoup pour tout ce travail !

    Je vais aller me perdre dans la suite Very Happy
    Contenu sponsorisé

    Aujourd'hui à 15:06


      La date/heure actuelle est Jeu 8 Déc 2016 - 15:06