HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani. Table des matières

Transcription

1

2 Chapitre 1 : Un réseau planétaire Table des matières 1.0 Un réseau planétaire Qu'est-ce au juste Internet? Description d'une toile d'araignée Protocol TCP/IP Types de connexions Structure de l'adresse d'un ordinateur sur Internet Qui contrôle Internet? Fonction exacte du Network Information Center (NIC) Chapitre 2 : Introduction au langage HTML 2.0 Introduction au langage HTML Vos premiers Outils Le document Html minimum Le texte Les titres et les listes Les liens Lien externe Lien local Lien mixte Les images GIF ou JPEG? Commentaires L'attribut Align Lien sur image Les séparateurs Les arrières-plans Les tableaux Les frames Chapitre 3 : Le choix d'un éditeur 3.0 Le choix d'un éditeur Critères généraux Des noms! Des noms! Les éditeurs classiques Les extensions de Word Page 1

3 Chapitre 4 : Des conseils en vrac HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani 4.0 Des conseils en vrac...49 Chapitre 5 : HTML avancé en bref 5.0 HTML avancé en bref Les images réactives En-tête Balises META Présentation Les lecteurs Le navigateur Les indispensables Les utiles Les éventueles Les formulaires CGI Mailto Définition d'un formulaire Définition Commentaires Ligne de texte Définition Commentaires Zone de saisie Définition Commentaires Liste déroulante Définition Commentaires Bouton d'option Définition Commentaires Case à cocher Définition Commentaires Bouton de commande Définition Commentaires Submit et Reset Submit Commentaires Reset Commentaires Un livre d'or...66 Page 2

4 Chapitre 6 : DHTML 6.0 DHTML Introduction Définition Les feuilles de style Les langages de scripts Les objets et leur positionnement Déceptions Espoirs Positionner avec Netscape La balise <LAYER> Exemple Positionner avec Explorer L'approche par les feuilles de style Position absolue ou relative Positionner une image Superposer du texte sur une image Le "Document Objet Model" La notion d'objet Le document Object Model ou DOM Le XML en bref En conclusion...76 Chapitre 7 : JavaScript 7.0 Javascript Javascript n'est pas Java Un peu de théorie objet Les objets et leur hiérarchie Les propriétés des objets Vos outils pour le Javascript Un browser compatible Javascript Un solide bagage en Html Un bon éditeur de texte Le Javascript minimum La balise <SCRIPT> Les commentaires Masquer le script pour les anciens browsers Où inclure le code en Javascript? Une première instruction Javascript Votre première page Html avec du Javascript Remarques...85 Page 3

5 7.4.8 Versions du langage Javascript Extension.js pour scripts externes Toujours des commentaires Alert() Afficher du texte Méthode de l'objet document La méthode write() Exemple L'instruction writeln() De la belle écriture en Javascript Les instructions de formatage de document Utiliser des variables Les variables en Javascript La déclaration de variable Les données sous Javascript Exercice Les noms réservés Variables globales et variables locales Les opérateurs Les opérateurs de calcul Les opérateurs de comparaison Les opérateurs associatifs Les opérateurs logiques Les opérateurs d'incrémentation La priorité des opérateurs Javascript Les fonctions Définition Déclaration des fonctions L'appel d'une fonction Les fonctions dans <HEAD>...<HEAD> Exemple Passer une valeur à une fonction Passer plusieurs valeurs à une fonction Retourner une valeur Variables locales et variables globales Les événements Généralités Les événements Les gestionnaires d'événements Gestionnaires d'événement disponibles en Javascript La syntaxe de onmouseover La syntaxe de onmouseout Changement d'images L'image invisible Les conditions L'expression if Page 4

6 L'expression for L'expression while L'expression Break L'expression Continue Les formulaires Généralités Déclaration d'un formulaire Le contrôle ligne de texte Les boutons radio Les boutons case à cocher (checkbox) Liste de sélection Le contrôle textarea Le contrôle Reset Le contrôle Submit Le contrôle Hidden (caché) Un peu de tout Les boîtes de dialogue ou de message La méthode alert() La méthode prompt() La méthode confirm() Une minuterie L'emploi de this Les messages d'erreur Bon courage! Les types d'erreurs Les erreurs au chargement Les erreurs à l'exécution Les erreurs de logique L'objet window Propriétés et méthodes de l'objet window Utilisation de la barre d'état Ouverture et fermeture de fenêtres Exemples L'objet string Généralités La propriété length La méthode CharAt() La méthode indexof() La méthode LastIndexOf() La méthode substring() La méthode tolowercase() La méthode touppercase() L'objet Math abs() ceil() floor() Page 5

