1 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception.

Présentation au sujet: "1 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception."— Transcription de la présentation:

1 1 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception d'un site web en langage HTML

2 2 L'entête Le corps Le document HTML Le titre de la page web Les balises HTML sont de la forme: … …… Une balise peut contenir des attributs (propriétés), avec une valeur assignée: L'entête est téléchargée (et exécutée) en premier: les définitions, code JavaScript Le corps contient tous les objets HTML (texte, images…)

3 3 le titre de la page web 2 attributs name et content La barre de titre du navigateur affichera ce titre, Ce titre apparaîtra également dans les "bookmark", et l'historique des pages visitées. Le titre est également analysé par les moteurs de recherche. Les META sont vus par les moteurs de recherche, 2 types: une description et des mots clés. Les mots clés sont séparés par une virgule. + Valeurs de content: Le contenu des valeurs de name Valeurs de name: Description Keywords Exercice: rechercher les différentes valeurs possibles pour l'attribut name de la balise meta, puis le contenu approprié de l'attribut content. Par ex.: expiration d'un document web...

4 4 Attributs de Marges (attention MIE spécifique, Netscape spécifique) 4 attributs topmargin, bottommargin, leftmargin et rightmargin, ou marginwidth et marginheight Le corps du document (BODY) sera décalé par rapport au haut et coté gauche, et sera limité par rapport au bas et coté droit de la fenêtre du navigateur. Valeur des 4 attributs en Pixel, ex.: topmargin="100" Définition d'une couleur de fond de page #rrggbb: Codage des couleurs en hexadécimal en proportion de rouge (rr), vert (gg) et bleu (bb), Ou en citant une couleur (red, green,…) Ou en utilisant la fonction: rgb(rrr,ggg,bbb) Avec rrr, ggg, bbb  [0, 255]

5 5 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Paragraphe Texte et Caractères Listes Etre présent sur Internet: Conception d'un site web en langage HTML

6 6 1 attribut align Left right center justify Paragraphe Un nouveau Paragraphe impose un saut de ligne. Enfin la justification totale du texte (tel dans WORD) est possible. Ne peut contenir que du texte! Sub-division 1 attribut align Left right center justify Une Sub-division div peut contenir tout code HTML (tableau, image etc…). Le bloc div entraîne un retour à la ligne suivante. Cet objet peut être assimilé à un "calque". Les calques peuvent être positionnés de manière absolue dans la fenêtre du navigateur, peuvent se superposer, bouger, le contenu peut être modifié dynamiquement …. Ces objets permettent une mise en page et un design "à la carte". Un chapitre leurs est consacré. Probablement l'objet le plus puissant de l'HTML. Cet objet n'a d'autres fonctions que d'appliquer un STYLE à du texte. Si le style de toutes balises peut être redéfini, un style par défaut est tout de même appliqué si le navigateur ne digère pas les styles. span n'a pas de style par défaut! Voir les chapitres Calques et Feuilles de Styles. Span Saut de ligne

7 7 item 1 item 2 item 1 item 2 Le titre Mise en forme du texte 2 attributs type et start (TYPE=A) - lettres en capital : A, B, C... (TYPE=a) - lettres minuscules : a, b, c... (TYPE=I) - Chiffres romains : I, II, III... (TYPE=i) - Chiffres romains minuscules : i, ii, iii... (TYPE=1) - nombres (par défaut) : 1, 2, 3... AaIi1AaIi1 Eléments de liste (Liste Item) Ordered List Valeur initiale (1, 2, 3 …) Unordered List disc circle square 1 attribut type Les Listes : Les Titres : x, niveau de titre de 1 à 7 Formatage du texte : Gras, Italique, souligné

8 8 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception d'un site web en langage HTML

