Algorithmique Et Développement Web

Algorithmique et Dveloppement web
Eric VEKOUT, Professeur dInformatique
TABLE DES MATIERES

PARTIE I : ALGORITHMIQUE ......................................................................................................... 6 I) 1) 2) a) b) c) 3) a) b) c) d) e) 4) a) b) c) 5) II) 1) 2) 3) III) 1) 2) 3) IV) Elments de base....................................................................................................................... 6 Structure gnrale dun algorithme ..................................................................................... 6 Constantes, Variables et Types de donnes ......................................................................... 7 Les types de donnes lmentaires................................................................................... 7 Les variables ..................................................................................................................... 7 Les constantes................................................................................................................... 8 Les oprateurs ...................................................................................................................... 8 Laffectation ..................................................................................................................... 8 Oprateurs sur les entiers et les rels ............................................................................... 8 Oprateurs sur les entiers et les boolens ......................................................................... 9 Oprateurs sur les caractres et les chanes ...................................................................... 9 Priorit des oprateurs ...................................................................................................... 9 Les structures conditionnelles............................................................................................ 10 La structure alternative ................................................................................................... 10 La structure de choix multiple ........................................................................................ 10 Les structures rptitives ................................................................................................ 11 Les commentaires .............................................................................................................. 12 Les structures de donnes ....................................................................................................... 12 Les enregistrements ........................................................................................................... 12 Les ensembles .................................................................................................................... 13 Les tableaux ....................................................................................................................... 13 Les fonctions et les procdures ............................................................................................. 15 Les fonctions ...................................................................................................................... 15 Les procdures ................................................................................................................... 16 Appel de fonctions et de procdures .................................................................................. 17 La rcursivit ......................................................................................................................... 18
V) Algorigrammes et excution la main dalgorithmes ...................................................... 19 1) a) Algorigrammes .................................................................................................................. 19 Structure alternative ....................................................................................................... 21 Page 2

b) c) d) 2) Structure de choix multiples ........................................................................................... 21 Structures rptitives ...................................................................................................... 22 Un exemple complet ....................................................................................................... 23 Excution la main dun algorithme ................................................................................. 23
PARTIE 2 : HTML ET FEUILLES DE STYLE (CSS) ..................................................................... 25 I) 1) 2) II) 1) 2) 3) 4) 5) 6) 7) 8) a) b) 9) a) b) c) d) Prsentation............................................................................................................................. 25 HTML ................................................................................................................................ 25 Les feuilles de style ........................................................................................................... 26 Concepts et lments de base du langage HTML .................................................................. 27 Les balises .......................................................................................................................... 27 Structure dun document HTML ....................................................................................... 27 Espaces, saut de ligne et tabulations .................................................................................. 29 Les commentaires .............................................................................................................. 29 Les caractres spciaux...................................................................................................... 30 Niveaux de titre .................................................................................................................. 35 Les listes ............................................................................................................................ 36 Les tableaux ....................................................................................................................... 38 Les balises de tableaux ................................................................................................... 38 Options du tableau .......................................................................................................... 38 Les liens hypertextes.......................................................................................................... 40 Crer un lien ................................................................................................................... 40 Le lien externe ................................................................................................................ 40 Le lien local : .................................................................................................................. 41 Le lien interne :............................................................................................................... 41
10) Les images ......................................................................................................................... 42 a) b) c) Afficher une image ......................................................................................................... 42 Lien sur une image ......................................................................................................... 43 Les arrires plans ............................................................................................................ 43
11) Les couleurs ....................................................................................................................... 44 12) Les balises META ............................................................................................................. 50 III) IV) Les frames ............................................................................................................................. 52 Les formulaires...................................................................................................................... 56 Eric VEKOUT, Professeur dInformatique Page 3

1) 2) 3) 4) 5) La balise FORM ................................................................................................................ 56 Les champs de saisie (balise INPUT) ................................................................................ 57 Les champs de slection sur liste (balise SELECT) .......................................................... 57 Les champs de texte (balise TEXTAREA) ........................................................................ 58 Un exemple de formulaire ................................................................................................. 58
V) Les feuilles de style : CSS ...................................................................................................... 59 1) a) b) c) 2) a) b) c) d) e) f) 3) a) b) c) d) e) f) 4) a) b) c) d) e) f) g) Syntaxe............................................................................................................................... 59 Slection multiple ........................................................................................................... 60 Slection Universelle ...................................................................................................... 60 Slection dlments imbriqus ..................................................................................... 60 Implantation du code ......................................................................................................... 62 Dclaration du type de document ................................................................................... 62 Style interne .................................................................................................................... 62 Style en ligne .................................................................................................................. 63 Style externe ................................................................................................................... 64 Style import .................................................................................................................. 65 Styles en cascade ............................................................................................................ 65 Units de mesure et positionnement des CSS ................................................................... 66 Units absolues ............................................................................................................... 66 Units relatives ............................................................................................................... 67 Positionnement relatif et absolu ..................................................................................... 67 Positionnement dun texte .............................................................................................. 67 Positionnement dun texte .............................................................................................. 68 Superposition des lments ............................................................................................ 68 Classes et ID ...................................................................................................................... 69 Les classes universelles .................................................................................................. 70 Les pseudo-classes dynamiques ..................................................................................... 71 Les pseudo-classes de lien.............................................................................................. 71 La pseudo-classe descendante ........................................................................................ 71 Les pseudo-classes de texte ............................................................................................ 72 Les pseudo-classes de langue ......................................................................................... 72 Les pseudo-classes de page ............................................................................................ 73 Page 4

5) a) b) c) d) e) f) g) h) i) Les proprits CSS ............................................................................................................ 73 Proprits de police ........................................................................................................ 73 Proprits de Textes et Paragraphes ............................................................................... 74 Proprits de couleurs et arrires plans .......................................................................... 74 Proprits de marges ...................................................................................................... 75 Proprits de bordures .................................................................................................... 75 Proprits des espaces intrieurs .................................................................................... 75 Proprits des tableaux ................................................................................................... 76 Proprits des listes ........................................................................................................ 76 Proprits de mise en page ............................................................................................. 76
Page 5
PARTIE I : ALGORITHMIQUE
I) Elments de base
1) Structure gnrale dun algorithme
La structure gnrale dun algorithme est la suivante : En-tte Dclarations Instructions Algorithme | fonction | procedure Nom_algorithme{ ({var}var1 :Type_v1, ,{var}varn:Type_vn){ : Type_retour}} {var liste_variables1:Type 1 var liste_variables n :Type_variables n const const1=valeur1,, const n=valeur n} Dbut . . . {retourner nom_variable_retour} Fin N.B : les mots crits en gras reprsentent des mots-cls du LDA (Langage de description dalgorithme) ; le contenu des accolades est optionnel. Nom_algorithme : cest le nom de votre algorithme. a doit tre un nom parlant qui indique ce que lalgorithme fait. (var1 :Type_v1,,var n : Type_v n) : cest la liste des paramtres (donnes en entre ou sortie) avec leurs types de votre algorithme. Lorsque le mot-cl var est utilis, cest pour spcifier que ce paramtre est en sortie. Type_retour : cest le type de donne du rsultat ventuel que lalgorithme fournit. Cest le type de sortie (si celui-ci est une fonction). Liste_variables : Type: cest la liste des variables locales (et leurs types) votre algorithme. Page 6 Eric VEKOUT, Professeur dInformatique

(const1=valeur1,, const n=valeur n) : cest la liste des constantes (et leurs valeurs) locales votre algorithme. nom_variable_retour : cest la variable contenant la valeur de retour de votre algorithme (si celui-ci est une fonction). Un algorithme est donc constitu de trois parties principales : Len-tte : Contient la nature (fonction ou procedure), le nom et ventuellement les paramtres et le type de retour de dalgorithme que vous crivez. Le mot-cl Algorithme est utilis dans le cas o lon veut crire lalgorithme gnral qui se sert de toutes les fonctions et procdures dfinies pour rsoudre le problme pos. Les dclarations : contient les dclarations des variables et des constantes de votre algorithme. Les mots-cls var et const prcdent respectivement une liste de variables ou une liste de constantes locales votre algorithme. Les instructions : contient lensemble des instructions qui constituent votre algorithme. Les mots-cls Dbut et Fin marquent respectivement le dbut et la fin des instructions de lalgorithme. Le mot-cl retourner prcde le nom de la variable contenant la valeur de retour de votre algorithme dans le cas o celui-ci est une fonction.
2) Constantes, Variables et Types de donnes

a) Les types de donnes lmentaires
Il existe quatre types de donnes lmentaires : Les entiers dont le nom du type est Entier Les rels dont le nom du type est Rel Les boolens dont le nom du type est Boolen Les caractres dont le nom du type est Car
N.B : Il existe dautres types de donnes comme les chanes de caractres (Chane). Mais ce nest pas exactement un type de donne lmentaire vu quil est construit partir dun ensemble de caractres. Une chane de caractre est dlimite par les caractres et .
b) Les variables
Une variable est un objet (reprsentant un espace mmoire) contenant une valeur dun type donn et dont le contenu est modifiable. Une variable est donc constitue : Dun identificateur reprsentant le nom de la variable. Dun type de donne Page 7

Dune valeur
Lidentificateur dune variable commence toujours par une lettre ou par un underscore (_) Exemple de dclaration dune variable locale appele nbr et de type Entier : var nbr : Entier
c) Les constantes
Une constante est un objet contenant une valeur fixe et non modifiable. La valeur affecte une constante lors de son initialisation est donc dfinitive. Elle possde aussi un identificateur qui suit les mmes rgles que ceux des variables.
3) Les oprateurs
a) Laffectation
Cest lopration qui permet daffecter une valeur une variable. Syntaxe : nom_variablevaleur ou expression ; Lexpression est une suite doprations sur des constantes ou des variables dj dclares. Cette valeur ou cette expression doit tre du mme type que la variable.
b) Oprateurs sur les entiers et les rels
Page 8
Algorithmique et Dveloppement web c) Oprateurs sur les entiers et les boolens
d) Oprateurs sur les caractres et les chanes
e) Priorit des oprateurs

Priorit la multiplication et la division.
Page 9
4) Les structures conditionnelles

a) La structure alternative
Elle permet dexcuter une suite dinstructions selon un ensemble de condition dfinies. Syntaxe : Syntaxe 1 : Si condition alors Action ; Fsi Interprtation : Action ne sexcute que si condition est vrai. Syntaxe 2 : Si condition alors Action1 ; Sinon Action2 ; Fsi Interprtation : Action1 ne sexcute que si condition est vrai sinon cest Action2 qui sexcute. N.B : condition est une expression boolenne ; Action est une suite dinstructions.
b) La structure de choix multiple

Elle permet dexcuter une suite dinstructions selon la valeur contenue dans la variable passe en paramtre la structure. Syntaxe : Selon le cas de nom_variable faire cas valeur 1 : Action 1 ; . . . cas valeur n : Action n ; dfaut : Action par dfaut ; Fin cas
Interprtation : Action {1n}sexcute respectivement si la valeur de nom_variable est valeur {1n}. Action par dfaut sexcute si nom_variable na aucune des valeurs numres plus haut.
Page 10
Algorithmique et Dveloppement web c) Les structures rptitives

