cours d'initation 2011-2012 · la mise en page s'effectue à l'aide de balises. en...

Cours d'initationCours d'initation2011-20122011-2012

Dernière mise à jour:24/11/2011Dernière mise à jour:24/11/2011

Michel Plomteuxhttp://plomteux.servhome.org/wordpress/

http://plomteux.servhome.org/wordpress/

2

Références principales

http://www.developpez.com

Les documents du W3C en français

Cette page liste les traductions de rapports techniques du qui sont hébergées sur ce site. Ce ne sont pas des versions officielles en français ; seuls les documents originaux en anglais font autorité. Chaque traduction est archivée et disponible en téléchargement.YoYodesignhttp://www.yoyodesign.org/doc/w3c/w3c.htmlOPenweb

Nous sommes des professionnels de la conception, de la réalisation ou du graphisme, du marketing ou du journalisme, mais aussi des passionnés, exerçant un métier hors du monde de l’Internet. Cette pluralité permet une vision unique, à la fois du point de vue du concepteur et de l’utilisateur

quotidien. Habitués des contraintes budgétaires et temporelles, nos préoccupations sont pragmatiques et réalistes.http://openweb.eu.org

http://fr.html.net/

Apprendre HTMLCe tutoriel HTML constitue une introduction simple, mais complète et exacte, à la construction de sites Web. Le tutoriel commence depuis le début et ne nécessite aucune connaissance préalable en programmation.Commencer l'apprentissage de HTML.

Apprendre CSSCe tutoriel CSS vous mettra sur les rails de CSS en quelques minutes. Il est facile à comprendre et il vous enseignera toutes les techniques sophistiquées.Commencer l'apprentissage de CSS Alsacreation

# Mamouthland

http://css.mammouthland.net

SELFHTML: version 8.0 du 27/01/2003, auteur: Stefan Münz (traduit par Serge François)

http://fr.selfhtml.org/index.htm

Plomteux Michel http://plomteux.servhome.org/wordpress/


http://fr.selfhtml.org/index.htm

http://css.mammouthland.net/

http://fr.html.net/tutorials/css/

http://fr.html.net/tutorials/css/

http://fr.html.net/tutorials/html/


http://fr.html.net/

http://openweb.eu.org/

http://www.yoyodesign.org/doc/w3c/w3c.html

http://www.developpez.com/

http://openweb.eu.org/


http://www.alsacreations.com/tutoriels/

3

Table des matièresRéférences principales ..........................................................................................................................2

Les documents du W3C en français..................................................................................................2YoYodesign......................................................................................................................................2OPenweb...........................................................................................................................................2http://fr.html.net/...............................................................................................................................2

Apprendre HTML.........................................................................................................................2Apprendre CSS.............................................................................................................................2

Alsacreation......................................................................................................................................2# Mamouthland ............................................................................................................................2

SELFHTML: ...................................................................................................................................2Principe:................................................................................................................................................9Balises.................................................................................................................................................10Structure vraiment minimum...............................................................................................................10

Présentation minimum.....................................................................................................................10Exemple:.....................................................................................................................................10Une petite page avec un fond coloré et un titre..........................................................................11

La hiérarchie d'un texte : ....................................................................................................................12Les paragraphes .............................................................................................................................12Commentaires.................................................................................................................................12

Justification – alignement ...................................................................................................................13Retrait <blockquote>..........................................................................................................................14

Texte préformaté.............................................................................................................................14Style de caractère (préférez les styles !!!)...........................................................................................14Couleur...............................................................................................................................................15

Code RGB......................................................................................................................................15Système hexadécimal......................................................................................................................15

Colorier le texte d'un paragraphe:...............................................................................................15Mettre un paragraphe en bleu :...................................................................................................15

Structure plus précise de l'entête.........................................................................................................16Schéma de l'ossature d'un fichier HTML 4:....................................................................................16Explication:.....................................................................................................................................16

Mentions du type de document...................................................................................................16Doctype pour HTML 5...................................................................................................................17La balise <meta />...........................................................................................................................17

Style -introduction-.............................................................................................................................20Objectif:..........................................................................................................................................20

Utilisation des styles............................................................................................................................201) Style externe...............................................................................................................................202) Style dans l'entête du document.................................................................................................213) Style importé..............................................................................................................................214) Dans une balise...........................................................................................................................21Les différents attributs d'un style sont :...........................................................................................21Déclarer un style.............................................................................................................................22

Classe et identifiants............................................................................................................................24Définir les propriétés d'une classe...................................................................................................24L'ID (identifiant) ............................................................................................................................24

Mise en forme de la police avec style.................................................................................................25



4

font-family.......................................................................................................................................25Unités..............................................................................................................................................25

longueurs.....................................................................................................................................25font-size..........................................................................................................................................26

font-style en normal ou italique.................................................................................................26Grouper les styles identiques..........................................................................................................26

Exemple 1 :.............................................................................................................................27Exemple 2 :.............................................................................................................................27

Les balises <span> et <div>............................................................................................................27La balise <span>.........................................................................................................................27La balise <div>............................................................................................................................28

CSS 3..................................................................................................................................................28Doctype.......................................................................................................................................28

Voir l'article http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html 28Enumération des éléments-listes ........................................................................................................29

ol et ul.............................................................................................................................................29Changer le point de départ: ........................................................................................................29On peut imbriquer des listes:......................................................................................................30

Définitions (liste de ...)....................................................................................................................31Listes et css.....................................................................................................................................31

list-style-type (Type de représentation)......................................................................................31list-style-position (Retrait des listes)...............................................................................................33

liste sous forme de tableau..........................................................................................................33Les tableaux........................................................................................................................................34

Commandes de base........................................................................................................................34<table></table>...............................................................................................................................34<tr></tr>.........................................................................................................................................34<td></td>........................................................................................................................................34<th></th>........................................................................................................................................34<caption> </caption>......................................................................................................................35

Exemple de tableau avec bordures avec titre et entêtes..............................................................35Fusions de cellules..........................................................................................................................35

rowspan......................................................................................................................................35colspan........................................................................................................................................36<table cols ="x">........................................................................................................................37

colgroup..........................................................................................................................................37Définition....................................................................................................................................37

Couleur de la bordure ....................................................................................................................37Espace entre les cellules et espace autour du texte dans chaque cellule ........................................37<thead> , <tbody> et <tfoot>.........................................................................................................37

CSS et tableau.....................................................................................................................................38Centrage du tableau (ne fonctionne pas pour IE)...........................................................................38 Les bordures internes.....................................................................................................................38Les bordures séparées :border-collapse..........................................................................................38Les bordures fusionnées..................................................................................................................38Emplacement de la légende (IE?)....................................................................................................38COL et COLGROUP......................................................................................................................39Exemple complet.............................................................................................................................40

Les images .........................................................................................................................................42Images et position en css...................................................................................................................43



5

Positionner les images à gauche ou à droite en CSS.....................................................................43Placer cela dans un CSS Externe...............................................................................................43

Position d'images à gauche ou à droite avec une legende...............................................................44Position images au centre avec CSS...............................................................................................44CSS et alignement vertical:.............................................................................................................44Images de fond (ancienne méthode)...............................................................................................45

Fixer le fond:...............................................................................................................................45Image de fond en CSS....................................................................................................................45

Code CSS de base.......................................................................................................................45Fond de page fixe........................................................................................................................45Positionnement en haut à droite..................................................................................................46Positionnement au centre............................................................................................................46Positionnement en bas à droite...................................................................................................46Remarques..................................................................................................................................46

Remplacement d'un élément img isolé............................................................................................47Pointeurs et hyperliens........................................................................................................................48

Fichier sur le système hôte..........................................................................................................48Adressage relatif sur le site :.......................................................................................................48Les couleurs des hyperliens (anciènne méthode)........................................................................49Le champ target..........................................................................................................................49

liens et css.......................................................................................................................................49Pseudo-formats...........................................................................................................................49

Les liens vers une partie d'un document .............................................................................................50Les ancres.......................................................................................................................................50

Exemple :...................................................................................................................................50Ancienne Syntaxe : ....................................................................................................................50Pour retourner au début d'un document: #TOP..........................................................................51

Images cliquables <img src="image.gif" USEMAP="#decoupage">.............................................51MAP & AREA............................................................................................................................51

Exemple:.................................................................................................................................51 Paramètres de AREA:............................................................................................................51

Pointer vers un type de document:..................................................................................................53Site HTTP (WWW)................................................................................................................53Site FTP..................................................................................................................................53

Adresser un message électronique .............................................................................................53 L'attribut alt et image.............................................................................................................53

Enchaîner les pages automatiquement............................................................................................54LES FORMULAIRES........................................................................................................................55

Le container <form></form>..........................................................................................................55<form name=" ...">.....................................................................................................................55 <form action="">.......................................................................................................................55<form Method="post|get" >.......................................................................................................56<form enctype="">.....................................................................................................................56

Comment réunir des champs de formulaires et donner un titre à ce bloc ?.....................................56 FIELDSET (GROUPE de CHAMPS)......................................................................................56

Exemple d'utilisation :.............................................................................................................57L'élérnent <input>.......................................................................................................................57<input type = "submit" value="quelquechose">.........................................................................57<input type=-"button" value="page précédente">......................................................................58<input type="text">....................................................................................................................58



6

<textarea></textarea>.................................................................................................................59Les "à la ligne" dans <textarea>.........................................................................................................60

Résultat de la page après envoi au serveur.....................................................................................61<input type="radio">..................................................................................................................62<input type="checkbox" >..........................................................................................................62<input type="hidden">................................................................................................................63<input type="Password">...........................................................................................................63Les listes déroulantes <select size="X">....................................................................................63Les menus déroulants..................................................................................................................64Le paramètre value dans <optionvalue="une valeur">..............................................................65 optgroup ...................................................................................................................................65Type="image" pour envoyer le formulaire .................................................................................65

Les conteneurs de type bloc ...............................................................................................................66La hauteur et la largeur...................................................................................................................66

Fixer la largeur [width]...............................................................................................................66Fixer la hauteur [height]..............................................................................................................66

Les bordures...................................................................................................................................66L'épaisseur des bordures [border-width].....................................................................................66La couleur des bordures [border-color]......................................................................................67Les types de bordures [border-style]..........................................................................................68

Exemples de définitions de bordures.......................................................................................68Concision [border]......................................................................................................................69

Margin et padding...........................................................................................................................69Fixer la marge d'un élément........................................................................................................69

Fixer l'espacement dans un élément................................................................................................70Padding...........................................................................................................................................71

Valeurs pour PADDING............................................................................................................71 Règles applicables aux valeurs...................................................................................................71

Positionner en absolu et relatif........................................................................................................72La position relative.....................................................................................................................72

Centrage vertical.................................................................................................................................73Overflow.....................................................................................................................................74

Le débordement .................................................................................................................................74visible .....................................................................................................................................74hidden .....................................................................................................................................74scroll ......................................................................................................................................74auto ........................................................................................................................................74

Un formulaire élaboré avec du style............................................................................................75la mise en page en HTML5 ................................................................................................................77

Le doctype .....................................................................................................................................77I. Section.....................................................................................................................................77II. nav..........................................................................................................................................77III. Article...................................................................................................................................77IV. aside......................................................................................................................................78V. header / footer........................................................................................................................78VI. adress....................................................................................................................................78VII. summary..............................................................................................................................78VIII. progress.............................................................................................................................79

Bord arrondis border-radius............................................................................................................79En pratique, on a quelques soucis !.............................................................................................79



7

Dessin et la balise canvas ...............................................................................................................80Le script .........................................................................................................................................80

Exemple: afficher un rectangle. ..................................................................................................80Cimetière des vieilleries.......................................................................................................................81

Polices (ancienne méthode à éviter) ...............................................................................................81Formater une police de caractère....................................................................................................81Formater la taille d'une police de caractère (ancienne méthode).....................................................81Formater la couleur d'une police de caractère.................................................................................81Les cadres ou frames (à oublier !)...................................................................................................82La page frameset ............................................................................................................................83

frameset: ....................................................................................................................................84division horizontale.....................................................................................................................84division verticale.........................................................................................................................84La balise <frame src="contenu" >..............................................................................................85

Frames imbriquées..........................................................................................................................85exemple.......................................................................................................................................85

Compatibilité...................................................................................................................................86Target :Liens et cibles dans une frame............................................................................................86



8

Introduction au HTML

Quand Tim Berners-Lee a imaginé le WEB , il l'a conçu avec une interface commune et facile à utiliser , qui permettrait à tous de publier sur le Web . Pour atteindre ce but , l'équipe du CERN a développé

l' Hyper Text Markup Language

Le "World Wide Web Consortium (W3C)" a défini les normes du html

http://www.w3.org/Consortium/Points/w3c7.fr.htm

Le HTML est basé sur le SGML, qui signifie Standard Generalised Markup Language. Le SGML est régi par une norme ISO internationale. SGML est un langage de description de données qui divise un document en deux parties : le DTD (Data Type Definition) et les données elles-mêmes. Le DTD est une sorte de dictionnaire qui décrit les différents "tags" acceptés dans le document et les relations qui les unissent. Le corps du document contient les données délimitées par les "tags" définis dans le DTD.Le langage HTML est utilisé sur le WWW depuis 1990.Par conséquent, vous ne pouvez pas concevoir un site Web sans créer des documents HTML.

La mise en forme dépend du navigateur et des options choisies par le lecteur. Le résultat de la visualisation peut donc varier mais la structuration logique est préservée dans tous les cas.

HTML permet d'écrire des hypertextes grâce à des liens pointant sur d'autres documents qui peuvent être des documents HTML ou des documents d'une autre nature .

Un document contenant des annotations en HTML n'est rien de plus qu'un fichier texte. Il peut donc être reconnu sans trop de problèmes de conversion d'un environnement à un autre. Une page peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle plate-forme si on ne tient pas compte de la manière dont sont définis certains caractères (éàçî...).


SGML

HTML XML

svgHTML1..4 MathMLXHTML

HTML 5


http://www.w3.org/Consortium/Points/w3c7.fr.htm

9

Principe:Le principe est simple. vous ouvrez le Bloc-notes de Windows et écrivez le code HTML requis pour chacune des pages de votre site Web.

Vous sauvegardez chaque document dans un fichier portant l’extension .htm ou mieux .html .Remarque ;Concernant l'éditeur, il y a certainement mieux que le bloc-notes.Installez notepad++, c'est déjà beaucoup mieux (coloration syntaxique, mise en évidence de la

structure …Il existe un petit éditeur gratuit et très performant Komodo-edit



http://notepad-plus-plus.org/download

http://www.activestate.com/komodo-edit

10

BalisesLa mise en page s'effectue à l'aide de balises. En règle générale, une balise s'écrit sous la forme:

<tag>texte sur lequel porte la balise </tag>

où tag est le nom de la balise.

Les balises vont en général par deux; celle de début <tag> et la même mot précédé de / pour terminer </tag>; ainsi tout document HTML doit être inséré dans les balises <html> et </html>

Structure vraiment minimumChaque document HTML comprend 2 parties :

• l'en-tête (HEAD) contient des informations sur le document et, en principe, il est invisible dans le navigateur.

• le corps (BODY) contient le contenu proprement dit du document. Présentation minimumPour créer un document HTML, il faut insérer les commandes suivantes au début du document:<html> première ligne du document

<head> ouverture de la zone d'entête<title> titre de la page suivi de </title>

</head> fermeture de la zone d'entête.

<body> ouverture du corps du document"Mettre le texte et les images ici"

</body> fin du corps du document

</html> fin du document HTML

La page ainsi créée pourra servir de maquette

Pour aller à la ligne, on utilise une seule balise <br/> (notée <br/> pour respecter la norme xml)

Exemple:Ouvrons le bloc notes et entrons le texte suivant<html><head> <title> Ma page 1 </title></head><body>Normalement, un texte est aligné à gauche <br/>et décalé à droite par défaut. <br/>On peut aussi le centrer ou l'aligner à droite<br/>Un paragraphe aligné à gauche n'a pas besoin de commencer et de se terminer <br/> par un <br/> marqueur de paragraphe.<br/></body></html>on le sauve avec l'extension htmlOn ouvre un navigateur et on observe le résultat. Si on veut revoir le code HTML, on sélectionne Affichage – source.



11

Modifions l'alignement dans le code source (en appuyant sur entrée au beau milieu d'une ligne par exemple).

Cliquez sur enregistrer et ensuite, dans le navigateur, choisissez actualiser. On ne voit aucune différence !

Ces indication sont des balises. Le langage HTML est un langage permettant de définir la structure logique d'un document à l'aide de différents éléments de base (titres, paragraphes, liens vers d'autres documents, ...)

Une petite page avec un fond coloré et un titre<html><head>

<title>ma première page</title></head>

<body bgcolor="#FFF0F0">Bonjour

</body>

</html> remarque : Pour colorier le fond

<body style="background-color:#FFF0F0">


Anciènne notation


12

La hiérarchie d'un texte : La division d'un document HTML en titres et en sous-titres intervient via les tags "Headings":

<h1> Titre d'un document</h1> <h2> Sous-titre</h2> …<h6> cela va jusqu'au niveau 6</h6> <h1> Exemple de header de niveau 1</h1> donne

Exemple de header de niveau 1

<h2> suivi de l'entête et de </h2> donne:Exemple de header de niveau 2





Il n'y a pas de niveau inférieur à 6Les paragraphes Ils sont indiqués par la balise <p> </p> et ne peuvent être vides.

En outre, vous trouvez également : <br> ou <br/>: "Line Break": permet au texte de continuer sur la ligne suivante <hr> ou <hr/> : "Horizontal Ruler": insère une ligne horizontale sur l'écran

Remarquons la notation conforme au xml de balises qui ne sont pas des conteneurs <balise />

CommentairesOn peut ajouter des commentaires qui n'apparaîtront pas dans la page<! Voici un commentaire >



13

Justification – alignement

Il existe quatre façons d'aligner un paragraphe Anciennement:

1. aligné à gauche (par défaut) <p align="left">2. Aligné à droite <p align="right"> texte justifié –ou aligné- à droite et décalé à gauche.3. centré <p align="center"> 4. justifié <p align="justify">

Un dinosaure <center> suivi de quelque chose de centré suivi de </center> donne:

Quelque chose de centré

Par un attribut de style 1. aligné à gauche (par défaut) <p style= "text-align:left ">2. Aligné à droite <p style= "text-align:right ">3. centré <p style= "text-align:center ">4. justifié <p style= "text-align:justify">

voir http://www.yoyodesign.org/doc/w3c/css2/cover.html

<p> donne un changement de paragraphe avec saut de ligne alors que <br/> donne un simple changement de ligne.Rem: <p></p> ne donne strictement rien !; pour afficher le paragraphe vide, on ajoute un espace insécable <p> </p>rem:caca boudin -> empêchera que l'espace entre caca et boudin soit utilisé pour un retour a la ligne automatique.



http://www.yoyodesign.org/doc/w3c/css2/cover.html

14

Retrait <blockquote>La balise blockquote définit de longues citations . <blockquote> suite du texte</blockquote>note: Les majuscules et les minuscules peuvent être utilisées mais il vaut mieux utiliser les minuscules.Texte préformatéLes annotations <pre></pre> obligent le navigateur à afficher un texte préformaté. Le navigateur respecte alors les fins de ligne (retours de chariot). Voici un exemple de texte préformaté:

Résultats du vote dans la circonscriptionNoms votes obtenus et %________________________________________________Candidat 1: 670 votes 59Candidat 2: 341 votes 30Candidat 3: 123 votes 11_________________________________________________ Total des votes: 1134

On peut utiliser cette balise pour introduire facilement un tableau de données

Style de caractère (préférez les styles !!!)<b></b>donne un texte en gras: texte en gras<strong></strong>donne un texte en gras également: texte en gras<em></em> donne un texte en italique: texte en italique<i></i> donne également un texte en italique: texte en italique<cite></cite>donne aussi un texte en italique: texte en italique<TT></TT>donne un texte formaté avec une fonte à espacement constant (teletype): texte formaté avec une police à espacement constant



15

CouleurCode RGBEn html simple la couleur est définie par ses trois composantes:Rouge,Vert et Bleu.Chaque composante est codée sur un octet et a donc 255 niveaux différents (0:rien ...255:maximum)Pour corser le tout, les nombres sont codés en hexadécimal de #0 à #255.Système hexadécimalLa base hexadécimale consiste à compter sur une base 16, c'est pourquoi au-delà des 10 premiers chiffres on a décidé d'ajouter les 6 premières lettres : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Base décimale 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Base hexadécimale 0 1 2 3 4 5 6 7 8 9 A B C D E F

Au delà de 15(décimal), on ajoute une rangée et contenant 1 et on recommence.

Base décimale 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Base hexadécimale 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

10 en hexadécimal signifie 1X16 +0 soit 16 en décimal, 11 signifie 1X16+1 soit 17 en décimal.On continue ainsi jusqu'à 255 ou 15X16+15 soit FF en hexadécimal.

exemplesLe bleu donne #0000FFOrange: #FFA500.Voir cette page http://www.henri-ruch.ch/HTML/Couleurs/couleurs.aspet aussi http://www.commentcamarche.net/contents/html/htmlcouleurs.php3

Colorier le texte d'un paragraphe:<p style="color:green;">Un texte en vert</p><p style="color:#FFA500;">Un texte en orange</p>

Mettre un paragraphe en bleu :On utilise l'attribut style= et sa valeur, entre guillemets, précise color (couleur du texte) : #0000FF <p style="color:#0000FF">

Les Schtroumpfs est une série de bande dessinée belge créée par Peyo </p>(pour les styles voir plus loin, tout cela deviendra plus clair)



http://www.commentcamarche.net/contents/html/htmlcouleurs.php3

http://www.henri-ruch.ch/HTML/Couleurs/couleurs.asp

16

Structure plus précise de l'entêteLe site !!! http://fr.selfhtml.org

Schéma de l'ossature d'un fichier HTML 4:<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Texte du titre</title></head><body>

</body></html>

Explication:Au premier abord, la première ligne peut paraître déconcertante pour les débutants. Cette mention un peu compliquée est une mention de type de document.

Mentions du type de documentAvec la mention du type de document, vous déterminez quel langage de marquage, et quelle version vous utilisez. Un logiciel de lecture, par exemple un navigateur Web peut s'orienter grâce à cette mention.D'après les règles des langages de marquage , un fichier HTML n'est valide que s'il mentionne un certain type de document pour s'en tenir ensuite dans le reste du code-source aux règles qui sont définies pour ce type de document. Derrière chaque mention de type de document il y a ce qu'on appelle des définitions de type de document (DTD). Même pour HTML il existe de telles définitions de type de document. Y sont fixés les éléments que peut contenir un document du type HTML, quels éléments peuvent figurer dans quels autres, quels attributs s'appliquent à un élément, si la mention de ces attributs est facultative ou obligatoire etc.En tant que débutant, il est possible que tout le travail qui est fait ne vous saute pas aux yeux. Pourtant, précisément ces types de documents à l'aide desquels les règles de langages tels que HTML peuvent être exactement définies sont un énorme progrès car ce n'est qu'ainsi que peut s'imposer vraiment le concept de formats de fichier indépendant de tout logiciel, mais conformes à des règles. Exemple d'une mention de type de document:

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">

Explication:Notez la mention du type de document au début d'un fichier HTML avant le repère d'ouverture <html>. Derrière la parenthèse pointue d'ouverture suit un point d'exclamation, suivi de la mention DOCTYPE HTML PUBLIC. Cela signifie, que vous vous référez au DTD HTML disponible publiquement. La mention suivante qui est placée entre guillemets est à comprendre ainsi:

W3C est l'éditeur du DTD, donc le consortium W3. Une mention telle que DTD HTML 4.01 Transitional signifie que vous utilisez le type de document "HTML" et cela dans la version du langage 4.01 et sa variante "Transitional". Le terme EN est une abréviation pour la langue qui veut dire ici l'anglais (english). La mention se réfère à la langue parlée dans laquelle les noms d'éléments et d'attributs du langage de repères ont été définis et non pas au contenu de votre fichier. Utilisez donc



http://fr.selfhtml.org/

17

toujours EN, étant donné que les noms d'éléments et d'attributs HTML sont basés sur la langue anglaise.Notez les barres obliques comme dans l'exemple ci-dessus.

De plus la mention de type de document contient une adresse Web. La mention de cette adresse n'est pas absolument nécessaire. Une mention telle que:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">est donc également permise.Par l'adresse Web mentionnée, un logiciel de lecture peut appeler la définition du type de document (DTD) pour y "consulter" les règles qui y sont notées. Toutefois la plupart des navigateurs actuels ne le font pas pour HTML parce qu'ils doivent compter avec les déformations du langage les plus graves pour beaucoup de pages Web et qu'ils sacrifient la capacité d'afficher convenablement à l'écran du HTML même non-conforme aux règles au profit de l' "enseignement pur". La conduite en fait souhaitée est pourtant, qu'un navigateur qui lit un fichier HTML contenant une mention de type de document, veille à l'observation des règles de ce type de document.

La variante "Transitional" pour HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">

Utilisez cette mention lorsque vous voulez encore utiliser certains éléments et attributs qui faisaient partie dans le temps du standard HTML. Une raison de se décider pour cette variante peut être que vous voulez écrire votre HTML de telle façon qu'il rende également l'effet désiré avec des Netscape 3.x et d'autres navigateurs plus anciens qui n'interprétaient pas encore les feuilles de style.

Doctype pour HTML 5En HTML 5 traité en tant que HTML, un seul doctype est prévu, dont la syntaxe est simplifiée par rapport à celle d'un doctype classique.

<!DOCTYPE html>

La balise <meta />Voir http://www.alsacreations.com/article/lire/628-balises-meta.html

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"><html><head>

<title>Titre de la page</title><meta name="keywords" lang="fr" content="motcle1,mocle2" /><meta name="description"

content="Description de ma page web." /><meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" /><meta http-equiv="Content-Language" content="fr" />

</head><body>



http://www.alsacreations.com/article/lire/628-balises-meta.html

18

<div>Ici, mon texte.

</div></body></html>

Vous l’aurez peut-être remarqué, le nom que l’on place juste après le mot «meta» correspond au mot-clé utilisé dans un attribut précis: suivant les cas, il s’agit de l’attribut name ou de l’attribut http-equiv.

On trouvera toujours dans la balise un deuxième attribut, l’attribut content, qui contiendra la valeur associée au mot-clé.

Une balise META est donc une paire mot-clé–valeur, transcrite en HTML de la manière suivante:

<meta name|http-equiv="Mot-clé" content="Valeur" />

(Attention: la notation | ci-dessus indique qu’il faut utiliser soit l’attribut name, soit l’attribut http-equiv, mais pas de manière arbitraire. Chaque «balise META» utilisera l’un ou l’autre attribut.)

Les balises meta les plus importantes sont les balises DESCRIPTION, KEYWORDS, CONTENT-TYPE et CONTENT-LANGUAGE. Les autres balises meta sont pas ou peu utiles. Voici une liste non-exhaustive des différentes balises <> :

• La balise Meta DESCRIPTION décrit le contenu de la page web : <meta name="description" content="Les balises meta en xhtml." />

• La balise Meta KEYWORDS regroupe les principaux mots-clés de la page web par langue (car une page web peut contenir plusieurs langues différentes). Il peut donc y avoir plusieurs balise Meta KEYWORDS : <meta name="keywords" lang="fr" content="meta,balise meta,meta balise,balises meta,meta balises,xhtml" />

• La balise Meta CONTENT-TYPE définit la table de caractères à utiliser : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta charset="iso-8859-1" /> version HTML 5

• La balise Meta CONTENT-LANGUAGE définit la ou les langues utilisées : <meta http-equiv="Content-Language" content="fr" /><meta http-equiv="Content-Language" content="fr,uk,us" />

• La balise Meta CONTENT-SCRIPT-TYPE autorise l'utilisation de gestionnaire d'évènement via les attributs des balises (exemple : onclick="javascript:tester();") : <meta http-equiv="Content-Script-Type" content="text/javascript" />

• La balise Meta AUTHOR définit l'auteur de la page web : <meta name="author" content="René Bertrand,Fabien Branchut,Claude François" />

• La balise Meta CATEGORY définit la catégorie de la page web : <meta name="category" content="webmaster,outils webmaster,apprentissage,informatique,internet" />

• La balise Meta COPYRIGHT définit le copyright de la page web : <meta name="copyright" content="Xhtml Online, Webmaster Incorporated" />

• La balise Meta LANGUAGE définit la ou les langues de la page web (elle semblerait inutile de nos jours) et on utilise à la place la balise Meta CONTENT-LANGUAGE :



19

<meta name="language" content="fr,uk,us" />• La balise Meta DISTRIBUTION définit la destination du contenu de la page web (publique,

privée...). Cette balise est certainement inutilisée de nos jours : <meta name="distribution" content="global" />

• La balise Meta GENERATOR précise le nom du logiciel ayant été utilisé pour créer la page web : <meta name="generator" content="ultraedit" />

• La balise Meta IDENTIFIER-URL précise le nom de domaine de la page web. Cette balise n'a que peu d'interêt. Sa valeur est donc identique sur toutes les pages du site : <meta name="identifier-url" content="xhtml.le-developpeur-web.com" />

• La balise Meta PUBLISHER précise le nom de la personne ayant publiée la page web : <meta name="publisher" content="Fabien BRANCHUT" />

• La balise Meta REPLY-TO précise l'adresse e-mail du webmaster ayant créé la page web. Attention, cette balise n'est plus utilisée car elle est récupéré par certains robots pour faire du spam. Si vous préciser votre adresse e-mail, vous risquez ensuite de recevoir énormement d'email non sollicités : <meta name="reply-to" content="[email protected]" />

• La balise Meta REVISIT-AFTER précise le délai minimum entre deux visites de robots des moteurs de recherche. Cette balise semble ne plus être utilisée de nos jour : <meta name="revisit-after" content="7 days" />

• La balise Meta ROBOTS autorise ou interdit l'indexation par les robots des moteurs de recherche. Cette balise semble ne plus être utilisée de nos jour. Elle peut contenir plusieurs valeur (all, none, index, noindex, follow, nofollow) : <meta name="robots" content="index,follow" />

"all" est équivalent à "index,follow""none" est équivalent à "noindex,nofollow""index" signifie que cette page sera indexée"index" signifie que cette page ne sera pas indexée"follow" signifie que les liens de cette page seront suivis"nofollow" signifie que les liens de cette page ne seront pas suivis

• La balise Meta GOOGLEBOT autorise la mise en cache spécifique par le moteur de recherche Google (archive, noarchive) : <meta name="googlebot" content="archive" />



20

Style -introduction-Voir http://www.w3.org/Style/Examples/011/firstcss.fr.html

Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Objectif:Séparer les structures des donnéees (titres, paragraphes, liens …) de la présentation (gras, souliné, couleur, image de fond …).Depuis le 12 mai 1998, la norme CSS 2.0 est le standard en vigueur. La norme CSS2 apporte un grand nombre de nouvelles fonctionnalités par rapport à la précédente norme (1.0), parmi lesquelles :

• La prise en compte de la diversité de médias (écran, imprimante, braille, synthétiseur vocal, etc.) ;

• L'ajout de propriétés auditives pour les aveugles et malvoyants ; • La manipulation de curseurs ; • La gestion des débordements et de la visibilité des éléments.

Utilisation des styles

Il existe 4 méthodes différentes pour définir et utiliser un style:

exemple:

<html>

<head> <title>title</title> <link rel=stylesheet type="text/css" HREF="http://style.com/cool.css" title="Cool">

<style type="text/css">

@import url(http://style.com/basic); h1 { color: blue } </style> </head> <body> <h1>headline is blue</h1>

<p style="color: green">tout ce paragraphe est vert. </p> </body></html>

1) Style externeLe fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document est un "plus" car il est ainsi possible, en modifiant le fichier contenant les feuilles de style, de changer l'allure de toutes les pages web s'y référant !

Il s'agit dans un premier temps de créer un fichier texte contenant les feuilles de style et dont l'extension est .css, par exemple cool.css et de l'appeler dans link


3

2

1

4


http://www.w3.org/Style/Examples/011/firstcss.fr.html

21

2) Style dans l'entête du documentLes feuilles de style d'une page web sont déclarées grâce à la balise style, au sein des balise <head> et </head>.

