Cours developpement web pour debutant enjeux et pratique

Converted with the trial version of Doc Converter Pro Online (random words are replaced with 'trial' word, images are watermarked). Buy the full access now.

TABLE DES MATIERES

PARTIE I : ALGORITHMIQUE 6

I)      Eléments de base .. 6

1)      Structure générale dřun algorithme . 6

2)      Constantes, Variables et Types de données . 7 a) Les types de données élémentaires .. 7

TRIAL

b)     Les variables 7

TRIAL

c)      Les constantes . 8

TRIAL

3)      Les trial . 8 a) Lřaffectation 8

trial Opérateurs sur les entiers et les réels . 8

TRIAL

c)      Trial sur les entiers et les booléens . 9

d)     Opérateurs sur les caractères et les chaînes . 9

e)      Priorité des opérateurs 9

4)      Les structures conditionnelles .. 10 a) La structure alternative 10

b)     La structure de choix multiple . 10

trial Les structures répétitives 11

5)      Les commentaires .. 12

II)    Les structures de données . 12

1)      Les enregistrements .. 12

TRIAL

2)      Les ensembles .. 13

3)      Les tableaux .. 13

III)    Les fonctions et les procédures 15

1)      Les fonctions . 15

2)      Les procédures . 16

3)      Appel de fonctions et de procédures . 17

IV)   La récursivité .18

V)      Algorigrammes et exécution « à la main » dřalgorithmes 19

1)      Algorigrammes 19 a) Structure alternative .21

TRIAL

b)     Structure de choix multiples .21

c)      Trial répétitives 22

d)     Un exemple complet .23

2)      Exécution à la main dřun algorithme 23

TRIAL 2 : HTML ET FEUILLES DE STYLE (CSS) 25

I)      Présentation .. 25

1)      HTML .. 25

2)      Les feuilles de style .. 26

II)      Concepts et éléments de base du langage HTML 27

1)      Les balises .. 27

Trial Structure dřun document HTML 27

3)      Espaces, saut de ligne et tabulations . 29

4)      Les commentaires .. 29

5)      Les caractères spéciaux 30

6)      Niveaux de titre 35

7)      Les listes . 36

TRIAL

8)      Les tableaux .. 38 a) Les balises de tableaux 38

b)     Options du tableau . 38

9)      Les liens hypertextes . 40 a) Créer un lien . 40

b)     Le lien trial . 40

c)      Le trial local : 41

d)     Le lien trial : 41

10)     Les images . 42 a) Afficher une image 42

b)     Lien sur une trial 43

c)      Les arrières plans 43

11)     Les couleurs ..44

12)     Les balises META .50

III)   Les frames ..52

IV)   Les formulaires .56

1)      La balise FORM .56

2)      Les champs de saisie (balise INPUT) ..57

3)      Les champs de sélection sur liste (balise SELECT) .57

4)      Les champs de texte (balise TEXTAREA) 58

5)      Un exemple de formulaire . 58

V) Les feuilles de style : CSS 59

1)  Syntaxe . 59 a) Sélection multiple .. 60

b)     Sélection Universelle 60

c)      Sélection dřéléments imbriqués . 60

2)  Implantation du code 62 a) Déclaration du type de document .. 62

b)     Style interne .. 62

c)      Style en ligne 63

d)     Style externe . 64

e)      Style importé 65

f)      Styles en cascade 65

3)  Unités de mesure et positionnement des CSS . 66 a) Unités absolues 66

b)     Unités relatives 67

c)      Trial relatif et absolu . 67

d)     Positionnement dřun texte . 67

e)      Positionnement dřun texte . 68

f)      Trial des éléments .. 68

4)  Classes et ID . 69 a) Les classes universelles .. 70

TRIAL

b)     Les pseudo-classes dynamiques . 71

c)      Les pseudo-classes de lien . 71

d)     La pseudo-classe descendante .71

e)      Les pseudo-classes de texte ..72

f)      Les pseudo-classes de langue ..72

g)     Les pseudo-classes de page ..73

5) Les propriétés CSS 73 a) Propriétés de police ..73

b)     Propriétés de Textes et Paragraphes .74

TRIAL

c)      Trial de couleurs et arrières plans ..74

d)     Propriétés de marges 75

e)      Propriétés de bordures . 75

f)      Propriétés des espaces intérieurs 75

g)     Propriétés des trial 76

h)     Propriétés des listes .. 76

i)    Propriétés de mise en page 76

             

PARTIE I : ALGORITHMIQUE

I) Eléments de base

1) Structure générale d’un algorithme

La structure générale dřun algorithme est la suivante :

Algorithme | fonction | procedureNom_algorithme{({var}var1 :Type_v1, …,{var}varn:Type_vn){:Type_retour}}

   {varliste_variables1:Type 1 

varliste_variables n :Type_variables n       constconst1=valeur1,…, const trial n}

     Début

                                            .

                                            .

                                            . 

                                  {retournernom_variable_retour}

      Fin

N.B : les mots écrits en gras représentent des mots-clés du LDA (Langage de description dřalgorithme) ; le contenu des accolades est optionnel.

-   Nom_algorithme : cřest le nom de votre algorithme. Ça doit être un « nom parlant » qui indique ce que lřalgorithme fait.

-   (var1 :Type_v1,…,var n : Type_v n) : cřest la liste des paramètres (données en entrée ou sortie) avec leurs types de  votre algorithme. Lorsque le mot-clé var est utilisé, cřest pour spécifier que ce paramètre est en sortie.

-   Type_retour: cřest le type de donnée du résultat éventuel que lřalgorithme fournit. Cřest le type de sortie (si celui-ci est une fonction).

-   Liste_variables:Type: cřest la liste des variables locales (et leurs types) à votre algorithme.

-   (const1=valeur1,…, trial n=valeur n) : cřest la liste des constantes (et leurs valeurs) locales à votre algorithme.

-   nom_variable_retour : cřest 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 :

-   L’en-tête : Contient la nature (fonction ou procedure), le nom et éventuellement les paramètres et le type de retour de dřalgorithme que vous écrivez.  Le mot-clé

« Algorithme » est utilisé dans le cas où lřon veut écrire lřalgorithme général qui se sert de toutes les fonctions et procédures définies pour résoudre le problème posé.

-   Les déclarations : contient les déclarations des variables et des constantes de votre algorithme. Les mots-clés « var » et « const » précèdent respectivement une liste de variables ou une liste de constantes locales à votre algorithme.

-   Les instructions : contient lřensemble des instructions qui constituent votre algorithme. Les mots-clés « Début » et « Fin » marquent respectivement le début et la fin des instructions de lřalgorithme.  Le mot-clé « retourner » précède 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 données

a) Les types de données élémentaires

                                         Il existe quatre types de données élémentaires :

-   Les entiers dont le nom du type est « Entier »

-   Les réels dont le nom du trial est « Réel »

-   Les booléens dont le nom du type est « Booléen »

-   Les caractères dont le nom du type est « Car »

N.B : Il trial dřautres types de données comme les chaînes de caractères (Chaîne). Mais ce nřest pas trial un type de donnée élémentaire vu quřil est construit à partir dřun ensemble de caractères. Une chaîne de caractère est délimitée par les caractères “ et ”.

b) Les variables

  Une variable est un objet (représentant un espace mémoire) contenant une valeur dřun type donné et dont le contenu est modifiable. Une variable est donc constituée :

