Université Cadi Ayyad

Filière : SMI
Faculté Polydisciplinaire
Module : Développement Web
Département Mathématiques
Semestre : 3
et Informatique
Pr. MOURDI Youssef
Safi

TD 1 : Langage HTML – Notions de base

Exercice 1
Réaliser un CV simple comme illustré par la copie-écran ci-dessous.

Exercice 2
Réalisez les différentes listes suivantes :

1. liste à puce: tester les 3 types (disc, circle, square)

● nom
● prénom
● adresse
2. Affichez le petit dessin ci-dessous (texte pré-formaté)
 Université Cadi Ayyad
Filière : SMI
Faculté Polydisciplinaire
Module : Développement Web
Département Mathématiques
Semestre : 3
et Informatique
Pr. MOURDI Youssef
Safi

||
/==||=====\
/==========\
| _ __ |
| | | |__| |
|_|_|_____|

Exercice 3
Créez une page html “index.html”.

Dans le même dossier, créez un dossier nommé “pages” où vous allez créer 4 pages
html (comme illustré dans la figure suivante) que vous allez nommer : accueil.html,
presentation.html, realisation.html et contact.html.

Dans la page “index.html”, créer des liens vers ces 4 pages.

Exercice 4
Vous allez reprendre les pages précédentes afin d'intégrer une image sur chacune
d’elles. Par exemple:
 Université Cadi Ayyad
Filière : SMI
Faculté Polydisciplinaire
Module : Développement Web
Département Mathématiques
Semestre : 3
et Informatique
Pr. MOURDI Youssef
Safi

Exercice 5
L'objectif est de créer votre CV en ligne. Voici ce qu’on souhaite voir apparaître sur
votre CV:

- Votre nom, en titre principal

- Une courte phrase qui vous décrit, ou une citation, en-dessous du nom
- Une photo miniature, sur laquelle on pourra cliquer pour avoir une version
agrandie
- 3 sections délimitées par des titres différents :
● Mon expérience
● Mes compétences
● Ma formation
Pensez à bien utiliser des balises de titre, de paragraphe et des listes à puces lorsque
cela vous semble nécessaire. Lorsque vous utiliserez le nom de votre établissement,
ajouter un lien hypertexte qui va vous dirigez vers le site officiel.

Pour chaque section (Formations, Expériences professionnelles, ...) créer une page
HTML correspondante. Cette page contiendra les informations adéquates et s’ouvrira
une fois on clique sur le titre de la section ou le la phrase “plus de détails ...”. Voici
un exemple du CV que vous devez créer:
 Université Cadi Ayyad
Filière : SMI
Faculté Polydisciplinaire
Module : Développement Web
Département Mathématiques
Semestre : 3
et Informatique
Pr. MOURDI Youssef
Safi