sana.sellami@lsis.

org Licence Professionnelle SIL 2011-2012

Sana Sellami

Connatre les principales techniques pour la cration de sites web Se familiariser avec les langages du web Rendre dynamique le contenu des pages cot client ou cot serveur

Partie 1: Quelques Rappels et introduction

Internet Le web Cration de sites web

Partie 2: Programmation Web statique

HTML/XHTML CSS

Partie 3: Programmation Web dynamique

Ct client: JavaScript Ct serveur: PHP

Prsentation Historique Statistiques services

Cest quoi ? Cest qui ? a marche comment ?

Internet a t driv du concept d'internetting (en franais : interconnecter des rseaux ) dont la premire utilisation remonte octobre 1972 Rseau informatique mondial rseaux nationaux, rgionaux et sont relis par le protocole de cooprent dans le but d'offrir utilisateurs. constitu d'un ensemble de privs (Rseau de rseaux ) qui communication TCP/IP et qui une interface unique leurs

Aujourdhui synonyme avec le WWW (World Wide Web ou la toile mondiale)

1971: naissance dARPAnet Rseau sr pour larme US. 1973: Apparition du TCP/IP 1983: Utilisation dARPAnet comme rseau de recherche La base technique (TCP/IP) sera introduite au niveau international dans les annes qui suivent. 1989: Internet se profile comme LE rseau de recherche 1993: Explosion dInternet suite la popularit du WWW (apparition du premier navigateur) 1995/1996: Perce de solutions Intranet/Internet dans le commerce (Intranet est un rseau TCP/IP ferm) .Commercialisation
7

580 millions de foyers connects Internet en 2013

2,2 milliards d'internautes en 2013 selon Forrester Research

8

WWW Les groupes de discussion Recherche dinformations

Radios, tv, multimdias,

Courrier lectronique

Transfert de fichiers Etc,

Messagerie instantane

10

Un des services les plus couramment utiliss dInternet Envoyer des messages sous forme de fichiers texte Peut tre envoy partout dans le monde: Accs Internet Un compte sur un serveur de messagerie (POP3) Exemple: Adresse: sana.sellami@lsis.org

Diffrente de ladresse dun site Web

11

change instantan de messages textuels entre plusieurs ordinateurs connects au mme rseau informatique. Conversation interactive en quasi temps-rel (contrairement au courrier lectronique) Utilis majoritairement par les jeunes mais aussi dans un cadre professionnel Grande varit de salons/sujets http://cf.chat.yahoo.com/ Echanger des messages avec des amis en ligne http://www.windowslive.fr/messenger/

12

Linternet est un rseau de millions dordinateurs de par le monde qui envoient et reoivent des informations. Les ordinateurs stockent des informations Besoin de logiciels pour accder au WEB

13

Prsentation et volution Fonctionnement serveurs web url pages Web navigateurs Web

14

Invent par Tim Berners-Lee en 1989 qui prside aujourd'hui le World Wide Web Consortium (W3C). Je n'ai fait que prendre le principe dhypertexte et le relier au principe du TCP et du DNS et alors boum ! ce fut le World Wide Web ! Un des services offerts par le rseau Internet pour naviguer (grce un navigateur) et consulter des pages mises en lignes et relies par des liens hypertextes (systme hypertexte).

15

Caractris par des pages Web statiques, rarement mises jour Considr principalement comme un outil de diffusion et de visualisation de donnes. Evolution progressive vers un Web dynamique

Web 1.5 (2000):

Evolution du web statique vers le dynamique (migration progressive des applications cot serveur). Le contenu du site est dans une base de donnes, totalement administrable par un webmaster. Les sites sappuient sur les outils de gestion de contenu. fonctionnement gnral identique au web 1.0

16

Web 2.0: Une volution et rvolution

Un nouvelle interactivit et un travail collaboratif: L internaute= crateur de contenu et consommateur de contenu : Diffusion de lexprience de linternaute et consulter celle des autres (e.g au travers des blogs). Nouveaux concepts lis lergonomie: moins de clics, plus dinformations affiches lcran, moins de temps de chargement Nouvelles technologies: langage AJAX pout rendre les pages interactives et fluides, Flux RSS, pour tre inform des actualits d'une interface Web, les mashups pour interconnecter des applications Web 2.0. Les rseaux sociaux: change ralis par des techniques synchrones comme les messageries instantanes, la tlphonie sur internet , ... ou des mthodes asynchrones comme les forums, les wikis, les messageries en ligne,. (Facebook, MySpace, Twitter, Viadeo, LinkedIn, etc)