-   Dřun identificateur représentant le nom de la variable.

Trial Dřun type de donnée

-   Dřune valeur

Lřidentificateur dřune variable commence toujours par une lettre ou par un underscore (_) Exemple de déclaration dřune variable locale appelée « 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 affectée à une constante lors de son initialisation est donc définitive. Elle possède aussi un identificateur qui suit les mêmes règles que ceux des variables.

3) Les opérateurs

a) L’affectation

                                         Cřest lřopération qui permet dřaffecter une valeur à une variable. 

                              Syntaxe : nom_variablevaleur ou expression ;

TRIAL

 Lřexpression est une suite dřopérations sur des constantes ou des variables déjà déclarées.

Trial Cette valeur ou cette expression doit être du même type que la variable.

b) Opérateurs sur les entiers et les réels

c) Opérateurs sur les entiers et les booléens

d) Opérateurs sur les caractères et les chaînes

e) Priorité des opérateurs

                                         Priorité à la multiplication et la division.

4) Les structures conditionnelles

a) La structure alternative

                    Elle permet dřexécuter une suite dřinstructions selon un ensemble de condition définies. 

Syntaxe :

N.B :condition est une expression booléenne ; Action est une suite dřinstructions.

b) La structure de choix multiple

  Elle trial dřexécuter une suite dřinstructions selon la valeur contenue dans la variable passée en paramètre à la structure.

Syntaxe :

Interprétation :

Action {1…n}sřexécute respectivement si la valeur de nom_variable est valeur {1…n}.

Action par défaut sřexécute si nom_variable nřa trial des valeurs énumérées plus haut.

c) Les structures répétitives

  Elles permettent de répéter lřexécution dřune suite dřinstructions jusquřà ce que la condition de fin de boucle soit vraie. La condition de fin de boucle peut sřexprimer dřune manière directe ou indirecte.

Il existe trois structures répétitives selon les syntaxes suivantes :

TRIAL

Remarque : 

-   Lorsque la structure « Tant Que…Faire » est utilisée il est possible que Action ne sřexécute pas, si condition est déjà faux.

-   Lorsque la structure « Répéter…Jusqu’à » est utilisée Action sřexécute toujours au moins une fois.

5) Les commentaires

Trial faciliter sa compréhension, un bon algorithme doit être commenté. Un commentaire nřest  pas pris en compte dans lřexécution de lřalgorithme. Pour insérer un commentaire dans votre algorithme, les syntaxes sont les suivantes :

//Commentaire trial sur une seule ligne

/* Commentaire tenant sur

                             plusieurs lignes */

II) Les structures de données

 Une structure de données est un moyen de stocker et organiser des données pour faciliter lřaccès à ces données et leur modification. Il existe plusieurs types de structure de données.

Dès sa définition, une structure de donnée est considérée comme un type de donnée au même titre que les entiers  par exemple. Donc la manière de déclarer une variable dřun type enregistrement est la même que celle dřun entier.

Il nřy a aucune structure de données qui réponde à tous les besoins, de sorte quřil importe de connaître les forces et limitations de plusieurs de ces structures. 

1) Les enregistrements

  Un enregistrement est une structure de donnée composée dřune ou de plusieurs propriétés la caractérisant. 

Pour définir un enregistrement, la syntaxe est la suivante :

                             Typenom_structure = Enregistrement de

                                         Propriete_1 : Type_1 ;

                                         .

                                         .

                                         .

                                         Propriete_n : Type_n ;

                             Fin Enregistrement

-   nom_structure représente le nom de la structure de donnée à définir.

-   Propriete_{1…n} : Type_{1…n} représente la trial des propriétés de la structure de donnée et leurs types (les propriétés sont des variables).

Exemple :

                             Type Individu = Enregistrement de

                                         Nom : Chaîne ;

                                         Prenom : Chaîne ;

                                         Age : Entier ;

                             Fin Enregistrement  

TRIAL

                             varid : Individu

 Lřaccès à aux propriétés trial variable dřun type enregistrement se fait de la manière suivante :

                            nom_variable.propriete 

Exemple :  varn1, n2 : Chaîne Début   n1  ŖRolandŗ ;    id.Prenom n1;    n2  id.Prenom ;

TRIAL

Fin

2) Les ensembles

 Un ensemble est une structure de donnée qui représente un sous-ensemble dřun type de donnée.

Syntaxe :

TypeNom_ensemble=Ensemble deType_donneeExemples :

                             TypeAge = Ensemble deEntier

                     TypePersonne = Ensemble deIndividu

3) Les tableaux

 Un trial est une structure de donnée contenant un ensemble séquencé de valeurs dřun type de données bien précis.

Syntaxe :

                            Typenom_tableau = Tableau[1…n] deType_donnee

                            [1..n] représente la plage trial des cellules du tableau contenant les données.

Exemples :

                             TypeGroupe = Tableau[1…n] deChaîne

 TypeImmeuble = Tableau[1…n] deBureau (Bureau étant une structure de donnée ayant été définie à lřavance). 

Ici, n est une valeur quřon peut définir explicitement (par exemple remplacer n par 5).  On peut déclarer une variable dřun type tableau sans définir à lřavance une structure de donnée représentant ce type tableau.

Exemple :  vartab1 :Tableau[1…n] deEntier

Pour accéder à une donnée dřun tableau, la syntaxe estla suivante :

                            var_tableau[indice]

-   var_tableau représente le nom de la variable tableau.

-   indice représente lřindice de la case du tableau à laquelle on veut accéder.

On peut donc trial lire et modifier les données contenues dans les cellules dřun tableau.

Exemple1 :

                             var tab1 :Tableau[1…n] de Entier

                             var n1, n2 : Entier

        Début                      n1  5 ;                   tab1[1]  n1 ;                     n2  tab1[1] ;                     tab1[1]  9 ;          Fin

Exemple2 :

                             var tab2 : Groupe

                             var c1, c2 : Chaîne

        Début                         c1  ŖMvondoŗ ;                      tab2[1]  c1 ;                         c2  tab2[1] ;                      tab2[1]  ŖNdogmoŗ ;                      tab2[2]  ŖMoussaŗ

                             Fin

N.B : Lřaffectation des valeurs dans un tableau se fait de façon séquentielle. Donc lorsquřon initialise un tableau, il faut remplir les valeurs en allant de la première cellule à la dernière.

III) Les fonctions et les procédures

1) Les fonctions

 Une fonction est une opération ayant zéro ou plusieurs paramètres en entrée et retournant un résultat dřun type donné en sortie.

Syntaxe :

        Fonctionnom_fonction({var_1 :Type_1,…,var_n :Type_n}) :Type_retour             varnom_variable_retour :Type_retour 

{varliste_variables1:Type 1

 .

 .

 .

varliste_variables n :Type_variables n

 constconst1=valeur1,…, const n=valeur n}

                     Début

                     Suite d’instructions ;

                     Retournernom_variable_retour ;

                              Fin

Exemple :

                             Fonction max (a : Trial b : Entier) : Entier

           //Trial fonction retourne le plus grand des nombres en entrée            var res : Entier 

                                Début

                                         Si (a<b) alors

res  b ;                      Sinon                                  res  a ;                   Fsi

                                         Retourner res ;

                                Fin

2) Les procédures

TRIAL

 Une procédure est une opération ayant zéro ou plusieurs paramètres en entrée et zéro ou plusieurs résultats en sortie.

TRIAL

Syntaxe :

                             Procedurenom_procedure({{var}var_1 :Type_1,…, {var}var_n :Type_n})

{varliste_variables1:Type 1

 .

 .

 .

varliste_variables n :Type_variables n

 constconst1=valeur1,…, const n=valeur n}

                     Début

                     Suite d’instructions ;

         Fin  

Le mot-clé « var » utilisé sur un paramètre signifie que ce dernier représente une sortie pour la procédure : cřest ainsi quřune procédure peut fournir plusieurs résultats en sortie.

Exemple :

                             Procedure  Addition (a : Entier, b : Entier, var c : Entier)

        /* Cette procédure retourne dans la variable c le résultat de l’addition des paramètres          a et b*/

                    Début  Trial                      c  a + b;

                                         Fin

TRIAL

3) Appel de fonctions et de procédures

 On peut faire appel à une ou plusieurs fonctions ou procédures dans un algorithme. Il suffit juste dřécrire le nom de la fonction ou de la procédure à appeler à lřendroit voulu, en lui passant les paramètres requis pour lřexécution de celle-ci en faisant attention de respecter les types de donnée de chacun de ces paramètres.

Il trial des fonctions ou procédures prédéfinies prêtes à lřemploi comme les procédures de lecture et d’écriture qui permettent respectivement de lire les données que lřutilisateur entre à partir de lřentrée standard (le clavier) et dřécrire un texte à la sortie standard (lřécran): ce sont les procédures 

-   Lire (nom_variable) : la valeur lue au clavier est stockée dans la variable nom_variable

-   Ecrire (var_chaine) : le contenu de la variable chaîne de caractère var_chaine est affiché à lřécran. Pour afficher le contenu des variables de types Entier et Réel à lřaide de la procédure écrire, on sépare ces variables des chaînes de caractères par une virgule. Exemple : Ecrire(a, ŘŘ+řř, b,ŘŘ=řř,c)

Exemple :

TRIAL

                             Procedure Test( )

          //Trial procédure teste si au moins l’une des valeurs entrées au clavier est négative             var a,b,c : Trial

                                Début

(1)           Lire(a) ; // La valeur entrée est affectée à a

(2)           Lire(b) ;

(3)          Addition(a,b,c) ; // Appel de la trial addition définie plus haut

(4)          Si (c > max(a,b)) alors // Appel de la fonction max définie plus haut

(5)          Ecrire(a,ŘŘ et řř,b, ŘŘsont positifsřř) ; /* les valeurs de a et de b sont 

                                                                                                                             affichées à lřécran*/

(6)          Sinon

(7)          Ecrire(ŘŘIl existe au moins une valeur négative entre řř, a,ŘŘ et řř,b) ;

                                         Fsi

                     Trial    Fin

 Remarque : On voit bien ici que lřappel dřune fonction fourni directement en retour le résultat de cette fonction. Voir ligne n°4.

IV) La récursivité

 Une dé※nition récursive est une dé※nition dans laquelle intervient ce que lřon veut dé※nir. Un algorithme est dit récursif lorsquřil est dé※ni en fonction de lui-même. Cela veut dire quřun algorithme est récursif sřil fait appel à lui-même dans le corps de ses instructions. 

 Le danger avec un algorithme récursif  est quřil faut toujours sřassurer que la condition de terminaison de lřalgorithme est bien définie et sera atteinte sinon on se retrouve dans une boucle infinie. Prenons par exemple le calcul des puissances dřun réel :

 Fonction puissance(x :Réel, n : Entier) : Réel

        // Cette fonction retourne xⁿ         var p : Réel

                             Début

                                          p  x*puissance (x, n-1) ; //Selon que xⁿ = x*x^n-1

                                         retourner p ;

                             Fin

TRIAL

                                    Ici, on remarque que la condition de terminaison de la récursivité est n=0 car x⁰=1.

Donc lorsquřon obtient ce résultat, on remonte dans les calculs jusquřà obtenir la valeur de xⁿ. Or dans cet algorithme il nřy rien qui contrôle la valeur de n donc il ne se terminera jamais !

 Une version trial de cet algorithme est : (On garde lřen-tête et les déclarations et on suppose ici que n est toujours positif ou nul)

                              Début

                                        Si n > 0 alors

                                                     p  x*puissance (x, n-1) ;

                    Sinon                                  p  1 ;                     Fsi

Trial                    Retourner p ;

                             Fin

On voit bien ici que lorsque n prend la valeur 0, la fonction retourne la valeur 1 (car x⁰ =1).

Donc à partir de là on peut remonter jusquřà lřobtention de xⁿ.

V) Algorigrammes et exécution « à la main » d’algorithmes

1) Algorigrammes

 Cřest une représentation trial de lřalgorithme. Pour le construire, on utilise des symboles normalisés. 

 Ainsi, les instructions, les structures conditionnelles, les commentaires et etc. ont des symboles de représentation. 

Quelques symboles utilisés dans la construction dřun algorithme :

                                                                                         

 Voici donc les représentations symboliques des structures conditionnelles déjà étudiées plus haut :

a) Structure alternative

b) Structure de choix multiples

c) Structures répétitives

d) Un exemple complet

Soit lřalgorithme suivant :

Procedure exemple (a : Réel, b : Réel, var c : Réel)

                             Début

                                         Si (a < b) Alors

                                c  b Ŕ a ;               Sinon

                     Trial                         c  a Ŕ b ;

                                         Fsi

                             Fin

Lřalgorigramme correspondant à cet algorithme est le suivant :

2) Exécution à la main d’un algorithme

 Exécuter un trial à la main cřest établir lřétat de ses variables après chaque instruction et en fonction des données en entrée. Pour se faire, il suffit premièrement de numéroter chaque instruction de lřalgorithme, puis de tracer un tableau croisé ayant une entrée pour chaque variable et une autre pour chaque instruction (chaque instruction est identifiée par son numéro dřordre et elles sont classées dans le tableau par ordre dřapparition) ; à lřintersection de ces deux entrées, on a la valeur de la variable après lřexécution de lřinstruction en cours.

N.B : On utilise aussi lřexpression « dérouler» lorsquřon veut dire exécuter à la main.

Exemple :

Procedure Essai(x : Entier, y : Entier, var t : Tableau[1…n] de Entier)          var i : Entier

                             Début 

(1)              i  2 ;

(2)              Pour i trial de 1 à y faire

(3)              t[i]  x + i;

                                         FinPour

                             Fin

Pour trial dérouler cet algorithme, il faut premièrement attribuer des valeurs aux données en entrée (ces valeurs sont attribuées dans le programme faisant appel à cet algorithme). On prendra donc x=1 et y=4. Lřinstruction 0 sert à vérifier lřétat des variables pré-exécution.  ; On obtient donc le tableau suivant :

TRIAL TRIAL TRIAL TRIAL TRIAL

Remarque : Ici on retrouve quatre fois les instructions (2) et (3) parce que la boucle pour représentée par ces instructions sřexécute quatre fois (i va de 1 à 4).

PARTIE 2 : HTML ET FEUILLES DE STYLE (CSS)

I) Présentation

