Go Głównej

Grafika i multimedia

Formaty graficzne używane na stronach WWW

Obecnie na stronach WWW używa się najczęściej trzech formatów graficznych:GIF,JPG,PNG
.Format GIF jest formatem 8 bitowym, zapisującym max 256 kolorów. Nadaje się do zapisywania:grafiki z dużymi powieszchniami o tej samej barwie i niedużej liczbie szczegółów (nagłówki, przyciski, paski itp.). Główną jego zaletą jest nieduży rozmiar, oraz transparętność, czyli przezroczystość która pozwala np. tła grafiki zapisać jako przeźroczyste. GIF umożliwia również stosowanie przeplotu, czyli wczytywania obrazu partiami: co 4 wiersz, co drugi, reszta. Daje to wrażenie szybszego ładowania strony.
Format JPG pracuje na palecie 24 bitowej z możliwością kompresji. Nadaje się do prezentowania fotografii. Należy pamiętać, że zbyt duża kompresja może spowodować gorszą jakość grafiki. W sumie najpopularniejszy dzisiaj format graficzny.
PNG pozwala na zapisywanie 48 bitowej palety kolorów i 16 bitowej palety szarości. Jest transparentny i posiada bezstratny mechanizm kompresji.

Wstawianie grafiki

Grafikę na stronie WWW wstawiamy poleceniem <img> z atrybutem src po którym podajemy nazwę pliku z rozszerzeniem(jeżeli jest w tym samym folderze, co plik do którego wstawiamy), lub ścieżkę dostępu.

Atrybut znacznika img

• src - odpowiada za załadowanie grafiki na stronę
• alt - tekst alternatywny wyświetlany przy błędzie ładowania grafiki
• width, height - szerokość i wysokość, możliwa do podania w pikselach oraz procentach (rozmiaru ekranu). Należy unikać skalowania obrazów. Skalujemy przed publikacją
• border - ramka, czarna o szerokości podawanej w pikselach
• hspace, vspace - odsunięcie od obrazka
• img src="min_obrazek.gif" - polecenie tworzące miniaturę do obrazka wraz z linkiem do niego
• aling - sterowanie otoczeniem tekstem; wartości: texttop, text, midle, bootom lub baseline

  Skalowanie obrazu

  

  format orginalny 400x302

  

  Skalowanie 50%

  

  Skalowanie 800x50 pikseli

  ramka

  

  ramka o szerokości 4px

  miniatura

  

  Miniatura obrazu jako link do orginału, nie działa

  otoczenie tekstem

  Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty.
  
  
  
  

  obrazek1 obrazek2 obrazek3

  Tło strony

  Na chwile obecną tło strony definiuje się w SCC!
  W HTML wygląda to tak:

  tło jednokolorowe

  Do znacznika body wstawiamy atrybut bgcolor="nazwa lub kod".

  Grafika jako tło

  Podobniej jak wyżej tylko atrybut background="adres".

  Multimedia

  Animacja marquee

  Animacja marquee to animowany tekst z wieloma możliwościami. Wymyślony na potrzeby IE działa na innych przeglądarkach. W opcji podstawowej tekst przesuwa się do prawej do lewej.

  
  Animacja podstawowa marquee.

  Atrybuty animacji marquee

  • behavior - tryb przesuwania tekstu; wartości:
    • scroll - od prawej do lewej,
    • slide - od prawej do lewej tylko 1 i nieruchomieje,
    • alternate - od prawej do lewej i z powrotem.
  • bgcolor - kolor tła
  • direction - kierunek przesuwania tekstu:
    • left - w lewo
    • right - w prawo
    • up - góra
    • down - dół
  • loop - liczba powtórzeń
  • scrollamount - skok o określoną liczbę pikseki
  • scrolldelay - opóźnianie, wartość w milisekundach

  Przykłady

  Animacja marquee behavior scroll. Animacja marquee behavior slide. Animacja marquee behavior alternate. Animacja marquee bgcolor. Animacja marquee direction right. Animacja marquee direction up. Animacja marquee direction left. Animacja marquee direction down. Animacja marquee z 2 powtórzeniami. Animacja marquee speed 300. Animacja marquee opóźnienie 300.

Darmowy hosting zapewnia PRV.PL