TP4 Encgd Ig3

Filire : 2me anne TC Matire : Informatique de Gestion II
Enseignant : Pr. Mohcine KODAD
TP 4 : Initiation au langage HTML
NB : Il faut crer un dossier au bureau portant le nom : << Langage_HTML_TP4>>, et pour chaque
travail faire, un sous dossier doit tre cr, exemple travail1 .
Astuce: Pour crer une page web, il suffit de lancer bloc note, crire un code dessus et enregistrer le
avec l'extension ".html"
(1) Rappels:
Un fichier HTML n'est pas compil (ce n'est pas un programme)
Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un
ensemble de convention d'criture
Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont
envoys votre navigateur et le code html est interprt sur VOTRE machine par
VOTRE navigateur
(2) Premire page:

Ouvrez un diteur de texte quelconque et crez un nouveau fichier baptis "index.html". Le texte
que vous crirez dans ce fichier est le code html qui sera interprt par un navigateur pour visualiser
le rsultat. Ce code est constitu de texte et d'indications de mise en page. Ces indications sont
appeles balises.
Les balises
Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise>
Une balise peut tre seule, et son effet s'applique l'endroit o elle se trouve, comme par exemple:
<br/> qui sert sauter une ligne, ou en couple balise ouvrante <balise> balise fermante </balise>
pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve
entre la balise ouvrante et la balise fermante.
Structure de la page web

Pour dbuter, recopier les lignes suivantes dans votre fichier index.html :
<html>
<head>
<title>Ma premiere page web !!</title>
</head>
<body>
</body>
</html>
Pour visualiser le rsultat, ouvrez ce ficher avec votre navigateur web. Observez et commentez le
rsultat. Ajoutez du texte maintenant dans la section body et ractualis votre page dans le
navigateur. Commentez.
1
Elments de base :
Dans la section body de votre page web, essayez et testez les effets des balises suivantes:
<b>
<i>
<u>
<strike>
<br/>
<p>
<h1>
<h2>
..
<h6>
<hr/>
<pre>
<sub>
<sup>
La balise <font>:
Pour ajouter de la couleur sur une portion de votre texte on utilise la balise suivante :
<FONT COLOR="#FF0000"></FONT>
#FF0000 dsigne une couleur en composantes rouge (FF), verte (00) et bleue (00), soit ici donc un
rouge pur. Comme on peut mettre directement le nom de la couleur en anglais.
Dans la section body d'une nouvelle page web, essayez, testez et observez les effets des attributs de
la balise <font> suivants:
color
size
title
face
Aprs avoir tester les attributs prcdents mettez un code qui vous permet de gnrer ce rsultats :
ABCDEF
La balise <marquee> obsolte mais bien connaitre:
Dans la section body d'une nouvelle page web, saisissez, essayez, testez et observez les effets de ce
code :
<marquee>Texte 1 *** Texte 2 *** Texte 3</marquee>

<marquee direction="up">
Ce texte va dfiler de bas en haut
</marquee>
<marquee direction="down" width="250" height="200"
behavior="alternate" style="border:solid">
<marquee behavior="alternate">
Ce texte va rebondir
</marquee>
</marquee>
Listes
il existe 3 types des listes en html, liste des dfinitions, liste ordonne et liste non ordonne.
La structure d'un liste de dfinition est la suivante:
<dl>
<dt>Terme 1</dt>
<dd>Description du Terme 1</dd>
2
<dt>Terme 2</dt>
<dd>Description du Terme 2</dd>
</dl>
La structure d'un liste ordonne est la suivante:

<ol>
<li>Item 1</li>
<li>Item2</li>
</ol>
La structure d'un liste non ordonne est la suivante:

<ul>
<li>Item 1</li>
<li>Item2</li>
</ul>
Certain type de listes peut accepter comme attribut "type" et des fois "start" pour la liste ordonne.
Gnrer dans une nouvelle page web un code permettant d'afficher trois exemple pour tester
chacune des listes.
Images:
Nous allons maintenant voir comment insrer une image dans une page web. Commencez par
chercher sur votre machine une image. La balise pour insrer une image est IMG. Elle s'utilise selon
le modle suivant :
<img src="monimage.jpg">
Les attributs essentiel de la balise image sont border, width, height.
Essayez d'afficher une image dans une nouvelle page et jouez dans la taille de l'image avec les deux
attributs prcits.
Liens:
Liens externes:
<A HREF="url" TARGET="">Ceci est un lien !</A>
La proprit TARGET (optionnelle) indique dans quelle page s'ouvre le document. Par dfaut le
document s'ouvre dans la page courante. Pour faire en sorte qu'il s'ouvre dans une nouvelle page on
donnera a TARGET la valeur _blank (entre symboles "").
Liens internes:
Dans un document de trs grande taille, on peut souhaiter placer quelques positions de rfrences
vers lesquels ensuite crer des liens. Ces liens guident vers un autre endroit du mme document et
sont qualifis de liens internes. Pour placer une position de rfrence dans le texte, et lui donner un
nom (le couple de balises peut ou pas entourer du texte, c'est un marqueur invisible) :
<A NAME="nom"></A>
Pour se rendre une position de rfrence dans le texte, on rutilise son nom :
<A HREF="#nom" >Lien vers une position du document courant</A>
TAF : Crez une page web contenant un trs long texte (quelconque, mais plusieurs page-crans de
longueur), en haut de la page crer deux liens, un lien qui sera un lien interne en bas vers une
description donne. le deuxime lien est un lien externe qui ouvre une nouvelle page et un lien
externe dans la page ouverte qui vous retourne vers la page prcdente.
3
Tableaux:
Les listes permettent un premier ordre de prsentation des donnes. Si l'on souhaite mieux
structurer encore cette prsentation et avoir plus de libert, les tableaux permettent de disposer des
lments (images, textes, etc...) selon deux dimensions : lignes et colonnes. Ils servent autant
afficher un classique tableau de nombres qu'a placer des lments sur une page. Les tableaux (balise
<TABLE>) sont dfinis comme tant des suites de lignes (balise <TR>, "table row"). Dans chaque ligne
on dfinit une ou plusieurs cellules (balise <TD>, "table data"). Essayez de reproduire le tableau
suivant, sachons que le taille de tableau et 900 en largeur et la taille de chaque cellule (Z1, Z2,..., Z6)
est 150px en largeur :
T1 T2 T3 T4
S1 S2 S3 S4
M1 M2 M3
M4 V1 V2 V3
Z1 Z2 Z3 Z4 Z5 Z6
TAF rsum:

TP4 Encgd Ig3

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

TP4 Encgd Ig3

Загружено:

Авторское право:

Доступные форматы

Filire : 2me anne TC Matire : Informatique de Gestion II

Enseignant : Pr. Mohcine KODAD

TP 4 : Initiation au langage HTML

(2) Premire page:

Structure de la page web

<marquee>Texte 1 * Texte 2 * Texte 3</marquee>

La structure d'un liste ordonne est la suivante:

La structure d'un liste non ordonne est la suivante:

Вам также может понравиться