Izusa

Ancien.ne du staff
- Date d'inscription : 16/02/2016
- Messages : 1243
Maquette d'Exercice - Fiche
Créée par : Izusa
Informations
Niveau estimé : Facile
Sujet mis à jour en mars 2023
Présentation
Hey ! Si je poste ici c'est pour vous proposer un schéma d'une fiche plus ou moins complexe. Voici le schéma !
La maquette
Détails
Base sur page noire puis création de trois zones grises. Ensuite il faut un titre, un titre secondaire, un bloc description avec gestion du dépassement puis en bas, Un mot qui, quand on clique, nous dirige vers une autre page. En gros, un mot lien.
Bonne chance à vous ! :D
Compétences suggérées
Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore. Chaque notion est accompagnée d'un lien pour en savoir plus.
- Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
- Balises de titres (
<h1>
,<h2>
, etc.) ; - Blocs paragraphes
<p>
ou génériques<div>
; - Liens
<a>
.
- Balises de titres (
- Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
- Couleurs de fond avec la propriété
background-color
(voirebackground
) ; - Couleurs de texte avec
color
; - Marges externes
margin
et internespadding
; - Propriétés de mise en page du texte
font-family
,font-size
,font-weight
, etc. ; - Dimensions des blocs avec
height
et (si besoin)width
.
- Couleurs de fond avec la propriété
- La propriété CSS
overflow
pour gérer les dépassements ; - La propriété CSS
border-radius
pour les coins arrondis.
Remarques
Attention quand vous fixez des dimensions, pensez aux cas particuliers, un texte très long pour un titre par exemple.
Merci d'informer le staff d'Epicode en cas de lien mort !
_______________
Lun 18 Avr 2016 - 12:37
Cheshire Cat

Accro au forum
- Date d'inscription : 15/12/2012
- Messages : 4814
Coucou c:
J'aimerais préciser que le niveau requis pour cette fiche est assez facile (ça n'en a pas l'air hein)
En tous cas merci d'avoir posté ça sur Epicode
J'aimerais préciser que le niveau requis pour cette fiche est assez facile (ça n'en a pas l'air hein)
En tous cas merci d'avoir posté ça sur Epicode

_______________
Lun 18 Avr 2016 - 12:41
Azalée

Accro au forum
- Date d'inscription : 26/12/2013
- Messages : 4200
Étant du même avis que Cheshire, je me permet donc de modifier le titre de ton schéma.
_______________
Ven 13 Mai 2016 - 18:22
Dorea McH

Membre timide
- Date d'inscription : 08/01/2017
- Messages : 182
Si quelqu'un sait où se trouve un éventuel tutoriel sur les codes h1 h2 ect, je le supplie de m'en envoyer un lien par mp ou dans sa réponse, merci! cette remarque vous aura fait comprendre que oui, e sais que c'est pas la joie dans mon code... disons que y'a mieux écrit, quoi ;) J'en suis bien consciente, mais si vous pouvez m'aider en m'expliquant ce qui va pas, j'érigerais une statue de cookie en votre nom!
Mes excuses aux autres membres du staff: j'avais la flemme de mettreplus de lien mais je vous adore tous et toutes!
Mes excuses aux autres membres du staff: j'avais la flemme de mettreplus de lien mais je vous adore tous et toutes!
_______________
Jeu 24 Aoû 2017 - 17:11
Jamy

Very Important People
- Date d'inscription : 31/10/2013
- Messages : 2717
Hello !! @Dorea McH :)
Je suis pas bien certaine d'avoir compris ta question à propos des H1/H2 .. tu parles des balises ?
Dans ce cas là, je crois pas qu'il existe de tutoriel, mais c'est très simple, c'est des balises de titre; H pour hiérarchie en fait ! ;)
Le H1 c'est pour écrire les titres, soit les élements d'importance niveau 1. Ensuite, le sous titre avec le H2 etc etc... jusqu'au niveau 6 ! :)
Sinan, j'ai rien à redire sur ton code, c'est tout bon ! :D
Je suis pas bien certaine d'avoir compris ta question à propos des H1/H2 .. tu parles des balises ?
Dans ce cas là, je crois pas qu'il existe de tutoriel, mais c'est très simple, c'est des balises de titre; H pour hiérarchie en fait ! ;)
Le H1 c'est pour écrire les titres, soit les élements d'importance niveau 1. Ensuite, le sous titre avec le H2 etc etc... jusqu'au niveau 6 ! :)
Sinan, j'ai rien à redire sur ton code, c'est tout bon ! :D
_______________
Jeu 24 Aoû 2017 - 19:38
Dorea McH

Membre timide
- Date d'inscription : 08/01/2017
- Messages : 182
Merci de tes éclaircicement. En fait je voulais savoir comment on peut modifier leurs valeurs. Par exemple, un titre noir, de taille 32px et de police Tahoma, et un sous titre blanc de taille 24px ;) je ne sais pas faire ça
_______________
Jeu 24 Aoû 2017 - 20:00
Cheshire Cat

Accro au forum
- Date d'inscription : 15/12/2012
- Messages : 4814
Coucou !
Pour modifier le texte, on utilise soit :
- font-size pour modifier la taille de texte
- font-family pour définir la famille de police que tu utilises, à savoir son nom
- color pour modifier la couleur du texte.
Pour que deux texte soient de couleur et de taille différente, il faut tout simplement ouvrir deux balises différentes :)
Pour modifier le texte, on utilise soit :
- font-size pour modifier la taille de texte
- font-family pour définir la famille de police que tu utilises, à savoir son nom
- color pour modifier la couleur du texte.
Pour que deux texte soient de couleur et de taille différente, il faut tout simplement ouvrir deux balises différentes :)
_______________
Mar 5 Sep 2017 - 12:27
Invité

Invité
Voici ce que j'ai fais :) ça m'a permit de voir que j'y connaissais pas grand chose en codage XD
- Code:
<div style="background-color:#000000;width:600px;height:800px;"><h1 style="font-family: Georgia;color: #ffffff;font-size: 50px;text-align:center;font-weight: bold;padding-top:30px;">Titre</h1><h2 style="font-family: Georgia;color: #ffffff;font-size:30px;text-align:center;background-color: #616565;border-radius: 10px;margin-left: 150px;margin-right: 150px;font-weight: bold;margin-top: 100px;height:50px;">Titre Secondaire</h2><div style="background-color:#616565;color: #ffffff;font-size:30px;font-family: Georgia;height:200px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:80px;padding-left: 10px;padding-top: 25px;text-align: center;font-weight: bold;overflow: auto;">Description</div>
<div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank">Astriones</a></div></div>
_______________
Dim 1 Oct 2017 - 18:43
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Coucou @Astriones,
Très bon travail !
Voici quelques petites remarques:
Tu peux éviter ces grandes marges en définissant une largeur au contenu, et mettre un margin auto pour centrer ton bloc. Pour ton exemple :
( J'ai mis 340 puisque la largeur de ta fiche est de 600, tes marges 130x2 = 260 donc 600- 260 = 340 )
Je passe à la fin ici :
J'ai remarqué que tu as mis du CSS relative au texte dans la balise div, mais tu as surement remarqué que ça ne style pas ton texte. C'est normal, puisque le texte est un lien, ce CSS doit aller plutôt dans la balise du lien a (anchor)
Voilà c'est tout :3
Très bon travail !
Voici quelques petites remarques:
- Code:
margin-left: 130px;margin-right: 130px;
Tu peux éviter ces grandes marges en définissant une largeur au contenu, et mettre un margin auto pour centrer ton bloc. Pour ton exemple :
- Code:
width: 340px; margin: auto;
( J'ai mis 340 puisque la largeur de ta fiche est de 600, tes marges 130x2 = 260 donc 600- 260 = 340 )
Je passe à la fin ici :
- Code:
<div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank">
️ Astriones</a></div>
J'ai remarqué que tu as mis du CSS relative au texte dans la balise div, mais tu as surement remarqué que ça ne style pas ton texte. C'est normal, puisque le texte est un lien, ce CSS doit aller plutôt dans la balise du lien a (anchor)
Voilà c'est tout :3
_______________
Jeu 12 Oct 2017 - 19:46
Jawn

Ancien.ne du staff
- Date d'inscription : 24/03/2016
- Messages : 3494
J'me permets de tester moi aussi o/ !
J'suis pas experte mais bon, j'espère que c'est réussi
![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
J'suis pas experte mais bon, j'espère que c'est réussi
![[Facile] Exercice 3 - Fiche - Izusa 2691722282](/users/1416/13/16/78/smiles/2691722282.gif)
- Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet"><div class="lefond"> <div class="titre">Title here</div><div class="subtitle"><span>Subtitle goes here (and you can write whatever you want babe ~)</span></div><div class="texteici">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.</div><div class="subtitlebas"><span>Important stuff goes <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">right here</a>.</span></div></div>
<div class="endcred"><a href="http://dark-and-cold.forumactif.com/">♕Myrddin</a></div>
<style>.endcred a {text-align:center;font-size:11px;color:darkgrey;margin-top:-15px;}.lefond{width:450px; height:700px; background-color: black; margin:0 auto;}.titre{margin-bottom: 50px;color:white; font-size:35px; font-family:'Kaushan Script'; text-align:center; position:relative; top:20px;}.subtitle{width:400px; height:100px; background-color:darkgrey; margin:0 auto; margin-top:15px; text-align:center; border-radius:20px 20px;}.subtitle span{color:white; font-size:25px; font-family:'Roboto Condensed'; font-style:italic; text-transform:uppercase; position:relative; top:25px;}.texteici{line-height: 13px;color:white; font-size:12px; padding:15px; position:relative; top:15px; width:380px; height:350px; text-align:justify; background-color:darkgrey; margin:0 auto; margin-top:15px; border-radius:50px 50px; overflow:auto;}.subtitlebas{width:400px; height:50px; background-color:darkgrey; margin:0 auto; margin-top:55px; text-align:center; border-radius:20px 20px;}.subtitlebas span{color:white; font-size:15px; font-family:'Times New Roman'; position:relative; top:15px;}.texteici::-webkit-scrollbar{width: 2px; height: 10px;}.texteici::-webkit-scrollbar-thumb:vertical{height: 30px; -webkit-border-radius: 10px; background-color: white;}.texteici::-webkit-scrollbar-thumb:horizontal{height: 30px; -webkit-border-radius: 10px; background-color: darkgrey;}</style>
![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
_______________
Sam 14 Oct 2017 - 0:41
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Bonsoir @Myrddin,
C'est une belle fiche que nous a faite, bravo ♡
Ton HTML est parfait, j'ai juste quelques remarques sur le CSS.
Attention au CSS lié à la scrollbar qui est général, et donc sera appliqué à toute la page et non seulement à ta fiche. Il faut plutôt mettre ".texteici::-webkit-scrollbar" comme sélecteur.
Voilà c'est tout![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
C'est une belle fiche que nous a faite, bravo ♡
Ton HTML est parfait, j'ai juste quelques remarques sur le CSS.
- Code:
.endcred {
color: darkgrey;
}
Attention au CSS lié à la scrollbar qui est général, et donc sera appliqué à toute la page et non seulement à ta fiche. Il faut plutôt mettre ".texteici::-webkit-scrollbar" comme sélecteur.
Voilà c'est tout
![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
_______________
Mer 18 Oct 2017 - 18:20
Belonne

Membre timide
- Date d'inscription : 17/10/2017
- Messages : 152
Bonjour
bon ba du coup, je me lance aussi. J'espère pas avoir fait trop de bêtise. Merci en tout cas pour cet exercice
.

![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
- Code:
<div style=" background: black; width: 500px; height: 450px">
<h1 style="color: white; text-align: center;font-family: 'Courgette';"> Il était une fois </h1>
<h2 style="color: white; text-align: center; background: grey; border-radius: 20px; margin-left:100px;margin-right:100px; margin-top: 5px; font-family: 'Courgette'; font-size: 28px; ">Une histoire</h2>
<div style="background: grey; width: 300px; height: 150px; margin-left: 100px; margin-right: 20px; margin-top:25px; border-radius: 20px; padding-top: 50px; font-size: 25px; overflow: auto;text-align:center; color: white; font-weight: bold; font-family: 'Courgette'"> Description </div>
<div style="background: grey; width: 300px; height: 50px; margin-top: 25px;margin-left: 100px; color: white; border-radius: 20px; text-align:center; padding-top:10px; font-weight: bold;font-family: 'Courgette';"> blabla <a href="http://epicode.variousforum.com/" target "_blank" style="color:white";>Lien</a>
</div>
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
_______________
Jeu 19 Oct 2017 - 10:41
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
@Belonne Bonjour,
Oui tu as fais plein de bêtises /PAF
Je plaisante, ton code est bon, bravo !
Voici néanmoins quelques petites remarques.
D'abord, tu as oublié de fermer la div parente :) il manque donc un /div à la fin avant le lien de la police.
En parlant de lien, il te manque un petit = après target (target="_blank")
Ma dernière remarque concerne le titre h1. Ce n'est pas nécessaire mais c'est une information en plus qui peut te servir après. D'ailleurs j'ai fait la même remarque à Astriones un peu plus haut.
Donc plutôt que de mettre.
Oui tu as fais plein de bêtises /PAF
Je plaisante, ton code est bon, bravo !
Voici néanmoins quelques petites remarques.
D'abord, tu as oublié de fermer la div parente :) il manque donc un /div à la fin avant le lien de la police.
En parlant de lien, il te manque un petit = après target (target="_blank")
Ma dernière remarque concerne le titre h1. Ce n'est pas nécessaire mais c'est une information en plus qui peut te servir après. D'ailleurs j'ai fait la même remarque à Astriones un peu plus haut.
Donc plutôt que de mettre.
- Code:
margin-left: 100px; margin-right: 100px;
- Code:
width: 300px; margin: auto;
_______________
Jeu 19 Oct 2017 - 11:57
Belonne

Membre timide
- Date d'inscription : 17/10/2017
- Messages : 152
D'accord, je note tout ça du coup, merci pour les corrections et les conseils
![[Facile] Exercice 3 - Fiche - Izusa 3488708190](/users/1416/13/16/78/smiles/3488708190.gif)
_______________
Jeu 19 Oct 2017 - 12:18
Jawn

Ancien.ne du staff
- Date d'inscription : 24/03/2016
- Messages : 3494
Ahw merci pour la petite correction ! C'est modifié du coup, histoire que ça reste clair
!
J'avais pas pensé au
.endcred a {
}
En effet ><' ! Rahw, j'vais le retenir maintenant xD !

J'avais pas pensé au
.endcred a {
}
En effet ><' ! Rahw, j'vais le retenir maintenant xD !
_______________
Jeu 19 Oct 2017 - 12:22
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Jeu 19 Oct 2017 - 12:46
Tigrlion

Fidèle au poste !
- Date d'inscription : 22/11/2017
- Messages : 312
De tous les exercices proposés, c'est celui qui me parait être le plus facile, alors j'ai tenté quelque chose. Voila mon code :
- Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet"> <div style="background-color:black; padding-top:60px; padding-bottom:30px; text-align:center; color:white;"><div style="font-family: 'Indie Flower'; font-size:60px;">Blblbl voila le titre</div><div style="background-color:darkgrey; padding:10px; font-size:35px; font-family: 'Indie Flower'; width:320px; margin:auto; margin-top:15px; border-radius:40px;">et puis ici c'est le titre secondaire</div><div style="background-color:darkgrey; padding:30px; font-size:16px; font-family: 'Patrick Hand'; width:350px; height:350px; overflow:auto; margin:auto; margin-top:40px; margin-bottom:25px; border-radius:40px; text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus. Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.
Suspendisse sagittis porttitor lobortis. Donec bibendum semper eros eu volutpat. Praesent efficitur nulla dolor, vel rutrum mauris cursus ac. Aliquam maximus varius tincidunt. Fusce vel leo ex. Etiam faucibus dolor non nulla finibus ultricies. Morbi volutpat imperdiet lacus, non varius felis luctus et. Proin sed elementum felis. Donec consectetur facilisis sem, pharetra gravida purus porttitor sit amet. Nullam sollicitudin ultricies ullamcorper. Etiam at est in lectus iaculis scelerisque. Cras fringilla porta massa, in ornare metus porta eget. Aliquam placerat eu libero quis aliquam.
Mauris cursus, dui vel efficitur tempor, diam magna mollis purus, nec tincidunt erat massa sit amet dolor. Ut quis volutpat ligula. Donec in porttitor nibh. Curabitur consequat hendrerit diam quis rhoncus. Donec eu fringilla sem. Aliquam lacinia sed dui sit amet sollicitudin. Nullam finibus leo ac gravida imperdiet. Mauris ac hendrerit justo. Nunc lorem ligula, efficitur vel nisl quis, consequat tincidunt augue. Ut egestas diam quis lorem laoreet laoreet. Sed feugiat massa ut sapien pulvinar venenatis. Nunc at nulla velit.</div><div style="background-color:darkgrey; padding:5px; font-size:13px; font-family: 'Verdana'; width:250px; margin:auto; border-radius:20px;"><a href="http://epicode.variousforum.com/" target="_blank" style="color:grey;">Tigrlion | Epicode</a></div></div>
_______________
Jeu 23 Nov 2017 - 20:16
Tigrlion

Fidèle au poste !
- Date d'inscription : 22/11/2017
- Messages : 312
Woooh, c'est vrai ? Y a rien à en redire ?? Brrr faut pas me dire ça moi, je vais être beaucoup trop fière et heureuse !
Merci ! Je fonce tenter de m'attaquer à plus compliqué alors !

Merci ! Je fonce tenter de m'attaquer à plus compliqué alors !
_______________
Ven 24 Nov 2017 - 19:55
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Tu as tout à fait le droit d'être fière puisque c'est tout bon x)
Techniquement ton code est correct mais si tu veux vraiment mon avis, la seule petite chose que je peux te dire et ça reste mon avis : tu aurais pu utiliser des balises sémantiques plutôt que des div. C'est à dire h pour les titres, p pour le paragraphe etc.
Techniquement ton code est correct mais si tu veux vraiment mon avis, la seule petite chose que je peux te dire et ça reste mon avis : tu aurais pu utiliser des balises sémantiques plutôt que des div. C'est à dire h pour les titres, p pour le paragraphe etc.
_______________
Sam 25 Nov 2017 - 0:07
Tigrlion

Fidèle au poste !
- Date d'inscription : 22/11/2017
- Messages : 312
J'ai un peu de mal avec ces balises là, j'obtiens pas ce que je veux quand j’essaie de les utiliser, je dois pas faire comme il faut... Ça change quoi concrètement par rapport aux div ? Je suppose qu'il y a un tuto sur ça, je vais essayer de me renseigner... Merci !
_______________
Sam 25 Nov 2017 - 0:40
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Disons qu'on remarque moins la différence si on utilise le CSS.
Par défaut la balise h1 par exemple affichera un titre de grande taille et en gras. la balise p génère un espace avant et après le paragraphe. Par contre par défaut la div nous affichera du texte normal à taille régulière et donc sans CSS on ne saura différencier un titre d'un paragraphe.
De plus les balise sémantiques décrivent leur contenu. Pour une personne qui va lire ton code ou toi-même si tu veux le modifier un peu plus tard, tu peux facilement repérer un titre, un sous-titre, une citation ou un paragraphe etc. Avec des div ça sera le bazar et toi ou la personne qui lit ton code va galérer pour s'y retrouver.
Par défaut la balise h1 par exemple affichera un titre de grande taille et en gras. la balise p génère un espace avant et après le paragraphe. Par contre par défaut la div nous affichera du texte normal à taille régulière et donc sans CSS on ne saura différencier un titre d'un paragraphe.
De plus les balise sémantiques décrivent leur contenu. Pour une personne qui va lire ton code ou toi-même si tu veux le modifier un peu plus tard, tu peux facilement repérer un titre, un sous-titre, une citation ou un paragraphe etc. Avec des div ça sera le bazar et toi ou la personne qui lit ton code va galérer pour s'y retrouver.
_______________
Sam 25 Nov 2017 - 1:26
Meiywa

Newbie
- Date d'inscription : 19/01/2018
- Messages : 43
Motivation quand tu nous tiens ![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
Voici donc mon troisième exercice...
Et toujours l'aperçu du code
![[Facile] Exercice 3 - Fiche - Izusa 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
Voici donc mon troisième exercice...
- HTML:
- Code:
<div id="presentation">
<div id="titre">Titre</div>
<div id="titre2">Second titre</div>
<p id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat magna at aliquam bibendum. Maecenas tempor semper libero. Vivamus id dapibus sem, non aliquet justo. Quisque tellus lectus, sagittis quis nibh quis, tristique faucibus libero. Aliquam quis odio tortor. Nunc vitae massa consequat, consequat quam at, venenatis turpis. Nulla augue felis, porttitor in aliquet eu, mattis quis ipsum.
Aenean cursus porta arcu, vitae elementum dui accumsan vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis molestie semper enim, a accumsan velit sodales ac. Cras at cursus nunc, et tristique neque. Maecenas quis nunc ullamcorper, porttitor ex sit amet, aliquam turpis. Nullam risus ligula, aliquam nec felis nec, aliquam consequat lectus. Aliquam libero dui, tincidunt nec consectetur non, porttitor quis augue. Phasellus nec nisi a purus molestie ultricies ac id lacus. Maecenas id nibh semper, vehicula mauris vitae, ultrices erat.</p>
<p id="copyright">by meiywa pour <a href="http://epicode.variousforum.com">epicode</a></p>
</div>
- CSS:
- Code:
#presentation {
background-color: black;
border-radius: 30px;
height: 600px;
width: 400px;
margin: auto;
}
#titre {
text-align: center;
font-size: 70px;
color: white;
}
#titre2 {
background-color: grey;
opcity: 0.5;
text-align: center;
width: 200px;
margin: auto;
padding: 5px;
border-radius: 5px;
margin-top: 50px;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
#description {
text-align: justify;
margin: auto;
color: white;
width: 300px;
background-color: grey;
padding: 10px;
height: 250px;
overflow: auto;
margin-top: 50px;
font-size: 15px;
line-height: 12px;
}
#copyright {
text-align: center;
color: white;
font-size: 10px;
margin-top: 50px
}
#copyright a {
color: white;
font-size: 10px;
margin-top: 50px
}
Et toujours l'aperçu du code
![[Facile] Exercice 3 - Fiche - Izusa 1066248963](/users/1416/13/16/78/smiles/1066248963.gif)
_______________
Lun 29 Jan 2018 - 23:16
Reine des Ténèbres

Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
@Meiywa
Bonjour,
Ton rendu est joli et fidèle au modèle de l'exercice, félicitations.
La première chose qu'on remarque c'est l'utilisation des id tout au long du code. Les sélecteurs CSS ont une certaine hiérarchie de spécificité. Sache que le sélecteur le moins spécifique est la balise, puis la classe et finalement l'id. Donc Le CSS de l'id peut écraser celui de la classe et le CSS de la classe peut écraser celui de la balise. C'est pourquoi les classes sont réutilisables autant de fois que nécessaire par contre les id sont très spécifiques et donc uniques et ne doivent figurer que sur un seul élément.
Dans la logique où ton code sera utiliser sur un forum, le code d'une fiche ou d'un message rp sera réutiliser dans les messages. Or l'id est un élément unique qui ne devrait figurer d'une seule fois sur une page HTML. C'est pourquoi, il sera préférable d'utiliser directement le nom des balises si c'est possible et sinon des classes plutôt.
Dans la même optique, tu aurais pu éviter de nommer description et utiliser simplement la balise p de cette façon : .presentation p {...}
Dans titre2 je vois la propriété opacity qui est mal orthographiée, tu as oublié un a.
Concernant les marges tu as :
La propriété margin est supposée être un raccourci des 4 marges. Ici tu as la marge droite et gauche en auto, la marge haute à 50px et la marge basse à 0. Le raccourci ressemblera donc à ça :
Ma dernière remarque concerne la propriété line-height. Je suis contente de voir que tu connais cette propriété par contre à 12px je trouve que ton texte est très encombré, j'aurais mis 16px ou 18px au moins. Ta font est à 15px donc une hauteur inférieure à 15px risque de rendre la lecture assez difficile et le rendu inesthétique. ça peut être acceptable pour un titre ou une citation mais pas tout le paragraphe si tu vois ce que je veux dire.
Sinon il manque juste un point virgule à la fin dans copyright / copyright a. Et juste au cas où tu ne connais pas, tu peux enlever le soulignement des liens via la propriété text-decoration : none;
En espérant que ça t'aide à progresser, bon courage !
Bonjour,
Ton rendu est joli et fidèle au modèle de l'exercice, félicitations.
La première chose qu'on remarque c'est l'utilisation des id tout au long du code. Les sélecteurs CSS ont une certaine hiérarchie de spécificité. Sache que le sélecteur le moins spécifique est la balise, puis la classe et finalement l'id. Donc Le CSS de l'id peut écraser celui de la classe et le CSS de la classe peut écraser celui de la balise. C'est pourquoi les classes sont réutilisables autant de fois que nécessaire par contre les id sont très spécifiques et donc uniques et ne doivent figurer que sur un seul élément.
Dans la logique où ton code sera utiliser sur un forum, le code d'une fiche ou d'un message rp sera réutiliser dans les messages. Or l'id est un élément unique qui ne devrait figurer d'une seule fois sur une page HTML. C'est pourquoi, il sera préférable d'utiliser directement le nom des balises si c'est possible et sinon des classes plutôt.
Dans la même optique, tu aurais pu éviter de nommer description et utiliser simplement la balise p de cette façon : .presentation p {...}
Dans titre2 je vois la propriété opacity qui est mal orthographiée, tu as oublié un a.
Concernant les marges tu as :
- Code:
#description {
margin: auto;
margin-top: 50px;
}
La propriété margin est supposée être un raccourci des 4 marges. Ici tu as la marge droite et gauche en auto, la marge haute à 50px et la marge basse à 0. Le raccourci ressemblera donc à ça :
- Code:
#description {
margin: 50px auto 0;
}
Ma dernière remarque concerne la propriété line-height. Je suis contente de voir que tu connais cette propriété par contre à 12px je trouve que ton texte est très encombré, j'aurais mis 16px ou 18px au moins. Ta font est à 15px donc une hauteur inférieure à 15px risque de rendre la lecture assez difficile et le rendu inesthétique. ça peut être acceptable pour un titre ou une citation mais pas tout le paragraphe si tu vois ce que je veux dire.
Sinon il manque juste un point virgule à la fin dans copyright / copyright a. Et juste au cas où tu ne connais pas, tu peux enlever le soulignement des liens via la propriété text-decoration : none;
En espérant que ça t'aide à progresser, bon courage !
_______________
Mer 31 Jan 2018 - 14:36
Meiywa

Newbie
- Date d'inscription : 19/01/2018
- Messages : 43
Grand merci pour toutes ses précisions :D Je vais tenté d'appliquer tout ça au prochain ego (a)
_______________
Ven 2 Fév 2018 - 15:06
Contenu sponsorisé
Page 1 sur 2 • 1, 2 

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