Source: http://www.webchercheurs.com/16/643-fr-l_evolutionde-l_internet-du-web-10-au-web-20.html

17

Web smantique (le web intelligent):

Les informations ne seraient plus stockes mais "comprises" par les ordinateurs afin d'apporter l'utilisateur ce qu'il cherche vraiment. Objectif: Transformer la masse ingrable des pages Web en un gigantesque index hirarchis Projet ambitieux et au cur de la recherche actuelle

Web 3.0: Web smantique + Mobilit (applications disponibles sur tout type de support et notamment les mobiles devices) en cours..

Source: http://fr.wikipedia.org/wiki/Web_s%C3%A9mantique

18

Partie du web accessible en ligne, mais non indexe (accs travers des requtes et non des liens URL) par des moteurs de recherche classiques gnralistes. Le web invisible comprend des bases et des banques de donnes et bibliothques en ligne gratuites ou payantes...

Cars.com Apartments.com 411localte.com

Amazon.com Biography.com

401carfinder.com

19

Modle client/serveur: Communication entre un serveur (HTTP) et un client (navigateur)

Requte HTTP Demande utilisateur: Affichage de la page index.html

Le serveur renvoie la page index.html au client web

Rponse HTTP

HTTP (HyperText Transfer Protocol): protocole du web : protocole de communication client serveur: But: permettre un transfert de fichiers (essentiellement au format HTML) localiss grce une chane de caractres appele URL entre un navigateur (le client) et un serveur Web
20 Source: http://nicolas.dandrea.free.fr/SPIP/article.php3?id_article=2

Logiciel permettant des clients d'accder des pages web, partir d'un navigateur install sur leur ordinateur distant. Un serveur Web peut tre : un ordinateur tenant le rle de serveur informatique sur lequel fonctionne un logiciel serveur HTTP ; le serveur HTTP lui-mme ; un ensemble de serveurs permettant le fonctionnement d'applications Web. Plusieurs serveurs Web: Apache Windows/ UNIX (gratuit) (www.apache.org) Microsoft IIS (Internet Information Services) :le serveur Web payant de Microsoft Microsoft PWS (Personal Web Server) Iplanet Web Server : serveur payant de Netscape Etc,

21

Le serveur le plus rpandu sur Internet. Sappuie sur les protocoles HTTP ou HTTPS (mode scuris de HTTP) Une application fonctionnant sur les systmes d'exploitation de type Microsoft, Unix. Fonctionnalits

Configuration assez simple Accs scuris en fonction des adresses IP Chargement de modules pour ajouter de nouvelles fonctionnalits (php, mysql, ssl, ... ) Etc,

22

Une chane de caractres utilise pour adresser les ressources dans le Web Exemple :

http://www.exemple.com/chemin/page.html?q=req
http : protocole www.exemple.com : hte /chemin/ : chemin absolu sur le service page.html : nom de la page Web q=req : chaine de requte, transmise la page

23

Une ressource du World Wide Web Cre par des webmasters laide des langages HTML/XHTML et CSS Possde une adresse Web. Peut contenir du texte, des images, des tableaux, des formulaires et autres lments multimdias Visualise par les internautes grce des navigateurs Web

24

Le logiciel le plus important sur lordinateur Grce aux navigateurs, on peut:

lancer des recherches, chatter, changer des e-mails, faire des achats, consulter votre compte en banque, lire l'actualit, visionner des vidos, etc.

Rle: analyser le code (X)HTML et CSS des pages web et den produire un rsultat visuel, facile lire pour un humain.
25

Il en existe un trs grand nombre

Maxthon

Konqueror

Navigateurs graphiques

Internet Explorer (Windows) ;

Mozilla Firefox (Windows, Mac et Linux) ; Opera (Windows, Mac et Linux) ; Safari (Mac,Windows) Maxthon (Windows); Google Chrome (Windows, Mac et Linux) ; Konqueror (Linux), etc.

Google Chrome

Mozilla Firefox

Navigateurs textuels
Links Linx, etc.

Opera

Safari

Internet Explorer
26

Utilisation des logiciels de navigations par les internautes dans le monde

