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

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 :
-

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]

Rien ne manque j'ai hate de commencer ^^

Et bien on commence tout de suite !
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.  

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.

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

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

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 !
Oui c'est comme un bloc-note!
On continue demain 8D

j'attend avec impatience la suite ^^

Et c'est parti pour la suite!

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

tu pouvais les mettre en

Code:

[code][/code]

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

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

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.

Oui haha !
As-tu des questions ? :3

Non aucune question on se voit demain pour la suite

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

sa va être rapide car je connais déjà un peu le thème

Tu connais quoi déjà ? Explique un peu si tu veux, je te poste aussi le cours pour la journée

☼ 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.
► Je veux une fiche comme sur ce schéma: https://2img.net/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
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>

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 ! 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>

ç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>

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 !

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

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

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