République Algérienne Démocratique et Populaire

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

UNIVERSITÉ DE BLIDA 1, Faculté des Sciences, Département d’Informatique

Développement WEB(L2)

TP3
Dr. MIDOUN Khadidja
K_miodun@esi.dz

2020-2021
 Images & vidéos
Dr. MIDOUN Khadidja 5/19/2021 2
 EXERCICE 04

Dr. MIDOUN Khadidja 5/19/2021 3

Exercice 4
Exercice 4 (Manipulation des images et des vidéos) :
Image-lien
1. Choisir une image sur votre disque local
2. Créer une page HTML ne comportant que cette image.
3. Changer les dimensions de l’image à 500 pixels de largeur et 400 pixels de
hauteur.
4. La rendre globalement active : en cliquant sur cette image, on arrive à un
URL par défaut au choix (par exemple un lien externe www.google.com ).
Insertion d’une vidéo
1. Insérer une vidéo de votre choix dans une page html.

Dr. MIDOUN Khadidja 5/19/2021 4

Exercice 3:
Solution:
1. Choisir une image sur votre disque local
2. Créer une page HTML ne comportant que cette image.

Dr. MIDOUN Khadidja 5/19/2021 5

Exercice 3:
Solution:
3. Changer les dimensions de l’image à 500 pixels de largeur et 400 pixels de hauteur.

Dr. MIDOUN Khadidja 5/19/2021 6

Exercice 3:
Solution:
3. La rendre globalement active : en cliquant sur cette image, on arrive à un URL par
défaut au choix (par exemple un lien externe www.google.com ).

Dr. MIDOUN Khadidja 5/19/2021 7

Exercice 3:
Solution:
Insertion d’une vidéo
1. Insérer une vidéo de votre choix dans une page html.

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video
loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first
recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Dr. MIDOUN Khadidja 5/19/2021 8

 Formulaire
Dr. MIDOUN Khadidja 5/19/2021 9
Structure d’un Formulaire
 Un formulaire HTML est utilisé pour collecter les données saisies par l'utilisateur.
 La balise <form>: Elle est utilisé pour créer un formulaire HTML pour la saisie
utilisateur. C’est est un conteneur pour différents types d'éléments d'entrée, tels que:
text fields, checkboxes, radio buttons, submit buttons,
1) Text Fields: définit un champ de saisie sur une seule ligne pour la saisie de texte.

Dr. MIDOUN Khadidja 5/19/2021 10

Structure d’un Formulaire
1) Radio Buttons: il permettait à un utilisateur de sélectionner l'un parmi un nombre
limité de choix..

Dr. MIDOUN Khadidja 5/19/2021 11

Structure d’un Formulaire
1) Checkboxes: il permet à un utilisateur de sélectionner ZERO ou PLUS d'options d'un
nombre limité de choix.

Dr. MIDOUN Khadidja 5/19/2021 12

Structure d’un Formulaire
1) Submit button: defines a button for submitting the form data to a form-handler. The form-handler is typically a
file on the server with a script for processing input data. The form-handler is specified in the form's action
attribute.

Dr. MIDOUN Khadidja 5/19/2021 13

Exercice 3
• La page "contact.html"

Dr. MIDOUN Khadidja 5/19/2021 14

Exercice 2:
1. Ouvrir le dossier «site»
2. Créer un fichiers html avec le nom « contct.html"

Dr. MIDOUN Khadidja 5/19/2021 15

Exercice 2:

Dr. MIDOUN Khadidja 5/19/2021 16

 Devoir pour TP04

Dr. MIDOUN Khadidja 5/19/2021 17

Exercice
Exercice (Tableaux) :
Reconstituer le tableau suivant :

Dr. MIDOUN Khadidja 5/19/2021 18

 Merci pour votre attention

k_midoun@esi.dz

Dr. MIDOUN Khadidja 5/19/2021 19