01 HTML Ensa

Universit Ibn Zohr Agadir Anne universitaire: 2010-2011
Ecole Nationale des Sciences Appliqu Section: ENSA -2

Dpartement: Gnie Informatique Module: Programmation Web
Responsable: Prof. A. Elyousfi
Le langage HTML
(HyperText Markup
Language)
Abderrahmane ELYOUSFI Dpartement

elyousfiabdo@ieee.org Gnie Informatique
1
Plan du cours
Introduction
Structure dun document HTML
La Mise en forme du texte
Les Listes
Les Liens
Les Images
Les Tableaux
Les Frames
Les Formulaires
Conclusion
Abdarrahmane ELYOUSFI 2
Introduction au langage HTML
HTML (HyperText Markup Language) est un langage de balisage
qui permet de structurer le contenu des pages web.
Cest un langage de description des donnes, et non un langage de
programmation.
Les instructions de ce langage sont interprtes par les diffrents
navigateurs et les rsultats apparaissent sur lcran.
le langage HTML est un standard, cest--dire quil sagit de
recommandations publies par un consortium international : le
World Wide Web Consortium (W3C).
Il existe ce jour plusieurs versions diffrentes de ce langage ayant
toutes une mme base commune, il y a HTML
Historique du langage HTML
Historiquement, les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) cr en 1986 pour structurer
des contenus trs divers.
1990 : HTML est cre par Tim Berner-Lee au Centre Europeen de
Recherche Nucleaire (CERN)
1995 : HTML 2.0 normalisation par l'IETF (Internet Engineering Task
Force)
1996 : HTML 3.2 ajout des tables, , etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames, d'objets, etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002 : XHTML 2.0 en cours de spcification
Visualisation du code source de la page
g
Visualisation du code source de la page
n
La sparation de la forme et du fond
F
Information
textuelle
HTML Navigateur
Mise en Espace de
forme visualisation
Smantique du langage HTML
Une balise est un mot cl, une commande du langage
insre dans le corps du document pour introduire un
effet particulier.
<balise> texte format</balise>
Le caractre < indique le dbut d'une balise,
Le caractre > indique la fin d'une balise,
<balise>: balise ouvrante
</balise>: balise fermante
Les caractres en dehors d'une balise <...> sont traits en
fonction de la balise qui les prcde,
Rgles syntaxiques dcriture
Pour chaque balise ouvrante doit correspondre une balise fermante :
<balise> texte format</balise>

Si on imbrique plusieurs balises, elles doivent tre refermes dans
l'ordre inverse :
<b1> <b2> texte format</b2> </b1>

En HTML, on trouve des balises qui nont pas de balise fermante.
<br/> <! Commentaire -->
Rgles syntaxiques (Notion dattribut)
Un attribut est un lment, prsent au sein de la balise
ouvrante, permettant de dfinir des proprits supplmentaires.
Voici un exemple dattribut pour la balise <p> (balise
dfinissant un paragraphe), permettant de spcifier 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Le doctype prcise au navigateur les
<html> informations sur le document, la version du
langage html, ., etc.
<head> Llment <html> est le conteneur de
Informations relatives au document premier niveau plac en haut de la
</head> hirarchie de tous les lments du
document.
<body> Llment <head> englobe un certain
Informations prsenter sur lcran nombre dinformations comme <title>,
</body> <base>, <link>, <meta>, <script>, <style>
dont nous allons tudier les rles respectifs.
</html>
Llment <body> est le conteneur de
lensemble des lments textuels et
graphiques dune page web.
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<p>Chaque programme est crit par un langage spcifique sexcute par un
type de programme serveur. Le type du programme serveur utilis va
conditionner les langages possibles. Voyons quelques exemples :</p>
<ul>
<li>serveur IIS (Internet Information Services) : langage ASP, ASP.NET</li>
<li> serveur Sun Java System Web Server : langage JSP, ASP, PHP</li>
<li> serveur Apache : PHP, Perl, Ruby, Python</li>
</ul>
<h2>Client web</h2>
</body>
</html> Abdarrahmane ELYOUSFI 12
<html>
<head>
<title>
Titre externe du document
</title>
<Meta NAME=keywords
content=liste des mots cls lattention des moteurs de recherchee>
</head>
<body>
Informations prsenter sur lcran
</body>
</html>
Lentte du document contient des

informations pour le rfrencement de la
page. Ces donnes sont dlimites par les
balises <HEAD> et </HEAD>,
Le corps du document contient tous les
lments visibles afficher dans le
navigateur. Les lments visibles sont
compris entre les balises <BODY> et
</BODY>,
Mise en forme
Mise en forme des titres de section
<h1>Titre de niveau 1</h1>

Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
... ... ... ... ... ...
Titre de niveau 6
<html >
<head>
<title> Les diffrents niveaux de titre </title>
</head>
<body>
</body>
</html>
Exemples
Mise en forme des paragraphes
Le format de document HTML permet de grer la notion de
paragraphe laide des tags <p></p>
La balise <p> provoque un saut de ligne avant le paragraphe,
suivit de linsertion dune ligne vierge aprs la fin du
paragraphe.
Un paragraphe ne peut en contenir un autre (le navigateur les
interprte comme des paragraphes successifs...),
Cette balise peut utilise lattribut Align:
Align = {left (par dfaut), right, center, justify}
Pour forcer un retour la ligne dans un paragraphe il faut utiliser la
balise <br>.
Pour forcer le navigateur interprter lespace il faut utiliser
. Abdarrahmane ELYOUSFI 20
<html >
<head><title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation web</h1>
<p>Chaque programme est crit par un langage spcifique sexcute par un
type de programme serveur.</P>
<P>Le type du programme serveur utilis va conditionner les langages possibles.
Voyons quelques exemples :</p>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les
plus connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs
capacits (lire des vido, recevoir du son ou des films en flot continu,...).</p>
</body>
</html>
Exemples
Mise en forme du texte
Emphasis <em>
Voici un exemple de rendu de <em>
Strong <strong>
Voici un exemple de rendu de <strong>
Indice <sub>
Test Voici un exemple de rendu de <sub>
Exposant <sup>
Test Voici un exemple de rendu de <sup>
Gras <b>
Voici un exemple de rendu de <b>
Italique <i>
Voici un exemple de rendu de <i>
Soulign <u>
Voici un exemple de rendu de <u>
Barr <s>
Voici un exemple de rendu de <s>
Petit <small> / Grand <big>
Voici un exemple de rendu de <small>
Voici un exemple de rendu de <big>
Exemples de mise en forme complexe
Les balises de mise en forme sont associatives et il est
possible de les combiner...
<em>texte important</em>
<strong>texte trs important</strong>
<strong><em>texte encore plus important</em></strong>
<strong><em>texte</em>encore plus important</strong>
Lordre de fermeture des balises doit tre inverse

