docEntre la balise d`ouverture
download 
Plainte Transcription
Entre la balise d`ouverture
Programmation HTML Structure d'un fichier html : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Ces balises sont obligatoire ! <HTML> <HEAD> </HEAD> <BODY> <TABLE BORDER=2 CELLPADDING=1 CELLSPACING=1 WIDTH=100% BGCOLOR="#8EF0EB"> <TR> <TD WIDTH=30% BGCOLOR="#00FF00"><center><IMG SRC="img1 (4).jpg" ALIGN="" HEIGHT=100></center></TD> <TD WIDTH=70% BGCOLOR="#E3EC46"><marquee behavior="alternate"><H1>AIRBUS A380</H1></marquee></TD> </TR> </TABLE> </BODY> </HTML> Entre la balise d'ouverture <body> et la balise de fermeture </body> se trouve le « corps » de la page html c'est à dire ce qui sera affiché par le navigateur internet. Voici le résultat : Un texte défilant sur fond jaune dans la deuxième cellule du tableau Une image sur un fond vert dans la première cellule du tableau Un tableau constitué d'une ligne de 2 cellules Page 1 Création de « frames » Exemple : Une ligne Deux colonnes Fichier « index.html » <!DOCT YP E HT ML PUBLIC "-//W3C//DT D HT ML 4.0//EN"> <HT ML> <HEAD> </HEAD> <frameset rows="20%,*"> <frame src="fichier1.html" name="entete" marginwidth=1 marginheight=1 scrolling=no noresize> <frameset cols="20%,40%"> <frame src="fichier2.html" name="menu" marginwidth=1 marginheight=1 scrolling=no noresize> <frame src="fichier3.html" name="menu2" marginwidth=1 marginheight=1 scrolling=no noresize> </frameset> </html> Page 2 Détails et explications : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Indique la norme utilisée <HTML> Balise d'ouverture qui indique au navigateur internet le langage de programmation utilisé, ici le HTML <HEAD> Balise d'ouverture de l' « entête » </HEAD> Balise de fermeture de l' « entête » (ici il n'y a rien en entête !) <frameset rows="20%,*"> frameset : balise d'ouverture des création de frames. rows= : indique la création de zones horizontales (lignes). "20%,*" : indique le pourcentage de la hauteur de l'écran, ici une première zone de 20%. Le joker « * » indique que le reste de l'écran est réservé pour la suite. <frame src="fichier1.html" name="entete" marginwidth=1 marginheight=1 scrolling=no noresize> <frame src= : appel du fichier html qui doit être affiché dans la frame qui vient d'être définie. "fichier1.html" : entre les guillemets on indique le chemin et le nom du fichier html (url) qui doit être appelé. Par exemple : <frame src="fichier1.html" name="entete" : indique le nom donné à cette frame, ici c'est « entete » (attention pas d'accent, c'est un langage anglais !) marginwidth=1 : précise la largeur des marges latérales (nombre de pixels) marginheight=1 : précise la hauteur des marges hautes et basses (nombre de pixels) scrolling= : précise si l'on doit afficher un ascenseur ou nom — les valeurs possibles sont yes, no et auto (valeur par défaut) noresize : Indique que la taille de la zone ne peut pas être modifiée par l'utilisateur <frameset cols="20%,*"> frameset : balise d'ouverture des création de frames. cols= : indique la création de zones verticales (colonnes). "20%,*" : création d'une première colonne de 20% de la largeur de l'écran, le reste pour la deuxième colonne. <frame src="fichier2.html" name="menu" marginwidth=1 marginheight=1 scrolling=no noresize> Appel du fichier html qui doit être afficher dans la première colonne. <frame src="fichier3.html" name="menu" marginwidth=1 marginheight=1 scrolling=no noresize> Appel du fichier html qui doit être afficher dans la deuxième colonne. </frameset> Balise de fermeture de la création de frames. On notera que dans le fichier html de création de frames il n'y a pas de balise <body>....</body>, en effet le fichier html de création de frames n'affiche pas de contenu directement ! Il n'y a pas de corps de page. Page 3 Autre exemple : Fichier html : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> </HEAD> <frameset rows="20%,*"> <frame src="" name="entete" marginwidth=1 marginheight=1 scrolling=no noresize> <frameset cols="20%,40%"> <frame src="" name="menu" marginwidth=1 marginheight=1 scrolling=no noresize> <frameset rows="10%,30%,*"> <frame src="" name="menu1" marginwidth=1 marginheight=1 scrolling=no noresize> <frame src="" name="menu2" marginwidth=1 marginheight=1 scrolling=no noresize> </frameset> </html> Page 4 Formater votre page Pour cela, vous pouvez ajouter des attributs à la balise <body> Pour colorer le texte de votre page : L'attribut est : text="code_de_couleur" Exemple : <body text="#000000"> Pour colorer le fond d'écran de votre page : L'attribut est : bgcolor="code_de_couleur" Exemple : <body bgcolor="#0099CC"> Pour colorer les liens de votre page : L'attribut est : link="code_de_couleur" Exemple : <body link="#003366"> Pour colorer les liens actifs de votre page : L'attribut est : alink="code_de_couleur" Exemple : <body alink="#00FF00"> Pour colorer les liens visités de votre page : L'attribut est : vlink="code_de_couleur" Exemple : <body vlink="#CCFF66"> Pour mettre une image de fond d'écran sur votre page : L'attribut est : background="votre image " Exemple : <body background="image.gif"> Texte qui s'affiche en forme d'une "infobulle" : L'attribut est : title="votre texte" Exemple : <body title="cours html"> L'expression BODY title="" compte pour la page entière, c'est-à-dire que le texte inscrit dans sa valeur s'affiche à tout point où l'utilisateur "dépose" la souris. Cet effet peut être gênant. A ne pas confondre avec la balise <title>...</title> !!! site rédigés en plusieurs langues : L'attribut est : lang="langue" Exemple : <body lang="fr" dir="ltr"> Pour que les navigateurs lisent le texte correctement, il peut aussi être nécessaire de se servir de l'attribut dir qui indique, dans quel sens le texte doit être affiché : de gauche à droite (valeur par défaut en Europe) ou de droite à gauche (hébreu, japonais, etc.). valeurs "ltr" (left to right : de gauche à droite) et "rtl" (right to left : de droite à gauche) sont disponibles. leftmargin et topmargin : L'attribut est : leftmargin="nbre de pixels" Exemple : <body leftmargin="0"> Pour définir les marges du texte - toujours pour un document entier - nous nous servons de l'attribut leftmargin pour la marge à gauche et de topmargin pour la marge en haut de la page. Les valeurs sont exprimées en pixels. type d'arrière plan: L'attribut est : bgproperties="type de background" Exemple : <body bgproperties="fixed"> Nous avons le choix entre un arrière-plan fixe (bgproperties="fixed") et un arrière-plan qui défile verticalement, lié aux éléments de la page (bgproperties="scroll"). Le dernier correspond à la valeur par défaut. Tous ces attributs peuvent se cumuler : Exemple :<body text="code_de_couleur" bgcolor="code_de_couleur" link="code_de_couleur" alink="code_de_couleur" vlink="code_de_couleur"> Page 5 Formater votre texte Comment formater un texte en gras : <b> définit un texte gras puis se termine par </b> La règle : <b>Votre Texte en Gras</b> Exemple : Votre Texte en Gras Comment formater un texte en italique : <i> définit un texte en Italique puis se termine par </i> La règle : <i>Votre Texte en Italique</i> Exemple : Votre Texte en Italique Comment formater un texte souligné : <u> définit un texte souligné puis se termine par </u> La règle : <u>Votre Texte Souligné</u> Exemple : Votre Texte Souligné Comment formater un indice : <sub> définit un texte en indice puis se termine par </sub> La règle : Votre Texte <sub>en indice </sub> Exemple : Votre Texteen indice Comment formater un exposant : <sup> définit un texte en exposant puis se termine par </sup> La règle : Votre Texte <sup>en exposant </sup> Exemple : Votre Texteen exposant Comment formater un texte rayé : <s> définit un texte rayé puis se termine par </s> La règle : <s>Votre Texte Rayé</s> Exemple : Votre Texte Rayé Comment formater un texte en couleur : <font color="code_de_couleur"> définit un texte en couleur puis se termine par </font> La règle : <font color="#0000ff">Votre Texte en Couleur</font> Exemple : Votre Texte en Couleur Comment faire un retour à la ligne : <br> définit un retour à la ligne Exemple : Texte de ma première ligne<br> Texte de ma seconde ligne<br> Ce qui nous donne : Texte de ma premiére ligne Texte de ma seconde ligne Comment formater une ligne: <hr> définit un paragraphe puis se termine par </hr> La règle : <hr width="150" size="4" align=center color = #00ff00 >Votre ligne de" longeur = 150 pixels" "largeur = 4pixels" "Alignée au centre" "couleur verte" Exemple : Width et Size peuvent être exprimé en % de la page, la règle est par exemple "width = 10%" Comment formater un paragraphe : <p> définit un paragraphe puis se termine par </p> La règle : <p align="right">Votre Paragraphe Aligné </p> Exemple : Votre Paragraphe Aligné à Gauche avec left Page 6 Votre Paragraphe Aligné au Centre avec Center Votre Paragraphe Aligné à Droite avec right Tous ces balises de formats peuvent se cumuler : Exemple : <b><i><u><s><font color="blue">Ecrire en gras, en italique, en souligné, rayé et en couleur</font></s></u></i></b> Résultat : Ecrire en gras, en italique, en souligné, rayé et en couleur Comment faire des titres avec l'attribut H : Il existe six styles prédéfinis pour les titres, allant de H1 à H6 Exemple : <h1>Titre H1</h1> Titre H1 <h2>Titre H2</h2> Titre H2 <h3>Titre H3</h3> Titre H3 <h4>Titre H4</h4> Titre H4 <h5>Titre H5</h5> Titre H5 <h6>Titre H6</h6> Titre H6 Page 7 Textes défilant : Balise Les Attributs <marquee> </marquee> loop Valeurs d'attributs un chiffre <marquee loop="4">défile 4 fois </marquee> behavior alternate <marquee behavior="alternate">cours html</marquee> slide <marquee behavior="slide">cours html</marquee> height width sera le nombre de défilement infini par défaut définit le comportement du mouvement du texte défile d'avant en arrière défilement puis arrêt indique la direction du texte direction bgcolor Explications left <marquee direction="left">cours html</marquee> right <marquee direction="right">cours html</marquee> down <marquee direction="down">cours html</marquee> up <marquee direction="up">cours html</marquee> valeur hexadécimal ou nom anglo saxon de la couleur <marquee bgcolor="cccc00">cours html</marquee> pixel, ou pourcentage <marquee height="15%">cours html</marquee> pixel, ou pourcentage <marquee width="50">cours html</marquee> Page 8 par défaut c'est à gauche vers la droite vers le bas vers le haut définit la couleur de l'arrière plan du texte défilant hauteur du texte défilant largeur du texte défilant chiffre <marquee scrollamount scrollamount="15">cours html</marquee> scrolldelay en milisecondes <marquee scrolldelay="1000">cours html</marquee> définit de combien de pixels l'objet est déplacé lors chaque succession de l'animation définit la durée de la pause entre 2 étapes de l'animation Tous ces attributs peuvent se cumuler : exemple: code source : <marquee behavior="alternate" direction="right" bgcolor="cccc00"><b><font color="#CC6600">cours html</font></b></marquee> Page 9 Listes Listes à puces: • texte 1 • texte 2 code source : <UL><LI> texte 1 </LI><LI> texte 2 </LI></UL> remarques utiles : <UL> peut prendre d'autres arguments, que voici: <UL TYPE=disc> <UL TYPE=circle> <UL TYPE=square> Ceci change le type de puce devant chaque item. Listes numérotées : 1. texte 1 2. texte 2 code source : <OL> <LI> texte 1 </LI><LI> texte 2 </LI> </OL> remarques utiles : <OL> peut prendre d'autres arguments, que voici: <OL TYPE=i> Numérotation du type i,ii,iii... <OL TYPE=I> Numérotation du type I, II, III, IV... <OL TYPE=A> Numérotation du type A, B, C, D... <OL TYPE=a> Numérotation du type a, b, c, d... <OL START=5> Numérotation du type 5, 6, 7, 8... Liste de définition : Terme 1 à définir Définition du terme 1 Terme 2 à définir Définition du terme 2 suite du terme 2 code source : <DL> <DT>Terme 1 à définir</DT> <DD>Définition du terme 1</DD> <DT>Terme 2 à définir</DT> <DD>Définition du terme 2</DD> <DD>suite du terme 2</DD> </DL> L'imbrication de listes est bien sûr possible. Page 10 Tableaux C'est la meilleure façon de gérer convenablement la présentation. Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des objets. Ces tables peuvent avoir un fond et des bords visibles ou non. Insérer un tableau <TABLE> et </TABLE> : pour définir un tableau <TR> et </TR> : pour définir une rangée Exemple : <CENTER> <TABLE WIDTH=50% border="1"> <TR> <TD><IMGSRC="film.gif"></TD> <TD>Bienvenue</TD> </TR> </TABLE> </CENTER> Ce tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première cellule l'image et dans la seconde le texte, le tout étant centré. Mise en forme d'un tableau : A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc... <TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%" bordercolor="#000080"> <tr> <td width="50%" align="left" bgcolor="#008080" bordercolor="#FF0000"> </td> <td width="50%" align="left" background="film.gif"> </td> </tr> </table> <table bgcolor="votre couleur"> : mettre un fond de couleur. <table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en pixels. <table border="1"> Taille des bords (0=pas de bords). border color="votre couleur" couleur des bordures. cellpadding="2" Marge intérieure des cellules. cellspacing="3" Espacement entre les cellules. Page 11 Fusionner les lignes et colonnes Les lignes et colonnes peuvent êtres fusionnées, afin d'obtenir des cellules plus ou moins grandes et accueillir des données. Ce fusionnement est réalisé avec l'attribut : rowspan et colspan. - Pour fusionner 2 cellules adjacentes sur une ligne, COLSPAN est requis (pour th ou td) - Pour fusionner 2 cellules adjacentes sur une colonne, ROWSPAN est requis (pour th ou td) Exemple: Cellule 1 2 cellules fusionnées (sur la même ligne) Cellule 2 Cellule 3 2 cellules fusionnées (sur la même colonne) Cellule 4 Cellule 5 <table border=1> <tr> <td>Cellule 1</td> <td colspan=2>2 cellules fusionnées (sur la même ligne)</td> </tr> <tr> <td>Cellule 2</td> <td>Cellule 3</td> <td rowspan=2>2 cellules fusionnées (sur la même colonne)</td> </tr> <tr> <td>Cellule 4</td> <td>Cellule 5</td> </tr> </table> Résultat Page 12 L' insertion d'images Le type d'images admises sur internet : Les images pouvant être affichées sur les pages web sont les images gif, jpg, bmp, et png. A noter que seul les gif et les jpeg assurent une compatibilité avec les vieux navigateurs. Quelques conseils pour choisir le format adapté : les images jpeg sont plus adaptées pour les photos (elles permettent l'affichage de beaucoup plus de couleurs que les gifs). Les gif sont mieux adaptées pour les dessins (elles sont beaucoup moins lourdes) de plus elles permettent l'affichage d'images animées. La balise <img> et l'attribut src En HTML, les images sont définies avec le tag <img>. Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des attributs. Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire source. La valeur de l'attribut src correspond à l'adresse (relative ou absolue) de l'image souhaitée. L'image sera ainsi placée à l'endroit où vous insérez le tag. 1.- Voici une première image sans attribut particulier : code source : <CENTER><IMG src="image.jpg"></CENTER> Page 13 2.- une image avec un bord de taille 3 : code source : <CENTER><IMG src="image.jpg" border=3></CENTER> 3.- Modification de la taille de l'image : code source : <CENTER><IMG src="image.jpg" border=0 width=120 height=120></CENTER> 4.-L'attribut alt : Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du survol de celle-ci. La valeur de cet attribut est donc un texte que vous pouvez choisir librement. code source : <CENTER><IMG src="image.jpg" border=0 width=120 height=120 alt="cours html"></CENTER> Page 14 5.- Insérer une image d'arrière plan dans vos pages (attribut background) : Exemple : <html> <body background="background.jpg"> </body> </html> Nb : Vous pouvez utiliser des images au format GIF (.gif) ou JPG (.jpg). Si l'image utilisée est plus petite que votre page, elle sera répétée pour couvrir entièrement le document.!!! 6.- L'alignement vertical des images dans les textes (attribut align) Resultat dans le navigateur : Code source : <html> <body> <p>Une image <img src ="image.gif" align="bottom"> dans un texte</p> <p><b>Pour aligner l'image verticalement :</b><br><br> au centre <img src="image.gif" align="middle"> dans le texte</p> <p>en haut <img src ="image.gif" align="top"> dans le texte</p> <p><b>L'alignement vertical par défaut<br> de l'image est en bas</b></p> <p>Alignement par défaut <img src ="image.gif"></p> <p><img src ="image.gif"> Une image avant un texte</p> <p>Une image après un texte <img src ="image.gif"></p> </body> </html> 7.- L'alignement horizontal des images dans les textes: Page 15 Code source : Resultat dans le navigateur : <html> <body> <b>Les alignements horizontaux d'une image dans un texte :</b> <p><img src ="image.gif" align ="left"> Si l'attribut align a pour valeur "left", l'image sera placée à gauche du texte.</p> <p><img src ="image.gif" align ="right"> Si l'attribut align a pour valeur "right", l'image sera placée à droite du texte.</p> </body> </html> 8.- hspace et vspace : permettent de définir une marge autours des images. Le paramètre align précise l'alignement vertical de l'image avec le texte qui l'entoure : Code source : <html> <head> <title>Titre de la page</title> </head> <body> <img src="images/html.jpg" width="100" height="100" hspace="10" vspace="15" align="left"> Votre texte ici... </body> </html> 9.- Faire un lien sur une image : <html> <body> Cette image contient un lien <p>Cette image contient un lien <br><br> <a href="centre.html"> <img border="0" src="images/html.jpg" width="100" height="100"></a></p> </body> </html> 10.- Les cartes cliquables : Page 16 On appelle "carte cliquable" une image dans laquelle sont définis des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé. Il existe théoriquement deux techniques pour construire une telle image. Dans la première, les coordonées du point sont envoyées au serveur qui renvoie au navigateur l'adresse du lien, celui-ci est alors activé. Cette technique est plus difficile à mettre en oeuvre que la suivante, et implique une requête supplémentaire (et donc une attente plus longue). De plus elle est devenue obsolète, et est incompatible avec la nécessité d'accessibilité des pages. La seconde technique, qui permet de spécifier dans la page HTML elle même les différentes zones de la carte. Cette carte sera alors interprétée localement, c'est-à-dire que le logiciel de navigation déterminera luimême, en fonction de la position du clic sur l'image, du lien à activer. Elle est plus rapide et n'empêche pas l'accessibilité du site. La balise MAP : Tout d'abord, il y a la balise <MAP>...</MAP>. Dans cette balise, il faut indiquer un nom dans l'attribut NAME. IL faut que ce soit le même que celui donné dans le USEMAP (dit au navigateur que l'image est mappée) de votre image. Ensuite, il y a les balises <AREA>, une pour chaque zone sur votre image. - l'attribut SHAPE Il définit la forme de votre zone : rect (rectangle), circle (cercle), polygon (polygone irrégulier). - l'attribut HREF Il définit l'adresse vers laquelle va pointer votre zone. - l'attribut COORDS Il indique les coordonnées de la zone en pixels. Elles varient selon la forme géométrique que vous avez choisi. pour le cercle: COORDS="x,y,r" pour le rectangle: COORDS="x1,y1,x2,y2" pour le polygone: COORDS="x1,y1,x2,y2,..." Page 17
