Bonjour à tous!
J'aimerais apprendre à faire une fiche de pub pour un forum

Exemple:

En espérant que quelqu'un pourra m'aider (=

(je ne savais pas s'il faut poster dans FAQ ou Travaux encadrés, vous pouvez déplacer si jamais je suis au mauvais endroit)

Personne...? '^^

Coucou Naku ^^
Désolée, ta demande a été noyée dans le flot de messages >_< Me voici ! Tu as bien fait de faire un ptit up o/
C'est la bonne place pour faire une demande précise, rassure-toi ;)

Je te pose quelques questions afin de voir où ta demande se situe précisément. ^^ As-tu déjà employé du html, dans le sens où c'est toi qui a fait le code (même petit). Connais-tu la différence qu'il y a avec le CSS ? ^^

Mes questions s'arrêtent là avant de te submerger d'autres x)

Merci Nico ^^

Et bien j'avais commencé le cours sur le XHTML et le CSS du Site du Zéro, mais je ne me souviens pas de grande chose... '^^
Je sais que le CSS c'est la "mise en page", mais je ne me souviens plus trop comment ça marche x_x
*se rend compte qu'elle est une noob*

Coucou Naku ^^

Je suis désolée >_<

Pour faire très simple, en fait le HTML va servir à faire ta page : contenu principalement tandis que le CSS va agencer la page HTML.
Par exemple, les bords arrondis du forum c'est du CSS. ;)

Le langage HTML va avoir besoin de "consignes". Par exemple pour une image tu vas mettre des balises et indiquer => là je veux que ce soit une image qui apparaisse. Ces consignes se manifestent à travers les balises.

Si tu comprends le fonctionnement du BBCode, tu verras que le HTML est identique à peu près mais plus complet. ^^

Je voulais faire un tit rappel avant de te poser les questions suivantes :
- sais-tu faire un lien avec du html ?
- sais-tu mettre une image avec du html ?
- connais-tu quelques balises ? Si oui lesquelles ? (pense à utiliser les balises code pour me montrer)
- est-ce que tu sais comment on peu intégrer du css à une page html ? C'est-à-dire comment on peut faire pour que les propriétés de css s'appliquent à ta page ? ^^


Pour que ce soit le plus simple possible on passera peu de temps sur le html mais suffisamment quand même et on attaquera le CSS qui est la grosse partie de cette publicité.
Je te donnerai l'ensemble des balises que tu souhaites avoir pour avoir les rendus que tu désires ainsi que la manière pour intégrer le css dans le html. :D

Oh mais je sais tout ça xD

Pour les balises, je connais les trucs de base, et je dois pouvoir retrouver mes feuilles, mais... les trucs genre les classes et les spécialités que tu peux rajouter, ben voilà.
Y'a juste le CSS que je ne sais plus comment on met dans le HTML (je ne crois même pas avoir appris :P)

Je connais euh...

Code:

<p> <img> <br/> <url> et puis euh... là comme ça je vois pas, mais il y en a d'autres ^^

Up '^^

Coucou Naku ^^
Comme tu sais j'avais pas été présente ces derniers temps et je suis vraiment désolée >___<
La mini formation va pouvoir reprendre, ce tout de suite ! ^^

Concernant les class on ne pourra pas les voir dans ce cadre-là car les propriétés de CSS seront intégrées directement dans les balises html. C'est normalement un procédé que l'on n'utilise qu'avec parcimonie parce qu'il est peu souple : chaque modification du style doit impliquer une modification du contenu et plus on fait quelque chose de riche en CSS plus ça devient le bazar XD

En fait y a trois façon de mettre du CSS :
- soit directement dans les balises (on appelle ça "en dur")
- soit dans le fichier html entre balises

Code:

<style type="text/css"></style>

- soit dans un fichier externe css qu'on relie à la feuille html

Dans les deux derniers cas, les propriétés CSS se présentent ainsi :

Code:

balise {
propriété: valeur;
}

.nom_class {
propriété: valeur;
propriété: valeur;
}

#nom_id {
propriété: valeur;
propriété: valeur;
}