Elles permettent de rpter lexcution dune suite dinstructions jusqu ce que la condition de fin de boucle soit vraie. La condition de fin de boucle peut sexprimer dune manire directe ou indirecte. Il existe trois structures rptitives selon les syntaxes suivantes : Tant Que condition Faire Action ; FinTantQue Interprtation : Action sexcute tant que condition est vrai. N.B : Ici la condition de fin de boucle est non(condition). Rpter Action ; Jusqu condition Interprtation : Action sexcute jusqu ce que condition prenne la valeur vrai. Pour indice allant de valeur_initiale valeur_finale par pas de increment Faire Action ; FinPour Interprtation : - Action sexcute tant que indice na pas atteint valeur_finale. - A la premire itration de la boucle, indice contient valeur_initiale. Au fur et mesure que la boucle sexcute, indice prend une valeur gale la valeur quelle (la variable indice) avait litration prcdente plus increment. La boucle fini de sexcuter lorsque indice atteint ou dpasse valeur_finale selon lincrment. - Si lexpression par pas de nest pas prcise, increment la valeur 1. N.B : Ici la condition de fin de boucle est indice <= valeur_finale ou indice >= valeur_finale selon que (increment < 0 et valeur_finale < valeur_initiale) ou (increment > 0 et valeur_finale > valeur_initiale)
Remarque : Lorsque la structure Tant QueFaire est utilise il est possible que Action ne sexcute pas, si condition est dj faux. Lorsque la structure RpterJusqu est utilise Action sexcute toujours au moins une fois.
Page 11
5) Les commentaires
Pour faciliter sa comprhension, un bon algorithme doit tre comment. Un commentaire nest pas pris en compte dans lexcution de lalgorithme. Pour insrer un commentaire dans votre algorithme, les syntaxes sont les suivantes : // Commentaire tenant sur une seule ligne /* Commentaire tenant sur plusieurs lignes */
II) Les structures de donnes

Une structure de donnes est un moyen de stocker et organiser des donnes pour faciliter laccs ces donnes et leur modification. Il existe plusieurs types de structure de donnes. Ds sa dfinition, une structure de donne est considre comme un type de donne au mme titre que les entiers par exemple. Donc la manire de dclarer une variable dun type enregistrement est la mme que celle dun entier. Il ny a aucune structure de donnes qui rponde tous les besoins, de sorte quil importe de connatre les forces et limitations de plusieurs de ces structures.
1) Les enregistrements
Un enregistrement est une structure de donne compose dune ou de plusieurs proprits la caractrisant. Pour dfinir un enregistrement, la syntaxe est la suivante : Type nom_structure = Enregistrement de Propriete_1 : Type_1 ; . . . Propriete_n : Type_n ; Fin Enregistrement nom_structure reprsente le nom de la structure de donne dfinir. Propriete_{1n} : Type_{1n} reprsente la liste des proprits de la structure de donne et leurs types (les proprits sont des variables). Page 12

Exemple : Type Individu = Enregistrement de Nom : Chane ; Prenom : Chane ; Age : Entier ; Fin Enregistrement var id : Individu
Laccs aux proprits dune variable dun type enregistrement se fait de la manire suivante : nom_variable.propriete Exemple : var n1, n2 : Chane Dbut n1 Roland ; id.Prenom n1; n2 id.Prenom ; Fin
2) Les ensembles
Un ensemble est une structure de donne qui reprsente un sous-ensemble dun type de donne. Syntaxe : Type Nom_ensemble=Ensemble de Type_donnee Exemples : Type Age = Ensemble de Entier Type Personne = Ensemble de Individu
3) Les tableaux
Un tableau est une structure de donne contenant un ensemble squenc de valeurs dun type de donnes bien prcis.
Page 13

Syntaxe : Type nom_tableau = Tableau[1n] de Type_donnee [1..n] reprsente la plage dindices des cellules du tableau contenant les donnes. Exemples : Type Groupe = Tableau[1n] de Chane Type Immeuble = Tableau[1n] de Bureau (Bureau tant une structure de donne ayant t dfinie lavance). Ici, n est une valeur quon peut dfinir explicitement (par exemple remplacer n par 5). On peut dclarer une variable dun type tableau sans dfinir lavance une structure de donne reprsentant ce type tableau. Exemple : var tab1 : Tableau[1n] de Entier Pour accder une donne dun tableau, la syntaxe est la suivante : var_tableau[indice] var_tableau reprsente le nom de la variable tableau. indice reprsente lindice de la case du tableau laquelle on veut accder.
On peut donc stocker, lire et modifier les donnes contenues dans les cellules dun tableau. Exemple1 : var tab1 : Tableau[1n] de Entier var n1, n2 : Entier Dbut n1 5 ; tab1[1] n1 ; n2 tab1[1] ; tab1[1] 9 ; Fin Exemple2 : var tab2 : Groupe var c1, c2 : Chane
Page 14

Dbut c1 Mvondo ; tab2[1] c1 ; c2 tab2[1] ; tab2[1] Ndogmo ; tab2[2] Moussa Fin N.B : Laffectation des valeurs dans un tableau se fait de faon squentielle. Donc lorsquon initialise un tableau, il faut remplir les valeurs en allant de la premire cellule la dernire.
III) Les fonctions et les procdures

1) Les fonctions
Une fonction est une opration ayant zro ou plusieurs paramtres en entre et retournant un rsultat dun type donn en sortie. Syntaxe : Fonction nom_fonction ({var_1 :Type_1,,var_n :Type_n}) : Type_retour var nom_variable_retour :Type_retour {var liste_variables1:Type 1 . . . var liste_variables n :Type_variables n const const1=valeur1,, const n=valeur n} Dbut Suite dinstructions ; Retourner nom_variable_retour ; Fin
Page 15

Exemple : Fonction max (a : Entier, b : Entier) : Entier // Cette fonction retourne le plus grand des nombres en entre var res : Entier Dbut Si (a<b) alors res b ; Sinon res a ; Fsi Retourner res ; Fin
2) Les procdures
Une procdure est une opration ayant zro ou plusieurs paramtres en entre et zro ou plusieurs rsultats en sortie. Syntaxe : Procedure nom_procedure ({{var}var_1 :Type_1,, {var}var_n :Type_n}) {var liste_variables1:Type 1 . . . var liste_variables n :Type_variables n const const1=valeur1,, const n=valeur n} Dbut Suite dinstructions ; Fin Le mot-cl var utilis sur un paramtre signifie que ce dernier reprsente une sortie pour la procdure : cest ainsi quune procdure peut fournir plusieurs rsultats en sortie.
Page 16

Exemple : Procedure Addition (a : Entier, b : Entier, var c : Entier) /* Cette procdure retourne dans la variable c le rsultat de laddition des paramtres a et b*/ Dbut c a + b; Fin
3) Appel de fonctions et de procdures

On peut faire appel une ou plusieurs fonctions ou procdures dans un algorithme. Il suffit juste dcrire le nom de la fonction ou de la procdure appeler lendroit voulu, en lui passant les paramtres requis pour lexcution de celle-ci en faisant attention de respecter les types de donne de chacun de ces paramtres. Il existe des fonctions ou procdures prdfinies prtes lemploi comme les procdures de lecture et dcriture qui permettent respectivement de lire les donnes que lutilisateur entre partir de lentre standard (le clavier) et dcrire un texte la sortie standard (lcran): ce sont les procdures - Lire ( nom_variable ) : la valeur lue au clavier est stocke dans la variable nom_variable - Ecrire (var_chaine) : le contenu de la variable chane de caractre var_chaine est affich lcran. Pour afficher le contenu des variables de types Entier et Rel laide de la procdure crire, on spare ces variables des chanes de caractres par une virgule. Exemple : Ecrire(a, +, b,=,c)
Exemple : Procedure Test( ) // Cette procdure teste si au moins lune des valeurs entres au clavier est ngative var a,b,c : Entier Dbut (1) (2) (3) Lire(a) ; // La valeur entre est affecte a Lire(b) ; Addition(a,b,c) ; // Appel de la procdure addition dfinie plus haut Page 17

(4) (5) Si (c > max(a,b)) alors // Appel de la fonction max dfinie plus haut Ecrire(a, et ,b, sont positifs) ; /* les valeurs de a et de b sont affiches lcran*/ Sinon Ecrire(Il existe au moins une valeur ngative entre , a, et ,b) ; Fsi Fin Remarque : On voit bien ici que lappel dune fonction fourni directement en retour le rsultat de cette fonction. Voir ligne n4.
(6) (7)
IV) La rcursivit
Une dnition rcursive est une dnition dans laquelle intervient ce que lon veut dnir. Un algorithme est dit rcursif lorsquil est dni en fonction de lui-mme. Cela veut dire quun algorithme est rcursif sil fait appel lui-mme dans le corps de ses instructions. Le danger avec un algorithme rcursif est quil faut toujours sassurer que la condition de terminaison de lalgorithme est bien dfinie et sera atteinte sinon on se retrouve dans une boucle infinie. Prenons par exemple le calcul des puissances dun rel : Fonction puissance(x :Rel, n : Entier) : Rel // Cette fonction retourne xn var p : Rel Dbut p x*puissance (x, n-1) ; //Selon que xn = x*xn-1 retourner p ; Fin Ici, on remarque que la condition de terminaison de la rcursivit est n=0 car x0=1. Donc lorsquon obtient ce rsultat, on remonte dans les calculs jusqu obtenir la valeur de xn. Or dans cet algorithme il ny rien qui contrle la valeur de n donc il ne se terminera jamais ! Eric VEKOUT, Professeur dInformatique Page 18

Une version corrige de cet algorithme est : (On garde len-tte et les dclarations et on suppose ici que n est toujours positif ou nul) Dbut Si n > 0 alors p x*puissance (x, n-1) ; Sinon p1; Fsi Retourner p ; Fin On voit bien ici que lorsque n prend la valeur 0, la fonction retourne la valeur 1 (car x0 =1). Donc partir de l on peut remonter jusqu lobtention de xn.
V) Algorigrammes et excution la main dalgorithmes

1) Algorigrammes
Cest une reprsentation graphique de lalgorithme. Pour le construire, on utilise des symboles normaliss. Ainsi, les instructions, les structures conditionnelles, les commentaires et etc. ont des symboles de reprsentation. Quelques symboles utiliss dans la construction dun algorithme :
Page 19
Page 20

Voici donc les reprsentations symboliques des structures conditionnelles dj tudies plus haut :
a) Structure alternative
Si condition Alors Action ; Fsi Si condition Action2 ; Fsi Alors Action1 ; Sinon
b) Structure de choix multiples
Selon le cas de nom_variable faire

nom_variable= valeur1
cas valeur 1 : Action 1 ; .

Action1
. . cas valeur n : Action n ; dfaut : Action par dfaut ;
nom_variable = valeur n
Fin cas
Action n
Action par dfaut
Page 21
Algorithmique et Dveloppement web c) Structures rptitives

