CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
 ćwiczenia z tekstem
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
Wszystkie przykłady opisane w artykule
znajdują się na dołączonej
96 INTERNET.pax
dziernik.2004
płycie CD w katalogu Warsztat_HTML.
HTML
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
Edycja dokumentów HTML Wstawianie, usuwanie i zmiana znaczników
Dokument w języku HTML zawiera  oprócz swojej treS
ci  sporo Zanim przejdziemy do omawiania kolejnych ćwiczeń, skupimy
różnych napisów, które ustalają strukturę tekstu i powodują taki a nie uwagę na edycji HTML. Wykonamy trzy rodzaje operacji: wstawia-
inny wygląd dokumentu w przeglądarce. Chodzi oczywiS
cie o znacz- nie znaczników, usuwanie znaczników, zamianę jednego znacznika
niki. Przygotowując dokument HTML musimy napisać oprócz samej na drugi.
treS
ci strony także znaczniki HTML. JeS
li na stronie chcemy umieS
cić Wstawianie znaczników realizujemy naciskając odpowiednie kla-
wytłuszczony napis OSA, to trzeba napisać: wisze:
OSA Ctrl+S+A  pusta strona,
czyli dwadzieS
cia znaków zamiast trzy. JeS
li napis OSA ma być po- Ctrl+P+1  pojawia się nagłówek H1,
chylony, znaczniki i należy zastąpić znacz- Ctrl+F+S  element STRONG itd.
nikami oraz : Po aktywacji każdego skrótu kursor myszki jest ustawiany w miej-
OSA scu, w którym będziemy wprowadzać tekst. Po aktywacji skrótu
Jednym ze sposobów przyspieszenia edycji plików HTML jest uży- Ctrl+P+P otrzymamy akapit, a kursor zostanie umieszczony pomiędzy
cie skrótów klawiszowych. Program NotH (zawarty na płycie dołączo- znacznikami:
nej do czasopisma) ułatwia pracę nad dokumentami HTML dzięki zde-

finiowanym skrótom i funkcjom ukierunkowanym na edycję kodu | położenie kursora
HTML. Dowolny element HTML możemy uzyskać naciskając dwa

klawisze. Po aktywacji skrótu Ctrl+P+2:

kursor umieszczony zostanie wewnątrz
NotH  tworzymy pierwszy dokument znaczników

NajczęS
ciej stosowanym skrótem programu NotH jest skrót Ctrl+S+A. otrzymamy nagłówek H2 z kursorem umieszczonym pomiędzy znacz-
Skrót ten tworzy pusty dokument HTML, umieszczając w nim elemen- nikami otwierającym i zamykającym. Skrót Ctrl+P+I:
ty HTML, HEAD, TITLE, BODY oraz META.
wstawi element IMG, przesuwając kursor wewnątrz atrybutu src.
Skróty klawiszowe Ctrl+S+A są zapisywane również jako ^SA. Skrót taki
Korzystanie ze skrótów oraz innych metod wstawiania kodu daje
oznacza, że należy:
pewnoS
ć, że otrzymamy kod pozbawiony czeskich błędów.
nacisnąć i przytrzymać klawisz Ctrl,
JeS
li napisany tekst chcemy modyfikować, należy korzystać ze
nacisnąć (jeden raz, szybko!) klawisz S (klawisz Ctrl powinien
skrótów i zaznaczania tekstu. Aktywacja większoS
ci skrótów powodu-
być cały czas naciśnięty),
je obejmowanie zaznaczonego tekstu. JeS
li w zdaniu Przyszło to na
zwolnić klawisz Ctrl,
nacisnąć jeden raz klawisz A. S
wiat wątłe, słabe zaznaczymy wyraz S
wiat, po czym naciS
niemy
Ctrl+F+E, to otrzymamy kod:
Po aktywacji skrótu ^SA możemy przystąpić do wpisywania za- Przyszło to na S
wiat wątłe, słabe
wartoS
ci dokumentu. Kursor jest umieszczony pomiędzy znacznikami Po wykonaniu tej operacji zaznaczony jest blok obejmujący wsta-
. Jako tytuł strony wpiszemy Witaj!: wiony element wraz z zawartoS
cią.
Drugim rodzajem operacji jest usuwanie znaczników. W NotH słu-
Następnie przejdziemy do zawartoS
ci strony i pomiędzy znacznika- ży do tego skrót Ctrl+Del. Należy zaznaczyć cały element od początku
mi i wprowadzimy tekst: znacznika otwierającego do końca znacznika zamykającego. NaciS
nię-

Moja pierwsza strona

cie Ctrl+Del spowoduje usunięcie znacznika otwierającego i zamyka-
Do umieszczenia znaczników

oraz

służy skrót ^P1 jącego.
(tj. Ctrl+P+1). Ostatnia operacja to zamiana elementów. Do tej operacji wykorzy-
Tak przygotowany dokument zapisujemy w folderze D:\www\cw- stujemy klawisz Shift. JeS
li w tekS
cie Ene, due, ryke, fake zaznaczymy
-1.html, po czym naciskamy klawisz F9, który uruchamia domyS
lną słowo ryke i wykonamy skrót Ctrl+F+E, to otrzymamy kod:
przeglądarkę i pokazuje wygląd utworzonego dokumentu. Dokument Ene, due, ryke, fake
ten został przedstawiony na rys. 1. Zauważmy, że napis Witaj!, który z zaznaczonym całym elementem EM. JeS
li element ten chcemy za-
umieS
ciliS
my pomiędzy znacznikami elementu TITLE, widnieje na mienić na nagłówek H1, należy skorzystać ze skrótu Ctrl+P+1, przy-
belce tytułowej przeglądarki, zaS
tekst Moja pierwsza strona  zawar- trzymując klawisz Shift. Otrzymamy kod:
toS
ć elementu H1  stanowi treS
ć strony WWW. Ene, due,

ryke

, fake
z zaznaczonym elementem H1. JeS
li teraz H1 chcemy zmienić na
STRONG, to naciskamy skrót Ctrl+F+S przytrzymując Shift:
Ene, due, ryke, fake
JeS
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,
Rys. 1. Strona wykonana programem NotH
pozycjonowanie kursora  kursor jest ustawiany w miejscu, w któ-
Wszystkie przykłady omówione w tekS
cie są umieszczone na CD. rym najprawdopodobniej będziemy chcieli wprowadzać tekst,
W celu obejrzenia wyglądu przykładu należy dwukrotnie kliknąć odpo- obejmowanie zaznaczonego bloku tekstu znacznikami,
wiedni plik. Kod HTML strony obejrzymy otwierając wybrany dokument usuwanie znaczników (skrót Ctrl+Del),
programem NotH lub wykonując w przeglądarce operację Widok | y
ródło. zamianę znaczników (klawisz Shift).
INTERNET.pax
dziernik.2004 97
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Tekst na stronach WWW akapitu używamy znacznika
. Po dodaniu elementów BR kod
Pierwszy etap nauki języka HTML polega na opanowaniu umiejętno- strony wygląda następująco:
S
ci przygotowania dokumentów zawierających tekst. Opowiadania,

powieS
ci, artykuły, teksty piosenek, wiersze, streszczenia, przewodni- Ene, due, ryke, fake,

ki, fora dyskusyjne i katalogi adresów WWW  niemal wszystkie do- Torbe, burbe, ósme, smake,

kumenty dostępne w Internecie zawierają teksty. W istocie trudno so- Des, deus kosmateus,

bie wyobrazić witrynę WWW, która nie zawiera tekstu. I morele baks.

Z tekstem związane są następujące elementy HTML:

 jeden akapit tekstu,

 złamanie wiersza, ĆWICZENIE 4: PRZYGOTUJ STRONĘ Z WIERSZYKAMI...
 uwypuklenie tekstu, ...które S
piewa dziecięcy zespół muzyczny Kapela RadoS
ci Małych
 uwypuklenie tekstu. w celu poprawienia dykcji. W każdym wierszyku wytłuS
ć lub pochyl
Do elementów tych mamy skróty: dowolny wyraz. W rozwiązaniu zawartym na płycie uwypuklono
^PP 

akcentowane wyrazy.
^PR 

Rys. 4. Uwypuklanie tekstu
^FE 
^FS  Tworzymy nową stronę
Pamiętając, że skrót ^SA tworzy pustą stronę, przejdx
my do ćwi- (^SA). Wprowadzamy mię-
czeń. W celu uniknięcia koniecznoS
ci wklepywania tekstów zawartych dzy znacznikami TITLE ty-
w ćwiczeniach, na płycie CD są umieszczone odpowiednie dokumenty tuł RozS
piewki, a następnie
tekstowe. Ćwiczenia możemy wykonywać korzystając z techniki ko- kopiujemy i wklejamy treS
ć
piuj-wklej lub poddawać modyfikacjom pliki tekstowe. rozS
piewek. Wklejone linijki
tekstu zaznaczamy i obejmu-
ĆWICZENIE 2: PRZYGOTUJ STRONĘ PREZENTUJĄCĄ KILKA PRZYSŁÓW. jemy znacznikami

