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 GIFjest formatem 8 bitowym, zapisującym max. 256 kolorów. Nadaje się do zapisywania grafiki z dużymi powierzchniami o tej samej barwie i niedużej liczbie szczegółów (naglówki, przyciski, paski itp). główną jego zaletą jest nieduży rozmiar, oraz transparętność, czyli przeźroczystość która pozwala na np. tło grafiki zapisać jako przeźroczystą. 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 palacie 24 bitowej z możliwością kompresji, nadaje się do prezentowania fotografii.Należy pamiętać że zbyt duża ilość możę powodować gorszą jakość grafiki.W sumie najpopularniejszym dzisiaj format graficzny.
PNGpozwala na zapisanie 48 bitowej palety kolorów i 16 bitowej palety kolorów szarości. Jest transparentny i posiada bezstratny mechanizm kompresji.

Wstawianie grafiki

Grafikę na stronę 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.

atrybuty znacznika img

• src - odpowiada za załądowanie grafiki na stronie.
• alt - tekst alternatywny wyświetlający się wtedy kiedy jest błąd ładowania.
• width, height - szerokość i wysokość, możliwa do podania w pikselach oraz procentach(rozmiar ekranu). Należy unikać skalowania obrazów. Skalujemy przed publikacją.
• border - ramka,czarna o szerkości podanej w pikselach.
• hspace, vspace - odsunięcia tekstu od obrazka.
• img src="min_obrazek.gif" - polecenie tworzące miniaturę obrazka wraz z linkiem od niego.
• align - sterowanie otoczeniem tekstu, wartości: texttop, text, middle, bottom lub baseline.

Skalowanie obrazu

Format originalny 400 z 302

Skalowanie 50%

Skalowanie 800 x 50

Ramka

Ramka o szerokości 4px

Miniatura

Miniatura obrazu jako link do oryginał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.

Tło strony

Na chwile obecną tło strony definiuje sie w scc!
W HTML wygląda to tak:

Tło jednokolorowe

Do znacznika body ustawiamy atrybut bgcolor="nazwa koloru lub kodu hex"

Grafika jako tło

Podobnie jak wyżej tylko: atrybut background="nazwa pliku" z rozszerzeniem

Multimedia

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ę od prawej do lewej

Animacja podstawowa marquee

atrybuty animacji marquee

• behavior - tryb przesuwania tekstu: wartośći:
  • scroll - od prawej do lewej,
  • slide - od prawej do lewej a potem odbija się i wraca na prawą
  • alternate - od prawej do lewej tylko raz , a pózniej unieruchamnia się
  • bgcolor - kolor tła
  • direction - kierunek przesuwania tekstu:
    • left - w lewo
    • right - w prawo
    • up - w górę
    • down - w dół
  • loop - liczba powtórzeń
  • scrollamout - skok określoną liczbę pikseli
  • scrolldelay - opóźnienie, wartości

  Przykłady

  Animacja marquee behavior slide
  Animacja marquee behavior alternate
  Animacja marquee behavior slide bgcolor="yellow"
  
  Darmowy hosting zapewnia PRV.PL