Lekcja 3
lekcja 1 | lekcja 2 | lekcja 3 | lekcja 4

WstΩp

Na poprzednich lekcjach pozna│e╢ fundamentalne informacje na temat jΩzyka HTML i programu EdHTML, czyli narzΩdzia, w kt≤rym bΩdziemy tworzyµ nasze strony. Wiesz ju┐, jak▒ struktuΩ maj▒ strony WWW, z jakich blok≤w siΩ sk│adaj▒. Potrafisz ju┐ uruchamiaµ edytor EdHTML, pisaµ w nim proste dokumenty, zapisywaµ na dysku i testowaµ (podgl▒daµ). Wiesz ju┐ tak┐e jak sobie radziµ z przechodzeniem do nowej linii i spacjami w HTML. Znasz skr≤ty klawiszowe EdHTMLa, kt≤re bardzo to u│atwiaj▒ i przyspieszaj▒. Wiesz ju┐ bardzo du┐o! Teraz nauczymy siΩ prostego formatowania tekstu, zobaczymy jak EdHTML u│atwia wpisywanie i zamykanie znacznik≤w. Dowiemy siΩ tak┐e jak szukaµ pomocy i informacje na temat u┐ycia danych tag≤w.

Formatowanie tekstu

Nauczymy siΩ teraz prostego formatowania tekstu, czyli dowiemy siΩ jak pogrubiµ jaki╢ wyraz, pochyliµ, zmieniµ kolor albo czcionkΩ.

Uruchom EdHTMLa i stw≤rz nowy dokument (Plik->Nowy->Dokument HTML). Ustaw siΩ w sekcji <BODY> i wpisz tam jakie╢ zdanie, np.: Uczymy siΩ formatowania tekstu. W│▒cz teraz podgl▒d (zak│adka na dole Dokument/Podgl▒d) i zobacz jak Twoja strona siΩ prezentuje. Kiedy to uczynisz ponownie przejd╝ do kodu ╝r≤d│owego. Poprzed╝ nasze zdanie znacznikiem <B>. Tag ten s│u┐y do pogrubienia tekstu. Ustaw siΩ teraz na sam koniec zdania i zamknij go, czyli wpisz: </B>. Teraz ponownie zerknij na podgl▒d i zobacz, ┐e tekst faktycznie jest pogrubiony!

Zauwa┐, ┐e kiedy pr≤bowa│e╢ zamkn▒µ znacznik <b> proces ten wygl▒da│ tak: wpisa│e╢ pocz▒tek nawiasu tr≤jk▒tnego (znak mniejszo╢ci), a EdHTML dopisa│ jego zamkniΩcie (znak wiΩkszo╢ci). Teraz kiedy Ty wpisa│e╢ slash (zaczynaj▒cy wszelkie zamykane znaczniki) EdHTML dopisa│ resztΩ i przesun▒ kursor za znacznik. W ten spos≤b w│ascie EdHTML pomaga w zamykaniu marker≤w. Zobaczysz, jak bardzo przyspiesza to pisanie stron!

Formatuj▒c jaki╢ tekst (tak jak w przytoczonym przyk│adzie) korzystamy ze specjalnych znacznik≤w (np. <B> - pogrubienie, <U> - podkre╢lenie, <I> - pochylenie). Wszystkie one potrzebuj▒ zamkniΩcia. Ca│y tekst, kt≤ry znajduje siΩ pomiΩdzy otwarciem i zamkniΩciem - jest formatowany. Mo┐na je dowolnie zagnie┐d┐aµ. Zr≤bmy taki test. Usu± te znaczniki co da│e╢ wcze╢niej, a pogrubienie nadaj tylko na wyrazy Uczymy siΩ. Na wyrazy siΩ formatowania nadaj podkre╢lenie (znacznik <U>). Kod tej jednej linijki powinien wiΩc wygl▒daµ tak:

<B>Uczymy <U>siΩ</B> formatowania</U> tekstu.

Efekt:

Uczymy siΩ formatowania tekstu.

