Reseau et multimedia2009

Pages Web statiques
Jihen Damerji

Introduction
HTML :HperText Markup Language.
 Langage structuré basé sur les balises.
 Indépendant du navigateur utilisé.
 On forme un fichier qu’on enregistre avec
l’extension .html et on peut voir son contenu
dans un navigateur tel que Ms Internet Explorer.

Activité
 Créer un dossier portant le nom HTML dans
d:4SITICG1.
 Lancer le logiciel Bloc Notes de Windows.
 Enregistrer le dans le dossier qu’on a crée
sous le nom de page1.html
 On remarque que le fichier change d’icône.

 Ouvrer le fichier page1.html qui est une
page vide puis afficher le code source et
saisir ce qui suit
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

 Ce sont des balises HTML. Chaqu’une
doit être entre les symboles < et >.
 Il y a les balises ouvrantes. < ------ >
 Il y a les balises fermantes </------ >
 Un document HTML est formé de :
 la déclaration principale <HTML>
 L’entête : <HEAD>
 Le corps: <BODY>

 Insérez après la balise <Head> la ligne suivante:
 Enregistrez le fichier et revenez au navigateur.
 Actualisez Quel est le résultat?
 Après la balise <BODY> insérez le texte suivant:
<BODY> Bienvenue sur ma page Web </BODY>
 Enregistrez et actualisez le navigateur.
<HEAD>
<TITLE> Mon site Web </TITLE>
</HEAD>

La forme générale
d’une page Web
<HTML>
<HEAD>
<TITLE> Titre qui s’affiche
dans la barre des titre du
navigateur</TITLE>
</HEAD>
<BODY>
……………………………….………
……………………………………….
……………………………………….
</BODY>
</HTML>
“début du code HTML”
“début des informations
relatives à l’entête du
document »
Titre qui s’affiche dans la
barre des titre du navigateur
« fin de ces informations »
« début de contenue
effectif de la page »
……………………………………..
…………..…………………………
……………………………………..
« fin du corps de la page »
“fin du code HTML”

Activité : saisir le code html suivant
<HTML>
<HEAD>
<TITLE> ma première page web </TITLE>
</HEAD>
<BODY>
développement web
</BODY>
</HTML>

Textes et paragraphes
1- Paragraphes
Activité: Ajoutez le texte suivant dans le Body:
<p align= center> développement web
</P>
 La balise P permet de crée de paragraphe
 Pour ajouter un nouveau paragraphe on utilise
la balise <P> </P>
 Cette balise possède la propriété align.

 Pour mettre le titre en gras on doit ajouter la
balise <B> pour devenir:
<P align=center> <B> développement web
</B> </P>
Activité: Ajoutez le texte suivant
 <P> On va vous présenter <U> <I> Internet</I>
</U> et son utilisation</P>
Pour souligner et mettre en Italique le mot
Internet on doit l’encadrer par<U><I></U></I>
2- texte

 Pour centrer tout le texte, on ajoute après <P>
la balise <CENTER> et on la ferme avant
</P>
 On ajoute les modifications suivantes:
<P align=center> <FONT color="red" size=8
face="Arial"> <B> développement web
</B></FONT></P>
Activité On va ajouter un nouveau paragraphe
aligné à gauche dans lequel on va mettre sur trois
lignes différentes : Définition.
Services.
Connexion.

Solution :<P align=left> Définition. <BR>Services.
<BR> Connexion. </P>
• La balise BR : (break):
permet de commencer une nouvelle
ligne
<BR> c’est une nouvelle ligne

Application 2 Modifier la police en Courrier et
la taille à 5 des trois sous titres:
Solution:
<P align=left>
<FONT size=5 face="courrier">
Définition.
<BR>Services.
<BR> Connexion.
</FONT>
</P>

 Sur le même document on va ajouter une ligne
séparatrice par la balise <HR> à la fin du texte.
 On peut modifier la couleur, la largeur et le trait
de la ligne.
Application:
<HR color="blue" width="500" size="5">
<HR color=“#000000” width=“500" >
<HR color=“#884412” width=“400" size=“5”>
La balise HR : (horizontal rule) permet de dessiner
une ligne horizontal

 A la balise <BODY> on va ajouter la propriété
BGCOLOR pour devenir
 <BODY BGCOLOR="#123456">
 Et on ajoute aussi TEXT="White"
<BODY BGCOLOR="#123456"
TEXT="White">
Couleur d’arrière plan

Les titres
Activité: Apres la ligne séparatrice commencer un
nouveau paragraphe dans lequel on va mettre 6 titres
de paragraphes de la forme suivante.
<P>
<H1>Titre 1</H1>
<H2>Titre 2</H2>
<H3>Titre 3</H3>
<H4>Titre 4</H4>
<H5>Titre 5</H5>
<H6>Titre 6</H6>
</P>

Style Logique et titre
<H1>texte</H1> : de taille1 (maximum
Titre 1 Titre 4
<H2>texte</H2> : de taille2 <H5>texte</H5> : de taille5
Titre 2 Titre 5
<H3>texte</H3> : de taille3 <H6>texte</H6> : de taille6(minimu
Titre 3
<H4>texte</H4> : de taille4
Titre 6
<EM>texte</EM> Met le texte en valeur

Insertion d'images
 Créer un nouveau fichier qu'on appelle
Page2.html
 Dans le body on va mettre comme titre
"Insertion d'images dans une page web"
 Dans un nouveau paragraphe on va insérer
l'image webcam.jpg à gauche de taille 170 par
150 pixel.
 <IMG SRC="webcam.jpg" WIDTH="170"
HEIGHT="150" ALIGN="Left">

 Insérer une ligne horizontale après
l'image.
 Insérer une deuxième image routeur.jpg à
droite de taille 200 par 150 pixel avec une
bordure égale à 3.
 <IMG SRC=" routeur.jpg "
WIDTH="200" HEIGHT="150"
ALIGN="Right" BORDER="3"
ALT="Un routeur WIFI">

L’insertion d’une image d’arrière
plan
On peut également mettre une image comme arrière
plan de la page dans la balise <BODY>
 <BODY BACKGROUND="fond1.jpg">
 <BODY BACKGROUND="fond2.jpg">
<BODY BACKGROUND= ˝ image.jpg ˝ >

 Insertion d’images
<IMG SRC= ˝ image.gif ˝>
Pour modifier à l’écran la taille de l’image,
on dispose des attributs:
HEIGHT pour la hauteur
et
WIDTH pour la largeur
<IMG SCR= ˝image.gif ˝ WIDTH=70
HEIGHT=70>

Les listes
 Créer une nouvelle page et enregistrez la sous le nom
de page3.html
 Mettez comme titre "les listes"
 Saisir le code suivant dans le body:
 <H4>Les services de l'Internet </H4>
<UL>
<LI> Le Web </LI>
<LI> L'email </LI>
<LI> Le chat </LI>
</UL>

 Insérer une ligne horizontale.
 Insérer le code suivant après la ligne:
<H4> Matériel nécessaire à une connexion
</H4>
<OL>
<LI>Un ordinateur </LI>
<LI>Modem </LI>
<LI>Ligne téléphonique</LI>
</OL>

La balise UL : (Unumbered list),
permet l’obtention d’une liste nom
numérotée
<UL>
<LI> ceci est la 1ér élément
<LI> ceci est le 2éme élément
</UL>
<ul> et <li>possède la propriété type
[ square(puces carrées), circle(puces
circulaires)]

La balise OL : (Ordered list)
permet l’obtention d’une liste
numérotée
<OL>
<LI> ceci est la 1ér élément
<LI> ceci est le 2éme élément
</OL>

 Modifier la balise <OL> en ajoutant
1. <OL type="1">
2. <OL type="A">
3. <OL type="a">
4. <OL type="I">
5. <OL type="i">

 Insérer une ligne horizontale.
 Insérer le code suivant après la ligne:
<H4> Types de connexion </H4>
<DL>
<DT>A</DT>
<DD>RTC </DD>
<DT>B</DT>
<DD>ADSL </DD>
<DT>C</DT>
<DD>Ligne spécialisée </DD>
</DL>

Formatage de caractères :(voir
tableau P56)
Tag ou balise Rôle
<B>texte</B> gras
<I>texte</I> italique
<U>texte</U> souligné
<S>texte</S> Barré
<SUB>texte</SUB> Indice

Formatage de caractères suite
<SUP>texte</SUP> Exposant ( exposant )
<DIV align="
center/left/right
">texte</DiV>
Alignement d’un
élément
<BIG>texte</BIG> Agrandir la taille
<SMALL>texte</SMALL> Réduire la taille
<!-texte-> Commentaire

Les Tableaux
 Créer un nouveau fichier qu'on appelle
Page3.html
 Dans le body on va mettre comme titre "Les
tableaux" (en H1) et le centrer.
 Pour insérer un tableau on utilise la balise
<TABLE>
-------------------
</TABLE>

Propriétés de <TABLE>
1. BORDER: Indique la bordure du tableau.
2. WIDTH: Indique la largeur du tableau en
pourcentage ou en pixel.
3. HEIGHT : Hauteur du tableau en
pourcentage ou en pixel.
4. ALIGN: Alignement du tableau par rapport à
la page.
5. BGCOLOR: Modifie la couleur de l'arrière
plan du tableau.

<TABLE WIDTH="80%" BORDER="1"
ALIGN="center" BGCOLOR="#CCCCCC">
</TABLE>
Activité:

Les lignes
 Pour insérer une ligne on utilise la
balise <TR>
 On aura
<TABLE>
<TR>
</TR>
</TABLE>

Propriétés de <TR>
1. ALIGN: Indique l’alignement du
contenu de la ligne.
2. VALIGN: Indique l’alignement
vertical du contenu des cellules
d’une ligne.
plan de la ligne.
4. HEIGHT: Hauteur de la ligne en pourcentage
ou en pixel par rapport au tableau.

Activité:
<CENTER><H1> Les Tableaux
</H1></CENTER>
<TABLE WIDTH="80%" BORDER="1"
ALIGN="center" BGCOLOR="#CCCCCC">
<TR ALIGN="center" BGCOLOR="yellow">
</TR>
</TABLE>

Les Cellules
 Pour insérer une cellule dans une
ligne on utilise la balise <TD>On
aura
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>

Propriétés de <TD>
1. ALIGN: Indique l’alignement du
contenu d’une cellule.
2. VALIGN: Indique l’alignement vertical
du contenu d’une cellule.
plan de la cellule.
4. HEIGHT: Hauteur de la cellule en pourcentage
ou en pixel par rapport à la hauteur d’une ligne
5. WIDTH: Indique la largeur de la cellule en
pourcentage ou en pixel par rapport au tableau.

Activité1:
 Insérer un tableau sans bordure
contenant 2 lignes et 2 colonnes.
 Mettre 1,2,3,4 dans les différentes
cellules.

Activité2:
 Insérer un tableau avec une bordure
égale à 2 contenant 2 lignes et 2
colonnes.
cellules.
Solution:<TABLE BORDER="2">
 On veut avoir un espacement entre les
cellules égal à 10 pixels et un espacement
entre le contenu de cellules et leurs bords
égal à 10 pixels

Solution:
 On doit utiliser deux autres
propriétés de la balise <TABLE>:
 CELLSPACING: Espacement entre les
cellules.
 CELLPADDING: Espace entre le
contenu de la cellule et son bord
extérieur.
 <TABLE Border="2" cellspacing=10
cellpadding=10>

Activité3:
égale à 1 contenant 2 lignes et 2
colonnes et de couleur de fond bleu.
cellules.
 Mettre la couleur de fond la ligne 1
du tableau en rouge.
 Mettre la couleur de fond de la
cellule 2 en vert.

Solution:
<TABLE Border="2" BGCOLOR="blue" >
<TR BGCOLOR="red">
<TD>1</TD>
<TD BGCOLOR="green">2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>

Activité4:
égale à 1 contenant 3 colonnes.
 La largeur du tableau sera égale à 60%.
 Mettre 1,2,3 dans les différentes cellules.

Solution:
<TABLE border="1" WIDTH="60%">
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TABLE>

opération de fusion
Activité4-1:
 Insérer un tableau avec une
bordure égale à 1 et de largeur
égale à 60%.
 Le tableau sera de la forme
suivante:
1
2 3 4

Solution:
<TABLE Width=60% border=1>
<TR>
<TD Colspan=3>1</TD>
</TR>
<TR>
<TD width=33%>2</TD>
</TR>
</TABLE>

Activité4-2:
 Insérer un tableau avec une
bordure égale à 1 et de largeur
égale à 60%.
 Le tableau sera de la forme
suivante:
1
2 3
4 5

Solution:
<TABLE Width=60% border=1>
<TR>
<TD Rowspan=2 width=33% align=center valign=middle>
1
</TD>
</TR>
<TR>
</TR> </TABLE>

Les liens hypertextes
Un lien hypertexte nous permet de
nous déplacer d’une page à une
autre c’est le lien hypertexte externe
ou bien dans une même page d’un
endroit à un autre c’est le lien
hypertexte interne.
 La forme d’un lien est la suivante:
<A href = "adresse cible" > Texte du
lien </A>

Exemples:
 <A HREF=" http://adresse Web"> texte
</A>
<A HREF="http://www.google.com">
Recherche </A>
 <A HREF=" ftp://adresse ftp"> texte
</A>
<A HREF=
"ftp://ftp.editerra.fr/install/win32_86x/ftp/ftpe
xpert2.exe "> FTP Expert 2 </A>
 <A HREF="mailto:adresse email"> texte
</A>
<A HREF="mailto:jihen.d@lycos.com">
Envoyer un email </A>

 <A HREF="file://adresse du fichier">
Texte </A>
<A HREF="file://c:/Windows/winhelp.exe">
Aide de Windows </A>
 On peut aussi spécifier la page cible
avec la propriété: Target:
• _blank
• _self
• _parent

lien hypertexte interne.
 créer une page web très longue qui
contient les informations suivantes:
1. Le titre suivant: « voila une page très
longue »
2. Une ligne horizontal plus le texte
suivant « bas de page »
3. L’image image1.jpg de hauteur=800
et de largeur=400
suivant « bas de page »

suivant « Remonter »
6. Créer un lien interne qui nous
permet d’aller en bas de page en
cliquant sur bas de page
7. Créer un deuxième lien interne qui
nous permet d’aller en haut de page
en cliquant sur remonter

solution
<html>
<head><title> lien hypertexte
</title> </head>
<body>
<h1> <a name= "haut"> voila
une page très longue </A>
<A href =" #bas" >bas de
page</A>

<hr><img src= « image1.jpg «
width=400 height=800> <hr>
<h2> <a name= "bas"> bas
de page </A>
<A href =" #haut"
>remonter</A>
</body>
</html>

On peut créer des liens hypertexte
vers des signets à l'intérieur d'une
même page en utilisant:
<A href = "#nom du signet" >
Texte du lien </A>
 Ceci après avoir définie votre signet:
<a name= "nom du signet">
texte </A>

Suite:
 Par défaut la couleur du lien est
bleue, celle du lien visité et violette,
et celle du moment du click est
rouge.
On peut modifier ces couleurs par des
propriétés dans la balise BODY.
<BODY Link="Pink" Vlink="Yellow"
Alink="Green">

Formulaire HTML
<form action="………." name=" ………"
method=" post/get">
</form>
action= indique l’action à faire.
Name= le nom du formulaire
method=" post/get" 

La méthode GET La méthode POST
utilise l'url, donc si jamais vous
avez des données à passer par l'url
pour ne pas faire un formulaire sur
chaque lien, vous aller pouvoir
utiliser GET. Prenons un exemple
où je passe un 'id' via l'url pour
savoir quelle image affichée.
Une url avec des variables dedans
se présente toujours de cette façon
: /mon_script.php
?nomVariable1=valeurVariable1&n
omVariable2=valeurVariable2&nom
Variable3=valeurVariable3&�
Une url est limitée à 255 caractères
!
est utilisée pour transmettre des
données via un formulaire et
passer en "caché"
(via une deuxième requête HTTP,
après la première qui demande la
page html/php),on ne voit pas les
données des variables
explicitement.
Contrairement à POST, la méthode
GET passe les variables via l'url (en
une seule requête HTTP), les
données sont donc "visible" dans
l'adresse de la page.
La validation du formulaire se fait par le bouton
Envoyer.

<html>
<head><title>formulaire</title></head>
<body>
<h1>formation personnel</h1>
<form action="sauveg.html" name=" f1"
method="get">
Votre nom: <input type= "text" name=
"nom"> <br>
<input type="submit" value="envoyer">
</form>
</body></html>

La zone de saisie
Ajouter :
Votre prenom:
<input type= "text" name="prenom"
size="25">
<br><br>

entrer l'adresse de votre site:
<input type= "text" name="url"
size="40" value="http://">
<br><br>

Votre profession:
<input type= "text"
name="profession" size="25"
maxlength="20">
<br><br>

entrer le mot de passe:
<input type= "password"
name="motpasse" size="10"
maxlength="8">
<br><br>

entrer votre adresse:
<textarea name="adresse" rows="3"
cols="50">
</textarea>
<br><br>

ajouter votre photos:
<input type= "file" name="photos"
size="30"> <br>
<hr>
<br>

Bouton radio
Sexe:
<input type="radio" name="sexe"
value="Femme" checked> Femme
<input type="radio" name="sexe"
value="homme"> Homme
<br><br>
Ajouter a votre formulaire:

Case à coucher ‘choix inclusifs)
Votre sport préférer:<br>
<input type="checkbox" name="sport"
value="hand"> Hand <br>
<input type="checkbox" name="sport1"
value="foot"> Foot <br>
value="basket"> Basket <br>
value="golf"> Golf <br> <br><br>

Liste de sélection
Date de naissance:
<input type= "text" name="jour" size="3"
maxlength="2">
<select name="mois">
<option value="janvier">janvier
<optionvalue="fevrier" >Février
<option value="mars" selected>mars...
<option value="decenbre">décenbre
</select>
<input type= "text" name="annee" size="5"
maxlength="4" > <br>

Le contrôle annuler
<input type="reset"
value="annuler">

 On peut diviser la page en cadres
(FRAME) grâce à la balise
<FRAMESET>
 On peut diviser la page en lignes ou en
colonnes par la propriété COLS et
ROWS.
 Dans chaque cadre on affiche une page
qu'on doit préciser la source grâce à la
balise <FRAME SRC=" ">
 On peut aussi donner un nom au cadre
avec la propriété NAME

Application1: Saisir ce code
<HTML>
<HEAD><TITLE> cadre</TITLE></HEAD>
<frameset cols="250,*">
<frame src=" index.html" name="G">
<frame src="formulaire.html" name="D">
</frameset></html>
Enregistrez le fichier sous le nom tp1.html et
revenez au navigateur après avoir vérifier les deux
autre pages: « index.html" et « formulaire.html"
qui sont les deux pages du devoir.

Application2: Saisir ce code
<HTML>
<HEAD><TITLE> cadre</TITLE></HEAD>
<frame src="cadreg.html" name="G">
<frame src="cadred.html" name="D">
</frameset></html>
Enregistrez le fichier sous le nom tp12.html et
revenez au navigateur après avoir créer les deux
autre pages: "cadreg.html" et "cadred.html"

cadreg.html cadred.html
<HTML>
<HEAD><TITLE>sommaire de
liens</TITLE></HEAD>
<BODY bgcolor="#e0c0ff"
text="#000000" link="#804080"
vlink="600000" Alink="#A00000">
<H1> navigation </H1>
<P>
<A href="tp3.html" target="D"><B>
Les images</B> </a><br>
Les tableaux</B> </a><br>
Les listes</B> </a><br>
Les titres</B> </A><BR>
</P></BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Acceil</TITLE>
</HEAD>
<BODY bgcolor="#fff0c0"
text="#000000" link="#A00000"
vlink="600000"
Alink="#A00000">
<H1> bienvenue </H1>
<P>
choisissez un lien à gauche
</P>
</BODY>
</HTML>

Exercice d'application :créer
cette page

Solution:
<html>
<head><title> cadre</title></head>
<frameset rows="60,*">
<frame src="vacance.html" name="G">
<frame src="acceuil.html" name="D">
<frame src=" devoir.html" name="h">
</frameset>
</frameset>
</html>

Les attributs
L'attribut frameborder :
Cet attribut permet de déterminer si les
cadres auront ou n'auront pas de bordure. Il
a deux valeurs yes ou no.
frameborder=yes ou frameborder=no
L'attribut bordercolor :
Cet attribut permet de déterminer la couleur
de l'ensemble des bordures des cadres. Il
suffit pour cela de spécifier une couleur sous
forme de nom ou de sa valeur hexadécimale
bordercolor="red"

Correction
<html>
<frameset rows="60,*" frameborder=yes
bordercolor="red">
<frame src="cadreg.html" name="G">
<frame src="cadred.html" name="D">
<frame src="cadreh.html" name="h">
</frameset></frameset>
</html>

Application2
<html>
<frameset rows="60,*">
<frame src="cadreg.html" name="G"
frameborder=yes bordercolor="red">
<frame src="cadred.html" name="D"
frameborder=yes bordercolor="blue">
<frame src="cadreh.html" name="h"
frameborder=yes bordercolor="blue">
</frameset></frameset></html>

L'attribut framespacing :
Cet attribut permet de déterminer un
espace entre les cadres. Il peut prendre
plusieurs valeurs ex: framespacing=n, n
étant une valeur en pixels définissant
l'espace entre les cadres. La valeur 0
indique aucun espace.
framespacing=0 ou framespacing=5
L'attribut border :
Cet attribut permet de déterminer la taille des
bordures entourant les cadres. Il peut prendre
plusieurs valeurs ex: border=n, n étant une valeur
en pixels définissant la taille de la bordure. La
valeur 0 indique aucune bordure.
<frameset rows="60,*" frameborder=yes border="5">

L'attribut scrolling:
Cet attribut permet d'attribuer ou non une barre
de défilement (scrollbar) à un cadre. Il possède
trois valeurs :
- yes : Indique que la barre de défilement sera
toujours visible
- no : Indique que la barre de défilement ne sera
jamais visible
- auto : Indique que le navigateur déterminera si
la barre de défilement est nécessaire
L'attribut noresize :
En utilisant cet attribut, vous interdisez à
l'utilisateur de redimensionner les cadres. Par
défaut les cadres peuvent être redimensionnés
<frame src="cadreg.html" name="G"
scrolling="auto" noresize>

Les attributs marginwidth et marginheight :
- marginwidth permet de spécifier la
grandeur des marges de gauche et de
droite du cadre créé, la valeur doit être
exprimée en pixels, elle peut avoir comme
valeur 0.
- marginheight permet de spécifier la
grandeur des marges de haut et de bas du
cadre crée, la valeur doit être exprimée en
pixels, elle peut avoir comme valeur 0
<frame src="cadred.html" name="D"
marginwidth="18" marginheight="21"
scrolling="auto">

Reseau et multimedia2009

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Similaire à Reseau et multimedia2009

Similaire à Reseau et multimedia2009 (20)

Plus de jihen damerji

Plus de jihen damerji (20)

Dernier

Dernier (15)

Reseau et multimedia2009

Notes de l'éditeur