Grafika jest bardzo ważną częścią niejednej strony WWW. Jak to ktoś kiedyś powiedział, “Jeden obraz wart jest tysiąca słów”. Jest to prawda – np. dane które zostaną przedstawione w postaci wykresu w większości przypadków bardzo trudno jest w sposób dokładny opisać słownie tak, aby oddać wszystkie informacje które można odczytać z wykresu. Grafika pełni także bardzo ważną rolę dekoracyjną na stronach WWW, począwszy od bycia tłem strony, poprzez różne ozdobniki, jak fantazyjne linie czy “kulki” jako punktu w różnych listach po wstawione fotografie. Obrazki mogą być też odnośnikami do innych stron – to zagadnienie jest opisane dokładnie w lekcji Linki (odsyłacze).

Wstawianie obrazków – podstawy

Do wstawiania obrazków służy znacznik <img>. Znacznik ten nie jest zamykany w HTML, dlatego jeżeli tworzysz swoją stronę WWW w XHTML, pamiętaj aby go zamknąć.

Lokalizację obrazka podaje się za pomocą parametru src. Oto jak się wstawia obrazek na stronę (pierwszy przykład w HTML, drugi w XHTML):

<img src="odie.gif" alt="Piesek">
<img src="odie.gif" alt="Piesek" />

Piesek

Podany parametr src jest wymagany i zawiera adres pliku z obrazkiem. W powyższym przykładzie pojawił się też parametr alt zawierający opis obrazka – on też jest wymagany. Więcej na jego temat będzie dalej.

Plik z obrazkiem powinien być w formacie GIF, JPEG lub PNG – te formaty plików są powszechnie obsługiwane w przeglądarkach internetowych.

Adres pliku z obrazkiem można podać na kilka sposobów:

  • jeżeli plik jest w tym samym katalogu co strona, to najprościej podać samą nazwę pliku, czyli plik.gif. Przypominam tu też o tym, iż w Internecie zazwyczaj ważna jest wielkość znaków, tak więc najlepiej wszystkie nazwy plików podawać małymi literami, i stosować wyłącznie znaki alfabetu łacińskiego (czyli bez polskich “krzaczków”), cyfry, minus i znak podkreślenia “_”
  • jeżeli plik jest w katalogu będącym podkatalogiem katalogu gdzie jest strona, to podać należy także katalog(i) które należy “przejść” aby dotrzeć do pliku, np. obrazki/kasia/plik.gif. Tutaj od razu umieszczę uwagę – w Internecie do rozdzielania nazw katalogów w ścieżce dostępu używa się wyłącznie znaku slash “/”. Nawet jeżeli używasz systemu w którym do tego celu używa się innego znaku (np. backslash “\” w DOS i Windows), to używaj slash, gdyż przeglądarka Internetowa sobie z tym poradzi zamieniając podczas wyświetlania strony ten znak na taki jaki jest używany w danym systemie, a Ty za to nie będziesz musiał(a) zamieniać tych znaków w momencie gdy stronę będziesz umieszczał(a) na serwerze w Internecie;
  • jeżeli plik z grafiką znajduje się w katalogu będącym “wyżej” w strukturze katalogów niż strona na której on ma być użyty, to do do tego celu stosuje się symbol .. (dwie kropki) dla oznaczenia każdego katalogu będącego “powyżej” przez który się “przechodzi”, np. ../../plik.gif, lub ../obrazki/plik.gif jeżeli na końcu potrzebne jest jeszcze wejście do jakiegoś podkatalogu;
  • powyższe przykłady podawały lokalizację pliku jako względną (i taka jest zalecana – mniej jest problemów gdy stronę wraz z powiązanymi z nią plikami trzeba przenieść do innego katalogu). Niekiedy jednak konieczne może być podanie pełnej ścieżki dostępu do pliku względem katalogu głównego serwera (tzw. ścieżka bezwzględna na serwerze). Ścieżkę taką należy rozpocząć od znaku “/”, i następnie podać wszystkie katalogi które należy “przejść” aby dotrzeć do pliku, np. /pliki/grafika/plik.gif. Uwaga: jeżeli posiadasz konto na serwerze, gdzie adresem strony głównej Twojego serwisu jest np. www.serwer.pl/~tomek/, to na początku ścieżki musisz umieścić /~tomek/, np. /~tomek/pliki/grafika/plik.gif;
  • adres można w końcu podać także jako bezwzględny w Internecie, podając przed ścieżką także adres serwera poprzedzony oznaczeniem protokołu (zwykle http://), np. http://www.serwer.com.pl/grafika/plik.gif. Tu od razu też uprzedzę, że jeżeli w ten sposób chcesz wykorzystać obrazek znajdujący się w serwisie którego nie jesteś właścicielem, powinieneś(aś) poprosić najpierw o zgodę właściciela tego serwisu, gdyż w innym przypadku możesz mieć problemy gdyż naruszysz prawa autorskie, lub narazisz właściciela serwisu na dodatkowe koszta, gdy posiadane przez niego konto na serwerze płaci w zależności od ilości przesłanych danych (czyli w zależności od tego ile danych odwiedzający ściągną do siebie).

Parametry dla wstawionego obrazka

Dla obrazka wstawionego na stronę WWW można zdefiniować wiele parametrów:

  • szerokość – za pomocą parametru width, i wysokość – za pomocą parametru height:
    <img src="odie.gif" width="72" height="84" alt="Piesek">

    Piesek

    Można podać tylko jeden parametr, ale nie jest to zalecane – gdy podana jest zarówno wysokość, jak i szerokość, to wtedy podczas wczytywania strony przeglądarka może od razu zarezerwować odpowiednią ilość miejsca na wyświetlenie obrazka. Jeżeli tego się nie zrobi, to w miarę jak kolejne obrazki się będą wczytywać, przeglądarka będzie zmuszona do zmiany pozycji innych elementów strony w zależności od rozmiarów obrazka, co powoduje iż niemożliwe staje się przeglądanie strony w momencie gdy ona się wczytuje, gdyż co chwilę tekst się przesuwa w inne miejsce.
    Za pomocą podanych parametrów można także przeskalować obrazek, podając nowy rozmiar w pikselach lub w procentach szerokości ekranu (lub elementu blokowego w którym obrazek się znajduje). Jeżeli poda się tylko jeden rozmiar, to przeglądarka dobierze drugi tak aby zachować proporcje obrazka:

    <img src="odie.gif" width="50%" alt="Piesek"><br />
    <img src="odie.gif" height="168" alt="Piesek">
    <img src="odie.gif" width="144" alt="Piesek">

    Piesek
    PiesekPiesek

    Podając obydwa parametry, można te proporcje zniekształcić:

    <img src="odie.gif" width="200" height="50" alt="Piesek" />
    <img src="odie.gif" width="50" height="200" alt="Piesek" />

    PiesekPiesek
  • szerokość ramki otaczającej obrazek – za pomocą parametru border. Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS::
    <img src="odie.gif" width="72" height="84" alt="Piesek" border="5" />
    <img src="odie.gif" width="72" height="84" alt="Piesek"
        style="border-width: 5px; border-style: solid" />

    Piesek
  • alternatywny tekst dla obrazka, czyli tekst wyświetlany podczas gdy obrazek się wczytuje. Ten tekst jest też wyświetlany przez niektóre przeglądarki w momencie gdy kursor myszki zatrzyma się na dłużej nad obrazkiem. Jest też on wyświetlany przez przeglądarki tekstowe oraz indeksowany przez wyszukiwarki internetowe. Do ustawienia tekstu alternatywnego służy parametr alt:
    <img src="odie.gif" width="72" height="84" alt="To jest opis tego obrazka">

    To jest opis tego obrazka

    Aby ten tekst pojawiał się po najechaniu myszką na obrazek we wszystkich przeglądarkach, należy dodatkowo dodać parametr title z tym samym tekstem:

    <img src="odie.gif" width="72" height="84" alt="Opis tego obrazka" title="Opis tego obrazka">

    Opis tego obrazka

    Parametr ten jest wymagany. Co prawda przeglądarki poradzą sobie jeżeli go nie będzie, ale polecam go podać. Przyda się on nie tylko osobom korzystającym z przeglądarek tekstowych lub wyłączającym wyświetlanie grafiki aby przyśpieszyć wyświetlanie się strony, ale także wyszukiwarkom internetowym które jak na razie nie potrafią jeszcze analizować treści obrazków. Także w przypadku gdy obrazki nie wczytają się np. z uwagi na problemy z połączeniem, ten opis będzie bardzo pomocny dla osoby oglądającej stronę;

  • odstęp od tekstu w poziomie – służy do tego parametr hspace. Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS::
    obrazek odsunięty od tekstu
    <img src="odie.gif" width="72" height="84" alt="piesek" 
        hspace="30"> o 30 pikseli w poziomie
    obrazek odsunięty od tekstu
    <img src="odie.gif" width="72" height="84" alt="piesek" 
        style="margin-left: 30px; margin-right: 30px"> 
    o 30 pikseli w poziomie

    obrazek odsunięty od tekstu pieseko 30 pikseli w poziomie
  • odstęp od tekstu w pionie – do tego służy parametr vspace. Ten atrybut też nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
    obrazek odsunięty od tekstu<br>
    <img src="odie.gif" width="72" height="84" alt="piesek" 
        vspace="30"><br>o 30 pikseli w pionie
    obrazek odsunięty od tekstu<br>
    <img src="odie.gif" width="72" height="84" alt="piesek" 
        style="margin-top: 30px; margin-bottom: 30px"><br> 
    o 30 pikseli w pionie

    obrazek odsunięty od tekstu
    piesek
    o 30 pikseli w pionie
  • położenie obrazka względem oblewającego go tekstu – służy do tego parametr align. Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenia kaskadowych arkuszy stylów CSS.
    Atrybut ten może przyjmować następujące wartości:

    • left – obrazek po lewej stronie, wiele wierszy tekstu obok niego
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="left">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="float: left">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

      piesektekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    • right – obrazek po lewej stronie, wiele wierszy tekstu obok niego
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="right">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="float: right">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

      piesektekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    • top – obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do góry obrazka, pozostałe wiersze pod obrazkiem
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="top">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="vertical-align: top">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

      piesektekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    • middle – obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do środka obrazka, pozostałe wiersze pod obrazkiem
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="middle">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="vertical-align: middle">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

      piesektekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    • bottom – obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do dołu obrazka, pozostałe wiersze pod obrazkiem
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="bottom">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="vertical-align: baseline">
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
      tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

      piesektekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

    Tutaj warto także wspomnieć o parametrze clear znacznika <br>, którego zastosowanie pozwana na “przerzucenie” tekstu w odpowiednim momencie pod obrazek. Atrybut ten też nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS.

    Atrybut ten może przyjmować następujące wartości:

    • none (wartość domyślna) – tekst po przełamaniu jest kontynuowany obok obrazka (a dokładniej obiektu – można bowiem podobnie “oblewać” tekstem tabele)
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="left">
      tekst tekst<br clear="none">tekst tekst<br>tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="float: left">
      tekst tekst<br style="clear: none">tekst tekst<br>tekst tekst

      piesektekst tekst
      tekst tekst
      tekst tekst
    • left – tekst po przełamaniu jest kontynuowany poniżej dolnej krawędzi pierwszego od lewej obiektu
    • right – kontynuacja jest poniżej krawędzi pierwszego od prawej obiektu
    • all – tekst jest kontynuowany poniżej dolnej krawędzi wszystkich obiektów w danej linii
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          align="left">
      tekst tekst<br clear="left">tekst tekst
      <img src="dog.gif" width="35" height="35" alt="piesek" 
          style="float: left">
      tekst tekst<br style="clear: left">tekst tekst

      piesektekst tekst
      tekst tekst

Za pomocą znacznika <img> można na stronę wstawić także animację zapisaną jako plik w formacie GIF – format ten ma takie możliwości. Może to wyglądać następująco:

<img src="sheepcom.gif" width="120" height="120" alt="owieczka">

owieczka

Inną kwestią związaną z wstawianiem grafiki jest zmiana tła strony. Można to wykonać na dwa sposoby:

  • ustawić kolor tła strony za pomocą parametru bgcolor znacznika <body>, jako jego wartość podając nazwę lub kod szesnastkowy koloru. Parametr ten jest nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
    <body bgcolor="green">
    <body style="background-color: green">

    Przykładową stronę na której znajduje się powyższy kod zobaczysz klikając tutaj.

  • wstawić plik graficzny jako tło – do tego celu można wykorzystać parametr background znacznika <body>. Jako parametr podaje się położenie pliku którego chcemy użyć jako tło. Tutaj uwaga: pliki gif można używać, jednakże w przypadku gdy zawiera on animację, wyświetlana będzie jedynie pierwsza klatka. W przypadku gdy wskazany obrazek będzie miał mniejszy rozmiar niż aktualny rozmiar okna przeglądarki, przeglądarka wyświetli go tyle razy obok siebie aby wypełnić cały obszar okna przeglądarki – z tego powodu należy zadbać aby grafika używana jako tło została odpowiednio przygotowana, aby miejsca gdzie będą stykać się brzegi obrazków pozostały niewidoczne.
    Atrybut ten nie jest zalecany – zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS. Przykład jak to zrobić znajdziesz poniżej.
    Przy używaniu tego znacznika warto także ustawić kolor tła za pomocą parametru bgcolor (lub polecenia CSS background-color) na kolor zbliżony do koloru obrazka – dzięki temu osoba odwiedzająca stronę będzie mogła się zapoznawać z jej treścią w momencie gdy tło nie zostało wczytane z uwagi np. na powolność łącza lub wyłączenie grafiki. Nieustawienie tego parametru może spowodować iż strona będzie w takim przypadku nieczytelna, gdyż np. ustawiony zostanie biały kolor znaków, a grafika będąca tłem będzie czarna , to wtedy tekst nie będzie widoczny gdy tło graficzne nie będzie wyświetlane, gdyż domyślnym kolor tła jest kolor biały.

    <body bgcolor="#BDB5AD" background="tlo.gif">
    <body style="background-color: #BDB5AD; background: url(tlo.gif)">

    Przykład strony zawierającej powyższy kod zobaczysz klikając tutaj.