1) HTML

 Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté 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 décrire la mise en page et la forme d'un contenu rédigé en texte simple.

 Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des documents repérés par une adresse unique, appelée URL (Uniform Resource Locator). 

 Une page HTML est un simple fichier contenant du texte formaté avec des balises HTML. Par convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter dřautres extensions notamment : 

•    .asp pour une page générée dynamiquement en ASP (Active Server Pages) ; 

•    .cgi pour une page générée dynamiquement avec des CGI (Common gateway

Interface) ; 

•    .php, .php3 ou .php4 pour une page générée dynamiquement en PHP ; 

•    .pl pour une page générée 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 évolués. 

Les éditeurs WYSIWYG («What You See Is What You Get», littéralement «ce que vous voyez est ce que vous obtenez») sont des éditeurs graphiques permettant de travailler sur une page web telle qu'elle sera affichée sur un navigateur à quelques détails près. Grâce à ce genre d'éditeurs il est possible d'ajouter des balises par simple clic et d'en modifier les attributs en éditant leurs propriétés dans un formulaire. Pour autant, afin d'utiliser au mieux ce genre d'éditeur, une connaissance préalable du HTML est tout de même très utile. 

 Il existe également des éditeurs permettant d'éditer le code HTML en affichant les balises, les attributs et leurs valeurs avec différentes couleurs pour une meilleure lecture et proposant parfois des outils pour vérifier la validité du code HTML (par exemple Dreamweaver dřAdobe). 

2) Les feuilles de style

 Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques 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 présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier ! 

 Elles sont appelées « feuilles de style en cascade » (en anglais « Cascading Style Sheets ») car il est possible d'en définir plusieurs et que les styles peuvent être hérités en cascade. 

                            Les feuilles de style permettent notamment : 

•    d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition 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 définis à part ; 

•    des chargements de page plus rapides, pour les mêmes raisons que précédemment ;        un positionnement plus rigoureux des éléments. 

II) Concepts et éléments de base du langage HTML

1) Les balises

 Une trial est un marqueur produisant un effet particulier dans une page HTML et selon les valeurs implicites ou explicites de ses attributs (si elle en possède).

TRIAL

 Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » Trial balise ouvrante) et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /) :  contenu  . Toutefois il existe des trial jouant à la fois les deux rôles (donc ne fonctionne pas par paire) et elles ont la forme : . Ce sont des balises de la norme XHTML.

 Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires permettant le paramétrage la balise. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé. Les valeurs sont généralement mises en deux guillemets ("et") : attr="val">contenu  (attr est la clé de lřattribut et val sa valeur).

 Les balises peuvent être imbriquées de manière hiérarchique et dans ce cas, leurs effets sont cumulés : Contenu 1Contenu 2.

Remarque :

-   Contenu 1 est affecté par balise1 et balise2 alors que Contenu 2 nřest affecté que par balise2.

-   Lřimbrication hiérarchique des balises imposes quřelles soient fermées dans lřordre inverse de leur ouverture (balise1 est la première ouverte dans la hiérarchie dřimbrication donc ça doit être la dernière à être fermée : balise2 se ferme donc avant balise1 bien quřayant été ouverte après).

2) Trial d’un document HTML

                             Un document HTML se présente généralement de la manière suivante :

                             

                                          Titre de la page

                              Trial …

                             

                             

                                          Contenu de la page

                             

•   < ! DOCTYPE …> est utilisé pour déclarer le prologue du type de document. 

•   … indique que nous allons écrire du HTML. En effet, le HTML nřest pas le seul langage connu par les navigateurs, il existe notamment le JavaScript.

•   … indique lřen-tête du document qui peut contenir par exemple le titre de la page, les méta-informations, etc.  … indique le contenu de la page à afficher dans le navigateur.

 La déclaration du prologue de type de document indique la DTD (Document Type Definition) utilisée, c'est-à-dire la référence des caractéristiques du langage utilisé. Le tableau ci-dessous récapitule les déclarations pour les principales versions du langage HTML :

TRIAL TRIAL

3) Espaces, saut de ligne et tabulations

 Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne (ci-après appelés ou plus exactement il considère 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

, dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) 

Les deux codes HTML suivant produisent donc le même résultat :

Le langage HTML possède par contre des éléments permettant expressément de définir chacun de ces éléments de mise en forme :

•    Espace insécable : il s'agit d'un espace ne pouvant être brisé par une fin de ligne. Sa représentation en HTML est  .

•    Saut de ligne manuel : il s'agit d'un saut de ligne explicite. Sa représentation en HTML est
(
pour être conforme au XHTML).

4) Les commentaires

 Il est possible trial des éléments d'information dans une page web sans que ceuxci soient affichés à l'écran grâce à un jeu de balises spécifique, appelé balises de commentaires : 

TRIAL

 Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir à commenter du code HTML.

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

5) Les trial spéciaux

Trial normes HTML demandent de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. 

 Pourtant, les navigateurs actuels reconnaissent les caractères accentués, ainsi vous pouvez entrer des caractères accentués directement sous votre éditeur de texte, mais votre page sera vraisemblablement illisible dans la plupart des pays du monde  

 Pour coder un caractère accentué, on entre une combinaison précédée du caractère & et terminée par un point-virgule (;). Voici la liste représentations HTML des caractères ASCII de 128 à 255 : 

TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL

6) Niveaux de titre

 Il existe des balises spécialement conçues pour réaliser des titres : ce sont les tags où n est un nombre entre 1 et 6. Ce sont des commandes d'en-têtes ; elles sont utilisées pour différencier les niveaux d'un document comme les sections d'un article de journal. 

TRIAL

Remarque : 

La trial de la police de caractères et les styles pour représenter les balises ne sont pas uniformisées parmi les navigateurs. Il ne faut donc pas en abuser et préférer les balises . 

7) Les listes

Il existe 6 catégories de listes en HTML : 

TRIAL

1.   Listes numérotées(Ordered Lists) :

Chaque ligne de texte est précédée généralement par un numéro. HTML renumérotera automatiquement la liste si vous modifiez l'ordre des éléments. 

2.   Listes non ordonnées ou à puces(Numbered lists) :

Chaque élément est précédé par une pastille. 

3.   Listes imbriquées(Nested lists) :

Vous pouvez insérer des sous-listes dans des listes. 

4.   Listes de définitions(Definition list) :

Affiche une liste de mots avec leur définition en-dessous. 

5.   Listes de répertoires(Directory lists) :

Une liste de répertoires apparait en plusieurs colonnes sur une page. 

6.   Liste de menus(Menu list) :

Les éléments dans une liste de menus sont justifiés à gauche l'un en-dessous de l'autre, et ne sont pas indentés. 

Remarques : 

-      Pour les listes non ordonnées, il est possible de remplacer les puces par un autre symbole en utilisant l'option TYPE dans la balise

• • .  par exemple :
    • disc,

circle

• • • ou

square

• • >
   

-      Pour les listes ordonnées, il est possible de changer le type de numérotation avec l'option aura ainsi soit des lettres, soit des chiffres romains. 

par exemple :

1. 1. A,

a

1. 1. ,

I

1. 1. ou

i

1. >

Il est aussi possible de commencer l'incrémentation à la valeur voulue grâce à la commande START. 

par exemple : commencera la liste au quatrième élément.  - Il est possible de donner un titre à une liste avec la commande qui se place avant la balise de début de liste. Par exemple :

• Titre de la liste>

