Chapitre1 HTML

Développement d’Applications Web Chapitre 01 : HTML
Chapitre 01
Le Langage HTML (Hyper Texte Markup Language)
1. Définition
HTML est un langage utilisé pour créer ou ajouter un contenu à une page web et lui fournir
une signification et un but. Par exemple, le contenu de la page pourra être un ensemble de
paragraphes ou une liste de points. Il est aussi possible d'avoir des images, des tableaux de
données, …
2. Les Balises
La description d'un document HTML passe par l'utilisation de Balises (ou « Tags » en anglais).
Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la balise. Par
exemple la balise de retour à la ligne est <BR>, La plupart du temps, on utilise une balise de
début et une balise de fin, pour définir un intervalle d’application.
Exemple :
<B>écriture en gras</B> : Sera traduit par : écriture en gras
3. Squelette d’un fichier HTML

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
- <HTML> … </HTML> : c’est le premier marqueur ou balise que l’on trouve dans un
document HTML. Tout le document qui sera écrit par la suite (texte ou balise) sera
compris entre <HTML> et </HTML>.
- <HEAD> … </HEAD> : l’en-tête du document est réservé aux méta-informations (les
informations relatives au document) comme son titre. Ces méta-informations
doivent être placées entre les balises <HEAD> de début et </HEAD> de fin. Même si
l'en-tête est optionnel, il est important de l'inclure dans un document pour éviter que
le logiciel serveur n'ait à balayer tout le document pour y retrouver l'information
recherchée.
- <BODY> … </BODY> : le corps du document, ce qui sera effectivement affiché par le
navigateur Web, est balisé par les marqueurs <BODY> et </BODY>.
- <TITLE> … </TITLE> : Chaque document HTML, pour être correct, doit disposer d'un
titre, on trouvera le marqueur du titre dans l’en-tête et il apparaît dans la barre de
1 2ème Année Licence Académique H. Mansouri

titre du navigateur Web. Son but est de pouvoir identifier le document dans un
ensemble.
Ces commandes ne doivent pas nécessairement être séparées par des retours de ligne et
peuvent être placées n'importe comment. Seule la lisibilité du code source nous fait pencher
pour cette présentation.
Exemple 1 :
<HTML>
<HEAD>
<TITLE>Exemple 1</TITLE>
</HEAD>
<BODY>
Je suis actuellement étudiant en deuxième année licence informatique.
</BODY>
</HTML>
4. Les attributs
Les balises structurent le document HTML et indiquent au navigateur comment présenter le
site Web. Certaines balises peuvent recevoir plus d'information. Cette information
supplémentaire est appelée un attribut.
Exemple 2 :
<HTML>
<HEAD>
</HEAD>
<BODY Bgcolor="#FF0000">
Page avec fond rouge
</BODY>
</HTML>

Les attributs s'inscrivent toujours au sein de la balise ouvrante, et ils sont suivis par un signe
égal et la valeur de l'attribut entre des guillemets. Ici le point-virgule sert à séparer plusieurs
instructions de style.
5. Le texte
Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par
quelques balises élémentaires :
- <B>Gras</B> (ou <STRONG> … </STRONG>)
- <I>Italic</I> (ou <EM> ... </EM>)
- <U>Souligner</U>
- <SUB>Indice</SUB>
- <SUP>Exposant</SUP>
- <CENTER>Centrer</CENTER>
- <BR>Aller à la ligne
- <DIV>Sélectionner une partie de texte</DIV>
- 
Exemple 3 :
<HTML>
<HEAD>
</HEAD>
<BODY>
Exemple de <B>Gras</B> <BR>
Exemple de <I>Italic</I> <BR>
Exemple de <U>Souligner</U> <BR>
Exemple de <SUB>Indice</SUB> <BR>
Exemple de <SUP>Exposant</SUP> <BR>
Exemple de <CENTER>Centrer</CENTER> <BR>
Exemple de <DIV Align=left>Aligner à gauche</DIV> <BR>
Exemple de 
</BODY>
</HTML>