7 round() max() min() pow() random() sqrt() parsefloat() parseint() eval() Les fonctions trigonométriques Les fonctions logarithmiques L'objet Date newdate() getyear() getmonth() getdate() getday() gethours() getminutes() getseconds() Exemple Exemple D'autres propriétés L'objet Navigator Généralités Passage en revue Exemples L'objet Array Généralités Tableau à une dimension Propriétés et méthodes Tableau à deux dimensions Base de données Les frames Généralités Propriétés Echange d'informations entre frames Chapitre 8 : VBscript 8.0 VBscript Le VBscript VBscript ou Javascript VBscript et Javascript Les outils pour VBscript Page 6

8 8.5 Un peu de théorie objet Le VBscript minimum La balise <SCRIPT> Les commentaires Masquer le script pour les autres browsers Où inclure la balise de script Attention Votre première page Html avec du VBscript Les boîtes de messages La boîte de message - MsgBox La boîte de message - Alert La boîte de saisie - InputBox La boîte de message - MsgBox - évoluée Afficher du texte Méthode de l'objet document La méthode write Exemple Les variables Les variables en VBscript La déclaration de variable Les types de données sous VBscript Variables locales et variables globales Les opérateurs Les opérateurs arithmétiques Opérateurs de comparaison Opérateurs logiques Opérateurs de concaténations Les procédures Généralités Déclaration d'un sous-programme L'appel d'un sous-programme Déclaration d'une fonction Retour de la valeur dans une fonction Appel d'une fonction Les conditions L'expression if L'expression For...Next Autres tests conditionnels Les événements Généralités Les événements Les procédures événementielles Exemple Page 7

9 8.14 Les contrôles de formulaire Généralités Procédure événementielle simplifiée (ou explicite) Le contrôle ligne de texte Les boutons radio Liste de sélection Les tableaux Les tableaux de longueur fixe à une dimension Tableau dynamique à une dimension Pour connaître la taille d'un tableau Les tableaux à plusieurs dimensions Incorporation des ActiveX Généralités La balise <OBJECT> La balise <PARAM> Les messages d'erreurs Les types d'erreurs Les erreurs au chargement Les erreurs à l'exécution Les erreurs de logique Les grands classiques des erreurs On Error Resume Next L'objet err Chapitre 9 : Votre site Internet 9.0 Votre site Internet Trouver un contenu Structurer le contenu Communiquer avec votre public Connaître le langage Html Trucs et astuces de référencement Référencez-vous De l'importance des mots-clés La page d'accueil en frames La page d'accueil avec une image La page d'accueil avec une image mapée Chapitre 10 : Compatibilité d'un site 10.0 Compatibilité d'un site Démarche Exemple d'incompatibilité Page 8

10 10.3 Tableau comparatif Statistiques Précautions préliminaires Microsoft, Netscape et les autres Du côté de chez Microsoft Du côté de chez Netscape Du côté du Web Attitude 1: Je veux écrire pour tous les browsers Attitude 2: Je teste mon site sous un seul navigateur Attitude 3: Site high-tech Attitude 4: Ecrire pour le maximum d'internautes Conseils Compatibilité des fichiers Compatibilité des balises Les balises propriétaires Plus vicieux, des attributs différents de balises communes Compatibilité des graphiques Conseils usuels Pour les spécialistes Moralité Chapitre 11 : Messagerie 11.0 Messagerie, conventions d'écriture des messages Je reçois parfois des messages avec des signes étranges Respectez certaines règles pour rédiger les messages Problèmes dans la messagerie Chapitre 12 : Liste des balises Html 12.0 Liste des principales balises Html Chapitre 13 : Caractères spéciaux 13.0 Caractères spéciaux Chapitre 14 : Glossaire 14.0 Glossaire Page 9

11 Un réseau planétaire Page 10

