TD1: HTML/CSS Exercice 1 : Hello world 1

TD1: HTML/CSS
Enseignant : Mohamed Belhassen
TP 1
Exercice 1 : Hello world
1- Ecrivez le code source d’une page web basique contenant l’expression « Hello World » mise
dans un titre de niveau 1.
2- Insérer une image dont le nom est « hello.png »
3- Si on insère du texte suite à l’image. Est
Est-ce
ce qu’il va s’afficher à coté de l’image ou au dessous
de l’image ? Argumentez
tez votre réponse.
Exercice 2: Les listes en XHTML
Eléments de cours :
-
Liste non numérotée (Unnumbered
Unnumbered List):
Pour créer une liste à puce, on utilise la b
balise <ul>.. Pour ajouter un élément à la liste on lui encadre
entre la balise <li> et </li>.. Pour changer l’aspect visuel de la liste non numérotée, on attribue l’une
des valeurs (disc, circle ou square) à la propriété type de la balise <ul> ou <li> :
Exemple :
<ul type="disc">
<li> élément </li>
<li> élément </li>
</ul>
Remarque :
On peut également définir une puce à partir d’une image ((puce-image)) en utilisant la propriété CSS
"list-style-image".
Exemple :
<ul style="list-style-image:
image: URL(image.gif)">
- Liste numérotée ("Ordered") :
Une liste numérotée (ordered list) peut être insérée grâce à la balise <ol>. Pour contrôler le numéro
ou la lettre de départ de la liste, on peut utiliser la propriété start. Le type de la liste peut être
contrôlé en utilisant la propriété type qui peut prendre les valeurs ((1, a, A, i, I).
Exemple :
<ol start ="2" type="1">
<li> élément </li>
<li> élément </li>
</ol>
1
Document téléchargé depuis : www.fahamni.tn (La distribution est interdite : Tous les droits sont réservés)
TD1: HTML/CSS
-
Enseignant : Mohamed Belhassen
Liste de définition (Definition List)
List): La liste de définitions, qui est créée à l'aide de l'élément <dl>,
consiste généralement en une succession de couples terme/définition : <dt> pour le terme (data
term), <dd> pour sa définition (data definition).
Exemple :
<dl>
<dt> terme </dt>
<dd>
dd> description du terme </dd>
</dl>
Travail demandé :
1) Donnez le code source permettant d’obtenir les listes ci
ci-dessous en respectant le DTD
« XHTML 1.0 Transitional
Transitional» :
2) Ecrivez le code source de chacune des listes suivantes :
3) Donnez le code source de la liste de définition suivante :
Travail à la maison :
Transformez la liste de la question 2.2 en une liste non numéroté où les puces sont
représentées par une image à chercher à partir du web. (google/terme de
recherche : puce gif).
2
Document téléchargé depuis : www.fahamni.tn (La distribution est interdite : Tous les droits sont réservés)