avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 744
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Classe d'Amackyle Mer 1 Juin 2016 - 20:56
Hello ^.^

Désolée pour le retard d'ouverture de ta classe. Mais elle est enfin là !

Nous allons rentrer directement dans le sujet en commençant par comprendre à quoi correspondent le html et le CSS. Ce qu'il faut savoir c'est que html et CSS sont indisociables. Le html est ce qui va servir de structure de base à ta page et le CSS va être là pour la mise en forme. De manière schématique le html serait le "quoi" et le css le "comment" de ta page web.

En html il existe plusieurs types de balises. Il y a tout d'abord les balises dites orphelines. Elles ne se composent que d'un seul élément. Je vais te citer les plus courantes :
  • Pour afficher une image
    Code:
    <img src="URL DE L'IMAGE"/>

  • Pour demander un saut de ligne (pas utile dans les codes utilisés sur forum actif mais il faut la connaître)
    Code:
    <br />


Les autres sont dites en paires et ont donc besoin de deux éléments pour fonctionner : une balise ouvrante et une balise fermante. Je vais te donner quelques exemples comme précédemment :
  • La division qui est une balise pour ouvrir une zone de texte de type block (un grand carré en somme)
    Code:
    <div>Texte</div>

  • Le span qui est une balise permettant d'ouvrir une zone de texte de type line (une ligne donc)
    Code:
    <span>Texte</span

  • La paire suivante te permet de positionner un lien dans ton texte
    Code:
    <a href="URL DU LIEN">Texte</a>


Pour le moment je pense qu'on peut rester là dessus dans le sens où tu n'as jamais codé (: Si tu as la moindre question n'hésite pas. Il n'y a jamais de question bête !

Pour la suite on peut procéder de différentes manières :
- Je continue à blablater sur tout et rien et tu me poses tes questions au fur et à mesure
- Tu as des questions précises sur lesquelles tu aimerais que je te réponde directement
- On étudie un code simple dont tu aimerais comprendre le fonctionnement ou que je choisirai si tu n'as pas un code précis en tête
- Tu as un petit schéma pas trop difficile sous la main et on essaie ensemble de le réaliser (fiche de RP par exemple).

Voilà à toi de décider de quelle manière tu veux que cette classe soit gérée (:
avatar
Sexe : Féminin
Date d'inscription : 26/05/2016
Messages : 44
Newbie
Voir le profil de l'utilisateurhttp://lovemehateme.forumactif.org/
# Re: Classe d'Amackyle Lun 20 Juin 2016 - 21:55
Bonjour à toi et merci pour l'ouverture de ma classe :)

Alors déjà je connais quelques bases en codes puisque je sais bidouillé deux trois trucs sur une feuille de style, en revanche le html j'maîtrise beaucoup moins.

J'aimerai apprendre à réaliser des tableaux basique mais avec un beau design. je sais que c'est la base pour tous les codes puisque tous les codes sont placé en règle général dans des balises tableau.

Je n'ai pas de schéma pour une fiche de rp mais si tu en as une pourquoi pas!

Merci de t'occuper de moi.

avatar
Sexe : Féminin
Date d'inscription : 26/05/2016
Messages : 44
Newbie
Voir le profil de l'utilisateurhttp://lovemehateme.forumactif.org/
# Re: Classe d'Amackyle Jeu 7 Juil 2016 - 7:20
Je vais te poser une question si tu veux bien y répondre ce serait gentil.

Je sais que dans une page html il faut absolument une tête et un corps et nous l'écrirons comme ça:

Code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
<head>
<body>
    <p></p>
    <a href= "http://lovemehateme.forumactif.org/"> Cliques ici pour voir</a></body>
</html>

Le code ci-dessus est un document type html alors je voulais savoir pourquoi sur une fiche de présentation, une fiche de lien ou tout autre fiche qui nécessite un lien ne s'inclut pas dans un document type tel que celui ci dessus?

Comment dois-je procéder pour une fiche de présentation avec des liens de type html si on utilise bien du html dans ce genre de fiches?

Si oui comment dois-je m'y prendre?

Je te remercie pour la réponse que tu me donneras :)
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 744
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe d'Amackyle Ven 8 Juil 2016 - 22:00
Coucou ^.^

Désolée de ne pas avoir pris le temps de te poster de schéma mais mon pc a cramé et il n'est toujours pas de retour et je suis en stage tout le mois de juillet sans internet en semaine. Mais bref.

Pour ce dont tu me parles c'est en effet bel et bien de cette manière qu'on présente une page internet lorsqu'on utilise le html. Cependant tu n'en auras pas besoin lorsque tu voudras poster des choses (fiche de lien, RP, boutique, etc) directement dans les sujets de forumactif. Cette structure sera utile lorsque tu voudras mettre en place une page d'accueil par exemple ^^ En dehors de ça, en tant qu'utilisatrice de forumactif, tu en auras rarement l'utilité. Il est cependant toujours bon de connaître ses bases.

Pour insérer un lien, la partie du code que tu m'as mis précédemment et qui t'intéresse est la suivante :

Code:
<a href="http://lovemehateme.forumactif.org/"> Cliques ici pour voir</a>

Sachant que FA (formactif) n'aime pas les espaces et ne fonctionne pas quand il y en a n'oublie pas d'ôter celui se trouvant entre le signe égal et les premiers guillemets. Mais, dans tous les cas, si je te donne un exemple un peu plus générique on obtient clairement la même chose :

Code:
<a href= "URL VERS LEQUEL TU VEUX QUE TON LIEN RENVOIE">Texte qui apparaîtera</a>

Sachant aussi que la balise a va se comporter comme le span et non comme une div. C'est-à-dire en se comportant comme une chaîne de caractères (une ligne si tu préfères) et non pas comme un bloc.

Je ne sais pas si j'ai bien répondu à ta question ^^' Après si ta demande concerne une fiche de liens précise n'hésite pas à la mettre ici et on regardera si tout fonctionne bien ^.^


avatar
Sexe : Féminin
Date d'inscription : 26/05/2016
Messages : 44
Newbie
Voir le profil de l'utilisateurhttp://lovemehateme.forumactif.org/
# Re: Classe d'Amackyle Sam 16 Juil 2016 - 8:50
Pas de souci pour le temps de réponse je comprend tout à fait :)