lordre douverture de ces dernires.
<html >
<head> <title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation en langage C</h1>
<h2>Exercice 1:</h2>
<p>soit x<sub> 1</sub>, x<sub> 2</sub>, x<sub> 3 </sub> trois variables, : </p>
<p>Ecrire un programme en langage C qui permet de :<br/>
-Donner lutilisateur de saisir trois valeurs du clavier<br/>
-stocker ces valeurs dans les trois variables ci-dessus<br/>
-afficher la valeur <em><strong>maximale</strong></em></p>
<h2>Exercice 2:</h2>
<p>soit a, b et c trois variables, : </p>
<P>F(x)=aX<sup>2</sup>+bX+C</p>
Ecrire un programme en langage C qui donne les <em><strong>solutions de
l&eacutequation:</em></strong><br>
<p>F(x)=O</p>
</body>
</html>
Exemple
Texte prformat ...
Dans le langage HTML, un retour la ligne, une tabulation,
une suite du caractre espace dans le code source est un
simple sparateur !
La balise <Pre> Permet d'crire un texte prformat en

conservant les espaces, les retours la ligne et les tabulations.
Elle indique au navigateur dafficher les donnes telles

quelles sont mises en forme dans le code source HTML
<pre> <pre>
int main( void ){
voici un texte dont on matrise
return 1;
la mise en forme laffichage }
</pre> </pre>
<html >
<head>
</head>
<body>
<h1>Chapitre 1: Introduction &aacute la programmation en langage C</h1>
<h2>Exemple:</h2>
<pre>
void main()
{
int x, y, z;
printf(entrer deux valeurs \n);
scanf(%d%d,&x,&y);
z=x+y;
printf(La somme de %d et %d est gal :%d\n,x,y,z);
}
</pre>
</body>
</html>
Exemple
La balise <font> permet de changer la police de

caractre utilise ainsi que son style,
Lattribut face : il permet de spcifier le nom de la
police de caractres utiliser,
Lattribut size : il permet de prciser la taille des
caractres afficher (compris entre 1 et 7, 3 par
dfaut),
Lattribut color : il permet de modifier la couleur du
texte afficher.
<font face="Verdana, Arial, Helvetica, sans-serif"
size="5" color="red">mon exemple</font>
<html >
<head>
</head>
<body>
<font face="Verdana, Arial, Helvetica, sans-serif size= " 5" color="red">
<p>Chaque programme est crit par un langage spcifique sexcute par un type de programme
serveur.</P> </font>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus connus
tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs </p>
</body>
</html>
Exemple
La gestion des couleurs
Il existe 2 manires de grer les couleurs :

En utilisant le nom de la couleur
16 couleurs de base sont dfinies dans le langage :
(aqua, black, lime, yellow, silver, etc...)
Dautres couleurs peuvent tre connues des navigateurs ...
En spcifiant directement le code RGB de la couleur
Chaque composante doit possder une valeur comprise entre 0
et 255 (rouge, vert et bleu),
Ces donnes sont exprimer en hexadcimal,
La couleur #C6D418 est compose de #C6 rouge, de #D4 vert
et de #18 bleu.
La gestion des couleurs
Les sparateurs
Afin de sparer les diffrentes parties dun mme

document, le langage HTML propose la balise qui
permet de raliser une ligne horizontale.
Il est possible de paramtrer la longueur et la largeur de
la ligne,
Les sparateurs
<HR>
Exemples
Une ligne horizontal par dfaut
(quivalent size=2, align=center
et width=100%).
<HR width=50% size=4 >
ligne horizontal de largeur quivalente

50% de la largeur de page web et de 4
pixels dpaisseur.
<HR width=100px size=8 align=right>
ligne horizontal de 100 pixels de large,

8 pixels dpaisseurs align droite.
Modification des couleurs
<BODY
Ex BGCOLOR=#880000>
<H1>Hello !</H1> Hello
</BODY>
<BODY BGCOLOR=#880000
TEXT=#FFFFFF > Hello
<H1>Hello !</H1>
</BODY>
BGCOLOR : Couleur du fond de la page.

TEXT : Couleur du texte contenu dans la page.
<html >
<head>
</head>
<body bgcolor="#570000 text=#FFFFFF">
<font face="Verdana, Arial, Helvetica, sans-serif size= " 5" color="red">
<p>Chaque programme est crit par un langage spcifique sexcute par un type de
programme serveur.</P> </font>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs </p>
</body>
Exemple
La balise <blockquote>
Exemple
< < > >
Listes
Gestion des listes de donnes
Afin de structurer les informations dans les pages internet, le

standard HTML propose diffrentes balises pour mettre en
forme les documents,
Les listes puces,
Les listes numrotes,
Les listes de description,
Pour grer des informations plus compltes, il est possible
dimbriquer ces balises,
Possibilit de modifier le style daffichage des puces et de la
numrotation laide de paramtres.
Les listes puces
La balise <ul> permet de dfinir une liste

dinformations. Chaque donne de la liste doit tre
encadre par la balise <li> qui indique au navigateur la
prsence dun nouvel item.
<ul>
<li>Premier lment</li> Premier lment
<li>Deuxime lment</li> Deuxime lment
<li>Troisime lment</li> Troisime lment
</ul>
Utilisation de l'attribut TYPE
Valeurs de l'attribut TYPE :

