Grafika.doc

(74 KB) Pobierz

Grafika

1.      Elementy graficzne są zapisane w formatach: GIF, JPEG i PNG

a.      GIF to format 8-bitowy pozwalający na zapisanie maksymalnie 256 kolorów. Najlepiej nadaje się do zapisywania elementów graficznych zawierających duże obszary o tym samym kolorze i niewielkiej ilości szczegółów i dlatego jest wykorzystywany przy projektowaniu nagłówków, pasków i prostej grafiki. Główną zaletą tego formatu jest niewielki rozmiar plików, umożliwia tworzenie grafik transparentnych (przeźroczystych). Potrzebne to jest przy tworzeniu grafiki, której tło należy ukryć. GIF stosuje przeploty. Oznacza to, że obraz jest wczytywany fragmentami. Początkowo wczytywana jest co czwarta linia obrazu, co powoduje, że od razu widoczny jest cały zarys. Kolejne przejścia to odczyt kolejnych linii. Daje to wrażenie szybszego wczytywania stron.

b.      JPG -w tym formacie najpierw tworzony jest obraz czarno-biały, a informacje o kolorach zapisywane są osobno. Na powstałym obrazie jest przeprowadzana analiza dotycząca barw, a kolory które są niewidoczne dla oka, zostają usunięte. W formacie JPG można stosować kompresje, co powoduje zmniejszenie rozmiaru pliku, ale może prowadzić do pogorszenia jakości obrazu. Ponieważ w tym formacie zapisywana jest pełna, 24- bitowa paleta kolorów, JPG doskonale nadaje się do zapisywania fotografii.

c.      PNG - pozwala na zapisanie 48-bitowej palety kolorów i 16-bitowej palety odcieni szarości. Umożliwia tworzenie grafik transparentnych i ma efektywny bezstratny mechanizm kompresji.

2.      Za wyświetlenie pojedynczego obrazu na stronie odpowiada znacznik img, który nie ma znacznika zamykającego:
<img src=”adres pliku graficznego” alt = ”tekst alternatywny”>

         - atrybut src odpowiada za podanie ścieżki dostępu do pliku wraz z jego nazwą
             i   rozszerzeniem
        - atrybut alt umożliwia wyświetlenie tekstu alternatywnego, widocznego po najechaniu na obrazek.
        - atrybut width –szerokość oraz height - wysokość obrazka podawane w pikselach lub w  procentach.

3.      Umieszczając obrazek na stronie decydujemy również, jak zostanie on ustawiony względem znajdującego się na stronie tekstu. Umożliwia to argument align umieszczony wewnątrz znacznika img. Może on przyjmować następujące wartości:

a.      Left –obrazek umieszczony po lewej stronie względem tekstu,

b.      right - obrazek umieszczony po prawej stronie względem tekstu,

c.      top - tekst ustawiony przy górnej części obrazka,

d.      Middle - tekst ustawiony w środkowej części obrazka,

e.      Bottom - tekst ustawiony na dole obrazka.

4.      Tło strony:

a.      Wewnątrz znacznika body za pomocą atrybutu bgcolor, który przyjmuje wartość nazwę wybranego koloru
 

<html>

<body bgcolor=”red”>

  <h2>
    Kolor strony
   </h2>    

</body>

</html>

b.      za pomocą atrybutu background, który przyjmuje jako wartość ścieżkę dostępu do pliku graficznego wraz z jego nazwą i rozszerzeniem

Ćwiczenie 1.

 

<html>

<body background="tlo.jpg">

<h2>

  Tło obrazkowe strony

</h2>

</body>

Ćwiczenie 2


Z Internetu skopiuj dowolny obrazek i zapisz go z rozszerzeniem JPG. Pamiętaj by plik główny i obrazek znalazły się w jednym folderze:
<html>

<body>

<p align="center">

<img src="róża.jpg" alt="HTML" widht="195" height="90">

</p>

</body>

</html>

 

 

 

Zadanie


Znalezione obrazy dla zapytania wadi bin hammad
Wadi Bin Hammad to niesamowite miejsce niedaleko miasta Al Karak w Jordanii.
Jedno z najpiękniejszych miejsc, jakie możesz zobaczyć

Zgłoś jeśli naruszono regulamin