Formatowanie textu
Sekektory
kurs html
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 chwilę obecną tło strony definiuje się w scc !
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 background="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 przeglądarkach. w opcji podstawowej tekst przesuwa sie od prawej do lewwej.
atrybuty animacji marquee
- behavior- tryb przesuwania tekstu; wartości:
- scroll - od prawej do lewej,
- alternate - do prawej do lewej potem odbija sie i wraca na prawą,
- slide - do prawej do lewej tylko 1 raz 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ści w milisekundach
przykład
Sposób rozpoczęci nagrania