disc : gros point noir plein (par dfaut)
circle : gros point noir creux
square : petit carr plein
Exemples <ul TYPE=circle>
<li>Premier lment</li>
<li>Deuxime lment</li>
<li>Troisime lment</li>
</ul>
Les listes numrotes
La balise <ol> permet de dfinir une liste

dinformations. Chaque donne de la liste doit tre
encadre par la balise <li> qui indique au navigateur
la prsence dun nouvel item.
<ol>
<li>Premier lment</li> 1. Premier lment
<li>Deuxime lment</li> 2. Deuxime lment
<li>Troisime lment</li> 3. Troisime lment
</ol>
Utilisation de l'attribut TYPE
Valeurs de l'attribut TYPE :

1 : chiffres arabes
i : chiffres romains en bas de casse
I : chiffres romains en capitales
a : lettres
A : lettres (capitales)
Exemples
<OL TYPE="i">...
<OL TYPE="A">...
Les listes de description
permet de crer une liste de termes, chacun dentre

eux tant suivi de sa dfinition.
L'ensemble de la liste est dlimite par le conteneur <DL>
Le terme dfinir est prcd par un marqueur <DT>
Chaque dfinition est prcd par un marqueur <DD>
Exemple:
<dl>
<dt>terme1</dt> <dd>dfinition 1</dd>
</dl>
Exemple (Les listes numrotes)
<html >
<head>
</head>
<body>
<ol>
<li><h2>Serveurs web</h2>
<p align=justify>Chaque programme est crit par un langage spcifique sexcute par un type
de programme serveur. Le type du programme serveur utilis va conditionner les langages
possibles. Voyons quelques exemples :</p>
</li>
<li><h2>Client web</h2>
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des
extensions (Plug-In) permettant dtendre leurs </p>
</li>
</ol>
</body>
</html>
Exemple
<html >
<head>
</head>
<body>
<h1>Introduction la programmation web</h1>
<p>Chaque programme est &eacutecrit par un langage sp&eacutecifique s&acuteex&eacutecute
par un type de programme serveur. Le type du programme serveur utilis&eacute va conditionner
les langages possibles. Voyons quelques exemples :</p>
<ul>
<li>serveur IIS (Internet Information Services) : langage ASP, ASP.NET</li>
<li> serveur Sun Java System Web Server : langage JSP, ASP, PHP</li>
<li> serveur Apache : PHP, Perl, Ruby, Python</li>
</ul>
<h2>Client web</h2>
</body>
Exemple (Les listes numrotes)
Exemple de liste de dfinition
<html >
<head>
<title>Liste de d&eacutefinition</title>
</head>
<body>
<h1>Introduction &agrave la programmation web</h1>
<h2>Ecrire une page web:</h2>
<dl>
<dt>Etape 1:</dt> <dd>lancer l'&eacutediteur de texte bloc Notes</dd>
<dt>Etape 2:</dt><dd>Ecrire le code HTML</dd>
<dt>Etape 3:</dt><dd>Enregistrer le fichier avec l'extension .html</dd>
<dt>Etape 4:</dt><dd>Ouvrir ce fichier par le Navigateur</dd>
</dl>
</body>
</html>
Exemple
Exemple
Exemple1
<html>
<head>
<title>Les listes XHTML</title>
</head>
<body>
<h1>Les listes</h1>
<h2>Les listes ordonnes</h2>
<ol>
<li>
<h3>Le premier jour</h3>
<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et
rebatur super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit .. </p>
</li>
<li>
<h3>Le deuxime jour</h3>
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac </p>
</li>
<li> <h3>Le troisime jour</h3>
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac .</p>
</li>
</ol>
</body>
Exemple
Exemple1
<html>
<head>
<title>Les listes imbriques</title>
</head>
<body>
<h1>Listes imbriques</h1>
<ol>
<li> <h2>Le premier jourr</h2>
<ul> <li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi
aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit .. </p></li>
<li>
xitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac </p></li>
</ul>
<li> <h2>Le deuxime jour</h2>
<ul> <li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem
abyssi et dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona.</p></li>
<li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem
abyssi et dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona.</p></li>
</ul>
</ol>
</body>
</html>
Exemple
Exemple1
<html>
<head>
<title>Les listes imbriques</title>
</head>
<body>
<dl>
<dt>XHTML</dt>
<dd><fieldset>eXtensible HyperText Markup Language : le langage moderne de cration de pages web...
</fieldset></dd>
<dt>CSS</dt>
<dd><fieldset>Cascading Style Sheet : le langage de cration des styles et du design...</fieldset></dd>
<dt>PHP</dt>
<dd><fieldset>PHP Hypertext Preprocessor : le meilleur langage de cration de pages dynamiques...
</fieldset></dd>
<dt>SQL</dt>
<dd><fieldset>Structured Query Language : le langage dinterrogation des bases de donnes...
</fieldset></dd>
</dl>
</body>
</html>
Les liens
Mise en place de liens entre les pages
Il est ncessaire de pouvoir inclure des

liens dans vos pages afin de ne pas tre
bloqu,
Il existe diffrents types de liens,
Les liens internes une page
Les liens externes une page
Relatifs au site internet courant,
Liens externes au site courant.
Les liens internes une page (ancres)
Les liens internes servent par exemple raliser un sommaire

(plan) de la page en cours.
Pour cela, on utilise un tag <a> avec 2 attributs diffrents :
name : dfinit un point darriv,
href : spcifie le point darriv ou lon doit aller.
Exemple
<html >
<head>
</head>
<body>
<H2><a href=#Part1 title= Serveur web> Serveur Web</a></H2>
<H2><a href=#Part2 title= Client web> Client Web</a></H2>
<h2><a name= part1 >Serveurs web</a></h2>
<p align=justify>Chaque programme est crit par un langage spcifique sexcute par un type
de programme serveur. Le type du programme serveur utilis va conditionner les langages
possibles. Voyons quelques exemples :</p>
<h2><a name= part2 >Client web</a></h2>
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des
extensions (Plug-In) permettant dtendre leurs </p>
</body>
</html>
Exemple
Les liens externes avec adresse absolue
Ces liens permettent de connecter

