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

WstΩp

Szybko siΩ uczysz... do teraz powiniene╢ ju┐ mieµ og≤lne spojrzenie na jΩzyk HTML i program EdHTML. Ju┐ potrafisz pisaµ proste strony zawieraj▒ce kr≤tkie teksty │adnie sformatowane. Wiesz, jak wykorzystaµ EdHTMLa by u│atwi│ formatowanie tekstu. Umiesz swoje pliki zapisaµ na dysku, odczytaµ, przej╢µ do okienka Podgl▒d. Na tej lekcji dowiesz siΩ trochΩ wiΩcej informacji na temat sekcji <HEAD> i znacznika <BODY>, z kt≤rych ju┐ korzysta│e╢. Powiemy kilka zda± na temat promocji swoich stron, albo inaczej - poprawnemu ich formu│owaniu. BΩdzie tak┐e trochΩ informacji na temat kodowania polskich znak≤w (z kt≤rym zawsze s▒ problemy, ale kt≤re ca│kowicie za│atwia EdHTML), czcionkach i kolorach. Na sam koniec jak zwykle sobie wszystko powt≤rzymy i utrwalimy.

Nowy dokument w EdHTML

Do tej pory przy tworzeniu nowych dokument≤w w EdHTML u┐ywali╢my opcji Plik->Nowy->Dokument HTML. Kiedy to wybierali╢my tworzony by│ nowy plik z szablonem strony HTML. Szablon ten ju┐ dobrze znasz :-) EdHTML posiada jednak wbudowanych bardzo wiele innych gotowych do wykorzystania szablon≤w. S▒ to przyk│ady prostych stron, ale s▒ te┐ szablony prawdziwych witryn z grafikami, animacjami, itp. Narazie nie bΩdziemy jeszcze z nich korzystaµ, ale warto wiedzieµ, ┐e co╢ takiego jest. Wybierz teraz z menu Plik->Nowy->Z szablonu, albo u┐yj kombinacji CTRL+W. Poka┐e siΩ okienko z czterema zak│adkami: HTML/WML, CSS, INNE, DESIGN. Pierwsze trzy zawieraj▒ proste szablony dokument≤w HTML, arkuszy styl≤w, czy dokument≤w WML. Ostatnia zak│adka zawiera natomiast szablony ca│ych witryn WWW gotowych do przerobienia i wykorzystania u siebie. Maj▒ one status FREEWARE. Kliknij na t▒ zak│adkΩ by je zobaczyµ. Prawda, ┐e │adne? Aby z nich skorzystaµ wystarczy klikn▒µ na danym rysunku dwa razy myszk▒. Jednak na razie tego nie r≤b. One s▒ bardziej skomplikowane i nie zrozumiesz ich kodu (narazie). W nastΩpnych jednak lekcjach wr≤cimy do tego tematu i wykorzystamy jeden z tych szablon≤w do napisania w│asnej strony.

Ty tymczasem przejd╝ spowrotem do zak│adki HTML/WML i wybierz szablon Przeniesiona. Kliknij na nim dwa razy myszk▒, albo zaznacz i wybierz OK. Kiedy do zrobisz, stworzony zostanie nowy dokument, a w nim szablon strony kt≤r▒ wybra│e╢. Przeniesiona - to stronka, kt≤r▒ wykorzystujemy przy informowaniu ludzi, ┐e nasza prawdziwa strona zmieni│a adres WWW. W≤wczas na jej miejsce wstawia siΩ co╢ podobnego do tego szablonu i kiedy ludzie odwiedzaj▒ witrynkΩ s▒ odpowiednio informowani i automatycznie przekierowywan. Tym jednak r≤wnie┐ zajmiemy siΩ p≤╝niej.

Znasz ju┐ dwie metody tworzenia nowych dokument≤w. Pierwsza korzystaj▒c z menu Plik->Nowy->Dokument HTML, a druga korzystaj▒c z szablon≤w. Teraz poznasz trzeci▒, kt≤r▒ chyba bΩdziesz najczΩ╢ciej na pocz▒tku wykorzystywa│. To tzw. Szybki start, ale zanim do niego przejdziemy - kilka informacji na temat znacznika <BODY> i sekcji <HEAD>.

Znacznik <BODY>

