Cours - TIC - Bases de Données Et Internet - Chapitre 1 - Langage HTML - XHTML PDF

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.
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)
: : : :
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.
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

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.
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>  </head> <body>  </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">

10
<!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">

XHTML 1.0 Frameset : cette variante est quivalente Transitional, mais accorde l'utilisation des balises Frameset. Ces frames (ou cadres) sont dconseilles.
11
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
12
Les attributs xmlns et xml:lang
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

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.
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 " "...).
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
15
Exemple den-tte
<head>
 <meta http-equiv="Content-Type" Content="text/html; charset=iso-8859-1" />  <title> Exemple de page XHTML </title>
 <meta name="Author" content="Kaghat" /> <meta name="Keywords" content="Enseignement,Informatique" /> <meta name="Description" content="Exemple de page XHTML" /> </head>
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 />
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>

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 :

< : < > : > espace inscable :
& : & " : "
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 ça va ?
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>
Imbrication des balises

 <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>
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
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.
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>
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.
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
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.
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.
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.
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
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.
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>
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)
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.
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>
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.
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
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>
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>
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>
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
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
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 )

Cours - TIC - Bases de Données Et Internet - Chapitre 1 - Langage HTML - XHTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours - TIC - Bases de Données Et Internet - Chapitre 1 - Langage HTML - XHTML PDF

Uploaded by

Copyright:

Available Formats

Bases de donnes et Internet

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

Introduction SQL et MySQL MySQL

Langage HTML / XHTML

HTML : HyperText Markup Language

Liens hypertextes Langage base de balises

Versions successives de HTML

1990 1995 1995 1997

Elments, balises et attributs

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

Squelette dun document XHTML

Le DTD : DocType Definition

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

Le DTD : DocType Definition

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

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

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

Les attributs xmlns et xml:lang

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

Ex. Auteur, mots cls, description de la page

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

Corps du document, titres, paragraphes, sparateurs

Paragraphes (spars entre eux par un espace)

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

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

Autres blocs de texte prdfinis

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

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

& : &amp; " : &quot;

Dpartement de Gnie Industriel

Dpartement de Gnie Industriel

<h2>1.2. Fonctions avances</h2>

Imbrication des balises

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

Rfrence depuis la mme page

Rfrence depuis une autre page

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

Soit en absolu par un lien http

Dpartement de Gnie Industriel

Listes ordonnes et nonordonnes

Listes ordonnes et nonordonnes

Listes de dfinitions (lexiques)

Imbrication des listes

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

Dpartement de Gnie Industriel

Apparence du tableau exemple

Tableaux cellules recouvrantes

Tableaux cellules recouvrantes

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

Dpartement de Gnie Industriel

Dix erreurs de base viter

Dix erreurs de base viter

< : < > : > espace inscable :

& : & " : "