Vous avez remarqué que vos images et/ou texte qui était correctement positionné sous IE4 (DHTML, CSS Positionning) ne le sont plus sous IE5 !
En fait, vos pages sont à fait visibles correctement sous IE5 mais il faut changer le code des feuilles de style, surtout pour l'attribut style="position:absolute". En effet, IE5 exige que vous placiez l'attribut supplémentaire (par rapport à IE4) "width:" !

Ceci n'est pas visible par Netscape ;-)

Si vous avez Internet Explorer 4.x, le résultat devrait être le même, mais avec IE5, seule la seconde ligne est réellement centrée. La seule différence, est que j'ai ajouté "width:100%" dans le code de la seconde ligne.

Donc, il suffit de reprendre vos pages compatibles sous IE4 et d'ajouter l'attribut "width:" qui très souvent pourra prendre la valeur de 100%, sauf dans certains cas, où vous devrez le calculer.

Une image avec fond transparent ?

Voici deux images, l'une sans transparence et l'autre avec un fond transparent :

Je présume que vous savez que toutes les images sont rectangulaires et que si vous désirez présenter une image avec des bords arrondis, il faut absolument réaliser soit une image avec fond transparent soit, choisir un fond d'image de même couleur (ton) que le fond d'écran de votre page.
Donc, pour obtenir l'effet du bonhomme posé sur le fond d'écran, soit vous choisissez un fond d'écran rouge (pour l'image exemple) soit rendre transparente la couleur rouge.

Pour vous donner la possibilité de créer une couleur transparente sur une image, il faut que le format de fichier rendre cela possible et actuellement, seuls les formats GIF et PNG le permettent mais le plus courant sur Internet est certainement le format GIF.
Des logiciels spécialisés vous permettent aisément de faire cela : PSP (shareware), Microsoft Gif Animator (gratuit), Gif Movie Gear (shareware), Photopaint... Vous pouvez télécharger sur le site Microsoft Gif Animator, qui est totalement gratuit ainsi que Gif Movie Gear qui est très puissant et très peu cher. Ces deux produits sont spécialisés pour créer des Gif Animés et si vous désirez connaître la procédure pour créer ceux-ci, allez consultez ma page Gif Animé de la section "Outils".

Je vais ici plutôt développer la possibilité qu'ils donnent de créer aussi des images avec fond transparent. Pour cet exemple, nous allons employer Microsoft Gif Animator.

Réalisation

Après avoir téléchargé MSGA (Microsoft Gif Animator), par "Démarrer/programmes" lancer celui-ci. Ensuite, choisissez le bouton "Open" (CTRL+O) et parcourez l'arborescence de votre disque dur pour trouver le fichier bonhom1.gif. Dans l'onglet "Image", sélectionnez dans la liste déroulante "Restore background" et cliquez dans la case à cocher "Transparency", ensuite cliquez sur le petit carré de couleur (rouge ici) pour choisir la couleur qui doit être transparente (invisible) dans les couleurs de l'image (une fenêtre vous est proposée), enfin sauvegardez l'image soit sous le même nom (la première est écrasée) soit en donnant un nom différent et c'est terminé. Pour visualisez les différentes étapes, employez le bouton ci-dessous mais un peu de patience pour le chargement du GIF animé...

J'ai placé mes fichiers sur le serveur et certaines images s'affichent, d'autres pas ! Même chose pour certaines pages ?

La plupart des serveurs actuels (provider) sont en UNIX, or Windows9x ne fait pas la différence entre les minuscules et les majuscules pour le nom d'un fichier ! Comme UNIX fait cette différence, lorsque vous placez vos fichiers sur le serveur, alors qu'en local (PC) cela fonctionne, sur le serveur Web, cela ne fonctionne plus, c'est-à-dire, les fichiers dont le nom n'est pas strictement identique à ceux que vous avez intégrés dans vos codes HTML ne s'affichent pas ! Angoisse...
Il faut donc vérifier l'orthographe parfaite des noms de fichiers (images ou autres) dans vos pages HTML et sur le serveur (vous pouvez d'ailleurs directement le vérifier sur votre PC).