Tant Que condition Faire Action ; FinTantQue Rpter Action ; Jusqu condition
Pour indice allant de valeur_initiale valeur_finale par pas de increment Faire Action ; FinPour Ici, on considre que : Vi= valeur_initiale Vf= valeur_finale pas= increment
Page 22
Algorithmique et Dveloppement web d) Un exemple complet

Soit lalgorithme suivant : Procedure exemple (a : Rel, b : Rel, var c : Rel) Dbut Si (a < b) Alors cba; Sinon cab; Fsi Fin Lalgorigramme correspondant cet algorithme est le suivant : Dbut
a<b
cb-a
ca-b
Fin
2) Excution la main dun algorithme

Excuter un algorithme la main cest tablir ltat de ses variables aprs chaque instruction et en fonction des donnes en entre. Pour se faire, il suffit premirement de numroter chaque instruction de lalgorithme, puis de tracer un tableau crois ayant une entre pour chaque variable et une autre pour chaque instruction (chaque instruction est identifie par son numro dordre et elles sont classes dans le tableau par ordre dapparition) ; lintersection de ces deux entres, on a la valeur de la variable aprs lexcution de linstruction en cours. N.B : On utilise aussi lexpression drouler lorsquon veut dire excuter la main.
Page 23

Exemple : Procedure Essai(x : Entier, y : Entier, var t : Tableau[1n] de Entier) var i : Entier Dbut (1) i2; (2) Pour i allant de 1 y faire (3) t[i] x + i; FinPour Fin Pour pouvoir drouler cet algorithme, il faut premirement attribuer des valeurs aux donnes en entre (ces valeurs sont attribues dans le programme faisant appel cet algorithme). On prendra donc x=1 et y=4. Linstruction 0 sert vrifier ltat des variables pr-excution. ; On obtient donc le tableau suivant : Instruction 0 1 2 3 2 3 2 3 2 3 Variable x 1 1 1 1 1 1 1 1 1 1 y 4 4 4 4 4 4 4 4 4 4 i 2 0 0 1 1 2 2 3 3 t t[0]=1 t[0]=1 t[1]=2 t[1]=2 t[2]=3 t[2]=3 t[3]=4 Remarque : Ici on retrouve quatre fois les instructions (2) et (3) parce que la boucle pour reprsente par ces instructions sexcute quatre fois (i va de 1 4).
Page 24
PARTIE 2 : HTML ET FEUILLES DE STYLE (CSS)

I) Prsentation
1) HTML
Le HTML ( HyperText Mark-Up Language ) est un langage dit de marquage (de structuration ou 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. Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de dcrire la mise en page et la forme d'un contenu rdig en texte simple. Le langage HTML permet notamment la lecture de documents sur Internet partir de machines diffrentes, grce au protocole HTTP, permettant d'accder via le rseau des documents reprs par une adresse unique, appele URL (Uniform Resource Locator). Une page HTML est un simple fichier contenant du texte format avec des balises HTML. Par convention l'extension donne au fichier est .htm ou .html, mais une page web peut potentiellement porter dautres extensions notamment :

.asp pour une page gnre dynamiquement en ASP (Active Server Pages) ; .cgi pour une page gnre dynamiquement avec des CGI (Common gateway Interface) ; .php, .php3 ou .php4 pour une page gnre dynamiquement en PHP ; .pl pour une page gnre dynamiquement en Perl (Practical Extraction and Report Language) ; etc.
Une page web peut tre construite partir du plus basique des diteurs de texte (une application bloc-notes par exemple), mais il existe des diteurs beaucoup plus volus. Les diteurs WYSIWYG (What You See Is What You Get, littralement ce que vous voyez est ce que vous obtenez) sont des diteurs graphiques permettant de travailler sur une page web telle qu'elle sera affiche sur un navigateur quelques dtails prs. Grce ce genre d'diteurs il est possible d'ajouter des balises par simple clic et d'en modifier les Eric VEKOUT, Professeur dInformatique Page 25

attributs en ditant leurs proprits dans un formulaire. Pour autant, afin d'utiliser au mieux ce genre d'diteur, une connaissance pralable du HTML est tout de mme trs utile. Il existe galement des diteurs permettant d'diter le code HTML en affichant les balises, les attributs et leurs valeurs avec diffrentes couleurs pour une meilleure lecture et proposant parfois des outils pour vrifier la validit du code HTML (par exemple Dreamweaver dAdobe).
2) Les feuilles de style

Le principe des feuilles de style consiste regrouper dans un mme document des caractristiques de mise en forme associes des groupes d'lments. Il suffit de dfinir par un nom un ensemble de dfinitions et de caractristiques de mise en forme, et de l'appeler pour l'appliquer un texte. Les feuilles de style ont t mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la prsentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de dfinir le style d'un texte, toutefois chaque lment possde son propre style, indpendamment des lments qui l'entourent. Grce aux feuilles de style, lorsque la charte graphique d'un site compos de plusieurs centaines de pages web doit tre change, il suffit de modifier la dfinition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier ! Elles sont appeles feuilles de style en cascade (en anglais Cascading Style Sheets ) car il est possible d'en dfinir plusieurs et que les styles peuvent tre hrits en cascade. Les feuilles de style permettent notamment :
d'obtenir une prsentation homogne sur tout un site en faisant appel sur toutes les pages une mme dfinition de style ; de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ; une plus grande lisibilit du HTML, car les styles sont dfinis part ; des chargements de page plus rapides, pour les mmes raisons que prcdemment ; un positionnement plus rigoureux des lments.
Page 26
II) Concepts et lments de base du langage HTML

1) Les balises
Une balise est un marqueur produisant un effet particulier dans une page HTML et selon les valeurs implicites ou explicites de ses attributs (si elle en possde). Les balises HTML fonctionnent par paire afin d'agir sur les lments qu'elles encadrent. La premire est appele balise d'ouverture (parfois balise ouvrante) et la seconde balise de fermeture (ou fermante). La balise fermante est prcd du caractre /) : <balise> contenu </balise> . Toutefois il existe des balises jouant la fois les deux rles (donc ne fonctionne pas par paire) et elles ont la forme : <balise / >. Ce sont des balises de la norme XHTML. Un attribut est un lment, prsent au sein de la balise ouvrante, permettant de dfinir des proprits supplmentaires permettant le paramtrage la balise. Les attributs se prsentent la plupart du temps comme une paire cl=valeur, mais certains attributs ne sont parfois dfinis que par la cl. Les valeurs sont gnralement mises en deux guillemets ("et") : <balise attr="val"> contenu </balise> (attr est la cl de lattribut et val sa valeur). Les balises peuvent tre imbriques de manire hirarchique et dans ce cas, leurs effets sont cumuls : <balise1><balise2> Contenu 1 </balise2> Contenu 2 </balise1>. Remarque : - Contenu 1 est affect par balise1 et balise2 alors que Contenu 2 nest affect que par balise2. - Limbrication hirarchique des balises imposes quelles soient fermes dans lordre inverse de leur ouverture (balise1 est la premire ouverte dans la hirarchie dimbrication donc a doit tre la dernire tre ferme : balise2 se ferme donc avant balise1 bien quayant t ouverte aprs).
2) Structure dun document HTML

Un document HTML se prsente gnralement de la manire suivante : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Titre de la page</TITLE> Eric VEKOUT, Professeur dInformatique Page 27

</HEAD> <BODY> Contenu de la page </BODY> </HTML> < ! DOCTYPE > est utilis pour dclarer le prologue du type de document. <HTML> </HTML> indique que nous allons crire du HTML. En effet, le HTML nest pas le seul langage connu par les navigateurs, il existe notamment le JavaScript. <HEAD></HEAD> indique len-tte du document qui peut contenir par exemple le titre de la page, les mta-informations, etc. <BODY></BODY> indique le contenu de la page afficher dans le navigateur. La dclaration du prologue de type de document indique la DTD (Document Type Definition) utilise, c'est--dire la rfrence des caractristiques du langage utilis. Le tableau ci-dessous rcapitule les dclarations pour les principales versions du langage HTML :
Version HTML 2.0 HTML 3.2 HTML 4.01
Dclaration <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

XHTML 1.0
XHTML 1.1
Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1loose.dtd"> Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Page 28
3) Espaces, saut de ligne et tabulations

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne (ci-aprs appels ou plus exactement il considre une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme un seul espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilit, sans modifier l'apparence de la page HTML dans le navigateur Il existe une exception pour le code contenu dans des balises, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) N.B : il existe par ailleurs une exception pour le code contenu dans des balises <PRE>, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) Les deux codes HTML suivant produisent donc le mme rsultat : Apprendre HTML le Apprendre le HTML
Le langage HTML possde par contre des lments permettant expressment de dfinir chacun de ces lments de mise en forme :
Espace inscable : il s'agit d'un espace ne pouvant tre bris par une fin de ligne. Sa reprsentation en HTML est . Saut de ligne manuel : il s'agit d'un saut de ligne explicite. Sa reprsentation en HTML est <br> (<br /> pour tre conforme au XHTML).
4) Les commentaires
Il est possible d'ajouter des lments d'information dans une page web sans que ceuxci soient affichs l'cran grce un jeu de balises spcifique, appel balises de commentaires :  Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent galement servir commenter du code HTML. Eric VEKOUT, Professeur dInformatique Page 29

N.B : il existe une exception pour le code contenu dans des balises <PRE>, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.)
5) Les caractres spciaux

Les normes HTML demandent de respecter le codage des caractres ASCII 7 bits, c'est--dire que les caractres accentus ne sont pas autoriss. Pourtant, les navigateurs actuels reconnaissent les caractres accentus, ainsi vous pouvez entrer des caractres accentus directement sous votre diteur de texte, mais votre page sera vraisemblablement illisible dans la plupart des pays du monde ... Pour coder un caractre accentu, on entre une combinaison prcde du caractre & et termine par un point-virgule (;). Voici la liste reprsentations HTML des caractres ASCII de 128 255 : Caractre " & Code ISO " & Page 30 < Code HTML " & €

espace ¡ ¢ £ ¤ ¥ &Yuml; ¡ ¢ £ ¤ &yen Page 31 > &oelig;

¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¦ § ¨ © ª « ¬ ® &masr; ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ Page 32

¿ À Á Â Ã Ä Å &#198 Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × ¿ À Á Â Ã Ä Å &Aelig Ç È É Ê Ë Ì Í Î Ï ð Ñ Ò Ó Ô Õ Ö × Page 33

Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð Ø Ù Ú Û Ü Ý þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð Page 34

" & ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ " & ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ " & < >
6) Niveaux de titre
Il existe des balises spcialement conues pour raliser des titres : ce sont les tags <Hn> o n est un nombre entre 1 et 6. Ce sont des commandes d'en-ttes ; elles sont utilises pour diffrencier les niveaux d'un document comme les sections d'un article de journal.
Page 35
Code HTML <HTML> <HEAD> <TITLE>des titres</TITLE> </HEAD> <BODY> <H1>Titre 1</H1> <H2>Titre 2</H2> <H3>Titre 3</H3> <H4>Titre 4</H4> <H5>Titre 5</H5> <H6>Titre 6</H6> </BODY> </HTML>
Aperu dans le navigateur
Titre 1
Titre 2
Titre 3
Titre 4
Titre 5
Titre 6
Remarque : La taille de la police de caractres et les styles pour reprsenter les balises <Hn> ne sont pas uniformises parmi les navigateurs. Il ne faut donc pas en abuser et prfrer les balises <FONT>.
7) Les listes
Il existe 6 catgories de listes en HTML : 1. Listes numrotes (Ordered Lists) : Chaque ligne de texte est prcde gnralement par un numro. HTML renumrotera automatiquement la liste si vous modifiez l'ordre des lments. 2. Listes non ordonnes ou puces (Numbered lists) : Chaque lment est prcd par une pastille. 3. Listes imbriques (Nested lists) : Vous pouvez insrer des sous-listes dans des listes. 4. Listes de dfinitions (Definition list) : Affiche une liste de mots avec leur dfinition en-dessous. 5. Listes de rpertoires (Directory lists) : Une liste de rpertoires apparait en plusieurs colonnes sur une page. 6. Liste de menus (Menu list) : Les lments dans une liste de menus sont justifis gauche l'un en-dessous de l'autre, et ne sont pas indents.
Page 36
Description
Commandes <OL> <LI>Element1 <LI>Element2 </OL> <UL> <LI>Element1 <LI>Element2 </UL> <DIR> <LI>Element1 <LI>Element2 </DIR> <MENU> <LI>Element1 <LI>Element2 </MENU> <DL> <DT>Element1 <DD>description1 <DT>Element2 <DD>description2 </DL> <OL> <LI>ElementA <UL> <LI>Element1 <LI>Element2 </UL> </OL>
Visualisation 1. Element1 2. Element2
Liste ordonne
Element1 Element2
Liste non ordonne
Element1 Element2
Liste de rpertoires
Element1 Element2
Liste de menus
Element1 description1 Element2 description2
Liste de dfinition
1. ElementA

Liste imbriques
Element1 Element2
Remarques : - Pour les listes non ordonnes, il est possible de remplacer les puces par un autre symbole en utilisant l'option TYPE dans la balise <UL>. par exemple : <UL TYPE=disc,circle ou square> ... </UL> Eric VEKOUT, Professeur dInformatique Page 37

- Pour les listes ordonnes, il est possible de changer le type de numrotation avec l'option TYPE.On aura ainsi soit des lettres, soit des chiffres romains. par exemple : <OL TYPE=A,a,I ou i> ... </OL> Il est aussi possible de commencer l'incrmentation la valeur voulue grce la commande START. par exemple : <OL START=4> ... </OL> commencera la liste au quatrime lment. - Il est possible de donner un titre une liste avec la commande <LH> qui se place avant la balise de dbut de liste. Par exemple : <UL><LH>Titre de la liste> ... </UL>
8) Les tableaux
L'affichage de tableaux dans des documents cods en HTML peut sembler complexe, mais ils se rvlent trs utiles dans de nombreux cas. Les tableaux sont constitus de cellules, situes dans des colonnes (lments verticaux) et des ranges (lments horizontaux). Les cellules peuvent contenir tous les lments Html dj passs en revue (texte, images, liens, arrire-plans, tableaux).
a) Les balises de tableaux

1. <TABLE>...<TABLE> : Permet d'ouvrir un tableau 2. <TR>...<TR> (table Row) : Permet de dfinir une range du tableau. 3. <TD>...<TD> (table Data) : Permet d'insrer des lments qui seront affichs dans la cellule. 4. <TH>...<TH> (Table Header) : Affiche un titre de colonne ou de range qui apparait centr en gras sans une cellule donne. 5. <CAPTION>...<CAPTION> : insre un titre global au tableau.
b) Options du tableau
BORDER : option de la balise <TABLE>. Epaisseur du cadre extrieur en pixels. Avec la valeur 0, le cadre est invisible. CELLSPACING : option de la balise <TABLE>. Epaisseur en pixels autours de chaque cellule. CELLSPADDING : option de la balise <TABLE>. Epaisseur en pixels entre l'lment de la cellule et le cadre. WIDTH : option de la balise <TABLE>. Largeur occupe par le tableau en pixels ou en pourcentages. Eric VEKOUT, Professeur dInformatique Page 38
WIDTH : option de la balise <TD>. Largeur occupe par une colonne en pixels ou en pourcentages. ALIGN : option de la balise <CAPTION>. pour la valeur TOP, affiche le titre au-dessus ; BOTTOM, affiche en-dessous. ALIGN : option des balises <TD>,<TR>,<TH>. pour les valeurs LEFT, RIGHT et CENTER, affiche les lments de la cellule gauche, droite ou au centre. VALIGN : option des balises <TD>,<TR>,<TH>. Aligne le contenu de la cellule en haut, en bas ou au milieu pour les valeurs TOP, BOTTOM et MIDDLE. NOWRAP : option des balises <TD>, <TH>. Empche le retour la ligne dans la cellule. COLSPAN : option de la balise <TD>, <TH>. prend pour valeur un chiffre qui est le nombre de colonnes qu'occupera une seule et unique cellule. ROWSPAN : option de la balise <TD>, <TH>. prend pour valeur un chiffre qui est le nombre de lignes qu'occupera une seule et unique cellule.
Faisons un exemple pour tre + clair. Prenons le code suivant : <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=1> <CAPTION ALIGN=TOP>titre du tableau</CAPTION> <TR ALIGN=LEFT VALIGN=TOP> <TH COLSPAN=3 ROWSPAN=1 NOWRAP>Elements A</TH> <TH>Elements B</TH> </TR> <TR> <TD>Element A1</TD> <TD WIDTH="33%">Element A2</TD> <TD>Element A3</TD> <TD>Element B1</TD> </TR> </TABLE>
Page 39

Cela donne : titre du tableau Elements A Element A1 Element A2 Elements B Element A3 Element B1
Les tableaux, c'est tout simple ! Pour qu'il soit encore plus clair, on peut rajouter de la couleur en utilisant l'option BGCOLOR. par exemple : <TD BGCOLOR="#C0C0C0"> met en gris le fond de la cellule.
9) Les liens hypertextes

Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, gnralement soulign (ou une image) de vous transporter : Vers un autre endroit du document. Vers un autre fichier html situe sur votre ordinateur. Vers un autre ordinateur situe sur le web. L'hypertexte permet, dans le cas qui nous intresse, de faire des choix par le simple clic de la souris. Un sujet vous intresse en particulier ? Cliquez ici pour accder un autre document correspondant ce sujet. L'hypertexte rseau consiste en un livre clat. On peut ainsi pointer des textes, des images, du son, de la vido ...
a) Crer un lien
La commande qui permet de raliser des liens hypertextes est toujours la mme, <A>. Il faut toutefois respecter la syntaxe correcte ; ainsi il faut connaitre l'URL (l'adresse) exacte d'un document.
b) Le lien externe
Tout ordinateur situ sur le rseau Internet possde une adresse ou un URL (Universal Ressource Locator). Html permet d'accder toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type : http://www.yahoo.fr http://www.minfopra.gov.cm/carto
Page 40

Elles commencent toujours par le protocole http:// pour Internet. Ainsi pour pointer vers le site Yahoo, il suffit de taper : <A HREF="http://www.yahoo.fr"> page yahoo </A>
c) Le lien local :
L'organisation classique, et plus que conseille, d'un site Web consiste regrouper l'ensemble des lments de celui-ci (fichiers htm, images, ...) dans un mme rpertoire. Vous pourrez ainsi "transporter" aisment votre site pour le prsenter sur un autre ordinateur et but ultime, le charger sur un serveur. Cette faon de procder est la plus aise et vous vitera pas mal de problmes. Le code crire est donc par exemple : <A HREF="chemin_acces/page.htm"> page locale </A>
d) Le lien interne :
Des liens peuvent aussi pointer vers un endroit prcis du mme document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor]. Point d'ancrage <A NAME="***"> ... </A> <A HREF="#***"> ... </A> Ceci est une cible Lien vers la cible *** dans la mme page Lien vers la cible *** dans une autre page
Lien vers une ancre dans la mme page
Lien vers une ancre dans une autre page
<A HREF="URL#***"> ... </A>
Plusieurs liens l'intrieur d'un mme document supposent que ce document prsente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on prfrera gnralement cette technique le dcoupage d'un longue page en un ensemble de plusieurs pages de dimension plus rduite. Remarques : - pour modifier la couleur des liens hypertextes, il faut modifier la balise <BODY> en ajoutant des options TEXT,LINK,VLINK et ALINK pour le texte de la page, les liens, les liens dj cliqu et les liens au moment du clic. Par exemple : <BODY TEXT="#000000" LINK="#FF9900" VLINK="#66FF99" ALINK="#66FF99>
Page 41
10) Les images

a) Afficher une image
C'est la commande <IMG> qui permet d'afficher des images au sein d'une page code en HTML et de la positionner l'endroit voulu dans le texte. Cette commande n'a pas besoin d'tre ferme. Par exemple, pour afficher l'image logomain.gif,on utilise la commande : <IMG SRC="../logomain.gif">
Par dfaut, le bas de l'image est align avec le bas du texte. Ce sont les options qui vont permettre d'aligner les images comme dsir.
SRC Cette option contient l'adresse ou est stocke l'image. En effet, en Html, l'image ne fait pas partie de votre document. Le browser va la chercher l'adresse indique. Gnralement, on place les images dans le mme rpertoire que les pages Html. On peut donc utiliser la mme image plusieurs fois dans un mme document. ALT Cette option permet d'afficher un texte la place de l'image quand elle n'a pas encore t charge. Cela est trs utile pour des images lourdes. <IMG SRC="../logomain.gif" ALT="logo"> WIDTH et HEIGHT Ce sont la largeur et la hauteur de l'image en pixels. Cela permet la fluidit de l'affichage car le navigateur doit connaitre l'emplacement rserver l'image pour pouvoir continuer afficher le texte. <IMG SRC="../logomain.gif" HEIGHT=65 WIDTH=66> BORDER Taille du cadre autour de l'image en pixels (par dfaut 1). Cela permet de mettre en valeur des images quand elles sont dans un lien. <IMG SRC="../logomain.gif" BORDER=0> ALIGN Alignement de l'image. prend les valeurs LEFT, RIGHT, MIDDLE, TOP et BOTTOM. On prfre utiliser cette balise pour centrer l'image verticalement ; pour centrer horizontalement, on encadre l'image par les balises <CENTER><IMG SRC="../logomain.gif" ALIGN=TOP><CENTER> Page 42
VSPACE HSPACE Espace vertical et espace horizontal. Permet de dterminer en pixels l'espace laiss libre autour de l'image.
b) Lien sur une image

Il est sympathique de pouvoir cliquer sur des images pour avancer dans un site. Pour cela, il suffit de combiner les balises vues prcdemment : <A HREF="http://www.yahoo.fr"><IMG SRC="../logomain.gif" ALT="logo" HEIGHT=65 WIDTH=66></A>
On remarque que l'image est entoure d'une bordure. Pour la supprimer, on utilise l'option BORDER=0. <A HREF="http://www.yahoo.fr"><IMG SRC="../logomain.gif" BORDER=0 ALT="logo" HEIGHT=65 WIDTH=66></A>
c) Les arrires plans