12 1.0 Un réseau planétaire 1.1 Qu'est-ce au juste Internet? HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani Si tout le monde en parle, peu de gens savent ce qu'est réellement Internet et c'est fou ce que l'on entend parfois à son sujet (en bien ou en mal d'ailleurs)! Du point de vue technique, le réseau Internet est né aux Etats-Unis dans les années 70, lorsque l'arpa (Advanced Research Project Agency) décida de mettre sur pieds son réseau ARPAnet. Le but de ce réseau était de relier efficacement les Centres de Recherches entre eux. D'une part pour partager les ressources informatiques et d'autre part pour échanger du courrier électronique. Du fait de son application militaire, son principe fondamental était de pouvoir résister à toutes sortes d'agressions (attaques militaires, bombardements, catastrophes naturelles...). Ses concepteurs eurent une idée révolutionnaire pour l'époque : le réseau ne devait avoir aucun point névralgique (central ou déporté) dont l'arrêt ou le dysfonctionnement aurait pour conséquence le blocage total du réseau. Les données transitant par le réseau devaient pouvoir être re-routées automatiquement vers un autre canal en cas de problème sur une partie du réseau. Le Département de la Défense (le DoD) fut secondé pour son élaboration par les grandes universités américaines. Ces derniers imaginèrent et développèrent les protocoles de transmission. D'ARPAnet le militaire à Internet le civil, il n'y avait qu'un pas qui fut vite franchi. Timidement dans un premier temps, le réseau commença réellement à prendre son essor dans les années 80 avec le début de la micro informatique. A cette époque, les micro-ordinateurs commençaient à remplacer les terminaux passifs dans les grosses entreprises et dans les universités. Mais les coûts encore relativement élevés des moyens à mettre en oeuvre pour établir une liaison, le réservaient aux universités et aux grosses entreprises. Dans les années 90, l'arrivée massive dans les foyers américains de la micro informatique familiale fut le véritable démarrage de l'accès grand public. En provoquant d'ailleurs un véritable raz de marée de nouveaux arrivants. Internet n'est pas, comme certains l'imaginent, le croient ou le disent un gigantesque ordinateur central sur lequel seraient connectés des milliers, de millions d'utilisateurs (techniquement c'est d'ailleurs impossible). C'est un ensemble de réseaux de nature plus ou moins différente appartenant à des sociétés différentes, disséminés aux quatre coins du monde. Tous ces réseaux sont interconnectés à l'aide de liaisons très diverses : RTC, lignes spécialisées, lignes hauts débits, etc... Du point de vue pratique, cet ensemble de réseaux apparaît aux yeux de l'utilisateur comme un seul et même réseau : Internet! Page 11

13 1.2 Description d'une toile d'araignée HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani Tous ces réseaux tissent une sorte de gigantesque toile d'araignée d'un bout à l'autre de la planète. Les milliers de réseaux qui le constituent sont composés de sortes d'ordinateurs du plus simple au plus sophistiqué et coûteux, si aucun modèle ni aucun constructeur n'est imposé sur le réseau (on peut qualifier ce réseau d'égalitaire), il faut néanmoins que toutes ces machines puissent discuter entre elles! Elles le font à l'aide d'un langage universel : le protocol TCP/IP. 1.3 Protocol TCP/IP TCP/IP (Transmission Control Protocol/Internet Protocol) est le principal protocole de transmission utilisé sur Internet, il permet à différents types d'ordinateurs de communiquer entre eux sans se soucier ni de quel type ils sont (super calculateur, Macintosh, PC, Amiga, etc...), ni de leur puissance respective. Le réseau est conçu de telle manière qu'il est pratiquement impossible de l'interrompre, respectant ainsi les directives du projet ARPAnet. Si une branche du réseau est endommagée, les données emprunteront alors automatiquement un autre canal pour parvenir à leur destinataire. Cet avantage possède aussi ses inconvénients : la confidentialité et la sécurité des données! En effet, les données transitent de sites en sites via des routeurs pour arriver à leur destinataire, et il ne serait pas très compliqué à une personne mal intentionnée de les intercepter, de les modifier ou de les détruire. Dans le cas de courrier privé les conséquences ne seraient pas très importantes, mais que dire des paiements effectués à l'aide d'une carte ou des courriers à caractère confidentiel! Des solutions de cryptage existent d'ores et déjà et sont employées dans certaines transactions. Sur Internet les frontières et le temps n'existent plus, il est aussi simple et aussi rapide de se connecter à une centaine de mètres de son ordinateur qu'à des milliers de kilomètres. Et pas besoin de passeport ou de visa pour faire le tour du monde. Cette totale transparence des frontières pose certains problèmes législatifs sérieux : tous les pays n'ont pas les mêmes lois et les données qui circulent sur le réseau sont incontrôlables. Elles peuvent très facilement être en opposition avec les lois du pays qu'elles traversent... Page 12

