1 / 27

Internet, le Web etc… (II)

Internet, le Web etc… (II). Benjamin I. Levine Novembre 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). Balise meta et le référencement.

whitney-sheppard
Download Presentation

Internet, le Web etc… (II)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet, le Web etc… (II) Benjamin I. LevineNovembre 2002

  2. 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…

  3. Internet, le Web etc…(II) Balise meta et le référencement La définition des couleurs Les cadres et leurs utilisations Construction d’un siteavec des cadres Benjamin I. LevineNovembre 2002

  4. Les Balises Meta et le référencementLe codage des couleurs

  5. Balise META <head> </head> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8559-1"  /> ftp://ftp.isi.edu/in-notes/iana/assignements/character-sets <metaname="generator"content="Sausage Software HotDog PageWiz"> <metaname="resource-type«  content="document"> <metahttp-equiv="author"content="Benjamin Levine"> <metahttp-equiv="description"content="Cette page est une démonstration de l'utilisation de cadres"> <metahttp-equiv="keywords"content="cadres, UL6, toulouse, licence, physique, application, HTML"> <metahttp-equiv="distribution"content="Global">

  6. Codage des couleurs Rouge #ff0000 Valeur RGB Base 16 (hexadécimal) :0123456789ABCDEF #FFFFFF Bleu Vert #00ff00 #0000ff

  7. Utiliser des cadres

  8. Questions à se poser : • Quelle structure/disposition adopter ? • Quel cadre doit gérer la navigation ? • Dans quelle fenêtre les pages cibles doivent-elles s’afficher ? • Et les navigateurs anciens, peuvent-il afficher les cadres ?

  9. Quelle structure/disposition adopter ? UL6 Accueil Mes photos Mes amis Mon CV Vacances E-mail Accueil Mes photos Mes amis Mon CV Vacances E-mail UL6 Accueil Mes photos Mes amis Mon CV Vacances E-mail UL6 Accueil Mes photos Mes amis Mon CV Vacances E-mail

  10. Définition de la structure Fichier2.htm Fichier1.htm Fichier3.htm Index.htm

  11. Exemple de code HTML pour un cadre <HTML> <head> <title> Exemple de page avec des cadres </title> </head> <framesetcols="20%,*" > <framename="liens"src="bandogauche.htm"> </frame> <framesetrows ="20%,*" > <framename="bandohaut"src="bandohaut.htm"></frame> <framename="principal"src="frhome.htm"> </frame> </frameset> </frameset> <body bgcolor="#ff66cc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff00ff"> <h1align="center">&nbsp;</h1> <h1align="center">&nbsp;</h1> <h1align="center"><fontcolor="#009900">D&eacute;sol&eacute; 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

  12. Si le navigateur ne gère pas les cadres

  13. Les Liens

  14. L’attribut target Un lien peut renvoyer vers une page externe.Il y a plusieurs façons de l’afficher. <ahref="www.google.fr"target="______"> GOOGLE </a> target= • "_parent" • "_blank" • "_top" • "nom_de_cadre"

  15. Construire un site

  16. Structure du fichier index.htm bandohaut 20% bandohaut.htm Bandogauche Principal 20% frhome.htm Bandogauche.htm

  17. Contenu du fichier index.htm <HTML> <head> <title> Exemple de page avec des cadres </title> </head> <framesetcols="20%,*" > <framename="liens"src="bandogauche.htm"> </frame> <framesetrows ="20%,*" > <framename="bandohaut"src="bandohaut.htm"></frame> <framename="principal"src="frhome.htm"> </frame> </frameset> </frameset> <body bgcolor="#ff66cc" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff00ff"> <h1align="center">&nbsp;</h1> <h1align="center">&nbsp;</h1> <h1align="center"><fontcolor="#009900">D&eacute;sol&eacute; 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

  18. Carte du site bandogauche.htm Accueilfrhome.htm Mes Photosphoto.htm Mes amis Mon CV Mes Vacances E-Mail Target="principal" Les liens pointerons tous vers le cadre principalSeul un fichier : bandogauche.html contient des liens

  19. bandogauche.htm

  20. bandohaut.htm

  21. photos.htm

  22. Utilisation de Tableaux Mise en page Les cellules peuvent contenir des gifs transparent Balises

  23. Contenu du fichier photos.htm <body background="webimages/bleu1.jpg"> <table align="center" border="0"> <tr> <td> <imgalt="dsc00421.jpg - 31438 bytes" src="webimages/dsc00421.jpg" width=500 border=0> </td></tr> <tr> <td> <p>&nbsp;</p> <p>&nbsp;</p> </td></tr> <tr> <td><imgalt="Dsc00418.jpg - 21134 Bytes" src="WebImages/Dsc00418.jpg" width=500 border=0></td></tr> <tr> <td> <p>&nbsp;</p> <p>&nbsp;</p> </td></tr> <tr> <td> <imgalt="Dsc00422.jpg - 21430 Bytes" src="WebImages/Dsc00422.jpg" width=500 border=0> </td></tr> </table> </body>

  24. Site Complet

  25. Précautions à prendre avec les cadres • Pour un petit site, ils sont un peu lourds • Les sites composés de cadres sont 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 liens • vers un jeux de cadre lorsqu’on relève une URL

  26. Javascript Bonus </head> <scriptlanguage="Javascript"> <!-- window.defaultStatus="Bienvenue sur notre site Web!"; // --> </script> </head>

  27. Les logiciels et leurs limites • HotDogPageWiz • FrontPage Express et 2000 • DreamWeaver 2,3,4 et MX

More Related