- Taille de police
La commande est :
- <FONT Size = n> … </FONT>
Il existe 7 tailles de polices (n prend les valeurs de 1 à 7).
1, petits caractères. 7, gros caractères. 3, la taille par défaut.
La taille de la police peut être fixée dans l'en-tête du document par la commande :
Exemple 4 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT Size = 7>B<FONT Size = 6>O<FONT Size= 5>N<FONT Size = 4>J
<FONT Size = 3>O<FONT Size = 2>U<FONT Size = 1>R</FONT></BODY>
</HTML>
- Niveaux de titre
La commande est :
- <Hn> … </H>
Le langage HTML reconnaît six niveaux de titre numérotés de 1 à 6 (n prend les valeurs de 1
à 6). Le niveau le plus élevé est le 1, le plus petit est le 6.
Exemple 5 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Titre Niveau 1</H1>
</BODY>
</HTML>
Contrairement à tous les autres systèmes de traitement de texte, le retour de ligne n'a
aucune valeur en HTML. C'est le navigateur Web lui même qui définira le passage à la ligne
en fonction de facteurs comme la taille des polices de caractères, la largeur de la fenêtre de
visualisation etc.
De même, plusieurs espaces dans un document HTML seront ramenés à un seul.
- Paragraphe
La commande est :
- <P> … </P>
La balise <P> (début d’un paragraphe) et </P> (fin de paragraphe) détermine un paragraphe
et insère une ligne vide après le paragraphe.

Exemple 6 :
<HTML>
<HEAD>
</HEAD>
<BODY>
Exemple de texte<BR>Avec un autre exemple de texte
<P>Et un exemple de paragraphe</P>Fin de l'exemple.
</BODY>
</HTML>
6. Les liens
Par l'utilisation de la balise :
- <A> … </A> avec l’attribut Href on peut relier :
- Une page web locale
Si on a deux pages (appelons-les page1.htm et page2.htm) enregistrées dans le même
dossier, on peut faire un lien d'une page à l'autre simplement en inscrivant le nom du fichier
dans le lien.
Exemple 7 :
Page 1 :
<HTML>
<HEAD>
<TITLE>Exemple 7 – Page 1</TITLE>
</HEAD>
<BODY>
<H2>Page 1</H2>
<A Href="Page2.html">Cliquez ici pour aller à la page 2</A>
</BODY>
</HTML>
Page 2 :
<HTML>
<HEAD>

<TITLE>Exemple 7 – Page 2</TITLE>

</HEAD>
<BODY>
<H2>Page 2</H2>
<A Href="Page1.html">Cliquez ici pour aller à la page 1</A>
</BODY>
</HTML>
Si la page 2 se trouvait dans un sous-dossier appelé "DAW", le lien serait alors :

- <A Href="DAW/page2.htm">Cliquez ici pour aller à la page 2</A>
En sens inverse, un lien de la page 2 (dans le sous-dossier) à la page 1 serait le suivant :
- <A Href="../page1.htm">Un lien vers la page 1</A>
En suivant le même raisonnement, vous pouvez aussi pointer sur une position deux dossiers
(ou plus) en amont avec « ../../ ».
- Un fichier pdf, word, …
Par la même logique, on peut faire un lien vers un fichier pdf, word, mp3, … :
- <A Href="Emploi du temps.pdf">Télécharger l’emploi du temps</A>
« Emploi du temps.pdf » désigne le document vers lequel on pointe et, Télécharger l’emploi
du temps: représente le texte qui sera affiché pour représenter le lien hypertexte.
- Une adresse email
On peut également faire un lien vers une adresse e-mail :
- <A Href="mailto:mansouri_houssem@univ-setif.dz">Envoyez moi un message</A>

Au clic du lien, le programme de messagerie par défaut se lance avec un message vide pour
l'adresse e-mail indiquée. Veuillez noter que cela fonctionnera seulement si un programme
de messagerie est installé sur l’ordinateur.
- Un site externe
Cela se fait presque de la même façon :
- <A Href="http://www.fsciences.univ-setif.dz/" Title="Visiter le site de la faculté
">Faculté de Sciences</A>
L'attribut « Title » sert à fournir une brève description du lien. Si vous positionnez le curseur
sur le lien sans le cliquer, vous verrez apparaître le message "Visitez le site de la faculté pour
plus d’informations".
- Un endroit précis dans la même page (ancre interne)
On peut également créer des liens internes à une page, par exemple, une table des matières
en haut de la page avec des liens vers chaque chapitre en-dessous. Nous avons seulement
besoin d'un attribut très utile, appelé id (pour identification), et du symbole « # ».
Utilisez l'attribut id pour marquer l'élément que vous voulez relier. Par exemple :
- <H1 Id="marquer">Titre 1</H1>
On crée ensuite un lien vers cet élément en utilisant le symbole « # » dans l'attribut de
liaison. Ce caractère doit être suivi de l'id de la balise à relier. Par exemple :
- <A Href="#marquer">Lien vers l’élément marquer</A>
Exemple 8 :
<HTML>
<HEAD>
</HEAD>
<BODY>
Aller directement à la partie :<BR/>
<A Href="#T1">Le Titre 1</A><BR/>
<H2 Id="T1">Le Titre 1</H2>
<P>... beaucoup de texte ...</P>
</BODY>
</HTML>
NB. S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte.
Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de
texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres
de défilement sur le côté.