14 1.4 Types de connexions HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani Schématiquement, il existe 3 types de connexions possibles sur l'internet. L'accès Fixe : Ce type d'accès n'est pas destiné, à de très rares exceptions près, aux particuliers. Il nécessite une connexion physique et permanente entre votre machine et l'internet. Cette connexion s'effectue au moyen d'une ligne louée. L accès DialUp : Un accès DialUp, que l on peut traduire par «connexion à la demande», est une connexion s effectuant d une manière ponctuelle, selon les besoins de l utilisateur, par l intermédiaire d un Modem. Par opposition, il existe des connexions dites fixes où l utilisateur est connecté d une manière permanente au réseau. A de très rares exceptions les particuliers n utilisent pas ce genre de connexion du fait de leur prix relativement élevé. Jusqu en 1994, il existait très peu de fournisseurs (ISP) offrant des accès DialUp aux particuliers, aujourd hui ils sont de plus en plus nombreux. Et la guerre des tarifs fait rage... pas toujours au profit de l utilisateur! Page 13

15 L accès à travers un BBS : HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani 1.5 Structure de l'adresse d'un ordinateur sur Internet Pour que deux ordinateurs puissent établir une liaison à travers l'internet, il leur faut une méthode infaillible d'identification. Chaque ordinateur possède un numéro qui lui est propre et qui est unique au monde, le numéro IP. Ce système de numérotation est peut être très pratique pour un ordinateur, mais pour nous, humains, les lettres sont plus parlantes. Il a donc été mis en place un système de nom. Le répertoire qui permet de faire la correspondance entre le nom (compréhensible par un humain) et le numéro IP (compréhensible par les ordinateurs) s'appelle le DNS (Domain Name Server). La numérotation des ordinateurs est régie par certaines règles. Il est composé de quatre groupes de nombres séparés entre eux par des points. Chaque groupe de nombres est codé sur un octet et peut donc prendre une valeur variant de 0 à 255. Cette adresse numérique représente d'une part le réseau sur lequel la machine est connecté et d'autre part le numéro de cette machine dans ce réseau. Exemple d'une fenêtre d'aide de Microsoft (sans commentaire) : Page 14

16 Chaque groupe de nombre est limité à 256 possibilités (en fait un peu moins car certaines adresses sont réservées), il a été mis en place plusieurs types de réseaux appelés "classes". la classe A : elle représente des réseaux de très grande envergure. Dans ce type de classe le premier groupe de nombre représente le numéro du réseau et les trois suivants le numéro de la machine connectée sur ce réseau (soit la possibilité de connecter simultanément jusqu'à 16 millions d'ordinateurs). la classe B : elle représente des réseaux de moyenne envergure. Dans ce type de classe les deux premiers groupes de nombre représentent le numéro du réseau et les deux suivants le numéro de la machine connectée sur ce réseau ( soit la possibilité de connecter simultanément jusqu'à ordinateurs). la classe C : elle représente des réseaux de petite envergure. Dans ce type de classe les trois premiers groupes de nombre représentent le numéro du réseau et le dernier le numéro de la machine connectée sur ce réseau (soit la possibilité de connecter simultanément jusqu'à 256 ordinateurs). Page 15

17 Le nom des serveurs est généralement suivi d'un code pays composé de deux lettres. Ce code est appelé "Top Level Domain" (TLD). Voici quelques codes pays : CODE PAYS AT Autriche AR Argentine AU Australie BE Belgique BR Brésil CA Canada CH Suisse CN Chine DE Allemagne DK Danemark ES Espagne FI Finlande FJ Fidji FR France GP Guadeloupe GR Grèce HK Honk Kong IE Irlande IL Israël IT Italie JP Japon LU Luxembourg NL Pays-Bas NO Norvège NZ Nouvelle Zélande SE Suède SG Singapour TW Taiwan UK Grande Bretagne US Etats-Unis Page 16

18 Il existe aussi des TLD composés de 3 lettres n'indiquant pas le pays d'origine, mais la fonction de l'organisation. Ces serveurs sont généralement situés au Etats-Unis. CODE SIGNIFICATION INT Organisme International COM Entreprise commerciale EDU Education GOV Institution gouvernementale MIL Site militaire NET Prestataire de Service Internet ORG Autre Si dans le cas de l'abonné au téléphone il est possible de consulter un annuaire général, il n'en va pas de même sur Internet. Le réseau a une croissance telle qu'il est impossible de faire un annuaire général. Il existe bien quelques annuaires regroupant les noms de certains abonnés. Mais leur exploitation n'est pas simple : d'une part, ils ne sont pas interconnectés, et d'autre part il n'existe pas de "standardisation" des données Qui contrôle Internet? La particularité du réseau Internet est sa totale liberté (certains le nomment d'ailleurs le réseau anarchique), personne ne le contrôle ou le dirige (et il s'en passe fort bien...). Seule la partie technique est assurée par diverses associations : ISOC (Internet SOCiety) : association à but non lucratif créée en 1991, l'isoc a pour mission "d'accompagner" l'évolution technique de l'internet et de promouvoir son utilisation auprès des différentes communautés (scientifique, académique, industrielle, etc...). IAB (Internet Architecture Board) : est hébergée par l'isoc, on peut le considérer comme l'autorité suprême en matière de réseau et de technique (une sorte de conseil des sages sur le plan technique). Composée de membres volontaires et bénévoles, l'iab contrôle les évolutions technique de l'internet, officialise les RFC, fixe les règles d'attribution des adresses réseaux et les noms de domaines et supervise les travaux de l'ietf et de l'irtf. IETF (Internet Engineering Task Force) : c'est un groupe de travail dit ouvert (tout le monde peut y participer, vous, moi,...) qui s'occupe de proposer des évolutions techniques à court ou moyen terme sur les standards et les architectures. C'est le principal pourvoyeur de RFC (en mode "Draft", car les RFC sont uniquement validées par l'iab). Page 17

