Aplikacje internetowe Grafika na stronach WWW

Grafika w sieci WWW Obrazy znajdujące się na stronach WWW można podzielić na dwie kategorie: wewnętrzne, zewnętrzne. Pierwsze z nich to obrazy, znajdujące się bezpośrednio na stronie, umieszczane pośród tekstu i połączeń. Są one ładowane automatycznie razem ze stroną, oczywiście pod warunkiem, że korzystamy z przeglądarki graficznej i opcja automatycznego wyświetlania obrazów jest włączona. Obrazy zewnętrzne nie są ładowane automatycznie, mogą zostać wyświetlone dopiero na żądanie użytkownika, więc zwykle prowadzą do nich hiperpołączenia. Aby oglądać obrazy tego typu, nie musimy koniecznie posiadać przeglądarki graficznej.

Obrazy wewnętrzne na stronach WWW: znacznik <IMG> Jeżeli mamy przygotowany plik graficzny w formacie GIF lub JPEG, możemy umieścić go na stronie WWW. Do tego celu służy znacznik <img>. Znacznik ten, podobnie jak <hr> i <br>, nie posiada w HTML-u znacznika zamykającego. W XHTML-u na końcu znacznika, po liście jego atrybutów, należy umieścić odstęp i znak ukośnika. Znacznik <IMG> posiada wiele różnych atrybutów, które pozwalają na kontrolę sposobu wyświetlania obrazu na stronie.

Obrazy wewnętrzne na stronach WWW: znacznik <IMG> Najważniejszym atrybutem znacznika <img> jest bez wątpienia src. Służy on do określenia ujętej w cudzysłów nazwy pliku lub URL-a obrazu, który ma zostać w danym miejscu wstawiony. Przy określaniu ścieżki dostępu do tego pliku obowiązują te same reguły, o których była już mowa przy omawianiu tworzenia połączeń i atrybutu href. Aby więc wstawić do strony plik o nazwie image.gif, znajdujący się w tym samym katalogu co tworzona strona, musimy użyć następującego zapisu: <img src="image.gif" /> Gdyby plik ten znajdował się o jeden katalog wyżej, znacznik wyglądałby tak: <img src="../image.gif" />

Dodawanie tekstu alternatywnego Obrazy mogą zamienić prostą, tekstową stronę WWW w prawdziwą „ucztę dla oczu”. Co się jednak stanie, jeśli użytkownik wyświetli stronę w przeglądarce tekstowej lub wyłączy pobieranie obrazów, tak że wszystkie, tak pracowicie przygotowywane, elementy graficzne strony zostaną zastąpione zwykłymi, standardowymi ikonami? Nagle ta wspaniała wizualna uczta, którą była strona, znacznie straci na swej atrakcyjności. A co gorsza, jeśli nie przewidzieliśmy tej możliwości podczas projektowania strony, to część Naszych potencjalnych odbiorców może nie być w stanie jej oglądnąć lub wykorzystać jej możliwości.

Dodawanie tekstu alternatywnego Jeden z tych problemów można rozwiązać w bardzo prosty sposób. Używając atrybutu alt znacznika <img>, możemy zastąpić obraz jakimś odpowiednim fragmentem tekstu, który będzie wyświetlany w przeglądarkach, nieobsługujących obrazów. W przeglądarkach tekstowych, takich jak Lynx, obrazy umieszczane na stronach przy użyciu znacznika <img> są zazwyczaj „wyświetlane” jako słowo: „IMAGE” zapisane w nawiasach kwadratowych: [IMAGE]. Jeśli obraz stanowi jednocześnie hiperpołączenie, to zostaje ono zachowane.

Dodawanie tekstu alternatywnego Atrybut alt znacznika <img> daje możliwość podania znacznie pełniejszego opisu obrazka, który przekaże użytkownikom, korzystającym z przeglądarek tekstowych lub osobom, które wyłączyły pobierania rysunków, znacznie więcej informacji niż pojedyncze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który należy wyświetlić zamiast obrazka: <img src="mojobrazek.gif" alt="[zdjęcie kota]" />.

Ćwiczenie 1

Ćwiczenie 1 Załóżmy, że chcemy wstawić ten obraz w osobnej linii, tak aby nagłówek znajdował się tuż pod nim. Aby zrobić to właśnie w ten sposób, należy wstawić znacznik <img> w osobnym akapicie, tuż przed nagłówkiem (obrazy, podobnie jak połączenia nie stanowią odrębnych elementów tekstowych, muszą więc korzystać z usług innych znaczników, takich jak akapity czy nagłówki). <p><img src="house.jpg" alt="Pałac Strachu Halloween" /></p> <h1>Witajcie w Pałacu Strachu Halloween!!</h1>

