Sommaire

l'Internet, le Web et la Grille

© http://www.med.univ-rennes1.fr/~poulique/cours/html/menu_frame.html


l'intérêt de l'Internet et du Web


  • Réseau de communication mondial
  • Interconnection de réseaux
  • accès à une masse gigantesque d'informations distantes
  • chaque individu peut y mettre les informations qu'il désire
  • Succès du Web
    • Accès ergonomique et facile à une masse de données colossale et variée
IMAGE imgs/mcours02.gif



Les données sur le Web




Les serveurs Web

Qu'est ce qu'un serveur web ?


Le réseau Internet de Nancy 2



Service Web

Accès au Web

            type:serveur:port/chemin_d'acces/fichier#etiquette?parametres



Protocole HTTP


Protocole HTTP
			http://192.67.78.90 ou http://www.abc.fr



World Wide Web


Le langage HTML


HTML


HTML


HTML


HTML


HTML


HTML


HTML


HTML


HTML


HTML

Le code :
<OL> Balise de début de liste
<LI> élément 1 de la liste
<LI> élément 2 de la liste
<LI> élément 3 de la liste
</OL>Balise de fin de liste
Donne comme résultat
  1. élément 1 de la liste
  2. élément 2 de la liste
  3. élément 3 de la liste






Image et Son
  • Quels formats d'image utiliser ?

  • Image et son


    Image et son


    Image et son


    Le texte peut être placé au milieu de l'image
    <IMG SRC="pic.gif" ALIGN="MIDDLE"> comme ceci 
    Le texte peut être placé au milieu de l'image
    comme ceci 
    Le texte peut être placé au bas de l'image
    <IMG SRC="pic.gif" ALIGN="BOTTOM"> comme ceci
    Le texte peut être placé au bas de l'image
    comme ceci
    Une image peut être placée au milieu de la page par
    <CENTER><IMG SRC="pic.gif"></CENTER>
    <IMG SRC="pic.gif" ALIGN="RIGHT">
    Une image peut être placée à droite de la page comme ceci. 
    Une image peut être placée à droite de la page comme ceci. 
    <IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="20">
    Une image peut être placée à droite du texte comme ceci. Cette fois-ci on choisit de créer un espace (calculé en pixels) entre le texte et l'image avec HSPACE (HSPACE veut dire Horizontal Space, il existe aussi VSPACE pour Vertical Space). 

    Une image peut être placée à droite du texte comme ceci. Cette fois-ci, on choisit l'espace qu'on veut avec HSPACE. 
    <IMG SRC="pic.gif" ALIGN="LEFT" HSPACE="10">
    Une image peut être mise à gauche du texte comme ceci.
    Une image peut être mise à gauche du texte comme ceci. 
    Une autre astuce consiste à jouer sur la taille d'une image. Pour agrandir ou réduire une image , vous pouvez utiliser les instructions <WIDTH="valeur"> et <HEIGHT="valeur">. comme ici <IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="40" WIDTH="80" HEIGHT="80">



    Image et son


    Image et son


    Autres documents


    Insertion d'hyperliens


    Insertion d'hyperliens
         Ceci est un lien vers le serveur ASI

    Insertion d'hyperliens
          Ces deux liens sont des liens vers des serveurs distants
     
    Ce lien codé en "dur" par rapport à la racine (symbolisée par le "/" de départ du lien) implique que ce fichier ne pourra jamais changer de position dans l'arborescence. C'est un lien local


    Insertion d'hyperliens


    Insertion d'hyperliens
         <A HREF="demo.htm"><IMG SRC="demo.gif"></A>

    Les ancres
                <A NAME="nom">
    Les ancres
         </HTML>

    Les tableaux

    Les tableaux

    Les tableaux

    Les tableaux
    <TABLE BORDER="6" CELLSPACING="5" CELLPADDING="8" WIDTH="80%">
    <CAPTION> Titre du tableau </CAPTION>
    <TR><TD> première cellule </TD><TD> deuxième cellule </TD></TR>
    <TR><TH> première cellule </TH><TH> deuxième cellule </TH></TR>
    <TR><TD ALIGN="CENTER"> première cellule </TD><TD ALIGN="RIGHT"> deuxième cellule </TD></TR>
    </TABLE>
    Titre du tableau 
    première cellule  deuxième cellule 
    première cellule  deuxième cellule 
    première cellule  deuxième cellule 

    Les tableaux
  • Exemple de tableau un peu plus complexe
  •  
    <CENTER>
    <TABLE BORDER="2" CELLSPACING="20">
    <TR>
    <TH><A HREF="pic.gif"><IMG BORDER="0" SRC="pic.gif" ALT="Voir l'image"></A></TH>
    <TH><A HREF="http://www.babel.net"><IMG BORDER="0" SRC="pic.gif" ALT="Serveur Babel"></TH>
    </TR>
    <TR>
    <TH> ligne 1 même cellule <BR> ligne 2 même cellule <BR> ligne 3 même cellule </TH>
    <TH><A HREF="http://www.babel.net">Lien vers le serveur BABEL</A> </TH>
    </TR>
    </TABLE>
    </CENTER>
    Voir l'image Serveur Babel
    ligne 1 même cellule 
    ligne 2 même cellule 
    ligne 3 même cellule 
    Lien vers le serveur BABEL

    Les tableaux

    Les formulaires

    Les formulaires

    Les formulaires

    Les formulaires

    Les formulaires
      Résultat :
    De quel continent êtes-vous ? 

    Les formulaires

    Les formulaires

    Les formulaires

    Les formulaires

    Les formulaires

    Les formulaires

    Couleurs d'écran

    Couleurs d'écran

    Couleurs d'écran



    Quelques astuces
    Quelques exemples :
    Quelques astuces

    Quelques astuces

    Les frames

    Les frames
    <HTML>
        <HEAD>
            <TITLE>Titre du document
            </TITLE>
        </HEAD>
        <FRAMESET ROWS="20%,80%">
            <FRAME SRC="fenetre1.htm">
            <FRAME SRC="fenetre2.htm" name="window2">
        </FRAMESET>
    </HTML>
  • Division en deux cadres horizontaux dont l'un occupe 20% du document et l'autre 80%. Chaque fenêtre contient son propre document HTML (les fichiers fenetre1.htm et fenetre2.htm)
  • Nous avons donné un nom, window2, à la seconde fenêtre qui servira à nommer ce cadre dans un lien TARGET="window2"décrit plus bas

  • Les frames

    Les frames

    Les frames

    Les frames

    Les frames

    Les frames

    Les frames
  • Exemple :

  • Les frames

    Les frames
  • Largeur de la marge : L'attribut est <FRAME MARGINWIDTH="Valeur">
  • <HTML>
    <HEAD>
    <TITLE>Titre du document
    </TITLE>
    </HEAD>
    <FRAMESET ROWS="30%,70%">
        <FRAME SRC="width1.htm" MARGINWIDTH="25">
        <FRAMESET COLS="35%,65%">
           <FRAME SRC="width2.htm" MARGINWIDTH="80">
           <FRAME SRC="width3.htm" MARGINWIDTH="150">
        </FRAMESET>
    </FRAMESET>
    </HTML>
    Voici ce qu'on obtient
    Les frames
  • Hauteur de la marge : La commande est<FRAME MARGINHEIGTH="Valeur">
  • <HTML>
    <HEAD>
    <TITLE>Titre du document
    </TITLE>
    </HEAD>
    <FRAMESET ROWS="30%,70%">
        <FRAME SRC="height1.htm" MARGINHEIGHT="100">
        <FRAMESET COLS="35%,65%">
           <FRAME SRC="height2.htm" MARGINHEIGHT="20">
           <FRAME SRC="height3.htm" MARGINHEIGHT="75">
        </FRAMESET>
    </FRAMESET>
    </HTML>
    Voici ce qu'onobtient

    La commande<FRAME MARGINHEIGHT="Valeur">va laisser un espace en haut et en bas du contenu de la fenêtre


    Les frames
    <A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre"> Message </A>

    Les frames

    Les frames

    Les images animées