Ce que j'aimerai savoir alors c'est comment dois-je introduire les codes dans un poste et est ce que je peux mélanger un code css avec un code html dans une réponse?

Où alors je fonctionne différemment j'introduis les attributs à l'intérieur des balises html?

Code:
<span=backgroundcolor: jaune; fontsize: 12px; fontfamily:Verdana></span>

Ou est ce que je peux faire une partie css?

Si je veux faire une fiche de pub comme ça: http://epicode.bbactif.com/t7771-pub-4-crimi

puis-je le faire dans une réponse directement où dois-je passer par du JS ou tout autre langage?

Merci de me répondre

Bien cordialement

avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 744
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe d'Amackyle Sam 16 Juil 2016 - 18:51
Une fiche de ce type est codée intégralement en CSS et html ^^ Pas besoin de JS pour utiliser les effets présents. Si tu veux que je t'apprenne comment obtenir une image coulissante de ce type je serais ravie de le faire (:

Pour ce qui est d'intégrer le CSS dans une balise style ou directement dans les balises peu importe cependant il faut le faire convenablement. Le code que tu m'as mis en exemple ne pourra pas être fonctionnel puisque pas formellement correct. Je te montre comment il faudrait l'écrire pour que ça fonctionne ^^

Code:
 <span style="background-color: yellow; font-size: 12px; font-family:Verdana;">Texte</span>

Il y avait plusieurs erreurs dans ce que tu m'avais montré. Tout d'abord tu avais oublié de spécifier le style qui doit toujours commencer par des guillemets et être refermé de la même manière. Sans cela ton CSS ne s'appliquera pas.
Ensuite attention à ta manière de nommer tes attributs, bien souvent ils prennent des tirets lorsque ce sont plusieurs mots associés.
Ta dernière erreur concerne la couleur de fond en notant "jaune" tu n'aurais jamais eu de résultat. Tu peux exprimer les couleurs en les appelant par leur nom en anglais (langue utilisée pour tous les langages informatiques), en utilisant les valeur hexadécimales (les couleurs commençant par #) ou en choisissant les valeurs rgb (à écrire rgb(valeur de rouge,valeur de vert,valeur de bleu) bien sans laisser d'espaces). Les deux dernières solutions te permettent d'utiliser une bien plus grande palette de couleur que la première. Tu as de nombreux sites sur lesquels retrouver ces codes couleur. Pour ma part j'utilise celui-ci.