Utilisateurs
22,16 % 21,61 % 20,19 % 13,58 % 8,24 % 5,18 % 3,37 % 1,46 % 4,2 %
StatCounter Global 27 Stats

Version des navigateurs

Firefox 3.5 IE 8.0 IE 7.0 IE 6.0 Firefox 3.0 Chrome 3.0 Safari 4.0 Opera 10.0 Autres

Etapes de cration Quel type de pages crer? Editeurs de sites web Systmes de gestion de contenu

Thme ?
Motivation

Services fournies? Objectifs du client? Avantages? Risques?

Public vis

Besoin des internautes? Publicit?

Concurrence

tudier la concurrence Mots cls utiliss ?

29

Objectif du site, sa cible, sa rentabilit, les moyens financiers

Projet

Autonomie souhaite et type de moyens humains pour la mise jour Contenu: pages, services attendus, principe de navigation

Mise en uvre

Dpt dun nom de domaine et choix dun hbergeur Choix et installation dun systme de gestion de contenu ou un diteur de sites web

Etablissement de la structure des pages HTML ou XHTML Dfinition dune arborescence

Conception

Mise au point dune charte graphique et ditoriale

Cration des pages Ralisation Mise en place de la charte graphique via les CSS Eventuels dveloppements dynamiques (formulaires, services, etc)
Recette du site une fois prt Lancement du site: mise en ligne

Suivi

Annonce: faire connatre son site Maintenance (nouveaux contenus, amliorations,..)

30

Utiliser un diteur. Il en existe deux types :

diteurs WYSIWYG : permettent de crer un site la manire dun traitement de texte.. diteurs de texte

Ou Utiliser un systme de gestion de contenus (CMS: Content Management System) Connaitre et utiliser langages du Web (e.g HTML, CSS) Tester continuellement son site sur au moins deux navigateurs la fois pendant sa cration, afin dtre sr que tous vos visiteurs aient un rsultat correct.

31

qui se connecte au serveur, demande une page. Celle ci lui est directement servie. le serveur web (HTTP) se contente d'envoyer des fichiers stocks sur disque dur.

Pages statiques: chacune des pages est cre en HTML. Un ordinateur

Pages dynamiques: les pages peuvent tre gnres dynamiquement,

en fonction des informations donnes par le navigateur (liens cliqus, formulaires, cookies...) et par le serveur (base de donnes SQL, fichiers de configuration...).

le serveur web (HTTP) excute un ou plusieurs programmes qui vont renvoyer des donnes, que le serveur web retransmet au navigateur Le contenu est obtenu (par exemple) en combinant lutilisation dun langage de scripts ou de programmation et une base de donnes. Il sagit souvent de PHP pour le langage et MySQL pour la base de donnes.

32

Ce sont les programmes qui permettent de crer des sites web

33

WYSIWYG : What You See Is What You Get, cest--dire ce que vous voyez est ce que vous obtenez . Permet de rdiger le contenu du site sans avoir taper la moindre ligne de code.
Systme dexploitation
Win/Mac/linux

Logiciel
Nvu

Prix
Gratuit/ OS

Qualit
Assez bonne Moyenne Moyenne Mauvaise Trs mauvaise

Adresse
http://www.nvu.com

Adobe Golive Macromedia Dreamweaver FrontPage Word

Win et Mac Win et Mac Win et Mac Win et Mac

580 euros 480 euros 250 euros 290 euros

http://www.adobe.fr/products/golive/ http://www/adobe.fr/products/dreamweaver http://www.Microsoft.com/france/frontpage http://www.microsoft.com/france/word

qualit de code pas bonne et difficile maintenir

souvent coteux
34 Source: livre "Russir son site web avec XHTML et CSS"

Gratuits pour la plupart

Systme dexploitation
Windows Windows Windows Windows, Mac et Linux Linux, windows et Maw

Logiciel
Bloc-Notes Notepad++ PSPad jEdit Emacs

Adresse
Aucune (avec Windows) http://notepad-plus.sourceforge.net http://www.pspad.com/fr http://www.jedit.org/ http://www.gnu.org/software/emacs/

Et bien dautres

35 Source: livre "Russir son site web avec XHTML et CSS"

