[PDF] Support de cours technique programmation web | Cours Informatique

(1)

Mohamed BENJLAIEL

Notes de cours

Technologie et programmation Web

Maître-assistant en Informatique mohamed.benjlaiel@ieee.org

REGIM

Groupe de REcherche sur les Machines Intelligentes Université de Sfax, Ecole Nationale d’Ingénieurs de Sfax

BP. W-3038 - Sfax – Tunisie

L3I

Informatique, Images et Intéraction

Université de La Rochelle, Avenue Michel Crépeau, 17042. La Rochelle, France

(2)

HTML

HTML (

Hyper Text MarkUp Language)

C’est est un langage de balisage hypertexte servant à la publication de pages web sur Internet.

Permet la description des pages web – Structure

– Affichage – Et liens

Mis au point par Tim Berners-Lee en 1989 Mis au point par Tim Berners-Lee en 1989

HTML est basé sur SGML(Standard Generalized Markup Language) Evolution du HTML HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML 5.0 Texte de base, images, liens hypertextes Formulaires de saisie Justification (gauche, centre, droite) -Tableaux Équations mathématiques

Feuilles de style Plus de

performance avec de nouvelles fonctionnalité

(3)

Modèle client serveur

Client Web _internet Serveur

requête réponse Affichage Disque Document Html Préparation de la réponse Recherche du fichier sur le disque utilisateur URL ? Affichage de la page Socket TCP/IP « connecteur réseau » ou « interface de connexion »

(4)

Document HTML

Structures principales d’un document HTML

Corps

Entête

<HTML>

<HEAD>

<TITLE>Exemple de document HTML</TITLE> </HEAD>

<BODY>

Corps

<BODY>

<H1>Mon 1er document HTML</H1> <P>

Ceci est un document HTML avec un lien hypertexte <A HREF="http://www.mon-site.com/">Mon site</A> </P>

</BODY> </HTML>

(5)

(6)

Entête : <HEAD> … </HEAD>

Rôle

Fournir des informations au sujet du document

Position

en début de document

(après la balise <HTML> et avant la balise <BODY>)

Contenu

<TITLE>…</TITLE>

Titre de la fenêtre dans laquelle la page s'affiche

<META NAME="..." CONTENT="...">

Permet de spécifier des méta-données sous la forme de couple attribut-valeur (NAME-CONTENT)

Ces méta-données peuvent être exploitées, par exemple, par les moteurs de recherche pour effectuer des recherches sur le contenu effectif du document

(7)

Entête : <META … >

<META NAME="keywords" CONTENT="page personnelle, informatique"> <META HTTP_EQUIV="Content-Type"

CONTENT="text/html; charset=iso-8859-1"> Permet de spécifier le type de contenu :

Type de document Codage des caractères

<META HTTP-EQUIV="Content-language" CONTENT="fr"> permet d’indiquer la langue du contenu du document

<META HTTP-EQUIV="refresh" CONTENT="Délai;url=AdressePage"> permet de passer automatiquement à une autre page après un certain délai :

Délai = temps (en seconde) avant l’appel d’une autre page AdressePage = adresse de la page à charger

(8)

Corps du document : <BODY> ... </BODY>

Rôle

Délimiter le corps du document

Permet de définir l'apparence du fond de l'écran et la couleur des éléments textuels

Position

Placé immédiatement après la balise </HEAD>

Remarques

– 1 seule balise <BODY> par page

SAUF pour les pages comprenant des frames

– La balise peut s'employer seule ou avec des options

(9)

Les options du BODY

<BODY BGCOLOR="#RRVVBB" BACKGROUND= "Adresse_Image" LINK="#RRVVBB" VLINK="#RRVVBB"

TEXT="#RRVVBB" ALINK="#RRVVBB"> BGCOLOR : couleur de fond de la fenêtre

BACKGROUND : image de fond (répétée sous forme de mosaïque) TEXT : couleur du texte ordinaire *

LINK : couleur du texte/de la bordure d'une image qui est un lien *

VLINK : couleur du texte/de la bordure d'une image qui est un lien amenant sur une page déjà vue *

ALINK : couleur prise par un lien tant qu'on clique dessus (peu utilisé)

* = si omis, utilisation des couleurs standards (définies dans les préférences utilisateur)

(10)

Mise en forme de titres

<h1> </h1> (de 1 à 6) <html> <head> </head> <body> <h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6> </body> </html>

(11)

Mise en forme des caractères

Les styles

