|
| Encarta 2008 - GUIDE HTML
|
|
|
|
GUIDE HTML
JF Berger 1999
PLAN
I) Introduction à HTML
I.
La structure d' un document HTML
II.
Les Tags HTML
a.
syntaxe générale
b.
la section HEAD
TITLE, META, LINK, ISINDEX, BASE, SCRIPT, STYLE
c) la section BODY
H1 à H6, P,BLOCKQUOTE, PRE, ADDRESS, DIV, CENTER ,HR
les listes: UL, LI, OL, DL, DT, DD
TABLE, TR, TD, CAPTION
marquages de texte
logiques: EM, STRONG, DFN, CODE, SAMP, KBD, CITE
physiques: TT, I, B, U, STRIKE, BIG, SMALL, SUB et SUP
autres tags: A, BASEFONT, IMG, APPLET, FONT, BR
images cliquables USEMAP, MAP AREA
les commentaires
d) les liens et ancres
e)les formulaires
FORM, INPUT (text,password,checkbox, radio, file, hidden,
reset,submit,button)
SELECT, TEXTAREA
f) les FRAMES
FRAMESET, FRAME, NOFRAME
g) ANNEXES
les tags
le jeu de caractères
I°) Introduction à HTML
Le Web: Html (HyperText Markup Language) + HTTP (HyperText Transfert Protocol)
HTML est le langage universel utilisé pour communiquer sur le Web, la communication
s'effectuant selon un protocole de communication HTTP.Vos documents seront ainsi
transportés sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir
sur l'ordinateur de l'utilisateur grâce à un programme appelé navigateur ou browser.
Ce logiciel, que l'on appelle un
votre écran les "pages" qu'il a demandées. Il y a, hélas, beaucoup de types de browsers
différents. Et chaque browser a sa propre façon de travailler, donc le rendu chez l'utilisateur
peut varier selon le navigateur utilisé.
- Mais, Html est un langage universel qui s'adapte à toutes les plates-formes que ce soit
Windows, Macintosh, Unix, OS/2... avec le browser adapté.
En plus du texte adressé à votre lecteur, un document html comprend des balises ou tags
complétés par des attributs qui indiquent les actions que doit faire le browser .
L'écriture d'un document html simple ne nécessite pas la connaissance de ces tags, votre
éditeur html s'en charge, mais dès que vous voudrez accéder à des fonctionnalités plus
complexes, il vous faudra "plonger" dans le code html source et travailler les tags.
Ces instructions seront différenciées de votre texte par les signes < et > par exemple
<html>. Ces "instructions" s'appellent des tags ou des balises... vous aurez besoin d'une
connaissance pointue du Html pour inclure les codes du Javascript ou du VBscript dans vos
pages.
browser, vous permet de surfer sur le Net et d'afficher sur
II°) La structure d'un document HTML
Il est important de préciser tout d'abord que HTML est basé sur l'alphabet ISO-Latin 8859-
1(on trouvera en annexe le jeu de caractères autorisé) .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Titre du document</TITLE>
<META NAME="description" CONTENT="Ceci est un document qui ...">
<LINK REV="made" HREF=mailto:berger@cnam.fr>
</HEAD>
<BODY>
... corps du document
</BODY>
</HTML>
DOCTYPE
Cette déclaration DOCTYPE est utilisée par les outils SGML pour détecter le type de
document . (Notamment par les outils de validation qui permettent de vérifier la conformité à
la norme et donc la lisibilité du document par les browsers respectant la norme)La déclaration
indiquée :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" >
correspond au standard HTML 4.0 (Wilbur)
Definition)
( EN :ENGLISH et DTD Document Type
Si votre document est de type HTML 3.2, la DOCTYPE en est
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"
Les éditeurs HTML ne sont pas tous aptes à bien définir/reconnaître cette déclaration
DOCTYPE.
>
HTML
Ce tag définit le document HTML
HEAD
La tête du document contient des informations sur le document lui-même, dont aucune n'est
affichée dans le document . Elle doit contenir le tag TITRE et peut contenir d'autres éléments
comme la description, une liste de mots-clefs pour les moteurs de recherche, le nom de l'outil
utilisé pour la création du document
TITLE
Seul tag obligatoire, le tag TITLE est en général affiché en titre de fenêtre par le browser et
apparaît dans la table des bookmarks. Il est donc essentiel qu'il décrive bien le contenu du
document . Les dénominations générales du style "introduction", "homepage", "contenu" n'ont
pas de sens dans un fichier de bookmarks.
META
Les META tags fournissent des "meta-informations" sur le document, par exemple, la
description, la date d'expiration, le programme utilisé pour générer le document, l'auteur.
Il existe diverses constructions de tags META que l'on décrira plus loin. Ces tags META sont
très importants si vous souhaitez que vos documents soient bien référencés et bien "placés"
par les moteurs de recherche comme alta Vista, Infoseek, Yahoo,.etc....
LINK
Un tag LINK fournit des informations sur le document vis-à-vis du reste du site par exemple
sur l'emplacement de la table des matières, des feuilles de style ou l'adresse de l'auteur comme
dans l'exemple précédent...
BODY
Le tag BODY définit le corps du document et doit être unique. La conception d'un document
est une chose complexe et un ensemble varié de tags peut être utilisé. Il existe aussi plusieurs
guides de style qui mettent plus d'emphase sur la façon d'écrire des pages de bonne apparence
et s'affichant correctement sur plusieurs navigateurs. Je vous encourage à lire un (le mien :-
)...) ou plusieurs de ceux-ci si vous projetez de créer des pages W3 ; beaucoup trop de
personnes ignorent le fait que leurs pages seront lues par d'autres gens et qu'il existe de
bonnes et de mauvaises façons de les concevoir. De plus un document fait souvent partie d'un
ensemble et la notion de modèle (template) de document est alors essentielle. On pourra
consulter WDG's Style guide for online hypertext pour ce point ou bien le Web style guide JF
Berger.
Le site du
compléments nécessaires.
consortium W3C est un bon point de départ de recherche de ce type de
III°) Les Tags HTML
Nous allons maintenant présenter de façon très abrégée les composants de HTML
a) Syntaxe Générale
Un document HTML est composé de texte, marqué par des éléments définis par un
départ:
des attributs fournissant des informations complémentaires sur les tags. Un attribut est
constitué par un nom et en général une valeur qui doit être entre quotes(") si elle contient
autres caractères que des lettres/chiffres, et .
Par exemple
de niveau 1 avec l'attribut ALIGN prenant la valeur CENTER.
Ou bien <A HREF=http://cnam.fr/truc.html>document truc</A> pour le tag A avec l' attribut
HREF (les quotes(") sont obligatoires car / n' est pas une lettre/chiffre, point ou virgule.
Pour les tags et attributs, pas de différences entre majuscule/minuscule, au contraire des
valeurs entre quotes...
tag de<NOMDETAG> et souvent un tag de fin</NOMDETAG> . Les éléments peuvent avoir<H1 ALIGN=CENTER>bienvenue</H1 définit le texte bienvenue comme un entête
b) la section HEAD
La section HEAD du document contient des informations sur le document lui-même, dont
aucune n'est affichée dans le document . On y trouvera
TITLE - Titre du Document seul élément ici obligatoire : <TITLE>titre</TITLE>
META - Meta-information <META ...................................................>
Élément fournissant des informations sur le document. L'information est donnée par
un nom NAME ou HTTP-EQUIV et une valeur par CONTENT
Soit par exemple, les classiques :
<META NAME="author" CONTENT="votre nom d auteur">
<META NAME="description" CONTENT="Décrivez le document">
Les tags d'attributs HTTP-EQUIV permettent directement de
spécifier des en-têtes HTTP(nocache, expires,...).
LINK - lien avec la Structure du Site
L'élément LINK permet de définir des liens (type REL ou REV) entre le document et
d'autres définis par HREF. Par exemple:
<LINK REV="made" HREF=
<LINK REL="stylesheet" HREF="/dir/qlq.css">
mailto:nom@adresse_mail>
ISINDEX - Primitive de recherche, moins utilisé actuellement depuis l'apparition des
formulaires
L'insertion de ce tag permettra à l'utilisateur de renter des mots-clefs qui seront
envoyés au serveur . Le serveur exécute la recherche dans le document, et retourne le
résultat, le message dans la fenêtre de recherche est défini par l'attribut PROMPT. On
préfère maintenant les FORM .
BASE - Localisation de document :
On indique ainsi la localisation du document, par HREF qui doit donner le chemin
complet. Ainsi les autres HREF seront déterminés par rapport à cette base.
Les deux éléments suivants sont des tags nouveaux intégrés dans html-4.0.qui doit
permettre de définir des scripts et de prendre en compte les feuilles de style CSS1
préconisées par le consortium
SCRIPT - script en ligne
La plupart des browsers supportent les scripts, on peut préciser ici ces scripts.(Leur
langage et le source...)
STYLE - information sur les Styles
et l'on peut préciser ici le langage de style utilisé.
Nous reviendrons ultérieurement sur ces deux nouveau tags.
c) la section BODY d'un document
Le body du document contient le texte, marqué par des tags HTML.
Les couleurs du document sont spécifiées par des attributs du tag BODY
TEXT : couleur normale du texte
LINK :liens non encore visités
VLINK :liens déjà visités
ALINK : liens sélectionnés
BGCOLOR : couleur du fond.
La couleur étant donnée en code hexadécimal Ex : ALINK="#FF0000 " pour un rouge
saturé.
On peut spécifier une image comme fond d'écran: par BACKGROUND="
image.gif"
ou
Exemple de tag BODY :
<BODY TEXT="#FF0000" BGCOLOR="#000000">
Le texte sera en rouge sur fond noir (et l'impression délicate....)
Si on ne précise aucune couleur, ce sont les valeurs du browser par défaut qui seront
appliquées. Il est donc recommandé de ne modifier aucune valeur ou de les préciser
toutes pour conserver une lisibilité des textes.
jpeg".
Le texte : Des tags de structure
En-têtes
En HTML, on dispose de six niveaux possibles d'en-tête de 1 (plus important) à six
(moins important) à utiliser dans l'ordre hiérarchique. L'attribut ALIGN permet
d'aligner à gauche, droite ou centre (ALIGN=LEFT, RIGHT ou CENTER.)
:(Headers) : H1, H2, H3, H4, H5 et H6.
Paragraphes
La notion de paragraphe est définie par le tag P, avec alignement horizontal grâce à
ALIGN (ALIGN=LEFT, RIGHT ou CENTER. Un paragraphe est un conteneur défini
donc par <P> et</P>).
: P.
Citation
Pour indiquer une citation sans attribut, c'est un conteneur de textes avec paragraphes,
en-têtes et/ou listes. En général, il y a indentation, mais il ne faut pas utiliser ce tag
pour ce type de mise en pages (différence selon les browsers) et préférer les tables
pour cela.
: (blocked quotations)BLOCKQUOTE.
Texte Préformaté
Texte déjà formaté dans une largeur de texte spécifique par exemple type ASCII.
Contrairement aux autres types de textes, les espaces et ruptures de lignes sont
normalement conservés.
: PRE
information d'Adresse:
ADDRESS est en général placé en fin de document pour indiquer des informations
aux lecteurs (par exemple URL du document, auteur avec e-mail et adresse postale).
On y insérera des BR
ADDRESSBreakLine pour la lisibilité.
Divisions :
Une division (marquée avec DIV) contient des éléments de niveau blocs de texte et est
utilisée pour grouper ceux-ci et leur appliquer un attribut ALIGNavec les valeurs
LEFT, RIGHT et CENTER.
<CENTER> Est un raccourci pour
DIV<DIV ALIGN=CENTER>
Règle Horizontale
L'élément HR est utilisé pour indiquer une rupture dans le document par un séparateur
horizontal. Divers attributs permettent de modifier l'apparence du séparateur :
WIDTH="nombre de pixels ou %nn" SIZE pour la hauteur en pixels et si la largeur
n'est pas 100%, ALIGN= LEFT, RIGHT ou CENTER. L'attribut NOSHADE permet
d'omettre l'ombrage du séparateur.
: HR
Listes : Trois types de listes sont disponibles :
UL : Liste non ordonnée avec l'attribut optionnel TYPE=DISC, SQUARE ou CIRCLE
indiquant le type de puces affichée pour chaque élément de la liste LI. :
( Une liste non ordonnée ne comprend que des éléments LI)
<UL>
<LI>premier item
<LI>deuxième
item
<LI>.....
<LI>......
</UL>
•
•
•
•
OL: liste ordonnée avec l'attribut optionnel TYPE=1 (décimal), a (lettre minuscule), A
( lettres majuscules), i or I (chiffres Romains). Avec l'attribut START , on peut donner
la valeur de départ de la liste (toujours en décimal) Les objets de la liste sont
également des LI.
........
<OL TYPE=1>
<LI>premier item
<LI>deuxième
item
<LI>.....
<LI>......
</OL>
1. premier item
2. deuxième item
3. ........
4. ........
DL : une définition list est semblable à une liste non ordonnée mais utilisant deux
éléments par item, DT pour donner le nom du terme à définir et DD pour sa définition
(sans puces).
<DL>
<DT>premier terme
<DD>definition terme1
<DT>deuxième terme
<DD>terme 2
<DD>......
<DD>..........
</DL>
premier terme
definition terme 1
deuxième terme
terme 2
......
........
Tables
Les Tables sont utilisées pour présenter des informations avec tabulations. Elles se
définissent comme un ensemble de rangées (row) comportant éventuellement une
légende par l'élément CAPTION. C' est une technique très efficace pour assurer une
mise en forme indépendante (autant que faire se peut...) des browsers.
Les attributs de table:
BORDER=n : taille de bordure en pixels (pas de bordure sinon)
ALIGN=left|right|center : alignement de la table.
WIDTH=n
Indique la largeur suggérée de la table, en pixels ou pourcentage (recommandé).
CELLSPACING=n : espace entre cellules de la table , en pixels.
CELLPADDING=n : taille de l' espace entre la bordure de cellule et son contenu en
pixels.
les rangées sont définies par le tag TR, avec l'alignement de la table ou un attribut
ALIGN spécifique de la rangée (ALIGN=left|right|center pour horizontal, et
VALIGN=top|middle|bottom|baseline for l' alignement vertical. Cette valeur peut être
surchargée au niveau de chaque cellule individuelle.
On peut ensuite avoir deux types de cellules avec TH (en tête) et TD (data). avec les
mêmes attributs que TR et en plus: COLSPAN=n .et ROWSPAN=n. et NOWRAP
.pour les recouvrements de colonnes ou de rangées dans cette cellule et pour la
coupure du contenu de la cellule....
Niveau de texte marqué : trois groupes :
Marquages logiques (conseillés au maximum)
•
instance d'"un terme(la première fois)
EM - Emphasized text. STRONG - Strongly emphasized text.DFN - Définit l'
•
•
•
•
•
Marquages physiques
•
•
•
Marquages spéciaux
•
(destination dans le document). nous y consacrerons le prochain paragraphe.
A - ancre hypertexte, attributs: HREF (URL de destination) et NAME
•
•
format) à insérer. Attributs: ALIGN = LEFT, RIGHT, TOP, MIDDLE,
BASELINE and BOTTOM indiquant l' alignement de texte suivant l' image
par rapport à l' image . WIDTH et HEIGHT attributs en pixels de largeur et
hauteur , VSPACE et HSPACE :espaces autour de l' image (H et V) BORDER
:épaisseur de bordure si ancre, USEMAP et ISMAP attributs si l' image est
cliquable(réactive coté client USEMAP ou coté serveur ISMAP), ALT:
alternative à l' image si l'image ne peut être chargée.
IMG - Image. Nécessite l'attribut SRC localisation de l' image ( GIF or JPEG
•
PARAM
APPLET - pour insérer une applet java, les paramètres sont passées par
•
(en hexa ).
FONT - modification de Fontes indiquée par SIZE (1 à 7 ou +n,-n) et COLOR
•
Images cliquables coté client
Une image ,cliquable coté client permet au browser de déterminer l' URL de
destination. ( coté serveur, c'est le serveur qui se charge de déterminer l' URL par
rapport aux coordonnées envoyées par le client et via un script cgi et une carte connue
sur le serveur) .
L'attribut USEMAP="nom de la carte" est positionné dans IMG et la carte est ensuite
décrite dans MAP.
L'élément MAP : attribut NAME="nom de la carte" et les descriptions des divers
attributs AERA décrivant les zones sensibles :
AERA: 4 formes de zones sensibles: SHAPE=RECT,CIRCLE,POLY,DEFAULT
(rectangle, cercle, polygone, et le reste qui n' a pas été spécifié précédemment) Pour
RECT,CIRCLE et POLY, l' attributs COORDS décrit les formes: "x1,y1,x2,y2 " pour
un rectangle, "xc,yc,rayon" pour un cercle, et pour POLY:les coordonnées
HTML commentaires
HTML "
<!--", commentaires "--" avec pas de "---" ni" " dans le commentaire.
d) Les liens
Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique)
qui vous permet en cliquant sur un mot, (généralement souligné ) ou une image, de
vous transporter :
vers un autre endroit du document.(ancre locale)
vers un autre fichier Html situé sur votre ordinateur.(lien local)
vers un autre document sur un autre serveur Web (lien externe avec
ancre éventuellement).
Ce sont ces liens qui vous permettent de surfer de page en page et qui
constituent la notion d' htpertexte
La syntaxe de ces liens entre plusieurs pages,
<A HREF="URL ou adresse">...</A >
URL:Uniform Ressource Locator: adresse d' un document www: est
composé de:
protocole d' échange
http: protocole de transfert hypertext (cas de document html ou d'
images )
ftp: services de transfert de fichiers
wais: ou gopher: services de présentation d' informations
mailto: services courrier électronique(suivi dans ce cas de l'adresse email:
nom_destinataire@nom_machine
telnet: pour obtenir une fenêtre telnet de connexion à une machine
news: pour le service de news
javascript:pour exécuter du code javascript
: qui peut être
adresse internet de la machine
ou adresse DNS www.cnam.fr) + port optionnel [si différent du port
par défaut du service (80 pour http)]
(adresse TCP/IP ex 163.173.128.60
le chemin d' accès et le nom du fichier
la syntaxe est
alors:protocole://nom_du_serveur[:port]/repertoire/.../nom_document
ou mailto:utilisateur@hôte
Lien local
L'organisation d'un site Web consiste à regrouper l'ensemble des
éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire.
Vous pourrez ainsi "transporter" aisément votre site pour le présenter
sur un autre ordinateur et ,but ultime, le charger sur un serveur. Cette
façon de procéder est la plus aisée et vous évitera pas mal de
problèmes. L'adresse du lien sera alors tout simplement : fichier.htm si
fichier.htm est dans le meme répertoire que le document comportant le
lien
Les ancres
Des liens peuvent aussi pointer vers un endroit précis du même
document ou d'un autre fichier. C'est ce qu'on appelle les ancres,
ancrages ou pointeurs [Anchor].
Point d'ancrage <A NAME="***"...</A Ceci est une cible
Lien vers une ancre dans la même page <A HREF="#***">...</A>
Lien vers la cible ***
dans la même page
Lien vers une ancre dans une autre page <A HREF="URL#***">...</A
>Lien vers la cible *** dans une autre page
Plusieurs liens à l'intérieur d'un même document supposent que ce
document présente une certaine longueur (et donc un temps de
chargement assez long). On préferera le découpage d'un longue page
en un ensemble de plusieurs pages de dimension plus réduite
(équivalente à deux ou trois défilements dans l'écran...).
e) les Formulaires
Les formulaires permettent à l'utilisateur d'entrer des données (attribut
INPUT) et de les envoyer à un programme sur le serveur WWW. Ce
programme peut alors répondre à la requête du client/utilisateur. C'est
par l'élément FORM que l'on peut spécifier le programme, attribut
ACTION et la méthode pour envoyer les données Méthode GET (par
défaut, mais avec des limitations sur le volume de données envoyé à
l'utilitaire traitant le formulaire) ou POST(plutôt conseillé.
Form
définit un conteneur:
<FORM METHOD=POST ACTION=http://site/path/prog/>
contenu du formulaire ici
</FORM>
le formulaire contient en général des données à entrer par INPUT,
SELECT (alternative de checkbox) ou TEXTAERA(pour champs d'
entrée multilignes)
INPUT
Pour créer des éléments d' entrée avec un nom par NAME et une valeur initiale par
VALUE (ou texte sur le bouton):
les types possibles sont définis par l'attribut TYPE
TYPE=text
attributs: MAXLENGTH caractères taille par SIZE attribut (si plus:scroll)
TYPE=password: idem que TYPE=text, mais caché par "*"
TYPE=checkbox: Produit une checkbox (état off ou on).
TYPE=radio: Produit un radio button dans un groupe.
TYPE=submit: Produit un bouton pour envoyer au serveur .
TYPE=reset : Produit un bouton qui restore la valeur originale
TYPE=file : permet de charger un fichier (peu supporté)
TYPE=hidden : permet d'encapsuler des informations dans le
formulaire
TYPE=button : pour définir des boutons auxquels on associera un
comportement (en Javascript par exemple...)
SELECT
définit une sélection list avec OPTIONS éventuellement MULTIPLE , l'élément
OPTION contient du texte seul.
:
TEXTAREA
: (ROWS et COLS attributs )
Voici un exemple de formulaire:
<P
<H2> ALIGN=CENTERENQUETE UTILISATEURS</H2>
<FORM ACTION="/cgi-bin/cgiprog" METHOD=POST>
<PRE> exemple de boutons radio
<INPUT TYPE=RADIO NAME="SECTEUR1" VALUE="CNAM"
CHECKED > Personnel CNAM
<INPUT TYPE=RADIO NAME="SECTEUR1" VALUE="eleves">
auditeur CNAM
<INPUT TYPE=RADIO NAME="SECTEUR1" VALUE="npq">
autres.
<P >saisie de texte
Vos Nom et prénom : <INPUT TYPE="text" NAME=NOM1
SIZE=20>
<P>
Votre adresse électronique : <INPUT TYPE="text" NAME=ADR1
SIZE=30>
<P>exemple de checkbox</P>
<P>
Je suis brun/brune<INPUT TYPE="CHECKBOX" NAME="BRUN"
VALUE="brun">,
grand/petit<INPUT TYPE="CHECKBOX" NAME="GRAND"
VALUE="grand">,
en bonne santé<INPUT TYPE="CHECKBOX" NAME=SANTE
VALUE="en bonne sante">
tag select:
Votre opinion <SELECT NAME=OPINION1>
<OPTION VALUE="tresbien">Très satisfait
<OPTION VALUE="bien" SELECTED>Satisfait
<OPTION VALUE="bof">Indifférent
<OPTION VALUE "beurk">C'est nul !!
</SELECT>
<P>Vos commentaires <TEXTAREA NAME="COM1" ROWS=3
COLS=40></TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="Envoyer" >
<INPUT TYPE="RESET" VALUE="Annuler">
</PRE>
</FORM>
ce qui donne:
ENQUETE UTILISATEURS
exemple de boutons radio:
Personnel CNAM
Auditeur CNAM
Autres
saisie de texte
Vos Nom et prénom :
Votre adresse électronique :
exemple de checkbox
Je suis brun,brune
,
jeune
,
en bonne santé
tag select
Votre opinion
textaera
Vos commentaires
BR - Line break.BASEFONT - taille de fontes par défaut nécessite l'attribut SIZE de 1 à 7SUB - Subscript , SUP - SuperscriptBIG - plus gros, SMALL -plus petitTT - Télétype , I - Italics , B - Bold , U - Underline , STRIKE - StrikeoutCITE - titre cité d'un travailVAR - une variableKBD - entrée clavier par l'utilisateur.SAMP - exemple de texte en entrée ou sortie.CODE - un fragment de (computer, HTML, ...) code.........deuxième itempremier item |
| Aujourd'hui sont déjà 115 visiteurs (152 hits) Ici!
|
|
|
|
