HTML (Ii)

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="img1.jpg" 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
http://chihi-lotfi.jimdo.com 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="fond.jpg" 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.
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
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

HTML (Ii)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML (Ii)

Transféré par

Droits d'auteur :

Formats disponibles

Lycée Bousalem

Niveau : 3 Sciences de l’Informatique

<hn> titre </hn>

 La balise <Hn> permet de définir un titre de niveau n ( 1≤n ≤6)

<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

Activité 6 : insérer une image de fond

<body background="image" text="couleur" link="couleur" alink="couleur" vlink="couleur">

Activité 7 : attribuer une couleur de fond

<body bgcolor="image" text="couleur" link="couleur" alink="couleur" vlink="couleur">

Activité 8.b : Liste non ordonnée (à puces)

Vous aimerez peut-être aussi