Vous êtes sur la page 1sur 44

Bases de donnes et Internet

Facult des Sciences et Techniques Fs Dpartement de Gnie Industriel Master Sciences et Techniques en Gnie Industriel Professeur : F. Kaghat

Plan du cours
1. 2. 3.

Langage HTML / XHTML Feuilles de style en cascade (CSS) PHP 5


Premire partie : Syntaxe de base et programmation en PHP 2me partie : Cration de sites Web dynamiques

4. 5.

Introduction SQL et MySQL MySQL


Dpartement de Gnie Industriel 2

Langage HTML / XHTML

HTML - Introduction

HTML : HyperText Markup Language


Liens hypertextes Langage base de balises

Objectif : publier sur le World Wide Web (ou WWW, W3 ou Web) des documents formats Issu du SGML (Standard Generalized Markup Language), langage de dfinition de langages Dvelopp par Tim Berners-Lee au CERN (Suisse) en 1990 et utilis sur le Web depuis.
Dpartement de Gnie Industriel 4

Versions successives de HTML


1990 1995 1995 1997

HTML 1 HTML 2 HTML+ et HTML 3 (non standards) HTML 3.2 et HTML 4 (W3C : World Wide Web Consortium) 2000 : XHTML 1.0 (HTML 4 rcrit en XML) 2001 : XHTML 1.1 2003 : XHTML 2 (en cours) 2008 : HTML 5 / XHTML 5 (en cours)
Dpartement de Gnie Industriel 5

: : : :

De HTML XHTML

Le langage HTML est fond sur le modle du langage balise SGML. Rcemment, un nouveau format issu lui aussi du SGML est apparu, on le nomme XML. Ce langage permet de structurer et d'exprimer le type de donne, comme le HTML mais avec un gros avantage : celui de ne pas possder de balises dfinies. Le concepteur est donc libre de nommer ces balises, de dcrire le contenu qu'il veut. Le XHTML n'est qu'une reformulation du HTML (en SGML) en XML. tout ceci dans le but de conduire progressivement les webmasters utiliser le XML la place du HTML.
Dpartement de Gnie Industriel 6

Elments, balises et attributs


XHTML (the eXtensible Hyper Text Markup Language) signifie langage de balisage hypertexte extensible. Elment : nom, notion abstraite

Balise : forme concrte dun lment


Ex. Document html : html

Attribut : proprit dun lment (nom, valeur)

Ex. de balise ouvrante : <html> Ex. de balise fermante : </html>

EX. <html xmlns="http://www.w3.org/1999/xhtml"> Nom Valeur


Dpartement de Gnie Industriel 7

Rgles dcriture

Les noms des balises doivent tre crits en minuscules. Toute balise ouvrante doit tre ferme. Les chevauchements entre balises sont interdits (documents bien formats). Les noms des attributs doivent tre crits en minuscules. Les valeurs des attributs doivent tre entre guillemets doubles.
Dpartement de Gnie Industriel 8

Squelette dun document XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <!-- En-tte (note : ceci est un commentaire) --> </head> <body> <!-- Corps du document --> </body> </html>

En XHTML (et HTML) les retour la ligne sont considrs comme des espace. Plusieurs espaces ou retour la ligne conscutifs ne donneront pour rsultat qu'un seul et unique espace.
Dpartement de Gnie Industriel

Le DTD : DocType Definition

Il est obligatoire de dfinir le DocType (ou DTD). Cette ligne de code sert dfinir la version de HTML utilise pour coder le site. Les versions que l'on peut trouver sont souvent HTML 4 et XHTML. Il existe 3 DTD qui correspondent trois dclinaisons de XHTML : XHTML 1.0 Strict : n'autorise aucune erreur de code. Cette variante n'autorise aucune balise de mise en page (comme <font>), uniquement les balises de structure.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Dpartement de Gnie Industriel

10

