Vous êtes sur la page 1sur 6

Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012

Partie II : Pages web statiques


I- Introduction au langage HTML :
 Les pages web visualisées dans un navigateur Internet sont écrites avec un langage nommé
HTML (Hyper Text Markup Language).
 Le langage HTML est composé d’un ensemble de balises.
 Une balise est un élément spécial qui indique une action concernant la mise en page, la
mise en forme, etc…
Activité 1 : Activité 1 page 51 - Activité 2 page 52

Constatation :
Le langage HTML est un langage ………..…par le……….…exp : Internet explorer.
Les balises du langage HTML sont inclues entre les signes ………….et……………
Les balises du langage HTML ne sont pas sensible à la casse, elles peuvent êtres :
…………………ou.……………………………ou……………………………
Il existe quatre catégories de balise :
Des balises composées d’une partie………et une partie ..…..<Body>…</BODY>

Des balises composées d’une seule partie ………………… : <BR>


Des balises composées d’une parie ouvrante et une partie fermente avec propriétés tel que :
<font size ="5" color="blue">………………</FONT>
Des balises composes d’une partie ouvrante avec des propriétés
<IMG SRC= "image1.Jpeg" WIDTH="80" HEIGHT="78">

II- Structure d’un document HTML :


<……………….>
<……………>
1: <……………>
………………… ………………… 3:
……………… <……………> …………………
…………………
<……………>
2: <……………>
………………… …………………
……………… <……………>
<……………….>
III- Les balises du langage HTML :
1- Les textes et les paragraphes :
Activité 2 : Activité 3 page 54

Balise Rôle
<!--…-->
<B>…</B>
<I>…</I>
<U>…</U>
<FONT>…</FONT>
<SUP>…</SUP>
<SUB>…</SUB>
<BR>
<HR>
<CENTER>…</CENTER>
<DIV>…</DIV>

Lycée Elahd Eljadid - Skhira 1 Prof. : Brahim GHORBEL


Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012
<P>…</P>
2- Les titres :
Activité 3 : Activité 4 page 57
Balise Rôle
<H[n]>…</H[n]>
3- Les images :
Activité 4 : En utilisant le logiciel MS FrontPage, insérer l’image « Bouquet »
Balise Rôle
<IMG SRC="…"
WIDTH="…"
HEIGHT="…"
BORDER="…"
ALIGN="…"
ALT="…" >

Activité 5 : Ajouter un arrière-plan


Balise Rôle
<BODY BACKGROUND="…" >
4- Les listes :
Activité 6 : En utilisant le logiciel MS FrontPage, Créer des listes énumératives
Balise Rôle
<UL type="square">
<LI>élément de liste</LI>
<LI>élément de liste</LI>
</UL>
<OL type="I">
<LI>élément de liste</LI>
<LI>élément de liste</LI>
</OL>
<DL>
<DT>expression à définir</DT>
<DD>définition de l'expression</DD>
</DL>
5- Les tableaux :
Activité 7 : En utilisant le logiciel MS FrontPage, Insérer un tableau (2 colonnes et 6 lignes)
Balise Rôle
<TABLE>…</TABLE>
<TR>…</TR>
<TD>…</TD>
Attributs de la balise <table>
Balise Rôle
CELLSPACING=10 (pixels)
CELLPADDING =10 (pixels)
BORDER= "0","1","2"
WIDTH=…%
HEIGHT=…%
ALIGN= "left","right", "center"
BGCOLOR="blue","red","yellow"

Lycée Elahd Eljadid - Skhira 2 Prof. : Brahim GHORBEL


Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012
Attributs des balises <tr> et <td>
Balise Rôle
ALIGN="left","right", "center"
VALIGN="bottom","top", "middle"
WIDTH=…%
HEIGHT=….%
BGCOLOR=….
ROWSPAN=2,3,…
COLSPAN=2,3,…

6- Les Liens hypertextes :


a) Lien externe :

Activité 8 : En utilisant le logiciel de création de pages Web disponible, créer trois pages et les
sauvegarder respectivement sous les noms suivants : Menu.html, Tozeur.html et Nafta.html.
Menu Tozeur Nafta
Tozeur Tozeur est une ville du Jérid Nafta est une petite ville du
Nafta tunisien et le chef-lieu du sud tunisien. Elle se trouve à
gouvernorat du même nom. 25 Km de la ville de Tozeur
Créer des liens hypertexte externe entre ces pages

Balise Rôle
<a href="adresse ">…</a>

b) Lien interne :
Activité 9 : Créer des liens hypertexte internes dans la page Menu.html

Balise Rôle
<a name="*****">…</a>

<a href="#*****">…</a>

7- La création de formulaires HTML


a) Les balises du formulaire
Activité 10 : À L’aide du logiciel MS-Front Page, insérer un formulaire
Syntaxe : <FORM name="..."action="nom fichier.extension" method="GET/POST">...</FORM>
Attribut Rôle
name
action
method

b) Les types de formulaires

Lycée Elahd Eljadid - Skhira 3 Prof. : Brahim GHORBEL


Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012

8- Les cadres (Frames) :

Activité 11 :

Balise Fonction Attributs Rôle


<FRAMESET cols="colonnes" Cols
rows="lignes">…</ FRAMESET >
Rows

<FRAME SRC=" adresse page" SRC


NAME="nom">
NAME

Remarque :

<FRAMESET>…</ FRAMESET > remplace <Body>…</Body>

Création des pages web statique


1) En utilisant le logiciel de création de pages Web disponible. Créer quatre pages et les
sauvegarder respectivement sous les noms suivants :
« Menu.html », « Tozeur.html », « Nafta.html » et « inscription.html ».

2) Les formes des pages sont données ci-dessous :


Lycée Elahd Eljadid - Skhira 4 Prof. : Brahim GHORBEL
Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012
Menu.html
Menu
Tozeur
Nafta
Inscription

Tozeur.html
Tozeur
Tozeur est une ville du Jérid tunisien et le chef-
lieu du gouvernorat du même nom. Elle compte
32 400 habitants (recensement de 2004).

Nafta.html
Nafta
Nafta est une petite ville du sud tunisien. Elle se
trouve à 25 Km de la ville de Tozeur entre Chott el
Gharsa et Chott el Djerid.

Les options du champ profession sont : Etudiant, Enseignant, Elève et Autre

Lycée Elahd Eljadid - Skhira 5 Prof. : Brahim GHORBEL


2:
…………
Chapitre 2 : Production électronique avancée (Pages web statiques) Cours TIC 4éme SI AS : 2011 / 2012
…………
…………
… 3) Créer le jeu de cadres suivant qui doit être enregistré sous le nom « index.html » dans le
dossier de travail :
Cadre 1
Sud de la Tunisie
Cadre 2 Cadre 3
• La page « Menu.html » La page «inscription.html»

• Le cadre 1 contient le mot sud de la Tunisie


 Le cadre 2 contient la page « Menu.html »
• Le cadre 3 contient par défaut la page « inscription.html ».

4) Modifier la page « Menu.html » afin que les liens faisant appel aux pages
« Tozeur.Html », « Nafta.Html » et « inscription.Html » doivent s'afficher dans le cadre 3.
N.B : Le style d’écriture, les couleurs des textes, les fonds des pages et les images sont laissés au
libre choix du candidat. Toutefois, ces opérations sont importantes lors de l’évaluation du site.

Lycée Elahd Eljadid - Skhira 6 Prof. : Brahim GHORBEL