J'ai réussi à créer ma page avec des cadres, dont l'un sert à choisir des options de parcours de mon site : lorsque je clique sur les liens de ce cadre, les pages appelées ne viennent pas dans le cadre de droite mais bien dans ce même cadre ?

La raison est assez simple. Lorsque vous créez des liens externes (voir "Initiation rapide à WebExpert" ou " Page exemple"), vous devez spécifier dans l'onglet "Cibles pour cadres", la cible c'est-à-dire le cadre dans lequel votre page appelée doit venir s'insérer. Par défaut, ce sera dans une autre page plein écran ou, le cadre d'où est appelé la page... Donc, pour que la page appelée vienne se placer dans un autre cadre que celui où se trouvent les liens, il faut ajouter la cible (TARGET = "nom du cadre voulu"), par exemple, cela donne : "<A HREF="autrepage.html" TARGET="cadrededroite">Lien externe<\A> où "autrepage.html" est la page appelée par le lien externe et "cadrededroite" le nom du cadre de droite. De cette façon, lorsque l'utilisateur va cliquer sur le lien externe (cadre de menu), la page appelée va venir s'insérer dans le cadre de droite. Voilà, le problème est résolu ;-)
Vous pouvez trouver toute une explication détaillée sur les cadres dans la page "Cadres" de ma section "OUTILS "

Je voudrais mettre en retrait du texte, par exemple pour un fond d'écran qui oblige à déplacer le texte vers la droite par exemple où pour placer du texte à un endroit précis de l'écran ?

<blockquote>
texte
</blockquote>

La deuxième manière de procéder, c'est d'employer un tableau (onglet "Tableaux, cadres et Listes" de WebExpert) et de configurer celui-ci de manière à ce que le texte soit placé exactement où vous le désirez dans l'écran : sur ce site, j'emploie les deux manières en divers endroits et sur cette page, c'est la première qui est employée. Une explication brève sur les tableaux est donnée dans "Initiation rapide à WebExpert" et dans la page "Page exemple" de ma section "OUTILS". Enfin, vous pouvez consulter ma chronique sur les tableaux et lien.

Comment faut-il faire pour mettre ses fichiers sur le serveur du provider ?

En premier lieu, vous devez bien sûr posséder un dossier qui vous est destiné sur le serveur du provider ! Pour y placer vos fichiers, vous devez employer un programme spécial (FTP) qui va réaliser cette procédure. Beaucoup de programmes FTP existent en shareware, je vous conseille d'employer "FTPExpert", que je vous recommande chaudement car il est très performant et convivial. Si vous désirez un programme totalement gratuit, mais en anglais, vous pouvez employer ws_ftp32 dont vous trouverez un bref emploi dans ma page FTP, de ma section "OUTILS".

Comment placer des liens et des images dans ma page ?
Comment insérer un formulaire ?

La question est vaste et pour vous répondre, je vous renvoie à ma "Page Exemple" de la section "OUTILS" ou dans les chroniques de Page-Web "Créer son propre site: étape par étape...". Vous pourrez y trouver une explication générale ainsi qu'une page exemple et d'autres explications pratiques pour des questions particulières : cadres, formulaire...

Comment éditer des pages Web ! Faut-il un logiciel spécial ?

Avec un traitement de texte normal, vous ne pourrez pas éditer une page en HTML. Avec Word 6 ou 7, vous avez la possibilité d'employer un add-on fourni par Microsoft, l'assistant HTML pour Word, mais vos pages seront peu sophistiquées. Avec Office 97, cela est résolu car celui-ci permet de créer et importer des fichiers HTML.
Néanmoins, je vous conseille un logiciel spécialisé comme WebExpert, car celui-ci trouve toute son utilité, même en utilisation combinée avec Office 97 (ce que je fais). L'avantage de ce shareware, c'est que celui-ci est totalement en français et après une période de 25 essais (en utilisation complète), vous devez vous enregistrez, mais pour une somme modique. Vous pouvez le télécharger maintenant.

