HTML ćwiczenia z tekstem 10 2004

Wszystkie przykłady opisane w artykule

znajdują się na dołączonej

płycie CD w katalogu Warsztat_HTML.

HTML

INTERNET.paŸdziernik.2004

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

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æ:

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

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:

nacisnąć i przytrzymać klawisz Ctrl,

nacisnąć (jeden raz, szybko!) klawisz S (klawisz Ctrl powinien
być cały czas naciśnięty),

zwolnić klawisz Ctrl,

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:

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:

wstawianie znaczników skrótami klawiszowymi – znaczniki s¹ wol-
ne od literówek,

pozycjonowanie kursora – kursor jest ustawiany w miejscu, w któ-
rym najprawdopodobniej bêdziemy chcieli wprowadzaæ tekst,

obejmowanie zaznaczonego bloku tekstu znacznikami,

usuwanie znaczników (skrót Ctrl+Del),

zamianê znaczników (klawisz Shift).

HTML

INTERNET.paŸdziernik.2004

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

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

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

PRZYGOTUJ STRONÊ Z TREŒCI¥ WYLICZANKI

„E

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

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

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

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

WICZENIE

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:

wstawianie zaznaczamy
ca³oœæ (Ctrl+A),

wstawianie przekszta³camy
w stronê WWW (^SA),

wstawianie dodajemy na-
g³ówki obejmuj¹ce autora
i tytu³ (^P1, ^P2),

wstawianie dodajemy nag³ówek H3 obejmuj¹cy rzymski numer roz-
dzia³u (^P3),

wstawianie kolejne akapity obejmujemy znacznikami P (^PP),

wstawianie w treœci cytatów Pana Tadeusza dodajemy na koñcu
ka¿dej linijki znaki z³amania wiersza (^PR),

wstawianie zmieniamy tytu³ dokumentu,

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

PRZYGOTUJ STRONÊ Z KODEM FUNKCJI

FILES

ROM

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

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

PRZYGOTUJ SAMOUCZEK

NA TEMAT ZNACZNIKÓW

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

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

HTML

INTERNET.paŸdziernik.2004

100

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

NA CD

WICZENIE

11:

PRZYGOTUJ STRONÊ Z CYTATAMI

LBERTA

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

Szablon pustej

–

Ctrl+S+A

^S.A.

strony

Akapit

<P></P>

Ctrl+P+P

^PP

Złamanie

<BR>

Ctrl+P+R

^PR

wiersza

Uwypuklanie

Ctrl+F+S

^FS

tekstu

Uwypuklanie

Ctrl+F+E

^FE

tekstu

Nagłówek H1

Ctrl+P+1

^P1

Nagłówek H2

Ctrl+P+2

^P2

Nagłówek H3

Ctrl+P+3

^P3

Pozostałe
nagłówki
uzyskujemy
analogicznie

10. Tekst

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

ANA

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

ULIUSZA

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¹.

Ć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

Wyszukiwarka

Podobne podstrony:

więcej podobnych podstron