Une autre solution est de faire comme suit :

Code:
<style>.test{background-color:yellow;font-size:12px;font-family:Verdana;}</style>

<span class="test">Texte</span>

Là j'ai insérer mon CSS entre des balises style. Cela va permettre d'alléger le html mais c'est aussi le moyen par le biais duquel on pourra introduire les effets. Pour appeler le style "test" il a fallu écrire class de la même manière que nous avions écrit le style précédemment. Pour que ce petit class fonctionne il ne faut pas oublier le point précédent le nom de ton style dans ton CSS !

Lorsque tu utilises des balises styles pour stocker ton CSS tu pourras utiliser des class ou des id. La différence est que le premier sera utilisable autant de fois que tu le souhaites dans ton code tandis que le second ne pourra répondre qu'à une seule occurrence. Je te donne un exemple rapide.

Code:
<style>#cadre{width:600px;height:200px;margin:auto;border:1px solid rgb(0,0,0);}.texte{background-color: yellow; font-size: 12px; font-family:Verdana;}</style>

<div id="cadre">
<div class="texte">Truc</div>
<div class="texte">Muche</div>
</div>

Dans le CSS, comme tu peux le voir dans l'exemple ci-dessus, les ids sont précédés d'un # et les class d'un . et sont donc simples à différencier.

En dehors de FA tu pourrais aérer ton CSS qui, ordinairement, est présenté avec de nombreux sauts de lignes. Cependant notre support favoris de RPG déteste qu'on mette des sauts de lignes dans le CSS, cela le rend tout simplement non-fonctionnel. Tout ça pour t'expliquer pourquoi j'ai tout mis en tout tassé et tout moche entre les balises style :')

J'espère que mes explications sont à peu près claires ^^' Sinon n'hésite pas à me dire que j'essaie de clarifier les choses qui te semblent obscures !


avatar
Sexe : Féminin
Date d'inscription : 26/05/2016
Messages : 44
Newbie
Voir le profil de l'utilisateurhttp://lovemehateme.forumactif.org/
# Re: Classe d'Amackyle Mar 19 Juil 2016 - 11:53
Tes explications sont parfaites j'ai tout compris sauf un petit truc quel est la différence entre id et class, les id correspondent à un cadre, un bloc, la totalité du paragraphe? Et les class?

Merci de me répondre :)

Peux tu me donner un petit exercice simple à faire? Afin que je puisse enregistrer tout ce que tu viens de me dire?
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 744
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe d'Amackyle Dim 24 Juil 2016 - 10:14
Les id et les class pourront être des bloc, des paragraphes, n'importe quoi. La seule différence est qu'un id ne sera utilisable qu'une seule fois dans ton code tandis qu'une class sera utilisable autant de fois que tu le souhaites (: Pour les différencier (dans les balises style) on précède les id d'un # et les class d'un . ^^ Voilou j'espère t'avoir éclairée.

Pour le petit exercice je te propose de réaliser une feuille de RP comme le schéma suivant :



Je te laisse libre de choisir la ou les polices qui te plaisent, les couleurs, l'image de fond touçatouça. S'il y a des choses que tu ne sais pas faire n'hésite pas à me poser tes questions pour qu'on voit ça ensemble ^.^ Normalement j'ai un peu d'internet en semaine maintenant donc je pourrais te répoooondre o/


avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 744
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe d'Amackyle Lun 3 Oct 2016 - 16:37
Bonjour,

Quittant le staff je suis au regert de te dire que je dois abandonner ta classe u.u En effet par manque de temps et à cause d'événements irl je quitte le staff d'Epicode. Je suis navrée de ne pas pouvoir t'aider davantage.

Bonne continuation !


Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum