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

@Ataraxie tu sais pourquoi ça beugue ? XD
Ca m'a jamais fait ça pourtant c'est pas très long XD

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 Merci beaucoup.

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

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

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à

ok j'ai compris ^^

Voilà je te poste la suite demain

D'accord ^^

☼ 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

Mais sa sert à quoi exactement les listes ordonnées et non ordonnées car j'en vois pas trop l'interet?

C'est pour faire des listes dans les sites tout ça ^^

Ok donc pour se que je fais en codage sa n'a pas trop d'interet ^^

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 ^^'

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

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>

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

Pas de quoi! On reprend ça demain j'ai une amie chez moi je peux pas trop faire le cours today! x3

pas de soucis on est pas au pièce, vie privée avant tout ^^

Coucou suite du cours !


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 !

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>

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%

Oui bien sure^^

☼ 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	Âge	Pays
Carmen	33 ans	Espagne
Michelle	26 ans	États-Unis

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 !

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>

super bravo !

Nom	Age	Taille
Tom	15 ans	1m70
Marie	12 ans	1m50