HTML

Le HTML ou Hypertext Markup Language est un langage utilisé dans le monde du web ; il s’agit d’un des langages de base qui permet de structurer les pages web. Actuellement, c’est la version 5 du HTML qui est utilisée. Celle-ci se veut plus simple que les autres puisque qu’elle ne prend plus en compte la mise en forme du texte (par exemple : couleur du texte), laissant cette fonction au CSS.

Sur Neopet, il permet de personnaliser sa fiche utilisateur, ses pages de Neopets, sa page de guilde etc. Pour résumer, le HTML est la base à connaître pour structurer ses pages sur Neopets.

Sommaire

Avant de se lancer
Structure d’une page web
Balises de mise en forme du texte

• Style du texte
• Insertion d’éléments

Balises de listes
Balises de tableaux
Balises génériques
Conclusion

Avant de se lancer

Voici quelques petites recommandations, avant d’apprendre les chemins tortueux du HTML :

• Ceci « <> » est une balise. Une balise s’ouvre : « < » et se ferme : « > » . N’oubliez jamais de fermer une balise ou tout votre code pourrait être faussé.

• Le HTML étant un langage international, la langue à utiliser est donc l’anglais. On n’utilisera pas les guillemets français : «  » mais les guillemets anglais " ".

• Les bases du langage HTML présentées ici ne concernent que le site de Neopets et seraient donc incomplètes si vous souhaitiez coder vos propres pages web. En effet, il manquerait des éléments importants qui ne sont pas nécessaires lorsque vous codez sur Neopets puisqu’ils sont déjà pris en compte.

Structure d’une page web

Avant de s’intéresser aux différents codes disponibles, il s’agira de comprendre comment est structurée une page web.

Une page est composée, comme tout document, d’une en-tête, d’un corps et d’un pied de page. Cependant sur Neopets, seul le corps compte puisque les autres parties sont déjà gérées par le site. C’est pourquoi nous allons uniquement voir des éléments permettant de structurer le corps de la page.

Le corps de la page peut lui aussi contenir différents éléments qui vont permettre de le structurer. Il est très important de délimiter correctement les différents éléments d’une page car ceux-ci pourront ensuite être personnalisés grâce au CSS. Il faut donc regrouper les éléments qui vont ensemble, ainsi quand il faudra les mettre en forme avec le CSS, ceux-ci prendront les mêmes caractéristiques.

Balises de mise en forme du texte

Ces balises vont permettre de mettre en forme et structurer un texte avec cohérence et uniformité.

Note : certaines balises n’ont pas d’effets visibles sur Neopets mais elles sont importantes si vous les associez à du CSS.

Style du texte
Dans le tableau ci-dessous, vous allez retrouver les différents éléments permettant de mettre en forme un texte.

Description	Balise	Exemple
Titre de niveau 1	<h1>Texte ici</h1>
Titre de niveau 2	<h2>Texte ici</h2>
Titre de niveau 3	<h3>Texte ici</h3>
Titre de niveau 4	<h4>Texte ici</h4>
Titre de niveau 5	<h5>Texte ici</h5>
Titre de niveau 6	<h6>Texte ici</h6>
Abbréviation	<abbr>Texte ici</abbr>
Longue citation	<blockquote>Texte ici</blockquote>
Citation d’une oeuvre ou autre	<cite>Texte ici</cite>
Citation courte	<q>Texte ici</q>
Exposant	<sup>Texte ici</sup>
Indice	<sub>Texte ici</sub>
Texte en gras	<strong>Texte ici</strong>
Texte en italique	<em>Texte ici</em>
Texte normal	<mark>Texte ici</mark>

Insertion d’éléments
Dans le tableau ci-dessous, vous allez retrouver les différents éléments permettant d’ajouter des images, des liens, des sauts de lignes, etc.

Description	Balise	Exemple
Retour à la ligne	<br />
Paragraphe	<p>Texte ici</p>
Ligne de séparation	<hr />
Adresse de contact	<address>Texte ici</address>
Définition	<dfn>Texte ici</dfn>
Date ou heure	<time>Texte ici</time>
Image	<img src="LIEN DE L'IMAGE">
Lien	<a href="LIEN">Texte/Image visible par l'utilisateur</a>

Balises de listes

Dans le tableau ci-dessous, vous allez retrouver les types de listes qui existent en HTML.

Description	Balise	Exemple
Liste à puces	<ul> <li>Texte ici</li> <li>Texte ici</li> <li>Texte ici</li> </ul>
Liste numérotée	<ol> <li>Texte ici</li> <li>Texte ici</li> <li>Texte ici</li> </ol>

Balises de tableaux

Voici les balises qui vont permettre de créer facilement un tableau. Ces éléments doivent être utilisés ensemble pour le former.

Un guide pour former ses propres tableaux sera prochainement réalisé.

Balises génériques

Les quelques balises de code vu ci-dessus ne suffisent pas la plupart du temps pour faire tout ce que nous souhaitons, il faut donc avoir des balises dîtes génériques.

Ces balises sont appelées ainsi car, contrairement aux autres, elles n’ont pas de signification propre. La balise <p>, par exemple, signifie paragraphe, puisqu’elle permet de délimiter un nouveau paragraphe. Ces balises vont donc acquérir la signification que nous leur donnerons.

Ces balises sont les plus utilisées car, possédant les caractéristiques définies par le codeur, elles sont souvent plus commodes pour construire sa page web.

Il est important de noter que cette balise doit impérativement s’utiliser avec d’autres attributs car sinon elle n’est d’aucune utilité. Il existe deux types d’attributs :

• id : identifiant unique d’une balise ;
• class : identifiant commun à un groupe de balises.

Ces deux attributs vont permettre de définir la propriété de la balise : unique ou répétitive. Pour les utiliser, il faudra écrire le code suivant :

• id : <div id="identifiantUnique">Texte ici</div> ;
• class : <div class="identifiantCommun">Texte ici</div>.

Conclusion

Avec la lecture de ce guide, vous connaissez à présent quelques éléments importants pour commencer à mettre en forme vos pages web. Il est fortement recommandé d’acquérir toutes les notions de cette page avant de passer à la suite car ceci est la base de la programmation web.

Avant toutes choses, il est important de comprendre la logique du HTML et non pas de tout retenir par cœur (ce qui se fait au fur et à mesure de pratique). Un autre point essentiel est, qu’au début de la programmation web, il ne faut pas se fixer des objectifs trop hauts mais commencer par des choses basiques car on peut facilement perdre le fil. Il faut donc y aller étape par étape.

Maintenant que les différents éléments d’une page ont été exposés, nous pouvons passer à l’étape suivante qui consiste à les mettre en forme, de façon esthétique, grâce au CSS.