Jak stworzyć własną stronę WWW, dla i do kompa

Wątki

Jak stworzyć własną stronę WWW, dla i do kompa

Jak stworzyć własną stronę WWW

lMusisz mieć konto na serwerze WWW połączonym z Internetem.
W Wyższej Szkole Biznesu - National-Louis University konta dla pracowników zakładane są na serwerze: sigma.wsb-nlu.edu.pl, a dla studentów na serwerze: venus.wsb-nlu.edu.pl. Jeśli nie posiadasz konta skontaktuj się z . llMusisz utworzyć dokument w . Możesz to zrobić w następujący sposób: możesz nauczyć się języka programowania HTML przeznaczonego do tego celu (zalecamy skorzystanie z firmy ), l

o możesz użyć specjalnego oprogramowania przeznaczonego do tworzenia stron WWW (np. Hot Dog, , , , )

o Połącz się z serwerem i zaloguj sie na swoje konto za pomocą protokołu ssh ( do połączenia za pomocą protokołu SSH). Utwórz we własnym katalogu głównym podkatalog public_html (poleceniem: mkdir public_html) i w nim umieść swój dokument pod nazwą index.html. Jeżeli chcesz dołączyć do niego inne pliki (obrazki itd.) umieść je również w tym katalogu. Pliki te można przesłac za pomocą programu-klienta wykorzystującego protokół ftp (tylko w ramach sieci lokalnej WSB-NLU) lub programu wykorzystującego bezpieczne kopiowanie:

