Przejdź do treści

Multimedia - 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?

Obrazek <img>

<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).

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)!

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ęć).

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

Przykład <img>

To jest przykładowy obrazek

Obrazek o określonych rozmiarach <img width height>

<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 <img width height>

Po wpisaniu następującego kodu:

<img src="obrazek.jpg" alt="..." width="300" height="150">

otrzymamy obrazek o rozciągniętych wymiarach:

width="300" height="150"

Formaty graficzne

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ść.

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.

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)?

Osadzenie pliku <embed>

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, możemy otrzymać zbyt małe okienko (uniemożliwiające czytanie).

Przykład <embed>

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

Odsyłacz do pliku PDF <a pdf>

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 powinien zostać wczytany bezpośrednio w oknie przeglądarki.

Przykład <a pdf>

Odsyłacz do pliku *.pdf

Pytania i odpowiedzi

W jaki sposób można zamieszczać pliki multimedialne na stronie internetowej?

Jednym ze sposobów umieszczania plików multimedialnych w dokumencie HTML może być użycie znacznika <embed src="...">. Nie zaleca się jednak stosować go dla plików audio-wideo, ponieważ dla nich zostały przeznaczone specjalne odtwarzacze multimedialne.

Jak osadzić PDF na stronie?

Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy bezpośrednio wyświetlić zawartość pliku PDF, można się posłużyć następującym znacznikiem: <embed src="dokument.pdf" width="1000" height="600">.

Jak utworzyć link do pliku PDF?

Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do pliku PDF, można się posłużyć następującym znacznikiem: <a href="dokument.pdf">Otwórz dokument PDF</a>.

Uniwersalny sposób odtwarzania plików <a jpg avi wav txt doc rtf xls pdf, object>

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

Wstęp

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.

Odsyłacz do pliku <a jpg avi wav txt doc rtf xls pdf>

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, 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.

Przykład <a jpg avi wav txt doc rtf xls pdf>

Zagnieżdżanie plików multimedialnych <object>

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 <object>

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

Pytania i odpowiedzi

Jak dodać plik HTML do strony?

Najłatwiejszym sposobem dodania dowolnego pliku do strony jest wstawienie odsyłacza do niego. Jeśli będzie to plik multimedialny albo dokument znanego typu, to po kliknięciu w taki link jego zawartość może zostać wyświetlona bezpośrednio w oknie przeglądarki. W przeciwnym razie zostanie uruchomione pobierane pliku na dysk lokalny użytkownika. Na przykład jeśli plik nazywa się "aplikacja.exe" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do niego, można się posłużyć następującym znacznikiem: <a href="aplikacja.exe">Pobierz plik</a>.

Do czego służy znacznik OBJECT?

Element OBJECT działa podobnie jak EMBED, ale w założeniu jest bardziej uniwersalny. Za jego pomocą tak samo można osadzać bezpośrednio w stronie różnorodne pliki multimedialne: dokumenty MS Word, arkusze kalkulacyjne Excel czy prezentacje PowerPoint itp. Ale oprócz tego jest przeznaczony do wstawiania interaktywnych aplikacji działających bezpośrednio wewnątrz strony - jak np. gry wideo. Ponadto, w odróżnieniu od elementu EMBED, wewnątrz znacznika OBJECT można umieścić treść, która się wyświetli w jego miejsce w przeglądarce, jeśli podany typ pliku nie będzie przez nią obsługiwany. Można tam wstawić np. bezpośredni odsyłacz do tego pliku, aby użytkownik mógł go pobrać na swój dysk lokalny i spróbował otworzyć w jakiejś zewnętrznej aplikacji.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

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

W jaki sposób można zamieszczać pliki multimedialne na stronie internetowej?

Jednym ze sposobów umieszczania plików multimedialnych w dokumencie HTML może być użycie znacznika <embed src="...">. Nie zaleca się jednak stosować go dla plików audio-wideo, ponieważ dla nich zostały przeznaczone specjalne odtwarzacze multimedialne.

Zobacz więcej...

Jak osadzić PDF na stronie?

Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy bezpośrednio wyświetlić zawartość pliku PDF, można się posłużyć następującym znacznikiem: <embed src="dokument.pdf" width="1000" height="600">.

Zobacz więcej...

Jak utworzyć link do pliku PDF?

Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do pliku PDF, można się posłużyć następującym znacznikiem: <a href="dokument.pdf">Otwórz dokument PDF</a>.

Zobacz więcej...

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

Jak dodać plik HTML do strony?

Najłatwiejszym sposobem dodania dowolnego pliku do strony jest wstawienie odsyłacza do niego. Jeśli będzie to plik multimedialny albo dokument znanego typu, to po kliknięciu w taki link jego zawartość może zostać wyświetlona bezpośrednio w oknie przeglądarki. W przeciwnym razie zostanie uruchomione pobierane pliku na dysk lokalny użytkownika. Na przykład jeśli plik nazywa się "aplikacja.exe" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do niego, można się posłużyć następującym znacznikiem: <a href="aplikacja.exe">Pobierz plik</a>.

Zobacz więcej...

Do czego służy znacznik OBJECT?

Element OBJECT działa podobnie jak EMBED, ale w założeniu jest bardziej uniwersalny. Za jego pomocą tak samo można osadzać bezpośrednio w stronie różnorodne pliki multimedialne: dokumenty MS Word, arkusze kalkulacyjne Excel czy prezentacje PowerPoint itp. Ale oprócz tego jest przeznaczony do wstawiania interaktywnych aplikacji działających bezpośrednio wewnątrz strony - jak np. gry wideo. Ponadto, w odróżnieniu od elementu EMBED, wewnątrz znacznika OBJECT można umieścić treść, która się wyświetli w jego miejsce w przeglądarce, jeśli podany typ pliku nie będzie przez nią obsługiwany. Można tam wstawić np. bezpośredni odsyłacz do tego pliku, aby użytkownik mógł go pobrać na swój dysk lokalny i spróbował otworzyć w jakiejś zewnętrznej aplikacji.

Zobacz więcej...

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

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

<img src="ścieżka dostępu" alt="Tekst alternatywny">
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y">
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%">

Zobacz więcej...

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

<embed src="ścieżka dostępu do pliku" width="x" height="y">

Zobacz więcej...

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

<a href="ścieżka dostępu do pliku">opis</a>
<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>

Zobacz więcej...

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