Zadanie 3 - informatyka

Fragmenty strony http://www.poradnik-webmastera.com/kursy/html/ grafika.php
(przystosowano do przygotowania zadań szkolnych)
Wstawianie grafiki - Kurs języka HTML
Grafika jest bardzo ważną częścią niejednej strony WWW. Jak to ktoś kiedyś powiedział, "Jeden obraz
wart jest tysiąca słów". Jest to prawda - np. dane które zostaną przedstawione w postaci wykresu w
większości przypadków bardzo trudno jest w sposób dokładny opisać słownie tak, aby oddać
wszystkie informacje które można odczytać z wykresu. Grafika pełni także bardzo ważną rolę
dekoracyjną na stronach WWW, począwszy od bycia tłem strony, poprzez różne ozdobniki, jak
fantazyjne linie czy "kulki" jako punktu w różnych listach po wstawione fotografie. Obrazki mogą być
też odnośnikami do innych stron - to zagadnienie jest opisane dokładnie w lekcji Linki (odsyłacze).
Do wstawiania obrazków słuŜy znacznik <img>. Znacznik ten nie jest zamykany w HTML,
dlatego jeŜeli tworzysz swoją stronę WWW w XHTML, pamiętaj aby go zamknąć.
Lokalizację obrazka podaje się za pomocą parametru src. Oto jak się wstawia obrazek na
stronę (pierwszy przykład w HTML, drugi w XHTML):
<img src="odie.gif" alt="Piesek">
<img src="odie.gif" alt="Piesek" />
Adres pliku z obrazkiem moŜna podać na kilka sposobów:
•
•
•
•
jeŜeli plik jest w tym samym katalogu co strona, to najprościej podać samą nazwę
pliku, czyli plik.gif. Przypominam tu teŜ o tym, iŜ w Internecie zazwyczaj waŜna
jest wielkość znaków, tak więc najlepiej wszystkie nazwy plików podawać małymi
literami, i stosować wyłącznie znaki alfabetu łacińskiego (czyli bez polskich
"krzaczków"), cyfry, minus i znak podkreślenia "_"
jeŜeli plik jest w katalogu będącym podkatalogiem katalogu gdzie jest strona, to podać
naleŜy takŜe katalog(i) które naleŜy "przejść" aby dotrzeć do pliku, np.
obrazki/kasia/plik.gif. Tutaj od razu umieszczę uwagę - w Internecie do
rozdzielania nazw katalogów w ścieŜce dostępu uŜywa się wyłącznie znaku slash "/".
Nawet jeŜeli uŜywasz systemu w którym do tego celu uŜywa się innego znaku (np.
backslash "\" w DOS i Windows), to uŜywaj slash, gdyŜ przeglądarka Internetowa
sobie z tym poradzi zamieniając podczas wyświetlania strony ten znak na taki jaki jest
uŜywany w danym systemie, a Ty za to nie będziesz musiał(a) zamieniać tych znaków
w momencie gdy stronę będziesz umieszczał(a) na serwerze w Internecie;
jeŜeli plik z grafiką znajduje się w katalogu będącym "wyŜej" w strukturze katalogów
niŜ strona na której on ma być uŜyty, to do do tego celu stosuje się symbol .. (dwie
kropki) dla oznaczenia kaŜdego katalogu będącego "powyŜej" przez który się
"przechodzi", np. ../../plik.gif, lub ../obrazki/plik.gif jeŜeli na końcu
potrzebne jest jeszcze wejście do jakiegoś podkatalogu;
powyŜsze przykłady podawały lokalizację pliku jako względną (i taka jest zalecana mniej jest problemów gdy stronę wraz z powiązanymi z nią plikami trzeba przenieść
Fragmenty strony http://www.poradnik-webmastera.com/kursy/html/ grafika.php
(przystosowano do przygotowania zadań szkolnych)
•
do innego katalogu). Niekiedy jednak konieczne moŜe być podanie pełnej ścieŜki
dostępu do pliku względem katalogu głównego serwera (tzw. ścieŜka bezwzględna na
serwerze). ŚcieŜkę taką naleŜy rozpocząć od znaku "/", i następnie podać wszystkie
katalogi które naleŜy "przejść" aby dotrzeć do pliku, np. /pliki/grafika/plik.gif.
Uwaga: jeŜeli posiadasz konto na serwerze, gdzie adresem strony głównej Twojego
serwisu jest np. www.serwer.pl/~tomek/, to na początku ścieŜki musisz umieścić
/~tomek/, np. /~tomek/pliki/grafika/plik.gif;
adres moŜna w końcu podać takŜe jako bezwzględny w Internecie, podając przed
ścieŜką takŜe adres serwera poprzedzony oznaczeniem protokołu (zwykle http://),
np. http://www.serwer.com.pl/grafika/plik.gif. Tu od razu teŜ uprzedzę, Ŝe
jeŜeli w ten sposób chcesz wykorzystać obrazek znajdujący się w serwisie którego nie
jesteś właścicielem, powinieneś(aś) poprosić najpierw o zgodę właściciela tego
serwisu, gdyŜ w innym przypadku moŜesz mieć problemy gdyŜ naruszysz prawa
autorskie, lub narazisz właściciela serwisu na dodatkowe koszta, gdy posiadane przez
niego konto na serwerze płaci w zaleŜności od ilości przesłanych danych (czyli w
zaleŜności od tego ile danych odwiedzający ściągną do siebie).
Parametry dla wstawionego obrazka
Dla obrazka wstawionego na stronę WWW moŜna zdefiniować wiele parametrów:
•
szerokość - za pomocą parametru width, i wysokość - za pomocą parametru height:
<img src="odie.gif" width="72" height="84" alt="Piesek">
MoŜna podać tylko jeden parametr, ale nie jest to zalecane - gdy podana jest zarówno
wysokość, jak i szerokość, to wtedy podczas wczytywania strony przeglądarka moŜe
od razu zarezerwować odpowiednią ilość miejsca na wyświetlenie obrazka. JeŜeli tego
się nie zrobi, to w miarę jak kolejne obrazki się będą wczytywać, przeglądarka będzie
zmuszona do zmiany pozycji innych elementów strony w zaleŜności od rozmiarów
obrazka, co powoduje iŜ niemoŜliwe staje się przeglądanie strony w momencie gdy
ona się wczytuje, gdyŜ co chwilę tekst się przesuwa w inne miejsce.
Za pomocą podanych parametrów moŜna takŜe przeskalować obrazek, podając nowy
rozmiar w pikselach lub w procentach szerokości ekranu (lub elementu blokowego w
którym obrazek się znajduje). JeŜeli poda się tylko jeden rozmiar, to przeglądarka
dobierze drugi tak aby zachować proporcje obrazka:
<img src="odie.gif" width="50%" alt="Piesek"><br />
<img src="odie.gif" height="168" alt="Piesek">
<img src="odie.gif" width="144" alt="Piesek">
Fragmenty strony http://www.poradnik-webmastera.com/kursy/html/ grafika.php
(przystosowano do przygotowania zadań szkolnych)
Podając obydwa parametry, moŜna te proporcje zniekształcić:
<img src="odie.gif" width="200" height="50" alt="Piesek" />
<img src="odie.gif" width="50" height="200" alt="Piesek" />
Fragmenty strony http://www.poradnik-webmastera.com/kursy/html/ grafika.php
(przystosowano do przygotowania zadań szkolnych)
Wstawianie grafiki – zadanie 3
Zmień wygląd swojej strony index.html, aby wyglądała jak poniżej (zamiast ramek powinny znaleźć
się twoje zdjęcia). Pamiętaj, żeby pliki będące grafiką umieszczać w osobnym folderze (np. o nazwie
obrazki), który powinien znajdować się wewnątrz folderu strona. Wtedy ścieżka dostępu do plików
graficznych będzie wyglądała następująco: src=”obrazki/nazwa_pliku.jpg”
Witam wszystkich na mojej pierwszej stronie internetowej.
To jest wyrównanie tekstu do lewej strony. Tekst wyrównywany jest domyślnie, więc nie muszę
stosować dodatkowych znaczników.
Zdjęcie 1
Sprawdzę jak działa polecenie wyrównania tekstu do lewej.
Zdjęcie 2
Teraz znowu piszę z lewej strony. No i udało się! Muszę pamiętać, że wyrównanie tekstu najlepiej jest
stosować do całych akapitów. Teraz piszę czcionką Arial w kolorze czerwonym.
Zdjęcie 3
Pozdrawiam!!