The workshop of LadyErria
Voir le sujet précédent Aller à la page : Précédent  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
Rappel du premier message :

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
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Mer 20 Juil - 22:03 - Post : 53694
@Ataraxie tu sais pourquoi ça beugue ? XD
Ca m'a jamais fait ça pourtant c'est pas très long XD
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 21 Juil - 10:55 - Post : 53701
Trop bien ton site sur les cadres, et tu as une petite erreure dans ton écriture tu as copier 2 fois pour le texte en gras.

En tout cas dans les cadres je trouves mon bonheur, j'imaginais pas qu'il y avait autant de style. HEUREUSEEEEEEEEEE love love love love Merci beaucoup.
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 21 Juil - 11:48 - Post : 53703
Ah oui pardon j'ai du copier pour changer et oublier de changer mdr xD
La suite du cours et je remets mes oublis (j'oublie pas mal de trucs il y a tellement à dire aussi !)

☼ Texte: attributs de style (gras,italique,centrer,couleur etc), paragraphes, sauts de lignes
► créer un paragraphe dans la partie de ton texte:
Code:
<p>texte du paragraphe ici</p>
Pour modifier les attributs de ton paragraphe:
Code:
<p style="color:black;font-family:Arial;font-size:15px;"
c'est comme pour une div, l'élément style peut être utilisé dans n'importe quel élément (pas tous, mais la plupart!) comme les listes ordonnées/non ordonnées, les div, les paragraphes etc.*

Et donc sauter un ligne je crois qu'on l'a dis:
Code:
</br> ou <br>
souvent c'est le premier, car c'est une balise orpheline, elle ne se ferme pas par rapport aux autres comme
Code:
<b></b>
par exemple

☼ les div, les span et ce qu'on peut réaliser avec, les propriétés. -> du coup on l'a fait plus haut donc ça c'est bon.. XD (j'avance trop vite je crois mdr)
récapitulatif:
-> une div sert à mettre en place un bloc en code, comme un bloc de fiche, une base vraiment. La div se modifie grâce à des différents attributs, comme on a pu voir. Une div peut-être un bloc de couleur (un fond de fiche donc), un titre, un texte, une image, elle peut tout représenter. si tu t'en souviens plus trop remonte le cours on l'a fait hier je crois les attributs, div etc. (quand tu as fais ta fiche Pokémon go) x3


☼ les images, les liens dans un texte, les liens dans les images

Ca je sais plus trop si on l'a fait x')

► Insérer une image:
on ouvre la balise img, on lui donne l'attribut "src" pour indiquer une image dans ta div ou ton code
Code:
<img src
On lui donne les guillemets comme toujours en html mais cette fois ce ne sera pas un attribut comme une couleur mais l'URL de ton image (à retenir) /!\ :
Code:
<img src="URL"</img>
Voici le code pour mettre une seule image. Si tu veux règler donc la largeur ou hauteur de ton image (souvent plus la largeur!) tu fais comme on a fait plus haut:
Code:
<img src="URL" width="481px" </img>

► Image avec un lien dès qu'on clique dessus l'image
deux façons:
- quand on clique, le lien de l'image dans la page où tu es actuellement, ce qui te fais perdre tout ce que tu fais sur la page (pas tellement bien)
Donc ce code:
On ouvre la balise img src, on met guillemets et url de l'imagepuis on ferme son la balise mais avec ">" pour ré-ouvrir la balise pour le lien. On tape le code a href pour un lien dans l'image puis on met les guillemets et on ferme avec ">" le lien. On met la dernière balise, celle de l'image pour clore l'image en dernier (l'image sera la seule visible, le lien est dans l'image tu ne le vois pas, donc l'image se ferme et pas vraiment le lien!)
ce qui donne:
Code:
<a href="urldulien"><img src="urlimage"/></a>
- quand on clique sur l'image, le lien est ouvert dans un nouvel onglet grâce à ce code:
Code:
<a href="urldulien"><img src="urlimage"/></a> target="_blank"></img>
c'est pareil, sauf qu'on met target blank pour ouvrir un nouvel onglet. En principe, les utilisateur cliquent droit pour un lien s'ils souhaitent aller dans un autre onglet, donc ce target n'est pas tellement utile, disons que si la personne veut pas l'ouvrir dans un autre onglet, il peut pas faire comme il veut, ça peut gêner des gens ^^

► Pour un lien simple ça sera:
Code:
<a href="urldulien"</a>
Pour écrire un mot qui contient un lien (le plus utilisé)
Code:
<a href="http://www.fukusha-jinsei.com/">Je suis un lien, clique moi dessus</a>
ça donne: Je suis un lien, clique moi dessus

Voilà j'espère que tu as compris, c'est assez simple


Dernière édition par Matae le Jeu 21 Juil - 14:42, édité 1 fois
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 21 Juil - 13:39 - Post : 53708
Code:
    <img src="urlimage"><a href="urldulien"></img>
Je ne comprend pas se que je dois mettre dans urldulien.

Code:
   <img src="URL"><a href="lien.html" target="_blank"></img>
Je ne comprend pas lien.html faut remplacer par quoi?

On a pas étudier les span
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 21 Juil - 14:28 - Post : 53714
l'url de l'image. Si on veut mettre ta signature, clique droit sur l'image "copier l'adresse de l'image" et tu colles à la place de "url de l'image".
ça donne ça :

Code:
<a href="http://www.fukusha-jinsei.com/"><img src="http://img11.hostingpics.net/pics/995579lukasignkit.png"/></a>
le lien amène vers FJ le forum, et l'image c'est ta signature. Voilà Smile
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 21 Juil - 16:27 - Post : 53726
ok j'ai compris ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 21 Juil - 16:37 - Post : 53727
Voilà Smile je te poste la suite demain Smile
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 21 Juil - 16:45 - Post : 53728
D'accord ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 25 Juil - 20:25 - Post : 53917
☼ les listes ordonnées et non ordonnées

Une liste ordonnée c'est une liste comme ceci:
1-
2-
3-
etc.
Pour en créer une dans un site web/page html c'est comme ceci:
On ouvre la balise "ol" qui ouvre donc une liste ordonnée
Code:
<ol></ol>
Pour créer une ligne avec "1-, 2-" etc on rajoute la balise "li" qui représente une LIGNE.
Code:
<ol><li>1er élément</li></ol>
Au fur et à mesure en rajoutant des lignes tu obtiens ça:
Code:
<ol><li>1er élément</li><li>2ème élément</li><li>3e élément</li><li>4e élément</li><li>5e élément</li></ol>
  1. 1er élément
  2. 2ème élément
  3. 3e élément
  4. 4e élément
  5. 5e élément


Pour une liste non ordonné qui sera comme ceci:
• Liste 1
• Liste 2
• Liste 3
etc
C'est le même principe sauf qu'on va remplacer "ol" par "ul" ^^
Code:
<ul><li>1er élément</li><li>2ème élément</li><li>3e élément</li><li>4e élément</li><li>5e élément</li></ul>
  • 1er élément
  • 2ème élément
  • 3e élément
  • 4e élément
  • 5e élément

LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 26 Juil - 9:21 - Post : 53922
Mais sa sert à quoi exactement les listes ordonnées et non ordonnées car j'en vois pas trop l'interet?
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 28 Juil - 12:57 - Post : 53967
C'est pour faire des listes dans les sites tout ça ^^
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 28 Juil - 15:16 - Post : 53985
Ok donc pour se que je fais en codage sa n'a pas trop d'interet ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 28 Juil - 17:11 - Post : 53989
Je t'apprend ce que je sais et ce que tu peux avoir à mettre
Dis moi ce que tu veux apprendre alors si ça n'a pas d'intêret mdr ^^'
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Jeu 28 Juil - 18:47 - Post : 53993
C'est juste les listes ordonnées et non ordonnées qui ne vont pas me servir pour faire des signa codées ou des fiches galerie
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Jeu 28 Juil - 19:35 - Post : 53996
Oui tu penses ça mais regarde, c'est pour embellir pour un formulaire de commande:
    > Pseudo: ici
    > Ce que tu veux: ici
    > Images: ici
    > Textes: ici


Code:
<ul><li[b]> Pseudo[/b]: ici</li>
<li[b]> Ce que tu veux[/b]: ici</li>
<li[b]> Images[/b]: ici</li>
<li[b]> Textes[/b]: ici</li></ul>
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Ven 29 Juil - 8:48 - Post : 54012
J'y avais pas penser comme cela. Je fais des formulaires en utilsant br pour sauté des lignes, en faite sa va me simplifier la vie ^^

Merci beaucoup love love love love love
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Ven 29 Juil - 10:27 - Post : 54014
Pas de quoi! On reprend ça demain j'ai une amie chez moi je peux pas trop faire le cours today! x3
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Ven 29 Juil - 10:28 - Post : 54015
pas de soucis on est pas au pièce, vie privée avant tout ^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 1 Aoû - 15:38 - Post : 54324
Coucou suite du cours !

☼ Les imbrications de balises

Ce qu'on sait déjà des balises:
- Chaque balise à un nom qui lui est propre et qui nous donne un rendu différent selon ce qu'on écrit en HTML5.
 
Citation :
Prenons comme premier exemple la balise P. Le nom de cette balise est le diminutif de Paragraph – le nom des balise est toujours en anglais. Par convention, on écris cette balise P entre les signe < (inférieur) et > (supérieur).
- Elles s'écrivent bien entendu en minuscule, s'ouvre avec "<" et se ferment avec "/>", chaque balise ouverte doit être fermée !
- Il y a cependant des balises orphelines, comme br qui peut s'écrire
Code:
<br>
ou
Code:
<br/>
.

-> Pour compliquer un peu l'HTML et ces balises, il arrive souvent que plusieurs balises soient imbriquées entres-elles.
Prenons un exemple:
On voudrait écrire un mot en gras
Code:
<b>
dans un paragraphe
Code:
<p>
On va donc indiquer au navigateur qu'on ouvre un paragraphe pour commencer:
Code:
<p>
Puis on écrit notre phrase, on ferme la balise paragraphe P:
Code:
<p>Je suis un mot en gras dans un paragraphe</p>
Pour mettre le mot en gras, on ne peut pas sortir du paragraphe, donc on revient à l'intérieur des deux balises paragraphes, la balise gras on sait que c'est
Code:
<b>
(ou strong, mais strong c'est une mise en valeur, or
Code:
<p>Je suis un mot en <b>gras<b> dans un paragraphe</p>
ce qui donne si on veut donc visualiser dans le navigateur:
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Je suis un mot en gras</title>
  </head>
<body>
<p>Je suis un mot en <b>gras</b> dans un paragraphe</p>
</body>
</html>
Et sur forum par contre les paragraphes marchent pas vraiment je crois et puis il faut mieux visualiser sur navigateur et tester sur Explorer, chrome, safari, etc. ^^


EXERCICE

Je vais te demander de réecrire le squelette HTML dans Notepad ++ puis de mettre un mot en italique dans un paragraphe, puis dessous un autre paragraphe avec 2 mots en gras !
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Mar 2 Aoû - 9:44 - Post : 54370
Et voilà

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test blablabla</title>
  </head>
<body>
<p>Il y a rien à faire on <i>s'ennuie</i></p>
<p>Normal les <b>vacances</b> on a jamais <b>rien</b> à faire</p>
</body>
</html>
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Dim 7 Aoû - 16:19 - Post : 54831
Super tu as vraiment tout compris c'est génial je suis fière de toi !
On peut passer aux tableaux ? D'ailleurs j'ai modifié la barre de progression et tu en es à 80% déjà, c'est super !
PROGRESSION ACTUELLE: 25%
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Dim 7 Aoû - 18:02 - Post : 54857
Oui bien sure^^
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Dim 7 Aoû - 18:59 - Post : 54870
☼ Les tableaux

► La première balise à connaître est la balise
Code:
<table></table>
. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau. Elle se place en général dans un paragraphe
Code:
<p></p>
, et donc dans le body comme le paragraphe.

► Qu'est-ce-qu'on met dans cette table ? Bon ok, pourri le jeu de mot...
Et bah on doit déjà indiquer au navigateur qu'on veut un tableau avant tout. Il est bête, il faut vraiment tout lui dire à celui-là ! Pour celà, on a en HTML5 les balises suivantes à disposition:
Donc bien entendu
Code:
<table></table>
dans le body, dans un paragraphe pour montrer qu'on veut une tableau !
Puis ensuite pour former ce tableau:
Code:
<tr></tr>
: Cette balise indique le début et la fin d'une ligne du tableau
Code:
<td></td>
: indique le début et la fin du contenu d'une cellule.
Bon, c'est un peu bête car les 2 se confondent vite. Un peu trop. Retenir deux choses différentes qui changent d'une lettre, c'est pas tip-top, on est d'accord.

Bon, et comment on les place ces 3 balises table, tr et td du coup ?  (Me diras-tu)

► En HTML, un tableau se construit ligne par ligne, donc on commence par mettre la balise des lignes (
Code:
<tr>
) entre le
Code:
<table></table>
et on indique le contenu des différentes cellules (
Code:
<td></td>
) dans le tr.

Schématiquement, un tableau se construit comme  ceci:
Ici, le code a donc été construit comme ceci:
Code:
<table>
  <tr>
       <th>Nom</th>
       <th>Âge</th>
       <th>Pays</th>
   </tr>
   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>États-Unis</td>
   </tr>
</table>
On commence donc par indiquer avec table le début du tableau.
Puis le début de la 1ère ligne du tableau avec tr.
Entre les deux balises tr, on a rajouté 3 cellules qui indiquent le nom de chaque colonne "Nom Age et Pays" ici.
On ferme la première ligne avec /tr et on ré-ouvre avec tr une 2ème ligne, placée donc juste dessous la 1 ère.
On ouvre la balise td pour rajouter 3 cellules comme auparavant.
C'est toujours pareil après. On ouvre, on ferme, on ré-ouvre, on referme. /o
Ce qui nous donne:


 
     
     
     
 
 
     
     
     
 
 
     
     
     
 
NomÂgePays
Carmen33 ansEspagne
Michelle26 ansÉtats-Unis

EXERCICE
C'est moche hein ?
Pas de bordure bouhhh. Sauf qu'on ne peut pas les faire en html du coup ça sera du css !
Pour le css, on le fait juste après, d'abord j'aimerais que tu me fasses un tableau (sans les bordures, pas grave pour le moment) avec en haut
"Nom Âge Taille" dans 1 ligne, et donc 3 cellules.
Ensuite tu crées une nouvelle ligne et 3 nouvelles cellules avec "Tom 15 ans 1m70" puis re-pareil avec "Marie 12 ans 1m50" voilà c'est tout pour le moment !
LadyErria
avatar
Dessinateur
Féminin
Age : 33
Date d'inscription : 20/05/2016
Nombre de messages : 213
Message • Lun 8 Aoû - 18:06 - Post : 54924
Code:
<Table>
<tr>
<th> Nom </th>
<th> Age </th>
<th> Taille </th>
</tr>
<tr>
<td> Tom </td>
<td> 15 ans </td>
<td> 1m70 </td>
</tr>
<tr>
<td> Marie </td>
<td> 12 ans </td>
<td> 1m50 </td>
</tr>
</table>
Matae
avatar
Dessinateur
Age : 15
Date d'inscription : 09/09/2015
Nombre de messages : 1440
Message • Lun 8 Aoû - 19:44 - Post : 54929
super bravo !
















Nom Age Taille
Tom 15 ans 1m70
Marie 12 ans 1m50
Contenu sponsorisé
Message •  - Post : 0
• Page 2 sur 3Voir le sujet précédent Aller à la page : Précédent  1, 2, 3  Suivant  Aller en bas 

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