Na pierwszej lekcji kursu tworzenia stron WWW dowiedzia│e╢ siΩ podstawowych wiadomo╢ci na ten temat. Dowiedzia│e╢ siΩ tak┐e, ┐e do napisania strony internetowej wystarczy zwyk│y notatnik (np. ten standardowy z Windows), w kt≤rym bΩdziemy j▒ pisaµ i przegl▒darka WWW, w kt≤rej bΩdziemy przegl▒daµ nasze strony. Stworzy│e╢ tak┐e swoj▒ pierwsz▒, szablonow▒, stronΩ WWW. Pozna│e╢ pierwsze polecenia. Wiesz jak s▒ zbudowane, ┐e niekt≤re siΩ zamyka, itp.

Pisz▒c strony w Notatniku, zmuszony bΩdziesz to pamiΩtania o wszystkich znacznikach, o ich zamykaniu, itp. BΩdziesz musia│ r≤wnie┐ samemu dok│adnie pamiΩtaµ o przejrzystym pisaniu, trzymaniu siΩ jednego stylu (np. znaczniki wielkie, czy ma│e), itp. Aby tego wszystkiego unikn▒µ - mo┐na skorzystaµ z darmowego programu EdHTML. To edytor s│u┐▒cy do tworzenia stron WWW. Ma bardzo wiele funkcji, kt≤re znacznie u│atwiaj▒ pisanie stron. Posiada wiele szablon≤w, sam pilnuje stylu, posiada podgl▒d i system pomocy do znacznik≤w. Jest zupe│nie darmowy. Ca│y niniejszy kurs bΩdzie w oparciu w│a╢nie o ten edytor, dlatego teraz kilka akapit≤w po╢wiΩcimy w│a╢nie jemu.

Instalacja i konfiguracja

Na samym pocz▒tku trzeba ten program zainstalowaµ i odpowiednio skonfigurowaµ (to drugie, nie jest ju┐ konieczne, gdy┐ EdHTML posiada domy╢lne ustawienia). Musimy wiΩc po pierwsze zapatrzeµ siΩ w niego. Sk▒d go wzi▒µ? Najlepiej ze strony domowej. Zajrzyj pod adres: http://edhtml.binboy.org. Tam zawsze jest dostΩpna najnowsza wersja. Mo┐esz go tak┐e pobraµ z witryny: http://download.com Je╢li nie posiadasz Internetu, EdHTMLa mo┐na znale╝µ na wielu kr▒┐kach do│▒czanych do r≤┐nych magazyn≤w. Przejrzyj kilka numer≤w ENTERa, czy INTERNET, a na pewno znajdziesz.

OK. Je╢li ju┐ go mamy i jest spakowany - trzeba odpakowaµ. Do tego celu mo┐emy u┐yµ np. WinZIPa. Je╢li ╢ci▒gnΩli╢my wersjΩ EXE od razu mo┐emy instalowaµ. Uruchamiamy.... i wykonujemy czynno╢ci pokazuj▒ce siΩ na ekranie, a wiΩc czytamy warunki licencji DALEJ, wybieramy katalog DALEJ i instalujemy. Zalecane jest zachowanie standardowego katalogu, ale oczywi╢cie mo┐emy go zmieniµ. Po procesie instalacji program siΩ uruchomii i na ekranie zobaczymy okienko podobne do tego poni┐ej:

Poznamy elementy EdHTMLa - zbli┐enie PIERWSZE

Jest to g│≤wne okienko programu. Narazie jeszcze "ubogie", nie posiada wielu pask≤w narzΩdzi, itp. Przekonasz siΩ jednak za chwilΩ, ┐e mimo wszystko posiada sporo praktycznych funkcji, kt≤re znacznie przyspiesz▒ i u│atwi▒ nam tworzenie w│asnych stron WWW.

Z menu Plik wybierz opcjΩ Nowy, a nastΩpnie Dokument HTML (dalej w tym kursie tak▒ drogΩ po menu bΩdΩ zapisywa│ w spos≤b ci▒g│y, tzn.: Plik->Nowy->Dokument HTML). Kiedy to uczynisz opr≤cz g≤rnego menu i paska narzΩdzi, na ekranie zobaczysz kolejny pasek ze spor▒ ilo╢ci▒ funkcji, g│≤wne okno edytora, w kt≤rym bΩdziemy pisaµ, pod nim pasek z cyframi, zak│adki Dokument i Podgl▒d, a pod nimi pasek statusu sk│adaj▒cy siΩ z o╢miu blok≤w. Po prawej znajduje siΩ te┐ pewien panel. Prawda, ┐e jest tego du┐o? To wszystko by u│atwiµ nam tworzenie stron. Nie przejmuj siΩ ilo╢ci▒ funkcji i element≤w programu, kt≤re widzisz. Powoli nauczysz siΩ z nich korzystaµ.

