Zamieszczanie dźwięku i wideo w dokumencie HTML

Obecnie istnieją trzy sposoby odtwarzania dźwięków w dokumentach HTML. Dźwięk może być odtworzony w oknie przeglądarki, w tle, lub przez program pomocniczy. Podobnie rzecz się ma jeśli chodzi o klipy wideo, można je bowiem pokazywać w oknie przeglądarki, lub odtwarzane mogą być przez programy pomocnicze.
W tym kroku dowiesz się w jaki sposób można zdefiniować połączenie do pliku dźwiękowego i wideo odtwarzanego przez aplikację pomocniczą niezależnie od przeglądarki, za pomocą której oglądana jest strona z danym połączeniem.

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób dołączania do dokumentu dźwięku i wideo przez stworzenie do nich odnośników.

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-2">
<title>Nasza Szkoła</title>
</head>
<body bgcolor="#FFFACD" text="#002500">
<p>

<hr>

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego włączenie do dokumentu dźwięku i klipu wideo. W tej metodzie postępuje się identycznie jak przy tworzeniu odnośników do innych dokumentów, przy czym wskazuje się na plik dźwiękowy lub wideo.

<table border="0" width="100%">

Odnośniki do poszczególnych plików umieszczono w tabeli - ramki nie będą wyświetlane (border="0").

<tr>

Ten znacznik definiuje pierwszy i jedyny w tym wypadku wiersz tabeli.

<td valign="top" width="50%">

Ten znacznik definiuje pierwszą komórkę danych:
1. Atrybut valign powoduje wyrównywanie zawartości w pionie; dopuszczalne wartości: top (góra), middle (wyśrodkowaie), bottom (dół).
2. Atrybut align powoduje wyrównywanie zawartości w poziomie; dopuszczalne wartości: left (do lewej), center (wyśrodkowanie),
right (do prawej).
3. Atrybut width ustala szerokość komórki - tu 50% szerokości całej tabeli.

<p align="center"><font size=+2><strong>
Dźwięki</strong></font></p>

<p><a href="http://www.zsp2wadowice.iap.pl/strony/hymn/hymn.mp3"><img src="glosnik.gif">Now.wav(126KB) czas 11 sek.</a></p>

Tworzy odnośnik do "hymn.mp3", przez aktywną ikonkę "glosnik.gif" i napis "hymn.mp3 czas 120 sek."

<p><a href=" ??????.mid"><img src="glosnik.gif">jakis tam midi.</a></p>

 

</td>

Koniec definicji pierwszej komórki.

<td valign="top" width="50%">

<p align="center"><font size=+2><strong>Wideo</strong></font></p>

Analogicznie jak wyżej.

<p align="right"><a href=" http://www.zsp2wadowice.iap.pl/alps/ film1.wmv">film z meczu 30sek. <img src="kamera.gif"></a></p>

 

</td>

 

</tr>

Koniec definicji wiersza.

</table>

Koniec definicji tabeli.

</body>
</html>

 

Poniżej możesz poćwiczyć.

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż wygląd strony" zobaczysz efekt działania zmodyfikowanego kodu, który sam dokonałeś pozmieniaj w ramce dane i obejrzyj je.