Avant propos

• Première chose importante à savoir sur HTML est

la signification de ces quatre initiales :
• Hyper Text MarkUp Language
• HTML est d'un langage de description (et non pas
d'un langage de programmation) qui va nous
permettre de décrire l'aspect d'un document, d'y
inclure des informations variées (textes, images,
sons, animations etc.) et d'établir des relations
cohérentes entre ces informations grâce aux liens
hypertextes.
1
Comment fonctionnent les sites web ?
• Pour consultez un site web, vous lancez un
programme appelé le navigateur web en
cliquant sur l'une des icônes représentées à la
figure suivante.

2
 HTML et CSS : deux langages pour
créer un site web
• HTML (HyperText Markup Language) : il a fait son
apparition dès 1991 lors du lancement du Web. Son
rôle est de gérer et organiser le contenu. C'est donc en
HTML que vous écrirez ce qui doit être affiché sur la
page : du texte, des liens, des images… Vous direz par
exemple : « Ceci est mon titre, ceci est mon menu,
voici le texte principal de la page, voici une image à
afficher, etc. ».
• CSS (Cascading Style Sheets, aussi appelées Feuilles de
style) : le rôle du CSS est de gérer l'apparence de la
page web (agencement, positionnement, décoration,
couleurs, taille du texte…). Ce langage est venu
compléter le HTML en 1996.
3
 HTML et CSS : deux langages pour
créer un site web
• Pour créer un site web, on doit donner des instructions
à l'ordinateur. Il ne suffit pas simplement de taper le
texte qui devra figurer dans le site (comme on le ferait
dans un traitement de texte Word, par exemple), il faut
aussi indiquer où placer ce texte, insérer des images,
faire des liens entre les pages, etc.
• Les rôles de HTML et CSS
• Pour expliquer à l'ordinateur ce que vous voulez faire, il
va falloir utiliser un langage qu'il comprend. Et c'est là
que les choses se corsent, parce qu'il va falloir
apprendre deux langages !

4
HTML et CSS : deux langages pour
créer un site web

5
 L'éditeur de texte

• Il existe effectivement de nombreux logiciels

dédiés à la création de sites web. Mais, je vous
rassure, vous n'aurez pas à débourser un seul
centime. Pourquoi aller chercher un logiciel
payant et compliqué, alors que vous avez déjà
tout ce qu'il faut chez vous ?
• on peut tout à fait créer un site web uniquement
avec Bloc-Notes, le logiciel d'édition de texte
intégré par défaut à Windows.

6
 L'éditeur de texte
• Il existe une grande quantité d'éditeurs de texte, on ne
pourrai pas vous les présenter tous. Néanmoins, on
vous invite à vous pencher sur Notepad++, l'un des plus
utilisés parmi ceux disponibles pour Windows. Ce
logiciel est simple, en français et gratuit.
• faire la manipulation suivante : allez dans le
menu Langage > H > HTML. Cela permettra au logiciel
de savoir que l'on va taper du HTML.
Lorsque vous utiliserez le logiciel, il colorera votre code
(figure suivante), ce qui vous permettra de vous
repérer plus facilement.

7
L'éditeur de texte

8
 En résumé
• Pour créer des sites web, on utilise deux langages informatiques :
– HTML : permet d'écrire et organiser le contenu de la page
(paragraphes, titres…) ;
– CSS : permet de mettre en forme la page (couleur, taille…).
• Il y a eu plusieurs versions des langages HTML et CSS. Les dernières
versions sont HTML5 et CSS3.
• Le navigateur web est un programme qui permet d'afficher des
sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit
afficher.
• Il existe de nombreux navigateurs web différents : Google Chrome,
Mozilla Firefox, Internet Explorer, Safari, Opera… Chacun affiche un
site web de manière légèrement différente des autres navigateurs.
• Dans ce cours, nous allons apprendre à utiliser les langages HTML et
CSS. Nous travaillerons dans un programme appelé « éditeur de
texte » (Notepad++, jEdit, vim…).

9
 Balises HTML
• La description d'un document HTML passe par
l'utilisation de BALISES (ou "TAGS" en
anglais). Une balise est délimitée par les
signes "<" et ">" entre lesquels figure le nom
de la balise. Par exemple, la balise de retour à
la ligne est <BR> La plupart du temps, on
utilise une balise de début et une balise de fin,
qui définissent les propriétés de l'intervalle

10
 Balises HTML
• <B>écriture en gras</B>
• Tag <B> Début d’écriture en BOLD (gras)
• Tag </B> Fin d’écriture en BOLD (gras)
• Résultat dans le navigateur
• écriture en gras

11
Allure d’un fichier HTML ou squelette
d’un fichier HTML
• <!-- commentaire -->
• <!DOCTYPE>
• <HTML>
• <HEAD>
• </HEAD>
• <BODY>
• </BODY>
• </HTML>

12
 DocType
• DocType est une directive SGML permettant
d'identifier un document comme étant de type
HTML Cette commande est facultative. La plupart
des navigateurs n'en ont pas besoin même s'il est
de bon ton pour un éditeur HTML de placer en
tête de document une commande de type.
• Exemple :
• Avec Netscape 3.0 GOLD
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
3.2//EN">
13
 HTML
• C’est le premier marqueur ou tag que l’on trouve
dans un document HTML. Tout le document qui
sera écrit par la suite (texte ou marqueur) sera
compris entre le tag
• <HTML> et </HTML>.
• Exemple :
• <HTML>
• document à écrire
• </HTML>.

14
 En-tête <HEAD>
• L'en-tête du document est réservée aux méta-
informations (les informations relatives au
document) comme son titre. Ces méta-
informations doivent être placées entre les
tags <HEAD> de début et </HEAD> de fin.
Même si l'en-tête est optionnelle, il est
important de l'inclure dans un document pour
éviter que le logiciel serveur n'ait à balayer
tout le document pour y retrouver
l'information recherchée.
15
 Titre <TITLE>
• <TITLE> Titre </TITLE>
• Chaque document HTML, pour être correct, doit
disposer d'un titre. Le titre apparaît le plus
souvent dans la barre de titre du navigateur Web.
Son but est de pouvoir identifier le document
dans un ensemble plus large comme un index
WAIS par exemple. Le titre d'un document HTML
sert aussi lorsqu'un navigateur World Wide Web
dispose d'une fonction “hotlist” ou “bookmark”
pour fournir un accès rapide à vos documents
favoris.
16
 Corps du document <BODY>
• Le corps du document, ce qui sera effectivement
affiché par le navigateur Web, est balisé par les
commandes :
• <BODY> et </BODY>
• Exemple :
• <BODY>
• <P>
• Ceci est le premier essai
• </P>
• </BODY>
17
 Exemple
<HTML>
<HEAD>
<TITLE>essai n°1</TITLE>
</HEAD>
<BODY>
<P>
Ceci est le premier essai
</P>
</BODY>
</HTML>

18
 Tailles de polices
• Il existe 7 tailles de polices. La commande est
<FONT SIZE = n> … </FONT> ou n prend les valeurs
de 1 à 7.
• 1, petits caractères
• 7, gros caractères.
• La police par défaut possède la taille 3.
• La taille de la police peut être fixée dans l'en-tête
du document par la commande :
• <BASEFONT SIZE = n> ou n prend les valeurs 1 à 7.

19
Exemple

20
Les Entêtes <Hx> avec x : 1 à 6
Ces entêtes servent à diviser le texte en section de la
même manière qu’un livre. Le langage HTML reconnaît
six niveaux de d’en-tête numérotés de 1 à 6. Le niveau
le plus élevé est le 1, le plus petit est le 6

21
 Séparateurs
• Contrairement à tous les autres systèmes de traitement de
texte, le retour de charriot n'a aucune valeur en HTML.
• C'est le navigateur Web lui même qui définira le passage à
la ligne en fonction de facteurs comme la taille des
• polices de caractères, la largeur de la fenêtre de
visualisation etc.
• De même, plusieurs espaces dans un document HTML
seront ramenés à un seul.
• <P> Cette commande </P> (fin de paragraphe) termine un
paragraphe et insère une ligne vide après le
• paragraphe.

22
 Séparateurs
• <BR> Cette commande impose la coupure
d'une ligne de texte en rejetant ce qui suit à la
ligne suivante.
• <NOBR>…</NOBR>Cette commande permet
de mettre du texte sans retour à la ligne.
• <WBR> Cette commande permet de forcer un
retour à la ligne dans un texte encadré par
<NOBR>

23
 Séparateurs
• <HR> pour une ligne horizontale de séparation :
• WIDTH fait varier la largeur de la ligne en % soit en pixel (valeur par
défaut 100%)
• SIZE fait varier l'épaisseur de la ligne en pixel (valeur par défaut 1)
• ALIGN fait un alignement de la ligne suivant les 3 possibilités :
• CENTER par rapport au centre de la fenêtre,
• LEFT par rapport à la gauche de la fenêtre,
• RIGHT par rapport à la droite de la fenêtre.
• NOSHADE Lorsqu'il est présent dans le marqueur <HR> l'effet est
une ligne pleine sans ombrage.
• Le paramètre ALIGN a un effet que lorsque la longueur de la ligne
est inférieure à 100 %.

24
Exemple

25
 les codes de quelques couleurs
basiques.
• Bleu #0000FF
• Vert #00FF00
• Blanc #FFFFFF
• Violet #8000FF
• Rouge #FF0000
• Jaune #FFFF00
• Gris clair #C0C0C0
• Noir #000000
• <FONT COLOR="#0000FF">en bleu</FONT>

26
 Exemple
• <HTML>
• <HEAD><TITLE></TITLE></HEAD>
• <BODY>texte simple<BR>
• <B>texte en gras</B><BR>
• <STRONG>texte en gras</STRONG><BR>
• <I>texte en italique</I><BR>
• <EM>texte en italique</EM><BR>
• <B><I>texte en gras et en italique</I></B><BR>
• <FONT SIZE=5>texte</FONT>
• <FONT COLOR="#0000FF">en bleu</FONT>
• <!--C'est fini-->
• </BODY>
• </HTML>

27
Résultat

28
 Balises de texte rares
• Le tag <BLOCKQUOTE>...</BLOCKQUOTE>
introduit une citation.
• Son utilité serait douteuse si le texte de cette
citation n'était introduit avec un léger retrait à
gauche et à droite.
• La balise <PRE>...</PRE> affiche un texte dit
préformaté. Le browser prend ainsi en compte
tous les espaces et sauts de ligne définis à
l'écran.

29
TEXTE PRÉ-FORMATÉ <PRE> ... </PRE>
• <HTML>
• <HEAD>
• <TITLE>texte préformaté</TITLE>
• </HEAD>
• <BODY>
• enseignements :<BR><BR>
• <PRE>
• MATIERES PROFESSEUR NB d'heures
• ----------------------------------------------------------------------------------------
• Visual Basic B. Mahric 40
• Réseaux E. Brassart 32
• C++ L.Delahoche 32
• </PRE>
• </BODY>
• </HTML>

30
 Balises de texte rares
• Le tag <ADDRESS>...</ADDRESS> pour
indiquer une adresse (généralement en fin de
document).
• La balise <U>...</U> souligne le texte.
• <BLINK>...</BLINK>. permetd'afficher un texte
clignotant(Netscape)
• Les tags <SUB>...</SUB> et <SUP>...</SUP>
placent le texte respectivement en indice et
en exposant.
31
 Balises de texte rares
• Pour aligner du texte, on a utilisé l'attribut ALIGN ou le
tag <CENTER>. Il existe une balise permettant
• d'aligner différents éléments. c'est le tag :
• <DIV align=left>...</DIV>
• <DIV align=center>...</DIV>
• <DIV align=right>...</DIV>
• Cette alternative pour l'alignement horizontal du texte
est parfois bien utile pour définir l'alignement d'une
• portion de texte.

32
 Les Listes
• HTML définit 5 types de listes :
• Les listes numérotées ou ordonnées (ou Ordered
(numbered) lists),
• Les listes non numérotées dites listes à puces
dont les entées sont signalées par un signe
• typographique,
• Les listes de glossaire,
• Les listes de menu,
• Les listes de répertoire.

33
 Listes numérotées ou Ordered
(numbered) lists
<HTML>
<HEAD>
<TITLE>Liste non
ordonnée</TITLE>
</HEAD>
<BODY>
<H1>
<ol>
<lh>Voitures allemandes
<li>BMW
<li>MERCEDES
<li>PORSCHE
</ol>
</H1>
</BODY>
34
</HTML>
 Les options suivantes sont possibles :
• TYPE=1 : pour une liste numérotée 1,2,3...
• TYPE=A : pour un repérage type A,B,C...
• TYPE=a : pour un repérage type a,b,c...
• TYPE=I : pour une liste numérotée I,II,III,IV...
• TYPE=i : pour une liste numérotée i,ii,iii,iv...
• START=n fait débuter le repérage (chiffres ou
lettres) au rang numéro n.
• Remarque : TYPE=1 est utilisé par défaut.

35
 Listes non numérotées ou Unordered
lists
<HTML>
<HEAD>
<TITLE>Liste non ordonnée</TITLE>
</HEAD>
<BODY>
<H1>
<ul>
<lh>Voiture allemandes
<li>BMW
<li>MERCEDES
<li>PORSCHE
</ul>
</H1>
</BODY>
</HTML>
36
 Listes descriptives ou Definition lists
<DL> <DT> <DD>
• L'environnement <DL> délimite une zone de
liste de définition.
• La commande <DT> introduit un nouveau
terme de définition. C'est en général un
élément court.
• La commande "dd" introduit une description
du terme de définition. Le résultat à l'écran
est un décalage du texte vers la droite.

37
 Exemple
<HTML>
<HEAD>
<TITLE>Liste descriptive</TITLE>
</HEAD>
<BODY>
<H2>
<DL>
<lh>Voitures allemandes
<DT>BMW
<DD>série 3 5 7 8
<DT>MERCEDES
<DD> classe C E
<DT>PORSCHE
<DD> 956 et 911
</DL>
</H2>
</BODY>
</HTML>

38
 Menus
<HTML>
<HEAD>
<TITLE>Liste menu</TITLE>
</HEAD>
<BODY>
<H2>
<MENU>
<lh>Voitures allemandes
<LI>BMW
<LI>MERCEDES
<LI>PORSCHE
</MENU>
</H2>
</BODY>
</HTML>

39
 Directory List
<HTML>
<HEAD>
<TITLE>Liste dir</TITLE>
</HEAD>
<BODY>
<H2>
<DIR>
<lh>Voitures allemandes
<LI>BMW
<LI>MERCEDES
<LI>PORSCHE
</DIR>
</H2>
</BODY>
</HTML>

40
 Deux types de liste peuvent
s’emboîter
<HTML>
<HEAD>
<TITLE>html\nv_html</TITLE>
</HEAD>
<OL>
<LI> BMW
<UL>
<LI> série 3
<LI> série 5
</UL>
<LI> MERCEDES
<DL>
<DT>classe C
<DD>180, 200, 220.
<DT> classe E
<DD>250, 300
</DL>
<LI> FIN
</OL>
</BODY>
</HTML> 41
 CENTRAGE D'UN TEXTE
<CENTER>…</CENTER>
<HTML>
<HEAD>
<TITLE>Centrage de texte</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>I.U.T. d'Amiens</H1><BR>
<H3>Promotion 1998/1999</H3><BR>
Cours HTML
</CENTER>
</BODY>
</HTML>

42
 Les couleurs utilisées dans BODY
• BGCOLOR=c pour le fond du document
• TEXT=c pour la couleur des caractères
• LINK=c pour la couleur des prises
d'hypertextes non utilisées
• VLINK=c pour la couleur des prises
d'hypertextes utilisées
• ALINK=c pour la couleur des prises
d'hypertextes à l'instant de la sélection
43
 Exemple
<HTML>
<HEAD>
<TITLE> Essai de couleurs </TITLE>
</HEAD>
<BODY BGCOLOR=#80FFFF TEXT=#000080
LINK=#FF0000>
La couleur du fond est bleu clair, la couleur du texte est
bleu. La prise d'hypertexte est rouge.
Retour : cliquer <A HREF="htmldoc.htm#para4"> ici </A>
</BODY>
</HTML>

44
 BACKGROUND="nom_image.gif"
<HTML>
<HEAD>
<TITLE> Essai de couleurs </TITLE>
</HEAD>
<BODY BACKGROUND="image.jpg" TEXT=#000080
LINK=#FF0000>
L’image du fond s’appelle image.jpg, la couleur du
texte est bleu. La prise d'hypertexte est rouge.
</BODY>
</HTML>
45
 Les Liens
Il est facile de reconnaître les liens sur
une page : ils sont écrits d'une façon
différente (par défaut, en bleu et
soulignés) et un curseur en forme de
main apparaît lorsqu'on pointe dessus.

46
 Les Liens
• Pour faire un lien, la balise que nous allons
utiliser est très simple à retenir : <a>. Il faut
cependant lui ajouter un attribut, href, pour
indiquer vers quelle page le lien doit conduire.
• Les Liens Vous conduise vers:
• · vers un autre endroit du document.
• · vers un autre fichier Html situé sur votre
ordinateur.
• · vers un autre ordinateur situé sur le Web.
<A HREF="URL ou adresse">...</A>

47
 Les Liens: Exemple
Dans l'éditeur de texte,
nous allons créer deux fichiers Htlm.
· le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>
· le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>
- On sauve ces deux fichiers dans un même répertoire.

48
 Liens externes vers d'autres
protocoles/services Internet
• Lien vers une autre Page web
• <A HREF=http://google.com>Allez à la page
Google</A>
• Lien pour envoyer un E-mail
• <A HREF="mailto:brassart@yahoo.fr">Envoyez
moi un message</A>
• Lien pour télécharger un Fichier
• <a href="monfichier.zip">Télécharger le fichier</a>

49
 Les Ancres
• Une ancre est une sorte de point de repère
que vous pouvez mettre dans vos pages HTML
lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien
amenant plus bas dans la même page pour
que le visiteur puisse sauter directement à la
partie qui l'intéresse.

50
 Les Ancres
• <h2 id="mon_ancre">Titre</h2>
• <a href="#mon_ancre">Aller vers l'ancre</a>
• Normalement, si vous cliquez sur le lien, cela
vous amènera plus bas dans la même page (à
condition que la page comporte suffisamment
de texte pour que les barres de défilement se
déplacent automatiquement).

51
 Les images
• Il existe plusieurs formats d'images adaptées
au Web :
– JPEG : pour les photos ;
– PNG : pour toutes les autres illustrations ;
– GIF : similaire au PNG, plus limité en nombre de
couleurs mais qui peut être animé.
• On insère une image avec la balise <img />.
Elle doit obligatoirement comporter au moins
ces deux attributs : src (nom de l'image)
et alt (courte description de l'image).
52
 Les images
• Des images peuvent être insérées dans le
texte d'un document HTML, et elles sont au
format BNP, GIF ou JPG.
• Elles peuvent servir de prises d'hypertextes :
• soit toute l'image réagit à un clic.
• soit l'image réagit en fonction de la zone où
le clic s'est produit (on parle dans ce cas là
d'IMAGE CLIQUABLE OU REACTIVE.)

53
 Les images
• Les commandes sont les suivantes :
• <IMG SRC="nom_image.gif">
• <IMG SRC="URL">
• <A HREF="#etiquette"><IMG SRC="nom_image.gif"></A>

54
 Les images
• Pour ces commandes les options suivantes sont
possibles :
• ALIGN=left/right/top/texttop/middle/absmiddle/bas
eline/bottom/absbottom
• WIDTH=n ou n% HEIGHT=m ou m% redimensionnent
l'image : n et m valeurs de la largeur et de la hauteur
de l'image en pixels ou n% et m% valeurs relatives par
rapport à la taille normale de l'image.
• VSPACE=n HSPACE=m éloignent le texte de l'image de n
pixels au-dessus et au-dessous de l'image et de m
pixels à gauche et à droite de l'image.
• BORDER=n trace un cadre autour de l'image avec un
trait de n pixels de large.
55
 TABLEAUX <TABLE> ... </TABLE>
• Pour cette commande les options suivantes sont possibles :
• BORDER : trace un cadre en trait fin
• BORDER=n : trace un cadre en trait de n pixels d'épaisseur
• CELLSPACING=n : espacement de n pixels entre les cellules.
• CELLPADDING=n : espacement autour de l'écriture dans les
cellules.
• WIDTH=n ou n% : largeur en pixels ou largeur relative du
tableau.
• Remarque
• cellspacing et cellpadding ont priorité sur width.

56
 TABLEAUX
• <CAPTION> nomtableau</CAPTION> pour
indiquer le nom du tableau.
• Pour cette commande l'option suivante est
possible :
• ALIGN=top/bottom : place le nom du tableau
au-dessus/au-dessous du tableau.

57
 TABLEAUX
• <TR> ... </TR> encadre une ligne du tableau.
• Pour cette commande les options suivantes sont
possibles :
• ALIGN=left/right/center : position horizontale
(gauche/droite/centre) du texte dans les cellules de
• la ligne.

• VALIGN=top/middle/bottom/baseline : position
verticale (haut/milieu/bas/bas) du texte dans les
cellules de la ligne.

58
 TABLEAUX
• <TH> ... </TH> encadre une cellule d'en-tête du
tableau
• Pour cette commande les options suivantes sont
possibles :
• ALIGN=left/right/center : position horizontale
(gauche/droite/centre) du texte dans la cellule
d'entête.
• COLSPAN=n : fusionne n cellules horizontalement.
• ROWSPAN=n : fusionne n cellules verticalement.
• NOWRAP : supprime la césure éventuelle du texte de
la cellule d'en-tête.

59
 TABLEAUX
• <TD> ... </TD> encadre une cellule du tableau.
• Pour cette commande les options suivantes sont
possibles :
• ALIGN=left/right/center : position horizontale
(gauche/droite/centre) du texte dans la cellule.
• COLSPAN=n : fusionne n cellules
horizontalement.
• ROWSPAN=n : fusionne n cellules verticalement.
• NOWRAP : supprime la césure éventuelle du
texte de la cellule.

60
TABLEAUX

61
 Exemple
<HTML>
<HEAD>
<TITLE>tableau 1</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=top> PREMIER
TABLEAU</CAPTION>
<TR>
<TD>ligne 1 ; cellule 1</TD>
<TD>ligne 1 ; cellule 2</TD>
</TR>
<TR>
<TD>ligne 2 ; cellule 1</TD>
<TD>ligne 2 ; cellule 2</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> 62
 Formulaires
La commande FORM
• Des formulaires peuvent être préparés afin de saisir
des données et les traiter au niveau du serveur.
• Pour rédiger un questionnaire, il faut:
• 1.Établir une zone d'édition (appelée FORM) en
utilisant les commandes <FORM></FORM>.
• 2.Définir la méthode à employer pour transmettre au
serveur l'information recueillie dans les champs du
formulaire.
• 3.Identifier l'emplacement et le nom du programme
qui devra traiter l'information recueillie.
• 4.Fournir, s'il y a lieu, les arguments au programme de
traitement des données.
63
 Formulaires
• Toute cette information se retrouve dans la
commande suivante:
• <FORM METHOD="POST" ACTION="/cgi-
bin/questionnaire.cmd?xxx">
• La méthode utilisée est POST, le programme
de traitement se nomme questionnaire.cmd
et se retrouve dans le dossier cgi-bin, un seul
argument est fourni au programme soit xxx.

64
 Formulaires
• La commande INPUT type="TEXT "
NOM: <input type="text" name="name" size=30>.
• La commande INPUT type="RADIO "
Etudiant:
A <input type="radio" name="info" value="OUI">OUI
B <input type="radio" name="info" value="NON">NON
• La commande INPUT type=CHECKBOX
Formation d’origine :
DUT <input name="Formation" TYPE=checkbox VALUE="DUT"><BR>
BTS <input name="Formation" TYPE=checkbox VALUE="BTS"><BR>
DEUG <input name="Formation" TYPE=checkbox VALUE="DEUG"><BR>

65
 Formulaires :Les commandes

La commande SELECT NAME et OPTION

Formation d’origine : <BR>
<select name>
<option selected>DUT
<option>BTS
<option>DEUG
</select>

66
 Formulaires
La commande TEXTAREA.
La commande HTML utilisée est:
<TEXTAREA name="nom_du_champ?" rows=n cols=m></TEXTAREA>
<TEXTAREA name="zone_libre" rows=5 cols=40></TEXTAREA>

67
 Formulaires
• Bouton de commande
• permettant d'envoyer le contenu des champs
remplis au serveur HTTP.
• Cette commande s'écrit:
<input type="submit" value="Soumettre">

68
Cadres

69
 Cadres
• On peut partager la fenêtre du navigateur avec la technique
des cadres (frames) :
• <FRAMESET> fractionnement de la fenêtre active.
• <FRAMESET ROWS ="30%, 70%"> partage horizontal.
• <FRAMESET COLS ="30%, 70%"> partage vertical.
• <FRAME> contenu du cadre.
• <FRAME SRC="un.htm"> un.htm sera chargée dans ce
cadre.
• Important : la balise <FRAMESET> remplace la balise
<BODY>.
• Les trois codes des exemples ci-dessus sont les suivants :

70
 Exemple 1
• <HTML>
• <HEAD>
• <TITLE>CADRE1</TITLE>
• </HEAD>
• <FRAMESET COLS="25%,*">
• <FRAME SRC="un.htm">
• <FRAME SRC="deux.htm">
• </FRAMESET>
• </HTML>

71
 Exemple 2
• <HTML>
• <HEAD>
• <TITLE>cadre 2</TITLE>
• </HEAD>
• <FRAMESET ROWS="25%,*">
• <FRAME SRC="un.htm">
• <FRAME SRC="deux.htm">
• </FRAMESET>
• </HTML>

72
 Exemple 3
• <HTML>
• <HEAD><TITLE>cadre3</TITLE></HEAD>
• <FRAMESET ROWS="15%,*">
• <FRAME SRC="un.htm">
• <FRAMESET COLS="30%,*">
• <FRAME SRC="deux.htm">
• <FRAME SRC="trois.htm">
• </FRAMESET>
• </FRAMESET>
• </HTML>

73
• Il est possible de faire en sorte que la bordure de séparation entre les
cadres n'apparaissent pas.
• <FRAMESET COLS="25%,*" FRAMEBORDER = NO>
• On peut afficher ou non les barres de défilement :
• <FRAMESET COLS="25%,*" >
• <FRAME SRC="un.htm" SCROLLING = YES>
• <FRAME SRC="deux.htm" SCROLLING = NO>
• </FRAMESET>
• La taille de la bordure séparant les cadres est donnée en pixels.
• <FRAMESET COLS="25%,*" BORDER = 100 >
• MARGINWIDTH et MARGINHEIGHT définissent les marges haute et
basse et droite et gauche.
• <FRAMESET COLS="25%,*">
• <FRAME SRC="un.htm" MARGINHEIGHT = 100 MARGINWIDTH = 50>
• <FRAME SRC="deux.htm" MARGINHEIGHT = 0 MARGINWIDTH = 10>
• </FRAMESET>

74
• Pour créer un document avec des cadres, il
faut être méthodique : faire un schéma sur
papier de ce que l'on veut obtenir et écrire
étape par étape le code correspondant.

75
 C.S.S
• CSS (Cascading Style Sheets), c'est cet autre
langage qui vient compléter le HTML.
Pour Gérer la mise en forme de votre site.
• CSS ? C'est lui qui vous permet de choisir la
couleur de votre texte.
Lui qui vous permet de sélectionner la police
utilisée sur votre site.
Lui encore qui permet de définir la taille du texte,
les bordures, le fond…
• Et aussi, c'est lui qui permet de faire la mise en
page de votre site

76
 Où écrit-on le CSS ?

Vous avez le choix car on peut écrire du code en langage

CSS à trois endroits différents :
• dans un fichier .css (méthode la plus recommandée) ;
• dans l'en-tête <head> du fichier HTML ;
• directement dans les balises du fichier HTML via un
attribut style (méthode la moins recommandée).
Vous noterez le contenu de la ligne, <link rel="stylesheet"
href="style.css" /> : c'est elle qui indique que ce fichier
HTML est associé à un fichier appelé style.css et chargé
de la mise en forme.

77
 Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

78
Exemple

79
Exemple

80