Trudno jest iść przez życie wieloma drogami jednocześnie
Ćwiczenie 6 - Multimedia
Zadania do wykonania:
- spakowane pliki do zadań: pliki_6.zip (2,84MB)
W ćwiczeniu 6 zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiem pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie.
Zalecałbym jednak ostrożność przy używaniu tych elementów ponieważ mogą znacznie powiększyć objętość strony, a tym samym wydłużyć jej wczytywanie. Ponadto nie wszyscy używają tych samych przeglądarek i wszystkich wtyczek, więc mogą mieć problemy z odtwarzaniem tych plików. Koniecznie należy umieszczać alternatywny tekst, który wyświetli się w tym przypadku zamiast multimediów.
Warto też się zastanowić czy przeładowywać strony niepotrzebnymi dodatkami, nie zawsze ładnie wyglądającymi, a prawie zawsze przeszkadzającymi. Dużo lepszym wyjściem jest odnośnik do pliku z podaną jego objętością.
Na początku zajmiemy się plikami graficznymi. Do umieszczania na stronie grafiki służy znacznik: <img />. Można go używać z takimi atrybutami: <img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" width="x" height="y" align="sposób" hspace="m" vspace="n" />.
Atrybuty src i alt są wymagane. Wymiary też warto podać, ponieważ przeglądarka zarezerwuje odpowiednie miejsce na stronie, nawet gdy obrazek się nie wyświetli. Atrybuty align, hspace, vspace są zdeprecjonowane, ale tu z nich skorzystamy...
- ścieżka dostępu do obrazka:
- względna ścieżka dostępu do pliku graficznego
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- tekst alternatywny:
- tekst zastępczy, kiedy nie wyświetla się obrazek
- x:
- szerokość obrazka podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
- należy podawać rzeczywiste rozmiary
- nie powiększać grafiki zwiększając jej rozmiary
- y:
- wysokość obrazka podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
- należy podawać rzeczywiste rozmiary
- nie powiększać grafiki zwiększając jej rozmiary
- sposób:
- "left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
- "right" - obrazek po prawej stronie względem tekstu
- "top" - tekst ustawiony na górze obrazka
- "middle" - tekst ustawiony na średniej wysokości względem obrazka
- "bottom" - tekst ustawiony na dole obrazka (domyślnie)
- m:
- pozioma odległość od obrazka w pikselach
- n:
- pionowa odległość od obrazka w pikselach
Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów: gif, jpg, png. Formatu bmp należy unikać, ponieważ jest słabo skompresowany.
Zadania do wykonania z grafikami. Spakowane pliki do zadań: pliki_6.zip (2,84MB).
1. Wstawić mały obrazek (120x100), bez atrybutów.
2. Wstawić mały obrazek (120x100) z wymuszonymi większymi rozmiarami (300x200).
3. Wstawić średni obrazek (300x200).
4. Wstawić duży obrazek z rozmiarami 100%x100%.
5. Wstawić akapit tekstu i obrazek po prawej stronie.
6. Wstawić akapit tekstu i obrazek po lewej stronie.
7. Wstawić obrazek z tekstem przy obrazku pośrodku.
8. Wstawić obrazek z tekstem przy obrazku u dołu.
9. Wstawić obrazek z tekstem oddalonym od obrazka i pośrodku.
10. Wstawić obrazek z tekstem oddalonym od obrazka i u dołu obrazka.
Kolejna grupa dodatków na stronę to ruchome bannery. Można je uzyskać za pomocą znacznika <marquee>...</marquee>. Znacznik ten nie wchodzi w skład specyfikacji HTML 4.01, ale jest obsługiwany przez przeglądarki: Internet Explorer, Opera, Mozilla Firefox.
Znacznik ten posiada kilka atrybutów: <marquee behavior="typ" direction="kierunek" bgcolor="kolor" width="x" height="y" hspace="m" vspace="n" loop="p" scrollamount="s" scrolldelay="ms">...</marquee>.
- typ:
- "scroll" - tekst przesuwa się od prawej do lewej (domyślnie)
- "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
- "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy
- kierunek:
- "left" - tekst będzie przesuwał się w lewo (domyślnie)
- "right" - tekst będzie przesuwał się w prawo
- "up" - przesuwanie w górę
- "down" - przesuwanie w dół
- kolor:
- kolor tła w bannerze
- aby uzyskać dokładny kolor i odcień to wartość szesnastkową
- #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
- w systemie szesnastkowym jest szesnaście podstawowych cyfr:
- 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
- przykładowe kolory:
| nazwa | #rrggbb | kolor |
| black | #000000 | |
| silver | #c0c0c0 | |
| gray | #808080 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fuchsia | #ff00ff | |
| green | #008000 | |
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #00ffff |
- x:
- szerokość bannera na ekranie w pikselach
- lub w procentach - koniecznie ze znakiem: %
- y:
- wysokość bannera na ekranie w pikselach
- lub w procentach - koniecznie ze znakiem: %
- m:
- odległość bannera w poziomie od tekstu w pikselach
- n:
- odległość bannera w pionie od tekstu w pikselach
- p:
- ilość powtórzeń
- s:
- szybkość przesuwania się bannera w pikselach
- wartość podaje o ile pikseli banner ma przeskakiwać
- ms:
- szybkość przesuwania się bannera w milisekundach
- jeżeli poniżej 60ms to należy dodać atrybut truespeed="truespeed"
Zadania do wykonania z bannerami:
1. Wstawić banner bez atrybutów.
2. Wstawić banner z dowolnym atrybutem behavior.
3. Wstawić banner z dowolnym atrybutem direction.
4. Wstawić banner z atrybutem bgcolor.
5. Wstawić banner z atrybutami width i height.
6. Wstawić banner z atrybutami width, height i bgcolor.
7. Wstawić tekst i banner z atrybutem hspace.
8. Wstawić tekst i banner z atrybutem vspace.
9. Wstawić banner powtórzony kilka razy.
10. Wstawić banner z prędkością w pikselach.
11. Wstawić banner z prędkością w milisekundach.
Kolejne dodatki na stronę to pliki audio i video. Do osadzania ich na stronie WWW służy znacznik <embed />. Znacznik ten nie wchodzi w skład specyfikacji HTML 4.01, ale jest obsługiwany przez przeglądarki: Internet Explorer, Opera, Mozilla Firefox.
Znacznik ten posiada kilka atrybutów: <embed src="ścieżka dostępu do pliku" width="x" height="y" autostart="typ" hidden="wartość" showcontrols="opcja" loop="stan" />
- ścieżka dostępu do pliku:
- względna ścieżka dostępu do pliku multimedialnego
- należy wpisać drogę uwzględniając wszystkie foldery
- wchodząc do folderu wpisujemy jego nazwę/
- wychodząc z folderu wpisujemy ../
- na końcu podajemy nazwę pliku z rozszerzeniem
- x:
- szerokość wyświetlanego obrazu podana w pikselach
- y:
- wysokość wyświetlanego obrazu podana w pikselach
- typ:
- "true" - plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony
- "false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić "ręcznie" - poprzez wyświetlony panel kontrolny)
- wartość:
- "true" - obraz zostanie ukryty
- "false" - obraz będzie wyświetlony na ekranie
- opcja:
- "0" - panel kontrolny zostanie ukryty
- "1" - panel kontrolny będzie wyświetlony na ekranie
- stan:
- "true" - powtarzanie w nieskończoność
- "false" - brak powtarzania
Należy pamiętać, że pliki multimedialne mają zwykle duże rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed />. W takim przypadku w pierwszej kolejności wczyta się tekst.
Pliki multimedialne mogą być zapisane w następujących formatach - pliki audio: mid, mp3, ra, wav; pliki video: avi, mov, mpeg, asf.
Aby umożliwić dotarcie do plików multimedialnych w przeglądarkach, które nie obsługują polecenia <embed />, wskazane jest umieszczenie na stronie znaczników: <noembed>...</noembed> na przykład z taką treścią:
Należy jedynie podać właściwą scieżkę do pliku.
Zadania do wykonania z plikami audio i video. Spakowane pliki do zadań: pliki_6.zip (2,84MB).
1. Wstawić pliki audio: mid, mp3, wav z różnymi rozmiarami panelu.
2. Wstawić plik audio: wma dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true.
3. Wstawić pliki video: avi z różnymi rozmiarami obrazu, autostart: false
4. Wstawić plik video: wmv dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true.
Na koniec należy wykonać odsyłacz do dokumentu pdf, który otworzy się w przeglądarce, (pod warunkiem, że w systemie jest program do odczytu pdf-ów). Spakowane pliki do zadań: pliki_6.zip (2,84MB). A tak na marginesie warto przeczytać te kilka stron...
Przy odsyłaczach do plików mających większą objętość (np. większą niż 100 KB), dobrze jest podać ich rozmiar. W ten sposób użytkownik będzie mógł zdecydować, czy chce uruchomić taki odnośnik.
Polecenia multimedialne sprawiają wiele kłopotów. Na przykład: <embed /> ma tę zaletę, że skojarzony z nim plik, będzie odtwarzany bezpośrednio na stronie. Niestety jest to również jego wadą. Pliki multimedialne mają zwykle duże rozmiary, dlatego wczytywanie takiej strony może trwać potwornie długo. Poza tym polecenie <embed /> nie zawsze działa poprawnie, szczególnie jeśli chodzi o jego atrybuty dodatkowe
Zainteresowanym podaję uniwersalny skrypt do zagnieżdżania plików multimedialnych, dzięki któremu plik będzie widoczny w różnych przeglądarkach.
źródło skryptu: www.kurshtml.boo.pl
Należy jedynie zmodyfikować wyróżnione poprzez wcięcie linijki: podać lokalizację pliku multimedialnego oraz szerokość i wysokość obrazu w pikselach.
Można też w linijkach: <param name="autoStart" value="false" /> i autostart="false"> false zmienić na true, co spowoduje automatyczne odtworzenie pliku zaraz po wczytaniu strony.
Oceniany będzie plik multimedia.html z umieszczonymi w nim po kolei, zgodnie z instrukcjami, wszystkimi grafikami, bannerami, plikami audio i video oraz pdf-em.
Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.