Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours réalisé par : Ilahi Néjib TP1 Page 1 sur 2 TP N°1 : Objectifs : Savoir

Cours réalisé par : Ilahi Néjib TP1 Page 1 sur 2 TP N°1 : Objectifs : Savoir écrire le code minimum en HTML pour créer une page Web. Savoir créer en mode code un tableau. Savoir insérer une image en HTML. Savoir insérer un lien hypertexte en mode code. Savoir distinguer entre une adresse absolue et une adresse relatif. Exercice 1°) 1°) On vous donne la structure de deux pages Web nommées « page1.html » et « page2.html ».On vous demande d’écrire le code HTML de chaque page en se basant sur les caractéristiques ci-dessous. Caractéristiques page1.html Caractéristiques page2.html Figure1 Figure2 La page 1 est structurée avec un tableau dont les caractéristiques 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 structurée avec un tableau dont les caractéristiques sont : • Avec bordure • Largeur Tableau : 700 pixels • Hauteur Tableau : 700 pixels • Hauteur Cellule1 : 150 pixels • Hauteur cellule2 : 450 pixels • Largeur cellule2 : 200 pixels • Hauteur cellule3 : 450 pixels • Largeur cellule3 : 500 pixels TP TIC (HTML) Matière : Technologie de l’information et de la communication Classe : 4 SI Enseignant : Ilahi Néjib Durée : 2 heures Date : Octobre 07 A.S :2007/2008 Cellule1 Cellule2 Cellule3 Cellule4 Cellule1 Cellule2 Cellule4 Cellule3 Image1.jpg Image2.jpg Image3.jp g R2 Page2.html Image s Mes sites Site R1 Page1.html C:/ Devoirs et examens sur : www.kiteb.net Cours réalisé par : Ilahi Néjib TP1 Page 2 sur 2 A°) Ecrire le code HTML qui correspond à la création de ces deux tableaux dans chacune de deux pages ? ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. B°) Dans la cellule2 de la page1.html insérer l’image « image1.jpg ».De même insérer l’image « image2.jpg » dans la page2.html. (N.B : Utiliser l’adressage relatif pour l’insertion de deux images. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. C°) Dans la cellule4 de chacune de deux pages appliquer un lien externe permettant de déplacer de la page1.html à la page2.html et inversement. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. D°) Dans la cellule3 de la page1.html on veut insérer 3 paragraphes à gauche. Ces paragraphes doivent comporter des signets nommés respectivement « para1 », « para2 » et « para3 » ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. E°) Appliquer à l’arrière plan de chaque page l’image3. L’adressage doit être relatif. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. F°) Dans la cellule2 de la page2.html un lien permettant de se déplacer vers la paragraphe « para3 » de la page1.html ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. G°) Ecrire le code HTML de chaque page ? ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………………………… Devoirs et examens sur : www.kiteb.net Cours réalisé par : Ilahi Néjib TP2 Page 1 sur 4 TP N°2 : Objectifs : Savoir créer un formulaire en HTML.. Savoir insérer n'importe quel élément HTML de base dans une balise FORM (textes,boutons,tableaux,liens,...) Intérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents 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 façon générale à 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 délimités par la balise <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède les attributs obligatoires suivants: • METHOD indique sous quelle forme seront envoyées les réponses « POST » est la valeur qui correspond à un envoi de données stockées dans le corps de la requête, tandis que « GET » correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation (pour plus de renseignement sur les méthodes 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: <FORM METHOD="POST" ou "GET" ACTION="url" > ... </FORM> Voici quelques exemples de balises FORM: <FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"> <FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi"> A l'intérieur de la balise FORM... La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont permettre à l'utilisateur de choisir ou de saisir des données, ensemble de données qui seront envoyées à l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par l'attribut METHOD. TP TIC (HTML) Matière : Technologie de l’information et de la communication Classe : 4 SI Enseignant : Ilahi Néjib Durée : 2 heures Date : Octobre 07 A.S :2007/2008 Devoirs et examens sur : www.kiteb.net Cours réalisé par : Ilahi Néjib TP2 Page 2 sur 4 Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes,boutons,tableaux,liens,...) mais il est surtout intéressant d'insérer des éléments interactifs. Ces éléments 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 créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante: <INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément"> L'attribut name est essentiel car il permettra au script CGI de connaître le champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value. L'attribut type permet de préciser le type d'élément que représente 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 envoyée au CGI • hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur • file: il s'agit d'un champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser le type de données pouvant être envoyées grâce à 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 précisé par son attribut SRC • password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d'astérisques afin de camoufler la saisie de l'utilisateur • radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons radios devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera envoyé au CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut • reset: il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir l'ensemble des éléments du formulaire à leurs valeurs par défaut • submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut être précisé grâce à 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 définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à l'attribut maxlength La balise TEXTAREA La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise INPUT. Cette balise possède les attributs suivants: • cols: représente le nombre de caractères que peut contenir une ligne • rows: représente le nombre de lignes • name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur • readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ • value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur La balise SELECT Devoirs et examens sur : www.kiteb.net Cours réalisé par : Ilahi Néjib TP2 Page 3 sur 4 La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à l'intérieur de celle-ci). Les attributs de cette balise sont: • name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur • disabled: permet de créer une liste désactivée, c'est-à-dire affichée en grisée • size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que uploads/Finance/ tp-si-tic-html 1 .pdf