Je t'en prie :)

Bonjour, voila ce que j'ai fais ! =)
Visuel :

HTML :

CSS :

Hello miss !

Premièrement bravo ton code, il est propre, c'est agréable à lire =)

J'ai trouver une petite erreur de frappe dans ton CSS nommé #fiche. Tu à mis "width: 500px:" Or c'est un point-virgule qu'il faut mettre à la fin. Du coup la largeur de la fiche ne fonctionnais pas ni la hauteur ;)

Ensuit, je voie que tu à utiliser les h1,h2 pour les titres c'est très bien =) Par contre, le h1 est normalement une balise unique. Ce qui veux dire qu'elle ne peux ce retrouver qu'une seul fois sur une page web. Or forum actif utilise déjà cette balise pour le titre du forum du coup il serait préférable d'utiliser un h2 pour le titre de ta fiche et un h3 pour le sous-titre. Mais bon ça c'est un truck qu'on remarque avec le temps =)

Par contre j'ai encore un petit souci avec tes balises titres. Comme dit plus haut Forum actif utilise ses dites balises dans ces codes. Si tu met ton CSS tel quel sur ton forum les titres de ton forum vont prendre le même style que ta fiche. Pour remédier à ceci facilement on pourrais utiliser les sélecteurs : #fiche h2{Ton CSS}. Le fait de mettre le nom de la DIV général de ta fiche devant ton h2 viens dire " Les h2 qui ce trouve à l'intérieur de la DIV nommé fiche aurons ce style". On viens donc sélectionner une balise en particulier.

Pour plus d'information sur les sélecteurs il y a ses deux tutoriels : Tuto 1 / Tuto 2

Pour ton sous-titre je ne crois pas que la DIV qui l'entour soit vraiment utile. Tu aurais pue mettre ton ton CSS sur ton H2 (qui va devenir un h3)

Finalement, tu utilise des ID (Identifiant unique). Je crois que tu à bien compris leur fonctionnement. On retrouve tes ID une seul fois dans ton code ce qui est bien. Or il s'agit d'un code de fiche. Donc ce code sera fort probablement répété sur une même page. Ce qui veux dire que ces ID seront aussi répétés. Ce qui est théoriquement mal. Il faudrait donc préféré les class.

Voilà ! C'est tout ce que j'ai à dire ^^ De façon général c'est très bien ! Les petit détail que j'ai soulever sont des erreurs qu'on ne pense pas forcément au début. Continue comme ça =D

Merci beaucoup pour ta réponse Batty !
Ah c'est donc pour cela que ce n'était pas la bonne hauteur ! J'ai du mettre un < br/ > à la fin parce que ça faisait tassé justement, le cadre avec le crédit était complètement collé au bas de ma fiche ... Mais je comprends mieux pourquoi maintenant, je prendrais soin de relire mes codes.

Je ne savais pas que ForumActif utilisait les balises h1, h2 ..., il ne me semble pas encore l'avoir lu dans un tutoriel, mais maintenant c'est noté au moins. =) Du coup lors du prochain exercice que je ferais, je vais essayer d'appliquer les sélecteurs comme dans ton exemple. :P

C'est vrai que je me suis un peu compliqué la vie avec cette div pour le sous titre, j'aurais du regrouper tout ça, ça aurait fait plus propre mdr ^^

Du coup, si je comprends bien pour les ID, on peut les utiliser uniquement pour coder une page d'accueil ? (et peut être un QEEL ?)

En tout cas merci pour ton message et tes explications, ça me motive vraiment à coder et à en apprendre d'avantage c'est super ! =)

En effet les ID sont plus utiliser dans les PA et le QEEL. à la limite dans une fiche règlement et/ou présentation qui serais alors répété une seul fois dans la page. Les ID serons surtout utile dans des page HTML ou la structure d'un site.

Je suis heureuse que tu soit motivée ^^ reviens nous voir si tu fait un autre exorcise ! Ou même si tu fait un code de ton crus ça fait toujours plaisir de vous aider !

D'accord merci beaucoup. =)
Je vais faire un deuxième exercice et ensuite je ferais un code par moi même. :P

Bonjour o/
J'ai voulu tenter l'exercice aussi, vu que ça avait l'air d'être le plus à ma portée des 3 faciles owo (ça doit être plein de bêtises but here I go o/)
J'ai l'impression que ça aurait été plus simple en utilisant des class mais je ne sais pas comment renvoyer au CSS en le postant sur un forum du coup j'ai tout mis dans le HTML

