Construction...
|
|
|
|
Une page HTML est composée d'instructions qui sont lues et exécutées séquentiellement. Si le code source est bien écrit, le navigateur l'interprêtera comme il faut (parce qu'il s'agit d'un interprêteur, le code n'est pas compilé). A condition bien sûr que la version du HTML que vous codez soit inférieure ou égale à celle implémentée dans le navigateur. Et puis il faut être "cross-browser" , la partie n'est pas forcément gagnée...
Le DHTML permet de créer des pages Web dynamiques et interactives. Il ne s'agit pas d'un langage spécifique, mais d'un kit de techniques qui utilisent des ressources comme le Javascript, les feuilles de style (CSS), les layers (calques), les commandes internes des Navigateurs de génération 4+ et le DOM de la norme W3C.
Les effets produits par le DHTML sont divers et variés. Les limites ne sont données que par l'imagination... et l'implémentation correcte du HTML (dhtml, css, etc.) dans le navigateur ! Voici quelques exemples dans le tableau ci-dessous. Promenez votre mulot au dessus des cellules ou cliquez selon le cas:
| Changement de police | Curseur en forme de croix | Cellule rouge |
 Survolez l'image ! |
Et si vous n'avez pas de lecteur 
, je peux tout de même vous proposer une fenêtre en 16/9 ème. Cliquez sur le bouton
Si ça ne vous plaît pas, vous pouvez toujours essayer un des trois autres boutons ci-dessous:
Il n'y a pas eu d'effet sur certaines cellules ? Normal, il n'y a pas eu d'adaptation à un navigateur particulier. J'ai mis des fonctions-instructions DHTML ou JavaScript "brut de fonderie". Il faudrait faire une discrimination du browser et adapter le code pour que cela fonctionne...
Une page web est un fichier dont l'extension peut être htm ou html. Un simple éditeur de texte (Le "Bloc-notes" (notepad) pour les pécéïstes et "SimpleTexte" pour les Macintoshiens) peut servir pour la créer et/ou la modifier. Son contenu peut ressembler à ça:
|
| <html><head><title>Ma première page WEB</title> |
| <!-- Cette ligne est un commentaire. Elle ne sera pas affichée. --> |
| </head> |
| <body bgcolor="OldLace"> |
| <!-- Début du document affiché --> |
| <center><h1>Mon super site perso</h1></center> |
| Bonjour à tous. Je suis content que vous lisiez ma page !<BR> |
| Voici un site à visiter absolument: |
| <a href="http://www.mamosa.org/jenfi.home/">Jenfi Home</a> |
| <br><br><br> |
| J'sais plus quoi vous dire, heuuu... |
| <br><BR><BR> |
| <b>Bon ! à bientôt "one ze oueb !"</b> |
| <br> |
| <center><IMG src="monlogo.gif"></center> |
| </body> |
| </html> |
Enregistrez votre travail dans un fichier nommé "page1.html", par exemple. Lancez votre navigateur favori. Ouvrez votre page (généralement par le choix "Ouvrir" du menu "Fichier"). Et l'affichage pourrait ressembler à ceci:
|
|
| Mon super site perso | |
| Bonjour à tous. Je suis content que vous lisiez ma page ! | |
| Voici un site à visiter absolument: Jenfi Home | |
| J'sais plus quoi vous dire, heuuu... | |
| Bon ! à bientôt "one ze oueb !" | |
 | |
|
|
Les balises (<html><head><title><body><div><p><font>, etc.) doivent s'imbriquer les une dans les autres comme une poupée russe. C'est à dire qu'une balise ouverte doit toujours être fermée (le nom de la balise est alors précédée d'un "/" (slash ou fraction), exemple: <title>Ma page</title>. La première balise ouverte sera la dernière fermée, exemple: <html><head></head><body><p>Bla bla bla...</p><img src="image.jpg"><p>Glou glou glou...</p></body></html>. Vous avez sûrement constaté que la balise <img> n'était pas fermée. C'est normal, il y a des exceptions en HTML 4. Mais celles-ci n'existeront plus en XHTML (HTML version 5), il faudra alors tout fermer (ce qui va nous permettre d'éviter de gérer l'exception, et les courants d'air...).
Aussi, les caractères accentués doivent être écrit en ASCII pur (les codes 32 à 127). Pour afficher des caractères accentués dans le navigateur, il faut que dans le fichier source ils soient écrits comme ceci:
| à | à | |
| è | è | |
| é | ée | |
| ê | ê | |
| ë | ë | |
| î | î | |
| ù | ù | |
| ç | ¸ | |
| " | " | |
| © | © | |
| < | < | |
| > | > | |
| ° | ° |
Ce tableau est loin d'être complet. Pour en savoir plus, je vous propose de consulter un des nombreux livres traitant du HTML où une table des caractères accentués se trouve généralement en annexe.
N'oubliez pas le "&" (ampersand ou et commercial) en début et le ";" (semi-colon ou point-virgule) à la fin. Vous pouvez saisir cette codification ou taper avec les caractères accentués (c'est plus facile pour se relire !) et faire un "Chercher/Remplacer" dans votre éditeur pour qu'il fasse la substitution sans rien oublier (attention tout de même aux lignes commentaires).
 | La solution pour les caractères accentués html se trouve ici ! |  |
Enfin, si le virus des pages web vous prend, je vous recommande chaudement le site en français MDL Collège en cliquant sur son logo ci-dessous. Vous y apprendrez suffisamment pour vous attaquer à votre prochain site, l'améliorer, le rendre encore plus attrayant. En plus c'est tout en français v325.14 Tcherno et les thèmes sont traités avec humour.
Des suisses qui font du JavaScript à fond à fond ! avec les explications en anglais.
Des sources JavaScript commentés dans la langue de Shakespeare.
Si vous voulez (faire) vérifier la structure de vos pages HTML, vous pouvez le faire chez W3C en cliquant sur son logo ci-dessous, là aussi vous pourrez perfectionner votre anglais.
Le référencement dans les moteurs de recherche est important. Voici un site qui ce charge de ce travail pour vous: référencement gratuit et optimisé sur 81 moteurs de recherche.
Bonne construction !
l'adresse de cette page à un(e) ami(e).
Sans titre - Mon éditeur de texte favori
Ma première page WEB - Mon navigateur favori