Budowa własnej strony HTML

Nie chcesz uczyć się języka HTML, jednak Twoja strona domowa może tak wyglądać jak w przykładzie niżej, jeżeli zastosujesz się do rad i zaleceń opisanych w tym rozdziale. Jest to praca łatwa i możliwa do wykonania przez każdego kto posiada podstawową wiedzę w posługiwaniu się aplikacjami pod Windows takimi jak:
FTP - do kopiowania plików z komputera na serwer. Przy kopiowaniu można skorzystać z poleceń UNIX jeżeli połączysz się z serwerem z systemu DOS (telnet).
Notatnik - edytor dla edytowania i pisania tekstów znajdujący się jako podstawowa aplikacja Windows..
Netscape - przeglądarka hipertekstów np v.3.0 lub nowsza

Przykład strony, Jak wprowadzać zmiany,
Wzór hipertekstu dla Rozdziału I , dla Rozdziału II,
dla Rozdziału III, dla Rozdziału IV , Jak wprowadzić własną stronę
Kopiowanie plików




 
 
 
 
 
 
 
 
 


Przykład Twojej strony domowej (pierwszej strony, bo będzie ich więcej)


Jan Kowalski (tutj Twoje imię i nazwisko)

Wydziału Powrót do Uczelni


Rozdział I Informacje
Rozdział II Zainteresowania
Rozdział III Publikacje
Rozdział IV Adresy, które lubię

Pocztę proszę wysyłać na adres jankowalski@pg.gda.pl (adres będzie Twój)


koniec przykładuPowrót do menu



 
 
 
 

Jak wprowadzać zmiany do wzorca strony


Swoje teskty należy wpisywać tylko w miejscach zaznaczonych. Szukanie tych miejsc, które należy zmieniać by strona miała charakter osobisty jest łatwe bo należy odnaleźć zaznaczony numer wiersza np:
<! w-12->
Numery można zostawić, nie bedą wyświetlane przez przeglądarkę. Poza numerami mogą być wpisane jeszcze dodatkowe informacje, np o tym, że w tym wierszu nie można nic zmieniać np:
<! w-12, ten wiersz musi pozostać bez zmian ->
Tekst umieszczony ponieżej wiersza z numerem jest tym wierszem, którego dodtyczy opis.
Jeżeli chcemy wpisać dłuższy tekst możemy podzielić go na akapity. Każdy nowy akapit musimy rozpocząć następującym znakiem
<P>
Znak tabulatora jest ignorowany, czyli nie będzie wyświetlany przez przeglądarkę, zamiast niego piszemy P w nawiasach trójkątnych.

Cały tekst Twojej strony będzie podzielony na cztery części nazwane Rozdziałami.
W Twoim menu będzie przykładowo nazwa
Rozdział II Zainteresowania
będzie ona podświetlona na niebiesko co wskazuje, że z tego miejsca można wykonać skok do miejsca nazwanego Zainteresowania. Wykonanie tych skoków jest możliwe dzięki zakładkom umieszczonym w tekscie, np dla rozdziału 2 jest to NAME="Rozdzial2" przed nazwą rozdziału "Zainteresowania". Tych znaków nie można zmieniać ani usuwać, co w przykładzie niżej zaznaczone jest na czerwono. Można natomiast zmieniać nazwę rozdziału Zainteresowania.
<! w-14-><A NAME="Rozdzial2"></A> Zainteresowania

W miejscu, z którego wykonujemy skok (tutaj menu naszej strony) jest zapisana informacje o adresie zakładki w postaci: #Rozdzial2, treści tej nie można zmienić, znaki zazanaczone w przykładzie na czerwono. Można notomiast zmienić wyświetlany znak odwołania, tutaj Rozdział II (jest podświetlany na niebiesko) oraz dodatkową informacje tutaj: Zainteresowania.
<! w-6-><A HREF="#Rozdzial2"> Rozdział II </A> Zainteresowania

W podanych przykładach wypisano przykładowe numery wierszy, o których pisano wyżej

W tekscie Twej strony będą dostępne dwa znaki graficzne

Pisanie tekstów z zastosoawniem polskich znaków narodowych w standardzie ISO-2 (jest to zalecany standard) wymaga dla kliku znaków innego ich wprowadzania niż przy typowym korzystaniu z edytorów takich jak Notatnik czy Word. Tekst lepiej wygląda gdy jest napisany z polskimi znakami. Małe litery Duże litery pozostałe litery wprowadzamy przy naciśniętym prawym Alt jak w Windows

W tekscie nie mogą występować tzw. chr jako znaki np. &#179;, nie są dozwolone, są zabronione.

