Un petit tutoriel sur les bases du HTML dans le but d'être utilisés pour vos forums. Attention cependant, certains aspects techniques seront volontairement laissés de côté pour n'aborder que l'essentiel, si vous souhaitez apprendre à créer un site, ce tutoriel ne suffira pas.
Bonjour à vous, amis lecteurs ! Vous voici arrivé dans mon cours accéléré et simplifié de HTML pour administrateurs de forum, qui changera votre vie. Ou pas. Je tiens à signaler avant toute chose que ce cours ne cherche pas à vous apprendre à réaliser un site internet, mais plutôt à utiliser le codage HTML pour mettre en page des bouts de votre forum, je n'y explique donc que les bases nécessaires pour ça.
Le HTML, c'est quoi ?
Le HTML, signifiant Hypertext Markup Language d'après Wikipedia, est un format d'écriture à base de langage de balisage servant à structurer et mettre en forme les pages internet.
Langage de balisage ?
Vous voyez le BBCode que vous utilisez parfois sur les forums ? Ces bouts de code entre crochets, avec une balise d'ouverture [hop] et une balise de fermeture [/hop] ? Hé bien voilà, vous avez un exemple de langage de balisage. Vous plantez des drapeaux spéciaux, et votre navigateur comprend ce que vous voulez qu'il fasse.
Pourquoi tu nous parles de HTML ?
Parce que si vous voulez embellir votre forum, et notamment votre en-tête, cela vous sera d'une très grande utilité, si vous voulez mon avis. Le HTML vous offre un panel de possibilités que les éditeurs de Forumactif ou Xooit ne vous permettront pas forcément. Et en plus, vous pourrez optimiser au mieux l'espace employé sur votre en-tête grâce aux tableaux.
D'accord, raconte nous comment on fait du HTML
Je vais commencer par vous donner quelques liens où vous pourrez trouver quelques éclaircissements si mes explications ne suffisent pas :
Le Site du Zéro, en français, la bible pour les utilisateurs débutants, il explique tout très simplement. D'ailleurs, je me suis inspirée de la méthode pédagogique pour mes propres tutos. Le cours qui vous intéresse ici est celui sur le XHTML/CSS et englobe l'intégralité des possibilités du HTML et des divers bonus qui vont avec.
W3 Schools, en anglais, vous fournit tous les tutos nécessaires à un approfondissement ou un éclaircissement. N'hésitez pas à aller y jeter un coup d'oeil, c'est une bible OoO
Le HTML, quand on se donne la peine de s'y pencher, c'est très simple. De la même façon qu'une phrase commence par une majuscule et finit par un point, ou qu'une remarque entre parenthèses commence par la parenthèse ouvrante et s'achève par la parenthèse fermante, on peut mettre notre texte entre balises indiquant sa nature.
Je vous vois tourner de l'oeil Paniquez pas. Je viens de parler d'une remarque entre parenthèses, vous savez tous ce que c'est, non ? (en voici un exemple). Quand vous voyez une parenthèse ouvrante, vous vous attendez naturellement à en voir une fermante, et vous vous dites : "c'est une remarque entre parenthèses". Avec le HTML, c'est pareil ! Appelez les parenthèses des balises, ouvrantes puis fermantes. Une balise va dire "début de texte en gras" puis "fin de texte en gras". Et votre navigateur (Firefox, Internet Explorer, Opéra, etc...) va dire "oh, je reconnais un texte en gras". Et comme votre cerveau fait des associations d'idées pour ce qui est du texte entre parenthèses, votre navigateur aura un comportement adéquat pour chaque balise.
En résumé, le navigateur affichera en gras tout bout de texte entouré par les balises "mettre en gras". Si vous ne lui dites pas "ici tu arrêtes de mettre en gras" (en bbcode ça sous entend que vous mettez [/b]), il continuera jusqu'à la fin du texte. Bref, comme un automate, il avance tout droit jusqu'à ce qu'on lui fasse changer de direction.
Comme je viens de le dire, le navigateur internet n'est pas aussi futé que vous, il faut donc bien lui expliquer les choses. Si vous vous embrouillez, il ne comprendra rien.
Vous devez impérativement fermer vos balises quelles qu'elles soient !
Comme en bbcode, une balise fermante se contente de reprendre le format de la balise ouvrante avec un / devant.
Par exemple : <strong> est une balise ouvrante </strong> est une balise fermante
Certaines balises spéciales n'ont pas besoin de balise fermante car elles n'encadrent pas de texte ou d'élément particulier, mais la règle en rouge est toujours valide en ce qui les concerne.
Exemple de la balise img : <img va ouvrir la balise /> va fermer la balise D'où les bouts de code <img src="..." /> qui n'ont pas de balise fermante à part.
(En réalité, ce dont je vous parle n'est pas du HTML mais du xHTML, avec une norme plus pointue que le HTML, par exemple la fermeture systématique des balises. Comme il est plus récent, je tâche de vous apprendre dès le départ à respecter les normes d'écriture, vu qu'elles sont les normes de base de tout navigateur récent)
Ne présumez pas des forces de votre navigateur, les balises peuvent être imbriquées les unes dans les autres comme des poupées russes pour accumuler leurs effets (italique + gras par exemple), mais pas croisées. (Vous auriez du mal à fermer vos poupées russes correctement si vous fermez la grande - qui contient la petite - avant de fermer la petite poupée)
<b><i>....</i></b> est correct, <b><i>...</b></i> est incorrect.
Vous avez généralement tendance à pseudo-coder comme des brutes à grands coups de copié coller, et vous en devenez incapable de le relire. Sachez que vous pouvez aérer votre code et que ceci :
En HTML, il est possible d'écrire des bouts de code qui ne seront pas interprétés par le navigateur et qui ne sont là que pour vous faciliter la relecture. Ce sont les commentaires, très utiles pour vous repérer dans un code un peu complexe :
<!-- un commentaire -->
Évidemment, comme pour le reste, c'est un code qui a une ouverture <!-- et une fermeture -->. Faites donc attention aux potentielles mauvaises surprises.
Plutôt que de coder en dur directement dans la fenêtre des en-têtes de forumactif (ou autre), utilisez notepad++, c'est un logiciel gratuit open source et surtout très pratique quand il s'agit de coder, puisqu'une fois que vous lui avez explicité que votre code est du html, il le colorera pour vous le rendre plus facile à lire ^^
Bon, les balises, on a compris, mais c'est quoi les attributs ?
C'est la puissance à l'état pur ^^ Chaque balise dispose d'un panel d'attributs spécifiques qui lui permettent de préciser l'apparence du texte qu'elle encadre. Par exemple si je veux que le contenu d'une cellule de tableau soit aligné en haut de la cellule et à droite, j'utiliserai les attributs valign et align...
Ces attributs sont relativement simples à utiliser car tous basés sur le même schéma, c'est à dire nom_de_l'attribut="valeur", les valeurs pouvant varier selon les cas (ça peut être une taille en pixel ou bien une définition center, left, right, etc...).
Un exemple :<td align="center" valign="top">...</td>
Notez qu'on a d'abord le nom de la balise, puis les attributs, séparés par un espace. Vous pouvez mettre autant d'attributs que vous voulez, dans la limite du nombre d'attributs disponibles pour la balise concernée, évidemment.
Mais comment on sait quels sont les attributs qu'on peut utiliser ?
On les apprend, on va les chercher sur internet ou on lit la suite du tuto pour connaitre les attributs des balises principales. Personnellement, j'ai beau vous faire ce tuto, je n'en connais pas énormément, quand j'ai un doute, je cherche sur internet ^^
Pour afficher une image en html, sur le principe, c'est simple : <img src="adresse_de_l'image" /> Je vous avertis cependant tout de suite de deux subtilités importantes :
Rappelez vous la règle numéro un du bon webmaster : toutes les balises doivent être fermées ! N'oubliez donc pas le slash avant le crochet de fermeture.
Si vous avez compris les attributs, vous remarquerez que c'est l'attribut src (pour search, rechercher) qui va chercher l'image à afficher. Comme c'est un attribut, l'ordre importe peu, mais ne l'oubliez pas et ne l'écrivez pas n'importe comment.
Vous avez de plus à votre disposition un certain nombre d'autres attributs.
alt="texte" vous affichera un texte alternatif si l'image bugue. Pour des raisons d'accessibilité, cet attribut est obligatoire.
border="1", ou 2, ou 3, ou 0, etc... spécifie une taille de bordure pour l'image.
width="200" vous permet de préciser la largeur de votre image (j'ai mis 200 au pif)
height="200" vous permet de préciser la hauteur de votre image.
hspace="2" pour un espacement horizontal de votre image (donc ici, l'image est espacée de 2 pixels des éléments qui l'entourent à droite et à gauche)
vspace="2" pour l'espacement vertical (même chose, mais au dessus et en dessous OoO)
positionnement de l'image
align="left" pour l'image à gauche
align="right" pour l'image à droite.
Remarque : Spécifier à l'avance la taille exacte de l'image permet de l'afficher plus rapidement, car le navigateur n'a pas besoin de recalculer les dimensions... Remarque additionnelle : D'après les normes actuelles, il vaut mieux séparer au maximum le squelette de sa mise en forme. Autrement dit, il vous est conseillé de vous contenter de l'attribut class et de mettre les propriétés diverses dans un code CSS. Je vous en parlerai plus bas.
Pour afficher un lien, la syntaxe est la suivant : <a href="lien" target="_blank">texte lié</a>
Même chose que précédemment, href est un attribut qui va chercher le lien. Le principal autre attribut à connaître est target. Il vous permet de définir la cible de votre lien, et doit être réglé à la valeur _blank si vous voulez ouvrir une nouvelle page, _self si vous souhaitez l'ouvrir dans la page où vous vous trouvez, _parent pour ouvrir le lien dans la page parent (utile dans le cas des frames, sinon les liens s'ouvriront dans la frame, pas très esthétique ^^)
Les sauts de ligne :
N'oubliez pas, le navigateur n'est pas très futé et pour sauter une ligne, il faut le lui dire, donc la balise de saut de ligne est :<br />
Les paragraphes et les titres : Le HTML est un langage "sémantique", il permet au navigateur de lire votre page et de lui donner une apparence cohérente. Dans la mesure du possible, donc, il est conseillé de donner à chaque élément de votre code la balise correspondant à son rôle. Ainsi, les blocs de texte seront organisés sous formes de paragraphes avec les balises correspondantes :
<p>un paragraphe</p>
A l'affichage, vous aurez un bloc de texte avec un saut de ligne avant et un saut de ligne après.
De même, les titres doivent être dans la mesure du possible être "désignés" par les balises h1 à h6 :
<h1>Un titre de niveau 1</h1>
Si vous cherchez à leur donner une mise en forme particulière, il vous faudra cependant passer par le CSS.
Il y a plusieurs façon d'obtenir la mise en forme souhaitée, je vous en offre deux à chaque fois (sauf exceptions), mais la deuxième méthode utilise des balises obsolètes qui ne seront donc pas forcément prises par les futurs navigateurs.
Texte en gras <strong>texte en gras</strong> ou <b>texte en gras</b>
Texte en italiques : <em>texte en italiques</em> ou <i>texte en italiques</i>
Texte souligné : <span style="text-decoration:underline;">texte souligné</span> ou <u>texte souligné</u>
Texte en couleur <span style="color:COULEUR;">Texte en couleur</span> A noter que COULEUR peut prendre une valeur hexadécimale (#660000 par exemple) ou textuelle (green par exemple).
Texte en gros ou en petit <span style="font-size:12px;">Texte de taille 12px</span>
Texte dans une police de caractère particulière <span style="font-family:Arial;">Texte en police Arial</span>
Vous aurez constaté que mes dernières mises en forme utilisent toutes la balise span(une balise destinée à mettre en forme un élément de texte, bref, destinée spécifiquement à l'usage que j'en ai fait) et l'attribut style. Cet attribut style sert à appliquer des styles css. Il vous faudra un cours de CSS pour en savoir plus, mais sachez deux points particuliers :
Vous pouvez combiner les styles CSS dans votre attribut style, donc en vrac avec tout ce que je vous ai donné plus haut, ça vous donne :
Un texte souligné, de couleur #990000, de taille 12px, en police Arial <span style="text-decoration:underline;color:#990000; font-size:12px; font-family:Arial;"> Votre texte </span>
Il vous faudra juste ne pas oublier de séparer chaque mise en forme css par un point virgule.
Vous pouvez remplacer l'attribut style par l'attribut class(ou mettre les deux à la fois, si vous voulez utiliser une classe spécifique en changeant juste un détail). Vous définirez alors une classe dans votre code css (sur Forumactif, c'est simple, il vous suffit de la définir dans Affichage » Couleurs » Feuille de style css), et l'exemple précédent deviendra :
<span class="maclasse">Votre texte</span>
Et sera associé à la classe maclasse que vous aurez définie de la sorte dans votre fichier css :
Oui, on peut dire ça XD Dans excel on peut faire des tableaux, leur mettre des bordures, fusionner deux cellules ou deux colonnes, etc... Tout ça, on va le faire en HTML !
Rappelez vous mes explications sur le navigateur pas très futé... Vous, lorsque vous voyez un tableau, vous le reconnaissez de manière schématique, mais le navigateur, lui, il est beaucoup plus bête que vous, et vous allez devoir lui dire "ça c'est un début de tableau" puis "ça c'est un début de ligne" et "ça c'est un début de cellule". Et pareil pour la fin de cellule, de ligne, de tableau. Du coup votre navigateur, il va dire "Aaaah, alors en fait, c'est un tableau, avec tant de lignes et tant de colonnes" et il affichera un tableau.
Je vous sens à deux doigts de me taper dessus là ^^' Passons aux choses sérieuses. Vous voulez un tableau, vous allez dire "voici un tableau" avec un début de tableau, et une fin de tableau, comme ça :
<table>blabla</table>
Mais votre navigateur, pas fin pour deux sous, a beau savoir que vous avez un tableau, il n'y voit ni cellules ni lignes et du coup le voilà tout ennuyé, et il n'affichera rien. Qu'à cela n'y tienne, dites lui que vous voulez une ligne !
<table>
<tr>...</tr>
<table>
Malheureusement pour vous, votre navigateur est toujours pas d'accord. Il va falloir que vous lui déclariez que, dans votre ligne, vous avez une ou plusieurs cellules, comme ça :
Petite suggestion en passant, ouvrez votre bloc note windows (ou notepad++ si vous l'avez téléchargé plus haut), codez dedans et enregistrez votre oeuvre avec l'extension .html, puis affichez la sous votre navigateur (en cliquant sur le fichier html ou bien en faisant "ouvrir un fichier" avec votre navigateur)
Tout fier de votre oeuvre, vous demandez au navigateur de l'afficher, et TADAAAM !! Vous voyez ça :
Bon, c'est chouette, vous n'avez pas de bordures, le tableau ne ressemble à rien, mais vous avez effectivement fait quelque chose qui ressemble à un tableau. Et si vous ajoutiez une ligne ? Rappellez vous, pour dire au navigateur que vous voulez une ligne, il faut lui dire tr (table row, je suppose ^^).
Comme ma touche printscreen me fait un refus de coopérer, je vous invite à afficher vous même le résultat de votre travail acharné. Que voyez vous ? Deux lignes ! Décidément, c'est magique.
Heu, si tu veux x_X Mais je vois pas les bordures, ça me perturbe
Rhô... Si vous tenez vraiment à afficher les bordures pour mieux maîtriser ce que vous faites, rajoutez l'attribut border="1" dans votre tableau...
<table border="1">
...
</table>
Et là, magique, vous avez une bordure. Double, je sais, mais ne vous en préoccupez pas pour le moment, c'est pas vraiment important.
Voilà, maintenant, vous savez faire un tableau en HTML !
Voilà, c'étaient les bases les plus basiques, maintenant il va falloir que je vous parle des attributs des tableaux et de leurs pouvoirs magiques. Voici la liste des attributs que vous pouvez utiliser pour vos tableaux :
width : largeur du tableau ou d'une cellule, en pixels ou pourcentage. (exemple : width="150" en pixels ou bien width="20%" en pourcentage)
height: hauteur du tableau ou d'une cellule, en pixels ou pourcentage.
border: taille en pixels de la bordure du tableau.
cellpadding: l'espace la bordure et le contenu de la cellule.
cellspacing: l'espace entre les cellules.
bgcolor: couleur d'une cellule, ligne ou tableau.
background: l'URL de l'image à afficher comme image d'arrière plan du tableau.
Alignement des éléments d'un tableau.
Alignement horizontal :
align="left" : les données sont alignées à gauche de la cellule.
align="right" : les données sont alignées à droite de la cellule.
align="center" : les données sont centrées à l'intérieur de la cellule.
Alignement vertical :
valign="middle" : les données sont centrées verticalement à l'intérieur de la cellule.
valign="top" : les données sont en haut de la cellule.
valign="bottom" : les données sont en bas de la cellule.
valign="baseline" : les données des cellules sont alignées sur une ligne commune, uniquement pour tr.
Remarque : Dès le départ, spécifiez la largeur de votre tableau en 100%, il prendra ainsi toute la largeur de votre page d'accueil (oui, oui, j'ai écrit ce tuto pour vos en-têtes).
Parce que ça peut servir si vous souhaitez par exemple avoir une colonne prenant toute la hauteur sur un côté, mais un contenu encore fractionné pour le reste...
Si vous souhaitez fusionner plusieurs cellules en une seule, vous devez utiliser les attributs :
rowspan pour fusionner les lignes colspan pour fusionner les colonnes
La valeur attribuée à ces attributs est le nombre de cellules à fusionner.
Code:
<table border="1"> <tr> <td colspan="2"> Fusion de deux colonnes (deux td) en une seule. On ne spécifie que cette cellule puisque l'autre est "mangée" par cette fusion. </td> </tr>
<tr> <td> Une cellule à gauche </td>
<td rowspan="2"> Une cellule à droite avec fusion de deux lignes (deux tr) en une seule </td> </tr>
<tr> <td> Une cellule à gauche, celle de droite étant prise par la fusion précédente </td> </tr> </table>
Rappellez vous bien la nuance : tr indique une ligne, donc chaque fois que vous ouvrez une balise tr, vous génèrerez une ligne de tableau, contenant un nombre souhaité de cellules que vous gérez à l'aide de la balise td. Si la première ligne contient quatre cellules, il en sera ainsi pour les suivantes, même si vous ne les "déclarez" pas systématiquement.
Et enfin, sachez que la grosse majorité des attributs que j'ai spécifiés plus haut peut être, une fois de plus, ramenée à une simple classe css.
Séparer au maximum le css du HTML peut vous permettre de mettre à jour votre design sans avoir à refaire la structure de votre site/forum, pensez y !
Les tutoriels de l'Enae Volare appartiennent à leurs auteurs respectifs et - sauf mention contraire - ne doivent en aucun cas être diffusés, redistribués ou repris de quelque façon que ce soit en dehors de l'Enae, que ce soit en partie ou en totalité.
Merci de créditer l'Enae si ce tutoriel vous a été utile, cela nous aidera à être connus et c'est un juste paiement en retour de nos services ;)
Vous avez un problème avec ce tutoriel, vous voudriez l'adapter à votre cas particulier mais ne savez pas comment vous y prendre ? Créez un nouveau sujet dans le forum Support Tutos !
Vous avez quelque chose à ajouter à ce tutoriel ? Ouvrez un sujet dans les Mises à Jour de Tutos, le staff se chargera de mettre le tutoriel à jour si votre proposition paraît pertinente ;)
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité
Vous ne pouvez pas poster de nouveaux sujets Vous ne pouvez pas répondre aux sujets Vous ne pouvez pas éditer vos messages Vous ne pouvez pas supprimer vos messages Vous ne pouvez pas joindre des fichiers
Paniquez pas. Je viens de parler d'une remarque entre parenthèses, vous savez tous ce que c'est, non ? (en voici un exemple). Quand vous voyez une parenthèse ouvrante, vous vous attendez naturellement à en voir une fermante, et vous vous dites : "c'est une remarque entre parenthèses". Avec le HTML, c'est pareil ! Appelez les parenthèses des balises, ouvrantes puis fermantes. Une balise va dire "début de texte en gras" puis "fin de texte en gras". Et votre navigateur 