Je voudrais trouver du matériel pour créer mes pages Web ?

Vous avez trouvé ! Non seulement, je vous en propose directement sur le site, mais bien sûr, vous donne également des liens vers des sites tout à fait spécialisé en ce domaine : Animations, Fonds d'écran et Images.

Je voudrais créer moi-même des Gif animés (animations) ! Pourriez-vous me dire comment faire ?

Absolument, et c'est une des nouveautés du site ! Je vous fourni le logiciel (gratuit) fourni par Microsoft (Microsoft Gif Animator) que vous pouvez télécharger directement (gifsetup.exe) et surtout, comment l'employer, ceci avec un exemple pratique ! Cela se trouve également dans ma section "OUTILS", page "Gifs animés".

Sur votre site, j'ai vu un texte déroulant : serait-ce une applet ?

Effectivement, et celui-ci est en libre emploi. Si vous voulez des explications sur ce qu'est un applet java, consultez ma page "Applet" dans ma section "OUTILS".

Placement d'images avec espacement, avec ou sans texte.

Vous pouvez jouer sur l'attribut de la balise <IMG> qui permet de préciser un espacement horizontal et/ou vertical : HSPACE=x ou VSPACE=x. J'ai choisi pour les deux exemples suivants un espacement horizontal de 10 pixels :HSPACE=10

Images espacées

Voici le code :

<DIV ALIGN="center">
<IMG SRC="image.gif" BORDER=0 WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle">
<IMG SRC="image.gif" BORDER=0 WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle">
</DIV>

Images, espacées avec du texte

Vous pouvez employer la même technique qui vient d'être décrite, en ajoutant simplement du texte entre le code des deux images, mais attention, si le texte est trop important, le retour à la ligne automatique empêchera l'effet escompté : dans ce cas, il faudra employer un tableau invisible.

Texte situé entre les images.

<DIV ALIGN="center">
<IMG SRC="image.gif" BORDER=0 WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle">
Texte situé entre les images.
<IMG SRC="image.gif" BORDER=0 WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle">
</DIV>

Images espacées avec un texte plus conséquent

Emploi d'un tableau invisible...

Voici du texte, plus important, qui est situé entre les images et qui est justifié. Si cette portion de texte dépasse une largeur déterminée par la page, il est nécessaire de recourir à cette technique du tableau (invisible) et qui va permettre de placer sur la page les images et le texte...

Vous devez déterminer quelle largeur vous désirez pour la colonne du texte, dans cet exemple, 200 pixels ont été choisis (WIDTH=200)

<TABLE BORDER=0>
<COL SPAN=3>
<TR>
<TD><IMG SRC="image.gif" BORDER=0 WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle"></TD>
<TD WIDTH=200><DIV STYLE="text-align:justify;">Voici du texte, plus important,
qui est situé entre les images et qui est justifié. Si cette portion de texte dépasse une largeur déterminée par la page,
il est nécessaire de recourir à cette technique du tableau (invisible) et qui va permettre de placer
sur la page les images et le texte...</DIV></TD> <TD><IMG SRC="image.gif" BORDER=0
WIDTH=140 HEIGHT=80 HSPACE=10 ALIGN="middle"></TD> </TR> </TABLE>

Ces techniques ont l'avantage d'être visibles par tous les navigateurs, mais vous pouvez également "positionner" vos images et votre texte par du "CSS positionning" qui nécessite dans ce cas des navigateurs de génération 4.

Image, avec une légende

Si vous devez ajouter une légende sous une image, une façon simple de procéder est d'employer un tableau (invisible). Bien sûr, si cette image doit être placée à côté de texte, vous employez la technique décrite pour l'espacement des images et au besoin, vous devrez créer un tableau plus complexe, qui pourrait éventuellement contenir le tableau de l'image avec la légende. En effet, vous pouvez créer des tableaux imbriqués.

légende de l'image

<TABLE BORDER=0>
<COL>
<TR>
<TD><IMG SRC="logoWE.gif" BORDER=0 WIDTH=140 HEIGHT=80></TD>
</TR>
<TR>
<TD align="center">légende de l'image</TD>
</TR>
</TABLE>