Hello miss !
Je suis heureuse que tu est essayer cet exercice ! Il faut bien commander quelque part ;) Et puis il n'y à pas tellement de grosses erreurs dans ton code =P Puis je suis là pour rectifier le tire ;) Alors premièrement :

Wonder a écrit:J'ai l'impression que ça aurait été plus simple en utilisant des class mais je ne sais pas comment renvoyer au CSS en le postant sur un forum

Plus facile pour toi je ne sais pas, mais éventuellement ce serais plus facile pour les membre qui utiliserons tes codes =) Il est toujours préférable de séparé la structure (le HTML) du style (le CSS). Or pour une fiche (surtout celle de RP et/ou pub) il n'est pas forcément possible de mettre le CSS dans la feuille de style comme une PA.

Du coup on peux crée notre propre "feuille de style" grâce à la balise style. Elle ce place avant le HTML de la fiche et elle accueillera ton CSS. Par contre pour que ça fonctionne il ne faut pas de saut de ligne à l'intérieur de la balise. Un peux comme quant on utilise style="" dans une balise. Ça nous donnerais quelque chose comme ça :

Code:

<style>.fiche{width:420px; height:600px; background:#000000;}.titre{font-family: SignPainter; color:#ffffff; text-align:center; font-size:50px;}</style>

Ensuite, je voie que tu à utiliser les h1, h2 pour les titres c'est très bien =) Par contre, le h1 est normalement une balise unique. Ce qui veux dire qu'elle ne peux ce retrouver qu'une seul fois sur une page web. Or forum actif utilise déjà cette balise pour le titre du forum du coup il serait préférable d'utiliser un h2 pour le titre de ta fiche et un h3 pour le sous-titre. Mais bon ça c'est un truck qu'on remarque avec le temps =)

Pour finir dans la structure tu à fait une petite erreur dans ton lien :

Code:

<a href:"http://epicode.variousforum.com/" target:"_blank";>Wonder/ Epicode</a>

Pour qu'il fonction il faut mettre le symbole égale et non deux point après le href.

Pour finir dans ton CSS tu utilise la typographie "SignPainter" or lorsqu'on utilise une police spécial il faut la lier à notre code car ce n'est pas tout le monde qui on cette police dans leur ordinateur. Tu peux utilise https://fonts.google.com/ pour trouver des typo différente. Lorsque tu clique sur le plus il ajoute la typo dans ta liste de font sélectionné. En bas à droite tu a un rectangle noir dans lequel tu trouvera le lien à ajouté à ta fiche et le nom de la typo a ajputé a ton CSS.

.... bon ok j'ai menti x) une dernière petite chose dans ton CSS tu à :

Code:

margin-top:50px; margin-left:40px; margin-right:40px;

Tu aurais pue diminuer le nombre de code dans ta fiche en utilisent la super propriété margin: 50px 40px 0px; Dans l'ordre on à la valeur pour la marge en haut, une seul variable pour celle de droite et de gauche et une troisième pour la marge du bas. Les possibilité d'écriture sont nombreuse :

margin: 10px 20px; (top/bottom et right/left)
margin : 10px 20px 30px; (top, right/left et bottom)
margin : 10px 20px 30px 40px; (top, right, bottm, left)

Voilà ! c'est tout ce que j'ai a dire x) si tu a des question n'hésite pas =)

Bonsoir
Merci beaucoup d'avoir pris le temps de lire et de répondre, déjà, des keurs

Super pour la balise style, un nouveau monde s'ouvre à moi ;D Je l'avais vue sur des LS mais ne sachant pas l'utiliser j'ai préféré rester à ce que je comprenais tbh. Je n'ai plus de questions particulières maintenant, merci pour tes corrections et j'intégrerai tout ça dans mes futurs codes (notamment les h1 h2 et la magie du margin, effectivement ça allège) pour les rendre plus lisibles, les exercices ne perdent rien pour attendre

Haha génial ! J'ai déjà hâte de te revoir dans la section ;)

Coucou
Première tentative de codage. Et c'était loooong.. J'ai l'impression d'avoir jeté au hasard des morceaux de lignes puis bricoler autour pour que ça fonctionne xD
J'ai demandé de l'aide pour l'overflow -j'ai galérer comme pas possible sur ça- et également pour le lien à la fin, je ne connaissais pas la commande. Donc bon, pas vraimeeent fait seule à 100 % o/

Le HTML :

le CSS :

Puis, pour voir : là

Coucou ! Je viens donner quelques conseils - rien d'exhaustif bien sûr, vu que je n'ai pas le niveau qu'ont certains ici, mais si toutefois mes remarques peuvent t'aider, c'est le principal <3-

Tu t'en es plutôt bien sortie je te rassure, si le code était mauvais, le rendu ne serait pas potable xD Toutefois il y a des choses que tu peux revoir dans ton code et qui te permettront de coder plus efficacement les prochaines fois. <3

Une première question déjà : pourquoi n'as-tu pas attribué de class à la div principale ? En soit ce n'est pas faux, mais pour avoir un code plus propre, il vaut mieux éviter d'intégrer le style directement dans le HTML ; d'autant qu'il est évident que tu sais séparer CSS et HTML, puisque tu l'as fait avec les div auxquelles tu as attribué des id.

En soit, c'est mieux d'avoir :

Code:

<div class="content_fiche">Je suis un contenu</div>

et donc dans le CSS

Code:

.content_fiche {
propriété: valeur;
}


- Ensuite, l'ID ne s'utilise pas dans ce contexte. En effet, elle est usitée pour mettre en forme des éléments qui n’apparaissent qu'une seule fois. Dans le cadre d'une fiche RP, on préférera les class car le code sera utilisé plusieurs fois sur la même page. Je te redirige vers ce tuto qui explique bien mieux que moi, et qui reprend un peu ce que j'ai globalement souligné.  

- Je vois que tu as entouré ton titre avec une div, ce qui n'est pas faux ; mais tu peux utiliser les balises h1, h2, h3, h4, h5 et h6 (plus le chiffre est petit, plus le titre est important). Les balises de ce type sont spécifiques aux titres donc on respecte la sémantique et en plus, on aère notre code !

Code:

<h2>Titre</h2>

et pour mettre en forme un titre, on utilise les sélecteurs (sinon, on vise tous les titres de FA et c'est mal XD). Comment ? et bien, on sélectionne le block qui contient notre fiche, en l’occurrence, .content_fiche, en reprenant mon exemple plus haut, et on sélectionne le titre comme ceci :

Code:

.content_fiche h2 {
propriété: valeur;
}


Ensuite, comme dit sur discord, tu n'avais pas besoin d'entourer ton texte avec ta div "ecris", tu pouvais simplement mettre les propriétés et valeurs de mise en forme directement sur la div "carré" :3 Mieux encore ! Tu pouvais remplacer la div "carré" par la balise p, spécifique aux paragraphes !

Code:

<p>Ton texte de la mort qui tue</p>

et pour le mettre en forme, comme le carré blanc sur ta fiche ? Avec la même méthode que les balises titres. :3

Code:

.content_fiche p {
propriété: valeur;
}

Mais en soit, la div n'est pas fausse du tout, ne t'en fais pas. :'3

Une dernière chose, car je vois que ta fiche RP n'est pas centrée, tu peux rajouter

Code:

margin: auto;

dans le CSS de ton block contenant pour le centrer convenablement.

Voilà ! Je ne me suis pas attardée sur les termes très techniques pour ne pas tout de suite t'assommer de jargon, l'important c'est d'y aller à ton rythme.
Si tu veux en savoir plus sur les balises dont je t'ai parlées, n'hésite pas à lire ce tuto très complet parce qu'à première vue, je sais que ces balises peuvent faire peur ahah xD

Voilà voilà, j'espère que mes remarques te serviront !
Des bisous.

Sorry, je n'avais pas vu que tu m'avais répondus x')
Merci pour toutes ses précieuses indications bien détaillés.. Hé tout compris **

Pour tout dire, j'ai mis style au départ parce que je n'avais pas compris comment fonctionner précisément le class. Ce qui est pourtant identique aux id, le # en moins.
Pareil pour le "p" ou les titres "h1, 2, 3" : je voyais comment les insérer au HTML et à quoi il servait. Mais je ne savais pas comment les mettre dans mon CSS. Donc, je ne les ai pas mis et j'ai foutu du "id" absolument partout xD

Merci Arte pour ces indications
Ca va bien me servir pour mon prochaine exo.. Les tutos aussi :3

Bonjour ^^

Je me lance avec cet exercice :) Voici mon résultat :
Je débute alors autant commencer avec celui qui m'a semblé être le plus simple :)