Le DTD : DocType Definition

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Transitional : ce code est plus permissif, il autorisera notamment certaines balises de mise en page. Mais il faut essayer de l'viter, car cette variante est voue disparaitre : elle est prsente principalement pour faire la transition entre HTML 4 et XHTML plus facilement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Dpartement de Gnie Industriel

XHTML 1.0 Frameset : cette variante est quivalente Transitional, mais accorde l'utilisation des balises Frameset. Ces frames (ou cadres) sont dconseilles.

11

Le DTD : DocType Definition

A partir de la version XHTML 1.1, il n'existe plus qu'un Doctype Strict.

XHTML 1.1 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Nous prfrerons le DTD XHTML 1.0 Strict ou le DTD XHTML 1.1

Dpartement de Gnie Industriel

12

Les attributs xmlns et xml:lang

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


Dpartement de Gnie Industriel 13

L'attribut xmlns : attribut obligatoire, il correspond une norme XML. Cet attribut sert donner l'adresse d'une page sur le fonctionnement du XHTML. On met toujours l'adresse d'une page prcise du w3c. L'attribut xml:lang : on indique dans quelle langue est rdige la page. pour nous, sa valeur est "fr".

En-tte

Informations qui ne sont pas affiches mais qui sont utilises des fins diverses. Titre : <title> </title> Mtadonnes : < meta />
Dans ces balises, on met des informations destines dfinir la page (son titre, ses mots cls, etc pour les moteurs de recherche, ...). c'est l'entte de la page (ou head en anglais...). Note : Une balise vide peut se noter <balise></balise> ou <balise />, au choix.
Dpartement de Gnie Industriel 14

Ex. Auteur, mots cls, description de la page

En-tte

Mtadonnes : Les mta-tags (ou mta, balises mta...) . Ces balises ont deux attributs :

name ou http-equiv : on dfinit le type d'information que l'on va prciser content : contient la valeur de l'lment que l'on prcise. <meta name="keywords" content="mot cl, mot cl 2" />

Il existe un mta obligatoire : il contient des informations essentielles pour la page, comme le type de caractres utiliss (franais avec accents, anglais, ...) : text/html indique au navigateur que le contenu du fichier est du texte, et que le langage employ est html. L'attribut charset indique les caractres utiliss (iso-8859-1 correspond au franais avec les accents " "...).
Dpartement de Gnie Industriel

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

15

Exemple den-tte
<head>
<!-- Jeu de caractres accentus --> <meta http-equiv="Content-Type" Content="text/html; charset=iso-8859-1" /> <!-- Titre --> <title> Exemple de page XHTML </title>

<!-- Autres mtadonnes --> <meta name="Author" content="Kaghat" /> <meta name="Keywords" content="Enseignement,Informatique" /> <meta name="Description" content="Exemple de page XHTML" /> </head>
Dpartement de Gnie Industriel 16

Corps du document, titres, paragraphes, sparateurs


Informations qui sont affiches dans la page Web La balise <body> c'est dans cette balise que l'on devra inscrire tout le contenu visible qui constitue le corps de la page (body en anglais...). Titres (headings) : Six niveaux nots h1 h6

Paragraphes (spars entre eux par un espace)

Ex. <h1>Titre de niveau 1</h1>

Sparateurs :

Ex. <p>Ceci est un paragraphe</p>

Retour la ligne (sans espace) : <br /> Ligne horizontale : <hr />
Dpartement de Gnie Industriel 17

Autres blocs de texte prdfinis

Adresse

Ex. <adress>FST Route dImouzzer B.P. 2202 </adress> Ex. <blockquote>Le langage HTML tire son origine du langage SGML</ blockquote>

Citation

Texte prformat

Ex. <pre>Le formatage sera Conserv lcran </pre>


Dpartement de Gnie Industriel 18

Formatage de texte

