Matura - Internet

Pliki graficzne mogą występować w kilku formatach:

Format JPG

Format JPG  (ang. JPG = Joint Photographic Experts Group [JPEG]) pozwala przechowywać obrazy o naturalnych kolorach, tak jak na zdjęciu. Grafika JPG może być kompresowana, co zmniejsza wielkość pliku graficznego. Stosowana jest tutaj tzw. kompresja stratna. Polega to na tym, iż w zależności od współczynnika kompresji obraz będzie przedstawiany mniej lub bardziej szczegółowo. Obrazy skompresowane z dużym współczynnikiem kompresji zajmują mniej miejsca, lecz zwykle wyglądają gorzej.

	Mały współczynnik kompresji.
	Średni współczynnik kompresji. Zwróć uwagę na futro chomika. Przejścia kolorów już nie są płynne.
	Wysoki współczynnik kompresji.

Format JPG nadaje się szczególnie dobrze do zdjęć.

Format GIF

Format GIF (ang. GIF = Graphics Interchange Format) stosuje kompresję bezstratną, co oznacza, iż nie następuje utrata jakości. Z drugiej strony GIFy mogą przechowywać obrazki o liczbie kolorów ograniczonej do 256. Format nadaje się głównie do grafiki komputerowej o małej liczbie kolorów. Zdjęcia wychodzą dużo gorzej niż w JPG.

	256 kolorów.
	16 kolorów
	2 kolory

Z kolei grafika pikselowa wygląda lepiej w GIF niż w JPG.

	GIF
	JPG

W formacie GIF można wybrać jeden z kolorów jako przezroczysty:

Można również stosować animacje:

Format PNG

Format PNG (ang. PNG = Portable Network Graphics) łączy zalety JPG i GIF: duża liczba kolorów i kompresja bezstratna. Pliki PNG mają zwykle większy rozmiar od plików JPG/GIF.

Oprócz formatów JPG, GIF i PNG są stosowane również inne, nam jednak wystarczą te trzy.

Do zapamiętania:

• Formaty plików graficznych JPG, GIF, PNG.

Tworzymy nową witrynę:

Zostanie utworzona witryna w katalogu C:\wwwprj\w2, która będzie zawierała jedną stronę. Plik strony powinieneś zobaczyć w panelu Site View:

Tu musimy wykonać kilka zmian. Kliknij raz lewym przyciskiem myszki w nazwę pliku default.htm.. Cały wiersz powinien zostać podświetlony na zielono. Wciśnij klawisz F2 (edycja nazwy pliku) i wpisz nową nazwę: index.html.

Teraz tytuł. Kliknij jeden raz lewym przyciskiem myszki w kolumnie Title w tytuł index.html, odczekaj około sekundy i kliknij jeszcze raz. Teraz będziesz mógł zmienić tytuł. Wpisz Jowisz:

Wciśnij Enter (plik strony musi być podświetlony na zielono). Strona zostanie załadowana do edytora. Wybierz tryb Design. Kliknij prawym przyciskiem myszki w puste tło strony i z menu kontekstowego wybierz opcję Page Properties... (właściwości strony)

Gdy pojawi się okienko dialogowe własności, przejdź na zakładkę Formatting. Ustaw ciemne tło (Background) i jasny tekst (więcej kolorów do wyboru uzyskasz klikając w opcję More Colors...):

Kliknij w zakładkę Language i w pierwszym polu ustaw Polish (kliknij w to pole i wpisz 2 literki "po" i wciśnij Enter):

Zatwierdź okienko przyciskiem OK. Strona w edytorze odpowiednio zmieni kolor:

Zwróć uwagę, iż za nazwą pliku index.html na zakładce u góry pojawiła się gwiazdka. Oznacza ona, iż są zmiany w pliku strony, które nie zostały jeszcze zapisane na dysku. Wciśnij Ctrl+S. Strona zostanie zapisana w witrynie w2 i gwiazdka zniknie:

Umieść kursor w prostokącie body i wpisz:

Zauważ, iż prostokąt body zmienił się automatycznie na p wraz z pierwszą wpisaną literą. Oznacza to znacznik <p>, czyli akapit (ang. paragraph). Zmienimy ten akapit w nagłówek pierwszego poziomu. Na górnym pasku narzędziowym kliknij w narzędzie wyboru stylu (jest tam napis Paragraph) i z menu wybierz heading 1 <h1> (nagłówek 1). Tekst powinien się odpowiednio zmienić:

Zapisz stronę na dysku (Ctrl+S).

Teraz wkleimy na stronę obraz Jowisza. Przy stronach WWW obowiązuje taka zasada, aby pliki graficzne były przechowywane w witrynie w osobnym katalogu o nazwie images (obrazy) – unikniemy wtedy bałaganu przy większej liczbie plików. Utworzymy taki katalog.  Przejdź na zakładkę Site View. Kliknij w obszar okna prawym przyciskiem myszki i z menu kontekstowego wybierz:

New → Folder

Zostanie utworzony nowy katalog. Nadaj mu nazwę images:

Teraz skopiujemy do tego katalogu obrazek Jowisza, który widzisz poniżej:

Kliknij w ten obraz prawym przyciskiem myszki i wybierz opcję Zapisz obraz jako. Otworzy się okno dialogowe zapisu.

Wyszukaj swoją witrynę i wejdź w niej do katalogu images. Zmień nazwę pliku na jowisz.jpg. Zatwierdź przyciskiem Zapisz (lub klawiszem Enter). Plik obrazka zostanie pobrany z sieci i zapisany w twojej witrynie. Możesz sprawdzić, czy plik się pobrał:

Na zakładce Site View kliknij szybko dwa razy lewym przyciskiem myszki w nazwę katalogu images. Katalog zostanie otwarty i powinieneś zobaczyć jego zawartość. Jeśli nie widzisz tam swojego pliku, to wciśnij klawisz F5 (odświeżanie widoku):

Aby wyjść z katalogu images, kliknij ikonkę żółtej teczuszki z zieloną strzałką, która znajduje się po prawej stronie u góry panelu.

Wróć na zakładkę index.html. Kliknij lewym przyciskiem myszki pod nagłówkiem. Następnie na górnym pasku narzędziowym kliknij ikonę wstawiania obrazka z pliku:

Pojawi się okno dialogowe odczytu z pliku. Otwórz katalog images, kliknij w plik jowisz.jpg i zatwierdź przyciskiem Insert (wstaw).

Gdy obraz jest wstawiany na stronę WWW, powinieneś dla niego określić krótki tekst i opis. Potrzebne to jest w przypadku, gdy obraz długo się ładuje z sieci. Wtedy te opisy są odpowiednio wyświetlane w miejscu obrazka.

W końcu obrazek pojawi się w edytorze:

Skopiuj poniższy tekst do schowka Windows (źródło: Wikipedia). W  edytorze kliknij pod obrazkiem i wklej tekst ze schowka.

Jowisz – gazowy olbrzym, największa planeta Układu Słonecznego. Piąta planeta w kolejności od Słońca. Masa Jowisza jest nieco mniejsza niż jedna tysięczna masy Słońca, a zarazem dwa i pół razy większa niż łączna masa pozostałych planet w Układzie Słonecznym. Wraz z Saturnem, Uranem i Neptunem tworzą grupę gazowych olbrzymów, nazywaną czasem również planetami jowiszowymi.

Planetę znali astronomowie w czasach starożytnych, była związana z mitologią i wierzeniami religijnymi wielu kultur. Rzymianie nazwali planetę na cześć najważniejszego bóstwa swojej mitologii – Jowisza[3]. Obserwowany z Ziemi Jowisz może osiągnąć jasność do −2,95m. Jest to trzeci co do jasności naturalny obiekt na nocnym niebie po Księżycu i Wenus (okresowo, w momencie wielkiej opozycji, jasnością może mu dorównywać Mars).

Największa planeta Układu Słonecznego składa się w trzech czwartych z wodoru i w jednej czwartej z helu; może posiadać także skaliste jądro złożone z cięższych pierwiastków. Szybka rotacja nadaje mu kształt spłaszczonej elipsoidy obrotowej (ma też niewielkie, ale zauważalne zgrubienie w płaszczyźnie równika). Powierzchnię planety, którą stanowią nieprzezroczyste wyższe warstwy atmosfery, pokrywa kilka warstw chmur, układających się w charakterystyczne pasy widoczne z Ziemi. Najbardziej znanym szczegółem jego powierzchni jest odkryta w XVII wieku przy pomocy teleskopu Wielka Czerwona Plama, będąca antycyklonem o średnicy większej niż średnica Ziemi. Planeta ma słabo widoczne pierścienie i potężną magnetosferę. Okrążają ją cztery wielkie, kuliste księżyce zwane galileuszowymi, które odkrył Galileusz w 1610. Ganimedes, największy z księżyców, ma średnicę większą niż planeta Merkury. Ogółem są znane 95 księżyce Jowisza.

Gdy mamy już wszystkie elementy strony, możemy je odpowiednio sformatować.

Kliknij w nagłówek i wyśrodkuj go (klawisze Ctrl+E lub narzędzie wyśrodkowania na górnym pasku narzędziowym).

Kliknij w obrazek i wyśrodkuj go w ten sam sposób.

Zaznacz cały tekst i z menu wybierz opcję:

Format → Paragraph...

W okienku dialogowym poustawiaj parametry tekstu jak poniżej (możesz poeksperymentować):

Zatwierdź okno, zapisz stronę na dysk (Ctrl+S) i przeglądnij w przeglądarce:

Uruchom panel sterowania XAMPP. W panelu uruchom serwer Filezilla, przy pomocy Exploratora plików zaloguj się na serwer i prześlij zawartość witryny w2 do katalogu htdocs. Uruchom serwer Apache i w przeglądarce wpisz adres localhost. Powinieneś zobaczyć swoją stronę z obrazkiem Jowiszaa.

Do zapamiętania:

• Tworzenie katalogów w witrynie.
• Pobieranie plików graficznych z sieci do wybranego katalogu.
• Dołączanie pliku graficznego do strony.
• Proste formatowanie elementów strony WWW.
• Przesyłanie witryny na serwer WWW.