Il est possible d'afficher une couleur ou une image en guise de fond sur votre page.
couleur de fond Il suffit de modifier la balise <BODY> en <BODY BGCOLOR>. Loption BGCOLOR est suivie dans une couleur au format RGB (Ce code est constitu d'un dise (#) suivi de trois nombres au format hexadcimal compris entre 00 et FF.) Par exemple : < BODY BGCOLOR="#555555"> ... <BODY> dfinit un fond gris. image de fond Semblable la commande <BODY BGCOLOR>, la commande <BODY BACKGROUND> permet d'afficher une image qui sera rpte sans cesse en motif de fond. Il faut comprendre que cette image doit tre enregistre auparavant dans un des deux formats, JPEG ou GIF. Aussi, il faut veiller ce qu'elle soit d'une couleur appropri afin que le texte qui viendra s'ajouter par-dessus puisse tre lisible malgr tout. Page 43

<BODY BACKGROUND> doit tre place au tout dbut de la section <BODY>, remplaant cette dernire. Par exemple < BODY BACKGROUND="fichier"> ... </BODY> il est conseiller de combiner les deux options pour que le navigateur affiche une couleur le temps qu'il charge l'image : <BODY BACKGROUND="fond.jpg BGCOLOR="FFFFFF"> Les attributs de la balise <BODY> sont : Attribut Effet Visuel Affiche l'image en arrire-plan BACKGROUND="image" Affiche la couleur demande en BGCOLOR="nom_de_la_couleur ou arrire-plan #XXXXXX" Couleur des liens hypertexte LINK="couleur" Couleur du lien actif ALINK="couleur" Couleur des liens dj visits VLINK="couleur" Couleur du texte par dfaut TEXT="couleur" Les couleurs sont dfinies selon la notation #RRVVBB, o RR, VV et BB reprsentent respectivement un nombre hexadcimal entre 00 et FF pour le Rouge, le Vert et le Bleu.
11) Les couleurs

Les couleurs en HTML sont dfinies par 3 nombres hexadcimaux reprsentant les tons de Rouge, de Vert et de Bleu (selon le codage RGB (Red Green Blue, en franais : RVB) de la couleur choisie. Ainsi la syntaxe de codage d'une couleur en HTML est la suivante : couleur="#RRVVBB" RR, VV et BB reprsentent respectivement un nombre hexadcimal entre 00 et FF pour le Rouge, le Vert et le Bleu. Ainsi, 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 ci-dessous, pour lesquelles un nom intelligible a t donn. Il est donc possible (et conseill) d'appeler une couleur de la faon suivante : couleur="nom_de_la_couleur" N.B : couleur reprsente le nom dun attribut de couleur de nimporte quelle balise le prenant en compte. La table des couleurs usuelles est donc la suivante : Eric VEKOUT, Professeur dInformatique Page 44

Nom de la couleur aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod Eric VEKOUT, Professeur dInformatique Codage RVB #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B Page 45

darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold Eric VEKOUT, Professeur dInformatique #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Page 46

goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray Eric VEKOUT, Professeur dInformatique #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 Page 47

lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab Eric VEKOUT, Professeur dInformatique #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 Page 48

orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue Eric VEKOUT, Professeur dInformatique #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB Page 49

slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32
12) Les balises META

Les balises META sont des balises trs particulires du langage HTML. Elle permet notamment de rfrencer votre site sur des moteurs de recherche tels que Altavista ou Hotbot. Quand on sait que plus de la moiti des utilisateurs du Web passent par des moteurs de recherche, il est important de soigner le rfrencement de son site pour y apparatre de faon correcte et si possible en rang utile. Comme ces balises apportent des informations sur le contenu de la page, il faut qu'elles soient places dans la zone d'en-tte. Les balises META doivent donc se situer entre les balises <HEAD> et </HEAD>. La liste des balises META est la suivante : Eric VEKOUT, Professeur dInformatique Page 50

1. <META NAME="keywords" CONTENT="mot-cl1,mot-cl2,mot-cl3,..."> Cette balise permet d'indiquer les principaux mots-cls qui se rfrent la page. Les motscls ne doivent pas tre spars par des espaces mais juste des virgules. On peut mettre jusqu' 1000 mots ; c'est largement suffisant pour dcrire la page. Les majuscules et minuscules ont une importance pour les moteurs de recherche ; il faut donc prfrer mettre les mots courants en minuscule. La difficult est de trouver les mots correspondants la page. Mettez-vous la place de vos lecteurs potentiels. Quels mots, quels synonymes, quelles alternatives peuvent tre utiliss pour dcrire votre site? 2. <META NAME="description" CONTENT="une brve description de la page"> La description doit dcrire le plus fidlement possible le contenu du site. Vous pouvez utiliser jusqu' 150 mots. 3. <TITLE>...</TITLE> Bien qu'elle n'en ait pas l'air, cette balise est srement la plus important car c'est la premire d'un lecteur potentiel lira. Le titre ne doit pas excder 8 mots ; soyez donc concis. On dit galement que le fait de reprendre un ou des mot(s)-cl(s) dans le titre de toutes les pages d'un site est trs favorable pour un meilleur classement. 4. <META NAME="author" CONTENT="nom de l'auteur"> Cette balise est trs peu utilise par les moteurs de recherche. Seul Nomade indique le nom de l'auteur. Nanmoins qu'elle fiert de signer une page ! 5. <META NAME="Copyright" CONTENT="Copyright date nom"> Cette balise est peu utilise mais invite respecter le copyright lorsqu'elle est prsente. 6. <META NAME="Generator" CONTENT="nom de l'diteur Html utilis"> Cette balise n'a aucun intrt pour le rfrencement sur les moteurs de recherche. Elle est seulement utile pour les socits des diteurs de logiciel HTML. 7. <META NAME="Distribution" CONTENT="Global ou Local"> Indique si le document est largement diffus (Global) ou s'il est diffusion restreinte (local). 8. <META NAME="Rating" CONTENT="Destination de votre audience"> Permet de dfinir le contenu de votre site. Les apprciations sont General ou Mature ou Restricted ou 14 years pour respectivement tout public, adulte, accs restreint ou 14 ans. 9. <META NAME="Robots" CONTENT="instructions pour les robots"> Par cette balise vous pouvez indiquez aux robots de recherche automatique si vous souhaitez que votre site soit ou ne soit pas index par eux. Les instructions sont : - All (dfaut) permet aux robots d'indexer vos pages et de suivre les liens hypertextes d'une page l'autre. - None dira aux robots de ne pas indexer vos pages et de ne pas suivre les liens. Eric VEKOUT, Professeur dInformatique Page 51

- Index indique que vos pages peuvent tre indexes par les robots. - NoIndex pour que le robot ne procdent aucune indexation. - Follow donne la permission aux robots de suivre les liens hypertextes des pages - NoFollow pour le contraire. Exemples : <META NAME="Robots" CONTENT="Index,NoFollow"> 10. <META HTTP-EQUIV="Content-language" CONTENT="fr"> Cette balise dclare la langue utilise dans le document Html. Elle est trs utile maintenant que des moteurs de recherche anglophones ont inclus la langue dans leurs critres de recherche. 11. <META HTTP-EQUIV="Reply-to" CONTENT="votre adresse e-mail ou URL de dpart"> Permet aux internautes qui ont enregistr votre page de vous recontacter. 12. <META HTTP-EQUIV="Refresh" CONTENT="x;URL="adresse"> Cette balise META charge automatiquement la page spcifie l'attribut URL aprs un dlai de x secondes. Elle est frquemment utilise pour redirectionner un visiteur lors que l'adresse du site a t modifie. 13. <META HTTP-EQUIV="expires" CONTENT="Sat, 01 Apr 2000 13:15:00 GMT"> Cette balise META "dit" au navigateur la date laquelle la page Html doit tre considre comme prime. C'est aussi la date laquelle votre page va tre supprime de la base de donnes des moteurs de recherche. 14. <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> Si vous introduisez cette petite ligne dans votre page, youpla boum, Netscape de gardera pas en local une version de votre page, cela le forcera donc charger la page chaque fois et vous serez sr que le visiteur verra la bonne page ! (Attention c'est plus lent aussi...) 15. <META HTTP-EQUIV="Window-target" CONTENT="_top"> a c'est trs pratique ! Cela force le browser charger la page dans une nouvelle fentre. (Pour votre page d'accueil par exemple)
III) Les frames

Il existe deux faons de structurer un site : utiliser un tableau dans lequel une colonne reprend le contenu du site ou utiliser des frames. Ils permettent de diviser l'cran en fentres. Les frames ont l'avantage vident que l'on peut facilement rajouter des pages ou modifier le site facilement ; il n'y qu'une seule page changer. Contrairement aux tableaux o il faut changer chaque page. Mais il faut aussi dire que les frames sont dlicats et dangereux utiliser (risques de plantage) et tous les browsers n'ont pas la possibilit de les afficher.
Page 52

Il faut comprendre que le fichier HTML dans lequel vous allez dfinir vos fentres grce aux Frames est indpendant des autres fichiers. Il va diviser votre cran en fentres et appeler d'autres fichiers dans ces fentres. Fichier de la fentre 1 Fichier HTML 1 Dfinition des frames Fichier de la fentre 2 Fichier de la fentre n Il n'y aura donc pas qu'un fichier mais plusieurs, selon le nombre de fentres dans l'cran. Les balises permettant de dfinir des frames sont les suivantes : Zone avec des fentres <FRAMESET>...</FRAMESET> <FRAME> <FRAMESET ROWS="..."> <FRAMESET COLS="..."> Exemple 1 : Soit le code : <HTML> <HEAD></HEAD> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML> Dans notre browser, on obtient : Dbut et fin de zone avec des fentres Dfinition d'une fentre. Agencement des fentres Fentres horizontales Fentres verticales
Page 53
Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY>. L'attribut COLS="largeur1,largeur2,...,largeurN" dfinit la largeur des diffrentes fentres. La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera ce que le total soit gal 100%. Il est aussi possible d'utiliser l'astrix "*" pour dfinir une taille quelconque. Cela permet d'avoir une taille fixe pour une fentre et une mobile pour une autre. Par exemple, <FRAMESET COLS="50,*"> dfinit une colonne de 50 pixels et une autre variable. Exemple 2 Jusqu' maintenant nous frames taient vides ; nous allons les remplir avec l'attribut <FRAME SRC="URL du document HTML afficher ">. On construit trois fichiers A.html, B.html, C.html que l'on place dans le mme rpertoire le fichier de Frames. Ces fichiers sont tous de la forme: <HTML> <BODY><H1>A</H1></BODY> </HTML> Pour le fichier de Frames, on dfinit le code suivant : <HTML> <HEAD></HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="A.htm"> <FRAMESET ROWS="30%,70%"> <FRAME SRC="B.htm"> <FRAME SRC="C.htm"> </FRAMESET> Eric VEKOUT, Professeur dInformatique Page 54

