Internet, le Web etc… (II)

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

E-mail

Accueil

Mes photos

Mes amis

Mon CV

Vacances

E-mail

Accueil

Mes photos

Mes amis

Mon CV

Vacances

E-mail

Accueil

Mes photos

Mes amis

Mon CV

Vacances

E-mail

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"><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"><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"></script>

</head>

Les logiciels et leurs limites

DreamWeaver 2,3,4 et MX

FrontPage Express et 2000

HotDogPageWiz

Internet, le Web etc… (II)

Documents

Transcript of Internet, le Web etc… (II)