19 IRTF (Internet Research Task Force) : moins connu et certainement moins populaire que l'ietf, ce groupe de travail assume les mêmes fonctions que ce dernier mais sur le long terme cette fois. IANA (Internet Assigned Number Authority) : sous-ensemble de l'isoc, ce groupe a la difficile et rébarbative tâche d'enregistrer les numéros de réseaux, les noms de domaines, les numéros de port et tous les codes en général. En fait, l'enregistrement des numéros de réseaux et de domaines est délégué aux NIC de chaque pays (Network Information Center), l'iana n'agissant ici que comme concentrateur d'informations. 1.7 Fonction exacte du Network Information Center (NIC) Les services généraux Network Information Center (NIC) se repartissent en trois parties : - Autorité et gestion du "nommage" français (enregistrement de noms de domaines, suivi des zones installées, suivi de la cohérence des bases européennes RIPE); - Exploitation du service DNS pour la zone ".ch" (suivi du fonctionnement des serveurs de noms primaire et secondaire, développement d'outils d'automatisation de l'exploitation, mise en place d'un serveur d'information, mise en place d'un système de gestion de tickets, étude de la mise en place d'une connectivité de secours); - Coordination nationale et internationale (coordination nationale, coordination internationale [RIPE NCC, InterNic,...], allocation des réseaux IP "last resort registry", installation des serveurs d'adresses inverses pour les blocs IP alloués par le "last resort registry", allocation de numéros de "systèmes autonomes"). Page 18

20 Introduction au langage HTML Page 19

21 2.0 Introduction au langage HTML HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser. Vous avez donc deux interlocuteurs : 1. le browser de votre lecteur. 2. et votre lecteur lui-même. Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont Netscape dans sa version 2 et 3 ainsi que Internet Explorer de Microsoft, mais il en existe beaucoup d'autres. Chaque browser a sa propre façon de travailler. A la différence de votre traitement de texte préféré qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran de celui-ci. En HTML, vous n'avez pas la maîtrise totale de votre document. Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un format de texte très compact mais aussi (par conséquence) peu sophistiqué. C'est le bon vieux format de texte pur et dur, sans fioritures du Bloc-notes ou Notepad de Windows par exemple. Et de plus ce format ASCII a été amputé d'un bit (7 bits au lieu de 8)! Vous serez donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers. Mais récompense suprême... Html est un langage universel qui s'adapte à toutes les plateformes que ce soit Windows, Macintoch, Unix, OS/2... En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <html>. Ces "instructions" s'appellent des tags ou des balises. Quand vous écrirez les balises de votre page HTML, Il faudra toujours garder à l'esprit - qu'une balise marque une action pour le browser. ce qu'il doit faire - que les attributs précisent les modalités de cette action. comment il doit le faire Page 20

22 2.1 Vos premiers Outils Vous avez besoin : HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre équivalent dans votre système d'exploitation. D'un browser soit Netscape Navigator (gratuit pour les particuliers) que vous pouvez télécharger au site de Netscape ( ou sur les CD de certains mensuels informatiques, soit Microsoft Explorer (gratuit) à télécharger au site de Microsoft ( ou dans les revues. Vous n'avez pas besoin : d'être connecté pour écrire, voir et peaufiner vos pages Html. d'avoir le dernier éditeur Html sans doute performant mais coûteux qu'il sera toujours temps d'adopter lorsque vous aurez usé vos doigts sur vos premières pages. Par exemple : Claris Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert ou Netscape Editor ainsi que des dizaines d'autres éditeurs que vous rencontrerez sur le Web. Conseils: Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile sinon indispensable de les passer en revue et surtout de les visionner au moins une fois car : si les éditeurs Html vous faciliteront grandement la tâche, ils ne sont pas toujours parfaits surtout lors des modifications, annulations ou suppressions en cours de travail. Il vous faudra bien alors vous plonger dans le code source pour corriger les dysfonctionnements. 2.2 Le document Html minimum Voici vos premières balises ou tags : <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> Ceci est le début d'un document de type HTML. Ceci est la fin d'un document de type HTML. Ceci est le début de la zone d'en-tête. (Prologue au document proprement dit contenant des informations destinées au browser) Ceci est la fin de la zone d'en-tête. Ceci est le début du titre de la page. Ceci est la fin du titre de la page. Ceci est le début du document proprement dit. Ceci est la fin du document proprement dit. Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>. Page 21

23 Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc. Faisons ensemble notre premier document Html: 1) Ouvrir l'éditeur de texte. 2) Ecrire les codes Html suivants: 3) Enregistrer le document avec l'extension.html ou.htm. 4) Ouvrir le navigateur. 5) Afficher le document via le menu File/Open file... Admirer votre premier document Html. Celui-ci est vide (et c'est normal) mais tout à fait opérationnel! Il faudra maintenant lui fournir votre information à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de Netscape. Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur. 1) Retourner dans l'éditeur de texte (sans fermer le navigateur). 2) Modifier les codes Html. 3) Enregistrer le fichier. 4) Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la barre "Location" et faire "Enter". Page 22

