C'est parti
Ca y est? Ouvert? Maintenant enregistrer ce fichier vide, mais changez l'extension en .html plutôt que .txt. Pour ceux qui n'ont pas compris sauvegardez le fichier avec le nom test.html.
> Alors maintenant ouvrez le fichier que vous venez de crée, cela devrait s'ouvrir dans votre navigateur Internet, mais le contenu étant vide.
Le fichier devrait ressembler à ceci :
|
|
Vide??? Normal vous n'avez encore rien programmé!
Balises HTML
Nous allons donc trouver un remède à votre page vide et c'est la que le jeu commence!
Alors la première chose à faire est de vous expliquer ce qu'est une balise. Une balise est une commande HTML qui se retrouve toujours entre ces deux petits symboles : < & >
|
|
|
|
|
|
Alors la première balise qui va être impératif à une mise en page EBay est la balise <div> et la balise </div>. La première sans le / signifie que l'on va ouvrir le codage HTML et celui avec le / signifie que l'on va tout fermer. En HTML les balises s'utilisent souvent en paires sans le / pour dire commencer et avec le / pour dire quand finir.
|
|
|
|
|
|
En gros si on avait une paire de balises pour que le texte danse, tout le texte entre <dansedetexte> et </dansedetexte> serait en train de danser.
Tout le texte entre ces balises seront en train de danser
|
|
|
|
|
Revenons donc à notre balise <div>. La première chose à faire avant de coder chaque page d'EBay est de taper ces deux balises <div> et </div> une après l'autre. Tapez les dans votre page bloc notes. C'est fait? Maintenant tout ce que vous allez taper au clavier sera entre cette paire de balises.
| <div> Tout ce qui sera entre ces balises apparaîtra sur votre page! </div> |
Alors je vous présente une autre paire de balises <p> et </p>. Cette paire signifie paragraphe. Tout ce que vous allez taper entre ces deux balises sera du texte sur votre page. Bien sur il doivent se situer eux mêmes entre les balises <div> et </div>. Taper donc notre nouvelle paire de balises et entre les deux balises <div> puis entre les balises <p> tapez: Mon premier code HTML.
Ca devrait ressembler à ceci!
Sauvegardez dans bloc notes, puis dans votre page de navigateur Internet, cliquez sur rafraîchir. Et par magie, il y a quelque chose sur votre page!
Selon FireFox ou Internet Explorer rafraîchir sevrait ressembler à ceci :
Félicitations! Et là je vais prendre une petite pause café pendant que je vous coder ce que vous voulez.
Espace & Retour
Espace et Retour n'apparaissent pas sur ma page!!!
Que faire?
Bon je suis de retour! Pendant que vous étiez en train de tout essayer, vous avez du vous rendre compte que le HTML ne prends pas compte de la touche Entrée. Vous avez beau taper Entrée entre deux mots mais sur la page de votre navigateur ça change absolument rien! De même pour espace vous avez beau en faire mille entre deux mots et dans votre navigateur il n'en apparaît qu'un seul!
Pas la peine de paniquer! Je vais vous montrer... Pour faire apparaître un "Espace" il faut le remplacé par  
Alors pour remplacer la touche entrée je vais vous présenter une des rares balises à ne pas être en couple, c'est la balise <br>. Pour chaque <br> vous aurez un saut de ligne dans votre navigateur internet. Je vous laisse essayer de placer des espaces et des saut de lignes dans votre code avant de passer à la suite.
Voilà quoi taper dans bloc notes pour que ça apparait dans votre navigateur
ESPACE =   ENTREE = <br>
Format du texte
Alors maintenant on va apprendre les balises pour formater le texte. Nous allons commencer avec la balise de mise en gras du texte. La paire de balises est <b> et </b>. Tout comme la balise <p> tout qui se trouve entre la paire sera en gras. Essayez donc et voyez comment votre texte grossit. Vous pouvez placer la paire de balises n'importe où pour avoir certains endroit en gras et d'autres en standard.
<b> Tout ce qui se trouve entre ces deux balises sera en Gras </b>
Polices
Maintenant je vais vous montrer une autre paire de balises un peu particulière. Ce sont les balises <font> et </font>. La particularité est que cette paire comme tel ne fait absolument rien! Le texte entre la paire ne change pas du tout. Par contre cette paire va être essentielle car on peut y ajouter des fonctions, tel la fonction de la taille.
Des fonctions peuvent être ajoutée à la balise <font> <font dansedetexte="Super Funky">Tout le texte ici dansera Funky! </font>
La balise de fermeture </font> ne contient jamais rien, elle indique juste à sa copine d'ouverture <font> d'arrêter la musique funky.
Alors comment ça marche? Pour ajouter la fonction taille il suffit d'ajouter à la balise d'ouverture : size="" et entre les "" un chiffre. Alors comme exemple tapez <font size="10" >. Par contre on n'ajoute jamais rien à la balise de fermeture. Donc entre <font size="10"> et </font> placer du texte. Vous verrez que votre texte est devenu un peu plus grand! Suffit de changer le chiffre pour changer la taille.
Si vous tapez : <font size="10">Gros et Gras</font>
Vous obtiendrez :
Gros et Gras
Deux autres fonction utiles sont color="" et face=""
Color est pour la couleur du texte. Vous avez juste besoin d'écrire la couleur entre les "". Par exemple <font color="blue"> et votre texte sera en bleu.
Si vous tapez : <font color="blue">Texte Bleu</font>
Vous obtiendrez:
Texte Bleu
Sinon vous pouvez choisir une couleur spécifique en tapant # + les 6 caractères du code couleur. Par exemple #ffffff est le code pour blanc et #cccccc est le code pour gris.
| Couleur | Code |
| Vert | #6ccc26 |
| Orange | #fbc320 |
Vous pouvez trouver un tableau de codes couleurs HTML dans la zone de liens de cette page
Pour le face="" c'est la police de votre texte, par exemple tapez <font face="ariel"> et tout votre texte entre cette balise et la balise </font> sera en ariel.
Si vous tapez : <font color="red" size="6" face="impact">Texte</font>
Vous obtiendrez :
Texte
Lignes horizontales
Alors avant de passer à la deuxième étape je vais juste vous montrer une dernière balise solitaire tout comme le <br>, c'est le <hr>
La balise <hr> va créer une ligne comme celle ci :
Par contre le <hr> a la même fonctionnalité que le <font>, on peut y ajouter des caractéristiques: On peut y ajouter le color="" qui modifie sa couleur, le size="" qui modifie son épaisseur et finalement le width="%" qui va déterminer sa longueur horizontale sur votre écran, 100% étant la totalité.
Si vous tapez : <hr width="50%" color="red" size="5">
Vous obtiendrez :
Note : L'étendue de votre ligne est pas défaut à 100% si vous n'indiquez rien