HTML Abdali

Programmation web
Partie1:
Sites statiques à l’aide
de HTML et CSS
Cours de A.ABDALI
Comment fonctionne le
Web ?
C'est un mécanisme client-serveur.

Le client demande un fichier,
le serveur lui donne ce dernier tel qu'il est stocké
Lorsque le client lance une requête pour accéder
à cette page (en cliquant sur un lien ou en tapant
l’URL correspondant).
Le serveur, quelque part sur le réseau Internet
ou Intranet, renvoie la réponse en format HTML.
Pour une requête simple, la procédure
est illustrée sur la figure suivante.
Ce dialogue s'effectue selon des règles précises qui constituent un
protocole.
Le protocole de web est le HTTP (HyperText Transfert Protocol =

protocole de transfert hypertexte). Il est basé sur le protocole
TCP/IP et permet de définir le format, le contenu et l'ordre des
messages échangés entre le client et le serveur.
La communication entre le client et le serveur web s'effectue de la

manière suivante :
La communication entre le client et serveur web
s'effectue de la manière suivante :
le client envoie un message de requête au serveur web.

Ce dernier y répond par un message de réponse.
Le protocole HTTP organise la structure de ces
messages.
Lors de l'envoi, une connexion TCP/IP est établie avec
le serveur web.
Si celui-ci peut fournir la page demandée, le
document est retourné, en format HTML, par la même
connexion, qui est ensuite refermée.
Il est possible de communiquer avec un serveur via
d'autres protocoles,
1-Comme FTP qui permet d'échanger des fichiers

2- Ou SMTP (Simple Mail Transfer Protocol) protocole simple de
transfert de courrier, POP, IMAP,...
Les pages web statiques sont des documents en HTML invariables

préparées à l’avance. Le serveur renvoie ces pages à l’utilisateur
mais n’effectue aucune action particulière.
Le code source de la page affichée par le navigateur sur le poste

client est identique au code source de la page web installée sur le
serveur.
Qu'est-ce que HTML ?
Langage de description de page qui permet de
coder de manière simple :
le texte de la page
les instructions de mise en forme
les appels aux fichiers externes
les appels aux pages liées
Qu'est-ce que HTML ?
◦ Les balises sont des mots-clés écrits entre un
< et un >
◦ Par exemple : <body>, <b>, <br>)
Peut être enrichi à l'aide de langages de

programmation (Java, Javascript, …)
Conventions d'écriture
Une page HTML est un fichier ASCII (texte)

Elle est tapée avec un traitement de texte (ex :
Notepad++) et enregistrer avec le suffixe .html ou .htm
Un commentaire s'écrit entre 
Structure HTML
Commence toujours par la balise <html> pour
activer l'interprète HTML
Et Finit toujours par la balise </html>
Comporte toujours 2 parties.
Structure HTML
Pour les pages sans frames
L'entête entre les balises <head> et </head>
Le corps entre les balises <body> et </body>
Pour les pages avec frames
L'entête entre les balises <head> et </head>
Les cadres entre les balises <frameset> et </frameset>
Le codage des couleurs
Pour être universel, le codage des couleurs en HTML
s'appuie sur le modèle RVB (Rouge - Vert - Bleu).
Chaque couleur affichée est décomposable en 3
couleurs primaires
Chaque couleur primaire prend sa valeur entre 0 et
255.
La couleur décrite par (0,0,0) est le noir.
La couleur décrite par (255,255,255) est le blanc.
Le codage des couleurs
La palette complète des couleurs est décrite par
toutes les valeurs de triplet possible entre le noir et le
blanc.
Le rouge est décrit par (255,0,0)
Le codage se fait en hexadécimal sur 3x2 chiffres (2
par couleur primaire) précédés par le caractère #
Le noir est représenté par #000000, le blanc par
#FFFFFF et le rouge par #FF0000
Les noms de fichier
Les fichiers HTML ont deux extensions
possibles : .htm et .html
La première page d'un site est en général appelée
index.html
Si aucun fichier n'est précisé lors de la visite d'un site,
c'est ce fichier qui est recherché par défaut sur le site
par l'interprète HTML
Les noms de fichier
Les fichiers images sont de deux types :
Les images JPEG, principalement pour les images de
qualité photographique
 Leur extension est .jpg
