WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB

ALGORITHMIQUE-PROGRAMMATION ORIENTÉES INTERNET :

ASPECTS CLIENTS

NFA054 (javascript) test voyageur

Bienvenue sur Plei@d' Ile De France.

Pour accéder à vos cours et utiliser les outils Plei@d, connectez-vous

Je vous conseille la lecture du document « Apprendre le langage HTML » de Van Lancker Luc. Vous pouvez le consulter en ligne ici.

En plus de cette page d'accueil, vous trouverez trois autres pages :

1. une page contenant des liens vers les sites présentant le langage html ;
2. une page contenant des liens vers des serveurs gratuits de sites ;
3. une page avec mes coordonnées.

Ci-dessous la liste des résultats en page web, des premiers exercices de ce cours de WEBMESTRE !

Mise en ligne des pages web au fur et à mesure de leurs constructions selon la séquence des « séances »

Le support pédagogique d'origine a été rédigé par Michaël KRAJECKI, Professeur d’Informatique à l’Université de Reims.
Copyright © 2001-2006 Centre d’Enseignement à Distance du Cnam Champagne-Ardenne.

Bas de page

Introduction

Séance 1 : Hiérarchie du langage HTML

• Un premier document html
• Titres et sous titres

Séance 2 : Mise en page des éléments

1. Définition d’un paragraphe
2. Lignes et sauts de lignes
3. Les commentaires sont principalement destinés aux webmestres du site.
4. Listes descriptives
5. Listes non ordonnées (à puces)
6. Les Listes ordonnées permettent de définir une hiérarchie
7. Mise en forme des textes
8. Paragraphes spéciaux
9. Caractères : polices et tailles
10. Les caractères accentués

• Les accents et le code HTML - pdf
• Ordre du jour du cabinet Lacrapule & Co

Séance 3 : Couleurs, liens hypertexte, images

1. Utilisation des couleurs
2. Liens hypertextes
3. Liens internes à une page
4. Inclusion d’images
5. La taille des images est précisée dans le corps du document
6. Alignement des images
7. Le texte est placé à gauche de l’image
8. Une image comme origine d’un lien hypertexte

• Police et couleur des caractères
• Page A
• Page B
• Définition d'une couleur

Séance 4 : Comment utiliser les couleurs

1. Les Séparateurs et Les Arrière-Plans - voir les bibliothèques d’images sur le Web
2. Les Couleurs - Quelle est le code de cette couleur ?
3. Afficher les teintes des couleurs RVB en augmentant l’intensité de 10% en 10%

Séance 5 : Le référencement et les balises « meta »

L'exercice de la séance 5 est constitué de la page actuelle (Accueil.htm) et complété des pages html suivantes {Langage.htm, Serveurs.htm et Moi.htm}

Remarque, cette page est validée par le W3C organisme de standardisation à but non-lucratif, chargé de promouvoir la compatibilité des technologies du World Wide Web.
Lien vers le site de validation ici

Positionnement des éléments dans la page web !

Séance 6 : Les tableaux

Séance 7 - Les feuilles de style

Les concepteurs de pages HTML sont encouragés depuis les premières versions du langage HTML à séparer le fond de leurs documents de la forme.

• Style LOCAL, exemple d' imbrication locale dans la balise paragraphe : <p style="color:blue">
• Style GLOBAL : introduite par la balise <style> et terminée par la balise </style>, dans la partie entête du document.
• Feuille de style externe : pour la lier (appliquer) à un document html, la balise <link> est définie dans la partie entête du document, exemple - <link href="feuille.css" rel="stylesheet" type="text/css"> :
  • la FORME : Fichier CSS
    (Cascading Style Sheets = feuilles de style en cascade)
  • le FOND : Fichier HTML
    (Hypertext Markup Language = langage de balisage qui permet d’ecrire de l’hypertexte)
• Feuille de style importée :

<style type="text/css">
<!--
@import url("styleRouge.css");
@import url("styleBleu.css");
body {text-align:center}
-->
</style>

Principales propriétés des sélecteurs

1. liées aux polices de caractères
   • font-family : la police de caractères utilisée.
   • font-size : la taille de la police de caractères.
     Cette valeur peut être définie en points ou bien à l’aide d’une valeur prédéfinie :
     • xx-small, x-small, small, medium,
     • large, x-large, xx-large, smaller et larger
   • font-style ; définit l’inclinaison de la police : normal, oblique, et italic.
   • font-weight ; épaisseur du trait : bold, bolder, lighter et normal.
     Il est également possible de préciser une valeur (multiple de 100) comprise entre 100 (le trait le plus fin) et 900 (le trait le plus épais).
     La valeur 400 correspond à normal.