lPamiętać należy o tym, aby zarówno główny katalog, jak i katalog public_html były czytelne dla świata:
chmod a+x ~ ~/public_html llPo stworzeniu dokumentu index.html, jak i jakichkolwiek innych, trzeba całą zawartość katalogu public_html uczynić czytelną dla świata:
chmod -R a+rx ~/public_html/*

(to ważne! nie zapomnij powtórzyć tej operacji, ilekroć dodajesz tam nowe pliki) i wypróbuj, czy to działa, adres Twojej strony to: l

o dla studentów: http://venus.wsb-nlu.edu.pl/~login

o dla pracowników: http://sigma.wsb-nlu.edu.pl/~login

(przy czym login zastąp nazwą Twojego konta - nazwą użytkownika).

Cechy jakie powinna posiadać dobra strona internetowa:

· szybko się ładować

· logiczne uporządkowanie treści

· łatwość wyszukiwania informacji

· przemyślane nazewnictwo odsyłaczy i przycisków

· zrozumiały język

· przejrzysta, czytelna

· niewielka ilość animacji

· standardowe rozmiary bannerów reklamowych

· uspokojona i stonowana kolorystyka - unikanie kontrastów

· strona powinna być poprawnie wyświetlana w wielu popularnych przeglądarkach (Internet Explorer, Netscape, Opera)

Edytor

Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware).

Osobiście polecam używanie edytorów tekstowych, a nie graficznych, gdyż mamy wtedy lepszą kontrolę nad tworzonym dokumentem.

W środowisku Windows 3.1 polecam w szczególności:

§ Pajączek 2 - jest to polski edytor, jeden z najlepszych programów na świecie, co z satysfakcją należy podkreślić, już darmowy!

§ WebEdit 2

§ HotDog 3

W środowisku Windows 95/98 możesz używać:

§ HomeSite, w wersjach od 2.x do 4.x - moim zdaniem najlepszy edytor w tym środowisku

§ Pajączek 2000

§ Tiger98 - także polski, bardzo silny edytor

§ HotDog od 3 do 5 - silny, ale dość trudny w obsłudze

§ WebEdit 3 - jeden z najlepszych programów w tym środowisku

§ WebPager Xpress - polski edytor, nieco słabszy od wyżej wymienionych, ale darmowy

§ ezHTML - polski edytor, także darmowy

Oczywiście możesz się także posłużyć graficznymi edytorami, a dla początkujących polecam szczególnie darmowe edytory dołączone do przeglądarek Internet Explorer i Netscape Communicator (lub Sylaba Komunikator). Ponieważ jednak uczysz się języka HTML, warto się posługiwać edytorami tekstowymi.

Osnowa dokumentu

Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami.

Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami.

Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. Wygląda to następująco:

<HTML>

<HEAD>informacje nagłówkowe</HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek.

Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji.

Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>.

<HEAD>

<TITLE>Tytuł strony</TITLE>

</HEAD>

TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład:

<HEAD>

<TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE>

</HEAD>

Proszę zwrócić teraz uwagę na pasek tytułowy przeglądarki, gdzie widnieje treść "Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących".

Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.

Zalecamy usilnie stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco:

Ostatecznie więc, stosuj na początku standardową osnowę:

<HTML>

<HEAD>

<TITLE>Tytuł strony</TITLE>

</HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

Jak uzyskać polskie znaki w edytorach?

UWAGA: czołowe polskie edytory HTML nie wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej.

Poniższe uwagi dotyczą głównie edytorów produkcji zachodniej.

Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy się zaopatrzyć w czcionki w tym standardzie. Są one dostępne (czcionki TrueType) na polskiej stronie "ogonkowej", pod adresem . Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie . Użytkownikom edytora HomeSite 2.5 (lub nowszego) należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej, która pozwala zdefiniować klawiaturę ISO, np. w pakietach Mako lub Zecer. Pakiet Zecer 2.1 zawiera nakładkę klawiaturową Polkeyb, autorstwa Andrzeja Górbiela. Nakładka pozwala zdefiniować klawiatury w trybie graficznym, choć możliwe jest to za pomocą ręcznego wpisu do pliku WIN.INI. A stąd możesz pobrać za darmo

Dla ułatwienia podaję treść wpisu. Wystarczy go skopiować do schowka, wstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco:

[PolKeyb]
settings=0 2 10 0 1 10 0

name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

Darmową klawiaturę ISO można pobrać także w serwisie , czyli tam, gdzie jest czcionka ekranowa PolskieStrony.

Problem konwersji już istniejących dokumentów można załatwić "hurtowo" za pomocą specjalnych programów konwertujących. Polecamy przede wszystkim program , Michała Jaskólskiego - Michał oferuje ją wszystkim za darmo i warto podkreślić, że jego program stał się jednym z najważniejszych narzędzi w "dziecięcym" okresie polskiego Internetu. Niezliczone tysiące osób konwertowały już nim swoje strony, dostosowując je do zalecanego standardu.

Gdy z jakichś powodów zechcesz używać w swojej witrynie internetowej strony kodowej Windows-1250 (co odradzamy), wpisz koniecznie odpowiednią informację META:

Podsumowanie:

Jeśli zechcesz stosować stronę kodową ISO-8859-2 (zalecamy), wykonaj następujące działania:

· Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO-8859-2, za pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML

· Używaj polskiej klawiatury w standardzie ISO-8859-2

· Wstaw deklarację strony kodowej ISO-8859-2 w nagłówku dokumentu

Jeśli zamierzasz stosować stronę kodową Windows-1250 (nie zalecamy)

· Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w Windows)

· Używaj standardowej klawiatury Windows

· Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu

Użytkownicy systemu operacyjnego Linux w ogóle nie mają problemu ze stroną kodową, gdyż system ten posługuje się międzynarodowymi standardami.

Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić polecenie:

przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie wartości heksadecymalnych, jako bardziej uniwersalnych - zapoznaj się przy okazji z w naszym kursie, gdzie są w praktyczny sposób pokazane kolory i sposób ich kodowania (tabelę sporządził Paweł Stokowski).

Tytuły

W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik otwierający. Niektóre polecenia można używać w obu postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit).

Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.

Uwaga: Powszechnie używany termin "nagłówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.

Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń H1, H2 itd.

Tytuł stopnia pierwszegoTytuł stopnia drugiegoTytuł stopnia trzeciegoTytuł stopnia czwartegoTytuł stopnia piątegoTytuł stopnia szóstegoAkapit i wiersz

Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego .

Przykład:

To jest treść pierwszego akapitu

To jest treść drugiego akapitu

Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie , które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.

To jest pierwszy wiersz 
To jest drugi wiersz 
To jest trzeci wiersz 
To jest czwarty wiersz

Ponadto polecenie ma jeszcze jedną zaletę. Napisanie kilku kolejnych pozwala poszerzyć pionowy odstęp między elementami.

Pozioma linia

Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Zauważ, że w tym dokumencie bloki informacji są rozdzielane właśnie poziomymi liniami.

Wykazy

Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstów spotykają się z tym elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list numerowanych i list wypunktowanych.

Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI>

Dlaczego zajmuję się UFO?

<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>

W efekcie uzyskamy:

Dlaczego zajmuję się UFO?

· Uważam, że UFO istnieje

· Uważam, że pozaziemskie cywilizacje mogą nam pomóc

· Uważam, że należy się przygotować na spotkanie

Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>, czy też zastosujemy dodatkowo znacznik zamykający </LI>. Autorzy edytorów HTML stosują różne konwencje, a wynik w przeglądarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca się zamykanie znaczników.

Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i </UL> możemy zastosować <OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania).

1. Uważam, że UFO istnieje

2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc

3. Uważam, że należy się przygotować na spotkanie

Atrybuty czcionki

Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia:

To jest tekst normalny

To jest tekst pogrubiony (bold)

To jest tekst pochylony (italic, kursywa)

To jest tekst podkreślony (underlined)

Efekt działania tych poleceń:

To jest tekst normalny

To jest tekst pogrubiony

To jest tekst pochylony

To jest tekst podkreślony

Choć wszystkie przeglądarki akceptują atrybuty czcionki, warto zauważyć, że np. Netscape Navigator 2 i 3 ignoruje podkreślenie, natomiast Netscape Communicator 4 już je widzi.

Odsyłacze

Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji.

W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpowszechniej stosowane.

Odsyłacz do innej strony jest tworzony za pomocą polecenia:

<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>

Przykładowy adres mógłby wyglądać następująco:

<A HREF="http://www.pckurier.pl">PCkurier</A>

czyli,

to tam, gdzie zarabiam na swoją miskę ryżu :-)

Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW).

Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html

Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="... "> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spow...

[ Pobierz całość w formacie PDF ]

Jak stworzyć własną stronę WWW

pobieranie; download; pdf; do ÂściÂągnięcia; ebook

Wątki

Jak stworzyć własną stronę WWW, dla i do kompa