Insérer du son sur vos pages

Pour explorer, c'est très simple, mais uniquement Internet Explorer (toutes versions) pourra lire le son :

où 3 = nbre de fois où le fichier est joué (-1 = toujours)

Pour que le son soit audible par IE et Netscape, voici le code nécessaire :

<EMBED SRC="fichier.mid" WIDTH=145 HEIGHT=60 ALIGN="middle" LOOP="true" AUTOSTART="true">

Loop="true" signifie répétition à l'infini;
AUTOSTART="true" fait démarrer le son automatiquement au chargement de la page;
WIDTH=145 HEIGHT=60 : c'est ici que vous pouvez jouer sur la largeur et la hauteur de l'icône;
ALIGN="middle" : l'icône est centrée

Certains m'ont demandé le code pour Crescendo :

<EMBED TYPE="music/crescendo" SONG="fichier.mid" PLUGINSPAGE="http://www.liveupdate.com/dl.html" WIDTH=150 HEIGHT=55>

Fichiers pour téléchargement

Pour proposer en téléchargement un fichier EXE ou autre, la procédure est la même que pour un lien externe normal, mais au lien de mettre une adresse "http://...", vous placer le nom du fichier en question. Attention, si vous faites cela pour les fichiers de la suite Office de Microsoft, et pour autant que le visiteur possède cette suite sur son PC, le fichier ne sera pas téléchargé mais bien chargé dans le programme. Donc, si vous voulez proposez en téléchargement des fichiers (doc, xls...), compactez-le en zip, de cette manière il sera téléchargeable. Voici un exemple de code :

Bien sûr, si votre fichier ne se trouve pas sur le serveur, il faut indiquer son adresse complète ou sa référence à un dossier s'il est placé dans un dossier spécifique de votre serveur.

Exemples de DHTML sur du texte

