Spis treści

PODSTAWY

     W tym kursie omawiać będę tworzenie stron WWW za pomocą dowolnego edytora tekstów. Nie będe się zajmował programami tworzącymi takie strony.

Do tworzenia stron wystarczy edytor tekstów, program graficzny zapisujący w formatach GIF i JPG (polecam Paint Shop Pro), no i oczywiście jakaś przeglądarka WWW (LYNX odpada).
Strona WWW jest zwykłym plikiem tekstowym. Ale pod przeglądarką WWW wygląda na zupełnie co innego. Działa to tak: w tym pliku oprócz tego, co widzi oglądający stronę jest jeszcze kupa poleceń dla przeglądarki WWW. Polecenia te są ograniczone znakami < i >. Ponieważ odnosi się to do każdego polecenia, dam sobie spokój z wypisywaniem tych znaczków za każdym razem. Zamiast <BODY> będe więc pisał BODY, itd. Duża część poleceń odnosi się tylko do fragmentu strony. Na przykład komenda B, która pogrubia tekst:

Tekst zwykły
<B>
tekst pogrubiony
</B>
tekst zwykły

     Jak widać na powyższym przykładzie, komenda B została zakończona przez komendę </B>. Tak jest ze wszystkimi komendami.
Teraz jeszcze kilka słów wyjaśnienia do przykładów. Zwykle polecenia objęte znakami < i > nie są widozne. W przykładach znak < zastąpiłem ciągiem znaków & lt;, powodujących tylko jego wyświetlenie.
     No i chyba ostatnia sprawa: pliki zawierające strony powinny mieć rozszerzenie .htm lub .html, należy też pamiętać, że większość serwerów rozróżnia małe i duże litery w nazwach plików, więc INDEX.HTM, Index.htm i index.htm to 3 różne pliki.


NAJWAŻNIEJSZE POLECENIA

     Niewątpliwie najważniejszym poleceniem jest polecenie HTML. Musi ono rozpoczynać każdy dokument, i musi być zamknięte jako ostatnie. Następną co do ważności jest komenda BODY. Po zamknięciu BODY można już tylko zamknąć polecenie HTML. Cały tekst objęty komendą BODY z wyjątkiem innych komend zostanie wyświetlony. To wystarczy już do napisania najprostszej strony WWW:
<HTML>
   <HEAD>
      <!--
         Tekst objęty znacznikami
         <!-- i --> to komentarz
         Tutaj ustawia się pare
         ważnych rzeczy - zobacz
         sekcję Nagłówek
         tego kursu
      -->
   </HEAD>
   <BODY>
      Moja pierwsza strona
   </BODY>
</HTML>
     Większość komend można wywoływać z parametrami. Tak jest np. przy ustawianiu koloru tła dla strony:
<BODY BGCOLOR=RED>
Kolory można określać na dwa sposoby:      Kolejne dwucyfrowe liczby tego numeru w systemie szesnastkowym oznaczają ilość składnika czerwonego, zielonego i niebieskiego. W ten sposób trudniej jest ustawić kolor, ale można ich uzyskać znacznie więcej.
     Polecenie BODY ma wiele parametrów. Poznany wcześniej BGCOLOR zmienia kolor tła. TEXT zmienia kolor liter, LINK zmienia kolor odnośników, VLINK zmienia kolor odnośników które były już odwiedzane. Parametry LINK i VLINK mają domyślnie wartości:
          LNIK=BLUE
          VLINK=PURPLE
     Parametr BACKGROUND pozwala ustawić obrazek jako tło, np.:
          <BODY BACKGROUND=TŁO.GIF>
     Obrazek musi być w formacie GIF lub JPG. Należy zwrócić uwagę na wielkość liter - windows nie jest na nią wrażliwy, ale w systemie UNIX (system operacyjny pod którym pracuje większość serwerów internetowych)

Obrazek.gif i obrazek.gif to dwa różne pliki.
     Obrazek który ma być użyty jako tło nie może mieć wielu kolorów (tekst będzie nieczytelny). Ciekawy efekt daje użycie długiego (koło 1700 pixeli długości) i niewysokiego paska, na przykład takiego jak na moich stronach. Ponieważ jest on bezustannie powtarzany, wygląda jakby był tu wysoki pionowy pasek po lewej stronie.