Les image GIF, pour les images de tout type et pour les
images animées.
 Leur extension est .gif
 Elles sont plus lourdes.
L'entête <head></head>
Contient des données "informatives" sur la page
Est placé immédiatement après la balise <html>
<title>…</title> change le titre de la fenêtre dans
laquelle la page s'affiche
L'entête <head></head>
En fonction des options déclarées, <meta> va
permettre de faciliter la recherche de la page ou de
passer automatiquement à une autre page.
La balise META
Cette balise donne des informations précises sur la page web
elle est utile pour faire reconnaître votre page Web auprès des moteurs de
recherche
exemple : <META name=’’description’’ content=‘’description de votre page’’>
<META name=’’keywords’’ content=‘’mot-clé, mot-clé, mot-clé, …’’>
<HTML>
<HEAD>
<TITLE> La page Web du Master EVRM </TITLE>
<META name="author" content="Votre nom">
<META name="description" content="Cette page vous permettra de
trouver toutes les informations sur la licence SIR">
<META name="keywords" content="Sir, BD, Réseaux,SI,BDR " >
</HEAD>
… reste du document
<HTML>
La balise META
<meta name=" Keywords " content="mot-
clé1[,mot-clé2,…]">
permet de rechercher la page dans certains moteurs
de recherche en se basant sur les mots-clés indiqués
La balise META
<meta http-equiv="Refresh“ content="n;url=adresse de
page">
permet de passer automatiquement à un autre site après un
certain délai
n = délai en seconde avant l'appel de la deuxième page.
adresse de page = adresse (absolue ou relative)
de la deuxième page Web à afficher
Exercice à tester
<html>
<head>
<title>TP Bureautique : Deug STPI.</title>
<meta name="Keywords" content="STPI, Deug, HTML">
<meta name="Author" content=" Paris & Sahnoune">
<meta http-equiv="Refresh"
content="5; URL=http://www.fstg-Marrakech.ac.ma">
</head>
<body>
Dans quelques instants vous allez passez
automatiquement à une nouvelle page.
</body>
</html>
Le corps <body></body>
Permet de définir l'apparence du fond de l'écran et la
couleur des éléments textuels
1 balise Body et 1 seule par page
Elle peut s'employer seule ou avec une ou plusieurs
de ses options
Est placée immédiatement après la balise </head>
Le corps <body></body>
</body> est placé immédiatement avant la balise
</html>
Est absent dans les pages décrivant des frames
Les options du BODY
<body bgcolor="#RRVVBB" background="nom de fichier" text
= "#RRVVBB" link = "#RRVVBB" vlink = "#RRVVBB" alink =
"#RRVVBB">
BGCOLOR couleur de fond de la fenêtre
BACKGROUND image répétée sous forme de mosaïque en fond
TEXT couleur du texte ordinaire (si omis, utilisation des couleurs
standards)
LINK couleur du texte/de la bordure d'une image qui est un lien (si
omis, utilisation des couleurs standards)
VLINK couleur du texte/de la bordure d'une image qui est un lien
amenant sur une page déjà vue (si omis, utilisation des couleurs
standards)
ALINK couleur prise par un lien tant qu'on clique dessus (peu utilisé)
Toujours mettre un BGCOLOR en fonction de TEXT et LINK

(même s'il y a un BACKGROUND)
Le texte du body
Tout texte tapé hors d'une balise est considéré
comme du texte "statique" et apparaîtra de ce fait à
l'écran
La mise en forme se fait à 2 niveaux
caractères
paragraphes
Le texte du body
Il faut coder les caractères spécifiques au français (et
aux langues autres que l'anglais) en utilisant un
système de codage qui permet un affichage universel
quelque soit la langue de l'ordinateur sur lequel les
pages sont lues
& nbsp; Espace insécable ¦ | ± ±
£ £ ¥ ¥ Ø Ø
© © ® Ò & deg; °
² 2 ³ 3 & &
¼ ¼ ½ ½ ¾ ¾
à à &Agrave À &oelig; œ
é é É É & euml; ë
& icirc; î & Icirc; Î & ccedil; ç
" " & szlig; ß ñ ñ
< < > > µ µ

Mise en forme des caractères
<b> </b> : gras
<i> </i> : italique
<u> </u> : souligné
<basefont size="s"> sert à fixer la taille par défaut
dans une page Web (s un entier compris entre 1 et 7)
La taille par défaut des caractères est fixée à 3
Mise en forme des caractères
<font face="police1[,police2,…]
size = "s|+s|-s"
color = "#RRVVBB"> … </font>
FACE : la première police installée est utilisée. Ne proposer que
des polices dont on est sûr qu'elles sont disponibles sur
l'ordinateur de consultation (Arial/Helvetica et Times New
Roman/Times)
SIZE : 1..7 (taille absolue) ou +1, +2... (taille relative par
rapport à la valeur spécifiée dans BASEFONT)
Les balises <font> </font> peuvent être imbriquées
<font face="…"><font size="+1">toto</font></ font>

est équivalent à <font face="…" size="+1">toto</ font>
Exercice 4
Écrivez le fichier reproduisant la page ci-dessous
<html>
<head>
</head>
<body text=#CC2EFA bgcolor=#BDBDBD>
<FONT FACE="Arial Narrow" size=5>
<p> Ceci est maintenant le texte à apparaitre <i> formaté</i> avec <u><b>les
propriétés<b></u> définies dans la baslise <u>BODY ! </u>avec de modifications
locales de caractères …. A suivre…. Comme c’est beau ! </FONT>
<FONT FACE="Blackadder ITC " size=8 color=#F7D358> et sans <u>mentir</u>
si notre ….font est MJ Bold vous aurez la même !</FONT>
</body>
</html>
La police de caractère
Balise:
<FONT FACE="arial"> texte… </FONT>
(le texte sera affiché avec la police de caractère arial)
arial est une police de caractère comme :

albertus, verdana, Comic Sans MS …etc.
331
La taille des caractères
<FONT SIZE=Taille> texte… </FONT>
Exemple : <FONT SIZE=3> texte… </FONT>

(Affiche le texte avec une taille 3)
<FONT SIZE=+/-Taille> texte… </FONT>
Exemple : <FONT SIZE=+2> texte… </FONT>
(augmente la taille du texte de deux unités par rapport

à la taille par défaut)
Mise en forme des paragraphes
<h1> </h1> : format d'entête
<br> retour à la ligne simple
<p> retour à la ligne avec saut d’une ligne
<div align="center"></div> centre le texte
<div align="right"></ div > positionne le texte à
droite dans la page
<div align="left"></div> positionne le texte à
gauche dans la page
Exercice
Écrivez le fichier reproduisant la page ci-dessous
Les listes
2 types de listes
les listes à puce : précéder et faire suivre les éléments de
la liste avec les balises <ul> et </ul>
les listes numérotées : précéder et faire suivre les
éléments de la liste avec les balises <ol> et </ol>
Les listes
Chaque élément de la liste est précédé par la balise
<li>
elle provoque l'affichage de la puce ou du chiffre
Les listes peuvent être imbriquées
Les options des listes à puces
l'option type="disc|circle|square" dans <ul> permet
de choisir sa puce.
taper les valeurs en minuscules (ie ne les applique pas si
elles sont tapées en majuscules).
Exemple : <ul type="disc">.
Les options des listes numérotées
L'option start=nombre_de_départ pour démarrer la
liste à une valeur spécifique autre que 1.
l'option type=i|I|a|A|1 pour changer le type de
numérotation.
1=chiffres arabes (option par défaut), i=romains
minuscules, I=majuscules, a=lettres minuscules,
A=majuscules.
Exemple : <ol type="I" start=4>
Les listes hiérarchiques
2 listes imbriquées l'une dans l'autre sans puce ni
numéro.
Encadrées par <dl></dl>
Chaque nouvelle ligne de niveau 1 commence par
<dt>
Chaque nouvelle ligne de niveau 2 commence par
<dd>
Les listes hiérarchiques
Exemple
<dl>
<dt>niv1
<dd>niv2
<dd>niv2
<dd>niv2
<dt>niv1
<dd>niv2
<dt>niv1
<dt>niv1
</dl>
Exercice
Écrivez le
fichier
engendrant la
page ci-contre
Création de lignes horizontales
<hr size="s" width="w|w%" align = "LEFT|CENTER|RIGHT"
color = "#RRVVBB" noshade>
SIZE : épaisseur en pixel de la ligne

WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue
(pixels) ou relative (en pourcentage de la largeur de la fenêtre)
ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à
utiliser si la ligne ne fait pas toute la largeur de la fenêtre)
COLOR : couleur de la ligne. Option valable avec Internet Explorer
NOSHADE : désactivation de l'ombrage de la ligne. Option valable
avec Netscape Navigator
<hr> seul affiche une ligne grise ombrée de 1 pixel

d'épaisseur faisant toute la largeur de la fenêtre
Exercice
Écrivez le
fichier
reproduisant la
page ci-
dessous
Les liens externes.
<a href="adresse à atteindre" target="fenêtre
d'affichage"> </a>
Encadre du texte et/ou une image
Target permet de spécifier un nom de fenêtre pour
l'affichage
Si la fenêtre précisée n'existe pas, elle est créée
Par défaut l'affichage se fait dans la fenêtre courante
Les liens externes.
<a href="http//:www.lita.univ-metz.fr/~paris/">
chez moi
</a>
référence une page html que l'on atteint en cliquant sur chez moi. Si le
fichier spécifié n'est pas un fichier HTML, le lien sera un lien de
téléchargement.
<a href="ftp//:…"> ici </a>

référence un fichier à télécharger même si c'est un fichier html.
Les liens externes.
<a href =mailto:paris@univ-metz.fr?subject=qcq">
ma boîte aux lettres
</a>
quand on clique sur ma boîte aux lettres
une fenêtre de mail s'ouvre avec
pour destinataire paris@univ-metz.fr et
pour objet qcq
Le lien aura la couleur spécifiée dans l'option LINK du BODY, sauf si le

texte matérialisant le lien est inclus dans une balise <font color> (incluse
elle-même dans la balise <a href>)
Le lien peut être fait sur du texte et/ou une image

Exercice
Écrivez le
fichier
corres-
pondant à la
page ci-
dessous
Les liens internes
Un lien interne est un lien qui amène à un endroit spécifique de la page
HTML en cours. Il se construit en deux temps :
•Mise en place d'une étiquette à l'emplacement à atteindre avec la balise
<a name="nom de l'étiquette"> … </a>
•Appel du lien de manière classique, mais où l'adresse de la page à
atteindre est remplacée par le nom de l'étiquette précédée d'un # :
<a href="#nom de l'étiquette"> … </a>
NB : il est possible d'atteindre un emplacement spécifique d'une page

différente de celle où a lieu l'appel de lien.
c'est à dire de combiner les liens externes et internes, en faisant suivre le
nom du fichier HTML par un # et le nom de l'étiquette.
<html>
<head>
</head>
<body>
<p><a href="#heading1">Lien vers le titre 1</a></p>
<p><a href="#heading2">Lien vers le titre 2</a></p>
<h1 id="heading1">Titre 1</h1>

<p>Texte texte texte texte</p>
<h1 id="heading2">Titre 2</h1>
<p>Texte texte texte texte</p>
</body>
</html>
Exercice
Construisez une page HTML identique à l'exercice
précédent en ajoutant :
un lien interne référençant le troisième élément de la
liste que l'on accède en cliquant sur le mot beau.
Un lien interne référençant le haut de la page que l'on
accède en cliquant sur anonymous.
Les attributs du paragraphe
 La commande pour le retour à la ligne est : <BR>
(en HTML, la touche enter du clavier ne permet pas ce retour à la ligne)
La touche espace ne permet d’effectuer qu’un seul espace.
Pour ajouter d’autres espaces il faut taper à chaque fois:
 La commande pour insérer une tabulation est : <UL>… </UL>

 La commande pour insérer une ligne horizontale est : <HR>
 La commande pour commencer un nouveau paragraphe est : <P>
 On peut définir la position du texte sur la page en le mettant à gauche,
au centre ou à droite:
<P ALIGN=LEFT> Texte </P > justifie le texte à gauche

<P ALIGN=RIGHT > Texte </P > justifie le texte à droite
<P ALIGN=CENTER> Texte </P > centre le texte
(on peut utiliser aussi <CENTER> et </CENTER>
Le style la page web
L'attribut BGCOLOR de la commande <BODY> permet de modifier

la couleur de fond de la page :
<BODY BGCOLOR = #couleur>
Exemple : <BODY BGCOLOR = #FF3366 > un fond de couleur rose

(On peut également utiliser le nom de la couleur en anglais: red…)
L'attribut BACKGROUND de la commande <BODY> permet de

mettre un fichier image comme arrière plan de la page web:
<BODY BACKGROUND = "IMAGE.JPG" >

Mise en place des images
Balise: <img src="Nom_Du_Fichier">
Attribut Signification Attribut Signification
src URL de l’image à alt Texte alternatif (texte s’affichant en cas

inclure de problème avec l’image
width Largeur de l’image align Alignement de l’image

(facultatif)
height Hauteur de l’image border Contrôle la largeur de la bordure (0 par
(facultatif) défaut
Les images statiques et animées :
<img>
Une image animée se crée en associant plusieurs images (les
formats utilisables diffèrent suivant les logiciels) dans un seul fichier au
format .gif
•L'option src : nom du fichier contenant l'image
•L'option width : largeur de l'image affichée. Si cette option n'est pas
spécifiée, l'image est affichée à sa taille réelle. On indique
soit la valeur en pixel, soit en pourcentage de la taille originale de
l'image.
•L'option height : hauteur de l'image affichée.
Mêmes remarques que pour width
Quand une seule des deux options width ou height est spécifiée,
l'autre est automatiquement calculée en proportion
Les images statiques et animées
L'option alt : texte apparaissant dans une info-bulle
quand la souris est positionnée pendant 1
à 2 secondes sur l'image
L'option border : taille en pixel de la bordure autour de

l'image. Si l'image est un lien et qu'on
ne veut pas voir de bordure de la
couleur spécifiée dans l'option LINK
du BODY, mettre 0
- Positionnement du texte par rapport à l’image :
 En haut:
texte…
<img align="top " src="Nom_Du_Fichier"> texte
 Au milieu:
<img align="middle " src="Nom_Du_Fichier">texte
texte…
 En bas:
<img align="bottom " src="Nom_Du_Fichier">texte
texte…
581
- Positionnement de l’image par rapport au texte :
Image à gauche: Texte texte texte

Texte texte texte
<img align=left src="Nom_Du_Fichier"> Texte texte texte
Image à droite :
Texte texte texte
<img align=right src="Nom_Du_Fichier"> Texte texte texte
Texte texte texte
591
- Redimensionnement de l’image :
Balise : <img src="Nom_Du_Fichier" width=X height=Y >

- X et Y sont des nombres entiers représentants la largeur et la hauteur en
pixels.
- Si vous n’utilisez pas ces attributs, l'image sera affichée en grandeur
réelle.
- Ajout d'un cadre à l'image :

Balise : <img src="Nom_Du_Fichier" border=X>
où X est un nombre entier représentant la largeur en pixels du cadre.
601
- On peut mettre plusieurs attributs à l'intérieur de la

balise "img" et leur ordre n'est pas important :
Exemple :
<img align=middle src="image.jpg" width=250 height=150 border=2 >
- Il faut respecter la casse:

Les systèmes d'exploitation qui gèrent les serveurs web font la
différence entre les majuscules et les minuscules, ainsi les
écritures suivantes sont différentes :
image.jpg, IMAGE.jpg, Image.jpg, image.JPG, Image.Jpg …etc.
611
Les tableaux
<table></table>
<TR></TR> : ouverture et fermeture d'une ligne dans le tableau
(Table Row)
<TD></TD> : ouverture et fermeture d'une cellule (Table Data)

Ne jamais oublier les balises de fermeture, car le tableau pourrait
être désordonné, voire ne pas s'afficher
Les tableaux peuvent être imbriqués, mais il faut toujours qu'il y ait
le même nombre de balises d'ouverture et de fermeture (attention à
l'ordre)
Les tableaux peuvent servir à la mise en page : texte en colonne,

création de menus verticaux sur le coté de la fenêtre. mais si des
attributs de caractères doivent être spécifiés, il faut le faire cellule
par cellule (même si c'est pour tout le tableau )
Exercice
Écrivez le code qui vient et visualisez le résultat
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="STPI, Deug, HTML">
<meta name="Author" content="Stéphane Paris">
<meta name="Generator" content="AceHTML 4 Pro">
<title>TP Bureautique : Deug STPI</title>
</head>
<body bgcolor="silver" text="purple" link="black" vlink="blue"
alink="white" rightmargin=5 title="Le titre du Body c'est... Le corps!">
<table align="center" bgcolor="#FF00FF" bordercolor="#FF0000">
<tr>
<td>pos 1 1</td>
<td>pos 1 2</td>
</tr>
<tr>
<td>pos 2 1</td>
<td>pos 2 2</td>
</tr>
</table>
</body>
</html>
Les options des tableaux
<table>
Les options height, width, align, border, bgcolor,
background comme d'habitude
L'option cellpadding définit l'espace entre le bord
des cellules et leurs contenus (intra cellulaire)
L'option cellspacing définit l'espace entre les cellules
(inter cellulaire)
Exemple
<HTML>
<HEAD>
<TITLE>Exemple de table</TITLE>
</HEAD>
<BODY BGCOLOR=#fffeac TEXT=#0a0a8a LINK=#ff1614 VLINK=#9414cb>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=6 WIDTH=40%>
<TR>
<TD COLSPAN=2 ALIGN=RIGHT>case 1-1 sur deux colones </TD>
<TD ALIGN=CENTER>case1-3 </TD>
</TR>
<TR>
<TD ROWSPAN=2>case 2-1 sur deux lignes </TD>
<TD>case 2-2 </TD>
<TD>case 2-3 </TD>
</TR>
<TR>
<TD>case 3-2 </TD>
<TD>case 3-3 </TD>
</TR>
</BODY>
</HTML>
Les options des lignes <tr>
Les options height, width, border, bgcolor,
background comme d'habitude
L'option align pour un alignement horizontal centré,
justifié, à gauche ou encore à droite
L'option valign permet de positionner verticalement
le tableau
Les options des cellules <td>
Les options height, width, border, bgcolor, background,
align, valign comme pour les lignes mais pour les cellules.
L'option colspan=nombre de cellules fusionnées à l'horizontal.

Permet de disposer du texte sur plusieurs colonnes. Pour que le
tableau s'affiche correctement, il faut que ligne par ligne, le
nombre de cellules soit le même.
L'option rowspan=idem pour les fusions à la verticale
<TD COLSPAN=3>
ROWSPAN=3>
<TD COLSPAN=2>
Exercice

HTML Abdali

Transféré par

Informations du document

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

HTML Abdali

Transféré par

Droits d'auteur :

Formats disponibles

Programmation web

C'est un mécanisme client-serveur.

Le protocole de web est le HTTP (HyperText Transfert Protocol =

La communication entre le client et le serveur web s'effectue de la

le client envoie un message de requête au serveur web.

1-Comme FTP qui permet d'échanger des fichiers

Les pages web statiques sont des documents en HTML invariables

Le code source de la page affichée par le navigateur sur le poste

Peut être enrichi à l'aide de langages de

Une page HTML est un fichier ASCII (texte)

Toujours mettre un BGCOLOR en fonction de TEXT et LINK

&pound; £ &yen; ¥ &Oslash; Ø

&copy; © &reg; Ò & deg; °

&sup2; 2 &sup3; 3 &amp; &

&frac14; ¼ &frac12; ½ &frac34; ¾

&agrave; à &Agrave À &oelig; œ

&eacute; é &Eacute; É & euml; ë

& icirc; î & Icirc; Î & ccedil; ç

&quot; " & szlig; ß &ntilde; ñ

&lt; < &gt; > &micro; µ

<font face="…"><font size="+1">toto</font></ font>

arial est une police de caractère comme :

<FONT SIZE=Taille> texte… </FONT>

Exemple : <FONT SIZE=3> texte… </FONT>

<FONT SIZE=+/-Taille> texte… </FONT>

Exemple : <FONT SIZE=+2> texte… </FONT>

(augmente la taille du texte de deux unités par rapport

SIZE : épaisseur en pixel de la ligne

<hr> seul affiche une ligne grise ombrée de 1 pixel

<a href="ftp//:…"> ici </a>

Le lien aura la couleur spécifiée dans l'option LINK du BODY, sauf si le

Le lien peut être fait sur du texte et/ou une image

NB : il est possible d'atteindre un emplacement spécifique d'une page

<h1 id="heading1">Titre 1</h1>

 La commande pour insérer une tabulation est : <UL>… </UL>

<P ALIGN=LEFT> Texte </P > justifie le texte à gauche

L'attribut BGCOLOR de la commande <BODY> permet de modifier

Exemple : <BODY BGCOLOR = #FF3366 > un fond de couleur rose

L'attribut BACKGROUND de la commande <BODY> permet de

<BODY BACKGROUND = "IMAGE.JPG" >

Balise: <img src="Nom_Du_Fichier">

Attribut Signification Attribut Signification

src URL de l’image à alt Texte alternatif (texte s’affichant en cas

width Largeur de l’image align Alignement de l’image

L'option border : taille en pixel de la bordure autour de

- Positionnement de l’image par rapport au texte :

Image à gauche: Texte texte texte

Balise : <img src="Nom_Du_Fichier" width=X height=Y >

- Ajout d'un cadre à l'image :

- On peut mettre plusieurs attributs à l'intérieur de la

- Il faut respecter la casse:

<TD></TD> : ouverture et fermeture d'une cellule (Table Data)

Les tableaux peuvent servir à la mise en page : texte en colonne,

L'option colspan=nombre de cellules fusionnées à l'horizontal.

L'option rowspan=idem pour les fusions à la verticale

Vous aimerez peut-être aussi

£ £ ¥ ¥ Ø Ø

© © ® Ò & deg; °

² 2 ³ 3 & &

¼ ¼ ½ ½ ¾ ¾

à à &Agrave À &oelig; œ

é é É É & euml; ë

" " & szlig; ß ñ ñ

< < > > µ µ