Do tej pory, po uruchomieniu programu, wybra│e╢ tylko jedn▒ opcjΩ z menu: Dokument HTML, a EdHTML automatycznie stworzy│ nowy dokument i wpisa│ do niego szablon dokumentu HTML (podobny do tego z pierwszej lekcji). Widzisz wiΩc ju┐, jak program wspomaga tworzenie witryn internetowych. O tym kodzie powiemy nieco p≤╝niej, najpierw jednak nauczmy siΩ korzystaµ z podstawowych funkcji programu.

G│≤wn▒ czΩ╢µ okna zajmuje okienko, w kt≤rym piszemy nasze strony (bia│e, z niebieskim paskiem po lewej). W EdHTMLu mo┐emy pracowaµ jednocze╢nie na wielu dokumentach. Wybierz jeszcze raz Plik->Nowy->Dokument HTML. Zauwa┐, ┐e stworzony zosta│ nowy dokument. Jego tytu│ to Bez nazwy 1 (widzimy go na g≤rze). Za po╢rednictwem zak│adek mo┐emy prze│▒czaµ siΩ miΩdzy otwartymi dokumentami. Spr≤buj. Lista wszystkich otwartych dokument≤w jest r≤wnie┐ dostΩpna w menu Widok. Zajrzyj tam. Sp≤jrz, ┐e przy kolejnych nazwach otwartych dokument≤w zapisana jest kombinacja klawiszy, kt≤ra s│u┐y do prze│▒czenia pracy edytora nad danym dokumentem. Za pomoc▒ tych kombinacji klawiszy mo┐esz r≤wnie┐ prze│▒czaµ siΩ miΩdzy zak│adkami. Klawisz ALT+F1 - dokument 1, ALT+F2 - drugi, itd.

Na zak│adkach z tytu│ami otwartych dokument≤w, opr≤cz tych nazw, po lewej znajduje siΩ zielona ikona. Oznacza ona, ┐e dokument jest zapisany i nie modyfikowany. Przesu± kursor w edytorze do sekcji <BODY> (czyli sekcji g│≤wnej dokumentu, kt≤ra jest wy╢wietlana w przegl▒darce) i wpisz tam jaki╢ napis, np: Pierwsza lekcja z edytorem EdHTML. Zauwa┐, ┐e kiedy wpisujesz tekst ikonka, o kt≤re pisali╢my wcze╢niej zmieni│a kolor na czerwony. Oznacza to, ┐e dokument zosta│ zmodyfikowany (zmieniony) i przypomina nam, ┐e na koniec musimy go ponownie zapisaµ. Zr≤bmy to. Wybierz opcjΩ: Plik->Zapisz jako. Poka┐e siΩ okienko podobne do tych z wielu innych program≤w. Wybierz tam katalog, w kt≤rym chcia│by╢ nasz▒ ju┐ stworzon▒ stronΩ zapisaµ, nadaj odpowiedni▒ nazwΩ (czyli index.htm) i wybierz Zapisz. Dokument zostanie zapisany na dysku. Sp≤jrz, ┐e teraz ikonka, o kt≤rej ju┐ dwa razy pisali╢my - ponownie ma kolor zielony. Jak wprowadzisz znowu zmiany, bΩdzie czerwona; jak zapiszesz - zielona, itd. Zauwa┐ tak┐e, ┐e po zapisaniu dokumentu jego nazwa obok tej ikony zmieni│a siΩ na tak▒, jak▒ poda│e╢ przy zapisywaniu.