CO MOŻNA ZROBIĆ Z TEKSTEM

     Gdyby tekst był pisany cały czas taką samą czcionką, nie byłobo szans na napisanie przejrzystej strony dłuższej niż 10 linijek. Jest więc wiele komend wpływających na wygląd tekstu. Oto one:
  • B - pogrubia tekst
  • I - pochyla tekst
  • U - podkreśla tekst
  • STRIKE - przekreśla tekst
  • BIG - powiększa tekst
  • SMALL - pomniejsza tekst
  • SUB - tekst pisany niżej
  • SUP - tekst pisany wyżej

     Teraz trochę o wielkości tekstu. Do jej ustawiania można użyć komend H1, H2, H3, H4, H5, H6. Ich działanie widać poniżej:
FONT CLASS="bighead" H2

H3

H4

H5
H6

     Zdecydowanie lepiej jest jednak użyć do tego celu komendy FONT. Pozwala ona na zmianę koloru, wielkości i czcionki jaką tekst jest pisany. Do zmiany koloru służy parametr COLR. Parametr SIZE określa wielkość czcionki. Parametr FACE pozwala wybrać czcionkę. Można podać w nim kilka nazw czcionek oddzielonych przecinkami - zostanie wtedy użyta pierwsza z nich, która zostanie znaleziona na komputerze oglądającego stronę. Przykład:

          <FONT SIZE=5 COLOR=RED>
będzie wyglądał tak
     Tekst we wszystkich przeglądarkach jest domyślnie wyrównany do lewej. Jednak może być też wyrównany
