background image

 

 

Wielkość czcionki

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.

background image

 

 

Wielkość czcionki

Polecenie, które określa wielkość czcionki, ma 
następującą postać:

<FONT SIZE="x">Tekst objęty definicją</FONT>
x = 1...7

background image

 

 

Wielkość czcionki

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

background image

 

 

Wielkość czcionki

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.

background image

 

 

ZADANIE 9

Otwórz  plik  zadanie8.html  i  zapisz  pod 

nazwą  zadanie9.html.  Wstaw  dowolny 
tekst.  Zmień  wielkość  absolutną  liter 
we  fragmencie  tekst  na  7.  Inny 
fragment zmniejsz relatywnie o 1.

background image

 

 

Kolor czcionki

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. Oto lista szesnastu podstawowych 
barw: 

kliknij tutaj

background image

 

 

ZADANIE 10

Otwórz  plik  zadanie9.html  i  zapisz  go 

pod  nazwą  zadanie10.html.  Zmień 
kolory trzech fragmentów tekstu. 

background image

 

 

Grafika na stronie

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.

background image

 

 

Grafika na stronie

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">

background image

 

 

Grafika na stronie

Przy takim zdefiniowaniu obrazek pojawi się z lewej 
strony, a tekst znajdzie się pod obrazkiem. Jeżeli 
chcemy by obrazek był z lewej strony a tekst znajdował 
obok obrazka należy użyć polecenia

<IMG SRC="nazwa_pliku" align=left>
Jeżeli chcemy wyrównać obrazek do prawej musimy 
użyć polecenia:
<IMG SRC="nazwa_pliku" align=right>. 

background image

 

 

ZADANIE 11

Otwórz  plik  zadanie10.html  i  zapisz  go 

pod  nazwą  zadanie11.html.  Z  folderu 
obrazki  wstaw  w  trzech  różnych 
miejscach  trzy  pliki  graficzne  z  lewej 
tak  by  tekst  znalazł  się  nad  i  pod 
obrazkiem, z lewej i z prawej strony tak 
by tekst przylegał do zdjęcia.

background image

 

 

Odsyłacze

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.

background image

 

 

Odsyłacze

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.wp.pl">Wirtualna 
Polska </A>

background image

 

 

Odsyłacze

Odsyłacz do poczty tworzymy za pomocą polecenia:
<A HREF="mailto:autor@jego.adres">Imię i 

nazwisko</A>
Na przykład:
<A HREF="mailto:pwimmer@www-

mag.com.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 Outlook 

98, jeśli jest on domyślnym programem pocztowym). 

Także i tutaj stosujmy konsekwentnie w adresie 

cudzysłów. 

background image

 

 

Odsyłacze

Fragment w postaci:
Jeśli masz jakieś uwagi, napisz do <A 
HREF="mailto:pwimmer@www-
mag.com.pl.pl">autora strony</A>
zostanie przedstawiony w 
przeglądarce następująco:
Jeśli masz jakieś uwagi, napisz do 

autora strony

background image

 

 

ZADANIE 12

Otwórz  plik  zadanie11.html  i  zapisz  go 

pod nazwą zadanie12.html. Wstaw linki 
do 

dwóch 

dowolnych 

stron 

internetowych  i  do  swojej  poczty.  Jeżeli 
nie  posiadasz  własnej  skrzynki  to 
wstaw 

odesłanie 

do 

skrzynki 

praceklasowe@wp.pl


Document Outline