3) Style importéIl est possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style :

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN"><html> <head> <style type="text/css"> <! @IMPORT URL(url de la feuille à importer);

Définition des styles du document;

> </style> </head><body></body></html>

4) Dans une baliseIl est possible de déclarer un attribut style dans une balise comme le montre l’exemple suivant: <p type= "text/css " style= "font-size: 14pt; color: red "> texte en rouge 14 point</p> texte normal.L’attribut style peut comprendre plusieurs champs séparés par des points virgules. C’est par la balise style placée dans l'entête du document que nous pouvons déclarer des styles génériques bien plus faciles d’usage :<style type=langage media=type_media title=titre lang=langue dir=Ltr|RTL> </style>Les différents attributs d'un style sont :

• type = langage ; si un langage différent était spécifié, c'est ce nouveau langage qui va être utilisé.

• media = screen , print , projection , braille , speach | all screen est pour un affichage sur un écran, print sur un support opaque comme le papier, projection est réservé pour les projection sur écran ou autre, braille est le mode d'écriture pour les non-voyants et speach rassemble les mécanismes de synthèse vocale. All désigne l'ensemble de ces médias.

• title = "titre" désigne un titre qui sert de commentaire. • Lang et dir : désignent la langue et l'orientation d'écriture

Les balises style définissant les différents styles utilisés dans un document doivent être présentes entre le couple de balises <head> </head>



22

Déclarer un styleCSS permet de déclarer des styles en utilisant la syntaxe suivante :

BALISE { Propriété : valeur} Ainsi la déclaration suivante sera valide :

h2 { color : green }• elle indique que tous les titres de niveau 2 sont en vert. Ici la propriété est color mais il en

existe une cinquantaine.

Pour allouer à la balise h1 un style particulier nous utiliserons la syntaxe suivante : <head> <style type="text/css"> h1 {border-width: 1px; border: solid; border-color:red; text-align: center} </style> </head>

Et dans tout le corps du document la balise h1 provoquera un texte encadré par un cadre de largeur 1px rouge pour un texte centré.De même, si on ajoute

h2 { color : green }elle indique que tous les titres de niveau 2 sont en vert. Ici la propriété est color ; il en existe une cinquantaine.



23

Codification des couleurs en CSS• Par un nom fonctionnel. • Par la valeur hexadécimale composée de 6 chiffres précédée d'un dièse # :#000000,

#FFFFCC.soit comme en Html mais sans les guillemets. • Par une valeur hexadécimale à 3 chiffres. Chaque chiffre est alors implicitement

dupliqué : ainsi #fd3 est équivalent à #ffdd33. • Par la notation fonctionelle rgb qui prend 3 arguments en l'occurence 3 nombres

entiers compris entre 0 et 255 ou 3 pourcentages entre 0% et 100%. (Voir script Codes RGB des couleurs).color : rgb(255,0,0);color : rgb(50%,50%,50%);

Pourcentage Nombre entier Hexadecimal

aqua rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF

black rgb(0%,0%,0%) rgb(0,0,0) #000000 #000

blue rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F

fuschia rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F

gray rgb(50%,50%,50%) rgb(128,128,128) #808080 #888

green rgb(0%,50%,0%) rgb(0,128,0) #008000 #080

lime rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0

maroon rgb(50%,0%,0%) rgb(128,0,0) #800000 #800

navy rgb(0%,0%,50%) rgb(0,0,128) #000080 #008

olive rgb(50%,50%,0%) rgb(128,128,0) #808000 #880

purple rgb(50%,0%,50%) rgb(128,0,128) #800080 #808

red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00

silver rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0 #BBB

teal rgb(0%,50%,50%) rgb(0,128,128) #008080 #088

white rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF #FFF

yellow rgb(100%,100%,0%) rgb(255,255,0) #FFFF00 #FF0

Exemple:body {color:black;backgroundcolor:white;

}

texte en noir et fond blanc



http://www.lehtml.com/scripts/memoire/codeRGB.html

24

Classe et identifiantsOn peut vouloir appliquer un style à un groupe de balises (pas nécessairement de même type) ou à une balise en particulier.Dans le premier cas, on parle de classe (class) et dans le deuxième d'identifiant (id)Définir les propriétés d'une classeSi la classe est attachée ç un type de balise :Selecteur_de_balise.Nom_de_classe { propriété1: Valeur; propriété2: Valeur; ...;

sinon, on omet le type et on parle de classes universelles.Nom_de_classe { propriété1: Valeur; propriété2: Valeur; ...;

L'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 JavaScriptLa syntaxe d'un sélecteur d'ID est la suivante : #nom_ID { propriété1: Valeur; propriété2: Valeur; ...;

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

<tag ID="nom_ID" > ... </tag>

exemple

<h1 class="rouge"> texte sanglant </h1><h1> titre quelconque </h1><h2 class="rouge" id="titre">petits meurtres en famille</h2>

Dans cet exemple deux phrases seront en rouge si dans la feuille de style, on .rouge {color:red}Le fond jaune du deuxième titre est unique et obtenu par #titre {backgroundcolor:yellow}



25

Mise en forme de la police avec styleLa spécification finale d'une police se fait selon les caractéristiques suivantes qui permettent de la personnaliser avec le raccourci "font" (tronc commum qui en anglais signifie : police de caractères) . Au final le texte est présentéavec une police, une taille, un style et des variantes bien précises.

"font-family" = la famille de polices"font-size" = la taille de police (ou corps)"font-style" = le style de police "font-variant" = la variante de police"font-weight" = l'étirement de police"font-stretch" =chasse de la police ( non supporté )

font-familyUne famille de polices correspond à un groupe de polices, dont les caractères représentent des similitudes dans leur présentation comme dans la famille HELVETICA avec des caractères en gras, en italiques, des petites majuscules, ou encore un écartement différent des caractères, etc...Pour rédiger un document vous avez recours à une ou plusieurs polices de caractères et ce chapitre est certainement un des plus importants concernant la mise en forme du texte dans vos pages. Voici comment d'une part spécifier les polices telles que vous souhaitez les voir apparaître sur l'écran du visiteur, et d'autre part si le visiteur ne possède pas la police que vous avez choisie, voici comment lui substituer une autre police présélectionnée afin de conserver à votre page une présentation dirons-nous honorable.

font-family: georgia, prestige, sans-serif ;

propriété et valeurs servant à définir la police et l'ordre de présentation est imposé au navigateur pour l'affichage. En mentionner 2 ou 3 permet si le visiteur n'a pas la première, de lui proposer la seconde et éventuellement la troisième pour éviter l'affichage de sa police par défaut, qui risque souvent de rendre votre page méconnaissable en fonction des paramètres qu'il a choisi ou, parfois il ignore même qu'il peut en choisir une.

Si une police choisie contient un espace comme Courier New il faut l'encadrer de guillemets : Georgia, "Courier New", "New Roman", Verdana, Serif.

Si vous n'avez pas enlevé dans votre code source la (ou les) polices habituelles html, rappelez-vous que la priorité reste accordée au code CSS.

Unités

longueursLes longueurs généralement positives représentent des valeurs relatives (en pourcentage) ou absolues.Les valeurs relatives peuvent être :

• em : exemple 0.5em : pourcentage par rapport à la taille de la police



26

• ex : exemple 1ex : pourcentage par rapport à la taille de la lettre x

• px : exemple 12px : pourcentage par rapport à la résolution d'une image en pixel • % : exemple 50% : pourcentage par rapport à la totalité de l'espace

Dans l’exemple suivant : body { font-size: 12pt; text-indent: 3em; } text-indent:3em désigne 3 x 12 = 36 pointsLes valeurs absolues peuvent être :

• pt : les points • in : inches (2,54cm) • cm : les centimètres • mm : les millimètres • pc : les picas

font-sizeLes polices étant choisies, il convient d'en définir le corps (taille). Cette propriété suit les règles d'hérédité. Or la taille d'une propriété peut se définir sous différentes valeurs:

- la taille relative.- la taille absolue.- la valeur numérique.- la valeur en pourcentage.

Les navigateurs ne respectent pas toujours l'ensemble de ces valeurs mais on se rapproche doucement de l'acceptable avec les versions récentes (mars 2003). Attention les nombres décimaux utilisent le point (et non la virgule) et les termes d'unités doivent coller sans espace avec les chiffres : font-size: 1.5em;Toujours préciser ces valeurs pour éviter de laisser le choix d'affichage par défaut au navigateur de votre visiteur. En "absolue" et en "pourcentage" les valeurs négatives ne sont pas tolérées. Attention encore, pour le choix des unités appliquées dans certains cas, celui en % n'est pas mauvais, ou encore avec une unité "em" ( concept issu de la typographie). La taille en pixels interdit par contre de redimensionner le texte si le visiteur le trouve peu lisible par exemple.

font-style en normal ou italiquePolices et taille (corps) des caractères sont vues, mais il faut encore définir le style avec "font" qui sert de raccourci à cette propriété, qui suit les règles d'hérédité.

style normal style italic (italique) style oblique ce dernier est identique au style "italic" qu'il remplace si besoin mais il n'est pas disponible dans toutes les familles de police.Grouper les styles identiquesh1 { fontweight: bold }h2 { fontweight: bold }h3 { fontweight: bold }

peut être remplacé parh1, h2, h3 { fontstyle: bold }



27

ExemplesExemple 1 :<p style="fontsize:20px;">Ce texte a un corps de 20</p><p style="fontfamily:courier;">Ce texte est dans la police Courier</p><p style="fontsize:20px; fontfamily:courier;">Ce texte est dans la police Courier avec un corps de 20</p>Une caractéristique astucieuse de CSS est la possibilité de gérer la présentation de manière centralisée. Au lieu d'utiliser l'attribut style dans chaque balise, on peut indiquer au navigateur en une seule fois comment disposer le texte sur la page :Exemple 2 :<html>

<head> <title>Ma première page avec CSS</title>

<style type="text/css"> h1 {fontsize: 30px; fontfamily: arial;} h2 {fontsize: 15px; fontfamily: courier;} p {fontsize: 8px; fontfamily: "times new roman";} </style>

</head>

<body> <h1>Ma première page avec CSS</h1> <h2>Bienvenue sur ma première page avec CSS</h2> <p>Ici vous pouvez voir CSS à l'œuvre </p> </body>

</html>Le code CSS a été placé dans la section « head » et il s'applique donc à la totalité de la page. Pour ce faire, utilisez juste la balise <style type="text/css"> indiquant au navigateur qu'il s'agit de CSS.Dans l'exemple, tous les titres de la page seront dans la police Arial avec un corps de 30px, tous les sous-titres seront dans la police Courier avec un corps de 15px, et tout le texte des paragraphes ordinaires sera dans la police "times new roman" avec un corps de 8px.Une autre option consiste à écrire le code CSS dans un document séparé. Avec un document CSS séparé, vous pouvez gérer la présentation de plusieurs pages en même temps. Très pratique si on veut changer le type ou le corps de la police d'un grand site Web contenant des centaines ou des milliers de pages. Nous n'aborderons pas ce sujet ici mais vous pouvez le voir plus tard dans notre tutoriel CSS.

Les balises <span> et <div>Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <span> et <div>

La balise <span>La balise <span> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec id qu'avec class. Sa syntaxe est la suivante :

<span class=Nom_de_la_classe> Texte </span>



28

La balise <div>Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise div s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes.

La syntaxe de la balise div est la suivante :

<div > paragraphes </div>

CSS 3Depuis la création de ce cours, beaucoup de choses ont changé : HTML 5, le CSS 3 et bien d'autres nouvelles technologies du Web deviennent enfin une réalité !Voir http://www.alsacreations.com/actu/lire/919-ce-que-nous-reserve-css3-en-2010.html

Le développement du HTML et du CSS s'accélère .Voir une analyse des navigateurs içi http://html5demo.braincracking.org/ .

DoctypeLe Doctype HTML5 s'écrit de la sorte :

<!DOCTYPE html>

Voilà, votre document est identifié comme étant en HTML5 ; pour un petit tutoriel bien fait sur les problèmes de compatibilité ...Voir l'article http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html

Article par Raphael (Eleveur de kiwiz, Strasbourg)Mis à jour le 19 Juin 2011Tags : css, positionnement, xhtml, web, arrondis, ie8, IE6, html5, ie7, css3, ombrages, rotation, font-face



http://www.alsacreations.com/search/tag/font-face

http://www.alsacreations.com/search/tag/rotation

http://www.alsacreations.com/search/tag/ombrages

http://www.alsacreations.com/search/tag/css3

http://www.alsacreations.com/search/tag/ie7

http://www.alsacreations.com/search/tag/html5

http://www.alsacreations.com/search/tag/IE6

http://www.alsacreations.com/search/tag/ie8

http://www.alsacreations.com/search/tag/arrondis

http://www.alsacreations.com/search/tag/web

http://www.alsacreations.com/search/tag/xhtml

http://www.alsacreations.com/search/tag/positionnement

http://www.alsacreations.com/search/tag/css

http://www.alsacreations.com/profil/lire/1-raphael.html

http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html

http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html

http://html5demo.braincracking.org/

http://www.alsacreations.com/actu/lire/919-ce-que-nous-reserve-css3-en-2010.html

29

Enumération des éléments-listes ol et ulPour les énumérations, vous pouvez notamment utiliser : <UL> ou "Unordered List": insère une liste non numérotée <OL> ou "Ordered List": insère une liste numérotée.Chaque élément d'une liste est précédé de <li> et suivi de </li> . Par exemple : <ol>

<li> Elément A</li><li> Elément B</li><li> Elément C</li>

</ol> ressemblera à :

1. Elément A 2. Elément B 3. Elément C

Exemple: complètez le code source de la page HTML par

<hr>Il existe trois façons d'aligner un paragraphe : <br/><ol>

<li> aligné à gauche (par défaut)</li><li> Aligné à droite </li><li> centré </li>

</ol>

qui donnera

Il existe trois façons d'aligner un paragraphe : 1. aligné à gauche (par défaut) 2. Aligné à droite 3. centré

On peut sélectionner un style de puce ou de numérotation en ajoutant l'option type= dans la définition:liste à puces disc puce noire (standard)•

circle Cercle Osquare Carré □

liste ordonnée A Lettres majuscules A,B,…a Lettres minuscules a, b, .. 1 standard 1, 2, …i Chiffres romains I Chiffres romains majuscules

Changer le point de départ: <ol start = 5> commence à 5si un élément de liste ordonnée doit avoir un numéro particulier (et pas le premier ou le suivant) on précise <li value=numero>



30

On peut imbriquer des listes:Pour obtenir:types de listes

• liste à puces • disc : puce noire • circle : cercle • square : carré

• liste ordonnée • A lettre majuscule • Lettre minuscule • chiffres • Chiffres romains minuscules • Chiffres romains majuscules

On écrira<p><u>types de listes</u></p><ul> <li>liste à puces <ul> <li>disc : puce noire</li> <li>circle : cercle</li> <li>square : carré</li> </ul> </li> <li>liste ordonnée <ol> <li>A lettre majuscule</li> <li>Lettre minuscule</li> <li>chiffres</li> <li>Chiffres romains minuscules</li> <li>Chiffres romains majuscules</li> </ol> </li></ul>



31

Définitions (liste de ...)Une définition est une annotation HTML qui permet d'inscrire d'abord un terme à définir pour lui ajouter en-dessous et en retrait (alinéa) sa définition.<dl> indique une zone de définitions ("definitions list") à venir ci-dessous (une ou plusieurs)<dt>("definition term") indique le premier terme à définir<dd> donne la définition du premier terme en retrait d'un alinéa</dl>("definition list") indique la fin de la zone de définitions.Pour mettre plusieurs définitions une à la suite des autres, il suffit de répéter la séquence <DT><dd> autant de fois que l'on en a besoin à l'intérieur de la zone. On peut aussi donner plus d'une définition à un terme en réutilisant la commande <dd> plus d'une fois sous la ligne <DT>.

Exemple:<dl>

<dt>Octet</dt> <dd>Mot de huit bits</dd>

<dt>kiloOctet</dt><dd>1024 octets<br/>8192 bits</dd>

</dl>

Voici ce que cela donne:Octet

Mot de huit bitskiloOctet

1024 octets8192 bits

Listes et css

list-style-type (Type de représentation)Pour les listes énumératives, vous pouvez spécifier la forme de la puce. Pour les listes numérotées, vous pouvez avoir une influence sur la représentation des numéros.

Avec list-style-type: vous pouvez contrôler l'apparence des signes d'une liste. Une des mentions suivantes est permise.

decimal = pour listes ol: numérotation 1.,2.,3.,4. etc...lower-roman = pour listes ol: numérotation i.,ii.,iii.,iv. etc...upper-roman = pour listes ol: numérotation I.,II.,III.,IV. etc...lower-alpha = pour listes ol: numérotation a.,b.,c.,d. etc...upper-alpha = pour listes ol: numérotation A.,B.,C.,D. etc...lower-latin = pour listes ol: numérotation a.,b.,c.,d. etc... y compris le jeu de caractères latin étenduupper-latin = pour listes ol: numérotation A.,B.,C.,D. etc... y compris le jeu de caractères latin étendudisc = pour listes ul: rond plein comme pucecircle = pour listes ul: puce rondesquare = pour listes ul: puce rectangulairenone = pas de puce, pas de numérotation

exemples

<ul style="list-style-type:disc"><li>liste a "disc"</li><li>liste suite</li></ul><ul style="list-style-type:circle"><li>liste a "circle"</li><li>liste suite</li></ul><ul style="list-style-type:square"><li>liste a "square"</li><li>liste suite</li></ul><ul style="list-style-type:none"><li>liste a "none"</li><li>liste aucune puce</li></ul>



32

<html><head><style type="text/css">ul.a {list-style-type:disk;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}</style></head>

<body><p>Exemple de liste non ordonnées:</p>

<ul class="a"> <li>café</li> <li>thé</li> <li>Coca Cola</li></ul>

<ul class="b"> <li>café</li> <li>thé</li> <li>Coca Cola</li></ul>

<p>Exemple de listes ordonnées:</p>

<ol class="c"> <li>café</li> <li>thé</li> <li>Coca Cola</li></ol>

<ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol>

</body></html>

Exemple de liste non ordonnées:● café ● thé ● Coca Cola café thé Coca Cola

Exemple de listes ordonnées:I. café II. thé III.Coca Cola a) Coffee b) Tea c) Coca Cola