Code:

<div style="background: black; width: 500px; height: 500px; border-radius:20px; marging-top:20px; padding-top:5px;">
  <h1 style="color:white; text-align:center;"> Le titre </h1>
  <h2 style="background-color:grey; text-align:center; color:white; width:300px; height:30px; border-radius:20px; margin-top:5px; margin-left:100px; margin-right:100px;"> Le titre n°2</h2>
  <div style="color:black;background-color:grey; width:450px; height:270px; text-align:justify; border-radius:20px;margin-left:20px; margin-right:10px; padding-top:10px; padding-left:5px; margin:auto; overflow:auto;"> appelez-vous ce que je te veux pour époux. Pacifiques à leurs places respectives. Signifie nuit de la terre ? Lancé sur la grève aux écueils. Exactement ce que nous n'étions plus qu'à en parler. Baronnet d'ancienne noblesse, il en use : cette condition est parfois bien lourd à porter, assumait des airs d'apparition. Répondez-moi, du moins divulgué l'influence dépressive de la peur ? Attablé depuis le matin par le jardinier.
    Planté de travers, en lui, faisant patte de velours. Puante et pleine de tact, de façon que tout le travail social, au profit de la bonté des dieux, le curé ne le lui prêterais pas... Dimanche, alors, dissimuler le bateau et en même temps avec anxiété une nouvelle issue. Sentons-nous assez ce qu'on aura tué dans une bataille livrée contre son gré, en se saisissant du gland de ma queue, et qui demeure à cinquante pas. Malheureuse politique de courtisan, de flatteur, risqua l'épithète vieille pour donner plus de nouveauté à sa pensée en raisonnement logique. Convaincu que toute tête qui s'apprêtait, qui la suivirent avait failli être assassiné ? Quatre-vingt-deux ans, alors il devra trouver ça tout seul, ça m'inquiète un peu ?
    Meurs à temps : voilà ce qu'a dit de faire attention à une masse informe. Jolie matinée que tu m'accordes un répit ? Tenir la vérité vraie ; c'est-à-dire une mèche de cheveux derrière l'oreille, les éclats de rire. Rigoureusement parlant, puisque rien ne se produisît. Professeur, dis-je, de comprendre où il voulait en venir, à cause du sang des hommes et les femmes publiques. Sortons poser nos pieds sur la terre malheureuse, pleine de prudence : car l'amour est en phase avec la vie, changer le monde. Dix ans de précision et de rigueur.
    Beauté, jeunesse, comme si en s'approchant ; maintenant que j'ai pu en oublier quelques circonstances. Avoir commis tous les jours qui suivirent, son nom, et se montrait, affairée, toujours haletante, à cause que nous sommes, de tenir tête au colosse. Trompés par les feux croisés des armes enterrées. Mon précepteur aurait pu être une </div>
  <div style="background-color:grey;margin-top:20px; width:450px;text-align:center; border-radius:20px; height:30px; margin-left:20px; padding-top:10px; "> Le noms des personnage + click </div>
  <div style="color:white; text-align:center; font-size:12; padding-top:10px;"> @ Credit </div>
  </div>

Eh me voilà ! Reine m'avait dit de faire cet exercice donc voici mon résultat ! :3

Code:

<div class="CaRoLiNe_Bloc"><h1>Titre de la fiche</h1><h2>Titre secondaire</h2><p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.</p><div class="CaRoLiNe_Credits"> Codage de la fiche par (Name) pour <a href="http://www.epicode-entraide.com/">Epicode</a></div><link href="https://fonts.googleapis.com/css?family=Alegreya|Sacramento" rel="stylesheet"><style>.CaRoLiNe_Bloc{background:black;height:600px;width:540px;border:10px double grey;margin:0 auto;text-align:center;position:center}.CaRoLiNe_Bloc h1{color:white;text-align:center;height:20px;font-family:'Sacramento',cursive}.CaRoLiNe_Bloc h2{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;font-family:'Sacramento',cursive}.CaRoLiNe_Bloc p{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;height:400px;overflow:auto;font-family:'Alegreya',serif}.CaRoLiNe_Credits{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;font-family:'Alegreya',serif}.CaRoLiNe_Credits a{text-decoration:none;color:white}</style>

Spoiler:

Coucou, @Nemy.

Cette fiche est en effet très bonne pour débuter.
Ton code est plutôt bon et efficace, je ne vois pas de propriétés superflues. Tu as utilisé des balises sémantiques en plus, bravo :3

Ma remarque concernera essentiellement les marges.
Pour ton premier bloc, tu as mis marging avec G à la fin donc la marge ne fonctionne pas.

Sinon il y a deux façons générales pour noter les marges.

> Les marges individuelles :
- margin-top
- margin-right
- margin-bottom
- margin-left
Quand on veut utiliser les marges individuelles l'ordre n'est pas important et bien sûr si la marge d'un côté est la valeur par défaut tu n'as pas à spécifier la marge de ce côté.

> Le raccourci :
- margin
Si tu veux utiliser le raccourci, tu n'as plus le droit de mettre les marges individuelles, de plus ici l'ordre est important.

Le raccourci se présente selon le nombre de valeurs fournies de 4 façons :
- margin : top right bottom left;
remarque que la direction suit celle des aiguilles d'une montre.

- margin : top right/left bottom;
donc on a trois valeurs, la marge du haut et du bas sont différentes mais la marge à droit est égale à la marge à gauche.

- margin : top/bottom right/left;
ici margin-top = margin bottom et margin-left = margin-right. et donc on a deux valeurs.

- margin : valeur;
ici la marge est égale de chaque côté.

Pour centrer un bloc qui a une largeur définie, on utilise une marge horizontale "auto" donc la marge droite et gauche doivent prendre la valeur auto.

Si je prends par exemple ton bloc h2, tu as :

Code:

h2 {margin-top:5px; margin-left:100px; margin-right:100px;}

Qu'on va remplacer par :

Code:

margin: 5px auto 0;

De même pour le bloc div qui suit h2, tu s mis une marge droite et une marge gauche et un margin auto ce qui est contradictoire.

Pour le click je vois que tu n'as pas mis de lien. La balise lien s'écrit en balise double "a" (a veut pour anchor en anglais)

Code:

<a href="le_lien"> titre du lien </a>

Finalement pour le crédit, tu as mis un font-size: 12; sans unité.
la taille d'une font se met en pixel (px), en point (pt) ou en em en reponsive.
Ici j'imagine que tu voulais dire 12px

Voilà c'est tout, j'espère que c'est claire et à bientôt sur un autre exercice :3

@Caroline : j'ai répondu sur le sujet du cours :3

Salut,

Voici mon code  

Spoiler:

Code:

<div style="width:500px; background-color:#414141; color:#cccccc; padding:15px; text-align:justify;"> <div style="text-indent:15px; font-size: 30px; "> Titre </div>
<div style="background-color:#cccccc; color:#414141; border-radius:10px; text-indent:15px; font-size: 20px; "> Titre Secondaire </div>
Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.

Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.

<center> <a style="color:#cccccc;" href="http://www.epicode-entraide.com/" target="_blank"> Lili </a> | <a href="http://www.epicode-entraide.com/" target="_blank"> Lolo </a> | <a style="color:#cccccc;" href="http://www.epicode-entraide.com/" target="_blank"> Lulu </a> </center> </div>

Coucou @Sendre !
Je viens corriger ton petit exo et, ma foi, tu t'en es super bien sortie !
J'ai seulement deux/trois petites choses à dire, histoire de rendre tes futurs codes encore plus propres. c:

En règle général, on évite d'intégrer le CSS directement dans les div et autres (comme tu l'as fait présentement avec le style=). Quand tu coderas des choses plus complexes, ce sera vite infernal et tu risques de t'y perdre. N'hésite pas à lire ce tuto, sur les class et id ! Il t'explique comment ça marche et, à l'avenir, tu pourras avoir un html sans CSS, et le CSS sagement calé entre balises :

Code:

<style>.class {propriété: valeur;} .class {propriété: valeur;}</style>

Deuxième petite remarque : si tu veux dès à présent te détacher des div pour des balises plus sémantiques, je te conseille ce tuto. c: Tu n'es pas obligée de les utiliser, mais ça rend le code plus propre et te permettra, à l'avenir et sur des codes plus complexes, de cibler tes balises beaucoup plus facilement dans le CSS et sans l'aide des class. Par exemple, pour ton titre, tu aurais pu écrire

Code:

<h1>Titre</h1>
<h2>Titre secondaire</h2>

Et enfin, dernière remarque mais pas des moindre : la balise center est obsolète !  
Pour centrer tes liens, tu peux les mettre dans une div, et attribuer à cette div un "text-align: center;", ça évitera les bugs 8D

Bonjour Artemis
Et merci pour ta correction :)

Une petite question que je ne savais pas où poster :
div class = je peux l'utiliser si j’utilise le même css pour deux éléments différents, c'est bien ça ?
div id = un élément dans une page, dans un site ?

Le but c'est de voir ce qui se répète et ce qui ne se répète pas ?
C'est une sorte d'astuce ?
J'avoue, j'ai du mal avec la div class

Pour les h1 / h2 / h3 etc - je n'en vois pas l'utilité, mais j'imagine que c'est similaire au squelette d'une maison - sinon il n'y aurait pas un chapitre là-dessus ~

Code:

<style>.class {propriété: valeur;} .class {propriété: valeur;}</style>

Je vois bien que cette balise sert à faire du rangement dans un codage, mais dans un message comment elle s'utilise ?  Ça me semble compromis pour l'utiliser là - dans mon codage par exemple - non ?

Alors, les class, tu peux les utiliser par défaut et donc, plusieurs fois pour le même élément.
Les id, c'est simplement pour coder les éléments uniques, comme par exemple les Qui Est En Ligne    Très honnêtement, on utilise surtout les class car elles sont polyvalentes. c:

Pour les balises h1 and co, leur intérêt est sémantique. Ce sont des blocs, comme les div, mais grâce à elles, on sait tout de suite quel élément correspond à quoi rien qu'en regardant le HTML. Egalement, comme dit précédemment, dans des codes plus complexes, diversifier tes balises va t'aider à les cibler plus facilement via les sélecteurs (mais c'est pour un niveau un peu plus avancé. ).

Enfin, pour ta dernière question et bien, les balises style sont précisément là pour intégrer le CSS dans ton message !
Regarde ce que ton code donne avec des class et le CSS à part :

Code:

<div class="contenu_fiche"> <div class="titre1"> Titre </div>
<div class="titre_secondaire"> Titre Secondaire </div>
Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.

Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.

<center> <a class="lien_couleur" href="http://www.epicode-entraide.com/" target="_blank"> Lili </a> | <a href="http://www.epicode-entraide.com/" target="_blank"> Lolo </a> | <a class="lien_couleur" href="http://www.epicode-entraide.com/" target="_blank"> Lulu </a> </center> </div>

<style>.contenu_fiche{width:500px; background-color:#414141; color:#cccccc; padding:15px; text-align:justify;}.titre1{text-indent:15px; font-size: 30px;}.titre_secondaire{background-color:#cccccc; color:#414141; border-radius:10px; text-indent:15px; font-size: 20px;}.lien_couleur{color:#cccccc !important;}</style>

Tu peux l'essayer, il rend pareil et marche tout aussi bien. On a alors un HTML plus clair, et le CSS à part.  

Coucou Merci pour cet exercice ! J'ai tenté un petit truc, par contre j'avoue que mes margin me semblent un peu trop élevés ce qui m'embête un peu, mais je sais pas trop comment gérer le positionnement autrement >.<

Bonsoir :p

Voilà ce que j'ai fait de mon côté.

Code:

<div style="background-color: black; width: 500px; height: 800px"><h1 style="color :white; font-family :Waltograph; font-size :60px; text-align: center">Titre</h1><h2 style="font-family : Waltograph; color: white; font-size:50px; text-align: center; background-color: grey; border-radius: 10px; margin-right : 60px; margin-left: 60px">Titre secondaire</h2><div style="background-color: grey; font-family: Waltograph; color: white; font-size: 50px; text-align: center; weight: 300px; height: 150px; border-radius: 10px; margin-right : 30px; margin-left: 30px; overflow: auto">Description</div>
  <div style="background-color : grey; font-family: Waltograph; color: white; font-size: 35px; border-radius: 10px; margin: 200px; padding-bottom: 20px; padding-top: 20px; width: 100px; height: 50px"><a href="http://www.epicode-entraide.com/u8262"target="_blank">Nathou</a></div></div>

J'ai un petit soucis avec le bloc du bas, si quelqu'un saurait m'éclairer, je ne sais pas comment le mettre sur le côté droit de la page

Bonjouuuur,
Voilà mon rendu :

Pouet !
Comme la base du schéma est très libre, je me suis permis de me challenger un peu xD
Voilà ce que ça donne :




Le HTML :

Code:

<link href="https://dl.dropboxusercontent.com/s/g9ypmuclrymmkky/exercices.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
        <div class="main">
            <span>Fiche des Liens</span>
            <div class="sutit">
                <span>Mais sans les cordes. Quoi que...</span>
            </div>
            <div class="friend">
                <span>Amis</span>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/luqq.png">
                    <b>Jean-Kevin Boregard</b>
                    <p>description description description</p>
                </div>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/yd4d.png">
                    <b>Martine Halaplage</b>
                    <p>description description description</p>
                </div>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/52mm.png">
                    <b>Gérard Jaipalu</b>
                    <p>description description description</p>
                </div>
            </div>
            <div class="enny">
                <span>Ennemis</span>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/ms1g.png">
                    <b>Frida Friendzone</b>
                    <p>description description description</p>
                </div>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/pze7.jpg">
                    <b>Herve-Jerry Golay</b>
                    <p>description description description</p>
                </div>
                <div class="cart">
                    <img src="https://zupimages.net/up/21/43/vrpx.jpg">
                    <b>Lady Dimitresscul</b>
                    <p>description description description</p>
                </div>
            </div>
            <span class="tit">Liens des Fiches</span>
            <div class="lienfi">
                <ul>
                    <li><a href="#">Frida Friendzone</a></li>
                    <li><a href="#">Gérard Jaipalu</a></li>
                    <li><a href="#">Hervé-Jerry Golay</a></li>
                    <li><a href="#">Jean-Kevin Boregard</a></li>
                    <li><a href="#">Lady Dimitriscu</a></li>
                    <li><a href="#">Martine Halaplaj</a></li>
                </ul>
            </div>
        </div>

Le CSS :

Code:

.main {
        width: 500px;
        background: black;
        padding: 30px 20px 30px 20px;
 box-sizing: content-box;
 margin: auto;
 border-radius: 20px;
}

.main span {
        display: block;
        color: white;
        font-family: 'Architects Daughter', cursive;
        font-size: 35px;
        text-align: center;
        text-transform: uppercase;
        padding: 5px;
}

.sutit span {
        width: 350px;
 height: 40px;
 line-height: 28px;
        margin: auto;
        display: block;
        font-size: 17px;
        font-family: 'Oswald', sans-serif;
        text-align: center;
        text-transform: uppercase;
        background: radial-gradient(#999999 0%, #000000 70%);
        color: black;
        border-radius: 150px / 19px;
        margin-bottom: 10px;
}

.friend, .enny {
        width: 480px;
 height: 268px;
 overflow: auto;
        background: #999999;
        margin: auto;
        border-radius: 20px;
        margin-bottom: 20px;
}

.friend span, .enny span {
        font-size: 30px;
        text-shadow: 2px 2px 1px black;
 padding: 15px;
}

.cart {
        width: 450px;
        height: 110px;
        margin: auto;
        padding-bottom: 20px;
 margin-bottom: 5px;
}

.cart b {
        font-family: 'Oswald', serif;
        font-size: 20px;
        text-transform: uppercase;
 color: black;
}

.cart p {
        width: 330px;
        height: 65px;
        margin: auto;
        float: right;
        text-align: justify;
        border: black dotted 1px;
        border-radius: 10px;
        padding: 5px;
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
 margin-top: 5px;
}

.cart img {
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 100px;
}

.lienfi {
    width: 480px;
 height: 114px;
 overflow: auto;
        background: #999999;
        border-radius: 20px;
        margin: auto;
 margin-top: 15px;
}

.lienfi ul {
        list-style: none;
        padding: 10px 0px 10px 50px;
        font-family: 'Oswald', serif;
        font-size: 20px;
 margin: auto;
 line-height: 25px;
}

.lienfi ul li a {
    text-decoration: none;
    color: #4B1FAB;
}

div::-webkit-scrollbar {
    width: 1px;
}

div::-webkit-scrollbar-thumb {
    background: #f5f5f5;
}

div::-webkit-scrollbar-track {
    background: #f5f5f5;
}