HTML Mkadmi

06/11/2008
Un document html "standard" doit

impérativement commencer par <HTML> et finir
par </HTML>.
Les commandes HTML ont une marque de début
et une marque de fin. Certaines marques de fin
Abderrazak MKADMI sont facultatives.
Institut supérieur de documentation Les commandes HTML utilisent les caractères <
et > comme délimiteurs.
Université de la Manouba
Les commandes HTML peuvent être écrites en
amkadmi@gmail.com minuscules ou en majuscules.
http://amkadmi.neuf.fr Tout ce qui n'est pas compris entre "<" et ">" est
tout simplement considéré comme du texte à
afficher.
A. MKADMI, ISD, Université de la Manouba 2
<HTML> <HTML/> : Commandes de début et de <HTML>

fin de document <HEAD>
<HEAD> </HEAD> : Informations non affichées <TITLE>Exemple de structure de
concernant le document (Date et auteur par document HTML
exemple) </TITLE>
<TITLE> </TITLE> : Titre du document. Cette </HEAD>
information apparaît dans la barre de titre du <BODY>
client WWW. Les données propres au document HTML
<BODY> </BODY> : Corps du document. Toutes </BODY>
les informations affichées par le client WWW y </HTML>
sont contenues.
A. MKADMI, ISD, Université de la Manouba 3 A. MKADMI, ISD, Université de la Manouba 4
1
06/11/2008
TITLE HTML autorise les auteurs à spécifier des métadonnées (des

Ce texte apparaîtra dans la barre de titre du informations sur le document plutôt que sur le contenu du
document) de diverses manières : auteur, description, mots
navigateur lorsqu'un utilisateur affichera votre
clés
page sur son écran.
<META NAME="Author" CONTENT="Abderrazak MKADMI">
Exemple : pour cette page il s'agit du Guide
<META NAME="owner" CONTENT=amkadmi@gmail.com">
HTML.
<META NAME="Description" CONTENT="Guide du HTML">
<META NAME="identifier-url"
<HEAD><TITLE>Guide HTML</TITLE></HEAD> CONTENT="http://amkadmi.neuf.fr/liens/CoursHTML.htm">
<META NAME="language" CONTENT="FR">
<META NAME="Keywords" CONTENT="HTML, Site Web,
Langage du Web, ISD, Internet">
<html><head><TITLE>GED</TITLE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
BODY
<META NAME="AUTHOR" CONTENT="Scanfile France">
<META NAME="OWNER" CONTENT="info@scanfile.fr"> Tout ce qui est contenu entre <BODY>
<META NAME="SUBJECT" CONTENT="gestion electronique de documents"> et </BODY> sera affiché à l'écran, c'est
<META NAME="DESCRIPTION" CONTENT="Scanfile propose des logiciels de gestion
electronique de documents, de dematerialisation et de workflow et des
la partie intégrante de votre document,
scanners de production ged"> c'est là que vous saisirez votre texte,
<META NAME="KEYWORDS" CONTENT="gestion électronique documents, logiciel
ged, logiciel geide, logiciel ged scanfile, logiciel geide filedirector">
insérerez vos images et établirez vos
<META NAME="identifier-url" CONTENT="http://www.scanfile.fr"> liens.
<META NAME="REVISIT-AFTER" CONTENT="7 DAYS">
<META NAME="LANGUAGE" CONTENT="FR">
<META NAME="COPYRIGHT" CONTENT="Scanfile France">
<META NAME="ROBOTS" CONTENT="All">
</head>
2
06/11/2008
BACKGROUND
Permet de mettre une image dans le fond de la page. COULEUR
Attention à la couleur d'écriture et celle des liens, en fonction de la couleur du La couleur que vous voulez obtenir peut être décrite de deux façons:
fond. On peut également choisir une couleur de fond proche de celle de l'image. avec le nom anglais de la couleur, ou beaucoup plus précisément au moyen
<BODY BACKGROUND="nom_de_fichier.ext"> d'un symbole # et de 6 chiffres (en hexadécimal - base16).
Exemple : <BODY BACKGROUND="cahier.gif"> Tout d'abord le format de la commande de couleur est: "#RRVVBB"
# est le symbole qui permet de différencier une valeur d'un nom de
BGCOLOR couleur.
Permet de changer la couleur de l'arrière plan sans avoir à charger une image, là RR la quantité de rouge contenue dans la couleur.
aussi, il faudra veiller à ce que le texte et les liens soient visibles dans tous les VV la quantité de vert contenu dans la couleur.
cas. Par défaut, le fond de page est en blanc, le texte en noir, les liens en bleu BB la quantité de bleu contenu dans la couleur.
souligné, les liens activés en rouge et les liens visités en violet. - La couleur: #000000 correspond au noir (00 de rouge, 00 de vert et 00 de
bleu).
TEXT : Permet de changer la couleur du texte, par défaut cette couleur est en
- La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)
principe le noir, mais elle peut-être changée dans les préférences du browser. - La séquence de numérotation hexadécimale est (de min. à max.): 0 1 2 3
4 5 6 7 8 9 A B C D E F.
LINK : Permet de changer la couleur des liens.
Exemple:
ALINK : Permet de changer la couleur des liens sélectionnés.
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF">
VLINK : Permet de changer la couleur des liens déjà visités. Le fond sera noir, le texte blanc et les liens en rose.
<BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur" ALINK="couleur">

VLINK="couleur">
L’élément BODY : les couleurs
SON
Insérer un son en fond de page
<EMBED SRC="son.wav" AUTOSTART="true" LOOP="-1">
AUTOSTART="True or False" : permet de déclarer le lancement du

son à l'ouverture de la page.
LOOP=" " permet de déterminer le nombre de fois où le son va
être joué. La valeur -1 signifie que le son sera répété à l'infini.
3
06/11/2008
Le texte peut avoir plusieurs polices et attributs.

Mise en forme de caractères
Option Style B (gras), I (italique), U (souligné), S (barré)...

Option FONT SIZE pour gérer la taille de la police
Exemple :
Bienvenue sur ma page
<B><FONT SIZE=+1>Bienvenue….</FONT></B>
Le texte est centré, en gras avec une police d'une taille supérieure à la taille
standard.
Caractères, paragraphes, images, etc. Aucune police n'est spécifiée ce qui signifie que c'est la police choisie par défaut dans
le menu Préférences qui sera affichée.
<FONT> Ce marqueur permet de changer la fonte, et aussi d'autres paramètres,

comme la taille et la couleur.
Exemple :
<FONT FACE="arial" SIZE="3"> : type et taille de police
<FONT COLOR="YELLOW">ou COLOR="#RRVVBB" </FONT> : couleur de police
<FONT SIZE="-1">Ou +2, +3, -2, -3, ou encore 3, 4, 5</FONT> : La taille des caractères
en pixels
<FONT SIZE="x">) : taille de police
Insérer une image

Mise en forme de paragraphes <IMG SRC ="">: insertion d'image en donnant le nom et le chemin de l’image par l’attribut
Le texte peut être positionné à gauche, au SRC
centre, ou à droite de l'écran.

Option ALIGN avec RIGHT (droit), CENTER
(centre) et LEFT (gauche). <CENTER><IMG SRC="abeille.gif"></CENTER>
Marqueur CENTER , RIGHT ou LEFT pour positionner l'image horizontalement.
Bienvenue sur ma Page.

On peut modifier la taille initiale d'une image :
<ALIGN=right><B><FONT
SIZE=+1>Bienvenue….</FONT></B></CENTER></ALIGN> HEIGHT ="valeur" pour modifier la hauteur
WIDTH="valeur" pour modifier la largeur

Le texte est aligné à droite avec une police d'1 taille
ALT = texte alternatif
supérieure et en gras.
TITLE : titre de l’image
4
06/11/2008
Le texte se saisit comme sur un traitement de texte le passage à la ligne

est automatique.
Marqueur <BR> : Pour créer un nouveau paragraphe Les caractères < , > , & et " étant interprétés
Marqueur <P> : Changer l'alignement du paragraphe avec les options par HTML, les séquences suivantes
d'alignement:
<P ALIGN="RIGHT"> (ou LEFT CENTER JUSTIFY) permettent leur affichage.
gauche/centre/aligné.
< <
MARQUEURS DIVERS > >
<B> et </B> : Caractères gras (<STRONG> </STRONG> aussi). & &
<I> et </I> : Italiques (<EM> </EM> aussi).
" "
<U> et </U> : Souligné
<S> et </S> : Barré (ne fonctionne pas avec tous browsers). Les espaces n'étant pas significatifs, le
<SUB> et </SUB> : indice.
caractère permet de forcer un "blanc"
<SUP> et </SUP> : exposant.
<CENTER> et </CENTER> : Centrage horizontal (texte et images). autant que souhaité
<DIV ALIGN=""> et </DIV> : Positionnement horizontal,
<BLINK> et </BLINK> Clignotant
A. MKADMI, ISD, Université de la Manouba 17 A. MKADMI, ISD, Université de la Manouba
HTML HTML
HTML utilise le jeu de caractères ISO Latin-1 codés sur 8
bits et les caractères ASCII codés sur 7 bits. Avec cette © © ©
dernière codification les caractères accentués sont
représentés par les séquences suivantes : ® ® ®
° ° °
é é
« « «
É É
è è » » »
ê ê
µ µ µ
à à
ï ï ¶ ¶ ¶
ç ç ¼ ¼ ¼
ñ ñ
½ ½ ½
Æ Æ
¾ ¾ ¾
5
06/11/2008
Un lien vers une autre partie du document ou vers un autre document peut
être de plusieurs nature, du texte, de l'image, une partie d'une image voire
même le document tout entier...
<A HREF="xxx">
Début de lien qui finit par </A>
Tout ce qui se trouve entre les deux est considéré comme zone sensible, et
un click sur les objets situé entre ces deux bornes provoquera l'action
contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page)
Liens internes, externes, de Lien vers une page en local

messageries …
Exemples : Pour retourner au sommaire de ce site
<A HREF="index.html">Sommaire</A>
Lien vers un site extérieur
Exemple : Pour aller sur le site Netscape

<A HREF="http://www.netscape.com/index.html">Allez voir ce site</A>
Lien vers un e-mail

Exemple : Pour m'envoyer un courrier électronique Liens et insertion d’images
<A HREF="mailto:showtime@ifrance.com">‫ة‬crivez-moi</A>
Un hyperlien très spécial est l'insertion d'une image dans le texte
Pour faire un lien à partir d'une image remplacez le texte par le marqueur IMG <IMG SRC="url-de-l'image">
SRC="image.gif".
Cette image doit être au format GIF, JPEGou, plus rarement, XBM
<A HREF="mailto:showtime@ifrance.com"><IMG SRC="mail.gif" BORDER="0"></A> Il est même possible de cumuler un hyperlien et une image incrustée
Petite astuce, si vous ne voulez pas qu'un lien image ait une bande de couleur autour de lui, mettez l'option border du marqueur image à
zéro.
afin de pouvoir suivre le lien en cliquant sur l'image. La syntaxe est :
<A HREF="utilisateurs.html"><IMG SRC="/data/man.gif"></A>
Lien dans la même page L'alternative ALT permet d'afficher un texte si le lecteur de Web ne
Il faut utiliser les cibles ou ancrages. sait pas lire les images.
Positionnez vous à l'endroit que vous souhaitez atteindre, dans cet exemple le haut
de cette page. Par exemple : <IMG SRC="nom du fichier" ALT="texte">
Identifier la cible avec <A NAME="titre">Texte ou image</A> ALIGN={BOTTOM | TOP| RIGHT | LEFT ...} : Cette option permet de
et utiliser le marqueur: <A HREF="#Titre">pour y aller</A> définir l'alignement du texte autour de l'image, ex: <IMG

SRC="image.gif" ALIGN=LEFT>.
Pour sauter dans une section particulière d'une autre page Web, il suffit tout HEIGHT=n, WIDTH=n: Ces deux options permettent de spécifier la
simplement de rajouter le nom de la section après le nom de la page dans le lien, taille de l’image.
exemple:
<A HREF="page2.html#sectionX"> Texte</A>
6
06/11/2008
Modifier l'apparence des liens
Il est possible de modifier l'apparence des liens de façon à ne pas

les faire apparaître en bleu souligné et modifier la couleur au
survol.
Vous devez incorporer les lignes de commande suivante dans la
partie <HEAD> de votre page :
<STYLE>
A:LINK { color: #000000; text-decoration: none }
Listes simples
A:VISITED { color: #000000; text-decoration: none } Listes numérotées
A:HOVER { color: #ffffff; text-decoration: none } Listes de définition
</STYLE>
Dans cet exemple les liens apparaissent en noir non souligné, au

survol ils se transforment en blanc et ils restent en noir après avoir
été visités.
Il est possible de créer des listes d'objets numérotées ou non

avec quelques marqueurs. <OL>
<LH>Entête en option</LH>
<LI>texte
Liste non numérotée :
<LI>texte
<UL>
</OL>
<LH>Entête en option</LH> A l’intérieur de la balise ouvrante <OL>, deux attributs sont possibles :
<LI>Point numéro1
<LI>Point numéro2 1- TYPE : indication de style de numérotation : cet attribut fixe le style de
numérotation des items de liste ordonnée. Les valeurs possibles sont :
<LI>Point numéro3
<LI>Point numéro4 <OL TYPE="a"> : liste alphabétique minuscule
</UL> <OL TYPE="A"> : liste alphabétique majuscule
OPTIONS <OL TYPE="1"> : liste numérique en chiffres arabes
<OL TYPE="I"> : liste numérique en chiffres romains
<ul type="circle"> ◦
<ul type="disc"> ● 2- START : Cet attribut spécifie le numéro initial du premier item dans une
liste ordonnée. Le numéro initial par défaut est "1". Quand l'item de liste a
<ul type="square"> ▪ un style de lettres latines en majuscule (A), la déclaration « start=3 »
signifie « C ». Quand l'item a un style de chiffres romains en minuscules, la
déclaration « start=3 » signifie « iii », etc.
7
06/11/2008
Liste de définition
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2
<DL>
<DT> Terme 1 à définir
<DD> Définition du terme 1 Syntaxe, Structure, mise en forme…
<DT> Terme 2 à définir
<DD> Définition du terme 2
<DD> suite du terme 2
</DL>

l'imbrication de listes est bien sûr possible
C'est la seule façon de gérer convenablement la présentation.

Syntaxe : Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec
des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des
objets.
<TABLE> : Indique le début du tableau (finissant par </TABLE>)
Ces tables peuvent avoir un fond et des bords visibles ou non.
Option : <TABLE BORDER> pour indiquer que le tableau aura une bordure
Insérer un tableau
<TR> : indique une nouvelle ligne (Table Row) <TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> : indique une nouvelle colonne de titre (Table Header), <TH> et </TH> : pour les cellules de haut de colonne (facultatif)
options <TD> et </TD> : pour une cellule
Exemples :
COLSPAN=n -> Permet de mettre une colonne identique sur n colonnes <TABLE WIDTH=50%>
ROWSPAN=n -> Permet de mettre une ligne identique sur n lignes <TR><TD><IMGSRC="tv.gif"></TD><TD>Bienvenue</TD></TR>
</TABLE></CENTER>
<TD> : Indique une nouvelle colonne (Table Data)
Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première
Option : ALIGN={RIGHT,CENTER,LEFT} -> Alignement du contenu cellule l'image et dans la seconde le texte, le tout étant centré.
<TABLE BORDER COLS=2 WIDTH="100%" >

<TR></TD><CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER>
<TD><CENTER>Bienvenue</CENTER></TD></TR>
</TABLE>
8
06/11/2008
Mise en forme d'un tableau

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre
plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle
du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs
de bordure, etc...
<TABLE BORDER="2" CELLPADING="2" CELLSPACING="3" WIDTH="50%"
BORDERCOLOR="#000080">
<TR>
<TD WIDTH="50%" ALIGN="left" BGCOLOR="#008080" BORDERCOLOR="#FF0000"> </TD>
<TD WIDTH="50%" ALIGN="left" BACKGROUND="fonkraft.jpg"> </TD>
</TR>
</TABLE>
<table bgcolor="#008080"> : mettre un fond de couleur

<table width="50%"> : Occupation en % de la page
<table border="1"> Taille des bords (0=pas de bords)
border color="#FF0000" couleur des bordures
cellpadding="2" Définit l'espace entre l'objet et le contour d'une cellule
cellspacing="3" Définit l'épaisseur du trait entre les cellules
Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à
une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""), ou les deux.
<table border=« 2 »>

<tr><th rowspan=2>SERVICE<th colspan=2>Identification <CAPTION ALIGN="" > </CAPTION>
<tr><th>NOM<th>TEL
<tr><th rowspan=3>DIM<td>Burgun Anita<td>86703 ALIGN= ALIGN=TOP (par défaut) la légende du
<tr><td>Pouliquen Bruno<td>86161
<tr><td>Delamarre Denis<td>86162 tableau est en haut ALIGN=BOTTOM la
<tr><th rowspan=2>MEDIATHEQUE<td>Canal
Sabine<td>99.33.69.90 légende du tableau est en bas
<tr><td>Le Beux Pierre<td>99.33.69.90
</table>
BGCOLOR= BGCOLOR="#RRGGBB" Définit la
Résultat couleur de fond de la cellule. RR, GG et BB
sont les valeurs hexadécimales du Rouge(RR),
Vert(GG) et Bleu(BB).
9
06/11/2008
E-mail est un lien de messagerie. Les titres enseignant, Public et Objectifs représentent une liste
de définition
ISD renvoie à l’adresse URL : http://www.isd.rnu.tn Site de M. Mkadmi est un lien hypertexte qui renvoie à l’adresse http://amkadmi.neuf.fr.
La largeur du tableau est 75%, Pour la photo, la taille est de "84" de largeur et de "81" d’hauteur. Le tableau est de largeur 75%. La marge intérieure des cellules est de 6 et l’espacement entre les cellules est 6
Les formulaires
Formulaires et interactivité
récupérer des données à partir d'une page HTML
dans une boite e-mail (questionnaires, payement
électronique,…)
entrer en communication avec un système ou une
base de données sur le serveur (bases de données,
Structure, Balises… systèmes de recherche documentaires, moteurs de
recherche,…).
Deux objectifs
collecter des informations sur les utilisateurs
transmettre des données à traiter sur le serveur
10
06/11/2008
<form>Formulaire</form>
3 attributs :
ACTION : type d'action à déclencher (adresse é-mail Zone texte 1
par exemple dans laquelle on reçoit les données du
formulaire) <INPUT TYPE="text" NAME="nom" SIZE="n">
METHOD : définit la méthode de transfert des données Nom de famille :
(2 valeurs : GET et POST). Dans le cas de la réception
dans une boite de courrier électronique, la valeur
<input type="text" size="20" name="NFAMILLE">
POST est la seule valeur possible. <P>Nom de famille :
ENCTYPE : définit le format de codage des données si <input type="text" size="80" name="NFAMILLE">
le protocole du serveur n'a pas imposé le sien
(text/plain dans le cas des formulaires classiques).
<FORM ACTION=" mailto:amkadmi@gmail.com"

METHOD="POST" ENCTYPE="text/plain">
Liste déroulante
Zone texte 2 <SELECT NAME="nom">
<OPTION>élément1
<OPTION>élément n
</SELECT>
<TEXTAREA NAME="nom" ROWS= "i" COLS= "j" ></TEXTAREA>
Adresse : <textarea name="Adresse" rows="3" <b>Pays</b> :

cols="30"> </textarea> <SELECT NAME="pays">
<OPTION>France
<OPTION> Suisse
<OPTION>Italie
</SELECT>
11
06/11/2008
<INPUT TYPE="radio" NAME="nom" VALUE="valeur">

Sexe : masculin <INPUT TYPE="radio" NAME="sexe" VALUE="masculin">
féminin <INPUT TYPE="radio" NAME="sexe" VALUE="feminin"> Boutons (submit & reset)
<INPUT TYPE="submit" VALUE="valeur">
<INPUT TYPE="reset" VALUE="valeur">
Cases à cocher (choix multiple)
<INPUT TYPE="checkbox" NAME="nom" VALUE="valeur"> <INPUT TYPE="submit" VALUE="Envoyer">
Favoris :
<INPUT TYPE="reset" VALUE="Annuler">
cinéma<INPUT TYPE="checkbox" NAME="favoris" VALUE="cinema">
musique<INPUT TYPE=" checkbox " NAME="favoris" VALUE="musique">
voyage<INPUT TYPE=" checkbox " NAME="favoris" VALUE="voyage">
12
06/11/2008
Les FRAMES
Frames = cadres = fenêtres
C’est la division de votre écran en plusieurs zones pouvant

être chacune une source d ’information.
Quoi de plus simple que les frames? Mais aussi quoi de plus
délicat et dangereux (risque de plantage) que les frames?
Introduit en 1996 par Netscape
Les Cadres
présenter d’une manière simple des données complexes et
reliées en elles
<FRAMESET ROWS="30%,70%"> FRAMEBORDER="0" >

<FRAME name="" src="">
<FRAMESET…></FRAMESET> <FRAMESET COLS="30%,70%">
<FRAME name="" src="">
<Frameset> remplace la balise < Body> <FRAME name="" src="">
</FRAMESET>
<FRAMESET ROWS=“...”></FRAMESET>
définir des fenêtres horizontales </FRAMESET>
<FRAMESET COLS=“...”></FRAMESET>
définir des fenêtres verticales
<FRAMESET ROWS="10%,*,10%"></FRAMESET>
<FRAMESET COLS="10%,60%,*"></FRAMESET>
13
06/11/2008
Déclaration des frames

Pour l ’instant nos frames sont vides, on doit les
Les navigateurs ne supportant pas les Frames
paramétrer et leur donner à manger
balise :
<FRAME NAME=“nom”> : nom de la case
<NOFRAMES></NOFRAMES> <FRAME SCROLLING=“yes/no”> : présence ou pas de barre de
à ajouter avant le marqueur </FRAMESET> défilement
<FRAME SRC=“source”> : nom et/ou adresse du fichier source à
<NOFRAMES> afficher.
<BODY> <FRAME NORESIZE> : par défaut un frame est redimensionnable,
Votre navigateur ne supporte pas les Frames avec cette balise on fige le frame.
</BODY> <FRAME MARGINWIDTH=n> : détermine la marge entre le bord du
</NOFRAMES> frame et le contenu
</FRAMESET> <FRAME MARGINHEIGHT=n> : détermine l’espace entre les marges
</HTML> sup et inf du frame et celles des documents.
<HTML><BODY> <HTML><BODY> <HTML><BODY>

<table width="100%"><tr><td> <h1>Menu principal</h1> <img src="isd.jpg"
<H2><font color="blue">Institut <hr> height="300" width="320">
Supérieur de <ul><li><a href="accueil.html" <img src="isd1.jpg"
documentation</font></H2> target="C">Accueil</A> height="300" width="320">
Déclaration des frames <td><img src= "logisd.gif" <li><a href="cv.htm" </BODY></HTML>
height="100" width="120" target="C">Mon CV</a>
align="right"> <li><a href="presentation.htm" accueil.html
entete.html menu.html accueil.html </table>
</BODY></HTML>
target="C">Qui suis je ?</a>
</ul>
<HTML><BODY> </BODY></HTML>
<H4>A</H4> <HTML><BODY> <HTML><BODY> entete.html
<H1>B</H1> menu.html
<img src= "logisd.jpg"> </BODY></HTML> <H1>C</H1>
</BODY></HTML> <FRAMESET ROWS="20%,80%">
</BODY></HTML> <FRAME NAME="A" SRC="entete.html">
<FRAMESET COLS="30%,70%">
<FRAME NAME="B" SRC="menu.html">
<FRAME NAME="C" SRC="accueil.html">
<FRAMESET ROWS="30%,70%"> </FRAMESET>
<FRAME NAME="A" SRC="entete.htm"> </FRAMESET>
<FRAMESET COLS="30%,70%"> frameset.html
<FRAME NAME="B" SRC=" menu.htm">
<FRAME NAME="C« SRC="accueil.htm">
</FRAMESET>
</FRAMESET>
14
06/11/2008
Fonctionnement des frames Fonctionnement des frames

Établir des liens dans le fichier source pour afficher la cible dans
l’une des fenêtres. Paramètres de l’attribut TARGET
Syntaxe: _self : le document est à afficher dans le même
<A HREF=“nom.html” TARGET=“nom_frame_cible”>lien</A>
frame,
Supposons qu ’à partir d ’une ancre dans la fenêtre B on veut
établir un lien pour afficher le contenu du fichier A dans la _top : efface les frames présents et affiche la cible
fenêtre C
en plein écran.
_blank : force le navigateur à ouvrir une nouvelle
B.html fenêtre plein écran qui n’a pas de nom .
<HTML><BODY> _parent : affiche la cible dans le document parent
<H1><A HREF="A.html"
TARGET="C">B</H1> du document actuel.
</A>
</BODY></HTML>
CSS
15
06/11/2008
Le langage informatique CSS (Cascading Style Sheets : feuilles La syntaxe d'un style est toujours la même, elle précise la balise à
de style en cascade) est utilisé pour décrire la présentation d'un laquelle le style va s'appliquer, et les différents attributs du style.
document structuré écrit en HTML ou en XML, et c'est le World Les attributs sont enfermés entre deux accolades ou 2 guillemets
Wide Web Consortium (W3C) qui en a la direction. (précédés de Style=) selon les cas, et chacun des attributs est
séparé par un point virgule. On donne la valeur de l'attribut par la
syntaxe suivante "nom de l'attribut:valeur de l'attribut".
balise { propriété de style: valeur; propriété de style: valeur
}
L'un des objectifs majeurs de CSS est de proposer une stylisation
indépendante de la structure du document. HTML, par exemple,
ne décrit que l'architecture interne, tandis que CSS décrit tous Pour faire le lien entre un fichier html et une feuille de style,
les aspects de la présentation. Cette séparation fournit un c’est dans la partie entête du document HTML qu’on ajoute
certain nombre de bénéfices, permettant d'améliorer cette ligne
l'accessibilité, de changer plus facilement de structure et de <LINK href="fichier.css" type=text/css rel=stylesheet>
présentation, et de réduire la complexité de l'architecture d'un
document.
Séparation du contenu et de la mise en forme;
CSS est une norme du W3C

Cohésion de la présentation tout au long du site;
BODY {
color : blue;background-color:yellow; Modifier l'aspect d'une page ou d'un site sans en modifier le contenu.;
}
H1 { Une façon d'écriture concise et nette par rapport au Html qui devient
vite fouillis.
color:red;
text-transform:capitalize; Réduire le temps de chargement des pages.
font-weight:bold;font-size:large;
} Palier certaines insuffisances du langage Html (contrôle des polices,
H2 { color:#ff1111; text-transform:captalize } contrôle de la distance entre les lignes, contrôle des marges et des
indentations et ainsi augmenter la créativité des écrivains du Web.
16
06/11/2008
< xx-small | x-
Nom Description Définition Exemple Remarque
small | small |
P { font-size: 12pt; }
medium | large |
gill et helvetic BLOCKQUOTE {font-size:
x-large | xx-
sont les noms des font-size Taille de la police larger } défaut : medium
large> | < larger
polices, sans-serif EM { font-size:150%}
BODY {font-family: | smaller>
nom et famille de [[<nom> | est la famille. EM { font-size:1.5em}
font-family gill, helvetica, sans- |<taille> |
la police <famille>],*] Si un nom <pourcentage%>
serif }
comprend des
espaces il doit P { font: 12pt/14pt sans-
être coté. serif }
[ <font-style> ||
Permet de P { font: 80% sans-serif }
<font-variant> ||
style normal, regrouper les P { font: x-large/110% défaut : dépend
normal | italic | H1, H2, H3{font- <font-weight> ]?
font-style italique et défaut : normal différentes "new century schoolbook", de la
oblique style: italic } font <font-size>
oblique propriétés de serif } configuration du
[ / <line-height>
polices en une P { font: bold italic large navigateur
style petites ]?
H3 {font-variant: ligne Palatino, serif }
font-variant polices ou normal | small-caps défaut : normal <font-family>
small-caps } P { font: normal small-
normal
caps 120%/120% fantasy }
défaut : normal
normal | bold | P { color: red }
Souvent des noms
bolder | lighter | 100 color couleur d'un texte <couleur> EM{color:rgb(255,0,0)} défaut : black
Epaisseur de la EM {font- logiques
font-weight | 200 | 300 | 400 | EM { color: #f00 }
police weight:bolder } remplacent les
500 | 600 | 700 | 800
nombres donnés background- couleur du fond <color> | H1 { background-color: défaut :
| 900
ici color d'écran transparent #F00 } transparent
image du fond BODY { background- définit la distance

background-image <url> | none défaut : none normal | H1 { word-spacing:
d'écran image: url(ungi.gif)} word-spacing d'espacement défaut : normal
<longueur> 0.4em}
BODY { repeat-x permet entre mots
façon de répéter repeat | repeat-x | background-image: de répéter de définit la distance
background- EM { letter-spacing:
l'image du fond de repeat-y | no- url(ungi.gif); façon letter-spacing d'espacement normal | <length> défaut : normal
repeat 0.1em }
l'écran repeat background-repeat: horizontale entre caractères
repeat-y; } défaut : repeat permet de
BODY { background: spécifier si le texte none | [ underline A:link, A:visited,
permet de
red text-decoration est souligné, || overline || line- A:active { text- défaut : none
spécifier si l'image
background- url(pendant.gif); surligné, barré ou through || blink ] decoration: none }
reste fixe avec les scroll | fixed défaut : scroll
attachment background-repeat: clignotant
déplacements
repeat-y; baseline | sub |
d'écran spécifie
fixed;} super | top | text-
l'alignement défaut :
spécifie la position [<pourcentage> | BODY { background: top | middle | EM {vertical-align:
vertical-align vertical du texte baseline
de l'image de fond <longueur>]{1,2} | url(http://www.ungi bottom | text- sub}
background- par rapport au
par rapport au coin [top | center | .com/banner.jpg) défaut : 0%,0% bottom |
position reste du texte
supérieur gauche bottom] || [left | right top } <pourcentage>
de la fenêtre center | right] permet de forcer
les caractères en
<background-color>
majuscule
|| <background-
permet de (uppercase) ou en capitalize |
image> || H2 { text-transform:
regrouper les text-transform minuscule uppercase | défaut : none
<background- P { background: uppercase }
différentes (lowercase); lowercase | none
background repeat> || url(hess.gif) green défaut : aucun
propriétés de fond capitalize force en
<background- 50% repeat fixed }
d'écran en une majuscule le
17
06/11/2008
permet de placer défaut : auto

défaut : dépend
le texte à gauche, BODY { margin: Les valeurs
left | right | de la permet de
text-align à droite, de le P { text-align:justify} 1em 2em 3em } /* manquantes sont
center | justify configuration du regrouper les [ <longueur> |
centrer ou de le top=1em, celles définies sur
navigateur margin différentes <pourcentage> |
justifier. right=2em, le coté opposé
valeur de propriétés de auto ]{1,4}
<longueur> | bottom=3em, Une seule valeur
text-indent l'indentation avant P { text-indent: 3em } défaut : 0 marge en une ligne
<pourcentage> left=2em */ est applicable à
la première ligne tous
normal | <nombre>
valeur de <longueur> | H1 { padding-top:
valeur entre deux | DIV { line-height: 1.2; padding-top défaut : 0
line-height défaut : normal remplissage haut <pourcentage> 3px }
lignes adjacentes <longueur> |<pour font-size: 10pt }
centage> valeur de <longueur> | H1 { padding-right:
padding-right défaut : 0
remplissage droit <pourcentage> 3px }
<longueur> |
valeur de la marge H1 { margin-top: 3px valeur de <longueur> | H1 { padding-
margin-top <pourcentage> | défaut : auto padding-bottom défaut : 0
haute } remplissage bas <pourcentage> bottom: 3px }
auto
<longueur> | valeur de
valeur de la marge H1 { margin-rigth: <longueur> | H1 { padding-left:
margin-right <pourcentage> | défaut : auto padding-left remplissage défaut : 0
droite 3px } <pourcentage> 3px }
auto gauche
<longueur> | défaut : 0
valeur de la marge H1 { margin-bottom: permet de
margin-bottom <pourcentage> | défaut : auto top, right, bottom
basse 3px } regrouper les
auto [<longueur> | et left
différentes H1 { padding: 1em
<longueur> | padding <pourcentage>]{1, Les valeurs
valeur de la marge H1 { margin-left: 3px propriétés de 2em }
margin-left <pourcentage> | défaut : auto 4} manquantes sont
gauche } padding en une
auto celles définies sur
ligne
le coté opposé
donne l'épaisseur thin | medium | H1 { border-top-

border-top-width défaut : medium
du bord haut thick | <longueur> width: 0.5em } regroupe toutes
<border-top- défaut :aucune
les propriétés des
width> || <border- H1 { border-top: les valeurs omises
border-right- donne l'épaisseur thin | medium | H1 { border-rigth- border-top bordures hautes :
défaut : medium style> || thick } sont égales aux
width du bord droit thick | <longueur> width: 0.5em } épaisseur, style et
<couleur> valeurs par défaut
couleur
H1 { border-
border-bottom- donne l'épaisseur thin | medium |
bottom- défaut : medium
width du bord droit thick | <longueur>
width: 0.5em }
donne l'épaisseur thin | medium | H1 { border-left- regroupe toutes

border-left-width défaut : medium <border-top- défaut :aucune
du bord droit thick | <longueur> width: 0.5em } les propriétés des
width> || <border- H1 { border-right: les valeurs omises
border-right bordures droites:
style> || 1em } sont égales aux
épaisseur, style et
défaut : medium <couleur> valeurs par défaut
couleur
permet de Les valeurs
regrouper les manquantes sont
[thin | medium |
différentes H1 { border-width: celles définies sur
border-width thick |
propriétés de thin } le coté opposé
<longueur>]{1,4}
border-width en Une seule valeur regroupe toutes
<border-top- défaut :aucune
une ligne est applicable à les propriétés des H1 { border-
width> || <border- les valeurs omises
tous border-bottom bordures basses: bottom: thick solid
style> || sont égales aux
épaisseur, style et red }
couleur
donne la couleur H1 { border-color:
border-color <couleur>{1,4} défaut : black
des bordures red }
18
06/11/2008
permet à un
regroupe toutes
<border-top- défaut :aucune élément d'être none | left |
les propriétés des
width> || <border- H1 { border-left: les valeurs omises
clear H1 { clear: left } défaut : none
border-left bordures gauches: cadré sur le côté right | both
style> || thick solid red } sont égales aux spécifié
épaisseur, style et
couleur spécifie où
block | inline | P { display: block
display l'élément est défaut : none
défaut list-item | none }
regroupe toutes <border-width> || affiché
P { border: solid :aucune toutes les
border les propriétés des <border-style> || type d'espace normal | pre | PRE { white-
red } bordures sont white-space défaut : normal
bordures <color> blanc nowrap space: pre }
identiques
permet de donner disc | circle |
<longueur> |
la largeur d'un IMG.icon { width: définit le type square | decimal
width <pourcentage> | défaut : auto OL { list-style-
élément texte ou 100px } de | lower-roman |
auto type: lower-
image list-style-type numérotation, upper-roman | défaut : disc
roman } /* i ii
permet de donner de bullet dans lower-alpha |
iii iv v etc. */
height
la longueur d'un
<longueur> | auto
IMG.icon { height:
défaut : auto
les listes upper-alpha |
élément texte ou 100px } none
image
permet de
IMG.icon { remplacer les
permet de cadrer
float: left;
UL { list-style-
l'élément là où il types de
float left | right | none margin défaut : none list-style-image <url> | none image: défaut : none
apparaît ou à numérotation de
-left: 0; url(ungi.gif) }
gauche ou à droite list-style-type
}
par une image
Tp sur les feuilles CSS

spécifie si les
Soit le fichier HTML suivant :
bullets ou
<html>
numérotation ou UL { list-style-
list-style- </head>
images sont à inside | outside position: outsid défaut : outside
position <body bgcolor="gray" text="blue" link="red">
l'intérieur ou à e}
l'extérieur du <h1 align="left"><font color="black" face="verdana" size="5">
texte. Les feuilles de style CSS</h1>
<h2 align="center"><font color="white">Syntaxe</h2>
<table width="75%" bgcolor="yellow">
<tr><td>Propriétés de style<td>exemple
(disc | circle | <tr><td>color, font-family, font-style, font-size...<td>body {background-
square | color:yellow}
decimal | lower- </table>
permet de </html>
roman | upper-
regrouper les UL { list-style:
roman | lower-
list-style différentes upper-roman défaut : aucune A) créez une feuille de style css permettant de mettre en page ce
alpha | upper-
catégories de inside } document HTML, telque c'est décrit dans le contenu du document
alpha |
list-style
none) ||<url> |
none || inside | B) réécrire le document HTML sans mise en page
outside
19
06/11/2008
Corrigé
Style.css
body {background-color:gray;color:blue} Références bibliographiques
A {color:red}
h1 {text-align:left;color:black;font-family:verdana;font-size:15px}
h2 {text-align:center;color:white}
table {width:75%;background-color:yellow}
_______________________________________
Style.html (sans mise en page) http://www.w3.org
<html>
http://www.w3.org/html/
<head><link href="style.css" type="text/css" rel="stylesheet"></head>
<body> http://www.w3.org/Style/CSS/
<h1>
Les feuilles de style CSS</h1>
<h2>Syntaxe</h2>
<table>
<tr><td>Propriétés de style<td>exemple
<tr><td>color, font-family, font-style, font-size...<td>body {background-
color:yellow}
</table>
</html>
20

HTML Mkadmi

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 Mkadmi

Transféré par

Droits d'auteur :

Formats disponibles

06/11/2008

Un document html "standard" doit

A. MKADMI, ISD, Université de la Manouba 2

<HTML> <HTML/> : Commandes de début et de <HTML>

A. MKADMI, ISD, Université de la Manouba 3 A. MKADMI, ISD, Université de la Manouba 4

TITLE HTML autorise les auteurs à spécifier des métadonnées (des

A. MKADMI, ISD, Université de la Manouba 5

<BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur" ALINK="couleur">

A. MKADMI, ISD, Université de la Manouba 9 A. MKADMI, ISD, Université de la Manouba 10

L’élément BODY : les couleurs

<EMBED SRC="son.wav" AUTOSTART="true" LOOP="-1">

AUTOSTART="True or False" : permet de déclarer le lancement du

A. MKADMI, ISD, Université de la Manouba 12

Le texte peut avoir plusieurs polices et attributs.

Option Style B (gras), I (italique), U (souligné), S (barré)...

<FONT> Ce marqueur permet de changer la fonte, et aussi d'autres paramètres,

A. MKADMI, ISD, Université de la Manouba 14

Insérer une image

Le texte peut être positionné à gauche, au SRC

centre, ou à droite de l'écran.

Marqueur CENTER , RIGHT ou LEFT pour positionner l'image horizontalement.

Bienvenue sur ma Page.

WIDTH="valeur" pour modifier la largeur

A. MKADMI, ISD, Université de la Manouba 15 A. MKADMI, ISD, Université de la Manouba 16

Le texte se saisit comme sur un traitement de texte le passage à la ligne

A. MKADMI, ISD, Université de la Manouba 17 A. MKADMI, ISD, Université de la Manouba

A. MKADMI, ISD, Université de la Manouba 19 A. MKADMI, ISD, Université de la Manouba 20

Liens internes, externes, de Lien vers une page en local

Lien vers un site extérieur

Exemple : Pour aller sur le site Netscape

A. MKADMI, ISD, Université de la Manouba 22

Lien vers un e-mail

A. MKADMI, ISD, Université de la Manouba 23 A. MKADMI, ISD, Université de la Manouba 24

Modifier l'apparence des liens

Il est possible de modifier l'apparence des liens de façon à ne pas

Dans cet exemple les liens apparaissent en noir non souligné, au

A. MKADMI, ISD, Université de la Manouba 25

Il est possible de créer des listes d'objets numérotées ou non

A. MKADMI, ISD, Université de la Manouba 27

A. MKADMI, ISD, Université de la Manouba 29

C'est la seule façon de gérer convenablement la présentation.

<TABLE BORDER COLS=2 WIDTH="100%" >

A. MKADMI, ISD, Université de la Manouba 31 A. MKADMI, ISD, Université de la Manouba 32

Mise en forme d'un tableau

<table bgcolor="#008080"> : mettre un fond de couleur

A. MKADMI, ISD, Université de la Manouba 33

<table border=« 2 »>

A. MKADMI, ISD, Université de la Manouba 35

A. MKADMI, ISD, Université de la Manouba 40

<FORM ACTION=" mailto:amkadmi@gmail.com"

A. MKADMI, ISD, Université de la Manouba 41 A. MKADMI, ISD, Université de la Manouba 42

Adresse : <textarea name="Adresse" rows="3" <b>Pays</b> :

A. MKADMI, ISD, Université de la Manouba 43 A. MKADMI, ISD, Université de la Manouba 44

<INPUT TYPE="radio" NAME="nom" VALUE="valeur">

A. MKADMI, ISD, Université de la Manouba 45 A. MKADMI, ISD, Université de la Manouba 46

A. MKADMI, ISD, Université de la Manouba 47 A. MKADMI, ISD, Université de la Manouba 48

C’est la division de votre écran en plusieurs zones pouvant

A. MKADMI, ISD, Université de la Manouba 50

<FRAMESET ROWS="30%,70%"> FRAMEBORDER="0" >

A. MKADMI, ISD, Université de la Manouba 51 A. MKADMI, ISD, Université de la Manouba 52

Déclaration des frames

A. MKADMI, ISD, Université de la Manouba 53 A. MKADMI, ISD, Université de la Manouba 54

<HTML><BODY> <HTML><BODY> <HTML><BODY>

A. MKADMI, ISD, Université de la Manouba 55