- Un endroit précis dans une autre page (ancre externe)

Il est également possible d'utiliser les ancres dans les liens externes. Il faut alors spécifier
l'ancre vers laquelle pointe le lien en ajoutant #nom à la fin de l'URL.
Dans la Page1.htm:
- <A Href="Page2.htm#Tit3">Aller au titre 3 de la page 2</A>
Et dans la Page2.htm à l’endroit où l’on veut pointer :
- <H2 Id="Tit3">Le titre 3</H2>
7. Les Listes
HTML définit 2 types principaux de listes :
- Listes numérotées
On peut créer une liste numérotée ou ordonnée avec les commandes suivantes :
<OL> <LI>article 1</LI> <LI>article 2</LI> </OL>
Exemple 9 :
<HTML>
<HEAD>
</HEAD>
<BODY>

<H2>Liste des Spécialités</H2>

<OL Type=1>
<LI>Informatique</LI>
<LI>Mathématique</LI>
<LI>Physique</LI>
<LI>Chimie</LI>
</OL>
</BODY>
</HTML>
Les valeurs de type suivantes sont possibles :

1 : pour une liste numérotée 1,2,3... (c’est la valeur par défaut).
A : pour un repérage type A,B,C...
a : pour un repérage type a,b,c...
I : pour une liste numérotée I,II,III,IV...
i : pour une liste numérotée i,ii,iii,iv...
L’attribut Start=n fait débuter le repérage (chiffres ou lettres) au rang numéro n.
- Les listes à puces
On peut créer une liste à puces ou non ordonnée avec les commandes suivantes :
<UL> <LI>article 1</LI> <LI>article 2</LI> </OL>
Exemple 10 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>Liste des Spécialités<H2/>
<UL>
<LI>Mathématique</LI>
<LI>Physique</LI>
<LI>Chimie</LI>

</UL>
</BODY>
</HTML>
- Combiner les deux types

Comme on peut emboiter une liste numéroté dans une liste à puce et inversement.
Exemple 11 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>Liste des Spécialités</H2>
<OL Type=1>
<UL>
<LI>Licence</LI>
<LI>Master</LI>
</UL>
<LI> Mathématique</LI>
<UL>
<LI>Licence</LI>
<LI>Master</LI>
</UL>
<LI>Physique</LI>
<UL>
<LI>Licence</LI>
<LI>Master</LI>
</UL>
<LI>Chimie</LI>
<UL>
<LI>Licence</LI>
<LI>Master</LI>
</UL>
</OL>
</BODY>
</HTML>
8. Les images
La balise IMG du langage HTML permet d'insérer des images dans une page HTML. L'image
peut être située sur le même emplacement que la page dans laquelle elle est insérée mais
également dans un autre emplacement en spécifiant son URL complète. Remarquez que
IMG est ouvert et fermé avec la même balise. Comme la balise <BR/>
- <IMG Src="Nom_Image.jpg"/>
Exemple 12 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>Faculté de Sciences</H2>
<IMG Src="Fac_Sci.jpg"/>
</BODY>
<HTML>

On peut insérer des images situées dans d'autres dossiers :