Gras : <B> … </B> Italique : <I> ... </I>

Souligné : <U> … </U>

Possibilité de fixer la taille de police d’une page web

(avec 1 ≤ taille ≤ 7)

Si cette balise n'est pas utilisée, la taille par défaut des caractères est fixée à 3.

(12)

Mise en forme des caractères

Spécification d’une police locale

Exemple

SIZE : taille de la police

1 … 7 (taille absolue)

(13)

Mise en forme des paragraphes

<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P> Alignement des paragraphes situés

Pour passer (ou sauter) une ligne, utiliser des <BR> <BR>

Retour à la ligne

Pas de balise fermante !

<BR><BR> : 2 retours à la ligne = 1ligne d'espacement <html>

<p>Lorem ipsum ... egestas</p> <p>Aenean eleifend ... ornare.</p> <p>Aenean odio neque ... id.</p> </body>

(14)

Le codage des caractères spéciaux

De la forme :

&entité;

  Espace insécable ¦ | ± ± £ £ ¥ ¥ Ø Ø ©  ®  ° ° ² 2 ³ 3 & & ¼ ¼ ½ ½ ¾ ¾ ¼ ¼ ½ ½ ¾ ¾ à à &Agrave À &oelig; œ é é É É ë ë î î Î Î ç ç " " ß ß ñ ñ < < > > µ µ

(15)

Les listes

Il y a deux types de liste

– Les listes ordonnées : liste numérotée (<OL> ... </OL>)) – Les listes non-ordonnées :liste à puces(<UL> ... </UL>) <LI> Marqueur des éléments d’une liste

Syntaxe : <ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ul> <ol> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ol>

Option TYPE="disc|circle|square" dans <UL> Permet de choisir la forme de la puce

(16)

La balise Div

<ul>

<li>Elémént 1</li> <li>Elémént 2</li> <li>Elémént 3</li>

La balise <div> est un conteneur (à appréhender comme un cadre) qui peut inclure tous les balises html (tels que les paragraphes les tableaux, les listes, les images ..., et également d'autres divisions).

Exemple d'une div de hauteur fixe contenant une liste entrainant l'apparition d'une scrollbar : <li>Elémént 3</li> <li>Elémént 4</li> <li>Elémént 5</li> <li>Elémént 6</li> <li>Elémént 7</li> <li>Elémént 8</li> <li>Elémént 9</li> <li>Elémént 10</li> <li>Elémént 11</li> <li>Elémént 12</li> </ul> </div>

(17)

Création de lignes horizontales

SIZE : épaisseur en pixel de la ligne

WIDTH : largeur de la ligne.

ALIGN : alignement à gauche| au centre | à droite dans la fenêtre

<HR> : Utilisée sans option, cette balise produit une ligne grise ombrée de 1

<HR> : Utilisée sans option, cette balise produit une ligne grise ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre

COLOR="#RRVVBB" :Option valable avec Internet Explorer Permet de spécifier la couleur de la ligne

(18)

Les liens hypertextes (hyperliens)

Exemple :

Sur le site du cours <a href="http://benjlaiel.hebergratuit.com/">http://benjlaiel.hebergratuit.com/</a>, vous y trouverez ...

Donnent accès à une autre page html, une photo, un document, une adresse de courriel, un fichier exécutable sur serveur….

Syntaxe : <a href=“”>…</a>

trouverez ... </body>

(19)

Liens absolus

Un lien absolu indique l'adresse complète du fichier . Il est généralement utilisé pour afficher une page d'un autre site.

Exemples :

<a href="http://fr.wikipedia.org">Une encyclopédie vraiment géniale</a> <a href="mailto:benjlaiel@yahoo.fr">Mon mail</a>

Liens relatifs

Les liens hypertextes (hyperliens) suite …

Liens relatifs

Un lien relatif indique l'adresse du fichier par rapport à la page actuelle. Il est vivement conseillé de l'utiliser le plus souvent dans son site web, car cela permet de changer d'hébergeur sans devoir rééditer chaque lien.

Exemples :

<a href="exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le même répertoire que la page actuelle</a>

<a href="/images/logo.png">Lien vers le fichier «logo.png » se trouvant dans le sous-répertoire images du répertoire courant</a>

(20)

Les noms de fichiers

Les fichiers HTML ont des extensions précises :

.htm, .html, …

Première page d'un site (ou d'un dossier du site)

En général : index.html.

Dans 99% des cas, cela permet d'atteindre le site ou le dossier.

Les liens hypertextes