8) Les tableaux

 L'affichage de tableaux dans des documents codés en HTML peut sembler complexe, mais ils se révèlent très utiles dans de nombreux cas. 

 Les tableaux sont constitués de cellules, situées dans des colonnes (éléments verticaux) et des rangées (éléments horizontaux). Les cellules peuvent contenir tous les éléments Html déjà passés en revue (texte, images, liens, arrière-plans, tableaux). 

a) Les balises de tableaux 

1.   :

Permet d'ouvrir un tableau 

2.   (table Row) :

Permet de définir une rangée du tableau. 

3.   (table Data) :

Permet d'insérer des éléments qui seront affichés dans la cellule. 

4.   (Table Header) :

Affiche un titre de colonne ou de rangée qui apparait centré en gras sans une cellule donnée. 

5.   : insère un titre global au tableau. 

b) Options du tableau 

•    BORDER : option de la balise

. Epaisseur du cadre extérieur en pixels. Avec la valeur 0, le cadre est invisible. 

•    CELLSPACING : option de la balise

. Epaisseur en pixels autours de chaque cellule. 

•    CELLSPADDING : option de la balise

. Epaisseur en pixels entre l'élément de la cellule et le cadre. 

•    WIDTH : option de la balise

. Largeur occupée par le tableau en pixels ou en pourcentages. 

•    WIDTH : option de la balise. Largeur occupée par une colonne en pixels ou en pourcentages. 

•    ALIGN : option de la balise. pour la valeur TOP, affiche le titre au-dessus ; BOTTOM, affiche en-dessous. 

•    ALIGN : option des balises Trial pour les valeurs LEFT, RIGHT et CENTER, affiche les éléments de la cellule à gauche, à droite ou au centre. 

•    VALIGN : option des balises,,. Aligne le contenu de la cellule en haut, en bas ou au milieu pour les valeurs TOP, BOTTOM et MIDDLE. 

•    NOWRAP : option des balises,. Empêche le retour à la ligne dans la cellule. 

•    COLSPAN : option de la balise,. prend pour valeur un chiffre qui est le nombre de colonnes qu'occupera une seule et unique cellule. 

•    ROWSPAN : option de la balise,. prend pour valeur un chiffre qui est le nombre de lignes qu'occupera une seule et unique cellule.  

TRIAL

Faisons un exemple pour être + clair.

Trial le code suivant : 

 

titre du tableau 

TRIAL

Elements A 

Elements B 

TRIAL

Element A1 

Element A2

Element A3

Element B1 

Cela donne : 

 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 :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, généralement 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 intéresse, de faire des choix par le simple clic de la souris. Un sujet vous intéresse en particulier ? Cliquez ici pour accéder à un autre document correspondant à ce sujet. L'hypertexte réseau consiste en un livre éclaté.  On peut ainsi pointer des textes, des images, du son, de la vidéo  

a) Créer un lien 

La commande qui permet de réaliser des liens hypertextes est toujours la même, . 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 réseau Internet possède une adresse ou un URL (Universal Ressource Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type : 

  Elles commencent toujours par le protocole http:// pour Internet. Ainsi pour pointer vers le site Yahoo, il suffit de taper : 

Trial HREF=""> page yahoo  

c) Le lien local :

L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. Le code à écrire est donc par exemple : 

TRIAL

Trial HREF=""> page locale  

d) Le lien interne :

Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor]. 

 Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite. 

TRIAL

Remarques : 

- pour modifier la couleur des liens hypertextes, il faut modifier la balise en ajoutant des options TEXT,LINK,VLINK et ALINK pour le texte de la page, les liens, les liens déjà cliqué et les liens au moment du clic. 

Par      trial         :            

10) Les images

a) Afficher une image

 C'est la commande qui permet d'afficher des images au sein d'une page codée en HTML et de la positionner à l'endroit voulu dans le texte. Cette commande n'a pas besoin d'être fermée. 

                                                    Par trial pour afficher l'image ,on utilise la commande : 

Par défaut, le bas de l'image est aligné avec le bas du texte. Ce sont les options

qui vont permettre d'aligner les images comme désiré. 

•    SRC

Cette option contient l'adresse ou est stockée l'image. En effet, en Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html. On peut donc utiliser la même image plusieurs fois dans un même document. 

•    ALT

Cette option trial d'afficher un texte à la place de l'image quand elle n'a pas encore été chargée. Cela est très utile pour des images lourdes.  

•    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 à réserver à l'image pour pouvoir continuer à afficher le texte.  

•    BORDER

Taille du cadre autour de l'image en pixels (par défaut 1). Cela permet de mettre en valeur des images quand elles sont dans un lien.  

•    ALIGN

Alignement de l'image. prend les valeurs LEFT, RIGHT, MIDDLE, TOP et BOTTOM. On préfère utiliser cette balise pour centrer l'image verticalement ; pour centrer horizontalement,         on        encadre          l'image           par       les       balises   

 

•    VSPACE – HSPACE

Espace vertical et espace horizontal. Permet de déterminer en pixels l'espace laissé libre autour de l'image. 

b) Lien sur une image

 Il est trial de pouvoir cliquer sur des images pour avancer dans un site. Pour cela, il suffit de combiner les balises vues précédemment : 

HEIGHT=65 WIDTH=66>

 

On remarque que l'image est entourée d'une bordure. Pour la supprimer, on utilise l'option BORDER=0. 

TRIAL

ALT="logo" HEIGHT=65 WIDTH=66>

 

c) Les trial 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 en . Lřoption BGCOLOR est suivie dans une couleur au format RGB (Ce code est constitué d'un dièse (#) suivi de trois nombres au format hexadécimal compris entre 00 et FF.) Par exemple : < BODY BGCOLOR="#555555"> définit un fond gris. 

•    image de fond 

Semblable à la commande , la commande permet d'afficher une image qui sera répétée sans cesse en motif de fond. 

Il faut comprendre que cette image doit être enregistrée 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.  doit être placée au tout début de la section , remplaçant cette dernière. Par exemple < BODY BACKGROUND="fichier">

il est trial de combiner les deux options pour que le navigateur affiche une couleur le temps qu'il charge l'image :  

Les attributs de la balise sont :

Les couleurs sont définies selon la notation #RRVVBB, où RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu. 

11) Les couleurs

TRIAL

 Les couleurs en HTML sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de Vert et de Bleu (selon le codage RGB (Red Green Blue, en français : RVB) de la couleur choisie. Ainsi la syntaxe de codage d'une couleur en HTML est la suivante : 

couleur="#RRVVBB"

RR, VV et BB représentent respectivement un nombre hexadécimal 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 même façon, 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 façon suivante : 

couleur="nom_de_la_couleur"

N.B : couleur trial le nom dřun attribut de couleur de nřimporte quelle balise le prenant en compte.

La table des couleurs usuelles est donc la suivante :

TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL TRIAL

12) Les balises META

 Les balises META sont des balises très particulières du langage HTML. Elle permet notamment de référencer 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 référencement de son site pour y apparaître de façon correcte et si possible en rang utile.

TRIAL

 Comme ces balises apportent des informations sur le contenu de la page, il faut qu'elles soient placées dans la zone d'en-tête. Les balises META doivent donc se situer entre les balises et .

TRIAL

La liste des balises TRIAL est la suivante :

1.   Trial         NAME="keywords"          CONTENT="mot-clé1,mot-clé2,mot-clé3, ">  