- <IMG Src="images/Fac_Sci.jpg"/>
Ou même situées sur d'autres sites Web :
- <IMG Src="http:// http://www.univ-setif.dz/logo.png">
L’image peut être un lien :
- <A Href="http://fsciences.univ-setif.dz/"><IMG Src="Fac_Sci.jpg"/></A>
L'attribut « Alt » sert à fournir une description de remplacement de l'image si, pour une
raison ou pour une autre, l'image n'était pas affichée à l'utilisateur. C'est particulièrement
important pour les utilisateurs aveugles, ou si la page se charge très lentement. Donc,
toujours utiliser l'attribut Alt :
- <IMG Src="Fac_Sci.jpg" Alt="La faculté des sciences, UFAS-1"/>
L'attribut « Title » peut servir pour décrire brièvement l'image :
- <IMG Src="Fac_Sci.jpg" Title="C’est la façade le la faculté des sciences, UFAS-1"/>
Si vous placez le curseur sur l'image sans cliquer, vous verrez apparaître le texte « C’est la
façade le la faculté des sciences, UFAS-1 » comme message contextuel.
On peut utiliser les attributs « Width » et « Height » pour fixer la largeur et la hauteur d'une
image. Les valeurs utilisées pour fixer ces dimensions sont en pixels.
- <IMG Src="Fac_Sci.jpg" Width="130" Height="120"/>
9. Les tableaux
Pour créer un tableau avec HTML il faut combiner les commandes suivantes:
- <TABLE> ... </TABLE> : pour créer un tableau. Avec les attributs suivants :
Border : trace un cadre en trait fin.
Border=n : trace un cadre en trait de n pixels d'épaisseur.
Cellspacing=n : espacement de n pixels entre les cellules.
Cellpadding=n : espacement autour de l'écriture dans les cellules.
Width=n/n% : largeur en pixels ou largeur relative du tableau.
- <CAPTION>titre tableau</CAPTION> pour indiquer le titre du tableau. Avec l’attribut:
Align=top/bottom : placer le titre du tableau au-dessus/au-dessous du tableau.
- <TR> ... </TR> : encadre une ligne du tableau. Avec les attributs suivants :
Align=left/right/center : position horizontale (gauche/droite/centre) du texte dans les
cellules de la ligne.
Valign=top/middle/bottom : position verticale (haut/milieu/bas) du texte dans les cellules
de la ligne.
- <TD> ... </TD> : encadre une cellule du tableau. Pouvant contenir un texte
alphanumérique, une image, une liste, un lien, un autre tableau … . Avec les attributs
suivants :
Align=left/right/center : position horizontale (gauche/droite/centre) du texte dans la cellule.
Colspan=n : fusionne n cellules horizontalement.
Rowspan=n : fusionne n cellules verticalement.
Nowrap : supprime la césure éventuelle du texte de la cellule.
- <TH> ... </TH> : encadre une cellule d'en-tête du tableau.
Exemple 13 :
<HTML>
<HEAD>
</HEAD>
<Body>
<TABLE Border=12 Cellspacing=10 Cellpadding=10>
<CAPTION Align=bottom>Table des alphabets</CAPTION>
<TR>
<TH Colspan=6>ABC</TH>
</TR>
<TR>
<TH Rowspan=2><FONT Size=7>DEF</FONT></TH>
<TD><FONT Size=6>GH</FONT></TD>
<TD Valign=top>IJ</TD>
<TD Valign=bottom>KL</TD>

<TD Valign=top>MN</TD>
<TD Valign=bottom>OP</TD>
</TR>
<TR Align=right>
<TD Align=left><FONT Size=6>QR</FONT></TD>
<TD>ST</TD>
<TD>UV</TD>
<TD>WX</TD>
<TD>YZ</TD>
</TR>
</TABLE>
</BODY>
</HTML>
10. Les formulaires

Les formulaires permettent à l'utilisateur d'envoyer des données à un site web. La plupart du
temps, ces données sont envoyées à des serveurs web mais la page peut aussi les
intercepter et les utiliser elle-même.
Un formulaire HTML est composé d'un ou plusieurs items. Ceux-ci peuvent être des zones de
texte (sur une seule ligne ou plusieurs lignes), des boîtes de sélection, des boutons, des cases
à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui
décrit leur rôle.
- <FORM> … </FORM> : La balise FORM constitue un conteneur permettant de
regrouper les éléments du formulaire qui vont permettre à l'utilisateur de choisir ou
de saisir l’ensemble des données, Voici la syntaxe de la balise FORM :
<FORM Method="POST" ou "GET" Action="url" > ... </FORM>

