Chapitre 1 HTML

Université de Monastir Rochdi Bouchiha
Faculté des Sciences de Monastir T.R.I. 1

Département des Sciences de l’Informatique Techniques WEB
CHAPITRE I :
HTML
1. Introduction:
1.1.Présentation:
HTML (HyperText Markup Language) est un langage de description d’un document sur internet. Sa syntaxe est la
suivante:
<BALISE [options]>
Le texte
</BALISE>
Les options se sont les attributs à inserer de cette manière : attrib1= "valeur1" attrib2="valeur2" …
1.2.Historique:
HTML a été développé par Tim Berners-Lee du CERN.
HTML 2.0 (Novembre 1995, [RFC1866]) a été fait par Internet Engineering Task Force (IETF).
En 1996, est sorti HTML 3.2, standardisé par le WWW consortium.
Récemment HTML4.0 a été publié.
1.3.Précisions sur ce document:

Pour plus de clarté, dans ce résumé, les délimiteurs sont écrits en majuscules.
2. Structure générale d'un programme HTML:

<HTML>
<HEAD>
<TITLE> le_titre_du_document </TITLE>
</HEAD>
<BODY>
ce_qui_apparaîtra_à_l'écran (texte, image, lien,...)
</BODY>
</HTML>
3. Ecrire:
Pour écrire, il suffit de mettre notre texte dans la partie <BODY>...</BODY>
3.1.Mise en page simple:

<P> Commencer un paragraphe
<P ALIGN="CENTER"> Commencer un paragraphe et dans celui-ci, le texte sera centré
<BR/> Retour à la ligne
<HR/> insère un trait horizontal creux
<HR NOSHADE/> insère un trait horizontal plein
<HR SIZE=18> insère un trait horizontal (sa hauteur sera de 18 pixels)
<HR WIDTH="50%" ALIGN="LEFT"> insère un trait de 50% de la largeur de la page aligné à gauche
<HR WIDTH="50" ALIGN="LEFT"> insère un trait de 50 pixels
3.2.Taille du texte:
<H1> texte </H1> Grand (Utilisés pour les titres et les sous titres)
<H2> texte </H2> ... moins grand ...
<H3> texte </H3> ... encore moins grand ...
<H4> texte </H4> ...
<H5> texte </H5> ...
<H6> texte </H6> petit
<H2 ALIGN=CENTER> texte </H2> le texte est en H2 et centré
A chaque utilisation de ces délimiteurs, on saute une ligne. Si on veut changer de taille sur la même ligne, il faut
utiliser:
<FONT SIZE=+2> texte </FONT> le texte est plus grand de 2 pixels
<FONT SIZE=7> texte </FONT> le texte a une taille de 7
page HTML
1/7 Rochdi Bouchiha
3.3.Couleur du texte:
<FONT COLOR="00FFFF"> texte </FONT> le texte est composé de Rouge=00 Vert=FF Bleu=FF, c’est à
dire que la couleur du texte est cyan
3.4.Style du texte:
<B> texte </B> le texte est en gras
<I> texte </I> le texte est en italique
<U> texte </U> le texte est souligné
<TT> texte </TT> le texte est en type machine à écrire
<ADDRESS> adresse </ADDRESS> le texte est une adresse
<BIG> gros </BIG> le texte est gros
<BLINK> texte </BLINK> le texte clignote
<BLOCKQUOTE> texte </BLOCKQUOTE> le texte est mis à part (*)
<CENTER> texte </CENTER> le texte est centré sur la page (*)
<CITE> une_citation </CITE> le texte est une citation
<CODE> texte </CODE> le texte est un code de programme
<EM> texte </EM> met en valeur un texte
<PRE> texte </PRE> le texte est "préformaté" (ne supprime pas les espaces
consécutifs)
<SAMPLE> exemple </SAMPLE> le texte est un exemple
<SMALL> petit </SMALL> le texte est petit
<STRONG> texte </STRONG> insiste sur un texte (plus fort que <EM>)
<STRIKE> rayé </STRIKE> le texte est rayé
<SUP> exposant </SUP> le texte est en exposant
3.5.Accents:
3.5.1.Première manière:
&xacute; x aigu (par exemple é équivaut à ‘é’)
&xgrave; x grave
&xcirc; x circonflexe
&xuml; x tréma
ç c cédille
&xtilde; x tilde
&Xacute; X aigu
3.5.2.Deuxième manière:
On utilise les codes ASCII. Par exemple õ qui signifie õ
3.6.Caractères spéciaux:
<, > , & et " sont interprétés par HTML. Les séquences suivantes permettent leur affichage:
< pour < > pour > & pour & " pour "
Certains autres caractères ont aussi des séquences équivalentes:
© pour © &aelig pour æ ...
4. Liens:
4.1.Principe:
<A HREF="ce_que_l'on_appelle">texte_ou_objet_sur_lequel_on_clique_pour_appeler</A>
ce_que_l'on_appelle est sous la forme: type_de_ressource:information_additionnelle
avec type_de_ressource = http (hypertext transfer protocol), file, http, news, telnet, ftp,...
et information_additionnelle = //host.domaine:port/répertoire/fichier#cible.extension
4.2.Faire un lien vers une autre page HTML:

<A HREF="http://www.google.com.tn/file.html">endroit_où_on_clique</A> charge la page file.html
4.3.Faire un lien vers une une partie d'un document local:

Dans fich.html, on écrit:
<A NAME="etiquette"> nom </A> permet de définir une étiquette à l'endroit où elle est écrite
Dans un autre fichier on écrit:
<A HREF="endroit_où_est_fich.html#etiquette"> endroit_où_on_clique </A>
4.4.Faire un lien vers une partie du document courant:

Dans le fichier courant, on écrit:
<A NAME="etiquette"> nom </A> permet de définir une étiquette à l'endroit où elle est écrite
page HTML
2/7 Rochdi Bouchiha
Dans un autre emplacement de même fichier on écrit:
<A HREF="#etiquette"> endroit_où_on_clique </A>
5. Liste:
Il existe trois types différents de liste
<DL> titre_1
<DT> titre_1 </DT>
<DD> contenu_1 </DD> contenu_1
<DT> titre_2 </DT> titre_2
<DD> </DD> titre_3
<DT> titre_3 </DT> contenu_3
<DD> contenu_3 </DD>
</DL>
<OL START=4> 4. titre_1
<LI> titre_1 </LI>
<BR>contenu_1 contenu_1
<LI> titre_2 </LI> 5. titre_2
<LI> titre_3 </LI> 6. titre_3
</OL>
<UL> titre_1
<LI> titre_1 </LI>
<LI> titre_2 </LI> titre_2
<LI> titre_3 </LI> titre_3
</UL>
6. Image:
<IMG SRC="http://www.insa-tlse.fr/images.gif"> insère une image (les formats reconnus sont GIF et JPG)
<IMG SRC="rainban.gif" ALIGN="MIDDLE"> centre l'image au milieu de la ligne
texte texte
BOTTOM texte MIDDLE texte TOP
texte texte
<IMG SRC="rainban.gif" ALT="un_titre"> si le navigateur n’a pas arrivé à télécharger

l’image, il écrit un_titre.
<IMG SRC="image.gif" ALIGN="LEFT" ><BR> écrit à droite de l'image
<BR><IMG SRC="image.gif" ALIGN="RIGHT" > écrit à gauche de l'image
<IMG WIDTH="56" HEIGHT="67" SRC="image.gif"> spécifie la taille de l’image en pixels (cela permet
aussi de charger une page plus rapidement)
<IMG BORDER="4" SRC="image.gif"> met une bordure autour de l'image
<IMG HSPACE="4" VSPACE="7" SRC="image.gif"> laisse 4 pixels à gauche et à droite et 7 en haut en
en bas entre l'image et le texte
6.1.Créer une image réactive: première méthode

<A HREF="url"><IMG SRC="toto.gif" ISMAP>ici_sans_ismap</A>
En cliquant à un endroit de l'image toto.gif, on va appeler "url?m,n" où m et n sont les coordonnées en pixel où l'on
vient de cliquer.
6.2.Créer une image réactive: deuxième méthode

<MAP NAME="nom_de_la_définition" >
<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="url_pour_la_région">
(rectangle où (x1,y1) est la coord. haute gauche et (x2,y2) la coord. basse droite)
<AREA SHAPE="circle" COORDS="x1, y1, r" HREF="url_pour_la_région">
(cercle où (x1,y1) est le centre et r est le rayon)
<AREA SHAPE="polygon" COORDS="x1, y1, x2, y2 ... xn, yn" HREF="url_pour_la_région">
</MAP>
<IMG SRC="blobby.gif" USEMAP="#nom_de_la_définition">
7. Tableau:
Voici un exemple de tableau ayant une bordure de 9 pixels, des espaces entre bordure et texte de 3 et des espaces entre
cellules de 18 pixels. Il fait 80% de la largeur de la page.
<TABLE BORDER="9" CELLPADDING="3" CELLSPACING="18" WITDH="80%">
<CAPTION> titre_centré_en_haut </CAPTION>
page HTML
3/7 Rochdi Bouchiha
<TR> définit un début de ligne
<TH COLSPAN="2"> titre 1 </TH> TH: ligne titre
<TH>titre 2</TH>
</TR>
<TR>
<TD WIDTH="20%"> case1 </TD> TD: ligne normale
<TD COLSPAN="2" ALIGN="left"> case2</TD>
</TR>
<TR>
<TD ALIGN="center" ROWSPAN="2">case3</TD>
<TD VALIGN="top" WIDTH="30%">case4</TD> aligné en haut
<TD VALIGN="bottom" WIDTH="30%">case5</TD> aligné en bas
</TR>
<TR>
<TD COLSPAN="2" ALIGN="RIGHT">case6</TD>
</TR>
titre_centré_en_haut
</TABLE>
titre1 titre2
Voici le résultat: case1 case2
case3 case4
case5
case6
Attributs d'alignement
Attribut d'alignement Effet
ALIGN=LEFT Aligne à gauche le contenu de la cellule
ALIGN=CENTER Centre le contenu de la cellule
ALIGN=RIGHT Aligne à droite le contenu de la cellule
VALIGN=TOP Aligne le contenu en haut de la cellule
VALIGN=MIDDLE Aligne le contenu à mi-hauteur de la cellule
VALIGN=BOTTOM Aligne le contenu en bas de la cellule
COLSPAN=n Constitue une cellule s'étalant sur une largeur de n colonnes
RAWSPAN=n Constitue une cellule s'étalant sur une hauteur de n rangées
NOWRAP Interdit l'agencement automatique du texte dans la cellule (par exemple si le texte est
trop long pour tenir sur une seule ligne dans la cellule, NOWRAP empêche l'utilisation
d'une seconde ligne dans la cellule et force l'augmentation de la largeur de la cellule (et
donc la largeur des autres cellules de la colonne)
8. Changer la configuration:
8.1.Background:
Avec cette déclaration de BODY, on définit la couleur de fond (blanc)(le codage correspond à #RRGGBB où RR,
GG et BB sont les valeurs hexadécimales du rouge, vert et bleu), la couleur du texte(noir), la couleur des liens non
consultés (bleu), la couleur des liens déjà consultés (violets).
< BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK=""#FF00FF" >
Avec cette déclaration de BODY, on définit une image de fond, la couleur du texte(noir), ...
< BODY BACKGROUND="image.gif" TEXT="#000000" LINK="#0000FF" VLINK=""#FF00FF" >
8.2.Taille par défaut:

<BASEFONT SIZE=4 > par défaut, on écrira en taille 4
8.3.URL de base des références:

<BASE HREF="url_de_base"> </BASE> les objets seront alors référencés par rapport à cet url
9. Envoyer un mail:
9.1.Première méthode:
<A HREF="mailto: mohamed@mail.tn "> envoyer un mail à Laurent </A>
page HTML
4/7 Rochdi Bouchiha
9.2.Deuxième méthode:
<FORM METHOD="POST" ACTION="MAILTO: mohamed@mail.tn">
<INPUT TYPE="TEXT" NAME="ecrit">
<INPUT TYPE="SUBMIT" NAME="envoyer">
</FORM>
10.Faire un formulaire:
Un formulaire est une fiche que l'utilisateur peut remplir. Par exemple:
<FORM ACTION="programme_exécutable_ou_shell" METHOD="la_méthode">
ici_on_met_les_champs
</FORM>
10.1.Différences entre la méthode GET et la méthode POST:

Dans le champ la_méthode, on peut mettre GET ou POST. Voici les différences:
GET Employé quand on veut lire des données (et non écrire ou modifier des données)
Toutes les informations contenues dans le formulaire sont "passées" à la machine lors de l'appel de URL.
Elles sont mises à la suite de celui-ci (un ? sépare l'URL des informations).
POST Employé quel que soit le type d'accès (lecture, écriture)
Employé lorsque le l'URL suivi des paramètres passés est assez long (car en GET, on risque d'avoir des
troncatures)
On contacte l'URL. Ensuite, la machine continue à "écouter" le réseau afin de recevoir les informations
contenues dans le formulaire (elles sont envoyées plus tard que l'URL).
10.2.Syntaxe des informations:

Que l'on utilise la méthode GET ou POST, les informations envoyées sont codées comme suit:
les espaces sont remplacés par '+'
les caractères non alphanumériques sont remplacés par les code hexa '%HH'
les sauts de ligne sont remplacés par '%0D%0A' (CR et LF)
le nom est séparé de la valeur par '='
les champs nom=valeur sont séparés entre eux par '&'
Exemple de codage pour un GET:
http://www.insa-tlse.fr/cgi-bin/post-query?org=Academic%20Computing%20Services
&others=MacMosaic%2C%20WinMosaic
10.3.Champs utilisables:
Parmi les champs, on peut mettre: (remarque: le </INPUT> n'existe pas)
10.3.1.Case à cocher ronde (un seul choix possible par variable):
<INPUT TYPE="RADIO" NAME="nom_de_la_variable" VALUE="num_1_appuyée">
Le paramètre de value correspond à ce qui est envoyé au serveur si ce bouton est actionné.
<INPUT TYPE="RADIO" NAME="nom_de_la_variable" VALUE="num_1_appuyée" CHECKED>
Dans ce cas, cette case est pré-cochée.
10.3.2.Case à cocher carrée:
<INPUT TYPE="CHECKBOX" NAME="nom_de_la_variable" VALUE="val">
<INPUT TYPE="CHECKBOX" NAME="nom_de_la_variable" VALUE="val" CHECKED>
Dans ce cas, cette case est pré-cochée.
10.3.3.Bouton "envoyer le formulaire"
<INPUT TYPE="SUBMIT">
<INPUT TYPE="SUBMIT" VALUE="appuyez pour envoyer (écrit sur le bouton)" >
10.3.4.Bouton "annuler le formulaire"
<INPUT TYPE="RESET" >
<INPUT TYPE="RESET" VALUE="appuyez pour annuler (écrit sur le bouton)" >
10.3.5.Ligne où on peut écrire
<INPUT TYPE="TEXT" NAME="nom_de_la_variable">
<INPUT TYPE="TEXT" NAME="nom_de_la_variable" VALUE="texte_pré-écrit">
<INPUT TYPE="TEXT" NAME="nom_de_la_variable" SIZE="30" MAXLENGTH="40">
Dans ce cas, la longueur de la zone est de 30 caractères et la longueur maximale du champ entré est de 40
caractères
<INPUT TYPE="TEXT" NAME="nom_de_la_variable" ">
10.3.6.Ligne pour entrer du texte qui ne s’affiche pas:
<INPUT TYPE="PASSWORD" NAME="nom_de_la_variable">
10.3.7.Aire où on peut écrire:
<TEXTAREA NAME="nom_de_la_variable" ROWS="10" COLS="30"> texte_pré-écrit </TEXTAREA>
page HTML
5/7 Rochdi Bouchiha
Cette aire sera de 10 lignes sur 30 colonnes.
10.3.8.Menu:
<SELECT NAME="nom_de_la_variable" SIZE="5" MULTIPLE> 5 choix se voient dans la fenêtre, et on
peut en choisir plusieurs
<OPTION>bonjour si on choisit cette option, on renverra
bonjour
<OPTION SELECTED>bonsoir l'option "bonsoir" est sélectionnée
<OPTION>salut
<OPTION
VALUE="string_renvoyé_si_on_sélectionne_cette_option">hello
</SELECT>
10.3.9.Ligne pour envoyer des paramètres cachés:
<INPUT TYPE="HIDDEN" NAME="nom_de_la_variable" VALUE="valeur_passée">
10.3.10.Exemple de formulaire:
<FORM ACTION="http://www.insa-tlse.fr/cgi-bin/form-mail.pl" METHOD="POST">
<INPUT NAME="TO" TYPE="HIDDEN" VALUE="lconstan@etud.insa-tlse.fr">
<TEXTAREA NAME="comments" COLS="60" ROWS="10"></TEXTAREA>
<BR></BR>
Votre E-mail: <INPUT NAME="username"><BR></BR>
Votre prénom: <INPUT NAME="realname"><BR></BR>
<INPUT TYPE="submit" VALUE="Envoyer le message">
<INPUT TYPE="reset" VALUE="Ne pas envoyer">
</FORM>
11.Targets:
Au lieu de faire afficher des documents dans la fenêtre courante, on peut les faire s'afficher dans une nouvelle fenêtre. Il
suffit pour cela de rajouter target et le nom de la fenêtre où l'on veut que cela apparaisse:
<A HREF="url" TARGET="nom_de_fenêtre">lieu_où_on_clique</A>
<FORM ACTION="url" TARGET="nom_de_fenêtre">
Certains noms de fenêtre sont réservés. Ce sont les suivants:
_blank dans une nouvelle fenêtre blanche sans titre
_self dans la fenêtre actuelle
_parent dans la fenêtre "père"
_top dans la fenêtre du début
Lorsque l’on utilise des frames, le nom_de_fenêtre peut être une des fenêtres (ex (cf paragraphe sur frames): window1)
On peut aussi définir le nom de la fenêtre par défaut
<BASE TARGET="nom_de_fenêtre">
12.Divers:
12.1.Commentaires:



12.2.Meta:
Pour spécifier le sujet du document: (sert pour l’indexage des outils de recherche automatique)
<META HTTP-EQUIV="Keywords" CONTENT="Informatique, WEB, Internet">
Pour aller à un lien au bout de 10 secondes:

<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.monsiteweb.com/">
12.3.Insérer une application JAVA:

<APPLET CODEBASE="url" url de base où est le programme
CODE="prog.class" nom du programme
WIDTH=600 largeur de l'affichage en pixels
HEIGHT=65 hauteur de l'affichage en pixels
ALT="affiche_cela_si_ne_peut_pas_afficher_l'application">
page HTML
6/7 Rochdi Bouchiha
</APPLET>
12.4.Server Side Includes:

Les SSI sont des commandes que l’on met entre commentaires:
 affiche la dernière modification de fichier.html
 affiche la variable (les autres variables sont
DOCUMENT_NAME DOCUMENT_URI DATE_LOCAL
DATE_GMT SERVER_SOFTWARE SERVER_NAME
REMOTE_HOST)
12.5.Les attributs:
Les attributs relatifs à la mise en forme
Valeurs possibles Rôles

ALIGN= LEFT ou RIGHT ou CENTER ou Alignement du texte par rapport à
JUSTIFY une fenêtre ou aux cellules d'un
tableau
HEIGHT= Nombre de pixels Détermine la hauteur d'une image,
d'une cellule, …
WIDTH= Nombre de pixels Détermine la largeur d'une image,
d'une cellule, …
HSPACE= Nombre de pixels Espace horizontal entre 2 éléments
VSPACE= Nombre de pixels Espace vertical entre 2 éléments
ALT= Texte Chaîne qui s'affiche à
l'emplacement d'un élément
lorsque le navigateur est incapable
d'afficher celui-ci.
SRC= emplacement et nom d'un fichier détermine le nom des fichiers
image, son, …, du code source à
exécuter,…
BORDER= Nombre en pixels Epaisseur de l'encadrement d'un
tableau, d'une image, …
TITLE= Texte Info-bulle associée à l'élément
page HTML
7/7 Rochdi Bouchiha

Chapitre 1 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Université de Monastir Rochdi Bouchiha

Faculté des Sciences de Monastir T.R.I. 1

1.3.Précisions sur ce document:

2. Structure générale d'un programme HTML:

3.1.Mise en page simple:

4.2.Faire un lien vers une autre page HTML:

4.3.Faire un lien vers une une partie d'un document local:

4.4.Faire un lien vers une partie du document courant:

<IMG SRC="rainban.gif" ALT="un_titre"> si le navigateur n’a pas arrivé à télécharger

6.1.Créer une image réactive: première méthode

6.2.Créer une image réactive: deuxième méthode

Voici le résultat: case1 case2

8.2.Taille par défaut:

8.3.URL de base des références:

10.1.Différences entre la méthode GET et la méthode POST:

10.2.Syntaxe des informations:

Pour aller à un lien au bout de 10 secondes:

12.3.Insérer une application JAVA:

12.4.Server Side Includes:

Valeurs possibles Rôles

Vous aimerez peut-être aussi