</FRAMESET> </HTML> Dans notre browser, on obtient :
Dans la fentre B, des ascenseurs sont apparus. On peut les supprimer ou les rendre obligatoires en utilisant l'attribut SCROLLING dans la balise <FRAME> : <FRAME SCROLLING="yes/no/auto">. Par dfaut, la barre de dfilement est sur auto. Les attributs de la balise frames sont les suivants :
l'attribut <FRAME NAME="Nom"> Name indique le nom de la fentre de telle sorte que cette frame puisse tre utilise comme cible d'un lien hypertexte. Ainsi pour ouvrir un document dans cette fentre, on utilisera l'attribut TARGET dans la balise de lien. Par exemple : <A HREF="doc.htm" TARGET="Nom">...</A> L'attribut TARGET peut aussi prendre certaines valeurs prdfinies :
_blank qui indique au browser qu'il doit crer une nouvelle fentre afin d'y afficher le fichier. Dans ce cas, vous ouvrez en fait un nouveau browser. _self qui indique que le fichier sera charg dans la mme fentre que celle dans laquelle se trouve le lien. _top qui implique l'affichage du fichier sur toute la surface de la fentre du browser.
Page 55
l'attribut <FRAME FRAMEBORDER=no FRAMESPACING=0 BORDER=0> permet de supprimer les bordures qui sparent les fentres. Netscape utilise l'attribut "border=0" et Explorer, les attributs "frameborder=no" et "framespacing=0". Il faut donc mettre les trois pour avoir la mme configuration sur tous les navigateurs. l'attribut <FRAME NORESIZE> Cet attribut empche le lecteur de pouvoir modifier la taille des cadres avec sa souris. la balise <NOFRAMES>...</NOFRAMES> Il convient de mettre cette balise aprs la dfinition de vos Frames car elle permet d'indiquer le texte, que les vieux navigateurs incapables de grer les frames, doivent afficher. Il est convenable d'indiquer une page pour que ces visiteurs puissent quand mme voir votre site.
IV) Les formulaires

Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'lments interactifs permettant par exemple un dialogue avec les internautes, la manire des coupons-rponses prsents dans certains magazines. Le lecteur 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.
1) La balise FORM
Le contenu d'un formulaire est compris entre les balises <FORM>... </FORM>. Le dernier lment d'un formulaire est un bouton d'envoi du formulaire (type =submit ou button). Les attributs de l'lment <FORM> : id (ou name) nom du formulaire pour les scripts JavaScript. action donne l'URL du programme auquel est envoy le contenu du formulaire (en gnral un programme cgi). method indique sous quelle forme seront envoyes les rponses POST est la valeur qui correspond un envoi de donnes stockes dans le corps de la requte, tandis que GET correspond un envoi des donnes codes dans l'URL, et spares de l'adresse du script par un point d'interrogation. enctype par dfaut application/x-www-form-urlencoded Eric VEKOUT, Professeur dInformatique Page 56
2) Les champs de saisie (balise INPUT)

<INPUT> (pas de balise de fermeture, ce n'est pas un container) Attributs : Type : text (dfaut) : zone de saisie d'une ligne, on prcise la taille par size=xx (en nombre de caractres). Exemple : <input type=text size=40 name="user" value="votre nom"> password : le contenu est masqu par des points sur l'cran. Exemple : <input type=password size=12 name="pw"> checkbox : chaque boite cocher gnre une paire nom/valeur. Exemple : <input type=checkbox checked name="etudiant" value="oui"> radio : permet de choisir une valeur parmi plusieurs. (l'ensemble des boutons radios devant porter le mme attribut name) Exemple : <input type=radio name=age value="0-20"> <input type=radio name=age value="20-40" checked> <input type=radio name=age value="40+"> submit : envoie l'URL dfinit dans l'attribut action le contenu du formulaire sous la forme de paires nom/valeur. il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton est indiqu par l'attribut value. Reset : replace les champs du formulaire dans leur tat initial. File : permet d'attacher un fichier au contenu du formulaire (apparat comme un champ de texte, avec un bouton de balayage pour dsigner le fichier attacher. Hidden : champ cach, qui sert au suivi de session. Exemple : <input type=hidden name="utilisateur" value="0123-542">
3) Les champs de slection sur liste (balise SELECT)

<SELECT> menu de slection au sein d'un formulaire. Il permet de faire apparatre un menu droulant. Exemple : <SELECT name="couleur"> <OPTION value="rouge">Rouge <OPTION value="vert">Vert <OPTION value="bleu">Bleu </SELECT> Eric VEKOUT, Professeur dInformatique Page 57

Attributs de l'lment de slection : Name : Reprsente lidentifiant du champ. Size : reprsente le nombre de lignes dans la liste (cette valeur peut tre plus grande que le nombre d'lments effectifs dans la liste). disabled: permet de crer une liste dsactive, c'est--dire affiche en grise . multiple: marque la possibilit pour l'utilisateur de choisir plusieurs champs dans la liste. Attributs de l'lment OPTION value : contient l'information qui est envoye au programme de traitement du formulaire (la paire nom de la slection, value de l'option choisie). Selected : option qui apparat dans le slecteur avant toute action de l'utilisateur
4) Les champs de texte (balise TEXTAREA)

<TEXTAREA> champ de texte comportant plusieurs lignes. Attributs de l'lment <TEXTAREA> : cols: reprsente le nombre de caractres que peut contenir une ligne. rows: reprsente le nombre de lignes. name: reprsente le nom associ au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur. readonly: permet d'empcher l'utilisateur de modifier le texte entr par dfaut dans le champ. value: reprsente la valeur qui sera envoye par dfaut au script si le champ de saisie n'est pas modifi par une frappe de l'utilisateur. Le texte d'une zone de texte est compris entre la balise <TEXTAREA> et la balise fermante (</TEXTAREA>)
5) Un exemple de formulaire
<HTML> <BODY> <FORM name = "form1"action = "test.cgi" method = post> <P>Nom : <INPUT type=text size="50" name="nom" value=""> </P> <P>Adresse : <TEXTAREA name="adresse" rows=5 cols=25 border=0> </TEXTAREA></P> <P>Quelle est votre couleur prfre : Eric VEKOUT, Professeur dInformatique Page 58

<SELECT name="couleur"> <OPTION value="rouge" selected>Rouge <OPTION value="vert">Vert <OPTION value="bleu">Bleu </SELECT> <DL><DT>Votre ge : </DT> <DD><INPUT type=radio name="age" value="1">Moins de 20 ans <BR> <INPUT type=radio name="age" value="2">Entre 20 et 40 ans <BR> <INPUT type=radio name="age" value="3">Entre 40 et 60 ans <BR> <INPUT type=radio name="age" value="4">Plus de 60 ans </DD> </DL> <P><INPUT type=submit name="go" value="Enregistrer vos donnes personnelles"> <INPUT type=reset name="raz" value="Remise zro"></P> </FORM> </BODY> </HTML> Nous obtenons dans notre browser :
V) Les feuilles de style : CSS

1) Syntaxe
La syntaxe du CSS est trs simple :
Un slecteur de balises, permettant de prciser quelles balises du document le style s'applique ; Page 59
Une dclaration de style, dfinie entre accolades, permettant de prciser le style appliquer aux balises slectionnes. La dclaration est elle-mme constitue :

d'une ou plusieurs proprit(s), suivie du caractre : (double point), d'une ou plusieurs valeur(s) associe(s) chaque proprit, entoure de guillemets s'il s'agit de plusieurs mots ou spars par des virgules s'il y en a plusieurs, suivie d'un point virgule.
On obtient donc : selecteur { proprit : valeur } Exemple : body { background: #eeeeee; } Chaque slecteur (ici body) peut avoir plusieurs proprits avec des valeurs indpendantes. Exemple : body { background: #eeeeee; font-family: Trebuchet MS, Verdana, Arial; } On remarquera un point virgule entre chaque proprits.
a) Slection multiple
Il est galement possible d'appliquer le style plusieurs balises en sparant le nom de ces balises par une virgule (,). La syntaxe d'un tel slecteur, appel slecteur multiple, est la suivante : selecteur-de-balise1, selecteur-de-balise2 { /* style */ }
b) Slection Universelle
Grce au slecteur universel ( * ) il est possible de dfinir un style s'appliquant tous les lments HTML. La syntaxe du slecteur universel est la suivante : * { /* style */ }
c) Slection dlments imbriqus

Il est possible de slectionner une balise dans un contexte donn, c'est--dire en fonction des lments qui l'entourent, grce aux slecteurs slecteurs contextuels. Eric VEKOUT, Professeur dInformatique Page 60

Il existe plusieurs types de slecteurs contextuels :
Le slecteur d'lments imbriqus permet de crer une rgle ne s'appliquant que lorsquun lment Y est imbriqu dans un lment X. Sa syntaxe est la suivante : selecteur_X selecteur_Y { /* style; */ } Soit le code HTML suivant : <p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prire d'en tenir compte </b> La rgle suivante ne slectionne que le mot avertissement (le seul entour de balises <B>, elles-mmes imbriques dans une balise <P>) : Exemple: P B { font-weight: bold; color: red; }
Le slecteur d'lments conscutifs permet de crer une rgle ne s'appliquant que lorsquun lment Y suit immdiatement un lment X. Sa syntaxe est la suivante : selecteur_X + selecteur_Y { /* style; */ } Soit le code HTML suivant : <p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prire d'en tenir compte </b> La rgle suivante ne slectionne que le mot avertissement (le seul entour de balises <B>, elles-mmes suivant une balise <I>) : Exemple: I + B { font-weight: bold; color: red; }
Le slecteur d'lments pre-fils permet de crer une rgle ne s'appliquant que lorsquun lment Y est fils direct d'un lment X. La rgle ne s'applique pas si Y est encapsul dans une ou plusieurs autres balises intermdiaires. Sa syntaxe est la suivante : selecteur_X > selecteur_Y { /* style; */ } Soit le code HTML suivant : <p> <b><i> Attention </i></b>, ceci est un <i><b> avertissement </b></i> </p> <b> Prire d'en tenir compte </b> La rgle suivante ne slectionne que l'lment <i> Attention </i> (le seul entour de balises <B>, elles-mmes directement imbriques dans une balise <P>) : Exemple: P > B {font-weight: bold; color: red; } Eric VEKOUT, Professeur dInformatique Page 61
2) Implantation du code
a) Dclaration du type de document
Il est ncessaire d'indiquer dans la page HTML le prologue du type de document, c'est--dire une rfrence la norme HTML utilise. Cette dclaration se fait par une ligne du type : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>...</HEAD> <BODY>Contenu de la page</BODY> </HTML> De plus, une balise Meta permet d'indiquer au navigateur ou aux moteurs de recherche le langage utilis pour la dfinition des feuilles de style. Cette balise Mta, inclure dans l'en-tte HTML du document est la suivante : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> </HEAD> <BODY>Contenu de la page</BODY> </HTML>
b) Style interne
Les feuilles de style d'une page web sont dclares grce la balise STYLE, au sein des balise <HEAD> et </HEAD>. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-Dfinition des styles; --> </STYLE> </HEAD> <BODY></BODY> </HTML> Eric VEKOUT, Professeur dInformatique Page 62

L'attribut type="text/css" de la balise <STYLE> permet de spcifier le type de feuille de style utilise. La balise de commentaire  sert viter que des navigateurs peu rcents, donc ne supportant pas les feuilles de style, affichent ces informations.
c) Style en ligne
Il est galement possible de dfinir le style au sein mme d'une balise d'un document. On appelle ce type de dclaration une dclaration en ligne. Cette faon de dfinir les feuilles de style est peu recommande car elle va l'encontre de l'intrt des feuilles de style, dans la mesure o le style est embarqu au sein mme de chaque lment. Cela peut nanmoins servir pour dfinir de faon exceptionnelle un style pour un lment HTML particulier, ne ncessitant pas une dfinition globale. Pour dfinir un style en ligne, il suffit de renseigner l'attribut STYLE de la balise HTML laquelle on souhaite appliquer un style particulier : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML> N.B : Il est possible d'appliquer un style "en ligne" toutes les balises HTML, hormis les balises suivantes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE Voici un exemple de style appliqu une balise <H1> : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... <H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1> Eric VEKOUT, Professeur dInformatique Page 63

... </BODY> </HTML>
d) Style externe
Le fait de pouvoir stocker la dfinition des feuilles de style l'extrieur du document est un "plus" car il est ainsi possible, en modifiant le fichier contenant les feuilles de style, de changer l'allure de toutes les pages web s'y rfrant ! Il s'agit dans un premier temps de crer un fichier texte contenant les feuilles de style et dont l'extension est .css, par exemple style.css : <!-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> body {background-image: home.gif;} LI {font: 13px Verdana;} B {font: 14px Verdana; font-weight: bold;} A { font:12px Verdana; font-weight: bold; color=black; text-decoration: none; } H1 {font: 16px Arial;font-weight: bold;color=black;} H2 {font: 14px Arial;font-weight: bold;color=black;} --> Dans un second temps il suffit de crer dans chaque page HTML le raccourci vers cette page de dfinition de style : <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="style.css"> </HEAD> ... La balise <LINK> avertit le navigateur qu'il doit chercher un document situ l'extrieur de la page HTML.
L'attribut rel="stylesheet" prcise que le document en question est une feuille de style externe. Page 64

L'attribut type="text/css" prcise le type de feuille de style. L'attribut href=" URL " donne l'URL de la feuille de style, c'est--dire son emplacement sur Internet.
e) Style import
Les recommandations du W3C offrent une dernire faon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la dclaration du style de document, en insrant la commande @IMPORT immdiatement aprs la balise style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-@IMPORT URL(url de la feuille importer); Dfinition des styles du document; --> </STYLE> </HEAD> <BODY></BODY> </HTML> N.B : Si plusieurs dfinitions importes concernent la mme balise, seule la dernire sera prise en compte par le navigateur.
f)
Styles en cascade
Il est possible de dfinir plusieurs styles en utilisant les diffrents moyens qu'offrent les CSS. Ainsi, lorsque plusieurs feuilles de style externes sont appeles, on obtient ce que l'on appelle une cascade de styles, c'est--dire une combinaison de styles pour divers lments HTML. Si plusieurs styles concernent le mme lment, seul le dernier style sera conserv. <LINK rel=stylesheet type="text/css" href="style1.css"> <LINK rel=stylesheet type="text/css" href="style2.css"> <LINK rel=stylesheet type="text/css" href="style3.css"> Eric VEKOUT, Professeur dInformatique Page 65

Dans le cas o plusieurs styles sont redondants entre diffrentes feuilles de style externes, les recommandations CSS permettent galement d'offrir le choix entre plusieurs feuilles de styles alternatives grce l'attribut rel de la balise STYLE, combin un attribut TITLE permettant de les choisir nominativement : <LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1"> <LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <LINK rel="stylesheet" type="text/css" href="stylepardefaut.css"> D'autre part, lorsque plusieurs styles sont appels dans une page en utilisant les diffrents moyens d'inclusion possibles, la prise en compte des styles, lorsque plusieurs styles sont redondants, est telle que le style le plus proche du contenu est maintenu. Ainsi, l'ordre de priorit est le suivant : Style en ligne > Style du document > Style import > Style externe
3) Units de mesure et positionnement des CSS

Grce aux feuilles de style il est possible de dfinir des valeurs numriques pour les proprits de style de plusieurs faons : de faon absolue, c'est--dire dans une unit indpendante du format de sortie (en centimtres par exemple) ; de faon relative, c'est--dire dans une unit relative un lment ; Les valeurs des feuilles de style sont soit des nombres entiers, soit des nombres rels, c'est--dire des chiffres ayant une partie entire et une partie dcimale. D'une manire gnrale il est noter l'utilisation du point ( . ) dans les notations dcimales en lieu et place de la virgule ( 8.5 cm et non 8,5 cm ). Les valeurs peuvent par ailleurs dans certains cas tre ngatives (prcdes du signe - ). Certaines proprits peuvent nanmoins accepter un intervalle restreint de valeurs.
a) Units absolues
Les units absolues proposes par le standard CSS sont rcapitules dans le tableau suivant : unit cm in mm pt description Le centimtre Le pouce (en anglais inch ) correspondant 2,54 cm Le millimtre Le point Page 66

pc Le pica (correspondant 12 pt)
b) Units relatives
Les units relatives proposes par le standard CSS sont rcapitules dans le tableau suivant : unit em description Unit relative la taille de police de l'lment slectionn. Seule exception cette rgle : lorsque la proprit font-size est dfinie, elle se rapporte la taille de la police de l'lment parent. Unit relative la hauteur de la minuscule de l'lment slectionn. Seule exception cette rgle : lorsque la proprit font-size est dfinie, elle se rapporte la hauteur de la minuscule de l'lment parent. Le pixel. Il s'agit d'une unit dont le rendu dpend de la rsolution du priphrique d'affichage. Le pourcentage est une unit relative la taille de l'lment ou de son parent.
ex
px %
c) Positionnement relatif et absolu

Le positionnement absolu {position: absolute} se dtermine par rapport au coin suprieur gauche de la fentre du navigateur. Les coordonnes d'un point s'expriment alors de haut en bas (top) et de gauche droite (left). La position relative se fait par rapport d'autres lments, comme une image, c'est-dire que les lments contenus dans la balises DIV ou SPAN seront positionns la suite des lments HTML aprs lesquels ils se trouvent.
d) Positionnement dun texte

Positionnons le texte "Cours CSS" 50 pixels du haut de la fentre et 100 pixels gauche de la fentre : <HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;"> Cours CSS </SPAN> </BODY> </HTML>
Page 67

50 Pixels Cours CSS
100 Pixels
e) Positionnement dun texte

Positionnons l'image "eiffel.jpg" 50 pixels du haut de la fentre et 100 pixels gauche de la fentre: <HTML> <BODY> <SPAN style="position: absolute; top: 50 px; left: 100 px;width: 103px; height: 61px"> <IMG SRC="eiffel.jpg" > </SPAN> </BODY> </HTML> 100 Pixels 50 Pixels
Il est important de spcifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilit des navigateurs.
f)
Superposition des lments
Superposons le texte "Cours CSS" l'image "eiffel.jpg": <HTML> <BODY> <SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px"> <IMG SRC="eiffel.jpg" > </SPAN> <SPAN style="position: absolute; top: 50 px; left: 100 px;"> Cours CSS </SPAN> Eric VEKOUT, Professeur dInformatique Page 68

</BODY> </HTML> 100 Pixels 30 Pixels Cours CSS
4) Classes et ID
Il peut s'avrer intressant d'affecter des styles diffrents des mmes balises. Pour cela les spcifications CSS ont introduit le concept de classe. La dfinition des classes est aussi simple que celles des styles. Elle consiste prciser la balise slectionne (comme pour une dclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner la classe. Le nom de la classe peut-tre compos de lettres (accentues ou non), de chiffres et de tirets : Selecteur_de_balise.Nom-de-la-classe { proprit de style: Valeur; proprit de style: Valeur; ...; } O Nom-de-la-classe reprsente le nom donn la classe. Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class la balise : Soit la classe Rouge applique la balise b : B.rouge {font: Verdana 12px; color: #FF0000; } L'appel cette classe dans le code se fera de la faon suivante : <B class="Rouge"> Texte mettre en rouge et en gras </B> Les pseudo-classes permettent d'affiner le style appliqu un certain nombre de balises en dfinissant une raction un vnement ou bien la position relative de la balise au sein des autres balises. Eric VEKOUT, Professeur dInformatique Page 69

Contrairement aux classes, le nom des pseudo-classes est prdfini, il n'est donc pas possible de crer ses propres pseudo-classes. Il existe plusieurs types de pseudo-classes : Les pseudo-classes dynamiques, Les pseudo-classes de lien, Les pseudo-classes de langue, Les pseudo-classes first-child, Les pseudo-classes de page, Les pseudo-lments.
Le slecteur d'ID (identifiant) permet de faire rfrence un lment unique d'une page repr par son identifiant. Les ID servent notamment localiser des lments HTML grce au JavaScript. La syntaxe d'un slecteur d'ID est la suivante : #nom_ID { style } Un tel style s'appelle de la manire suivante : <BALISE ID="nom_ID" > ... </BALISE> N.B : Il ne peut exister qu'un seul ID par page ! Notez galement l'absence de # dans l'appel au slecteur d'ID.
a) Les classes universelles

Il est possible de ne pas prciser de balise, auquel cas la classe pourra tre utilise dans n'importe quelle balise pour laquelle le style slectionn a un sens ! On parle alors de classe universelle (parfois classe indpendante). La dfinition d'une telle classe se fait en prcdant tout simplement le nom de la classe d'un point : .Nom-de-la-classe {proprit de style: Valeur; proprit de style: Valeur ...} Soit la classe Cours suivante : .Cours {font-type: arial; color: red; font-weight: bold} L'appel de cette classe peut tre fait partir de n'importe quel lment HTML pour lequel la dfinition est valide : <h1 class="Cours">Cours CSS</h1> <i class="important">Ceci est un cours</i> N.B : Il ny a pas de point lors de lappel de la classe. Eric VEKOUT, Professeur dInformatique Page 70
Algorithmique et Dveloppement web b) Les pseudo-classes dynamiques

Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un vnement (mouvement de la souris, clic, ou bien appui sur une touche du clavier). Il en existe trois : La pseudo-classe :hover permet d'affecter un style la balise slectionne lors d'un survol par le curseur de la souris : Exemple : A:hover {font-decoration: underline;} La pseudo-classe :focus permet de dfinir un style la balise slectionne lorsque le focus lui est donn (par exemple lors d'un clic dans un lment de formulaire) : Exemple : TEXTAREA:focus {color: #FF0000;} La pseudo-classe :active permet de dfinir un style la balise slectionne lorsque l'utilisateur clique sur l'lment (entre le moment o l'utilisateur clique sur le bouton de la souris et celui o il le relche) : Exemple : A:active {color: #FF0000;} N.B : Les pseudo-classes dynamiques ne sont pas reconnues de la mme faon par tous les navigateurs.
c) Les pseudo-classes de lien

