Cours HTML

Unit denseignement IMTC Date : 24 Novembre 2006 Auteur : Olivier Hansen Extrait du programme des cours :
24 novembre TD 1 : Initiation HTML - Premiers pas de pratique du langage HTML TD 2 : Ralisation d'un site Web lmentaire: matrise d'un diteur de pages, liens hypertextes, image, son, vido 1er dcembre TD 3 : Intgration de diffrents outils : serveur Apache, langage PHP et SGBD MySQL pour la ralisation de base de donnes mdicales accessible par Internet (1)

O. Hansen 14-16h O. Hansen 16-18h V. Douzal 14-16h

101 101 101

1/23

Sommaire
1 2 3 4 5 Introduction.................................................................................................................................3 Prambule....................................................................................................................................3 Environnement.............................................................................................................................4 Choix et Historique......................................................................................................................5 Internet.........................................................................................................................................6 5.1 Environnement Client-Serveur..............................................................................................6 5.2 Moteur de recherche..............................................................................................................6 5.3 Le navigateur.........................................................................................................................6 6 Du concret !.................................................................................................................................7 6.1 La premire page HTML.......................................................................................................7 6.2 Mise en forme........................................................................................................................7 6.2.1 Les couleurs....................................................................................................................7 6.2.2 Police et taille..................................................................................................................8 6.2.3 Centr, gras ................................................................................................................9 6.2.4 Paragraphes, titres...........................................................................................................9 6.2.5 Listes...............................................................................................................................9 6.2.6 Sparateur.....................................................................................................................10 6.3 Chemins daccs aux fichiers..............................................................................................10 6.3.1 Insrer une image..........................................................................................................10 6.3.2 Liens hypertexte............................................................................................................11 6.3.3 Insrer une vido ou du son..........................................................................................12 6.4 Tableaux...............................................................................................................................13 6.4.1 Cration.........................................................................................................................13 6.4.2 Mise en forme...............................................................................................................13 6.5 Les formulaires....................................................................................................................14 6.5.1 Le plus simple...............................................................................................................14 6.5.2 Listes, cases cocher....................................................................................................15 6.6 Les cellules (Frames)...........................................................................................................15 6.6.1 Un exemple nanmoins.................................................................................................16 7 Les feuilles de style...................................................................................................................17 8 Editeurs HTML..........................................................................................................................18 Annexe 1 : Sources dinformations..............................................................................................19 Annexe 2 : Comparaison HTML-XML........................................................................................20 Annexe 3 : Les scripts..................................................................................................................21 Annexe 4 : Rsum des balises.....................................................................................................22

2/23

1 Introduction
Ce cours a pour objectif de prsenter les lments de base du langage HTML. Aprs une prsentation de lenvironnement du web et de lhistorique du web, lessentiel du cours portera sur la cration de pages HTML prsentant ces diffrents lments de base.

2 Prambule
Quels sont les diffrents moyens pour afficher un texte lcran ?

Comment est prsent un texte ?

Comment indique-t-on le style des caractres, leur format, leur couleur ?

Quelle est la taille du fichier ?

3/23

3 Environnement
Html mane du World Wide Web Consortium, abrg W3C. Cest un consortium fond en octobre 1994 pour promouvoir la compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP. Le W3C n'met pas des normes au sens europen, mais des recommandations valeur de standards industriels. Quelques abrviations : SGML : Standard Generalized Markup Language (langage normalis de balisage gnralis) est un langage de description balises, de norme ISO (ISO 8879:1986). HTML : l'Hypertext Markup Language est le langage informatique cr et utilis pour crire les pages Web. HTML permet en particulier d'insrer des hyperliens dans du texte, donc de crer de l'hypertexte, d'o le nom du langage. XML : Extensible Markup Language, langage de balisage extensible ) est un langage informatique de balisage gnrique. Le W3C recommande XML pour exprimer des langages de balisages spcifiques (exemples : XHTML, SVG, XSLT). Son objectif initial est de faciliter l'change automatis de contenus entre systmes d'informations htrognes, notamment, sur Internet. XML est un sous-ensemble de SGML dont il retient plusieurs principes dont : la structure d'un document XML est dfinissable (DTD) et validable par un schma, un document XML est entirement transformable dans un autre document XML. Cette syntaxe est reconnaissable par son usage des chevrons (< >), elle s'applique de plus en plus de contenus. XHTML est le successeur de HTML (de l'anglais HyperText Markup Language), XHTML respectant la syntaxe dfinie par XML, plus rcente et plus simple que la syntaxe dfinie par SGML respecte par HTML. CSS : Cascading Style Sheets, ce sont les feuilles de style en cascade utilises pour dcrire la prsentation d'un document structur crit en HTML ou en XML DTD : La Document Type Definition, ou Dfinition de Type de Document, est un document permettant de dcrire un modle de document SGML ou XML PNG : Portable Network Graphics est un format d'images numriques ouvert, qui a t cr pour remplacer le format propritaire GIF, dont la compression tait soumise un brevet. SVG : Scalable Vector Graphics est un format de fichier bas sur XML permettant de dcrire des ensembles de graphiques vectoriels. SOAP : Simple Object Access Protocol est un protocole de RPC orient objet bti sur XML. RPC : Remote Procedure Call est un protocole permettant de faire des appels de procdures sur un ordinateur distant l'aide d'un serveur d'application (modle clientserveur)

4/23

