Texte aligné basC'est un élément de structure du document. Il est matérialisé par un couple : le début et la fin de l'élément de structure
<ELEMENT> texte..... </ELEMENT>
Un document HTML est un document au format TEXTE (ASCII) et peut être créé par n'importe quel éditeur.
Sur quelques sytèmes, il existe cependant des éditeurs HTML :
Ces éditeurs permettent de visualiser directement (WYSIWYG) les documents écrits en HTML.
Des filtres permettent de traduire un fichier d'un format donné vers un fichier HTML
ExemplesIl est cependant toujours possible de visualiser un document HTML :
A partir d'un browser Web en chargeant le document ( Option Open Local dans le File menu)
Après toute modification du document dans l'éditeur (et sauvegarde), l'option Reload reflètera le changement.
<HTML> <HEAD> <TITLE>Mon premier document</TITLE> </HEAD> <BODY> <H1>Mon premier document</H1> Bienvenue dans le WWW <P>C'est un paragraphe.</P> <P>Ceci en est un autre</P> </BODY> </HTML>Ce qui rend :
C'est un paragraphe.
Ceci en est un autre
La puissance et la notoriété d'HTML vient de la possibilité d'établir un lien entre des mots d'un document (ou d'une image) vers un autre document.
Le browser mettra en évidence ces mots (généralement par une couleur et/ou un soulignement) pour indiquer qu'il s'agit d'un lien hypertexte.
Le mot "Saint-Mathieu" est le lien hypertexte vers le document sm.html, lequel est situé dans le même répertoire que le document initial.
Pour relier des document situés dans des répertoire différents, il faudra préciser le chemin relatif vers le document d'arrivée
<A HREF="phares/sm.html">le phare de Saint Mathieu </A>
Les chemins utilisent la syntaxe d' UNIX.
Les liens relatifs sont préférables
Une ancre peut faire référence à un paragraphe d'un autre document HTML. Pour cela, il faut en premier, marquer le paragraphe du document qui sera lié (mot-clé NAME):
<NAME ="A;1.3">Paragraphe 1.3</A>
Ensuite créer, dans le document d'origine, le lien vers le paragraphe, en y incluant, le nom du document et la marque du paragraphe, séparé par le caractère #
<A HREF = "document.html#A1.3">lien</A> vers le paragraphe A1.3 de document.
<A HREF = "#A1.3">lien</A> vers le paragraphe A1.3
Une URL précise le protocole utilisé (par exemple gopher, WAIS), l'adresse du serveur, et la localisation du document.
La syntaxe générale
protocole://serveur[:port]/chemin/document
protocole peut prendre les valeurs suivantes :
Exemple, le lien vers le NCSA's Beginner's Guide to HTML primer se fera avec l'URL suivante :
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">NCSA's Beginner's Guide to HTML</A>
NCSA's Beginner's Guide to HTML
<H1>Hiérarchie niveau H1</H1> <H2>Hiérarchie niveau H2</H2> <H3>Hiérarchie niveau H3</H3> <H4>Hiérarchie niveau H4</H4> <H5>Hiérarchie niveau H5</H5> <H6>Hiérarchie niveau H6</H6>
<UL> <LI>L'annuaire de Télécom Bretagne <LI>L'annuaire des élèves de Télécom Bretagne <LI>Les listes de diffusion définies sur le domaine de Télécom Bretagne (accès local) </UL>
<OL> <LI>Serveur FTP <LI>Les rapports de recherche de Télécom Bretagne (WAIS) au format postscript <LI>Lire les News <LI>Serveur Gopher </OL>
<H2>Outils de navigation</H2> <MENU> <UL> <LI>Recherches sur Internet via Archie <LI>Autres serveurs français <LI>Découvrir le WWW </UL> </MENU>
<DL COMPACT> <DT>la balise <DT> </DT> <DD>La balise <DT> met en exergue l'information décrite par la balise <DD>.</DD> <DT>la balise <DD> </DT> <DD>texte d'informations sur l'objet mis dans la balise<DT></DD> </DL>
Le texte compris entre <PRE> et </PRE> conserve, lors de l'affichage, les retours à la ligne, les blancs, tels qu'ils ont été saisis dans le document source. La police de caractères utilisée est non proportionnelles.
<PRE>
On voyait les chevaux d'la mer
Qui fonçaient la têt' la première
Et qui fracassaient leur crinière
Devant le casino désert
</PRE>
On voyait les chevaux d'la mer
Qui fonçaient la têt' la première
Et qui fracassaient leur crinière
Devant le casino désert
<BLOCKQUOTE>
Leur chant triste entrait dans mon être<BR>
Et je croyais y reconnaître <BR>
Du Rainer Maria Rilke
</BLOCKQUOTE>
Leur chant triste entrait dans mon être
Et je croyais y reconnaître
Du Rainer Maria Rilke
<IMG ALT="" SRC="homepage.gif"><P> <IMG ALT="" ALIGN="bottom" SRC="homepage.gif">Texte aligné bas<P> <IMG ALT="" ALIGN="MIDDLE" SRC="homepage.gif">Texte aligné milieu<P> <IMG ALT="" ALIGN="TOP" SRC="homepage.gif">Texte aligné haut<P>
Position par défaut
Texte aligné bas
Texte aligné milieu
Texte aligné haut
<ADDRESS> Daniel Le Gléau <BR> Daniel.Legleau@enst-bretagne.fr<BR> Télécom Bretagne BP 832, 29 285 BREST CEDEX (FRANCE) </ADDRESS><P>Daniel Le Gléau
Un document HTML est écrit en code ASCII 7 bits, ce qui pose problème pour les caractères accentués. Les mots HTML & et le point virgule (;) permettent l'affichage de ces caractères.
Il faut faire précéder chaque mot clef de & et le faire suivre d'un point virgule (;).
Exemple :
Une liste des caractéres accentués se trouve ici.
Le principe est simple: Le programme reçoit des paramètres et en retour affiche des informations sur sa sortie standard qui est redirigée vers le client.
<A HREF = "adresse_du_programme/nom?parametre1=valeur1¶metre2=valeur2> exécute le programme </A>
Cette commande crée un lien classique : le fait de cliquer sur les mots "exécute le programme" fait sauter le client vers un autre document. La seule différence est que ce document affiché sera le résultat d'exécution d'un programme.
L'adresse_du_programme est son adresse au sens URL, à savoir, soit le chemin d'accès dans le serveur courant, soit une adresse URL complète.
nom est le nom du fichier programme. Ce fichier doit être exécutable et être placé dans un répertoire autorisé en exécution par le serveur sous lequel il est placé.
Le nom du programme est suivi dans le cas de la méthode GET d'un point d'interrogation ? qui indique qu'il est suivi d'un ou plusieurs paramètres. Les paramètres sont séparés par le signe &. Un paramètre est constitué de son nom, suivi du signe = et de la valeur qui lui est affectée. Il est à noter que si cette valeur comporte plusieurs mots les espaces entre ces mots sont remplacés par des +.
Exemple d'appel :
Vous pouvez connaître mon <A HREF="http://www.ici.fr/cgi-bin/adresse?prenom=Tryphon &nom=Tournesol> adresse électronique</A>.
Dans cet exemple, si un utilisateur clique sur les mots "adresse électronique", il exécutera le programme appelé adresse. Ce programme se trouve sur le serveur www.ici.fr qui est un serveur au protocole HTTP. Il est placé dans le répertoire "cgi-bin" sous la racine de ce serveur. Les paramètres ont pour nom : nom qui se voit affecté la valeur "Tournesol" et prenom qui prend pour valeur "Tryphon". L'utilisateur recevra une page contenant le résultat en sortie du programme; par exemple l'adresse électronique de la personne dont le nom et prénom sont passés en paramètres.
La création de formulaires dans un document HTML se fait par l'utilisation de la commande <FORM> :
<FORM ACTION="le_programme" [METHODE=mot_clef]>
</FORM>
mot_clef est soit GET soit POST.
Avec la méthode GET, les paramètres sont transmis derrière l'URL comme décrit à ci-dessus.
Avec la méthode POST ils sont envoyés sur l'entrée standard du programme. Cette méthode est recommandée quand le nombre de paramètres est important pour éviter que la ligne de commande ne soit tronquée.
Entre <FORM ...> et </FORM>, on peut utiliser un certains nombre d'objets :
Exemple de formulaire
<html> <head> <title>Un exemple simple de formulaire</title> </head> <body> <H1>Exemple simple de formulaire utilisant l'interface CGI</H1> <p> Ceci est un formulaire simple qui illustre l'utilisation de la bibliothèque de fonctions CGI permettant de traiter les informations saisies dans les zones de dialogue. <hr> <form method="post" action="formulaire.cgi"> <H2>Questionnaire</H2> Quel est votre prénom ? <input name="prenom"> <p> Quel est votre nom ? <input name="nom"> <p> Quelle est votre couleur favorite ? <select name="couleur"> <option selected>blanc <option>jaune <option>orange <option>rouge <option>vert <option>bleu <option>violet <option>noir </select> <p> Aimez vous l'informatique ? <input type="radio" name="choix" value="oui" checked> Oui ou <input type="radio" name="choix" value="non"> Non <p> Cliquez sur <input type="submit" value="Valider"> pour soumettre votre requ&ecir c;te., sinon <input type="reset" value="Annuler"> </form> <p> <address>Philippe Dax / dax@inf.enst.fr</address> $Date: 20/09/1995 $ </body> </html>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <cgic.h>
#define TITRE "R&ecaute;sultat du questionnaire"
int cgiMain(void)
{
char prenom[40], nom[40], couleur[40], choix[40]; /* parametres */
cgiFormStringNoNewlines("nom",nom,41);
cgiFormStringNoNewlines("prenom",prenom,41);
cgiFormStringNoNewlines("couleur", couleur, 41);
cgiFormStringNoNewlines("choix",choix,41);
cgiHeaderContentType("text/html"); /* en-tete MIME: type de document */
fprintf(cgiOut, "<html>\n");
fprintf(cgiOut, "<head>\n");
fprintf(cgiOut, "<title>%s</title>\n", TITRE);
fprintf(cgiOut, "</head>\n");
fprintf(cgiOut, "<body bgcolor=\"#dddddd\">\n");
fprintf(cgiOut, "<h1>%s</h1>\n", TITRE);
fprintf(cgiOut, "<hr>\n");
/*
* ici commence le traitement
* ATTENTION: ce processus s'execute sous le controle du serveur httpd
* avec l'uid de nobody et non celui de l'utilisateur.
*/
fprintf(cgiOut, "<b>%s %s</b>, dont la couleur favorite est <b>%s</b>, v
ous avez répondu <b>%s</b> à la question<p>\n",
prenom, nom, couleur, choix);
/*
* ici se termine le traitement
*/
fprintf(cgiOut, "<hr>\n");
fprintf(cgiOut, "</body>\n");
fprintf(cgiOut, "</html>\n");
return 0;
}
Dans le cas de la méthode POST, ils sont disponibles sur l'entrée standard.
http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Enst</title>
</head>
<body>
<h1>Enst</h1>
<img src="enst.gif" usemap="#enst">
<hr>
<map name="enst">
<area shape="rect" coords="5,1,183,173" href="http://www.infres.enst.fr/">
<area shape="rect" coords="8,177,432,391" href="http://www.enst.fr/">
<area shape="rect" href="enst.html" coords="0,0,435,396">
</map>
</body>
</html>
On crée des liens sur les 2 premiers rectangles et le 3e correspond à une zone par
défaut qui pointe sur la page elle-même.