Se charge de la partie commune aux pages du site et gnre les pages partir du texte ou des donnes qui lui sont fournis . Peut tre statique et crer les pages avant quelles ne soient mises en lignes, ou dynamique et crer la page la demande du visiteur. Napporte rien quand au contenu lui-mme, mais permet de grer la structure du site utilisation de FAQ (Foire Aux Questions), de documents, de blogs, de forums de discussion, etc.), ajouter et classer les pages Permet dadapter linterface du site, de gnrer des pages imprimables plus dpouilles ou de faire participer des contributeurs au site.

36

Les blogs:

Wordpress: le plus rpandu. Gnre automatiquement les pages HTML partir du texte dit qui est stock dans une base de donnes. On peut crer un post sur son blog par envoi dun email. http://www.wordpress-fr.net/ DotClear: Prend en charge ladministration du blog, recherches, catgorisation, etc. http://fr.dotclear.org/

Les wikis: des sites dont le contenu est dit par les visiteurs

MediaWiki utilise PHP et MySQL. http://www.mediawiki.org/wiki/MediaWiki/fr PmWiki et DokuWiki sont en PHP mais nutilisent pas de base de donne. http://www.pmwiki.org/wiki/PmWikiFr/PmWikiFr PunBB http://punbb.informer.com/ phpBB est le plus utilis sur les sites ddis au forum. http://www.phpbb-fr.com/ MyBB et SMF sont quivalents en fonctionnalits phpBB. Joomla. Projet collaboratif de CMS Internet et intranet en PHP. http://www.joomla.fr/ Drupal. http://drupalfr.org/ Xoops. http://www.frxoops.org/

Les forums

Les portails

Source: http://www.scriptol.fr/cms/liste.php

37

Les langages: HTML/XHTML CSS

38

 Les diteurs Html reprennent uniquement les fonctions du langage Html. Ltude du code source vous permet de mieux connatre les multiples possibilits de votre diteur Html. Editeurs incomplets et imparfaits:
Certaines balises sont encore ignores par les diteurs, Ncessit de passer par le code source pour apporter des animations personnelles et originales Prise en considration partielle des feuilles de style Production dun code peu smantique

Garder la matrise de vos pages et accder au code source pour:

Ajouter de linteractivit vos pages avec p.e des lments de JavaScript Raliser des oprations plus complexes, comme la consultation en ligne des bases de donnes (e.g inclure directement du code Html dans des lignes de programmation PHP ou ASP).
39

Comment fonctionne un site statique?

Visiteur du site

administrateur du site

Serveur

Serveur web dans lequel sont stocks les pages HTML (dont le contenu est fixe) dposs par le webmaster
40

HTML (HyperText Markup Language) est un standard un langage de balisage dont le rle est de formaliser l'criture d'un document avec des balises de formatage. Les balises permettent d'indiquer la faon dont doit tre prsent le document et les liens qu'il tablit avec d'autres documents. XHTML (eXtensible HyperText Markup Language) : autrefois connu sous le nom de HTML, est le langage de base du Web. En thorie, il est possible de faire tout un site rien quavec le langage XHTML. Toutefois, celui-ci ne serait pas trs esthtique... CSS (Cascading Style Sheets) : cest l quintervient le langage CSS. Son rle est en quelque sorte de dcorer le site web, lui donner de lallure. On utilise le CSS en particulier pour raliser la mise en page du site, pour dfinir la police, la taille du texte, la couleur du texte et du fond, etc.

Le W3C (World Wide Web Consortium), organisme de standardisation but

non-lucratif, fond en octobre 1994 comme un consortium charg de promouvoir la compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP

41

42

1. Le langage HTML est un langage:

a. inspir de XML b. voisin du langage CSS c. driv du SGML

2. Que signifie le X dans XHTML: a. existed b. extensible c. XML 3. Quelles sont les diffrences entre les langages HTML et XHTML ? 4. La balise DOCTYPE se situe: a. dans l'en-tte du document HTML b. entre la balise <HTML> et la balise <HEAD> c. avant toutes les balises qui dlimitent le document

43

HyperText Mark-Up Language Langage de description de documents HyperTextuels et dfini par le W3C (World Wide Web Consortium) Issu de 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. Document HTML contient : du texte des balises (tags) : directives de mises en forme

44