2. liées à la mise en page des textes
   • color : la couleur de la police de caractères utilisée.
   • text-align ; précise l’alignement du texte, quatre valeurs sont possibles : left, center, justify ou right.
   • text-decoration ; définit l’enrichissement dont fait l’objet le texte, cinq valeurs sont possibles :
     • none (valeur par défaut),
     • underline, overline, line-through ou bien blink.
   • text-transform ; autorise une modification automatique des textes, quatre valeurs possibles :
     • capitalize, uppercase, lowercase
     • ou none (valeur par défaut).
   • text-indent : retrait du premier mot du paragraphe.
     • La valeur associée à cette propriété peut être exprimée en points (pt), en centimètres (cm), en millimètres (mm) en pouces (in) ou bien en pourcentage.
       Par défaut, la valeur est égale à zéro.
3. liées aux arrière-plans
   • background-color : la couleur de fond de l’objet.
   • background-image : définit l’image de fond utilisée, par défaut la valeur est none (aucune).
   • background-repeat : précise si la répétition d’une image de fond est autorisée, les valeurs possibles sont :
     • repeat, repeat-x, repeat-you
     • no-repeat(valeur par défaut).
   • font-style ; définit l’inclinaison de la police : normal, oblique, et italic.
   • font-weight ; épaisseur du trait : bold, bolder, lighter et normal.
     • Il est également possible de préciser une valeur (multiple de 100) comprise entre 100 (le trait le plus fin) et 900 (le trait le plus épais).<br>
       La valeur 400 correspond à normal.
4. liées aux listes
   • list-style-type ; précise le type de puces utilisées, les valeurs possibles sont :
     • disc (valeur par défaut), circle, square, decimal,
     • lower-roman, upper-roman, lower-alpha, upper-alpha ou none.
   • list-style-image : permet l’utilisation d’une image comme puce, la valeur attendue est l’adresse de l’image.
     Par défaut, la valeur est none.
   • List-style-position : précise si la position de la puce par rapport au texte, deux valeurs sont autorisées inside et outside, valeur par défaut.