4 Choix et Historique
Lhypertexte : lide est de raliser automatiquement le renvoi quun texte un peu labor fait dautres parties de lui-mme ou dautres textes. Cela se fait en activant des zones particulires du document, les liens hypertexte (hyperlinks). On fait remonter cette ide un article de 1945, qui a frapp des imaginations qui lont mise en uvre au SRI (Stanford research institute) et au Xerox Parc. On la trouve un peu plus tard chez Apple avec Hypercard (mais au sein dune seule application sur une machine, pas travers des rseaux interconnects). Une bonne ide a sans doute t de dcliner une catgorie de documents (trs) simple partir de SGML (Standard generalized markup language), un systme de balisage gnralis permettant de construire de faon trs ouverte des structures dans du texte. Des squences particulires de caractres codent, au sein mme du texte, sa structure. LHTML est une catgorie de texte SGML, spcifie, standardise par une DTD (Document type definition). La simplification permettait davoir des interprteurs viables, qui puissent assurer un fonctionnement interactif. Linteroprabilit : permettre aux documents HTML d'tre accessibles sur des plates-formes et des navigateurs diffrents est fondamental dans la conception de ce langage. L'ambition tait d'avoir un langage de description de documents au format ouvert qui soit indpendant de ce qui servirait lire les pages. Par consquent, il n'est pas prvu que telle ou telle police de caractre soit utilise explicitement, ni que le moniteur du client utilise telle ou telle rsolution. Le logiciel exploit pour la navigation devrait lui aussi ne pas tre une source de discrimination. Parvenir l'interoprabilit permet de baisser les cots des fournisseurs de contenus parce qu'ils n'ont dvelopper qu'une seule version d'un document. Si cet effort n'est pas fait, le risque est grand de voir le Web rgresser vers un monde propritaire de formats incompatibles, en rduisant en fin de compte son potentiel commercial au dtriment de tous ses participants. Le langage HTML a t dvelopp avec l'intuition que les appareils de toutes sortes devaient pouvoir utiliser les informations sur le Web : les ordinateurs personnels avec des crans de rsolution et de profondeur de couleurs variables, les tlphones cellulaires, les appareils portables, les appareils de synthse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme leve, et ainsi de suite. Sparer la structure de la prsentation : L'exprience montre que la sparation de la structure d'un document de sa prsentation permet de rduire les cots de diffusion vers un grand ventail de plates-formes, de mdias, etc., et facilite la mise jour des documents.

Diffrentes versions de HTML ont t implmentes. La version la plus jour actuellement est HTML 4.

5/23

5 Internet
Appel aussi le web, la toile

5.1 Environnement Client-Serveur

Les applications sur le web fonctionnent selon un environnement client/serveur, cela signifie que des machines clientes (des machines faisant partie du rseau) contactent un serveur, une machine gnralement trs puissante, qui leur fournit des services, laccs aux sites ...

5.2 Moteur de recherche

Il existe une norme quantit d'informations sur Internet (plusieurs millions ou milliards de documents, sur les milliers ou millions de serveurs), et ces informations sont pour la plupart renouveles quotidiennement. Le moteur de recherche est un lment indispensable pour s'y retrouver ! Un moteur de recherche (Searchbot en anglais) est une machine spcifique (matrielle et logicielle) charge d'indexer des pages web afin de permettre une recherche l'aide de mots-cls dans un formulaire de recherche. Les principaux : AltaVista, Google, Yahoo

5.3 Le navigateur
L'lment cl pour la navigation au sein des pages web est le navigateur (en anglais browser). Utilis sur le client, ce logiciel est capable d'interroger les serveurs web, d'exploiter leurs rsultats et de mettre en page les informations grce aux instructions contenues dans la page HTML. Les deux principaux navigateurs utiliss sur Internet : Mozilla Firefox, Microsoft Internet Explorer. ATTENTION : malgr la volont du W3C duniformiser les langages pour assurer une compatibilit optimale entre tous les intervenants sur le web. Les implmentations des normes ne sont jamais parfaites. Lors de laffichage dune page html, il est donc frquent de ne pas obtenir exactement le mme comportement suivant le navigateur utilis.

6/23

6 Du concret !
HTML est un langage balises. Les documents crits dans un langage balises contiennent essentiellement deux choses : des donnes, et des meta-donnes. Pour faire simple : la meta-donne est une information supplmentaire qui ajoute un contexte ou une signification particulire une donne. Un exemple, prenons le texte :
Bonjour, voicim premirepagewb ! e

Un humain sait que Ma premire page en HTML est le titre du texte, et Bonjour, voici ma premire page web ! son contenu avec des polices de caractres diffrentes. Toutefois, les programmes d'ordinateurs ne sont pas humains et ne savent pas tout a. Nous utilisons donc des meta-donnes exprimes par des balises pour ajouter un sens la donne. Un fichier HTML doit tre suivi de lextension .tou . m h . h

6.1 La premire page HTML

Exemple, crons le fichier page1.html avec ce contenu : Ouvrons le fichier avec un navigateur et regardons ce quil affiche. Explications des balises utilises : <html> et </html> : la premire informe votre navigateur qu'il va afficher une page HTML. Cette balise doit tre la premire de votre code. La seconde est la balise de fin. Elle referme la premire. (remarquez le / devant le mot contenu entre crochets). Elle doit tre la dernire de votre code HTML et signifie la fin de votre code HTML. <head> et </head> : la premire ouvre l'entte de votre page. Cet entte comprend pour l'instant le titre de votre page. Cette balise est toujours place juste aprs la balise <html>. La seconde, referme l'entte de votre page (remarquez encore une fois le / devant le mot entre crochets). <title> et </title> : la premire ouvre la partie titre de votre page. Ce titre sera plac dans la barre tout au-dessus de votre navigateur. La seconde referme la premire encore une fois en plaant un / devant le mot entre crochets. La balise "title" doit tre ouverte puis referme l'intrieur de la balise "head". C'est dire qu'il faut que la balise "title" doit tre ouverte puis referme avant que le balise "head" ne soit referme. <body> et </body> : la premire ouvre le dbut du corps de votre document. C'est l que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer aprs la balise de fermeture de l'entte (=> </head>). La seconde referme la premire et maintenant je suppose que vous avez compris le principe pour fermer une balise...

6.2 Mise en forme

6.2.1 Les couleurs
Ajoutez dans page1.html entre les balises B : O

7/23

Et actualisons la page dans le navigateur. Explications des nouvelles balises utilises : <br> : cette balise permet de faire un saut de ligne. Lorsque vous crivez du texte dans une page web, il y a un retour automatique la ligne lorsque le texte atteint le bord droit de l'cran. Avec la balise <br>, vous pourrez faire des sauts de ligne votre guise. Un "BR" correspond un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR" (==> <BR><BR>). Il n'y a pas de balise de fin ! <font> et </font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connatre la mise en forme appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus frquentes peuvent tre nommes explicitement en anglais (red, green, blue,...) sinon il faut placer le code Hexadcimal de la couleur voulue. Essayez "green", "#008000", "blue", "#0000FF", "yellow", "#FFFF00". Vous trouverez la liste des principaux codes couleurs sur notre page Codes couleurs. La couleur du texte est par dfaut noir (#000000 ou black). Nous avons galement vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'cran en couleur tout comme le fait "color" pour le texte. C'est le mme principe pour le code des couleurs. La couleur du fond est par dfaut blanc (#FFFFFF). Petites "dfinitions" : Un attribut est un paramtre qui fournit des indications une balise. Il possde un nom et trs souvent une valeur prciser (nom = "valeur"). Il se rajoute dans la balise de dbut, c'est dire toujours entre les < > aprs le nom de la balise (par exemple : <font color="#ff0000">. Le code Hexadcimal qui permet de dfinir une couleur est compos de 6 caractres prcds de #. Ces 6 caractres dfinissent la "teneur" en rouge, vert et bleu (les couleurs de bases) de la couleur a former. Il n'y a que 16 caractres possibles : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

6.2.2 Police et taille

Commentez ou retirez <BODY bgcolor="#000000"> puis ajoutez : Explications des nouveaux attributs utiliss : l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre <font> et </font>. Vous avez le choix entre donner un nombre entre 1 et 7 (par dfaut => 3) ou bien donner une valeur de "dcalage" par rapport la taille par dfaut du navigateur ("-2", "-1", "+1", "+2", "+3", "+4"). l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera affich.Vous pouvez prciser plusieurs noms de police spars par des ','. Si la navigateur ne reconnat pas le premier nom, il essayera avec le suivant... Sil ne reconnat aucun nom, il utilisera la police par dfaut du navigateur utilis. Petites remarques : Vous pouvez tout fait cumuler les attributs dans une balise (spars par un espace) ! Inutile d'utiliser des polices trs spciales car si les visiteurs ne l'ont pas sur leur ordi, le navigateur ne la reconnatra pas et donc ne l'utilisera pas. 8/23

6.2.3 Centr, gras

Ajoutons : Explications des nouvelles balises utilises : <b> et </b> : crit le texte en gras. <i> et </i> : crit du texte en italique. en gras. <u> et </u> : souligne du texte. Evitez d'utiliser trop cette balise car un texte soulign peut tre confondu avec un lien et a peut tre gnant pour le visiteur. <center> et </center> : centre le texte par rapport l'cran. <!-- et --> : Ces balises permettent de commenter votre code. Le commentaire peut s'tendre sur plusieurs lignes. Remarques importantes : Attention bien refermer vos balises sinon la suite du texte aura galement les proprits de la balise non referme. Par exemple si vous oubliez de refermer la balise pour placer des commentaires (<!-- ... -->), la fin de votre code ne s'affichera pas ! On peut cumuler les balises, pour par exemple mettre un texte en gras, en italique et centr. Il faut bien faire attention l'ordre des balises pour les refermer (dans l'ordre inverse de l'ouverture) !

6.2.4 Paragraphes, titres

Ajoutons : Explications des nouvelles balises utilises : <p> et </p> avec l'attribut "align" : permet de crer un paragraphe avec du texte align soit gauche ("left"), droite ("right"), au centre ("center") ou en justifi ("justify"). <blockquote> et </blockquote> : permet de dcaler un bloc de texte par rapport au bord gauche. <h1> et </h1> : permet de dfinir des titres. Il existe 6 types de titres numrots de 1 6. Vous pouvez utiliser le mme attribut "align" que celui de <p>.

6.2.5 Listes
Ajoutons : <UL type="disc"> <LI>Page 1</LI> <LI>Page 2</LI> </UL> <br> <OL> <LI>Page 3</LI> <LI>Page 4</LI> <LI>Page 5</LI> </OL> 9/23

Explications des nouvelles balises utilises : <ul> et </ul> avec l'attribut "type" : indique le dbut et la fin d'une liste de puces (disc, circle, square). <ol> et </ol> : indique le dbut et la fin d'une liste numrote (avec des lettres : attribut type="a"). <li> : dsigne un nouvel lment d'une liste.

6.2.6 Sparateur
Ajoutons : Explications de la nouvelle balise utilise : <hr> : permet de placer un trait sparateur. Plusieurs attributs possibles : "width" pour en prciser la largeur soit en pixels soit en pourcentage, "size" pour lpaisseur, "color" pour lui donner de la couleur, "align" pour l'aligner soit gauche ou droite. Pas de balise de fin !

6.3 Chemins daccs aux fichiers

Nous allons dans les prochains chapitres avoir besoin d'autres fichiers, par exemple des fichiers images (*.gif, *.jpg), d'autres pages web (pour les liens hypertextes),... Quel chemin emprunter pour accder ce fichier ? Il y a deux types de chemins d'accs : les chemins absolus et les chemins relatifs : Les chemins relatifs permettent d'accder des fichiers qui se trouvent sur la mme machine que le fichier (la page web) qui les appelle. o Pour utiliser un fichier image qui se trouve dans le mme rpertoire que votre page web, il suffira simplement de prciser le nom de ce fichier : nom_du_fichier.ext (le .ext remplace l'extension du fichier dans cet exemple thorique, dans la pratique, nous aurons .gif, .html, .js,...) o Si le fichier se trouve dans un sous-rpertoire du rpertoire qui contient notre page web, il faudra accder au fichier comme ceci : nom_du_sous_rep/fichier.ext o Si le fichier se trouve dans un autre rpertoire, voici comment procder : ../nom_autre_rep/fichier.ext Le "../" permet de remonter d'un "tage" dans l'arborescence des rpertoires. Si vous devez remonter de 2 "tages" => ../../nom_du_rep/fichier.ext Les chemins absolus utilisent l'URL du fichier, donc pour accder des fichiers qui se situent sur une autre machine (pour les liens hypertextes vers des sites extrieures par exemple), il faut utiliser des chemins absolus et donc des URLs (par exemple : http://www.un-site.com/un_rep/sous_rep/fichier.ext) Dfinition : Une URL (Uniform Resource Locator) est un format de nommage universel pour dsigner une ressource sur Internet.

6.3.1 Insrer une image

Ajoutons dans notre fichier : Explications de la nouvelle balise utilise : 10/23

<img> : insre une image dans votre page. Il faut prciser le chemin (ou adresse) de l'image ajouter au moyen de l'attribut "src" (obligatoire !). Il n'y a pas de balise de fin ! Les attributs "width" et "height" permettent respectivement de spcifier la largeur et la hauteur de l'image en nombre de pixels. L'attribut "border" dsigne la taille du bord afficher autour de l'image (par dfaut : 0). Et enfin "alt" (comme alternative) permet de prciser un texte qui sera affiche si l'image n'est pas trouve (=> croix rouge) ou bien si vous laissez votre souris dessus.

Quelques remarques : Ce dernier attribut "alt" est trs important pour le rfrencement de votre site. Il vaut donc mieux ne pas le ngliger et l'utiliser dans chacune de vos balises <IMG>. Si vos images ne s'affichent pas (une croix rouge les remplace), c'est certainement une erreur dans le chemin d'accs vers le fichier image. Vrifier bien le nom du fichier, le nom du rpertoire ... Il arrive galement que les certains diteurs HTML vous insrent des chemins du style c:/mes documents/..., les images s'afficheront donc en local (chez vous) mais par sur le web. C'est normal vu que ce chemin n'existe pas sur la machine o se trouvent vos pages web. Il faudra donc modifier ces chemins par des chemins relatifs. Pour mettre une image comme fond d'cran, il faut utiliser l'attribut "background" de la balise <BODY>. Il veut toujours mieux utiliser un fond d'cran fixe (pas une image anime).

6.3.2 Liens hypertexte

Les liens portent bien leur nom. Ils permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page. Il y a 3 types de liens : Les liens internes un site (=> utilisation trs frquente des chemins relatifs car plus court taper). Les liens internes une page (ou ancre) (=> utilisation de chemins absolus ou relatifs). Les liens externes (=> uniquement des chemins absolus !) Ajoutons dabord quelque part au milieu de notre page, la dfinition dune ancre : Puis la fin, avant </body> : Explications des nouvelles balises utilises : <a> et </a> : permettent de crer un lien hypertexte. Son attribut principal est "href". En effet, il permet de prciser l'adresse de la page de destination du lien qui sera cr. Cette adresse peut tre soit absolue soit relative. Si vous souhaitez faire un lien interne une page, il faut crer une ancre. Quelques remarques : Si le contenu d'une page est assez long, un lien interne la page avec une ancre pourrait tre trs pratique pour revenir dans le haut de la page (sans utiliser les barres de scroll). Au dbut de votre texte, vous crez un ancre sur le premier mot du texte et la fin du texte, vous rajoutez un lien vers cette ancre. Dans nos exemples, nous avons uniquement utilis du texte entre les balises <a> et </a>. Mais rien ne vous empche d'utiliser une image plutt que du texte !

11/23

Il existe galement un attribut "target" qui vous permet par exemple d'ouvrir un lien dans une nouvelle fentre comme ceci : <a href="URL"target="_blank">lien/ < Par dfaut, un lien s'ouvre dans la mme page que la page ou se trouve le lien, hors si vous avez des liens vers des sites extrieures, si un visiteur clique sur un de ces liens, le site va s'ouvrir dans la fentre o se trouve votre site (il ne sera donc plus visible puisque remplac par la nouvelle page). Il peut donc tre utile d'utiliser l'attribut target pour les liens vers des sites externes pour que votre site reste visible galement. Pour des liens internes votre site, il est souvent dconseill d'ouvrir 36 fentres diffrentes avec les pages de votre site pour ne pas troubler les visiteurs. Il faut galement que les cibles des liens existent, on peut crer des fichiers contenant juste du texte pour page2.html et page3.html.

6.3.3 Insrer une vido ou du son

Si vous voulez insrer une vido ou du son dans votre page, il y a deux possibilits; soit en ouvrant le lecteur, soit en l'intgrant directement dans la page. Pour l'ouvrir hors de la page avec windows media player il suffit de faire un lien vers la vido de la mme faon que lon insert un lien. Pour l'insrer directement dans la page, exemple : Ou pour du son : Explications de la nouvelle balise utilise : <embed> avec l'attribut src (obligatoire) spcifiant l'url de la vido. Ses attributs sont nombreux : o border : De 1 6 spcifie la bordure. o widht et height : Largeur et hauteur de "l'cran", en pixels. o loop : Spcifie le nombre de fois qu'est joue la vido (pour infini, mettre -1). o controls : Active ou dsactive la prsence des boutons (lecture, pause, stop...) sous l'image "true" (dfaut) pour oui et "false" pour non. o autostart : Active (true : dfaut) ou dsactive (false) le dmarrage automatique. Si les boutons ne sont pas activs ne mettez pas false cet attribut au quel cas votre visiteur ne pourrait pas voir la vido. o autoload : Active (true : dfaut) ou dsactive (false) le chargement automatique de la vido. Remarque : Attention lors des dveloppements dans le rpertoire Documents and Settings : ce nom de rpertoire contient des espaces qui peuvent tre mal interprts et faire chouer les liens. Placez vous de prfrence dans un rpertoire dont le nom ne contient pas despaces. Pour insrer un fond sonore sa page, testons : Explications de la nouvelle balise utilise : <bgsound> possde seulement deux attributs: o src Indique l'url du morceau (obligatoire) o loop Spcifie le nombre de nombre de fois qu'est jou le morceau (-1 pour infini)

12/23

6.4 Tableaux
6.4.1 Cration
Ajoutons pour notre premier tableau : Explications des nouvelles balises utilises : <table> et </table> : cration d'un tableau. Nous avons dans notre exemple prcis, au moyen de l'attribut "border" (0 par dfaut), la taille de la bordure autour des cellules de notre tableau. (la balise de fin est obligatoire !) <tr> : dbute une nouvelle ligne dans la tableau. La balise de fin (</TR>) n'est pas obligatoire. Chaque fois que le navigateur tombera sur une balise <TR>, il considrera que la ligne prcdente est termine et commencera une nouvelle. Toutes les lignes d'un mme tableau doivent contenir le mme nombre de cellules. <td> : cre une nouvelle cellule dans un tableau. Cette cellule doit tre contenue dans une ligne et donc une balise "TR" doit tre dj ouverte... Vous pouvez ensuite crer autant de cellules que vous voulez dans un mme ligne. Une cellule peut contenir un peu tout et n'importe quoi. On peut y mettre du texte, des images ... La cellule va s'adapter automatiquement aussi bien en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les cellules d'une mme colonne ont la mme largeur (celle de la cellule la plus large), idem pour la hauteur des cellules d'une mme ligne. Comme pour "TR", la balise de fin (</TD>) est optionnelle. Remarque : Mme si les balises de fin </td> et </tr> sont optionnelles, il veut quand mme mieux les utiliser pour viter des problmes de compatibilit ou de mise en page avec certains vieux navigateurs.

6.4.2 Mise en forme

Ajoutons : Explications des nouveaux attributs utiliss : "bgcolor" permet de donner un fond de couleur un tableau ou une cellule. "width" permet de prciser la largeur d'un tableau ou d'une cellule. La largeur peut tre donne en pixel ou en pourcentage. "height" permet de donner la hauteur d'une cellule. Il n'est pas possible de prciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X une cellule et que vous placez par exemple une image dont la hauteur est plus grande, la cellule s'adaptera la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur). "cellpadding" dfinit l'espace en pixel entre le bord d'une cellule et son contenu. (1 par dfaut). "cellspacing" dfinit l'espace entre les cellules du tableau. (1 par dfaut). "colspan" permet de faire fusionner des cellules d'une mme ligne. Il faut y prciser le nombre de cellules fusionner. "rowspan" permet de faire fusionner des cellules d'une mme colonne. Il faut y prciser le nombre de cellules. "align" prcise l'alignement sur un axe horizontal du tableau ou du contenu de la cellule. (valeur possible : "left" par dfaut, "right", "center"). "valign" prcise l'alignement du contenu des cellules sur un axe vertical. (valeurs possible : "middle", "bottom", "top"). Petits plus : Vous pouvez mettre une image comme fond d'un tableau la place d'une simple couleur (comme pour la balise BODY) avec l'attribut background. 13/23

Il est galement possible ce changer la couleur de la bordure autour du tableau avec l'attribut "bordercolor" (par exemple bordercolor="#000000").

6.5 Les formulaires

Les formulaires permettent de rcuprer des informations auprs de vos visiteurs. Vous pouvez ainsi crer une certaine interactivit avec vos visiteurs. Ils pourront vous envoyer des messages et vous pourrez mieux les connatre. Il y a plusieurs moyens pour rcuprer ces informations. Soit vous utilisez un script cot serveur (voir 3), ce script est interprt sur un serveur chez votre hbergeur et pourra traiter les informations. Soit vous pouvez recevoir les infos directement sur votre adresse email au moyen d'un "mailto".

6.5.1 Le plus simple

Ajoutons encore notre fichier : Explications des nouvelles balises utilises : <form> et </form> : elles dlimitent un formulaire. La prsence de la balise de fin est primordiale ! L'attribut "enctype" permet de spcifier lencodage des donnes. L'attribut "action" dsigne l'adresse du script (CGI, PHP) qui va traiter les donnes. Ici on utilise lenvoi vers un mail : action="mailto:adresse_email@domaine.com". L'attribut "method" spcifie la manire dont les donnes remplies dans le formulaire doivent tre transmises. Il peut prendre 2 valeurs : "POST" ou "GET". Avec GET, les donnes sont envoyes au serveur via l'URL et sont donc visibles dans celle-ci ! Avec POST, les donnes sont directement envoyes au serveur et ne sont pas visibles. On utilisera presque toujours la mthode POST pour les formulaires. <input> : cette balise permet de placer un champ dans lequel les informations peuvent tre recueillies. Pas de balise de fin ! L'attribut "name" permet de dsigner un champ du formulaire par un nom pour le traitement des donnes. Chaque nom doit tre unique ! L'attribut "type" spcifie le type de champ. Il peut prendre plusieurs valeurs : o "text" pour entrer du simple texte o "hidden" pour un champ cach non visible par le visiteur (on ne peut pas y ajouter du texte !) o "password" pour entrer un mot de passe (les caractres sont remplacs par des *) o "submit" pour crer un bouton pour envoyer les donnes du formulaire. o "reset" pour crer un bouton qui vide le formulaire et le remet comme au chargement de la page. L'attribut "value" permet de donner une valeur un champ avant que le visiteur ne commence le remplir. Dans le cas d'un bouton (submit ou reset), cette valeur sera le texte affich sur le bouton ! L'attribut "size" donne la largeur du champ (20 par dfaut). L'attribut "maxlenght" quant lui dfinit le nombre maximal de caractres pouvant tre taps dans un champ. Si vous essayez de taper un caractre supplmentaire, il ne sera pas pris dans le champ.

14/23

6.5.2 Listes, cases cocher

Ajoutons maintenant : Explications des nouvelles balises utilises : <select> et </select> : cre une liste droulante. On peut lui attribuer un nom avec l'attribut "name" ainsi que le nombre d'lments visibles de la liste avec "size" (1 par dfaut). <option> et </option> : ajoute un lment la liste droulante cre avec un SELECT. On peut lui donner une valeur grce son attribut "value". Par dfaut, c'est la premire balise option qui sera celle par dfaut. Si vous voulez que ce soit une autre, il faut ajouter le mot suivant dans la balise en question : 'selected'. <textarea> et </textarea> : elles dlimitent une zone de texte. Comme toujours on peut la nommer avec "name". On peut galement en spcifier la taille avec "rows" (nombre de lignes) et "cols" (nombre de colonnes). Nous avons galement vu 3 nouvelles valeurs pour l'attribut type d'un INPUT : o "button" : cre un bouton cliquable. On lui donne un nom au moyen de "name" et une valeur (qui sera le texte affich sur ce bouton) avec "value". Les simples boutons n'ont pas un grand intrt premire vue mais ils en auront beaucoup quand on leur affectera des actions via un JavaScript. o "checkbox" : cre une case cocher. On peut bien entendu lui donner un nom et une valeur mais on peut aussi dcider si elle doit tre coche ou non au chargement de la page. Si la case doit tre coche, il faut rajouter dans la balise le mot suivant : 'checked'. Par dfaut une case n'est pas coche. o "radio" : cre un bouton radio. Un bouton radio seul n'a pas un grand intrt. En gnral, on en place plusieurs pour donner un choix aux visiteurs. Contrairement aux cases cocher avec lesquelles on peut slectionner plusiers valeurs, avec les boutons radio, on ne peut en choisir qu'une ! Quand on choisit une autre valeur, celle qui tait slectionne ne l'est plus. ATTENTION : les boutons radios doivent avoir le mme nom (via l'attribut "name") ! Pour slectionner la valeur par dfaut, comme pour les cases cocher, il faut ajouter le mot 'checked' dans la balise du bouton par dfaut.

6.6 Les cellules (Frames)

Trs pratiques au dbut dHtml, lutilisation des frames (voir aussi <iframe>) est aujourdhui controverse. Dans la logique de dpart, les frames servaient structurer l'interface d'une page Internet de manire avoir plusieurs lments distincts pouvant dfiler indiffremment les uns des autres. Bien vite cette balise ft dtourne pour afficher d'autres informations non voulues par le visiteur, allant mme jusqu' masquer son contenu (taille 0 par exemple). De plus les frames ne sont pas compatibles avec tous les navigateurs. Prenons comme exemple, les navigateurs en mode texte. On dira "mais personne ne les utilise ! "... personne sauf les dficients visuels ou autres handicaps. D'autres catgories de navigateurs existent, citons par exemple PocketIE pour Windows CE, la taille de l'cran n'tant pas toujours adapt la lecture d'une page comportant des frames, c'est pourquoi ces navigateurs ne les reconnaissent pas ! Pour ceux qui iront plus loin, la solution consiste en fait utiliser les balises DIV.

15/23

6.6.1 Un exemple nanmoins

Les frames ne sont pas compatibles avec <BODY>, il faut crer un fichier part :

16/23

7 Les feuilles de style

Dfinition : Charte graphique : son but est de conserver une cohrence graphique dans les ralisations graphiques d'une mme organisation, projet ou entreprise quels que soient les diffrents intervenants de la production (graphiste, directeur artistique ...). L'intrt de raliser une charte graphique est double : L'identit graphique reste intacte quelles que soient les ralisations graphiques, afin que l'organisation, le projet ou l'entreprise (qui sont une somme d'individualits) parle d'une seule voix. Les anglophones parlent de corporate design (littralement : dessin de l'entreprise). La charte graphique permet au rcepteur (par opposition l'metteur) d'identifier facilement cet metteur et, par habitude si la cohrence est respecte, de se reprer visuellement dans les diffrentes ralisations graphiques - y compris au sein mme d'un mme support graphique - facilitant sa lecture. Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitule Cascading StyleSheets (feuilles de style en cascade), note CSS. Le principe des feuilles de style consiste regrouper dans un mme document des caractristiques de mise en forme associes des groupes d'lments. Il suffit de dfinir par un nom un ensemble de dfinitions et de caractristiques de mise en forme, et de l'appeler pour l'appliquer un texte. Il est ainsi possible de crer un groupe de titres en police Arial, de couleur verte et en italique. Les feuilles de style ont t mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la prsentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de dfinir le style d'un texte, toutefois chaque lment possde son propre style, indpendamment des lments qui l'entourent. Grce aux feuilles de style, lorsque la charte graphique d'un site compos de plusieurs centaines de pages web doit tre change, il suffit de modifier la dfinition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier ! Elles sont appelles feuilles de style en cascade (en anglais Cascading Style Sheets ) car il est possible d'en dfinir plusieurs et que les styles peuvent tre hrits en cascade. Les feuilles de style permettent notamment : d'obtenir une prsentation homogne sur tout un site en faisant appel sur toutes les pages une mme dfinition de style ; de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ; une plus grande lisibilit du HTML, car les styles sont dfinis part ; des chargements de page plus rapides, pour les mmes raisons que prcdemment ; un positionnement plus rigoureux des lments. Vous trouverez plusieurs cours sur les feuilles de style sur internet : http://www.netalya.com/fr/Css-intro.asp, http://web.developpez.com/tutoriel/xhtmlcss/,

17/23

8 Editeurs HTML
Nous avons vu comment fonctionnait une page html. On peut lgitimement penser que cest quand mme laborieux et quil serait pratique de disposer dun logiciel permettant directement dditer une page comme on dsire la voir safficher. Quand on dite un document avec Word, cest lui qui se charge des styles, a nous est transparent et cest bien pratique. Cest la notion tel-tel : tel affichage, tel rsultat. WYSIWYG en anglais, acronyme de la locution anglaise What you see is what you get signifiant littralement ce que vous voyez est ce que vous obtenez . Cette notion est utilise en informatique pour dsigner les interfaces utilisateur graphiques permettant de composer visuellement le rsultat voulu. Elle dsigne, de fait, une interface intuitive : l'utilisateur voit directement l'cran quoi ressemblera le rsultat final. Un diteur tel-tel permet d'diter une page Web peu prs telle qu'elle apparat dans les navigateurs courants. Il propose les fonctions classiques des traitements de texte tel-tel. Ses deux principaux avantages sont la facilit d'utilisation et l'observation immdiate du rendu graphique. Ses deux principaux dsavantages sont le manque de matrise sur la qualit du document HTML produit et les risques d'incompatibilit avec des navigateurs non prvus par l'diteur (plus rcents, plus anciens, moins courants...) si celui-ci ne suit pas les recommandations en vigueur telles qu'dictes par le W3C. Pourquoi ne pas avoir commenc par l ? Parce quil est trs souvent utile de comprendre le code gnr par lditeur. Quand on narrive pas gnrer ce quon veut : soit parce quil peut tre plus compliqu de se servir de linterface que de gnrer le code soit mme, soit parce que la fonction que vous cherchez na pas t implmente, soit parce quil y a tout simplement un bug dans lditeur. Quels diteurs sont disponibles ? Payants : o Adobe Dreamweaver o Microsoft FrontPage o Webexpert o Gratuits o Nvu o HTML Kit o

18/23

Annexe 1

: Sources dinformations

Le web est la meilleure source de renseignements pour la recherche dinformations propos du web : Une encyclopdie libre issue dun effort de collaboration des internautes : Wikipedia (http://fr.wikipedia.org/wiki/Accueil). La norme dfinissant HTML (http://www.la-grange.net/w3c/html4.01/cover.html). Quelques cours et tutoriels : http://web.developpez.com/tutoriel/xhtmlcss/ Comment a marche ? http://www.commentcamarche.net/ Tous les exemples de ce cours proviennent dun cours en ligne : http://www.creation-desite.net/langages/html.php Livres : Beaucoup de livres traitent dHTML et du dveloppement de sites Web. Pas tous de bonne qualit ni faciles utiliser. De plus en informatique le plus souvent, on ne lit pas un livre du dbut la fin, on cherche la solution dun problme qui vient de se prsenter lors dun dveloppement quelconque. Il est important donc que le livre soit rdiger avec de bons sommaire, index, glossaire Il nest possible de se rendre compte de la qualit du livre que en essayant justement quelques recherches. Un point important dune manire gnrale en informatique, et plus encore quand il sagit dinternet, est la date de parution. Un livre trop vieux, soit sera obsolte, soit ne bnficiera pas dinnovations utiles : il est inutile dapprendre laver le linge la main quand les lave-linges existent ! Si lon nest pas accro aux nouvelles technologies, inutile non plus de foncer sur les livres les plus rcents. Les informations quils contiennent peuvent tre trop pointues ou manquer de maturit. Une technique est bonne quand elle a t prouve et autant laisser faire ce travail par les autres si linformatique nest pour vous quun outil. Quelques rfrences tous disponibles la BU de sciences : Cas pratiques, initiation aux langages HTML et XML de Cassagne et Rampnoux chez Ellipses. Petit et concis. Guide de lutilisateur HTML 4 XML chez Micro application. Un peu vieux mais en couleur, plein dexemples et de copies dcran. HTML entranez-vous pour matriser le code source chez Eni. Plein dexercices. HTML et XHTML la rfrence de Musciano et Kennedy chez OReilly. Un pav mais il y a tout, plus pour les experts. Un site crit en pur HTML : http://www-cs-faculty.stanford.edu/~knuth/

19/23

Annexe 2

: Comparaison HTML-XML

Alors qu'HTML est un langage part entire, son vocabulaire est fig (Balises imposes). Il ne concerne que la mise en page, pas la syntaxe ni la signification. XML peut tre considr comme un mta-langage (Balises non imposes => dfinies par le concepteur). Permettant de dfinir d'autres langages, permettant de dcrire des protocoles. Elments de syntaxe XML : Toute balise ouvrante doit donner lieu une balise fermante <maBalise> Bonjour </maBamise> Certaines balises peuvent tre uniques => termines par / : <maBaliseUnique/> Les espaces, en dehors du balisage, sont prservs Le nom des attributs sont crits en minuscule Les valeurs d'attributs sont entre guillemets XML utilise entirement UNICODE (norme ISO 10646) Casse dpendant (minuscules majuscule) les donnes peuvent contenir presque tous les caractres UNICODE : cadre gnral pour dfinir des tables de caractres.

20/23

Annexe 3

: Les scripts

CGI : Common Gateway Interface, traduisez interface de passerelle commune, est une appellation pour un programme, script excut par le serveur web (on dit gnralement ct serveur ), permettant d'envoyer au navigateur de l'internaute un code HTML cr automatiquement par le serveur (bas par exemple sur une autre application, telle qu'un systme de gestion de base de donnes, d'o le nom de passerelle). Un des principaux intrts de l'utilisation de CGI est la possibilit de fournir des pages dynamiques, c'est--dire des pages personnalises selon un choix ou une saisie de l'utilisateur. L'application la plus frquente de cette technique repose sur l'utilisation de formulaires HTML permettant l'utilisateur de choisir ou de saisir des donnes, puis de cliquer sur un bouton de soumission du formulaire, envoyant alors les donnes du formulaire en paramtre du script CGI. PHP : PHP est un langage interprt permettant dcrire un CGI. La syntaxe du langage provient de celles du langage C, du Perl et de Java. Ses principaux atouts sont : o Une grande communaut de dveloppeurs partageant des centaines de milliers d'exemples de script PHP ; o La gratuit et la disponibilit du code source (PHP est distribu sous licence GNU GPL) ; o La simplicit d'criture de scripts ; o La possibilit d'inclure le script PHP au sein d'une page HTML (contrairement aux scripts CGi, pour lesquels il faut crire des lignes de code pour afficher chaque ligne en langage HTML) ; o La simplicit d'interfaage avec des bases de donnes (de nombreux SGBD sont supports, mais le plus utilis avec ce langage est MySQL, un SGBD gratuit disponible sur de nombreuses plateformes : Unix, Linux, Windows, MacOs X, Solaris, etc...) ; o L'intgration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.). ASP : Active Server Pages est un concurrent de PHP, standard mis au point par Microsoft en 1996 Javascript : Le Javascript est un langage de script incorpor dans un document HTML. Historiquement il s'agit mme du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des amliorations au langage HTML en permettant d'excuter des commandes du ct client, c'est--dire au niveau du navigateur et non du serveur web. Ainsi le langage Javascript est fortement dpendant du navigateur appelant la page web dans laquelle le script est incorpor, mais en contrepartie il ne ncessite pas de compilateur, contrairement au langage Java, avec lequel il a longtemps t confondu. Applet Java : Les applets sont de petites applications graphiques destines s'excuter dans un navigateur internet, donc ct client. D'autre part, les applets ont un champ d'action limit pour des raisons de scurit puisqu'elles s'excutent dans un environnement distant. Elles ne peuvent donc pas accder toutes les ressources de l'environnement distant (lecture/criture sur le disque par exemple).

21/23

Annexe 4
Nom <!-- --> A B BIG BLOCKQUOTE BODY BR CENTER DIV FONT FORM H1 -> H6 HEAD HR HTML I IMG INPUT LI LINK MARQUEE META OL OPTION P SELECT SMALL SPAN STRONG STYLE TABLE TD TEXTAREA TITLE TR U UL

: Rsum des balises

Fonction

Permet de placer dans le code source d'une page des commentaires qui ne seront pas affichs dans le navigateur. Cre un lien hypertexte vers une autre page web ou vers un ancre. Pour avoir du texte en gras. Augmente lgrement la taille du texte. Applique un retrait un texte. Dfinit le corps (contenu affichable) de votre page web. Il doit venir juste aprs l'en-tte de la page HEAD. Ajoute un saut de ligne. Centre le texte. Regroupe des lments pour en contrller la structure avec des feuilles de styles par exemple. Permet de mettre de modifier du texte (couleur, taille, police,...). Permet de crer un formulaire. Dfinit 6 niveaux pour les titres. Chaque niveau possde son propre style. Dfinit l'en-tte de votre document. Ces informations ne seront pas affiches par le navigateur. Place une sparateur horizontal. Indique que le fichier est un document HMTL. Met le texte en italique. Ajoute une image dans votre page. Ajoute un champ de formulaire (plusieurs types sont disponibles). Cre un nouvel lment pour une liste. Permet de crer un lien vers un fichier externe (une feuille de style par exemple). Permet de faire dfiler un texte (IE uniquement). Dfinit des paramtres supplmentaires dans l'en-tte de votre page (trs utile pour le rfrencement). Cre une liste numrote. Cre un nouveau choix dans un SELECT. Constitue un nouveau paragraphe. Cre une liste de slection dans un formulaire. Diminue sensiblement la taille du texte (au contraire de BIG). Facilite la mise en forme (similaire DIV pour des portions de textes plus courtes). Affiche le texte en gras (similaire B). Permet de dfinir des rgles de style utiliser sur le document. Cre un tableau. Cre une nouvelle celulle dans un tableau. Cre une zone de texte dans un formulaire. Dtermine le titre qui sera affich dans la barre de titre du navigateur. Cette balise doit venir dans l'en-tte (HEAD) de votre code Cre une nouvelle ligne dans un tableau poyr y insrer des celulles (TD). Affiche le texte en soulign. Cre une liste puces.

22/23

23/23