Method : indique sous quelle forme seront envoyées les réponses «POST» est la valeur qui
correspond à un envoi de données stockées dans le corps de la requête, tandis que «GET»
correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par
un point d'interrogation.
Action : sert à définir la page appelée par le formulaire. C'est cette page qui recevra les
données du formulaire et qui sera chargée de les traiter.
Envoi des données
Formulaire.html Cible.php
Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données
présentes dans le formulaire sont envoyées sous forme de paires nom=valeur, c'est-à-dire
un ensemble de données représentées par le nom de l'élément de formulaire, le caractère
"=", puis la valeur associée. L'ensemble de ces paires nom/valeur étant séparées entre elles
par le caractère &.
On peut insérer dans FORM les éléments interactifs suivants :
- <INPUT> : un ensemble de boutons et de champs de saisie :
<INPUT Type="Type du champ" Value="Valeur par défaut" Name="Nom de l'élément">
L'attribut « Value » représente la valeur qui sera envoyée par défaut si le champ n'est pas
modifié par l'utilisateur.
L'attribut « Name » représente le nom associé au champ, c'est le nom qui permettra
d'identifier le champ dans la paire nom/valeur.
L'attribut « Type » permet de préciser le type d'élément que représente la balise INPUT,
voici les valeurs que ce champ peut prendre :
Checkbox : Les éléments <input> de type Checkbox sont affichés sous la forme de boîtes à cocher
qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs
dans un formulaire.
File : il s'agit d'un champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui
sera envoyé avec le formulaire.
Password : il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous
forme d'astérisques afin de camoufler la saisie de l'utilisateur.
Radio : Les éléments <input> dont l'attribut type vaut radio sont généralement utilisés pour
construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur
(l'ensemble des boutons radios devant porter le même attribut Name). Un
attribut Checked pour un des boutons permet de préciser le bouton sélectionné par défaut.
Reset : il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir l'ensemble
des éléments du formulaire à leurs valeurs par défaut.

Submit : il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du

bouton peut être précisé grâce à l'attribut Value.
Text : Les éléments <input> dont l'attribut type vaut text permettent de créer des champs de
saisie avec du texte sur une seule ligne.
Image : il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à
l'emplacement précisé par son attribut Src.
- <TEXTAREA> … </TEXTAREA> : Crée une zone multi ligne dans laquelle l'utilisateur
pourra entrer plus de text par rapport à la simple ligne de saisie que propose la
balise INPUT. Cette balise possède les attributs suivants:
Rows : représente le nombre de lignes.
Cols : représente le nombre contenir une ligne.
Readonly : permet d'empêcher l'utilisateur de modifier le texte entré par défaut.
- <SELECT> … </SELECT> : La balise SELECT représente un contrôle qui fournit une liste
d'options (précisés par des balises <OPTION> à l'intérieur de celle-ci) parmi lesquelles
l'utilisateur pourra choisir. Les attributs de cette balise sont :
Size : représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le
nombre d'éléments effectifs dans la liste).
Multiple : marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste.
Disabled : permet de créer une liste désactivée, c'est-à-dire affichée en grisée.
Exemple 14 :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>Commande Voiture</H2>
<FORM Method=GET Action="Commande.php">
Monsieur : <INPUT Type="radio" Name="sexe" Value="M" Checked>
Madame : <INPUT Type="radio" Name="sexe" Value="D">
Mademoiselle : <INPUT Type="radio" Name="sexe" Value="L"><BR>
Nom et Prénom : <INPUT Type="text" Name="nom"><BR>
Code Secret : <INPUT Type="password" Name="Code"><BR>
Adresse : <BR>
<TEXTAREA Rows="5" Cols="40" Name="Adresse">
Tapez ici votre adresse
</TEXTAREA><BR>
Modèle Voiture : <SELECT name="Voiture">
<OPTION Value="Yar">Yaris</OPTION>
<OPTION Value="Aur">Auris</OPTION>
<OPTION Value="Cor">Corolla</OPTION>
</SELECT><BR>
Couleur : <BR>
<INPUT Type="checkbox" Name="Couleur" Value="N">Noire<BR>
<INPUT Type="checkbox" Name="Couleur" Value="G">Gris<BR>

<INPUT Type="checkbox" Name="Couleur" Value="B">Blanc<BR>
<INPUT type="checkbox" Name="Couleur" Value="R">Rouge<BR>
Contrat :
<INPUT Type="file" Name="Contrat"><BR>
<INPUT Type="reset" Value="Effacer">
<INPUT Type="submit" Value="Envoi">
</FORM>
</BODY>
</HTML>

Chapitre1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre1 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Développement d’Applications Web Chapitre 01 : HTML

3. Squelette d’un fichier HTML

1 2ème Année Licence Académique H. Mansouri

2 2ème Année Licence Académique H. Mansouri

3 2ème Année Licence Académique H. Mansouri

5 2ème Année Licence Académique H. Mansouri

6 2ème Année Licence Académique H. Mansouri

<TITLE>Exemple 7 – Page 2</TITLE>

Si la page 2 se trouvait dans un sous-dossier appelé "DAW", le lien serait alors :

7 2ème Année Licence Académique H. Mansouri

8 2ème Année Licence Académique H. Mansouri

- Un endroit précis dans une autre page (ancre externe)

9 2ème Année Licence Académique H. Mansouri

<H2>Liste des Spécialités</H2>

Les valeurs de type suivantes sont possibles :

10 2ème Année Licence Académique H. Mansouri

- Combiner les deux types

12 2ème Année Licence Académique H. Mansouri

On peut insérer des images situées dans d'autres dossiers :

14 2ème Année Licence Académique H. Mansouri

10. Les formulaires

15 2ème Année Licence Académique H. Mansouri

Envoi des données

16 2ème Année Licence Académique H. Mansouri

Submit : il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du

<INPUT Type="checkbox" Name="Couleur" Value="G">Gris<BR>

18 2ème Année Licence Académique H. Mansouri

Vous aimerez peut-être aussi