Vous êtes sur la page 1sur 7

Atelier 1

Exercices 1 : Ralisez la page suivante en ne cherchant utiliser le HTML uniquement pour dcrire le contenu, sans ide de prsentation : 1- Ralisez le tableau suivant, avec la prsentation adapte :

Exercice 2 : Listes 2.1. Ralisez les diffrentes listes suivantes : Liste puce :

Adresse : B.P 5200 Jawhara El jadida Tl : (212)23 693 0 Fax : (212)23 693 1 E-mail : hasnaoui@ucd.ac.ma

Combinaison de listes numrote et puce : 1. Ecole primaire : 1re : Yverdon 2e-3e : Echallens 2. Ecole secondaire : o 1re-3e : Echallens o 4e-6e scient. : Lausanne, Bthusy 3. Gymnase : Lausanne, La Cit 4. Universit : Lausanne, facult Physique

2.2 Voici des listes une liste non ordonne


o o

lment 1 lment 2 lment 3 lment 3 une liste ordonne

1. 2. iii. d.

lment 1 lment 2 lment 3 lment 4 une autre liste ordonne

1. une sous liste 1. sous-lment 1 2. sous-lment 2 5. sous-lment 5 6. sous-lment 6 2. lment 2 iii. lment 3 d. lment 4 une dernire liste ordonne 5. lment 5 6. lment 6 vii. lment 7 h. lment 8

2.3. Exemple de liste non numrote avec TYPE Langages et formats


o o

HTML VRML PDF JavaScript Java

Donner des exemple de liens


Lien de base
Un paragraphe contenant un lien externe. Lien interne Lien dans un mme fichier

Lien denvoie dun message par e-mail Envoyer un message! Liens relatifs et listes
Liens relatifs
Voir le fichier racine.zip.

Exercice 3 : Raliser les tableaux suivants :


Titre du tableau 1re colonne 2me colonne 3me colonne A D b c d e A1 A2 B E C F

Fusion

Marque Citron AX CHOISISSEZ CINEMA

Comparatif modle conomique Modle Vitesse Consommation Type Numero de srie en km/heure en litre/100 km 234.34 6789 132 126 5,7 5,5 AT67B8

Peugeot 106 B2

Films l'affiche...

CONCERT O irez-vous cette semaine ? THEATRE Un spectacle exceptionnel 2 6 9 10 13 Vgtaux Fruits Fleurs 3 7 11 4

Exercice 4 : Raliser le Formulaire suivant

Exemples de formulaires
Reproduire les lments de formulaire suivants...

Balise input
Champ de saisie avec <input
http://

type="text"...>

Cases cocher
case 1. case 2 pr-coche. case 3.

Boutons radio
sal sucr sans saveur

Envoyer un fichier... Champ de saisie de mot de passe

Soumettre un formulaire...
Envoyer

... ou le remettre zro !


Petit texte... Mettre zro

Champ de saisie long (balise textarea)


C'est l'histoire d'un fou qui repeint son plaf l'chelle !"

Balise select
Format par dfaut
beaufort

On raffine un peu...
saint nectaire camembert beaufort roblochon

Un exemple combinant plusieurs types de champs


Votre adresse de courrier lectronique...
nom@fournisseur.domaine

Tapez ici votre commentaire :


Votre commentaire...

Envoyer

Annuler

Exercice 6 : Insrer une image diffrent endroit du texte : voir cours

Voici une bonne image d'un ancien billding

Exercice 6 : Cadre Essayer de lire le cours et le complment du cours que je vous ai donn pour raliser un cadre avec un menu

Le menu des exemples dans la fentre de gauche sera comme suit :


exemple 1 exemple 2 exemple liste Exemple tableau Exemple image Exemple style Titres Liens Exercice 1 Exercice 2 Frame ..... ..

Dans la fentre de droite on aura lexcution du lien en question lorsquon cliquera dessus