Introduction au langage HTML: comment composer des pages pour un serveur WWW

Introduction au langage HTML:comment composer des pages pour un serveur WWW Le 10/05/2006

Petit historique d’Internet (1) • Début des années 70 • ARPAnet (Advanced Research Projects Agency Network)Réseau pour la défense américaine • Première démonstration publique du réseau : oct. 1972 • En 1972 également, envoi du premier courrier électronique par Ray Tomlinson • Au cours des années 70 • L'interconnexion des réseaux est adoptée par les universités pour : • la transmission d'informations, de fichiers • la communication • l'utilisation partagée de gros ordinateurs • Le réseau échappe de plus en plus aux militaires au profit des universitaires qui le rebaptisent "Internet", abréviation de « International Network » Le 10/05/2006

Petit historique d’Internet (2) • Création de protocoles (TCP/IP, Mail, FTP, ...) TCP/IP : Transmission Control Protocol / Internet Protocol • définition du mode de transmission de l!information • principe “grossier” : acheminer des données sur un réseau en les fragmentant en petits paquets • protocole “officiel” en 1981. • Années 80 • Développement des connexions aux Etats-Unis puis en Europe, au Japon, en Océanie • 213 machines reliées en 1981 • 535 000 en 1991 • Le grand public n'est pas encore là... il faut connaître le langage de l’Internet ! Le 10/05/2006

Introduction • Le texte et sa mise en page • Texte et directives • Structuration et mise en page • Langage en évolution • Les outils de composition • Outil de lecture, outil de composition • Outils de composition spécialisés ou non • Les directives (étiquettes, tags) • Syntaxe • Champ d'action • Mot d'ordre : structurer! Le 10/05/2006

Directives de structuration • Structure générale d'un document en HTML Tout document HTML se compose ainsi: <HTML><HEAD><TITLE>Centre National d'Art et de Culture Georges Pompidou</TITLE></HEAD><BODY>......</BODY></HTML> Le 10/05/2006

Le mot, la phrase Le 10/05/2006

Caractères spéciaux Le 10/05/2006

Séparateurs et paragraphes Le 10/05/2006

Les listes Le 10/05/2006

Listes et sous listes Le 10/05/2006

Les titres Le 10/05/2006

Les tableaux Ceux-ci sont des extensions récentes - et fort utiles - du langage HTML, et le standard ne s'est pas encore vraiment stabilisé. Outre une utilisation "normale" pour l'affichage d'information tabulée (comme dans ce document-ci), ils servent actuellement à effectuer des effets de mise en page que HTML ne permet pas, notamment le multi-colonne (cf. l'exemple ci-contre, la page d'accueil du Boston Book Review). Dans une utilisation de ce type, il faudra considérer bien plus précisément le contenu de chaque cellule du tableau, pour éviter des repliements qui nuiraient à cette mise en page. On peut comparer ce type d'utilisation à celui de QuarkXPress ou PageMaker (par rapport à Word): on prévoit la place des éléments sur la page, plutôt que simplement les uns par rapport aux autres. Le 10/05/2006

Éléments d'un tableau Un tableau est composé de cellules, agencées en rangées, et les rangées sont alignées les unes en dessous des autres. Les directives de base pour le construire procèdent donc de cette façon : <TR> signifie «Table Row» (rangée de tableau). On peut déterminer si les réglures seront visibles ou non, en rajoutant un complément d'information dans la directive se rapportant à tout le tableau: <TABLE BORDER> indique qu'elles doivent être affichées. Chaque rangée est elle-même constituée de cellules, délimitées par les directives <TD> ... </TD>("table data", une donnée du tableau): On n'est pas forcé d'écrire toutes les directives sur la même ligne. Le 10/05/2006

Alignement Les données, à l'intérieur des cellules, sont alignés à gauche par défaut. Ceci convient bien à du texte par exemple, mais pas à des images ou des chiffres. Il est possible de déterminer l'alignement de ces données au niveau de chaque rangée et/ou au niveau de chaque cellule. Ainsi, la directive: <TR ALIGN=RIGHT> ... </TR> indique que les contenus de toutes les cellules de cette rangée seront alignées à droite dans leurs cellules, sauf indication contraire pour une cellule spécifique. Autre exemple: la directive <TD ALIGN=CENTER> ... </TD> indique que le contenu de cette cellule sera centré, quelque soit la directive d'alignement pour la rangée. Le 10/05/2006

Exemple 1 Pour obtenir le tableau suivant, on remarquera que la plupart des données sont alignées à droite, sauf pour la première cellule de chaque ligne, et que les réglures sont visibles. On écrira donc: • <TABLE BORDER> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 1</TD> • <TD>19%</TD> • <TD>27%</TD> • <TD>10%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 2</TD> • <TD>14%</TD> • <TD>54%</TD> • <TD>60%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 3</TD> • <TD>67%</TD> • <TD>19%</TD> • <TD>30%</TD> • </TR> • </TABLE> Les espaces entre les lignes ci-dessus n'ont aucune influence sur la mise en page du tableau, mais rendent le document source plus lisible. Le 10/05/2006

En-têtes Dans le tableau ci-dessus, il serait utile de pouvoir rajouter une première ligne qui décrit le contenu des colonnes. On peut le faire avec les éléments déjà fournis, en spécifiant, par exemple, une rangée dont tous les éléments sont centrés, et encadrer chaque élément de la directive <B> ... </B> afin qu'il s'affiche en gras. Il existe une directive spéciale pour ce genre de cellule: <TH> ... </TH> (TH = "Table Header", en-tête de tableau), qui centre le contenu de la cellule et l'affiche en gras. Le 10/05/2006

<TABLE BORDER> • <TR> • <TH>parti</TH> • <TH>1989</TH> • <TH>1990</TH> • <TH>1991</TH> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 1</TD> • <TD>19%</TD> • <TD>27%</TD> • <TD>10%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 2</TD> • <TD>14%</TD> • <TD>54%</TD> • <TD>60%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 3</TD> • <TD>67%</TD> • <TD>19%</TD> • <TD>30%</TD> • </TR> • </TABLE> Exemple 2 Le 10/05/2006

Chevauchement Il est possible de faire en sorte qu'une cellule s'étende sur 2 ou plusieurs colonnes et/ou rangées. Pour cela, il suffit de spécifier dans la directive le nombre de colonnes (COLSPAN) ou de rangées (ROWSPAN) sur lesquelles elle s'étend. Le 10/05/2006

<TABLE BORDER> • <TR> • <TH>parti</TH> • <TH>1989</TH> • <TH>1990</TH> • <TH>1991</TH> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 1</TD> • <TD COLSPAN=2>19%</TD> • <TD>10%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 2</TD> • <TD>14%</TD> • <TD>54%</TD> • <TD>60%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 3</TD> • <TD>67%</TD> • <TD>19%</TD> • <TD>30%</TD> • </TR> • </TABLE> Exemple 3 Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira donc: On aurait pu centrer la donnée dans la cellule chevauchante, en faisant: <TD COLSPAN=2 ALIGN=CENTER>19%</TD> Le 10/05/2006

<TABLE BORDER> • <TR> • <TH>parti</TH> • <TH>1989</TH> • <TH>1990</TH> • <TH>1991</TH> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 1</TD> • <TD COLSPAN=2>19%</TD> • <TD>10%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 2</TD> • <TD>14%</TD> • <TD>54%</TD> • <TD ROWSPAN=2>60%</TD> • </TR> • <TR ALIGN=RIGHT> • <TD ALIGN=LEFT>parti 3</TD> • <TD>67%</TD> • <TD>19%</TD> • </TR> • </TABLE> Exemple 4 Enfin, voici un chevauchement vertical. La 2e rangée comprend 4 cellules, dont la 3e s'étend sur la 3e rangée. Donc, en écrivant le contenu de la 3e rangée, on ne mentionnera pas cette cellule: son contenu viendra de la rangée précédente. Le contenu de la cellule chevauchante est centré verticalement. Il est possible de modifier cet alignement vertical à l'aide du mot-clé VALIGN. Ainsi, si l'on avait voulu que le 60% soit aligné par le haut, on aurait mis: <TD ROWSPAN=2 VALIGN=TOP>60%</TD> Le 10/05/2006

Contenu En principe, on peut tout mettre dans la cellule d'un tableau: un paragraphe, plusieurs paragraphes (séparés par exemple par des <P>), des listes, des titres et sous-titres, des images, ... En fait, les capacités d'affichage des navigateurs varient de l'un à l'autre. Mosaic sur PC et Netscape peuvent afficher les tableaux parmi les plus complexes, tandis que Mosaic sur Unix, par exemple, ne peut traiter que les tableaux les plus simples. Le 10/05/2006

Insertion d’une image • La directive servant à insérer une image est : <IMG SRC=" URL de l’image" > L'image s'affichera à l'endroit où apparaît cette directive, et l'affichage du texte continuera après. • Divers compléments d'information existent, notamment pour l'alignement; ainsi ALIGN=TOP signifie que le texte suivant cette directive apparaîtra à la suite (donc à droite de l'image), aligné à son sommet. Par exemple: • <IMG SRC="/images/utbm.gif" ALIGN=TOP>Voici l‘UTBM produira l'effet suivant : Voici l’UTBM Le 10/05/2006

Les références externes • Référence textuelle : Exemple : Appuyer <A HREF="cal2003.html">ici</A> pour voir le calendrier de l‘UTBM. le mot ici qui, du coup, est affiché sous une forme distincte du reste, et devient sensible à la souris • Référence par image : <A HREF="/visite/utbm.html"> <IMG SRC="/images/images.gif"> </A> • début de directive d'hypertexte, qui référence le document /visite/utbm.html; • affichage de l'image /images/images.gif, qui est donc "sensible à la souris"; • fin de directive d'hypertexte. Le 10/05/2006

Les Références internes • Création d’une ancre (« point d’accroche ») à l’intérieur d’un document : <A Name = "…"> • Référence à une ancre interne à l’intérieur d’un document : <A HREF = "directives.html#2.11">Les tableaux</A> • Référence à une ancre interne à l’intérieur du document « courant »: <A HREF = "#2.11">Les tableaux</A> Le 10/05/2006

Images sensibles • Description d’une zone : <AREA SHAPE="POLYGON" COORDS = "32,213,163,131,263,302,130,195" HREF="http://utbm.fr"> =>Nom de description des différentes zones : <MAP NAME= " plan " > <AREA SHAPE="POLYGON" COORDS = "32,213,163,131,263,302,130,195" HREF="http://utbm.fr/publications.html"> <AREA SHAPE="POLYGON" COORDS = " 212,167,241,192,276,184,247,162" HREF="http://utbm.fr/formation.html"> Le 10/05/2006

Affichage de l’image et association à la description des zones <IMG ISMAP SRC= " /images/plan.gif " USEMAP= " #plan" > ISMAP : indique que cette image a des zones sensibles USEMAP : adresse de l’ancre de description de ces zones Le 10/05/2006

Les cadres («frames») Supposons une fenêtre subdivisée en quatre cadres, auxquels nous allons donner les noms suivants, suggérant leurs fonctions: Le 10/05/2006

Constitution des cadres La description des cadres est hiérarchique: on subdivise la fenêtre principale horizontalement ou verticalement en deux ou plusieurs parties (rangées ou colonnes), puis chacune d'elles successivement de même manière. Dans notre cas, la première subdivision est la suivante: La spécification en HTML est la suivante: <FRAMESET ROWS="20%,*"> rangée supérieure rangée inférieure </FRAMESET> Le 10/05/2006

la rangée supérieure (qui ne comporte que le cadre entete) fait 20% de la taille verticale de la fenêtre, et la rangée inférieure fait le reste (* indique une taille non spécifiée, déterminée par le reste). <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > rangée inférieure </FRAMESET> tandis que la rangée inférieure est un regroupement de cadres, la séparation étant verticale, cette fois-ci: Le 10/05/2006

ce qui donne: <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > <FRAMESET COLS="17%,*"> colonne de gauche colonne de droite </FRAMESET> </FRAMESET> Cette fois-ci, la colonne de gauche, qui fait 17% de la largeur de cet ensemble, est elle-même un regroupement de cadres, tandis que la colonne de droite est un cadre indivisible, le cadre note: <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> <FRAMESET COLS="17%,*"> colonne de gauche <FRAME NAME="note" ...> </FRAMESET> </FRAMESET> Le 10/05/2006

Quant à la colonne de gauche, voici à quoi elle ressemble: une subdivision horizontale ne comprenant que deux cadres, dont on spécifie cette fois-ci uniquement la taille du cadre inférieur (le second): <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" > <FRAME NAME="services" > </FRAMESET> <FRAME NAME="note" > </FRAMESET> </FRAMESET> Le 10/05/2006

Spécification des contenus des cadres <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET> </FRAMESET> Les fichiers ont reçu des noms semblables à ceux des cadres, ce qui n'est pas une nécessité, mais en facilite la gestion Le 10/05/2006

Tout le texte ci-dessus va aller dans un fichier distinct des quatre fichiers entete.html, menu.html, services.html, note.html. Appelons-le index.html. Il devra comprendre, outre les directives ci-dessus, "l'enrobage" que nous avons vu: <HTML> <HEAD> <TITLE>UTBM Université de Technologie de Belfort Montbéliard </TITLE> </HEAD> <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET> </FRAMESET> </HTML> Le 10/05/2006

Comment charger le contenu d'un cadre <A HREF="intro.html" TARGET="note"> INTRODUCTION </A> Ce qui veut dire: la sélection du lien INTRODUCTION dans le cadre menu chargera le fichier intro.html dans le cadre note. L'option TARGET dans la directive indique donc la destination de l'affichage. Si on ne l'avait pas spécifiée, la page serait apparue dans le même cadre où se trouve le lien, donc dans le cadre menu... Le 10/05/2006

Pour affecter toute la fenêtre et ses cadres, on aura par exemple, pour le lien Catalogue du cadre services: A HREF="/catalogue/" TARGET="_top"> Catalogue </A> Le document dont l'URL (adresse) est /catalogue/ s'affichera dans la fenêtre principale, dont le nom est _top (qui est donc un mot réservé). Ce document là peut lui-même être composé ou non de cadres, et s'il l'est, ils peuvent être semblables en forme ou différents. Le 10/05/2006

Les formulaires • Le mécanisme des formulaires est destiné à fournir un mode d'interaction beaucoup plus vaste: choix sur listes, boutons d'activation/désactivation, saisie libre de texte... Par exemple : Le 10/05/2006

Structure générale d’un formulaire Un "formulaire" fait partie d'un document HTML, et est délimité par une directive à champ d'action : <FORM METHOD=POST ACTION="adresse de l'application"> ... champs d'interrogation ... </FORM> L'option METHOD indique la façon dont les choix de l'utilisateur seront envoyés à l'application chargée de les traiter et d'y répondre • GET ajoute le contenu du formulaire à l’URL spécifié dans ACTION. • POST envoie le contenu du formulaire au serveur comme un ensemble de données sans les faire figurer à la suite de l’URL. (POST est la méthode la plus commune), Le champ ACTION sert à indiquer l'URL (l'adresse) de cette application. Le 10/05/2006

Choix sur liste <SELECT NAME="nom du champ"> Options ... options </SELECT> L'option NAME sert à identifier ce champ. Par exemple: <SELECT NAME="biblio"> <OPTION VALUE="bnf">Bibliothèque nationale de France <OPTION VALUE="bpi">Bibliothèque publique d'information <OPTION VALUE="loc">Library of Congress </SELECT> On remarquera que l'on ne peut effectuer qu'un seul choix dans cette liste; la sélection d'un choix en efface un autre Le 10/05/2006

Choix sur liste (multiple) Il est possible de construire des listes à choix multiples, en le spécifiant dans la directive de tête, par exemple : L'option NAME sert à identifier ce champ. Par exemple: <SELECT NAME="biblio" MULTIPLE> <OPTION VALUE="bnf">Bibliothèque nationale de France <OPTION VALUE="bpi">Bibliothèque publique d'information <OPTION VALUE="loc">Library of Congress </SELECT> Le 10/05/2006

Choix par boutons Le bouton à choix simple Il est réalisé de la façon suivante: <INPUT TYPE=CHECKBOX NAME="nom du champ" VALUE="nom du choix"> intitulé à l'écran Exemple : <INPUT TYPE=CHECKBOX NAME="sauf-auteur" VALUE="oui">sauf Le 10/05/2006

Choix par boutons Le bouton à choix multiples Ils sont réalisés ainsi : <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix1"> intitulé1 à l'écran <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix2"> intitulé2 à l'écran <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix3"> intitulé3 à l'écran ... Exemple : Toutes les directives ont le même nom de champ, mais des identifiants et intitulés différents pour les choix. Ainsi, dans notre exemple, on a : <INPUT TYPE=RADIO NAME="type" VALUE="tout"> tout <INPUT TYPE=RADIO NAME="type" VALUE="monographie"CHECKED> monographie <INPUT TYPE=RADIO NAME="type" VALUE="periodique"> périodique <INPUT TYPE=RADIO NAME="type" VALUE="photo"> photo <INPUT TYPE=RADIO NAME="type" VALUE="enregistrement"> enregistrement <INPUT TYPE=RADIO NAME="type" VALUE="cdrom"> CD-Rom où on a utilisé l'option CHECKED pour les monographies, ce qui la présélectionne dans le formulaire (mais l'utilisateur peut changer). Le 10/05/2006

Le 10/05/2006

La saisie de texte (mono ligne) La réalisation en est simple: <INPUT TYPE=TEXT NAME="nom du champ"> Exemple : <INPUT TYPE=TEXT NAME="auteur"> Pour pré positionner la case de saisie du texte, on utilise la fonctionnalité VALUE : <INPUT TYPE=TEXT NAME="auteur" VALUE="Lévi-Strauss, Claude"> Enfin, on peut contrôler la largeur de la fenêtre de saisie du texte: <INPUT TYPE=TEXT NAME="auteur" SIZE=40VALUE="Lévi-Strauss, Claude"> Le 10/05/2006

La saisie de texte (multiligne) Il y a des cas où l'on veut pouvoir offrir plusieurs lignes de saisie pour une option. Exemple : la saisie d'un abstract dans un formulaire pour le catalogage d'articles scientifiques; la saisie d'une lettre, dans un formulaire pour l'expédition d'un courrier électronique; la saisie de commentaires, dans un formulaire permettant au lecteur d'exprimer ses remarques sur un service… La directive est : <TEXTAREA NAME="nom du champ" ROWS=rangées COLS=colonnes> texte de pré initialisation </TEXTAREA> Exemple : <TEXTAREA NAME="comments" ROWS=4 COLS=40> (tapez ici) </TEXTAREA> Le 10/05/2006

Boutons de réinitialisation et d'expédition du formulaire Ces deux boutons sont simples à réaliser : <INPUT TYPE=RESET VALUE="intitulé">(pour le bouton de réinitialisation)<INPUT TYPE=SUBMIT VALUE="intitulé">(pour le bouton d'expédition) L'intitulé est le texte qui s'affiche dans le bouton. Ainsi, pour le bouton INTERROGER, nous écrivons : <INPUT TYPE=SUBMIT VALUE="INTERROGER"> et pour le bouton EFFACER (efface les choix de l’utilisateur pour revenir à l’état initial) nous écrivons : <INPUT TYPE=RESET VALUE="Effacer"> Le 10/05/2006

Introduction au langage HTML: comment composer des pages pour un serveur WWW