lutilisateur sur dautres sites internet.
Cette connexion se fait laide dURL
bien formes.
http://www.ensa-agadir.ac.ma
Les liens externes
Exemples:
<a href = "http://www.google.fr"

title = "Lien sur google" >
Lien vers le moteur de recherche google</a>
<a href = "http://www.linuxfr.org"

title = "Des nouvelles du monde libre" >
Un site de news consacr lOpenSource</a>
Les liens internes
Exemples
<a href = "meme_repertoire.html"
Lien vers un fichier se trouvant dans le mme rpertoire que le
document courant</a>
<a href = "repetoire/fichier.html"
Lien vers un fichier se trouvant dans un sous rpertoire du
document courant</a>
<a href = "../index.html"
Lien vers un fichier se trouvant dans un parent du document
courant</a>
<a href = "../autre_branche/docs.html"
Lien vers un fichier se trouvant dans une autre branche de
larborescence relativement au document courant</a>
Les images
La balise <img> pour les images
Pour insrer une image dans une page internet,
il existe plusieurs mthodes :
Utilisation de la balise <img> qui permet dintroduire
des images,
Utilisation de la balise <objet> qui est dun usage
beaucoup plus gnral et qui permet d'insrer dautres
objets multimdias,
Nous concentrerons notre attention sur la

premire balise <img>.
Exemples daffichage des images
Exemples
<img
src="MonImage.png"
alt="courte description"
>
<img
src="MaPhoto.jpg"
width=600px
height=50%
alt="Voici une photo de ..."
>
Les options dinsertion des images
alt : Texte affiche la place de limage si lutilisateur les a dsactives.

width : Spcifie la largeur de limage en pixel ou en pourcentage.
height : Spcifie la hauteur de limage en pixel ou en pourcentage.
align : Dtermine la position de limage vis--vis du texte qui lentoure.
border : Indique si limage doit possder un cadre autour delle. Si cest
le cas, on indique le nombre de pixels le composant.
hspace/vspace : Permet de spcifier un espacement horizontal et vertical
autour de limage.
Les options dinsertion des images
Alignement
ALIGN="top" : le haut de l'image est align sur la
partie suprieure de la ligne o elle se trouve
ALIGN="middle" : le milieu de l'image est align sur
le milieu de la ligne o elle se trouve
ALIGN="bottom" : le bas de l'image est align sur le
bas de la ligne o elle se trouve (valeur par dfaut)
Exemples de mise en forme (1/2)
Exemples
<img <img
src="Toucan.jpg" src="Toucan.jpg"
width=220px width=220px
height=224px height=224px
border=0 border=2
> >
Exemples de mise en forme (1/2)
Exemples
<img <img <img

src="Toucan.jpg" src="Toucan.jpg" src="Toucan.jpg"
width=220px width=220px width=112px
height=224px height=112px height=112px
border=0 > border=0> border=0>
Exemple
<html >
<head>
</head>
<body>
<img src="Foret.jpg" alt="l'image fort" align="top" width=500 height=150 hspace=20 vspace=5 border=2 />

<h2><a href="#Part1" title= "Serveur web"> Serveur Web</a></h2>
<h2><a href="#Part2" title= "Client web"> Client Web</a></h2>
<h2><a name="part1" >Serveurs web</a></h2>
<p align="justify">Chaque programme est crit par un langage spcifique sexcute par un type de
programme serveur. Le type du programme serveur utilis va conditionner les langages possibles. Voyons
quelques exemples :</p>
<h2><a name= "part2" >Client web</a></h2>
<p align="justify">Le client est couramment appel un navigateur. Les navigateurs les plus connus
tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des extensions (Plug-In)
permettant dtendre leurs </p>
</body>
</html>
Exemple
Tableaux
Mise en uvre des tableaux
Dans les pages web, les tableaux ont plusieurs rles :

Ils servent prsenter les donnes de manire ordonne,
Ils permettent de spcifier prcisment comment placer les
informations sur une page web,
Les tableaux sont normalement composs en HTML

de lignes et de colonnes, 3 balises ncessaires :
Dclaration du tableau <TABLE>,
Dclaration dune ligne <TR> (Table Row),
Dclaration dune colonne <TD> (Table Data).
Un tableau de 2 lignes et 2 colonnes
Exemples
<TABLE>
<TR>
<TD>Element 1</TD>
<TD>Element 2</TD>
</TR>
<TR>
<TD>Element 3</TD>
<TD>Element 4</TD>
<TR>
</TABLE>
Un tableau de 2 lignes et 2 colonnes
Exemples
<TABLE BORDER=2>
<TR>
<TD>Element 1</TD>
<TD>Element 2</TD>
</TR>
<TR>
<TD>Element 3</TD>
<TD>Element 4</TD>
<TR>
</TABLE>
Les attributs des tableaux
border=2 Ce paramtre permet de fixer la largeur des

lignes dlimitant le Tableau.
cellspacing=10 il dfinit lespacement entre les bordures de
chaque cellule.
cellpadding=10 il dfinit la largeur de lespacement entre le
contenu dune cellule et sa bordure.
width=100px Largeur du tableau, fix en dur ou relatif la
width=n% taille de la fentre.
Exemples de tableaux avancs
Dfinissons un tableau qui occupe 40% de la largeur

de la fentre qui est compos de 3 colonnes.
<TABLE BORDER=1 with=40% >
<TR>
<TD>Nom</TD>
<TD>Prnom</TD> Nom Prnom Age
<TD>Age</TD>
</TR>
</TABLE>
Le tableau occupe bien 40% de la largeur, mais

lespace nest pas quitablement rparti entre les
diffrentes cellules composant le tableau.
Corrigeons ce petit dsagrment en spcifiant pour

chaque cellule lespace quelle doit occuper.
<TR>
<TD with=33%>Nom</TD>
<TD with=33%>Prnom</TD>
<TD with=34%>Age</TD>
</TR>
</TABLE>
Nom Prnom Age
Ralisons le mme tableau maintenant sur 2 lignes

