Initiation au langage html Page 2 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 3 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 4 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 5 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 6 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 7 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 8 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 9 sur 61
_________________________________________________________________________________...
Initiation au langage html Page 10 sur 61
________________________________________________________________________________...
Initiation au langage html Page 11 sur 61
________________________________________________________________________________...
Initiation au langage html Page 12 sur 61
________________________________________________________________________________...
Initiation au langage html Page 13 sur 61
________________________________________________________________________________...
Initiation au langage html Page 14 sur 61
________________________________________________________________________________...
Initiation au langage html Page 15 sur 61
________________________________________________________________________________...
Initiation au langage html Page 16 sur 61
________________________________________________________________________________...
Initiation au langage html Page 17 sur 61
________________________________________________________________________________...
Initiation au langage html Page 18 sur 61
________________________________________________________________________________...
Initiation au langage html Page 19 sur 61
________________________________________________________________________________...
Initiation au langage html Page 20 sur 61
________________________________________________________________________________...
Initiation au langage html Page 21 sur 61
________________________________________________________________________________...
Initiation au langage html Page 22 sur 61
________________________________________________________________________________...
Initiation au langage html Page 23 sur 61
________________________________________________________________________________...
Initiation au langage html Page 24 sur 61
________________________________________________________________________________...
Initiation au langage html Page 25 sur 61
________________________________________________________________________________...
Initiation au langage html Page 26 sur 61
________________________________________________________________________________...
Initiation au langage html Page 27 sur 61
________________________________________________________________________________...
Initiation au langage html Page 28 sur 61
________________________________________________________________________________...
Initiation au langage html Page 29 sur 61
________________________________________________________________________________...
Initiation au langage html Page 30 sur 61
________________________________________________________________________________...
Initiation au langage html Page 31 sur 61
________________________________________________________________________________...
Initiation au langage html Page 32 sur 61
________________________________________________________________________________...
Initiation au langage html Page 33 sur 61
________________________________________________________________________________...
Initiation au langage html Page 34 sur 61
________________________________________________________________________________...
Initiation au langage html Page 35 sur 61
________________________________________________________________________________...
Initiation au langage html Page 36 sur 61
________________________________________________________________________________...
Initiation au langage html Page 37 sur 61
________________________________________________________________________________...
Initiation au langage html Page 38 sur 61
________________________________________________________________________________...
Initiation au langage html Page 39 sur 61
________________________________________________________________________________...
Initiation au langage html Page 40 sur 61
________________________________________________________________________________...
Initiation au langage html Page 41 sur 61
________________________________________________________________________________...
Initiation au langage html Page 42 sur 61
________________________________________________________________________________...
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
INITIATION_HTML_NAB_2009
Prochain SlideShare
Chargement dans…5
×

INITIATION_HTML_NAB_2009

247 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
247
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