Caractres gras : <strong></strong> Italiques : <em></em> Police "machine crire" : <code></code> En indice : <sub></sub> En exposant : <sup></sup> Caractres spciaux :

< : &lt; > : &gt; espace inscable : &nbsp;

& : &amp; " : &quot;

Dpartement de Gnie Industriel

19

Accents franais

Codes ncessaires si la balise meta http-equiv nest pas renseigne Accents : (remplacer # par une lettre)

Ex. Comment a va ?

Accent grave : &#grave; Accent aigu : &#acute; Accent circonflexe : &#circ; Trma : &#uml; Cdille : &#cedil; Comment &ccedil;a va ?

Dpartement de Gnie Industriel

20

Structurer le texte
<h1>1. Documentation du Produit</h1>
<h2>1.1. Spcificit</h2>
<p> Un premier paragraphe </p>

<h2>1.2. Fonctions avances</h2>


<p> Un deuxime paragraphe </p>
Dpartement de Gnie Industriel 21

Imbrication des balises


<!-- Exemple --> <p> La norme du XHTML est dfinie par le W3C, qui encourage les concepteurs de pages web passer du HTML au XHTML. L'avantage du XHTML sur le HTML est son <em>extensibilit</em>, qui lui vient du langage XML. C'est pourquoi <strong>on recommande trs fortement de prfrer le XHTML au HTML</strong>.<br /> terme, le HTML est appel disparatre.</p>
Dpartement de Gnie Industriel 22

Liens Hypertextes
La balise <a></a> permet la cration dun lien hypertexte (attribut href) ou dun lien vers un point dancrage du document. Forme gnrale : <a href="URL">Libell</a> Du cot du navigateur le texte Libell apparatra (en gnral) soulign et de couleur bleue, indiquant l'utilisateur quil sagit dun hyperlien qui va appeler l'URL correspondante. URL : Uniform Ressource Locator (ou URI : Uniform Ressource Identifier)

Absolue (adresse complte), Ex.


Relative ( partir du rpertoire courant), Ex.


http://www.gi-fstfes.imaroc.com ftp://ftp.lycos.fr mailto:alain.dupont@gmail.com page_suivante.html Rep/page_dans_repertoire.html

Dpartement de Gnie Industriel

23

Liens Hypertextes

Il est bien sr possible de faire des liens vers autre chose qu'une page HTML. On peut faire des liens vers des fichiers audio, des documents textes, etc. Cet hyperlien peut tre de plusieurs types :

Un autre document HTML <a href="http://www.php.net">Le site officiel de PHP</a> Un lien vers une image <a href="lphant.jpg">La mascotte de PHP</a> Un lien sur fichier son, ou vido charger... <a href="anim.mov">Cliquez ici pour visionner l'animation</a> Un lien vers un programme de composition de mail. <a href="mailto:alain.dupont@gmail.com"> Cliquer ici pour menvoyer un email </a> Lien vers un fichier en tlchargement <a href="archive.zip">Cliquez ici pour tlcharger le fichier</a> etc.
Dpartement de Gnie Industriel 24

Ancres

Permettent un lien vers un endroit prcis dans une page Web Dfinition dans une page : attribut id

Rfrence depuis la mme page

Ex. <h1 id="menu">MENU</h1> Lattribut id Permet d'affecter une balise, un identifiant unique au document. Ex. <a href="#menu">Aller au menu</a> Ex. <a href="page.html#menu">retour menu</a>
Dpartement de Gnie Industriel 25

Rfrence depuis une autre page

Images

Formats reconnus : GIF, JPEG, PNG Balise : <img src="URL" alt="description" /> On se sert de l'lment <img /> et de ses attributs. Le principal attribut est src : il permet de spcifier l'adresse o aller chercher l'image. Il est obligatoire d'indiquer une description de limage, en guise de texte alternatif pour les navigateurs texte, ou si pour une raison quelconque l'image ne peut pas tre tlcharge ; le texte alternatif sert, en particulier, pour les non-voyants qui disposent de logiciels pour lire du texte haute voix, mais n'ont rien pour dcrire des images. Ce texte doit tre court et informatif. On l'indique avec l'attribut alt.
Dpartement de Gnie Industriel 26

Images

Balise : <img src="URL" alt="description" /> src indique ladresse du fichier : Soit en relatif par rapport au fichier courant

Ex. <img src="logo.gif" alt="Le logo de la FST de Fs" />


EX. <img src="http://www.gi-fstfes.imaroc.com/images/logo.gif" alt="Le logo de la FST de Fs" />

Soit en absolu par un lien http

Dpartement de Gnie Industriel

27

Images

On peut aussi faire d'une image un lien hypertexte. Lien sur une image Ex. <a href="http://www.gi-fstfes.imaroc.com"> <img src="logo.gif" alt="Le logo de la FST de Fs" /> </a> Quelques attributs de prsentation de <img /> height=n, width=n : Ces deux options permettent de spcifier la taille de l'image.

height : dfinit la hauteur de l'lment en pixels ou en pourcentage. width : dfinit la largeur de l'lment en pixels ou en pourcentage.
Dpartement de Gnie Industriel

28

Listes ordonnes et nonordonnes

Les listes sont des outils bien utiles pour prsenter des informations. XHTML en offre 3 types diffrents. Le premier type de liste est la liste non ordonne ou liste puces. Listes puces : <ul></ul>
<ul>
<li>1er lment</li> <li>2me lment</li> <li>3me lment</li>

</ul>

Elments de la liste : <li> Ce type de liste sera prsent avec des petites puces avant le texte de chaque lment.
Dpartement de Gnie Industriel 29

Listes ordonnes et nonordonnes


Le second type de liste est la liste ordonne : Listes numrotes : <ol></ol> Exemple : <ol> <li>1er lment</li> <li>2me lment</li> <li>3me lment</li> </ol> Elments de la liste : <li> Cette liste affiche un numro au lieu d'un puce avant le texte de chaque lment.
Dpartement de Gnie Industriel 30

Listes de dfinitions (lexiques)

Le dernier type de liste est la liste de dfinition, permettant de crer des listes possdant un terme et sa dfinition. Liste de dfinitions : <dl> On utilise l'lment <dl> (Definition list). l'intrieur de l'lment <dl>, <dt> (pour definition term) est une entre du lexique, et <dd> (pour definition definition...) la dfinition associe cette entre. Contient des <dt> et des <dd> en alternance <dt> : nom du terme dfini <dd> : dfinition
Dpartement de Gnie Industriel 31

Listes de dfinitions

Exemple
<dl>
<dt>1er terme</dt> <dd>Dfinition du 1er terme</dd> <dt>2me terme</dt> <dd>Dfinition du 2me terme</dd>

Rsultat laffichage

</dl>

1er terme Dfinition du 1er terme 2me terme Dfinition du 2me terme

Ce dernier type de liste est gnralement affich avec la dfinition en retrait du terme.
Dpartement de Gnie Industriel 32

Imbrication des listes


Exemple
<ul>
<li>Elment non ordonn 1
<ol>
<li>Sous-lment ordonn 1.1</li> <li>Sous-lment ordonn 1.2</li>

</ul>

</li> <li>Elment non ordonn 2</li>

</ol>

Dpartement de Gnie Industriel

33

Tableaux simples

Un tableau HTML est dcoup en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit tre le mme, ou alors il est ncessaire de spcifier des options de recouvrement. Tableau : Ensemble de lignes elles-mmes constitues de cellules Dfinition dun tableau : <table> </table> Lgende : <caption> </caption> Dfinition dune ligne : <tr> </tr> (Table Row) Dfinition dune cellule den-tte : <th> </th> (Table Heading) Dfinition dune cellule normale : <td> </td> (Table Data)
Dpartement de Gnie Industriel 34

Tableaux simples
<table border= 1> <tr> <td>Cellule 1.1</td> <td>Cellule 1.2</td> </tr> <tr> <td>Cellule 2.1</td> <td>Cellule 2.2</td> </tr> </table> border : dtermine l'paisseur de la bordure du tableau et des cellules, en pixels.
Dpartement de Gnie Industriel 35

Exemple de tableau
<table> <caption>Mes totaux</caption> <tr> <th>Jour de la semaine</th><th>Montant</th><th>Total</th> </tr> <tr> <td>Lundi</td><td>456 dirhams</td><td>456 dirhams</td> </tr> <tr> <td>Mardi</td><td>200 dirhams</td><td>656 dirhams</td> </tr> </table>
Dpartement de Gnie Industriel 36

Tableaux simples

Les balises <tr> et </tr> dlimitent les lignes du tableau. Dans la premire ligne, la balise <th> dsigne des cellules d'un type particulier : elles ne contiennent pas de donnes, mais l'en-tte (ou titre) des colonnes correspondantes. Dans les lignes suivantes, <td> spcifie les cellules de donnes.
Dpartement de Gnie Industriel 37

Apparence du tableau exemple


Mes totaux Jour de la semaine Lundi Mardi Montant Total 456 dirhams 456 dirhams 200 dirhams 656 dirhams

On peut donner un titre un tableau grce l'lment caption. Cet lment va placer le titre, gnralement au dessus du tableau
Dpartement de Gnie Industriel 38

Tableaux cellules recouvrantes

<table border="1">

Des cellules peuvent en recouvrir d'autres, que ce soit en largeur ou en hauteur. Pour qu'une cellule occupe n cellules vers la fin de la ligne, on utilise l'attribut colspan="n". Pour qu'une cellule occupe n cellules vers la fin de la colonne, on utilise l'attribut rowspan="n". Fusion de cellules (<td> ou <th>) L'attribut colspan=n indique que la cellule stend sur n colonnes

</table>

<tr> <td colspan="2">Cellule 1</td> </tr> <tr> <td>Cellule 2 </td> <td>Cellule 3</td> </tr>
Dpartement de Gnie Industriel 39

Tableaux cellules recouvrantes


L'attribut rowspan=n indique que la cellule stend sur n lignes : <table border="1">

<tr>
<td rowspan="2">Cellule 1</td> <td>Cellule 2</td>

</tr> <tr>
<td>Cellule 3</td>

</tr>

</table>
Dpartement de Gnie Industriel 40

Exemple
<table> <tr> <td rowspan="2">ligne 1 et 2, colonne 1</td> <td>ligne 1, colonne 2</td> <td>ligne 1, colonne 3</td> </tr> <tr> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> <tr> <td>ligne 3, colonne 1</td> <td colspan="2">ligne 3, colonne 2 et 3</td> </tr> </table>
Dpartement de Gnie Industriel 41

Formulaires

En sance de cours : PHP 5. En sance de travaux pratiques:


Traitement en PHP dun formulaire denregistrement des utilisateurs pour un site en ligne

Dpartement de Gnie Industriel

42

Dix erreurs de base viter

Fonds sombres, images de fonds charges, couleurs trop nombreuses Gadgets technologiques (animations, textes qui dfilent, sons, javascripts divers)

Surcharger la page de texte ou dimages : trop dinformation tue linformation Absence daide la navigation
Liens de couleur non standard
Dpartement de Gnie Industriel 43

Dix erreurs de base viter


Ouvrir de nouvelles fentres, des pop-ups, etc.

Pages lourdes charger (contenant des images volumineuses par exemple).


Pages trop larges (scrolling latral) Pages trop longues ( scrolling vertical) Requrir de lutilisateur une configuration particulire ( site optimis pour tel navigateur en telle rsolution )
Dpartement de Gnie Industriel 44