<TR>
<TD with=33%>Nom</TD>
<TD with=33%>Prnom</TD>
<TD with=34%>Age</TD>
</TD>
<TR>
<TD with=33%>Ali</TD>
<TD with=33%>Ben Ali</TD>
<TD with=34%>20ans</TD>
</TR>
</TABLE>
Nom Prnom Age

Ali Ben Ali 20 ans
On souhaite maintenant que la premire ligne ne

contienne quune seule cellule (fusion horizontale).
<TR>
<TD COLSPAN=3>Titre Y</TD>
</TR>
<TR>
<TD with=33%>Mohammed</TD>
<TD with=34%>20ans</TD>
</TR>
</TABLE>
Fusion
On souhaite maintenant que la premire colonne ne

contienne quune seule cellule (fusion verticale).
<TR>
<TD ROWSPAN=2>Titre </TD>
<TD> Nom </TD>
<TD> Prnom </TD>
</TR>
<TR>
<TD with=33%>Mohammed</TD>
</TR>
</TABLE>
Fusion
Nous allons maintenant faire la mise en forme des

tableaux raliss en formatant le texte compris dans les
cellules. <TABLE BORDER=1 width=40% >
<TR>
<TD COLSPAN=3 ALIGN=center>Titre Y</TD>
</TR>
<TR>
<TD with=33% ALIGN=left>Mohammed</TD>
<TD with=33% ALIGN=center>Ben Ali</TD>
<TD with=34% ALIGN=right>20ans</TD>
</TR>
</TABLE>
Nous allons terminer cette partie en changeant la couleur

des cellules
<TABLE BORDER=1 width=40% >

<TR>
<TD COLSPAN=3 ALIGN=center BGCOLOR=#0000FF >Titre Y</TD>
</TR>
<TR>
<TD with=33% BGCOLOR=#0000FF ALIGN=left >Nom</TD>
<TD with=33% BGCOLOR=#00FF00 ALIGN=center>Prnom</TD>
<TD with=34% BGCOLOR=#FF0000 ALIGN=right>Age</TD>
</TR>
</TABLE>
Exemple 1
Exemple 1
<html>
<head>
<title>Tableau lmentaire</title>
</head>
<body >
<table border="1">
<caption>Un tableau lmentaire</caption>
<tr>
<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 </td>
</tr>
<tr>
<td> Ligne 2 Colonne 1 </td><td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Exemple 1
Exemple 1
<html>
<head>
</head>
<body >
<table border="1" cellspacing="5px" cellpadding="20" width="70%" frame="hsides" >
<caption>Un tableau lmentaire</caption>
<tr>
<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Exemple 1
Exemple 1
<html>
<head>
</head>
<body >
<table border="1" cellspacing="5px" cellpadding="20" >
<tr align="center">
<td colspan="2"> Colonnes 1 et 2 fusionnes </td><td> Colonne 3 </td>
<td colspan="2"><big> Colonnes 4 et 5 fusionnes </big></td> </tr>
<tr align="center">
<td><big> Colonne 1 </big></td>
<td><big> Colonne 5 </big></td> </tr>
<tr align="center">
<td><big> Colonne 1</big></td>
<td colspan="3"><big> Colonnes 2, 3 et 4 fusionnes </big></td>
<td><big> Colonne 5</big></td> </tr>
</table>
</body>
</html>
Exemple 2
Exemple 1
<html>
<head> <title>Tableau lmentaire</title> </head>
<body>
<table border="2" cellspacing="2" width="90%">
<tr align="center">
<td colspan="12"><big> Colonnes 1 12 fusionnes</big> </td> </tr>
<tr align="center">
<td colspan="6"><big> Colonnes 1 6 fusionnes</big> </td>
<td colspan="6"><big> Colonnes 6 12 fusionnes</big> </td> </tr>
<tr align="center">
<td colspan="4"><big> Colonnes 8 12 fusionnes</big> </td></tr>
<tr align="center">
<td colspan="3"><big> Colonnes 1 3 fusionnes </big> </td>
</tr>
</table>
</body>
</html>
Les frames
Introduction aux Frames
Afin de grer un site internet complet avec un menu de

navigation pour passer dune partie du site une autre,
il faut utiliser les frames,
Les frames permettent de diviser la page web en
plusieurs sous-fentres :
Intressant pour afficher un menu, des pages utiles, de
la pub, etc,

Exemple

Exemple
<html>
<!-- Mirrored from www-igm.univ-mlv.fr/~riazano/ >
<head>
<title>Serge RIAZANOFF - Universit de Marne-la-Valle</title>
</head>
<frameset rows="150,*" >
<frame src="pagehaut.htm" name="bandeau" >
<frameset rows="*, 205">
<frame src="menu.htm" name="menu" >
<frame src="accueil.htm" name="main">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

Exemple de mise en forme classique

Les balises de manipulation des frames
Pour dfinir des sous-fentres dans la page web, le langage

HTML met notre disposition deux balises plus leurs
paramtres :
<FRAMESET> permet de dfinir une zone dcoupe sous forme de
sous fentres,
<FRAME> permet de spcifier la dfinition dune sous-fentre avec
ses paramtres.
Les balises sont similaires aux balises <TABLE> et <TR> lors
de la dclaration des tableaux.
La balise <FRAMESET> remplace dans une page

HTML la balise <BODY>.
Exemple de la division horizontale
d
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS=34%, 66%>

<FRAME>
<FRAME>
</FRAMESET>
</HTLM>

Exemple
<html>
<frameset rows="100,400,200">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>
Dans ce cas, le cadre suprieur a une hauteur de 100 pixels, le suivant de 400 pixels
et celui du bas de 200 pixels. Si lutilisateur a un cran de 800x600 pixels, il ne verra
le cadre du bas que partiellement ou pas du tout selon la configuration du navigateur.
Exemple
<html>
<frameset rows="100,*,200">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Nous avons cre dans cet exemple trois cadres horizontaux, le premier de 100 pixels
de haut, le dernier de 200 pixels de haut, et le cadre central a une hauteur variable,
selon la dfinition de lcran du poste client, laquelle se dfinit laide
Exemple
<html>
<frameset rows="15%,75%,10%">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Dans ce cas, le partage de la hauteur disponible de lcran se fait toujours selon la