Dla przypomnienia. Ka┐da nasza strona WWW napisana w jΩzyku HTML posiada pewien sta│y szablon. Zaczyna siΩ znacznikiem <HTML> i ko±czy </HTML>. Posiada dwie sekcje: <HEAD>...</HEAD> i <BODY>...</BODY>. W sekcji <HEAD> ustalamy r≤┐ne informacje na temat dokumentu, natomiast w sekcji <BODY> wpisujemy w│a╢ciw▒ tre╢µ.

<BODY> - oznacza cia│o, czyli w naszym przyk│adzie "cia│o dokumentu". Znacznik ten posiada szereg dodatkowych atrybut≤w, kt≤rych jeszcze nie u┐ywali╢my. Maj▒ one wp│yw - jak mo┐na siΩ domy╢leµ - na ca│y dokument. Mo┐emy tutaj ustaliµ domy╢lny kolor tekstu, okre╢liµ kolor t│a, mo┐emy wstawiµ rysunek na t│o, itd. Poni┐ej znajduje siΩ przyk│adowa linijka <BODY>:

<BODY BGCOLOR="#000000" TEXT="#FFFF00">

Utw≤rz jak▒╢ prost▒ stronΩ, np. korzystaj▒c z menu Plik->Nowy->Dokument HTML, wpisz kilka zda± w tre╢ci strony i przepisz powy┐sze atrybuty do znacznika w Twoim dokumencie. Kiedy to zrobisz, przejd╝ do Podgl▒du.

Tw≤ja strona ma t│o koloru czarnego (to okre╢li│ parametr BGCOLOR), natomiast tekst jest ┐≤│ty (parametr TEXT). Aby ustawiµ na t│o jaki╢ rysunek - podajemy parametr BACKGROUND, np:

<BODY BACKGROUND="tlo.jpg" TEXT="#FF0000">

Powy┐szy kod sprawi, ┐e dokument na tle bΩdzie mia│ rysunek tlo.jpg, a napisy bΩd▒ koloru czerwonego (TEXT). Aby ten przyk│ad dzia│a w katalogu z Twoj▒ stron▒ musi byµ plik tlo.jpg.

Mo┐emy tym znacznikiem okre╢liµ jeszcze inne parametry, np. marginesy (je╢li chcemy by nasz tekst by│ pisany od razu od lewej strony), czy kolory odno╢nik≤w. Poniewa┐ jeszcze nie znamy tych hiper│▒czy, narazie od│o┐ymy to sobie na p≤╝niej. Przejd╝my natomiast do sekcji <HEAD>.

Sekcja <HEAD> - Promocja strony!

Wiesz ju┐, ┐e w tej sekcji okre╢la siΩ r≤┐ne informacje na temat samej strony. Ty zawsze wstawia│e╢ tutaj tytu│ strony (<TITLE>). Pewnie jednak zauwa┐y│e╢, ┐e wszystkie twoje strony szablonowe, kt≤re wstawia│ EdHTML - zawsze w tej sekcji posiada│y znacznie wiΩcej znacznik≤w. By│y tam g│≤wnie tagi <META>. W naszych przyk│adach - mog│e╢ je zostawiaµ, ale mog│e╢ te┐ je usuwaµ. Strona i tak wygl▒da│a tak samo (no... mog│y jedynie znikaµ polskie litery). Jak wiΩc widaµ - nie maj▒ one bezpo╢redniego wp│ywu na wy╢wietlanie naszej strony. S▒ jednak wa┐ne.

Za pomoc▒ znacznik≤w <META> ustala siΩ takie informacje jak: autora strony, adres e-mail autora, kr≤tki opis tematu strony, s│owa kluczowe, kodowanie polskich znak≤w. To ostatnie jako jedyne ma wp│yw na wy╢wietlanie strony i we wszystkich naszych przyk│adowych programach, powinno zostaµ wykorzystane. Pozosta│e s▒ wa┐ne, ale bez nich strona te┐ wy╢wietli siΩ bez problemu. Po co wiΩc s▒?

W Internecie dostΩpnych jest bardzo wiele wyszukiwarek, z kt≤rych na pewno korzystasz przy wyszukiwaniu jakich╢ informacji. Znasz takie serwisy jak: Wirtualna Polska, Onet.pl, Hoga.pl, czy Interia.pl (zagraniczne: Altavista, Google, AllTheWeb). To s▒ serwisy, kt≤re umo┐liwiaj▒ ich u┐ytkownikom wyszukiwanie informacji. Jak jednak takie wyszukiwarki dzia│aj▒? Sk▒d one wiedz▒, ┐e np. istnieje taka strona jak nasza... kt≤r▒ sami zrobimy? No i sk▒d wiedz▒, ┐e jak kto╢ wpisze w wyszkiwarce "Ja╢ Kowalski" to znajdzie w│a╢nie tΩ nasz▒ witrynΩ? Wiedz▒ to st▒d, ┐e posiadaj▒ swoje w│asne bazy danych, w kt≤rych przetrzymuj▒ odpowiednie informacje. Kiedy stworzysz w│asny serwis internetowy, opublikujesz go w Internecie, mo┐esz wej╢µ na dan▒ stronΩ wyszukiwarki i odnale╝µ gdzie╢ tam opcjΩ DODAJ. Kiedy to zrobisz mo┐e siΩ pokazaµ okienko, w kt≤rym podasz adres swojej strony. Wtedy wyszukiwarka sama odwiedzi Twoj▒ stronΩ i przeczyta wszystkie informacje na temat Twoich dokument≤w, a wiΩc opis, s│owa kluczowe, tytu│, kilka pierwszych zda± z tre╢ci. Przeczyta te informacje i zapamiΩta. Kiedy teraz kto╢ w wyszukiwarce wpisze takie s│owa, kt≤re Ty umie╢ci│e╢ w tych informacjach - wyszukiwarka wy╢wietli tytu│ i opis w│a╢nie Twojej strony i w ten spos≤b zachΩci u┐ytkownik≤w do jej odwiedzenia.

Opisany wy┐ej mechanizm dzia│ania wyszukiwarek nie jest uniwersjalny, tzn. niekt≤re wyszukiwarki dzia│aj▒ trochΩ inaczej. Mog▒ np. trochΩ inne informacje braµ pod uwagΩ przy wyszukiwaniu, przy dodawaniu witryn mog▒ chcieµ by╢ sam poda│ w odpowiednim formularzu - tytu│, opis i s│owa kluczowe. To wygl▒da r≤┐nie, dla r≤┐nych serwis≤w. Warto te┐ wiedzieµ, ┐e nawet je╢li nie dodasz swojej strony do wyszukiwarki to i tak zostanie ona do niej dodana (tylko odpowiednio p≤╝niej... wyszukiwarki same przegl▒daj▒ strony WWW i te nowe dodaj▒). Jednak zawsze uwzglΩdniane s▒ informacje w tzw. <META> znakach. St▒d ich wa┐na rola.

Ju┐ dobrze... by│ opis przeznaczenia, ale do sedna. Poni┐ej kilka wype│nionych znacznik≤w META. Sp≤jrz na nie:


<META NAME="Description" CONTENT="Pomoc do programu EdHTML">
<META NAME="Keywords" CONTENT="EdHTML, edytor, strony www, tworzenie, pisanie">
<META NAME="Author" CONTENT="Karol Wierzcho│owski">
<META NAME="Generator" CONTENT="EdHTML">

Znacznik <META> ma dwie wersje wykorzystania. Powy┐ej jest ta pierwsza. Posiada dwa parametry: NAME, kt≤ry ustala rodzaj informacji o dokumencie, kt≤ry chcesz ustawiµ i CONTENT - warto╢µ tej informacji. Oto opis poszczeg≤lnych informacji:

  • Description - to opis dokumentu. Wpisujesz tutaj kilka zda±, kt≤re opisuj▒ na jaki temat jest dana strona. Kiedy wyszukiwarka odnajdzie Twoj▒ witrynΩ wy╢wietli w│a╢nie ten opis.
  • Keywords - s│owa kluczowe. Wpisujesz tutaj pojedyncze s│owa, oddzielone przecinkiem, po kt≤rych wyszukiwarka bΩdzie wiedzia│a, ┐e TA strona jest na TAKI temat. Musz▒ byµ to wiΩc s│owa charakterystyczne i naprawdΩ zwi▒zane z danym dokumentem.
  • Author - autor dokumentu
  • Generator - tutaj wpisujesz nazwΩ programu, z jakiego skorzysta│e╢ przy tworzeniu strony

Takich parametr≤w jest oczywi╢cie wiΩcej, ale na razie od│≤┐my to na p≤╝niej. Zajmijmy siΩ natomiast kodowaniem polskich znak≤w.

Kodowanie polskich znak≤w

Tego problemu nie maj▒ Amerykanie ;-) W sumie My - korzystaj▒c z EdHTMLa - te┐ go nie mamy. Na czym jednak polega problem? Oczywi╢cie na polskich znakach ▒, Ω, ╢, µ... itd.

Ot≤┐ w podstawowym uk│adzie liter NIE ma tych znak≤w. S▒ to litery charakterystyczne tylko dla danego kraju. Istnieje kilka standard≤w kodowania polskich liter. R≤┐ni▒ siΩ one ich roz│o┐eniem w tabelach ASCII. Wed│ug jednego standardu np. literka ╢ ma kod 80, a wed│ug innego 90. Je╢li mamy skonfigurowany komputer na standard pierwszy i mamy tekst, w kt≤rym literka ╢ ma kod 80 - wszystko jest OK, ale je╢li literka ma kod 90 - w naszym standardzie mo┐e to byµ inny znak... np. ±. Chodzi wiΩc o to, ┐e s▒ standardy kodowania polskich znak≤w i je╢li pracujemy w jednym z nich, a dokument mamy zapisany w innym - to nie bΩdzie on poprawnie wy╢wietlony. To tak, jak by╢my zaszyfrowali nasz tekst jakim╢ programem szyfuj▒cym. Je╢li p≤╝niej u┐yjemy tego samego programu do odszyfrowania - to bΩdzie wszystko OK, ale je╢li NIE - to nie odszyfujemy danych poprawnie (w naszym przyk│adzie tylko polskich liter). W rzeczywisto╢ci - odnosz▒c siΩ do przyk│adu - korzystamy z jednego programu szyfruj▒cego, zmieniaj▒ siΩ tylko dokumenty.

Istnieje bardzo wiele metod kodowania polskich znak≤w. Dwa najbardziej znane to: ISO 8859-2 i Windows 1250. Pierwszy z nich, to standard miΩdzynarodowy. W celu zgodno╢ci naszych dokument≤w z miΩdzynarodowymi standardami powinni╢my korzystaµ w│a╢nie z tej metody. DziΩki temu mamy pewno╢µ, ┐e nasza strona zostanie prawid│owo wy╢wietlona w Niemczech, Francji, czy Hiszpani. BΩdzie prawid│owo wygl▒da│a pod system Windows, jak r≤wnie┐ Linux, czy Unix. Drugi standard - jest opracowany przez Microsoft i jest standardowy w Windows. Koduj▒c dokumenty t▒ metod▒, mamy pewno╢µ, ┐e strona bΩdzie poprawnie wy╢wietlana pod tym systemem operacyjnym, ale takich gwarancji co do innych system≤w ju┐ nie mamy. St▒d - wiΩkszo╢µ z nas i Ciebie r≤wnie┐ do tego zachΩcam - korzystamy z tej pierwszej metody.

Je╢li pracujemy pod systemem Windows i nie instalowali╢my ┐adnych specjalnych program≤w - to domyslnym kodowanie znak≤w jest standard Microsoftu. Je╢li wiΩc mamy dokument zapisany w standardzie ISO 8859-2, to niekt≤re polskie znaki nie wygl▒daj▒ prawid│owo (jak pisa│em w przyk│adzie... dokumenty s▒ zaszyfrowane inn▒ metod▒, ni┐ ta co szyfruje Windows). Przegl▒darki internetowe (Netscape, Internet Explorer) - potrafi▒ jednak taki dokument wy╢wietliµ w│a╢ciwie - trzeba im tylko wcze╢niej okre╢liµ, jakiej MY metody u┐yli╢my (s▒ to takie uniwersjalne "szyfratory/deszyfratory", my okreslamy tylko jakim programem nasz dokument zaszyfrowali╢my).

Przejd╝my do sedna. Je╢li masz uruchomiony program EdHTML stw≤rz jaki╢ pusty dokument HTML (Plik->Nowy->Dokument HTML). Na dole w pasku statusu - w czwartej pozycji od lewej - masz napisany system kodowania, jakiego w tej chwili u┐ywasz. Je╢li nie zmienia│e╢ nic w konfiguracji programu - powinno byµ tam napisane ISO 8859-2. Oznacza to, ┐e w tej chwili korzystasz w│a╢nie z tej metody kodowania znak≤w. St▒d... jak wpisujesz jaki╢ tekst z polskimi znakami (np. ╢, ╝) to zamiast nich widaµ "krzaczki". Nie przejmuj siΩ tym! Wszystko jest OK! Po prostu - ty korzystasz z metody ISO (do szyfrowania... np. ╢ ma kod 80), a Windows korzysta ze swojej (do deszyfrowania, u niego pod 80 jest ten krzaczek, bo on ╢ ma pod 90). Skoro korzystamy z metody ISO 8859-2, to musimy zaznaczyµ jako╢ w tym dokumencie, ┐e jest to w│a╢nie ta metoda! Zaznaczamy to w│a╢nie przy pomocy znacznik <META> umieszczonego w sekcji <HEAD>. Tak oznaczony dokument, kiedy jest wy╢wietlany przez przegl▒darkΩ internetow▒, zostanie wyposa┐ony w poprawne polskie literki, gdy┐ przegl▒darka bΩdzie wiedzia│a, jakiej MY u┐ylismy metody przy kodowaniu znak≤w. Oto taka linijka:

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-8859-2">

Naucz siΩ tego na pamiΩµ, bo w ka┐dym dokumencie bΩdziesz mia│ co╢ podobnego. »artujΩ! Nie musisz siΩ uczyµ, gdy┐ jak zapewne ju┐ zauwa┐y│e╢, ka┐dy dokument jaki tworzysz z wykorzystaniem programu EdHTML jest automatycznie wyposa┐any w│a╢nie w tΩ linijkΩ.

Bardzo wa┐ne jest, aby zgadza│a siΩ informacja o kodowaniu znak≤w zawarta w powy┐szym znaczniku, z t▒ kt≤rej u┐yli╢my. Je╢li kodujemy znaki w ISO, a tam zapiszemy ┐e u┐yli╢my Windows, albo odwrotnie - polskich znak≤w nie bΩdziemy widzieµ. Tak┐e, je╢li chcemy korzystaµ z metody Windows 1250, to w znaczniku <META> tak┐e musimy zaznaczyµ, ┐e jest to Windows 1250.

Je╢li chcesz zmieniµ metodΩ kodowania znak≤w w programie EdHTML (tzn. kodowania WPISYWANYCH znak≤w), to z menu Opcje->System kodowania wybierz ten, kt≤ry CiΩ interesuje. EdHTML obs│uguje a┐ 10 takich system≤w. Pobaw siΩ tym... wybieraj kolejne metody kodowania i sprawdzaj, jak wygl▒daj▒ polskie znaki. Zauwa┐, ┐e w pasku statusu na czwartej pozycji od lewej ZAWSZE masz napisane, z jakiej metody korzystasz w danej chwili. Tylko wa┐ne.. W DANEJ CHWILI, co nie znaczy w jakiej metodzie zosta│ zapisany dokument, bo przecie┐ mo┐esz wpisaµ kilka zda± w ISO, a p≤╝niej kilka w MAC (te pierwsze siΩ nie zmieni▒). EdHTML posiada tak┐e wbudowany Konwerter polskich znak≤w. Wybierz go z menu NarzΩdzia->Konwerter polskich znak≤w (klawisz F5). EdHTML automatycznie rozpozna, w jakim systemie kodowania jest aktualny dokument. Mo┐esz tam okre╢liµ jednak sam - z jakiego kodowania, do jakiego - chcesz przeprowadziµ konwersjΩ. Nie b≤j siΩ eksperymentowaµ. Pobaw siΩ! (Ten podprogram mo┐e konwertowaµ tylko aktualny dokument, ale mo┐e te┐ konwertowaµ wszystkie otwarte, lub wszystkie pliki w danym katalogu... z tym ostatnim uwa┐aj). Je╢li wiΩc kiedy╢ bΩdziesz chcia│ przekonwertowaµ ca│y plik z jednego systemu kodowania polskich znak≤w na inny - to narzΩdzie jest dla Ciebie.