Dans 99% des cas, cela permet d'atteindre le site ou le dossier.

Les fichiers images

Images de qualité photographique : JPEG (extension : .jpg)

Images de type dessin, ayant au maximum 256 couleurs (dont une

éventuellement transparente) ou les images animées : GIF

(extension .gif)

(21)

Liens hypertextes

dans les images

(22)

Les images

<IMG SRC="url" WIDTH="w|w%" HEIGHT="h|h%" ALT="texte" BORDER="b"> SRC="url"

Adresse du fichier image à insérer.

WIDTH="w|w%"

Largeur de l'image affichée.

Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle.

On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l'image

HEIGHT="h|h%"

Syntaxe :

HEIGHT="h|h%"

Hauteur de l'image affichée (mêmes remarques que pour WIDTH).

NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l'autre est automatiquement calculée en proportion. NB2 : toujours indiquer au moins un des deux paramètres pour

accélérer l'affichage

ALT="texte"

Texte apparaissant dans une info-bulle quand la souris est positionnée pendant 1 à 2 secondes sur l'image.

BORDER="b"

BORDER : taille en pixel de la bordure autour de l'image.

Si l'image est un lien et qu'on ne veut pas voir de bordure de la couleur spécifiée dans l’option LINK du BODY, mettre 0.

(23)

Les images

<img src="" alt="" />

Exemple :

(24)

Les images et les hyperliens

Exemple

<a href="faculté.html"> <img src="image4.jpg"> </a>

Syntaxe :

(25)

<AREA SHAPE="valeur" COORDS="valeur coordonnées" HREF="URL"> <AREA SHAPE="valeur" COORDS="valeur coordonnées" HREF="URL"> Permettent d'atteindre un URL précis

Suivant la zone où l’on clique sur une image

Les cartes cliquables

Zone cliquable

rect : est défini par ses coins opposés (x-gauche, y-haut, x-droit, y-bas), circle : est défini par son centre et son rayon (x-centre, y-centre, rayon), poly : est défini par un ensemble de points (x1, y1, x2, y2, …, xn,yn), default : est défini par les points non définis précédemment.

(26)

Les cartes cliquables

Exemple

(27)

Les tableaux

(28)

Les tableaux

3 types d’éléments imbriqués

<TABLE> … </TABLE> : ouverture et fermeture du tableau

<TR> … </TR> : ouverture et fermeture de ligne (Row)

<TD> … </TD> : ouverture et fermeture de cellule (Data)

Remarques

Ne jamais oublier les balises de fermeture