(^PP). Po każdej rozS
piewce
Rys. 2. Akapity
dodajemy znak złamania wiersza, po czym zaznaczamy kolejno różne
zawierające przysłowia
wyrazy i aktywujemy skróty ^FS i ^FE. Otrzymany dokument zapisu-
Tworzymy w NotH no- jemy i przechodzimy do podglądu (F9).
wy dokument  naci- DomyS
lne formatowanie elementu STRONG to wytłuszczenie kro-
skamy ^SA. Między ju, zaS
element EM zmienia krój czcionki na pochylony.
dwoma znacznikami
TITLE wprowadzamy Nagłówki
tytuł strony Przysłowia. Dokumenty z poprzednich ćwiczeń nie zawierały bardzo ważnych ele-
Następnie przechodzi- mentów  nagłówków. Nagłówki dzielą dokument na rozdziały, pod-
my między elementy rozdziały oraz sekcje. HTML umożliwia szeS
ciostopniowy podział do-
BODY, po czym wstawiamy trzy puste akapity, jeden pod drugim. Na- kumentu. Nagłówki oznaczamy elementami H1, H2, H3, H4, H5 oraz
ciskamy trzykrotnie skrót ^PP, za każdym razem przesuwając kursor H6. Do elementów tych mamy skróty ^P1  H1, ^P2  H2 itd.
w dół. Otwieramy dokument tekstowy z przysłowiami i korzystając
z techniki kopiuj-wklej kopiujemy przysłowia do trzech wstawionych ĆWICZENIE 5: PRZYGOTUJ STRONĘ Z PROLOGIEM DRAMATU
akapitów. Dokument zapisujemy i włączamy podgląd (klawisz F9).  HENRYK VIII .
Rys. 5. Dokument
ĆWICZENIE 3: PRZYGOTUJ STRONĘ Z TRER
CIĄ WYLICZANKI z nagłówkami H1, H2
 ENE-DUE . i H3
Rys. 3. Złamanie linii
Otwieramy dokument
po każdym wersie
tekstowy w NotH, zazna-
W programie NotH czamy całoS
ć (Ctrl+A)
otwieramy plik tek- i przekształcamy w stronę
stowy zawierający WWW (^SA). Teraz za-
treS
ć wyliczanki. Za- znaczamy blok obejmują-
znaczamy cały tekst cy tytuł i aktywujemy
(skrót Ctrl+A jest skrót ^P1. Otrzymamy
stosowany w więk- nagłówek H1 obejmujący
szoS
ci aplikacji), po tytuł. Następnie zaznacza-
czym aktywujemy my blok obejmujący na-
skrót ^PP. Tekst wy- zwisko autora i naciska-
liczanki zostanie zawarty we wnętrzu akapitu. Zaznaczony blok obej- my ^P2. W dokumencie
muje w tym momencie tekst wyliczanki i znaczniki P. Aktywujemy pojawi się nagłówek H2.
skrót ^SA i otrzymamy pustą stronę zawierającą akapit z wyliczanką. Podobnie dodajemy nagłówek H3 (skrót ^P3). Nagłówkiem tym
Teraz pomiędzy znacznikami TITLE wprowadzamy tytuł strony. obejmujemy wyraz Prolog.
Otrzymaną stronę zapisujemy, po czym włączamy podgląd. Mimo że Zaznaczamy cały prolog, po czym przekształcamy go w akapit (^PP).
kolejne wersy wyliczanki zostały umieszczone w nowych linijkach, to Na końcu każdej linijki prologu dodajemy znacznik
. Ćwiczenie
w przeglądarce tekst stanowi jedną linię. Do złamania linii wewnątrz kończymy wpisując pomiędzy znacznikami TITLE tytuł dokumentu.
98 INTERNET.pax
dziernik.2004
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
ĆWICZENIE 6: PRZYGOTUJ STRONĘ Z TRER
CIĄ sko autora) oraz ^P2 (nagłówek H2 strony  tytuł wiersza) tworzy-
NOWELI  LATARNIK . my stronę WWW.
Rys. 6. TreS
ć noweli
Znaki specjalne
sformatowana elementami
Ponieważ znaki < oraz > obejmują znaczniki, zatem nie należy ich
P, BR, H1, H2, H3
używać w innym celu. JeS
li na przykład chcemy na stronie poS
więco-
Po otworzeniu dokumentu nej językowi HTML umieS
cić informację, że  ... znacznik
tekstowego w programie ma takie a takie działanie... , wówczas znaki < i > musi-
NotH wykonujemy kolejno: my zastąpić napisami < oraz >.
wstawianie zaznaczamy
całoS
ć (Ctrl+A), ĆWICZENIE 9: PRZYGOTUJ SAMOUCZEK
wstawianie przekształcamy NA TEMAT ZNACZNIKÓW EM ORAZ STRONG.
w stronę WWW (^SA),
Rys. 9. Znaki
wstawianie dodajemy na-
specjalne
główki obejmujące autora
i tytuł (^P1, ^P2), Po utworzeniu no-
wstawianie dodajemy nagłówek H3 obejmujący rzymski numer roz- wego, pustego doku-
działu (^P3), mentu wklejamy
wstawianie kolejne akapity obejmujemy znacznikami P (^PP), tekst z pliku teksto-
wstawianie w treS
ci cytatów Pana Tadeusza dodajemy na końcu wego.
każdej linijki znaki złamania wiersza (^PR), Znaki specjalne
wstawianie zmieniamy tytuł dokumentu, możemy uzyskać
wstawianie dokument zapisujemy i włączamy podgląd (F9). w NotH na dwa spo-
soby: korzystając ze
Tekst preformatowany skrótów klawiszo-
Tekst preformatowany zachowuje białe znaki: spację oraz złamanie wych oraz wykonu-
wiersza. Dodatkowo jest pisany czcionką stałej szerokoS
ci. Głównie jąc konwersję. Skró-
stosujemy go do kodów programów i skryptów komputerowych. Tekst ty ^QL, ^QG, ^QA
preformatowany obejmujemy znacznikami

