The workshop of Flytea
Voir le sujet précédent Aller à la page : Précédent  1, 2, 3, 4  Suivant  Aller en bas 

Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Sam 30 Juil - 20:25 - Post : 54144
Rappel du premier message :

Coucou, voici ta partie cours de codage
Programme (officiel, que je suis xD)
> Introduction:

☼ l'HTML, kézako ?
☼ Vocabulaire et choses à savoir
☼ Les navigateurs, les versions et la compatibilité
☼ Quel logiciel pour coder soi-même ?

> Les bases et l'apprentissage

☼ La structure de l'html et l'indentation
☼ Les commentaires en html (+ les commentaires en css)
☼ Les balise style et ses attributs pour enjoliver un code
☼ Texte: attributs de style (gras,italique,centrer,couleur etc), paragraphes, sauts de lignes
☼ les div, les span et ce qu'on peut réaliser avec, les propriétés.
☼ les images, les liens dans un texte, les liens dans les images
☼ les listes ordonnées et non ordonnées
☼ Les imbrications de balises
☼ Les tableaux
☼ CSS, styliser un texte ou autre en CSS



PROGRESSION ACTUELLE: 25%
(d'ailleurs je pourrais t'expliquer comment faire une barre de progression comme ça, je l'utilise toujours j'aime trop xD)


Dernière édition par Matae le Mar 15 Nov - 20:00, édité 3 fois
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 1 Aoû - 15:21 - Post : 54322
Super !
Je te conseille de te créer un nouveau dossier "codage" ou "cours codage" pour enregistrer et rien perdre !
La suite !


Invité
avatar
Message • Lun 1 Aoû - 18:19 - Post : 54334
Les balises sont.. euh..

Je sais qu'il y a un truc ici qui ne faut pas toucher.
htlm (ça aussi il ne faut pas toucher)
head et /head
/htlm