24 2.3 Le texte Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires. Gras [Bold] <B>...</B> Début et fin de zone <STRONG>...</STRONG> en gras Italique [Italic] <I>...</I> <EM>...</EM> Début et fin de zone en italique Taille de caractère [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec cette taille Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"> Début et fin de zone </FONT> en couleur A la ligne [Line break] <BR> Aller à la ligne Commentaires [Comments]  Ne pas afficher Centrage [Center] <CENTER></CENTER> Centrer Petit exemple : 1) Ouvrir l'éditeur de texte <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<br> <B>texte en gras</b><br> <STRONG>texte en gras</strong><br> <I>texte en italique</i><br> <EM>texte en italique</em><br> <B><I>texte en gras et en italique</i></b><br> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</font>  </BODY> </HTML> 2) Ouvrir le browser Page 23

25 Quelques commentaires s'imposent; HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut. Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin. Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</font> est équivalent à <FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</font> Attention, mise en garde : Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis. La taille dans <FONT SIZE=?> peut être indiquée de deux façons : avec un nombre de 1 à 7. La valeur par défaut étant 3. De façon relative par rapport à la valeur par défaut (ici 0). Soit Pour les puristes, les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur. Voici les codes de quelques couleurs basiques. Bleu #0000FF Blanc #FFFFFF Rouge #FF0000 Gris clair #C0C0C0 Vert #00FF00 Violet #8000FF Jaune #FFFF00 Noir # Des balises de texte, il y en plein des valises! D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier. Page 24

26 En voici quelques-uns qui compléteront votre panoplie actuelle. Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation. Son utilité serait douteuse si le texte de cette citation n'était introduit avec un léger retrait à gauche et à droite. Ce qui est bien pratique pour agrémenter la présentation. Pour la petite histoire ce tag n'était pas prévu dans Netscape Editor de la version Gold 3.0 mais il a été ajouté à la version Netscape Communicator 4.0. Le même effet peut être réalisé par un tableau ou un tag de liste vide. Vous savez déjà que les browsers ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations. La balise <PRE>...</PRE> affiche un texte dit préformaté. Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran. Avant que les tableaux ne soient reconnus par les browsers, les pionniers du Html devaient employer ce tag pour faire des tableaux. Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (généralement en fin de document). La balise <U>...</U> souligne le texte. Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on évitera de souligner des éléments de texte pour lui donner de l'importance. On préfèrera la mettre en gras ou dans un format ou une couleur de police différent. En parler ou ne pas en parler, voilà la question! Netscape 3.0 et plus (et pas Microsoft Explorer) permet d'afficher un texte clignotant par la balise <BLINK>...</BLINK>. Ce tag est un peu tourné en dérision car il est rapidement ennuyeux. On lui préfèrera une image animée qui peut être débranchée après quelques clignotements. Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner différents éléments, c'est le tag : <DIV align=left>...</div> <DIV align=center>...</div> <DIV align=right>...</div> Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement d'une portion de texte. Il nous est très utile pour parer à certaines "paresses" de Microsoft Explorer 3.0 par exemple. Page 25

27 2.4 Les titres et les listes HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement conçus à cet effet. En-têtes [Heading] <Hn></Hn> Afficher une en-tête avec n=1 à 6 de niveau n et sauter une ligne Liste [Bullet list] <UL></UL> Afficher le texte sous non-ordonnée forme d'une liste non-ordonnée. Liste [Numbered <OL></OL> Afficher le texte sous ordonnée list] forme d'une liste ordonnée. Elément [List items] <LI> Voici un élément de la liste Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne vierge et commencer un paragraphe Petit exemple : 1) On ouvre son éditeur de texte <H1>Les mois du printemps</h1> <UL><LI>avril <LI>mai <LI>juin</UL> <P> <H3>Les mois d'automne</h3> <OL><LI>octobre <LI>novembre <LI>décembre</OL> 2) Et on ouvre son browser Page 26

28 Quelques commentaires s'imposent; HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani é est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite. <H1 align=left></h1> <P align=left></p> <H1 align=center></h1> <P align=center></p> <H1 align=right></h1> <P align=right></p> Les listes peuvent s'imbriquer: 2.5 Les liens <H4>Les 12 mois</h4> <UL><LI>Les mois du printemps <OL><LI>avril </OL></UL> Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter; vers un autre endroit du document. vers un autre fichier Html situé sur votre ordinateur. vers un autre ordinateur situé sur le Web. Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents Html. La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires : Lien externe <A HREF="URL ou Adresse">...</A> Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'internet vous soit un peu familier, ce sont les adresses du type : ftp://serveur/chemin.../fichier mailto:utilisateur@hôte Page 27

29 2.5.2 Lien local L'organisation classique et plus que conseillée d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images,...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et, but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement Lien mixte fichier.htm ou fichier.html Nous entendons par là un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention Danger! En effet, il est peut probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme : Petit exemple : file:///lecteur:/répertoire/fichier.htm (en adressage absolu).../../../fichier.htm (en adressage relatif). Dans l'éditeur de texte, nous allons créer deux fichiers Html. le fichier 1.htm: le fichier 2.htm: <A HREF="2.HTM">Aller vers le document 2</A> <A HREF="1.HTM">Retour au document 1</A> On sauve ces deux fichiers dans un même répertoire. Le browser vous affichera: Page 28

