« Partie cours de Ines- »

Sujet: Re: Partie cours de Ines- Ven 23 Juin 2017, 11:51

Ca va je me débrouille en anglais xD

J'ai déjà vu des codes mais pour moi ça reste quand même du chinois vu que je ne sais pas ce que les balises etc représentent. Quand je poste une image sur le forum j'utilise [img] mais les trucs dus style
je ne sais aps m'en servir..

Si je suis bien renseignée le HTML c'est vraiment le contenu et tout ça, mais le CSS c'est plus la forme les couleurs etc... C'est ça? ^^'

Sujet: Re: Partie cours de Ines- Dim 25 Juin 2017, 22:13

Ouais alors on est bon, sauf que Bbcode, c'est pas prévue puisque c'est pas partout et le BBcode peut varier, ce n''est pas toujours

Code:: [b][/b]

, sur Skype ce sont des * mais voilà !

HTML : C'est tout ce qui concerne la structure de la chose
CSS : Tout ce qui va être du style, comme les background, couleurs et tout, c'est pour cela que l'on dit que le HTML et le CSS ne vont jamais nul part l'un sans l'autre !

Exemples de codes : Je te propose les différents codes afin que cela soit clair dans ta tête :

BBCode :

Code:: [b]Mon texte s'affichera en gras[/b]

Note : Une balise de BBCode sera toujours entre les crochets, du moins, sur forumactif

HTML :

Code:: <p>Tiens, mon texte se trouve dans une balise paragraphe, trop cool !</p>

Note : Les balises HTML sont toujours composées des flèches, je les appelles comme ça, donc, je pense que tu as compris

CSS :

Code:: p
{
color: blue;
}

Note : Ici, j'ai pris le p des balises paragraphes en lui attribuant une propriété CSS : Tous les mots entre

Code:: <p></p>

seront en bleu

Voilà, je commence tout doucement en essayant d'être le plus clair possible, en sachant que c'est pas facile tous les jours d'être prof ahah

Sujet: Re: Partie cours de Ines- Lun 26 Juin 2017, 11:31

Ok donc ça va j'ai compris la différence entre les codages, mais :

- Si on veut mélanger HTML et CSS, comment tu intègres le CSS au HTML ?

Sujet: Re: Partie cours de Ines- Lun 26 Juin 2017, 17:53

Sur une page forumactif ?

Sujet: Re: Partie cours de Ines- Lun 26 Juin 2017, 18:07

Dans un codage en général par ex dans une signature quoi, pcq il faut bien ajouter des couleurs etc à la forme du coup comment on fait pour les "mélanger" ?

Sujet: Re: Partie cours de Ines- Mar 27 Juin 2017, 11:43

Alors, je vais prendre l'exemple que je prends à chaque fois, regarde ceci :

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Apprentissage Lady</title>
<style>
[i]Ici, je mettrais le code CSS (Je sais que l'italique marchera pas)[/i]
#principale
{
color: red; /*Je mets ici le texte en rouge*/
background-color: blue; /*Je mets ici le fond bleu*/
}
.autre
{
color: green; /*Je mets la couleur de ce texte en vert*/
font-size: 42px; /*Je mets la taille du texte en
}*/
</style>
</head>
<body>
[i]On prend les exemples : [/i]
<div id="principale">Bonjour, je mets mon texte, j'aimerais bien le voir apparaître rouge, je viens de mettre ID dans ma div, donc, ce sera #principale, on essaye pour que le texte s'affiche rouge ?
<div class="autre">Ah, j'ouvre une div dans la principale, ben oui, puisque je veux que ça reste sur le fond bleu, donc, comme c'est ma deuxième div, je viens de mettre class, donc, ce sera .autre, et je peux faire ce que je veux ! </div>
</div>
</body>
</html>

Voilà, alors, comme tu le vois, j'ai commencé par ouvrir mon code HTML, pour indiquer au truc que je vais faire du HTML donc, forcément du CSS.

Donc, comme tu as du le voir, tout code HTML se compose d'un head qui comporte, le titre du code dans l'onglet de Google, et l'unicode qui permet de lire les caractères spéciaux, sauf que dans ce

Code:: <head></head>

on intègre une balise appelée style qui permet donc de faire la liaison entre le code HTML et le code CSS.

Du coup un code html, tu le rentre dans la balise body et tu insères tes éléments à travers des div par exemple :

Code:: <div ID="principale">Tu te mets ton texte</div>

Tu as déjà du voir ce genre de choses : C'est une div avec un ID, ce qui signifie que ton code CSS, tu vas le retrouver comme ça :

Code:: #principale
{
Ton code CSS
}

Si tu as cela :

Code:: <div CLASS="autre">Ton texte</div>

Alors, tu mettras cela, une div avec une CLASS se repèrera avec un . :

Code:: .autre
{
Ton code CSS
}

Et tu insères ses éléments en donnant tes propriétés CSS à l'aide de ce bout de code dans ton style, tu comprends ou pas du tout ?

Sujet: Re: Partie cours de Ines- Jeu 29 Juin 2017, 19:07

xD j'ai essayé de C/C ton code et de prévisualiser pour voir ce que ça donne et ça marche pas T_T

Désolée tu as vraiment une élève de merde en codage parce que j'ai déjà pas compris le but du "head" (enfin unicode c'est quoi ?) et c'est quoi meta charset aussi ?

Et comment tu sais lorsque tu mets div id ou div class ? Sinon j'ai compris comment insérer les éléments du CSS dans le texte, en gros tu mets div id/clas avec = le nom de la partie CSS créee précédemment ! C'est ça ?

Et du coup comme dans la première div tu as mis rouge comme couleur et dans la deuxième tu as mis vert, dans ta div "autre" le texte sera donc vert c'est ça aussi ? ~~J'espère avoir compris au moins ça~~

Sujet: Re: Partie cours de Ines- Ven 30 Juin 2017, 10:12

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Apprentissage Lady</title>
<style>

#principale
{
color: red; /*Je mets ici le texte en rouge*/
background-color: blue; /*Je mets ici le fond bleu*/
}
.autre
{
color: green; /*Je mets la couleur de ce texte en vert*/
font-size: 42px; /*Je mets la taille du texte en 42 */
}
</style>
</head>
<body>
[i]On prend les exemples : [/i]
<div id="principale">Bonjour, je mets mon texte, j'aimerais bien le voir apparaître rouge, je viens de mettre ID dans ma div, donc, ce sera #principale, on essaye pour que le texte s'affiche rouge ?
<div class="autre">Ah, j'ouvre une div dans la principale, ben oui, puisque je veux que ça reste sur le fond bleu, donc, comme c'est ma deuxième div, je viens de mettre class, donc, ce sera .autre, et je peux faire ce que je veux ! </div>
</div>
</body>
</html>

Voilà, ce code donne quelque chose 'horrible !

Code:: <meta charset="utf-8" />

=> Cette balise sert à lire les caractères spéciaux tels que les accents, les circonflexes et tout, c'est ça l'unicode ! Rentre toi ça : Tout ce qui est dans head : C'est ce qui apparaît dans l'onglet du navigateur mais ça reste important, cette balise est quasiment dans tous les codes !

Alors, quand tu vois ça :

Code:: <div ID="truc">test</div>

comme il y a ID, tu es sur que tu dois mettre #autre.
Alors, quand tu vois ça :

Code:: <div CLASS="truc">test</div>

comme il y a CLASS, tu es sur que tu dois mettre .autre.

Pour ta question, je t'ai remis le code correct, à toi de me dire Smile

Sujet: Re: Partie cours de Ines- Lun 03 Juil 2017, 16:53

Mais genre c'est quoi la diff entre div ID et div CLASS ?

Je t'avoue que comme j'ai jamais coté je suis grave perdue, est-ce que tu pourrais me faire une genre de "listes" des balises importantes et genre ce qu'elles doivent contenir / à quoi elles servent ? Un peu comme tu l'as fait pour "head"

Désolée je suis peut-être un peu chiante de te demander ça ><

Sujet: Re: Partie cours de Ines- Lun 03 Juil 2017, 17:22

Je vois pas de différences, personnellement, j'utilise ID quand la balise est importante et CLASS pour le reste, j'ai toujours procédé ainsi !

Pour les balises importantes, je te fais ça demain Smile

Sujet: Re: Partie cours de Ines- Lun 03 Juil 2017, 20:02

Donc ça change rien ?

Merci c'est super gentil pcq j'avoue que là j'ai pleiiin de termes que j'ai jamais vu donc c'est très compliqué ^^'

Sujet: Re: Partie cours de Ines- Mar 04 Juil 2017, 12:34

Pour moi, ça n'a jamais rien changé que je mette quoique ce soit !

Donc les balises que tu retrouveras dans 99% des cas :

Code:: <!DOCTYPE html>

La première balise que tu dois mettre au début d'un code structuré, ne me demande pas pas à quoi elle sert, je sais juste qu'il faut la mettre dans tous les codes !

Code:: <html></html>

Balises obligatoires (Dans un code structuré) qui montrent que tu vas entrer un code HTML, non, il n'existe pas de balises similaires pour le CSS, mais ces balises doivent arriver juste après la DOCTYPE

Tête du code

Code:: <head></head>

Balises suivant la html qui se traduit par tête, tout ce qui sera dans le head apparaîtra dans l'onglet : Le titre, la lecture des caractères spéciaux, la police...

Dans ton head, au moins deux balises doivent apparaître bien que une soit obligatoire pour lire les accents...

Code:: <meta charset="utf-8" />

C'est la balise obligatoire donc je te parlais, elle te permet de lire les caractères spéciaux, tels que les accents, les apostrophes, les vagues..., elle doit être placée dans le head puisqu'elle contient meta, toutes les balises ayant meta au début se placent dans le head

Code:: <title></title>

C'est le titre qui apparaîtra dans ton onglet de Chrome, de Mozilla, de IE, de Edge, de ce que tu veux, c'est ce qui apparait dans l'onglet, ce n'est pas une balise obligatoire, mais après, c'est à ton bon vouloir de la mettre ou pas !

Code:: <style></style>

ATTENTION BALISE IMPORTANCE CAPITALE Cette balise est super importante, c'est là-dedans que tu mets ton CSS, enfin, c'est ce qu'on utilise pour un code structuré ! Donc, c'est là qu'on mettra le # ou . en fonction si la div a ID ou CLASS

Corps du code

Donc, là tu as fermé ton head, et tu t'appretes à ouvrir une nouvelle balise ! Comment se dit corps en anglais ? Body

Code:: <body></body>

Donc, ceci est la balise corps, tu la mets juste après la balise head, comme ça, l'ordi comprends que tu arrêtes d'écrire dans l'onglet de Chrome, et il passe directement au code visuel, donc, que-ce qu'on voit dans un body ?
Ben, deux cas de figures :

Code:: <div ID="test">Texte</div>

Cette chose, tu la marques comme ça dans ton CSS :

Code:: #test
{
/*CSS*/
}

Code:: <div CLASS="test">Texte</div>

Cette chose, tu la marques comme ça dans ton CSS :

Code:: .test
{
/*CSS*/
}

Et un dernier truc :

Code:: <footer></footer>

C'est ton pied de page, il s'affiche en bas du code

ENSUITE, tu fermes les balises body et HTML, on fait un exemple complet avec ces balises ? (Pense à indenter ton code)

Code:: <!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8" />
   <title>Exemple de code, partie cours Ines ~</title>
   <style>
#test
{
background-color: grey;
}
.test2
{
color: white;
}
   </style>
</head>
<body>
<div id="test">Test
<div class="text2">test2</div></div>
<footer>©Zekarant</footer>
</body>
</html>

Sujet: Re: Partie cours de Ines- Mar 04 Juil 2017, 18:33

Merci pour les balises ça va déjà mieux, au moins je sais comment débuter et terminer un code !

Sujet: Re: Partie cours de Ines- Mar 04 Juil 2017, 18:48

As-tu besoin d'autres précisions ?

Sujet: Re: Partie cours de Ines- Mer 05 Juil 2017, 19:47

A propos des balises ?

Sujet: Re: Partie cours de Ines- Jeu 06 Juil 2017, 11:09

Oui, tu as d'autres questions ou je peux déjà te donner un premier exercice ?

Sujet: Re: Partie cours de Ines- Jeu 06 Juil 2017, 11:14

Vasy on peut essayer quelque chose ^^ Mais si tu me demandes du CSS je connais pas les autres styles à part ceux que tu as montré dans ton exemple :p

Sujet: Re: Partie cours de Ines- Sam 08 Juil 2017, 12:05

Tu connais quelques balises comme les couleurs de fond et tout ^^

Sujet: Re: Partie cours de Ines- Dim 16 Juil 2017, 21:06

Il existe quoi d'autres ?

Excusez-moi j'étais en vacances :3

Sujet: Re: Partie cours de Ines- Lun 17 Juil 2017, 14:06

Tu peux tout faire en codage, tu n'as pas vraiment de limites, tout est possible !

Pas de problème, du moment que je suis prévenu !

Sujet: Re: Partie cours de Ines- Lun 17 Juil 2017, 14:19

Donc on fait quoi mtn ? x)

Sujet: Re: Partie cours de Ines- Lun 17 Juil 2017, 19:21

Tu veux faire un TP ou tu veux des explications sur autre chose ? Parce que ça ne tient qu'à moi, je te colle une interro et un 0 non ? Ca ne te convient pas cette idée là ?

Sujet: Re: Partie cours de Ines- Ven 21 Juil 2017, 17:25

Si tu me colles un TP, je peux te poser des questions et tout si je bloque hein ? Hap

Sujet: Re: Partie cours de Ines- Lun 31 Juil 2017, 15:01

Désolé j'étais assez occupé ! Pourquoi tu ne pourrais pas ?

Sujet: Re: Partie cours de Ines-

» Partie cours : Ines
» Partie cours de M&M's
» Partie cours : Liiloux
» Partie cours : Undead
» Partie cours : LadyErria

« Partie cours de Ines- »

Tête du code

Corps du code

Partie cours de Ines-

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 2	Aller à la page : 1, 2