⇒ _{le tableau pourrait être désordonné, voire ne pas s'afficher.}

Les tableaux sont imbricables

Exemple simple :

<table border=“1”>

<tr>

<td>Division 1</td>

<td>Division 2</td>

</tr>

</table>

(29)

<TABLE> ... </TABLE>

<TABLE WIDTH="w|w%" BORDER="b" CELLPADDING="cp" CELLSPACING="cs"> WIDTH="w|w%"

Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la fenêtre (à utiliser avec prudence).

BORDER="b"

Largeur de l'encadrement du tableau et des cellules exprimée en pixels. Si une cellule est vide, il n'apparaît pas.

CELLPADDING="cp"

Marge intérieure de chaque cellule (en pixels).

CELLSPACING="cs"

Espacements horizontal et vertical entre les cellules du tableau

(30)

Les lignes : <TR> … </TR>

<TR ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"

Alignement horizontal du contenu de toutes les cellules de la ligne :

VALIGN="TOP|MIDDLE|BOTTOM">

Alignement vertical du contenu de toutes les cellules de la ligne

Alignement horizontal cellule par cellule (cf. <TR> … </TR>).

VALIGN="TOP|MIDDLE|BOTTOM"

(31)

Les cellules : <TD> … </TD>

WIDTH="w|w%"

Largeur de la cellule en pixels ou en pourcentage de la largeur du tableau.

A spécifier une seule fois dans le tableau (ie pour une seule ligne) car elle détermine la largeur de la colonne dont fait partie la cellule.

Remarques

Veiller à avoir le même nombre de cellules pour chaque ligne du tableau (en fusionner éventuellement).

Si une cellule sur une ligne est vide, y mettre quand même un espace insécable ( )

COLSPAN="c"

Nombre de cellules fusionnées à l'horizontal.

Permet de disposer du texte au dessus de plusieurs colonnes.

ROWSPAN="r"

idem pour

les fusions à la verticale <TD

ROWSPAN=3>

(32)

Les tableaux (suite)

Exemple avec plusieurs lignes:

<table border=“1”> <tr> <td>Division 1</td> <td>Division 2</td> </tr> <tr> <td>Division 3</td> <td>Division 4</td> </tr> </table>

(33)

Les tableaux (suite)

Exemple avec un titre pour chaque colonne: <table border=“1”> <tr> <th>Numéro d’usager</th> <th>Note globale</th> </tr> <tr> <td>684</td> <td>40 %</td> <td>40 %</td> </tr> <tr> <td>685</td> <td>83 %</td> </tr> </table>

(34)

Les tableaux (suite)

Exemple avec fusion de cellules : <table border=“1”> <tr> <th>Numéro d’usager</th> <th>Note globale</th> <th>Diplôme obtenu?</th> </tr> <tr> <td>684</td><td>40 %</td><td>Non</td> <td>684</td><td>40 %</td><td>Non</td> </tr> <tr> <td>685</td> <td colspan=“2”>Non disponible...</td> </tr> <tr> <td>686</td><td>83 %</td><td>Oui</td> </tr> </table>

(35)

FRAME

(36)

<FRAMESET ROWS|COLS="d1[,d2,d3…],*" BORDER="b"

FRAMEBORDER="YES|NO" FRAMESPACING="fs">

Les frames (ou cadres)

Permettent d'obtenir une ou plusieurs divisions horizontales et/ou verticales de la fenêtre du navigateur, et ainsi de disposer "virtuellement" de plusieurs fenêtres.

Pour créer une page contenant des frames

Définir le découpage (FRAMESET).

Définir le contenu des cadres (pages HTML classiques).

ROWS|COLS="d1[,d2,d3…],*"

ROWS → division en lignes (horizontale)

COLS → pour une division en colonnes (verticale)

d1[,d2, d3…] : indique la hauteur (largeur) en pixel de chaque ligne (colonne) ; le séparateur de valeurs est la virgule.

* permet d'attribuer à la dernière ligne (colonne) tout l'espace restant.

Possibilité d'indiquer une valeur en pourcentage de la taille de la page. Attention : l'affichage dépendra de la taille de la fenêtre du navigateur !

(37)

Exemple de découpage en frame

Fichier frame.html

<FRAMESET cols="70,424">

<FRAME name="menu" src="Fichier1.html"> <FRAMESET rows="69,487">

<FRAME name="titre" src="Fichier2.html"> <FRAME name="contenu" src="Fichier3.html"> </FRAMESET> </FRAMESET>

titre

Fichier3.html Fichier1.html Fichier2.html

contenu

(38)

<FRAME … >

<FRAME NAME="nom de la frame" SRC= "url"

SCROLLING="YES|NO|AUTO NORESIZE FRAMEBORDER="YES|NO" BORDER="b" FRAMESPACING="fs" MARGINWIDTH="mw" MARGINHEIGHT="mh"> SRC= "url"

URL de la page chargée dans la fenêtre

SCROLLING="YES|NO|AUTO" SCROLLING="YES|NO|AUTO"

Gère l'affichage des ascenseurs YES : toujours présents NO : jamais

(39)

<FRAME … >

NAME="nom de la frame"

Désignation utilisée pour identifier chaque cadre.

Sert à désigner le cadre dans lequel va s’afficher un document pointé par un lien hypertexte.

Option TARGET (dans un élément A) utilisée avec HREF. < A TARGET="nom du cadre de destination" HREF="url" >

L’absence de TARGET dans un élément A provoque l ’affichage dans le cadre qui contient le lien.

Nom de cadre prédéfinis : _parent, _top, _blank, ... Exemple

< A HREF="lien.html" TARGET="contenu">lien</A> < A HREF="lien.html" TARGET="contenu">lien</A> NORESIZE

Empêche le redimensionnement d’un cadre. FRAMEBORDER, BORDER et FRAMESPACING

Mêmes fonctions que pour la balise FRAMESET

mais leur action est prioritaire s'ils sont ajoutés à la balise FRAME. MARGINWIDTH="mw"

Espace vide laissé à gauche du cadre (en pixels). MARGINHEIGHT="mh"

(40)

Découpages multiples

Exemple de découpages multiples

Deux façons de faire

Découpages imbriqués dans un seul fichier

Découpages dans plusieurs fichiers

(41)

Découpage unique imbriqué

<FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" FRAMESPACING="2">

<FRAME NAME="1" SRC="1.html" SCROLLING="yes">

<FRAMESET ROWS="33%,33%,*">

<FRAME NAME="2" SRC="2.html" SCROLLING="auto"> <FRAME NAME="3" SRC="3.html" SCROLLING="auto"> <FRAMESET COLS="50%,*">

Découpages imbriqués dans un seul fichier

<FRAME NAME="4" SRC="4.html" SCROLLING="auto"> <FRAME NAME="5" SRC="5.html" SCROLLING="auto"> </FRAMESET>

<FRAMESET> </FRAMESET>

(42)

Découpages en plusieurs fois

<FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" > <FRAME NAME="1" SRC="f1.html" SCROLLING="yes"> <FRAME NAME="2" SRC="f2.html" > </FRAMESET> frameset.html frameset.html <FRAMESET ROWS="33%,33%,*"> f2.html f2.html

Découpages imbriqués dans plusieurs fichiers

2 2 1 <FRAMESET ROWS="33%,33%,*"> <FRAME NAME="21" SRC="f21.html"> <FRAME NAME="22" SRC="f22.html"> <FRAME NAME="23" SRC="f23.html"> </FRAMESET> 2 21 22 23 <FRAMESET COLS="50%,*"> <FRAME NAME="231" SRC="4.html" > <FRAME NAME="232" SRC="5.html" > </FRAMESET> 3 231 232 f23.html f23.html

(43)

Découpage unique vs. découpages en plusieurs fois

Découpage unique

Avantage : Facilite la maintenance car il n'y a qu'un seul fichier FRAMESET.

Inconvénient : impossibilité de remettre simultanément à jour plusieurs cadres.

Intérêt du découpage en plusieurs fois

Avantage : souplesse de mise à jour des cadres car il est possible de désigner des cadres isolés ou des possible de désigner des cadres isolés ou des ensembles de cadres.

(44)

Définition d’une fenêtre dans une page

IFRAME:

Inline Frame: Permet d'afficher une page HTML dans une autre page. Ces deux

pages peuvent être stockées sur des serveurs différents. Elle est, par exemple, souvent utilisée afin d'insérer des bandeaux publicitaires hébergés sur des serveurs dédiés.

Identifiant de la fenêtre pour l'utiliser dans les TARGET

SRC= "url"

(45)

Définition d’une fenêtre dans une page

HEIGTH="h" : Hauteur de la fenêtre en pixel

WIDTH="w" : Largeur de la fenêtre en pixel

ALIGN="left|center|right|justify" :Alignement de la fenêtre dans le document qui la contient

(46)

Les formulaires

(47)

Formulaires

Objectif

Interagir avec l’utilisateur

Permet d'obtenir des réponses de l'utilisateur

Balise

<FORM METHOD="GET|POST" ACTION="Programme" > …

</FORM>

Les éléments du formulaire sont répartis en 3 classes :

Input

Champs de saisie de texte et de diférents types de boutons

Select

Listes (menus déroulants et ascenseurs)

Textarea

(48)

Formulaires

METHOD : GET envoie les paramètres dans l'URL.

POST les renvoie sous forme de données postées après l'entête HTTP.

ACTION :

Programme = méthode de traitement des informations recueillies dans le questionnaire.

Dépendant des possibilités offertes par l'hébergeur des pages.

Les valeurs à indiquer pour ces options sont à remplir suivant les indications de l'hébergeur.

Exemple : Utilisation de mailto comme programme de traitement

Permet, en général, d’envoyer directement le résultat d'un formulaire par email. Syntaxe : <FORM METHOD="POST"

ACTION="mailto:benjlaiel@yahoo.fr" ENCTYPE="text/plain">

(49)

<INPUT … >

Rôle

Permet de définir les différents types de champ d’un formulaire : zone de saisie,

case à cocher, bouton radio,

bouton de confirmation,

bouton de remise à zéro des champs.

Différentes syntaxes

Le contenu des attributs est dépendant du type de champ. <INPUT NAME="nom de la zone"

(50)

<INPUT TYPE="TEXT" … >

VALUE="valeur" : valeur correspond au :

• au contenu initial de la zone de saisie (si TYPE="TEXT") • au libellé du bouton (si TYPE="SUBMIT" ou "RESET")

• à la valeur retournée (si TYPE="CHECKBOX" ou "RADIO")

CHECKED : Dans le cas d’un bouton à cocher, indique qu’il apparaît coché par défaut

SRC="url" : Utilisé avec TYPE="IMAGE"

Adresse d’une image à afficher, celle-ci jouant le rôle de bouton de validation

SIZE="taille" : Utilisé avec TYPE="TEXT"

Correspond à la taille de la zone de saisie.

MAXLENGTH="nb" : Utilisé avec TYPE="TEXT"

Nombre maximum de caractères qu’il est possible de saisir.

Exemple

<INPUT TYPE="TEXT"

NAME="case_texte_1" VALUE="Texte par défaut" SIZE="20"

MAXLENGTH="80" >

Texte par défaut

(51)

<HTML>

<HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT>

</SCRIPT> <BODY>

<INPUT TYPE="TEXT"

NAME="case_texte_1" VALUE="Texte par défaut"

<INPUT TYPE="TEXT" … >

Exemple

VALUE="Texte par défaut" SIZE="20" MAXLENGTH="80" > <INPUT TYPE="TEXT" NAME="case_texte_2" VALUE="" SIZE="4" MAXLENGTH="4" > </BODY> </HTML>

(52)

<INPUT TYPE="CHECKBOX" … >

Exemple

Choix 1 <INPUT TYPE="CHECKBOX" NAME="case_1" VALUE="1" CHECKED><BR>

Choix 2 <INPUT TYPE="CHECKBOX" NAME="case_2" VALUE="1"><BR>

Choix 3 <INPUT TYPE="CHECKBOX" NAME="case_3" VALUE="1"><BR>

Choix 4 <INPUT TYPE="CHECKBOX" NAME="case_4" VALUE="1">

VALUE="1">

Principes

Plusieurs cases peuvent avoir l'option CHECKED Les 4 cases n'ont pas le même nom

VALUE indique la valeur qui sera retournée en fonction des la(les) cases cochées.

(53)

<INPUT TYPE="RADIO" … >

Ne peux être décoché

Exemple

Principes

Une seule case peut avoir l'option CHECKED Les 4 cases ont le même nom

VALUE indique la valeur qui sera retournée en fonction de la

(54)

Bouton de validation et de mise à zéro

Bouton de validation avec image :

(55)

Liste de choix: <SELECT …>

<SELECT NAME="nom de la liste" SIZE="1|s"> <OPTION … >texte de la ligne 1</OPTION> ...

</SELECT>

SIZE="1|s"

SIZE="1" → liste déroulante SIZE≠"1" → liste défilante. SIZE≠"1" → liste défilante.

<OPTION … >texte de la ligne</OPTION>

3 attributs possibles : DISABLED, SELECTED et VALUE (même rôle que pour les boutons radios)

(56)

Exemple de liste défilante

<OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> <OPTION>Ligne 4</OPTION> <OPTION>Ligne 5</OPTION> <OPTION>Ligne 6</OPTION> </SELECT>

Liste de choix: <SELECT …>

</SELECT>

<OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT>

(57)

Exemple de liste déroulante

<HTML>

<HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT>

</SCRIPT> <BODY>

<OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION>

Liste de choix: <SELECT …>

<OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT>

<OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> </BODY> </HTML>

(58)

Exemple de liste déroulante

On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>. Pour faire afficher d'entrée Vendredi au lieu de lundi :

(59)

< TEXTAREA … > … </ TEXTAREA ...>

<TEXTAREA NAME="nom de la zone"

ROWS="r" COLS="c">

Rôle: Permet de définir une zone de texte pour saisir des données de taille plus importante que dans une case de texte.

ROWS="r" : Taille de la zone de saisie en nombre de lignes

(60)

Feuille de style: CSS

CSS

(Cascading Style Sheets)

Ensemble de mises en forme génériques (position des éléments, aspect des textes à afficher, …) associés à des balises.

HTML sert à structurer le contenu, CSS sert à formater un contenu structuré

Syntaxe

Balise {propriété: valeur [; propriété: valeur …]*}

Exemples

H1 {font-size: 20pt; font-weight: bold ; color: red}

H2 {font-size: 16pt; font-weight: bold ; color: #080000} P {margin-left: -20px; margin-right: -20px; margin-top: 30px} P {margin-left: -20px; margin-right: -20px; margin-top: 30px} BODY {background: URL(…….); text-indent: 2cm}

Déclaration de la feuille de style ou de son utilisation dans l’entête :

( < HEAD > … </ HEAD > )

Définition: Trois méthodes pour appliquer le style CSS à un document HTML

- Définition locale : Dans un élément de la page - Définition Globale: Globalement pour la page - Définition externe: Dans un fichier séparé

(61)

Définition de styles

Définition locale

Exemple:

Mettre l'arrière plan en rouge:

<html>

<head> <title>Exemple</title> </head>

</head>

<body style="background-color: #FF0000;">

<p>Cette page est rouge</p> </body>

</html>

Possibilité de définir

des sous-classes

(62)

Définition de styles

Définition globale (

Consiste à inclure le code CSS avec la balise HTML <style> dans l’entête

< HEAD > … </ HEAD >) <html> <head> <title>Exemple</title> <style type="text/css"> body {background-color: #FF0000;} body {background-color: #FF0000;} </style> </head> <body>

<p>Cette page est rouge</p> </body>

(63)

Définition de styles

<html>

<head> <title>Mon document</title>

<link rel="stylesheet"

Définition externe

Utilisation d'une feuille de style externe (Un lien Link vers une feuille de style .css)

<link rel="stylesheet" type="text/css" href="style.css" />

/* sélecteur { attribut: valeur } */ body {

Feuille de style: style.css Fichier HTML

<link rel="stylesheet"

type="text/css" href="style.css" />

</head> <body> <h1>Introduction</h1> <h1>HTML</h1> <h2>Les CSS</h2> <h3>Définition Externe</h3>

<h2>Utilisation d'un fichier CSS externe</h2>

</body>

body {

background: blue;

font-family: Arial, Verdana; } /* sélecteur universel */ * { color: #cccccc; } /* sélecteur multiple */ h1, h2, h3 { font-style: italic;

font-family: Georgia, sans-serif; }

/* sélecteur unique */ h3 { color: red; }

(64)

Les sélecteurs de classe

body { background: #0000ff; color: #cccccc; } p.citation { text-align: center; color: white; background: black; border-style: solid; <html>

<head> <title>Mon document</title>

<link rel="stylesheet" type="text/css" href="select.css" />

</head> <body>

<p class="normal">La tunisie </p>

CSS

HTML

Select.css

border-style: solid; } .normal { font-size: 120%; }

<p class="normal">La tunisie </p> <p class="citation">163 610 km2 avec plus de 1200 kilomètres de côtes </p>

</body> </html>

(65)

Les sélecteurs d’identifiant

body { background: #0000ff; color: #cccccc;} p#citation { width: 50%; border-style: solid; background: blue; } #normal { <html>

<head> <title>Mon document</title> <link rel="stylesheet" type="text/css" href="css_selecteur.css" /> </head> <body>

CSS

HTML

#normal { font-size: 220%; }

<p id="normal">La tunisie </p> <p id="citation">163 610 km2 avec plus de 1200 kilomètres de côtes </p>

</body> </html>

(66)

Les sélecteurs contextuels

/* Met les "em" en vert dans les items */

li em {

color: green;

font-weight: bold; }

/* diminue la taille du texte des listes imbriquées */

ul ol, ol ul, ul ul, ol ol {

font-size: 80%; }

<html>

<head> <title>Mon document</title> <link rel="stylesheet" type="text/css" href="selecteur_cont.css" /> </head> <body>

CSS

HTML

_{selecteur_cont.css}

} <body> <ul> <li>de <em>titre</em></li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body> </html>

NB : "titre" est en vert

mais pas "Les balises"

(67)

Les pseudo-éléments et les pseudo-classes

/* Met la 1ère lettre de chaque paragraphe en très gros */

p:first-letter {

font-size: 250%; }

/* Colore les liens en rouge */

a:link {

<

html>

<head> <title>Mon document</title>

<link rel="stylesheet"

type="text/css" href="pseudo.css" />

</head>

<

body

>

<p>Comme le disait <a

CSS

HTML

_pseudo.css

color: red; text-decoration: none; }

<p>Comme le disait <a

href="./napo.html">Napoléon

</a> :</p>

<p>Le doute est l'ennemi

des grandes entreprises</p>

</

body

>

</

html

>

(68)

Positionnement

Positionnement normal : static

Le navigateur positionne les éléments en fonction de leurs types

(block-level :

Div

ou inline:

SPAN

) et de leurs ordres d’apparition dans

le code source de la page

<html>

<body>

<div>

<h1>Menu</h1>

</div>

<br>

<div>

Cet exemple montre l'utilisation de

<span style="color:blue;text-decoration:

underline;" >DIV et SPAN</span>.

</div>

</body

(69)

Positionnement (relatif)

Décalage par rapport au positionnement static

<

html>

<head> <title>Mon document</title>

<link rel="stylesheet"

type="text/css" href="pos_relatif.css"

/>

</head>

CSS

HTML

span.haut { position: relative; bottom: 8px; background-color: #ffff00; } span.bas { position: relative;

pos_relatif.css

<

body

>

Ceci est un exemple avec

<span class="haut">du texte

en haut</span> et

<span class="bas">du texte

en bas</span>

</

body

>

</

html

>

position: relative; bottom: -8px; background-color: #5555ff; }

(70)

Positionnement (absolu)

Position arbitraire. L’ordre dans le code source n’a plus d’importance

Pour le positionnement des autres éléments : comme s’il n’existait pas

<div class="menu"> Ici se trouve le menu </div> <div class="contenu"> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; }

CSS

HTML

Ce site répertorie des citations de Napoléon Bonaparte. </div> </body> </html> } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; }

(71)

Marges et bordures

contenu

padding (marge interne)

margin (marge externe)

border (bordure)

• Bordures :

– border – border-left, border-right, border-top, border-bottom

• Marges externes:

– margin – margin-left, margin-right, height margin-top, margin-bottom

• Marges internes :

– padding – padding-left, padding-right, padding-top, padding-bottom width

• Tailles :

– Height width

(72)

Marges

<html>

<head> <title>Mon document</title> <link rel="stylesheet"

type="text/css" href="marge.css" /> </head>

<body>

<div class="menu"> Ici se trouve le menu

</div> div.menu { position: absolute; top: 0px; left: 0px; width: 10%; padding-top: 30px; padding-left: 2px; border-style: solid; } div.contenu {

CSS

HTML

</div> <div class="contenu">

Cette page l'uilisation de la position absolue. </div> </body> </html> div.contenu { position: absolute; margin-left: 15%; border-style: solid; border-color: red; }

(73)

Bordures

<html> <body> <span class="i1"> Peu important </span><br /><br /> <span class="i2"> Important </span><br /><br /> span.i1 { border-style: dotted; border-color: #888888; border-width: thin; } span.i2 { border-style: dashed;

HTML

ou une valeur numérique

CSS

</span><br /><br /> <span class="i3"> Vital </span> </body> </html> border-style: dashed; border-color: blue; border-width: medium; } span.i3 { border-style: solid; border-color: red; border-width: thick; }

(74)

Polices

font-family. Police ou famille de police (serif, sans-serif, cursive, fantasy,

monospace). Attention, les polices supportées dépendent fortement du navigateur ! Déclarez une famille générique après la police (séparées par une virgule) pour substituer une police non trouvée par une autre.

font-size. Taille de la police : valeur numérique ou xx-small,

x-small, small, medium, large, x-large, xx-large.

font-style. Style de la police : italic, oblique, normal.

font-variant. Casse des caractères : normal, small-caps.

font-weight. Graisse des caractères : normal, bold, bolder, lighter.

line-height. Espace interligne (ex. : 150% ou 1.5em).

text-decoration. Ornement du texte : none, underline. (souligné), overline

(75)

Couleurs et fond

<html> <body> <div class="contenu"> Contenu </div> <div class="pub"> Partez au soleil ! </div> </body> body { background-color: purple; } .contenu { color: rgb(200, 250, 0); height: 400px; background-image:url("piece.gif"); background-repeat: repeat; }

HTML

no-repeat, repeat,

CSS

</body> </html> } .pub {

float: right; width: 470px; height: 300px; color: white;

background-image:url("plage.jpg");

background-repeat: no-repeat; background-position: right top; }

no-repeat, repeat,

repeat-x, repeat-y

(76)

Blocs: flottement

Un objet flottant est positionné à un endroit précis et le reste du

contenu s'écoule autour de lui. Le flottement est défini par la

propriété

float

:

– left

: l'écoulement se fera par la droite

– right

: l'écoulement se fera par la gauche

– none

– La propriété clear

(

none

,

left

,

right

,

both

) empêche que l'élément ne se

(77)

Blocs: flottement

<html>

<head> <title>Mon document</title> <link rel="stylesheet"

type="text/css" ref="flottement.css" />

</head> <body>

#img1 { float:left; } #img2 { float:right; } #img3 { float:left; } #img4 {

float:left; clear: left;}

#img5 {

HTML

_CSS

<img id="img5"

src="tunisie_golfe.jpg" />

La faculté des sciences de gafsa est située au campus universitaire sidi ahmed Zarroug- Gafsa.

</body> </html>

(78)