30 Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor]. Point d'ancrage <A NAME="***">...</A> Ceci est une cible Lien vers une ancre <A HREF="#***">...</A> Lien vers la cible *** dans la même page dans la même page Lien vers une ancre <A HREF="URL#***">...</A> Lien vers la cible *** dans une autre page dans une autre page A titre d'illustration, le mot Enfin du début de page a été défini comme un point d'ancrage. Le code du lien sera : <A NAME="Ancre1">... Enfin!...</A> <A HREF="#Ancre1">Rappel de la notion d'hypertexte</a> Rappel de la notion d'hypertexte Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite. 2.6 Les images GIF ou JPEG? Avant de passer aux balises, il faut savoir ce qui suit. Les deux formats d'image reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF (maximum 256 couleurs), on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez équivalents bien que JPEG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés. Important : L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16 couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil. Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. Par exemple Photoshop d'adobe. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages. Page 29

31 Conseil : Il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web. Avec Netscape ou Explorer, il suffit de se positionner sur l'image, de cliquer avec le bouton droite de la souris et de suivre les instructions du menu déroulant (Save Image As...). Le code Html est : <IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse... La balise image possède de nombreux attributs. Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée Dimensions width=? height=? Hauteur et largeur (en pixels) Bordure border=? (en pixels) Alignement Commentaires align=top align=middle align=botton align=left align=right - En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html. - Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien sa taille. - Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre. - Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi, connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Photoshop L'attribut Align L'attribut align positionne l'image par rapport au texte : <IMG SRC="HELP.gif" align=top> Fichier d'aide <IMG SRC="HELP.gif" align=center> <IMG SRC="HELP.gif" align=bottom> Fichier d'aide Fichier d'aide Page 30

32 2.6.4 Lien sur image Les balises sont : HTML, DHTML, JavaScript & VBscript Auteur : Serge Bedwani <A HREF="arl_9800.htm"><IMG SRC="arl.gif"></A> Remarquons que les images cliquables sont entourées d'une bordure. 2.7 Les séparateurs Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la ligne horizontale. La syntaxe en est fort simple: Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil, car il s'efforce toujours d'afficher quelque chose. Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs. Epaisseur <HR size=?> en pixels Largeur <HR width=?> en pixels <HR width="%"> en % de la fenêtre Alignement <HR align=left> gauche <HR align=right> droite <HR align=center> centré Il est donc tout à fait équivalent d'écrire: Petit exemple : Avec l'éditeur de texte <HR> ou <HR size=2 align=center width="100%"> <H3 align=center>arl</h3> <HR align=center size=8 width="50%"> Page 31

33 Avec le browser Commentaires : On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran. On peut préférer l'usage d'images comme séparateur pour personnaliser son ouvrage. 2.8 Les arrières-plans Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page. La balise à utiliser ne pose pas de problème : Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> Petit exemple : <BODY BGCOLOR="#000088"> <H1>Bonjour</H1> </BODY> Joli! Mais la lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour modifier les couleurs utilisées par défaut par le browser pour le texte et les liens. Page 32

34 Couleur de texte Couleur de lien Lien visité Lien actif <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$> <BODY VLINK="#$$$$$$> <BODY ALINK="#$$$$$$> Reprenons notre exemple; <BODY BGCOLOR"#000088" TEXT="#FFFF00"> <H1>Bonjour</H1> </BODY> On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint. Texture d'arrière-plan <BODY BACKGROUND="Adresse"> Ce qui peut nous donner : <BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY> Page 33

35 2.9 Les tableaux En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc TRES fréquent. Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc : Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit : <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border] <TABLE border=?></table> <TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> Page 34

36 Il y a encore trois éléments (définis par défaut mais modifiables) : L'espace entre les cellules ou l'épaisseur des lignes du quadrillage L'enrobage des cellules ou l'espace entre le bord et le contenu La largeur de la table <TABLE cellspacing=?> <TABLE cellpadding=?> <TABLE width=?> <TABLE width=%> Construisons deux exemples : <TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> <TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> Page 35

Montrer encore