musique tube mp3

Transcription

musique tube mp3
M Rass, TD informatique L2 S4, exercice d‘entraînement
Logiciels à utiliser: Firefox ou autre navigateur web, bloc-notes ou autre éditeur texte, the
gimp ou autre éditeur images (pixia, artweaver), audacity ou autre éditeur son
1) Allez sur selfhtml.org
Cliquez sur ossature HTML
2) Copiez le code à droite de "Ossature html"
3) Ouvrez bloc-notes ou similaire, collez le code dedans.
4) Sauvegardez le fichier sous le nom index.html (attention choisir d'abord "tous fichiers et encodage utf8) dans un dossier nouveau que vous nommez "sitemonnom" (exemple "sitelegoff")
[(4bis) Collez dans la partie <head> ... </head> (l'en-tête) le code:
<meta http-equiv="content-type" content="type Mime; charset=UTF-8">
pour pouvoir utiliser des caractères accentués dans le corps de la page (partie <body> ....</body>) optionnel puisqu'il n'y a pas de caractères accentuées prévues]
5) Créez un tableau dans <body> ....</body> en collant le code suivant:
<table width="700" height="600" border="1">
<tr>
<td width="200" >
<p align="center">ACCUEIL</p>
<p>&nbsp;</p>
<p align="center">MUSIQUE</p>
<p>&nbsp;</p>
</td>
<td align="center">place pour une image</td>
</tr>
</table>
Sauvegardez et visualisez la page dans Firefox ou Internet Explorer (clic droit sur index.html -ouvrir avec
...)
Si la bordure ne vous plaît pas remplacez la valeur de border="1" par border="0"
6) Création des liens: entourez ACCUEIL par la balise:
<a href="index.html">......</a>
et MUSIQUE par la balise:
<a href="annex.html">......</a>
Sauvegardez index.html,
puis remplacez "place pour une image" par "place pour la musique" sauvegardez sous le nom de
annex.html
Maintenant vous avez deux pages: index.html et annex.html
Visualisez le résultat dans Firefox ou Internet Explorer (clic droit sur index.html -ouvrir avec ...) en passant d'une page à l'autre
7) Préparation du contenu visuel: cherchez dans google images une illustration ou photo qui doit figurer
sur la page index (pas plus grand que 500x500)
Sauvegardez-la dans votre dossier "sitemonnom"
Ouvrez Gimp et puis l'mage sauvegardée, Inscrivez un texte (par exemple: Bienvenue ...), sauvegardez
l'mage sous "accueil.jpg" dans le dossier "sitemonnom"
1
M Rass, TD informatique L2 S4, exercice d‘entraînement
8) Retournez à votre page index.html et remplacez le texte "place pour une image" par le code qui va
faire apparaître votre accueil.jpg:
<img src="accueil.jpg" alt=accueil">
Sauvegardez et visualisez dans Firefox ou Internet Explorer (clic droit sur index.html -ouvrir avec ...)
Si votre image vous paraît trop grande, vous pouvez diminuer sa taille en rajoutant dans <img
src="accueil.jpg" alt=accueil" width="largeur souhaitée - un chiffre entre 1 et 500" height="hauteur souhaitée - un chiffre entre 1 et 500">
9) Préparation du contenu audio: téléchargez sur arteradio <http://www.arteradio.com/wai/accueil.do>
un fichier mp3 qui ne dépasse pas 3 minutes, sauvegardez-le dans votre dossier "sitemonnom"
10) Ouvrez audacity et importez le fichier mp3, sélectionnez un passage de 30 secondes à peu près et ne
gardez que cette sélection, faites ensuite un fondu en ouverture et un fondu en fermeture, puis exportez
le résultat au format mp3 dans votre dossier "sitemonnom" sous le nom "musique.mp3"
11) Retournez à votre page annex.html et incrustez maintenant votre fichier musique.mp3 en remplaçant "place pour la musique" par:
<p>
<embed src="musique.mp3" PLUGINSPAGE="http://www.apple.com/quicktime/download" width="160"
height="20" CONTROLLER="true" LOOP="false" AUTOPLAY="false"></embed>
</p>
Sauvegardez et visualisez dans Firefox ou Internet Explorer (clic droit sur index.html -ouvrir avec ...)
en passant d'une page à l'autre, si vous n'avez commis aucune erreur, vous voyez sur votre page accueil
(index.html) deux liens à gauche et une image à droite, comprenant un texte,
sur votre page musique (annex.html) deux liens à gauche et un fichier son intégré à droite.
12) Préparer l'envoi (Ouvrez votre dossier "sitemonnom" et ne gardez que: index.html, annex.html,
accueil.jpg et tube.mp3 - supprimez le reste, puis fermez le dossier "sitemonnom" pour pouvoir faire un
clic droit dessus, sélectionnez dans le menu déroulant filzip -> ajouter au zip et cliquez OK sur la fenêtre
qui va s'ouvrir
13) Ouvrez le webmail de l'université, créez un nouveau message, joignez le fichier "sitemonnom.zip" et
adressez le message à [email protected] en mettant l'objet "examen mongroupe" (exemple examen
g3)
Options:
Utiliser des styles:
collez dans l'entête de vos pages par exemple
<style type="text/css">
#link { font:bold 12pt Trebuchet MS; }
#legend { font:italic 10pt Verdana; }
#caps { font:small-caps 12pt Verdana; }
</style>
Vous pouvez mettre d'autres polices à la place, changer les tailles, ou le style (normal, italic, bold, smallcaps)
Pour pouvoir les afficher il faut insérer dans une balise <td> (cellule) ou <p> (paragraphe) id="link" par
exemple
2