Un exemple avec changement de couleur et lien (remplacer "javascript://" par l'adresse du lien)

E-MAIL

Pour supprimer le changement de couleur après le passage de la souris : changer onmouseout = "ie4?this.style.color='':null"

Un exemple avec changement de couleur et de police :

E-MAIL

En fait, on ajoute [ie4?this.style.color='yellow':null] pour que Netscape ignore l'action

La même chose sans changement de couleur :

Avec changement de couleur uniquement :

Texte qui change en fonction de la souris

Ici il y a changement de texte et la fonction "nada" est nécessaire... On change le contenu du texte avec le passage de la souris: j'ai ajouté de la couleur également, sans couleur, on enlève [this.style.color ='blue';]

Texte avant le passage de la souris

Pour le lien, vous remplacez "javascript://" par l'adresse de votre page.

Pour employer la fonction "Nada", vous devez ajouter dans l'en-tête de votre page le script suivant :

Sans changement de couleur :

Texte avant le passage de la souris

Pour Netscape, il faut qu'il annule le changement, donc on ajoute : "ie4?changement:null", ainsi Netscape ne prend pas en considération le changement de style ou autre demandé pour IE4.0.

Si vous êtes intéressé par les effets DHTML, je vous conseille de visionner mon tutoriel TutorDHTML pour de plus amples explications.

Copyright sur Internet ?

Il faut savoir que sur Internet, le copyright existe ! Cela semble anormal pour certains, mais la propriété intellectuelle d'une oeuvre, quelle qu'elle soit, reste et demeure la propriété de son auteur, et c'est heureux. Donc, peu importe le support (CD, cassette, vidéo, site Web), les droits des auteurs sont protégés (pensez à toute la problématique actuelle des fichiers "MP3" qui sont des copies frauduleuses des CD musicaux existant sur le marché, les copies de cassettes vidéo etc.) et il en va de même sur Internet. 

Si donc vous désirez "copier" une image ou un texte, partie de texte ou que sais-je sur un site, il faut en demander la permission expresse au propriétaire. Pour les images ou photos, on commence d'ailleurs à incorporer au graphique un copyright, qui ne pourrait pas être enlevé et qui manifesterait ainsi qui en est l'auteur. En effet, trop de copies existent...

Ceci dit, il existe sur Internet des sites qui proposent des images, logo, fond d'écran etc. qui sont libres de droit et que vous pouvez copier à votre guise, pour un emploi privé. Dans le cas d'usage professionnel, c'est souvent différent mais il faut traiter au cas par cas.

Le Web Clip Empire de Visicom Média par exemple est un ensemble de CD qui contiennent des gifs animés, cliparts, graphiques etc. libres de droit et vous pouvez les employer dans la création de votre propre site Web.

Si vous ne respectez pas ces exigences, vous risquez d'encourir des sanctions pénales car Internet n'est pas une boîte "fourre-tout" où tout le monde se sert comme il en a envie...

Je pense qu'il y aura toujours des gens qui ne respecteront rien, mais la loi, justement, protégera les auteurs réels. Ceci dit, il existe encore beaucoup d'espace libre sur Internet et j'espère que cela continuera, mais il faut aussi comprendre que le travail de certains, parfois très conséquent, ne doit pas servir à d'autres, par le simple fait d'un "pillage", étant sauf bien sûr aussi l'emploi privé, quand cela est permis. 
Cette question était très épineuse, j'espère y avoir répondu suffisamment...

Fichier de musique "*.mid", "*.wav" etc.

Cette question, rejoint en un sens la question précédente, car il y a peut-être un copyright sur la musique que vous désirez copier ! Cela dit, il existe encore des musiques qui soient "libres", soit parce que l'auteur en a décidé ainsi, soit parce que les droits d'auteur sont passés dans le domaine public (+ de 100 ans).

Si tel est le cas du fichier ("*.mid", "*.wav"...) que vous voulez récupérer, il est possible de faire une recherche dans le dossier "cache" du navigateur et vous pourrez y trouver le fichier qui vous intéresse. En effet, le navigateur télécharge tous les fichiers du site (HTML, midi, gif etc.) dans un endroit (cache) de votre disque dur, et il est possible de "récupérer" ceux-ci (attention au copyright) en recherchant le dit fichier dans ce dossier. 

Pour internet Explorer, c'est le dossier "Temporary Internet Files" et pour Netscape, c'est "C:\Program Files\Netscape\Users\ar\cache". Dans ce dernier cas, "ar" représente l'utilisateur du profil, créé lors de l'installation de Netscape.

Il existe aussi sur le Net des sites qui proposent des musiques "libres de droit", mais faites bien attention, car certains ne semblent pas très "au fait" du copyright, et pourrait vous induire en erreur...

Pour imprimer vos pages...

Il faut employer la propriété : self.print().

Soit par un lien (pseudo-ancre : voir TutorDHTML) ou par un bouton.

Lien

Ajouter la propriété sur un événement, par exemple pour un lien particulier (pseudo-ancre), dans le sens que l'on va annuler l'action du click, par HREF="javascript://". En effet, si l'on place seulement HREF="#", cela pose parfois des problèmes sous Netscape, qui fait apparaître l'aborescence de votre HDD ! HREF="javascript://" par contre ne pose aucun problème sous les deux navigateurs...

Code du pseudo-lien

<A HREF="javascript://" OnClick="self.print()" title="Pour lancer l'impression de cette page...">Pour imprimer cette page</A>

Vous pouvez, comme d'habitude, ajouter l'attribut title="..." pour placer une info-bulle explicative (seul Internet Explorer actuellement).

Tester ce lien : Pour imprimer cette page

Bouton

Pour la parfaite compatibilité entre les deux navigateurs (de version 4.x et plus), il est préférable d'insérer le bouton dans une balise <FORM>.

Code du bouton

<FORM>
<INPUT STYLE="cursor:hand" TYPE="button" VALUE="Pour imprimer cette page" onClick="self.print()" title="Pour lancer l'impression de cette page...">
</FORM>

Pour faire le test directement :

Notez que les versions 3 ne comprennent pas cette fonction...