9 9 texte représentant le lien texte du lien 2 attributs au choix: href ou name Cas de l'attribut href Destination http://... Lien vers site www, une adresse URL. ftp://... Lien vers un serveur ftp. news://... Lien vers un serveur de news. telnet://… Ouverture d'une session telnet. mailto:… Envoi d'un e-mail (pas de // ici !). _blank ouverture dans une nouvelle fenêtre du navigateur. _self ouverture dans la fenêtre en cours. Cas particulier des Frames: nom_frame ouverture dans un frame nommé nom_frame. _parent ouverture dans le frame "parent", celui qui contient le frame en cours. _top ouverture au-dessus de tous les frames. Annulation des frames. Cible Apparition d'un bandeau lorsqu'on pointe le lien avec la souris (MIE) Valeur = une lettre Le lien est "pointé" depuis le clavier: ALT +. Cas de l'attribut name Déclaration d'un repère dans un document HTML, afin d'y faire référence à partir d'un lien:. ! Danger

10 10 page0.html page1.html page2.html fond.gif page3.html Arborescence du site:Répertoire & Contenu Page courante affichée par le navigateur level0/page0.html Liens HREF possibles:

11 11 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Images "Image map" Balise object Etre présent sur Internet: Conception d'un site web en langage HTML

12 12 L'attribut src est le seul obligatoire (src  source). Valeur des attributs width et height en Pixel, ex.: width="300" height="200" L'adresse de l'image(même commentaires que pour HREF). Valeurs de src: "image/fichier.jpg" (URL Relative), "http://www.url.fr/fichier.jpg" (URL Absolue). Taille de l'image. Permet de réserver l'espace pour afficher le texte avant que l'image ne soit chargé. Adresse d'une image 'faible résolution', chargée en 1 er. Affichage d'une bordure, de couleur bleue si l'image est un lien. Valeur en Pixel. Pas de bordure si border="0" Apparition d'un bandeau lorsqu'on pointe l'image avec la souris. Pour les navigateurs n'affichant pas d'image, le texte est affiché. Nom générique pour une gestion de l'image via Java Script. Un lien est associé à une image via: … Insertion d'une image

13 13 left right top texttop middle absmiddle baseline bottom absbottom Alignement de l'image dans son conteneur (ex. une cellule d'un tableau). L'alignement se fait par rapport à la ligne de texte. Valeur des attributs hspace et vspace en Pixel, ex.: hspace ="10" vspace ="5" Espace réservé autour de l'image, H pour horizontal, V pour vertical.

14 14 WebGraphics Optimizer pour Windows 95 / NT: réduction de la taille d'une image. Image scannée: 110 kOVar Nu 1: 63 kO Var Nu 5: 25 kOVar Nu 4: 35 kO

15 15 L'attribut usemap permet de faire référence à "la carte des coordonnées". Insertion d'une image cliquable et l'attribut usemap ref_coord est un nom générique pour identifier "la carte des coordonnées". Les régions actives sont définies par les balises (carte des coordonnées) et (surface de chaque région). Attributs shape et coords pour la définition de chaque région. Attribut alt pour afficher une description du lien sous forme d'un bandeau, et name pour une gestion via Java Script. L'attribut HREF affecte une URL à une région. En l'absence de lien: NOHREF

16 16 Généralisation: Insertion d'un objet (MIE): la balise Cet élément permet d'inclure un objet arbitraire dans un document HTML: Control ActiveX (MIE propriétaire), Objets multimédia (images, son et vidéo), document HTML, applet Java… Insertion d'une image Comparaison avec la balise img classique Insertion d'une page web Insertion d'un son Insertion d'une vidéo attributs data, type, width et height data: URL de l'image, de la page web type: type MIME de l'objet width, height: largeur et hauteur de l'objet (px, %) attribut classid La valeur de l'attribut classid est de la forme: classid="clsid:object-id", est indique quel software / player doit être utilisé, ou fait référence à un contrôle ActiveX

17 17 Affichage d'un calendrier <object width="400" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> Insertion d'une animation flash La balise permet de définir les paramètres de l'objet, dont les principaux attributs sont name (nom du paramètre)et value (valeur du paramètre). Insertion d'un control ActiveX: un curseur Documentation: rechercher les valeurs de classid, la liste des paramètres et leurs valeurs, pour visualiser des vidéo.avi,.mov et.rm

