Escolar Documentos
Profissional Documentos
Cultura Documentos
Sommaire
Introduction ...................................................................................................... 2
3. Le texte ....................................................................................................... 4
4. Niveaux de titre.......................................................................................... 4
9. Les formulaires........................................................................................... 9
Annexe ............................................................................................................. 17
O32 1
Economie et Gestion Cours HTML
Introduction
Le langage HTML est le langage universel utilisé pour communiquer sur le web. C’est un
ensemble de balises et d’attributs qu’on utilise pour passer des indications aux logiciels clients qui
recevront le document écrit au format texte.
Navigateur : Un logiciel permettant d’interpréter les commandes HTML et de surfer sur le web
en affichant sur le moniteur les pages qu’il a interceptées.
Exemple : Internet explorer, Netscape, Mozilla Firefox,…
Balise : Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le
caractère supérieur (>). Par exemple « <H1> ».
Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La
première est appelée « balise d'ouverture » et la seconde « balise de fermeture ». La balise
fermante est précédé du caractère /) :
<marqueur> Votre texte formaté </marqueur>
A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles
encadrent :
<b> Ce texte est en gras </b>
Attribut : Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir
des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire
clé=valeur, mais certains attributs ne sont parfois définis que par la clé.
Voici un exemple d'attributs pour la balise <p> (balise définissant un paragraphe), permettant de
spécifier que le texte doit être aligné sur la droite :
<p align="right">Exemple de paragraphe</p>
Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou
plusieurs valeurs.
La balise <HTML> : Indique que ce qui suit est écrit en HTML toutes les balises de la
page Web doivent être écrites entre la balise <html> et </html>.
L’entête :
Commence avec la balise <head> indique la présence du prologue, d’un titre compris
entre le marqueur de début et de la fin.
Le titre est déclaré entre les deux balises <title> et </title> ce titre sera affiché dans la
barre de titre du navigateur utilisé.
O32 2
Economie et Gestion Cours HTML
Le corps :
Le corps de la page web doit être situé entre les deux balises <body> et </body>.
Remarque : Dans le texte que vous tapez, les espaces et les retours à la ligne ne sont pas interprétés
2. Le formatage du texte :
L'information que l'on veut faire passer doit toujours être ordonnée, hiérarchisée... de façon à
attirer l'attention du lecteur. Nous allons voir comment il est possible de présenter l'information
dans son ensemble :
O32 3
Economie et Gestion Cours HTML
On utilise le code suivant: <HR WIDTH=75%>. Cela donne une ligne de 75% de la
largeur de l'écran (selon la largeur de la fenêtre du navigateur utilisée par l'usager).
Pour faire varier l'épaisseur de la ligne :
<HR SIZE="5"> donne une ligne d'une épaisseur de 5 pixels
3. Le texte
Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par
quelques balises élémentaires.
<B>...</B> Début et fin de
Gras [Bold]
<STRONG>...</STRONG> zone en gras
<I>...</I> Début et fin de
Italique [Italic]
<EM>...</EM> zone en italique
Début et fin de
Souligné [underline] <U>…</U>
zone soulignée
<FONT SIZE=?>... Début et fin de
Taille de caractère [Font size]
</FONT> zone avec cette taille
<FONT COLOR="#$$$$$$"> Début et fin de
Couleur de caractère [Font color]
</FONT> zone en couleur
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments] <!-- *** --> Ne pas afficher
Centrage [Center] <CENTER></CENTER> Centrer
Exemple :
Soit le code suivant :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
Qui donnera l'affichage suivant :
Texte simple
texte en gras
texte en gras
texte en italique
texte en italique
texte en gras et en italique
texte en bleu
4. Niveaux de titre
O32 4
Economie et Gestion Cours HTML
Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration
hiérarchique des paragraphes dans un texte :
Balise Effet Visuel
<H1>Test</H1>
Test
<H2> Test</H2> Test
<H3> Test</H3> Test
<H4> Test</H4> Test
<H5> Test</H5> Test
<H6> Test</H6> Test
5. Les images :
Afin d'illustrer le contenu de vos pages Web, il vous est possible d'y insérer des images. Les
formats d'images reconnus par les navigateurs HTML sont :
Les images JPEG (.JPG) : les images ayant un grand nombre de couleurs seront bien
compressées, c'est-à-dire qu'elles prendront moins de place, donc nécessiteront un temps
de chargement moindre)
Les images PNG : Leur taille est faible dans le cas d'images avec peu de couleurs avec des
tons uniformes, ce format permet en outre d'avoir des images entrelacées (qui s'affichent
progressivement) avec une profondeur de couleurs de 24 bits et des images dont on définit
une couleur comme transparente.
Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n'est que le
format GIF est limité à 256 couleurs maximum.
<IMG> : est la balise permettant d’insérer une image dans un document HTML, Ces principaux
attributs sont les suivants :
SRC: Indique l'emplacement de l'image (il est obligatoire)
ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les
valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)
ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
TITLE: Permet d'afficher une info bulle lors du survol de l'image par le curseur.
WIDTH: Permet de spécifier la largeur de l'image.
HEIGHT: Permet de spécifier la hauteur de l'image.
Ainsi pour insérer une image, il faudra saisir une balise du type suivant :
<IMG SRC="url_de_l_image/image.jpg">
O32 5
Economie et Gestion Cours HTML
7. Les tableaux
En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des
éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc TRES fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de
base sont donc
<table></table> : Cette commande est la commande principale pour ouvrir une zone de
tableau. <table> </table> encadrent les limites d'un tableau.
<th></th> : De l'anglais table header, permet d'ajouter une rangée en en-tête. C'est le titre de la
colonne. Les paramètres par défaut sont l'usage du caractères gras et la position centrée.
<tr></tr> :De l'anglais table row, marque le début d'une nouvelle ligne. <tr> </tr> permet de
définir une rangée.
<td></td> : De l'anglais table data, est placé devant les informations qui composent les cellules.
Les paramètres par défaut sont l'alignement à gauche et l'alignement vertical au centre.
Exemple :
O32 6
Economie et Gestion Cours HTML
Listes ordonnées:
Ce type de listes est parfois appelé liste numérotée. Les termes insérés dans cette liste
seront numérotés. Lorsqu'un navigateur interprète une liste ordonnée, il numérote (et
souvent indente) chaque terme séquentiellement. Ce n'est pas à vous d'ajouter une
numérotation et si vous ajoutez ou supprimez des termes, la numérotation de l'ensemble
restera correcte.
<ol></ol>
De l'anglais, Ordered-List, ces marqueurs encadrent les termes à numéroter.
Cette commande est terminée par </ol>.
<li>
De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le
premier terme à définir.
Exemple :
Soit le code suivant :
<ol>
<lh>Formation au HTML</lh>
<li>Introduction
<li>A la découverte du HTML
<li>La page HTML
<li>Le formatage du texte
<li>Les listes & définitions
<li>Les liens HyperTexte
<li>...
</ol>
Qui donnera l'affichage suivant :
Formation au HTML
1. Introduction
O32 7
Economie et Gestion Cours HTML
2. A la découverte du HTML
3. La page HTML
4. Le formatage du texte
5. Les listes & définitions
6. Les liens HyperTexte
7. ...
Listes non ordonnées:
<ul></ul> : De l'anglais, unumbered-List, ces marqueurs encadrent les termes à
présenter.
Cette commande est terminée par </ul>.
<li> : De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le
premier terme à définir.
Les attibuts
Il est possible de changer la forme des différentes puces grâce à l'attribut type, qui
peut recevoir la commande disc (rond noir), circle (carré blanc) ou square (carré
noir). Dans l'exemple suivant, vous pourrez constatr les effets de cet attributs.
Exemple :
Soit le code suivant :
<ul type=disc>
<lh>Formation au HTML</lh>
<li>Introduction
<li>A la découverte du HTML
<li>La page HTML
<li>Le formatage du texte
<li>Les listes & définitions
<li>Les liens HyperTexte
<li>...
</ul>
Qui donnera l'affichage suivant :
Formation au HTML
o Introduction
o A la découverte du HTML
o La page HTML
o Le formatage du texte
o Les listes & définitions
o Les liens HyperTexte
o ...
les définitions :
<dl></dl> : De l'anglais, Definition-List, indique que ce qui suit est une liste de définitions.
Cette commande est terminée par </dl>.
<dt> : De l'anglais, Definition-Term, est placé pour indiquer le premier terme à définir.
<dd> : De l'anglais, Definition-Data, est placé au début du texte qui compose la définition.
Exemple :
Soit le code suivant :
O32 8
Economie et Gestion Cours HTML
<dl>
<lh>Formation au HTML</lh>
<dt>Les tableaux
<dd>Les commandes de base
<dd>Les attributs
<dt>Les listes & définitions
<dd>Les listes non ordonnées
<dd>les listes ordonnées
<dd>les définitions
</dl>
Qui donnera l'affichage suivant :
Formation au HTML
Les tableaux
Les commandes de base
Les attributs
Les listes & définitions
Les listes non ordonnées
Les listes ordonnées
Les définitions
9. Les formulaires
Jusqu'à présent nous avons vu les différents moyens de diffuser de l'information et de la présenter.
Mais sur le Web, l'information ne circule pas qu'en sens unique. Il est possible de faire circuler
l'information dans les deux sens et de récolter diverses données et requêtes, en offrant la
possibilité à l'utilisateur de renseigner des formulaires de saisie.
Les applications sont très variées : sondage, réserver une chambre ou un billet de train, louer une
voiture, faire une recherche à partir d'une base de données, etc...
Tous les éléments d'un formulaire HTML doivent obligatoirement être encadrés par les marqueurs
<form> et </form>
Exemple :
<form>
<input ... >
<input ... >
<input ... >
...
</form>
Les zones de saisie
Grâce à la commande <input>, il est possible de créer des formulaires. Deux attributs sont
toujours associés à ce marqueur :
1. name : qui sert d'étiquette aux informations qui vont être saisies ou sélectionnées (par
exemple, une zone de saisie pourra être reliée à un champ d'une base de données). C'est le
nom du champ.
2. type : permet de définir la nature du champ de saisie. Il est suivi d'une valeur et d'un certain
nombre d'options pour donner une forme de saisie ou de sélection.
O32 9
Economie et Gestion Cours HTML
type=text
Cette valeur permet de recevoir du texte. Il est possible de définir le nombre de caractères grâce à
l'attribut size :
Le code suivant :
<form>
Nom : <input type="text" name="nom" size=30>
Prénom : <input type="text" name="prenom" size=15>
</form>
donnera à l'écran :
Nom : Prénom :
type=password
Similaire à la valeur précédente, excepté que les données saisies n'apparaissent pas "en clair" à
l'écran. Il est possible de définir le nombre de caractères grâce à l'attribut size :
Le code suivant :
<form>
Votre mot de passe : <input type="password" name="mot_de_passe" size=10>
</form>
donnera à l'écran
<form>
O32 10
Economie et Gestion Cours HTML
type=range
range permet à l'utilisateur d'entrer un nombre dont les limites sont fixées par 2 variables : min et
max.
Le code suivant :
<form>
Donnez maintenant une note entre 0 et 20 :
<input type="range" name="note" min=0 max=20 size=2>
</form>
Donnera à l'écran :
type=submit
Submit est un des deux boutons se trouvant au bas de tout formulaire de saisie. Il permet
d'envoyer les informations saisies vers le serveur (donc de valider la saisie). L'attribut value permet
de spécifier les mots figurant sur le bouton :
Le code suivant :
<form>
<input type="submit" value="Valider la saisie">
</form>
Donnera à l'écran :
Valider la saisie
type=reset
Idem au bouton précédent mais réinitialise tous les champs de saisie (annule la saisie) :
Le code suivant :
<form>
<input type="reset" value="Effacer et recommencer">
</form>
Donnera à l'écran
Effacer et recommencer
O32 11
Economie et Gestion Cours HTML
Pour créer une zone de saisie comportant plusieurs lignes, on utilise les marqueurs
<textarea></textarea>.
Deux attributs permettent de définir la taille de la zone de saisie en nombre de lignes rows et en
nombre de colonnes cols.
Le code suivant :
<form>
Vos commentaires :
<textarea name="comments" rows=10 cols=20>
</textarea>
</form>
Donnera à l'écran
Vos commentaires :
Les menus déroulants
<select> </select> permettent de créer des menus déroulants comportant deux ou plusieurs
options.
Le code suivant :
<form>
<p>Sélectionnez un jour de la semaine :
<select name="jour_semaine">
<option>Lundi
<option>Mardi
<option>Mercredi
<option>Jeudi
<option>Vendredi
<option>Samedi
<option>Dimanche
</select>
</form>
Donnera à l'écran :
Lundi
Sélectionnez un jour de la semaine :
On peut aussi spécifier la taille de la fenêtre de sélection en ajoutant la variable size. Dans le cas
où size=6, la fenêtre de sélection fera apparaître les six premières options du menu.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Sélectionnez un jour de la semaine : Samedi
Lorsque l'on désire réaliser un menu à choix multiple, il suffit d'ajouter l'attribut multiple.
O32 12
Economie et Gestion Cours HTML
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Sélectionnez un ou des jours de la semaine : Dimanche
En rajoutant, l'option selected au marqueur <option>, l'information qui suit sera sélectionnée
par défaut.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Sélectionnez un jour de la semaine : Dimanche
O32 13
Economie et Gestion Cours HTML
Exemple n°2
<FRAMESET ROWS="20%,80%">
<FRAME SRC=" page1.htm" NAME="haut">
<FRAME SRC=" page2.htm" NAME="bas">
</FRAMESET>
Exemple n°3
<FRAMESET COLS="20%,80%">
<FRAME SRC="page1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="page2.htm" NAME="droit_haut">
<FRAME SRC="page3.htm" NAME="droit_bas">
</FRAMESET>
O32 14
Economie et Gestion Cours HTML
Remarque : On peut toujours utiliser la notion de l’hypertexte pour pouvoir adresser un mail
électronique :
<a href="mailto:adresse_mail "> lien </a> ou
<a href="mailto:adresse_mail?subject=objet_du_message">lien </a>
O32 15
Economie et Gestion Cours HTML
Pour placer des sons dans un document HTML, vous devez d'abord choisir et travailler
(éventuellement) vos sons dans votre logiciel de traîtement sonore et sauvegarder les fichiers
produits dans un format compatible (WAV, AIFF, AU).
La commande pour insérer un son est du même type que les pointeurs déjà vus. On peut ainsi
mettre un son "derrière" un lien ou une image. Voici les deux commandes :
Pour assigner un son à un lien :
<a href="bebe.wav">Ecoutez le bébé (Attention : 48Ko)</a>
Donne : Ecoutez le bébé (Attention : 48Ko)
Pour une image "sonore" :
<a href="bebe.wav"> <img src="eric_bebe.jpg></a>
Les séquences vidéo
L'intégration de séquences vidéo est possible en HTML par le biais d'animations en format
Quicktime, MPEG ou AVI.
Dans l'exemple qui suit, le code utilisé est:
<a href="st_voyager.avi">Cliquez ici pour voir Star Trek Voyager (Attention : 358 Ko) </a>
Donne à l'écran : Cliquez ici pour voir Star Trek Voyager (Attention : 358Ko)
L'utilisateur doit cliquer sur la phrase contrastée "Cliquez ici pour voir Star Trek Voyager" pour
déclencher le téléchargement du fichier sur le disque dur de l'utilisateur.
On peut également choisir de mettre une image comme déclencheur de la commande en
inscrivant une image source comme référence au lieu de texte comme ceci :
<a href="st_voyager.avi"> <img src="voyager.gif"></a>
.
O32 16
Economie et Gestion Cours HTML
Annexe
O32 17