Przejdź do treści

HTML / Multimedia - Kurs HTML

W tym rozdziale dowiesz się...

Opis wstawiania plików multimedialnych (grafika, dźwięk) na stronach WWW.

Obrazek <IMG>

Jak wstawić obrazek (grafikę, zdjęcie, fotografię, ilustrację) na stronę WWW?

  1. Zwykły (domyślnie):
    <img src="ścieżka dostępu" alt="Tekst alternatywny">
    gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
    Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej). Ponadto w MSIE może zostać wyświetlona po wskazaniu obrazka myszką.

    Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy użytkownik wyłączył jej wyświetlanie albo dla osób niewidomych, które korzystają ze specjalnych syntezatorów mowy.

    UWAGA!
    Bardzo ważne: w nazwach plików lepiej nie używać:
    • wielkich liter
    • znaków, np.: \ / : * ? " < > |
    • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
    • polskich liter (ą, ć, ę, ł, ń... itd.)

    Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

    Przykład:

    To jest przykładowy obrazek
  2. O określonych rozmiarach:
    <img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y">
    lub
    <img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%">
    gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach.
    Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu.

    Podawanie rozmiarów grafik może być przydatne przynajmniej z kilku powodów. Jeśli obrazek nie zostanie wczytany, symbol który zajmie jego miejsce będzie miał inne wymiary i może tym samym popsuć ułożenie innych elementów strony. Poza tym jeśli nie wstawimy rozmiarów grafik na stronie, to podczas wczytywania cała treść będzie się "rozjeżdżać". Jeżeli komuś to szczególnie przeszkadza, powinien zawsze określać te atrybuty - to bardzo dobry nawyk. Oczywiście aby obraz nie był zniekształcony, należy podać jego prawdziwe rozmiary w pikselach a nie w procentach (można je sprawdzić w dowolnym programie graficznym).

    Przykład:

    width="300" height="150"

    width="300" height="150"

Edytory HTML posiadają często specjalny generator, który wspomaga wstawianie multimediów na strony WWW (nie tylko obrazków). Należy jednak pamiętać, że multimedia bardzo wyraźnie zwiększają objętość strony, a co za tym idzie, wydłużają czas wczytywania.

Większość bardziej zaawansowanych programów graficznych udostępnia funkcję kompresji obrazów, co pozwala zmniejszyć ich objętość bez wyraźnego spadku jakości. Czasami zysk z użycia takiej kompresji jest dość znaczny, dlatego warto się tym zainteresować.

Przed wstawieniem obrazka radzę zastanowić się, czy jest on absolutnie konieczny. Jeżeli chcesz umieścić na swojej stronie grafikę o znacznych rozmiarach, zawsze staraj się wcześniej pokazać miniaturkę, aby użytkownik mógł ocenić, czy chce czekać na załadowanie pełnowymiarowego obrazu (można to zrobić np. za pomocą galerii zdjęć).

Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów:

  • GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
  • JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
  • PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).

Format BMP może nie być wcale lub jest bardzo słabo skompresowany, dlatego należy unikać jego stosowania! Nieodpowiedni dobór formatu graficznego może być przyczyną nawet kilkukrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia jakości obrazu. Dlatego jeśli nie wiesz który wybrać, przetestuj wszystkie.

Jeżeli chcesz wstawić obrazek, który nie jest prostokątem, można w tym celu użyć formatu GIF (lub PNG). Obszary, które mają być niewidoczne, należy narysować innym kolorem, a następnie w programie graficznym ustawić ten kolor jako przezroczysty (transparent). Uwaga: format JPG (oraz BMP) nie obsługuje przezroczystości! Podobny efekt można co prawda uzyskać, rysując "niewidoczne" części kolorem tła strony WWW. Jednak jeśli zmienimy kolor tła na stronie, będzie trzeba zmienić również wszystkie takie obrazki. Natomiast jeżeli ustalimy przezroczystość na obrazku, zawsze będzie ona niewidoczna.

Przy przeglądaniu większej ilości dużych obrazków, pomocne mogą okazać się galeria lub przeglądarka zdjęć.

Animowany banner

Animowany banner można stworzyć przy użyciu takich programów jak np. Animation Shop, Ulead GIFAnimator czy GIMP i inne. Jest to po prostu specjalny plik GIF, który wstawiamy na stronę, tak jak zwykły obrazek. Może on mieć przykładowo rozmiary 400x50. Pamiętaj, że im więcej klatek animacji, tym większe rozmiary pliku i dłuższe wczytywanie strony!

Osadzenie pliku <EMBED>

Jak osadzić na stronie WWW plik multimedialny: animację, film, muzykę (wav, mid, avi, ra, mp3, mpg, mov, asf i inne)?

(interpretuje: Internet Explorer, Netscape/Mozilla/Firefox, Opera, Chrome)

W przypadku materiałów dźwiękowych (muzyka) i wideo (filmy) korzystniej jest użyć odpowiednio elementów: AUDIO, VIDEO.

<embed src="ścieżka dostępu do pliku" width="x" height="y">
gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację na dysku, gdzie znajduje się żądany plik multimedialny.
Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki (ang. plug-in), czyli okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy rozmiarów obrazu wtyczki, może on przyjąć wielkość, która nie pasuje do wymiarów pliku! Rozmiary zależą również od posiadanej przez użytkownika wtyczki.

Polecenie <embed> jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:

  • *.wav - plik dźwiękowy typu "wav"
  • *.mid - plik dźwiękowy typu "midi"
  • *.avi - plik typu "avi"
  • *.ra - plik Real Audio Player
  • *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
  • *.mpeg - plik typu "mpeg"
  • *.mov - plik typu "mov"
  • *.asf - plik typu "asf"
  • i inne

Polecenie to współpracuje z różnymi wtyczkami, dzięki którym teoretycznie może odtwarzać nowe formaty plików multimedialnych. Wtyczka (czyli plug-in) to specjalny niewielki program, który można doinstalować do przeglądarki, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.

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.

Polecenie <embed> sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto należy pamiętać, że pliki multimedialne mają zwykle bardzo duże rozmiary, a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo!

Możliwe jest również bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się powszechnym standardem publikacji elektronicznych. Umożliwia m.in. różnorodne formatowanie tekstu, wstawianie grafiki i inne. Dokumenty PDF można stworzyć np. przy użyciu programu wbudowanego w pakiet biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem Adobe Reader.

Aby można było osadzić na stronie WWW plik PDF, użytkownik oglądający nasz serwis musi mieć zainstalowany program Adobe Reader.

Dodatkowo należy pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..." oraz height="..."), ponieważ jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie "Open".

Przykład:

Aby zobaczyć różne sposoby osadzania plików bezpośrednio na stronie, kliknij tutaj.

Drugim sposobem umieszczenia na stronie pliku PDF jest użycie po prostu odsyłacza do pliku w postaci:

<a href="dokument.pdf">...</a>

W takim przypadku dokument zostanie wczytany bezpośrednio w oknie przeglądarki (MSIE 4, NC 4.5)

Uniwersalny sposób odtwarzania plików <OBJECT>

Jak wstawić odtwarzacz multimedialny (filmy, muzyka) na stronę WWW? Jak wstawić na stronę pliki do pobrania (dział download)?

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. Ponadto niektóre formaty plików przestały być odtwarzane w Internet Explorerze 5.5 i 6.0.

Odsyłacz do pliku

Najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w każdej przeglądarce internetowej i z każdym formatem plików, jest odsyłacz do pliku:

<a href="ścieżka dostępu do pliku">opis</a>

Jeżeli rozdział o odsyłaczach masz już za sobą, to zapewne wiesz, że powyższe polecenie jest właśnie odsyłaczem - odsyłaczem do pliku. Po uruchomieniu takiego odnośnika (np. w Microsoft Internet Explorerze), na ekranie może się pojawić okno z zapytaniem: Czy chcesz otworzyć ten plik, czy zapisać go na komputerze? Jeśli wybierzesz opcję Zapisz, będziesz mógł skopiować wskazany plik na swój dysk twardy. Natomiast jeżeli wybierzesz Otwórz, ukaże się nowe okno, gdzie należy wskazać program który będzie użyty do otwarcia pliku. Po uczynieniu tego i kliknięciu "OK", nastąpi otwarcie wybranego programu i odtworzenie w nim pliku (oczywiście jeśli dany program obsługuje taki typ plików). Jeżeli w Twoim systemie operacyjnym z wybranym typem pliku jest skojarzony jakiś program, zostanie on automatycznie otwarty, bez zapytania o jego nazwę (co znacznie przyspiesza procedurę).

Poza tym istnieją pewne typy plików, które mogą zostać wyświetlone bezpośrednio w oknie przeglądarki, po kliknięciu odnośnika. Jeśli użytkownik będzie miał zainstalowany we własnym systemie operacyjnym odpowiedni program, który potrafi otworzyć wybrany plik, zostanie on uruchomiony w tle (np. dla plików PDF należy posiadać Adobe Reader; dla DOC, XLS - Microsoft Office). Niestety działanie może się różnić w zależności od przeglądarki.

Przedstawiony tutaj odsyłacz do pliku nie posiada wad związanych z innymi poleceniami multimedialnymi. Ponieważ plik nie jest umieszczony bezpośrednio na stronie, dlatego nie powoduje on opóźnienia we wczytywaniu. Ponadto działa z wszystkimi rodzajami plików. Dodatkowo użytkownik może zapisać plik na dysku, a potem odtwarzać go dowolną ilość razy, nie czekając ponownie na jego wczytanie z Internetu. Niestety sposób taki posiada również wady. Pierwsza jest taka, że plik nie będzie otwarty na stronie lecz w osobnym programie, co może wydawać się mało "eleganckim" rozwiązaniem. Druga - to konieczność posiadania przez użytkownika odpowiedniego programu, który potrafi odtworzyć wybrany typ plików.

Przy okazji zwracam uwagę, że 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.

Zagnieżdżanie plików multimedialnych

W przypadku materiałów dźwiękowych (muzyka) i wideo (filmy) korzystniej jest użyć odpowiednio elementów: AUDIO, VIDEO.

Jeśli koniecznie zależy nam na tym, aby plik multimedialny był odtwarzany wprost na stronie, a jednocześnie chcemy mieć pewność, że będzie on dostępny we wszystkich przeglądarkach, możemy użyć zagnieżdżania plików multimedialnych:

<object data="ścieżka dostępu do pliku multimedialnego" width="szerokość" height="wysokość">
	<a href="ścieżka dostępu do pliku multimedialnego">Pobierz plik</a>
</object>
gdzie zmodyfikować należy wyróżnione linijki, a kolejne wpisy w nich oznaczają:
ścieżka dostępu do pliku multimedialnego
lokalizacja na dysku, gdzie znajduje się żądany plik multimedialny
szerokość" i "wysokość
rozmiar wyświetlanego obrazu wtyczki (w pikselach), czyli okna na stronie w którym odtwarzany będzie plik

Pomiędzy znacznikiem otwierającym <object...> a zamykającym </object> można umieścić dowolny kod, który wyświetli się tylko w sytuacji, jeśli przeglądarka nie obsługuje wyświetlania tego typu plików multimedialnych wprost na stronie. Najłatwiej podać po prostu odsyłacz do tego samego pliku. Wtedy użytkownicy niekompatybilnych przeglądarek będą mogli przynajmniej pobrać plik na swój dysk lokalny i potem ewentualnie odtworzyć go w osobnej aplikacji.

Przykład:

Aby zobaczyć różne sposoby osadzania plików bezpośrednio na stronie, kliknij tutaj.

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ (online).

Ćwiczenia

  1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
  2. Utwórz dokument z licencją zawierającą informacje o prawach autorskich Twojej strony: kto jest jej autorem, jakie są zasady korzystania z niej (czy można kopiować treść i używać ją do celów komercyjnych) itp. W tym celu możesz skorzystać z programów takich jak:
    • WordPad - dostępny w systemie Windows
    • Open Office - darmowy pakiet biurowy
    • Microsoft Office - pakiet aplikacji biurowych dostępny za darmo dla uczniów i studentów
  3. Użyj techniki zagnieżdżania plików multimedialnych, aby umieścić dokument licencji bezpośrednio w stronie.
Facebook