33

list-style-position (Retrait des listes)Vous pouvez spécifier comment les puces ou la numérotation doivent se comporter avec le contenu des points de la liste en cas de retrait.inside = puces et numérotation dans le corps de la liste.outside = retrait à gauche des puces et numérotation (réglage par défaut). <ul style="liststyletype:disc"><li>liste a "disc"</li><li>liste "outside normale"</li></ul><ul style="liststyletype:disc;liststyleposition:inside;"><li>liste a "disc"</li><li>liste "outside";les puces sont dans la liste</li><li>Compares avec la liste juste audesus</li></ul>

liste sous forme de tableauVoir :http://www.kiwano.fr/afficher-une-liste-html-sous-forme-de-tableau-par-css/



http://www.kiwano.fr/afficher-une-liste-html-sous-forme-de-tableau-par-css/

34

Les tableauxEn avril 1995, la mise en pages de tableaux a été rendue possible dans la version 1.1N de Netscape. L'information détaillée à ce sujet peut être consultée à l'URL suivant:http://home.mcom.com/assist/net_sites/tables.htmlexemple

Titre placé en hautjour de la semaine montant TotalLundi $456.00 $456.00Mardi $200.00 $656.00

Commandes de baseLes commandes de base pour créer des tableaux en HTML sont les suivantes:<table></table>Cette commande est la commande principale pour ouvrir une zone de tableaux.<tr></tr>Commande pour définir une rangée. Il faut utiliser une séquence <tr></tr> pour chacune des rangées requises, à l'intérieur de la zone <table> </table><td></td>Commande pour spécifier les données pour chaque rangée comme dans l'exemple ci-dessous. 1 2 3 45 6 7 8Le code pour produire ce tableau s'écrira donc:<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr></table>Les paramètres par défaut sont l'alignement à gauche (align=LEFT) et l'alignement vertical au centre (Valign=MIDDLE).<th></th>Commande pour ajouter une rangée en entête. Les paramètres par défaut des entêtes (TH= "Table header") sont l'usage du caractère gras et la position centrée.


Entête du tableau

Rangée –entête


35

<caption> </caption>Commande permettant de mettre un titre au-dessus <caption align="top"> ou en-dessous<caption align="bottom"> d'un tableau. La commande doit être placée directement sous la commande TABLE et avant la première rangée de données.exemples: TABLE 3X2 de baseA B CD E F<table border>

<tr><td>A</td> <td>B</td> <td>C</td>

</tr><tr>

<td>D</td> <td>E</td> <td>F</td></tr>

</table>

Exemple de tableau avec bordures avec titre et entêtesalignLa commande align utilisée dans la zone de CAPTION permet de placer le titre au-dessus ouen-dessous du tableau.Cette même commande utilisée dans les sections <TH>, <tr> ou <td> permet plutôt d'aligner le contenu des cellules à gauche align=LEFT, à droite align=RIGHT ou au centre align=CENTER.Le code:<table border=1><caption align="top"> Titre placé en haut </caption><tr><TH>jour de la semaine</TH><TH>montant</TH><TH>Total</TH></tr><tr><td>Lundi</td><td>$456.00</td><td>$456.00</td></tr><tr><td>Mardi</td><td>$200.00</td><td>$656.00</td></tr></table>donne:

Titre placé en hautjour de la semaine montant TotalLundi $456.00 $456.00Mardi $200.00 $656.00

Fusions de cellules

rowspanLa commande rowspan dans un tableau permet d'ajouter une colonne qui s'étend sur toute la largeur du nombre de rangées que l'on désigne. Ainsi, une valeur de <td rowspan=2>affichera une boîte d'une largeur de 1 colonne et de 2 rangées. Une valeur de <td rowspan=10>affichera une longue colonne de 1 colonne par 10 rangées. Les variantes sont visibles dans les exemples ci-dessous:Les commandes s'appliquent indifféremment avec <td> ou <th>.Deux démonstrations de rowspan



36

Item 1Item 4

Item 2Item 3Item 5

<table border><tr>

<td>Item 1</td><td rowspan=2>Item 2</td><td>Item 3</td>

</tr><tr>

<td>Item 4</td> <td>Item 5</td></tr>

</table>

Item 1Item 2 Item 3 Item 4Item 5 Item 6 Item 7

<table border><tr>

<td rowspan=2>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td></tr><tr>

<td>Item 5</td> <td>Item 6</td> <td>Item 7</td></tr>

</table>

colspanLa commande colspan dans un tableau permet d'ajouter une rangée qui s'étend sur toute la largeur du nombre de colonnes que l'on désigne. Ainsi, une valeur de <td colspan="2"> affichera une boîte d'une largeur de 1 colonne et de 2 rangées. Une valeur de <td colspan=10> affichera une longue colonne de 1 colonne par 10 rangées .DEMONStrATION de FUSION DE Cellules adjacentes (colspan )Item 1 Item 2Item 3 Item 4 Item 5<table border>

<tr><td>Item 1</td><td colspan="2">Item 2</td>

</tr><tr>

<td>Item 3</td> <td>Item 4</td> <td>Item 5</td></tr>

</table>Remarque sur l'adaptation automatique des dimensions d'une cellule:<table border>

<tr><td>Item 1</td><td colspan=2>Item 2</td>

</tr><tr>

<td>Item 3 tout <br/>en longueur</td> <td>Item 4</td> <td>Item 5</td></tr>

</table>donne



37

Item 1 Item 2Item 3 tout en longueur

Item 4 Item 5

<table cols ="x">Tableau composé de x colonnes

colgroup

DéfinitionLa balise HTML colgroup permet de faire un groupe de colonne d'un tableau pour leurs assigner les mêmes propriétées.Exemple de code :<colgroup > </colgroup>La balise HTML colgroup est utilisée avec la balise HTML COL. Exemple :Exemple de code :<table border="1" > <colgroup width="50" span="2"> <colgroup width="100" span="3"> <tr> --- --- </tr> </TABLE> Couleur de la bordure <table bordercolor ="couleur"><table bordercolordark="couleur foncée" bordercolorlight="couleur claire">Fixe les couleurs des effets d'ombre.Espace entre les cellules et espace autour du texte dans chaque cellule <table cellspacing= cellpadding= ><thead> , <tbody> et <tfoot>La balise tbody permet de définir un ensemble de lignes comme le "corps" du tableau.<tbody > </tbody>La balise tbody est utilisée avec tfoot et thead respectivement "pied" et "entête" de tableau.



38

CSS et tableauhttp://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/Centrage du tableau (ne fonctionne pas pour IE)Pour centrer le tableau, il faut faire comme pour centrer tout élément c'est à dire avec un margin à auto.Le caption ne se centre pas automatiquement avec le tableau. Il faut donc appliquer le même CSS au caption.

#tab, #tab caption{ margin: auto;}

Les bordures internesIl existe 2 types de bordures internes. Les bordures dites "fusionnées" et les bordures dites "séparées".Pour illustrer ces 2 cas il nous faut d'abord mettre des bordures sur les éléments td du tableau.

#tab td{ border: #3399CC 1px solid;}

Les bordures séparées :border-collapseDans ce cas, les bordures de chaque cellule sont séparées. Pour se faire, il faut utiliser la propriété CSS border-collapse à separate.Il est possible de spécifier aussi l'espacement entre les cellules grâce à la propriété CSS border-spacing à x y ou x (ou x représente la taille de l'espacement horizontal et y le vertical).

#tab{ bordercollapse: separate; borderspacing: 10px 5px;}

Les bordures fusionnéesDans ce cas, les bordures de chaque cellule sont fusionnées. Pour se faire il faut utiliser la propriété CSS border-collapse à collapse. #tab{ bordercollapse: collapse;}

Emplacement de la légende (IE?)Une propriété CSS nous permet de déplacer l'élément caption. Cette propriété est caption-side qui prend 4 valeurs : bottom, left, right, top.

Cette propriété CSS est compatible Safari et Mozilla . #tab{ caption-side: bottom;}



http://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/#LVI

39

COL et COLGROUPle fait de pouvoir associer un groupe de colonnes ou une seul colonne à une ID ou une CLASS permet également de leur appliquer des transformations CSS.Un léger problème : une fois n'est pas coutume, c'est Internet Explorer qui interprète le mieux ces balises. Selon nos tests, le code suivant y est affiché comme l'on s'y attend, tandis que Firefox oublie les styles de texte et Opera les tailles de cellule.On applique ici à la fois des attributs "directs" (comme align="right") et des CSS. L'attribut SPAN de COLGROUP permet de définir à combien de colonnes s'applique le groupe.<style type="text/css">.groupe1 { width: 30px; text-align: center; background: yellow; }.groupe2 { width: 60px; }.colonne2 { background: red; }.colonne4 { text-align: right; }.colonne5 { background: lightblue; text-align: center; }</style>

<table border="1"> <colgroup span="3" class="groupe1"> <col style="font-size:big;"> <col class="colonne2"> <col align="right"> </colgroup> <colgroup span="2" class="groupe2"> <col class="colonne4"> <col class="colonne5"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr></table>



40

Exemple complet

<table border= "1" cellpadding="0" cellspacing="0" > <caption>Mes courses</caption> <thead> <tr> <th>Aliment</th> <th>Prix</th> <th>Poids</th> <tr> </thead> <tfoot> <tr> <th>Total</th> <th>35 euros</th> <th>1400 grammes</th> <tr> </tfoot> <tbody> <tr> <th>Poisson</th> <td>20 euros</td> <td>500 grammes</td> </tr> <tr> <th>Viande</th> <td>15 euros</td> <td>900 grammes</td> </tr> </tbody></table>

affichera :

Mes coursesAliment Prix PoidsPoisson 20 euros 500 grammesViande 15 euros 900 grammesTotal 35 euros 1400 grammes

Enlevez les attributs de table (cellpadding="0" cellspacing="0") et ajoutez une feuille de style:<style type="text/css"> body {backgroundcolor:#DCDCDC} table, caption { margin: auto; }

table



41

{ border: #FF580A 2px solid; bordercollapse: separate; borderspacing: 2px; backgroundcolor: yellow; }

caption { backgroundcolor: #DDEEFF;

fontsize: 0.8em; }

th { color: #996600; backgroundcolor: #FFCC66; border: blue 1px solid; fontvariant: smallcaps; fontsize: 0.8em; letterspacing: 1px; }

td { border: lime 1px solid; paddingleft: 10px; } </style>



42

Les images Il existe principalement deux méthodes pour afficher une image ou illustration au sein d'une page web :

• employer l'élément <img> • faire apparaître l'image en arrière-plan d'un élément à l'aide de la propriété CSS

"background-image" A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), ou lorsqu'elle a un rôle fonctionnel (image lien, bouton), il faut que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant, pour en donner un équivalent textuel.Ceci est particulièrement important quand une image est le seul contenu d'un élément lien <a> : elle ne doit alors en aucun cas être gérée en tant qu'image d'arrière-plan CSS.

En HTML, elles sont sont intégrées dans le document par la commande : <img alt="texte" src="nom du fichier">

La balise img peut être agrémentée des arguments suivant : (ancienne méthode)• align=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom

Notons que seules les valeurs soulignées sont admises par la norme HTML 3.2 mais on rencontre les autres dans tous les outils de manipulation HTML. Ces différentes valeurs permettent d'aligner les images à gauche, à droite, en haut, en haut du texte, au milieu, au milieu par rapport à la ligne, en bas, en bas de la ligne etc.

• alt : pour afficher un texte si le lecteur de Web ne sait pas lire l'image (indispensable). • width=valeur height=valeur

Les attributs width et height permettent de donner la longueur et la largeur de l'image, ce qui a pour effet d'accélérer la visualisation de l'image en évitant les temps de calcul. Cette option permet la visualisation du texte avant la visualisation des images avec les navigateurs les meilleurs. Elle est donc à utiliser.

• border=valeur donne l'épaisseur du trait de marque d'URL autour de l'image. <img src="image.gif" border="1">

• vspace=valeur hspace=valeur: Espacer les images et le textevspace contrôle l'espacement vertical en pixels au-dessus et en dessous de l'image. hspace contrôle l'espacement horizontal en pixels à droite et à gauche de l'image.



43

Images et position en cssTraduit de http://www.bluejar.com/how-to-position-your-photos-and-images-using-css/Positionner les images à gauche ou à droite en CSSPositionner à gauche:.Code:<img src=”imageleft.gif” width=”" height=”" alt=”" style=”float: left” /> Result:

This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Pour positionner à droite, remplacez left par right:Code:<img src=”imageright.gif” width=”" height=”" alt=”" style=”float: right” /> Result:This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Placer cela dans un CSS Externe

Feuille CSS dans l'ente:.imageleft { float: left }.imageright { float: right } Maintenant ajoutez une classe à vos imagesCode:<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” /> Resultat:


On peut aussi ajouter des marges et des espaces autour des images enCSSExternal CSS:.imageleft { float: left; margin: 15px; }.imageright { float: right; margin: 15px; } Code:<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” /> Resultat:




http://www.bluejar.com/how-to-position-your-photos-and-images-using-css/

http://www.bluejar.com/how-to-position-your-photos-and-images-using-css/

44

Position d'images à gauche ou à droite avec une legendeOn peut ajouter une legende à une image, en la plaçant dans une balise <div> qui deviendra la partie flotante.CSS externe:.imageleft { float: left; margin: 15px; }.imageright { float: right; margin: 15px; } Code:<div class=”imageleft”><img src=”imageleft.gif” width=”" height=”" alt=”" /><br />Colorful Chester</div> Resultat:

Colorful Chester


Position images au centre avec CSSOn ne peut pas utiliser float tag pour centrer une image, On va utiliser une balise <div> pour centrer une image:CSS:.imagecenter { text-align: center; margin: 15px; } Code:<div class=”imagecenter”><img src=”imagecenter.gif” width=”" height=”" alt=”" /></div> Resultat:


Les images libres proviennent de Cartoon Clipart !

CSS et alignement vertical:La propriétévertical-align css peut prendre la valeur de : - numérique positive ou négative suivie de px ou % ou ex ou em. Le point de départ sera baseline pour les valeurs fixes et pour les pourcentages dépend de line-height. - baseline, lignes de bases alignées, valeur par défaut. - sub, ligne de base de l'enfant aligné un peu plus bas que la ligne de base de son parent. - super, ligne de base de l'enfant aligné un peu plus bas que la partie la plus haute des caractères de son parent. - text-top, alignement sur les parties les plus hautes. - text-bottom, alignement sur les parties les plus basses. - middle, alignement par le milieu vertical.



http://www.cartoonclipart.com/main/misc.html

45

- top, le haut de l'enfant est aligné sur la partie la plus haute de la ligne. - bottom, le bas de l'enfant est aligné sur la partie la plus basse de la ligne Images de fond (ancienne méthode)C'est un attribut de la balise <body>: <body background ="fichier_image">

Fixer le fond:<body background="votre_fond.gif" bgproperties="fixed">

Pour améliorer la séparation structure/présentation, une image décorative gagne à être gérée à l'aide de la propriété CSS background, en tant qu'image d'arrière-plan CSS,Image de fond en CSSOn peut maintenant placer une image de fond dans tous les conteneurs et pas seulement dans body.Attributs utilisés :

• background-image • background-repeat • background-position

Code CSS de baseL'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.

Pour le corps de page, la syntaxe CSS de base sera celle-ci :

body {color:black;backgroundcolor:white;backgroundimage:url(images/image_de_fond.png);}

• color renseigne la couleur de la police de caractère • background-color est de la couleur de fond de page ; • background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.

Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une feuille de style externe.

Fond de page fixePour que le fond de page devienne fixe, on rajoutera dans le code :

backgroundattachment:fixed;



46

On peut aussi empêcher la mosaïque grâce à l'attribut background-repeat et positionner l'image dans une partie très précise de l'écran.Par défaut, l'image se positionne en haut à gauche de l'écran :

body {color:black;backgroundcolor:white;backgroundimage:url(images/image_de_fond.png);backgroundrepeat:norepeat;

Positionnement en haut à droiteSi l'on veut qu'elle se place en haut à droite, on rajoutera le code :

backgroundposition:right top;

ou :

backgroundposition:100% 0%;

Positionnement au centrePour une position au centre de la page, cela donnera :

backgroundposition:center center;

Positionnement en bas à droitePour une position en bas à droite :

backgroundposition:right bottom;

ou :

backgroundposition:100% 100%;

Remarques• background-repeat accepte 4 attributs : no-repeat ; repeat-x pour une répétition de l'image

uniquement horizontale ; repeat-y pour une répétition uniquement verticale ; et repeat pour la mosaïque complète.

• Vous aurez noté, bien sûr, que les pourcentages dans le background-position offrent plus de latitude que les attributs [right|center|left] [top|center|bottom].

• On peut aussi cumuler ces différentes informations dans un unique background.Exemple :

body {background: white url(image_de_fond.png) norepeat right bottom;}



47

Remplacement d'un élément img isoléEn utilisant un élément div vide, on peut aisément remplacer une image purement décorative par une image de fond. Le principe consiste simplement à dimensionner le div à la même taille que l'image cible, et à lui appliquer l'image à remplacer comme image de fond. Un petit raffinement est de supprimer la répétition de l'image pour éviter des effets disgracieux sur les bords.

Code HTML :

<div id="avatar"> </div>

Feuille de style :

div#avatar { backgroundimage: url(avatarp.png); backgroundrepeat: norepeat; width: 80px; height: 103px; padding: 0;}



48

Pointeurs et hyperliens

Pour insérer un pointeur (lien hypertexte-hypermédia), il faut indiquer une référence (appelée URL pour Uniform Ressource Locator) et un élément, texte ou image, visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un exemple de code pour obtenir un pointeur: <a href="dossier/menu_du_jour.HTML">Menu du jour</a>.Le pointeur apparaît alors en couleur contrastée (bleu par défaut) et souligné dans le navigateur et donne: Menu du jour.

<a href="dossier/page2.HTML"><img href="fleche_droite" border="0"></a>.

Fichier sur le système hôteLe code: <a href="fichier.HTML">fichier</a>donne tout simplement accès à un fichier HTML situé au même niveau hiérarchique que le fichier actuellement ouvert sur le serveur.

Adressage relatif sur le site :

../ remonte d'un répertoire ../mesimages/image.gif remonte d'un répertoire et redescend dans le répertoire mesimages.

e

e

e

Image.gif

Image.gif

Image.gif

Test.html

Test.html

Test.html

Href=”image.gif”

Href=”mesimages/image.gif”

Href=”../mesimages/image.gif”

Mesimages

Mesimages

MesDocuments



49

Les couleurs des hyperliens (anciènne méthode)On distingue entre les couleurs des hyperliens, des hyperliens actifs et des hyperliens visités

• Les hyperliens sont bleus (#0000FF)• les hyperliens visités sont mauves (#FF0000)• les hyperliens actifs sont rouges (#660066)

Ces couleurs standards sont modifiables grâce aux attributs qui doivent tous être placés dans la commande d'ouverture

<body link=couleur1 vlink=couleur2 alink=couleur3>• LINK hyperlien normal (bleu par défaut)• VLINK hyperlien visité• ALINK hyperlien actif

Exemple:<body link="green" >

Le champ targetPour ouvrir un lien dans une nouvelle fenêtre il faut utiliser l'attribut target (qui signifie cible). Le champ target a plusieurs valeurs possibles :

• _self : pour afficher dans la page courante. • _parent : pour afficher dans la page mère. • _blank : pour afficher dans une nouvelle page. • _top : pour afficher dans la fenêtre qui contient tous les éventuels jeux de cadres, celle

qui est au-dessus de toutes les autres. Si vous utilisez un doctype strict, cet attribut n'est pas valide (aussi bien en HTML 4 qu'en XHTML).liens et cssPar l'intermédiaire de la balise style nous pouvons redéfinir la balise <a> et enlever la couleur et le soulignement. Pour les liens actifs, visités ou survolés, on utilise des

Pseudo-formatsa:link { propriété CSS:valeur; ... } /* cibles non encore visitées */a:visited { propriété CSS:valeur; ... } /* cibles visitées */a:hover { propriété CSS:valeur; ... } /* Liens pour "MouseOver" */a:active { propriété CSS:valeur; ... } /* Liens cliqués */a:focus { propriété CSS:valeur; ... } /* Liens qui reçoivent la zone de saisie active */

exemple:<style type="text/css"></style>

50

Les liens vers une partie d'un document Les ancresIl est également possible de créer un signet ou ancre dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les ancres se définissent grâce à l'attribut NAME ou ID. La syntaxe est la suivante : <balise id="signet"> ... </balise>

remarque: L'attribut name n'existe plus pour les balises <a> en XHTML. Utilisez l'attribut id pour marquer l'élément que vous voulez relier. Par exemple :

<h1 id="signet">titre 1</h1>

On crée ensuite un lien vers cet élément en utilisant le symbole « # » dans l'attribut de liaison. Le « # » indique au navigateur de rester sur la même page. Ce caractère doit être suivi de l'id de la balise à relier. Par exemple :

L'appel d'un signet se fait de la manière suivante : <a href="#signet"> aller au signet </a>

Tout sera plus clair avec un exemple :

Exemple :

<html> <head> </head>

<body>

<p><a href="#entete1">Lien vers le titre 1</a></p> <p><a href="#entete2">Lien vers le titre 2</a></p>

<h1 id="entete1">Titre 1</h1> <p>Texte texte texte texte</p>

<h1 id="entete2">Titre 2</h1> <p>Texte texte texte texte</p> </body>

</html>

(Remarque : L'attribut id doit commencer par une lettre).

Ancienne Syntaxe : La commande <A name="…" > <A name="etiquette"> nom </a>



51

La commande A name enregistre un point d'accès à l'intérieur d'un document HTML. On peut ensuite référer directement à ce point précis avec une commande A HREF. La commande peut se taper directement comme ceci:<a href=nom_de_fichier_local#etiquette"> ancre </a> pour faire le lien. Si ce lien est sur la page courante,<a href=#etiquette"> ancre </a>

exemple : pour accéder au paragraphe 3 du document actuel <A name="[3]"> Paragraphe 3 : Les soucis </a> ce qui indique au navigateur où se trouve la section visée.

Pour se rendre à cet endroit, il faut référencier comme ceci: <a href="#[3]"> Note [3] </a>

Pour retourner au début d'un document: #TOP<a href="#top"><img src="fleche_haut" border="0"></a>

Images cliquables <img src="image.gif" USEMAP="#decoupage">Une image cliquable permet de présenter des menus graphiques en plus des liens textuels. Définir une image cliquable revient à définir des zones sensibles (rectangulaires, circulaires ...) et des actions correspondant à chacune d'entre elles. Un inconvénient à ce type de menus est que l'utilisateur ne peut pas savoir où va mener le pointeur sur lequel il clique. (Avec les liens textuels, l'URL de destination s'affiche dans la barre de statut)

MAP & AREALe marqueur MAP sert à définir le début et la fin d'une section de définition de zones sensibles. Cette section contient une ou plusieurs commandes AREA. Nous avons déjà rencontré ce type de structure lorsque nous examinions les listes.

Exemple:

<MAP name="decoupage"><AREA SHAPE="rect" COORDS="16,17,249,77" HREF="http://site/~moi/mode.html"><AREA SHAPE="rect" COORDS="16,91,249,213" HREF="http://site/bienVenue.html"><AREA SHAPE="rect" COORDS="16,228,249,437" HREF="http://site/~moi">

</MAP>

Paramètres de AREA:

* SHAPE correspond à la forme de la zone sensible. Les valeurs possibles sont : RECT (rectangle), POLY (polygone ) et CIRCLE (cercle). * COORDS indique les coordonnées en pixel pour définir la taille des zones. Le coin en haut à gauche de l'image est le point d'origine. Pour les rectangles, les coordonnées à spécifier sont le coin



52

en haut à gauche et celui en bas à droite. Pour les cercles, les coordonnées du centre et la valeur du rayon sont nécessaires (3 nombres). * HREF contient l'URL qui est chargé lorsque l'utilisateur clique sur une des zones sensibles.



53

Pointer vers un type de document:Les pointeurs peuvent diriger le navigateur vers des sites HTTP, FTP, TELNET, TN3270, GOPHER ou USENET. On peut aussi entrer directement sur un fichier sur le système local ou sur un réseau local. Pour créer un pointeur, il s'agit tout simplement de définir le type de document dans la commande <a href=…> comme dans les exemples qui suivent:

Site HTTP (WWW)Le code: <a href="http://plomteux.servhome.org"> mon site</a>

donne accès à un serveur servhome.org qui héberge mon site

Site FTPLe code: <a href="ftp://ftp.belnet.be">Site FTP belnet</a>

donne accès à un dossier public sur un serveur FTP de Belnet

Adresser un message électronique Syntaxes : <a href="MAILTO:adresse_correspondant"> ancre </a>ou <a href="MAILTO:adresse_correspondant?Subject=Objet_du_message"> ancre </a>Si on clique on obtient l'ouverture de l'éditeur de message

L'attribut alt et imageAlt permet aux usagers n'utilisant pas de navigateurs graphiques, ou ayant désactivé volontairement l'affichage des images, de voir des pointeurs alternatifs en mode texte. La commande alt est ajoutée dans le code des pointeurs ainsi: <a href="fichier.HTML"><img src="images/belicone.gif" alt="accès au fichier X"></a> Ce qui donne ceci dans un navigateur graphique: et ceci dans un navigateur textuel:



http://plomteux.servhome.org/

54

accès au fichier X

Enchaîner les pages automatiquementDans l’entête, on ajoute une balise meta

<head><meta HTTP-EQUIV="refresh" CONTENT="2; URL=sequencesuivante.html "></head>

content=”2” signifie 2 secondes



55

LES FORMULAIRESComme son nom l'indique, un formulaire est un questionnaire que l'utilisateur remplit en écrivant dans des champs de texte ou en cochant des cases à cocher, ou bien encore en sélectionnant des boutons radio. Puis, lorsqu'il clique sur un bouton "envoi "(submit), celui-ci déclenche une action en fonction des choix du formulaire. On peut distinguer deux types de formulaire : celui qui va enregistrer les informations fournies et éventuellement vous renvoyer un message de confirmation (c'est le cas du commerce électronique), et celui qui va vous rediriger sur d'autres pages.Dans ce dernier cas, l'action du formulaire est gérée par un langage de programmation appelé JavaScript, ( ou vbscript mais uniquement pour MSIE) .

Dans le premier cas, l'action se déroule en deux temps : les informations sont envoyées sur le serveur et traitées par un programme spécifique, puis les résultats du calcul sont renvoyés à l'utilisateur ou enregistrés chez le demandeur.

Pour rédiger un questionnaire, il faut:1. Établir une zone d'édition (appelée FORM) en utilisant les commandes <form></form>.2. Définir la méthode à employer pour transmettre au serveur l'information recueillie dans les champs du formulaire.3. Identifier l'emplacement et le nom du programme qui devra traiter l'information recueillie.4. Fournir, s'il y a lieu, les arguments au programme de traitement des données.

Le container <form></form>C'est celui qui contient l'ensemble des éléments du formulaire. Il admet cinq attributs

<form name=" ...">

name="nom du formulaire" très utile en javascript.

<form action="">

action définit le type d'action à déclencher quand l'utilisateur cliquera sur le bouton d'envoi (submit button). Le plus souvent, il s'agit d'une adresse URL se référant à un script CGI situé sur le serveur. Nous verrons plus loin comment employer mailto: pour expédier les données saisies à une adresse e-mail.Le paramètre Action détermine le type de destinataire ou si l'on veut l'outil qui sera utilisé pour traiter le formulaire. Les plus communs sont le mailto: et le http. Le premier permet de recevoir les données du formulaire par courrier électronique, tandis que le deuxième sert habituellement à spécifier un programme. Nous détaillerons le cas du programme un peu plus loin. Il existe aussi plusieurs autres types de destinataires, comme on peut le voir ci-dessous. Toutefois, nous n'allons pas les décrire ici, ceux-ci étant plus rarement utilisés.



56

<form Method="post|get" >Il existe deux types de méthodes concernant la façon dont l'information du formulaire est traitée: get et post.

get Fait en sorte que le contenu du formulaire est juxtaposé à l'adresse URL; le CGI le traitant accède alors à l'information par l'entremise de la variable QUERY_StrING

post Le contenu du formulaire est envoyé au serveur en tant que bloc de données pour y être traité par le CGI qui le recevra par stdin

GET est la méthode par défaut lorsque celle-ci n'est pas spécifiée. Toutefois, la méthode post est plus efficace et permet le traitement d'une quantité plus importante de données; c'est donc cette dernière qui est presque toujours utilisée. La méthode GET devrait n'être employée que dans le cas de formulaires très simples. <form method="post">C'est la méthode que nous retiendrons car la seule possible avec une action déclenchée par mailto: <form action="mailto:[email protected]" method="post">

éléments de formulaire...

</form>

<form enctype="">ENCTYPE = "multipart/form-data" | "application/x-www-form-urlencoded" | "text/plain"

Cet attribut, très utile, définit le format de codage des données. S'il est omis, c'est le protocole du serveur qui sera pris par défaut.

Pour pouvoir collecter nos informations par e-mail via l'action mailto , nous retiendrons enctype="text/plain".

multipart/form-data est utile pour envoyer des fichiers (input de type file)

Comment réunir des champs de formulaires et donner un titre à ce bloc ?

fieldset (groupe de champs) Permet de regrouper des champs dans un formulaire, par affinité, par thème, etc.. FIELDSET est un élément conteneur renfermant d'autres éléments tels que LEGEND, INPUT, mais aussi du texte si nécessaire. FIELDSET est naturellement contenu dans FORM Syntaxe <FIELDSET > Section du formulaire</FIELDSET><fieldset> <legend>texte dans la bordure</legend></fieldset>Remarques :

• L'élément <FIELDSET> permet un regroupement de champs de saisie en catégories logiques ( thématiques ).

• Ce regroupement rend les contrôles plus compréhensibles. • L'utilisation de cet élément rend les document plus accessibles aux

personnes handicapées.



http://xhtml.developpez.com/faq/?page=formulaire-elements#reunir-champ-titre

57

Exemple d'utilisation :<form method="post" action="..." > <fieldset> <legend align="top"> Informations personnelles </legend> Nom : <input name="nom_propre" type="text" tabindex="1" /> Prénom : <input name="prenom" type="text" tabindex="2" /> Adresse : <input name="adresse" type="text" tabindex="3" size="40" /> </fieldset> </form>

L'élérnent <input>

Il y a différentes manières d'entrer des informations dans un formulaire : en remplissant des cases, en cochant des boutons ou en sélectionnant une rubrique dans un menu déroulant. Lorsqu'on demande à l'utilisateur

d'entrer des données, on utilise l'élément <input>.Les éléments sont les suivants:

case à cocher case radio boîte liste boîte liste déroulante boîte texte boîte mot de passe

boîte texte multilignes bouton bouton soumettre bouton recommencer entrée cachée image de formulaire

Syntaxe générale:

<input name="un_nom" type="un-type" value="une valeur">

Rappel: ne mettez jamais d'espace blanc dans vos noms.

<input name="un_nom">

C'est le nom que l'on donne à l'élément. Lorsque les informations nous reviendront par courrier, il sera utile de savoir à quoi correspond la réponse. Imaginons que nous demandions le lieu de naissance et la ville où demeure celui qui remplit le formulaire. Notre code sera du type :

<input name="ville-de-naissance"><input name="ville-actuelle">

Si nous omettons de nommer ces deux éléments, la réponse par e-mail nous parviendra comme ceci : Reims - Paris au lieu de ville-de-naissance=Reims ville-actuelle=Paris.Le nom est utile en javascript et en php

<input type = "submit" value="quelquechose">

Submit signifie "soumettre" (le formulaire). C'est en cliquant sur ce bouton que l'on déclenche l'action de <form

action= Il '- >. Comme nous allons le voir dans les exemples suivants, ce bouton déclenchera l'envoi des informations du formulaire vers notre boîte e-mail. Le paramètre value sert à nommer le bouton pour l'utilisateur.

Exemple:


Peu utile !!


58

<input type="submit" value="Envoyez nous vos informations Merci">

<input type="reset" value="quelquechose">Reset signifie "remettre en place". Ce bouton sert à réinitialiser le formulaire ; il efface tout le contenu.

Exemple:

<input type=--reset" value="Tout recommencer">

<input type="button" value="quelquechose">

Ce type sert à créer un bouton personnalisé. Je le cite pour information car il nécessite l'emploi de codes JavaScript .

<input type=-"button" value="page précédente">

code JavaScript <input type="button" value="page précédente" onclick="history.go(-1)">ou plus simple Dans un hyperlien<a herf="javascript:history.go(-1)">Retour</a>

<input type="text">

Ce type peut être omis car c'est le type par défaut. Cet attribut place une cellule d'une seule ligne qui admet plusieurs paramètres :

size ="X" Où x exprime la longueur de la cellule en nombre de caractères visibles.Si vous attendez un code postal, fixez size="5" car il est inutile de gaspiller de la place.

maxlength ="X" Le fait de réduire la partie visible de la cellule n'empêche nullement un petit plaisantin d'y raconter sa vie. maxiength permet de contrôler le nombre maximal de caractères saisissables dans l'élément.

value ="valeur" C'est la valeur par défaut que vous attribuez à l'élément. Si, par exemple, vous demandez l'adresse d'un site, vous pouvez mettre une valeur par défaut qui sera "ht tp:



59

Exemple: Si l'on voulait recueillir les coordonnées des visiteurs, on pourrait retrouver le formulaire suivant: Haut du formulaireNom:

Prénom:

Adresse:

Ville:

Province

Pays:

Code postal:

Bas du formulaire

Le code HTML correspondant est le suivant: <form>

Nom:<br/><input type="text" name="Nom" size="40" maxlength="40"><br/>Prénom:<br/><input type="text" name="Prenom" size="40" maxlength="40"><br/>Adresse:<br/><input type="text" name="Adresse" size="40" maxlength="40"><br/>Ville:<br/><input type="text" name="Ville" size="20" maxlength="20"><br/>Province<br/><input type="text" name="Province" size="40" maxlength="40"><br/>Pays:<br/><input type="text" name="Pays" size="40" maxlength="40"><br/>Code postal:<br/><input type="text" name="Codepostal" size="10" maxlength="10">

</form>

<textarea></textarea>

Et non pas TEXAERA. Cet élément est utile si nous attendons un texte long de type commentaire.Ses paramètres sont cols="x" où x est le nombre de caractères par ligne et row= "y" le nombre de lignes visibles. <textarea name="nom identificateur" cols=nb colonnes rows=nb rangéesWRAP = off | physical | virtual>

Exemple d'un élément permettant quarante caractères par ligne sur quatre lignes visibles.

<form name="Mon Formulaire"action="mailto:[email protected]" method="post"enctype="text/plain"><p>Donnez-nous votre avis:</p><p><textarea name="commentaires" cols="40" rows="4"> </textarea></p><p><input type="submit" value="Envoyer vos infos"name="envoi"> </form>



60

Arrivé en bout de ligne, le texte se continue automatiquement à la ligne suivante. Si plus de quatre lignes sont utilisées, un ascenseur vertical se créera automatiquement.

autre exemple:<form>Donnez-nous vos commentaires:<br/><textarea name="Commentaires" cols=30 rows="5" wrap="virtual"></textarea></form>

Les "à la ligne" dans <textarea>L'attribut WRAP détermine la façon dont les lignes traitées lors d'un changement de ligne. Le tableau ci-dessous donne une description des différentes possibilités:

off aucun changement de ligne

sodt les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.

hard les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.



61

<FORM method="POST" action="verif.php"> <h1>Passez à la ligne</h1>

<p> doux:<br/><textarea name="doux" cols="30" rows="3" wrap="soft"></textarea></p><p>"hard":<br/><textarea name="sec" cols="30" rows="3" wrap="hard"></textarea></p><p>effectif :<br/><textarea name="effectif" cols="30" rows="3" wrap="physical"></textarea></p><p> apparent:<br/><textarea name="apparent" cols="30" rows="3" wrap="virtual"></textarea></p><p>éteint:<br/><textarea name="eteint" cols="30" rows="3" wrap="off"></textarea></p>

<p> <input type="Submit" value="OK"></p></FORM>

Résultat de la page après envoi au serveurnombre total d'elements dans post :5 1) doux

Du 30 Octobre au 15 Novembre et à l\'occasion de nos portes ouvertes, profitez de nombreux avantages!

2) hardDu 30 Octobre au 15 Novembreet à l\'occasion de nos portesouvertes, profitez de nombreuxavantages!

3) effectif Du 30 Octobre au 15 Novembre et à l\'occasion de nos portes ouvertes, profitez de nombreux avantages!

4) apparent nombre d'elements: 1Du 30 Octobre au 15 Novembre et à l\'occasion de nos portes ouvertes, profitez de nombreux avantages!