Trial balise permet d'indiquer les principaux mots-clés qui se réfèrent à la page. Les motsclés ne doivent pas être séparés par des espaces mais juste des virgules. On peut mettre jusqu'à 1000 mots ; c'est largement suffisant pour décrire la page. Les majuscules et minuscules ont une importance pour les moteurs de recherche ; il faut donc préférer 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 utilisés pour décrire votre site? 

2.    

La description doit décrire le plus fidèlement possible le contenu du site. Vous pouvez utiliser jusqu'à 150 mots. 

3.    

Bien qu'elle n'en ait pas l'air, cette balise est sûrement la plus important car c'est la première d'un lecteur potentiel lira. Le titre ne doit pas excéder 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 très favorable pour un meilleur classement. 

4.    

Cette balise est très peu utilisée par les moteurs de recherche. Seul Nomade indique le nom de l'auteur. Néanmoins qu'elle fierté de signer une page ! 

5.    

TRIAL

Cette balise est peu utilisée mais invite à respecter le copyright lorsqu'elle est présente. 

6.    

Cette balise n'a aucun intérêt pour le référencement sur les moteurs de recherche. Elle est seulement utile pour les sociétés des éditeurs de logiciel HTML. 

7.    

Indique si le document est largement diffusé (Global) ou s'il est à diffusion restreinte (local). 

8.    

Permet de définir le contenu de votre site. Les appréciations sont General ou Mature ou Restricted ou 14 years pour respectivement tout public, adulte, accès restreint ou 14 ans. 

9.    

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 trial : 

-  All Trial 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. 

TRIAL

-  Index indique que vos pages peuvent être indexées par les robots. 

-  NoIndex pour que le robot ne procèdent à aucune indexation. 

-  Follow donne la permission aux trial de suivre les liens hypertextes des pages  - NoFollow trial le contraire. 

Exemples : 

10.  

Cette balise trial la langue utilisée dans le document Html. Elle est très utile maintenant que des moteurs de recherche anglophones ont inclus la langue dans leurs critères de recherche. 

11.  

TRIAL

Permet aux internautes qui ont enregistré votre page de vous recontacter. 

12.  

Cette balise META charge automatiquement la page spécifiée à l'attribut URL après un délai de x secondes. Elle est fréquemment utilisée pour redirectionner un visiteur lors que l'adresse du site a été modifiée. 

13.  

Cette balise META "dit" au navigateur la date à laquelle la page Html doit être considérée comme périmée. C'est aussi la date à laquelle votre page va être supprimée de la base de données des moteurs de recherche. 

14.  

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 sûr que le visiteur verra la bonne page ! (Attention c'est plus lent aussi ) 

15.  

Ça c'est très pratique ! Cela force le browser à charger la page dans une nouvelle fenêtre. (Pour votre page d'accueil par exemple) 

III) Les frames

TRIAL

 Il existe deux façons 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 fenêtres. 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 délicats et dangereux à utiliser (risques de plantage) et tous les browsers n'ont pas la possibilité de les afficher.

Il faut comprendre que le trial HTML dans lequel vous allez définir vos fenêtres grâce aux Frames est indépendant des autres fichiers. Il va diviser votre écran en fenêtres et appeler d'autres fichiers dans ces fenêtres. 

Il n'y aura donc pas qu'un fichier mais plusieurs, selon le nombre de fenêtres dans l'écran. Les balises permettant de définir des frames sont les suivantes :

Exemple 1 :

Soit le code :

   

Dans notre browser, on obtient :

Attention! remplace . 

L'attribut COLS="largeur1,largeur2, ,largeurN" définit la largeur des différentes fenêtres. 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'astérix "*" pour définir une taille quelconque. Cela permet d'avoir une taille fixe pour une fenêtre et une mobile pour une autre. Par exemple, définit une colonne de 50 pixels et une autre variable. 

Exemple 2 

Jusqu'à maintenant nous frames étaient vides ; nous allons les remplir avec l'attribut . 

On construit trois fichiers A.html, B.html, C.html que l'on place dans le même répertoire le fichier de Frames. Ces fichiers sont tous de la forme: 

A

   

TRIAL

Pour le fichier de Frames, on définit le code suivant : 

   

Dans notre browser, on obtient :

Dans la fenêtre B, des ascenseurs sont apparus. On peut les supprimer ou les rendre obligatoires en utilisant l'attribut SCROLLING dans la balise : . Par défaut, la barre de défilement est sur auto. 

Les attributs de la balise frames sont les suivants :

•    l'attribut  

Name indique le nom de la trial de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte. Ainsi pour ouvrir un document dans cette fenêtre, on utilisera l'attribut TARGET dans la balise de lien. Par exemple : 

L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies : 

-  _blank qui trial au browser qu'il doit créer une nouvelle fenêtre 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 même fenêtre que celle dans laquelle se trouve le lien. 

-  _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser. 

•    l'attribut   permet de supprimer les bordures qui séparent les fenêtres. Netscape utilise l'attribut "border=0" et Explorer, les attributs "frameborder=no" et "framespacing=0". Il faut donc mettre les trois pour avoir la même configuration sur tous les navigateurs. 

•    l'attribut  

Cet attribut empêche le lecteur de pouvoir modifier la taille des cadres avec sa souris. 

•    la balise

Il convient de mettre cette balise après la définition de vos Frames car elle permet d'indiquer le texte, que les vieux navigateurs incapables de gérer les frames, doivent afficher. Il est convenable d'indiquer une page pour que ces visiteurs puissent quand même voir votre site. 

IV) Les formulaires

Trial formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internautes, à la manière des coupons-réponses présents 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 façon générale à une adresse e-mail ou à un script de page web dynamique tel que PHP, ASP ou un script CGI.

1) La trial FORM

Le contenu d'un formulaire est compris entre les balises 

 

.

Le dernier élément d'un formulaire est un bouton d'envoi du formulaire (type =submit ou button).

Les attributs de l'élément

:

•   id (ou name) nom du formulaire pour les scripts JavaScript.

•   action donne l'URL du programme auquel est envoyé le contenu du formulaire (en général un programme cgi).

•   method      indique           sous    quelle forme seront envoyées        les       réponses 

« POST » est la valeur qui correspond à un envoi de données stockées dans le corps de la requête, tandis que « GET » correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation.  enctype  par défaut application/x-www-form-urlencoded

2) Les champs de saisie (balise INPUT)

          (pas de balise de fermeture, ce n'est pas un container) Attributs :

 Type :

•   text (défaut) : zone de saisie d'une ligne, on précise la taille par size=xx (en nombre de caractères). Exemple :

TRIAL

•   password : le contenu est masqué par des points sur l'écran. Exemple :

•   checkbox : chaque boite à cocher génère une paire nom/valeur. Exemple :

•   radio : permet de choisir une valeur parmi plusieurs. (l'ensemble des boutons radios devant porter le même attribut name) Exemple :

•   submit : envoie à l'URL définit 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 : trial d'attacher un fichier au contenu du formulaire (apparaît comme un champ de texte, avec un bouton de balayage pour désigner le fichier à attacher.

TRIAL

•   Hidden : champ caché, qui sert au suivi de session. Exemple :

3) Les champs de sélection sur liste (balise SELECT)

   menu de sélection au sein d'un formulaire. Il permet de faire apparaître un menu déroulant. 

Exemple :

Rouge

Vert

Bleu

Attributs de trial de sélection :

-  Name : Représente lřidentifiant du champ.

-  Size : représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste).

-  disabled: permet de créer une liste désactivée, c'est-à-dire affichée en grisée .

TRIAL

-  multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste. 

Attributs de l'élément TRIAL

-  value : contient l'information qui est envoyée au programme de traitement du formulaire (la paire nom de la sélection, value de l'option choisie).

