Gestion des Systèmes d’Information Term STG...
Transcript of Gestion des Systèmes d’Information Term STG...
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 1 sur 16
INITIATION HTML:
I. GRILLE D'OBSERVATION 1 : Structure générale, texte Le langage HTML permet de créer des pages pouvant être lues par des navigateurs sur le
réseau internet.
Vous allez apprendre les bases de ce langage de façon interactive grâce à l'application
suivante:
Ouvrir: "part1.chm"
Vous allez donc modifier le code à gauche, observer les changements à droite et ainsi
comprendre progressivement le langage HTML :
les balises HTML
les attributs des balises
Code d'un fichier HTML
Résultat de l’interprétation du code par un navigateur : Mozilla, Netscape, internet explorer, ...
Bouton Interpréter pour observer le résultat du code dans la partie droite
Bouton actualiser pour revenir au code
initial et annuler les modifications
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 2 sur 16
Voici le code complet du fichier avec en plus les numéros de ligne :
1 : <HTML>
2 : <head>
3 : <title>mon site personnel à moi</title>
4 : </head>
5 : <body>
6 : <p>Mon site Web</p>
7 : <hr>
8 : <h1>Sommaire</h1>
9 : <p>Ma vie <br>
10 : Mon oeuvre<br>
11 : <b>J'aime</b>
12 : </p>
13 : <p><blockquote> J'aime pas</blockquote></p>
14 : <p><font color="red">Mes photos</font></p>
15 : <p align="center">Photos de vacances</p>
16 : <hr width="200" size="20" align="center"
17 : color="blue">
18 : <p align="right">
19 : <font face="Courier New" size="2">
20 : Photos d'identité</font>
21 : </p>
22 : <p><s><i>Photos perso</i></s></p>
23 :</body>
24 :</HTML>
A. LES BALISES
Le langage HTML utilise des balises servant à MARQUER le texte présenté : exemple : la
balise <P> (voir ligne 6) signifie que l’on veut créer un paragraphe.
Pour découvrir les autres balises, répondez aux questions suivantes :
1.1 à 1.6: pour répondre à cette question vous devez :
- supprimer la ligne 7 - cliquer sur le bouton « Interpréter » - observer les changements à droite : la ligne horizontale en dessous de Mon site Web
disparaît - donc la balise <HR> permet ce créer cette barre horizontale - cliquez sur Actualiser pour revenir au code initial : la barre réapparaît.
Numéro
question
Numéro
de ligne Changement du code Question Réponse
1.1 Ligne 7 Supprimer <HR> A quoi sert la balise <HR> La balise HR permet de créer une barre horizontale 1.2 Ligne 8 Remplacer <H1> par
<H5> A quoi sert la balise <H5>
1.3 Ligne 9 Supprimez la balise <BR>
A quoi sert la balise <BR>
1.4 Ligne 13 Supprimez <BLOCKQUOTE> et </ BLOCKQUOTE>
A quoi sert la balise <BLOCKQUOTE>
1.5 Ligne 14 Mettre « green » à la place de « red »
A quoi sert la balise <FONT>
1.6 Ligne 22 A quoi servent les balises <I> et <S>
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 3 sur 16
B. LES ATTRIBUTS DES BALISES
Certaines balises ont des attributs c’est à dire des propriétés que l’on peut modifier
Numéro
question
Numéro de
ligne
Changement
du code Question Réponse
2.1 Ligne 15
Remplacer
"center" par
"right "
A quoi sert l’attribut ALIGN
de la balise P
2.2 Ligne 16
et 17
Quels sont les attributs de la
balise HR
2.3 Ligne 19 Quels sont les attributs de la
balise FONT
2.4 Quelle est la syntaxe générale
d’une balise HTML ?
C. AMELIORATION DE LA PAGE
La page que vous avez étudiée a des avantages pédagogiques mais son ergonomie est
discutable. Vous pouvez essayer les balises suivantes pour l’améliorer un peu :
pour le corps du document :
BALISE <BODY>
Attributs : BGCOLOR : couleur de fond du document : blue, green, red, ....
3.1- Changez la couleur du fond : bleue (blue), rouge (red) ou verte (green).
pour le titre du document : « Mon site Web »
<MARQUEE></MARQUEE> défilement d’un texte à l’écran dont les attributs sont entre
autres : Nom attribut FONCTION VALEURS
BEHAVIOR Contrôle la fluidité du défilement Scroll, slide, alternate
DIRECTION Sens du déroulement Left, right, up, down
BGCOLOR Couleur du fond Blue, green, ...
LOOP Nombre de répétition d’un défilement complet Infinite ou une valeur numérique (2,3,..)
3.2- Faites en sorte que le titre ("Mon site Web") défile vers la droite, avec un fond
blanc.
3.3- Continuez les modifications pour obtenir la présentation du texte suivant :
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 4 sur 16
II. GRILLE d’OBSERVATION 2 : Les tableaux
Vous avez découvert les bases d’un langage à balise avec l’utilisation de balises et d’attributs.
Vous allez maintenant apprendre l’écriture du code permettant d’obtenir un tableau : ouvrir le
fichier "part2.chm"
Afin de comprendre la structure du code, répondez aux questions suivantes :
A. OBSERVATION DU CODE
1.1 - Listez les attributs de la balise TABLE en précisant leurs rôles ?
Balise TABLE : création d’un tableau :
ALIGN (center, left ou right) Permet de positionner le tableau sur le document
1.2 - A quoi sert la balise TD et quels sont ses attributs ?
(Remarque : la balise TR définit une LIGNE)
BALISE <td> :
1.3 - Changez les couleurs du tableau 1 :
1ère ligne 1ère colonne : couleur verte, bleue, rouge .... au choix
2ème ligne pour les 3 colonnes : autre couleur
3ème ligne 3ème colonne : autre couleur
Vous obtenez un résultat de ce type :
1.4 - Pourquoi avoir utilisé un tableau pour le titre (« Liste des élèves ») du document ?
1.5 : Quelle est la signification de la valeur de l’attribut : #CCFFC
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 5 sur 16
B. CONCEPTION
2.1 - Rajoutez une ligne au tableau avec votre nom, prénom et classe
2.2 - Modifiez le code pour obtenir le résultat suivant à l’écran :
Synthèse des notes Terminale STG
Nom Prénom Matière Moyenne
Bond James Anglais 19
Gates Bill Commerce 18
Liste des élèves
Numéro Client Qualité 1001 Dupond DP 1002 Durand E 1999 Wxyza DP
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 6 sur 16
III. GRILLE d’OBSERVATION 3 : Liens internes et externes
Vous avez découvert les bases d’un langage à balise avec l’utilisation de balises et d’attributs.
Vous allez maintenant apprendre l’écriture du code permettant d’obtenir des liens hypertexte:
ouvrir le fichier "part3.chm"
A. OBSERVATION DU CODE
Les liens permettent de naviguer à l’intérieur d’une page, entre pages ou entre sites internet.
1.1 - A partir des ressources fournies, construisez l’arborescence du site.
1.2 - Copier le code Html de part3 dans un document Word et en vous aidant de l’exécution
commentez le code.
1.3 - Quelle différence observez-vous entre le lien fait sur le texte "Seconde IGC" et le lien
fait sur le texte " Pour en savoir plus ... "
B. LES ANCRES
Les ancres permettent de naviguer à l’intérieur d’une page HTML. L’ancre est composée de
deux éléments :
l’ancre de départ (HREF) et l’ancre d’arrivée (NAME).
2.1- Quelle partie du code permet de définir l’ancre (ancre de départ ET ancre d’arrivée) sur
le texte "Seconde IGC" ?
2.2- Créez l’ancre sur le texte "Première STG" qui permettra d’aller vers le paragraphe
"Première STG".
2.3- De même, créez l’ancre sur le texte "Terminale STG" qui permettra d’aller vers le
paragraphe "Terminale STG".
2.4 - Créez une ancre permettant de revenir au début de la page et placée à la fin de chaque
paragraphe (IGC, première et terminale).
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 7 sur 16
C. LES LIENS
Les liens permettent de naviguer entre des pages HTML d’un même site ou de sites
différents.
Pour créer des liens, il faut d’abord avoir conçu la structure du site. (cf. question 1.1)
3.1 - Quelle est la structure du code définissant le lien vers la page "present.htm" dans le
répertoire igc.
3.2 - Ecrire le lien permettant d’aller vers la page "present.htm" dans le répertoire première à
partir du texte "Pour en savoir plus ... " du paragraphe Première STG.
3.3 - Le lien pour retourner vers la page sommaireSTG.htm à partir de la page present.htm
s’écrit de la façon suivante :
<a href= "../sommaireSTG.htm">retour vers le sommaire STG</a> En déduire le lien qui permet d’aller vers la page filieres.htm à partir de la page
sommaireSTG.htm
3.4 - Après avoir observé le contenu du lien qui permet d’aller vers le texte sur le Première
Communication, créez le même type de lien pour la Première Gestion
(nom de l’ancre : "gestion")
3.5 - Complétez les liens pour le paragraphe Terminale (nom des ancres : cgrh, merca, cfe et
gsi)
3.6 - La balise IMG permet d’insérer des images dans une page HTML :
exemple :
<IMG SRC="fleche.gif" ALT="c’est l’image d’une flèche"></IMG>
Insérez les images présentes sur le site (stg.gif et logo.gif) sur la page sommaire.htm
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 8 sur 16
IV. GRILLE D'OBSERVATION 4: Les formulaires
Vous avez acquis les bases du HTML en comprenant et en utilisant différentes balises et
leurs attributs ; il est temps d’utiliser des éléments de formulaire, incontournables
notamment pour l’utilisation de bases de données dans un site internet.
Vous devez ouvrir le fichier "part4.htm" et vous obtenez cette interprétation du code
HTML avec votre navigateur.
Exemple :
Vous pouvez utilisez ce formulaire en complétant le champ de texte TTC et en cliquant sur le
bouton OK ; le montant de la TVA est calculé grâce à un script "javascript" contenu dans le
fichier "resultat.js".
Attention: l'écriture des nombres à virgule s'exprime avec un point.
Exemple :
Pour accéder au code HTML de votre navigateur: clic droit, puis sélectionner la ligne "Code
source de la page":
Pour observer les effets d’un changement du code HTML vous devez :
Modifier le code dans l’éditeur de texte ET ENREGISTRER
Revenir dans le navigateur et cliquer sur le bouton ACTUALISER
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 9 sur 16
Le code du fichier "part4.htm" s’affiche dans un éditeur de texte :
1 : <html>
2 : <head>
3 : <title>Document sans-titre 4 : </title> 5 : <script language="javascript" src="resultat.js"> 6 : </script>
7 : </head>
8 : <body bgcolor="#FFFFFF"> 9 : <form name="calcul"> 10 : <p>HT : 11 : <input type="text" name="ttc" size="30" maxlength="50" value="0" tabindex="1"> 12 : <br> 13 : TVA : 14 : <input type="text" name="tva" size="30" maxlength="50" value="0" readonly> 15 : <br> 16 : </p> 17 : <p align ="center"> 18 : <input type="button" value="OK" name="b_ok" onclick="calcul_ht();"> 19 : <br> 20 : </p> 21 : </form>
22 : </body>
23 : </html>
Numéro
question
Numéro de
ligne
Changement ou
observation du
Code
Question Réponse
4.1 Ligne … …………………
…….. Modifier le titre de cette page. Voir à l’écran
4.2 Ligne 9 FORM Quel est le nom du formulaire ?
4.3 Ligne 11 INPUT A quoi sert la balise INPUT ?
4.4 Ligne 11 INPUT (attribut) Modifier la taille pour obtenir un
champ de 50.
Attribut :
4.5 Ligne 14 INPUT (attribut) A quoi sert l’attribut "readonly"?
4.6 Ligne 11 INPUT (attribut)
Modifier le texte par défaut du
champ TTC : "Entrez le montant
TTC".
Attribut :
Au terme de ces 6 questions, vous devez obtenir :
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 10 sur 16
L’attribut "tabindex" de la balise INPUT permet de déterminer l’ordre des tabulations ;
le chiffre indique l’ordre dans lequel les objets du formulaire seront atteints.
Par défaut, l’ordre des tabulations est le suivant : champ ‘TTC’ puis champ ‘TVA’ puis
bouton ‘OK’.
4.7 - Modifiez le code pour que l’utilisateur puisse passer directement du champ ‘TTC’ au
bouton ‘OK’ grâce à une seule tabulation.
4.8 - Vous devez maintenant ajouter un champ de texte nommé ‘ht’, non modifiable par
l’utilisateur (attention à l’ordre des tabulations) et ayant comme valeur par défaut ‘0’.
Vous devez obtenir alors l’interprétation suivante du code HTML et l’exécution du script
pour une valeur de TTC de 119.6 :
Nous allons maintenant étudier cette ligne :
18 : <input type="button" value="OK" name="b_ok" onclick="calcul_ht();">
La procédure ‘calcul_ht’ est appelée lors du déclenchement de l’événement ‘Click’ sur
l’objet bouton nommé ‘b_ok’ : lorsque l’utilisateur clique sur le bouton OK, le montant de la
TVA et du HT sont calculés.
4.9 - Ajoutez un bouton ‘Mise à zéro‘ permettant de remettre à zéro les différents champs en
utilisant la procédure ‘init’ (la procédure ‘init’ est déjà écrite dans le fichier ‘resultat.js’, vous
devez juste l’appeler).
Voici le résultat final des changements de code :
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 11 sur 16
V. GRILLE D'OBERVATION 5: Les cadres
Nous avons vu comment réaliser une structure de page classique, maintenant nous allons voir
comment organiser les données dans une page. Vous devez ouvrir le fichier "part5.htm"
dans le répertoire "part5" et vous obtenez cette interprétation du code HTML avec votre
navigateur.
5.1 La page vous semble-t-elle différente des autres pages déjà vu? Pourquoi?
Ouvrez le fichier part5.htm, en utilisant un éditeur de texte 1 : <html> 2 : <head> 3 : <title>Texte du titre universel</title> 4 : </head> 5 : <frameset cols="250,*"> 6 : <frame src="rep_part5/sommaire.htm" name="Sommaire" 7 : scrolling="yes" marginwidth="3" marginheight="30"> 8 : <frame src="rep_part5/pagedaccueil.htm" name="donnees" marginwidth="60" 9 : marginheight="30"> 10 : <noframes> 11 : <p>Ce projet utilise des cadres. Chez vous les cadres ne sont pas affichés.</p> 12 : </noframes> 13 : </frameset> 14 : </html>
5.2 Que remarquez-vous dans la structure de cette page?
Numéro
question
Numéro de
ligne
Changement ou
observation du
Code
Question Réponse
5.3 Ligne 5 Remplacer "250,
*" par "30, 100" Que représente cols"250,*"?
5.4 Ligne 6 A quoi sert la propriété "src"
5.5 Ligne 6
Remplacer
name="Sommaire"
par "top"
A quoi sert la propriété name?
5.6 Ligne 7
Remplacer la
valeur de scrolling
à "no"
A quoi sert la propriété scrolling?
Il est possible de mettre autant de cadre qu'on le souhaite sur une page, cependant il est
nécessaire de faire attention à la lisibilité de la page. Nous allons donc rajouter un cadre en
haut de la page.
L'attribut "rows" de la balise <frameset> permet de séparer la page en 2 horizontalement.
5.7 Modifier le code, en rajoutant une balise <frameset> avec une hauteur de 64, et une balise
<frame> que vous nommerez "top", qui fait un lien vers le fichier "top.htm" qui se trouve
dans le répertoire "rep_part5".
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 12 sur 16
SYNTHESE PARTIE 1 : LES BASES DU HTML
I. LA STRUCTURE DU DOCUMENT
Elle commence toujours par la balise <HTML> et finit par </HTML> : ce qui est écrit au delà
ne sera pas interprété par le navigateur.
Une page HTML comprend deux éléments principaux :
l’en-tête encadrée par la balise : HEAD :
Son contenu n’apparaît pas dans la fenêtre du navigateur mais sert à :
- préciser le titre du document (TITLE) qui apparaît en haut du navigateur et sera le nom par
défaut de la page si l’utilisateur enregistre l’adresse dans les favoris (à ne pas confondre avec le
nom du fichier)
- fournir des informations sur le contenu de la page (METANAME) pour permettre le
référencement par les moteurs de recherche comme Altavista.
- présenter des scripts au début du document dans les différents langages interprétés par le
navigateur utilisé : javascript, PHP, VBS, ...
le corps du document : balise BODY
Il contient les informations affichées après interprétation par le navigateur.
La structure générale d’une page HTML est ainsi :
<HTML> <HEAD> <TITLE>titre de la page </TITLE> </HEAD>
<BODY> <P>texte affiche dans le navigateur</P> </BODY> </HTML>
II. LES BALISES HTML, leurs ATRIBUTS et leurs VALEURS
Le HTML est un langage à balise : les balises marquent un élément pour préciser sa présentation
une fois interprétée par le navigateur.
Elles sont encadrées par les signes < et > ; la fin de la balise est notée par un slash : < et />
Exemple : <P>Bonjour le monde !</P>
Certaines balises sont simples comme <BR>
Chaque balise a un ou plusieurs attributs qui spécifient l’application de la balise ; les attributs
peuvent avoir un ensemble de valeurs.
A partir de la grille d’observation 1, complétez le tableau suivant :
Balises Fonction Attributs Rôle Valeur
<p>…</p> Marque un
paragraphe ALIGN Aligne le texte CENTER, LEFT, RIGHT
<HR>
<H …>
<BR>
<BLOCKQUOTE>
<FONT>
<I>
<S>
<BODY>
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 13 sur 16
SYNTHESE PARTIE 2 : LES TABLEAUX
Comme pour la partie précédente, complétez le tableau suivant à partir de ce que vous avez
appris grâce à la grille d’observation 2 :
Balises Description Attributs
<table>…</table>
<tr>….</tr>
<td>…</td>
Pour les en-têtes des
colonnes on pourra aussi
utiliser la balise:
<th>…</th>
D'autres attributs de balise HTML utilisés:
Attributs facultatifs Balise(s)
Concernée(s)
Valeur par
défaut Description
colspan (="nb de colonnes fusionnées") <td>, <th> 1 Fusion de colonnes
rowspan (="nb de lignes fusionnées") <td>, <th> 1 Fusion de lignes
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 14 sur 16
SYNTHESE PARTIE 3 : LES LIENS
Un lien hypertexte est une association à sens unique entre une source et une cible. Un clic
sur un lien ouvre un fichier de type:
Texte ou HTML, affiché par le navigateur à la place ou en plus de la page actuelle.
Autres: audio, vidéo: lien hypermédia, pour lequel le navigateur fera
éventuellement appel à une application appropriée.
Selon leur destination, on peut distinguer 2 types de liens dans un document HTML:
Les liens internes:……………………….
Les liens externes:………………………..
Un ensemble de documents HTML liés entre eux et ayant une même racine constitue un
site.
Comme pour la partie précédente, complétez le tableau suivant à partir de ce que vous avez
appris grâce à la grille d’observation 3 :
Balises Description Attributs Rôle <a href="…..">
<a name="…….">
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 15 sur 16
SYNTHESE PARTIE 4 : LES FORMULAIRES
Les pages Web construites en HTML/XHTML permettent de présenter et de diffuser de
l'information en provenance d'un serveur Web vers un navigateur client.
Un "dialogue" client-serveur s'instaure lorsque le client peut à son tour envoyer des
informations au serveur, notamment par le biais de formulaires:
1. Recueil d'information à l'aide de contrôles dans un formulaire HTML.
2. Envoi des informations au serveur.
3. Traitement des informations par le serveur ( à l'aide d'un langage adapté
tel que PHP ou Perl).
4. Renvoi éventuel d'information HTML au client (réponse, accusé
réception, demande de précision, …).
Une page peut comprendre un à plusieurs formulaires dans sa section <body>.
Tous les contrôles du formulaires doivent être insérés entre les balises <form>…….</form>
Comme pour la partie précédente, complétez le tableau suivant à partir de ce que vous avez
appris grâce à la grille d’observation 4 :
Balises Description Attribut(s) facultatif(s)
<form>
<input>
<textarea>
<select>
<option>
<button>
Gestion des Systèmes d’Information Term STG GSI
CS – Apprentissage interactif du HTML Page 16 sur 16
SYNTHESE PARTIE 5 : LES CADRES
Les cadres fractionnent un document HTML en plusieurs zones indépendantes les unes des
autres:
La balise <frameset> remplace la balise <body>
A l'intérieur de la balise <frameset>, chaque balise <frame> définit un cadre.
La division en cadres peut être horizontale et/ou verticale.
Comme pour la partie précédente, complétez le tableau suivant à partir de ce que vous avez
appris grâce à la grille d’observation 5 :
Balises Description Attribut(s) facultatif(s)
<frameset>
<frame>
Remarque : on peut rendre certaines parties invisibles
Les cadres, en supprimant les bordures: frameborder="no"
Les ascenseurs, scrolling="no" (le contenu des cadres ne devant pas dépasser la taille
allouée)