Post on 03-Jan-2016
description
Internet, le Web etc… (II)
Benjamin I. LevineNovembre 2002
Ce qui aurait du être fait…
Réfléchir à la disposition de votre page
Réunir des Images (CD, disque ou adresses internets)
S’inscrire sur free ou ifrance ou…
Internet, le Web etc…(II)
Benjamin I. LevineNovembre 2002
Balise meta et le référencement
La définition des couleurs
Les cadres et leurs utilisations
Construction d’un siteavec des cadres
Les Balises Meta et le référencement
Le codage des couleurs
Balise META
<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1" />
ftp://ftp.isi.edu/in-notes/iana/assignements/character-sets
<head> </head>
<meta name="generator" content="Sausage Software HotDog PageWiz">
<meta name="resource-type« content="document">
<meta http-equiv="author" content="Benjamin Levine">
<meta http-equiv="description" content="Cette page est une démonstration de l'utilisation de cadres">
<meta http-equiv="keywords" content="cadres, UL6, toulouse, licence, physique, application, HTML">
<meta http-equiv="distribution" content="Global">
Codage des couleurs
Rouge
Vert Bleu
Valeur RGB#ff0000
#0000ff#00ff00
#FFFFFFBase 16 (hexadécimal) :
0123456789ABCDEF
Utiliser des cadres
Questions à se poser :
Quelle structure/disposition adopter ?
Quel cadre doit gérer la navigation ?
Dans quelle fenêtre les pages ciblesdoivent-elles s’afficher ?
Et les navigateurs anciens, peuvent-il afficher les cadres ?
Quelle structure/disposition adopter ?
Accueil
Mes photos
Mes amis
Mon CV
Vacances
Accueil
Mes photos
Mes amis
Mon CV
Vacances
Accueil
Mes photos
Mes amis
Mon CV
Vacances
Accueil
Mes photos
Mes amis
Mon CV
Vacances
Définition de la structure
Fichier2.htm
Index.htm
Fichier1.htmFichier3.htm
Exemple de code HTML pour un cadre<HTML>
<head>
<title> Exemple de page avec des cadres </title>
</head>
<frameset cols="20%,*" >
<frame name="liens" src="bandogauche.htm"> </frame>
<frameset rows ="20%,*" >
<frame name="bandohaut" src="bandohaut.htm"></frame>
<frame name="principal" src="frhome.htm"> </frame>
</frameset>
</frameset>
<body bgcolor="#ff66cc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff00ff">
<h1 align="center"> </h1>
<h1 align="center"> </h1>
<h1 align="center"><font color="#009900">Désolé mais il n'existe pas de version de ce site sans cadres... </font></h1>
</body></HTML>
(contenu du fichier index.htm)
Zone de définitiondes cadres
Si le navigateur ne gère pas les cadres
Les Liens
L’attribut target
Un lien peut renvoyer vers une page externe.Il y a plusieurs façons de l’afficher.
"_parent" "_blank" "_top" "nom_de_cadre"
target=
<a href="www.google.fr" target="______"> GOOGLE </a>
Construire un site
Structure du fichier index.htm
Principal
bandohaut
Bandogauche
frhome.htm
bandohaut.htm
Bandogauche.htm
20%
20%
Contenu du fichier index.htm<HTML>
<head>
<title> Exemple de page avec des cadres </title>
</head>
<frameset cols="20%,*" >
<frame name="liens" src="bandogauche.htm"> </frame>
<frameset rows ="20%,*" >
<frame name="bandohaut" src="bandohaut.htm"></frame>
<frame name="principal" src="frhome.htm"> </frame>
</frameset>
</frameset>
<body bgcolor="#ff66cc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff00ff">
<h1 align="center"> </h1>
<h1 align="center"> </h1>
<h1 align="center"><font color="#009900">Désolé mais il n'existe pas de version de ce site sans cadres... </font></h1>
</body></HTML>
(contenu du fichier index.htm)
Zone de définitiondes cadres
Carte du site
Accueilfrhome.htm
Mes Photosphoto.htm
Mes amis Mon CV Mes Vacances E-Mail
Les liens pointerons tous vers le cadre principalSeul un fichier : bandogauche.html contient des liens
Target="principal"
bandogauche.htm
bandogauche.htm
bandohaut.htm
photos.htm
Utilisation de Tableaux
Mise en page
Les cellules peuvent contenir des gifs transparent
Balises
Contenu du fichier photos.htm
<body background="webimages/bleu1.jpg">
<table align="center" border="0">
<tr> <td> <img alt="dsc00421.jpg - 31438 bytes" src="webimages/dsc00421.jpg" width=500 border=0>
</td></tr>
<tr> <td> <p> </p>
<p> </p>
</td></tr>
<tr> <td><img alt="Dsc00418.jpg - 21134 Bytes" src="WebImages/Dsc00418.jpg" width=500 border=0></td></tr>
<tr> <td> <p> </p>
<p> </p> </td></tr>
<tr> <td> <img alt="Dsc00422.jpg - 21430 Bytes" src="WebImages/Dsc00422.jpg" width=500 border=0>
</td></tr>
</table>
</body>
Site Complet
Précautions à prendre avec les cadres
Pour un petit site, ils sont un peu lourds
Les sites composés de cadressont plus long à charger
En cas de lien externe il faut penserà ouvrir une nouvelle fenêtre car il y a risque de confusion
Il faut faire attention à établir des liensvers un jeux de cadre lorsqu’on relèveune URL
Javascript Bonus
</head>
<script language="Javascript"><!--window.defaultStatus="Bienvenue sur notre site Web!";// --></script>
</head>
Les logiciels et leurs limites
DreamWeaver 2,3,4 et MX
FrontPage Express et 2000
HotDogPageWiz