aplikacje internetowe

Aplikacje internetowe

Grafika na stronach WWW ciąg dalszyAtrybuty znacznika body

Grafika i połączenia• Czy obraz może być jednocześnie połączeniem? Jasne, że tak! • Wystarczy tylko wstawić znacznik <img> pomiędzy otwierający i

zamykający znacznik <a>, a kliknięcie na tak umieszczony obraz spowoduje wywołanie połączenia.

<a href="index.html"><img src="uparrow.gif" alt="Do góry" /></a>

• Jeżeli pomiędzy znacznikami <a> umieścimy zarówno obraz, jak i tekst, kliknięcie któregokolwiek z tych elementów spowoduje wybór tego połączenia.

<a href="index.html"><img src="uparrow.gif" alt="Do góry" />Do strony głównej</a>

Przykład

Obrazy zewnętrzne

• W przeciwieństwie do wewnętrznych, obrazy zewnętrzne nie są od razu bezpośrednio widoczne na stronach WWW. Są one przechowywane osobno i ze stron WWW prowadzi się do nich takie same połączenia, jakie tworzy się do innych zwykłych dokumentów.

• Bardzo częstą techniką jest połączenie obrazów wewnętrznych z zewnętrznymi. Mały, zawierający mniej szczegółów obrazek można umieścić na stronie jako obraz wewnętrzny, który będzie jednocześnie połączeniem do swojej większej i bardziej dokładnej wersji (obrazu zewnętrznego). W takim przypadku czytelnik, chcąc zapoznać się ze szczegółami danego obrazu, kliknie jego miniaturkę, co spowoduje wyświetlenie właściwej grafiki

Przykład

Obrazy zewnętrzne

Aby po kliknięciu na miniaturę obrazu możliwe było zobaczenie powiększenia należy umieścić znacznik <img> pomiędzy otwierającym i zmykającym znacznikiem <a> prowadzącym do powiekszonego obrazu:

<a href="castle.jpg"><img src="sm-castle.jpg" alt="Miniaturka zamku" /></a>

Grafika w tle

• Obrazy możemy wykorzystywać jako tła dokumentu WWW w miejsce tła o jednolitym kolorze.

• Obraz wykorzystywany w taki sposób jest wyświetlany na zasadzie kafli, co oznacza, że ten sam motyw pojawia się obok siebie tyle razy, ile potrzeba, aby wypełnić okno przeglądarki.

• Aby utworzyć tło „wykafelkowane” potrzebny jest obraz, który będzie służył jako pojedynczy element („kafelek”). Tworząc tego typu grafikę, należy zwrócić baczną uwagę, aby przejście od jednej części do drugiej, po ich połączeniu, było możliwie jak najbardziej płynne, co można wykonać przy pomocy jednego z edytorów graficznych.

Przykład

Grafika w tle

• Jeżeli odpowiedni rysunek jest już przygotowany, należy umieścić go jako tło strony.

• Do tego celu służy atrybut znacznika <body> o nazwie background. Jego wartością jest nazwa pliku lub URL wskazujący obraz, który zamierzamy wykorzystać jako tło:

<body background="back01.jpg"><body background="back02.jpg">

Zmiana koloru tła

Aby zmienić kolor tła strony WWW, należy umieścić jego wartość (nazwę lub liczbę szesnastkową) obok atrybutu bgcolor, w znaczniku <body>.

Zmiana koloru tekstu całej strony

• Jeżeli istnieje możliwość zmiany koloru tła i hiperłączy logiczne jest, że można również zmienić kolor tekstu, znajdującego się na stronie.

• Do tego celu służy kilka atrybutów HTML-a, które pozwalają na globalne określanie kolorów tekstu na stronach WWW.

• Do zmiany kolorów tekstu i połączeń potrzebny będzie, tak jak poprzednio, jego numer lub nazwa. Znając jedną z tych danych, możemy wstawić do znacznika <body> któryś z poniższych atrybutów.

Zmiana koloru tekstu całej strony

• text – określa kolor każdego fragmentu tekstu na stronie, który nie jest połączeniem razem z nagłówkami, tekstem w tabelach itp.

• link – określa kolor tekstu połączeń, które nie zostały jeszcze wybrane (standardowo oznaczane są one kolorem niebieskim).

• vlink – określa kolor tekstu połączeń, które zostały już przynajmniej raz wybrane (standardowo oznaczane kolorem fioletowym lub czerwonym).

• alink - określa kolor tekstu połączeń, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy (połączenie aktywowane). Standardowo połączenia takie są wyświetlane na czerwono.

Marginesy strony

• W języku HTML mam również możliwość określania marginesów dokumentu wyświetlanego w przeglądarce. Margines jest to odległość od krawędzi okna przeglądarki wyrażona w punktach.

• Marginesy możemy określać w dwojaki sposób:―jednocześnie odległość od lewej i prawej

krawędzi okna przeglądarki oraz górnej i dolnej krawędzi,

―osobno odległość od każdej z krawędzi.

Marginesy strony

• marginwidth – określa margines poziomy czyli odległość od lewej i prawej krawędzi okna przeglądarki,

• marginheight – określa margines pionowy,• leftmargin – określa margines od lewej krawędzi,• rightmargin – określa margines od prawej krawędzi,• topmargin – określa margines od górnej krawędzi,• bottommargin – określa margines od dolnej krawędzi

aplikacje internetowe

Documents