1990: HTML 1 1995: HTML 2 1995: HTML+ et HTML3 ( non standards) 1997: HTML 3.2 et HTML 4 (W3C) 2000: XHTML 1.0 (HTML 4 rcrit en XML) 2001: XHTML 1.1 2003: XHTML 2 (volution de XHTML 1 abandonne en 2009) 2008: HTML 5/ XHTML 5 (volution de HTML 4, finalisation de spcification en 2014)
45

Source: http://eric.univ-lyon2.fr/~jdarmont/?page=enseignement-kharkov

HTML ou xhtml? structure du document Mise en forme Liens hypertextes Images Listes Tableaux formulaires

XHTML est le successeur de HTML Se base sur la syntaxe dfinie par XML Le X dans XHTML signifie extensible Devenu standard pour assurer la compatibilit entre navigateurs (Firefox, Internet Explorer, Mozilla, ) Pour vrifier la validit d'une page, le W3C a mis en place un validateur qui comptabilise les erreurs et donne les moyens de les corriger : http://validator.w3.org/
47

HTML
Des tags en majuscules ou en minuscules Paragraphe peut tre ouvert avec l'instruction <p> sans le terminer par </p>. Cela fonctionne.. Les guillemets ne sont pas toujours obligatoires autour des valeurs dattributs On peut utiliser des formules rduites par exemple: <option value="valeur" selected>

XHTML
Tous les noms sont en minuscules.

La page ne s'affiche pas. Tout tag ouvert <tag> doit obligatoirement tre referm par </tag>.

Les guillemets sont toujours obligatoires

tous les attributs utiliss doit tre donne une valeur: <option value="valeur" selected=" selected">

HTML 4 et XHTML 1.1 sont quivalents au niveau des fonctionnalits (lments et attributs,).

Source: http://www.la-grange.net/w3c/xhtml1/#diffs

48

XHTML permet un apprentissage plus simple de HTML:

Il est plus strict, on vite des erreurs d'interprtation des navigateurs Les critures possibles sont moins nombreuses (pas de balises tour tour en minuscules ou majuscules, pas de balises fermantes un coup prsentes et un coup manquantes), la syntaxe se maitrise plus facilement.

49

Peut porter de 0n attributs (informations complmentaires qui la caractrisent) Les balises

Les balises en paire:

Les deux en une (auto-fermantes): <tag />

Balise ouvrante: <tag> Balise fermante: </tag>

Imbrication de balises

Respect de la hirarchie des balises: premire ouverte sera la dernire tre ferme Exemple: <b> <u> Balises imbriques </u> </b> Attention: Les chevauchements entre balises sont interdits Les valeurs des attributs doivent tre entre guillemets doubles Exemple: <image nom="photo.jpg" />

attribut

50

51

En-tte
Espace de noms: adresse o se trouve les balises XHTML existantes

La langue utilise

Corps

52

Contient des informations den-tte qui ne sont gnralement pas affiches sur la page: Le titre <title>: Le titre dune page web est affich dans la barre de titre du navigateur La balise <meta/> utilise pour indiquer diffrentes informations : la description de la page web, ses mots-cls, son auteur, les rgles spcifiques destines aux robots des moteurs de recherches, la langue de la page web...
Les balises mta "name" qui permet de dcrire la page. <meta name="mot cl ici" content="valeur " />

Les balises mta "http-equiv" qui envoie des informations supplmentaires via le protocole HTTP.

53

Contient le texte du document et qui sera affich par le navigateur.

Paragraphes, Titres, .

54

Les paragraphes: La balise du paragraphe est une des balises les plus utilises

Les titres:

6 niveaux de titres: La balise est <hX> o X reprsente le niveau (X=1,..,6).

Important de respecter la hirarchie des diffrents niveaux de titres, sachant que l'lment le plus haut est le <h1>. Les balises de titre doivent tre places lextrieur des balises de paragraphes

55

Balise division <div> .... </div> : Pour regrouper en un seul bloc un ensemble de paragraphes, de titres, etc., auxquels on pourra appliquer globalement un style particulier
Liste des lments enfants de llment <div>
Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, div, dl, em form, h1h6, hr, img, ol, select, small, span, p,strong, sub, sup, ul, var,

Balise fusion <span></span>: pour regrouper plusieurs mots ( ou mme un mot isol ou une lettre seule ! ) dun paragraphe et leur donner une mise en forme commune, p.ex la taille, la couleur ou la police de caractre.

56

Une page web est souvent structure l'aide de blocs

