Les frames Différencier : Page de frame : définir les différentes zones de l'écran Pages de contenu : afficher à l'intérieur de la coquille vide. <frameset> : frames <frame> : contenu <html> <head> <title></title> </head> <frameset> <frame> <frame> </frameset> </html>
Exemple de frame <html> <head> <title>Titre ds la barre de navigation</title> </head> <frameset cols="30%,70%"> <frame src="autrepage.html" name="frame1”/> <frame src="index.html" name="frame2”/> </frameset> </html> Pélissier C.
Attributs de frames <frameset rows="x%,y%,z%"> <frameset cols="x%,y%,*"> Barre de défilement : scrolling=« noIyes » Espace bord de la frame et le contenu : marginwidth=“55“ marginheight=“55“ Localisation des liens : <a href="page.htm" target="gauche"> Valeur de target : _self : Affiche la cible dans le même cadre que le lien _blank : Affiche la cible dans une nouvelle fenêtre _top : Affiche la cible dans la fenêtre entière du navigateur
Balises iframe et noframe <iframe> : introduire une page au sein de votre document <iframe src="http://www.google.fr" align="left I right I center" > <iframe src="http://www.iutbeziers.univ-montp2.fr/" height="600" width="800"> <frameset cols="30%,*"> <frame name="droit" src="toto.html"/> <frame name="gauche" src="tutu.html"/> <noframe>pas compatible avec les frames</noframe> </frameset>
Formulaires (1/4) <html> <head> c’est un formulaire </head> <body> <p> salut </p> <form action="mailto:pelissier@voila.fr" method="post" entype="text/plain »> <p align="left">Veuillez entrer votre mot de passe : </p> <input type="password" name="pass" size="9 »/> </br> <p>Votre date de naissance : </p> <input type="date" name="Naissance" size="8" maxlenght="8" value="jj/mm/aa »/> </br> </form> <p> au revoir et a bientôt </p> </body> </html> salut Veuillez entrer votre mot de passe : Votre date de naissance : au revoir et a bientot jj/mm/aa
Formulaires (2/4) <textarea name="Comment" cols="30" rows="10"> Entrez ici votre commentaire </textarea > <p align="left">Veuillez indiquer votre état civil : </p> </br> <input type="radio" name="EC" value="Monsieur" checked/> Monsieur</br> <input type="radio" name="EC" value="Madame"/>Madame </br> <input type="radio" name="EC" value="Mademoiselle"/>Mademoiselle</br> Veuillez indiquer votre état civil : Monsieur Madame Mademoiselle
Formulaires (3/4) <select name="destination" id="destination"> <option value="Paris"> Paris </option> <option value="Marseille"> Marseille </option> <option value="Lyon"> Lyon </option> </select> <select name="destination" id="destination"> <optgroup label=« France »> <option value="Paris"> Paris </option> <option value="Marseille"> Marseille </option> <option value="Lyon"> Lyon </option> </optgroup> </select> <input> type=«checkbox»
Formulaires (4/4) <legend> Situation actuelle </legend> <input> type=«file» value=«parcourir» type=«submit» value=«envoyer» type=«image» src=«envoyer.jpg» type =«reset» value=«effacer» <fieldset> <legend> Situation actuelle </legend> <p align="left"><b>Veuillez indiquer votre situation familiale : </b><br> <ul><input type="Radio" name="EC1" Value="Célibataire"> Célibataire<br> <input type="Radio" name="EC1" Value="Marié" checked> Marié <br></ul> </fieldset>
Zones réactives liste.html liste.html <img src="guitariste.bmp" width=«1000» height=«1200» usemap="#toto"/> <map name="toto"> <area shape="circle" border="10" coords="500,100,100" href="liste.html"> </area> </map> Valeur de shape : « rect » pour rectangle : x1,y1,x2,y2 « circle » pour cercle : x,y,r « poly » pour polygone : x1,y1,x2,y2 ... xn,yn à partir du haut et de la gauche TD 5