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
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
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