INITIATION_HTML_NAB_2009

  1. 1. Initiation au langage html Page 2 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 SOMMAIRE I.   PRESSENTATION............................................................................................................ 4   1.1.   Présentation ............................................................................................................................4   1.2.   Historique ...............................................................................................................................4   1.3.   Architecture............................................................................................................................6   1.4.   Extension des fichiers html ....................................................................................................6   II.   LES META BALISES....................................................................................................... 7   2.1.   utilité.......................................................................................................................................7   2.2.   Récapitulatif ...........................................................................................................................9   III.   LES TABLEAUX............................................................................................................ 11   3.1.   Généralités............................................................................................................................11   3.2.   Les éléments d'un tableau.....................................................................................................11   3.3.   Remarques............................................................................................................................13   IV.   LES CADRES.................................................................................................................. 14   4.1.   Fonction................................................................................................................................14   4.2.   Avantages/Inconvénients......................................................................................................14   4.3.   Structure de la page HTML..................................................................................................14   4.4.   La balise <frameset> ............................................................................................................15   4.5.   La balise <frame>.................................................................................................................16   4.6.   La balise <iframe> ...............................................................................................................17   4.7.   L'attribut target .....................................................................................................................18   V.   FORMULAIRE................................................................................................................ 19   5.1.   Généralités............................................................................................................................19   5.2.   La balise <form> ..................................................................................................................19   5.3.   la balise <input>...................................................................................................................20   5.4.   la balise <textarea>...............................................................................................................22   5.5.   Liste de choix, la balise <select> .........................................................................................23   5.6.   Autres éléments de formulaire .............................................................................................24   5.7.   Un exemple de formulaire....................................................................................................25   5.8.   Récapitulatifs des balises......................................................................................................26   VI.   LES IMAGES DANS UNE PAGE WEB........................................................................ 28   6.1.   Généralités............................................................................................................................28   6.2.   La balise <img>....................................................................................................................29   6.3.   Afficher des images..............................................................................................................30   6.4.   Les images map ou images cliquables .................................................................................32   VII.   LES LIENS HYPERTEXTE ........................................................................................... 35   7.1.   Différents types de liens.......................................................................................................35   7.2.   Quelques attributs de la balise <a> .....................................................................................37   7.3.   Lien vers d'autres objets .......................................................................................................37   VIII.  MISE EN FORME DE TEXTE....................................................................................... 38   8.1.   Titre et sous-titre ..................................................................................................................38   8.2.   Paragraphes ..........................................................................................................................38   8.3.   Les balises <div> et <span>.................................................................................................39   8.4.   La balise <hr>.......................................................................................................................39   8.5.   Mise en forme de la police ...................................................................................................39   8.6.   Autres balises .......................................................................................................................40   8.7.   Les entités de caractères.......................................................................................................41   8.8.   Codage de la couleur ............................................................................................................41  
  2. 2. Initiation au langage html Page 3 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 8.9.   Listes d'items........................................................................................................................42   IX.   FEUILLES DE STYLES ................................................................................................. 46   9.1.   Présentation des feuilles de style..........................................................................................46   9.2.   Implémentation.....................................................................................................................46   9.3.   Définition de style ................................................................................................................49   9.4.   Assignation de propriétés ....................................................................................................50   9.5.   Les pseudo-classes ...............................................................................................................52   9.6.   Quelques propriétés..............................................................................................................54  
  3. 3. Initiation au langage html Page 4 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 I. PRESSENTATION 1.1. Présentation Le HTML, abréviation de l'anglais Hypertext Markup Language (Hypertext est parfois écrit HyperText pour marquer le T de l'abréviation), aussi appelé langage HTML, rarement traduit littéralement en langage de balisage hypertexte, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage. HTML est un langage de description de documents tel qu'il a été pensé à ses origines par Tim Berners-Lee à partir de 1989. C'est le protocole HTTP qui, sur le web, permet de transférer à partir d'un serveur Web, un fichier HTML. Les documents HTML sont identifiés par une adresse URL, et sont interprétés par un logiciel appelé navigateur Web. Grâce à ce dernier, le fichier HTML apparaît à l'écran comme l'auteur l'a voulu. Sont ainsi représentés texte, typographie, couleurs, tableaux, images, son, etc. 1.2. Historique 1989 - 1992 HTML a été inventé pour le World Wide Web, afin de pouvoir écrire des documents hypertextes liant les différentes ressources d'Internet. En août 1991, lorsque Tim Berners-Lee annonce publiquement le Web sur Usenet, il ne cite que le langage SGML(standard generalized Markup Language), mais donne l'URL(Uniform Resource Locator , Repère uniforme de ressource) d'un document ayant l'extension de fichier html. Les premiers éléments du langage HTML sont le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La description d'HTML est alors assez informelle et principalement définie par le support des divers navigateurs Web d’alors. 1993 L'état de HTML correspond alors à ce que l'on pourrait appeler HTML 1.0. Il n'existe cependant aucune spécification portant ce nom, notamment parce que le langage était alors en pleine évolution. Un effort de normalisation était cependant en cours. À partir de fin 1993, le terme HTML+ sera utilisé pour désigner la version future de HTML. Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures : l'invention de l'élément IMG qui permet d'intégrer des images (GIF ou XBM) aux pages Web (Mosaic 0.10) ; les formulaires rendent le World Wide Web interactif (Mosaic 2.0 ). 1994 Avec l'apparition de Netscape Navigator 0.9 le 13 octobre, le support de nombreux éléments de présentation est ajouté : styles de texte, clignotement, centrage... Le développement de HTML prend alors deux voies divergentes. D'une part, les développeurs de navigateurs s'attachent à maximiser l'impact visuel des pages Web. D'autre part, les concepteurs du Web proposent d'étendre les capacités de description sémantiques (logos, notes de bas de page...) et les domaines d'applications (formules mathématiques, tables) de HTML. En ceci, ils suivent les principes de SGML consistant à laisser la présentation à un langage de style. En l'occurrence, les feuilles de style en cascade (CSS) sont prévues pour HTML. 1995 - 1996 En mars 1995, le W3C nouvellement fondé propose le résultat de ses recherches sur HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions
  4. 4. Initiation au langage html Page 5 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin 1995, le RFC 1866 décrivant HTML 2.0 est finalisé. Ce document décrit HTML tel qu'il existait avant juin 1994, donc sans les nombreuses additions de Netscape Navigator. 1997 Le 14 janvier, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996, donc avec une partie des additions de Netscape Navigator et Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. Le 18 décembre, le W3C publie la spécification HTML 4.0 qui standardise notamment le support les styles, les cadres (frames) et les objets (généralisation des images et des applets). 1998 - 1999 La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n'apporte que des corrections mineures à la version 4.0. 2000 - 2006 Le développement de HTML en tant qu’application du Standard Generalized Markup Language (SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup Language (XML). La première étape est la spécification XHTML 1.0, publiée le 26 janvier 2000. Il s'agit d'une reformulation de HTML 4.01 basée sur XML au lieu de SGML. La seconde étape est la spécification XHTML 1.1, publiée le 31 mai 2001. Il s'agit d'un classement des fonctionnalités de XHTML 1.0 en modules. Mais, en 2004, des fabricants de navigateurs web créent le web Hypertext Application Technology Working Group (WHATWG) dans le but, notamment, de relancer le développement du format HTML et de répondre aux nouveaux besoins sur une base technologique jugée plus aisément implémentable que celle du XHTML 2.0 en cours de conception. Ceci s’inscrit dans le contexte d’une contestation plus générale du mode de fonctionnement du W3C, réputé trop fermé par une partie des développeurs et designers web. 2007 à nos jours En mars 2007, tirant la conséquence des réticences d’une partie de l’industrie et des concepteurs de contenus web face à XHTML 2.0, le W3C relance le développement de HTML et crée un nouveau groupe de travail encadré par Chris Wilson (Microsoft) . Il s’agit notamment : • de faire évoluer HTML pour décrire la sémantique des documents mais aussi les applications en ligne ; • de parvenir à un langage extensible via XML tout en maintenant une version non XML compatible avec les parseurs HTML des navigateurs actuels ; • et d’enrichir les interfaces utilisateurs avec des contrôles spécifiques : barres de progrès, menus, champs associés à des types de données spécifiques. Les travaux du WHATWG ont été formellement adoptés en mai 2007 comme point de départ d’une nouvelle spécification HTML 5. Ce document a été publié sous forme de Working Draft le 22 janvier 2008. Parmi les principes de conception évoqués par le groupe de travail figurent en particulier : • la compatibilité des futures implémentations HTML avec le contenu web existant, et la possibilité pour d’anciens agents utilisateurs d’exploiter les futurs contenus HTML 5 ; • une approche pragmatique, préférant les évolutions aux modifications radicales, et adoptant les technologies ou pratiques déjà largement partagées par les auteurs de contenus actuels ; • la priorité donnée, en cas de conflit d’intérêt, aux besoins des utilisateurs sur ceux des auteurs, et par suite, à ceux des auteurs sur les contraintes d’implémentation par les navigateurs ; • le compromis entre la richesse sémantique du langage et l’utilité pratique des solutions disponibles pour remplir l’objectif majeur d’indépendance envers le media de restitution.
  5. 5. Initiation au langage html Page 6 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Le développement de XHTML 2.0 est poursuivi en parallèle, en réponse aux besoins d’autres secteurs du web, tels que les périphériques mobiles, les applications d’entreprise et les applications serveurs ;. 1.3. Architecture Un document HTML est composé de texte et de commandes ou balises (tag en anglais). Ces commandes permettent d’insérer un objet (une image, une vidéo, un lien,…) de mettre en forme le texte (Titre, caractère gras, italique, ...). Les commandes HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives. Les commandes HTML utilisent les caractères < et > comme délimiteurs. <balise atribut_1="valeur_1" atribut_2="valeur_2" atribut_n="valeur_n" > …. </balise> Voici l'exemple d'une structure de document HTML : <HTML> <HEAD> <TITLE>Exemple de structure de document HTML</TITLE> <META NAME="Author" CONTENT="Nabeledi"> </HEAD> <BODY> ... ... Le document HTML ... </BODY> </HTML> <HTML> …</HTML> Commandes de début et de fin du document HTML . <HEAD> …</HEAD> Informations non affichées concernant le document . <TITLE>…</TITLE> Titre du document. Cette information apparaît dans la barre de titre du client WWW. <META ...> Situées dans l'en-tête de votre page HTML, ces commandes guident les moteurs de recherche pour indexer votre page . <BODY>… </BODY> Corps du document. Toutes les informations affichées par le client WWW y sont contenues. 1.4. Extension des fichiers html Le nom que vous donnez à vos fichiers HTML est libre, si ce n'est qu'il est limité à 8 caractères sous DOS et Windows 3.x. Lorsque vous enregistrez vos fichiers HTML, il faut leur donner une extension ; Cette extension est ".html", ou ".htm".
  6. 6. Initiation au langage html Page 7 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 II. LES META BALISES 2.1. utilité Un site web qui vit, qui bouge, c'est un site qui a de l'affluence et qui interagit avec l'internaute. Pour cela, faut-il encore qu'on tombe sur le site en question ! Et là, y'a pas de secret : seul un très bon référencement pourra vous permettre d'attirer à vous tous ceux qui se baladent sur le web. Mais comme la plupart des outils de recherche sur Internet sont des moteurs de recherche d'indexation automatique comme AltaVista ou Google , il faut préparer à l'avance ses pages à l'arrivée des robots de ces moteurs de recherche. Car lorsqu'on soumet l'adresse de son site à un moteur, celui-ci l'enregistre puis envoie des "robots" aller se balader sur vos pages et enregistrer les informations contenues dans les meta balises que vous aurez préalablement placé entre les balises <HEAD> et </HEAD> de votre code HTML. Grâce à ces balises vous pouvez commander les robots mais aussi influencer le navigateur. Les commandes META sont situées dans l'en-tête de votre page HTML et guident les moteurs de recherche pour indexer votre page. Il existe deux types de commande META : <META NAME="paramètre" CONTENT="Attribut"> <META HTTP-EQUIV="paramètre" CONTENT="Attribut"> 2.1.1. Des infos sur vous Il serait très intéressant de tomber sur votre site web rien qu'en tapant votre nom à partir d'un moteur de recherche, hein, avouez le ! Et bien l'attribut Author vous concerne : <META NAME="Author" LANG="fr" CONTENT="Prénom NOM"> La propriété LANG spécifie la langue que vous utilisez dans vos pages. Et tant que vous y êtes, si vous êtes aussi le publieur, c'est-à-dire si c'est une page perso et non un site commercial destiné à un client (vous travaillerez alors pour une société), l'attribut Publisher vous revient de droit : <META NAME="Publisher" CONTENT="Prénom NOM"> Et pour qu'on puisse vous écrire, indiquez aussi votre adresse électronique : <META NAME="Reply-to" CONTENT="Insérez ici votre adresse électronique et entre parenthèses vos prénom et nom."> Exemple : <META NAME="Author" LANG="fr" CONTENT="Nabeledi Ouattara"> <META NAME="Publisher" CONTENT="Nabeledi"> <META NAME="Reply-to" CONTENT="nabson@fr.st(Nabeledi ouattara)"> 2.1.2. Des infos sur votre site Maintenant, il faut indiquer au moteur de recherche comment orienter les internautes vers votre site en utilisant les attributs Description et Keywords. Le premier vous permettra d'écrire une courte description de votre site qui sera affichée si votre site se trouve dans les résultats d'une recherche : <META NAME="Description" CONTENT="Ici se trouvera votre courte description.">
  7. 7. Initiation au langage html Page 8 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Sachez que si votre description est trop longue (plus de 255 caractères), elle sera coupée par le moteur de recherche. L'attribut Keywords, toujours comme son nom l'indique, vous permet de dire quels mots clés qui feront pointer le moteur vers votre site : <META NAME="Keywords" CONTENT="Ici se trouvera votre liste de mots clés séparés par des virgules."> Il est préférable d'indiquer pour moitié des mots clés généraux et pour autre moitié des mots clés très précis. Enfin, les espaces entre mots clés et virgules ne sont pas indispensables. Qui ne s'est jamais retrouvé avec des pages sur son disque et ne sachant plus de quel site elles proviennent ? L'attribut Identifier-URL permet ainsi d'indiquer votre adresse internet. Vos visiteurs pourront donc tous revenir vous visiter. <META NAME="Indentifier-URL" CONTENT="Ici se trouvera votre adresse complète."> Exemple : <META NAME="Description" CONTENT="Site de vulgarisation des sciences et d'enseignement de la programmation en Java, PHP et Turbo Pascal 7.0"> <META NAME="Keywords" CONTENT="java, html, unix, linux, php, mysql, php5"> <META NAME="Indentifier-URL" CONTENT="http//www.nabeledi.com/"> 2.1.3. Des infos sur la création Il est toujours intéressant d'indiquer les copyrights respectifs (auteur, publieur, graphistes, société...) grâce à l'attribut du même nom : Copyright <META NAME="Copyright" CONTENT="Indiquez ici les copyrights."> De plus, il est de coutume d'indiquer quels ont été les outils de développement du site tels que les logiciels de traitement d'image, les navigateurs, etc... avec le paramètre Generator : <META NAME="Generator" CONTENT="Listez ici à la façon des mots clés les différents logiciels utilisés."> Vous pouvez aussi indiquer la date de création ou de mise en ligne de votre page avec l'attribut Date : <META NAME="Date" CONTENT="Inscrivez ici la date de création de votre page."> Il vous est également donné la possibilité de spécifier le type MIME et le code ASCII utilisé grâce à l'attribut Content-Type. Celui-ci indique l'alphabet latin contenant les accents (utilisé pour le français) : <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> Exemple : <META NAME="Copyright" CONTENT="© 1999 Nabeledi"> <META NAME="Generator" CONTENT="HomeSite v1.2,Paint Shop Pro 5.0,Animation Shop,Netscape Communicator 4.0"> <META NAME="Date" CONTENT="Mon, 18 Sep 2009 08:00:00"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 2.1.4. Orienter les robots Si vous désirez que le robot indexe toutes les pages de votre site c'est-à-dire toutes celles vers lesquels vous avez placé des liens, utilisez la propriété All : <META NAME="Robots" CONTENT="All"> Si par contre votre site est encore en construction ou en rénovation et que vous ne désirez pas qu'il soit indexé dès maintenant, vous pourrez en interdire l'accès aux robots grâce à l'attribut None.
  8. 8. Initiation au langage html Page 9 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Avec Index, votre page sera indexée aussitôt. Tandis que si vous mettez Noindex, elle ne sera pas indexée. Si le robot rencontre Follow, les destinations des liens sont indexées. Mais si vous écrivez Nofollow, le robot ne gardera pas mémoire de vos liens. Avec Noimageindex, les images d'une page déjà indexée ne le seront pas. Et freesurvey empèche de suivre les liens pointant vers les images. Vous pouvez bien entendu combiner ces syntaxes. Vous pouvez aussi demander aux robots de réindexer automatiquement votre site après n jours : <META NAME="Revisit-after" CONTENT="n"> Exemple : <META NAME="Robots" CONTENT="Index, Follow"> <META NAME="Revisit-after" CONTENT="15"> 2.1.5. Le rafraîchissement et la redirection Pouvoir faire recharger une page périodiquement peut s'avérer très utile surtout si l'on affiche des bannières publicitaires, afin d'en changer souvent. Ainsi, il est possible d'ordonner au navigateur de recharger une page toutes les n secondes grâce à l'attribut Refresh : <META HTTP-EQUIV="Refresh" CONTENT="n"> On peut même stipuler le chargement d'une page différente, très utilise lorsqu'on change d'hébergeur afin de rediriger le navigateur vers un autre site : <META HTTP-EQUIV="Refresh" CONTENT="n; URL=Mettrez ici l'URL souhaitée"> Exemple : <META HTTP-EQUIV="Refresh" CONTENT="60; URL=http://www.nabson.fr.st/"> 2.1.6. Faire la loi aux caches Vous pouvez interdire aux navigateurs de conserver en mémoire-cache vos pages : <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 2.1.7. Date d'expiration Vous savez qu'il existe des ordinateurs qui, pour faciliter l'accès aux pages web, conservent dans leurs disques durs les pages déjà visitées et donc susceptibles d'être redemandées. Ainsi, lorsqu'on accède à une seconde reprise au même site, on a des chances de retomber sur les mêmes pages déjà visitées. Ainsi, lorsqu'on veut empêcher cela, on indique une date d'expiration qui, si elle est dépassée, ordonnera au proxy d'aller récupérer les vrais pages et de supprimer celles expirées. Attention, la date est au format anglophone : <META HTTP-EQUIV="Expires" CONTENT="Mon, 30 Jun 1999 14:30:00"> 2.1.8. Mettre un cadre par défaut Si vous utilisez des frames et que vos liens pointent tous ou presque vers un cadre précis, il est intéressant de le spécifier comme cadre par défaut : <META HTTP-EQUIV="Window-TARGET" CONTENT="votre cadre"> 2.2. Récapitulatif Ce récapitulatif ne traite que des Meta les plus utilisés. 2.2.1. <META NAME="paramètre" CONTENT="Attribut"> paramètre attribut description
  9. 9. Initiation au langage html Page 10 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 author nom de l'auteur désigne l'auteur de la page copyright informations de copyright informations concernant les droits d'auteur. description la description de votre page Utilisé par les moteurs de recherche. La description de votre page apparaîtra lors de l'affichage du résultat de recherche. keywords mot-clef-1, mot- clef-2, etc Utilisé par les moteurs de recherche. Votre page sera accessible grâce aux mots-clefs choisis par vos soins (maximum de 1000 caractères). Les mots-clefs sont séparés par des virgules. Vous pouvez utiliser plusieurs langues en indexant les mots en français, en anglais, etc ... par exemple : "biologie, biology". robots "all" ou "none" indique aux robots d'indexer ou non cette page 2.2.2. <META HTTP-EQUIV="paramètre" CONTENT="Attribut"> paramètre attribut description refresh x; URL="adresse" rafraîchit votre page toutes les "x" secondes. Si URL est absent c'est cette même page qui est rafraîchie. Si URL existe alors la page change indiquée dans URL="adresse".sera chargée. Ceci permet de constituer un diaporama. expires "never" ou "date d'expiration" permet aux robots d'indexer la page
  10. 10. Initiation au langage html Page 11 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 III. LES TABLEAUX 3.1. Généralités Usuellement un tableau est constitué de lignes et de colonnes. En HTML : 1 Un tableau est un conteneur <table>, 2 Un tableau est constitué de lignes <tr> (pour table row), 3 Un tableau est constitué de cellules<td> (pour table data). Le tableau se défini grâce à la balise <TABLE> qui doit absolument être refermée : </TABLE>. Les navigateurs internet chargent d'abord entièrement le tableau avant de l'afficher, c'est pourquoi il ne faut surtout pas oublier de refermer la balise <TABLE>. Il est également important de ne pas mettre en ligne des tableaux trop volumineux, préférez toujours plusieurs petits tableaux plutôt qu'un seul très gros et long à charger. Apres la balise <TABLE>, il faut commencer par ouvrir une balise <TR> pour commencer une ligne et la refermer </TR> pour terminer la ligne. Mais cela ne suffit toujours pas à la création d'un tableau car il faut également définir les colonnes. Et là, c'est un peu moins facile puisqu'il faut insérer entre les balises lignes autant de couple (<TD>, </TD>) qu'il y a de colonnes. Le couple <TD> et </TD> correspond à la colonne. A l'intérieur d'une ligne (couple <TR>, </TR>), il faut placer autant de couples <TD> </TD> qu'il y a de colonnes dans le tableau. Attention ! il faut donc mettre un même nombre de colonnes dans chaque ligne. Un tableau peut contenir du texte, des images, des vidéos, des formulaires, d’autres tableaux... Presque toutes les balises HTML peuvent êtres incluses dans une cellule. Il est également possible de fournir une légende au tableau avce la balise <caption> 3.2. Les éléments d'un tableau 3.2.1. La balise <table> La notion de table étant complexe, le nombre d'attributs de cette balise est important. En voici quelques uns. Attribut Effet Valeur Width largeur du tableau une longueur, qui peut s'exprimer en nombre de pixels ou en pourcentage de la largeur de la fenêtre du navigateur heigth Hauteur du tableau une longueur, qui peut s'exprimer en nombre de pixels border épaisseur de la bordure extérieure en pixel (par défaut, 0, sans bordure) cellspacing marge entre cellules consécutives en pixels cellpadding marge entre le bord et le contenu de la cellule en pixels Align position du tableau dans la fenêtre. Cet attribut est obsolète en HTML 4.01 strict. center left right bgcolor couleur de fond du tableau. Cet attribut est obsolète en HTML 4.01 nom de couleur ou triplet RGB
  11. 11. Initiation au langage html Page 12 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 strict. background Image d’arrière plan du tableau url de l’image Par défaut la taille du tableau s'ajuste à son contenu. C'est cette gestion particulière de la taille qui fait du tableau un moyen très utile de présentation. 3.2.2. La balise <caption> Cette balise est facultative, et ne peut être présente qu'une seule fois dans le tableau. Son rôle est de lui donner une légende. Elle possède un attribut principal align, qui gère son alignement relativement au tableau. Cet attribut est obsolète en HTML 4.01 strict. 3.2.3. Les lignes: la balise <tr> Les principaux attributs de cette balise sont les attributs d'alignement des cellules (valign, align), ainsi que l'attribut bgcolor, dont la fonction est de spécifier la couleur de fond de la ligne. Mais ce dernier attribut est obsolète en HTML 4.01 Strict. Cette balise permet de définir une ligne dans le tableau. Elle peut contenir une ou plusieurs balises <th> ou <td>. 3.2.4. Balises <td> et <th> Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, <th> doit être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table Header). Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les <div> et les <p>. Attribut Effet Valeur(s) Abbr fournit un abrégé du contenu de la cellule une chaîne de caractères Axis indique à quelle catégorie appartient la cellule (voir sur le site du W3C pour plus d'informations sur l'utilisation de cet attribut dans la structuration du contenu d'un tableau). une chaîne de caractères headers renvoi à (aux) l'identifiant(s) de la cellule "header" associée. Cela permet à un agent vocal de présenter le type de contenu de la cellule avant le contenu proprement dit. une liste d'indentifiants (séparés par des espaces) Scope indique quel est le jeu de cellules auquel la cellule "header" courante s'applique row : s'applique à la ligne courante col : s'applique à la colonne courante rowspan nombre de lignes concernées par la balise courante (fusion de lignes) un nombre. La valeur par défaut est 1. colspan nombre de colonnes concernées par la cellule courante (fusion de colonnes) un nombre. La valeur par défaut est 1. Align alignement horizontal left (valeur par défaut) right center justify char : l'alignement se fait sur un caractère particulier
  12. 12. Initiation au langage html Page 13 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Valign alignement vertical top : alignement en haut de la cellule middle : alignement au milieu de la cellule (valeur par défaut) bottom : alignement en bas de la cellule baseline : alignement sur la ligne du bas de la cellule nowrap empêche le retour à la ligne automatique dans les cellules quand le bord de la fenêtre du navigateur est atteint. Obsolète en HTML 4.01 strict. valeur unique : nowrap bgcolor couleur de fond de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nom de couleur ou triplet RGB width largeur de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nombre de pixels ou pourcentage height hauteur de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nombre de pixels ou pourcentage 3.3. Remarques 3.3.1. Cellules vides Un conteneur vide <td></td> crée un emplacement vide alors qu'un conteneur contenant un espace insécable <td>&nbsp;</td> crée une cellule vide. 3.3.2. Tableaux imbriqués Un tableau peut en contenir un autre qui peut en contenir un autre qui... Il n'y a pas de limitation. 3.3.3. Des tableaux pour la présentation Créés au départ pour présenter des tables de données, les tableaux sont très vite devenus un moyen efficace de présentation claire et ordonnée. Ils permettent, par exemple, de faire de manière souple du multicolonnage. De nombreux sites les utilisent, Néanmoins, les performances des navigateurs les plus récents avec les feuilles de style rendent cette utilisation des tableaux obsolète au profit des balises <div> </div>.
  13. 13. Initiation au langage html Page 14 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 IV. LES CADRES 4.1. Fonction Les cadres (frames dans la terminologie anglo-saxonne) découpent la fenêtre principale en autant de petits cadres, chacun d'eux jouant le même rôle qu'une fenêtre : document HTML propre, barres de défilement indépendantes... Ces frames peuvent être chargés de manière totalement indépendante : un cadre sera modifié et l'autre maintenu. Ils peuvent interagir entre eux : un choix dans un premier cadre pourra provoquer le chargement d'une nouvelle page dans un deuxième. 4.2. Avantages/Inconvénients Les cadres permettent de créer rapidement une mise en page simple pour un site. L'utilisation classique consiste ainsi à présenter sur un cadre à gauche une liste de liens vers les différentes parties d'un site, qui s'affichent dans la fenêtre principale au centre. Cela facilite de plus la maintenance des différentes pages. Cependant, les moteurs de recherche indexent les pages à l'intérieur des cadres autant que les autres. Il y a donc un risque pour qu'une page indexée de la sorte soit "orpheline", et ne donne pas accès au reste du site. Plus généralement, une telle page ne se suffit souvent pas à elle-même (il y manque parfois les outils de navigation à l'intérieur du site). Enfin, la présence de cadres s'accompagne souvent de celles de barres de défilement horizontales. 4.3. Structure de la page HTML 4.3.1. Un nouveau type de document Nous avions déjà rencontré les déclarations de type de document suivantes : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > L'appel à des cadres ne peut se faire qu'à l'aide de balises qui nécessitent une troisième forme de déclaration : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" > Ce type de document étant une extension de la recommandation HTML Transitionnel, les balises de présentation sont également acceptées, même s'il vaut mieux éviter de faire appel à elles. Remarque Ces appels sont facultatifs 4.3.2. Le squelette d'une page-cadre Une page destinée à recevoir plusieurs cadres a une structure légèrement différente d'une page "habituelle". Cette dernière, on s'en souvient, possède la structure suivante... <html> <head> <title>Premiers pas</title> </head> <body> (contenu de la page) </body> </html>
  14. 14. Initiation au langage html Page 15 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Cette fois-ci, la balise <body> est remplacée par la balise <frameset> : <html> <head> <title>Premiers pas</title> </head> <frameset> (déclarations des cadres) <noframes> (page à afficher pour les vieux navigateurs) </noframes> </frameset> </html> 4.3.3. c. La balise <noframes> L'objectif est d'avertir l'utilisateur d'une vieille version de navigateur qu’il n'a pas accès au contenu du document. Les auteurs très scrupuleux pourront prévoir un contenu de rechange. La balise <noframes> est fille de la balise <frameset>. Un navigateur reconnaissant <frameset> ignore le contenu du conteneur <noframes>. 4.4. La balise <frameset> 4.4.1. Définition du découpage de la page: les attributs rows et cols Les attributs rows et cols de la balise <frameset> définissent un quadrillage dont chaque élément sera un cadre (frame). rows définit le découpage horizontal et cols le découpage vertical. 4.4.2. Jeux de valeurs possibles Les valeurs peuvent s'exprimer par : • Par un nombre entier de pixels. • Par un pourcentage (ex : 20%) de la fenêtre du navigateur : lorsque l'utilisateur modifie la taille de sa fenêtre, la taille du cadre se modifie en proportion. Exemple : <frameset cols="20%,50%,30%"> Si la somme ne fait pas 100%, les pourcentages sont ajustés par règle de trois. • Par le caractère astérisque *. Deux usages sont possibles : o * peut signifier ce qui reste de libre. Exemple : <frameset rows="150,*,100">. o * peut signifier : le facteur multiplicatif nécessaire pour que l'ensemble soit à la taille de la fenêtre. Exemple : <frameset cols="2*,*,5*">. De manière générale, si le jeu de paramètres est incohérent, le navigateur trouve toujours un moyen de les ajuster (en vertu du principe de la marge d'erreur !). 4.4.3. Découpage irrégulier Le découpage peut ne pas être un quadrillage mais un simple pavage de rectangles. Ce pavage est obtenu en insérant une nouvelle fois la balise <frameset> à l'intérieur du conteneur <frameset></frameset>. La structure de l'exemple est la suivante :
  15. 15. Initiation au langage html Page 16 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 4.4.4. exemples Il est tout à fait possible d'imbriquer les cadres les uns dans les autres. cadre1 cadre2 cadre3 <FRAMESET ROWS="50%,25%,25%" COLS="*" BORDER="1" FRAMEBORDER="yes" FRAMESPACING="5”> <FRAME NAME=”cadre1” SRC=”intro.htm” SCROLLING=”yes”> <FRAME NAME=”cadre2” SRC=”../developpement.htm” scrolling=”no” NORESIZE=”NORESIZE”> <FRAME NAME= ”cadre3” SRC= ”http ://www.nabeledi.net”> </FRAMESET> Som- maire cadre1 cadre2 <FRAMESET COLS= ”30%,70%”> <FRAME NAME= ”sommaire ” SRC= ”sommaire.htm”> <FRAMESET ROWS= ”50%,50%”> <FRAME NAME= ”cadre1” SRC= ”intro.htm”> <FRAME NAME= ”cadre2” SRC= ”article1.htm”> </FRAMESET> </FRAMESET> Menu primaire Som- maire Article <FRAMESET ROWS= ”15%,* ”> <FRAME NAME= ”menu” SRC= ”menu0.htm”> <FRAMESET COLS= ”30%,* ”> <FRAME NAME= ”sommaire” SRC= ”sommaire.htm”> <FRAME NAME= ”article” SRC= ”article1.htm”> </FRAMESET> </FRAMESET> A noter qu’il n’est pas indispensable de donner des noms à tous les cadres. Ainsi ceux vers lesquels aucun lien n’ira jamais pourraient très bien ne porter aucun nom. Par contre ce nom est absolument obligatoire pour le ou les cadre(s) vers lesquels des liens pointent leur destination. 4.5. La balise <frame> 4.5.1. Utilisation de la balise Il doit y avoir autant de conteneurs <frame> qu’il y a de régions définies dans la balise <frameset>. L’ordre est imposé de gauche à droite, puis de haut en bas (voir les numérotations des régions dans les exemples précédents). 4.5.2. Les attributs Attribut Effet Valeur(s) src URL du document à charger initialement dans le cadre. Une URL. Facultatif, le chargement peut avoir lieu plus tard. Name Nom du cadre. Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l’attribut target de l’appel de lien <a>. longdesc Renvoie vers un fichier contenant une « longue » description du contenu de la fenêtre. Une URL. Frameborder Présence d’une bordure de 1 (présence) ou 0 (absence). Valeur par défaut
  16. 16. Initiation au langage html Page 17 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 séparation entre les cadres. Reprendre le premier exemple. 1. Marginwidth, marginheight Marge entre le contenu et le bord du cadre. Un nombre de pixels. Noresize Gère le redimensionnement du cadre. Si noresize= ”noresize”, l’utilisateur ne peut pas redimensionner le cadre. Scrolling Gère l’apparition des barres de défilement. Yes : le navigateur crée toujours des barres. No : les barres sont interdites. Auto : le navigateur crée des barres si besoin. Valeur par défaut. 4.6. La balise <iframe> 4.6.1. Utilisation de la balise Il ne s’agit plus du quadrillage de la fenêtre du navigateur de la balise <frameset> mais d’une petite lucarne insérée dans le document HTML. Le document lui-même garde la structure habituelle : entête (<head>) et corps (<body>). Il s’agit de définir à l’intérieur d’une page HTML contenant du texte, des images… un cadre local (ou des cadres, à loisir) à l’intérieur duquel s’affichera le contenu d’une autre page HTML. La balise associée est <IFRAME>. 4.6.2. Les attributs Attribut Effet Valeur(s) src URL du document à charger initialement dans le cadre. Une URL. Facultatif, le chargement peut avoir lieu plus tard. Name Nom du cadre. Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l’attribut target de l’appel de lien <a>. longdesc Renvoie vers un fichier contenant une « longue » description du contenu de la fenêtre. Une URL. Frameborder Présence d’un encadrement. 1 (présence) ou 0 (absence). Valeur par défaut 1. Marginwidth, marginheight Marge entre le contenu et le bord du cadre. Un nombre de pixels. Scrolling Gère l’apparition des barres de défilement. Yes : le navigateur crée toujours des barres. No : les barres sont interdites. Auto : le navigateur crée des barres si besoin. Valeur par défaut. Align Détermine la position du cadre par rapport au texte qui l’entoure. Le cadre peut suivre le flot du texte ou être enveloppée par ce texte. Par défaut la valeur est à bottom. Left (valeur par défaut) right top : l’alignement se fait par rapport au sommet du cadre. Bottom : l’alignement se fait par rapport au bas du cadre.
  17. 17. Initiation au langage html Page 18 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Middle : l’alignement se fait par rapport au centre du cadre. Width, height Largeur et hauteur du cadre. Un nombre de pixels ou un pourcentage. 4.7. L’attribut target 4.7.1. L’attribut target en HTML Transitionnel La balise <a> permettant de créer un lien possède en HTML Transitionnel un attribut supplémentaire, target (” cible ” en anglais), qui permet de spécifier la fenêtre dans laquelle le document lié doit s’ouvrir. Target ne peut prendre qu’une seule valeur pertinente possible en HTML Transitionnel, la valeur target= ”_blank ”. Cela permet d’ouvrir le lien dans une nouvelle fenêtre. Par exemple, <a href= ”http ://www.nabeledi.net ” target= ”_blank ”> permet d’ouvrir une seconde fenêtre du navigateur, à l’intérieur de laquelle s’affiche le document spécifié par l’attribut href. 4.7.2. L’attribut target avec des cadres Par défaut, l’appel de lien par la balise <a href= ”url_source ”> charge la fenêtre courante par le document désigné par href. L’attribut target permet de spécifier dans quel cadre (au sens large) va se charger le document. Il peut prendre quatre valeurs prédéfinies, ou bien une valeur déterminée par l’auteur. • target= ”_self ” : fenêtre ou cadre d’appel (valeur par défaut). • target= ”_parent ” : fenêtre ouvrant le <frameset> du <frame>. • target= ”_top ” : fenêtre entière du navigateur. • target= ”_blank ” : nouvelle fenêtre. • target= ”name ” : cadre dont la valeur de l’attribut name est spécifié.
  18. 18. Initiation au langage html Page 19 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 V. FORMULAIRE 5.1. Généralités Dans les premiers temps du Web, l’information ne circulait quasiment que dans un seul sens : du serveur vers l’internaute. Il n’existait alors aucun retour de l’utilisateur vers le serveur : l’arrivée des formulaires a comblé cette lacune. Un formulaire doit recueillir des informations de l’utilisateur, puis les transférer au serveur, qui à son tour doit les traiter. Or le traitement de cette information sur le serveur est effectué par des scripts (comprendre « petit programme généralement interprété ») écrits en langage C, Perl, php ou ASP. Nous sortons ici du cadre de notre cours HTML statique : nous ne traiterons pas ici le coté traitement-serveur, cette partie est prévue plus tard. Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer avec leurs lecteurs, un peu comme les coupon-réponses que l’on trouve dans les magazines. Un formulaire peut servir à recueillir les avis des visiteurs, leur e-mail en vue d’une newsletter par exemple. 5.2. La balise <form> 5.2.1. Où se place-t-elle ? Un formulaire débute par la balise <form> (et finit donc par </form>). Ce conteneur contient toutes les autres balises du formulaire. Il peut contenir aussi d’autres balises html : <p>, <table>, etc., permettant la présentation du formulaire. 5.2.2. Attributs Attributs Effet Valeur(s) action URL du script qui traite les données recueillies. Cet attribut est obligatoire. URL, 2 types possibles : http : pour un traitement immédiat. mailto : dans le cas d’un envoi à un courrier électronique, en vue d’un traitement différé. Method Indique sous quelle forme vont être codées les informations envoyées. Get : valeur par défaut. Les données sont adressées sous la forme d’une liste de valeurs accolées à l’URL avec interposition d’un séparateur particulier (point d’interrogation). Le nombre de caractères doit rester inférieur à 256. De plus elle ne permet pas d’envoyer les données à une boîte de courrier électronique. Il est donc préférable d’utiliser la seconde méthode. Post : les données sont adressées sous la forme d’une liste nom/valeur accolées à l’URL mais ici, le script doit lire les données par défaut afin d’atteindre les véritables données du formulaires. La forme de cette liste dépend de l’attribut enctype. Enctype Précise la méthode MIME de codification de l’envoi. Permet au serveur d’anticiper sur l’objet à recevoir et de prévoir le protocole d’échange application/x-www-form-urlencoded : l’envoi se présente comme une chaîne de caractères formées de couples nom=valeur sépararés par un &, nom1=valeur1&nom2=valeur2&nom3=valeur3 (c’est la valeur par défaut). Text/plain : le séparateur précédent est remplacé par un retour chariot. C’est la forme à utiliser pour l’envoi au courrier électronique.
  19. 19. Initiation au langage html Page 20 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Multipart/form-data : lorsqu’un fichier est attaché à l’envoi (<input type= ”file” …>). Accept Précise la méthode MIME de codification de l’envoi pour un fichier. Permet au serveur d’anticiper sur le fichier à recevoir et de prévoir le protocole d’échange Chaîne de caractères donnant un code MIME reconnu. Onsubmit Le code à exécuter lors de la soumission. Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript). Onreset Le code à exécuter lors de la remise à zéro du formulaire. Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript). Name Le nom du formulaire. Une chaîne de caractères. Target Spécifie la cible du retour après traitement du serveur (voir le chapitre sur les cadres). Une liste de codage de caractères, séparée par des espaces. 5.3. la balise <input> 5.3.1. Fonction Cette balise sert à spécifier comment s’effectue la saisie du formulaire : par cases à cocher, boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l’aide d’une seule balise : la balise <input>. C’est son attribut type qui permet de préciser s’il s’agit de cases à cocher, boutons radio, texte libre… L’attribut type peut prendre les valeurs suivantes : • text • password • chekbox • radio • submit • reset • image • button • hidden • file 5.3.2. Attributs généraux Cette balise possède de nombreux attributs ; certains n’ont une signification que pour un type donné de champ. Ce paragraphe présente une liste des attributs d’usage général. Attributs Effet Valeur(s) name Le nom du champ. Une chaîne de caractères.
  20. 20. Initiation au langage html Page 21 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 id Identifiant du champ (même valeur que le nom) utilisable en général en JavaScript Une chaîne de caractères. alt Une courte description. Une chaîne de caractères. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. accesskey Définit une touche du clavier permettant d'accéder au champ de formulaire. La combinaison "ALT+touche" a le même effet que l'activation du champ. Touche du clavier tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. 5.3.3. Types de balises <input> a. Champ de saisie L'attribut type vaut type="text". La balise permet alors à l'utilisateur de saisir une ligne de texte. Les attributs utiles pour ce type sont : • size : un nombre entier, qui définit la taille visible du champ en nombre de caractères. • maxlength : un nombre entier, qui définit le nombre maximum de caractères autorisés. • value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone de saisie. • readonly : un booléen. La modification du contenu n'est pas permise. L'attribut name est obligatoire pour ce type de champ. b. Case à cocher L'attribut type vaut type="checkbox". Les attributs utiles pour ce type sont : • value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur") (a plus de sens dans le cas radio suivant). • checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activé, la case est cochée par défaut. c. Bouton radio L'attribut type vaut type="radio". Outre la présentation (les cases sont rondes et non plus carrées), il existe une grande différence entre les cases à cocher et les boutons radio : les boutons radio qui portent le même name s'excluent mutuellement, le cochage de l'un décoche les autres. Les attributs utiles pour ce type sont : • value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur"). • checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activé, la case est cochée par défaut.
  21. 21. Initiation au langage html Page 22 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 d. Attacher un fichier L'attribut type vaut type="file". Il s'agit de donner la possibilité à l'utilisateur du formulaire de joindre un fichier à son envoi. Les attributs utiles pour ce type sont : • value : une chaîne de caractères. Nom du fichier à attacher par défaut. e. Cacher des données L'attribut type vaut type="hidden". Pourquoi cacher des données ? Il s'agit plutôt de faciliter le traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL du formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des données. Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web. Les attributs utiles pour ce type sont : • value : une chaîne de caractères. Valeur cachée à envoyer au serveur, obligatoire. f. Mot de passe L'attribut type vaut type="password". A l'identique que le type text, mais les caractères tapés sont affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en clair dans le message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité ne se limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux du type text : • size : un nombre entier, qui définit la taille visible du champ en nombre de caractères. • maxlength : un nombre entier, qui définit le nombre maximum de caractères autorisés. • value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone de saisie. g. Soumettre et mettre à zéro des données Soumission de données L'attribut type vaut type="submit". Les attributs utiles pour ce type sont : • value : une chaîne de caractères. Légende du bouton, par défaut Submit. Une variante est possible en utilisant le type image : type="image". Le bouton d'envoi est alors... une image. Les attributs utiles pour ce type sont : • src : une chaîne de caractères. URL de l'image à utiliser. Réinitialisation d'un formulaire L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par défaut l'ensemble des champs du formulaire. Les attributs utiles pour ce type sont : • value : une chaîne de caractères. Légende du bouton, par défaut Reset. 5.4. la balise <textarea> 5.4.1. Fonction
  22. 22. Initiation au langage html Page 23 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte quelconque. 5.4.2. Attributs Attribut Effet Valeur(s) Name Nom de l'élément. Une chaîne de caractères. Id Identifiant (même valeur que le nom) utilisable en général en JavaScript Une chaîne de caractères. rows et cols Nombre de lignes et de colonnes de la zone de texte. Ces attributs sont obligatoires. Un nombre entier. readonly La modification du contenu n'est pas permise. Un booléen. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le texte par défaut. 5.5. Liste de choix, la balise <select> 5.5.1. Fonctionnement Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre 36 valeurs différentes, mieux vaut utiliser les listes déroulantes avec le conteneur <SELECT> Le conteneur <SELECT> en lui-même ne suffit pas, il faut lui rajouter autant de balise <OPTION> qu'il y a de choix possibles. Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce choix peut être unique ou multiple. Les options possibles sont décrites pour chacune d'entre-elles dans un conteneur <option> (la balise fermante </option> est obligatoire). Il y a autant de balises <option> que d'options. 5.5.2. Attributs de la balise <select> Attribut Effet Valeur(s) name Nom de l'élément. Une chaîne de caractères. size Le nombre d'options accessibles. Un nombre. multiple Permet à plusieurs options d'être simultanément sélectionnées. Un booléen. Par défaut, une seule option peut être sélectionnée. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière
  23. 23. Initiation au langage html Page 24 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. 5.6. Autres éléments de formulaire Les balises présentées dans cette partie sont très peu utilisées. Nous allons nous limiter aux balises <label> et surtout <button>, mais il existe aussi <fieldset> et <legend>. 5.6.1. La balise <label> a. Fonction Cette balise permet d'associer à un élément de formulaire des informations relatives à son contenu ; cette information est utile notamment pour les navigateurs destinés aux mal-voyants. b. Attributs Attribut Effet Valeur(s) for Renvoie à l'élément de formulaire spécifié par le même attribut id. Une chaîne de caractères. accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. 5.6.2. La balise <button> a. Fonction Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la balise <input>, mais <button> permet un plus large choix d'options. Il est malheureusement moins bien accepté par les "vieux" navigateurs. b. Attributs Attribut Effet Valeur(s) name Le nom du bouton. Une chaîne de caractères. value Valeur envoyée au serveur. Une chaîne de caractères. type Type de bouton. submit (valeur par défaut) button reset disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères.
  24. 24. Initiation au langage html Page 25 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 5.7. Un exemple de formulaire Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même conseillé pour avoir une mise en page soignée). Voici un exemple récapitulant les points ci-dessus et montrant comment mettre en page un formulaire à l'aide d'un tableau: <FORM method=post action="exo.php"> Enregistrement d'un utilisateur <TABLE BORDER="0"> <TR> <TD width="87">Nom</TD> <TD width="240"> <INPUT type=text name="nom"> </TD> </TR> <TR> <TD>Prénom</TD> <TD> <INPUT type=text name="prenom"> </TD> </TR> <TR> <TD>Sexe</TD> <TD> Homme : <INPUT type=radio name="sexe" value="M"> F emme : <INPUT type=radio name="sexe" value="F"> </TD> </TR> <TR> <TD>Loisirs</TD> <TD> Echecs : <input type="checkbox" name="echec" value="1"> Natation: <input type="checkbox" name="natation" value="1"> Foot : <input type="checkbox" name="foot" value="1"> </TD> </TR> <TR> <TD>Fonction</TD> <TD> <SELECT name="fonction"> <OPTION VALUE="enseignant">Enseignant</OPTION> <OPTION VALUE="etudiant">Etudiant</OPTION> <OPTION VALUE="ingenieur">Ingénieur</OPTION> <OPTION VALUE="retraite">Retraité</OPTION> <OPTION VALUE="autre">Autre</OPTION> </SELECT> </TD> </TR> <TR> <TD>Commentaires</TD> <TD> <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires</TEXTAREA> </TD> </TR> <TR>
  25. 25. Initiation au langage html Page 26 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 <TD COLSPAN=2> <INPUT type="submit" value="Envoyer"></TD> </TABLE> </FORM></FORM> Voici le résultat de ce code HTML Enregistrement d'un utilisateur 5.8. Récapitulatifs des balises Balise Attribut Valeur Résultat Effet Visuel <FORM> ... </FORM> METHOD POST GET ACTION envoie à l'adresse indiquée ENCTYPE spécifie le type de codage utilisé <INPUT> TYPE Submit effectue l'ACTION dans le balise <FORM> Envoyer Text simple ligne de texte dont la longueur est donnée par l'attribut size Reset efface le contenu du formulaire Rétablir Radio bouton radio Checkbox case à cocher NAME Nom SIZE Taille du texte <TEXTAREA> ... NAME Zone de texte
  26. 26. Initiation au langage html Page 27 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 </TEXTAREA> ROWS COLS <SELECT> <OPTION> ... </OPTION> </SELECT> NAME Choix 1 MULTIPLE Plusieurs choix possibles Choix 1 <OPTION> ... </OPTION> SELECTED Option par défaut Choix 1 Choix 2 Choix 3 VALUE Valeur forcée
  27. 27. Initiation au langage html Page 28 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 VI. LES IMAGES DANS UNE PAGE WEB 6.1. Généralités Ce qui suit n'est pas un cours d'infographie mais simplement un panorama de ce qui est nécessaire à un cours HTML. Nous n'aborderons pas tous les formats d'images ni les moyens de les créer et les traiter. 6.1.1. Compromis entre nombre d'images et temps de chargement Les images sont incontournables pour créer un impact visuel mais insupportables pour le temps de chargement. Il n'y a rien de plus fastidieux que de lire un texte sans illustration. L'illustration et l'image bien utilisées, permettent de structurer le document présenté. Elles le rendent attrayant, accessible, lisible. L'emploi d'images est incontournable pour construire une page Web qui retiendra son lecteur. En revanche, les images qui doivent être téléchargées ont une certaine taille, qui augmente d'autant le temps de chargement d'une page. 6.1.2. Les formats d'image Trois formats principaux sont acceptés par la plupart des navigateurs. a. Format GIF, GIF pour Graphic Interchange Format. L'entreprise CompuServe Information Service et Unisys ont produit deux versions : 87a et 89a (année de création). La dernière est la plus avantageuse et la plus repandue. Elle ne tolère pas plus de 256 couleurs (2^8). C'est un format de compression sans perte, qui est très utilisée pour le stockage et le transfert d'images. Son mode de compression est particulièrement adapté à la création d'images simples, des schémas avec des traits ou de larges zones de couleurs. Il existe une méthode d'encodage particulière, appelée interlacing (GIF entrelacé), où l'image est transférée en quatre passes au lieu d'une et qui permet donc au lecteur d'avoir un aperçu progressif de l'ensemble de l'image globale (si l'utilisateur dispose d'un navigateur ancien, il ne verra pas de différence !). Il faut noter qu'il n'y a pas vraiment augmentation de la vitesse de transfert, mais lisibilité de l'image globale plus rapide. Cette différence n'apparaît d'ailleurs que la première fois que le lecteur charge l'image si le navigateur a son propre cache (sinon raffraîchir l'affichage de la page). Le format gif89a permet de rendre une couleur transparente ; il est alors possible de la superposer à un arrière-plan. b. Format JPEG, JPEG pour Joint Photographic Experts Group. Comme son nom l'indique, JPEG a été développé pour les images photographiques. Ce format convient aux images obtenues à partir de scanner ou d'un appareil photo numérique. Mais il est déconseillé pour les schémas et les bannières. Créé en 1990 pour s'affranchir des limitations du format GIF, il compense le maintien des couleurs (jusqu'à seize millions) par une perte de la qualité de l'image et un temps de décompression assez important. Cette perte de qualité affecte surtout les schémas. Il existe également un JPEG progressif (même effet que le gif entrelacé), malheureusement peu de navigateurs actuellement l'affichent. c. Format PNG , pour Portable Network Graphics. Il s'agit d'un nouveau format libre de tous droits, qui devrait supplanter GIF. (source http://www.libpng.org/pub/png/pngcode.html). Le format PNG présente les propriétés suivantes :
  28. 28. Initiation au langage html Page 29 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 o Transparence ; alors que cette transparence est limitée à une seule couleur pour le GIF (une seule combinaison RGB), le format PNG utilise un quatrième paramètre, dénommé alpha. Il permet d'appliquer un effet de transparence progressive à une gamme de couleurs. o Progressivité (entrelacement ou interlacing) o Image 24 bits d'information par pixel pour créer les couleurs (chaque pixel contient 256 nuances de rouge, de vert et de bleu. Une image 24 bits peut ainsi comporter jusqu'à 16,7 millions de couleurs). Cette capacité peut monter à 48 bits par pixel. o La compression PNG est habituellement 25% meilleure que la compression GIF. Tous ces avantages sont développés par le consortium du W3C : http://www.w3.org/TR/PNG- Rationale.html. 6.2. La balise <img> 6.2.1. Usage La balise <img> est le moyen le plus simple d'insérer une image dans une page Web mais on pourra aussi lui préférer la balise <object> qui est d'un usage beaucoup plus général et qui permet d'insérer d'autres objets multimédia. 6.2.2. Syntaxe La balise fermante est facultative : de fait elle est toujours omise. <IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">. La syntaxe minimale est : <img src="adresse_de_l'image"> L'attribut src comme SouRCe attend pour valeur une URL relative ou absolue de l’image à inserer. 6.2.3. Attributs Attribut Effet Valeur(s) Src où trouver l'image à afficher. Cet attribut est requis. une URL (relative ou absolue). Alt donne une courte description texte de l'image, qui peut s'afficher fugacement au survol de la souris. une chaîne de caractères. longdesc Renvoie vers un fichier contenant une "longue" description de l'image. Permet d'améliorer l'accessibilité en offrant aux malvoyants la possibilité de consulter une description détaillée d'une image riche en information. une URL width et height Largeur et hauteur réservées par le navigateur pour l'image dans la page Web. Permet de réserver cette place même si l'image n'est pas encore chargée. Par défaut ces valeurs sont celles de l'image (voir paragraphe suivant). nombre de pixels ou en pourcentage de la fenêtre du navigateur. align Détermine la position de l'image par rapport au texte qui l'entoure. L'image peut suivre le flot du texte ou être left (valeur par défaut) right
  29. 29. Initiation au langage html Page 30 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 enveloppée par ce texte. Par défaut la valeur est à bottom. Cet attribut est obsolète en HTML strict. top : l'alignement se fait par rapport au sommet de l'image. bottom : l'alignement se fait par rapport au bas de l'image. middle : l'alignement se fait par rapport au centre de l'image. border épaisseur de la bordure entourant l'image. Par défaut zéro. On ne peut pas en choisir la couleur. Cet attribut est obsolète en HTML strict. un nombre hspace et vspace Définit une marge autour de l'image. hspace définit une marge à droite et à gauche. vspace définit une marge avant et après l'image. Cet attribut est obsolète en HTML strict. un nombre de pixels Les attributs width et height, même s'ils ne sont pas obligatoires, sont cependant recommandés. En effet, lorsqu'une image est en chargement dans la fenêtre du navigateur, ils permettent à ce dernier de réserver la place qu'elle va occuper. S'ils ne sont pas spécifiés, le client attend d'avoir téléchargé l'image entière pour réserver la place ; cela peut résulter en un changement de l'apparence d'une page en cours de téléchargement, ce qui n'est pas forcément esthétique. Remarque : Le seul attribut obligatoire est SRC, tous les autres sont optionnels. 6.3. Afficher des images 6.3.1. Suivre le chemin Indiquer au navigateur le chemin à suivre pour trouver un fichier graphique est sans doute une partie un peu difficile. Mais vous devriez vous en sortir très bien (j'y arrive bien!). Ce que nous allons voir ici pour les images s'applique aussi aux liens vers d'autres fichiers HTML. 6.3.2. exemples Pour les exemples, l’on souhaite afficher l’image fichier.gif dans le document texte.html. Pour chaque exemple nous donnerons le chemin relatif par rapport au fichier texte.html <IMG SRC="fichier.gif">
  30. 30. Initiation au langage html Page 31 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 <IMG SRC=" images/fichier.gif"> <IMG SRC="repertoireX/images/fichier.gif"> <IMG SRC="../fichier.gif"> <IMG SRC="../../../fichier.gif">
  31. 31. Initiation au langage html Page 32 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 6.4. Les images map ou images cliquables 6.4.1. Présentation En HTML ou XHTML, on peut faire plusieurs zones de liens sur une seule image. On va ainsi dessiner des zones et attribuer un lien à chacune d'entre elle. C'est ce que l'on appelle une "image map" ou image cliquable en français. 6.4.2. Les zones A une zone réactive est associée une balise <AREA> dont les attributs sont NAME : le nom de la zone, SHAPE : le type de zone (cercle, rectangle ou polygone), COORDS : les coordonnées de la zone (séparées par des virgules), HREF : l'adresse destination, ALT : le commentaire qui apparaitra lorsque le curseur de la souris passera sur la zone. Syntaxe : <AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées" HREF="adresse_destination" ALT="commentaire"> a. Zone circulaire Une zone circulaire est définie par la balise <AREA SHAPE="circle"> et dont l'attribut COORDS prend pour valeurs l’abscisse, l’ordonnée à l'origine du centre et le rayon du cercle. Syntaxe : <AREA SHAPE="circle" COORDS="x,y,rayon" HREF="destination"> b. Zone rectangulaire Une zone rectangulaire est définie par la balise <AREA SHAPE="rect"> et dont l'attribut COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit séparées par des virgules. Syntaxe : <AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="destination"> c. Zone polygonale Une zone polygonale est définie par la balise <AREA SHAPE="poly"> et dont l'attribut COORDS prend pour valeurs la liste des abscisses et ordonnée à l'origine de chacun des points. Syntaxe : <AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1" HREF="destination"> 6.4.3. Comment réaliser une "image map" <IMG SRC="../../images/fichier.gif">
  32. 32. Initiation au langage html Page 33 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Nous allons d'abord préciser dans notre balise image que l'on utilise un "map" avec l'attribut usemap en précisant son nom. <IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">. Exemple Dans notre exemple nous baptiserons notre map «panneaux». Notez bien l'ajout d'un dièze (#) avant le nom : <img src="panneau.gif" width="374" height="162" alt="Orientation" border="0" usemap="#panneaux"/> L'image de notre exemple est la suivante : Nous allons ensuite ajouter une balise <map> avec le nom correspondant. C'est ici que nous définirons nos zones cliquables. Cette balise peut-être placée n'importe où dans le corps de la page. <map name="panneaux"> .... </map> Enfin nous allons ajouter à notre map autant de balises <area> que nous avons de zones cliquables. Pour chacune d'elle nous allons préciser les attributs suivants : • shape, la forme de la zone cliquable qui peut-être : - un cercle (shape="circle"), - un rectangle (shape="rect"), - un polygone (shape="poly") • coords, une suite de coordonnées dessinant la forme choisie • href, le lien vers la page que l'on souhaite afficher lors du click sur la zone • alt, un text alternatif décrivant la zone cliquable Nous choisissons de faire 3 zones cliquables sur notre image (tramé ci-dessous) :
  33. 33. Initiation au langage html Page 34 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Nous aurons donc 3 balises <area> la première étant un rectangle (contact), la 2ème un cercle (FAQ) et la dernière un polygone (accueil). Pour dessiner le rectangle, nous allons donner les positions en x (horizontale) et en y (verticale) du point supérieur gauche, et du point inférieur droit. Nous aurons donc 4 chiffres pour l'attribut coords : <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" /> Pour dessiner le cercle, nous allons donner les positions en x (horizontale) et en y (verticale) de son centre, puis son rayon. Nous aurons donc 3 chiffres pour l'attribut coords : <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" /> Pour dessiner le ploygone, je vais donner les positions en x (horizontale) et en y (verticale) de tous les points que je souhaite. Il faut au moins 3 points pour dessiner un polygone (un triangle), et nous pouvons en mettre autant que l'on en souhaite. Nous aurons donc 6 à N chiffres pour l'attribut coords : <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" /> Notre exemple complet <img src="panneau.gif" alt="Orientation" width="374" height="162" border="0" usemap="#panneaux" /> <map name="panneaux" id="panneaux"> <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" /> <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" /> <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" /> </map> 6.4.4. A propos du calcul des coordonnées de nos zones cliquables Repérer les coordonnées horizontales et verticales de chaque point pour dessiner une forme n'est pas évident. L'utilisation d'un outil adapté tel Adobe Dreamweaver est alors recommandé. Il va nous permettre de dessiner directement sur nos images nos zone grâce à une interface adaptée.
  34. 34. Initiation au langage html Page 35 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 VII. LES LIENS HYPERTEXTE Ecrire des "pages Web", c'est bien ; ne pas les isoler du monde et leur permettre, soit d'être indexée sur une autre page, soit de mener vers un autre site, c'est mieux. A l'inverse d'un livre, par exemple, où le plus souvent la lecture se fait de manière linéaire, et ceci à cause de la nature même du support, le support électronique a permis de développer le concept d'hypertexte. La lecture n'est plus forcément linéaire ; chaque groupe de mots peut mener à des informations supplémentaires, ou bien permettre de lancer une application externe, en fonction des besoins de l'utilisateur. C'est une perspective qu'il ne faut jamais oublier : un lien hypertexte est là pour introduire une certaine profondeur ou bien pour élargir un champ... et non pour artificiellement multiplier des pages sur un site ! 7.1. Différents types de liens Les liens hypertextes (ancrages) sont des éléments d'une page HTML permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer. Il existe 3 types principaux de liens a. Liens vers un autre endroit d’un (même) document. Des liens internes à une page donnée. Lors du fonctionnement de ce lien, le navigateur ne charge pas une nouvelle page. Le contenu de la fenêtre est simplement ajusté pour que la référence apparaisse à l'écran b. Liens vers un fichier HTML d’un même site : liens internes Des liens pointant vers une autre page d'un même site. Lors du fonctionnement de ce lien, le navigateur charge une nouvelle page située sur le même serveur. La syntaxe employée sera alors relative à la page en cours. On parle de lien interne et d'adresse relative. c. Lien vers une autre ressource externe ou autre machine : liens externes Des liens pointant vers un autre site. Il va falloir lancer une requête sur l'ensemble de la toile pour que le serveur qui possède la page ou la ressource demandée puisse l'envoyer via l'Internet, au client demandeur. On parle de lien externe et d'adresse absolue. L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante : <a href="Adresse ou URL"> .. </a> 7.1.1. Liens internes Pour définir un lien, il faut désigner son départ et son arrivée : c'est la même balise <a> (pour anchor ou ancre) à l'aide de deux attributs différents (href et name) qui les prend en charge. a. La Création d’un ancre se fait comme suite <a name="signet"> ... </a> b. L'appel d'un signet se fait de la manière suivante : <a href="#signet"> ... </a> Il est ainsi possible de permettre à l'utilisateur d'accéder à une section particulière d'une autre page :
  35. 35. Initiation au langage html Page 36 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 <a href="url/nom_du_fichier.html#signet"> ... </a> 7.1.2. Le lien interne et l'adresse relative: URL relative Les chemins relatifs se traitent comme dans le cas des chemins d’accès aux images précédemment vus Remarque importante: privilégier l'adresse relative Lors de la création d'un site destiné à un seul serveur, tous les liens internes doivent être sous forme relative. En effet, on développe sur sa propre machine avant de transférer sur le serveur l'ensemble du site créé. Si les liens internes sont sous forme absolue, ils seront perdus après le transfert : les noms de répertoires ne seront peut-être pas les mêmes sur le serveur ! De plus, utiliser une adresse relative au lieu d'une adresse absolue permet au routeur de ne pas avoir à résoudre à chaque requête le chemin vers le serveur. Cette opération prend du temps, rendant ainsi la page plus longue à charger. 7.1.3. Le lien externe et l'adresse absolue: URL absolue a. URL: Uniform Resource Locator C'est-à-dire un "localisateur" (adresse) unifié de ressource. L'URL absolue peut se décomposer en trois parties, par exemple l'adresse :http://www.nabeledi.com/cours/html/index.html se décompose en : protocole adresse du serveur Chemin d'accès sur le serveur http:// www.nabeledi.com /cours/html/index.html b. Un protocole Indique le mode de dialogue utilisé pour communiquer avec la ressource invoquée. Ce peut être : • http:// Hyper Text Transfer Protocole, pour les pages Web. • ftp:// File Transfer Protocole pour l'échange de fichiers quelconques. • news: serveur de news. • mailto: courrier électronique. • gopher:// autre mode de parcours de pages web utilisant une recherche par mot-clé. • file:// fichier interne, dont l'accès ne nécessite pas l'emploi du réseau Internet. c. L'adresse du serveur C'est l'identifiant du serveur où se trouvent les pages et autres ressources auxquelles l'utilisateur souhaite accéder. Elle apparaît en général en clair formée de trois parties. On peut trouver aussi des adresses numériques. Par exemple, 134.157.46.230 d. Un chemin d'accès Une requête vers un serveur aboutit dans un dossier par défaut (généralement sous Windows NT, dans le dossier InetPub>wwwroot). Il faut préciser le chemin d'accès (enchâssement des dossiers et sous-dossiers) du fichier contenant la page Web à afficher. Les extensions des fichiers contenant des pages HTML peuvent être .htm, .html, .shtml, .asp (requête base de données sur le serveur) ou .php (idem).
  36. 36. Initiation au langage html Page 37 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 7.2. Quelques attributs de la balise <a> Attribut Effet Valeur(s) href Hypertexte REFerence, désigne l'adresse à atteindre par le navigateur valeur de l'attribut name (nom) de l'ancre à atteindre dans la même page Internet précédée du caractère #. name étiquette de l'ancre chaîne de caractères accesskey définit une touche du clavier. La combinaison "ALT + touche" a le même effet que le clic sur le lien. touche du clavier tabindex fixe la position de l'élément dans l'ordre séquentiel des tabulations. valeur numérique entière target (voir les frames) title Une rapide description du lien Une chaîne de caractères. onfocus, onblur Un script à exécuter quand le curseur est positionné sur le lien (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. L'attribut accesskey est très important si l'on doit prendre en compte l'accessibilité de la page. Il permet la navigation sans utiliser de souris. De plus, on peut imaginer, sur un site Web, des fonctionnalités qui sont alors facilement accessibles par une combinaison de touches : envoyer un courrier électronique avec une combinaison ALT+C, faire une recherche avec le raccourci ALT+R, etc. De même, l'attribut tabindex permet de faciliter la navigation pour les personnes ne pouvant que mal maîtriser une souris (les mal-voyants par exemple). 7.3. Lien vers d'autres objets Le système d'exploitation recherchera de lui-même, selon l'extension du fichier, quelle application permet de l'exploiter. S'il n'a jamais fait l'association, il proposera à l'utilisateur de l'établir lui-même. Vous pouvez également proposer un fichier (.EXE ou .ZIP) en téléchargement... <a href="site.zip"> Téléchargement du site </a>
  37. 37. Initiation au langage html Page 38 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 VIII. MISE EN FORME DE TEXTE A l'origine, HTML devait décrire la structure du texte sans imposer sa représentation physique qui devait rester le choix de l'utilisateur et de son navigateur. Ce chapitre va traiter de la mise en forme du texte 8.1. Titre et sous-titre Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise <title> ) : ce sont souvent les en-têtes de sections ou de paragraphes. Il existe six niveaux de titres d'importance décroissante : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Exemple : Niveau de titre Effet en Times New Roman <h6>Titre de niveau 6</h6> <h5>Titre de niveau 5</h5> <h4>Titre de niveau 4</h4> <h3>Titre de niveau 3</h3> <h2>Titre de niveau 2</h2> <h1>Titre de niveau 1</h1> 8.2. Paragraphes 8.2.1. La balise <p> a. Fonction : Un paragraphe comme celui que vous lisez est délimité par les balises <p> et </p>. La balise <p> provoque un saut de ligne avant le paragraphe. Un paragraphe ne peut en contenir un autre (le navigateur les interprète comme des paragraphes successifs...). b. Attributs de la balise <p> Attribut Valeur(s) align left (par défaut) right center justify 8.2.2. Rupture de ligne: la balise <br> a. Fonction : Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe. La balise fermante est facultative. b. Attributs de la balise <br>
  38. 38. Initiation au langage html Page 39 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Attribut Effet Valeur(s) clear répartit le texte autour d'une image flottante ou d'un autre objet all left right 8.3. Les balises <div> et <span> Ces balises jouent un rôle particulier. Elles permettent de découper l'information en unités logiques, et sont fortement utilisées avec des feuilles de style. Par exemple, on peut scinder un document HTML avec deux balises <div> en deux parties, une présentant une table des matières, et l'autre présentant un contenu de cours. La balise <span> permet quant à elle une structuration interne à un paragraphe. 8.4. La balise <hr> Destinée à séparer différentes parties d'un document au moyen d'un trait horizontal de longueur et d'épaisseur variables, et généralement pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la balise fermante est facultative (et même jamais utilisée en HTML). Cette balise possède des attributs, mais leur emploi est déconseillé par le W3C : attribut effet valeur(s) noshade suppression de l'ombrage booléen, sa présence seule supprime l'ombrage align alignement left (valeur par défaut) right center justify size épaisseur du trait nombre en pixels width largeur du trait en pixels ou en pourcentage de la fenêtre du navigateur (ajouter le symbole %) 8.5. Mise en forme de la police 8.5.1. Police par défaut Les navigateurs utilisent par défaut une police proportionnelle : Times Roman sur les Macintosh, et Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous est possible de modifier cette police par défaut. Cela rend la tâche des développeurs de site d'autant plus ardue... 8.5.2. La balise <font> Cette balise est déconseillée, utiliser plutôt les feuilles de style. Pour écrire en rouge une partie du texte, on écrira par exemple : <font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="red"> mon exemple </font> a. L'attribut face : sa valeur est une liste de polices séparées par des virgules, c'est la première de cette liste présente sur le navigateur qui sera utilisée. Il est recommandé de spécifier en dernier lieu une famille de polices dite "générique". b. L'attribut size :
  39. 39. Initiation au langage html Page 40 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Il existe 7 tailles, la taille par défaut est 3. On peut spécifier une taille relative à l'aide d'un incrément signé, par exemple size="+2", size="-1". Toute fois, l’on peut personnaliser au delà des 7 valeurs par défaut la taille en pixel c. L'attribut color : A l'aide d'un nom de couleur ou d'un code RGB (voir paragraphe sur la couleur). d. La balise <basefont> Elle est à déconseiller. Elle définit la taille du texte du conteneur dans laquelle elle est citée (seul attribut size). 8.6. Autres balises La touche "Entrée" (le "retour chariot" du temps des machines à écrire) est codée en ASCII par 13. Le navigateur ne le considère pas comme un retour à la ligne mais comme un simple séparateur comme un blanc. Sans demande particulière, le navigateur ignore votre formatage initial. <PRE> force le navigateur à respecter les retours à la ligne et les blancs consécutifs. Balise Signification Effet <em> Emphasis <strong> Fort <cite> citation brève <dfn> Définition <code> extrait de programme <samp> sample : échantillon <kbd> Keyboard(clavier) <var> variable ou argument <abbr> Abréviation <acronym> Acronyme <sub> subscript/indice <sup> superscript/exposant <pre> Preformatted <b> Gras <i> Italique <tt> télétype : police à pas fixe <big> taille supérieure à la taille courante <small> taille inférieure à la taille courante <s> ou <strike> <u> underline/soulignement
  40. 40. Initiation au langage html Page 41 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 8.7. Les entités de caractères 8.7.1. Rappel Il existe plusieurs codifications des caractères : ASCII sous MS-DOS, ANSI sous Windows ; les Macintosh ont leur propre système et les grosses machines IBM se servent de l'EBCDIC. 8.7.2. Nécessité d'un codage supplémentaire: les diacritiques Les diacritiques sont les caractères constitués d'une lettre modifiée par un signe particulier : accent, tréma, cédille comme é, ï, ç etc. HTML utilise la codification ASCII qui ne comporte aucun caractère accentué. Il faut donc définir une convention de codage supplémentaire pour faire apparaître ces caractères. 8.7.3. Présentation d'une entité de caractère Une entité de caractère débute par "&", et finit par ";". Exemple le "é" est codé "&eacute;". Voici une petite liste des principaux diacritiques: Caractère Abréviation Caractère Abréviation à &agrave; â &acirc; ä &auml; æ &aelig; é &eacute; è &egrave; ê &ecirc; ë &euml; ù &ugrave; û &ucirc; ü &uuml; ö &ouml; ï &iuml; î &icirc; ç &ccedil; œ &oelig; 8.7.4. Les caractères réservés Les caractères comme "<", ">" et "&" ont une signification spécifique : le caractère inférieur désigne le début d'une balise, etc. Codés tels quels, le navigateur est incapable de les faire apparaître. Il a donc fallu leur adjoindre une codification supplémentaire : "<" est codé &lt;, ">" est codé &gt;, "&" est codé &amp;. 8.8. Codage de la couleur HTML propose deux façons de coder une couleur : 8.8.1. Par son nom Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples sont données dans le tableau ci-dessous donné dans la section "Les seize couleurs simples". Il en existe d'autres aux noms plus poétiques comme : Cependant, le rendu de ces couleurs dépend parfois fortement du navigateur et de la plateforme utilisée. 8.8.2. Par le triplet RGB Toute couleur peut être décomposée en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'où RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et 255. Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF.
  41. 41. Initiation au langage html Page 42 sur 61 ___________________________________________________________________________________ Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009 Par exemple, #BA1B85 code une intensité de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133) pour le bleu qui donne : 8.8.3. Les seize couleurs simples Voici les seize couleurs de base : Vous aurez vous même noté la couleur noire (corrigez donc #000000) ! 8.9. Listes d'items 8.9.1. Introduction Les listes d'items sont énormément utilisées sur le web au même titre que dans les documents électroniques ou manuscrits. Ils permettent d'énumérer des items en les numérotant ou non. Les listes sont pratiques dans le cadre de sommaires. 8.9.2. Liste simple non ordonnée Une liste doit être encadrée par le conteneur< UL> et chaque item doit être introduit par la balise <LI>. Le conteneur provoque une tabulation. Syntaxe : <UL> <LI>item n°1</LI> <LI>item n°2</LI> <LI>item n°3</LI> </UL> Exemple : • item n°1 • item n°2 • item n°3 8.9.3. Type de puce Par défaut, les puces d'une liste non ordonnée sont des disques pleins. On peut les modifier avec l'attribut TYPE qui peut prendre les valeurs : square (carré plein), circle (cercle), disc (rond plein).

×