Ce qu'on appelle balise c'est par exemple les balises html qui ont un nom précis : h1 (balise pour les titres de niveau 1), table (balise pour faire un tableau)... Là tous les éléments qui auront pour balise la balise h1 auront le même style.
Ce qu'on appelle class c'est en fait un identifiant pour appliquer un style à certains éléments en particulier. Sur la page, un attribut class peut être utilisé pour plusieurs choses. Si on souhaite utiliser une seule fois dans le code, il faut utiliser un autre attribut : l'id. ^^
Pour les class et les id, cela se présente ainsi :

Code:

<div class="nom_class"></div>
<div id="nom_id"></div>

Pas de majuscules, éviter les blancs, pas non plus de caractères spéciaux ;)

Est-ce que jusque là c'est clair ? ^^ (je demande parce que je sais pas si je suis très précise xDD)


Les balises principales en html que l'on va voir sont celles pour les liens textes et images, pour les paragraphes, les images, les titres, les tableaux et les balises pour positionner des éléments.
Les propriétés css que l'on verra sont celles que l'on peut retrouver communément dans une fiche de pub comme celle que j'ai faite :
- les ombres
- les bordures
- les marges internes et externes à une boîte
- les arrondis
- les fonds image et couleurs
- les couleurs
- les propriétés liées au texte (police, taille, épaisseur, casse...)
- et d'autres que je n'ai plus en tête XD

Est-ce que cela te convient ? :D Si tu as des questions, n'hésite pas le moins du monde :)

Pas de problème, j'ai uppé pour que t'y penses maintenant ;)

Citation :

Est-ce que jusque là c'est clair ? ^^

Oui, je connais déjà xD En fait quand j'avais commencé le cours du Site du zéro, c'était tout avec les class vu que c'était pas entre balises mais sur une feuille CSS ^^

Sinon c'est dommage que ça ne soit pas une feuille CSS ('x (si j'ai bien compris '^^)

Pour les propriétés, je ne me souviens que des couleurs je crois...

Je n'ai pas de questions pour le moment ^^

Up '^^

Le principe des class est celui à utiliser mais là on ne peut pas. ^^ Cela signifierait héberger une page css.

Ah oui, je voulais faire un rappel sur les balises html. ^^

Pour mettre une image :

Code:

<img src="lien de ton image qui se termine par l'extension" alt="titre alternatif" />

L'important est de ne pas oublier les guillemets pour chaque attribut. Après src= il faut mettre le lien direct de ton image. Il se termine par l'extension : .jpg / .png et j'en passe.
A l'intérieur de l'attribut alt= il faut renseigner obligatoirement un titre alternatif. Il s'agit d'une convention xhtml qui fait que lorsque l'image ne s'affiche pas, on voit le texte à la place. Enfin, comme c'est une balise unique, il faut la fermer par le slash. Si tu souhaites qu'au passage de la souris, une sorte d'infobulle apparaisse, il faut ajouter l'attribut

Code:

title="nom du titre"

Pour mettre un lien :

Code:

<a href="lien que tu souhaites mettre" target="selon où tu veux que le clic dirige">texte</a>

Après href c'est là que tu mets entre guillemets ton lien commençant par http (pour un protocole de ce type). Puis si tu le souhaites tu peux régler le type de cible, via target. Par défaut quand tu cliques sur le lien, il te l'ouvre sur la page / onglet courant(e). Si tu souhaites qu'au moment du clic, un nouvel onglet s'ouvre, c'est

Code:

 target="_blank"

Une image cliquable, c'est tout bête : il faut emboîter les deux codes que je t'ai donnés précédemment :

Code:

<a href="lien que tu souhaites mettre" target=" selon où tu veux que le clic dirige"><img src="lien de ton image qui se termine par l'extension" alt="titre alternatif" /></a>

Les règles importantes :
- pas d'espace avant et après les guillemets
- pas d'apostrophes ou de guillemets. Il faut utiliser un code dit html

Comme tu m'as dit te souvenir que des couleurs, pourrais-tu me montrer ? Parce que l'on peut mettre des couleurs pour tout plein de choses XD

Merci pour le rappel, j'aurais pu m'en sortir mais on sait jamais xD

Ben les couleurs, je sais color="color" (avec le nom de la couleur ou le code hexadécimal entre les guillemets), et euh je ne sais même plus si ça peut être une balise seule ou pas '^^

Disons que je préfère anticiper en fait, quitte à dire des trucs que tu sais sûrement. ^^ Comme ça on peut démarrer plus efficacement.

Pour couleur, c'est une balise double, puisqu'il faut indiquer là où on décide que la couleur s'applique et là où l'on souhaite que la couleur s'arrête. C'est en html dans ce cas. Mais y a aussi une façon css de mettre une couleur à un texte.

Pour le html, c'est

Code:

<font color="#code">texte</font>

En css, pour du texte c'est

Code:

color: #code;

---

Juste avant, je voulais te montrer comment on intègre du css dans du html :

Code:

<div style="propriété: valeur;propriété: valeur;propriété: valeur;">l'élément pour lequel tu souhaites appliquer un style</div>

Avec la balise span, paragraphe c'est également possible. Et ça se présente de la même façon :

Code:

<p style=

;

Code:

<span style=

Du coup, je te montre concrètement comment mettre une couleur à un texte et comment faire pour mettre un fond de couleur. Jmets mes codes en hexadécimal mais comme tu l'as dit le nom de la couleur fonctionne également :

Code:

<p style="color: #6b056b;">Mon paragraphe ultra cool qui déchire tout ! (on y croit)</p>

Mon paragraphe ultra cool qui déchire tout ! (on y croit)

Code:

<div style="background-color: #cccccc;">Mon élément trop cool est en fond gris O/</div>

Okay merci!
Je vais essayer de me souvenir de tout ça '^^

Le site n'a pas de pattern de fond pour le moment, mais ici il y en a... on peut mettre une image en fond de texte j'imagine?

Oui c'est tout à fait possible :D D'ailleurs, c'est ce que j'ai utilisé pour la fiche de partenariat d'ici. ^^
Tu verras, à force d'automatismes ça rentre et devient gravé O/

Pour le fond, je te donne de suite le code :

Code:

<div style="background-image: url('lien se terminant par lextention');">emplacement de tout ton texte</div>

Okay, je vais essayer de faire un test alors, et si jamais je te poserai d'autres questions :3
Merci infiniment!

Premier essai

Code:

<div style="background-color: #F0E8C8">
<center><a href="http://empireoffantasy.forumgratuit.org/"><img src="http://i45.servimg.com/u/f45/15/55/51/83/wallfo10.jpg" alt="Bannière" /></a></center>

<div style="background-image: url('http://hitskin.com/themes/17/42/64/i_back_title.png');color: #543808"><b><center>Le forum</center></b></div><center><p style="background-color: #E8D299">Oyez oyez braves gens!
Vous aimez lire?
Vous aimez les histoires chevaleresques, où l'aventure et le merveilleux sont au rendez-vous?
Vous aimez vous évader à travers les livres et leurs histoires?
Et surtout... vous aimez la fantasy, quelle qu'elle soit?
Rejoignez donc la communauté d'<a href="http://empireoffantasy.forumgratuit.org/" style="color: #9F0000"><b>Empire of Fantasy</b></a>, un concentré de livres et de fantasy!
Que vous soyez chevaliers, paladins, ménestrels, magiciens, ou simplement paysans, nous vous accueillerons à bras ouverts autour d'une bonne bière (ou toute autre boisson) afin de discuter de ce qu'on aime, en toute amitié!
(pour vous téléporter dans notre royaume, cliquez sur la bannière ou sur le nom du forum en rouge)</p></center>
</div>

Bon ben j'ai une question (x
Comment on fait pour que l'image soit à sa vraie taille? C'est à cause du forum? (j'ai mis le lien direct, sans redimensionnement)

Sinon je vais réfléchir à quoi mettre d'autres dedans, mais voilà c'est un premier essai (= (j'ai déjà fait plein de tests de couleurs parce que ça donnait bizarre certains trucs '^^)

Tiens, étrange, je n'ai pas été prévenue de ta réponse >__<

Pour répondre à ta question ; en effet, c'est le redimensionnement automatique qui rend comme ça. ^^

Je reviens ce soir pour rentrer dans les détails. ^^


En attendant, tu souhaiterais apprendre d'autres codes pour présenter le texte et tout ? ^^

Pas grave ;)

Okay, merci!

Oui je veux bien d'autres trucs pour que ça soit plus joli '^^ (je vais sûrement mettre des autres couleurs, je trouve vraiment bizarre, pourtant sur le forum ça va -.-)
Par exemple mettre un cadre, voire des coins arrondis...?

Coucou Naku =D

Alors, je t'avais promis de parler de ton code jusqu'à présent. ^^ Il est vrai que tu n'as mis qu'une propriété css dans le html à chaque fois. Cependant, à la fin de celle-ci, pense bien à mettre un point virgule. Si jamais tu fais un ajout juste avant et que tu oublies le point virgule, le code ne marchera plus. Du moins dans une feuille de style ça marche ainsi, et puis mieux vaut avoir la bonne méthode dès le début. =)
Mais à part ça, je n'ai rien à dire, c'est super ! =D

