Universit de Gabes Facult des sciences de Gabes Anne Universitaire 2011-2012

Cours

Programmation Web Niveau 1- LARI2

Mme Imen SFAIHI ZOUARI1

Chapitre1:

2

3

4

5

6

7

8

9

Dveloppement dApplications Web

Le premier outil du web: LE LANGAGE HTML (HyperText Markup Language)

10

Objectifs

Apprendre les balises HTML Apprendre insrer diffrents objets dans une page HTML Paramtrer les diffrents objets et personnaliser les balises HTML

11

INTRODUCTION

1. 2. 3. 4.

Quest ce que HTML ? Quest-ce quune page HTML ? Exemple de page HTML Architecture dune application Web

12

Quest ce que HTML ?HTML HyperText Markup Language HyperText = texte+liens vers dautres pages ou dautres objets Il sagit dun langage de balises issu de SGML (Structured Generalized Markup Language) qui est lui mme un langage standard (norme ISO 8779 :1986) utilis aujourdhui par de nombreuses grandes socits et institutions pour lchange international de documents et de donnes. SGML est trs complet mais il est trs lourd grer. HTML est une version allge de ce langage. HTML permet la mise en forme de textes et d'objets multimdia (images, son, vido) et donc la cration d'une page Web. Ce n'est pas un langage de programmation proprement parl (puisquil ne permet pas de crer des programmes), mais un langage qui se veut multi-systmes (PC, Unix, Linux, Mac...) et multi-plateformes (tout type de taille et de rsolution d'cran, tout type de navigateur : Microsoft Internet Explorer, Netscape Navigator, Opera...). Un document HTML est interprt par le navigateur. D'o des diffrences si on visualise une page sur un mme systme avec diffrents navigateurs, voire diffrentes versions d'un mme navigateur. D'o la ncessit de tester les pages sur diffrents navigateurs pour avoir le mme rendu. 13

QUEST-CE QUUNE PAGE HTML ?Une page Web est constitue de plusieurs lments ou fichiers : Un fichier HTML, galement appel "fichier source". Son extension est typiquement ".htm" (pour tenir compte des anciens systmes dexploitation qui ne permettent pas plus de 3 caractres pour lextension du fichier, DOS par exemple) ou ".html". Par exemple, "index.html" pour la page d'accueil de votre site. Il s'agit d'un fichier en texte brut que ce chapitre est destin crer. De photos ou d'images, au format JPEG ".jpg" ou ".jpeg" (optimis pour les photos), au format GIF ".gif" (optimis pour les images, logos, utilisation de la transparence, etc..). Du son (WAVE ".wav"), des vidos (MPEG ".mpeg" ou ".mpg", AVI ".avi"), des animations Flash ou QuickTime, des codes JavaScript ou XML, ASP, PHP, JSP, Perl, etc...Page HTML Page.html ou Page.htm Votre Texte Images/LogoISIG.gif

14

EXEMPLE DE PAGE HTML Ma premire page HTML Ecrire une page HTML, c'est facile !!

15

ARCHITECTURE DUNE APPLICATION WEBClient Scripts Client Communication Page HTML Texte Images, Sons Scripts clients Objets encapsuls (applets) ServeurSite Complet

Cookies

Scripts Serveurs

Base de donnes

Scripts serveur : Perl, PHP, ASP, ColdFusion. Images : JPEG, GIF, PNG ou BMP Sons : WAV, MIDI, MP3, Scripts clients : JavaScript ou VBScript Objets encapsuls: Animations Flash, Animations Shockwave, Applets Java

16

SYNTAXE HTML

1. 2. 3. 4. 5.

Balises HTML Commentaires Adresses de fichiers Couleurs La balise !DOCTYPE (document type declaration)

17

Balises HTML

Les instructions HTML sont exprimes dans des balises (ou "tags"), dlimites par les signes < et >. La plupart des balises doivent tre ouvertes et fermes. La balise de fermeture est toujours identique la balise d'ouverture la diffrence qu'elle comporte une barre oblique (caractre slash /) aprs le signe indiquent un commentaire Un commentaire nest visible que dans le code source

19

ADRESSES DE FICHIERSLes fichiers sont adresss en indiquant le chemin relatif par rapport la page courante : Le chemin est indiqu entre barres obliques (/) Un point indique le rpertoire courant Deux points reprsentent le rpertoire parent Exemple: on est dans contents.htmlfiche.html

- "fiche.html" ou "./fiche.html"tips.html

- "ressources/tips.html" ou "./ressources/tips.html"index.html