proportion 15 % en haut, 75 % au centre et 10 % en bas, quel que soit lcran de
visualisation de la page.
Exemple
<html>
<frameset rows="100,75%,*">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Le cadre du haut a toujours 100 pixels de haut, le second 75 % de la hauteur totale de

la fentre disponible, et le cadre du bas dispose du reste.
Exemple
<html>
<frameset rows="1,5,2">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
le cadre suprieur occupera 1/(1 + 5 + 2) soit 1/8 de la hauteur disponible, le suivant

5/8 et le dernier 2/8. Il suffit de changer un seul des coefficients pour que le partage
soit diffrent. Abdarrahmane ELYOUSFI 110
Exemple de la division verticale
d
<HTML>
<HEAD></HEAD>
<FRAMESET COLS=34%, 66%>

<FRAME>
<FRAME>
</FRAMESET>
</HTLM>

Exemple de mise en forme verticale
<html>
<frameset cols="100,*,20%">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Dans ce cas, le cadre de gauche mesure 100 pixels de large, celui de

droite 20% de la largeur de la fentre et le cadre central occupe la
largeur restante. Abdarrahmane ELYOUSFI 112
Exemple dune division complexe
<HTML>
d
<HEAD></HEAD>
<FRAMESET ROWS=34%, 66%>

<FRAME>
<FRAMESET COLS=34%, 66%>
<FRAME>
<FRAME>
</FRAMESET>
</HTLM>

Insertion des donnes dans les frames
Pour ajouter des donnes dans les frames, on doit

utiliser lattribut SRC mis notre disposition dans le
langage HTML,
Lattribut SRC va pointer sur le contenu afficher
dans la sous fentre. Linformation est fournie sous
forme dURL,

Insertion des donnes dans les frames

Rsultat de la composition des frames



<html >
<head>
<title> Les cadres</title>
</head>
<frameset rows="80,*,50">
<frame src="entete.html" name="haut" />
<frameset cols="16%,*,18%">
<frame src="menu.html" name="gauche" />
<frame src="contenu.html" name="centre" />
<frame src="lien.html" name="droit" />
</frameset>
<frame src="adresse.html" name="bas" />
<noframes>
<body>
<p>Votre navigateur ne supporte pas les cadres!</p>
</body>
</noframes>
</frameset>
</html>


Les formulaires

Utilisation des formulaires de donnes
Jusqu maintenant nous avons vu une partie du langage

HTML qui ne permet de transmettre linformation dans
un unique sens :
Du serveur vers le client,
Nous allons maintenant tudier les formulaires qui
permettent de raliser lopration inverse :
Transmettre des informations du client vers le serveur,
La gestion des informations cot serveur sera abord dans
la suite du cours, dans la partie langage cot serveur
PHP,

Exemple
<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Vos donnes personnelles</legend>
<label>Nom : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Prnom : </label>
<input type="text" name="prenom" value="Votre prnom" maxlength="25" /><br /><br />
<label>Adresse : </label><input type="text" name="adresse" value="Votre adresse" maxlength="60"/><br /><br />
<label>Pays : </label><input type="text" name="pays" value="Votre pays" maxlength="20" /><br /><br />
<input type="submit" name="envoi" value="Envoyer"/>
</fieldset>
</form>
</Body>
</html>
Exemple

Cration de pages visuellement agrables
Les formulaires sont des parties de pages internet qui vont permettre
lutilisateur de renseigner des informations structures et de les envoyer.
Afin de raliser cela, le langage HTML met notre disposition la balise

<FORM>,
Cela permet de dclarer le dbut dun formulaire structur,
Un formulaire est mis en uvre pour communiquer avec le serveur,
Llment <fieldset> est trs souvent inclus dans un formulaire. Il a pour
vocation de dlimiter les groupes de composants actifs du formulaire.
Chaque titre est le contenu dun lment <legend> inclus dans <fieldset>.

Les attributs de la balise FORM (1/2)
Action
dsigne le fichier qui est charg de traiter les
donnes du formulaire ct serveur.
http: pour un traitement immdiat cot serveur,

<form action="http ://www.Ensa-agadir.ac.ma/scripts/traitement.php">

Les attributs de la balise FORM (2/2)
Method
Ce paramtre indique la mthode utilise pour envoyer les
donnes, deux mthodes seulement :
GET,
Cette mthode est la mthode par dfaut et ajoute le contenu du
formulaire l'URL spcifi dans ACTION.
Cette mthode a des inconvnients comme la visibilit des donnes et
aussi le nombre de caractre est limit.
POST,
Elle envoie le contenu du formulaire au serveur comme un ensemble
de donnes sans les faire figurer la suite de lURL.
Cette mthode ne prsente pas linconvnient de la mthode Get.
Cest donc celle que nous recommandons dans la plupart des cas.

La balise <input> dans les formulaires
Cette balise permet de spcifier les lments mettre en

uvre dans le formulaire pour simplifier / guider
lutilisateur dans sa saisie,
Cases cocher, listes droulantes, zones de texte, etc...
Pour cela, lattribut type de la balise <input> peut
prendre les valeurs suivantes :
Text, Password, CheckBox, Radio, Submit, Reset, File.
Ces lments sont configurables laide des valeurs
dcrites ci-aprs.

Les zones de texte (Text)
Lorsque lattribut type=text, cela indique que

nous ajoutons une zone de texte. Ce type de champs
peut tre paramtr laide des options suivantes :
Size : nombre de caractres maximum visibles dans la
zone de texte (entier),
MaxLength, nombre maximum de donnes que peut
contenir la zone de texte (entier),
Value, chaine de caractres reprsentant les donnes
comprises dans la zone,
ReadOnly, attribut indiquant si la zone est en lecture
seule ou non,