57

Les sparateurs:

Retour la ligne: <br /> Trait de sparateur horizontal: <hr />

Les citations:

Pour les citations courtes: <q> </q> Pour les citations longues: <blockquote> </blockquote> : met en retrait le texte

Les abrviations: <abbr> </abbr> Texte prformat: <pre> </pre> Et bien dautres ,.. disponibles sur le site du W3C http://www.w3schools.com/tags/

58

Les balises de type bloc :

Crent des blocs de texte qui saffichent les uns en dessous des autres. Balises: <p>, <div>, <table>, <form>, <h1>...<h6>, liste et lments de listes <ul>, <ol>, <li>, <blockquote>, <pre>,...

Se trouvent toujours lintrieur de balises de type bloc. Scrivent les unes la suite des autres. Balises en ligne : <em>, <strong>, <a>, <q>, <span>, ...

Les balises de type en ligne :

59

60

Pour une mise en valeur importante: le texte en gras <strong></strong> Pour une faible mise en valeur: Le texte en italique <em></em> Le texte en exposant  Le texte en indice 

Les caractres spciaux: espace inscable: &nbsp; <: &lt; &: &amp; >: &gt; " : &quot;

61

62

Pour faire un lien:

Balise <a >.</a> (possde un grand nombre dattributs http://www.w3schools.com/tags/tag_a.asp ) Attribut href: pour indiquer le nom de la page qui sera appele

<a href= "URI" > libell </a> <a href="page2.html">Cliquez ici</a> pour aller sur la page 2 !

URI : Uniform Ressource Identifier

Absolue: indiquer ladresse complte Relative: partir du rpertoire courant

Pour visualiser une infobulle: attribut title

<a href="cours.html" title="suivre mon cours!">mon cours</a>

63

Servent atteindre un endroit prcis dans le document Pour crer une ancre, il suffit de rajouter un attribut id llment quon veut pointer.
<h2 id="cours">cours prog web </a>

Rfrence depuis la mme page: Nom de lancre prcd par #

<a href="#cours"> visualiser le cours prog web </a>

Rfrence depuis une autre page:

<a href="page.html#cours"> visualiser le cours prog web </a>

64

Un lien pour envoyer un e-mail:

Le contenu de lattribut href doit commencer par le prfixe mailto: suivi de votre adresse e-mail
<a href="mailto:sana@gmail.com">Envoyez-moi un message !</a>

65

66

Les formats dimage: JPEG, PNG et GIF La balise: <img /> insre dans un paragraphe <p> </p> Requiert deux attributs obligatoires
src: prcise le chemin vers limage que vous voulez afficher. alt : indique un texte de remplacement (dit texte alternatif ) pour votre image. Ce texte sera affich la place de votre image si celle-ci ne peut pas tre affiche.

<img src="photo.jpg" alt="ma photo "/>

<a href="http://www.photo.org"><img src="photo.jpg" alt=" ma photo " /></a>

Une image cliquable: combiner les balises <a> et <img />

67

68

Les listes non ordonnes ou puces (unordered list):

<ul>.</ul>

Listes ordonnes ou numrotes (ordered list)

<ol></ol>

Dans les deux cas, chaque ligne est repre par <li>...</li> lintrieur de ces balises.

69

L'imbrication des listes permet une prsentation claire et dtaille d'un menu ou d'un sommaire par exemple. On peut imbriquer les listes non ordonnes et ordonnes sans distinction et mme les mlanger :

70

Dlimites par la balise <dl> qui comprend une liste de termes dfinir reprsents par la balise <dt> qui peuvent avoir une ou plusieurs dfinitions elles-mmes encadres par la balise <dd> (une pour chaque dfinition).

71

72

Balises
<table> </table> <caption> </caption> <tr> </tr> <th> </th> <td> </td> <thead> </thead> <tfoot> </tfoot>

Description
Dfinition dun tableau Titre dun tableau Dfinition dune ligne (Table Row) Dfinition dune cellule den-tte (Table Header) Dfinition dune cellule normale (Table Data) Dfinition de len-tte du tableau Dfinition du pied du tableau

Exemple:

73

Attributs
Width Height Border Align Cellpadding Cellspacing

Description
Largeur du tableau en pixels ou pourcentage de la fentre du navigateur Hauteur du tableau en pixels ou pourcentage de la fentre navigateur Taille en pixels de la bordure du tableau Position du tableau dans la page Valeurs: center, right ou left Espace en pixels entre la bordure des cellules et leur contenu Espace en pixels entre les cellules

74

Fusion des colonnes: L'attribut colspan

L'attribut rowspan permet de fusionner plusieurs cellules

75

1. Combien existe-t-il de niveaux de titres diffrents en XHTML ? a. 1 b. 5 c. 6 2. a. b. c. e. g. Quelles sont les balises qui ne sont pas de type en ligne : <em> <strong> <p> <q> <form>

3. Quel est lattribut que lon doit imprativement utiliser dans la balise <a> pour indiquer o amne le lien ? href

76

77

Permettent aux auteurs de pages Web de doter leur page web d'lments interactifs permettant par exemple un dialogue avec les internautes,.

Linternaute saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit un URL, c'est--dire de faon gnrale une adresse e-mail ou un script de page web dynamique tel que PHP, ASP ou un script CGI.

78

name : Un nom qui permet de distinguer les diffrents formulaires.

La balise principale : <form> </form> (de type bloc) peut contenir les attributs suivants :

method : La mthode de transmission des valeurs par le formulaire : get (par dfaut) ou post. action : LURL du document charg du traitement du formulaire (php,..) target : Le nom de la fentre dans laquelle le rsultat de la soumission sera produit.
URL du script auquel sera soumis le formulaire

<form method= "post " get " dtermine la mthode denvoi des
donnes vers le serveur

action=script.php">
fichier qui est charg de traiter les donnes du formulaire ct serveur

79

<input/> : champ du formulaire <fieldset>...</fieldset> permet de dfinir un regroupement dans un formulaire. <label>...</label> permet de dfinir une tiquette pour indiquer au visiteur ce que doit contenir le champ. <legend>...</legend> permet de donner une lgende un formulaire. <textarea>: Cre une zone multiligne dans laquelle l'utilisateur pourra entrer des donnes (attributs: rows et cols). <select>: liste droulante

80

 Permet de dfinir une tiquette pour indiquer au visiteur ce que doit contenir le champ. Ajouter lattribut for qui doit avoir pour valeur lid du champ auquel il doit tre li Dans les navigateurs graphiques, un clic sur l'tiquette d'un champ permet en gnral de slectionner le champ. Exemple:

81

 Crer les composants des formulaires

Attributs
type

Description
spcifie le type dlment utiliser (p.e text, checkbox, password, hidden (permet de cacher des champs au client mais leur contenu est envoy avec le formulaire), radio) donne un nom llment, permet de prciser au serveur quelle saisie on fait rfrence donne une valeur llment indique la largeur du champ indique le nombre maximal de caractres que peut rentrer linternaute

name value size maxlength

82

Saisie dune ligne:

type="text" est utilis pour la saisie d'un texte dont la taille est infrieure une ligne. Exemple:

Saisie dun mot de passe

type="password" est utilis pour la saisie d'un texte dont les caractres sont remplacs par des astrisques Exemple:

83

Les boutons radio:

Type=" radio" Choisir un seul lment parmi une liste de possibilits Lattribut name doit avoir une valeur identique pour tous les lments dun mme groupe Lattribut value permet de diffrencier les lments L'attribut checked="checked" permet de prciser la valeur par dfaut.

Les cases cocher

Type=" checkbox" Donner un nom llment avec lattribut name

84

Bouton denvoi:

type="submit" permet de soumettre le formulaire. Le client envoie le contenu du formulaire l'adresse prcise par l'attribut action de la balise form. L'attribut value permet de spcifier l'tiquette du bouton.

Bouton de remise zro:

type=" reset " Remet tous les lments du formulaire la valeur par dfaut L'attribut value permet de spcifier l'tiquette du bouton.

85

Afficher un menu droulant Les choix du menu sont indiqus l'aide de la balise <option> </option> L'attribut selected="selected" permet dindiquer le(s) choix par dfaut

L'attribut value permet dindiquer la valeur associe au choix Lattribut size: dfinit le nombre de lignes doptions qui sont visibles lors de laffichage de la liste

Pour regrouper plusieurs options: <optgroup> </optgroup> :

Lattribut label permet de donner un nom au groupe doptions

86

Quelles balises ont t utilises pour crer cette page?

87