- "../index.html"catalog.html

- "../produits/catalog.html"20

COULEURS Les couleurs sont dfinies par leur code hexadcimal ou par leurs noms en toutes lettres Les couleurs qui sont dfinies par 6 chiffres hexadcimaux reprsentent 2 2 les tons du Rouge, du Vert et du Bleu, selon le codage RGB (Red Green Blue), ou en franais RVB (Rouge Vert Bleu). couleur="#RRVVBB" o R, V et B reprsentent respectivement un chiffre hexadcimal entre 0 et F pour le Rouge, le Vert et le Bleu. Exemple:

Rouge Bleu Plus de 16 millions de couleurs sont disponibles pour colorer les pages Web. Toutefois, tant donn que tous les navigateurs ne reconnaissent pas les couleurs de la mme faon, le W3C conseille l'utilisation des couleurs cidessous, pour lesquelles un nom intelligible a t donn. Il est donc possible (et conseill) d'appeler une couleur de la faon suivante :21

COULEURS : PALETTE WEB-SAFELorsque le systme d'exploitation est configur en 256 couleurs, il n'y a que 216 couleurs communes la fois aux navigateurs (Netscape, Internet Explorer) et aux systmes d'exploitation (Windows, Macintosh) : c'est la palette "web-safe" Les couleurs web-safe ont pour valeur hexadcimale une combinaison des paires 00, 33, 66, 99, CC ou FF Mais, en ralit il n'y a que 212 couleurs web-safe :

Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).Que se passe-t-il si l'on utilise une couleur "non web-safe" : En 256 couleurs, la couleur est cre par dithering

La qualit de l'image est dgrade Avec 65 536 couleurs, le problme est moins sensible Lorsque le client utilise 16 millions de couleurs, il n'est pas utile de se servir de la palette "web-safe"22

La balise !DOCTYPE (document type declaration)La balise !DOCTYPE dfinit : La version HTML utilise (4.01, ou la norme XHTML 1.0) La DTD (pour Document Type Definition) utilis par le document Cette balise n'est pas obligatoire dans les pages HTML, mais il est recommand de l'utiliser, spcialement pour son importance dans la norme XHTML mergeante. Elle se positionne en en-tte du document (avant la balise ). Trois DTD sont utilisables pour le HTML :

Strict DTD : DTD Stricte (respect du HTML 4.01)

