Multimedia

Obrazek

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:

   
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"

   
3. Z obramowaniem:

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

   gdzie jako "n" należy wpisać grubość obramowania (w pikselach).

   Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   border="10"

   
4. O określonym ustawieniu względem tekstu:

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

   gdzie jako "rodzaj" należy wpisać:

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

   Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left"...

   align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right"...

   align="top"

   align="middle"

   align="bottom"

5. O określonej odległości od tekstu:

   <img src="ścieżka dostępu" alt="Tekst alternatywny" hspace="x" vspace="y" />

   gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach).

   Atrybuty HSPACE oraz VSPACE są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   hspace="50"

   
   vspace="50"

Edytory (X)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!

• W tym rozdziale dowiesz się...
• Animacja MARQUEE

• Do góry
• Strona główna
• Drukuj rozdział
• Komentarze