Outils Et Programmation HTML

Universit Abdelmalek Essadi Ecole Nationale Des Sciences Appliques
Outils et Programmation HTML

Abdelouahed Sabri
Les rfrences:
abdelouahed.sabri@gmail.com
Josselin Willette. Les bases du HTML Pierre Poulin. Page Web et HTML Wikipedia.
Plan
Notions de bases sur le Web

Naviguer sur le Web Publier des sites Web Les balises (tags) Mise en forme: Paragraphes, police, taille et couleur Les liens hypertextes, les images, Les listes, Les tableaux, Les frame, Les formulaires
2
Programmation HTML

Naviguer sur le Web
Utiliser un navigateur
Ex: Google Chrome, Firefox, Internet Explorer, Netscape,
Spcifier une adresse URL (Uniform Resource Locator)

o
URL = adresse du serveur Web + adresse de la ressource sur le site http://www.lehtml.com/html/index.htm

tlcharge le document correspondant lURL Interprte et affiche le contenu
Le navigateur :
o o
Bien sur, il faut que le document soit dcrit dans un langage standard (HTML), compris par le navigateur
3
Publier une page sur le Web
Il faut: Machine accessible sur le Net Un serveur HTTP

o
IIS (Internet Information Services), Apache,

On utilise gnralement un accs FTP
Y mtre les fichiers HTML

o
NB: il est possible de crer/tester localement un document HTML

4
Cest quoi HTML
HyperText Markup Language est un langage de balisage
Il s'agit d'un ensemble d'instructions pour un navigateur Web pour produire laffichage du texte sous une certaine forme Equivalent dire que HTML est un format de prsentation de donnes qui permet de crer des pages Web. Ces pages peuvent tre lues dans des navigateurs Cest un langage de description de donnes
5
Ce nest pas un langage de programmation
Un document HTML porte une extension .html ou .htm
volution du HTML
En 1991: lapparition du langage SGML (Standard Generalized Markup Language)
HTML est une application de SGML
En 1993: fondation du World Wide Web Consortium (W3C) et apparition du HTML 1.0 En 1994: Ajout de nombreux lments de prsentation: Attributs texte, clignotement, centrage, En 1995: HTML 2.0 avec le support des tables, des figures et des expressions mathmatiques En 1996: HTML 3.0 avec le support des applets java En 1997: HTML 4.0 avec lajout des feuilles de styles, des frames (cadres), d'objets, etc. (dernire version HTML) En 2000: XHTML utilisation de XML avec HTML 6
Exemple de page HTML
HTML: rcuprer le code source
HTML: rcuprer le code source
Smantiques du HTML
HTML est un langage de balisage Tags, Marqueurs
Une balise est un mot cl (commande) du langage insr dans le corps du document pour introduire un effet particulier
Les balises sont mis en valeur par des caractres ("<"et ">") avec le nom de la balise dedans
10
Rgles syntaxiques du HTML
Sur les Balises:

o o
Chaque balise ouverte doit tre ferme ( exceptions prs) on utilise ("</"et ">") Certaines balises n'ont pas de balise de fermeture. <br>, un saut de ligne, est un exemple courant. HTML nest pas sensible la casse: <br> quivalente <Br>
La totalit du document HTML est place entre la balise d'ouverture <html> et la balise fermante </HTML> Il est possible dimbriquer plusieurs balises (paires)
Il faut respecter lordre de fermeture <b><i> Gras et Italique </i></b> Correcte <b><i> Gras et Italique </b></i> Faux (bien que les navigateurs rcents prennent en charge cet ordre de fermeture)
11
Rgles syntaxiques du HTML
Attributs:
Un attribut est un lment, prsent au sein de la balise ouvrante, permettant de dfinir des proprits supplmentaires Exemple: <p align="right"> Exemple dattribut </p>
o o
Balise <p> qui dfinie un paragraphe Attribut align pour aligner le paragraphe
Une balise peut comporter un ou plusieurs attributs et chaque attribut peut avoir aucune, une ou plusieurs valeurs
12
La structure dun document HTML
Les documents HTML sont censs avoir la forme d'un arbre, ou de faon quivalente, sous la forme d'un ensemble de balises imbriques.
html
Le document commence par <html> et se termine par </html> lintrieur de la balise <html> on trouve deux sections: <head> </head> <body> </body>
head: englobe un certain nombre dinformations comme <title>, <meta>, <script>, <style>
body: est le conteneur de lensemble des lments textuels et graphiques de la page web
13
Exemple:
<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> </body> </html>
14
Excution:
<title> </title>
<h2> </h2>
<h1> </h1>
<p> </p>
< ul> </ ul >