5. liées aux bordures
   • border-style: précise si la répétition d’une image de fond est autorisée, les valeurs possibles sont :
     • none, dashed, dotted, double, groove,
     • inset, outset, ridge et solid.
   • border-color ; définit la couleur de la bordure.
     Remarque : une couleur peut être définie de trois façons différentes :

     par son nom anglais (voir définition d'une couleur)

     par sa définition suivant le modèle RGB en hexadécimal, la notation est alors la suivante, color: #rrvvbb

     par sa définition suivant le modèle RGB en décimal, une couleur est dans ce cas définie ainsi, color: rgb(rrvvbb).
     Les valeurs peuvent également être des pourcentages, par exemple, color : rgb(100%,50%,0)

   • border-width : définit l’épaisseur du trait de la bordure.
     • Les valeurs autorisées sont : thin, medium (valeur par défaut), thick ou bien une valeur
6. liées à la définition des marges extérieures (margin) et intérieures (padding)
   • margin-top ; définie la marge en haut, par exemple la définition suivante est autorisée : h2 { margin-top :1em }
     • ici, la marge en haut d’un titre de niveau 2 est fixée égale à la taille de la police utilisée
   • margin-bottom : définie la marge externe en bas
   • margin-right : définie la marge externe à droite
   • margin-left : définie la marge externe à gauche
   • padding-left : définie l’espacement interne à gauche
     • 
       les propriétés padding-right, padding-bottom, et padding-top sont également définies.

Les classes de style

Quand il s’agit de rédiger un rapport, il est appréciable de pouvoir appliquer une présentation du résumé du document, différente du reste du document.
La définition de classes au niveau des feuilles de style autorise ce type de modification.

Les classes régulières

Elles permettent la définition de plusieurs règles d’affichage pour un même sélecteur.

<style type="text/css">
<!--
body {background color: #C0C0C0}
p {color:darkgreen}
p.resume{
background-color:lightyellow;
text-align:justify;
margin-left:5em;
margin-right:5em
-->
</style>

Résultat HTML

Les classes génériques

Dans l’exemple précédent, nous avons défini une classe qui s’appliquait à la balise <p>.
Le standard CSS autorise également des définitions de classes génériques qui pourront être appliquées à toutes balises.

<style type="text/css">
<!--
.bleu {color: #0000FF}
-->
</style>

Résultat HTML

Les pseudo classes de style

Enfin, le standard CSS définit un dernier type de classes, appelé pseudo classe.
Il s’agit dans ce cas d’autoriser des définitions pour l’affichage des balises dans des états particuliers
par exemple, pouvez définir les propriétés :

• des liens actifs (pseudo classe active) ou bien
• des liens non encore visités (pseudo classe link).

La définition d’une pseudo classe diffère de celle d’une classe régulière ou générique par l’utilisation du deux points « : » à la place du point « . » qui sépare le nom du sélecteur du nom de la classe.

a:link { non encore visité
color: royalblue;
}
a:visited {
color: gold;
}
a:hover { c'est à dire survolé
color: lawngreen;
}
a:active { c'est à dire cliqué
color: tomato;
}

Exemples des couleurs pour les pseudo classes précédentes :

De même, vous pouvez modifier l’apparence d’un paragraphe

• de la première ligne (pseudo classe first-line), ou
• du premier caractère (pseudo classe first-letter).

p:first-line {
color: royalblue; background-color:gold

Exemple. En effet, en faisant varier la fenêtre du navigateur, seule la première ligne du paragraphe, est colorée ici « color: royalblue; background-color:gold » (faites varier la taille de la fenêtre !)

Division d’un document

Dans certains cas, il est nécessaire de pouvoir « oublier » pendant quelques mots ou lignes une feuille de style.
C’est l’objectif des balises <span> et <div> qui autorisent une modification locale de la feuille de style.

La balise <span>

Supposons, que nous souhaitions appliquer une classe générique à plusieurs mots d’un paragraphe.
L’utilisation de la balise <span> est alors fortement recommandée.

<style type="text/css">
<!--
.fondVert {background-color:lawngreen}
-->
</style

Le résultat est présenté ici

La balise <div>

Comme la balise <span>, la balise <div> autorise une modification locale de la feuille de style.
Cette modification portera non plus sur un ensemble de mots, mais sur un ou plusieurs paragraphes.
Par exemple, nous modifions ici la couleur de fond utilisée de plusieurs paragraphes :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>La balise &lt;div</title>
<style type="text/css">
<!--
.bleu {background-color:royalblue; color:gold}
-->
</style>
</head>
<body>
<p>Voici un paragraphe.</p>
<div class="bleu">
<p>Un premier paragraphe bleu.</p>
<p>Un deuxième …</p>
</div>
<p>Un dernier paragraphe utilisant le style global.</p>
</body>
</html>

Exemple du code html ci-dessus.

Fixer la position des objets

Les feuilles de style apporte une solution facile d’emploi quand il s’agit de placer précisément un objet dans un document HTML.
En effet, nous pouvons préciser les coordonnées relatives ou absolues de n’importe quel objet composant la page.

Les coordonnées absolues sont définies par rapport au coin supérieur gauche de la fenêtre du navigateur qui a pour coordonnées (0,0).
La première coordonnée est associée à la largeur de la fenêtre, la seconde à la hauteur.
Supposons que la fenêtre de votre navigateur possède une taille de 400 x 300 pixels, alors :

• le sommet haut gauche a pour coordonnées (0,0) ;
• le sommet haut droit a pour coordonnées (400,0) ;
• le sommet bas droit a pour coordonnées (400,300) ;
• le sommet bas gauche a pour coordonnées (0,300).

Le positionnement relatif se détermine par rapport à d’autres objets de la page. Il est beaucoup plus difficile à maîtriser et est par conséquent beaucoup moins utilisé.
L’utilisation des balises <span> et <div> est fortement conseillé dans ce cas. Nous allons présenter rapidement comment utiliser le positionnement absolu à l’aide de trois exemples :
placement d’un texte, d’une image et superposition d’un texte sur une image.

Placer un texte

Pour placer un texte précisément, nous pouvons introduire une division du document (en utilisant la balise <div>) et fixer les coordonnées du texte à l’aide d’une feuille de style locale.

Voici un exemple où nous plaçons en (200,50) le texte ALGORITHMIQUE-PROGRAMMATION ORIENTÉES INTERNET.
Donc ce texte sera décalé de 200 pixels sur la droite et de 50 pixels vers le bas.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Placer un texte</title>
</head>
<body>
<span style="position:absolute; left:200px; top:50px; color:royalblue">ALGORITHMIQUE-PROGRAMMATION ORIENTÉES INTERNET</span>
</body>
</html>

Le résultat est présenté ici

Placer une image

Le placement d’une image n’est pas différent du placement d’un texte. Nous pouvons tout simplement remplacer le texte par l’affichage de l’image avec la balise <img>.

Voici cependant une autre façon de procéder :
nous allons utiliser, non pas la balise <span>, mais la balise <div>. De plus, nous allons définir une classe au niveau d’une feuille de style globale pour placer l’image.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Placer une image</title>
<style type="text/css">
<!--
.positionImage { position:absolute; left:80px; top:70px}
-->
</style>
</head>
<body>
<div class="positionImage">
<img src="../photos/photo2.jpg">
</div>
</body>
</html>

Le résultat est présenté ici

Superposer du texte à une image

Le placement d’objets à l’aide des feuilles de style autorise également la superposition des objets.
Dans ce dernier exemple, nous plaçons au dessus d’une image un texte :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Placement des objets</title>
</head>
<body>
<span style="position:absolute; left: 300px; top: 50px; width:122px; height:50px;">
<img src="../Seance_06/exercices/dragon/anidrag.gif" width="122" height="50"></div>
</span>
<span style="position:absolute; left: 350px; top: 85px; color:royalblue; font-family:Helvetica, sans-serif; font-weight:bold">
Centre National des Arts et Métiers</div>
</span>
</body>
</html>

Le résultat est présenté ici

Exercices de la séance « 7 »

• Exercice 1
• Modifier, en utilisant uniquement des feuilles de style locales,
  l’exercice de la séance 2 (concernant l’ordre du jour d’un cabinet d’avocats crapuleux)
• Exercice 2

Séance 8 - Exercices CSS

Exercice 1 : Utilisation Externe

C’est là qu’apparaît tout l’intérêt des feuilles de style. On décrit le style des pages dans un document (d’extension .css) extérieur aux fichiers HTML.
Le lien se fait par la balise <link> à placer dans l’en-tête du fichier HTML :

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

Ce fichier style1.css contient les lignes suivantes :

body {
background-color:silver;
color:navy
}
h3 { color:green}
em {
background-color:yellow;
font-size:120%;
}

La syntaxe est la même que pour une définition dans le mode global.
Les fichiers HTML qui font référence à cette feuille de style, auront par défaut,

• un fond de page silver (argent),
• un texte par défaut navy (bleu),
• des titres <h3> green (verts),
• et des remarques (balise <em>) sur fond yellow (jaune),
  avec une taille de lettres 120% plus grande à la taille standard (définie par le navigateur)...

Le résultat est présenté ici

Exercice 2 - Les Classes et les Balises DIV

Nous savons comment mettre tous les titres de niveau 3 en vert dans un ensemble de documents, mais on voudrait que dans un certain contexte, ils soient en marron !
Dans la feuille de style (extension .css) nous définissons des classes en faisant suivre les sélecteurs d’un point « . » et du nom de la classe souhaité

par exemple h3.ex

Dans le fichier HTML, il suffira de définir l’attribut class pour la marque correspondante afin que les définitions s’appliquent, dans notre exemple :

<h3 class=ex>

Le fichier style2.css contient les lignes suivantes :

body {
background-color: silver;
color: navy
}
h3 { color: green}
h3.sic {color: maroon}
a.sic {text-decoration: overline}
div.info {padding: 3em}

Le résultat commenté est présenté ici

Exercice 3 - Placement d'objets

À l’aide d’un logiciel de dessin, reproduisez un logo rectangle plein de dimension 150 points par 60...
Utilisez la balise <span> pour placer le logo à environ 200 pixels à gauche et 100 pixels vers le bas.

Le résultat est présenté ici

Éditeurs de feuilles de style

Personnellement j'utilise une ancienne version de Dreamweaver (MX 2004) qui offre offre la possibilité de concevoir des feuilles de style.
Je teste aussi KompoZer, le remplaçant non-officiel de Nvu qui à l'avantage d'être un logiciel libre ; tous les deux ont une interface intuitive et française.

Voici une copie d'écran de « Topstyle » avec l'ouverture de notre fichier « style2.css » !

Séance 9 - consacrée aux cadres (frames en anglais)

Les cadres ainsi que les images mapées rendent la navigation au sein d’un site Web plus facile.

Cette séance est organisée en deux parties.

• La première introduit les balises <frameset>, <frame> et <no-frames> liées à la définition des cadres.
• La seconde partie présente les balises nécessaires à la définition d’images mapées : <map>, <area> ainsi que l’attribut usemap de la balise <img>.

Les Cadres

Une page de cadres définit tout simplement la division du navigateur en plusieurs parties.

Chaque partie, appelée cadre peut être nommée, ce qui s’avère très utile lors de la définition de liens hypertexte par exemple.
La balise <frameset> est utilisée pour définir une page de cadres. Attention, cette balise remplace la balise <body>. Il est donc impossible de rencontrer dans un même document HTML à la fois les balises <body> et <frameset>.

Voici un premier exemple d’utilisation des cadres, la fenêtre du navigateur est dans ce cas divisée en deux parties occupant chacune 50% de la fenêtre.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page de cadres</title>
</head>
<frameset cols="50%,50%">
<frame src="cadreG.htm" name="gauche">
<frame src="cadreD.htm" name="droite">
</frameset>
<noframes>
Votre navigateur ne supporte pas les cadres !!!
</noframes>
</html>

Définition d’une page de cadres ici

La division réalisée est verticale. Nous verrons qu’il est également possible de proposer une division horizontale.

Voici les fichiers cadreG.htm et cadreD.htm :

<body bgcolor="gold" style="color:gray">
<h1>Cadre de gauche</h1>
<p style="text-align:center; font-weight:bold; margin-top:5em">Voici le contenu du cadre de gauche !</p>
</body>

et

<body bgcolor="gray" style="color:gold">
<h1>Cadre de droite</h1>
<p style="text-align:center; font-weight:bold; margin-top:5em">Voici le contenu du cadre de droite !</p>
</body>

La balise <frame> est utilisée pour définir le document HTML à afficher dans chaque cadres introduits par la balise <frameset>.
La balise <noframes> est obligatoire en HTML 4. Elle permet de définir l’affichage à réaliser quand le navigateur utilisé n’est pas compatible avec les pages de cadres.

Les Attributs De La Balise frameset

La balise <frameset> possède deux attributs principaux : cols et rows.

Division verticale

L’attribut cols (déjà utilisé dans l’exemple précédent) introduit une division verticale de la fenêtre.
La valeur de cet attribut est une liste de la largeur souhaitée de chaque cadre. La largeur de chaque cadre peut être défini soit en pixels, soit en pourcentages.
Par exemple, voici une page de cadres contenant trois cadres dont le deuxième possède exactement une largeur double des deux autres :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Division verticale</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="cadreG.htm" name="gauche">
<frame src="cadreC.htm" name="centre">
<frame src="cadreD.htm" name="droite">
</frameset>
<noframes style="background-color:black; color:gold">
Votre navigateur ne supporte pas les frames !!!</noframes>
</html>

autre exemple de page de cadres à division verticale ici

Il est possible de définir la largeur de plusieurs colonnes à l’aide de * ; toutes ces colonnes auront alors la même largeur.
Par exemple :

<frameset cols="*,*">

Voici un dernier exemple, où la colonne 4 a deux fois la largeur des colonnes 1, 2 et 3 :

<title>Plusieurs colonnes</title>
</head>
<frameset cols="*,*,*,2*">
<frame src="cadre1.htm" name="rouge">
<frame src="cadre2.htm" name="vert">
<frame src="cadre3.htm" name="bleu">
<frame src="cadre4.htm" name="gris">
</frameset>
<noframes style="background-color:black; color:gold">Votre navigateur ne supporte pas les frames !!!</noframes>
</html>

Le fait de faire précéder * d’un entier permet d’augmenter proportionnellement la largeur de la colonne concernée.

Dernier exemple de division verticale ici !

Division horizontale

L’attribut rows réalise une division horizontale de la page de cadres. L’utilisation de cet attribut suit les même règles que pour l’attribut cols.

Dans l’exemple suivant, nous définissons une page de cadres introduisant une division horizontale en trois cadres :

<title>Division horizontale</title>
</head>
<frameset rows="25%,*,25%">
<frame src="cadre1.htm" name="hautRouge">
<frame src="cadre2.htm" name="centreVert">
<frame src="cadre3.htm" name="bas_Beuleu">
</frameset>
<noframes style="background-color:black; color:gold">Votre navigateur ne supporte pas les frames !!!</noframes>
</html>

Voir là

Il est également possible de définir les attributs cols et rows pour la même balise <frameset> :

<frameset cols="*,*" rows="25%,*,25%">

Division horizontale et verticale ici

code HTML

<title>Division horizontale et verticale</title>
</head>
<frameset cols="*,*" rows="25%,*,25%">
<frame src="cadre1.htm" name="hautG">
<frame src="cadre2.htm" name="hautD">
<frame src="cadre3.htm" name="centG">
<frame src="cadre4.htm" name="centD">
<frame src="cadreG.htm" name="basG">
<frame src="cadreD.htm" name="basD">
</frameset>

Les bordures de cadres

Il existe des attributs pour décider de la présence (ou non) des bordures ainsi que de leur apparence. Cependant ces attributs sont différents selon le navigateur utilisé.

Remarque 1 !
Le 28 décembre 2007, AOL a annoncé l'arrêt du développement de Netscape Navigator et conseille à ses utilisateurs de rejoindre Mozilla et son navigateur Mozilla Firefox.

Pour obtenir un résultat, il faut utiliser les attributs suivants :

• frameborder : comme pour Internet Explorer cet attribut contrôle l’affichage des bordures 3D, mais les valeurs acceptées sont yes et no. Dans le cas où la valeur choisie est yes (valeur par défaut), Netscape Communicator affichera des bordures 3D. Si frameborder="no", alors les bordures de cadres seront matérialisées par un simple filet.
• border : détermine la largeur des bordures. Ainsi, pour obtenir des cadres sans bordure, il suffit de définir : frameborder="no" border="0".
• bordercolor : grâce à cet attribut, nous pouvons définir la couleur des bordures.
  Il est à noter que chacun de ces attributs – à l’exception de border – peut également être défini au niveau de la balise <frame>.

Dans le cas d’une définition d’un attribut particulier au niveau des deux balises <frameset> et <frame>, c’est la valeur définie au niveau de la balise <frame> qui sera appliquée par le navigateur (voir remarque 2 ci-dessous).
Pour illustrer l’ensemble de ces attributs, voici un exemple ici :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bordures des cadres pour Netscape</title>
</head>
<frameset cols="*,*,*" border="20" bordercolor="maroon">
<frame src="cadreG.htm" name="gauche" bordercolor="slateblue">
<frame src="cadreC.htm" name="centre">
<frame src="cadreD.htm" name="droite">
</frameset>
<noframes>
Votre navigateur ne supporte pas les cadres !!!
</noframes>
</html>

Remarque 2 !
Avec Internet Exploreur 7, l'attribut bordercolor de la balise frame s'impose (une seule couleur "slateblue") comme indiqué ci-dessus, par contre on obtient respectivement les deux couleurs distintes ("maroon" et "slateblue") par bordure avec Mozilla Firefox 5.0

Les Attributs De La Balise frame

Pour chaque cadre, nous pouvons préciser l’apparence que nous souhaitons à l’aide des attributs de la balise <frame>.
Ainsi, il est possible d’autoriser ou non la redimensionnement des cadres, la présence (ou non) d’ascenseurs, les marges en haut et en bas à l’intérieur d’un cadre.

• src : valeur attendue ; l’URL du document à afficher dans le cadre.
• name : nom du cadre. Cet attribut est particulièrement important pour contrôler la destination des liens hypertextes
  (le cadre dans lequel les liens seront affichées, voir le paragraphe gestions des liens).
• noresize : les deux valeurs possibles sont yes (valeur par défaut) ou no. Si la valeur est no, l’utilisateur n’a pas la possibilité de modifier la taille du cadre.
• scrolling : les trois valeurs yes, no et auto sont autorisées. Par défaut la valeur est égale à auto. Dans ce cas, les ascenseurs sont affichés automatiquement s’ils sont nécessaires.
• marginheight : définit (en pixels) l’espace libre en haut et en bas de cadre.
• marginwidth : précise la valeur en pixels des marges à gauche et à droite.
  Précisons que nous pouvons demander l’utilisation d’une feuille de style à l’aide des attributs class et style.

Hiérarchie De Cadres

Il est parfois utile de définir des cadres dans des cadres ce qui est parfaitement pris en charge par les navigateurs.
Dans ce cas, nous imbriquons des balises <frameset> dans des balises <frames>. Nous obtenons ainsi une hiérarchie de cadre.

Par exemple ici, nous allons diviser horizontalement la fenêtre en trois cadres. Le cadre central sera alors divisé verticalement en deux cadres.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hi&eacute;rarchie de cadres</title>
</head>
<frameset rows="25%,*,25%">
  <frame src="cadre1.htm" name="haut">
    <frameset cols="50%,50%">
      <frame src="cadre2.htm" name="centreG">
      <frame src="cadre3.htm" name="centreD">
    </frameset>
  <frame src="cadre4.htm" name="bas">
</frameset>
<noframes style="background-color:black; color:gold">
Votre navigateur ne supporte pas les frames !!!</noframes>
</html>

Gestion Des Liens : Les Cadres Cibles

Quand nous définissons un document HTML contenant des liens hypertexte, le comportement par défaut du navigateur est d’ouvrir le lien désigné par l’internaute dans la même fenêtre.

Nous allons voir qu’avec les cadres, nous pouvons préciser exactement où nous souhaitons ouvrir les liens.
Le contrôle de la fenêtre (ou du cadre) de destination des liens hypertextes est pris en charge par l’attribut target de la balise <a>.

Ainsi quand nous définissons un lien hypertexte sans préciser la valeur de l’attribut target, ce lien sera ouvert dans son cadre d’origine, ou dans sa fenêtre si aucun cadre n’est défini.

Voir exemple ici !

Si nous souhaitons ouvrir un lien dans un autre cadre, il nous suffit de préciser le nom de ce cadre comme valeur de l’attribut target du lien.
Le nom du cadre aura bien sûr été défini au niveau de l’attribut name de la balise <frame>.

Dans l’exemple ci-dessous, nous définissons deux cadres verticaux et 7 liens dans la page associée au premier cadre.
Pour les 6 premiers liens, nous ne précisons pas la valeur de l’attribut target et donc il s’ouvrira dans ce cadre.
Par contre, pour le dernier lien (nommé Lien), nous fixons la valeur de cet attribut égale au nom du second cadre ;

<a href="cible.htm" target="_parent">

ce lien s’ouvrira donc dans le cadre de droite.

Voici la définition de la page de cadre :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page de cadres</title>
</head>
<frameset cols="50%,50%">
<frame src="liens.htm" name="gauche">
<frame src="cible.htm" name="droite">
</frameset>
<noframes>
Votre navigateur ne supporte pas les cadres !!!
</noframes>
</html>

Le document contenant les liens est défini par :

<title>Cadre de gauche</title>
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="gold">
<h1>Le cadre de gauche</h1>
<h3>Gestion Des Liens : Les Cadres Cibles</h3>
<h2>S&eacute;ance 9 - consacr&eacute;e aux cadres</h2>
<table width="70%" border="0">
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#lesCadres">Les Cadres</a></td></tr>
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#vertical">Division verticale</a></td></tr>
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#horizontal">Division horizontale</a></td></tr>
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#bordureFrame">Les bordures de cadres</a></td></tr>
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#baliseFrame">Attributs de la balise Frame</a></td></tr>
<tr><td><a href="http://www.eric-page.info/Cnam-Web/Accueil.htm#hierarchie">Hiérarchie de Cadres</a></td></tr>
<tr><td><a href="cible.htm" target="_parent">Lien</a></td></tr>
</table>
</body>

Enfin, voici le code source du cadre de droite :

<title>Cadre de droite</title>
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="gold">
<h1>Le cadre de droite</h1>
<h3>Gestion Des Liens : Les Cadres Cibles</h3>
<h4>Les Cadres</h4>
<p>Une page de cadres définit tout simplement la division du navigateur en plusieurs parties.</p>
<p id="frames">Chaque partie, appelée cadre peut être nommée,
ce qui s’avère très utile lors de la définition de liens hypertexte par exemple.<br>
La balise <strong>&lt;frameset&gt;</strong> est utilisée pour définir une page de cadres.
Attention, cette balise remplace la balise <strong>&lt;body&gt;</strong>.
Il est donc impossible de rencontrer dans un même document HTML à la fois les balises &lt;body&gt; et &lt;frameset&gt;.</p>
<p>Voici un dernier exemple d’utilisation des cadres,
la fenêtre du navigateur est ici divisée en deux parties occupant chacune 50% de la fenêtre<br>
Vous trouvez dans le cadre de gauche les liens de chaque chapitre de la s&eacute;ance 9 - consacr&eacute;e aux cadres ;-) </p>
</body>
</html>

Conclusion, la « Page de cadres » ainsi construite nous sert, dans le cadre de gauche, de « Menu ».
Ce menu est doté d'un système de navigation « interne », utilisant les « Ancres nommées » de la page.

Exemple de la séance 9 adapté en menu ici

Noms de cibles réservés

Quatre noms de cibles sont réservés au niveau de l’attribut target :

1. _blank : le document lié sera ouvert dans une nouvelle fenêtre.
2. _self : c’est la valeur par défaut de l’attribut target de la balise <a>, le document lié est ouvert dans le cadre courant (ou la fenêtre si aucun cadre n’existe).
3. _top : le document lié remplace tous les cadres définis.
4. _parent : le document lié s’affiche dans la page de cadres qui a défini le cadre courant.
   
   Si le cadre source est défini au sommet de la hiérarchie, cette valeur est identique à _top.

Exercice 1 :

Enoncé :

• Collectez cinq images sur Internet de taille correspondant à une résolution d'écran 1024 x 768
• Créez une page vignettes.htm qui affiche ces images en plus petit (hauteur des images - height = "50"), dans le sens horizontal d'un tableau composé d'une ligne et de cinq colonnes, de plus créer sur chaque image un lien sur la page html en fond noir contenant la véritable image.
• Créez une autre page frame.htm qui va contenir deux cadres horizontaux
  • le cadre du haut sera basé sur la page vignettes.htm précédemment créée ; et
  • le cadre du bas affichera l’image sélectionnée en grandeur réelle ;

Utilisation de l'attribut « _top » sur le lien-retour du « haut de page » !

<a href="../../../Accueil.htm" style="text-decoration:none; color:gold" target="_top" >

Cadres d'image en ligne

Exercice 1bis :

Cadres d'image en colonne

Exercice 2 :

Réaliser un ensemble de cadres A,B,C,D.

Le cadre A est en haut de la page. Le cadre B à gauche et C est à droite. Enfin, le cadre D est en bas de page.

On commence par le premier jeu cadre de 3 lignes :

<frameset rows="40%,*,25%">

lequel contient le cadre A

<frame src="cadreHaut.htm" name="haut" scrolling="no" noresize>

On poursuit avec le deuxième jeu de cadre de 2 colonnes :

<frameset cols="50%,50%">

celui-ci contient les cadres B et C

<frame src="cadreCGche.htm" name="centreG">
<frame src="cadreCDroit.htm" name="centreD">

enfin, on termine avec le cadre D juste avant la fermeture du premier jeu cadre :

  </frameset>
  <frame src="cadreBas.htm" name="bas">
</frameset>

Résultat ici |

Séance 10 - Les images mapées

Définition d’une image mapée

La carte utilisée est définie dans le même fichier HTML, on précise son nom précédé du symbole #.

<img src="images/Img-Map.png" width="374" height="75" border="0" usemap="#Map">

Chaque région qui compose la carte est définie entre les balises <map> et </map>.
L’attribut name associée à la balise <map> définit le nom de la carte.

<map name="Map">
<area shape="rect" coords="0,0,188,75" href="http://validator.w3.org/?" title="Service de validation de balisage W3C">
<area shape="rect" coords="189,0,374,75" href="http://idf.pleiad.net/" title="Bienvenue sur Plei@d Ile De France">
</map>

Code complet :

<body>
<h1>Définition d'une image mapée</h1>
<p>Cliquez sur la partie :</p>
<ul>
<li>gauche de l'image pour visiter le W3C</li>
<li>droite de l'image pour visiter Plei@d IDF</li>
</ul>
<!-- l'image mapée -->
<img src="images/Img-Map.png" width="374" height="75" border="0" usemap="#Map">
<!-- la carte -->
<map name="Map">
<area shape="rect" coords="0,0,188,75"
  href="http://validator.w3.org/?"
  title="Service de validation de balisage W3C">
<area shape="rect" coords="189,0,374,75"
  href="http://idf.pleiad.net/"
  title="Bienvenue sur Plei@d Ile De France">
</map>
</body>

Résultat ici

Utilisation conjointe des cadres et images mapées

Résultat ici | Exemple météo france

Séance 11 - Formulaire

Objets de formulaire de types :

1. Ligne de texte
2. Boutons d’option (ou boutons radio)
3. Cases à cocher
4. Sélection de fichier
5. Mot de passe
6. Bouton personnalisé
7. Bouton de commande
8. Zone de saisie
9. Menu déroulant
10. Liste à choix multiple

page contenant les 10 objets ici | mise en page balises <table> ou <pre> ici

exemple de jeux de cadre « France métropolitaine »

Suite à venir...

Haut de page | Page suivante