Lycée Bousalem
Niveau : 3 Sciences de l’Informatique
TECHNOLOGIES DE L’INFORMATION ET DE LA COMMUNICATION
Chapitre I : LE LANGAGE HTML
2. Les titres :
Le langage HTML offre la possibilité de créer des titres avec plusieurs niveaux hiérarchiques pour
diviser le document web en plusieurs parties séparées.
Activité 4
<html>
<head><title> Les titres </title></head>
<body>
<p>Actualités</p>
<hr>
<h1> High Tech </h1>
<h2> Programmation </h2>
<h3> Web </h3>
<h4> Html </h4>
<h5> Balises </h5>
<h6> Exemples </h6>
</body>
</html>
Constatations :
<hn> titre </hn>
La balise <Hn> permet de définir un titre de niveau n ( 1≤n ≤6)
H1 est le niveau de titre le plus grand
H6 est le niveau de titre le plus petit
La balise <Hn> permet le retour automatique à la ligne
3. Les images :
Activité 5 : insérer une image dans un document
<html>
<head>
<title> Les images </title>
</head>
<body>
<h1> Insertion des images </h1>
<hr color="#123456" width="400" size="2">
<img src="[Link]" width=200 height=150 border=1 alt="image 1">
</body>
</html>
Constatations :
<img src="chemin" width ="largeur" height="hauteur" border="taille" alt="texte">
Il est préférable d'utiliser les images de type GIF, PNG et JPEG
[Link] 1
L’attribut src permet de spécifier le fichier image à insérer
L’attribut width permet de préciser la largeur (en pixels) de l’image
L’attribut height permet de préciser la hauteur (en pixels) de l’image
L’attribut border permet de fixer la taille de la bordure (en pixels) de l’image
L’attribut align permet d’indiquer l’alignement de l’image (left ou right)
L’attribut alt permet d’ajouter un texte descriptif à l’image
Activité 6 : insérer une image de fond
<html>
<head>
<title> Insertion d'une image de fond </title>
</head>
<body background="[Link]" text="#800080" link="#DE3163"
alink="#FE1B00" vlink="#FAA401">
</body>
</html>
Constations :
<body background="image" text="couleur" link="couleur" alink="couleur" vlink="couleur">
Activité 7 : attribuer une couleur de fond
<html>
<head>
<title> Insertion d'une image de fond </title>
</head>
<body bgcolor="#E1CE9A" text="#800080" link="#DE3163"
alink="#FE1B00" vlink="#FAA401">
</body>
</html>
Constations :
<body bgcolor="image" text="couleur" link="couleur" alink="couleur" vlink="couleur">
L'image d'arrière-plan sera utilisée avec l'effet mosaïque (si elle est petite)
L’attribut background permet d’insérer une image de fond au document
L’attribut bgcolor permet d’attribuer une couleur de fond
L’attribut text permet de fixer la couleur de texte par défaut
L’attribut link permet de préciser la couleur (par défaut) du lien hypertexte
L’attribut alink permet d’indiquer la couleur du lien hypertexte survolé (par défaut)
L’attribut vlink permet de changer la couleur du lien hypertexte visité (par défaut)
Si les deux attributs bgcolor et background sont utilisés ensemble, l’attribut background
sera appliqué au document.
[Link] 2
4. Les listes :
Activité 8.a : Liste ordonnée (numérotée)
<html>
<head><title> Les listes numérotées </title></head>
<body>
<h2> Les langages web :</h2>
<hr>
<ol type="a">
<li>Langage HTML</li>
<li>Langage Javascript </li>
<li>Langage PHP</li>
<li>Langage ActionScript</li>
</ol>
<hr>
</body>
</html>
Constatations :
La balise <ol> .. </ol> permet de définir une liste ordonnée
L’attribut type ="1" permet de définir une liste numérotée numériquement (par défaut)
L’attribut type ="a" ou type ="A" définit une liste ordonnée alphabétiquement
L’attribut type ="i" ou type ="I" définit une liste ordonnée en chiffres roomains
La balise <li> élément </li> permet d’insérer un élément à la liste
Activité 8.b : Liste non ordonnée (à puces)
<html>
<head><title> Les listes à puces </title></head>
<body>
<h2> Mes langues préférées :</h2>
<hr>
<ul type="square">
<li>Arabe</li>
<li>Anglais </li>
<li>Allemand</li>
<li>Koréen</li>
</ul>
<hr>
</body>
</html>
Constatations :
La balise <ul> .. </ul> permet de définir une liste non ordonnée
L’attribut type ="circle" permet de définir une liste à puces circulaires (par défaut)
L’attribut type ="square" définit une liste à puces carrées
La balise <li> élément </li> permet d’insérer un élément à la liste
[Link] 3
Activité 8.c : Liste de définitions
<html>
<head><title> Les listes de définitions</title></head>
<body>
<h2> Définitions :</h2>
<hr>
<dl type="square">
<dt>Algorithme</dt>
<dd> Un algorithme est une suite ordonnée et finie
d’instructions permettant de résoudre un problème ou
d'obtenir un résultat
</dd>
<dt> Site web</dt>
<dd> Un site web est composé d'un ensemble de documents
structurés, nommés pages web, stockés (hébergés) sur un
ordinateur (serveur) connecté au réseau internet
</dd>
</dl>
<hr>
</body>
</html>
Constatations :
La balise <dl> .. </dl> permet de définir une liste de définitions
La balise <dt> .. </dt> permet de spécifier le terme à définir
La balise <dd> .. </dd> permet de préciser la définition d’un terme de la liste
Les listes de définitions sont utilisées pour créer des index alphabétiques, des définitions
ou encore pour la bibliographie
[Link] 4