Gdy wykorzystujemy edytor Word, to po napisaniu tekstu zamienimy znaki wykorzystując funkcję zamiany. W edytorze Notatnik musimy od razu wprowadzać wymagane znaki.

UWAGA

Tekst hipertekstowy można oglądać na przeglądarce przed zainstalowaniem na serwerze by sprawdzić poprawnść tekstu i wprowadzanych opisów. W tym celu otwieramy przeglądarkę np Netscape i z menu Plik wybieramy polecenie Open File in Browser. Po wyszukaniu katalogu w którym znajduje się nasz tekst index.htm potwierdzamy jego wczytanie.
 
 

Powrót do menu

Wzór hipertekstu


<HTML><HEAD>
<!wzor opracowany przez W.Stachowski->
<! w-2 ta linia musi być by można odbierać polskie znaki >
<META http-equiv="Content-Type" content="text/html"; charset="ISO-8859-2">
<! w-3 tutaj wpisz swoje imie i nzawisko jest to nazwa dokumentu>
<TITLE> Jan Kowalski</TITLE>
<! w-4 następny wiersz musi zostać nie zmieniony >
</HEAD> <BODY LANG=pl> <H1>
<! w-5 Tu wstaw swe imię i nazwisko >
Jan Kowalski
<! w-6 nastepne 8 wierszy bez zmian >
</H1><P ALIGN=CENTER><IMG WIDTH=20 HEIGHT=22 ALT="" ALIGN=bottom HSPACE=2 VSPACE=2
BORDER=0 SRC="gif/back2.gif"><A HREF="http://www.pg.gda.pl/~wmzie">
<FONT SIZE FACE="arial ce, arial"=2>Wydziału</A> <IMG WIDTH=114 HEIGHT=1 ALT="" ALIGN=bottom HSPACE=2
VSPACE=2 BORDER=0 SRC="gif/tab.gif"> Powrót do <IMG WIDTH=114 HEIGHT=1 ALT=""
ALIGN=bottom HSPACE=2 VSPACE=2 BORDER=0 SRC="gif/tab.gif"> <IMG WIDTH=20 HEIGHT=22
ALT="" ALIGN=bottom HSPACE=2 VSPACE=2 BORDER=0 SRC="gif/back2.gif">
<A HREF="http://www.pg.gda.pl">Uczelni
</A></FONT> <P><HR SIZE=5>
<! w-14 bez zmian >
<BLOCKQUOTE><P><A HREF="#Rozdzial1"><FONT SIZE=3>
<! w-15 można zmienić, te słowa będ niebieskie >
Rozdział I
</A>
<! w- 17 można zmienić jest to dodatkowa informacja >
Informacje
<! w-18 bez zmian >
<BR> <A HREF="#Rozdzial2">
<! w-19 można zmienić, te słowa będ niebieskie >
Rozdział II
</A>
<! w- 21 można zmienić jest to dodatkowa informacja >
Zainteresowania
<! w-22 bez zmian >
<BR><A HREF="#Rozdzial3">
<! w-23 można zmienić, te słowa będ niebieskie >
Rozdział III
</A>
<! w- 25 można zmienić jest to dodatkowa informacja >
Publikacje
<! w-26 bez zmian >
<BR><A HREF="#Rozdzial4">
<! w-27 to można zmienić >
Rozdział IV
</A>
<! w- 29 można zmienić jest to dodatkowa informacja >
Adresy, które lubię
<! w-30 3 wiersze bez zmian >
</BLOCKQUOTE><P><HR SIZE=5>
<P><IMG WIDTH=36 HEIGHT=46 ALT="" ALIGN=bottom HSPACE=2 VSPACE=2 BORDER=0 SRC="gif/pocz1.gif">
<FONT SIZE=2>
<! w-33 to można zmienić >
Pocztę proszę wysyłać na adres
<! w- 34 tu wpisać swój adres pocztowy po dwukropku>
<A HREF="mailto:jankowalski@pg.gda.pl">
<! w- 35 tu wpisać swój adres pocztowy >
jankowalski@pg.gda.pl
<! w-36 następne 12 wierszy bez zmian >
</A> </FONT>
<P>&nbsp;
<P>&nbsp;
<P><A NAME="Rozdzial1"></A><FONT SIZE=5>
<! w-48 to jest treć pierwszego rozdziału, nazwę rozdziału można zmienić >
Informacje:
</FONT><HR SIZE=5>
<! w-50 to jest treć w 4 akapitach >
<P>
Urodziłem się 2 stycznia 1927 roku, w okolicach Warszawy Moje dzieciństwo było zwykłe i nieskomplikowane. Jako dziecko byłem przede wszystkim zainteresowany grzybami.
<P>Jestem Absolwentem Wydziału Budowy Maszyn Politechniki Gdańskiej z 1953 roku.