do prawej
lub wyśrodkowany.
     Do uzyskania tych efektów używana jest komenda DIV z parametrem ALIGN. Może on mieć 3 wartości:
  • LEFT - tekst wyrównany do lewej
  • RIGHT - tekst wyrównany do prawej
  • CENTER - tekst wyśrodkownay
         Nietrudno zauważyć, że znaki końca lini w pliku .htm są przez przeglądarkę ignorowane. W każdej lini wyświetlane jest tyle tekstu ile się zmieści. Jeżeli jednak zechcemy koniecznie zacząć coś od nowej lini, lub uzyskać odstęp między dwoma fragmentami tekstu, trzeba użyć komendy BR. Nie ma ona żadnych parametrów. Po prostu kończy linię i przechodzi do następnej.


    ODNOŚNIKI

         WWW nie było by tym czym jest bez odnośników. Trzeba więc wiedzieć, jak umieszczać je w swoich stronach. Służy do tego komenda A z parametrem HREF. Zawiera on adres strony, do której ma odsyłać, np.:
    <A HREF=strona.htm>Tekst odnośnika</A>
     Po kliknięciu napisu Tekst odnośnika zostanie załadowany dokument o nazwie strona.htm. Parametr HREF może też zawierać pełny adres strony, lub lokalizację strony względem strony bieżącej, np.:
    <A HREF=www.nic.pl/strona.htm>
    <A HREF=katalog/strona.htm>
          Odnośniki mogą też przenosić między różnymi miejscami na tej samej stronie. Jest to trochę bardziej skomplikowane. Najpierw poleceniem A z parametrem NAME należy oznaczyć miejsce, do którego ma przenosić taki odnośnik, np.:
    <A NAME=nazwa>
     Aby teraz stworzyć odnośnik przenoszący do tego miejsca trzeba wpisać:
    <A HREF=#nazwa>
    gdzie nazwa to nazwa miejsca podana w parametrze NAME.

         Te dwie funkcje odnośników można też połączyć, tworząc odnośnik przenoszący do wybranego miejsca innej strony. Wygląda to tak:
    <A HREF=strona.htm#miejsce>
    Oczywiście w pliku strona.htm musi do tego zostać zdefiniowany punkt o nazwie miejsce.


    OBRAZKI

         Jak powszechnie wiadomo do stron WWW można wstawiać obrazki. Używa się do tego polecenia IMG. Ma ono obowiązkowy parametr SRC zawierający nazwę lub adres i nazwę obrazka (koniecznie w formacie GIF lub JPG) który ma zostać umieszczony w stronie. Obrazki nie mogą być zbyt duże, ze względu na małą szybkość modemów.
         Obrazki w formacie GIF mogą mieć przeźroczyste tło. W formacie GIF można też zapisać animację. Służą do tego osobne programy takie jak Gif Construction Set (gifcon), lub Animation Shop
         Oczywiście na położenie obrazków wpływa komenda DIV. Położenie tekstu względem obrazka ustawia się parametrem ALIGN. Może on mieć następujące wartości: left, right, top, center, bottom, middle.
         Może się zdarzyć, że obrazek ma inną wielkość niż potrzeba na stronie. Wtedy używa się parametrów HEIGHT i WIDTH, w których podaje się żądaną wysokość i szerokość w pikselach lub procentach wielkości okna.


    TABELE

         Często używanym elementem języka HTML są tabele. Używa się ich nie tylko do tworzenia tabel jako takich, ale także do układania elementów strony.
         Każda tabela jest rozpoczynana poleceniem TABLE. Ma ono ważny parametr BORDER określający

    grubość ramki tej tabeli. Jeżeli parametrowi BORDER nie zostanie nadana wartość, tabela nie ma ramek.
         Gdy już rozpocznie się tabelę można używać poleceń TD i TR. Pierwsze z nich przechodzi do następnej komórki, drugie do następnego wiersza komórek. Przykład:
              <TABLE BORDER=5>
              <TD>pierwsza komórka<TD>druga komórka<td>trzecia komórka
              <TR><TD>A to już następny wiersz<TD>komórka po prawej jest pusta --->
              </TABLE>
    A tak to wygląda w praktyce:

    pierwsza komórkadruga komórkatrzecia komórka
    A to już następny wierszkomórka po prawej jest pusta --->

         Jeżeli na jakimś tle tabela jest kiepsko widoczna można użyć parametrów BORDERCOLORLIGHT i BORDERCOLORDARK, za pomocą których można zmienić kolory ramek (jasny i ciemny).

    WYKORZYSTANIE TABEL

         Tabele są bardzo często używane do ułożenia tekstu i obrazków na stronie. Tabela może też mieć inne tło niż pozostała część strony. Do jego ustawiania służą parametry BGCOLOR i BACKGROUND podawane w poleceniu TD (w zależności, czy tło ma mieć jednolity kolor, czy też tłem ma być obrazek). Polecenia TABLE i TD mają też parametr WIDTH określający szerokość danej komórki w przypadku polecenia TD lub tabeli w przypadku polecenia TABLE. Teraz przykład łączący to wszystko:

              <TABLE width=60%>
                   <TR>
                        <TD WIDTH=23% BGCOLOR=RED>czerwone
                        <TD WIDTH=* BGCOLOR=WHITE>białe
                        <TD BGCOLOR=LIGHTBLUE WIDTH=23%>jasnoniebieskie
                   <TR>
                        <TD WIDTH=23%>przeźroczyste
                        <TD WIDTH=* BGCOLOR=GREEN>zielone
                        <TD WIDTH=23%>przeźroczyste
                   <TR>
                        <TD WIDTH=23% BGCOLOR=PINK>różowe
                        <TD WIDTH=* BGCOLOR=WHITE>białe
                        <TD BGCOLOR=YELLOW WIDTH=23%>żółte
              </TABLE>

         Teraz to samo w praktyce:

    czerwonebiałejasnoniebieskie
    przeźroczystezieloneprzeźroczyste
    różowebiałeżółte

         W powyższym przykładzie parametrowi WIDTH nadałem kilkakrotnie wartość *. Oznacza to, że dana komórka lub inny element zajmie całe pozostawione mu miejsce.


    FORMULARZE

         Formularze są bardzo ważnym elementem języka HTML, gdyż umożliwiają czytającemu stronę wprowadzanie

    danych, które mogą być wykorzystane przez autora strony. Obsługą danych z formularzy zajmują się zwykle skrypty CGI. Są to krótkie programy napisane np. w PERLU, uruchamiane na serwerze. Mogą one przykładowo wysłać zawartość formularza e-mailem do autora strony, wyświetlając jednocześnie stronę z podziękowaniami. Jeżeli potrzebujesz skryptu do obsługi formularza, zajrzyj do działu CGI_PL.
         Każdy formularz rozpoczyna się poleceniem FORM. Ma ono dwa ważne parametry - METHOD i ACTION. Pierwszy z nich może mieć dwie wartości: GET i POST. Której użyć zależy od skryptu obsługującego formularz. Drugi z nich - ACTION - powinien zawierać adres skryptu obsługującego formularz.
         Formularz może też zostać użyty przez skrypt Javy, ale wtedy dane nie wydostaną się poza komputer użytkownika. Jest to przydatne przy pisanych w Javie kalkulatorach i podobnych dodatkach do stron. Wtedy należy podać jeszcze parametr NAME zawierający nazwę formularza, przez którą będzie się do niego odwoływał skrypt.
         W obrębie formularza można używać poleceń INPUT, TEXTAREA, SELECT.

    INPUT
         Polecenie INPUT pozwala tworzyć podstawowe elementy formularza. Ma ono parametr TYPE, od którego zależy istnienie innych parametrów. Określa on rodzaj pola formularza.


    TYPE=TEXT


         Są trzy parametry dla takiego pola - NAME, MAXLENGTH i SIZE. NAME określa nazwę pola, SIZE jego długość w znakach, MAXLENGTH maksymalną długość ciągu wprowadzonych znaków.


    TYPE=PASSWORD



         Parametry identyczne jak przy TYPE=TEXT, zamiast wprowadzanych liter pojawiają się gwiazdki.


    TYPE=CHECKBOX



         Zaznaczane pole ma parametry NAME i CHECKED. NAME zawiera nazwę pola, parametrowi checked nie nadaje się wartości, np.

              <INPUT TYPE=CHECKBOX CHECKED>
    wyświetli pole które będzie od razu zaznaczone.


    TYPE=RADIO



         Dla jednego zestawu takich pól parametr NAME podawany w każdym musi być taki sam. Można użyć parametru CHECKED, aby wybrać które z pól będzie zaznaczone na początku (zanim użytkownik to zmieni). Parametr VALUE zawiera wartość która zostanie wysłana, jeżeli właśnie to pole jest zaznaczone.


    TYPE=RESET



         Tworzy przycisk czyszczący zawartość formularza. Parametr VALUE zawiera napis na przycisku.


    TYPE=SUBMIT



         Podobnie jak przy TYPE=RESET, ale przycisk powoduje wysłanie formularza.


    TYPE=BUTTON

         Parametry takie jak przy TYPE=RESET, tworzy przycisk który może zostać użyty przez skrypt Java.


    TEXTAREA



         Polecenie TEXTAREA może zostać użyte tylko w obrębie formularza. Tworzy ono pole do wpisywania

    tekstu. Ma trzy parametry NAME, ROWS, COLS. NAME to nazwa pola, ROWS to jego wysokość w linijkach, COLS to jego długość w znakach. Polecenie to trzeba koniecznie zamknąć - przedtem można wpisać tekst, który pojawi się w polu po otwarciu strony.


    RAMKI


         Ramki pozwalają na wyświetlenie na jednej stronie wielu dokumentów, dzięki czemu są nadzwyczaj przydatne. Aby z nich skorzystać trzeba stworzyć nowy dokument, nie zawierający znaczników BODY (HEAD jest dozwolony). Następnie zamiast sekcji BODY rozpoczynamy komendę FRAMESET. Ma ona jeden parametr - ROWS lub COLS, zależnie czy ramka ma być pozioma czy pionowa. Następnie należy

    użyć polecenia FRAME z parametrem SRC, zawierającym nazwę strony do wstawienia. Jeżeli podamy parametr NORESIZE, użytkownik nie będzie mógł zmienić wielkości ramki. FRAMEBOREDER=NO spowoduje, że cieniowana kreska nie zostanie wyświetlona. Name określa nazwę ramki. Jeżeli nie chcemy pasków do przewijania zawartości wpisujemy parametr SCROLLING=NO.
         Komendy FRAME należy użyć dla każdej z ramek. Przykład:
              <FRAMESET COLS=20%,*,30%>
                   <FRAME SRC=strona1.htm>
                   <FRAME SRC=strona2.htm>
                   <FRAME SRC=strona3.htm>
              </FRAMESET>


    ODNOŚNIKI W RAMKACH

         Standardowy odnośnik po kliknięciu załaduje stronę do ramki w której był poprzednio. Aby to zmienić można zastosować parametr TARGET, w którym należy podać nazwę ramki do której ma zostać załadowany

    dokument. Może on mieć też wartości _top i _blank - pierwsza z nich powoduje zlikwidowanie ramek i załadowanie strony na cały ekran, druga powoduje załadowanie strony do nowego okna.


    Zakończenie

         Dziękuję za czas poświęcony na czytanie mojego kursu. Więcej informacji możesz znaleźć w spisie wybranych poleceń HTMLa - opisałem tam dokładnie wszystkie moim zdaniem najważniejsze polecenia, wraz z parametrami. Życzę wielu sukcesów w pisaniu stron WWW.

     

    Kurs udostępnił :
    http://ygreg.and.pl