15
Exemple de page HTML
Pour crer une page HTML:

Etape 1: lancer lditeur de texte (Ex: bloc Notes) Etape 2: Ecrire le code HTML suivant:
<html> <head> <title> Ma premire page HTML </title> </head> <body> crire ici votre texte </body> </html>
Etape 3: Enregistrer le fichier avec l'extension .html (ou .htm) Etape 4: Ouvrir ce fichier par le Navigateur
16
En-tte: <head> </head>
<title></title>
Titre du document html Utilise pour dclarer un chemin absolu qui sera utilis comme rfrence pour toutes les autres url prsentes dans le document Attributs: o href :chemin absolu s'appliquant aux url suivant la balise. o target :spcifie la fentre dans laquelle s'ouvre le lien. Exemple:
o
<base ./>

<base href="http://www.google.fr" target="_blank">
<meta />

Utilise pour le rfrencement de la page sur internet Exemple:

o
<META NAME="Author" CONTENT="nom du crateur de la page" > 17
Corps: <body> </body>
Cette partie est le conteneur de lensemble des lments textuels et graphiques de la page web

Mise en forme Liens Images Tableaux Listes Formulaires
18
Mise en forme
Les titres:

Il y a diffrents niveaux de titres, ils vont de 1 6 et ont chacun leur importance La balise reprsentant ces niveaux de titre est <hX> </hX> o X reprsente le niveau Exemple:
<h1>Titre de niveau 1</h1> <h6>Titre de niveau 6</h6>
19
Mise en forme:
Titres
<html > <head>
<title> Les diffrents niveaux de titres </title> </head> <body>
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6>
</body> </html>
20
Mise en forme:
Titres
21
Mise en forme
Les paragraphes:

En HTML, il faut prciser ou commence un paragraphe et ou termine: <p> </p> Exemple:

<p> paragraphe1 </p> <p> paragraphe2 </p>
Pour aligner un paragraphe on utilise lattribut align

o o
Align: {left (par dfaut), right, center, justify} Exemple:

<p align="right"> paragraphe1 </p> <p align="center"> paragraphe2 </p>
Pour forcer un retour la ligne dans un paragraphe il faut utiliser la balise (simple) <br> ou <br />
22
Mise en forme:
Les paragraphes
<html > <head> <title>Exemple dune page web</title> </head> <body> <h1>Chapitre 1: 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.</p> <P>Le type du programme serveur utilis va conditionner les langages possibles. <br> 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>
23
Mise en forme:
Les paragraphes
<p> <br>
24
Mise en forme
Le texte

Gras : <b> </b> ou <strong> </strong>

o
<b>Ce texte s'affichera en gras.</b> <i>Ce texte s'affichera en italique.</i> <u>Ce texte sera soulign.</u> <s>Ce texte sera barr.</s> <b> a</b> <sup>2</sup> a2
25
Italique: <i> </i> ou <em> </em>

o
Soulign: <u> </u>

o
Barr: <s> </s>

o
Exposant: <sup> </sup>

o
Indice: <sub> </sub>
Mise en forme
Couleur, Police et taille du texte: Utiliser les attributs de la balise <font >
Couleur:
o
<font color="#ff0000">Ce texte sera en rouge.</font>
Les couleurs peuvent tre crites de deux manires : En hexadcimal de type RVB et prcdes d'un dise (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu Textuelles en anglais US ; Exemples : red, green, blue
<font color="blue">Ce texte sera en bleu.</font>

<font face="verdana">Ce texte sera en verdana.</font> <font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installe.</font>
26
La police:
o o
Mise en forme
Couleur, Police et taille du texte: On va utiliser les attribut de la balise <font >
Taille:
o
<font size="5">Ce texte sera en taille 5.</font> Par dfaut, la valeur de l'attribut size vaut "3". Les valeurs possibles sont les entiers de "1" "7"
NB:
o o
NB: il est possible de renseigner les trois attributs (color, face, size) la fois dans la mme balise<font>.
o
<font color=" blue" face="arial" size=4>Ce texte sera en bleu, en Arial et de taille 4.</font>
27
Mise en forme
Exercice:
Ecrire un code HTML pour avoir la page suivante:
28
Mise en forme
<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 l&eacutequation:</em></strong><br> <p>F(x)=O</p> </body> </html>
qui
donne
les
<em><strong>solutions
de
29
Mise en forme
Couleur, Police et taille du texte: Utiliser les attributs de la balise <font >
Les diffrentes couleurs:
30
Mise en forme
Texte pr-format:

Afficher le texte tout en conservant les espaces, les retours la ligne, les tabulations Utiliser la balise paire <Pre> Exemple
<pre>int main( void ){ return 1; }</pre> <p>int main( void ){ return 1; }</p>
31
Mise en forme
Balise paire BLOCKQUOTE:

permet de mettre en valeur un paragraphe

Un dcalage par rapport la marge courante du document
Exemple:
<h1> Wikipdia </h1> Wikipdia est une encyclopdie multilingue, universelle et librement diffusable.Depuis son lancement officiel par Jimmy Wales et Larry Sanger le 15 janvier 20011, <h1> Wikipdia </h1> <BLOCKQUOTE> Wikipdia est une encyclopdie multilingue, universelle et librement diffusable.<br> Depuis son lancement officiel par Jimmy Wales et Larry Sanger le 15 janvier 20011, </BLOCKQUOTE>
32
Mise en forme
Les caractres spciaux:
Un groupe de caractres commenant par & (et commercial) et se terminant par virgule (;)
Code à â é Rsultat dans le navigateur
Code " < >
Rsultat dans le navigateur [Espace inscable] " < >
è
û ç À É Ç
«
» & €
&
Tous ces caractres on un nombre quivalent

> est le mme que >
33
Arrire plan
Utiliser les attributs de la balise <BODY>

BGCOLOR: Changer la couleur du fond la page TEXT: Changer la couleur du texte de la page BACKGROUND: Mettre une image en fond de la page
34
Les liens hypertextes
Un lien hypertexte est un lment HTML permettant d'envoyer le visiteur vers:

o o
une autre page (relative au site courant ou externe au site courant) Ou un emplacement dans la page elle-mme
On utilise la balise <a> ... </a>
Les attributs:
o
Href: L'adresse de destination <a href="adresse_destination"> texte_ou_image__cliquer </a> Adresse_destination peut tre local au site, ou externe ou mme un emplacement dans la page (ancres) Exemple:

<A HREF=index.html">Accueil</A> <A HREF=http://www.google.com>">Google</A>
35
Les attributs (suite):

o
Target: dfinit la cible de laffichage du lien
_self: Affichage dans le cadre courant (par dfaut) _blank: Ouvre le lien dans une nouvelle fentre. _top: Affichage dans la totalit de la fentre courante _parent: Affichage dans le cadre qui enveloppe la structure courante
Title: permet de renseigner un petit descriptif sur le contenu de la page cible (infobulle)
<a href=http://www.google.com title="lien vers le moteur de recherche Google"> Google </a>
36
Les attributs (suite):

o
Name: spcifie une rfrence (une ancre) dans une page HTML
<a href="#2_eme_partie"> cliquer pour aller la deuxime partie </a> . .. <a Name="2_eme_partie"> du texte </a>
NB: pour crer une ancre vers une autre balise que <a> on utilise son attribut id
o
Dans la page page.html:
<h2 id="chapitre2">Chapitre 2: Les classes</h2> <a href="page.html#chap2">Lien vers une ancre externe</a>
37
Dans notre page
Exercice:
38

<html > <head> <title>Exemple dune page web</title> </head> <body> <h1>Chapitre 1: Introduction la programmation web</h1> <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>
39
Les liens e-mails
Utiliser la syntaxe mailto dans lattribut href de la balise <a>
Exemples:
<a href="mailto:ana@monsite.com">Ecrivez-moi</a> <a href="mailto:ana@monsite.com?subject=Sujet du mail">Ecrivezmoi</a> <a href="mailto:ana@monsite.com?body=Corps du mail">Ecrivezmoi</a> <a href="mailto:ana@monsite.com?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a> <a href="mailto:destinataire1@monsite.com; destinataire2@monsite.com"> Ecrivez-nous</a> <a href="mailto:destinataire1@monsite.com ?cc=destinataire2@monsite.com">Ecrivez-nous</a>
40
Les images
Pour insrer une image dans une page HTML, on utilise la balise <img>
Elle admet diffrents attributs. Les plus importants sont:

o
o o o
src: renseigner le chemin de l'image, qui peut tre absolu HTTP ou relatif, alt: affiche un texte alternatif la place de l'image dans le cas o celle-ci ne peut pas tre charge width: largeur de limage height: Hauteur de limage
Exemple:
<img src="ensa.gif" width =100px height =100px alt="Logo de l'ENSA">

41
Les images
Autres attributs:
o o
o o
border : Indique si limage doit possder un cadre autour delle. Si cest le cas, on indique le nombre de pixels le composant. Hspace : Permet de spcifier un espacement horizontal autour de limage Vspace: Permet de spcifier un espacement vertical autour de limage align: Permet daligner limage avec la ligne o elle se trouve

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)
42
Les listes
Servent crer une liste dlments (items) On distinguent

