De la chimie (ENSCM) à l'Informatique (ENSIMAG)

Je ne crois pas qu'il soit pertinent que je me lance moi-même dans la rédaction d'un tutorial de HTML. Il y en a de fort bien faits (SelfHMTL, Pompage.net (avec notamment des articles très utiles pour la feuille CSS ici) et le tutorial de W3C. Puis évidemment, les pages d'un des experts ès blog de régionjob, j'ai nommé "fredlynx" avec notamment son billet sur Le HTML est Mort). Tous ces sites présentent de manière assez complète les bases et les secrets du html.

Comprendre un peu le HTML est une étape essentielle si vous souhaitez avancer par vous même et surtout sans trop vous épuiser les méninges.

Les concepts avec lesquels vous devez devenir familiés, sont :

Les Balises

à quoi ca sert ?
Les balises, il faut voir ça comme des _BOÎTES_ qui enferment des informations d'interprétation. Comme des didascalies dans une pièce de théâtre !

OUI ! En fait, c'est exactement ça. Les balises, ce sont des _didascalies_ pour votre navigateur.
Imaginez un texte de pièce de théâtre "brut". Je veux dire, juste le texte ! Des phrases les unes à la suite des autres :
La, la, la ! J'entends quelqu'un qui chante, et qui coupe du bois. La, la, la !... Ma foi, c'est assez travaillée pour boire un coup. Prenons un peu d'haleine. Voilà du bois qui est salé comme tous les diables [...] Allons, morbleu ! il ne faut point engendrer de mélancolie. Le voilà lui-même. Je pense que vous dites vrai, et que j'avons bouté le nez dessus. Voyons de près. Ah ! ma friponne ! que je t'aime, mon petit bouchon Molière, Le médecin magré lui, Act I, sc 5
Assez illisible, non ?

L'auteur d'une pièce de théâtre imagine comment la scène qu'il écrit doit se dérouler : qui parle , comment (les murmures, les cris), les postures,... Toutes ces informations doivent être données s'il veut que sa pièce soit jouée comme il l'imagine, mais ne font pas partie du texte principal !
SGANARELLE -entre sur le théâtre en chantant et en tenant une bouteille - : La, la, la ! VALERE : J'entends quelqu'un qui chante, et qui coupe du bois. SGANARELLE : La, la, la !... Ma foi, c'est assez travaillée pour boire un coup. Prenons un peu d'haleine. (-Il boit et dit après avoir bu-) Voilà du bois qui est salé comme tous les diables (-Il chante-)[...] Allons, morbleu ! il ne faut point engendrer de mélancolie. VALERE, - bas à Lucas - : Le voilà lui-même. LUCAS, - bas à Valère - : Je pense que vous dites vrai, et que j'avons bouté le nez dessus. VALERE : Voyons de près. SGANARELLE, - les apercevant, les regarde en se tournant vers l'un et puis vers l'autre, et abaissant la voix, dit en embrassant sa bouteille - : Ah ! ma friponne ! que je t'aime, mon petit bouchon Molière, Le médecin magré lui, Act I, sc 5
On comprend mieux, non ?

Les balises HTML, c'est pareil ! ce sont des informations supplémentaires nécessaire pour la bonne interprétation de votre texte brut ! Ce qui doit être écrit en gras, ce qui doit être mis à droite, ce qui doit être écrit en bleu sur un fond blanc...

quelques exemples
la balise double <strong>: revient à dire à votre navigateur "ce qui est entre <strong> et </strong>, tu l'affiches en gras !
la balise double <h1> : revient à dire à votre navigateur "ce qui est entre <h1> et </h1>, tu lui appliques les attributs définis dans "h1" (h pour "header", qui peut se traduire par "titre", "entête") dans la feuille CSS"
La balise double <a> : revient à dire à votre navigateur "ce qui est entre <a> et </a> est un lien"
la balise simple <img/> : revient à dire à votre navigateur "à cet endroit, tu dois mettre une image"

Les Paramètres dans les Balises

Les balises peuvent (et doivent parfois) contenir des paramêtres supplémentaires.
La balise <strong> : se suffit à elle même
alors que
La balise <img> : elle n'est pas assez précise en elle-même. "Ok !", se dit le navigateur "je dois afficher une image.. Mais _quelle image_ ????". la balise <img/> doit donc obligatoirement contenir un paramêtre "source" (src) qui indique ou est "rangée" l'image à afficher, et peut contenir d'autres information comme quelle taille donner à l'image (paramêtres "height" et "width",..), ou quelle largeur donner à la bordure ("border"), par exemple
tout comme la balise a doit contenir un paramêtre "référence" (href) qui indique vers où doit pointer le lien !


A vous de bosser, maintenant !! Bon courage :)