Tutaj zamieszczam kurs html ze strony www.webmaster.helion.pl
Uwaga: Jeśli Czytelnik tego kursu jest człowiekiem bardzo
zapracowanym i mającym mało czasu, zapewne ucieszy go fakt, że w zasadzie może
zakończyć lekturę, przynajmniej chwilowo, po przestudiowaniu tego rozdziału.
Polecam jednak sięgnięcie za jakiś czas do kursu i przyjrzenie się
dodatkowym możliwościom. Na razie prezentuję w skróconej formie najważniejsze
polecenia, które wystarczą do sporządzenia prostej strony. Jeśli poświęcisz
jeden weekend na gruntowne przestudiowanie tego rozdziału, będziesz już
webmasterem, a przynajmniej domowym webmasterem, który przedstawi na swojej
stronie rodzinę, hobby czy zwierzaka.
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się
polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą
najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć
skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już
wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie
dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy
shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie
bezpłatnych (freeware).
W chwili obecnej (2005 rok) mamy do dyspozycji wiele polskich programów,
dzięki czemu nie jest już konieczne posługiwanie się anglojęzycznymi
edytorami.
Osobiście polecam używanie edytorów tekstowych, a nie graficznych, gdyż
mamy wtedy lepszą kontrolę nad tworzonym dokumentem.
W środowisku Windows 95/98/ME/NT/2000/XP możesz używać m.in.:
- Pajączek NxG - w tej chwili wybór
numer 1 dla polskiego webmastera, program komercyjny. Oferuje wersje
profesjonalną i standardową, w odmianie osobistej (do użytku
niekomercyjnego) lub komercyjnej. Standardową wersję osobistą dostaniesz
już za 49 zł.
- Tiger98 i TigerII Millenium - komercyjny
polski edytor
- edHTML - polski, darmowy edytor
- Website Pro - polski, darmowy
edytor
- Zajączek PHP - polski, darmowy
edytor, z dobrą obsługą PHP
- HTML-owiec - polski, darmowy
program
- TigerII MiniPad - darmowy
notatnik, wygodny do szybkich poprawek
- Kicia - kolejny darmowy
edytor polskiego programisty
- Extra Page - darmowy polski
edytor
- Snape - darmowy polski edytor
- WebPager Xpress - polski
edytor, darmowy - nie jest już rozwijany
- ezHTML - polski edytor, także darmowy
- chyba nie jest już rozwijany
- HotDog
- silny amerykański edytor, komercyjny
- CoffeeCup HTML Editor
- silny, amerykański edytor, komercyjny
- HTML-Kit - bardzo silny
amerykański edytor, z ogromną liczbą pluginów, darmowy
- 1'st Page 2000 - jeden
z najpotężniejszych programów webmasterskich, darmowy
- ACE HTML Editor - darmowy,
anglojęzyczny edytor, z obsługą stron kodowych
Oczywiście możesz się także posłużyć graficznymi edytorami - dla początkujących
polecam szczególnie darmowy edytor dołączony do Mozilli oraz spolszczony
edytor Nvu. Ponieważ jednak uczysz się języka
HTML, warto się posługiwać edytorami tekstowymi.
Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym
nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment
tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>.
Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami
są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają
nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi
literami.
UWAGA: w HTML zalecane
jest stosowanie małych znaczników
- w XHTML, który jest kontynuacją języka HTML, małe znaczniki są już obowiązkowe,
zatem lepiej jest się przyzwyczajać do właściwych technik. W tym miejscu
stosujemy duże znaczniki wyłącznie dla ich lepszego wizualnego wyodrębnienia.
Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach.
Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę
dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które
szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką
praktykę, gdyż w pewnych okolicznościach może ona zaowocować
niespodziewanymi efektami.
Cały dokument powinien być objęty parą znaczników <HTML> </HTML>.
Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>,
która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny
być objęte z kolei znacznikami <BODY> </BODY>. Wygląda to następująco:
<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze
sobą ryzyka jakichś niespodzianek.
Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać
kilka użytecznych informacji.
Między znacznikami <HEAD> i </HEAD> powinno się znaleźć
polecenie <TITLE> </TITLE>.
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami
treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na
przykład:
<HEAD>
<TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE>
</HEAD>
Proszę zwrócić teraz uwagę na pasek tytułowy przeglądarki, gdzie
widnieje treść "Kurs języka HTML - poradnik webmastera: HTML dla bardzo
początkujących".
Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.
Zalecamy usilnie stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2).
Jest to międzynarodowy standard, a "przy okazji" także Polska Norma.
Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go
informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda
następująco:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
Ostatecznie więc, stosuj na początku standardową osnowę:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
Jak uzyskać polskie znaki w edytorach?
UWAGA: czołowe polskie edytory HTML nie
wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same
automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej.
Poniższe uwagi dotyczą głównie edytorów produkcji zachodniej.
Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy
się zaopatrzyć w czcionki w tym standardzie. Są one dostępne (czcionki
TrueType) na polskiej stronie "ogonkowej", pod adresem http://www.agh.edu.pl/ogonki/pl.html.
Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe
PolskieStrony i PolskieStrony2, dostępne w serwisie Polska
Strona Windowsowa. Można również używać nakładki klawiaturowej, która
pozwala zdefiniować klawiaturę ISO, np. nakładkę klawiaturową Polkeyb,
autorstwa Andrzeja Górbiela dla Windows 95/98. Nakładka pozwala
zdefiniować klawiatury w trybie graficznym, choć możliwe jest to za pomocą ręcznego
wpisu do pliku WIN.INI. A stąd możesz pobrać za darmo Polkeyb
2.4
Dla ułatwienia podaję treść wpisu. Wystarczy go skopiować do schowka,
wstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie
uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco:
[PolKeyb]
settings=0 2 10 0 1 10 0
name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175
Darmową klawiaturę ISO można pobrać także w serwisie Polska
Strona Windowsowa, czyli tam, gdzie jest czcionka ekranowa PolskieStrony.
Problem konwersji już istniejących dokumentów można załatwić
"hurtowo" za pomocą specjalnych programów konwertujących. Polecamy
przede wszystkim program Ogonki
97 (228 KB), Michała Jaskólskiego - Michał oferuje ją wszystkim za darmo
i warto podkreślić, że jego program stał się jednym z najważniejszych narzędzi
w "dziecięcym" okresie polskiego Internetu. Niezliczone tysiące osób
konwertowały już nim swoje strony, dostosowując je do zalecanego standardu.
Gdy z jakichś powodów zechcesz używać w swojej witrynie internetowej
strony kodowej Windows-1250 (co odradzamy), wpisz koniecznie odpowiednią
informację META:
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
Podsumowanie:
Jeśli zechcesz stosować stronę kodową ISO-8859-2 (zalecamy), wykonaj następujące
działania:
- Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO-8859-2, za
pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML
- Używaj polskiej klawiatury w standardzie ISO-8859-2
- Wstaw deklarację strony kodowej ISO-8859-2 w nagłówku dokumentu
Jeśli zamierzasz stosować stronę kodową Windows-1250 (nie zalecamy)
- Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w
Windows)
- Używaj standardowej klawiatury Windows
- Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu
Użytkownicy systemu operacyjnego Linux w ogóle nie mają problemu ze stroną
kodową, gdyż system ten posługuje się międzynarodowymi standardami.
Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>,
możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie
miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW
(zazwyczaj szary). Możemy wstawić polecenie:
<BODY BGCOLOR="kolor">
przy czym "kolor" może być podany imiennie (np. red, green, black,
black) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w
przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie
wartości heksadecymalnych, jako bardziej uniwersalnych - zapoznaj się przy
okazji z tabelą
kolorów w naszym kursie, gdzie są w praktyczny sposób pokazane kolory i
sposób ich kodowania (tabelę sporządził Paweł Stokowski).
Uwaga:
BGCOLOR jest uznane za polecenie
i zalecane jest używanie zamiast niego stylów; podajemy je tutaj jedynie ze
względów historycznych.
W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn>
</Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy
ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze
znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi
zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik
otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające
jedynie znacznik otwierający. Niektóre polecenia można używać w obu
postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio
bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit).
Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane.
Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować
tekst.
Uwaga: Powszechnie używany termin "nagłówek" jest nieco
mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka
dokumentu, przyjmujemy właśnie pojęcie "tytuł". Jest ono zresztą
bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów
w obszernych dokumentach, a taka jest jego istota.
Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi
się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń
H1, H2 itd.
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy
tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako
"masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu,
rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka
zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu.
Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <P>
(P = paragraph), które wstawi interlinie między poszczególne fragmenty
tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego
</P>.
Przykład:
<P>To jest treść pierwszego akapitu</P>
<P>To jest treść drugiego akapitu</P>
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy
tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR>,
które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej
interlinii.
To jest pierwszy wiersz<BR>
To jest drugi wiersz<BR>
To jest trzeci wiersz<BR>
To jest czwarty wiersz<BR>
Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku
kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami.
Następnym, często spotykanym elementem jest pozioma linia, którą
wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić
w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią
logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Zauważ,
że w tym dokumencie bloki informacji są rozdzielane właśnie poziomymi
liniami.
Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu
systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu
o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy
zespół zagadnień. Użytkownicy edytorów tekstów spotykają się z tym
elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list
numerowanych i list wypunktowanych.
Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia
<UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się
poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI>
<P>Dlaczego zajmuję się UFO?</P>
<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>
W efekcie uzyskamy:
Dlaczego zajmuję się UFO?
- Uważam, że UFO istnieje
- Uważam, że pozaziemskie cywilizacje mogą nam pomóc
- Uważam, że należy się przygotować na spotkanie
Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>,
czy też zastosujemy dodatkowo znacznik zamykający </LI>. Autorzy edytorów
HTML stosują różne konwencje, a wynik w przeglądarce WWW w obu przypadkach
jest identyczny. Generalnie jednak zaleca się zamykanie znaczników.
Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i
</UL> możemy zastosować <OL> i </OL> (ang. ordered list).
Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich (w
dalszej części podręcznika pokażemy inne sposoby numerowania).
- Uważam, że UFO istnieje
- Uważam, że pozaziemskie cywilizacje mogą nam pomóc
- Uważam, że należy się przygotować na spotkanie
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się
dodatkowe atrybuty czcionki - pogrubienie (bold), pochylenie (italic)
i podkreślenie (underlined). Atrybuty pozwalają uwypuklić jakieś
fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą
pogrubienia:
To jest tekst normalny
<B>To jest tekst pogrubiony (bold)</B>
<I>To jest tekst pochylony (italic, kursywa)</I>
<U>To jest tekst podkreślony (underlined)</U>
Efekt działania tych poleceń:
To jest tekst normalny
To jest tekst pogrubiony (bold)
To jest tekst pochylony (italic, kursywa)
To jest tekst podkreślony (underlined)
Charakterystyczną cechą Internetu jest obecność na stronach
hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej
sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie
znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym
polega istota hipertekstu - jakiś temat może być opisany za pomocą stron
tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet
często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach
znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za
pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik
jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach
przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do
Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest
zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy
dostęp do informacji.
W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do
innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one
bowiem najpowszechniej stosowane.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<A HREF="adres.strony.internetowej">Jakaś nazwa tej
strony</A>
Przykładowy adres mógłby wyglądać następująco:
<A HREF="http://www.pcworld.pl">PC World Komputer</A>
czyli,
PC World Komputer
to tam, gdzie zarabiam na swoją miskę ryżu :-)
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej,
zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW).
Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm
lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W
ostatnich latach stosuje się także default.htm lub default.html
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między
znacznikami <A HREF="... "> i </A>. Jest on domyślnie wyświetlany
na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy
kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się
pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.
Zwróćmy uwagę na to, że adres internetowy jest podawany w cudzysłowie.
Dla działania odsyłacza nie jest to wprawdzie absolutnie konieczne, ale wymaga
tego formalna poprawność składni. Edytory HTML na ogół respektują ten wymóg
(choć nie wszystkie).
Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często
autorzy stron, którzy dysponują przecież zazwyczaj swoim własnym adresem,
wstawiają go na stronie, prosząc o uwagi czytelnika (ale rzadko to czynią
autorzy stron z informacjami dla hackerów!). Jest to dobry obyczaj, który daje
czytelnikowi łatwy kontakt z autorem.
Stosujemy tutaj na przykład następujące polecenie:
<A HREF="mailto:autor@jego.adres">Imię i nazwisko</A>
Na przykład:
<A HREF="mailto:wimmer@helion.pl.">Redaktor</A>
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę
elektroniczną. Navigator wywoła swój własny moduł pocztowy Mail, Internet
Explorer zaś skorzysta z Outlook Express (albo np. z MS Outlook, jeśli jest on
domyślnym programem pocztowym). Także i tutaj stosujmy konsekwentnie w adresie
cudzysłów. Fragment w postaci:
Jeśli masz jakieś uwagi, napisz do <A HREF="mailto:wimmer@helion.pl">autora
strony</A>
zostanie przedstawiony w przeglądarce następująco:
Jeśli masz jakieś uwagi, napisz do autora
strony
Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w
pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje
uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł
zredagować list do autora.
Istotna
uwaga:
polecenie opisujące czcionkę pojawiło się we wczesnych specyfikacjach HTML,
ale w najnowszych jest już uznane za przestarzałe
- zalecane jest zastępowanie go przez style. Tym niemniej warto je w tym
miejscu przedstawić, gdyż przez szereg lat tak właśnie definiowano czcionkę,
a w Sieci istnieje mnóstwo stron używających dalej tego polecenia.
Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam
kolor i wielkość, zawsze może się posłużyć dodatkowymi poleceniami,
zmieniającymi obie cechy. W dokumentach HTML stosuje się nieco inną definicję
wielkości czcionki niż przyjęta w edytorach tekstów. Podstawowa czcionka ma
wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i
jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka 10-12-punktowa.
Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa
odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o
wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce.
Uwaga: Wielkości czcionki w przeglądarce WWW nie należy utożsamiać
z wielkością czcionki, za pomocą której redagujemy tekst w edytorze HTML!
Czcionka w edytorze nie ma żadnego znaczenia dla postaci strony WWW. Możemy na
przykład posługiwać się czcionką System, a i tak w przeglądarce pojawią
się czcionki, które definiuje sam dokument lub przeglądarka.
Oto przykłady odmiennych wielkości czcionki w przeglądarce World Wide Web.
To jest czcionka normalna
To jest czcionka o wielkości 7
To jest czcionka o wielkości 6
To jest czcionka o wielkości 5
To jest czcionka o wielkości 4
To jest czcionka o wielkości 3
To jest czcionka o wielkości 2
To jest czcionka o wielkości 1
Polecenie, które określa wielkość czcionki, ma następującą postać:
<FONT SIZE="x">Tekst objęty definicją</FONT>
x = 1...7
Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej
wartość absolutną. Możemy jednak także nadać wartość relatywną,
czyli względną, podając wielkość zmiany. Skoro czcionka standardowa ma
wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co
najwyżej 2. Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać
6, ale już niczego nie moglibyśmy odejmować.
<FONT SIZE="+x">Tekst objęty definicją </FONT>
<FONT SIZE="-x">Tekst objęty definicją </FONT>
x = 1...6
Gdy jakiś fragment tekstu obejmiemy definicją <FONT SIZE=+2>
</FONT>, będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do
wielkości podstawowej. Gdy użyjemy polecenia <FONT SIZE=-1>
</FONT>, tekst będzie miał wielkość 2.
W ten sposób możemy manipulować wysokością czcionki w tekście,
uwypuklając jakieś fragmenty. Jest to wygodne, gdyż możemy zmienić wielkość
czcionki wewnątrz akapitu, do czego nie nadaje się definicja tytułu.
W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się
tutaj poleceniem:
<FONT COLOR="kolor">Tekst objęty poleceniem</FONT>
Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości
szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo
za pomocą ich nazw. Wszystkie popularne przeglądarki akceptują wartości
heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa
zielona, BB - składowa niebieska), aczkolwiek ich wprowadzanie wymaga
wspomagania w edytorze HTML. Niektóre z edytorów pozwalają wybrać barwę za
pomocą suwaków i wstawiają odpowiedni kod do edytora. Można się również
posłużyć specjalnym programem do wyznaczania tych wartości - w Internecie można
znaleźć kilka robiących to aplikacji.
Nowoczesne przeglądarki interpretują również nazwy kolorów. Początkowo
można było się posłużyć jedną z 16 barw, zaś ostatnio paleta rozszerzyła
się do 256 kolorów. Najczęściej jednak przy definiowaniu koloru tekstu
wystarczy 16 barw i można przyjąć, że posługiwanie się nazwami kolorów
jest najwygodniejszą metodą ich definiowania, ponieważ przeglądarki Mozilli
i Microsoftu zdominowały rynek, więc znaczna część czytelników strony będzie
widziała właściwe kolory.
Oto lista szesnastu podstawowych barw:
black silver gray
black (koloru black nie widać na białym tle)
maroon red purple
fuchsia
green lime olive
yellow
navy blue teal
aqua
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie -
pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego.
Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają
o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w
swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i
nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za
następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się
grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony.
Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy
nie niosą żadnych istotnych treści.
Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików
graficznych - GIF i JPG (JPEG) - które są z założenia skompresowane (często
nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc
zajmują znacznie mniej miejsca niż grafiki w innych formatach. Dzięki temu
transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<IMG SRC="nazwa_pliku">
W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co
dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym
katalogu, konieczne jest podanie ścieżki dostępu. Na przykład:
<IMG SRC="../gambler/gambler.gif">
Nie po to uczymy się języka HTML, aby bawić się nim w domu. W końcu każdy
zechce wystawić swoją stronę w Internecie, aby podzielić się z innymi
swoimi wiekopomnymi dokonaniami czy przemyśleniami. Dlatego trzeba sobie
zapewnić miejsce na jakimś serwerze.
Możesz wykupić kilka megabajtów miejsca u dowolnego dostawcy usług
internetowych, ale to oczywiście kosztuje nieco grosza. Możesz także
skorzystać z jakiejś darmowej oferty - wiele polskich serwisów, w tym i
portale, udostępnia miejsce na swoich serwerach.
|