Vous êtes sur la page 1sur 6

Introduction au HTML

Naissance

Comment le HTML est-il né ? En fait, tout commence quand TIM BERNERS-LEE crée une
méthode pour relier des documents à l'aide de liens hypertextes, sur un réseau appelé à
l'époque "la mère de tous les réseaux" : Internet.
Le World Wide Web (W.W.W.) est constitué de pages Web. Ces pages sont conçues avec le
langage HTML ou HyperText Markup Language ou encore Langage dit à balises. Le HTML
est donc un simple "langage à balises", comme les premiers traitements de texte (Wordstar).
Ce langage permet de coder une page à l'aide de commandes de mise en forme. Ces dernières
sont ensuite interprétées par un navigateur (ou browser en anglais) et apparaissent sur votre
écran.
Les pages HTML sont aujourd'hui le système de base d'Internet. Les sites peuvent inclure du
texte ainsi que des images fixes ou animées, du son , de la vidéo et même des programmes
interactifs (à l'aide de Java ou Javascript). Le langage HTML ne se rencontre pas
exclusivement sur le web, celui ci est également utilisé pour fournir une Interface aux CD-
ROM multimédia et maintenant aux DVD ROM.

L'évolution du langage

1. HTML 2.0
2. HTML 3.0
3. HTML 3.2
4. HTML 4.0 (dernière version).

Les différents types de balises

- Balises contenant des métainformations telles que <head> ou <title>.

- Balises de mise en forme du document telles que par exemple <b> <i> ou encore
<table>.

- Balises de liens telles que <a>.

- Balises d'insertions (multimédia) ou comment insérer des images, du son, de la vidéo.


Premier code HTML

Définition

Le code HTML est un langage de description. A l'aide d'instructions que vous insérez, vous
allez définir la forme de votre texte (gras, italique, polices, ...), inclure des images, du son,
implanter des liens vers d'autres pages...

Exemple

Une balise (ou tag) est facilement identifiable, elle est constituée d'un mot (ou plusieurs dans
certain cas) encadrée par les signes inférieur (<) et supérieur (>).

1. Balise d'ouverture
2. Votre texte
3. Balise de Fermeture

Les premières balises (ou tags)

La balise : Elle apparaît en premier et signale aux différents navigateurs que c'est une page
Web, le tag indique la fin de la page.

La balise <head> : Elle indique les informations propres à votre page. Elle inclut les balise
title et body ainsi que les balises meta qui permettront aux moteurs de recherche d'indexer
votre site Web.

La balise <title> : Elle définit le titre de votre site (ou page). Ce titre se loge dans la barre
supérieure de votre navigateur, ainsi que lors d'un ajout dans les favoris (ou bookmark) d'un
navigateur.

La balise <body> : Elle va contenir toutes les informations qui s'afficheront dans la fenêtre
du navigateur : Textes, liens, images...
Les balises indispensables
Tableau des balises les plus rencontrées

Balise Description
<a> Lien hypertexte
<strong> ou <b> Texte en gras
<br> Saut de ligne
<center> Centrage
<font> Définition du texte
<h1> à <h6> Titre de niveau 1 à 6
<hr> Filet horizontal (séparation)
<em> ou <i> Texte en italique
<p> Début d'un paragraphe (saut de 2 lignes)
<table> Structure d'un tableau
<tr> Ligne d'un tableau
<td> Cellule d'un tableau
<ol> Liste ordonnée (1,2,3…)
<ul> Liste non ordonnées (symbole)
<li> Item de la liste (<ol> ou <ul>)
<form> Zone de formulaire
<frameset> Zone de cadres
<frame> Cadre
Première page avec le bloc-note

Avant de commencer à écrire votre première page, il vous faut un éditeur html, mais le plus
simple et le plus économique pour débuter reste le bloc-notes de Windows. Malheureusement
son plus gros désavantage que vous devez "tout faire à la main" mais c'est une excellente
façon de progresser.

1. Tapez votre code (le retour chariot n'est pas obligatoire, et il n'a aucun effet ou presque
sur le html, il permet juste d'avoir une meilleure visibilité de la syntaxe html

2. Enregistrez le fichier avec l'extension .htm (dans la majorité des cas la première page
vue par vos visiteurs se nomme index.htm ou index.html ou encore index.shtml)

Quelques règles simples pour débuter

• Pratiquement toutes les balises vont par paire (balises d'ouverture et de fermeture,
exemple : <b> et </b>)

• Ecrivez vos balises en minusules, cela peut faciliter le transfert de votre code vers le
XHTML

• Essayer d'aérer au maximum votre code

• Le langage HTML ignore les retours chariot et les tabulations. Servez-vous des balises
<br> ou <p> pour passer à la ligne

• Certaines balises sont ignorées par certains navigateurs ou ne s'affichent pas de la


même façon. Ex: Un titre de niveau supérieur h1 ne s'affiche pas de la même façon
selon le navigateur utilisé

• Le cas des balises spécifiques à Internet Explorer (ex:<marquee>) ou à Netscape


(ex:<blink>) est un peu plus épineux, essayez de ne pas trop en abuser !! ou mieux ne
les utilisez pas, Internet par définition c'est pour tous et pas seulement pour Microsoft
et Netscape !!
Première maquette de votre site Web

Avant de se lancer dans la réalisation du code html, ou dans l'habillage graphique de votre
site, il convient de réfléchir et définir le contenu, l'architecture, et la forme générale de votre
site... Pour cela rien ne vaut une page blanche et un stylo pour esquisser une première
maquette de votre site.

1. Le contenu
C'est certainement le point le plus important, il ne faut surtout pas le négliger car c'est celui
qui donnera envie à vos visiteurs de revenir sur votre site Web.
a ) Maîtriser le sujet que l'on va aborder
b ) Dégagez les principales rubriques
c ) Préparez vos textes (paragraphes, orthographe...)

2. L'architecture
Sous peine de courir très vite à la catastrophe et, de perdre un temps précieux pour l'avenir,
dégagez au plus tôt une architecture (arborescence) de votre site.
a ) Préparez une arborescence de votre site
b ) Spécifiez les liens vers vos différentes pages
c ) Votre site doit être modulable (pour accueillir de nouvelles rubriques)

Note : Votre première page (page d'accueil, home page, ...) doit se nommer index.htm ou
index.html. Il est de plus préférable que les noms de vos pages ne dépassent pas 8 caractères.

3. La forme
Afin de faciliter plus tard la création du code avec un éditeur html, n'hésitez pas à griffonner
une première esquisse de vos pages, ceci également dans le but d'affecter aux éléments des
côtes en pixels pour une mise en page soignée.
a ) Dessinez un premier croquis graphique de votre page d'accueil
b ) Spécifiez les côtes en pixels

Note : Pour que votre site soit correctement visible dans une résolution de 800 x 600, basez
vous sur une largeur de 771 pixels maximum. En ce qui concerne la hauteur, la taille
maximale préconisée est 1200 pixels.
Liens intéressants

Sites d’apprentissage et de référence (anglais)


http://www.w3schools.com/html/html_www.asp

Les bases du HTML (anglais)


http://www.cwru.edu/help/introHTML/toc.html
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

Le World Wide Web Consortium (W3C) (anglais)


http://www.w3.org/

Sites d’apprentissage et de référence (français)


http://www.lehtml.com/html/