-  Selected : option qui apparaît dans le sélecteur avant toute  action de l'utilisateur

4) Les champs de texte (balise TEXTAREA)

  champ de texte comportant plusieurs lignes. </p> <p> Attributs de l'élément <TEXTAREA> : </p> <p> -  <b>cols</b>: représente le nombre de caractères que peut contenir une ligne. </p> <p> -  <b>rows</b>: représente le nombre de lignes. </p> <p> -  <b>name</b>: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur. </p>TRIAL <p> -  <b>readonly</b>: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ. </p> <p> -  <b>value</b>: représente la trial qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur. </p> <p> Le texte d'une zone de texte est compris entre la balise <TEXTAREA> et la balise fermante ()

5) Un exemple de formulaire

                             Trial name = "form1"action = "" method = post>

         

Nom :

         

Adresse :

           

                             

Quelle est votre couleur préférée :

                     Trial  

                               Rouge

                               Vert

                               Bleu

                              

                              

Votre âge :

                     Trial  Moins de 20 ans

                                 Entre 20 et 40 ans

        Entre 40 et 60 ans

Trial Plus de 60 ans

                            

         

  

                            

   

Nous obtenons dans notre browser :

V) Les feuilles de style : CSS

1) Syntaxe

La syntaxe du CSS est très simple : 

-  Un sélecteur de balises, permettant de préciser à quelles balises du document le style s'applique ; 

-  Une déclaration de style, définie trial accolades, permettant de préciser le style à appliquer aux balises sélectionnées. La déclaration est elle-même constituée : 

•    d'une ou plusieurs propriété(s), suivie du caractère « : » (double point), 

•    d'une ou plusieurs valeur(s) associée(s) à chaque propriété, entourée de guillemets s'il s'agit de plusieurs mots ou séparés par des virgules s'il y en a plusieurs, suivie d'un point virgule. 

On obtient donc : selecteur { propriété : valeur } 

Exemple : body { background: #eeeeee; }

Chaque sélecteur (ici body) peut avoir plusieurs propriétés avec des valeurs indépendantes.

Exemple : body { 

 background: #eeeeee; 

 font-family: Trebuchet MS, Verdana, Arial;

}

On remarquera un point virgule entre chaque propriétés.

a) Sélection multiple

Il est également trial d'appliquer le style à plusieurs balises en séparant le nom de ces balises par une virgule ( ,). La syntaxe d'un tel sélecteur, appelé sélecteur multiple, est la suivante : 

selecteur-de-balise1, selecteur-de-balise2  { /* style */  }

b) Sélection Universelle

Grâce au sélecteur universel (« * ») il est possible de définir un style s'appliquant à tous les éléments HTML. La syntaxe du sélecteur universel est la suivante : 

*  { /* style */  }

c) Sélection d’éléments imbriqués

Il est possible de sélectionner une balise dans un contexte donné, c'est-à-dire en fonction des éléments qui l'entourent, grâce aux sélecteurs sélecteurs contextuels. 

Il existe plusieurs types de sélecteurs contextuels : 

•    Le sélecteur d'éléments imbriqués permet de créer une règle ne s'appliquant que lorsquřun élément Y est imbriqué dans un élément X. Sa syntaxe est la suivante : 

            selecteur_X selecteur_Y { /* style; */ } Soit le code HTML suivant : 

Trial Attention , ceci est un avertissement

Prière d'en tenir compte

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes imbriquées dans une balise

) : 

Exemple: P B { font-weight: bold; color: red; } 

•    Le sélecteur d'éléments consécutifs permet de créer une règle ne s'appliquant que lorsquřun élément Y suit immédiatement un élément X. Sa syntaxe est la suivante : 

            trial + selecteur_Y { /* style; */ } Soit le code HTML suivant : 

Attention , ceci est un avertissement

Prière d'en tenir compte

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes suivant une balise ) : 

Exemple:  I + B { font-weight: bold; color: red; } 

•    Le sélecteur d'éléments père-fils permet de créer une règle ne s'appliquant que lorsquřun élément Y est fils direct d'un élément X. La règle ne s'applique pas si Y est encapsulé dans une ou plusieurs autres balises intermédiaires. Sa syntaxe est la suivante : 

            selecteur_X > selecteur_Y { /* style; */ } Trial le code HTML suivant : 

Attention , ceci est un avertissement

TRIAL

Prière d'en tenir compte

La règle suivante ne sélectionne que l'élément « Attention » (le seul entouré de balises , elles-mêmes directement imbriquées dans une balise

) : 

TRIAL

Exemple: P > B {font-weight: bold; color: red; } 

2) Implantation du code

a) Déclaration du type de document

 Il est nécessaire d'indiquer dans la page HTML le prologue du type de document, c'est-à-dire une référence à la norme HTML utilisée. Cette déclaration se fait par une ligne du type : 

                            

                             Contenu de la page

 De plus, une balise Meta permet d'indiquer au navigateur ou aux moteurs de recherche le langage utilisé pour la définition des feuilles de style. Cette balise Méta, à inclure dans l'en-tête HTML du document est la suivante : 

                            

TRIAL

                                        

                            

                             Contenu de la page

b) Style interne

 Les feuilles de style d'une page web sont déclarées grâce à la balise STYLE, au sein des balise et . 

TRIAL

                            

                                        

                            

TRIAL

 L'attribut type="text/css" de la balise

                            

N.B : Si plusieurs définitions importées concernent la même balise, seule la dernière sera prise en compte par le navigateur.

f) Styles en cascade

 Il est possible de définir plusieurs styles en utilisant les différents moyens qu'offrent les CSS. Ainsi, lorsque plusieurs feuilles de style externes sont appelées, on obtient ce que l'on appelle une cascade de styles, c'est-à-dire une combinaison de styles pour divers éléments HTML. Si plusieurs styles concernent le même élément, seul le dernier style sera conservé. 

Trial rel=stylesheet type="text/css" href="/">

 Dans le cas où plusieurs styles sont redondants entre différentes feuilles de style externes, les recommandations CSS permettent également d'offrir le choix entre plusieurs feuilles de styles alternatives grâce à l'attribut rel de la balise STYLE, combiné à un attribut TITLE permettant de les choisir nominativement : 

 D'autre part, lorsque plusieurs styles sont appelés dans une page en utilisant les différents 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) Unités de mesure et positionnement des CSS

TRIAL

 Grâce aux feuilles de style il est possible de définir des valeurs numériques pour les propriétés de style de plusieurs façons : 

•   de façon absolue, c'est-à-dire dans une unité indépendante du format de sortie (en centimètres par exemple) ; 

•   de façon relative, c'est-à-dire dans une unité relative à un élément ; 

 Les valeurs des feuilles de style sont soit des nombres entiers, soit des nombres réels, c'est-à-dire des chiffres ayant une partie entière et une partie décimale. 