18 18 2 ième partie: Design par Les Tableaux ou Plan: Le Tableau Les Lignes Les Cellules Etre présent sur Internet: Conception d'un site web en langage HTML

19 19 Les balises … Les 5 principaux attributs width, height, border, cellspacing et cellpadding Dimensions du tableau par rapport à son conteneur (fenêtre du navigateur, une cellule d'un tableau…). La longueur (width) et la hauteur (height) s'exprime en pixel ou en % de la dimension du conteneur. pixel % pixel % border="1" du tableau et de chaque cellule Dimension de la bordure (border), espacement entre les cellules (cellspacing), et marges pour le contenu d'une cellule (cellpadding). Valeurs en pixel. cellspacing="10" cellpadding="50"

20 20 2 ième partie: Design par Les Tableaux ou Plan: Le Tableau Les Lignes Les Cellules Etre présent sur Internet: Conception d'un site web en langage HTML

21 21 Les balises … : déclaration d'une ligne Les attributs sont similaires à ceux déclarés pour. Cas particulier: align="justify", justification total du texte valign="baseline", une ligne de base commune pour l'ensemble des cellules d'une même ligne. 1ière ligne 2nd ligne Left center rigth justify top middle bottom baseline Les attributs de la balise annulent et remplacent ceux de la balise, ex. bgcolor impose une nouvelle couleur de ligne, différente de celle du reste du tableau. Les attributs de la balise s'appliqueront à chaque cellule de la ligne, ex. align="justify", pour justifier le texte de chaque cellule de la ligne. Les principaux attributs height, bgcolor, align et valign Hauteur de ligne.

22 22 2 ième partie: Design par Les Tableaux ou Plan: Le Tableau Les Lignes Les Cellules Etre présent sur Internet: Conception d'un site web en langage HTML

23 23 Les balises … : déclaration d'une cellule Ordre de déclaration: tableau  ligne  cellule l1c1 l1c2 l2c1 l2c2 Déclaration du tableau. Déclaration d'une ligne. Déclaration d'une cellule. Contenu de la cellule (tout code HTML) Ligne 1 Ligne 2 Colonne 1Colonne 2 Dans une ligne, le nombre de cellules déclarées impose le nombre de colonnes. Il doit donc y avoir autant de cellules de déclarées dans chaque ligne, sauf... Note: le contenu d'une cellule ne doit jamais être vide. Astuce: utiliser & nbsp; (no break space) qui est un vide. Mais la cellule n'est plus vide! Ou insérer une image à fond transparent de taille 1x1 pixels, et en forçant une largeur égale à la largeur de cellule voulue. Attention: dans le cas de & nbsp;, la hauteur de cellule est forcée à celle de la taille d'un caractère! Une image de taille 1 x 1 pixel est alors préférable, et permet une hauteur de ligne de 1 pixel par ex.

24 24 Les balises … : déclaration d'une cellule Les principaux premiers attributs width, height, colspan, rowspan, align et valign Dimensions du tableau par rapport à son conteneur (fenêtre du navigateur, une cellule d'un tableau…). La longueur (width) et la hauteur (height) s'exprime en pixel ou en % de la dimension du conteneur. pixel % pixel % Regroupement de cellules sur une ligne (colspan - la cellule s'étend sur nb colonnes), ou sur une colonne (rowspan - la cellule s'étend sur nb lignes). nb indique le nombre de colonnes ou de lignes. Attention, il convient de ne pas déclarer une cellule dans une ligne, si celle-ci est déjà incluse dans un colspan ou rowspan. Intérêts de colspan et rowspan: Les cellules déclarées dans la 1ière ligne impose le nombre de colonne du tableau. Le regroupement de cellules autorise alors une gestion plus puissante de la disposition des cellules et de leur contenu. La cellule la plus large impose la largeur de la colonne, la cellule la plus haute impose la hauteur de la ligne. La dimension de la cellule dépendra alors de son contenu. Le contrôle de la dimension sera une étape délicate et importante de la conception et du design. Left center rigth justify top middle bottom baseline

25 25 3 ième partie: Les Formulaires Plan: Déclaration du formulaire Eléments du formulaire Traitement des réponses du formulaire en PHP Etre présent sur Internet: Conception d'un site web en langage HTML

26 26 post dans un message : "name=value & name=value & name=value" get à la suite de l'adresse du CGI : http://adresseCGI.cgi#action?name=value & name=value & name=value Déclaration du formulaire: … les formulaires 4 attributs action, method, name et target. get post Adresse URL du programme PHP qui traitera les données envoyées par le formulaire. Les éléments du formulaire seront obligatoirement déclarés entre les balises … Le contenu du formulaire est transmis au serveur suivant 2 méthodes: post (recommandée) ou get (possibilité bookmark) Un nom générique pour le formulaire permet de la référencer par Java Script. Si le script PHP génère une page HTML en retour, celle- ci sera affichée dans la cible spécifiée. (voir ) _blank _self _parent _top nom_frame

27 27 3 ième partie: Les Formulaires Plan: Déclaration du formulaire Eléments du formulaire Traitement des réponses du formulaire en PHP input textarea select & option Etre présent sur Internet: Conception d'un site web en langage HTML

28 28 L'élément INPUT: 10 Types différents du champ input: <input type="type" …. 1ière attribut type.

29 29 L'élément input: La Syntaxe <INPUT type="type" …. De nombreux attributs type, name, value, size, maxlength, tabindex, accesskey, src, align, checked, readonly et disabled. Ces attributs ne sont pas utilisés ensemble, mais combinés suivant la valeur de type. 10 Types différents du champ input: type="checkbox" value="message" checked="checked" /> type="radio" value="message" /> type="button" value="bouton" /> type="submit" value="envoyer" /> type="reset" value="effacer" /> type="hidden" value="message" /> type="text" size="20" maxlength="40" value="texte initial" /> type="password" size="10" maxlength="10" value="******" /> type="image" src="image.jpg" alt="description" /> type="file" enctype="multipart/form-data" /> checked si la case ou le bouton radio sont initialement cochés. message retourné en cas de choix La valeur de value est affichée dans le bouton. texte affiché par défaut, puis valeur retournée. message retourné. Possibilité de télécharger un fichier, mais le serveur doit avoir été configuré pour cela. Récupération du fichier en PHP

30 30 L'élément input: Les attributs communs L'attribut value: Note : Si plusieurs boutons Radio comportent le même nom (name), alors 1 seul bouton ne peut être coché à la fois.

31 31 Les attributs NAME et VALUE: Lorsque le formulaire est validé et envoyé, les données sont transmises de la façon suivante: Pour chaque champ INPUT la chaîne de caractère "name = value" est transmise. Plus généralement, tous les champs du formulaire seront postés dans la chaîne: "name = value & name = value & name = value & name = value &..." Cas spécifique de l'envoi d'un fichier TYPE="file" La balise doit contenir l'attribut enctype="multipart/form-data" : Les espaces sont convertis par "+", les caractères réservés (ex: "#") par leur code hexadécimal "%HH" et le saut de ligne par "%0D%0A".

32 32 texte intial, sans balise html! 3 lignes, 40 colonnes 3 attributs spécifiques: rows, cols et wrap, plus d'autres attributs communs au champ input. L'élément textarea: … textarea autorise la saisie de texte sur plusieurs lignes. Le contenu initial est déclaré entre les balises HTML de l'élément textarea. La longueur maximale est de 64kO, et doit être traitée par le programme CGI coté serveur. n lignes (rows) et m colonnes (cols) visibles. Déclaration de la partie visible du texte en nombre de lignes et de colonnes. Le texte saisie peut être plus long. off soft hard Le texte apparaît tel qu'il est saisi, ou avec un saut de ligne automatique à la m ième colonne. Le texte est posté avec ou sans la mise en forme. Paramètres communs à l'élément INPUT: name, title, tabindex, accesskey, readonly et disabled

33 33 1ière option de la liste Les éléments select et option: Ces balises HTML permettent de faire un choix (select) dans une liste d'options (option). 3 attributs : name, size et multiple, plus d'autres attributs communs aux éléments de formulaire. Un nom générique pour un traitement Java Script de la liste. Nombre d'éléments visibles de la liste. Si =1 : menu déroulant si >1 : liste multiple autorise la sélection de plusieurs options, uniquement pour une liste. size="1"size="8" L'argument de value est retournée si l'option est choisie. Si value est omis, c'est l'intitulé de l'option qui est retourné. L'option est sélectionnée par défaut. Paramètres communs aux éléments du formulaire: title, tabindex, accesskey et disabled

34 34 3 ième partie: Les Formulaires Plan: Déclaration du formulaire Eléments du formulaire Traitement des réponses du formulaire en PHP Etre présent sur Internet: Conception d'un site web en langage HTML

35 35 Lorsque l'internaute valide son formulaire via le bouton submit du champ input de type="submit", les données sont transmises sous la forme d'une chaîne de caractères: "name = value & name = value & name = value & name = value &..." où name est la valeur de l'attribut name d'un champ du formulaire, et value est la valeur saisie. Ces données sont traitées par un programme PHP, résidant sur le serveur, dont l'URL et le nom sont précisés par l'attribut action de la balise, ex.: ici le programme mail_form.php réside dans le même répertoire que le fichier HTML contenant le formulaire. En PHP, les valeurs saisies des champs de formulaire sont directement accessibles par une variable $name, du nom attribué au champ de formulaire par l'attribut name: En PHP, la variable $leNom contiendra la valeur saisie. Le code PHP est insérer entre les sigles Une fonction mail (destinataire, sujet, message, entête suppl é mentaire) permet de générer un mail depuis le serveur:

36 36 4 ième partie: Les Calques et Feuilles de Style Plan: Le calque Les propriétés de style Déclaration du style Etre présent sur Internet: Conception d'un site web en langage HTML

37 37 novos excludat iurgia finis, est vetus atque …...ponetur honeste. rien de tel que l’expérimentation et l’observation pour découvrir! La balise et son positionnement Rappel: … est une 'subdivision' de la fenêtre, et peut contenir tout code HTML. Nous l'assimilerons à un calque Gestion du positionnement: attribut style de la balise div <div align="justify" style=" position : absolute ; left : 150px ; top : 150px ; width : 300px ; height : 200px ; visibility : visible ; z-index : 1; overflow : hidden "> novos excludat iurgia finis, …...ponetur honeste. <div style=" position : absolute ; left : 250px ; top : 50px ; width : 300px ; height : 100px ; visibility : visible ; z-index : 2; overflow : hidden "> rien de tel que l’expérimentation et l’observation pour découvrir! 1 2

38 38 4 ième partie: Les Calques et Feuilles de Style Plan: Le calque Les propriétés de style Déclaration du style Etre présent sur Internet: Conception d'un site web en langage HTML Position Couleurs et image de fond Police et mise en forme de texte Contours

39 39 Les Styles: Positionnement des calques

40 40 Les Styles: Couleurs et images de fond

41 41 Les Styles: Police et Mise en forme du texte

42 42 Les Styles: Bordure des calques

43 43 Apparence d'un élément (objet) HTML: propriété display Cette propriété décrit comment un objet HTML doit être représenté, visualisé (display) à l'écran. Les principales valeurs permises pour display sont: blockin-linenone L'élément apparaît dans une nouvelle "boite", sur une nouvelle ligne Ex: les balises L'élément est visualisé sur la même ligne que le précédent Appliquée aux balises, ils n'y aura plus de "retour à la ligne" et de saut "ligne suivante" L'élément n'est plus visualisé Rechercher les autres valeurs de cette propriété Apparence du curseur: propriété cursor Contrôle l'apparence du curseur, par ex. lorsque ce dernier est au-dessus d'un élément du type lien: le lien. Les valeurs permises pour cursor sont: Nouveauté MIE 6 : possibilité d'associer une image au curseur.Mais le format doit être de type.cur Netscape 6 semble accepter également cette propriété, mais avec une image au format.gif Exercice: rechercher plus d'info sur cette propriété cursor, compatibilité entre navigateur, procédure, conception d'image, conversion de format gif  cur, … style="cursor:url(3dgno.cur)" (des curseurs sont disponibles dans le répertoire win\cursors )

44 44 4 ième partie: Les Calques et Feuilles de Style Plan: Le calque Les propriétés de style Déclaration du style Etre présent sur Internet: Conception d'un site web en langage HTML

45 45 Syntaxe de l'attribut style dans une balise HTML: style=" paramètre: valeur ; paramètre : valeur ; … … " L'attribut style s'applique à toutes les balises HTML (ou presque toutes) Pour appliquer un style particulier à un "bloc de texte", utiliser la balise : le bloc de texte… Pour appliquer un style particulier à du texte uniquement, utiliser la balise : le texte… Dans ce dernier cas, par ex., un alignement ne peut être appliqué à une ligne de texte, préférer alors la balise

46 46 feuilles de style.calque1 { position : absolute ; left : 150px ; top : 150px ; width : 300px ; height : 200px ; visibility : visible ; z-index : 1; overflow : hidden } #calque2 { position : absolute ; left : 250px ; top : 50px ; width : 300px ; height : 100px ; visibility : visible ; z-index : 2; overflow : hidden } novos excludat iurgia... honeste. rien de tel que l’expérimentation et l’observation pour découvrir! Déclaration du style dans l'entête du document HTML, la balise … 1 attributs type TYPE MIME : le contenu de la balise style est soit du texte soit une feuille de style, text/css  Cascading Style Sheet 2 définitions possibles:.nom_style { } #nom_style { } Choix du style, dépend de la définition: class="nom_style" id="nom_style" Les paramètres sont définis entre accolades { }.

47 47 Comparaison des déclarations de style Dans une balise HTML, au coup par coup: style=" paramètre: valeur ; paramètre : valeur ; … … " Dans l'entête du document:.nom_style { paramètre: valeur ; paramètre : valeur ; … … } #nom_style { paramètre: valeur ; paramètre : valeur ; … … } Référence par CLASS="nom_style" Référence par ID="nom_style" Télécharger depuis l'entête une feuille de style définie dans un fichier annexe: Avantages: une même feuille de style peut être réutilisée pour toutes les pages web du site. La modification du style est simplifiée.

48 48 Définition du style dans l'entête du document Attribution d'un style pour une balise HTML dans tout le document: balise_html " paramètre: valeur ; paramètre : valeur ; … … " h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } body {font-style:italic} b {font-style:normal} A chaque fois que balise_html sera utilisée dans le document, le style défini lui sera appliqué Notion d'héritage: Chaque balise HTML hérite du style de sa balise parent. Par ex., est une balise sous-jacente à, si body est défini avec un style italic, la balise transformera un texte en gras et italique. Il s'agit alors de redéfinir le style de ! C'est la surcharge. Héritage / hiérarchie Style d'une Association de balises: p strong { color : #00FF00} Le style sera uniquement appliqué aux objets HTML déclarés ainsi: texte….

49 49 Il est possible de définir différents style pour une même balise: code.rouge {color:#ff0000} code.vert {color:#008080} test ligne 1 test ligne 2 balise_html.nom_style { paramètre: valeur ; paramètre : valeur ; … … } Attribut class pour chaque balise HTML La valeur de CLASS fait référence à un style unique. Chaque balise HTML de mise en forme de texte peut ainsi être redéfinie (voir partie I ) Regroupement des définitions de style: h1, h2, h3, h4, h5, h6 { color: red ; font-family: sans-serif }

50 50 5 ième partie: Les Cadres ou FRAME, et cadres flottants IFRAME Plan: Etre présent sur Internet: Conception d'un site web en langage HTML Déclaration d'une subdivision en cadre Contenu des cadres Cadre flottants

51 51 Subdivision en colonnes Subdivision en lignes 4 attributs cols ou rows, puis border, frameborder et framespacing val px, val px, *,… val %, val %, *,... Les colonnes (ou les lignes) sont définies par leur largeur ( ou hauteur) en pixel, ou en % de la largeur (hauteur) du conteneur. val px, val px, *,… val %, val %, *,... Le nombre de colonnes (ou de lignes) résulte du nombre de déclaration via les largeurs en pixel ou en %. Une colonne (ou une ligne) peut avoir pour largeur (hauteur) le symbole *. L'espace restant dans la fenêtre du navigateur sera alors attribué à cette colonne (ou cette ligne). Attention, puisque la fenêtre du navigateur peut être redimensionnée, la largeur (hauteur) de la colonne (ou de la ligne) sera alors modifiée. Les 3 attributs restant présentent peu d'intérêt dans la gestion des frames. Les valeurs habituelles sont celles indiquées.

52 52 Insertion de la balise dans le document HTML titre balises html Entête du document Définition des cadres Utiliser la balise pour les navigateurs ne supportant pas les cadres, ou lorsqu'ils sont désactivés. La balise peut contenir du code HTML en alternative aux frames.

53 53 5 ième partie: Les Cadres ou FRAME, et cadres flottants IFRAME Plan: Etre présent sur Internet: Conception d'un site web en langage HTML Déclaration d'une subdivision en cadre Contenu des cadres Cadre flottants

54 54 titre Définition de chaque section: une balise par section Dans cet exemple, deux sections en colonne sont définies 8 attributs src, name, marginheight, marginwidth, scrolling, noresize, frameborder et framespacing URL absolue ou relative de la page à charger dans ce cadre (dans cette section) Nom générique du cadre. Un lien aura pour cible le cadre nommé nom. Des marges gauche & droite et haute & basse sont réservées avant chargement de l'URL. Une "barre d'ascenseur" est disponible si le contenu HTML dépasse les dimensions du cadre. yes : toujours no : jamais, auto : si nécessaire. Attention, en cas de redimensionnement de la fenêtre, une partie du contenu du cadre risque de ne plus être visible! Le cadre peut être redimensionné à loisir par l'internaute. Utile si le contenu à visualiser le justifie. Les 2 attributs restant présentent peu d'intérêt dans la gestion des frames. Les valeurs habituelles sont celles indiquées.

55 55 5 ième partie: Les Cadres ou FRAME, et cadres flottants IFRAME Plan: Etre présent sur Internet: Conception d'un site web en langage HTML Déclaration d'une subdivision en cadre Contenu des cadres Cadre flottants

56 56 Définition d'un frame flottant sous MIE 5.x, MIE 6.x et à partir de Netscape 6, par la balise : le frame flottant s'intègre directement dans une page html, dont on peut définir les dimensions (width et height), le contenu est une page html distincte (src="laPage.html"), le frame flottant s'intègre dans la page html à l'endroit où il est déclaré (align, hspace et vspace), les styles permettent de la positionner précisément dans la fenêtre du navigateur Frame flottant inséré dans une cellule de tableau Frame flottant positionné par une feuille de style Applications: gestion d'une barre de navigation du site web, par insertion d'une page html contenant la barre de navigation du site dans un frame flottant, facilité de gestion et de mise en œuvre, la même barre de navigation (page html) étant chargée dans toutes les pages du site. Attention: non compatible Netscape 4.x ! Message pour les navigateurs ne reconnaissant pas cette balise URL de la page HTML à y insérer. 10 attributs name, src, width, height, border, bordercolor, frameborder, align, hspace et vspace Nom de l'iframe, afin de pouvoir y charger une page html depuis un lien (voir ), ou via javascript. Dimensions de l'iframe. Contrôle de la bordure. Contrôle des scrollbars.