avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Les cours de Chhaya la thug tmtcle Lun 28 Mai 2018 - 19:16
Voici donc ta partie cours ! Tu vas voir, on va bien s'amuser.   *sort*
Alors pour commencer, et pour mieux cerner ce que tu peux faire, je vais te poser quelques questions ; si tu ne connais pas les réponses, ce n'est pas grave, car c'est pour ça que tu es ici : apprendre !

Qu'est-ce que le HTML, et à quoi sert-il ?
Sais-tu ce qu'est une balise block, et peux-tu m'en citer une ?
Sais-tu ce qu'est une balise inline, et peux-tu m'en citer une ?
Qu'est-ce qu'une balise auto-fermante ?
Qu'est-ce que l'indentation ?
Qu'est-ce que le CSS, et à quoi sert-il ?
Connais-tu les propriétés de positionnement, ou pas du tout ?


Des bisous ! Coeur


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Lun 28 Mai 2018 - 20:23
Coucou ♥️

MAIS ! Vilaine :3

Qu'est-ce que le HTML, et à quoi sert-il ? LE HTML est la structure d'une page ou d'un code et le CSS est l'habillage. Le HTLM et le CSS sont indissociables l'un de l'autre, on ne peut avoir l'un sans avoir l'autre.

Sais-tu ce qu'est une balise block, et peux-tu m'en citer une ? C'est ce qu'on utilise pour la mise en page si je ne me trompe pas.
<.div> : C'est la balise multi-usage. Elle est souvent utilisée pour positionner un contenu dans la page.
<.h1> ... <.h6> : Elle encadre un titre ou un sous-titre.
<.p> Elle est utilisée pour les paragraphes.
<.table> : C'est pour les tableaux.
<.blockquote> : Elle est utilisée pour un paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.

C'est tout ce que je connais pour ce type de balise.

Sais-tu ce qu'est une balise inline, et peux-tu m'en citer une ? Elle sert à tout "égayer" et elle prend uniquement la largeur dont elle a besoin, sans ajouter de saut à la ligne. Elle est utilisée pour les liens : <.a><./a>. Elle se trouve obligatoirement à l'intérieur d'une balise block. Pour l'histoire "d'égayer", c'est pour les textes (<.em>, <.strong> entre autre) et aussi pour les images <.img> et la balise <.span> aussi.

Qu'est-ce qu'une balise auto-fermante ? Ce sont des balises à la fois ouvrantes et fermantes. Elles ne contiennent pas de contenu. Je n'en connais que deux : <.br /> et <.img />.

Qu'est-ce que l'indentation ? Heu... Je crois que ça concerne le texte, pour qu'il ait une disposition particulière ou quelque chose comme ça.

Qu'est-ce que le CSS, et à quoi sert-il ? C'est la feuille de Style et elle est utilisée pour mettre en forme le HTML sinon il ne ressemblerait à rien :3

Connais-tu les propriétés de positionnement, ou pas du tout ? Je ne suis pas sûre de l'avoir appris ^^'

J'ai mis des . dans les balises parce que sans ça, ça déforme mon message XD

Voilà ♥️ *s'enfuit*
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Les cours de Chhaya la thug tmtcle Lun 28 Mai 2018 - 23:01
Alors alors, c'est très bien !  Bravo
Le HTML est l'abréviation de « HyperText Markup Language », soit « langage de balisage hypertexte » - d'où le nom de « balises », lolilol. Effectivement, il sert à structurer une page et donner du sens à son contenu ; voilà pourquoi il faut respecter sa sémantique, pour avoir un code valide et fonctionnel. En effet, il indique au navigateur qu'un morceau de tel texte est un paragraphe, ou un titre, ou un lien, etc. Voilà pourquoi un h1 sera automatiquement mis en gras et en gros par exemple : le navigateur lui attribue cette mise en forme puisqu'on lui a dit que se situait ici un titre important. c:

Tu sais identifier les balises block, c'est bien.  ^^  La div cependant, n'est pas la seule à « positionner un contenu dans la page ». Tu peux attribuer une position à un titre ou un paragraphe. Disons que c'est une balise générale, qui peut contenir aussi bien du texte que d'autres balises blocks, et c'est cette polyvalence qui en fait une balise très usitée.

La particularité des balises block, c'est, comme leur nom l'indique, d'être... des blocs, bravo, je vois que tu suis bien. XD Elles prennent par défaut toute la largeur de l'élément dans lequel elles sont (le corps de la page ou bien une autre div, par exemple) et se positionnent systématiquement en-dessous des autres. Tu peux leur donner une hauteur, une largeur, bref elle est assez malléable, c'est pour cela que certains novices la préfèrent aux balises plus ciblées, comme la balise p par exemple.  Sad

Pour les balises inline, tu as oublié le span. Elles ne servent, par ailleurs, pas à égayer le contenu puisque le HTML est strictement sémantique ; la balise strong par exemple, sert à mettre un morceau de texte en évidence, et pas à le mettre en gras à proprement parlé. La nuance est peut-être difficile à assimiler au début, mais garde en tête qu'on préférera toujours mettre en forme quelque chose via le CSS, même s'il s'agit du plus dérisoire, comme un mot en italique.  Happyness

En bref, Les éléments inline se placent toujours l'un à côté de l'autre ! Tu ne peux pas leur attribuer de hauteur ni de largeur, contrairement à la balise block.

Alors alooors, les balises autofermantes, ou dites « orphelines », sont en effet des éléments qui n'ont pas besoin de balises de fermeture. *clap clap* tu as tout bon là-dessus. :3

L'indentation est une façon de mettre en page le code, pour le rendre le plus lisible possible. Je ne vais pas m'attarder dessus pour le moment ; avant d'essayer d'indenter un code, commençons déjà par en créer un. XD

Et enfin, en ce qui concerne le CSS, c'est tout à fait ça ! Il sert à mettre en forme la structure : c'est à partir de là que tu vas rajouter des couleurs, que tu vas positionner tes éléments, t'amuser à mettre en forme les textes, et à modifier les tailles.  Nana

Histoire de voir si la pratique égale ta théorie, je te demanderai de coder ce qui suit :

Une balise block ! Dans cette balise, je veux un titre, puis un titre moins important, et une balise qui contiendra du texte. Fais attention à bien imbriquer les balises correctement.

N'hésite pas à coder sur codepen pour voir le résultat en temps réel (même s'il n'y aura rien à voir, car il n'est pas encore question de CSS ici. xD) et fournis-moi le code entre balises [*code][/code*] Bien sûr, si tu as la moindre petite question, je reste à ta disposition. Coeur 2


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Mar 29 Mai 2018 - 13:54
Coucou ♥️

Oh, désolée. J'ai oublié de te dire ce que signifiait HTML :/

Je note bien tout ça :3

Sinon, voilà le test :
Code:
<h1>Titre</h1>
<h2>Sous-titre</h2>
      <p>Texte</p>

Et tu veux aussi le lien sur Codepen ?
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Les cours de Chhaya la thug tmtcle Mar 29 Mai 2018 - 14:20
Hello ! C'est presque tout bon ! :D
Il manque juste la balise block (une div en l'occurrence) qui va venir englober toutes tes autres balises. On va se servir de cette base très simple pour faire une petite fiche ! Tu verras qu'avec un code très basique, on peut arriver à un résultat sobre et épuré déjà pas mal du tout.
Je te laisse d'abord ajouter la div. :3 Je n'ai pas besoin du lien codepen pour le moment ; en revanche quand ça se compliquera un peu à l'avenir, pour me montrer le rendu des codes, c'est mieux d'avoir un aperçu en live plutôt qu'un screen. :'3


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Mar 29 Mai 2018 - 14:59
... oups ^^'

Code:
<div><h1>Titre</h1>
<h2>Sous-titre</h2>
  <p>Texte</p></div>

Comme ça ? :)
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Les cours de Chhaya la thug tmtcle Mer 30 Mai 2018 - 13:21
Super ! Nous allons commencer par aborder trois « thèmes » fondamentaux, donc je vais te donner un peu de lecture. Tout d'abord, je vais voir – ou revoir – avec toi l'utilité des class et des id dans un code HTML car, en effet, on aura besoin d'intégrer une class à ta div principale, pour pouvoir lui attribuer un CSS.

Ensuite, les sélecteurs. Tu apprendras effectivement qu'il ne sert à rien de donner des class à chaque élément pour pouvoir les mettre en forme : par exemple, lorsqu'on va mettre en forme ton h1, on va le sélectionner sans avoir besoin de l'appeler par une class et donc, alourdir notre code inutilement.

Et enfin, la liste des propriétés CSS ! Parce que c'est quand même utile de savoir comment s'appelle la propriété pour mettre un fond de couleur à un bloc, par exemple. xD

Après ce petit préambule, entrons dans le vif du sujet  Super héro

Les ID et Class
On attribue une class ou un id à un élément, pour pouvoir le cibler dans le CSS. Je te laisse lire ce tuto qui explique très bien la différence entre class et id, et si tu as des questions ou bien si tu as besoin de précisions supplémentaires, je me ferais un plaisir d'éclairer ta lanterne.:3

Les Sélecteurs

Très important si on veut un code propre, je te redirige vers ce tuto. Evidemment, il y a certaines choses que tu ne vas pas comprendre, mais concentre-toi sur les sélecteur I-A, I-C et I-D, puisque ce sont les plus basiques. Nous, nous allons utiliser le sélecteur I-D.

On va cibler nos éléments de cette manière :

Code:
.nom_de_la_class h1 {
color : red ;
}

Ce qui voudra dire que tous les h1 qui se trouveront dans la classe « nom_de_la_class » seront rouges. En gros, dans le CSS, tu sélectionnes la class et tu cibles l'élément auquel tu veux attribuer la mise en forme. c: C'est exactement de cette manière que l'on va procéder, également pour la balise h2 et p. Si tu as des questions, n'hésite pas. C'est une notion souvent compliquée à aborder au début mais, si tu comprends déjà ça, tes codes seront beaucoup plus propres !

Et enfin : les propriétés CSS. Ceci t'aidera grandement si jamais tu as un trou de mémoire ou bien si tu ne sais pas quel propriété correspond à ce que tu veux faire.  Dance 3

Avant de te donner les consignes, j'aimerais savoir si tout est clair, ou s'il y a des notions qui sont encore nébuleuses pour toi. <3


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Jeu 31 Mai 2018 - 12:31
Coucou ♥️

J'ai bien vu et lu ton message, je prendrais le temps de le relire demain. Je finis à 1h du matin aujourd'hui... :/

Bisous ♥️
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Les cours de Chhaya la thug tmtcle Jeu 31 Mai 2018 - 15:10
Pas de soucis Chhaya ! Prends ton temps, l'IRL avant tout. Coeur


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Jeu 14 Juin 2018 - 8:49
Coucou ♥️

Il ne me reste plus que les sélecteurs (ceux que tu as cité) à revoir un peu et ce sera bon pour moi :3

Excuse-moi pour le retard mais je préfère retenir un maximum de choses plutôt que de poser des questions sans arrêt ^^'
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Les cours de Chhaya la thug tmtcle Jeu 14 Juin 2018 - 9:41
Hello !
Pas de soucis Chhaya, prends ton temps. Coeur


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6150
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: Les cours de Chhaya la thug tmtcle Ven 15 Juin 2018 - 16:32
Coucou ♥️

Oui mais pas trop non plus :3

Bon, ça devrait aller ♥️

De toute façon, je verrais mieux en pratique je pense, pour les questions et tout :)
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum