KURS HTML
Treść
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 powierzchniami o tej samej barwie i niedużej liczbie szczegułów (nagłówki, przyciski, paski itp). Główną jego zaletą jest niduży rozmiar, oraz transparętność, czyli przeźroczystość która pozwala np. tło 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ść graiki. W sumie najpopularniejszy dzisiaj format graficzny.
PNG pozwala na zapisanie 48 bitowej palety kolorów i 16 bitowej palety szrości. Jest transparentny i posiada bezstratny mechanizm kompresji.
Wstawienie 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ładowanie grafiki na stronę
- alt - tekst alternatywny wyświetlany przy błędzie ładowania grafiki
- width, height - szerokość oraz wysokość, możliwa do podania w pikselach oraz procentach(rozmiar ekranu). Należy unikać skalowania obrazów. Skalujemy przed publikacją
- border - ramka, czarna o szerokości podawanej w pikselach
- hspace, vspace - odsunięcie tekstu od obrazka
- img src="min_obrazek.gif" - polecenie tworzące miniaturę obrazka wraz z linkiem do niego
- align - sterowanie otoczonym tekstem; wartości; wartości: texttop, text, middle, bottom, lub baseline
Skalowanie obrazu
Format oryginalny 400 x 302
Skalowanie 50%
Skalowanie 800 x 50
Ramka o szerokości 4 px
Miniatura
Miniatura obrazu jako link do oryginału, nie działa
Otaczanie 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.
Zadanie
Obrazek nr1
Tło strony
Na chwilę obecną tło strony defniuje się w CSS!
W HTML wygląda to tak:
Tło jednokolorowe
Do znacznika body wstawiamy atrybut bgcolor="nazwa kolor lub kod hex"
Grafika jako tło
Podobnie jak wyżej tylko: atrybut backgroud="nazwa pliku z . rozszerzeniem"
Multimedia
Animacja marquee
Animacja marquee to animowany tekst z wieloma możliwościami. Wymyślony na potrzeby IE działa na innych rzeglądarkach. W opcji podstawowej tekst przesuwa się od prawej do lewej.
Atrybuty animacji marquee
- behavior - tryb przesuwania tekstu; wartości:
- scroll - od prawej do lewej,
- alternate - od prawej do lewej potem odbija się i wraca na prawą,
- slide - od prawej do lewej tylko 1 raz i potem nieruchomieje
- 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 o określoną liczbę pikseli
- scrolldelay - opóźnienie, wartość w milisekundach