Les pseudos-classes de lien sont des pseudo-classes spcifiques la balise <A> : La pseudo-classe :link permet de dfinir le style des liens hypertextes n'ayant pas encore t consults par le client La pseudo-classe :visited permet de dfinir le style des liens hypertextes que le client a dj visits N.B : Il est possible que certains navigateurs considrent un lien comme n'ayant pas t visit s'il n'est pas consult pendant une longue priode de temps.
d) La pseudo-classe descendante
Une pseudo-classe descendante permet d'appliquer un style la premire balise au sein d'un lment. La syntaxe de cette pseudo-classe est la suivante : Element_Parent > Balise:first-child {style;} Ainsi la dclaration suivante s'applique la premire balise <A> situ dans un jeu de balises <P> </P> : Eric VEKOUT, Professeur dInformatique Page 71

P > A:first-child {color: #00FF00;} De cette manire, la balise <A> suivante possdera le style ci-dessus : <P align="center"> <A href="http://www.Google.fr">GOOGLE</A> </P> La balise <A> suivante ne sera par contre pas prise en compte car elle n'est pas la premire balise aprs la balise <P> : <P align="center"> <BR/> <A href="http://www.Google.fr">GOOGLE</A> </P>
e) Les pseudo-classes de texte

Les pseudo-classes de texte permettent d'appliquer un style une partie du texte dlimit par les balises auxquelles ils s'appliquent. Ainsi les pseudo-classes de texte s'utilisent gnralement conjointement avec la balise de paragraphe (<P>). Il existe deux pseudo-classes de texte : :first-line : permet d'appliquer un style la premire ligne d'un paragraphe. Exemple : P:first-line { text-transform: uppercase } :first-letter : permet d'appliquer un style la premire lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant par exemple double la taille et met en gras la premire lettre d'un paragraphe : Exemple : P:first-letter {font-size: 200%; font-weight: bold; }
f)
Les pseudo-classes de langue
Il est possible de dfinir un style en fonction de la langue du document (spcifie dans les en-ttes HTTP ou dans les balises mta) ou de la langue d'un lment HTML ou XML (spcifi grce l'attribut optionnel LANG) si celle-ci est prcise. Une pseudo classe de langue utilise la notation suivante : :lang(Langue). Eric VEKOUT, Professeur dInformatique Page 72

Exemple : La pseudo classe de langue suivante permet de dfinir les guillemets selon la notation franaise : HTML:lang(fr) { quotes: ' ' ' ' }
g) Les pseudo-classes de page

Le slecteur @page permet de modifier les dfinitions de mise en page d'une page HTML (taille, marge, etc.) l'impression, telles que les marges (margin-left, margin-top, margin-right, margin-bottom), la taille (size). Il faut alors imaginer la page web comme un ensemble de pages constituant un ouvrage papier. Les pseudo-classes de page permettent ainsi de slectionner les pages de gauche, de droite ou bien la premire page d'un document. Il existe diffrentes pseudo-classes de page : @page:left : permet de dfinir les proprits des pages de gauche. Exemple : @page:left { size: landscape; margin-left: 2cm; } @page:right : permet de dfinir les proprits des pages de droite. Exemple : @page:right { size:landscape; margin-left: 2.5cm; } @page:first : permet de dfinir les proprits de la premire page d'un document. Exemple :@page:first { size: portrait; margin-left: 2.5cm; margin-right: 2cm; margin-bottom: 1cm; margin-top: 4cm;}
5) Les proprits CSS

a) Proprits de police
Proprit Valeur Police prcise (Arial, font-family Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) normal, italic, oblique font-style lighter, normal, bold ou font-weight Description Dfinit un ou plusieurs noms de polices ou de familles de polices. Si plusieurs polices sont dfinies, la premire trouve sur le systme de l'utilisateur sera utilise. Dfinit le style d'criture Dfinit la graisse (paisseur) de la police Page 73

bolder. valeur numrique (100, 200, 300, 400, 500, 600, 700, 800, 900) xx-small, x-small, small, medium, large, x-large, xx-large taille en points (pt), cm, % normal, small-caps font: Verdana, Arial, bold italic 8px;
font-size
Dfinit la taille de la police
font-variant font
Dfinit une variante (petites majuscules) Raccourci permettant de mettre toutes proprits
les
b) Proprits de Textes et Paragraphes

Proprit color line-height text-align text-indent textdecoration textshadow texttransform Valeur "#RRGGBB" line-height: 12pt; left, center, right ou justify text-indent: 5px; blink (clignotement), underline (soulign), line-through (barr), overline (surlign) ou none (aucune dcoration) text-shadow: 1px 2px 4px black; Description Dfinit la couleur du texte Dfinit l'interligne Dfinit l'alignement du texte Dfinit l'indentation (retrait du texte) Dfinit une dcoration
uppercase (majuscule), lowercase (minuscule) ou capitalize (premire lettre en majuscule) white-space normal (passage la ligne automatique), pre (idem saisie), nowrap (pas de passage la ligne automatique) word-spacing: 6px; wordspacing En points (pt), pouces (in), en cm, en pixels width (px), ou en % En points (pt), pouces (in), en cm, en pixels height (px), ou en %
Dfinit l'ombrage texte, respectivement dcalage droite, en bas, rayon de l'effet de flou et couleur. Dfinit la casse du texte
Csure
Dfinit l'espacement des mots Dfinit la longueur d'un lment de texte ou d'une image Dfinit la hauteur d'un lment de texte ou d'une image
c) Proprits de couleurs et arrires plans

Proprit background-color background-image Valeur "#RRGGBB" url(http://url) Description Dfinit la couleur d'arrire plan Dfinit l'image d'arrire-plan Page 74

background-repeat backgroundattachment backgroundposition background repeat, repeat-x, repeat-y, norepeat scroll, fixed Dfinit la faon de rpter l'arrire-plan
Spcifie si l'image reste fixe avec les dplacements de l'cran top, middle, bottom, left, Position de l'image par rapport au coin center ou right suprieur gauche background: url(test.jpg) fixed Raccourci pour les proprits d'arrire-plan repeat;
d) Proprits de marges
Proprit margin-top margin-right margin-bottom margin-left margin Exemple margin-top: 5px; margin-right: 0.5em; margin-bottom: 2pt; margin-left: 0; margin: 5px 0.5em 2pt 0; Description Valeur de la marge suprieure Valeur de la marge de droite Valeur de la marge infrieure Valeur de la marge de gauche Raccourci pour les proprits de marge
e) Proprits de bordures
Proprit border[-top -left bottom -right]width border[-top -left bottom -right]color border[-top -left bottom -right]-style border-collapse border Valeur En points (pt), pouces (in), en cm, en pixels (px), ou en % border-left-color: #RRGGBB; Description Epaisseur de la bordure [suprieure, de gauche, infrieure ou de droite] Couleur de la bordure [suprieure, de gauche, infrieure ou de droite] Style de la bordure [suprieure, de gauche, infrieure ou de droite] Effet 3D ou non Raccourci global les proprits de bordure
solid (pleine), dashed (en tirets), dotted (en pointills), double (double et remplie) ou ridge (en 3D) collapse separate border: 1px 0 0 2px dotted green;
f)
Proprit padding-top padding-right paddingbottom
Proprits des espaces intrieurs

Valeur padding-top: 3px; padding-right: 0.25em; padding-bottom: 0; Description Espace intrieur entre l'lment et la bordure suprieure Espace intrieur entre l'lment et la bordure droite Espace intrieur entre l'lment et la bordure infrieure Page 75

padding-left padding padding-left: 2pt; padding: 3px 0.25em 0 2pt; Espace intrieur entre l'lment et la bordure gauche Raccourci vers l'ensemble des proprits d'espace intrieur
g) Proprits des tableaux

Proprit bordercollapse borderspacing captionside emptycells tablelayout speakheaders Valeur separate ou collapse border-spacing: 4px; top, bottom, left ou right show ou collapse Description Fusion des bordures des cellules (collapse) ou non (separate) Espacement des cellules Positionnement de la lgende du tableau
Affichae (show) ou masquage (collapse) des cellules vides fixed (indpendamment du contenu Largeur fixe ou variable des cellules) ou auto (selon le contenu des cellules) alwats (systmatiquement avant Proprit pour sourds et malentendants chaque cellule) ou once (une seule indiquant le comportement lors de la lecture fois) des cellules d'en-tte d'un tableau
h) Proprits des listes

Proprit list-style-type list-styleimage list-styleposition list-style Valeur Description decimal, upper-roman, lower-latin, disc, Type de puces et de numrotation circle, square ou none list-style-image: url(image.png); Permet de personnaliser les puces avec une image inside ou outside Spcifie le retrait des puces Raccourci vers les proprits de liste
i)
Proprit @page size margin-top marginright margin-
Proprits de mise en page

Description Dfinit la mise en page de l'impression Format de l'impression Marge suprieure Marge de droite Marge infrieure Page 76
Valeur @page(size: portrait) auto, landscape ou portrait margin-top: 3 cm; margin-right: 1.5 cm; margin-right: 1 cm;

bottom margin-left marks
page-breakbefore page-breakafter orphans
margin-left: 2 cm; Marge de gauche crop (traits de coupe), cross Traits de coupe et repres de montage (repre de montage), none (pas de marque) Always, avoid Force le saut de page avant un lment Always, avoid orphans: 2; Force le saut de page aprs un lment Evite les lignes orphelines en fin de page. Dfinit le nombre de ligne minimal partir un renvoi en page suivante est effectu Evite les lignes veuves en dbut de page. Dfinit le nombre de ligne minimal partir un renvoi en page prcdente est effectu
widows
widows: 1;
Page 77
Bibliographie
(s.d.). Rcupr sur CSS dbutant: http://www.cssdebutant.com Lapoire, D. (2006, Octobre 12). Initiation l'Algorithmique. Pillou, J.-F. (2007). Rcupr sur Comment a Marche: http://www.commentcamarche.net Thomas Cormen, C. L. (2004). Introduction l'Algorithmique. Paris: Dunod.
Page 78

Algorithmique Et Développement Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Algorithmique Et Développement Web

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

TABLE DES MATIERES

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Algorithmique et Dveloppement web

2) Constantes, Variables et Types de donnes

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

b) Oprateurs sur les entiers et les rels

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web c) Oprateurs sur les entiers et les boolens

d) Oprateurs sur les caractres et les chanes

e) Priorit des oprateurs

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

4) Les structures conditionnelles

b) La structure de choix multiple

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web c) Les structures rptitives

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

II) Les structures de donnes

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

III) Les fonctions et les procdures

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

3) Appel de fonctions et de procdures

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Algorithmique et Dveloppement web

V) Algorigrammes et excution la main dalgorithmes

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

b) Structure de choix multiples

Selon le cas de nom_variable faire

cas valeur 1 : Action 1 ; .

. . cas valeur n : Action n ; dfaut : Action par dfaut ;

Action par dfaut

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web c) Structures rptitives

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web d) Un exemple complet

2) Excution la main dun algorithme

Eric VEKOUT, Professeur dInformatique

Algorithmique et Dveloppement web

Eric VEKOUT, Professeur dInformatique