AccueilDernières imagesRechercherS'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.

Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

    Créer une page HTML (pour fiche de pub, formulaires, etc,)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 17 Juil 2014 - 7:24

    Créer une page HTML


    Toutes versions ▬ Bases du HTML ▬ Tout est en "clair" ▬ Contributions supplémentaires apportées pas Cheshire Cat


    J'ai remarqué que pas mal de monde ne savait, en réalité, pas utiliser les pages HTML de forumActif, ou tout du moins, pas sans utiliser le haut et le bas de son forum, donc avec la fiche CSS intégrée du forum. De ce fait, je vais donc vous apprendre comment créer, utiliser et modifier une page HTML. J'espère que cela vous sera utile, mais surtout, que vous arriverez facilement à cmprendre mes explications.

    Créer une page HTML sur FA


    Pour bien commencer, nous allons aller sur le Panneau d'administration et tout de suite aller sous Modules Arrow HTML&Javascript Arrow Gestion des pages HTML. Là, vous tomberez sur une page du genre, mais probablement vide chez vous, vu que vous n'aurez encore jamais crée de page HTML:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 110

    Là, vous avez plusieurs informations, la première étant le tri des pages HTML que vous avez déjà (qui est utile lorsque vous en avez beaucoup, mais moins quand vous n'en avez qu'une ou deux comme moi présentement) et ensuite, un carré avec les pages HTML que vous avez déjà créées. Nous nous y intéresserons plus tard, mais pour l'instant, ce sont ces deux boutons avec plus vert qui nous intéresse:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 210
    Vous voyez donc qu'il y a deux modes: la créations en mode "What You See Is What You Get" et le mode HTML. Bien sûr, je vous déconseille fortement le mode WYSIWIG, et ce n'est bien sûr pas ce mode dont je vais parler dans ce tuto! Du coup, je vais vous demander de cliquer sur le bouton le plus à droite: la création en mode HTML:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 2a10

    Maintenant que c'est fait, vous aurez cette page devant vous:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 310
    Là vous voyez plusieurs informations, à nouveau, en deux parties. LA première, ce sont toutes les informations concernant la page et la deuxième, le contenu de la page, tout simplement, avec les boutons de prévisualisation et d'envoi.
    Nous allons donc nous intéresser à la première partie.

    Tout d'abord le Titre. C'est tout simplement le titre qu'aura votre page dans a lsite des ages HTML ce n'est absolument pas la même chose que ce qui est entre les balises title dans la page HTML en elle-même: vous pouvez mettre deux choses totalement différents. En gros, c'est juste pour vous, pour vous retrouver dans vos pages HTML! ^^ Je vous conseille donc de mettre un titre assez compréhensible pour vous et vos co-admin, de telle façon à ce que vous sachiez exactement à quoi cela corresponde.

    Ensuite, nous avons deux options:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 410
    La première "Voulez-vous utiliser le haut et le bas de page de votre forum ?", vous permet d'avoir le haut et le bas de votre forum comme "base". C'est utiles pour les pages d'accueil, si vous voulez quelque chose qui ressemble à votre forum. Et surtout, le gros avantage est que cela utilise la fiche CSS de votre forum. Cependant, comme exprimé plus tôt, nous n'allons PS utiliser cela, vu que je vais vous montrer comment créer une page HTML normale.
    En gros, si vous cochez oui (et que, comme moi, vous avez pour l'instant que le thème de base du forum) voilà à quoi ressemblera votre page, sans rien dedans, en ayant coché "Oui" à cette première option:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 4a10
    En gros, votre overall_header et overall_footer est utilisé ici aussi.

    Maintenant, pour la deuxième option "Utiliser cette page en tant que page d'accueil ?", cela implique que, si vous cochez oui, lorsque le lien de votre forum est appelé (par exemple pour NU https://www.never-utopia.com ) c'est la page HTML que vous êtes en train de créer qui sera affichée et non pas le forum ou le portail!
    Pour l'instant, on va cocher non, car ce n'est pas ce que je veux faire ici. Mais si votre intention était de faire ça, je vous en prie! =P

    Maintenant, passons au deuxième bloc: le contenu de la page. Pour l'instant, il n'y a rien d'autre qu'une balise de retour à la ligne (la balise br) mit automatiquement par FA. Nous allons tout de suite modifier ça en retirant cette balise et en remplaçant par ce code, qui est le code "de base" pour toute page HTML et que je vais tout de suite vous expliquer!:
    Code:
       <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Titre de la Page</title>
                <style type="text/css">/* Ici le CSS! */</style>
            </head>

            <body>
                <!-- Ici le HTML! -->
            </body>
        </html>

    Vous êtes perdus? Il ne faut pas! Allons pas à pas (entre spoilers! =P)
    Spoiler:

    Et voilà à quoi la page ressemble pour l'instant:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 510
    Et oui, il n'y a rien! Mais c'est normal! =D En effet, nous n'avons rien mit dans le Body, rien dans le CSS, pas de balise script etc... Bref, la page est vide!

    Cependant, voyons ce qu'on peut encore mettre dans la balise head avant de mettre quelque chose dans le body...

    Que mettre dans la balise head?


    Tout d'abord, la balise title est obligatoire et DOIT se trouver dans cette partie. C'est pour cela aussi que je l'ai mise directement dans le code plus ahut.

    Ensuite, on peut également mettre les balises style, meta, base, link, script et noscript dans la balise head.

    La balise style, comme je l'ai déjà écrit plus tôt, contient le CSS. Rien de bizarre là-dedans: il suffit d'y mettre votre CSS comme si vous le mettiez dans votre feuille CSS sur le forum et le tour est joué.

    La balise base, sert à donner la "base" de tout url relatifs dans la page. Relatifs, cela veut dire les url qui n'ont PAS de nom de site au début. De plus, si vous précisez un target, cela donne le target par défaut de toute la page HTML. Par exemple, nous avons ceci pour base:
    Code:
    <base href="http://http://www.never-utopia.com" target="_blank">
    alors si plus bas dans la page j'écris ceci:
    Code:
    <a href="/c21-affichage">Vers l'Affichage</a>
    Eh bien cela me mènerait vers http://https://www.never-utopia.com/c21-affichage et dans un nouvel onglet (à cause du target="_blank" !). Je ne pense pas que vous l'utiliserez beaucoup dans vos pages HTML, mais c'est bon à savoir =P
    Notez qu'il ne peut y avoir qu'une seule balise "base" dans tout le document, et que cette dernière n'est pas obligatoire!

    Les balises link, quant à elle, permettent "d'importer" des documents externes, c'est à dire, de faire un "lien" (d'où le nom) entre la page et le document externe. Si vous utiliser une fiche css externe, hébergée ailleurs, par exemple, ou encore les police de Google Fonts, ce sont des link que vous utiliseriez! Ces derniers, donc, sont mises dans le head, et vous pouvez en avoir autant que vous voulez.

    La baise meta, contient ce qu'on appelle les "metadonnées", c'est à dire, des informations sur les données qui se trouvent dans la page, comme plus haut le fait que la page utilise un set de caractères en UTF-8! En plus du charset, vous pouvez mettre d'autres choses dans la balise meta: une description rapide de la page, les mots-cléfs de la page, qui en est l'auteur, etc...
    D'ailleurs, si ces trois dernières vous intéresse, les voici:
    Code:
    <meta name="description" content="Rapide description de la page" />
    <meta name="keywords" content="mot-clef1,mot-clef2,mot-clef3" />
    <meta name="author" content="Nom" />

    La balise noscript permet simplement d'afficher quelque chose si l'utilisateur, donc la personne qui va afficher la page, n'a pas les script d'activés. Par exemple, on peut désactiver le javascript sur son navigateur, et dans ce cas, la balise noscript permettrait d'afficher quelque chose comme "Votre navigateur ne supporte pas Javascript!" Il est utile de noter que tout comme la balise script, la balise noscript peut se mettre autant dans la balise head que dans la balise body. Cependant, si elle est dans la balise head, elle doit contenir des balises meta, link et style, qui sera ce qui s'affiche/sera utilisé si l'utilisateur n'arrive pas à exécuter de script!

    Enfin, la balise script, pour tout code qui est exécuté "du côté client" grâce à l'aide de script, comme par exemple avec Javascript. Comme dit plus tôt, on peut autant la mettre dans la balise head que dans la balise body! Cependant certains codes Javascript ne devraient être QUE dans les balises body
    Par exemple, prenons ce tuto que j'ai écris sur les onglets en javascript. En réalité, si le première partie du code JS se met en général dans la balise head la seconde partie doit obligatoirement se mettre dans le body, et en général, tout à la fin. Ainsi, tout " a été déclaré" dans le HTML et peut être utilisé dans le JS à l'ouverture de la page, vu que le navigateur va lire votre code du haut vers le bas.
    Maintenant, vous vous demandez certainement à quoi ressemble la balise script pour le Javascript? Eh bien je vous la donne!
    Code:
    <script type="text/javascript"></script>

    Et dans la balise body?


    Tout ce que vous voulez tant que c'est du HTML, ou du PHP ou du Javascript, tant que ces deux derniers sont entre les bonnes balises.
    Vraiment, ça ne dépend que de vous et de votre imagination!

    Voir le résultat & Envoyer


    Soit vous avez terminé, ou alors êtes en cours d'écriture de la page, mais quoi qu'il en soit ous voulez voir ce que ça donne. Rien de bien compliqué! En dessous de l'endroit où vous pouvez écrire tout votre HTML vous avec deux boutons:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 610
    Comme vous pouvez l'imaginer, le bouton de droite vous permet de prévisualiser votre page HTML, donc voir en gros ce que ça done. Cependant ceci n'est accessible que par vous, c'est à dire ue, même si vous envoyiez le lien dans votre barre du navigateur directement à quelqu'un, il ne pourrait pas accéder à la page! Ceci n'est qu'un prévisualisation pour vous. Dans ce cas, si vous avez un problème avec votre page HTML et voulez que les codeurs de NU vous aident, par exemple, il ne set à rien d'envoyer cette page-ci! En effet, il va d'abord falloir valider la page pour "l'envoyer" sur le serveur de FA, pour qu'elle soit accessible à tout le monde
    Donc, vous l'aurez compris, le bouton de gauche (intitulé Valider)permet "d'enregistrer" votre page HTML nouvellement crée!

    Mais maintenant, vous vous demandez certainement où trouver le lien vers votre page nouvellement créée? Eh bien, vous devrez attendre la troisième partie, car d'abord, je vais vous expliquer comment modifier une page HTML déjà créée!

    Modifier une page HTML sur FA


    Eh bien une fois votre page crée, vous devriez la voir s'afficher sur cette page comme ceci:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 110
    La, vers la droite, sous "Action" vous avez trois icônes: deux engrenages, et une loupe.
    La loupe vous permet de voir votre page, un peu comme la prévisualisation. Cependant, cette loupe-ci ne vous envoie pas sur une page de prévisualisation, mais sur la véritable page qui contient votre page HTML!
    Ensuite, les deux engrenages correspondent chacun à un mode d'édition: le premier engrenage correspond au WYSIWYG, et le second correspond au HTML. Qui dit mode d'édition, dit éditer et donc modifier! Évidemment, nous allons cliquer sur le l'engrenage HTML pour modifier notre page HTML:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 710

    Et ensuite, vous arriverez exactement sur la même page que pour la création de page HTML, avec les même options et tout, mais cette fois-ci, avec votre code déjà présent!
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 810

    Et je pense que pour la suite, vous pouvez vous débrouiller!

    Si jamais, si vous voulez supprimer une page HTML, il suffit de cocher la case tout à droite:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 911
    Et d'ensuite appuyer sur le bouton "supprimer"!

    Lier une page HTML sur FA


    Maintenant, vous voulez utiliser cette page HTML, et vous cherchez donc l'url de cette page. Eh bien rien de plus simple, car elle est dans votre liste, et c'est sous la case "URL du lien"!
    Il suffit alors de copier-coller ceci:
    Créer une page HTML (pour fiche de pub, formulaires, etc,) 1010
    là où vous voulez l'utiliser! Comme par exemple dans une iframe.

    Les iframes


    Cheshire Cat a écrit:Bon, une iframe, ça sert à quoi ? Ce petit code très pratique vous permettra d'insérer une page que vous avez créée dans vos messages, votre signature et même dans le code de la page d'accueil, voir sur toute autre plateforme (Wordpress ou Blogspot par exemple) ! Vous pouvez également utiliser cela pour le message d'information de votre forum lorsqu'il est en construction.

    Comme vous l'aurez compris, ça a l'air drôlement pratique ! Je vous laisse donc admirer le code qui va suivre et qui va bouleverser vos existences !
    Code:
       <iframe src="URL_DE_LA_PAGE" style="display: block; margin: auto; width: LARGEURpx; height: HAUTEURpx;" frameBorder="0" seamless="seamless"></iframe>
    Notez que ce qui est dans la balise style (display et margin) permet de centrer l'iframe!

    Cheshire Cat a écrit:Attention
    Si vous insérer votre iframe dans un forum qui se trouve être moins large que votre page HTML, ce sera certainement à vous de modifier votre code afin de ne pas déformer ledit forum.


    Attention
    Pour modifier l'aspect de votre code, il ne sera donc pas utile d'aller sur votre message ou autre. Allez directement modifier votre page HTML.
    De plus, vous pouvez utiliser le même code pour plusieurs messages. Si vous modifiez votre page HTML, cela apparaîtra absolument TOUTES les iframe que vous avez placé à partir d'une même page HTML. C'est très utile si vous possédez une galerie, une signature ou une pub qui auront donc le même affichage à des endroits différents sur internet.

    Et voilà, s'en est terminé de ce petit tuto! J'espère qu'il vous aura aidé pour votre première page HTML et que vous aurez tout compris! =D
    PS: Un petit merci, même si le code n'est pas en hide, ne fait jamais de mal! Wink


    Dernière édition par NyoTheNeko le Sam 28 Nov 2015 - 10:43, édité 1 fois



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 17 Juil 2014 - 17:12

    Et bah dis-moi tu ne chômes pas ! C'est tellement évident pour moi que je n'aurais jamais pensé à en faire un tuto :hum:
    En tout cas je pense que ça en aidera pas mal (:

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 18 Juil 2014 - 5:15

    Bah à force d'avoir mit cinq fois le même code dans la résolution de problèmes aussi xD
    Après, je ne sais pas si je devrais rajouter un exemple avec une fiche de pub o un truc du genre =/



    Anonymous
    Invité

    Mar 22 Juil 2014 - 20:09

    En effet, c'est pas toujours évident pour tout le monde  :hum: Pour l'exemple si tu n'as pas l'envie/le temps/l'inspi' d'en faire un, j'ai une fiche de pub ici ou un mag sur le même principe, peut-être pas complètement correctes cela dit, elles datent.

    Je pense que tu pourrais aussi lier ce tuto de Sparrow, c'est le même thème mais les pages d'accueil HTML ne sont pas souvent traitées.

    En tout cas c'est pas mal d'avoir pensé à illustrer avec les captures d'écran.
    Makuro
    Makuro
    FémininAge : 31Messages : 75

    Mar 23 Sep 2014 - 9:36

    Merci bien pour ce tuto o/ Je crois que je vais du coup pouvoir faire mes fiches de pub un peu (beaucoup) moins à l'arrache, ce qui devrait me laisser qui plus est de nouvelles possibilités *.* (bah oui, je faisais tout ça, mais sans la balise head °° et tout le style, dans le body ^^" )
    Asagi
    Asagi
    FémininAge : 22Messages : 4

    Mar 30 Sep 2014 - 13:57

    Merci ! ;3
    sica3
    sica3
    MasculinAge : 50Messages : 135

    Sam 29 Nov 2014 - 2:10

    thank's
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Ven 13 Mar 2015 - 13:40

    Merci ! J'ai pas touuuut compris (notamment la différence entre head et body) mais je veux tester =)
    Richard York
    Richard York
    FémininAge : 34Messages : 24

    Lun 27 Juil 2015 - 18:14

    Bonjour, voilà j'ai, sur le site prit un code en libre service pour une page de présentation
    [ainsi qu'une fiche relations et un contenu de rp] cependant je ne sais pas comment faire. Je débute donc j'ai créer une page HTML j'y est mis le code mais après je ne sais pas ce qu'il faut faire. :titanic: Quelqu'un pourrait-il me renseigner svp.
    Merci d'avance :)



    Créer une page HTML (pour fiche de pub, formulaires, etc,) 11720913
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Lun 27 Juil 2015 - 22:51

    Salut !
    Pour les questions sur le libre service, il vaut mieux poster dans la parti Personnalisation des code sinon on risque de ne pas les voir :)

    Enfin bref, pour ton cas, il n'y a pas besoin de créer une page HTML pour utiliser le code. Il suffit d'activer le HTML dans le message (ce tuto) et de poster dans un message normal en basculant le mode d'édition. Pour faire ça, tu cliques sur le dernier bouton parmi les boutons de mises en forme (le premier de ces boutons c'est le B qui permet de mettre en gras, celui qu'on veut c'est celui représentant une page de fichier). Si tu es dans le bon mode, le fond de ce bouton est normalement différent du fond des autres



     
    Richard York
    Richard York
    FémininAge : 34Messages : 24

    Mar 28 Juil 2015 - 13:02

    Coucou, merci beaucoup Neva Very Happy

    J'ai galeré plusieurs jours, je ne trouvais pas de tuto [c'est la première fois sur forum et je commence petit à petit a m'y faire mais c'est pas encore ça ] et ça y est ça marche.
    Votre forum est parfait pour les débutants Very Happy :love:



    Créer une page HTML (pour fiche de pub, formulaires, etc,) 11720913
    lulunoir
    lulunoir
    FémininAge : 21Messages : 15

    Mar 18 Aoû 2015 - 21:59

    Merci beaucoup ♥
    Youp
    Youp
    FémininAge : 29Messages : 579

    Lun 11 Jan 2016 - 8:52

    Chouette tuto ^^
    Sinon j'avais une question ! Est ce qu'il est possible d'intégrer une iframe directement dans les templates ?



    Créer une page HTML (pour fiche de pub, formulaires, etc,) 262632clip20160315at092522
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 9 Fév 2016 - 18:28

    Youp > Oui!

    Mais monte plus haut, ce n'est pas ici les questions ><

    Bref, j'utilise tout le temps ce sujet alors autant dire merci, comme ça je le retrouverai plus facilement ^^

    Et honnêtement merci, c'est super utile !



    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:00