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 & ; "
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
51
LISTE A PUCES