doc1. Grafika i kolor 2. Otaczanie obrazu tekstem 3
download 
Reklamacja Transkrypt
1. Grafika i kolor 2. Otaczanie obrazu tekstem 3
1 Grafika i kolor HTML Dopuszczalne formaty to: • • • GIF - (Graphics Interchange Format) JPEG - (Joint Photographic Expert Group) PNG - (Portable Network Graphics) <html> 1. Grafika i kolor W celu umieszczenia na stronie grafiki musimy posłuŜyć się znacznikiem <IMG>. Znacznik ten nie posiada odpowiednika zamykającego, ale ma szereg atrybutów. NajwaŜniejszym z nich jest SRC. SłuŜy on do określenia ujętej w cudzysłów nazwy pliku lub URL obrazu, który ma zostać w danym miejscu wstawiony. <IMG SRC="obraz.gif"> Innym wymaganym atrybutem jest ALT, określający alternatywny tekst, który towarzyszy obrazkowi. JeŜeli zdarzy się, Ŝe uŜytkownik wyłączy sobie opcję wyświetlania grafiki lub korzysta z przeglądarki tekstowej, grafika nie zostanie wyświetlona - moŜe wtedy otrzymać krótką informację tekstową. <IMG SRC="obraz.gif" ALT="[logo_5KB]"> 2. Otaczanie obrazu tekstem Aby obok grafiki zamieścić dowolna ilość tekstu wraz z akapitami, listami czy nagłówkami musimy się posłuŜyć atrybutem ALIGN. Atrybut ten przyjmuje dwie wartości: LEFT i RIGHT. W pierwszym przypadku obraz zostanie ułoŜony przy lewym marginesie strony, w drugim - przy prawym. Przykład takiego polecenia wygląda następująco: <IMG SRC="kom.gif" ALIGN="left" ALT="[logo_5KB]"> <H1>Wprowadzenie</H1> Graficzne środowisko WWW (World Wide Web) zdobyło tak ogromną popularność, Ŝe coraz więcej osób i firm chciałoby umieścić w Internecie własną stronę, upatrując w tym pewną formę kontaktu ze światem i skuteczną promocję. [...] MoŜe się zdarzyć, Ŝe zechcemy umieścić obok obrazka tylko kilka zdań, a nowy wątek tekstu rozpocząć pod rysunkiem. Aby przerwać funkcję otaczania obrazu przez tekst musimy uŜyć znacznika <BR> z atrybutem CLEAR. Spowoduje on, Ŝe nowa linia rozpocznie się dopiero pod obrazem. 3. Określanie odległości obrazu od tekstu Mając moŜliwość umieszczania tekstu wokół obrazu, moŜemy równieŜ określić odległość, w jakiej tekst powinien znaleźć się od grafiki. Wykorzystujemy do tego atrybuty HSPACE i VSPACE. Wartości obydwu podaje się w pikselach, przy czym HSPACE określa odległość z prawej strony i z lewej, natomiast VSPACE pozwala określić odległość tekstu od górnej i dolnej krawędzi obrazu. <IMG SRC="kom.gif" ALIGN="left" HSPACE="50" ALT="[logo_5KB]"> <H1>Wprowadzenie</H1> Graficzne środowisko WWW (World Wide Web) zdobyło tak ogromną popularność, Ŝe coraz więcej osób i firm chciałoby umieścić Andrzej Mazur – [email protected] 2 Grafika i kolor HTML 4. Grafika i połączenia <html> w Internecie własną stronę, upatrując w tym pewną formę kontaktu ze światem i skuteczną promocję. Bardzo ciekawym rozwiązaniem jest wykonanie połączenia w formie elementu graficznego. <A HREF="witaj.html"><IMG SRC="kom.gif" BORDER="0"></A> Jak widzimy w powyŜszym przykładzie pomiędzy znacznik <A>...</A> wstawiony został element graficzny. Najechanie kursorem na jego powierzchnię powoduje pojawienie się charakterystycznej "łapki", a na pasku statusu przeglądarki (w lewym dolnym rogu) - adresu: witaj.html. Atrybut BORDER=0 dla znacznika <IMG> ma na celu zlikwidowanie obramowania pojawiającego się po zastosowaniu grafiki jako odnośnika. 5. Skalowanie obrazów Dwa atrybuty znacznika <IMG>, HEIGHT i szerokość i wysokość obrazu, podawaną w pikselach. WIDTH, określają odpowiednio <IMG SRC="obraz.gif" WIDTH="120" HEIGHT="150"> 6. Kolory Chcąc zmienić kolor tła strony WWW musimy zmodyfikować nieco sekcję <BODY> i wstawić w niej atrybut BGCOLOR. Barwy w HTML-u moŜna określać na dwa sposoby: • • za pomocą predefiniowanej nazwy; za pomocą liczby szesnastkowej (heksadecymalnej). Pierwszy sposób polega na podaniu nazwy koloru w języku angielskim, np. black (czarny), red (czerwony), blue (niebieski), itd. <BODY BGCOLOR="green"> Drugi sposób definiowania koloru tła na stronie, to określenie koloru za pomocą wartości liczbowej. UŜywamy do tego celu wartości heksadecymalnych (szesnastkowych 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E i F), którymi moŜemy zastąpić angielską nazwę koloru: <BODY BGCOLOR="#rrggbb"> Kolor biały ma wartość "#FFFFFF", a czarny "#000000". Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR składowa czerwona, GG - składowa zielona, BB - składowa niebieska). Wprawdzie nazwy kolorów są zdecydowanie łatwiejsze do zapamiętania niŜ wartości liczbowe, nie są jednak w stanie opisać tak duŜej liczby kolorów, no i nie wszystkie przeglądarki potrafią je obsłuŜyć. UŜywanie wartości heksadecymalnych jest bardziej uniwersalne, naleŜy jedynie pamiętać o umieszczeniu znaku # (hash). <BODY BGCOLOR="#FF0000"> Andrzej Mazur – [email protected] 3 Grafika i kolor HTML Tabela 1 - Lista szesnastu podstawowych barw Definicja RGB Nazwa angielska Definicja RGB black #000000 fuchsia #FF00FF silver #C0C0C0 green #008000 gray #808080 lime #00FF00 white #FFFFFF olive #808000 maroon #800000 yellow #FFFF00 red #FF0000 navy #000080 purple #800080 blue #0000FF teal #008080 aqua #00FFFF źródło: materiały własne Zmiana koloru tekstu <html> Nazwa angielska Do zmiany kolorów tekstu i połączeń wykorzystać moŜna, tak jak w przypadku tła, numer koloru lub jego angielską nazwę. W tym celu naleŜy wstawić do znacznika <BODY> jeden z atrybutów: TEXT, LINK, VLINK lub ALINK. <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000"> Tabela 2 - Opis atrybutów TEXT, LINK, VLINK i ALINK Atrybut Znaczenie TEXT Określa kolor kaŜdego fragmentu tekstu na stronie, który nie jest połączeniem, łącznie z nagłówkiem, 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 są one 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. źródło: materiały własne Zmiana koloru pojedynczego znaku JeŜeli do zmiany koloru tekstu uŜyjemy znacznika <BODY>, przekształcenia te dotyczą całego tekstu, znajdującego się na stronie. Istnieje jednakŜe moŜliwość zmiany barwy pojedynczych znaków, co moŜe być wykorzystywane zamiast lub łącznie ze zmianą koloru całości tekstu. MoŜemy do tego celu wykorzystać atrybut COLOR. Pozwala on na Andrzej Mazur – [email protected] 4 Grafika i kolor HTML <html> zmianę barwy tekstu, objętego parą znaczników <FONT>...</FONT>. Posługujemy się wtedy poleceniem: <FONT COLOR="angielskanazwakoloru">Tekst na stronie</FONT> Zwrócić naleŜy uwagę, iŜ znacznik <FONT> musi zostać zamknięty. W przeciwnym razie cały tekst od tego miejsca będzie takiego koloru, jaki zdefiniujemy. Tak samo, jak w przypadku określania koloru tła dla strony moŜemy uŜywać wartości heksadecymalnych: <FONT COLOR="rrggbb">Tekst na stronie</FONT> 7. Grafika jako tło Kolejnym ze sposobów „pokolorowania” stron WWW jest zastosowanie grafiki jako tła. Do tego celu słuŜy kolejny 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="tlo.gif"> Andrzej Mazur – [email protected]