<P>Wiosn 1947 roku ożeniłem się z Mari, najpiękniejsz kobiet w całej Francji.
Maria podziela moje zainteresowanie grzybami, jest też najlepszym krytykiem moich kulinarnych poczynań.
<P>Maria ma ogromne zdolnoci językowe, zaczęła swoj karierę jako nauczycielka
języka niemieckiego, hiszpańskiego i portugalskiego. Z biegiem lat nauczyła
się więcej języków, włczajc w to norweski, arabski, fiński i węgierski. Teraz może ona nawet przegldać Pajęczynę i tworzyć strony Pajęczyny w wybranym języku!
<! w-54 pozostawić >
<P>&nbsp;
<P>&nbsp;
<P><A NAME="Rozdzial2"></A><FONT SIZE=5>
<! w- 66 można zmienić >
Zainteresowania naukowe i praca:
</FONT><HR SIZE=5>
<! 68 to jest trć w 5 akapitach >
<P>Agrotechnika z astronomi
<P>Ocena jakoci upraw rolnych
<P>Nawozy sztuczne i bezpieczeństwo ich stosowania w uprawach
<P>Od roku 1947 do 1953, studiowałem sztukę kulinarn w najlepszych szkołach Paryża. Wkrótce, stałem się wiatowej sławy kuchmistrzem grzybiarskim. Miałem dług i owocn karierę przygotowujc grzyby dla monarchów, prezydentów i premierów.

<P>Pomimo tego, zawsze znalazłem czas aby przekazywać młodym ludziom wiedzę o grzybach. Jest w tym co magicznego gdy widać rozjaniajce się oczy dziecka
rozpoznajcego częci grzyba.
<! w-73 11 wierszy pozostawić bez zmian >
<P>&nbsp;
<P>&nbsp;
<P><A NAME="Rozdzial3"></A><FONT SIZE=5>
<! w-85 to można zmienić >
Publikacje
</FONT><HR SIZE=5>
<! w- 87 3 akapity >
<P>Metody analizy bezpieczeństwa przy stosowaniu nawozów sztucznych.
<P>Wpływ stosowania nawozów sztucznych w uprawach na runo lene.
<P>Małe zielone ludziki jako wynik nadmiernego stosowania nawozów sztucznych.
<! w-90 11 wierszy nie zmieniać >
<P>&nbsp;
<P>&nbsp;
<P><A NAME="Rozdzial4"></A><FONT SIZE=5>
<! w-102 można zmienić >
Adresy
</FONT><HR SIZE=5>
<P>Często w godzinach rannych odwiedzam moich kolegów po drugiej stronie półkuli. Do wielu wysyłam wtedy listy. Jeżeli, Czytelniku mojej strony, chcesz ich również odwiedzić to zapewne będ Oni bardzo zadowoleni bo lubi poznawać nowych ludzi.
<! tekst, opis słowny jako nowy akapit >
<P>Podręcznik poruszania się po przestrzeniach Internetu
<! adres >
<A HREF="http://www.task.gda.pl/help/html/wst/ ">
<! tekst który będzie podwietlony, może być adres >
http://www.task.gda.pl/help/html/wst/</A>
<P>&nbsp;
<P>&nbsp;
<HR SIZE=5>
<! NIE ZMIENIAĆ >
</BODY></HTML>

Powrót do menu
 
 
 
 
 
 
 
 


 
 


Jak wprowadzić własną stronę

W celu założenia własnej strony domowej należy pliki znajdujące się w katalogu NETSCAPE/DOM (lub innym w którym mamy pliki home.zip) przekopiować do własnego katalogu na serwerze, na którym mamy konto. Należy pamiętać o wcześniejszym poprawieniu pliku INDEX.HTM. Kopiowanie można wykonać na wiele sposobów. Tutaj zostaną omówione dwa, z wykorzystaniem pakietu kopiarki FTP i z wykorzystaniem poleceń systemu operacyjnego UNIX.

Kopiowanie pod Windows z pakietem FTP

Po uruchomieniu Windows uruchomić kopiarkę FTP. W formatce otwarcia sesji wpisać dane umożliwiające zalogowanie użytkownika w jego katalogu. Po potwierdzeniu (OK) np przez naciśnięcie klawisza ENTER uzyskamy po chwili połączenie z serwerem. Jest wielce prawdopodobne, że nie będzie tam katalogu o nazwie "public_html ". Katalog taki musisz założyć. Przez kliknięcie przycisku "MkDir" pojawi się okno w którym musisz wpisać nazwę "public_html" (małymi literami). Zamknąć okienko przez potwierdzenie klawiszem ENTER. Katalog zostanie założony. Pamiętaj, że w Twoim katalogu (nazwa taka jak login) wprowadzać pliki, tworzyć katalogi i kasować możesz tylko TY. Nie kasuj tego czego nie zakładałeś, bo możesz pozbawić się np. poczty elektronicznej.

Następnie należy otworzyć katalog (wejść do katalogu) public_html przez wskazanie nazwy i kliknięcie lewym przyciskiem myszy. Katalog jest pusty. W lewym oknie kopiarki FTP jest wyświetlany stan aktualny dysku (zapewne c:\). Przez kliknięcie dwóch kropek należy wyjść z obecnego katalogu i poszukać katalogu DOM (katalog w którym znajdują się pliki naszej strony domowej). Wejść do niego, lub innego w którym mamy wcześniej skopiowane pliki stanowiące naszą stronę domową. W dolnej części lewego okna zostaną one wyświetlone. Zaznaczamy je przez przytrzymanie klawisza Shift i wskazanie myszą tych czterech plików. Po oznaczeniu upewniamy się, że po prawej stronie otwarty jest katalog public_html i klikamy strzałkę skierowaną z lewa na prawo. Rozpocznie się kopiowanie zaznaczonych plików, z katalogu na dysku twardym, do katalogu na serwerze.

Po skończonym kopiowaniu musimy jeszcze zmienić nazwę pliku "index.htm " znajdującego się na serwerze na "index.html". W tym celu zaznaczamy go przez kliknięcie myszą. Następnie klikamy przycisk Rename. W wyświetlonej formatce dialogowej piszemy "index.html". Tak po kropce mają być cztery litery. Po potwierdzeniu zauważymy, że zmiana została dokonana.

Od tej pory ktokolwiek na świecie w przeglądarce wybierze http://www.pg.gda.pl/~login to będzie oglądał twoją strone domową. Login to nazwa Twojej skrzynki pocztowej.

Jeżeli będziesz chciał zmienić coś wystarczy poprawić plik index.htm, który przechowałeś na Twoim dysku twardym, np. wykorzystując edytor Notatnik, i przekopiować go na serwer w sposób opisany wczaśniej. Kasujemy plik index.html znajdujący się na serwerze. Zmieniamy nazwę pliku index.htm na index.html jak to opisano wcześniej.

Jeżeli na Twoim serwerze nie ma automatycznego wyboru strony domowej przez login (na serwerze sunrise Politechniki Gdańskiej tak się dzieje) lub brak jest serwera WWW (to przypadek beznadziejny) to musisz zgłosić się do Swego administratora by uzyskać dodatkowe informacje jak założyć własną stronę domową.

Powrót do menu

Kopiowanie plików

Zestaw plików wzorcowych składa się z następujących pozycji:

index.htm - ten plik ma być poprawiony, pozostałe pliki bez zmian,
back2.gif
tab.gif
pocz1.gif
Pliki te są spakowane pod nazwą home.zip. Aby skopiować plik spakowany należy kliknąć na tej nazwie: home.zip. Po kliknięciu przeglądarka zaproponuje Ci umieszczenie pliku w katalogu Netscape. Umieszczenie takie jest niewygodne z powodu występowania tam innych plików. Dla dalszych operacji lepiej jest umieścić kopiowany plik w katalogu, w którym będą tylko pliki związane z naszą stroną domową. Są dwie możliwości umieszczenia pików strony domowej na dysku komputera:
1.Utworzyć wcześniej podkatalog DOM w katalogu NETASCAPE. Można go też utworzyć mając uruchomioną przeglądarkę. W tym celu należy uruchomić aplikację Menedżer plików i po podświetleniu katalogu NETASCAPE utworzyć nowy katalog przez wybranie polecenia Utwórz katalog z menu Plik. Jako nazwę nowego katalogu podać DOM. Kliknąć OK i zamknąć menedżera plików. Skopiować pliki home.zip do podkatalogu DOM.

2. Skopiować plik home.zip do podkatalogu SECURITY , który znajduje się w katalog NETSCAPE. Po skopiowaniu pliku home.zip należy go rozpakować. Najłatwiej zrobić to wychodząc do DOS_u i po uruchomieniu Norton Commandera wybrać katalog NETSCAPE/DOM (lub NETSCAPE/SECURITY lub inny, do którego skopiowaliśmy plik home.zip) ustawić kursor na pozycji pliku home.zip przytrzymując klawisz Alt-lewy nacisnąć klawisz funkcyjny F6. Potwierdzić dekompresje naciskając klawisz ENTER.

Po powrocie do Windows uruchomić Notatnik i dokonać poprawek w pliku INDEX.HTM

Powrót do menu
Aktualizacja: