On ne peut pas tenir un blog ou même nourrir un profil FB ou MySpace sans croiser un minimum de ce code qui sert à présenter les pages web.
Ceci n’est pas un tuto, parce qu’il y en a déjà ici ou là sur le sujet, et donc juste un récap’ du minimum à savoir pour copier-coller efficacement. Je ne m’attarde pas sur l’aspect HyperTexte de la chose, tout le monde a compris les hyperliens c’est hyper bien.
Balises.
HT pour HyperTexte et ML pour Markup Language, en français on dit langage balisé. Les balises html correspondent chacune à un élément de page: paragraphe, titres, lien, tableau, listes, images…etc. Combinées dans un document .html, elles structurent le contenu et sa présentation. Tout le contenu d’une page web est décrit de cette façon aux navigateurs, qui lisent bêtement de haut en bas.
<html> <h1> Le plus gros titre </h1> <h6> Le plus petit titre </h6> <p> Une balise pour ouvrir un paragraphe, dans lequel je peux mettre <a> un lien </a>, par exemple. <cit>Il existe une balise dédiée aux citations.</cit> </p><!-- fin du paragraphe --> </html>
On voit que les balises sont des containers d’informations et fonctionnent un peu comme des poupées gigognes, qui peuvent en contenir d’autres plus petites mais doivent être refermées pour trouver leur bonne place dans l’ensemble.
C’est vrai pour la plupart des balises html, et si vous voyez <qqchse> dans le code, vous trouverez </qqchse> un peu plus loin.
Cependant certaines balises spéciales n’ont pas besoin d’être ainsi doublées, et celles-ci se terminent par 1 autre signe de fermeture: />
C’est le cas des images, décrites ainsi:
<p> un paragraphe où insérer mon image: <img src="mon_image_rangee.jpg"/> et voilà! Mais img n'est pas la seule balise qui se dédouble pas: <embed src="mon_film_youtube"/> est aussi répandue pour partager sur les réseaux sociaux du web 2.0... </p>
Contrairement au contenu d’un paragraphe, l »information des images n’est pas écrite dans la page, il faut aller la chercher ailleurs.
On donne donc l’adresse où est stockée l’image à la balise en utilisant son attribut source : src="adresse_source_image".
Attributs
Donc voilà, faut pas casser les balises quand on copie -colle du html. Et certaines ont besoin d’attributs pour fonctionner correctement. Entre ce qui fonctionne et ce qu’il est poli de faire, il y a quelques arguments supplémentaires à ajouter aux éléments courants. Notamment:
Pour les Images
<img src="mon_image_rangee.jpg" /> ne suffit pas. <img src="mon_image_rangee.jpg" width="50" height="50" alt="texte alternatif en cas de pb de chargement" title="nom de mon image"/> convient bien mieux
alt, c’est ce qui s’affiche si l’image ne se charge pas. Les dimensions des images s’expriment en pixels dans les attributs height et width.
+ Voir mes notes sur les images?
Pour les Liens
<a href="www.monsite.com"> Mon Site </a>
href est l’attribut essentiel d’un lien puisqu’il indique la destination du clic. Mais là encore ça ne suffit pas à faire un « beau » lien:
<a href="www.monsite.com" target="_blank" title="Titre visible au survol"> Mon Site </a>
où target précise que l’on ouvre une nouvelle fenêtre / un nouvel onglet. Si on souhaite rester dans la même fenêtre de navigation, target="self".
L’attribut title des balises est important pour les robots comme celui de Google.
+ Voir mes notes sur les liens sociaux?
Et avec ceci?
Ben normalement avec tout ça vous devriez pouvoir proposer des tas de liens et de citations en commentaires, il existe des tas de tuto pour mettre les mains dedans, j’en donne un parce qu’il est bien et un autre sur Comment ça marche.net.
Articles (RSS)