Sp≤jrzmy teraz na pasek statusu (pasek na samym dole programu). Sk│ada siΩ on z o╢miu blok≤w. W pierwszym zapisane s▒ wsp≤lrzΩdne (wiersz i kolumna) kursora, czyli miejsce, gdzie w danej chwili piszesz. Kiedy bΩdziesz tworzy│ ju┐ rozbudowane strony internetowe, korzystaj▒c z bardziej zaawansowanych jΩzyk≤w - te liczby Ci siΩ przydadz▒ do odnalezienia b│Ωd≤w. Kiedy np. napiszesz jaki╢ program (skrypt na stronΩ) mo┐e pokazaµ siΩ komunikat (np. w przegl▒darce), ┐e wystΩpuje b│▒d w linii 5 i kolumnie 10. W│a╢nie dziΩki temu elementowi paska statusu - w szybki spos≤b bΩdziesz m≤g│ odnale╝µ dane miejsce. R≤wnie┐ sam edytor po lewej zawiera niebieski pasek, w kt≤rym widzimy numeracjΩ linii. Bardzo ona u│atwia w tworzeniu stron, czy skrypt≤w. Drugi element paska statusu zawiera napis Insert, co oznacza Wstawianie. Oznacza to, ┐e kiedy bΩdziemy pisaµ nasz▒ stronΩ - wszystkie litery bΩd▒ siΩ dostawia│y. Najbardziej zobrazuje to przyk│ad. Napisz dowolny wyraz (w sekcji <BODY>), np.: EdHTML. Wstaw teraz kursor wewn▒trz tego napisu (np. po literce d) i dopisz: ytor. Powstanie w ten spos≤b napis: EdytorHTML. Wstawili╢my wiΩc nasze litery wewn▒trz napisu. Teraz na klawiaturze kliknij klawisz Insert (znajduje siΩ nad klawiszem Delete). Zobacz, ┐e miejscu Insert programu, zmieni│ siΩ napis na Overtwrite, co oznacza Nadpisywanie. Wykonaj te same czynno╢ci co poprzednio. Napisz wyraz EdHTML i spr≤buj po literze d dopisaµ ytor. Wysz│o? Nie, poniewa┐ jak wpisujesz kolejne litery na kalwiaturze to nadpisujesz (zastΩpujesz) te ju┐ wpisane. Do tego w│a╢nie s│u┐▒ funkcje: Insert/Overwrite. Ich stan pokazuje ten drugi panel paska statusu. Ponownie prze│▒cz siΩ na tryb Insert - ponownie klikaj▒c na klawiaturze ten klawisz. W trzciej rubryce paska statusu widzimy napis HTML - oznacza on, ┐e aktualnie pracujemy nad w│a╢nie takim dokumentem. EdHTML pozwala pracowaµ z wieloma r≤┐nymi typami plik≤w. Narazie jest to jednak niewa┐ne. Czwarta rubryka zawiera napis: ISO 8859-2. Jest to system kodowania polskich znak≤w. Nim r≤wnie┐ na razie siΩ nie przejmujmy. NastΩpne trzy rubryki to: SCROLL, NUM, CAPS. Okre╢laj▒ one stany niekt≤rych klawiszy na klawiaturze i w tej chwili nie s▒ nam do nieczego potrzebne ;-). Ostatnia rubryka paska statusu zawiera pe│n▒ ╢cie┐kΩ dostΩpu i nazwΩ pliku, nad kt≤rym w│a╢nie pracujemy. Poprzedzona jest ona liczb▒ w nawiasie. Ta liczba to wielko╢µ dokumentu. BΩdzie siΩ ona zwiΩkszaµ w trakcie pisania kolejnych polece±, czy tekst≤w w dokumencie.

Nasza druga - prosta - strona WWW

Om≤wili╢my niekt≤re elementy programu. Kolejne bΩdziemy poznawaµ w nastΩpnych lekcjach. Teraz co╢ w ko±cu napiszmy :-)

Wykasujmy wszystko co do tej pory wpisali╢my w sekcji <BODY>. Wpiszmy tam natomiast kr≤tki fragment wiersza (w takiej samej postaci jak poni┐ej):

Znaki ... - przed <BODY> i po </BODY> - oznaczaj▒ dalsz▒ czΩ╢µ dokumentu - ich nie przepisuj.

Postaraj siΩ przepisaµ ten fragment wiersza w dok│adnie takiej samej postaci. Kiedy to uczynisz zapisz dokument. Poniewa┐ dokument, w kt≤rym piszesz - by│ ju┐ wcze╢niej zapisywany - teraz z menu Plik wybierz opcjΩ Zapisz, lub wci╢nij klawisz CTRL+S. Dokument zostanie zapisany pod t▒ sam▒ nazw▒. Gdyby╢ chcia│ go zapisaµ pod inn▒ nazw▒ - zrobi│by╢ jak w poprzednim przyk│adzie (czyli Plik->Zapisz jako).

Po zapisaniu dokumentu (poznasz to po ikonce - powinna byµ zielona) - wybierz Podgl▒d. Przycisk ten (zak│adka) znajduje siΩ na dole programu (powy┐ej paska statusu i poni┐ej g│≤wnej czΩ╢ci edytora). Kiedy to uczynisz - poka┐e siΩ nowe okno, a w nim podgl▒d Twojego nowego dokumentu. Widzisz tutaj kolejne udogodnienie EdHTMLa. Nie musisz ju┐ (jak to mia│o miejsce w przypadku Notatnika i poprzedniej lekcji) zapisywaµ dokument≤w i klikaµ dwa razy myszk▒ na zapisanym dokumencie. Teraz zar≤wno podgl▒d dokumentu (przegl▒darkΩ), jak i edytor masz w jednym miejscu. Jak obejrzysz stronΩ, aby powr≤ciµ do edytora - wybierz opcjΩ Dokument. Znajduje siΩ obok wybrane przed chwil▒ Podgl▒d. Mo┐esz tak prze│▒czaµ siΩ miΩdzy podgl▒dem, a dokumentem wiele razy. Mo┐esz to robiµ tak┐e sam▒ klawiatur▒. S│u┐y do tego celu funkcja CTRL+B.

Prze│▒cz siΩ wiΩc jeszcze raz na podgl▒d dokumentu. Jak wygl▒da? Tak jak napisa│e╢? NIE. Wszystko zapisane jest w jednej linijce. Ot≤┐ w jΩzyku HTML niewidoczne s▒ podw≤jne (wielokrotne) spacje. Nie wa┐me wiΩc, ┐e na pocz▒tku ka┐dej linii da│e╢ ich kilka. Niewidoczne s▒ tak┐e przej╢cia do nowej linii. Mimo, i┐ pisa│e╢ ka┐dy wers wiersza w oddzielnej linii - w efekcie ko±cowym (na podgl▒dzie) wszystko jest w jednej. Taki ju┐ jest HTML. Aby przej╢µ do nowej linii (postawiµ prawdziwy ENTER) - trzeba u┐yµ specjalnego znacznika. Jest nim <BR>. Spr≤bujmy. Po ka┐dej linii wiersza wpisz w│a╢nie ten znacznik. Dokument powinien wiΩc wygl▒daµ tak:

Zauwa┐, ┐e kiedy chcesz wpisaµ jakie╢ polecenie HTML - natychmiast po otwarciu nawiasu tr≤jk▒tnego, a wiΩc po postawieniu znaku mniejszo╢ci (<) - dostawiany jest znak wiΩkszo╢ci, zamykaj▒cy to polecenie (>). To jest kolejne udogodnienie programu, kt≤re bardzo przyspiesza pisanie nowych witryn.

Po dopisaniu znacznika <BR> na ko±cu ka┐dego wersu wiersza przejd╝ ponownie do podgl▒du. Ju┐ jest lepiej.... ka┐dy wers w kodzie ╝r≤d│owym - jest wersem w efekcie ko±cowym. ZAPAMI╩TAJ! Zwyk│y ENTER (przej╢cie do nowej linii) w HTMLu nie dzia│a. Trzeba skorzystaµ ze znacznika <BR>. EdHTML potrafi to jeszcze bardziej udogodniµ. Mo┐esz wcisn▒c kombinacjΩ klawiszy CTRL+ENTER (czyli wcisn▒µ CTRL i trzymaj▒c - wcisn▒µ klawisz ENTER). Kiedy to zrobisz - do dokumentu wstawi siΩ samo polecenie <BR>. Spr≤buj!

Pozostaje jeszcze problem spacji. W kodzie ╝r≤d│owym napisali╢my je, a w przegl▒darce ich nie widaµ. Spacja w HTMLu ma r≤wnie┐ specjalny kod. To akurat nie jest znacznik, tylko specjalna sekwencja znak≤w, kt≤r▒ przegl▒darka rozpoznaje jako SPACJA (tzw. twarda spacja). Zamiast wiΩc tych zwyk│ych spacji wszΩdzie wpisz: &nbsp;. Oto jak to powinno wygl▒daµ:

Wygl▒da ju┐ dok│adnie jak w ╝r≤dle. EdHTML potrafi przyspieszyµ wpisywanie twardych spacji. Zamiast pisaµ je rΩcznie skorzystaj z kombinacji CTRL+SPACJA. Je╢li j▒ wci╢niejsz do dokumentu natychmiast wstawiony zostanie kod twardej spacji.

Zako±czenie lekcji 2

Lekcja druga dobieg│a ko±ca. Dowiedzia│e╢ siΩ na niej o nowym programie - EdHTML, kt≤rego bΩdziemy wykorzystywaµ przy tworzeniu stron WWW. Pozna│e╢ niekt≤re jego elementy, stworzy│e╢ nawet prost▒ stronΩ WWW. Zapozna│e╢ siΩ z nowymi informacjami na temat HTMLa i zobaczyle╢ - jaki on jest nieprzyjazny dla u┐ytkownika. Widzisz wiΩc - ile ciΩ┐kiej pracy trzeba w│o┐yµ w napisanie strony. EdHTML potrafi jednak to bardzo przyspieszyµ. Pozna│e╢ kilka metod, m.in. szablon dokument≤w, szybki podgl▒d, kombinacje klawiszy do polecenia <BR> i twardej spacji. W kolejnych lekcjach zobaczysz jeszcze jak bardzo EdHTML wyrΩcza nas z wielu rzeczy. Teraz powiniene╢ jeszcze nim siΩ pobawiµ, potestowaµ. Na zako±czenie kr≤tko w punktach przypomnienie najwa┐niejszych rzeczy z tej lekcji: