Classe N°10 | Rainy-Sunny
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3159
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Classe N°10 | Rainy-Sunnyle Ven 22 Mar 2019 - 0:21
Bonjour à toi @Rainy-Sunny et bienvenue dans ta classe :3

Je mets en rappel ton formulaire d'inscription :
Spoiler:

Tes connaissances en codage : Alors euh... Bah j'ai commencé à lire plein de tutos un peu partout récemment, du coup bah je pense que je connais la base de la base. Du coup, je vais dire Novice + ?
Ton but : En ce moment, j'ai un forum en construction. Et même si je suis pas responsable du codage pour l'instant, en tant que fondatrice, j'aimerai quand même pouvoir me débrouiller toute seule ensuite ! Enfin, bien sûr, ce n'est pas que pour créer un forum que je veux apprendre, mais pour l'expérience rp, tout simplement :3 Je veux dire, c'est toujours satisfaisant quand tu as une toute jolie fiche de liens personnalisée huhu...
Type de formation : [ ] codage général, [x] pour forumactif uniquement  (je pense pas que j'utiliserai beaucoup autre part à vrai dire...)
Motivation : Je suis plutôt débrouillarde et logique, je pense ! Même si j'aime bien qu'on me confirme si je fais bien les choses ou non c': Je ne suis donc pas contre un guide pour me montrer la voie ! Je me ferai élève attentive et appliquée, haha... Enfin, si on veut bien de moi bien sûr.
Disponibilité : Je suis plutôt dispo en ce moment. En tout cas, je pense
Expérience en codage : Bah... Je suppose qu'on commence comme la plupart des gens faisant du rp sur forum, en modifiant les fiches en libre-service xD Mais comme dit plus tôt, j'ai lu plein de tuto récemment... Mais ça reste assez simple.
Truc que j'ai fait genre... y'a 30 min ?:

Code:
<div style="width: 85%; margin: auto; border-right: 4px solid #6a0c83; border-left: 4px solid #6a0c83; border-top: 2px solid #6a0c83; border-bottom: 2px solid  #6a0c83; border-radius: 20px 20px 20px 20px; background-image: url(https://redcdn.net/hpimg4/pics/140551motif6.jpg);">
<div style="padding: 15px; color: black; font-size: 13px; font-family: arial; text-align: justify; text-shadow: 0 1px 0 #d4d4d4">
<span style="display: block; text-align:center; font-size:45px; color: #6a0c83; font-style:italic; font-family: Brush Script MT, Brush Script Std, cursive; text-shadow: 0 0 1px grey;">Règlement<br /><span style="display: block; margin-top: 5px; font-family: times new roman; font-size: 15px; font-style:none; color: black">Il va falloir obéir, les enfants :3</span></span>
<br /><br />
Petite intro sympatoche
<br />
<span style="display:block; text-align: center; padding-bottom: 6px; padding-top: 6px; border-top: 2px dotted #6a0c83; border-bottom: 2px dotted #6a0c83; font-family: times new roman; font-variant: small-caps; font-weight: bold; font-size:25px; color:#6a0c83;">Première partie</span><br />
<span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">1° point</span>
<div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
<br />
<span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">2° point</span>
<div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
<br />
<br />
<span style="display:block; text-align: center; padding-bottom: 6px; padding-top: 6px; border-top: 2px dotted #6a0c83; border-bottom: 2px dotted #6a0c83; font-family: times new roman; font-variant: small-caps; font-weight: bold; font-size:25px; color:#6a0c83;">Deuxième partie</span><br />
<span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">1° point</span>
<div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
</div>
</div>


Règlement
Il va falloir obéir, les enfants :3




Petite intro sympatoche


Première partie

1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.



2° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.





Deuxième partie

1° point
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.



L'anglais et toi : On s'entend plutôt bien ! Bon, je vais pas dire que je suis bilingue, mais j'peux large me débrouiller /o/ Ca aide d'avoir une mère étrangère...
Autres : Bon, c'est un peu HS, mais j'avoue que je n'ai pas été vraiment active sur épicode malgré toutes ces années Classe N°10 | Rainy-Sunny 3313101865 Néanmoins, pas d'inquiétude ! Je m'engage à l'être désormais ! (ou en tout cas pour le codage) Je suis ultra motivée ! ** Faut dire, j'ai l'habitude de pas trop poster, à espionner de loin, et à garder mes créations pour moi...
Mais comment peux-tu appeler ta mère une étrangère, c'est ta mère /pan *blague pourrie pardon xD*
Elle est d'où ? **

Alors, il se fait tard du coup pardonne-moi, je vais devoir remettre l'analyse du code de ton règlement à demain. Je te laisse en attendant un petit questionnaire pour évaluer tes bases en HTML:

Code:
[b]C'est quoi le HTML et à quoi ça sert [/b]
[b]Quel est la différence entre le HTML et le BBcode [/b]
[b]Quelle est la structure de base d'une page HTML[/b]
[b]A quoi sert le charset[/b]
[b]Comment écrire un commentaire en HTML[/b]
[b]Comment coder des titres[/b]
[b]Quel est le code nécessaire pour insérer une liste[/b]
[b]Comment insérer un tableau[/b]
[b]Qu'est ce que l'indentation[/b]
[b]Deux exemples de balises ouvrantes / fermantes[/b]
[b]Deux exemples de balises auto-fermantes[/b]
[b]Quelle est la différence entre div et span[/b]

Voilà voilà Classe N°10 | Rainy-Sunny 1066248963




Spoiler:

Codée par Sun d'amour  Classe N°10 | Rainy-Sunny 3775839356
Rainy-Sunny
Sexe : Féminin
Date d'inscription : 23/06/2013
Messages : 66
Voir le profil de l'utilisateur
# Re: Classe N°10 | Rainy-Sunnyle Ven 22 Mar 2019 - 7:24
Yay ! Merci  Classe N°10 | Rainy-Sunny 1066248963

Ahah ! Et ma mère est philippine !  Classe N°10 | Rainy-Sunny 3775839356  
Par contre, j'avoue que je regrette un peu qu'elle ne m'ait pas appris le tagalog (la langue nationale) ou le waray waray (le dialecte de chez elle). Ca aurait été pratique pour dire des trucs sur les gens sans qu'ils le comprennent  Classe N°10 | Rainy-Sunny 885843852


Oulala ! Un questionnaire ! D: Bon bah je vais essayer de répondre sur ce que je sais TwT

C'est quoi le HTML et à quoi ça sert
Alors, euh... Ca sert à faire comprendre à l'ordinateur comment structurer une page ? A placer les éléments qu'on veut mettre ?
Quel est la différence entre le HTML et le BBcode
Le BBcode, c'est plus similaire à du CSS je pense ? Et puis, ce n'est pas directement utilisable sur une page web, contrairement au HTML ? Je sais pas trop comment expliquer ça...
Quelle est la structure de base d'une page HTML
Structure de base ? Hmm... J'crois que j'ai vu truc là-dessus, mais j'ai pas retenu... :pastaper:
A quoi sert le charset
Aucune idée, honnêtement TwT
Comment écrire un commentaire en HTML
Code:
<!-- Ceci est un commentaire -->
Comment coder des titres
Avec les balises h1, h2, etc ? Après, j'avoue que je les ai pas utilisées :v
Quel est le code nécessaire pour insérer une liste
Me semble que c'est comme ça :
Code:
<ul>
<li>1er élément de la liste</li>
<li>2ème élément de la liste</li>
<li>etc..</li>
</ul>
Ca marche aussi avec ol à la place de ul...
Comment insérer un tableau
Code:
<table></table>
Je suppose ?  J'ai jamais utilisé non plus TwT
Qu'est ce que l'indentation
Alors, j'suis pas sûre du tout, mais j'crois que c'est la mise en page du code ?
Deux exemples de balises ouvrantes / fermantes
Ah ! Ca je sais... (classique efficace)
Code:
<div></div>
<span></span>
Deux exemples de balises auto-fermantes
Ca aussi je sais /o/
Code:
<br />
<img src="Lien" />
Quelle est la différence entre div et span
Alors, div c'est pour les blocs, span c'est pour les lignes. On peut mettre du span dans du div, mais l'inverse pas trop. Enfin, y'a quand même un truc que je comprends pas bien... Pourquoi surtout QUAND utiliser le CSS display: block/inline-block ? Enfin, je sais que ça sert à pouvoir appliquer des CSS comme margin qui s'applique que sur les blocs par exemple, mais... Bref, je pense que je finirai par mieux comprendre quand utiliser quoi avec de la pratique TwT
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3159
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°10 | Rainy-Sunnyle Mar 26 Mar 2019 - 15:46
Coucou :3

Je m'excuse sincèrement pour le retard. Je suis assez occupée par le travail dernièrement ce qui fait que je ne me connecte qu'après minuit et pour pas longtemps. Mais je refuse de donner l'air d'une prof indigne et incompétente x) Donc je te réponds maintenant lors de ma pause et je ferai de mon mieux pour être plus présente, promis.

Oh les Philippines ça fait rêver!
Bien que la raison pour laquelle tu souhaites apprendre la langue est assez machiavélique x), il n'est jamais trop tard pour apprendre une langue. D'ailleurs, il me semble que tu es assez jeune pour apprendre tout et n'importe quoi, donc go for it!

Retour au petit code du règlement.

Visuellement c'est joli, on voit des bords arrondis et des pointillées, un style que peu de codeur ose explorer.
Mais comme toute prof ténébreuse qui se respecte /pan, je vais pointer les petits trucs à fixer, ce qui va aussi m'orienter vers le type de cours à revoir ensemble :

- Alors, première chose qu'on voit dans le code c'est le CSS et HTML mélangés, ça fait l'affaire pour coder mais c'est cruellement difficile à lire, réviser ou corriger. Dans ce mode tu auras du mal à te repérer si jamais tu voulais ajouter une déclaration CSS à un bloc ou titre que tu as déjà passé par exemple.
Pour ces mêmes raisons, il est recommandé de toujours séparer le HTML du CSS. Pour cela on utilise ce qu'on appelle des sélecteurs. Pour cela il est commun d'utiliser des "class" et "id".

- Secundo, ton HTML est composé entièrement de div, span et br. Je vois aussi qu'il y a un peu de confusion sur la différence entre span et div. En lisant ta réponse dans le formulaire je vois que tu connais la différence théoriquement ce qui est bien, mais on va revoir cette différence de point de vue pratique. On va aussi répondre à tes questions concernant la propriété CSS display, je note :3
Aussi, toujours dans ce point, on va voir comment utiliser des balises plus significatives pour les titres, paragraphes etc, plutôt que des div et span pour rendre le code plus pertinent et plus lisible.

- Niveau CSS, il me semble que tu connais beaucoup de choses, ce qui est super! D'ailleurs même en HTML, il n'y a pas une seule balise obsolète et c'est génial aussi. Petit conseil pour le nom des polices (font), quand le nom est de plus d'un mot, on le met entre guillemets simples ou doubles genre : 'Time New Roman' ou "Time New Roman". Ici tu as utilisé Brush Script MT, qui est web safe donc elle s'affiche correctement sans les guillemets mais pour les polices personnalisées ça ne fonctionne pas sans. D'ailleurs Brush Script MT est la seule police de type script qui est web safe.

- Pour toutes les propriétés CSS qui peuvent prendre 4 valeurs comme margin, padding, border-radius etc. Si les quatre valeurs ont le même nombre (dans ton code border-radius: 20px 20px 20px 20px; donc 4x 20px) on ne met qu'une seule fois la valeur et ça sous entend que c'est de même dans tous les sens. (border-radius: 20px;).

- Ici je reviendrais à un point évoquer au début en HTML parce que c'est lié au CSS: div/span et display.
Alors, je vois une overdose de display dans ton code. Le choix entre div et span est pourtant simple. Quand mon élément est un bloc c'est à dire qu'il a besoin d'une hauteur, une largeur, une marge ou qu'il comporte d'autres éléments bloc à l'intérieur, ou des éléments qu'il faut aligner (j'ai mis ou parce que une seule de ces conditions suffit pour juger que mon élément devrait être un bloc), donc c'est automatiquement une div, parce que div = bloc simplement. Ici pas la peine de s'amuser à mettre une span et un display: block dedans, ou même une span et un br après, parce que là aussi, si mon élément a besoin de prendre toute la ligne c'est que c'est un bloc. Je remets les propriétés des blocs pour que ça soit plus clair pour toi : width, height, margin, text-align, background-image.
Dans tous les autres cas (techniquement il n'en reste qu'un seul) c'est une span. Plus en détails, quand mon élément est une partie d'une ligne qui doit être mise en forme séparément du reste de la ligne. Par exemple, mettre en gras quelques mots dans une phrase ou mettre d'une autre couleur les mots clés dans un texte etc.

- Là c'est pas technique mais je me demande pourquoi tu as pris un fond uni en image. Si tu veux mettre une couleur de fond uni tu aurais pu utiliser simplement une couleur de fond. Une image prend plus de temps pour charger, on prend le risque pour afficher nos belles images mais là c'est juste du blanc, je vois pas l'intérêt.

Alors ça sera tout pour ce message question de ne pas te faire fuir x)

Sinon tes réponses au formulaire sont assez correctes, ça nous permettra de faire plus de pratique que de théorie c'est bien tout ça :3




Spoiler:

Codée par Sun d'amour  Classe N°10 | Rainy-Sunny 3775839356
Rainy-Sunny
Sexe : Féminin
Date d'inscription : 23/06/2013
Messages : 66
Voir le profil de l'utilisateur
# Re: Classe N°10 | Rainy-Sunnyle Sam 30 Mar 2019 - 22:30
Hello hello !

Pas de soucis pour le retard ! La vie perso avant tout, hein :3 J'comprends que tu me mettes pas en priorité, c'est sûr ! xD

Ahah, ouais, il est jamais trop tard... Et puis, ce qui est pratique avec le tagalog/waray, c'est que y'a beaucoup de mots qui n'existent pas et qui du coup sont dits en anglais. Du coup, si tu sais pas un mot, tu le dis en anglais avec l'accent philippin, ça paaaaasse !
(Bref, c'était le commentaire linguistique /pan/ )

Sinon, ça en fait des commentaires plz


- J'ai découvert les class et les id après avoir fait ce règlement xD J'en ai pas trop utilisé pour le moment, mais oui, ça a l'air beaucoup plus lisible de faire ça comme ça ! Il faudra que je fasse un peu de pratique, héhé !

- Ouais, après j'avoue que j'ai pas utilisé souvent d'autres balises que span et div... Mais oui, je veux bien découvrir et pratiquer avec des balises plus... pertinentes ?

- Je note pour les font ! /o/

- Oooh, ok... C'est clair que c'est beaucoup plus court de juste écrire border-radius: 20px, haha...

- Okkk... Bon. Je vais essayer de retenir tout ça. La manière dont tu m'expliques ça est déjà un peu plus claire que dans les tutos que j'ai lu je trouve ! (ou alors, c'est juste qu'à force de rabâcher, ça commence enfin à entrer dans ma tête ? /PAN/ )

- Ahah xD En vrai, c'était juste pour tester le background image... Et ça donne une légère texture ? Non ? Bon d'accord, c'était une idée un peu nulle xDD


Cool ! Avec tout ça j'ai hâte de faire des exercices hihihi... x3 Je verrai si des questions me viennent plus tard ! Pour l'instant ça va.
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3159
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°10 | Rainy-Sunnyle Sam 6 Avr 2019 - 23:14
Alors pour bien démarrer, faisons une petite introduction au HTML.

RS a écrit:C'est quoi le HTML et à quoi ça sert
Alors, euh... Ca sert à faire comprendre à l'ordinateur comment structurer une page ? A placer les éléments qu'on veut mettre ?

- HTML c'est quoi ?

HTML (Hypertext Markup Language)
Le HTML est un langage informatique de balisage (vu qu'il utilise des balises) ou de description (les balises décrivent leur contenu). Son but essentiel est de créer l'architecture d'une page web. Il permet donc de structurer logiquement et créer le contenu brut d'une page. Le HTML est la base de tout le web. Toute page web sans exception est codé à base de HTML. Cependant il ne sera jamais (ou presque) utilisé tout seul. Vu qu'il ne fait que mettre la charpente et donc du contenu noir sur blanc, on a besoin du CSS pour tout ce qui est mise en forme et éventuellement d'autres langages pour ce qui est animation et interaction avec la page comme le JavaScript.

Pour info, le HTML a été inventé en 1991 et est régulièrement mis à jour depuis, sa dernière version est le HTML5 qui est apparu en 2014. (OK pas si régulièrement que ça /pan).

RS a écrit:Quel est la différence entre le HTML et le BBcode
Le BBcode, c'est plus similaire à du CSS je pense ? Et puis, ce n'est pas directement utilisable sur une page web, contrairement au HTML ? Je sais pas trop comment expliquer ça...

Bon il est inutile de s'étaler au dessus du BBcode mais juste pour info, le BBcode (Bulletin Board Code), bulletin board fait référence en anglais à forum de discussion. C'est un autre langage de balisage créé spécifiquement pour les forums, et donc pour les gens normaux qui ne sont pas des codeurs. Il est simplifié et permet de mettre en forme comme le CSS en effet. Il n'est pas juste similaire au CSS mais c'est plutôt un langage qui fusionne HTML et CSS donc un mode simplifié pour mettre en forme les massages ou insérer des liens, images etc, simplement.
Les différences entre HTML et BBcode :
- Le BBcode est simple et permet de mettre du contenu et sa mise en forme directement (il n'a pas besoin de CSS).
- Le BBcode n'est pas standardisé, les balises peuvent changer d'une plateforme à une autre, genre, sur FA pour cacher du contenu la balise est [ hide ] mais sur d'autres plateformes la balise est [ hidden ]. A la différence du HTML qui est standardisé et donc universel.
- Le BBcode utilise des crochets "[" "]" et le HTML utilise des chevrons "<" ">"

Et enfin, un petit schéma pour connaitre les termes relatifs au HTML, comme ça quand je parle d'attribut ou élément on se comprendra.

Spoiler:
Classe N°10 | Rainy-Sunny Codage10

Si tu as des questions, n'hésite pas :3




Spoiler:

Codée par Sun d'amour  Classe N°10 | Rainy-Sunny 3775839356
Rainy-Sunny
Sexe : Féminin
Date d'inscription : 23/06/2013
Messages : 66
Voir le profil de l'utilisateur
# Re: Classe N°10 | Rainy-Sunnyle Dim 14 Avr 2019 - 16:41
Ooh, d'accod d'accord ! C'est cool d'avoir quelques précisions !

Bon, alors niveau questions euh... Tu avais parlé de balises plus pertinentes au lieu des div et des span ? J'aimerai bien savoir un peu mieux comment utiliser tout ça ! Et aussi, je connais les class et les id, par contre j'ai du mal à comprendre quand il vaut mieux utiliser quoi ? Bon, d'après ce que je sais, les id sont utilisés pour des éléments "spécifiques/uniques" ? Mais j'ai un peu du mal à saisir ce que ça veut dire...
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3159
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°10 | Rainy-Sunnyle Jeu 18 Avr 2019 - 17:36
Coucou :3

On verra les balises sémantiques en premier donc tu auras ta réponse là dessus.

Pour les classes et id en CSS.
Alors, vu que tu as déjà étudié les classes et id donc je ne vais pas parler de définition et tout ça, ce n'est pas notre sujet principal là tout de suite en plus. Les classes et id sont donc des attributs utiliser pour "attribuer" une mise en forme ou un événement à un élément HTML.

Sélecteur de classe : class
- Plusieurs éléments d'un document peuvent avoir la même classe
- un seul élément peut avoir plusieurs classes. Donc on les sépare simplement par un espace.

Donc de façon plus pratique, la class est générale, elle peut être utilisée et réutilisée à volonté. C'est l'attribut le plus "sûr" on va dire ou "hors danger" d'utilisation.

Les catégories d'un forum par exemple se répètent autant de fois que nécessaire, donc pour la mise en forme de celle-ci, on va obligatoirement utiliser des classes et non des id.
Dans mon template j'aurai donc un truc du genre :
Code:
<section class="categorie"> contenu de ma catégorie </section>

Sélecteur d'identifiant : id
- L'identifiant est unique et ne peut être attribué qu'à un seul élément.
- L’élément ne peut avoir qu'un seul identifiant.
L'identifiant est alors utilisé quand on veut appliquer un style unique à un seul élément.

Si je reprends le forum en exemple, le forum n'a qu'un seul et unique Qeel, donc pour cet élément, je peux mettre un id.
Code:
<section id="qeel"> contenu de mon qui est en ligne </section>

Par contre dans cet exemple, il n'est pas faux d'utiliser une class plutôt qu'un id, c'est pourquoi j'ai dit que la class est le choix le plus sûr.

Cependant, l'identifiant ne sert pas qu'en CSS. Et c'est un peu là le plus grand intérêt de celui-ci. L'id est surtout utile pour attribuer un événement ou une animation (càd du JavaScript) à un élément spécifique.

Si tu observes ma signature par exemple, les onglets ont tous la même mise en forme et donc la même classe a été utilisée plusieurs fois. Par contre en cliquant sur un onglet spécifique (événement), un contenu spécifique et unique qui lui correspond est affiché. Si on clique sur Old par exemple, la liste de mes anciennes signatures s'affiche. Et pour faire correspondre un onglet avec un bloc de contenu il faut qu'il aie un nom unique et donc nous avons impérativement besoin des id (et du Javascript).

Les id sont aussi utilisés pour créer des liens vers du contenu interne dans les sommaires. Tu sais un peu comme quand tu cliques sur un sous-titre dans sommaire et la page défile automatiquement jusqu'à cette partie.

Je reviens donc sur : Les balises communes.

On peut diviser les balises en deux types selon trois critères :
- double ou auto-fermante :
* Comme tu le sais déjà, certaines balises se présentent en paire, l'élément est donc placé entre la balise ouvrante et la balise fermante
Exemple : <div> contenu </div>
* D'autres sont dites auto-fermantes ou orphelines et donc on met le contenu dans la balise. On remarque que les balises orphelines se ferment avec un slash à la fin dans toutes les anciennes versions de HTML sauf pour la dernière version. EN HTML5 il n'est plus obligatoire de fermer les balises avec un slash.
Ceci dit, tu peux soit le mettre soit ne pas le mettre, rappelle-toi juste de garder le même format pour ton code entier. C'est à dire quand tu codes une fiche par exemple ou autre, soit tu fermes toutes les balises auto-fermantes soit tu ne le fais pour aucune.
Exemple : <img src="url le l'image" /> ou <img src="url le l'image">
On remarque que le contenu est dans la balise.

- Block ou inline :
Là on en a un peu déjà parlé dans ton exo. On peut aussi diviser les balises selon leur type d'affichage. Le type d'affichage est défini en CSS par la propriété display. Les balises dont le type d'affichage est en bloc (display:block) s'affiche sur toute la ligne, c'est à dire qu'on aura forcément un retour à la ligne avant et après la balise. On peut définir une largeur et une hauteur à notre bloc, lui mettre des marges, aligner le texte ou tout autre contenu à l'intérieur et même ajouter une image en arrière-plan.
Exemple : la balise double div.
Code:
Ma phrase <div> présente un retour </div> à la ligne.
Résultat :
Ma phrase
présente un retour
à la ligne.
Les balises de type linéaire (display: inline) s'écrivent sur la même ligne, tu peux les placer au milieu d'un texte ou une phrase ça ne fait pas de saut de ligne et on peut pas leur mettre des marges, une largeur et une hauteur parce qu'elles prennent celle du bloc qui les contient.
Exemple : la balise span.
Code:
Ma phrase <span> ne présente pas de retour </span> à la ligne.
Résultat :
Ma phrase ne présente pas de retour à la ligne.

- sémantique ou non sémantique

Les balises non-sémantiques, sont celles qui ne décrivent pas leur contenu.
Les balises sémantiques sont celles qui décrivent leur contenu.
Les balises non-sémantiques sont par exemple div et span, tu peux mettre tout et n'importe quoi dedans on ne saura pas forcément ce qu'il y aura si on ne lit pas le contenu.
Les balises sémantiques sont par exemple img et p, quand on voit img on sait directement que le contenu sera une image, quand on voit p on sait que c'est un paragraphe. (table pour un tableau, ul pour une liste ordonnée etc, on verra toutes les balises en détails).

C'est tout pour l'intro aux balises, est-ce que tu as des questions avant qu'on parle des différentes balises et comment les utiliser ?




Spoiler:

Codée par Sun d'amour  Classe N°10 | Rainy-Sunny 3775839356
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3159
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°10 | Rainy-Sunnyle Dim 12 Mai 2019 - 23:53
Coucou, @Rainy-Sunny.

ça va faire bientôt un mois que je n'ai plus de tes nouvelles, es-tu toujours intéressée par le cours ?




Spoiler:

Codée par Sun d'amour  Classe N°10 | Rainy-Sunny 3775839356
Contenu sponsorisé
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum