Cours ralis par : Ilahi Njib

TP TIC (HTML)
Matire : Technologie de linformation et de la communication Classe : 4 SI Enseignant : Ilahi Njib Dure : 2 heures Date : Octobre 07 A.S :2007/2008

TP N1 :
Objectifs : Savoir Savoir Savoir Savoir Savoir crire le code minimum en HTML pour crer une page Web. crer en mode code un tableau. insrer une image en HTML. insrer un lien hypertexte en mode code. distinguer entre une adresse absolue et une adresse relatif.

Exercice 1) 1) On vous donne la structure de deux pages Web nommes page1.html et page2.html .On vous demande dcrire le code HTML de chaque page en se basant sur les caractristiques ci-dessous. Caractristiques page2.html Caractristiques page1.html

Cellule1

Cellule2 Cellule3

Cellule1
Cellule2

Cellule3

Cellule4 Figure1 C:/

Cellule4 Figure2
La page 1 est structure avec un tableau dont les caractristiques sont : Sans bordure Largeur Tableau : 700 pixels Hauteur Tableau : 800 pixels Largeur Cellule1 : 200 pixels Hauteur cellule2 : 150 pixels Hauteur cellule3 : 450 pixels La page 2 est structure avec un tableau dont les caractristiques sont : Avec bordure Largeur Tableau : 700 pixels Hauteur Tableau : 700 pixels R2 Hauteur Cellule1 : 150 pixels Hauteur cellule2 : 450 pixels Largeur cellule2 : 200 pixels Page2.html Hauteur cellule3 : 450 pixels Largeur cellule3 : 500 pixels

Devoirs et examens sur : www.kiteb.net

Mes sites

Site R1
Page1.html

Image s
Image1.jpg Image2.jpg

Image3.jp g

TP1

Page 1 sur 2

Cours ralis par : Ilahi Njib

A) Ecrire le code HTML qui correspond la cration de ces deux tableaux dans chacune de deux pages ? .. .. .. .. ..

B) Dans la cellule2 de la page1.html insrer limage image1.jpg .De mme insrer limage image2.jpg dans la page2.html. (N.B : Utiliser ladressage relatif pour linsertion de deux images.
.. .. ..

C) Dans la cellule4 de chacune de deux pages appliquer un lien externe permettant de dplacer de la page1.html la page2.html et inversement.
.. ..

D) Dans la cellule3 de la page1.html on veut insrer 3 paragraphes gauche. Ces paragraphes doivent comporter des signets nomms respectivement para1 , para2 et para3
.. ..

E) Appliquer larrire plan de chaque page limage3. Ladressage doit tre relatif.
.. .. F) Dans la cellule2 de la page2.html un lien permettant de se dplacer vers la paragraphe para3 de la page1.html .. .. .. G) Ecrire le code HTML de chaque page ? .. ..

Devoirs et examens sur : www.kiteb.net

TP1

Page 2 sur 2

Cours ralis par : Ilahi Njib

TP TIC (HTML)
Matire : Technologie de linformation et de la communication Classe : 4 SI Enseignant : Ilahi Njib Dure : 2 heures Date : Octobre 07 A.S :2007/2008

TP N2 :
Objectifs : Savoir crer un formulaire en HTML.. Savoir insrer n'importe quel lment HTML de base dans une balise FORM (textes,boutons,tableaux,liens,...)

Intrt d'un formulaire

Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'lments interactifs permettant par exemple un dialogue avec les internaute, la manire des coupons-rponse prsents dans certains magazines. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit un URL, c'est--dire de faon gnrale une adresse e-mail ou un script de page web dynamique tel que PHP, ASP ou un script CGI. La balise FORM
Les formulaires sont dlimits par la balise <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs lments de formulaire (boutons,champs de saisie,...) et qui possde les attributs obligatoires suivants:

METHOD indique sous quelle forme seront envoyes les rponses POST est la valeur qui correspond un envoi de donnes stockes dans le corps de la requte, tandis que GET correspond un envoi des donnes codes dans l'URL, et spares de l'adresse du script par un point d'interrogation (pour plus de renseignement sur les mthodes POST et GET, consultez l'article sur le protocole HTTP) ACTION indique l'adresse d'envoi (script CGI ou adresse email (mailto:adresse.email@machine))

Voici la syntaxe de la balise FORM:

Devoirs et examens sur : www.kiteb.net

<FORM METHOD="POST" ou "GET" ACTION="url" > ... </FORM>

Voici quelques exemples de balises FORM:

<FORM METHOD=POST ACTION="mailto:[email protected]"> <FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi"> A l'intrieur de la balise FORM...

La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des lments qui vont permettre l'utilisateur de choisir ou de saisir des donnes, ensemble de donnes qui seront envoyes l'URL indiqu dans l'attribut ACTION de la balise FORM par la mthode indique par l'attribut METHOD.

TP2

Page 1 sur 4

Cours ralis par : Ilahi Njib

Il est possible d'insrer n'importe quel lment HTML de base dans une balise FORM (textes,boutons,tableaux,liens,...) mais il est surtout intressant d'insrer des lments interactifs. Ces lments interactifs sont:

La balise INPUT: un ensemble de boutons et de champs de saisie La balise TEXTAREA: une zone de saisie La balise SELECT: une liste choix multiples

La balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de crer un bon nombre d'lments "interactifs". La syntaxe de cette balise est la suivante:

<INPUT type="Nom du champ" value="Valeur par dfaut" name="Nom de l'lment">

L'attribut name est essentiel car il permettra au script CGI de connatre le champ associ la paire nom/valeur, c'est--dire que le nom du champ sera suivi du caractre "=" puis de la valeur entre par l'utilisateur, ou dans le cas contraire de la valeur par dfaut repr par l'attribut value. L'attribut type permet de prciser le type d'lment que reprsente la balise INPUT, voici les valeurs que ce champ peut prendre:

checkbox: il s'agit de cases cocher pouvant admettre deux tats: checked (coch) et unchecked (non coch). Lorsque la case est coch la paire nom/valeur est envoye au CGI hidden: il s'agit d'un champ cach. Ce champ non visible sur le formulaire permet de prciser un paramtre fixe qui sera envoy au CGI sous forme de paire nom/valeur file: il s'agit d'un champ permettant l'utilisateur de prciser l'emplacement d'un fichier qui sera envoy avec le formulaire. Il faut dans ce cas prciser le type de donnes pouvant tre envoyes grce l'attribut ACCEPT de la balise FORM image: il s'agit d'un bouton de soumission personnalis, dont l'apparence est l'image situ l'emplacement prcis par son attribut SRC password: il s'agit d'un champ de saisie, dans lequel les caractres saisis apparaissent sous forme d'astrisques afin de camoufler la saisie de l'utilisateur radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposs (l'ensemble des boutons radios devant porter le mme attribut name. La paire nom/valeur du bouton radio slectionn sera envoy au CGI. Un attribut checked pour un des boutons permet de prciser le bouton slectionn par dfaut reset: il s'agit d'un bouton de remise zro permettant uniquement de rtablir l'ensemble des lments du formulaire leurs valeurs par dfaut submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut tre prcis grce l'attribut value text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte. La taille du champ peut tre dfinie l'aide de l'attribut size et la taille maximale du texte saisi grce l'attribut maxlength

La balise TEXTAREA

Devoirs et examens sur : www.kiteb.net

La balise TEXTAREA permet de dfinir une zone de saisie plus vaste par rapport la simple ligne de saisie que propose la balise INPUT. Cette balise possde les attributs suivants:

cols: reprsente le nombre de caractres que peut contenir une ligne rows: reprsente le nombre de lignes name: reprsente le nom associ au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur readonly: permet d'empcher l'utilisateur de modifier le texte entr par dfaut dans le champ value: reprsente la valeur qui sera envoye par dfaut au script si le champ de saisie n'est pas modifi par une frappe de l'utilisateur

La balise SELECT

TP2

Page 2 sur 4

Cours ralis par : Ilahi Njib

La balise SELECT permet de crer une liste droulante d'lments (prciss par des balises OPTION l'intrieur de celle-ci). Les attributs de cette balise sont:

name: reprsente le nom associ au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur disabled: permet de crer une liste dsactive, c'est--dire affiche en grise size: reprsente le nombre de lignes dans la liste (cette valeur peut tre plus grande que le nombre d'lments effectifs dans la liste) multiple: marque la possibilit pour l'utilisateur de choisir plusieurs champs dans la liste

Un exemple de formulaire
Les formulaires peuvent tre mis en page l'aide de tableaux (cela est mme conseill pour avoir une mise en page soigne). Voici un exemple rcapitulant les points ci-dessus et montrant comment mettre en page un formulaire l'aide d'un tableau:
<FORM > Enregistrement d'un utilisateur <TABLE BORDER=0> <TR> <TD>Nom</TD> <TD> <INPUT type=text name="nom"> </TD> </TR> <TR> <TD>Prnom</TD> <TD> <INPUT type=text name="prenom"> </TD> </TR> <TR> <TD>Sexe</TD> <TD> Homme : <INPUT type=radio name="sexe" value="M"> <br>Femme : <INPUT type=radio name="sexe" value="F"> </TD> </TR> <TR> <TD>Fonction</TD> <TD> <SELECT name="fonction"> <OPTION VALUE="enseignant">Enseignant</OPTION> <OPTION VALUE="etudiant">Etudiant</OPTION> <OPTION VALUE="ingenieur">Ingnieur</OPTION> <OPTION VALUE="retraite">Retrait</OPTION> <OPTION VALUE="autre">Autre</OPTION> </SELECT> </TD>

Devoirs et examens sur : www.kiteb.net

</TR> <TR> <TD>Commentaires</TD> <TD> <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires</TEXTAREA> </TD> </TR> <TR> <TD COLSPAN=2> <INPUT type="submit" value="Envoyer"> </TD> </TR> </TABLE> </FORM>

Voici le rsultat de ce code HTML

TP2

Page 3 sur 4

Cours ralis par : Ilahi Njib

Enregistrement d'un utilisateur Nom Prnom Homme : Femme : Fonction
Enseignant

Sexe

Tapez ici vos commentaires

Commentaires

Envoyer

Attributs de la balise FORM et types d'entres

Balise Valeur POST METHOD GET Attribut Rsultat Effet Visuel

<FORM> ... </FORM> ACTION ENCTYPE submit

envoie l'adresse indique spcifie le type de codage utilis effectue l'ACTION dans le balise <FORM> simple ligne de texte dont la longueur est donne par l'attribut size efface le contenu du formulaire bouton radio case cocher Nom Taille du texte
Rtablir Envoyer

text TYPE <INPUT>

reset

radio checkbox NAME SIZE NAME ROWS <TEXTAREA> ... </TEXTAREA>

Zone de texte COLS

Devoirs et examens sur : www.kiteb.net

<SELECT> NAME <OPTION> ... </OPTION> MULTIPLE </SELECT> <OPTION> ... </OPTION> SELECTED VALUE Option par dfaut Valeur force Plusieurs choix possibles

Choix 1

Choix 1

Choix 1 Choix 2 Choix 3

TP2

Page 4 sur 4

Cours ralis par : Ilahi Njib

TP TIC (HTML)
Matire : Technologie de linformation et de la communication Classe : 4 SI Enseignant : Ilahi Njib Dure : 2 heures Date : Novembre 07 A.S :2007/2008

TP N3 :
Objectifs : Savoir crer un formulaire en HTML.. Savoir crer des frames (cadres) en HTML

Prsentation des frames

Grce la technologie des frames (en franais "cadres") il est dsormais possible d'afficher plusieurs pages HTML dans diffrentes zones (ou cadres).

Crer des frames

Afin de crer un site contenant des cadres, il suffit de crer un fichier contenant l'agencement des cadres : ce fichier HTML a pour particularit d'avoir un conteneur <FRAMESET> la place du jeu de balises <BODY>. C'est cette balise qui dfinit les cadres par leur dimension en pixels ou en pourcentage (%). Voyons ceci sur 3 exemples:

2 cadres verticaux 2 cadres horizontaux 2 cadres horizontaux et un vertical

Exemple n1

<FRAMESET COLS="20%,80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAME SRC="frame2.htm" NAME="droite"> </FRAMESET>

Devoirs et examens sur : www.kiteb.net

Exemple n2
<FRAMESET ROWS="20%,80%">

<FRAME SRC="frame1.htm" NAME="haut">

<FRAME SRC="frame2.htm" NAME="bas">

</FRAMESET>

TP3

Page 1 sur 4

Cours ralis par : Ilahi Njib

Exemple n3

<FRAMESET COLS="20%,80%"> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAMESET ROWS="50%, 50%"> <FRAME SRC="frame2.htm" NAME="droit_haut"> <FRAME SRC="frame3.htm" NAME="droit_bas"> </FRAMESET>

Les attributs de la balise <FRAMESET>

Attribut Rows Valeur pourcentage (entre 1 et 100) valeur en pixels En fixant une seules des valeurs et en donnant l'autre la valeur *, la valeur s'ajuste automatiquement pourcentage (entre 1 et 100) valeur en pixels En fixant une seules des valeurs et en donnant l'autre la valeur *, la valeur s'ajuste automatiquement YES NO n est une valeur dfinissant la taille de la bordure Nom de la couleur Valeur de la couleur en hexadcimal Action Cadre horizontal

Cols

Cadre vertical Indique si le cadre a une bordure ou non Indique la taille de la bordure Indique la couleur de la bordure Indique l'espace entre les cadres

Frameborder Border=n Bordercolor

Framespacing=n n est une valeur dfinissant l'espace entre les cadres

Les attributs de la balise <FRAME>

La balise <FRAME> permet de dfinir un ou plusieurs cadres au sein de la balise <FRAMESET> Attribut Src Name Marginwidth=n URL "nom" Valeur Action Dfinit l'emplacement de la page afficher dans le cadre Dfinit un nom qui permettra d'afficher un autre document dans le cadre gce l'attribut Target

Devoirs et examens sur : www.kiteb.net

n est un entier spcifiant le Taille des marges latrales nombre de pixels n est un entier spcifiant le Marginheight=n Taille des marges du haut et du bas nombre de pixels YES Frameborder Dtermine si les cadres auront ou non une bordure NO n est un entier spcifiant le Taille de l'espace entre les cadres (uniquement pour Border=n nombre de pixels Netscape) Interdit l'utilisateur de redimensionner les cadres (Ce n'est Noresize (Aucune) pas la valeur par dfaut) YES Permet ou non l'affichage d'une barre de dfilement (Auto Scrolling NO laisse le navigateur dcider de son utilit) AUTO

TP3

Page 2 sur 4

Cours ralis par : Ilahi Njib

Application

La fentre ci-dessus du site est compose de 3 frames (cadres) correspondant aux trois fichiers suivants qui se trouvent dans le dossier 4SI : framehaut reprsente lentte du site. framemenu contenant les hyperliens vers les autres pages. framebas page de prsentation. Le dfilement des page se droule dans le cadre droite. Dans le cadre framemenu : - llment Menu1 est un lien vers la page inscription qui sera affich dans le cadre framebas et dont le contenu est le suivant.

Devoirs et examens sur : www.kiteb.net

TP3

Page 3 sur 4

Cours ralis par : Ilahi Njib

Devoirs et examens sur : www.kiteb.net

TP3

Page 4 sur 4