Insérer les fichiers
multimédias dans une page
Co
mpétInsérer
ences les fichiers sons, vidéo, images dans une page
web
Si tuation problème :
P Lors de la création de votre site web, vous voulez
réserver une page pour le R téléchargement des musiques,
des vidéos et photos à vos visiteurs. Comment allez O vous
insérer ces éléments dans votre page ?
G
R
A
M I. INSÉRER UNE IMAGE EN
HTML
M Il fallait utiliser la balise < i mg> pour insérer une
image dans un fichier
E
HTML.
R
La balise < i mg> est représenté par une balise
orpheline et possède deux
E attributs obligatoires : l'attribut src , qui sert à indiquer le
chemin (relatif ou absolu)
N de l’image, et l'attribut al t qui sert à décrire l’image,
dans le cas où l'utilisateur ne
pourrait pas la voir.
H
Commençons donc par placer une image dans le
même dossier que notre
T
fichier HTML et essayons de l’afficher. Ici l’image
M
s’appelle « mon-lycee.png ».
L
100
Insérer les fichiers
multimédias dans une page
Co
<ien
mpét mg src="mon-lycee.png" alt="photo de mon lycée">
ces
II. INSÉRER UN SON EN
HTML
Ici on utilise la balise < audio> qui possède un
attribut obligatoire : l’attribut co ntrols qui ne possède
qu'une valeur (que nous ne sommes donc pas strictement
obligés de préciser car celle-ci est implicite). Celui-ci va
tout simplement afficher les contrôles de base (lecture,
pause, retour au début et volume) de notre piste audio.
Afin de laisser le choix au navigateur d’utiliser le
fichier qu’il souhaite, nous allons utiliser en plus de la
balise < audio> une balise < so urce> (représenté sous
forme de balise orpheline) avec son att ribut src .
101
Insérer les fichiers
<audio controls>
multimédias dans
<source src="musique.mp3">
une page
</audio>
Co
mpétences
III. INSÉRER UNE VIDÉO EN HTML
La balise <video> va s’utiliser exactement comme la
balise <audio>. De plus, il possède les mêmes attributs que
ce dernier à savoir : Un attribut co ntrols pour ajouter les
contrôles de base de la vidéo (lecture, arrêt, etc.) ; une balise
< source> précisant l’adresse de la vidéo
P
R
<video controls>
O
<source src="video.mp4">
G
</video>
R
A
M
M
E
R
EXERCICES E
N
Ex
ercice 1
H
E x ercice 2 T
M
L
E x ercice 3
102
Insérer Eles
x fichiers
ercice 4
multimédias dans une page
Co Ex
ercice 5
mpétences
103
Insérer les tableaux
et formulaires en HTML
C o mpétences :
Insérer un tableau dans une page web
Créer un formulaire
Si tuation problème :
P
R
Le club informatique de votre lycée veut permettre à
chaque candidat à la
O coopérative de s’inscrire dans le site web du lycée en
renseignant ses informations
G personnelles (nom, prénom, âge, …) dans une page web
pour les organiser plutard R et les afficher en lignes et
A
colonnes. Quels sont les éléments permettent de recueillir
les informations des différents candidats ? Que peut-on
utiliser pour organiser les
M
M
données sous forme de lignes
et colonnes ?
E
R I. LES
TABLEAUX
Un tableau qu'est-ce que c'est ? Tout simplement une
suite de lignes et de
E
N colonnes qui forment un ensemble de cellules. Les
tableaux servent avant tout à
présenter des données tabulaires. Un tableau est délimité par
les balises <table>
H
</table>. Le contenu d'un tableau HTML est généré
horizontaleme nt. C'est-à-dire
T
104
qu'il n'est pas créé colonne par colonne mais ligne par
M
ligne. Pour créer un tableau,
L nous commençons par créer des lignes, puis nous insérons
dans ces lignes les cellules
du tableau. Le contenu (textes, images, autres balises) se
trouve uniquement dans les cellules et ne doit se trouver
en aucun cas en dehors.
L es balises utiles
Par défaut, les bordures ne sont pas visible, il faut
rajouter l'attribut border à la balise <table> pour les faire
apparaître. On peut évidemment épaissir les bo rdures en
augmentant la valeur.
Donc pour construire un tableau, nous avons besoin des
balises suivantes :
<table> </table>. C'est cette balise qui permet
d'indiquer le début et la fin
105
d'un tableau.
<caption> </caption> : Titre du tableau
<th> </th> : En-tête du tableau
<tr> </tr> : indique le début et la fin d'une ligne du
tableau ;
<td> </td> : indique le début et la fin du contenu d'une
cellule.
E x e mp l e :
< table border= ‘1’>
< caption >Passagers du vol 377 </ caption >
P
< tr >
R
< th >Nom </ th >
O
< th >Âge </ th >
G
< th >Pays </ th >
</ tr >
R
< tr >
A
< td >Carmen </ td >
M
< td >33 ans </ td >
M
< td >Espagne </ td >
E
</ tr >
R
< tr >
< td >Michelle </ td >
< td >26 ans </ td >
E
< td >États - Unis </ td >
N
</ tr >
106
</ table >
H
T
M
II. LES FORMULAIRES
L
Toute page HTML peut être enrichie de formulaires
interactifs, qui invitent vos visiteurs à renseigner des
informations : saisir du texte, sélectionner des options,
valider avec un bouton . . . tout est possible ! Nous
arrivons cependant aux limites du langage HTML car il faut
ensuite pouvoir analyser les informations que le visiteur a
saisies. ... et cela ne peut pas se faire en langage HTML.
Comme nous allons le voir, le traitement des résultats doit
s'effectuer dans un autre langage, par exemple le PHP.
107
1. D éclaration d’un formulaire
La balise < f orm> </form> est la balise principale du
formulaire, elle permet d'en indiquer le début et la fin.
Comment envoyer le texte saisi par le visiteur ? Une fois
que les données ont été envoyées, comment les traiter ?
Pour fournir les réponses à ces questions, vous devez
ajouter deux attributs à la balise <form> :
me thod : cet attribut indique par quel moyen les données
vont être envoyées
(réponse à la question no 1). Il existe deux solutions pour
envoyer des données sur
P le
Web :
R me thod="get" : c'est une méthode en général
assez peu adaptée car elle est O limitée à 255 caractères. La
particularité vient du fait que les informations seront G
envoyées dans l'adresse de la page (http://... ).
R
me thod="post" : c'est la méthode la plus utilisée
A
pour les formulaires car
M elle permet d'envoyer un grand nombre d'informations.
Les données saisies dans le
M formulaire ne transitent pas par la
barre d'adresse.
E act ion : c'est l'adresse de la page ou du programme qui
va traiter les informations
R
(réponse à la
question no 2).
Cette page se chargera de vous envoyer un e-mail
E
avec le message si c'est ce N que vous voulez, ou bien
d'enregistrer le message avec tous les autres dans une base
108
de données. Cela ne peut pas se faire en HTML et CSS, on
utilisera en général un
H autre langage tel
que PHP.
T
M On aura alors comme exemple de déclaration de
formulaire le code suivant :
L
< p >Texte avant le formulaire </ p >
< form method = " post " action = " traitement . php " >
< p >Texte à l ' int é rieur du formulaire </ p >
</ form>
< p >Texte après le formulaire </ p >
2. L es éléments de formulaires
Les éléments de formulaires sont répartis en 3 classes :
I nput : Champs de saisie de texte et différents types de
boutons
S e lect : Listes (menus déroulants et ascenseurs)
109
T e xtarea : Zone de saisie de texte libre
Chaque élément doit être nommé, pour cela on utilise
l'attribut NA M E. Le nom ainsi défini permet d'identifier les
données lors de leur envoi. Il doit être unique, sauf dans le
cas d'un ensemble composé de plusieurs éléments
(boutons radio par exemple). Un autre attribut V A LUE
est commun à ces balises, mais son rôle est
différent selon le type d'élément utilisé.
L es éléments input
Cet élément est utilisé pour définir des zones d'entrée de
P
texte simple, des boutons, R des cases à cocher ou des
boutons radio. Le type d'élément dont il s'agit sera précisé O
en utilisant l'attribut T YPE
G
R
A
T y pe S y ntaxe
M
text <input type="text"/> M
(avec valeur par <input type="text" value= "par E
defaut)
password défaut" />
<input type="password" R
date name="pass"/>
<input type="date" name="date"/> E
range <input type="range" /> N
email <input type="email" />
H
submit <input type="submit"
T
reset value="Envoyer"/>
<input type="reset" M
Checkbox value="Effacer"/>
<input type="checkbox" L
name="pfm" value="linux"
checked/> Linux<BR>
<input type="checkbox"
name="pfm" value="dos"/>
Dos<BR>
110 Radio <input type="radio"
name="media" value="cd"
R e marque : Pour le type “ radio”, les attributs “ name”
doivent porter la même valeur sinon il y aura possibilité de
choisir plusieurs valeurs comme pour les cases à
cocher
L ' élément SELECT
Cet élément sert à définir des listes (menus déroulant ou
ascenseurs). Elle s'utilise avec la balise O P TION.
E x emple ré sultat
P <select name="menu">
R <option> Pomme </option>
O <option> Banane</option>
G <option> Orange</option>
R <option selected>
Citron
A
M </option>
<option> Pêche </option>
M
<option> Poire
E
</option>
R
L ' élément TEXTAREA
E
Permet de créer une zone de texte en spécifiant sa taille
grâce aux attributs
N
R O WS et C OLS.
H E x emple R é sutat
T
M
L
<textarea name="comm"
rows=10 cols=40>
Tapez vos commentaires
ici
</textarea>
106 106
Organiser les dossiers du
site et mise en place du CSS
C o mpétences
visées :
Créer un dossier principal et des sous-dossiers en
fonction de fichiers utilisé s et des thèmes traités
Regrouper les fichiers à utiliser en fonction de leur
nature et en fonction du
thème ou des parties du site
P
Créer un fichier de style externe
R
O
G
P r ob lème : Le club informatique de votre établissement
lance le projet de R
développement de son site Web, ce site doit entre -autre
faire une présentation A
générale de l’établissement mais aussi les activités des
autres clubs tels que club M journal, club anglais, club
santé… Chaque club dans le site web doit avoir un espace M
pour la publication de ses activités et ses éventuelles photos
E
et fichiers.
R
Proposez une organisation structurée de ce site web ai nsi
que les fichiers présents de
ce site
E
S o l ut i o n
N
On aura un dossier global qui
représente le site web
107 107
H
Dans ce dossier on va créer un dossier pour chaque club et
chacun de ces dossiers T
contiendra un dossier pour les images, un dossier pour les
fi
c
h
i
e
r
s
a
u
d
i
o
,
u
n
d
o
s
s
i
e
r
M
L
pour les
vidéos…
I- CONSTRUCTION DU SITE WEB
Réaliser une page d’accueil html avec un menu
permettant d’accéder aux différentes parties qui
constituent le site web. Chacune de ces parties représente
un dossier
De façon générale, voici comment
s’organise un site web :
108 108
OBJECTIFS
PUBLIC VISE
CONTENU VISUEL FONCTIONNEL
P
R
O II- INSERTION DU CSS DANS UNE PAGE
HTM
G
Le C S S (Cascading Style Sheet) est un langage
R
permettant la mise en forme des pages Web. Le css agit
sur des éléments de langage html nettement sur des balises A
M qui représentent des
sélecteurs.
M Dans un document html, on peut insérer
le code css soit :
E Dans une balise html sous
forme d ’attribut
R
sy nt axe : <balise
style="propriété : valeur">
E
E x emple: <p style="color :blue">
N
Dans l’entête de document html : entre les balises <head>……
</head> inserer la
H balise <style
type="text/css" >
T S aisir l e code
css i ci
109 109
M
</style>
L
Dans un fichier de style externe .css
Dans les deux derniers cas, on utilise la syntaxe générale
du css qui est la suivante : Sélecteur {
Propriété :
valeur ;}
Exemple
p{
font-size:12px;
color :blue ;
}
110 110
Pour faire agir le css sur le html, il faut ajouter à l’entête du
fichier html la balise
<link rel="stylesheet" href="chemin/fichier.css"
type="text/css"> l’attribut href
permet d’indiquer l’emplacement du fichier css dans
l’ordinateur
EXERCICES
E x ercice 1
P On veut ajouter dans le site web de votre lycée une page
web permettant à chaque R élève d’écouter ses chassons
préférées ou de suivre des documentaires durant la O
semaine culturelle du mois de février
G
R
Saisir la structure minimale d’une page html
A
Reproduire le code suivant entre les balises< b o dy> et < /body>
M
M
<table border="1">
E
<tr>
<td R
colspan="2"
>ligne1, colonne 1 et 2</td> E
<td>ligne1, colonne3</td> N
</tr>
<tr>
<td>ligne2, colonne1</td> H
<td>ligne2, colonne2</td> T
<td>ligne2, colonne3</td>
M
</tr>
</table> L
111 111
Enregistrer sous votre nom .html dans un dossier qui
porte le nom de votre classe sur le bureau de votre
ordinateur
Ouvrer la page avec votre navigateur et décrire ce que vous
voyez
Modifier votre code comme suite :
112 112
<table border="1">
<tr>
<td rowspan="2">ligne 1 et 2, colonne1</td>
<td>ligne1, colonne2</td>
<td>ligne1, colonne3</td>
</tr>
<tr>
<td>ligne2, colonne2</td>
<td>ligne2, colonne3</td>
</tr>
</table>
P
R
O Remplacer les données de vos tables par les balises
<audio>et <video> pour
G obtenir un tableau de don éventuellement de video, au
préalable prenez les fichiers
R audio et vidéo que vous enregistrez au prélable dans le dossier
contenant votre page
A
web
M
M Insertion d’audio
E
<audio controls>
R
<source src="hype_home.mp3">
E
<source src="hype_home.ogg">
N </audio>
H
T
M
L
Insertion de video
<video controls >
<source src="sintel.mp4">
<source src="sintel.webm">
<source src="sintel.ogv">
113 113
</video>
114 114