Les listes non ordonnes, ou puces Les listes ordonnes Les listes de dfinitions (de descriptions)
43
Les listes
Les listes puces (non-ordonns)
Elles sont dmarques par la balise <ul> et chacun des items est entour de la balise <li> :
<p> On distinguent </p> <ul> <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ul>
NB: on peut modifier le type de puces utilisant lattribut type de la balise <ul>
type=disc (par dfaut au niveau 1 d'imbrication) type=circle (par dfaut au niveau 2 d'imbrication) type=square (par dfaut au niveau 3 et suivants d'imbrication)
44
Les listes
Les listes puces (suite)
<p> On distinguent </p> <ul type=circle > <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ul> <p> On distinguent </p> <ul type=square > <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ul>
45
Les listes
Exercice:
Ecrire le code HTML pour avoir:
46
Les listes
Les listes ordonnes
Elles sont introduites par la balise <ol> et chacun des items est encadr par la balise <li>
<p> On distinguent </p> <ol> <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ol>
NB: on peut modifier le type dnumration utilisant lattribut type de la balise <ol>
type=1 : Numrotation par les chiffres arabes (par dfaut). type=I : Numrotation par les chiffres romains. type=i : Numrotation par les chiffres romains minuscules. type=A : Numrotation par les lettres de l'alphabet. type=a : Numrotation par les lettres de l'alphabet minuscules.47
Les listes
Les listes ordonnes
<p> On distinguent </p> <ol type=a> <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ol> <p> On distinguent </p> <ol type=I > <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ol>
48
Les listes
Les listes ordonnes
On peut mme modifier le dbut de la numrotation utilisant lattribut start de la balise <ol>
<p> On distinguent </p> <ol type=a start=3> <li>Les listes non ordonnes, ou puces</li> <li>Les listes ordonnes</li> <li>Les listes de dfinitions (de descriptions)</li> </ol>
49
Les listes
Les listes de dfinition
permet de crer une liste de termes, chacun dentre eux tant suivi de sa dfinition:
o
o
o
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:
<h2>Ecrire une page web:</h2> <dl> <dt>Etape 1:</dt> <dd>lancer lditeur 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>
50
Les listes
Les listes de dfinition
Exemple:
<h2>Ecrire une page web:</h2> <dl> <dt>Etape 1:</dt> <dd>lancer lditeur 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>
51
Les tableaux
Suite de lignes et de colonnes qui forment un ensemble de cellules Les tableaux sont utiliss pour:

Prsenter des donnes tabulaires la mise en page de documents (le plus frquent)
Dclaration du tableau <TABLE>
o
3 balises sont ncessaires :
Dclaration dune ligne <TR> (Table Row)
Dclaration dune colonne <TD> (Table Data)
52
Les tableaux
Exemple:
<TABLE> <TR> <TD>Une cellule</TD> </TR> </TABLE>
Tableau dune seule cellule
Tableau de deux lignes et deux colonnes
<TABLE> <TR> <TD>Elment 1</TD> <TD>Elment 2</TD> </TR> <TR> <TD>Elment 3</TD> <TD>Elment 4</TD> <TR> </TABLE>
53
Les tableaux
On peut afficher les bordures:
Attribut BORDER de la balise <Table>
<TABLE BORDER=1> <TR> <TD>Elment 1</TD> </TR> <TR> <TD>Elment 2</TD> </TR> </TABLE>
54
Les tableaux
On peut afficher la ligne de lentte dun tableau
Balise <th> ( lintrieur de la balise <tr>)
<TABLE BORDER=3> <TR> <Th>Nom</Th> <Th>Prnom</Th> <Th>Age</Th> </TR> <TR> <TD>Said</TD> <TD>Hafid</TD> <TD>22</TD> <TR> <TR> <TD>Ilias</TD><TD>Mohamed</TD><TD>21</TD> <TR> </TABLE>
55
Les tableaux
On peut afficher le titre:
Utiliser la balise paire <caption>, placer directement aprs l'ouverture du tableau.
Cette balise prend l'attribut align qui accepte comme valeurs "top" (par dfaut), "bottom", "left" et "right", en fonction de l'endroit o l'on veut afficher cette lgende.
<TABLE BORDER=1> <caption align="bottom">Liste des tudiants</caption> <TR> <Th>Nom</Th><Th>Prnom</Th> <Th>Age</Th></TR> <TR><TD>Said</TD><TD>Hafid</TD><TD>22</TD><TR> <TR> <TD>Ilias</TD><TD>Mohamed</TD><TD>21</TD><TR> </TABLE>
56
Les tableaux
Autres attributs

Cellspacing: Dfinit lespacement entre les bordures de chaque cellule Cellpadding: Dfinit la largeur de lespacement entre le contenu dune cellule et sa bordure Width: Largeur du tableau, fix en dur ou relatif la taille de la fentre
<TABLE BORDER=2 cellspacing=10 cellpadding=10 width=20%> <caption align="bottom">Liste des tudiants</caption> <TR> <Th>Nom</Th><Th>Prnom</Th> <Th>Age</Th> </TR> <TR> <TD>Said</TD><TD>Hafid</TD><TD>22</TD> <TR> </TABLE>
57
Les tableaux
Autres attributs

Cellspacing: Dfinit lespacement entre les bordures de chaque cellule Cellpadding: Dfinit la largeur de lespacement entre le contenu dune cellule et sa bordure Width: Largeur du tableau, fix en dur ou relatif la taille de la fentre
<TABLE BORDER=1 cellspacing=2 cellpadding=10 width=40%> <caption align="TOP">Liste des tudiants</caption> <TR> <Th width=33%>Nom</Th> <Th width=33%>Prnom</Th> <Th width=33%>Age</Th> </TR> <TR> </TR> </TABLE>
58
Les tableaux
Fusion

Fusion horizontale: utiliser lattribut colspan de <td> Fusion verticale: utiliser lattribut rowspan de <td>
<TABLE BORDER=1 with=40% > <TR> <TD COLSPAN=3 align=center >Titre Y</TD> </TR> <TR> <TD with=33%>Mohammed</TD> <TD with=33%>Ben Ali</TD> <TD with=34%>20ans</TD> </TR> </TABLE>
59
Les tableaux
Fusion

Fusion horizontale: utiliser lattribut colspan de <td> Fusion verticale: utiliser lattribut rowspan de <td>
<TABLE BORDER=1 with=40% > <TR> <TD ROWSPAN=2>Titre </TD> <TD> Nom </TD> <TD> Prnom </TD> </TR> <TR> <TD with=33%>Mohammed</TD> <TD with=33%>Ben Ali</TD> </TR> </TABLE>
60
Les tableaux
De la couleur dans les tableaux
Utiliser lattribut BGCOLOR <TABLE BORDER=1> <TR BGCOLOR="Blue"> <Th>Nom</Th><Th>Prnom</Th> <Th>Age</Th> </TR> <TR BGCOLOR="green"> <TD>Said</TD> <TD>Hafid</TD> <TD>22</TD> <TR> <TR> <TD BGCOLOR=Red>Ilias</TD> <TD BGCOLOR=#FFFF00>Mohamed</TD> <TD> <FONT COLOR=blue>21</font> </TD> <TR> </TABLE>
61
Les tableaux
Exercice:
62
Commentaires:
Commentaires:

63
Les cadres (frames)
Sont utiliss pour sparer la fentre en diffrents morceaux indpendants.

Chaque cadre peut contenir une page HTML diffrente Deux cadres, au minimum, sont utiliss dans une fentre. En gnral, on peut avoir:
o o
un cadre pour le menu gauche un cadre pour le contenu du site
Dans ce cas nous aurons 3 fichiers HTML diffrents
NB: un document HTML qui va utiliser des cadres ne pourra servir qu' a.
Aucun texte ou image insrs dans ce document ne sera affich dans le navigateur du visiteur.
64
Les cadres (frames)
Exemple
Bannire
Contenu
Menu
65
Les cadres (frames)
On utilise deux balises:
<FRAMESET> permet de dfinir une zone dcoupe sous forme de sous fentres
o
Elle va dsigner le nombre de cadres et leur taille Cette balise remplace la balise <BODY>
<html> <head> <title>Titre de la page</title> </head> <frameset>  </frameset> </html>
<FRAME> permet de spcifier la dfinition dune sousfentre avec ses paramtres Comparables aux balises <table> et <tr>
66
Les cadres (frames)
Les attributs de la balise <FrameSet>
cols: si il est renseign, alors la page sera coupe verticalement

o
Il prend pour valeur les tailles des diffrents cadres spares par une virgule
rows: si il est renseign alors la page sera coupe horizontalement

o
Il prend pour valeur les tailles, des diffrents cadres, spares par une virgule NB1: Si une des valeurs des attributs est une toile, alors le cadre en question prendra toute la place disponible restante dans la fentre NB2: On ne peut pas utiliser ces deux attributs conjointement sur une seule et mme balise
67
Les cadres (frames)
Les attributs de la balise <FrameSet>
Exemples:
o
Deux cadres verticaux
<frameset cols="10%, *"> <frameset cols="25%, *, 25%"> <frameset rows="100, *">
Trois cadres verticaux
Deux cadres horizontaux
68
Les cadres (frames)
La balise <frame>

Utiliser pour spcifier la source de chaque frame. Les attributs qui seront utiliss:
o o
Src: contient la source du cadre Name: nom de la frame. Utilis pour spcifier la cible des liens
Lattribut target du lien pointera sur le nom dun cadre
69
Les cadres (frames)
Exemple:
On va diviser la page en 2 cadres horizontaux

o o
1r cadre: La bannire Le deuxime cadre va tre divis en deux cadres verticaux
1r cadre: Le menu 2me cadre: Le contenu
70
<html> <head> <title> bannire </title> </Head> <body BGCOLOR=#ffff00> <p> Bannire </p> </Body> Ban.html </html>
<html> <head> <title> Menu </title> </Head> <body BGCOLOR=#00ffff> <p> c'est le menu </p> </Body> Menu.html </html>
<html> <head> <title> Contenu </title></Head> <body BGCOLOR=#0000ff> <p> C'est le contenu</p> </Body> Contenu.html </html> <html> <head> <title> Mon premier cadre </title> </Head> <frameset Rows="30%,70%"> <frame src="ban.html" noresize="noresize"> <frameset Cols="25%, 75%" > <frame src=menu.html > <frame src=contenu.html> </frameset> </frameset> Index.html </html>
71
Les cadres (frames)
Liens:
<html> <head> <title> Mon premier cadre </title> </Head> <frameset Rows="30%,70%"> <frame src="ban.html"> <frameset Cols="25%, 75%" > <frame src=menu.html > <frame src=contenu.html name="contenu"> </frameset> </frameset> Index.html </html> <html> <head> <title> Menu </title> </Head> <body BGCOLOR=#00ffff> <h1> Menu </h1> <h2> <a href="CV.html" target="contenu"> CV </a> </h2> <h2> <a href="Photos.html" target="contenu"> Photos </a> </h2> <h2> <a href="News.html" target="contenu"> News </a> </h2> </Body> Menu.html </html> 72
Les cadres (frames)
<html> <head> <title> Menu </title> </Head> <body BGCOLOR=#ffffff> <h1> Mon CV </h1> </Body> Cv.html </html>
73
Les cadres (frames)
74
Les formulaires
Sont utilises pour une interaction avec les visiteurs de la page

Un formulaire est utilis pour envoyer des donnes vers le serveur Les donnes envoyes au serveur sont en gnrale remplies par un visiteur:
o o
Inscription sur un site, Un formulaire de contact, .
Cot serveur, les informations seront traites utilisant PHP, ASP ou mme C/C++ (CGI)
o
Le serveur peut renvoyer alors sa rponse sous forme dun nouveau document HTML.
75
Les formulaires
Exemple:
Titre de la page
Champs Liste de choix Bouton
76
Les formulaires
Balise <form> . </form>

Tous les champs de formulaires doivent se trouver dans cette balise Attributs:
o o
action: contient la valeur dune URL method: prcise le mode denvoi des donnes
Deux valeurs possible: get ou post get (valeur par dfaut): Les valeurs envoyes sont passes par l'URL post: Les valeurs envoyes sont envoyes de manire transparente
Exemple:
<form action="inscription.php" method=POST>  </form>
77
Les formulaires
Les lments du formulaire:
La plus part utilisent la balise paire <input>
Les champs texte (zone de saisie)

Permet d'entrer du texte sur une ligne, comme un nom, login, e-mail o Balise simple <input> o Attributs:

type=Text pour spcifier que cest champ text Name: le nom du champ. Utiliser pour retrouver la valeur lors de l'envoi du formulaire value: permet d'attribuer une valeur par dfaut au champ size: permet de fixer la taille du champ en nombre de caractres maxlength: le nombre de caractres maximal readonly= "readonly" pou verrouiller le champ disabled ="disabled" pour dsactiver le champ
78
Les champs texte (zone de saisie)
Exemples:
<input type="text" size="5" name=CP" maxlength="5"> <input type="text" name=chp1" readonly="readonly" value=vrouill"> <input type="text" name="login" value="Entrez votre login" size="20">
Password:

Balise simple <input> Attributs:

o
type= password pour spcifier que cest un champ de mot de passe
Exemple:
<input type="Password" name="Pass">
79

<html> <head> <title>Formulaire de base</title> </head> <Body> <form method = "post" action ="page.php" > <p> Entrer votre login et mot de passe </p> Login : <input type="text" name="nom" maxlength="25" /><br /><br /> Mot de passe : <input type="password" name="code" maxlength="8" /> </form> </Body> </html>
80
Zones de Texte muti-lignes

Balise paire <textarea> Attributs ( 2 sont ncessaires):

o o o o o
rows: contient le nombre de lignes visibles cols: contient le nombre de colonnes visibles Name Readonly Disabled
Exemple:
<textarea name=message" rows=6" cols=7"></textarea> <textarea name="sujet" rows="4" cols="50">Ici le sujet</textarea>
81
Les boutons radio
sont utiliss lorsque quand on veux laisser aux visiteurs un choix et un seul parmi une liste de propositions
o

type=radio name: nom du groupe des boutons radio Ces butons vont par groupe un mme nom pour un groupe value: valeur (chaine de caractres) du bouton. Elle sera envoye au serveur si choisi checked="checked" si on veut forcer le bouton tre coch
82
<p>
Les boutons radio (suite)
Exemple:
<input type="radio" name="civilit" value="mlle"> Mademoiselle <input type="radio" name="civilit" value="mme"> Madame <input type="radio" name="civilit" value="mr"> Monsieur </p> <p> <input type="radio" name="genre" value="homme checked="checked"> Homme <input type="radio" name="genre" value="femme"> Femme <input type="radio" name="genre" value="et"> Alien <input type="radio" name="genre" value="indfini"> Indfini </p>
83
Les cases cocher:
Sensiblement identiques aux boutons radio mais ils permettent un choix multiple
o

type=checkbox name: nom de la case value: valeur (chaine de caractres) du bouton. Elle sera envoye au serveur si choisi checked="checked" si on veut forcer le bouton tre coch
84
Les cases cocher:
Exemple:
Quelles sont tes villes prfres?<br/> <p> <input type="checkbox" name="check1" value="CASE 1"> Agadir<br> <input type="checkbox" name="check2" value="CASE 2"> Ifrane<br> <input type="checkbox" name="check3" value="CASE 3"> Rabat<br> </p>
85
Les butons:

Ce sont des lments qui dclenchent une action aprs un click Balise simple <input> ou paire <boutton> On distingue 4 types diffrents de boutons
o
Bouton simple
n'est utile que lors d'appel de scripts JavaScript au moment du clic.
Bouton denvoi
validation du formulaire
bouton denvoi mais il permet dafficher une image sur le bouton rinitialiser le formulaire
86
Bouton image
Bouton effacer
Les boutons (suite):
Bouton denvoi:
o
o o
Sert envoyer les donnes du formulaire au serveur validation Balise simple <input> ou paire <boutton> Attributs:

type=submit name: le nom du bouton value: le texte afficher sur le bouton (caption). Si on le prcise pas, value sera "Envoyer" (Submit)
87
Bouton denvoi: Exemple
<html> <head> <title>Formulaire de base</title> </head> <Body> <form method = "post" action ="auth.php" > <p> Forme d'authentification <br> Login : <input type="text" name="nom" maxlength="25" /><br /><br /> Mot de passe : <input type="password" name="pass" maxlength="25" /> <input type="submit" name="envoi" value="Envoyer"/> </p> </body> </html>
88
Bouton de rinitialisation :
o o
Sert rinitialiser toutes les valeurs du formulaire Balise simple <input> ou paire <boutton> Attributs:

type= reset name: le nom du bouton value: le texte afficher sur le bouton (caption). Si on le prcise pas, value sera "Effacer" (Reset)
89
Bouton de rinitialisation :
<html> <head> <title>Formulaire de base</title> </head> <Body> <form method = "post" action ="auth.php" > <p> Forme d'authentification <br> Login : <input type="text" name="nom" maxlength="25" /><br /><br /> Mot de passe : <input type="password" name="pass" maxlength="25" /> <input type="submit" name="envoi" value="Envoyer"/> <input type="reset" name="envoi"/> </p> </body> </html>
90
Les listes
Permettent de spcifier des listes droulantes prremplies afin de simplifier la tache de lutilisateur (restreindre ses choix) 2 balises (paires)
o
<select > permet de spcifier le dbut dune liste droulante
Attribut: name: nom de la liste
<Option> utilise pour spcifier un lment contenu dans la liste droulante
Attribut value: la valeur qui sera envoy au serveur selected="selected" slectionner un lment
91
Les listes (suite)
Exemple
<form method = "post" action ="ville.php" > <p>Votre choix </p> <select name="pays"> <option>Maroc</option> <option>Allemagne </option> <option>France </option> <option>Etats-Unis </option> <option>Autriche </option> <option>Italie </option> </select> </form>
NB: On peut rendre cette liste non droulante en rajoutant l'attribut size qui prend pour valeur le nom de choix afficher
92
Les listes (suite)
Exemple
<form method = "post" action ="ville.php" > <p>Votre choix </p> <select name="pays" size=3> <option>Maroc</option> <option>Allemagne </option> <option>France </option> <option>Etats-Unis </option> <option>Autriche </option> <option>Italie </option> </select> </form>
NB: Pour pouvoir proposer plusieurs choix rajouter l'attribut multiple="multiple"

93
Les listes (suite)
Exemple
<form method = "post" action ="ville.php" > <p>Votre choix </p> <select name="pays" size=4 multiple="multiple" > <option>Maroc</option> <option>Allemagne </option> <option>France </option> <option>Etats-Unis </option> <option>Autriche </option> <option>Italie </option> </select> </form>
94
Editeurs HTML
En mode graphique:

WYSIWYG, Macromedia Dreamweaver, FrontPage, Notepad, Notepad++ textpad PSPad

95
Mode Texte
Universit Abdelmalek Essadi Ecole Nationale Des Sciences Appliques
Outils et Programmation HTML

Abdelouahed Sabri
Les rfrences:
Josselin Willette. Les bases du HTML Pierre Poulin. Page Web et HTML Wikipedia.
OUTILS ET PROGRAMMATION HTML
Fin du cours
Sil y a des questions ou remarques, voici mon adresse email:
97

Outils Et Programmation HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Outils Et Programmation HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Universit Abdelmalek Essadi Ecole Nationale Des Sciences Appliques

Outils et Programmation HTML

Notions de bases sur le Web

Naviguer sur le Web

Spcifier une adresse URL (Uniform Resource Locator)

URL = adresse du serveur Web + adresse de la ressource sur le site http://www.lehtml.com/html/index.htm

Publier une page sur le Web

Il faut: Machine accessible sur le Net Un serveur HTTP

IIS (Internet Information Services), Apache,

Y mtre les fichiers HTML

NB: il est possible de crer/tester localement un document HTML

Cest quoi HTML

HyperText Markup Language est un langage de balisage

Ce nest pas un langage de programmation

Un document HTML porte une extension .html ou .htm

En 1991: lapparition du langage SGML (Standard Generalized Markup Language)

HTML est une application de SGML

Exemple de page HTML

HTML: rcuprer le code source

HTML: rcuprer le code source

HTML est un langage de balisage Tags, Marqueurs

Rgles syntaxiques du HTML

Sur les Balises:

Rgles syntaxiques du HTML

La structure dun document HTML

La structure dun document HTML

La structure dun document HTML

< ul> </ ul >

Exemple de page HTML

Pour crer une page HTML:

En-tte: <head> </head>

<base href="http://www.google.fr" target="_blank">

Utilise pour le rfrencement de la page sur internet Exemple:

<META NAME="Author" CONTENT="nom du crateur de la page" > 17

Corps: <body> </body>

Mise en forme Liens Images Tableaux Listes Formulaires

En HTML, il faut prciser ou commence un paragraphe et ou termine: <p> </p> Exemple:

Pour aligner un paragraphe on utilise lattribut align

Align: {left (par dfaut), right, center, justify} Exemple:

<p align="right"> paragraphe1 </p> <p align="center"> paragraphe2 </p>

Gras : <b> </b> ou <strong> </strong>

Italique: <i> </i> ou <em> </em>

Soulign: <u> </u>

Barr: <s> </s>

Exposant: <sup> </sup>

Indice: <sub> </sub>

<font color="#ff0000">Ce texte sera en rouge.</font>

<font color="blue">Ce texte sera en bleu.</font>

Ecrire un code HTML pour avoir la page suivante:

Les diffrentes couleurs:

Balise paire BLOCKQUOTE:

permet de mettre en valeur un paragraphe

Les caractres spciaux:

Code &nbsp; &quot; &lt; &gt;

Rsultat dans le navigateur [Espace inscable] " < >

Tous ces caractres on un nombre quivalent

Utiliser les attributs de la balise <BODY>

Les liens hypertextes

Un lien hypertexte est un lment HTML permettant d'envoyer le visiteur vers:

On utilise la balise <a> ... </a>

<A HREF=index.html">Accueil</A> <A HREF=http://www.google.com>">Google</A>

Les liens hypertextes

On utilise la balise <a> ... </a>

Les attributs (suite):

Code " < >

<frameset cols="10%, "> <frameset cols="25%, , 25%"> <frameset rows="100, *">