Transitional DTD : DTD transitionnelle (autorisant l'usage des balises obsoltes) Frameset DTD : DTD supportant les frames.

Pour vrifier la validit de vos pages, le W3C propose des services de validation des documents 23 l'adresse : W3C Validation HTML - http://validator.w3.org/.

DOCUMENT HTML

1. 2. 3.

Structure dun document HTML En-tte du document Corps du document

24

STRUCTURE DUN DOCUMENT HTML

Document HyperText Markup Language Entte Fin de Entte Page (corps) Fin de page (fin de corps) Fin du document HyperText Markup Language

25

EN-TETE DU DOCUMENT Les balises prsentes sont : permet de donner un titre une page, qui sera affich dans la barre de titre, les favoris, lhistorique et ventuellement dans les rsultats des moteurs de recherche. Il ne peut contenir des mises en forme. permet de :1. Redfinir une URL (Uniform Resource Locator) de base au sein d'un document HTML en cas d'erreur d'exploration (). Indiquer la base des liens des frames par l'attribut target, pour diriger vers une frame;

2.

permet d'insrer des Scripts ; permet d'insrer des styles CSS ; permet de donner des renseignements sur les pages pour pouvoir bien les rfrencer et bien les classer par les moteurs de recherche.26

EN-TETE DU DOCUMENT La plupart des outils de recherche sur Internet sont des moteurs de recherche d'indexation automatique comme AltaVista ( distinguer des annnuaires comme Yahoo), il faut prparer l'avance ses pages l'arrive des robots de ces moteurs de recherche. Lorsqu'on soumet l'adresse de son site un moteur, celui-ci l'enregistre puis envoie des "robots" aller se balader sur vos pages et enregistrer les informations contenues dans les meta balises que vous aurez pralablement plac entre les balises et de votre code HTML.

Indiquer la ou les langues du site

Indiquer la description du site (maximum 200 caractres).

Informer les moteurs du contenu du site avec des mots-cls (maximum 1000 caractres).

27

EN-TETE DU DOCUMENT Indiquer le nom de l'auteur

Indiquer l'email de l'auteur du site

Indiquer l'diteur html avec lequel la page a t construite.

Indique aux robots d'indexer ou non cette page: "all" ou "none".

Indique la date dexpiration: Expires"never" ou "date d'expiration".

Rafrachissement de la page.

Exemple: Rafrachit votre page toutes les "10" secondes.

Etc.28

CORPS DU DOCUMENT La balise dcrit le contenu de la page. Elle possde les attributs : BGCOLOR : Couleur du fond de l'cran (par dfaut : Blanc) TEXT : Couleur du texte (par dfaut : noir) LINK : Couleur des liens (par dfaut : bleu) VLINK : Couleur des liens dj visits (par dfaut : Mauve) ALINK : Couleur des liens activs, c'est dire quand le pointeur de la souris passe au-dessus (uniquement IE) (par dfaut : Rouge) BACKGROUND : Image (gif ou jpeg) en fond de page LEFTMARGIN : Largeur de la marge de gauche en pixels TOPMARGIN : Largeur de la marge du haut en pixels Exemple: Ma premire page

Texte de la page

29

FORMATAGE DU TEXTE

1. 2. 3. 4. 5. 6. 7. 8.

Paragraphe Saut de ligne Titre Ligne horizontale Section Formatage avec Indentation Texte prformat

30

PARAGRAPHE Un paragraphe commence par et se termine par . Le navigateur cre une ligne blanche au-dessus et en dessous de chaque paragraphe. La balise possde l'attribut ALIGN : JUSTIFY : Justifier le texte (texte assez long) LEFT : Aligne le texte sur la marge de gauche (par dfaut) RIGHT : Aligne le texte sur la marge de droite CENTER : Centre le texte entre les margesExemple : texte du paragraphe assez long texte du paragraphe Remarque: Un texte prsent entre et sans balises sera prsent avec les proprits de mise en forme par dfaut. 31

PARAGRAPHE (EXEMPLE)

32

LE RETOUR A LA LIGNE

Mon pome ne saffiche comme je lai crit : les retours la ligne ne sont pas respects.

33

LE RETOUR A LA LIGNE
Avec
je contrle laffichage de mon pome ligne par ligne

La balise
(Break) permet le retour la ligne

34

TITRES i=1 .. 6HTML propose 6 niveaux de titres gras : (grande taille) (petite taille) Les balises possdent galement l'attribut ALIGN Valeurs : RIGHT, LEFT et CENTER Exemple:Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 635

LIGNES HORIZONTALES La balise permet de tracer une ligne horizontale Attributs : ALIGN : Permet d'aligner la ligne horizontale sur la page. Valeurs : RIGHT, LEFT ou CENTER WIDTH : Spcifie la largeur de la ligne (en pixels ou % de largeur de la fentre) SIZE : Epaisseur de la ligne (de 1 10) NOSHADE : S'il est prsent (1), l'effet d'ombre (3d) est annul COLOR : Spcifie la couleur de la ligne (IE) Exemple :

36

SECTION La balise permet de dfinir l'alignement de plusieurs lments dune page : titres, textes, images, lignes horizontales, etc. Attribut : ALIGN Valeurs : RIGHT, LEFT et CENTER remplace la balise (HTML1.0) Exemple:

Aprs cette ligne il y a un saut de paragraphe. Aprs cette ligne il y a un saut de division.

37

Formatage avec Avec ... , vous pouvez formater comme vous le dsirez des passages de texte l'intrieur d'autres balises HTML (span = tendre). Derrire la mention style= les proprits de formatage dsires. La mention doit figurer entre guillemets. l'intrieur de la dfinition de format sont autorises les mentions de feuilles de style. Chaque attribution de proprit comporte un nom par exemple fontstyle et une valeur, par exemple italic, spars par deux points. Fermez chaque dfinition de format par un point virgule. Exemple : C'est mon premier paragraphe C'est mon premier paragraphe38

INDENTATION La balise sert mettre du texte en retrait : Dcalage vers la droite

Ce texte est en retrait. Ce texte est en double retrait. 39

TEXTE PREFORMATE Le texte compris entre les balises et est transcrit tel quil est crit dans le code Les espaces et tabulations sont respects Cest uniquement du texte : ni titres, ni paragraphes, Exemple :

40

* MISE EN FORME DES CARACTERES

1. 2. 3. 4. 5. 6.

MISE EN FORME LOGIQUE MISE EN FORME PHYSIQUE POLICE DE CARACTERES CARACTERES ACCENTUES CARACTERES SPECIAUX CHOIX DE LA POLICE DE CARACTERES

41

MISE EN FORME LOGIQUE Les balises de mise en forme logique indiquent la nature du texte Elles laissent le navigateur appliquer le formatage selon les prfrences de lutilisateur ou les valeurs par dfautLes balises de mise en forme logique : CITE : Citation. CODE : Code informatique. EM : Emphase (italique) KBD : Keyboard (clavier) STRONG : Faire ressortir du texte (gras) VAR : Variable DFN : Dfinition. Il est possible dimbriquer plusieurs balises

Exemple : Citation importante42

MISE EN FORME PHYSIQUELes balises de mise en forme physique prcisent la typographie qui sera utilise par le navigateur B : Affiche le texte en gras I : Met le texte en italique TT : Affiche le texte en police style machine crire U : Souligne le texte STRIKE : Barre le texte S : Barre le texte BIG : Police de caractres plus grande SMALL : Police de caractres plus petite SUB : Affiche le texte en indice SUP : Affiche le texte en exposant BLINK : Texte clignotant (uniquement sur Netscape) Exemple : 43 Texte en italique et en gras

POLICE DE CARACTERES La balise sert spcifier directement la police de caractres qui sera utilise par le navigateur Attributs : FACE : Prcise par ordre de priorit les noms des polices. Valeurs les plus frquentes : face="Arial, Helvetica, sans-serif" : Police droite face="Times New Roman, Times, serif" : Police srifie face="Courier New, Courier, mono" : Police non proportionnelle

face= "Georgia, Times New Roman, Times, serif" face= "Verdana, Arial, Helvetica, sans-serif" SIZE : Taille absolue (1 7) ou relative (-3 +4) de la police Valeur par dfaut : 3 COLOR : Couleur du texte Il existe une balise appele sense dfinir la police pour lensemble dela page. Elle ne fonctionne correctement que sur IE. Exemple :

44

POLICE DE CARACTERES (EXEMPLE)

45

CARACTERES ACCENTUESLes caractres accentus s'affichent de la mme manire quel que soit le poste client, lorsque le code ci-dessous est utilis dans le fichier source :Caractre Code HTML

Caractre

Code HTML

Attention: Les codes HTML sont case sensitive(distinction entre majuscules et minuscules) n'a pas la mme signification que

46

CARACTERES SPECIAUXLes caractres spciaux sont galement rendus par un code HTMLCaractre > < Espace inscable(non-breaking space)

Code HTML > <

Caractre & "

Code HTML &amp ; "

Si dans votre texte des caractres qui ont une signification particulire en HTML sont employs vous devez masquer ces caractres. Les caractres suivants doivent tre masqus de la faon suivante:

Remplacez le caractre < par la suite de caractres < Remplacez le caractre > par la suite de caractres> Remplacez le caractre & par la suite de caractres & Remplacez le caractre " par la suite de caractres " Remplacez les caractres et par les suites de caractres et

47

CHOIX DE LA POLICE DE CARACTERES La police par dfaut est gnralement juge "trop grande", les concepteurs de sites choisissent une police plus petite que le dfaut : ou pour le texte voire ou Verdana et Georgia sont des polices conues pour tre lues sur cran. Mais elles ne sont pas disponibles sur les anciens systmes d'exploitation (exemple: Windows 95) Verdana apparat trs grosse sous Windows et s'imprime de la mme manire Verdana est plus grosse qu'Arial,face="verdana, arial, helvetica, sans serif" est une erreur48

LES LISTES

1. Liste numrote ou liste ordonne 2. Liste puces ou liste non ordonne 3. Liste de dfinitions 4. Imbrication de listes

49

LISTE NUMEROTEE La balise sert dfinir une liste numrote (ordonne) Elle accepte lattribut TYPE qui permet de choisir le type dindice : 1.TYPE=1 : Nombres (par dfaut) : 1,2,3

2.TYPE=A : Majuscules :A,B,C 3.TYPE=a : Minuscules : a,b,c 4.TYPE=I : Chiffres romains majuscules : I,II,III 5.TYPE=i : Chiffres romains minuscules : i,ii,iii Chaque item de la liste est indiqu par Pour dfinir la valeur de dpart de la liste :

START=n

Liste avec titre

50

LISTE A PUCES

La balise

• sert dfinir une liste puces (non ordonne). Elle prend lattribut TYPE qui permet de spcifier la forme de la puce :1. 2. 3. TYPE=DISC : Disque plein (par dfaut) TYPE=CIRCLE : Disque vide TYPE=SQUARE : CarrChaque item de la liste est indiqu par

• 51

  LISTE A PUCES

  • Liste avec titre: avec Liste avec image Liste avec des puces colores de manire unique Liste avec des puces colores avec diffrentes couleurs52LISTE DE DEFINITIONS La balise (Definition List) permet de construire une liste de termes avec les dfinitions correspondantes. : le terme (Definition Term) : la dfinition du terme (Definition Description)Exemple: toile Objet cleste tudi par les astrophysiciens. Danseur confirm d'un ballet. Liste Ensemble dlments. 53IMBRICATION DE LISTESIl est possible dimbriquer plusieurs listes.Exemple:
  • Premier item
    • Dbut du premier item
    • Suite du premier item
  • Second item 54LIENS HYPERTEXTES1.L'ancre 2.Lien interne la page 3.Lien interne au site 4.Lien externe 5.Lien de messagerie55LANCRE La balise permet d'tablir un lien hypertexte.Attributs : HREF : Source du document (relative ou absolue) NAME : Nom de lancre (pour une cible seulement) TARGET : Cible (cadre ou fentre) pour l'affichage du document TITLE : Description du lien (identique l'attribut ALT pour une image) (IE) Pour afficher le document dans une nouvelle fentre du navigateur : Cliquez ici pour ouvrir une fentre 56LIENS INTERNES A LA PAGE Un lien interne permet de se dplacer l'intrieur d'une mme page Dfinir la cible d'un lien (l'ancre). Le nom ne doit pas contenir d'espaces, ni d'accents, ni de caractres spciaux. Associer un lien l'ancre.top57LIENS INTERNES AU SITEDe la mme manire, il est possible de construire des liens vers dautres pages : Lien vers une page situe dans le mme rpertoireCliquez ici Lien dans un rpertoire diffrentCliquez ici Lien dans un mme rpertoire et vers une ancre d'une autre pageCliquez ici Lien dans un rpertoire diffrent et vers une ancre d'une autre pageCliquez ici Lien vers un fichier en tlchargement Cliquez ici pour tlcharger le fichier58LIENS EXTERNES Un lien externe pointe vers un autre site Lattribut HREF indique ladresse complte de la page ou du fichier ainsi que le protocole de communication.Exemple: Lien externe vers un site http.Dcouvrez MySite Lien externe vers un serveur FTP.FTP MySite59LIENS DE MESSAGERIEUn lien de messagerie (e-mail) permet douvrir le logiciel de messagerie associ au navigateurEcrivez-moiAttributs : subject : sujet du mailcc : destinataires en copie body : texte du mailLes attributs sont prcds de ? et spars par &60LIENS DE MESSAGERIELien e-mail simple nom@site.com Lien e-mail avec sujet nom@site.com Lien e-mail avec sujet et texte dans le corps du message.nom@site.comLien e-mail envoy 2 destinataires. nom@site.com et nom2@site2.com 61IMAGES1. La balise 2. Aligner une image 3. Format des images62IMAGES La balise permet dinsrer une image sur la page. Attributs: SRC indique ladresse du fichier : Soit en relatif par rapport au fichier courant Soit en absolu par un lien htt WIDTH et HEIGHT : largueur et hauteur de limage en pixels ALT : Texte associ limage. Ce texte saffiche avant que limage ne se charge ou lorsque le visiteur dsactive le chargementdes images. Il est utilis par les lecteurs dcrans pour malvoyants. Avec Windows, il apparat sous la forme dune bulle daide (info-bulle) lorsque le pointeur de la souris passe au-dessus de limage. L'attribut ALT n'est pas compris sur Macintosh pour lequel il est prfrable d'employer TITLE BORDER : Taille de la bordure entourant de limage HSPACE et VSPACE : Espace vertical ou horizontal entre le texte et limage (en pixels)Pour mettre un lien sur une image, il suffit de placer l'image dans une ancre : 63ALIGNER UNE IMAGE : lattribut ALIGN Alignement du texte et de l'image : Attribut ALIGN Soit plusieurs lignes de texte peuvent safficher cot de limage: LEFT: Image gauche (texte droite) RIGHT: Image droite (texte gauche) Soit limage et le texte sont sur la mme ligne (petite image) TOP (ou TEXTTOP): le haut de limage est align sur le plus haut caractre de la ligne ABSMIDDLE : Le milieu de limage est align sur le milieu du texte ABSBOTTOM : le bas de limage est align sur le bas du caractre le plus bas du texte MIDDLE : Le milieu de limage est align sur la ligne de base du texte BASELINE (ou BOTTOM): Le bas de limage est align sur la ligne de base du texte (dfaut)64ALIGNER UNE IMAGE ALIGN (EXEMPLE)