5) eteint nombre d'elements: 1Du 30 Octobre au 15 Novembre et à l\'occasion de nos portes ouvertes, profitez de nombreux avantages!



62

<input type="radio"><input type="radio" name=nom identificateur value=valeur [CHECKED]> Texte

Les boutons de type radio proposent un choix unique parmi plusieurs propositions. On peut en sélectionner un par défaut avec le paramètre CHECKED. exempleSupposons que l'on désire connaître dans quel groupe d'âge se trouve le visiteur, on obtiendrait les cases radio suivantes: Haut du formulaire16-25 ans26-35 ans36-45 ans46-65 ans65 ans et plusBas du formulaire<form><input type="radio" name="Groupedage" value="16-25 ans"/> 16-25 ans<br/><input type="radio" name="Groupedage" value="26-35 ans" /CHECKED /> 26-35 ans<br/><input type="radio" name="Groupedage" value="36-45 ans"/> 36-45 ans<br/><input type="radio" name="Groupedage" value="46-65 ans"/> 46-65 ans<br/><input type="radio" name="Groupedage" value="65 ans et plus"> 65 ans et plus<br/></form>autre exemple:<form name="Mon Formulaire"action="mailto:…" method="post" enctype="text/plain">Qui êtes-vous?<P>Homme <input type-"radio" value="homme" name="genre" checked></p><P>Femme <input type="radio" value="femme" name="genre"></p><P>Extra terrestre <input type="radio" value="Extra_terrestre" name="genre"></p><P><input type=,,submit,, value@llenvoi" nante="boutonEnvoill> </form>Les trois boutons radio portent le même nom name="genre" car ils appartiennent au même groupe de questions.

<input type="checkbox" >

Les boutons de type "case à cocher" permettent un choix multiple, contrairement aux précédents. On peut en présélectionner plusieurs par défaut grâce au paramètre CHECKED.

<form naine="Mon-Formulaire" action="mailto: [email protected]" method="post" enctype="text/plain">vos loisirs<p>ski <input type "checkbox" value="ski" name="loisirs"> natation <input type "checkbox" value="natation" name="loisirs" checked> promenade<input type="checkbox" value="Promenade" name="loisirs"> farniente<input tyPe="checkbox" value="farniente" name="loisirs" checked></P> <p><input type="submiL" value "envoi" name=llboutonEnvoi"> </form>



63

autre exempleSupposons que l'utilisateur doive indiquer ses chanteurs ou chanteuses préférés, on pourrait alors obtenir les cases suivantes: Haut du formulaire

Céline Bidon

Mariah Carement

Kevin Gnoble

Jackson Alaporte

Madonana

Withney HoustonBas du formulaireLes cases à cocher sont appropriées dans ce cas-ci, puisque l'utilisateur peut avoir plus d'un chanteur préféré. Voyons maintenant à quoi ressemble le code HTML des cases à cocher de l'exemple ci-dessus: <form><table><tr><td><input type="checkbox" name="Chanteurs" value="Céline bidon"/>Céline bidon<br/><input type="checkbox" name="Chanteurs" value="Mariah Carement"/>Mariah Carement<br/></td><td><input type="checkbox" name="Chanteurs" value="Kevin Gnoble"/>Kevin Gnoble<br/><input type="checkbox" name="Chanteurs" value="Jackson Alaporte">Jackson Alaporte<br/></td><td><input type="checkbox" name="Chanteurs" value="Madonana"/> Madonana<br/><input type="checkbox" name="Chanteurs" value="Withney Houston">Withney Houston<br/></td></tr></table></form>