Exemple
<html>
<head>
</head>
<Body>
<form method = "post " action =" traitement .php" >
< fieldset>
<legend>Zones de texte</legend>
<label>Nom : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Prnom : </label>
<input type="text" name="prenom" value="Votre prnom" maxlength="25" /><br /><br />
<label>Adresse : </label><input type="text" name="adresse" value="Votre adresse" maxlength="60"/><br /><br />
<label>Pays : </label><input type="text" name="pays" value="Votre pays" maxlength="20" /><br /><br />
</fieldset>
</form>
</Body>
</html>

Exemple

La saisie de mot de passe
Les champs de saisie de mot de passe sont quasi

identiques aux champs de saisie de texte.
Ils ne comportent quune seule ligne et sont crs
avec le mme lment <input />.
La diffrence entre ces deux champs rside dans la
valeur de lattribut type qui prend la valeur
password au lieu de text.

<html>
<head>
</head>
<Body>
< fieldset>
<legend> Accs rserv: donner vos login et mot de passe </legend>
<label>Login : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label> Mot de passe : </label>
<input type="password" name="code" maxlength="8" />
</fieldset>
</form>
</Body>
</html>

La saisie de texte long
Le texte multilignes est utiliser par exemple pour

permettre lutilisateur de donner un commentaire.
llment <textarea> cre un champ de saisie de
texte sur plusieurs lignes.
Les dimensions de la zone de saisie doivent
obligatoirement tre dfinies. Pour cela, il faut
utiliser les attributs suivants :
cols="N" qui fixe la largeur de la zone N caractres. Le
retour la ligne est automatique dans la zone.
rows="N" qui fixe la hauteur N lignes.

<html>
<head>
</head>
<Body>
< fieldset>
<legend> Donnez nous vos impressions</legend>
<label>Tappez vos commentaires</label>
<textarea name="boite" cols="5" rows="15" />
<br /><br />
<input type="submit" value="envoyer" />
<input type="reset" value="Effacer" />
</fieldset>
</form>
</Body>

Les boutons radio (Radio)
Les boutons radio sont typiquement utiliss pour prsenter

plusieurs choix dont la rponse est unique.
Pour crer un bouton radio, nous utilisons encore une fois
llment <input /> avec un attribut type qui prend la valeur
radio.
Lensemble des boutons radio avec lesquels on peut oprer un
choix donn constitue un groupe.
Il faut que tous ses lments aient la mme valeur pour leurs
attributs name.

Les radio boutons (Radio)
Value, chane de caractres reprsentant la zone de radio

boutons qui sera exploit par le serveur,
Checked, cet attribut boolen permet de spcifier si la case
doit tre coche par dfaut,

<html>
<head>
<title>Boutons radio</title>
</head>
<Body>
< fieldset>
<legend> Boutons radio </legend>
<label>Monsieur</label>
<input type="radio" name="sexe" value="Monsieur checked="checked" /> <br /><br />
<label>Madame</label>
<input type="radio" name="sexe" value="Madame" /><br/><br/>
<label>Vous tes fonctionnaire?</label><br/>
<label>Oui</label>
<input type="radio" name="fonctionnaire" value="Madame" />
<label>Non</label> <input type="radio" name="fonctionnaire" value="Madame" />
</fieldset>
</form>
</Body>

Les cases cocher (CheckBox)
Elles se prsentent graphiquement sous la forme de petits

carrs .
Elles sont utilises pour un multiple choix.
Une case cocher est encore cre laide de llment
<input /> dont lattribut type prend cette fois la valeur
checkbox.
Les attributs name de chacune des cases se doivent alors
de porter des noms diffrents.

Lorsque lattribut type=checkbox, les

lments peuvent tre paramtres laide des
options suivantes :
Value, chane de caractres reprsentant le
bouton cocher (cette donne sera exploite par le
serveur),
Checked, cet attribut boolen permet de
spcifier si la case doit tre coche par dfaut,

<html>
<head>
<title>Boutons radio</title>
</head>
<Body>
< fieldset>
<legend> Boutons radio </legend>
<label>Quelles sont Vos villes prfres?</label><br/>
<input type="checkbox" name="CHOIX1" value="CASE 1"> Agadir<br>
<input type="checkbox" name="CHOIX1" value="CASE 2"> Ifrane<br>
<input type="checkbox" name="CHOIX" value="CASE 3"> Rabat<br>
</fieldset>
</form>
</Body>
</html>

Bouton denvoi
Le bouton denvoi, gnralement nomms Envoi ou OK.

Aprs un clic, il dclenche lenvoi des donnes vers le
serveur ou vers un e-mail.
La manire la plus courante de crer un bouton denvoi
est dutiliser llment <input/>
Cest lattribut type prend la valeur submit.

Exemple
<html>
<head>
</head>
<Body>
< fieldset>
<legend>Bouton denvoi</legend>
<br /><br />
<label>Mot de passe : </label>
</fieldset>
</form>
</Body>
</html>

Exemple
sssssss

Bouton de rinitialisation
Ce bouton est associ au bouton denvoi, gnralement

nomms Annuler.
Il remet le formulaire dans son tat initial, y compris les
valeurs par dfaut qui ont pu y tre dfinies.
La manire la plus courante de crer un bouton denvoi
est dutiliser llment <input/>
Cest lattribut type prend la valeur reset.
Comme les boutons denvoi, cest lattribut value qui
contient le texte visible sur le bouton.

Exemple
<html>
<head>
</head>
<Body>
< fieldset>
<legend>Bouton denvoi</legend>
<br /><br />
<label>Mot de passe : </label>
<input type="reset" name="envoi" value="Annuler"/>
</fieldset>
</form>
</Body>
</html>

Exemple
sssssss

Le transfert de fichiers
Dans un formulaire laide de llment <input /> dot

dun attribut type qui prend cette fois la valeur file, on
peut effectuer le transfert de divers fichiers du poste client
vers le serveur.
Il cre dans le formulaire un champ compos dune zone

de texte pour taper le chemin daccs au fichier et dun
bouton de slection de fichier.

Exemple
<html>
<head>
</head>
<Body>
< fieldset>
<legend>Transfer de fichier</legend>
<label>Donner le chemin de votre fichier : </label>
<input type="file" name="fichier" /> <br /><br />
<input type="reset" name="envoi" value="Annuler"/>
</fieldset>
</form>
</Body>
</html>
Exemple
nv