uzyskiwa- oraz ^QS wstawiają
nymi skrótem ^FP. znaki <, >, & oraz spację. W celu wykonania konwersji
znaków zaznaczamy pierwszy akapit testu, po czym naciskamy
ĆWICZENIE 7: PRZYGOTUJ STRONĘ Z KODEM FUNKCJI Ctrl+F11. Znaki mniejszoS
ci i większoS
ci powinny się zamienić na od-
FILESFROMFOLDER. powiadające im znaki specjalne. NaciS
nięcie samego klawisza F11 do-
Rys. 7. Tekst kona konwersji odwrotnej. Do tekstu dodajemy znaczniki akapitu oraz
preformatowany stosując operację konwersji (Ctrl+F11) zmieniamy odpowiednie frag-
menty tekstu.
Otwieramy dokument
tekstowy, zaznaczamy ca- ĆWICZENIE 10: PRZYGOTUJ STRONĘ Z KODEM PROGRAMU
ły tekst i obejmujemy WYZNACZAJĄCEGO NAJWIĘKSZY WSPÓLNY DZIELNIK.
znacznikami

 Rys. 10. Tekst
i 

. Dodajemy sza- preformatowany
blon pustej strony (gdy i znaki specjalne
zaznaczony jest cały tekst użyte do prezentacji
naciskamy ^SA), dodaje- programu
my nagłówek i zmieniamy tytuł dokumentu. Gotową stronę zapisuje- komputerowego
my i otwieramy w przeglądarce.
Po otworzeniu kodu
ĆWICZENIE 8: PRZYGOTUJ STRONĘ w programie NotH
Z WIERSZYKIEM  CHRZĄSZCZ . zaznaczamy cały do-
kument i wykonuje-
Rys. 8. Tekst
my skróty: Ctrl+F11,
preformatowany
^FP, ^SA. Powinni-
zastosowany do wiersza
S
my otrzymać stronę
Elementu PRE możemy z tekstem preformato-
również użyć do zwykłego wanym zawierającym
tekstu. Po otworzeniu pliku znaki specjalne.
z treS
cią wierszyka, korzy-
stając ze skrótów ^SA (sza- Pozioma linia
blon pustej strony), ^FP Znacznik

---