(Je n'ai pas mis de < parce que sinon on ne voit pas mes balises, je ne sais pas comment faire les trucs comme toi.)

Enfin je crois. *se cache*

Je n'ai pas bien compris à quoi sert là balise nav...
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 2 Aoû - 12:01 - Post : 54374
tu as juste à cliquer sur le bouton CODE au-dessus de là où tu écris, c'est la feuille bleue avec les 2 balises bleues , entre le "citer" (la bulle blanche au centre) et le spoiler (la page blanche avec panneau attention)
La balise nav c'est pour faire une navigation "Accueil FAQ Search Membres Groupes" etc comme en haut du fo' !
Invité
avatar
Message • Mar 2 Aoû - 15:41 - Post : 54396
Je n'avais jamais vu cette balise, merci.

Ah, d'accord, je comprends mieux.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 4 Aoû - 19:21 - Post : 54623
On passe à la suite patatoe c'est good ?
Invité
avatar
Message • Jeu 4 Aoû - 19:33 - Post : 54628
Yep, allons y 8D
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 4 Aoû - 20:51 - Post : 54634

☼ Les commentaires en html (+ les commentaires en css)

En HTML, on peut voir comme dans cet extrait de code comme pour un page d'accueil ou un template Forumactif:
Code:
<a href="http://crushcrushcrush.actifforum.com/" target="_blank"><img src="http://www.aht.li/2456212/PUF.png" /></a></div><!-- DESCRIPTION --><div class="deslienTIMBE">Description de la relation.</div>
Tu vois:
Code:
<!-- DESCRIPTION --><div class="deslienTIMBE">Description de la relation.</div>
C'est un commentaire. Tout ce qui est écrit sera affiché avec son code, mais pas <--DESCRIPTION --> car c'est un commentaire sur le code, pour préciser à quoi ce code correspond: là l'auteur du code a mis "description" pour qu'on comprenne qu'à la suite du commentaire, le code sera la description (code pour forum rpg donc description d'une relation,enfin bref on s'en fiche).

Dès que tu veux faire un commentaire tu fais comme ça:
Code:
<-- COMMENTAIRE -->
N'oublie pas les espaces entre les tirets de la flèche et ton texte de commentaire. Very Happy
Pour le CSS, c'est quasiment pareil!
Code:
/* Commentaire sur une ligne */

/*
Commentaire
sur plusieurs
lignes
*/
Perso je me trompe toujours de sens soit je met l'étoile avant alors qu'elle est après, soit l'inverse mdr essaie de bien mémoriser ça: barre-étoile texte étoile barre /o

As-tu compris ?
Maintenant petit exercice ! /o
Je vais te donner 2 codes:
Un en HTML, un en CSS. Tu n'as pas besoin d'interpréter ce que veut dire ce code, juste à appliquer la consigne tu verras c'est très simple pour le moment! ^^
Pour le 1er code en HTML je veux un commentaire avec écrit "début du code" et "fin du code". Tu devras essayer de trouver grâce au texte et aux balises qu'on a pu voir avant, où le placer.
Si tu as compris, je vais te demander aussi de trouver le footer dans ce code, là où j'ai mis nos partenaires (exemple). Tu devras mettre ce commentaire avant la balise de début footer, le commentaire sera "début du footer".
rappel: la balise body c'est le corps de ta page, c'est où on écrit tout, mais le début d'un code ne commence pas dans le body cependant.
Voici le code html:
Code:
<!DOCTYPE html>
<html>
<head>
blabla
</head>
<body>
<p style="color:#000000;text-align:center;font-size:20px;font-family:Arial;">Titre de l'article</p>
<article>Mon article ici</article>
</body>
<footer>
<a href="http://www.fukusha-jinsei.com/">Mon premier partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon second partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon troisième partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 4e partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 5e partenaire</a>
</footer>
</html>

De même pour le css, tu as juste à placer un commentaire "début titre catégorie" dans ce code fait pour un titre de catégorie:
Code:

.tleCAT{
position:relative; margin:10px auto;
width:100%; padding:10px 0; border-radius:10px; text-align:center;
background:peru; /* MODIFIABLE */
}

C'est vraiment simple, si tu n'y arrives demande moi mais le code html et css pour un commentaire sont au dessus donc il faut juste bien lire où je demande de le mettre! ça passe tout seul Very Happy
Invité
avatar
Message • Jeu 4 Aoû - 21:22 - Post : 54635
Pour les commentaires, j'ai compris.

Code:
<!DOCTYPE html>
    <html>
 <-- Début du code -->
    <head>
    blabla
    </head>
    <body>
    <p style="color:#000000;text-align:center;font-size:20px;font-family:Arial;">Titre de l'article</p>
    <article>Mon article ici</article>
    </body>
 <-- Début du footer -->
    <footer>

    <a href="http://www.fukusha-jinsei.com/">Mon premier partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon second partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon troisième partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 4e partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 5e partenaire</a>
    </footer>
    <-- Fin du code et fin du footer -->
 </html>

Par contre pour le css, je ne sais pas du tout placer les commentaires, je ne comprends pas. Je sais comment les faire mais pas ou les placer. D:
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Ven 5 Aoû - 13:18 - Post : 54655
C'est exactement comme pour l'HTML. Very Happy
Correction HTML (je te laisse refaire le css on corrige après, pour le CSS regarde juste le mot mis en gras et souligné, suffit de lire c'est vraiment plus simple sur le coup que l'exo html XD)
Je t'ai demandé "début du code" le code c'est quoi ? C'est la totalité de ton code, c'est un petit piège, il fallait juste le mettre en tout premier !
Tu as globalement compris le commentaire, tu t'es juste prise au piège, c'est pas trop grave !
Pour la fin ton idée était bonne cependant le fin du code est après "html" donc tu ne pouvais pas faire qu'un commentaire, pour une ligne c'est dommage je comprend !
Donc un commentaire "fin footer" + la balise html et seulement après la fin du code en commentaire Very Happy

CORRECTION :

Code:
<-- Début du code -->
<!DOCTYPE html>
    <html>
    <head>
    blabla
    </head>
    <body>
    <p style="color:#000000;text-align:center;font-size:20px;font-family:Arial;">Titre de l'article</p>
    <article>Mon article ici</article>
    </body>
 <-- Début du footer -->
    <footer>
<a href="http://www.fukusha-jinsei.com/">Mon premier partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon second partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon troisième partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 4e partenaire</a><a href="http://www.fukusha-jinsei.com/">Mon 5e partenaire</a>
    </footer>
    <-- fin du footer -->
 </html>
<--Fin  du code -->
Invité
avatar
Message • Ven 5 Aoû - 15:51 - Post : 54663
Je crois que c'est ça mais je n'en suis pas tellement sûre...

Code:

    /*Début du code */
    .tleCAT{
    position:relative; margin:10px auto;
    width:100%; padding:10px 0; border-radius:10px; text-align:center;
    background:peru; /* MODIFIABLE */
    }
    /*Fin du code */

Ah, j'y étais presque, pour moi dans ma tête le début du code était de la balise htlm et l'autre balise. Je le saurais pour la prochaine fois !
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Ven 5 Aoû - 16:12 - Post : 54664
super c'est ça ! Very Happy
c'est bien tu as même fait plus que demandé XD
Invité
avatar
Message • Ven 5 Aoû - 21:06 - Post : 54686
Oh, bah génial 8D On fait quoi maintenant ? :3
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Ven 5 Aoû - 21:12 - Post : 54688
THE SUITEEEE. ici ça devient ENFIN intéressant XD
☼ Les balise style et ses attributs pour enjoliver un code

► intro: Pour faire une fiche, la balise div est à prévoir, c'est plus simple!
On va faire une fiche minimaliste ensemble, juste un bloc de couleur. Je vais te montrer comment raisonner, coder directement selon ce que tu veux.
En clair, la plupart des codeurs préfèrent un schéma pour coder.
Donc voici un schéma. Tu auras une fiche à faire tout seule à la fin sur le même exemple du cours, exactement. Razz
► Je veux une fiche comme sur ce schéma: http://image.noelshack.com/fichiers/2016/29/1469015830-schema.png

► Pour commencer, la base de ta fiche, c'est le fond. Tu dois obligatoirement lui attribuer ces balises pour qu'il apparaisse sur ton navigateur:
Code:
<div></div>
ça ouvre le bloc de la fiche. Pour un titre, une div, pour un bloc différent, dès que la personnalisation n'est plus la même.
Ici on aura besoin:
- d'une div pour le fond vert
- d'une div pour le titre
(- et éventuellement une div pour une image si besoin mais normalement pas vraiment besoin )
Celà nous fait déjà deux balises div, donc deux balises ouvrantes et  2 fermantes, soit 4 à ne pas oublier:
Pour commencer on ouvre la balise div
Code:
<div
Ensuite on ne la ferme pas puisqu'on va lui attribuer l'attribut [codes]style[/code] qui sert à personnaliser tout ton bloc! très important!
Code:
<div style=";"></div>
Entre les deux guillemets seront tous les attributs de style: la largeur, longueur de ta fiche, la couleur verte du fond, la couleur du "texte texte texte" les polices, etc.
Tu n'as plus qu'à complèter, voici comment indiquer au navigateur la longueur (height) et la largeur (width) de ta fiche ainsi que la couleur de fond verte ( code couleur du vert #9FF781)
Code:
<div style="height:600px;width:450px;background-color:#9FF781;"></div>
Il est impératif de mettre un ";" point-virgule après CHAQUE attribut, ainsi que les guillements avant le premier attribut et après le ";" final, si tu les oublies ça foire tout Very Happy
Tu peux recopier ce code si besoin, met tes attributs de sorte que ce point virgule soit le dernier ^^ :
Code:
<div style=";"></div>
Donc on obtient:
avec  le code que j'ai fait plus haut, la base de ta fiche. C'est déjà presque fini ! ^^

► Titre de la fiche:
Pour les polices, longue histoire! Si la police que tu souhaites utiliser n'est pas installée sur ton ordinateur au préalable ça ne fonctionnera pas, et dans ce cas il faut l'intégrer à ton code en allant sur Google fonts et copiant le code de la police que tu veux. Autant l'installer directement, mais le soucis c'est que je crois que si celui qui voit ton code n'a pas cette police elle ne s'affichera pas enfin bref, pas grave xD

- donc 2ème bloc div pour le titre, qu'on place directement emboîté dans la première div: au lieu de fermer ta première div du bloc tu vas mettre ">" et après fermer 2 fois ta div, comme ci-dessous:
Code:
<div style="height:600px;width:450px;background-color:#9FF781;"><div style="font-size:30px;color:white;font-family:Marguerite;text-shadow: 0px 0px 10px #000000;">Titre ici</div></div>
Titre ici


EN CLAIR:
Code:
height
-> longueur de ta fiche
Code:
width
-> largeur de ta fiche
Code:
background-color
-> couleur DU FOND de la fiche
Code:
color
-> couleur DU TEXTE qui est concerné par la div uniquement
Code:
font-family
-> police utilisée
Code:
font-size
-> taille du texte (de la police)
Code:
text-shadow
-> ombre derrière ton texte, ici j'en ai mis une sinon le titre ne se voyait pas sur le fond clair du forum ! toujours mettre 3 données: 0px 0px et par exemple 10px !
Code:
text-align
->  alignement de ton texte: left (gauche), right (droite) ou center (centré). ce qui donne pour un texte centré:
Code:
text-align:center;

Ensuite il reste donc à coder:
► l'image dessous le titre
► le texte dessous l'image.
donc l'image:

on reprend notre code qui contient déjà le titre et le bloc, on a fini 3/4 de la fiche (déjà ? waouh!)
L'image est dans le bloc vert, donc le code d'image devra être avant la dernière balise div mais après notre deuxième div (le titre). Pour celà on va placer ce code:
Code:
<img src="https://media.giphy.com/media/3o6Mb5AUzTxfwrX2AE/giphy.gif" width="450px" </img>
Ce code utilise la balise img ouvrante et img fermante, soit une insertion d'image dans un code html ! Une image insérée peut être jpeg, png ou même gif ! On indique dans notre code que l'image sera redimensionnée en 450 de largeur pour ne pas dépasse de la fiche en largeur ! Very Happy le code devient donc:
Code:
><img src="https://media.giphy.com/media/IQYoP7rv3Qz6g/giphy.gif" width="450px" </img>
Code:
<div style="height:600px;width:450px;background-color:#9FF781;"><div style="font-size:30px;color:white;font-family:Marguerite;text-shadow: 0px 0px 10px #000000;text-align:center;">Titre ici</div><img src="https://media.giphy.com/media/IQYoP7rv3Qz6g/giphy.gif" width="450px" </img></div>
Titre ici

ça donne ceci !
Pour placer le texte, soit on ouvre une nouvelle div, soit directement:
Code:
<div style="height:600px;width:450px;background-color:#9FF781;"><div style="font-size:30px;color:white;font-family:Marguerite;text-shadow: 0px 0px 10px #000000;text-align:center;">Titre ici</div><img src="https://media.giphy.com/media/IQYoP7rv3Qz6g/giphy.gif" width="450px"</img>TEXTE TEXTE TEXTE</div>
Titre ici
TEXTE TEXTE TEXTE


Voilà maintenant je vais te demander de refaire une fiche avec les couleurs, données que tu veux, sans toucher à la taille, tu mets dedans ce que tu veux avec ce qu'on a vu. N'hésite pas si tu as des questions ! huhu
Invité
avatar
Message • Sam 6 Aoû - 16:52 - Post : 54753
Je pense avoir réussi, parce contre je ne sais pas quoi mettre alors j'ai mis n'importe quoi XD

Code:
<div style="height:600px;width:450px;background-color:#993333;">
<div style="font-size:30px;color:black;font-family:Tahoma;text-shadow: 0px 0px 10px #000000;text-align:center;">Bonjour {USERNAME}</div>
<img src="http://media2.giphy.com/media/yflzNUmjWZSX6/giphy.gif" width="450px"</img>Flytea est une licorne qui vit dans les mer.</div>


Bonjour Invité

Flytea est une licorne qui vit dans les mer.

Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Sam 6 Aoû - 17:17 - Post : 54756
T'inquiète ça m'arrive souvent xD
Tu pourrais changer la couleur du texte du bas juste ? C'est illisible ^^
Après ça sera bon !
Invité
avatar
Message • Dim 7 Aoû - 13:18 - Post : 54806
Yo, je suis sûr tablette donc désolée si c'est faux.

Code:
<div style="height:600px;width:450px;background-color:#993333;">
<div style="font-size:30px;color:black;font-family:Tahoma;text-shadow: 0px 0px 10px #000000;text-align:center;">Bonjour {USERNAME}</div>
<img src="http://media2.giphy.com/media/yflzNUmjWZSX6/giphy.gif" width="450px"</img><div style="color:black;font-family:Tahoma;">Flytea est une licorne qui vit dans les mers.</div></div>


Bonjour Invité

Flytea est une licorne qui vit dans les mers.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Dim 7 Aoû - 14:16 - Post : 54813
Génial ! Tu pourrais m'en refaire une si je te donne ce site pour les codes couleurs: http://html-color-codes.info/

et que je veux une fiche 500*700 (largeur * hauteur / rappel width pour l et height pour hauteur)
de couleur orange, un titre blanc avec écrit "Je suis orange", une image-gif d'une orange (sur giphy.com y'en a pas mal)
Et puis un texte blanc comme sur la fiche précédente ?
Invité
avatar
Message • Dim 7 Aoû - 15:25 - Post : 54825
C'est quoi la différence entre la largeur et la hauteur?
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Dim 7 Aoû - 16:10 - Post : 54829
omg fly' on voit ça en cp o_o la largeur c'est comme ça: ↔
La hauteur: ↑
Là width ça te donne la largeur de gauche à droite, et height la hauteur de haut en bas, par exemple si je donne au code 500 en largeur et 150 en hauteur j'aurais un rectangle comme ça:
Spoiler:
 
Par contre si je veux une fiche haute et moins large sur les côtés:
Spoiler:
 
Invité
avatar
Message • Dim 7 Aoû - 21:50 - Post : 54885
J'ai pas tellement suvi la CP XD Sinon pourquoi je dois en refaire une autre ? D:
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Dim 7 Aoû - 21:52 - Post : 54886
thug de cp ouloulou xD
Parceque tu es mon élève et tu obéis
Invité
avatar
Message • Dim 7 Aoû - 23:29 - Post : 54898
Ta vu maggle XD

Non, TU obéis 8D

Code:
<div style="height:700px;width:500px;background-color:#000000;">
<div style="font-size:30px;color:white;font-family:Tahoma;text-shadow: 0px 0px 10px #FF8000;text-align:center;">Je suis une orange.</div>
<img src="http://i.giphy.com/wPfjALm0Xk43C.gif" width="500px"</img><div style="color:white;font-family:Tahoma;">Flytea est une licorne qui vit dans les mers. Flytea est une orange.</div></div>


Je suis une orange.

Flytea est une licorne qui vit dans les mers. Flytea est une orange.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 8 Aoû - 13:41 - Post : 54909
Plop, ton image ne s'affiche pas tu as oublié un petit détail majeur à "width" qui est le ";" après 500 sinon ça ne s'affiche pas ^^
Et re plop, l'ombre mise sur le titre doit être d'une autre couleur que le fond donc ici plus du blanc #FFFFFF Very Happy
Sinon c'est super ^^

Je suis une orange.

Flytea est une licorne qui vit dans les mers. Flytea est une orange.


Code:
<div style="height:700px;width:500px;background-color:#000000;">
<div style="font-size:30px;color:white;font-family: Tahoma;text-shadow: 0px 0px 10px #FFFFFF;text-align:center;">Je suis une orange.</div>
<img src="http://i.giphy.com/wPfjALm0Xk43C.gif" width="500px;"</img><div style="color:white;font-family:Tahoma;">Flytea est une licorne qui vit dans les mers. Flytea est une orange.</div></div>
Invité
avatar
Message • Lun 8 Aoû - 17:18 - Post : 54919
Arrrgh, juste un tout petit truc qui manquerait D:

Sinon l'ombre je l'avais mise en orange...
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 8 Aoû - 17:27 - Post : 54920
Ah bah ça n'avait pas marché alors :/
Oui, chaque détail est important, ce qui est pénible imagine tu as un code de 50 lignes tout déparfaite, et c'est juste un point-virgule (+ le retrouver XD)
C'est pour ça, bien relire chaque div xD
Contenu sponsorisé
Message •  - Post : 0
• Page 2 sur 4Voir le sujet précédent Aller à la page : Précédent  1, 2, 3, 4  Suivant  Aller en bas 

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