Powinni╢my korzystaµ z metody ISO 8859-2, to ju┐ wiesz. Mo┐e Ci jednak przeszkadzaµ fakt, ┐e w tej metodzie w│asnie podczas pisania nie widaµ niekt≤rych polskich znak≤w (w przegl▒darce tak, ale przy pisaniu nie). C≤┐... ProponujΩ w≤wczas pisaµ dokument w standarcie Windows, a na koniec przekonwertowaµ go na ISO i taki zapisaµ. Warto r≤wnie┐ zauwa┐yµ, ┐e je╢li masz napisany dokument dowoln▒ metod▒ kodowania (jedn▒ z 10, kt≤re obs│uguje EdHTML), to podczas OTWIERANIA takiego dokumentu - EdHTML automatycznie dokona konwersji z danego formatu na Windows 1250. DziΩki temu Ty ZAWSZE bΩdziesz widzia│ prawid│owo.... ale kiedy wybierzesz opcjΩ ZAPISZ, EdHTML r≤wnie┐ automatycznie skonwertuje dokument do takiego formatu, w jakim go wczyta│e╢. Tak jest okre╢lone domy╢lnie w ustawieniach programu. Mo┐esz to zmieniµ, ale ja proponujΩ siΩ przyzwyczaiµ i zaufaµ programowi. Piszemy wiΩc dokument w jakim╢ standardzie, zapisujemy go i otwieramy - no i mamy │adnie polskie znaki. Kiedy bΩdziemy go zapisywaµ - bΩd▒ one same konwertowane.

No dobrze... starczy ju┐ tematu polskich znak≤w. Nie jest to w zasadzie takie trudne i mo┐na sie przyzwyczaiµ. EdHTML bardzo dobrze wszystko robi za nas... wystarczy kilka lekcji, kilka przyk│adowych stron i wszystko przyjdzie samo. Warto jednak to wszystko wiedzieµ, by w razie problemu umieµ sobie poradziµ.

Szybki start

Znamy dwie metody tworzenia nowych dokument≤w. Wiemy r≤wnie┐ z czego dok│adniej sk│ada siΩ sekcja <META>, oraz znacznik <BODY>. Teraz nauczymy siΩ nowego sposobu - bardziej efektywnego - na tworzenie nowych dokument≤w. Na pewno od teraz, bΩdziesz korzysta│ w│a╢nie z tej metody, a poprzednie bΩdziesz wykorzystywa│ tylko przy tworzeniu szybko pojedynczych dokument≤w.

Zamknij wszystkie pliki (Plik->Zamknij wszystkie), a nastΩpnie wybierz: Plik->Nowy->Szybki start. Pokazane zostanie w≤wczas okienko tworzenia nowego dokumentu. Wpisujesz w nim tytu│ swojej nowej strony pozostawiaj▒c pozosta│e pola bez zmian (nimi zajmiemy siΩ kiedy indziej). Klikasz OK. Zauwa┐, ┐e w tle powsta│ nowy dokument z prostym szablonem strony. Tobie pokaza│o siΩ jednak nowe okienko - Sekcja META. Tutaj okre╢lasz r≤┐ne informacje na temat naszego nowego dokumentu, a wiΩc: Autora, E-Mail, Opis, S│owa kluczowe... z menu wybierasz dowolne kodowanie polskich znak≤w (wybierz ISO 8859-2), mo┐esz tak┐e okre╢liµ jΩzyk strony (PL) i wiele wiΩcej. Kiedy wype│nisz te pola (nie trzeba wszystkiego) klikasz ponownie OK. Teraz znowu zauwa┐, ┐e w tle - do dokumentu zosta│y dostawione informacje, kt≤re wype│ni│e╢, a wiΩc ca│a sekcja <HEAD>. Ty widzisz trzecie okienko, w kt≤rym ustalasz parametry znacznika <BODY>. Mo┐esz ustaliµ: wielko╢µ margines≤w (lewy, prawy, g≤ra, d≤│), kolor t│a, kolor liter, odno╢nik≤w, czy wstawiµ rysunek na t│o. Po wype│nieniu swoich p≤l - klikasz OK. Okienko siΩ zamkniΩ, a Ty widzisz gotowy szablon strony WWW, z wype│nion▒ sekcj▒ <HEAD> (odpowiednimi ,<META>) i pe│n▒ definicj▒ znacznika <BODY>. Poda│e╢ tylko pojedyncze pola, a EdHTML zamienia│ to na odpowiednie sekwencje HTML.

W ten spos≤b mo┐na tworzyµ nowe strony. Mo┐esz teraz wprowadziµ jeszcze r≤┐ne poprawki do tych sekcji, b▒d╝ bezpo╢rednio w kodzie HTML, b▒d╝ wybieraj▒c z menu Wstaw opcje: Sekcja META lub Sekcja BODY. Jak wybierzesz kt≤r▒╢ z nich ponownie zobaczysz okienko (jak wczesniej) i mo┐esz tam wprowadziµ zmiany, dodaµ nowy parametr, albo usun▒µ stary. Nie b≤j siΩ eksperymentowaµ. Baw siΩ i testuj! Wypr≤buj wszystkie opcje, zobacz jak wygl▒daj▒ w kodzie HTML. Nic nie mo┐esz popsuµ, a mo┐esz natomiast wiele wynie╢µ dla siebie.

Czcionki, Kolory, T│a

Teraz jeszcze kilka informacji teoretycznych do materia│u przedstawionego powy┐ej i w poprzedniej lekcji. Pisz▒c nasze strony WWW i korzystaj▒c ze znacznika <FONT> przy okre╢laniu rodzaju czcionki, trzeba byµ ostro┐nym. Nie nale┐y w og≤le z tym przesadzaµ, tzn. wykorzystywaµ na swoich stronach czcionek nie standardowych. PamiΩtaj, ┐e kiedy opublikujesz swoj▒ stronΩ (a wiΩc dokument HTML), jak kto╢ na ni▒ wejdzie i bΩdzie chcia│ sobie obejrzeµ - mo┐e nie mieµ takiej czcionki, jak▒ Ty mia│e╢ i w≤wczas u niego strona bΩdzie prezentowa│a siΩ zupe│nie inaczej. Dlatego opr≤cz czcionek typu Courier, Times, Arial... tych podstawowych - staraj siΩ nie korzystaµ z "udziwnie±".

Podobnie ma siΩ rzecz je╢li chodzi o kolory. Istnieje wiele system≤w operacyjnch, s▒ r≤┐ne karty graficzne, zdarza siΩ wiΩc, ┐e kto╢ ma na swoim komputerze tylko 256 kolor≤w, albo nawet 16! Co wiΩc siΩ stanie, kiedy Ty korzystasz na swojej stronie z bardzo wielu r≤┐nych oddcieni? System operacyjny bΩdzie pr≤bowa│ stworzyµ dany oddcien np. mieszaj▒c kolory... (czerwony i ciemne kropki). Jest to bardzo brzydkie... st▒d powinno siΩ korzystaµ z takich kolor≤w, kt≤re zawsze bΩd▒ prezentowa│y siΩ dobrze. Opracowano taki standard i EdHTML go obs│uguje. Staraj siΩ wiΩc ZAWSZE do okre╢lania r≤┐nych kolor≤w stosowaµ PaletΩ kolor≤w z domy╢lnymi kolorami (to tzw. bezpieczna paleta kolor≤w). U┐ywaj▒c jej masz pewno╢µ, ┐e strona bΩdzie prezentowa│a sie zawsze estetycznie.

Ustalaj▒c jako t│o strony rysunek, pamiΩtaj aby podawaµ ╢cie┐ki do rysunku - wzglΩdne. Przy wstawianiu obrazka na t│o korzystaj▒c z okna Sekcja BODY - EdHTML poinformuje CiΩ, ┐e dana ╢cie┐ka nie jest prawid│owa. ªcie┐ki bewzglΩdne to takie, w kt≤rych podajesz pe│ny adres do pliku, np.: C:\WINDOWS\TLO.BMP. PamiΩtaj, ┐e przecie┐ jak opublikujesz swoj▒ stronΩ w Internecie, to osoba kt≤ra j▒ czyta mo┐e nie mieµ Windowsa, mo┐e mieµ ale na D:\, a mo┐e mieµ i na C, ale nie mieµ tego rysunku! W domu - dla test≤w mo┐esz tak robiµ, ale kiedy bΩdziesz chcia│ stworzyµ w│asn▒ stronΩ - pamiΩtaj o kilku rzeczach: stw≤rz dla niej odrΩbny katalog i wszystkie pliki w nim przetrzymuj (a wiΩc pliki HTML, rysunki, itd). Adresy do rysunk≤w podawaj ze ╢cie┐k▒ wzglΩdn▒, a wiec wzglΩdem tego katalogu ze stron▒, czyli je╢li rysunek jest w nim bezpo╢rednio - to podajesz sam▒ nazwΩ obrazka bez ┐adnej ╢cie┐ki!

Ostatnia sprawa - wyczucie koloru i estetyki. Staraj siΩ dobrze dobieraµ kolor t│a, rysunek na t│o, rodzaj czcionki, kolor czcionki... tak aby Twoja strona by│a estetyczna, czytelna, aby litery nie zlewa│y siΩ z t│em... aby mo┐na j▒ by│o spokojnie czytaµ i ┐eby ocz nie bola│y. Unikaj wiΩc "dziwnych" obrazk≤w na t│o, zbyt jaskrawch kolor≤w, itp.

Zako±czenie

Z tej lekcji wynios│e╢ bardzo du┐o... jednak g│≤wnie informaji teoretycznych. Opr≤cz zmiany t│a, kolor≤w na stronie - niczego co "widaµ" nie do╢wiadczy│e╢. By│y to jednak informacje niezbΩdne... mo┐e trochΩ trudne, ale nie zra┐aj siΩ tym! Pisz▒c swoje kolejne podstronki, korzystaj▒c z EdHTMLa, przyzwyczajaj▒c siΩ do jego funkcji - zobaczysz, ┐e nie jest to w zasadzie takie trudne. WiΩkszo╢µ robi siΩ praktycznie sama - Ty wype│niasz formularze, kodowanie polskich znak≤w - te┐ piszesz zazwyczaj normalnie nawet zapominaj▒c, ┐e jakies kodowanie jest (EdHTML sam pilnuje kodowania, szablony zawietaj▒ ju┐ sekwencjΩ <META>...). Tylko siΩ nie zra┐aj! Jak widzisz "krzaczki" zamiast polskich liter w dokumencie w EdHTMLu - wszystko jest OK! Jak widzisz ju┐ na podgl▒dzie, to dopiero w≤czas mo┐esz pomy╢leµ, co jest przyczyn▒. EstetykΩ strony wyrobisz sobie w trakcie ich pisania... kolory... wystarczy korzystaµ z dostΩpnej w programie Palety, a wszystko pilnuje siΩ samo! Tak┐e by│y to wa┐ne informacje, kt≤re maj▒ wp│yw na fundamentalne dzia│anie strony, na odwiedzaj▒cych, na podstawow▒ promocjΩ swojej strony, informacje nie najprostrze, ale te┐ takie - o kt≤re praktycznie EdHTML troszczy siΩ sam! Nam wystarczy wiedzieµ, ┐e co╢ takiego jest (narazie), ┐e stronki tworzymy z szablon≤w lub narzΩdzia Szybki start i reszta zrobic siΩ automatycznie.

To by│a teoria... w nastΩpnej lekcji - wiΩcej uwagi po╢wiΩcimy na praktykΩ. Nauczymy siΩ wstawiaµ rysunki, poziome linie, dowiemy siΩ co to s▒ odsy│acze. BΩdzie ciekawiej. Tymczasem poni┐ej znajduje siΩ lista z kr≤tkim przypomnieniem najwa┐niejszych informaji z tej lekcji:

  • Istnieje kilka metod tworzenia nowych dokument≤w w programie EdHTML
  • Mamy mo┐liwo╢µ skorzystania z wielu gotowych szablon≤w stron
  • Dokumen sk│ada siΩ z dw≤ch czΩ╢ci: <HEAD> i <BODY>
  • W czΩsci <HEAD> umieszczamy wa┐ne informacje na temat samej strony
  • W czΩ╢ci <BODY> umieszcamy g│own▒ tre╢µ dokumentu
  • Znacznik <BODY> ma wiele parametr≤w, np. t│o, kolor liter, margines
  • W sekcji <HEAD> u┐ywamy znacznik≤w <META> i okre╢lamy takie parametry jak: autor, opis, s│owa kluczowe, kodowanie polskich znak≤w
  • Istnieje wiele metod kodowania polskich znak≤w. Najbardziej znane to: ISO 8859-2 i Windows 1250
  • Na naszych stronach korzystamy z tej pierwszej metody.
  • EdHTML obs│uguje 10 system≤w kodowania polskich znak≤w, posiada narzΩdzie konwerter, kt≤re umo┐liwia dowoln▒ zamianΩ kodowania w danym dokumencie
  • Nowe dokumenty mo┐na tworzyµ narzΩdziem Szybki start
  • Jego okienka potomne mo┐na wywo│aµ r≤wnie┐ samemu, tzn.: Sekcja BODY, Sekcja HEAD
  • Wstawiaj▒c jaki╢ rysunek (np. na t│o) - u┐ywaj adresu wzglΩdnego
  • Nie u┐ywaj niestandardowych czcionek, a kolory tylko z palety kolor≤w bezpiecznych
  • Du┐o µwicz, baw siΩ i testuj! Nic nie popsujesz, a du┐o siΩ nauczysz!