Ćwiczenie 1

Obrazy i tekst W poprzednim ćwiczeniu wstawiliśmy wewnętrzny obraz w osobnym akapicie, podczas gdy tekst znalazł się poniżej. Ale obrazy można wstawiać również obok tekstu, niejako w tej samej linii. Aby wstawić obraz obok tekstu, należy użyć znacznika <img> we właściwym miejscu, czyli wewnątrz odpowiedniego znacznika (<h1>, <p>, <address> itp.), jak pokazano w poniższej linii kodu. <h1><img src="house.jpg" alt="Pałac Strachu Halloween" /> Witajcie w Pałacu Strachu Halloween!!</h1>

Ćwiczenie 2

Wzajemne położenie tekstu i obrazu Zauważmy, że w pokazanym przykładzie dolne krawędzie tekstu i obrazu znajdujących się w jednej linii pokrywają się. Znacznik <img> zawiera jednakże atrybut align, który umożliwia ułożenie obrazu powyżej lub poniżej otaczającego go tekstu, lub innych obrazów w tej samej linii. W HTML-u zdefiniowane zostały trzy wartości atrybutu ALIGN. align="top" – wyrównuje górną krawędź obrazu względem górnej krawędzi linii (może to być górna krawędź tekstu lub innego obrazu). align="middle" – wyrównuje obraz w taki sposób, że jego środek leży dokładnie pośrodku linii. align="bottom" – wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii (domyślny).

Przykład align="top"

Przykład align="middle"

Przykład align="bottom"

Obraz otoczony tekstem Obraz umieszczony w linii tekstu wygląda dobrze tylko wtedy, gdy długość tekstu nie przekracza tej jednej linii. Jeżeli wstawimy obraz do dłuższego fragmentu, składającego się z wielu linii, cały tekst (z wyjątkiem jednej linii) przesuwa się pod lub nad obraz.

Przykład

Atrybuty align="left" i align="right" Pierwsza z tych wartości, align="left", pozwala na ułożenie obrazu przy lewym marginesie strony, a align="right", jak można się domyślić, przy prawym. Ale to nie wszystko, bowiem użycie jednej z tych wartości powoduje także, że przestrzeń pomiędzy obrazem a przeciwnym marginesem może być wypełniona tekstem.

Przykład

Przykład

Atrybuty align="left" i align="right" Po ułożonym w ten sposób obrazie możemy wstawiać dowolne elementy HTML-a (akapity, listy, nagłówki, a nawet kolejne obrazy) i możemy być pewni, że każdy z nich znajdzie się pomiędzy nim a przeciwnym marginesem strony (możemy także umieścić obrazy przy obydwu marginesach, wtedy tekst znajdzie się pośrodku). Przeglądarka wypełnia całą przestrzeń aż do dolnej krawędzi obrazu, a następnie kontynuuje wyświetlanie tekstu pod nim.

Przykład

Przerwa w otaczaniu obrazu tekstem Może się zdarzyć, że zechcemy umieścić obok obrazka tylko kilka zdań, a nowy wątek tekstu rozpocząć pod spodem. Zwyczajne przełamanie linii nie zadziała w takim przypadku poprawnie, tekst zostanie wprawdzie wyświetlony od nowej linii, ale wciąż obok a nie pod obrazem. Nie pomoże także wstawienie nowego paragrafu, jego treść będzie się ciągle znajdowała obok rysunku.

Przerwa w otaczaniu obrazu tekstem Aby przerwać funkcję otaczania obrazu przez tekst, musimy użyć znacznika podziału linii <br> z atrybutem clear. Powoduje on, że nowa linia rozpoczyna się dopiero pod obrazem a więc w miejscu, gdzie przy lewym marginesie nic już nie ma (margines jest wolny). Atrybut clear może przyjmować jedną z trzech wartości: left – nowa linia rozpoczyna się od miejsca, gdzie wolny jest lewy margines (dotyczy obrazów ułożonych po lewej stronie), right – nowa linia rozpoczyna się od miejsca, gdzie wolny jest prawy margines (dotyczy obrazów ułożonych po prawej stronie), all – nowa linia rozpoczyna się od miejsca, gdzie obydwa marginesy są wolne.

Przykład

Określanie odległości obrazu od tekstu Mając możliwość umieszczania tekstu wokół obrazu, możemy również zechcieć określić, w jakiej odległości tekst ten powinien się znaleźć. Pozwalają na to atrybuty hspace i vspace. Wartości obydwu podaje się w pikselach, przy czym: vspace - pozwala na kontrolę odległości tekstu od górnej i dolnej krawędzi obrazu, hspace – określa odległość z prawej i lewej strony.

Przykład