• 
  Obrazek HTML <img>

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

• 
  Osadzenie pliku <embed>

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

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

• 
  Pytania i odpowiedzi

  HTML

• 
  Powtórka

  HTML

• 
  Quiz i certyfikat ukończenia

  HTML

• 
  Ćwiczenia

  HTML

Obrazek <img>

<img src="ścieżka dostępu" alt="Tekst alternatywny">

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.

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>

Obrazek o określonych rozmiarach <img width height>

<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%">

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:

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>

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

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

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.

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.

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>

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

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

Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia ^* , rozwiązując testowy QUIZ (online).

✅ Rozpocznij quiz HTML

* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.

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.