Zajrzyj do Podgl▒du. Zauwa┐, ┐e wyraz Uczymy - jest pogrubiony. NastΩpny siΩ jest pogrubiony i podkre╢lony, formatowania - tylko podkre╢lony, a tekstu - zwyk│y. Teraz napisz kilka linijek tekstu, np. fragment jakiego╢ wiersza i odpowiednio go sformatuj, czyli: tytu│ niech jest pogrubiony, tre╢µ w│a╢ciwa pochylona (kursywa - znacznik <I>), a autor pochylony i podkre╢lony. PamiΩtaj o tym, by ka┐dy wers wierszu by│ w oddzielnej linijce, aby by│y odpowiednie wciΩcia, itp. Oto jak przyk│adowo mog│oby to wygl▒daµ:


...
<BODY>
<B>Koniec wieku XIX</B><BR>
<BR>
Przekle±stwo?... Tylko dziki, kiedy siΩ skaleczy,<BR>
z│orzeczy swemu bogu, skrytemu w przestworze.<BR>
Ironia?... lecz najwiΩksze z szyderstw czy┐ siΩ mo┐e<BR>
r≤wnaµ z ironi▒ biegu najzwyklejszych rzeczy?<BR>
&nbsp;&nbsp;&nbsp;Idee?... Ale┐ lat ju┐ minΩ│y tysi▒ce,<BR>
&nbsp;&nbsp;&nbsp;A idee s▒ zawsze tylko ideami.<BR>
&nbsp;&nbsp;&nbsp;Modlitwa?... Lecz niewielu tylko jeszcze mami<BR>
&nbsp;&nbsp;&nbsp;Oka w tr≤jk▒t wprawione i na ╢wiat patrz▒ce.<BR>
(...)
<BR><BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<U><I>Kazimierz Przerwa-tetmajer</I></U>
</BODY>
...

Efekt:

Koniec wieku XIX

Przekle±stwo?... Tylko dziki, kiedy siΩ skaleczy,
z│orzeczy swemu bogu, skrytemu w przestworze.
Ironia?... lecz najwiΩksze z szyderstw czy┐ siΩ mo┐e
r≤wnaµ z ironi▒ biegu najzwyklejszych rzeczy?
   Idee?... Ale┐ lat ju┐ minΩ│y tysi▒ce,
   A idee s▒ zawsze tylko ideami.
   Modlitwa?... Lecz niewielu tylko jeszcze mami
   Oka w tr≤jk▒t wprawione i na ╢wiat patrz▒ce.
(...)

     Kazimierz Przerwa-tetmajer

EdHTML i formatowanie tekstu

Nauczyli╢my siΩ ju┐ prostego formatowania (pogrubienie, pochylenie, podkre╢lenie). Istnieje jednak bardzo wiele znacznik≤w HTML formatuj▒cych teksty w przer≤┐ny spos≤b. EdHTML wyrΩcza nas z ich znajomo╢ci. Napisz jaki╢ dowolny tekst. Zaznacz go, a nastΩpnie zajrzyj do menu HTML->Tekst. DostΩpnych tam masz bardzo wiele element≤w (pomi± narazie pierwsz▒ opcjΩ: Czcionka). S▒ opcje: pogrubienie, pochylenie, podkre╢lenie, przekre╢lenie.... jest indeks g≤rny, dolny, cytaty, zmienne, kod, itd. Je╢li masz zaznaczony fragment tekstu i wybierzesz kt≤r▒╢ z tych opcji - dostawione zostan▒ odpowiednie znaczniki HTML. Spr≤buj! Zobacz jak wygl▒da indeks g≤rny, jak wygl▒da czcionka powiΩkszona (<BIG>), czy pomniejszona (<SMALL>). Spr≤buj nasz wiersz jeszcze bardziej sformatowaµ, np. tytu│ powiΩkszyµ. Nie b≤j siΩ eksperymentowaµ.

UWAGA PRAKTYCZNA! Podczas tworzenia stron mo┐e siΩ zdarzyµ, ┐e chcesz zapisaµ jakie╢ dzia│anie matematyczne z wyk│adnikami, albo indeksami. W│a╢nie w≤wczas mo┐na skorzystaµ z opcji: Indeks g≤rny i Indeks dolny tworz▒c nawet takie zapisy: (X1+Y1)2=X12+2X1Y1+Y12