Alors pour mettre un "cadre". C'est la propriété "border" qui sera mobilisée. Tu peux choisir de mettre une bordure pour tout ton ensemble, ou pour une partie : gauche, droite, bas, haut.
La bordure peut avoir une couleur, une épaisseur, un type (pointillés, trait plein, points...). Concrètement cela donne :

Code:

border: Xpx type #couleur;

=> tu indiques l'épaisseur en px puis le type (points, pointillés...) et ensuite la couleur

Voici les combinaisons :

Code:

border: 1px solid #FFFFFF;

=> ton trait sera blanc, continu et mesurera 1px

Code:

border: 1px dotted #FFFFFF;

=> ton trait sera blanc, avec des petits points et mesurera 1px

Code:

border: 1px dashed #FFFFFF;

=> ton trait sera blanc, pointillé et mesurera 1px

Si tu veux appliquer seulement cette bordure à un des côtés, il suffit de préciser le côté en question :

Code:

border-left: 1px dashed #FFFFFF;
border-right: 1px dashed #FFFFFF;
border-top: 1px dashed #FFFFFF;
border-bottom: 1px dashed #FFFFFF;

Dans un élément précis ce sera :

Code:

<div style="border-left: 3px solid #FFFFFF; border-right: 2px dashed #FFFFFF; border-bottom: 2px dotted #FFFFFF;">Mon texte trop cool</div>

Pour les coins arrondis, il n'est même pas utile d'avoir de bordure, mais un fond est nécessaire.
Là ça marche selon le navigateur, sauf IE.

Code:

-moz-border-radius: Xpx Zpx Wpx Vpx;

C'est pour Mozilla. Dans l'ordre, la première grandeur en px est le degré d'arrondi du coin supérieur gauche, la deuxième c'est pour le coin supérieur droit, la troisième c'est pour le coin inférieur droit et la dernière concerne le coin inférieur gauche.

Code:

-webkit-border-radius: Xpx Zpx Wpx Vpx;

C'est pour Chrome.

Code:

border-radius: Xpx Zpx Wpx Vpx;

Et ça pour les navigateurs récents. ^^

Voici un exemple : (c'est moche, je sais XD)

Code:

<div style="background-color: #000000;-moz-border-radius: 25px 5px 30px 80px;">texte</div>

Valou O/

Okay merciiiii :D Je vais tester ça ^^

Par contre j'ai pas compris ta remarque du premier paragraphe sur les points virgule '^^

Par rapport au point virgule, il s'agit de la syntaxe d'un code en CSS. Comme je te l'avais expliqué :

Code:

propriété: valeur;

Bien sûr le point virgule n'est pas obligatoire à la fin cependant, c'est mieux et ça oblige à ne pas l'oublier.

Dans une feuille de style (certes ce n'est pas le cas ici), si on oublie cet élément cette partie du code ne s'applique pas. ^^

Je te montre où j'ai vu l'oubli par exemple (juste après le code couleur) :

Code:

<div style="background-image: url('http://hitskin.com/themes/17/42/64/i_back_title.png');color: #543808"><b><center>Le forum</center></b></div>

Ah oki, merci! Je le mettrai alors ^^ (ça fait tellement longtemps que j'avais pas fait de HTML/CSS...)

Coucou Naku :D
Je voulais savoir si tu t'en sortais :)

C'est gentil, mais j'ai pas encore essayé... ça va venir, je l'ai mis en marque-page, désolée