Les listes de choix (Select)
Llment <Select> permet de spcifier des

listes droulantes pr-remplies afin de simplifier
la tache de lutilisateur (restreindre ses choix).
Pour crer une liste droulante, il est ncessaire
de mettre en uvre 2 balises distinctes :
<Select> cette balise permet de spcifier le dbut
dune liste droulante,
<Option> cette balise est utilise afin de spcifier
un lment contenu dans la liste droulante,

Exemple(size=1)
<html>
<head>
</head>
<Body>
< fieldset>
<legend>Listes de slction</legend>
<select name=pays size=1>
<option>Moroc
<option>Allemagne
<option>France
<option>Etats-Unis
<option>Autriche
<option>Italie
</select>
</fieldset>
</form>
</Body>
Exemple
nv

Exemple
<html>
<head>
</head>
<Body>
< fieldset>
<legend>Listes de slction</legend>
<select name=pays size=5>
<option>Moroc
<option>Allemagne
<option>France
<option>Etats-Unis
<option>Autriche
<option>Italie
</select>
</fieldset>
</form>
</Body>
Exemple(Size=4)
nv

<html>
<head><title> formulaire</title>
</head>
<body>
<form action="exemple7-14.php" method="post" enctype="multipart/form-data">
<fieldset><legend><b>Vos coordonnes</b></legend>
<label>Nom : </label><input type="text" name="nom" size="40" maxlength="256" value="votre nom" /><br />
<label>Prnom : </label><input type="text" name="prenom" size="40" maxlength="256" value="votre prnom" /><br />
<label>Mail : </label><input type="text" name="mail" size="40" maxlength="256" value="votre mail" /><br />
<label>Code : </label><input type="password" name="code" size="40" maxlength="6"/> <br />
<input type="radio" name="sexe" value="homme" /><label>Homme</label> <br />
<input type="radio" name="sexe" value="femme" /><label>Femme</label> <br />
<select name="pays" size="1" >
<option value="maroc" >Maroc</option>
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" > Italie</option>
<option value="Allemagne" > Allemagne</option>
</select>
</fieldset>

<fieldset>
<legend><b>Vos gouts</b></legend>
<input type="checkbox" name="pomme" value="pomme" /> Pommes<br />
<input type="checkbox" name="poire" value="poire" /> Poires<br />
<input type="checkbox" name="scoubidou" value="scoubidou" /> Scoubidous<br />
<textarea name="gouts" cols="50" rows="5" >
Dcrivez vos gots en dtail
</textarea>
</fieldset>
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<input type="file" name="fichier" />
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer" /><br />
</fieldset>
</form>
</body>
</html>

Fin
Abderrahmane ELYOUSFI 165

01 HTML Ensa

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

01 HTML Ensa

Hochgeladen von

Copyright:

Verfügbare Formate

Universit Ibn Zohr Agadir Anne universitaire: 2010-2011

Ecole Nationale des Sciences Appliqu Section: ENSA -2

Abderrahmane ELYOUSFI Dpartement

<balise> texte format</balise>

<b1> <b2> texte format</b2> </b1>

<br/> <! Commentaire -->

<p align="right"> Exemple de paragraphe </p>

Chaque balise peut comporter un ou plusieurs attributs, chacun

Lentte du document contient des

<h1>Titre de niveau 1</h1>

Lordre de fermeture des balises doit tre inverse

La balise <Pre> Permet d'crire un texte prformat en

Elle indique au navigateur dafficher les donnes telles

La balise <font> permet de changer la police de

Il existe 2 manires de grer les couleurs :

Afin de sparer les diffrentes parties dun mme

ligne horizontal de largeur quivalente

<HR width=100px size=8 align=right>

ligne horizontal de 100 pixels de large,

BGCOLOR : Couleur du fond de la page.

< &lt; > &gt;

Afin de structurer les informations dans les pages internet, le

La balise <ul> permet de dfinir une liste

Valeurs de l'attribut TYPE :

La balise <ol> permet de dfinir une liste

Valeurs de l'attribut TYPE :

permet de crer une liste de termes, chacun dentre

Il est ncessaire de pouvoir inclure des

Les liens internes servent par exemple raliser un sommaire

Ces liens permettent de connecter

<a href = "http://www.google.fr"

<a href = "http://www.linuxfr.org"

Nous concentrerons notre attention sur la

alt : Texte affiche la place de limage si lutilisateur les a dsactives.

<img <img <img

<h1>Chapitre 1: Introduction la programmation web</h1>

Dans les pages web, les tableaux ont plusieurs rles :

Les tableaux sont normalement composs en HTML

border=2 Ce paramtre permet de fixer la largeur des

Dfinissons un tableau qui occupe 40% de la largeur

Le tableau occupe bien 40% de la largeur, mais

Corrigeons ce petit dsagrment en spcifiant pour

Nom Prnom Age

Ralisons le mme tableau maintenant sur 2 lignes

Nom Prnom Age

On souhaite maintenant que la premire ligne ne

On souhaite maintenant que la premire colonne ne

Nous allons maintenant faire la mise en forme des

Nous allons terminer cette partie en changeant la couleur

<TABLE BORDER=1 width=40% >

Afin de grer un site internet complet avec un menu de

Abdarrahmane ELYOUSFI 100

Abdarrahmane ELYOUSFI 101

Abdarrahmane ELYOUSFI 102

Abdarrahmane ELYOUSFI 103

Pour dfinir des sous-fentres dans la page web, le langage

La balise <FRAMESET> remplace dans une page

<FRAMESET ROWS=34%, 66%>

Abdarrahmane ELYOUSFI 105

Dans ce cas, le partage de la hauteur disponible de lcran se fait toujours selon la

Le cadre du haut a toujours 100 pixels de haut, le second 75 % de la hauteur totale de

le cadre suprieur occupera 1/(1 + 5 + 2) soit 1/8 de la hauteur disponible, le suivant

<FRAMESET COLS=34%, 66%>

Abdarrahmane ELYOUSFI 111

< < > >