Czcionki - formatowanie bardziej zaawansowane

Do tej pory u┐ywali╢my znacznik≤w w bardzo prosty spos≤b. Nie posiada│y one ┐adnych dodatkowych parametr≤w. Teraz nauczymy siΩ kolejnego tagu s│u┐▒cego do okre╢lania koloru, wielko╢ci i rodzaju czcionki. Marker ten posiada bardziej z│o┐on▒ strukturΩ. Sk│ada siΩ z dodatkowych parametr≤w. Utw≤rzmy nowy dokument (Plik->Nowy->Dokument HTML) i w sekcji <BODY> wpiszmy ten oto przyk│adowy fragment wiersza:


...
<BODY>
Schy│ek wieku<BR>
<BR>
Mia│ byµ lepszy od zesz│ego nasz XX wiek.<BR>
Ju┐ tego dowie╢µ nie zd▒┐y,<BR>
lata ma policzone,<BR>
krok chwiejny,
oddech kr≤tki.<BR>
<BR>
Ju┐ zbyt wiele siΩ sta│o,<BR>
co siΩ staµ nie mia│o,<BR>
a to, co mia│o nadej╢µ,<BR>
nie nadesz│o.<BR>
<BR>
Wis│awa Szymborska
</BODY>
...

I sformatuj tytu│ wiersza w nastΩpuj▒cy spos≤b: (niech linijka tak wygl▒da)

<FONT COLOR="BLUE" SIZE="4" FACE="Arial">Schy│ek wieku</FONT>

Zajrzyj do Podgl▒du. Zobacz, ┐e tytu│ zmieni│ czcionkΩ, kolor i wielko╢µ. Do tego celu s│u┐y w│a╢nie znacznik <FONT>. Sam (bez dodatkowych parametr≤w) nic w sumie nie robi, kiedy jednak zastosujemy jego bardziej rozwiniΩt▒ postaµ potrafi wiele zmieniµ. W naszym przyk│adzie wykorzystali╢my trzy atrybuty: FACE - oznacza kr≤j czcionki, COLOR - kolor liter i SIZE - wielko╢µ czcionki. Ka┐dy z tych atrybut≤w posiada pewn▒ warto╢µ, np: SIZE="4". Warto╢ci zawsze podajemy w cudzys│owach (nie jest to konieczne, ale warto wyrobiµ sobie taki nawyk) i po znaku r≤wno╢ci. Przypominam tak┐e z pierwszej lekcji, ┐e zamykamy taki rozbudowany znacznik - bez listy atrybut≤w, czyli: </FONT>.

Pewnie zauwa┐y│e╢, ┐e podczas wpisywania kolejny atrybut≤w do polecenia <FONT> EdHTML wy╢wietla│ w miejscu pisania takie ma│e okienko. Zawiera│o ono listΩ dostΩpnym atrybut≤w dla danego znacznika. Jest to kolejny element usprawniaj▒cy pisanie w czystym HTMLu. Wystaczy│o wiΩc wybraµ myszk▒ (b▒d╝ klawiatur▒) dowolny element z tej listy (np. COLOR) i klikn▒µ na nim (wcisn▒µ ENTER), aby ten sam wstawi│ siΩ do dokumentu. W≤wczas w okienku wy╢wietli│aby siΩ lista dostΩpnych warto╢ci dla danego atrybutu (np. kolory). Dodatkowo EdHTML posiada wbudowany Inspektor Tag≤w. Znajduje siΩ on w panelu po prawiej od edytora (wybierz tam zak│adkΩ INSPEKTOR TAG╙W). Podczas pisania stron WWW w tym miejscu wy╢wietlone s▒ wszystkie znaczniki HTML w wersji 4.0. Mo┐esz je teraz przejrzeµ. Je╢li na kt≤rym╢ z nich klikniesz dwa razy myszk▒ - wstawi siΩ ona automatycznie do dokumentu. Spr≤buj! Kiedy natomiast jeste╢ wewn▒trz jakiego╢ znacznika i pr≤bujesz wypisywaµ kolejne atrybuty (np. w tagu <FONT>) w Inspektorze tag≤w wy╢wietlona zostanie lista wszystkich dostΩpnych atrybut≤w dla danego markera. Mo┐esz wiΩc r≤wnie┐ tam wpisywaµ te elementy. Przetestuj. Ustaw siΩ w znaczniku <FONT> i zmie± warto╢µ SIZE (wielko╢µ) dla niego.

Pozna│e╢ ju┐ spos≤b korzystania z polecenia <FONT>. Teraz zobaczysz, jak EdHTML praktycznie ca│kowicie wyrΩcza CiΩ ze znajomo╢ci tego ;-) Zaznacz pierwsz▒ zwrotkΩ wiersza, kt≤ry wpisa│e╢ wcze╢niej, a nastΩpnie z menu wybierz: HTML->Tekst->Czcionka. Poka┐e siΩ w≤wczas okienko podobne do tego poni┐ej:

W okienku tym mo┐esz wybraµ dowoln▒ czcionkΩ, okre╢liµ wielko╢µ tekstu i wybraµ dowolny kolor (korzystaj▒c z palety kolor≤w). Mo┐esz tak┐e zaznaczyµ odpowiednie pola: pogrubiony, pochylony, itp. Kiedy to uczynisz kliknij: OK. Twoja zwrotka zostanie w okre╢lony przez Ciebie spos≤b sformatowana. Dodane zostan▒ odpowiednie znaczniki i parametry do nich. TO JEST WúAªNIE EDHTML!

Korzystanie z pomocy

Dla pocz▒tkuj▒cych (choµ nie tylko) EdHTML zosta│ wyposa┐ony w system pomocy. Aby skorzystaµ z pomocy dostΩpnej w programie z menu Pomoc wybierz opcjΩ Tematy pomocy - lub wci╢nij klawisz F1. W pokazanym tam okienku znajdziesz du┐o informacji na temat element≤w programu EdHTML, jego historiΩ, opis konfiguracji, itd. W systemie pomocy znajdziesz tak┐e dodatkowe kursy jΩzyka HTML, PHP, czy JavaScript (bed▒ Ci one potrzebne w przysz│o╢ci).

W trakcie pisania swoich pierwszych stron czasami nie bΩdziesz wiedzia│, albo pamiΩta│ do czego s│u┐y dany znacznik. W tym celu EdHTML zosta│ wzbogacony o pomoc do prawie ka┐dego z nich. Z Inspektora tag≤w (o kt≤rym by│a mowa ju┐ wcze╢niej - znajduje siΩ w panelu po prawej) mo┐esz odnale╝µ interesuj▒cy CiΩ znacznik, a nastΩpnie klikn▒µ na nim prawy klawisz myszki (zr≤b to dla znacznika A - pierwszy na li╢cie). Poka┐e siΩ w≤wczas ma│e menu, a w nim napis Pomoc. Wybierz go, to zostanie wy╢wietlona pomoc do markera A. W pomocy tej znajdziesz opr≤cz opisu tak┐e listΩ jego atrybut≤w i przyk│ady. Je╢li napis Pomoc jest szary oznacza to, ┐e EdHTML nie posiada pomocy dla danego znacznika. Inny spos≤b uzyskania tej samej pomocy jest klikniΩcie prawym klawiszem na danym znaczniku ju┐ wewn▒trz dokumentu. Odnajd╝ tag <FONT> w naszym przyk│adowym dokumencie i kliknij na nim prawym klawiszem myszki. Z menu wybierz opcjΩ: Info: FONT. Je╢li nie odnajdziesz dla jakiego╢ polecenia takiego napisu - oznacza, ┐e EdHTML nie posiada wbudowanej pomocy dla wybranego polecenia. Wybierz teraz opcjΩ z menu: HTML->Lista znacznik≤w. Kiedy to uczynisz pokazane zostanie nowe okienko z drzewem polece± jΩzyka HTML. Ka┐de takie polecenie zawiera listΩ atrybut≤w. Do wszystkich tych element≤w masz mo┐liwo╢µ uzyskania pomocy (prawy klawisz).

Zako±czenie

W tej lekcji pozna│e╢ nowe znaczniki HTML s│u┐▒ce do prostego formatowania tekst≤w. Umiesz ju┐ wybrany napis pogrubiµ, pochyliµ, czy podkre╢liµ. Wiesz te┐ jak siΩ ustala kolory dla tekst≤w, wielko╢µ ich czcionki, itp. Umiesz to zrobiµ rΩcznie, wiesz jednak - jak mo┐na do tego celu wykorzystaµ EdHTMLa. Znasz menu HTML->Tekst, gdzie dostΩpnych jest ca│y zestaw polece± formatuj▒cych napisy, potrafisz tak┐e korzystaµ z narzΩdzia Czcionka (te┐ z tego menu) - do okre╢lania rodzaju czcionki, jej koloru i wielko╢ci. Wiesz jak siΩ pisze znaczniki i je zamyka. Umiesz skorzystaµ z menu, kt≤re pojawia siΩ podczas pisania albo z Inspektora Tag≤w. Wiesz te┐ jak szukaµ pomocy w sprawie programu (opcja menu Pomoc), czy do danego znacznika (prawy klawisz myszki na znaczniku lub elemencie w Inspektorze tag≤w). Z ka┐dej lekcji wynosisz coraz wiΩcej. Jest to bardzo optymistyczne. Lekcja ta dobiega ko±ca. Za chwilΩ przypomnimy najwa┐niejsze informacje - jednak Ty musisz jeszcze poµwiczyµ. Stw≤rz kilka przyk│adowych dokument≤w. Napisz w nich jakie╢ teksty, wiersze, piosenki. Postaraj siΩ jak naj│adniej sformatowaµ. Ustalaj │adne czcionki, kolory. Odpowiednie elementy pochylaj, inne podkre╢laj, jeszcze inne wy╢wietlaj czcionk▒ o sta│ej szeroko╢ci (Courier) - np. kody program≤w, itp. Pogrzeb tak┐e w systemie pomocy. Przejrzyj co jest tam napisane o programie, etc. Zajrzyj te┐ do pomocy znanych Ci ju┐ znacznik≤w. Zobacz co jest napisane o markerach: FONT, B, I, U, S, itd.

Teraz najwa┐niejsze informacje, kt≤re powiniene╢ zapamiΩtaµ z tej lekcji:

  • HTML posiada bardzo wiele znacznik≤w s│u┐▒cych do formatowania tekstu. Jedne u┐ywa siΩ bardzo prosto - inne maj▒ bardziej z│o┐on▒ sk│adniΩ (posiadaj▒ dodatkowe atrybuty)
  • EdHTML pomaga w zamykaniu znacznik≤w. Zaraz po wpisaniu </> reszta doka±cza siΩ automatycznie. Program sam poznaje, czy znacznik musi byµ zamkniΩty, czy te┐ nie. W HTML wystΩpuj▒ jednak takie markery, kt≤rych zamykanie jest dobrowolne. W Ustawieniach edytora mo┐emy okre╢liµ, kt≤re z tych znacznik≤w Ed ma zamykaµ.
  • W menu HTML->Tekst znajduje siΩ szereg gotowych do u┐ycia funkcji formatuj▒cych tekst. Zwalnia to webmastera z konieczno╢ci znania na pamiΩµ wszystkich tych znacznik≤w. Jest tam r≤wnie┐ narzΩdzie Czcionka, gdzie w spos≤b bardzo prosty mo┐emy okre╢liµ rodzaj czcionki, kolor, itp.
  • Podczas wpisywania polece± jΩzyka HTML - EdHTML wy╢wietla okienko z wszystkimi dostΩpnymi dla danego znacznika atrybutami, albo warto╢ciami dla tych atrybut≤w. Istnieje tak┐e Inspektor tag≤w (znajduj▒cy siΩ po prawej), w kt≤rym wy╢wietlone s▒ wszystkie atrybuty ka┐dego znacznika. Tam tak┐e mo┐emy je modyfikowaµ.
  • EdHTML posiada wbudowany system pomocy, w kt≤rym mo┐emy znale╝µ szczeg≤│owe informacje na temat samego programu jak i na temat poszczeg≤lnych znacznik≤w i ich atrybut≤w. Jest wiele metod dotarcia do pomocy. S▒ one bardzo intuicyjne.
DALEJ!