<input type="hidden">

Je le mentionne pour information, car il n'est d'aucune utilité en HTML. Hidden signifié "caché". L'élément n'apparaît pas à l'écran. Il admet comme paramètres name et value. Il sert à transmettre des données (sans aucune sécurité) dans un script CGI ou JavaScript.

<input type="Password">Celui-ci ne nous est guère plus utile que le précédent en HTML. Password signifie "mot de passe". Ce que tape l'utilisateur est remplacé par des puces noires mais n'est absolument pas masqué sur le réseau . Il sert dans des scripts CGI ou Javascript pour identifier un utilisateur référencé dans une base de données.

Les listes déroulantes <select size="X">L'élément SELECT indique une liste d'articles. Ses paramètres sont name pour nommer la liste, SIZE pour indiquer le nombre de choix visibles et MULTIPLE pour permettre plusieurs choix. Son attribut est <OPTION> qui admet lui-même deux paramètres : SELECTED pour présélectionner un ou plusieurs articles et value.

<body ><form name="Mon Formulaire" action="mailto:[email protected]" method="post" enctype="text/plain"> <table border="4" cellpadding="0" cellspacing="2" width="206"> <tr>

<td colspan="2"><b>Le ou les fruits que vous aimez</b></td></tr><tr><td>

<select name="Fruits" size="4" multiple><Option value="poire">Poire</option>



64

<Option value="prune">Prune</option><Option selected value="abricot">Abricot</option><Option value="tomate">Tomate</option><Option value="myrtille">Myrtille</option><Option value="orange">orange</option></select>

</td><td>Ctr-Clic (PC)<br/>Cde-Clic (Mac)<br/>Pour sélectionner plusieurs articles</td></tr><tr><td><input type "submit"value="envoi" name="boutonEnvoi"></td><td></td></tr></table></form></body>

Dans cet exemple, l'utilisateur peut faire plusieurs choix grâce au paramètre MULTIPLE, en maintenant la touche CONtrOL (sur PC) ou COMMANDE (sur Mac). Mais il est préférable d'avertir de cette possibilité.On a aussi présélectionné "Abricot" grâce au paramètre SELECTED.

Imaginons que l'utilisateur choisisse " Abricot, Myrtille et orange " et appuie sur Envoi. Comme ma liste se nomme "Fruits" «SELECT name="Fruits"» , je recevrai un e-mail de cette forme

Fruits=AbricotFruits=MyrtilleFruits=orangeboutonenvoi=envoi

Les menus déroulants

<select size="1">En forçant la taille de la liste à 1, on obtient un menu déroulant. Dans ce cas, le paramètre MULTIPLE ne doit pas apparaître. Dans l'exemple suivant, on vous propose deux menus déroutants, l'un pour une voiture, l'autre pour sa couleur.

<form name="Mon-Formulaire" action="mailto:… " method="post" enctype="text/plain">Automobiles Françaises<P> <select name="marques" size="1"><option selected value="poubelle">poubelle</option><option value="peugeot">peugeot</option><option value="Renault">Renault</option><option value="citron">Citroën</option></select><select name="couleurs" size="1"><option selected value="0"> crasse</option><option value="1">Blanc</option><option value="2">Rouge</option><optioin value="3">Jaune</option><optionvaleu="4>Vert</option></select> </p><p><input type=-,submit" value="envoi" name="boutonEnvoi'><input type="reset" value="Effacer"></form>



65

Le paramètre value dans <optionvalue="une valeur">Votre formulaire renverra la référence que vous aurez attribuée au paramètre value.Exemple:<form name="Mon Formulaire" action=" mailto: …" method "post" enctype="text/plain">Automobiles Françaises<p><select name="marques" size="1"><option selected value="P4256">Peugeot</option><option value="R6547">Renault</option><option value="C5551">Citroën</option></select> <select name="Couleurs" size="1"><option selected>Couleurs</option><option value="b55-56">Blanc</option><option value="r998-9">Rouge</option></select></p><p><input type="submit" value="envoi" name ="boutonEnvoi"/><input type="reset" value="Effacer"/></form>

Si l'utilisateur choisit "Peugeot" et "Rouge", vous recevrez:marques=P4256couleurs=r998-9boutonenvoi= envoi

En HTML, c'est la seule utilité du paramètre value qui trouve d'autres débouchés avec JavaScript notamment et php.

optgroup

La balise optgroup s'utilise dans une balise select et permet de grouper les options de cette dernière.

Pour spécifier le nom du groupe, il faut utiliser l'attribut label de optgroup.<select id="form_country" name="country" size="5"> <optgroup label="Amérique"> <option value="ca">Canada</option> <option value="us">États-Unis</option> </optgroup> <optgroup label="Europe"> <option value="be">Belgique</option> <option value="fr">France</option> </optgroup> </select>

Type="image" pour envoyer le formulaire L'image de formulaire est similaire au bouton soumettre. En effet, un clic sur celle-ci provoquera l'envoi du formulaire au serveur. En plus, les coordonnées de l'endroit cliqué seront également expédiées avec le formulaire sous la forme "name.x=n&name.y=n". Exemple: une image employée en tant que bouton soumettre <form action="mailto:[email protected]" method="post">...autres éléments de formulaires...<input type="image" src="brol.gif" border="1" width="112" height="14" name="BTImage" alt="Envoyer" hspace="1" vspace="1" align="top"></form>



66

Les conteneurs de type bloc Les principaux éléments créant des boîtes bloc sont :

• l'élément div ; • les titres h1, h2, h3, h4, h5, h6 ; • le paragraphe p ; • Les listes et éléments de liste ul, ol, li, dl, dd ; • Le bloc de citation blockquote ; • Le texte pré-formaté pre ; • L'adresse address.

La hauteur et la largeur

Fixer la largeur [width]La propriété width permet de définir la largeur d'un élément.L'exemple simplifié ci-dessous nous montre une boîte où on peut taper du texte :

div.box { width: 200px; border: 1px solid black; background: orange;}

Fixer la hauteur [height]Dans l'exemple précédent, remarquez la hauteur de la boîte fixée par son contenu. On peut affecter la hauteur d'un élément avec la propriété height. Essayons de rendre la boîte de l'exemple haute de 500px :

div.box { height: 500px; width: 200px; border: 1px solid black; background: orange;}

Les borduresOn peut utiliser des bordures pour beaucoup de choses, par exemple comme élément décoratif ou pour souligner la séparation de deux choses. CSS offre des options à n'en plus finir pour l'utilisation des bordures dans vos pages.

L'épaisseur des bordures [border-width]L'épaisseur des bordures est définie par la propriété border-width, dont les valeurs peuvent être "thin", "medium" et "thick", ou une valeur numérique en pixels. La figure ci-dessous illustre le système :



67

La couleur des bordures [border-color]La propriété border-color définit la couleur d'une bordure. Des valeurs de couleur normales sont, par exemple, "#123456", "rgb(123,123,123)" ou "yellow" .



68

Les types de bordures [border-style]On peut choisir parmi plusieurs types de bordures. Voici huit types de bordures différentes tels qu'Internet Explorer 5.5 les interprète. Toutes les bordures ont la couleur "gold" et une épaisseur valant "thick" mais elles peuvent naturellement s'afficher dans d'autres couleurs et épaisseurs.On peut utiliser les valeurs "none" ou "hidden" si on ne veut aucune bordure.

Exemples de définitions de borduresLes trois propriétés décrites précédemment peuvent être réunies pour chaque élément et donc produire des bordures différentes. Pour illustrer cela, voyons un document où nous définissons des bordures différentes pour <h1>, <h2>, <ul> et <p>. Le résultant n'est peut-être pas très beau mais il montre quelques-unes des nombreuses possibilités :

h1 { border-width: thick; border-style: dotted; border-color: gold;}

h2 { border-width: 20px; border-style: outset; border-color: red;}

p { border-width: 1px; border-style: dashed; border-color: blue;}

ul { border-width: thin; border-style: solid; border-color: orange;}

Il est également possible de déclarer des propriétés spéciales pour les bordures supérieures, inférieures, gauches ou droites. L'exemle suivant montre comment le faire :

h1 { border-top-width: thick; border-top-style: solid; border-top-color: red;

border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue;

border-right-width: thick; border-right-style: solid; border-right-color: green;

border-left-width: thick; border-left-style: solid; border-left-color: orange;}



69

Concision [border]Comme pour beaucoup d'autres propriétés, on peut concentrer plusieurs propriétés en une seule avec border. Voici un exemple :p { border-width: 1px; border-style: solid; border-color: blue;}

Il peut se concentrer en :

p { border: 1px solid blue;}

Margin et paddingVoici le schéma de base...

boite CSS avec ses marges et bordure

Fixer la marge d'un élémentUn élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). La marge est la distance entre chaque côté et l'élément avoisinant (ou les bordures du document).Comme premier exemple, nous allons voir comment définir les marges du document même, c'est-à-dire de l'élément <body>. L'illustration suivante montre les marges voulues pour les pages.



70

Le code CSS serait le suivant :

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;}

Ou bien plus concis :body { margin: 100px 40px 10px 70px;}

Fixer l'espacement dans un élémenthttp://fr.html.net/tutorials/css/lesson10_ex3.aspL'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la mesure où l'espacement n'affecte pas la distance de l'élément aux autres éléments mais définit seulement la distance interne entre la bordure et le contenu de l'élément.L'utilisation de l'espacement peut être illustrée par ce simple exemple où tous les titres ont des couleurs d'arrière-plan :

h1 { background: yellow;}

h2 { background: orange;}

En définissant l'espacement des titres, on change le remplissage autour du texte dans chaque titre :h1 { background: yellow;



http://fr.html.net/tutorials/css/lesson10_ex3.asp

71

padding: 20px 20px 20px 80px;}

h2 { background: orange; paddingleft:120px;}

Paddinghttp://www.aidenet.com/css/css42.htmPadding est une zone, appelée aussi "marge interne" ou "intervalle", qui correspond à la première possibilité d'entourer le "contenu" à l'aide de 4 valeurs. En réalité la zone blanche "padding" du schéma ci-dessous, est normalement de la même couleur (beige foncée dans cet exemple) que celle du "contenu".Cette propriété qui permet de définir la distance entre le contenu d'une boîte et la bordure de ce dernier, sera par exemple utilisé pour éloigner un contenu de la bordure qui l'entoure.La zone "padding" va permettre si besoin, de donner à la boîte concernée une position aérée par rapport aux autres éléments mitoyens.Elle regroupe les différentes propriétés permettant de définir l’espace intérieur d’un élément, entre ses bords et son contenu :

1.padding-top2.padding-right3.padding-bottom4.padding-left

Valeurs pour PADDING - Longueur : qui spécifie une largeur fixe. - Pourcentage : valeur calculée par rapport à la largeur du bloc conteneur de la boîte générée. Idem pour les propriétés "padding-top"et "padding-bottom".Ces valeurs ne peuvent pas être négatives. L'hérédité n'est pas totalement supportée.

Règles applicables aux valeursLes valeurs utilisables longueur (choisir une unité) et pourcentage (calculé par rapport à la longueur de l'élément), sont indiquées dans le sens des aiguilles d'une montre, en partant du sommet de la boîte. Les valeurs négatives ne sont pas autorisées.

• Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. • S'il y en a deux, alors la première valeur s'applique pour l'espacement du haut et celui du bas,

et la seconde pour l'espacement de droite et celui de gauche. • Avec trois valeurs, l'espacement du haut reçoit la première valeur, les espacements gauche et

droite la deuxième et l'espacement du bas la troisième. • Pour quatre valeurs, celles-ci s'appliquent respectivement aux espacements du haut, de droite,

du bas et de gauche.



http://www.aidenet.com/css/css42.htm

72

- si on indique pas de padding, la valeur par défaut est zéro

Exemples (4 classes).padding1 { padding: 30px; ;} .padding2 { padding: 30px 50px;;} .padding3 { padding: 30px 50px 5px; ;} .padding4 { padding: 30px 50px 5px 20px;;}

Positionner en absolu et relatifLe positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :

• une boîte elle-même positionnée (position relative ou absolue) ;

• le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.

La position relativeLe positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.Définissons un conteneur verte en position relative :.verte { position: relative; backgroundcolor: #00ff00; width: 15em;}

Et un positionnement absolu jaune :

.jaune {

position: absolute; top: 1em; right: 1em; backgroundcolor: #ffff00;}

Et appliquons ces styles :



73

<div class="verte"> <p> … </p> <p class="jaune"> Boîte jaune en position absolue </p>

</div>

Un positionnement relatif indice qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune :

En CSS :

.jaune { position: relative; bottom: 5px; backgroundcolor: #ffff00;}

En HTML :

<p> Lorem <span class="jaune"> boîte en position relative </span> ipsum dolor.</p>

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :

En CSS :

.jaune { position: relative;

bottom: 5px; left: 3em; backgroundcolor: #ffff00;}

Centrage vertical

Vieux problème!Sachant qu’une page a une longueur indéterminée, margin-auto ne donne évidemment rien!!Jusqu’au jour où un étudiant a montré à son prof comment faire pour un bloc de hauteur connue !

1. définir le bloc en position absolue;

2.choisir top:50% (mais de quoi? je m’interroge encore)



74

3.décaler vers le haut de la moitié de la hauteur de la balisemargin-top:-demiHauteur (c'est bien un nombre !négatif!!)

et c’est tout !

OverflowVoir : http://www.yoyodesign.org/doc/w3c/css2/visufx.html

Le débordement 'overflow'

Valeur : visible | hidden | scroll | auto | inherit Initiale : visible S'applique à : des éléments de type bloc

visible Le contenu ne sera pas rogné, et celui-ci peut être représenté hors de la boîte du bloc ; hidden Le contenu sera rogné et aucun mécanisme de défilement ne devrait être fourni pour voir la partie qui aura été rognée. On spécifie la taille et la forme du reliquat du rognage avec la propriété 'clip' ; scroll Le contenu sera rogné et, si disponible, l'agent utilisateur fournit un mécanisme de défilement visible à l'écran Celui-ci devrait apparaître pour une boîte donnée, que le contenu de celle-ci soit rogné ou non.auto L'interprétation de cette valeur dépend de l'agent utilisateur, cependant, celui-ci devrait fournir un mécanisme de défilement quand les boîtes débordent.

Un peit exemple sur le site w3schools http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow



http://www.yoyodesign.org/doc/w3c/css2/cascade.html#value-def-inherit

http://www.yoyodesign.org/doc/w3c/css2/visufx.html

75

Un formulaire élaboré avec du style

<!DOCTYPE html><html><head> <meta charset="UTF8"/> <title>inscription</title> <style type="text/css"> fieldset{ border: 1px solid #781351; background: #FFFFDD ; width:800px; margin:auto }

legend{ color:black; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px } label{ width: 11em; float: left; textalign: right; marginright: 0.5em; /*display: block*/ } select{ backgroundcolor:#F7DF99} input[type="submit"],input[type="reset"]{ background: #ffa20f; border: 2px outset #d7b9c9 } textarea{ resize:none;width:20em;height:3em} </style></head>

<body><form action="http://plomteux.servhome.org/wordpress/verif.php" method="post"> <fieldset >



view-source:http://plomteux.servhome.org/wordpress/verif.php

76

<legend STYLE="background: #FFFF88 ;"><b>Client</b></legend> <p><label>Civilités</label> <input type="radio" name="civilite" value="Mademoiselle"/>Mademoiselle <input type="radio" name="civilite" value="Madame" checked />Madame <input type="radio" name="civilite" value="Monsieur" />Monsieur </p> <p> <label>Nom / Prénom</label> <input type="text" name="nom" maxlength="80"/></p> <p> <label>Adresse</label> <textarea name="adrese" wrap="hard" ></textarea> </p> <p> <label>No postal / Localité</label> <input type="text" name="no_postal" size="5" maxlenght="4"> <input type="text" name=localite size="20" maxlenght="80"

value="Liege"> </p> <p><label>Pays</label> <select name="pays" style=""> <option value="Fr">France</option> <option value="It">Italie</option> <option value="Be" selected>Belgique</option> </select> </p> <p><label>Applications(s)</label> <select name="applications[]" size="5" multiple="multiple"> <option SELECTED>Bureautique</option> <option value="DAO">DAO</option> <option value="Stat">Statistiques</option> <option value="SGDB">SGBD</option <option value="Web" selected>Internet</option> </select> </p> </fieldset> <p style="textalign:center"> <input type="submit" value=" Envoyer "> <INPUT type="reset" value=" Effacer "> </p> </form>

</body></html>

Pour tester le formulaire lorsqu'il est réellement envoyé, utilisez (provisoirement)<form action="http://plomteux.servhome.org/wordpress/verif.php" method="post">Observez les problèmes du choix multiple et le rôle de wrap plus ou moins respecté



77

la mise en page en HTML5 La majorité des sites web ont le même positionnent, un entête, un menu, un contenu et un piedEn html on utilise des <div> définissant la position du moindre élément de la page. Le HTML5 permet de définir les blocs dans la page en écrivant des balises clairement identifiables :Le doctype Il est indispensable de préciser un DOCTYPE de type HTML 5 sur la première ligne de la page, et il a la forme suivante:<!DOCTYPE html>

I. SectionLa balise <section> va définir un des blocs principaux de votre page comme le bloc destiné aux comentaires en dessous d’un article de blog ou le panier pour un site de vente en ligne. Attention a ne pas interpreter cette balise comme des divs, votre site ne doit pas se retrouver avec 15 balises <section> au sein d’une page, si vous faites bon usage des balises html5 décrites dans cet article , vous n’aurez qu’un besoin succin de la balise <section>.

1 <section>2 <h2>Un bloc de mon site</h2>

3 <p>Ceci est un bloc principal dans ma page qui ne répond à aucun des critères d'utilisation des nouvelles balises HTML5 telles que header/footer/aside etc...</p>

4 </section>

II. navLa balise <nav> définit la navigation de votre page (le menu). On peut insérer n’importe quelle balise à l’intérieur d’un bloc <nav>. Cette balise ne cahnge e n rien l’agencement du site web, simplement elle précise le contenu de manière sémantique.

1 <nav>2 <a href="#">Element</a>3 <a href="#">Element 2</a>4 <a href="#">Element 3</a>5 </nav>

III. ArticleDe nombreux sites propose des « Articles » rédigés ou à vendre. On place le contenu des articles dans une balise <article>. On peut placer des éléments header et footer à l’intérieur d’une balise <article>.

1 <article>2 <header>Mon article</header>3 <div class="content">Le contenu de mon article</div>



78

4 <footer>La fin de mon article</footer>5 </article>

IV. asidedéfinit la barre latérale (sidebar) du site , une séparation de bloc courante dans le web ; 95% des blogs possèdent une sidebar. Ensuite vous pouvez utiliser cette balise dans la cadre que vous voulez. Cette balise est relative au contenu d’un site qui va être fixe peut importe la page, mais qui n’est pas dépendant du contenu ou du header ou footer de la page.

V. header / footerLes balises <header> et <footer> vous permettent en html5 de définir … le pied et l'entête de votre document. Mais en plus de vous servir à définir les elements principaux de votre site, vous pouvez ajouter une balise header et footer à l’intérieur d’un élément <article>. Vous ne pouvez pas ajouter une balise <footer> a l’intérieur d’une autre balise <footer> ni a l’intérieur d’une balise <header>, normal, non !.

VI. adressLa balise <adress> paut contenir d’autres balises de mise en forme telles que <p> ou des liens <a>. Elle sera interprétée comme définissant l’adresse de l’auteur du site ou, si elle se trouve dans une balise <article>, comme l’adresse d l’auteur de l’article. Attention donc à ne pas utiliser <adress> dans le cas d’un annuaire par exemple , cette balise identifie seulement les auteurs.

Identifiant de l’auteurContactez moiAddress: rue du web, Paistéléphone: +12 34 56 78

<address>Identifiant de l'auteur<br /><a href="mailto:[email protected]">Contactez moi</a><br />Address: rue du web, PAris<br />téléphone: +12 34 56 78

</address>

VII. summaryla balise <summary> vous permet de définir un début de bloc plié / déplié par exemple. elle s’utilisera le plus couramment avec une balise <details> comme cela :

1 <details>2 <summary> Le principal</summary>3 <p>et les détails</p>4 </details>



mailto:[email protected]

79

VIII. progressLa balise <progress> permet d’afficher une jauge dynamique comportant une animation variable selon le navigateur et l’OS du client.

1 <progress max=100 value=75>2 75 %3 </progress>

Bord arrondis border-radius#cadre { border-radius: 10px;}

la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :

#cadre { border-radius: 5px 10px 0 5px;}

En pratique, on a quelques soucis !Il faut préciser le navigateurLe code CSS à écrire sera donc :#cadre {border:1px solid #B0C4DE;backgroundcolor:#E4EFFF;mozborderradius:10px;webkitborderradius:10px;}



80

Dessin et la balise canvas <canvas id="monDessin" width="400" height="300"></canvas>

Cette balise n'a pas de contenu HTML, sauf un message ou contenu qui s'affiche seulement dans les navigateurs anciens qui ne reconnaissent pas HTML 5. Par exemple:

<canvas id="monDessin" width="400" height="300"> Canvas est inconnu dans ce navigateur.</canvas>

Le script

Le contenu utile est donné en JavaScript.

Exemple: afficher un rectangle. Le script sera éventuellement démarré par l'évènement onload associée à la balise <body> ou à l'élément window. On crée la fonction rectangleBleu() et on l'assigne à onload:

function rectangleBleu(){ var canvas = document.getElementById("monDessin"); var context = canvas.getContext("2d"); context.fillStyle = "blue" context.fillRect(100,0,200,100);}window.onload=rectangleBleu;

L'attribut fillStyle assigne une couleur courante au contexte, qui sera celle des objets dessinés par la suite. On peut lui assigner un nom de couleur, un code rgb ou rgba. La méthode fillRect affiche un rectangle rempli avec la couleur courante, et à pour paramètres, x, y, largeur, hauteur.



81

Cimetière des vieilleriesPolices (ancienne méthode à éviter) Formater une police de caractère

<font face=""> définit le type de police que l'on souhaite et nécessite un marqueur de fin.Règle : <font face="">.....</font>

Exemple :

<font face="times new roman">Votre texte</font> Votre texte

<font face="symbol">Votre texte</font> ςοτρε τεξτε

<font face="arial">Votre texte</font> Votre texte

Formater la taille d'une police de caractère (ancienne méthode)<font size=""> définit la taille d'une police en valeurs absolue variant entre 1 et 7 ou relative de -3 à +3 et nécessite un marqueur de fin.Règle : <font size="">.....</font>

Exemple :

<font size="6">Votre texte</font> Votre texte

<font size="+2">Votre texte</font> Votre texte

<font size="+1">Votre texte</font> Votre texte

<font size="2">Votre texte</font>

Votre texte

Formater la couleur d'une police de caractère<font color=""> définit la couleur d'une police et nécessite un marqueur de fin.Règle : <font color="">.....</font>



82

Exemple :

<font color="black">Votre texte</font>

Votre texte

<font color="gray">Votre texte</font> Votre texte

<font color="marroon">Votre texte</font>

Votre texte

<font color="olive">Votre texte</font>

Votre texte

<font color="green">Votre texte</font>

Votre texte

<font color="teal">Votre texte</font> Votre texte

<font color="navy">Votre texte</font> Votre texte

<font color="purple">Votre texte</font>

Votre texte

<font color="white">Votre texte</font>

Votre texte

<font color="silver">Votre texte</font>

Votre texte

<font color="red">Votre texte</font> Votre texte

<font color="yellow">Votre texte</font>

Votre texte

<font color="lime">Votre texte</font> Votre texte

<font color="aqua">Votre texte</font> Votre texte

<font color="blue">Votre texte</font> Votre texte

<font color="pink">Votre texte</font> Votre texte

Il peut être nécessaire de spécifier de multiples polices dans le marqueur <font> ce faisant, le navigateur utilisera la première police de la liste si celle-ci est disponible; si elle ne se trouve pas sur son système, il recherchera la suivante et ainsi de suite. Vous pouvez même spécifier une police telle que sans serif.Par exemple, le navigateur de votre surfeur recherchera et essaiera d'afficher Verdana, ensuite Arial, puis Helvetica. Si aucune de ces polices n'est disponible, l'attribut "sans serif" à la fin de la liste permettra au moins d'assurer que le navigateur utilise une police sans serif.Les cadres ou frames (à oublier !)Avant l'apparition des frames, l'affichage d'un document se faisait dans la totalité de la fenêtre du navigateur.Il peut être utile de diviser cette zone d'affichage, de la cloisonner afin de permettre l'affichage simultané de plusieurs pages dans la même fenêtre du navigateur.



83

Chaque frame peut avoir un contenu spécifique et des barres de déplacement verticales et horizontales. On se retrouve avec un ensemble de fenêtres juxtaposées.Comment intégrer cela dans un projet HTML ,L'ensemble des cadres sera défini dans une page qui ne contient rien d'autre; le plus souvent, ce sera la page index.htm qui est le point de départ quasi obligatoire de l'utilisateur de votre site.Cette page ne possède par de <Body>Elle contient <framset> qui ouvre une définition de frame et </framset> qui la termine.Pour afficher une structure contenant 3 pages distinctes, j'ai donc besoin de 4 pages.La première contient les définitions et appelle les 3 autres dans les cadres correspondants.

La page frameset

Les frames reposent sur un seul fichier qui détermine l'affichage des différentes pages.

Un exemple simple :

<frameset cols="20%,80%"> (ou <frameset cols="20%,*">)

[...]



84

</frameset>

Deux frames verticales sont définies ici dans la balise <frameset>. La première est une colonne qui occupe 20% de la fenêtre du navigateur, la seconde s'étale sur l'espace qui reste à droite (soit les 80% de la fenêtre).

frameset:

permet de diviser une zone en cellules horizontales ou verticales.Attributs:frameborder="1" ou "0" avec ou sans bordure ("yes" ou "no")framespacing="20" espace entre les cadresbordercolor ="nombre en hexadécimal" couleur de la bordure

division horizontale

rows="n,n%,*,..."

<frameset rows="20%,80%">

divise la zone en cellules horizontales. • n = hauteur en nombre de pixels • n%= hauteur de la cellule en pourcentage de l'écran • = hauteur restante

remarque personnelle: border="0" supprime totalement les bordures

division verticale

colss="n,n%,*,..."

<frameset cols="20%,80%">

divise la zone en cellules verticales. • n = largeur en nombre de pixels



85

• n%= largeur de la cellule en pourcentage de l'écran

• = largeur restante

A l'intérieur de frameset, on trouve frame

La balise <frame src="contenu" >caractérise le contenu d'un cadre

src="A.html" est l'adresse d'un fichier A.html à placer dans un cadre.

exemple :

<frameset cols="20%,80%"><frame name="gauche" src="menu.html"><frame name="droite" src="accueil.html"></frameset>

Les deux balises <frame> désignent les fichiers HTML que le navigateur doit afficher dans nos deux colonnes. Cette balise possède deux attributs incontournables :

• src, qui indique le nom du fichier HTML à afficher dans le cadre.

• name, qui donne un nom à ce cadre. Ce nom est surtout utilisé lors de la création de liens.

La balise <frame> dispose de quelques attributs qui permettent de modifier son apparence :

noresize, qui empêche le visiteur de redimensionner la frame.scrolling, qui indique si la frame possède une barre de scrolling (ascenseur).

Il peut prendre comme valeur auto (par défaut), yes ou no. Dans le cas de auto, l'ascenseur est affiché en cas de besoin uniquement.

frameborder, qui affiche une bordure de séparation entre les frames si la valeur vaut 1.marginwidth et marginheight, qui spécifient les marges horizontale et verticale de la frame.

Ces marges correspondent au nombre de pixels entre le bord de la frame et son contenu.

Frames imbriquéesRien n'empêche une frame d'être composée d'autres frames. Il suffit pour cela d'imbriquer les <frameset> :

exemple<frameset cols="100,*"><frame name="gauche" src="menu.html"><frameset rows="20%,80%"><frame name="haut" src="banniere.html"><frame name="principal" src="main.html"></frameset><noframe>Votre navigateur ne supporte pas les frames.<a href="noframes.html">Page sans frames</a></noframe></frameset>



86

Nous avons ici trois frames :

Une, verticale, à gauche de l'écran, contient le fichier menu.html et mesure 100 pixels de large.Une autre, en haut de l'écran, contient le fichier banniere.html et occupe 20% de la hauteur du navigateur.Une troisième occupe le reste de l'espace dans le navigateur (* pour la largeur, 80% pour la hauteur) et contient le fichier main.html.

CompatibilitéNous avons introduit dans cet exemple la balise <noframe>. C'est elle qui contient le code destiné aux navigateurs ne supportant pas les frames.Target :Liens et cibles dans une frameMaintenant que vous avez défini les frames de votre site, il faut créer des liens entre elles.

Par défaut, quand on active un lien, la page de destination s'ouvre dans la frame courante, c'est-à-dire celle qui contenait le lien.

Si vous avez défini une frame contenant le menu de votre site et vous contentez de liens classiques, les différentes pages de votre site s'afficheront en lieu et place du menu, pas dans votre page principale.

Pour définir dans quelle frame afficher votre page, utilisez l'attribut target de la balise <A> et donnez-lui comme valeur le nom de la frame de destination (attribut name de la balise <frame>).

Par exemple, si vous définissez ce lien sur la page menu.html :

<a href="mapage1.html" target="principal">Premiere page</a>

le fichier mapage1.html s'affichera dans la frame principale du site. Mais la page menu.html restera toujours visible dans la frame de gauche.



87

Outre les noms de frames, l'attribut target peut prendre plusieurs autres valeurs :

_blank, pour définir un lien vers une nouvelle fenêtre de navigateur.

_self, qui correspond à la valeur par défaut. Elle définit donc un lien à l'intérieur de la même frame._parent, pour indiquer que la page doit s'ouvrir en occupant tout le frameset de la frame courante._top, pour permettre à la nouvelle page d'occuper l'intégralité de la fenêtre du navigateur, supprimant ainsi tout frameset.

