The workshop of LadyErria
Voir le sujet précédent Aller à la page : 1, 2, 3  Suivant  Aller en bas 
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 18 Juil - 10:25 - Post : 53466
Coucou! Ici se trouve ta partie cours de codage, on va commencer par un programme bien précis, je m'appuie dessus pour mieux t'expliquer, mais avant ça tu vas devoir passer par l'étape pénible de m'expliquer ce que tu connais! Pour voir ce que je peux encore t'apporter, c'est pour ça que je prends des novices vraiment xD


Dernière édition par Matae le Ven 16 Sep - 19:25, édité 1 fois
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Lun 18 Juil - 11:51 - Post : 53483
On va pas dire que je connaisse quoi que se soit en codage, vu que je prend des tuto sur fofo et je copie colle en modifiant après.

je connais :
-
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 18 Juil - 14:24 - Post : 53492
D'accord x3
Voici donc notre programme de cours, on pourra changer ou s'étendre sur certaines parties si besoin, selon ton progrès.
Dis-moi si il manque quelque chose ou si tu connais déjà des choses dedans 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
☼ Autres [à venir]
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Lun 18 Juil - 16:48 - Post : 53503
Rien ne manque j'ai hate de commencer ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 18 Juil - 18:22 - Post : 53506
Et bien on commence tout de suite ! Smile
Tu auras un exercice à chaque fin de post à part pour le début, surtout pour quand ce sera des balises à manipuler ! Je te donnerais toujours un exemple dans le cours et tu pourras t'en servir. Il faudra juste pas copier coller mais résoudre par toi-même ^^


Retiens bien ça, c'est essentiel.  


Dernière édition par Matae le Lun 18 Juil - 19:43, édité 1 fois
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Lun 18 Juil - 19:37 - Post : 53510
Tu m'as appris pas mal de choses. J'utilise certains comme les balises orphelines assez souvent pour mes textes. Et j'avais copier-coller    
Code:
<meta charset="UTF-8">
car la premiere fois que j'ai fait le codage de ma galerie j'avais un texte super bizarre.
Le reste sa m'étais complètement inconnu.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 18 Juil - 20:50 - Post : 53526
Je l'avais découvert à force d'utiliser les navigateurs pour visualiser mes codes, je comprenais pas pourquoi ça me faisait ça et donc c'était juste cette balise à mettre, ça a changé ma vie mdrr
As-tu des questions ? N'hésite pas à couper, je considère que tu as compris si tu m'en poses pas Wink

LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Lun 18 Juil - 22:08 - Post : 53548
Cool je connaissais pas se logiciel en faite je tape mes codes manuellement directement sur la page html de mon fofo test.

Code:
<a href="http://"><img src="http://"></a>

Je connais se code mais je vois plus se que c'est des miniatures d'images non????
Le logiciel a l'air simple d'utilisation
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 18 Juil - 22:26 - Post : 53551
C'est juste un exemple, on y reviendra plus tard au chapitre sur les images et liens!
Ce code c'est une image, quand tu cliques sur l'image tu es dirigé vers un lien ! Razz
Oui c'est comme un bloc-note! Razz
On continue demain 8D
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 19 Juil - 8:08 - Post : 53560
j'attend avec impatience la suite ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 19 Juil - 14:46 - Post : 53579
Et c'est parti pour la suite!

LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 19 Juil - 17:17 - Post : 53588
Les balises sont :
!DOCTYPE html>
html>
head>
meta charset= "UTF-8">
/head>
body>
/body>
/html>

J'ai fait exprès de pas mettre le début < pour que tu vois bien le code
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 19 Juil - 18:17 - Post : 53592
tu pouvais les mettre en
Code:
[code][/code]
Smile
super tu comprends vite haha

☼ 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
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 19 Juil - 19:29 - Post : 53598
Code:
    <!DOCTYPE html>
    <html>
      <-- COMMENTAIRE --> 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>
        <-- COMMENTAIRE --> 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>
       <-- COMMENTAIRE --> Fin du code </html>

Code:

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


Pas tout compris l'histoire des commentaires mais j'ai essayer quand même
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 19 Juil - 19:36 - Post : 53600
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 19 Juil - 19:57 - Post : 53603
J'avais pas compris qu'il fallait mettre le commentaire à la place de commentaire.
Maintenant je vois mieux. Par contre c'était vicieux le début du code.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 19 Juil - 20:16 - Post : 53605
Oui haha !
As-tu des questions ? :3
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 19 Juil - 21:54 - Post : 53613
Non aucune question on se voit demain pour la suite
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mar 19 Juil - 21:57 - Post : 53614
Oui on verra les 2 choses importantes ça va se compliquer, dors bien mdr xD
☼ Les balise style et ses attributs pour enjoliver un code
☼ Texte: attributs de style (gras,italique,centrer,couleur etc), paragraphes, sauts de lignes
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mer 20 Juil - 8:49 - Post : 53630
sa va être rapide car je connais déjà un peu le thème
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mer 20 Juil - 16:11 - Post : 53654
Tu connais quoi déjà ? Explique un peu si tu veux, je te poste aussi le cours pour la journée Razz

☼ 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
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mer 20 Juil - 17:02 - Post : 53658
Voilà le résultat, j'ai déliré :

Code:
<div style = "height: 600px; width: 450px; background-color: #001EFF;">
 <div style= "font-size: 40px; color: black; font-family: Pokemon solid; text-shadow: 0px 0px 5px #ffffff; text-align: center;">
 POKEMON GO
 </div>
 <img src= "http://img15.hostingpics.net/pics/256313eeveetexte.png"; width="450px"
 </img>
 <br />
          <div style= "font-size: 20px; color: white; font-family: Palatino; text-align: left;">blalblkjdsfmfjkmdsljfkmldsjfkmsldjfklmsd
          </div>
</div>

Et voilà le résultat :
Ici
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mer 20 Juil - 18:50 - Post : 53666
C'est super bravo ! Je suis contente que tu y arrives ! ^^
Tu serais donc capable de refaire une fiche avec ce que je te fournis moi-même ? Par exemple je te donne une couleur de fond, une largeur et hauteur de fiche, une image à insérer et des couleurs de texte et ombres, tu pourrais le faire ?
Si oui on fait ça après avoir vu les effets de texte comme ça je te donnerais des effets à faire sur tes textes en plus ! ^^
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mer 20 Juil - 18:55 - Post : 53667
Oui j'en serai capable les effets de textes c'est gras italic souligné ... N'hésite pas à ajouté les cadres en même temps comme cela je pourrais faire une fiche totale ^^
font-style: italic
font-style: bold gras
c'est les 2 seuls que je connais mais je sais plus comment les placer
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mer 20 Juil - 21:58 - Post : 53693



Contenu sponsorisé
Message •  - Post : 0
• Page 1 sur 3Voir le sujet précédent Aller à la page : 1, 2, 3  Suivant  Aller en bas 

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