gestion des systèmes d’information term stg...

Gestion des Systèmes d’Information Term STG GSI

CS – Apprentissage interactif du HTML 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



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>



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 :



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



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



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



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



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



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 :



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 :



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



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>



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



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.



Balises Description Attributs Rôle <a href="…..">

<a name="…….">



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>



Balises Description Attribut(s) facultatif(s)

<form>

<input>

<textarea>

<select>

<option>

<button>



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.



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)

gestion des systèmes d’information term stg...

Documents