Les tailles que vous spécifiez, si elles sont sans unité, sont en pixels. Par exemple, width="60". On peut aussi mettre une unité, par exemple: width="12cm" (guère employé), ou un pourcentage de la largeur de la fenêtre: width="100%", ou aussi une taille de ligne (en hauteur), employé seulement dans les styles; exemple: "margin-top: 3em".
Lorsque vous insérez une image (avec IMG), il vaut mieux prendre pour habitude de toujours spécifier sa taille (en pixels), ce qui a pour effet de réserver la taille avant que l'image soit finie de charger (plus esthétique, sinon on voit le reste se décaler). Pour cela, consulter l'image sous un logiciel de dessin ou de visualisation d'image. Exemple:
<IMG SRC="cathedr.jpg" ALT="Cathédrale de Milan" WIDTH="132" HEIGTH="78">
On peut bien sûr mettre d'autres tailles que celles de l'image ce qui aura pour effet de la zoomer/réduire. Toutefois ce n'est parfois pas très esthétique; on préfère la réduire sous un logiciel de dessin, d'autant plus que ça réduira la taille du fichier image, donc le délai de chargement.
Certaines séquences de caractères équivalent à des caractères spéciaux. Par exemple:
| espace insécable |
< | < |
> | > |
" | " |
& | & |
é | é |
É | É |
È | È |
Ê | Ê |
Ç | Ç |
ñ | ñ |
æ | æ |
å | å |
ø | ø |
© | © |
€ | € |
° | ° |
½ | ½ |
± | ± |
³ | ³ |
» | » |
ß | ß |
Œ | Œ |
œ | œ |
© | © |
æ | æ |
ق | ق |
‰ | |
™ | |
… |
L'espace insécable est souvent utilisé. Exemple:
Louis XIV
Mettez 3 kg
<P> </P> ligne blanche pour espacer
Lorsque vous faites un tableau, certains navigateurs ne font pas correspondre sa largeur à celle de toute la page. De même, vous voudriez parfois qu'une colonne occupe plus de la largeur de l'image que vous y mettez, etc... Voici comment faire.
<TABLE width="100%"> (tableau: force à occuper toute la largeur)
<TD width=160 align="left"> (1ère colonne)
<IMG SRC="images/hagia2.jpg" WIDTH=149 HEIGHT=137> (notre image)
</TD> (fin de la 1ère colonne)
<TD> (2ème colonne: elle occupera le reste)
<P>La cathédrale fut construite...</P> (texte)
</TD> (fin de la 2ème colonne)
</TABLE> (fin du tableau)
Le fait d'avoir dimensionné la 1ère colonne légèrement plus large que l'image (qui sera cadrée à gauche) assurera un espace entre l'image et le texte (ici: de 11 pixels).
La cathédrale Sainte-Sophie fut construite par l'empereur romain d'orient Justinien en 532, afin de calmer les esprits suite à la sédition Nikka. La cathédrale, achevée en 537, est judicieusement située à côté de l'hippodrome, d'où a démarré cette guerre civile. Justinien a aussi fait de grands travaux législatifs: le code justinien (à partir des lois écrites par Théodose), que de nombreux pays reprendront, dont la France. |
Pour avoir des espaces dans les tableaux, il y a d'autres solutions :
<TD width=10> (réserve une colonne de 10 pixels de large)
(un blanc, car il faut mettre quelque chose pour que la colonne (vide) se fasse)
</TD> (fin de colonne)
ou bien:
<TABLE cellspacing=10>
Dans un tableau, pour aligner le haut d'un paragraphe avec le haut d'une photo, on mettra pour la colonne à aligner:
<TD valign="top">
ou aligner en bas:
<TD valign="bottom">
ou aligner à droite:
<TD align="right">
ou centrer le contenu:
<TD align="center">
Voir l'aide sur TABLE et TD pour plus de possiblités (cadres, couleurs...)
Lorsqu'un tableau comporte une ligne regroupant plusieurs lignes ou une colonne regroupant plusieurs colonnes, on emploie l'attribut ROWSPAN ou COLSPAN dans la commande TD. Exemples:
<TABLE border> <TR> <TD rowspan="2">Embrasse 2 lignes</TD> <TD>Première</TD> <TD>ligne</TD> </TR> <TR> <TD>Deuxième</TD> <TD>ligne</TD> </TR> </TABLE> |
|
<TABLE border> <TR> <TD colspan="2">Embrasse 2 colonnes</TD> </TR> <TR> <TD>Première</TD> <TD>Deuxième</TD> </TR> <TR> <TD>col.</TD> <TD>col.</TD> </TR> </TABLE> |
|
On peut aussi bien sûr imbriquer des tableaux...
La balise <U> sert à souligner.
La balise <CENTER> sert à centrer un objet (paragraphe, image...)
La balise <MARQUEE> sert à faire un texte déroulant sur le côté; exemples:
La balise <BLOCKQUOTE> sert à faire un paragraphe en retrait (citation)
La balise <SUP> sert à mettre en exposant (ex: 2ème)
La balise <SUB> sert à mettre en indice (ex: X0)
L'attribut bgproperties="fixed" dans BODY sert à mettre l'image de fond en fixe (au lieu de se dérouler avec le texte).
La balise <KBD> sert à afficher un texte en police fixe (idem: <TT>)
Les balises <SMALL> et <BIG> affichent le texte en petit ou grand.
La balise <DL> sert à indenter un bloc de texte.
La balise <!-- sert à introduire un commentaire (fermé par -->). On en profite pour y mettre du langage non-HTML comme des enrichissements JavaScript ou CSS (style) par exemple.
La balise <PRE> sert à introduire un texte Ascii pur et dur dont on respectera tous les sauts de ligne (sans avoir à introduire des <P> ou <BR>. Aucune mise en forme ne sera faite et ça s'affichera en police fixe.
La balise <BGSOUND> (dans l'en-tête <HEAD>) sert à mettre un son dans la page. Il ne sera exécuté qu'1 fois lors du chargement, sauf si on met l'attribut "loop=nnn". Comme pour un motif graphique (fond d'écran), on peut avoir un tout petit son et le répéter à l'infini. Par exemple:
<BGSOUND src="sons/bird.wav" loop="infinite">
La balise <EMBED> sert à insérer un objet quelconque: un son (sous Firefox/Netscape, car BGSOUND n'est reconnu que par Internet Explorer), une animation Flash, un clip vidéo, etc... Cette balise appelle le plug-in concerné, c'est-à-dire l'application chargée de "jouer" l'objet. Exemple:
<EMBED src="images/anim.swf" align="left">
<NOEMBED>
Animation en Flash; veuillez télécharger le plug-in proposé.
</NOEMBED>
En fait, tout ça va être normalisé, et on emploiera les balises <OBJECT> ou <APPLET> pour insérer un objet quelconque.
Utiliser la balise EMBED plutôt que BGSOUND pour un son peut être aussi utile dans le cas suivant: voir apparaître une barre de volume et surtout un bouton d'arrêt lorsqu'on donne une dimension (s'emploie comme pour une image). Exemple:
<EMBED width="200" height="20" src="sons/sardane.mid" align="right">
Cette commande accepte en plus les attributs autostart="false" et hidden="true", bien pratiques...
Voici quelques essais avec les commandes OBJECT et EMBED. C'est plutôt délicat...
Les commandes DEL et INS servent à biffer modifier un texte.
Pour faire des listes à puces ou numérotées, on utilise UL ou OL, et LI.
<UL> (début d'une liste à puces) <LI>1ère rubrique</LI> (rubriques...) <LI>2ème rubrique</LI> <LI>3ème rubrique</LI> </UL> (fin de la liste à puces) |
|
Les "recommandations" veulent que dorénavant, on tende à distinguer dans les pages HTML le fond de la forme. On regroupera tout ce qui est forme dans des feuilles de style, communes à toutes les pages d'un même site. Ceci évite donc des répétitions entre ces pages. Les styles sont dans un langage autre que le HTML: le langage CSS.
Parfois, l'écran est partagé en 2 moitiés, qu'on peut dérouler de façon indépendante. Ce sont des "frames" (cadres ou panneaux en français). Par exemple, on met un menu dans la moitié gauche, ou dans la moitié du haut, et le contenu de la rubrique sélectionnée (page HTML) s'affiche dans l'autre moitié.
Pour cela il faut faire (au moins) 3 fichiers HTML:
Vous voyez qu'un clic dans le frame gauche affiche la page dans le frame droit. C'est le but de l'attribut TARGET, après avoir nommé le frame, ce qui est fait dans la page principale (ici recettef.htm). Exemple:
<FRAMESET cols="25%, 75%">
<frame src="recettes.htm">
<frame src="rec00.htm" name="main">
</FRAMESET>
Dans le petit fichier, table des matières, destiné à s'afficher à gauche (recettes.htm), on crée les liens ainsi:
<A HREF="rec05.htm" target="main">
Vous voyez que dans le frame de gauche, on est obligé de mettre à chaque lien "target=main". Pour s'éviter cela, on peut factoriser avec l'instruction suivante en mettant avant les liens concernés:
<BASE target="main">
Il faut aussi pourvoir sortir du FRAMESET. Par exemple, si vous faites (dans un des frames) un bouton "retour" qui affiche une page totalement différente, il ne faut pas que cette page s'affiche dans le frame courant (droite ou gauche) mais détruise le FRAMESET. Pour cela, on écrit dans le lien <A HREF="..." target="_parent">
Remarques:
Que ce soit une image ou une page HTML, si on veut l'ouvrir dans une autre fenêtre lorsqu'on clique dessus, il suffit de mettre target="_blank" dans la balise A. Exemples:
Voir le <A href="http://www.ign.fr" target="_blank">site</A> Carte de France <A href="images/carte.jpg" target="_blank"><IMG src="images/icone.jpg"></A>
Par défaut, un lien se déclenche sur une zone rectangulaire; typiquement le contour de l'image si celle-ci est un lien. On veut parfois faire des zones de liens circulaires, ou quelconques, selon une zone de l'image. Dans ce cas, on se sert des commandes MAP et AREA. Il faut faire suivre une liste de coordonnées écran qui décrivent le contour de cette zone. C'est assez dur à faire, et c'est un des rares cas où on a vraiment besoin d'un logiciel de création de pages Web, par exemple Adobe PageMill. Exemple:
<MAP NAME="nom">
<AREA SHAPE="poly" COORDS="x,y,..." HREF="toto.htm">
</MAP>
L'on peut aussi par exemple faire une barre d'outils, avec une seule image et différentes zones rectangulaires appelant les différents liens. Exemple:
<MAP NAME="barre">
<AREA SHAPE="RECT" COORDS="1,1,110,50" HREF="html.htm">
<AREA SHAPE="RECT" COORDS="111,20,250,78" HREF="html2.htm">
<AREA SHAPE="RECT" COORDS="251,1,448,50" HREF="javascri.htm">
<AREA SHAPE="RECT" COORDS="320,45,390,78" HREF="xml.htm" ALT="Notions XML">
</MAP>
<IMG SRC="images/toolbar.gif" USEMAP="#barre" border=0 width=450 height=80>
Ce qui donne:
C'est une image horizontale 450x80 pixels dans laquelle on a dessiné 4 rectangles actifs (on peut bien sûr la chiader plus que je l'ai fait...). Promenez la souris dessus et observez la ligne d'état en bas. Cliquez...
On peut aussi dessiner des zones plus compliquées que des rectangles, comme des cercles (SHAPE="CIRCLE"), ou des formes quelconques (SHAPE="POLY"). Ces dernières sont définies avec une suite de coordonnées. Dans ce cas, on peut avantageusement utiliser un éditeur HTML comme Adobe PageMill ou FrontPage, ou DreamWeaver etc... qui offrent un crayon pour définir ces formes (plutôt que de tâtonner pour estimer ces coordonnées, quoique ce soit faisable car la forme apparaît en tiretés). On peut aussi s'aider d'un logiciel de dessin comme Paint qui affiche les coordonnées du crayon, ou d'Adobe Photoshop.
Exemple:
<IMG SRC="images/ignlogo.gif" USEMAP="#contour" border=0 width=178 height=177>
<MAP NAME="contour">
<AREA SHAPE="POLY"
COORDS="18,0,18,72,0,80,0,103,30,134,116,175,175,62,129,25,105,32,105,0"
HREF="ign.htm">
</MAP>
Ce qui donne:
Note pour Photoshop: très pratique: on crée un calque de l'image détourée, puis on passe sous ImageReady, et là on crée une carte-image à partir du calque (menu Calque). Puis dans l'onglet "carte-image", on sélectionne Polygone, puis la finesse (ex: 80%). On remplit éventuellement les champs HREF et ALT, puis on enregistre une copie optimisée de tout ça (crée l'image GIF et le code HTML avec les précieuses coordonnées du contour). Voir autre exemple avec zones cliquables.
Une page HTML peut contenir un formulaire, c'est-à-dire des zones où l'utilisateur peut entrer du texte au clavier, son numéro de carte bleue, cocher des options, cliquer des boutons, dérouler et choisir dans une liste, ce qui rend la page interactive, comme par exemple pour un sondage, une inscription, un achat ou une recherche. Ensuite l'utilisateur clique sur un bouton Envoyer pour envoyer effectivement ces informations à un serveur, ou par mail.
Un serveur est un programme (souvent appelé cgi.bin) qui traite les informations qu'il reçoit (et envoie éventuellement une réponse). La rédaction d'un tel programme est assez complexe. Restons plutôt côté client avec les formulaires.
La méthode GET envoie les paramètres à la queue-leu-leu au bout de l'URL mentionnée en action. Ainsi, lorsqu'on fait SUBMIT, apparaît par exemple dans la ligne d'état:
http://monsite/mapage.htm?parfum=Vanille&nom=Eric&marie=1&motPasse=hector
Par défaut, <FORM> tout seul utilise l'URL de la page courante comme action et GET comme méthode. L'URL (que ce soit une page HTML ou un programme) doit donc analyser cette ligne de paramètres et les traiter.
On peut aussi habiller un lien avec un bouton, en utilisant un formulaire minuscule:
<FORM ACTION="html.htm" METHOD=GET> <INPUT TYPE="submit" VALUE="Tutorial HTML"> </FORM> |
On utilise aussi les boutons simples (de type "button"), par exemple pour déclencher une action Javascript:
<FORM> <INPUT type="button" value="Voir source" onclick="window.location='view-source:'+window.location.href"> </FORM> |
Plus complexe: comment récupérer l'information choisie dans un formulaire (menu) pour ouvrir une nouvelle page:
<FORM name="ff" onclick='window.location.href= document.ff.ll.options[document.ff.ll.selectedIndex].value'> <SELECT NAME="ll" size="6"> <OPTION value="html.htm"> page sur HTML <OPTION value="html2.htm"> page sur HTML (2) <OPTION value="javascri.htm"> Javascript <OPTION value="style.htm"> styles CSS1 <OPTION value="xml.htm"> page sur XML <OPTION value="embed.htm"> inclusions d'objets </SELECT> </FORM> |
Normalement, il n'y a pas de problèmes avec les caractères accentués. Lorsque vous tapez un é sous éditeur Windows, il apparaîtra bien, même sous Mac, Internet Explorer ou Netscape, car c'est le jeu "ISO Latin 1" (codé ISO-8859-1, et commun à toute l'Europe).
Il existe cependant 2 solutions si vous craignez que vos caractères accentués n'apparaissent pas bien:
Remarque: si par exemple vous voulez voir s'afficher correctement un vieux texte tapé sous MS-DOS, et si vous ne voulez pas changer tous les caractères accentués, vous pouvez le faire en ajoutant une en-tête avec une ligne META qui utilise comme charset 437 ou IBM437 (ou 850 ce qui revient à peu près au même), ou de même mac pour un texte accentué MacIntosh. Insérez par exemple ces quelques lignes au début (ça marche avec IE mais pas Mozilla):
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=IBM437"> <TITLE>Mon joli texte sorti du grenier</TITLE> </HEAD> <body bgcolor=#DDDDDD> <pre>
De même, si vous voulez voir correctement un texte accentué tapé sous Mac, il faut mettre dans l'en-tête:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=macintosh">
Vous pouvez voir les noms de tous les jeux de caractères officiels ici.
(lien externe: cette adresse ou à celle-là).
La chaîne entre guillemets après l'attribut CONTENT= s'appelle un code MIME. C'est le moyen de décrire le codage d'un fichier, texte, image, HTML, son, etc... fait initialement pour le mail.
(lien externe: cette adresse).
L'autre solution si vous avez un texte accentué DOS est de l'encadrer par:
<FONT face="MS LineDraw"> et </FONT>
à supposer que vous ayez la police MS LineDraw sur votre ordinateur (une des rares à suivre le codage IBM-PC 437), l'autre inconvénient étant que vous n'avez pas le choix de la police.
Comme on l'a vu à la page précédente, les images doivent avoir un format graphique reconnu par le navigateur, par exemple JPEG, GIF, ou le récent format PNG.
Ces formats, contrairement au TIFF ou au BMP, sont des formats avec compression irréversible, c'est-à-dire avec une légère perte d'information, peu visible à l'il, mais conséquente sur la taille du fichier.
Typiquement, le format JPEG autorise une fidélité allant de 1 à 100%, paramétrable lors de la confection du fichier. La compression procède par association plus ou moins marquée de couleurs proches entre pixels voisins. Aussi un fichier JPEG avec un taux de fidélité inférieur à 50% fera apparaître des effets de dégradés souvent visibles (par exemple sur un ciel bleu), ou de "vaguelettes" autour des objets (ce qui rend encore plus flou un objet fin). Personnellement, j'utilise du JPEG à 80% pour stocker mes photos (quasiment aucune perte, afin de pouvoir les travailler), et pour le Web 60% semble un bon compromis.
Le format GIF (plus spécialement GIF89a) permet d'enregistrer une couleur de fond, dite de "transparence". Par exemple l'image suivante, normalement rectangulaire, mais où l'on voit bien le contour de l'écusson. Ici, la couleur de transparence est définie au blanc; on choisit simplement une couleur qui n'apparaisse pas dans l'image proprement dite. Les pixels "transparents" doivent avoir pile cette couleur.
Mais n'oubliez pas que pour un site Web, ce sont les images et leur rapidité de chargement, c'est-à-dire leur petite taille, qui rendent une page attractive. Pensez à tous ceux qui sont connectés par un modem externe et n'ont pas forcément ADSL. Exemple: liaison modem 56K = 56000 bits/s = 7 Ko/s. Une image de 100 Ko (grosse donc) sera chargée en 14 secondes; l'utilisateur impatient et/ou volage est à la limite de passer à tout autre chose... Réciproquement, une imagette de 7 Ko sera chargée en 1 seconde seulement. Il faut donc constamment faire un compromis entre la perfection et la performance.
C'est bien pratique, une fois que votre site est livré au public, d'avoir un compteur sur votre page indiquant le nombre de visiteurs. Pour cela, prévoyez par exemple de le mettre en bas de la page principale (index.htm). Inscrivez-vous à un site qui gère les compteurs, par exemple www.compteur.com (c'est gratuit). Choisissez votre style de compteur et sa dimension. Faites-y référence dans votre page ainsi (en mettant dans l'ID votre numéro d'inscription et dans num le numéro de votre compteur):
<SCRIPT SRC="http://www.compteur.com/cpt?ID=xxxxxx&num=1"></SCRIPT>
Il s'affichera puis s'incrémentera dès que vous chargez la page.
Beaucoup de pages Web ont une petite icône indiquée dans la barre d'adresse, la barre personnelle, le marque-page (favoris) ou l'onglet. Pour cela, faites une image 16x16 pixels, sauvez-la par exemple au format PNG, et mettez dans l'en-tête de votre page (entre les lignes <HEAD> et </HEAD>) l'instrution suivante:
<link rel="shortcut icon" type="image/png" href="toto.png">
Quand on ouvre normalement une page HTML, on lance ce qui s'appelle un navigateur, c'est-à-dire une certaine application, qui est Internet Explorer, ou Netscape (ou autre moins connu), dans laquelle votre page est chargée en tant que donnée.
Grâce à Windows (merci Bill ), votre page HTML peut devenir elle-même une application, sans pour cela démarrer une application tierce, c'est-à-dire que votre fichier HTML peut directement être exécuté par Windows.
Pour cela, il suffit de lui donner l'extension ".hta" au lieu de ".htm". Faites l'essai...
Un fichier texte étant un fichier HTML particulier, on peut très bien aussi renommer un ".txt" en ".hta".
En fait, "HTA" signifie "HTML Application". Il est documenté dans le site Microsoft, rubrique HTA. On peut personnaliser le "look" de la fenêtre avec la balise HTA:APPLICATION dans l'en-tête du HTML. Examinez cet exemple: remarques sur les boutons radio, un peu plus haut.
Remarque, cet exemple peut vous faire peur, c'est normal: il faut se méfier de tout exécutable de provenance inconnue. Enregistrez-le sur votre disque et regardez-le tranquillement sous éditeur. Vous verrez qu'il est inoffensif (car pur HTML, pas bien méchant...), et pourrez alors l'exécuter en toute confiance. Si vous exécutez la copie (en double-cliquant dessus), éditez-le avant et préfixez le nom de l'icône et du papier peint avec l'adresse absolue de mon site (ex: background="http://perso.libertysurf.fr/eric.hurtebis/images/fondpap.jpg")
N'hésitez pas:
Mise à jour: