Cour4 HTML

Introduction au html
Multimédia des affaires

Techniques informatiques appliquées
Travail de recherche
Remis à Dave Lacourse
Produit par Jonathan Charland
1/11
Introduction au html
(Définition et historique)
[www.google.com - images - recherche : html] http://www.formation-

bruxelles.be/images/HTML.jpg
Le terme HTML est anglais et signifie «HyperText Mark-Up Language».

C’est un langage informatique constitué de balises servant à créer des
pages Web qui seront par la suite traduis par le navigateur de l’internaute.
Les hyperliens insérés dans du texte sont dû à du codage HTML, on parle
alors d’hypertexte, d’où le nom du langage.
Le HTML est reconnu mondialement par un consortium international qui se

nomme le World Wide Web Consortium (W3C). Ce langage est un
standard. C’est en 1991 que Tim Berners-Lee annonce officiellement la
création du web sur Usenet, mais il faut attendre jusqu’à 1993 avant que
l’on considère l’état du HTML assez avancé pour dire qu’il s’agit d’un
langage. Nous baptisons alors à cette époque le langage HTML; HTML1.0.
[http://www.commentcamarche.net/html/htmlintro.php3]
2/11
Outils nécessaires
Pour bien apprendre la base du langage HTML, je conseil d’utiliser un
simple éditeur de texte (exemple : Bloc-notes, Microsoft Word, etc.) pour
débuter. Vous aurez aussi besoin d’un navigateur web (exemple : Internet
Explorer, Firefox, Netscape, Opera, etc.)
Par contre, si vous voulez vous faciliter la tâche et que vous ne tenez pas
à apprendre le langage, voici quelques éditeurs html que vous pouvez
vous procurer :
1st Page 2000 est un éditeur HTML professionnel qui permet

de créer des sites web rapidement. Il contient plus de 450
JavaScripts et supportent les derniers langages web. C’est une
édition gratuite. [http://www.evrsoft.com/]
L’éditeur HTML gratuit de CoffeeCup est un éditeur HTML de «drag and

drop» avec un programme intégré pour envoyer les pages directement sur
FTP. [http://www.coffeecup.com/free-editor/]
DreamWeaver CS3 est probablement le meilleur et le plus

complet des éditeurs, cependant il est payant. Il comprend
d’ailleurs des outils CSS et des composants Ajax pour des
interfaces dynamiques. [http://www.adobe.com/products/dreamweaver/]
3/11
Le langage html
(Avant de commencer)
[www.google.com - images – recherche : html] http://www.learnthenet.com/french/gifs/html.gif
Pour ceux qui optent pour un éditeur de texte, les informations qui vont
suivre pourront être bien pratique pour comprendre et débuter dans le
langage HTML. Tout d’abord il est important de savoir que le HTML est
composé de balises. Pour chaque commande, il y a en général une
marque (balise) de début et une marque de fin, mais parfois cette dernière
s’avère facultative. Les caractères utilisés pour les balises sont < > pour
ouvrir la commande et </ > pour la fermer. Que la commande entre les < >
soit écrite en majuscules ou en minuscules, cela n’affecte en rien le
résultat. Lorsque vous enregistrez vos fichiers, il faut utiliser les
extensions qui sont soi .HTM (qui était surtout utilisé à l’époque où les
systèmes d’exploitations ne supportaient pas les extensions à quatre
caractères) ou encore .HTML. Maintenant je vais démontrer plus
concrètement à quoi doit ressembler le langage HTML.
4/11
Le langage html
(Les balises de base)
• Pour commencer un document html, nous utilisons la balise :

<HTML>
• La prochaine balise servira à contenir les informations destinées au
navigateur :
<HEAD>
• Afin de donner un titre à notre page, il faut utiliser la balise suivante :
<TITLE>
• Nous devons fermer la commande après avoir inséré le titre avec cette
balise :
</TITLE>
• Comme il s’agit des balises de base et que le titre ce situe dans
le <HEAD> de la page nous allons donc le refermer avec celle-ci :
</HEAD>
• Le contenu du document en tant que tel se commencera avec la
suivante :
<BODY>
• Et nous venons la refermer comme nous n’ajouterons rien pour
l’instant :
</BODY>
• Ensuite nous fermons le document html :
</HTML>
[http://www.ccim.be/ccim328/html]
5/11
Le langage html
(les balises de base - Exemple)
Maintenant, mettons ces connaissances en application et regardons le

résultat, commençons par écrire une page dans notre éditeur de texte :
Vous enregistrez ensuite ce document sous le nom par exemple de

premiere_page.html et vous verrez
alors apparaître cette page lorsque
vous exécuterez le fichier html : →

Évidement, la page est blanche
comme nous n’avons pas inséré de
contenu, cependant vous pouvez
apercevoir le titre que nous lui avons
donné.
6/11
Le langage html
(les balises de texte)
Le texte se retrouve dans la partie <BODY> d’un document HTML. Que ce

soit pour la police, la taille de la police, différents attributs comme le
caractère gras que nous voulons appliquer aux textes de notre page web,
il faut connaître d’autres balises, en voici donc dans ce tableau :
Gras avant le texte après

Italique 
Souligné 
Centrer le texte <CENTER> </CENTER>
Choisir la grandeur du texte 
N étant la grandeur qu’on choisi.
Choisir la police du texte 
Arial est un exemple.
Choisir la couleur du texte 
Red, supposons que nous voulons du
rouge, mais les choix sont nombreux.
Nouvelle ligne 
Nouveau Paragraphe 
7/11
Le langage html
(Les balises de texte - exemple)
Voici un exemple d’une page qui contient les balises de texte que je viens
de présenter dans le tableau :
Maintenant voilà le résultat dans le navigateur :
8/11
Le langage html
(Autres balises à savoir)
Nous allons élargir quelque peu nos possibilités en apprenant quelques

autres balises bien simples. Après avoir appris ces dernières informations
sur le langage HTML vous serez en mesure de faire des pages plus
colorées et plus vivantes. Je laisses tomber les captures d’écran et je vous
laisse donc l’honneur de tester ces lignes de commandes vous-mêmes.
Il est d’abord important de connaître les balises pour insérer un lien dans
une page web :
<A HREF=’’Adresse du lien’’>Le texte qui apparaît en tant que lien</A>
Si il s’agit d’un lien qui sert à envoyer un e-mail, on ajoute ceci :
<A HREF=’’mailto :M.Exemple@email.com’’>Envoyer un email à

M.Exemple</A>
Pour insérer une image, il faut indiquer ou elle ce situe :

<IMG SRC="images/image.gif">
Et maintenant voilà ce qu’il faut insérer dans le <BODY> de la page afin de

changer les couleurs des liens et du fond de page :
1. Pour mettre une couleur en arrière plan :
<BODY BGCOLOR=’’couleur’’>
9/11
2. Couleur des liens hypertextes :
<BODY LINK=’’couleur’’>
3. Couleur des liens actifs :
<BODY ALINK=’’couleur’’>
4. Couleur des liens déjà visités :
<BODY VLINK=’’couleur’’>
5. Couleur du texte par défaut :
<BODY TEXT=’’couleur’’>
Si nous voulons attribuer des couleurs à toutes les liens, actifs ou déjà
visités, à l’arrière plan ainsi qu’au texte, nous les insérons tous dans le
BODY comme suit :
<BODY LINK=’’couleur’’ ALINK=’’couleur’’ VLINK=’’couleur’’

BGCOLOR=’’couleur’’ TEXT=’’couleur’’>
Les couleurs sont définies selon la notation #RRVVBB, où RR, VV et BB

représentent respectivement un nombre hexadécimal entre 00 et FF pour
le Rouge, le Vert et le Bleu.
10/11
CONCLUSION
Finalement, j’espères que vous en avez appris un peu dans ce document.

Ce fût un très bref introduction au HTML, mais sachez que les possibilités
sont beaucoup plus larges. Vous pouvez en apprendre plus en allant
visiter les liens suivants :
http://fr.wikipedia.org/wiki/HTML
http://nephi.unice.fr/CoursHTML/
http://www.commentcamarche.net/html/htmlintro.php3
http://www.ccim.be/ccim328/html/
11/11

Cour4 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cour4 HTML

Uploaded by

Copyright:

Available Formats

Introduction au html

Multimédia des affaires

[www.google.com - images - recherche : html] http://www.formation-

Le terme HTML est anglais et signifie «HyperText Mark-Up Language».

Le HTML est reconnu mondialement par un consortium international qui se

1st Page 2000 est un éditeur HTML professionnel qui permet

L’éditeur HTML gratuit de CoffeeCup est un éditeur HTML de «drag and

DreamWeaver CS3 est probablement le meilleur et le plus

[www.google.com - images – recherche : html] http://www.learnthenet.com/french/gifs/html.gif

• Pour commencer un document html, nous utilisons la balise :

Maintenant, mettons ces connaissances en application et regardons le

Vous enregistrez ensuite ce document sous le nom par exemple de

vous exécuterez le fichier html : →

Le texte se retrouve dans la partie <BODY> d’un document HTML. Que ce

Gras <B> avant le texte </B> après

Nouveau Paragraphe <P>

Maintenant voilà le résultat dans le navigateur :

Nous allons élargir quelque peu nos possibilités en apprenant quelques

<A HREF=’’Adresse du lien’’>Le texte qui apparaît en tant que lien</A>

Si il s’agit d’un lien qui sert à envoyer un e-mail, on ajoute ceci :

<A HREF=’’mailto :M.Exemple@email.com’’>Envoyer un email à

Pour insérer une image, il faut indiquer ou elle ce situe :

Et maintenant voilà ce qu’il faut insérer dans le <BODY> de la page afin de

1. Pour mettre une couleur en arrière plan :

3. Couleur des liens actifs :

4. Couleur des liens déjà visités :

5. Couleur du texte par défaut :

<BODY LINK=’’couleur’’ ALINK=’’couleur’’ VLINK=’’couleur’’

Les couleurs sont définies selon la notation #RRVVBB, où RR, VV et BB

Finalement, j’espères que vous en avez appris un peu dans ce document.

You might also like