KURS HTML

KURS HTML KURS CSS


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.

błąd wczytywania grafiki

Atrybuty znacznika img

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.


Animacja podstawowa marquee

Atrybuty animacji marquee

Przykłady

Animacja marquee behavior slide
Animacja marquee behavior alternate
Animacja marquee behavior slide bgcolor="yellow"
Animacja marquee behavior slide direction="right"
Animacja marquee behavior slide direction="up"
Animacja podstawowa marquee loop=3
Animacja podstawowa marquee scrollamount=30
Animacja podstawowa marquee scrolldelay=300

Zadanie


Mateusz O. Gr. 1