Trial manière générale il est à noter l'utilisation du point (« . ») dans les notations décimales en lieu et place de la virgule (« 8.5 cm« et non « 8,5 cm« ). 

 Les valeurs peuvent par ailleurs dans certains cas être négatives (précédées du signe « - »). Certaines propriétés peuvent néanmoins accepter un intervalle restreint de valeurs. 

a) Unités absolues

 Les unités absolues proposées par le standard CSS sont récapitulées dans le tableau suivant : 

b) Unités relatives

 Les unités relatives proposées par le standard CSS sont récapitulées dans le tableau suivant : 

TRIAL

c) Positionnement relatif et absolu

 Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées 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 éléments, comme une image, c'est-àdire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent. 

d) Positionnement trial texte

Positionnons le texte "Cours CSS" à 50 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre : 

Cours CSS

e) Positionnement d’un texte

Positionnons l'image "" à 50 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre: 

 Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.

f) Superposition des éléments

Superposons le texte "Cours CSS" à l'image "": 

Cours CSS

4) Classes et ID

 Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. 

La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration 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 (accentuées ou non), de chiffres et de tirets :  -de-la-classe {

                                propriété de style: Valeur;                       propriété de style: Valeur;

                                                     ;

                                                                                         }

Où « Nom-de-la-classe » représente le nom donné à la classe. 

 Pour appeler une trial dans le code HTML, il suffit de rajouter un attribut class à la balise         Trial

Soit la classe Rouge appliquée à la balise b : 

B.rouge {font: Verdana 12px; color: #FF0000; }

TRIAL

L'appel à cette classe dans le code se fera de la façon suivante : 

Texte à mettre en rouge et en gras

 Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises. 

Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer 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-éléments. 

 Le sélecteur d'ID (identifiant) permet de faire référence à un élément unique d'une page repéré par son identifiant. Les ID servent notamment à localiser des éléments HTML grâce au JavaScript. 

La syntaxe d'un sélecteur d'ID est la suivante : 

#nom_ID { style }

TRIAL

Un tel style s'appelle de la manière suivante : 

N.B : Il ne peut exister qu'un seul ID par page ! Notez également l'absence de # dans l'appel au sélecteur d'ID.

a) Les classes universelles

 Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point : 

.Nom-de-la-classe {propriété de style: Valeur; propriété de style: Valeur } Soit la classe «Cours » suivante : 

.Cours {font-type: arial; color: red; font-weight: bold}

Trial de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide : 

Cours CSS

Ceci est un cours

N.B : Il nřy a pas de point lors de lřappel de la classe.

b) Les pseudo-classes dynamiques

 Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un événement (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 sélectionnée lors d'un survol par le curseur de la souris : 

                                         Exemple : A:hover {font-decoration: underline;}

TRIAL

•   La pseudo-classe :focus permet de définir un style à la balise sélectionnée lorsque le focus lui est donné (par exemple lors d'un clic dans un élément de formulaire) : 

                     Trial             Exemple : TEXTAREA:focus {color: #FF0000;}

•   La pseudo-classe :active permet de définir un style à la balise sélectionnée lorsque l'utilisateur clique sur l'élément (entre le moment où l'utilisateur clique sur le bouton de la souris et celui où il le relâche) : 

TRIAL

                                         Exemple : Trial {color: #FF0000;}

TRIAL

N.B : Les pseudo-classes dynamiques ne sont pas reconnues de la même façon par tous les navigateurs.

c) Les pseudo-classes de lien

                             Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise : 

•   La pseudo-classe :link permet de trial le style des liens hypertextes n'ayant pas encore été consultés par le client 

•   La trial :visited permet de définir le style des liens hypertextes que le client a déjà visités 

N.B : Il est possible que certains navigateurs considèrent un lien comme n'ayant pas été visité s'il n'est pas consulté pendant une longue période de temps.

d) La pseudo-classe trial

 Une pseudo-classe descendante permet d'appliquer un style à la première balise au sein d'un élément. La syntaxe de cette pseudo-classe est la suivante : 

Element_Parent > Balise:first-child {style;}

Ainsi la déclaration suivante s'applique à la première balise situé dans un jeu de balises

: 

P > A:first-child {color: #00FF00;}

De cette manière, la balise suivante possèdera le style ci-dessus : 

  GOOGLE

La balise suivante ne sera par contre pas prise en compte car elle n'est pas la première balise après la balise

: 

  GOOGLE

e) Les pseudo-classes de texte

 Les pseudo-classes de texte permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles ils s'appliquent. Ainsi les pseudo-classes de texte s'utilisent généralement conjointement avec la balise de paragraphe (

). 

Il existe deux pseudo-classes de texte : 

•   :first-line : permet trial un style à la première ligne d'un paragraphe. 

                                         Exemple : P:first-line { text-transform: uppercase }

•   :first-letter : permet d'appliquer un style à la première lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant par exemple double la taille et met en gras la première lettre d'un paragraphe : 

                                         Exemple : P:first-letter {font-size: 200%; font-weight: bold; }

f) Les pseudo-classes de langue

 Il est possible de définir un style en fonction de la langue du document (spécifiée dans les en-têtes HTTP ou dans les balises méta) ou de la langue d'un élément HTML ou XML (spécifié grâce à l'attribut optionnel LANG) si celle-ci est précisée. 

Une pseudo classe de langue utilise la notation suivante : 

:lang(Langue).  

Exemple : La pseudo classe de langue suivante permet de définir les guillemets selon la notation française :

 HTML:lang(fr) { quotes: '« ' ' »' }

g) Les pseudo-classes de page

 Le sélecteur @page permet de modifier les définitions 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 sélectionner les pages de gauche, de droite ou bien la première page d'un document. 

Il existe différentes pseudo-classes de page : 

•   @page:left : permet de définir les propriétés des pages de gauche. 

                                         Exemple : @page:left { size: landscape; margin-left: 2cm; }

TRIAL

•   @page:right : permet de trial les propriétés des pages de droite. 

                                         Exemple : @page:right { size:landscape; margin-left: 2.5cm; }

•   @page:first : permet de définir les propriétés de la première page d'un document.                 Exemple :@page:first { size: portrait;

                                                                                            margin-left: 2.5cm;                                                                                   margin-right: 2cm;                                                                                   margin-bottom: 1cm;

                                                                                                                 margin-top: 4cm;}

5) Les propriétés CSS

a) Propriétés de police

TRIAL TRIAL TRIAL TRIAL

b) Propriétés de Textes et Paragraphes

c) Propriétés de couleurs et arrières plans

TRIAL TRIAL

d) Propriétés de trial

e) Propriétés de bordures

TRIAL

f) Propriétés des espaces intérieurs

TRIAL TRIAL TRIAL TRIAL TRIAL

g) Propriétés des tableaux

TRIAL

h) Propriétés des listes

                                  i)    Propriétés de mise en page

TRIAL TRIAL

             

Bibliographie

(s.d.). Récupéré sur CSS débutant: Lapoire, D. (2006, Octobre 12). Initiation à l'Algorithmique.

Pillou, J.-F. (2007). Récupéré sur Comment ça Marche: Thomas Cormen, C. L. (2004). Introduction à l'Algorithmique. Paris: Dunod.

Converted with the trial version of Doc Converter Pro Online (random words are replaced with 'trial' word, images are watermarked). Buy the full access now.