Wszystkie przykłady opisane w artykule
znajdują się na dołączonej
płycie CD w katalogu Warsztat_HTML.
HTML
HTML
C
M
Y
K
HTML
INTERNET.paŸdziernik.2004
96
Po teoretycznym
opisie jêzyka
HTML (MI 7
i 8/04) pora
na æwiczenia
praktyczne.
Przedstawiona
seria æwiczeñ
pomaga
w opanowaniu
jêzyka HTML
w stopniu
wystarczaj¹cym
do tworzenia
dokumentów
sk³adaj¹cych siê
z tekstów.
W³odzimierz
Gajda
NA CD
NEWSY
Z OK£ADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
– ćwiczenia z tekstem
C
M
Y
K
Edycja dokumentów HTML
Dokument w jêzyku HTML zawiera – oprócz swojej treœci – sporo
ró¿nych napisów, które ustalaj¹ strukturê tekstu i powoduj¹ taki a nie
inny wygl¹d dokumentu w przegl¹darce. Chodzi oczywiœcie o znacz-
niki. Przygotowuj¹c dokument HTML musimy napisaæ oprócz samej
treœci strony tak¿e znaczniki HTML. Jeœli na stronie chcemy umieœciæ
wyt³uszczony napis OSA, to trzeba napisaæ:
<STRONG>OSA</STRONG>
czyli dwadzieœcia znaków zamiast trzy. Jeœli napis OSA ma byæ po-
chylony, znaczniki <STRONG> i </STRONG> nale¿y zast¹piæ znacz-
nikami <EM> oraz </EM>:
<EM>OSA</EM>
Jednym ze sposobów przyspieszenia edycji plików HTML jest u¿y-
cie skrótów klawiszowych. Program NotH (zawarty na p³ycie do³¹czo-
nej do czasopisma) u³atwia pracê nad dokumentami HTML dziêki zde-
finiowanym skrótom i funkcjom ukierunkowanym na edycjê kodu
HTML. Dowolny element HTML mo¿emy uzyskaæ naciskaj¹c dwa
klawisze.
NotH – tworzymy pierwszy dokument
Najczêœciej stosowanym skrótem programu NotH jest skrót Ctrl+S+A.
Skrót ten tworzy pusty dokument HTML, umieszczaj¹c w nim elemen-
ty HTML, HEAD, TITLE, BODY oraz META.
Po aktywacji skrótu ^SA mo¿emy przyst¹piæ do wpisywania za-
wartoœci dokumentu. Kursor jest umieszczony pomiêdzy znacznikami
<TITLE> oraz </TITLE>. Jako tytu³ strony wpiszemy Witaj!:
<TITLE>Witaj!</TITLE>
Nastêpnie przejdziemy do zawartoœci strony i pomiêdzy znacznika-
mi <BODY> i </BODY> wprowadzimy tekst:
<H1>Moja pierwsza strona</H1>
Do umieszczenia znaczników <H1> oraz </H1> s³u¿y skrót ^P1
(tj. Ctrl+P+1).
Tak przygotowany dokument zapisujemy w folderze D:\www\cw-
-1.html, po czym naciskamy klawisz F9, który uruchamia domyœln¹
przegl¹darkê i pokazuje wygl¹d utworzonego dokumentu. Dokument
ten zosta³ przedstawiony na rys. 1. Zauwa¿my, ¿e napis Witaj!, który
umieœciliœmy pomiêdzy znacznikami elementu TITLE, widnieje na
belce tytu³owej przegl¹darki, zaœ tekst Moja pierwsza strona – zawar-
toœæ elementu H1 – stanowi treœæ strony WWW.
Rys. 1. Strona wykonana programem NotH
Wszystkie przyk³ady omówione w tekœcie s¹ umieszczone na CD.
W celu obejrzenia wygl¹du przyk³adu nale¿y dwukrotnie klikn¹æ odpo-
wiedni plik. Kod HTML strony obejrzymy otwieraj¹c wybrany dokument
programem NotH lub wykonuj¹c w przegl¹darce operacjê Widok |
Ź
ród³o.
Skróty klawiszowe Ctrl+S+A są zapisywane również jako ^SA. Skrót taki
oznacza, że należy:
X
nacisnąć i przytrzymać klawisz Ctrl,
X
nacisnąć (jeden raz, szybko!) klawisz S (klawisz Ctrl powinien
być cały czas naciśnięty),
X
zwolnić klawisz Ctrl,
X
nacisnąć jeden raz klawisz A.
Wstawianie, usuwanie i zmiana znaczników
Zanim przejdziemy do omawiania kolejnych æwiczeñ, skupimy
uwagê na edycji HTML. Wykonamy trzy rodzaje operacji: wstawia-
nie znaczników, usuwanie znaczników, zamianê jednego znacznika
na drugi.
Wstawianie znaczników realizujemy naciskaj¹c odpowiednie kla-
wisze:
Ctrl+S+A – pusta strona,
Ctrl+P+1 – pojawia siê nag³ówek H1,
Ctrl+F+S – element STRONG itd.
Po aktywacji ka¿dego skrótu kursor myszki jest ustawiany w miej-
scu, w którym bêdziemy wprowadzaæ tekst. Po aktywacji skrótu
Ctrl+P+P otrzymamy akapit, a kursor zostanie umieszczony pomiêdzy
znacznikami:
<P>
|–po³o¿enie kursora
</P>
Po aktywacji skrótu Ctrl+P+2:
<H2>kursor umieszczony zostanie wewn¹trz
©
znaczników</H2>
otrzymamy nag³ówek H2 z kursorem umieszczonym pomiêdzy znacz-
nikami otwieraj¹cym i zamykaj¹cym. Skrót Ctrl+P+I:
<IMG src=”|–pozycja kursora” alt=””>
wstawi element IMG, przesuwaj¹c kursor wewn¹trz atrybutu src.
Korzystanie ze skrótów oraz innych metod wstawiania kodu daje
pewnoœæ, ¿e otrzymamy kod pozbawiony czeskich b³êdów.
Jeœli napisany tekst chcemy modyfikowaæ, nale¿y korzystaæ ze
skrótów i zaznaczania tekstu. Aktywacja wiêkszoœci skrótów powodu-
je obejmowanie zaznaczonego tekstu. Jeœli w zdaniu Przysz³o to na
œwiat w¹t³e, s³abe zaznaczymy wyraz œwiat, po czym naciœniemy
Ctrl+F+E, to otrzymamy kod:
Przysz³o to na <EM>œwiat</EM> w¹t³e, s³abe
Po wykonaniu tej operacji zaznaczony jest blok obejmuj¹cy wsta-
wiony element wraz z zawartoœci¹.
Drugim rodzajem operacji jest usuwanie znaczników. W NotH s³u-
¿y do tego skrót Ctrl+Del. Nale¿y zaznaczyæ ca³y element od pocz¹tku
znacznika otwieraj¹cego do koñca znacznika zamykaj¹cego. Naciœniê-
cie Ctrl+Del spowoduje usuniêcie znacznika otwieraj¹cego i zamyka-
j¹cego.
Ostatnia operacja to zamiana elementów. Do tej operacji wykorzy-
stujemy klawisz Shift. Jeœli w tekœcie Ene, due, ryke, fake zaznaczymy
s³owo ryke i wykonamy skrót Ctrl+F+E, to otrzymamy kod:
Ene, due, <EM>ryke</EM>, fake
z zaznaczonym ca³ym elementem EM. Jeœli element ten chcemy za-
mieniæ na nag³ówek H1, nale¿y skorzystaæ ze skrótu Ctrl+P+1, przy-
trzymuj¹c klawisz Shift. Otrzymamy kod:
Ene, due, <H1>ryke</H1>, fake
z zaznaczonym elementem H1. Jeœli teraz H1 chcemy zmieniæ na
STRONG, to naciskamy skrót Ctrl+F+S przytrzymuj¹c Shift:
Ene, due, <STRONG>ryke</STRONG>, fake
Jeœli uznamy, ¿e STRONG jest zbêdny, naciskamy Ctrl+Del.
Otrzymamy ponownie:
Ene, due, ryke, fake
W ten sposób jeden zestaw skrótów s³u¿y zarówno do wstawiania,
jak i zmiany znaczników.
Podsumowuj¹c, program NotH umo¿liwia:
X
wstawianie znaczników skrótami klawiszowymi – znaczniki s¹ wol-
ne od literówek,
X
pozycjonowanie kursora – kursor jest ustawiany w miejscu, w któ-
rym najprawdopodobniej bêdziemy chcieli wprowadzaæ tekst,
X
obejmowanie zaznaczonego bloku tekstu znacznikami,
X
usuwanie znaczników (skrót Ctrl+Del),
X
zamianê znaczników (klawisz Shift).
HTML
INTERNET.paŸdziernik.2004
97
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OK£ADKI
NEWSY
NA CD
C
M
Y
K
Tekst na stronach WWW
Pierwszy etap nauki jêzyka HTML polega na opanowaniu umiejêtno-
œci przygotowania dokumentów zawieraj¹cych tekst. Opowiadania,
powieœci, artyku³y, teksty piosenek, wiersze, streszczenia, przewodni-
ki, fora dyskusyjne i katalogi adresów WWW – niemal wszystkie do-
kumenty dostêpne w Internecie zawieraj¹ teksty. W istocie trudno so-
bie wyobraziæ witrynê WWW, która nie zawiera tekstu.
Z tekstem zwi¹zane s¹ nastêpuj¹ce elementy HTML:
<P></P> – jeden akapit tekstu,
<BR> – z³amanie wiersza,
<EM></EM> – uwypuklenie tekstu,
<STRONG></STRONG> – uwypuklenie tekstu.
Do elementów tych mamy skróty:
^PP – <P></P>
^PR – <BR>
^FE – <EM></EM>
^FS – <STRONG></STRONG>
Pamiêtaj¹c, ¿e skrót ^SA tworzy pust¹ stronê, przejdŸmy do æwi-
czeñ. W celu unikniêcia koniecznoœci wklepywania tekstów zawartych
w æwiczeniach, na p³ycie CD s¹ umieszczone odpowiednie dokumenty
tekstowe. Æwiczenia mo¿emy wykonywaæ korzystaj¹c z techniki ko-
piuj-wklej lub poddawaæ modyfikacjom pliki tekstowe.
Æ
WICZENIE
2:
PRZYGOTUJ STRONÊ PREZENTUJ¥C¥ KILKA PRZYS£ÓW
.
Rys. 2. Akapity
zawieraj¹ce przys³owia
Tworzymy w NotH no-
wy dokument – naci-
skamy ^SA. Miêdzy
dwoma znacznikami
TITLE wprowadzamy
tytu³ strony Przys³owia.
Nastêpnie przechodzi-
my miêdzy elementy
BODY, po czym wstawiamy trzy puste akapity, jeden pod drugim. Na-
ciskamy trzykrotnie skrót ^PP, za ka¿dym razem przesuwaj¹c kursor
w dó³. Otwieramy dokument tekstowy z przys³owiami i korzystaj¹c
z techniki kopiuj-wklej kopiujemy przys³owia do trzech wstawionych
akapitów. Dokument zapisujemy i w³¹czamy podgl¹d (klawisz F9).
Æ
WICZENIE
3:
PRZYGOTUJ STRONÊ Z TREŒCI¥ WYLICZANKI
„E
NE
-
DUE
”.
Rys. 3. Z³amanie linii
po ka¿dym wersie
W programie NotH
otwieramy plik tek-
stowy zawieraj¹cy
treϾ wyliczanki. Za-
znaczamy ca³y tekst
(skrót Ctrl+A jest
stosowany w wiêk-
szoœci aplikacji), po
czym aktywujemy
skrót ^PP. Tekst wy-
liczanki zostanie zawarty we wnêtrzu akapitu. Zaznaczony blok obej-
muje w tym momencie tekst wyliczanki i znaczniki P. Aktywujemy
skrót ^SA i otrzymamy pust¹ stronê zawieraj¹c¹ akapit z wyliczank¹.
Teraz pomiêdzy znacznikami TITLE wprowadzamy tytu³ strony.
Otrzyman¹ stronê zapisujemy, po czym w³¹czamy podgl¹d. Mimo ¿e
kolejne wersy wyliczanki zosta³y umieszczone w nowych linijkach, to
w przegl¹darce tekst stanowi jedn¹ liniê. Do z³amania linii wewn¹trz
akapitu u¿ywamy znacznika <BR>. Po dodaniu elementów BR kod
strony wygl¹da nastêpuj¹co:
<P>
Ene, due, ryke, fake,<BR>
Torbe, burbe, ósme, smake,<BR>
Des, deus kosmateus,<BR>
I morele baks.<BR>
</P>
Æ
WICZENIE
4:
PRZYGOTUJ STRONÊ Z WIERSZYKAMI
...
...które œpiewa dzieciêcy zespó³ muzyczny Kapela Radoœci Ma³ych
w celu poprawienia dykcji. W ka¿dym wierszyku wyt³uœæ lub pochyl
dowolny wyraz. W rozwi¹zaniu zawartym na p³ycie uwypuklono
akcentowane wyrazy.
Rys. 4. Uwypuklanie tekstu
Tworzymy now¹ stronê
(^SA). Wprowadzamy miê-
dzy znacznikami TITLE ty-
tu³ Rozœpiewki, a nastêpnie
kopiujemy i wklejamy treϾ
rozœpiewek. Wklejone linijki
tekstu zaznaczamy i obejmu-
jemy znacznikami <P>
(^PP). Po ka¿dej rozœpiewce
dodajemy znak z³amania wiersza, po czym zaznaczamy kolejno ró¿ne
wyrazy i aktywujemy skróty ^FS i ^FE. Otrzymany dokument zapisu-
jemy i przechodzimy do podgl¹du (F9).
Domyœlne formatowanie elementu STRONG to wyt³uszczenie kro-
ju, zaœ element EM zmienia krój czcionki na pochylony.
Nagłówki
Dokumenty z poprzednich æwiczeñ nie zawiera³y bardzo wa¿nych ele-
mentów – nag³ówków. Nag³ówki dziel¹ dokument na rozdzia³y, pod-
rozdzia³y oraz sekcje. HTML umo¿liwia szeœciostopniowy podzia³ do-
kumentu. Nag³ówki oznaczamy elementami H1, H2, H3, H4, H5 oraz
H6. Do elementów tych mamy skróty ^P1 – H1, ^P2 – H2 itd.
Æ
WICZENIE
5:
PRZYGOTUJ STRONÊ Z PROLOGIEM DRAMATU
„H
ENRYK
VIII”.
Rys. 5. Dokument
z nag³ówkami H1, H2
i H3
Otwieramy dokument
tekstowy w NotH, zazna-
czamy ca³oœæ (Ctrl+A)
i przekszta³camy w stronê
WWW (^SA). Teraz za-
znaczamy blok obejmuj¹-
cy tytu³ i aktywujemy
skrót ^P1. Otrzymamy
nag³ówek H1 obejmuj¹cy
tytu³. Nastêpnie zaznacza-
my blok obejmuj¹cy na-
zwisko autora i naciska-
my ^P2. W dokumencie
pojawi siê nag³ówek H2.
Podobnie dodajemy nag³ówek H3 (skrót ^P3). Nag³ówkiem tym
obejmujemy wyraz Prolog.
Zaznaczamy ca³y prolog, po czym przekszta³camy go w akapit (^PP).
Na koñcu ka¿dej linijki prologu dodajemy znacznik <BR>. Æwiczenie
koñczymy wpisuj¹c pomiêdzy znacznikami TITLE tytu³ dokumentu.
HTML
INTERNET.paŸdziernik.2004
98
NA CD
NEWSY
Z OK£ADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
Æ
WICZENIE
6:
PRZYGOTUJ STRONÊ Z TREŒCI¥
NOWELI
„L
ATARNIK
”.
Rys. 6. TreϾ noweli
sformatowana elementami
P, BR, H1, H2, H3
Po otworzeniu dokumentu
tekstowego w programie
NotH wykonujemy kolejno:
X
wstawianie zaznaczamy
ca³oœæ (Ctrl+A),
X
wstawianie przekszta³camy
w stronê WWW (^SA),
X
wstawianie dodajemy na-
g³ówki obejmuj¹ce autora
i tytu³ (^P1, ^P2),
X
wstawianie dodajemy nag³ówek H3 obejmuj¹cy rzymski numer roz-
dzia³u (^P3),
X
wstawianie kolejne akapity obejmujemy znacznikami P (^PP),
X
wstawianie w treœci cytatów Pana Tadeusza dodajemy na koñcu
ka¿dej linijki znaki z³amania wiersza (^PR),
X
wstawianie zmieniamy tytu³ dokumentu,
X
wstawianie dokument zapisujemy i w³¹czamy podgl¹d (F9).
Tekst preformatowany
Tekst preformatowany zachowuje bia³e znaki: spacjê oraz z³amanie
wiersza. Dodatkowo jest pisany czcionk¹ sta³ej szerokoœci. G³ównie
stosujemy go do kodów programów i skryptów komputerowych. Tekst
preformatowany obejmujemy znacznikami <PRE></PRE> uzyskiwa-
nymi skrótem ^FP.
Æ
WICZENIE
7:
PRZYGOTUJ STRONÊ Z KODEM FUNKCJI
FILES
F
ROM
F
OLDER
.
Rys. 7. Tekst
preformatowany
Otwieramy dokument
tekstowy, zaznaczamy ca-
³y tekst i obejmujemy
znacznikami <PRE>
i </PRE>. Dodajemy sza-
blon pustej strony (gdy
zaznaczony jest ca³y tekst
naciskamy ^SA), dodaje-
my nag³ówek i zmieniamy tytu³ dokumentu. Gotow¹ stronê zapisuje-
my i otwieramy w przegl¹darce.
Æ
WICZENIE
8:
PRZYGOTUJ STRONÊ
Z WIERSZYKIEM
„C
HRZ¥SZCZ
”.
Rys. 8. Tekst
preformatowany
zastosowany do wiersza
Elementu PRE mo¿emy
równie¿ u¿yæ do zwyk³ego
tekstu. Po otworzeniu pliku
z treœci¹ wierszyka, korzy-
staj¹c ze skrótów ^SA (sza-
blon pustej strony), ^FP
(tekst preformatowany
obejmuj¹cy tekst wierszy-
ka), ^P1 (nag³ówek H1
strony, zawieraj¹cy nazwi-
sko autora) oraz ^P2 (nag³ówek H2 strony – tytu³ wiersza) tworzy-
my stronê WWW.
Znaki specjalne
Poniewa¿ znaki < oraz > obejmuj¹ znaczniki, zatem nie nale¿y ich
u¿ywaæ w innym celu. Jeœli na przyk³ad chcemy na stronie poœwiêco-
nej jêzykowi HTML umieœciæ informacjê, ¿e „... znacznik
<STRONG> ma takie a takie dzia³anie...”, wówczas znaki < i > musi-
my zast¹piæ napisami < oraz >.
Æ
WICZENIE
9:
PRZYGOTUJ SAMOUCZEK
NA TEMAT ZNACZNIKÓW
EM
ORAZ
STRONG.
Rys. 9. Znaki
specjalne
Po utworzeniu no-
wego, pustego doku-
mentu wklejamy
tekst z pliku teksto-
wego.
Znaki specjalne
mo¿emy uzyskaæ
w NotH na dwa spo-
soby: korzystaj¹c ze
skrótów klawiszo-
wych oraz wykonu-
j¹c konwersjê. Skró-
ty ^QL, ^QG, ^QA
oraz ^QS wstawiaj¹
znaki <, >, & oraz spacjê. W celu wykonania konwersji
znaków zaznaczamy pierwszy akapit testu, po czym naciskamy
Ctrl+F11. Znaki mniejszoœci i wiêkszoœci powinny siê zamieniæ na od-
powiadaj¹ce im znaki specjalne. Naciœniêcie samego klawisza F11 do-
kona konwersji odwrotnej. Do tekstu dodajemy znaczniki akapitu oraz
stosuj¹c operacjê konwersji (Ctrl+F11) zmieniamy odpowiednie frag-
menty tekstu.
Æ
WICZENIE
10:
PRZYGOTUJ STRONÊ Z KODEM PROGRAMU
WYZNACZAJ¥CEGO NAJWIÊKSZY WSPÓLNY DZIELNIK
.
Rys. 10. Tekst
preformatowany
i znaki specjalne
u¿yte do prezentacji
programu
komputerowego
Po otworzeniu kodu
w programie NotH
zaznaczamy ca³y do-
kument i wykonuje-
my skróty: Ctrl+F11,
^FP, ^SA. Powinni-
œmy otrzymaæ stronê
z tekstem preformato-
wanym zawieraj¹cym
znaki specjalne.
Pozioma linia
Znacznik <HR> wsta-
wia do strony WWW
poziom¹ liniê. Element
ten uzyskamy skrótem
^LH.
HTML
INTERNET.paŸdziernik.2004
99
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OK£ADKI
NEWSY
NA CD
C
M
Y
K
C
M
Y
K
HTML
INTERNET.paŸdziernik.2004
100
NEWSY
Z OK£ADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
NA CD
Æ
WICZENIE
11:
PRZYGOTUJ STRONÊ Z CYTATAMI
A
LBERTA
C
AMUSA
.
Rys. 11. Pozioma linia
Po przygotowaniu strony za-
wieraj¹cej ka¿dy cytat w osob-
nym paragrafie przesuwamy
kursor pomiêdzy paragrafy i ak-
tywujemy skrót ^LH.
Komentarze
Ostatnim elementem przedsta-
wionym w dzisiejszej serii æwi-
czeñ jest komentarz HTML.
Znaczniki:
<!–– ––>
uzyskamy skrótem ^PK.
Æ
WICZENIE
12:
PRZYGOTUJ STRONÊ Z KOMENTARZAMI
HTML.
Rys. 12. Komentarze w HTML
Po wykonaniu strony z tekstem
piosenki umieszczamy kursor
przed pierwsz¹ zwrotk¹, naci-
skamy ^PK, po czym wewn¹trz
komentarza wpisujemy numer
zwrotki. Oczywiœcie komentarz
nie bêdzie widoczny w przegl¹-
darce. W identyczny sposób do-
dajemy komentarz przed drug¹
zwrotk¹.
Style, czyli jak modyfikować wygląd dokumentów
Gdy umiemy ju¿ przygotowaæ proste dokumenty tekstowe, nastêpnym
krokiem bêdzie modyfikacja atrybutów tekstu. Zmiana kroju czcionki,
koloru t³a czy wyjustowanie akapitów to przyk³ady operacji, bez któ-
rych trudno wyobraziæ sobie edycjê tekstu.
Jêzyk HTML nie zawiera ¿adnych wbudowanych mechanizmów
pozwalaj¹cych na modyfikacjê wygl¹du dokumentów. Elementy takie
ZESTAWIENIE OMÓWIONYCH ZNACZNIKÓW
lp.
Element
Kod HTML
Skrót
Zapis skrótu
1.
Szablon pustej
–
Ctrl+S+A
^S.A.
strony
2.
Akapit
<P></P>
Ctrl+P+P
^PP
3.
Złamanie
<BR>
Ctrl+P+R
^PR
wiersza
4.
Uwypuklanie
<STRONG></STRONG>
Ctrl+F+S
^FS
tekstu
5.
Uwypuklanie
<EM></EM>
Ctrl+F+E
^FE
tekstu
6.
Nagłówek H1
<H1></H1>
Ctrl+P+1
^P1
7.
Nagłówek H2
<H2></H2>
Ctrl+P+2
^P2
8.
Nagłówek H3
<H3></H3>
Ctrl+P+3
^P3
9.
Pozostałe
nagłówki
uzyskujemy
analogicznie
10. Tekst
<PRE></PRE>
Ctrl+F+P
^FP
preformatowany
11. Znaki
Ctrl+F11
specjalne
oraz F11
12. Znak <
<
Ctrl+Q+L
^QL
13. Znak >
>
Ctrl+Q+G
^QG
14. Znak &
&
Ctrl+Q+A
^QA
15. Spacja
Ctrl+Q+S
^QS
16. Pozioma linia
<HR>
Ctrl+L+H
^LH
17. Komentarz
<!–– ––>
Ctrl+P+K
^PK
jak CENTER czy FONT oraz atrybuty w rodzaju ALIGN zosta³y defi-
nitywnie wycofane z jêzyka. W ich miejsce pojawi³y siê kaskadowe
arkusze stylów (CSS).
Nie wnikaj¹c w szczegó³y sk³adniowe mo¿na powiedzieæ, ¿e defi-
nicja stylów to lista elementów HTML z opisem w³aœciwoœci wizual-
nych. Na przyk³ad zmieniamy czcionkê elementu P na Courier:
P {
font-family: Courier;
}
Wyrównanie do prawej, wyt³uszczenie i zmianê koloru czcionki na
kolor czerwony nag³ówka H1 realizuje styl:
H1 {
text-align: right;
font-weight: bold;
color: red;
}
Jak widaæ, opis stylu ma postaæ:
nazwa-elementu {
atrybut: wartoϾ;
atrybut: wartoϾ;
...
atrybut: wartoϾ;
}
Style umieszczamy w dokumencie HTML wewn¹trz nag³ówka, na
przyk³ad po elemencie META:
<HEAD>
<TITLE></TITLE>
<META http-equiv=”Content-Type”
©
content=”text/html; charset=iso-8859-2”>
<STYLE type=”text/css”>
<!—
opis stylów
—>
</STYLE>
</HEAD>
W programie NotH style wstawia skrót ^SW oraz ew. ^SB, który
tworzy szablon pustej strony zawieraj¹cej style.
Modyfikacja czcionki
Do modyfikacji czcionek s³u¿¹ atrybuty: font-family, font-size, font-weight
i font-style. Wartoœci¹ atrybutu font-family jest nazwa kroju czcionki. Atry-
but font-size okreœla wielkoœæ kroju. Do liczby wyra¿aj¹cej wielkoœæ przy-
klejamy skrót px (piksele) lub pt (punkty). Gruboœæ kroju okreœlamy poda-
j¹c atrybut font-weight. Jego wartoœciami mog¹ byæ m.in. normal oraz bold
(co oznacza w³¹czenie i wy³¹czenie pogrubienia). Kursywê mo¿emy w³¹-
czyæ stosuj¹c font-style. Poprawnymi wartoœciami s¹ italic lub normal.
Skrót ^BF produkuje przyk³adowe wartoœci atrybutów, zaœ ^NP,
^N1, ^N2, ^NB u³atwiaj¹ przygotowanie definicji. Po wykonaniu skró-
tów ^NP oraz ^BF otrzymamy nastêpuj¹ce style akapitu:
P {
font-family: Verdana;
font-style: normal;
font-weight: normal;
font-size: 10pt;
}
Style okreœlaj¹ce czcionki mo¿emy definiowaæ niemal dla wszyst-
kich elementów jêzyka HTML. Mo¿emy modyfikowaæ czcionkê u¿yt¹
w nag³ówkach, akapicie czy ca³ym dokumencie (czcionki okreœlone
dla elementu BODY).
Modyfikacja atrybutów akapitu
Atrybutami odnosz¹cymi siê do akapitów s¹: wyrównanie, wielkoœæ
wciêcia oraz ozdobienie tekstu. Atrybut text-align ustala wyrównanie
tekstu. Jego wartoœciami mog¹ byæ: left, center, right oraz justify.
Wciêcie akapitu okreœlamy atrybutem text-indent:
text-indent: 2em;
Jednostka em jest jednostk¹ wzglêdn¹, zale¿n¹ od wielkoœci kroju
czcionki.
Atrybut text-decoration o wartoœciach none, underline, overline,
line-through lub blink okreœla dodatkowe efekty dekoracyjne, takie jak
podkreœlenie czy przekreœlenie liter.
Powy¿sze atrybuty mo¿emy definiowaæ w stosunku do ró¿nych
elementów HTML, nie tylko akapitu. Mo¿emy wyrównywaæ do lewej
akapity, obrazy czy nawet tabele i ich komórki.
Skrót ^BT wstawia domyœlne wartoœci powy¿szych trzech atrybu-
tów. Po naciœniêciu skrótów ^NB oraz ^BT otrzymamy style:
BODY {
text-indent: 2em;
text-align: justify;
text-decoration: none;
}
Marginesy
Do definiowania marginesów s³u¿y atrybut margin:
margin: 100px;
Jeœli chcemy ustaliæ ró¿ne wartoœci marginesów lewego, prawego,
górnego i dolnego, to stosujemy atrybuty margin-left, margin-right,
margin-top oraz margin-bottom.
Atrybuty te mo¿emy stosowaæ w odniesieniu do niemal wszystkich
elementów HTML. Skróty ^BM oraz ^BN wstawiaj¹ predefiniowane
wartoœci. Aktywacja skrótów ^N1 oraz ^BN da w efekcie:
H1 {
margin-left: 20pt;
margin-right: 20pt;
margin-top: 20pt;
margin-bottom: 20pt;
}
Modyfikacja kolorów
Kolory modyfikujemy atrybutami color oraz background. Wartoœciami
kolorów s¹ wartoœci RGB lub angielskie nazwy kolorów.
Skrót ^BC wstawia atrybuty color i background o kolorach czar-
nym oraz bia³ym. Do wizualnej modyfikacji kolorów w NotH s³u¿y
okienko kolorów. Po naciœniêci klawisza F4 pojawia siê okno dialo-
gowe. Podwójne klikniêcie dowolnego koloru wstawia do dokumentu
w miejscu, w którym znajduje siê kursor, kod RGB wybranego kolo-
ru. Klikniêcie prawym klawiszem myszki dowolnego z kolorowych
kwadracików wyœwietla okno do zmiany koloru wybranego kwadraci-
ka. Stosuj¹c metodê ci¹gnij-upuœæ mo¿emy kopiowaæ kolory miêdzy
kwadratami.
Æ
WICZENIE
13:
PRZYGOTUJ ¯YCIORYS
J
ANA
B
RZECHWY
ZE ZMIENIONYMI ATRYBUTAMI TEKSTU I AKAPITU
.
Rys. 13. Style dotycz¹ce
czcionki i wyrównania
Otwieramy dokument z tek-
stem ¿yciorysu, zaznacza-
my wszystko i aktywujemy
skrót ^SB. Dodajemy ele-
menty H1 oraz P, obejmuj¹-
ce nazwisko autora i tekst
¿yciorysu. Nastêpnie prze-
suwamy kursor wewn¹trz
definicji stylów i aktywuje-
my skrót ^NP. Otrzymamy:
<STYLE type=”text/css”>
<!––
P {
}
––>
</STYLE>
Teraz aktywujemy skrót ^BF. Wewn¹trz elementu STYLE otrzy-
mamy:
<STYLE type=”text/css”>
<!––
P {
font-family: Verdana;
font-style: normal;
font-weight: normal;
font-size: 10pt;
}
––>
</STYLE>
Korzystaj¹c ze skrótów ^BT oraz ^BM definiujemy atrybuty akapi-
tu i marginesy.
Æ
WICZENIE
14:
PRZYGOTUJ STRONÊ
WWW
Z ¯YCIORYSEM
J
ULIUSZA
V
ERNE
.
Rys. 14. Style
modyfikuj¹ce
kolory
Otwieramy doku-
ment tekstowy i ak-
tywujemy skrót
^SB. Dodajemy kod
HTML, po czym
przechodzimy do
arkuszy stylów.
Wstawiamy kod stylów, zapisujemy dokument i korzystaj¹c z klawi-
sza F9 ogl¹damy w przegl¹darce.
Jako dwa ostatnie æwiczenia proponujê samodzielne wykonanie
stron przedstawionych na rysunkach 15 oraz 16.
Rys. 15. Opowiadanie Zew krwi. Rys. 16. Wierszyk sformatowany
przy u¿yciu stylów
Ucz¹c siê HTML-a warto od razu wzbogacaæ tworzone strony
o style. (Korzystanie z walidatora udostêpnianego przez organizacjê
W3C – http://jigsaw.w3.org/css-validator/ – uchroni nas przed brniêciem
w z³ym kierunku.)
Oczywiœcie mo¿emy pos³ugiwaæ siê dowolnym edytorem plików
tekstowych, nawet notatnikiem. Jednak wówczas pisanie znaczników
bêdzie kator¿nicz¹ prac¹.
n
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej autora
pod adresem
http://www.gajdaw.pl
HTML
INTERNET.paŸdziernik.2004
101
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OK£ADKI
NEWSY
NA CD
C
M
Y
K