wsta-
(tekst preformatowany wia do strony WWW
obejmujący tekst wierszy- poziomą linię. Element
ka), ^P1 (nagłówek H1 ten uzyskamy skrótem
strony, zawierający nazwi- ^LH.
INTERNET.pax
dziernik.2004 99
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
ĆWICZENIE 11: PRZYGOTUJ STRONĘ Z CYTATAMI ALBERTA CAMUSA. jak CENTER czy FONT oraz atrybuty w rodzaju ALIGN zostały defi-
nitywnie wycofane z języka. W ich miejsce pojawiły się kaskadowe
Rys. 11. Pozioma linia
arkusze stylów (CSS).
Po przygotowaniu strony za- Nie wnikając w szczegóły składniowe można powiedzieć, że defi-
wierającej każdy cytat w osob- nicja stylów to lista elementów HTML z opisem właS
ciwoS
ci wizual-
nym paragrafie przesuwamy nych. Na przykład zmieniamy czcionkę elementu P na Courier:
kursor pomiędzy paragrafy i ak- P {
tywujemy skrót ^LH. font-family: Courier;
}
Komentarze Wyrównanie do prawej, wytłuszczenie i zmianę koloru czcionki na
Ostatnim elementem przedsta- kolor czerwony nagłówka H1 realizuje styl:
wionym w dzisiejszej serii ćwi- H1 {
czeń jest komentarz HTML. text-align: right;
Znaczniki: font-weight: bold;
color: red;
uzyskamy skrótem ^PK. }
Jak widać, opis stylu ma postać:
nazwa-elementu {
ĆWICZENIE 12: PRZYGOTUJ STRONĘ Z KOMENTARZAMI HTML. atrybut: wartoS
ć;
atrybut: wartoS
ć;
Rys. 12. Komentarze w HTML
...
Po wykonaniu strony z tekstem atrybut: wartoS
ć;
piosenki umieszczamy kursor }
przed pierwszą zwrotką, naci- Style umieszczamy w dokumencie HTML wewnątrz nagłówka, na
skamy ^PK, po czym wewnątrz przykład po elemencie META:
komentarza wpisujemy numer
zwrotki. OczywiS
cie komentarz
nie będzie widoczny w przeglą- darce. W identyczny sposób do- content= text/html; charset=iso-8859-2 >
dajemy komentarz przed drugą

ZESTAWIENIE OMÓWIONYCH ZNACZNIKÓW
W programie NotH style wstawia skrót ^SW oraz ew. ^SB, który
lp. Element Kod HTML Skrót Zapis skrótu
1. Szablon pustej  Ctrl+S+A ^S.A.
tworzy szablon pustej strony zawierającej style.
strony
2. Akapit

Ctrl+P+P ^PP
Modyfikacja czcionki
3. Złamanie
Ctrl+P+R ^PR
wiersza
Do modyfikacji czcionek służą atrybuty: font-family, font-size, font-weight
4. Uwypuklanie Ctrl+F+S ^FS
i font-style. WartoS
cią atrybutu font-family jest nazwa kroju czcionki. Atry-
tekstu
5. Uwypuklanie Ctrl+F+E ^FE but font-size okreS
la wielkoS
ć kroju. Do liczby wyrażającej wielkoS
ć przy-
tekstu
klejamy skrót px (piksele) lub pt (punkty). GruboS
ć kroju okreS
lamy poda-
6. Nagłówek H1

Ctrl+P+1 ^P1
jąc atrybut font-weight. Jego wartoS
ciami mogą być m.in. normal oraz bold
7. Nagłówek H2

Ctrl+P+2 ^P2
8. Nagłówek H3

Ctrl+P+3 ^P3
(co oznacza włączenie i wyłączenie pogrubienia). Kursywę możemy włą-
9. Pozostałe
czyć stosując font-style. Poprawnymi wartoS
ciami są italic lub normal.
nagłówki
Skrót ^BF produkuje przykładowe wartoS
ci atrybutów, zaS
^NP,
uzyskujemy
analogicznie
^N1, ^N2, ^NB ułatwiają przygotowanie definicji. Po wykonaniu skró-
10. Tekst

Ctrl+F+P ^FP
tów ^NP oraz ^BF otrzymamy następujące style akapitu:
preformatowany
11. Znaki Ctrl+F11 P {
specjalne oraz F11
font-family: Verdana;
12. Znak < < Ctrl+Q+L ^QL
font-style: normal;
13. Znak > > Ctrl+Q+G ^QG
14. Znak & & Ctrl+Q+A ^QA
font-weight: normal;
15. Spacja   Ctrl+Q+S ^QS
font-size: 10pt;
16. Pozioma linia

---

Ctrl+L+H ^LH
}
17. Komentarz Ctrl+P+K ^PK
Style okreS
lające czcionki możemy definiować niemal dla wszyst-
Style, czyli jak modyfikować wygląd dokumentów kich elementów języka HTML. Możemy modyfikować czcionkę użytą
Gdy umiemy już przygotować proste dokumenty tekstowe, następnym w nagłówkach, akapicie czy całym dokumencie (czcionki okreS
lone
krokiem będzie modyfikacja atrybutów tekstu. Zmiana kroju czcionki, dla elementu BODY).
koloru tła czy wyjustowanie akapitów to przykłady operacji, bez któ-
rych trudno wyobrazić sobie edycję tekstu. Modyfikacja atrybutów akapitu
Język HTML nie zawiera żadnych wbudowanych mechanizmów Atrybutami odnoszącymi się do akapitów są: wyrównanie, wielkoS
ć
pozwalających na modyfikację wyglądu dokumentów. Elementy takie wcięcia oraz ozdobienie tekstu. Atrybut text-align ustala wyrównanie
100 INTERNET.pax
dziernik.2004
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
tekstu. Jego wartoS
ciami mogą być: left, center, right oraz justify.
podkreS
lenie czy przekreS
lenie liter. Teraz aktywujemy skrót ^BF. Wewnątrz elementu STYLE otrzy-
Powyższe atrybuty możemy definiować w stosunku do różnych mamy:
elementów HTML, nie tylko akapitu. Możemy wyrównywać do lewej
Marginesy Korzystając ze skrótów ^BT oraz ^BM definiujemy atrybuty akapi-
Do definiowania marginesów służy atrybut margin: tu i marginesy.
margin: 100px;
JeS
li chcemy ustalić różne wartoS
ci marginesów lewego, prawego, ĆWICZENIE 14: PRZYGOTUJ STRONĘ WWW
górnego i dolnego, to stosujemy atrybuty margin-left, margin-right, Z ŻYCIORYSEM JULIUSZA VERNE.
margin-top oraz margin-bottom.
Rys. 14. Style
Atrybuty te możemy stosować w odniesieniu do niemal wszystkich
modyfikujące
elementów HTML. Skróty ^BM oraz ^BN wstawiają predefiniowane
kolory
wartoS
ci. Aktywacja skrótów ^N1 oraz ^BN da w efekcie:
H1 { Otwieramy doku-
margin-left: 20pt; ment tekstowy i ak-
margin-right: 20pt; tywujemy skrót
margin-top: 20pt; ^SB. Dodajemy kod
margin-bottom: 20pt; HTML, po czym
} przechodzimy do
arkuszy stylów.
Modyfikacja kolorów Wstawiamy kod stylów, zapisujemy dokument i korzystając z klawi-
Kolory modyfikujemy atrybutami color oraz background. WartoS
ciami sza F9 oglądamy w przeglądarce.
kolorów są wartoS
ci RGB lub angielskie nazwy kolorów. Jako dwa ostatnie ćwiczenia proponuję samodzielne wykonanie
Skrót ^BC wstawia atrybuty color i background o kolorach czar- stron przedstawionych na rysunkach 15 oraz 16.
nym oraz białym. Do wizualnej modyfikacji kolorów w NotH służy
okienko kolorów. Po naciS
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 wyS
wietla okno do zmiany koloru wybranego kwadraci-
ka. Stosując metodę ciągnij-upuS
ć możemy kopiować kolory między
kwadratami.
ĆWICZENIE 13: PRZYGOTUJ ŻYCIORYS JANA BRZECHWY
ZE ZMIENIONYMI ATRYBUTAMI TEKSTU I AKAPITU.
Rys. 15. Opowiadanie Zew krwi. Rys. 16. Wierszyk sformatowany
Rys. 13. Style dotyczące
przy użyciu stylów
czcionki i wyrównania
Ucząc się HTML-a warto od razu wzbogacać tworzone strony
Otwieramy dokument z tek- o style. (Korzystanie z walidatora udostępnianego przez organizację
stem życiorysu, zaznacza- W3C  http://jigsaw.w3.org/css-validator/  uchroni nas przed brnięciem
my wszystko i aktywujemy w złym kierunku.)
skrót ^SB. Dodajemy ele- OczywiS
cie możemy posługiwać się dowolnym edytorem plików
menty H1 oraz P, obejmują- tekstowych, nawet notatnikiem. Jednak wówczas pisanie znaczników
ce nazwisko autora i tekst będzie katorżniczą pracą. n
życiorysu. Następnie prze-
suwamy kursor wewnątrz
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej autora
definicji stylów i aktywuje-
pod adresem http://www.gajdaw.pl
my skrót ^NP. Otrzymamy:
INTERNET.pax
dziernik.2004 101