YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy HTML - Podstawy Podstawy Najwa\niejsze polecenia Próbki kolorów mających nazwy Co mo\na zrobić z tekstem Odnośniki Obrazki Tabele Wykorzystanie tabel Formularze Ramki 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 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 tekst pogrubiony
tekst zwykły Jak widać na powy\szym przykładzie, komenda B została zakończona przez komendę . 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 1 z 7 2010-02-14 20:38 YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy WWW:
to komentarz Tutaj ustawia się pare wa\nych rzeczy - zobacz sekcję Nagłówek tego kursu -->
Moja pierwsza strona
Większość komend mo\na wywoływać z parametrami. Tak jest np. przy ustawianiu koloru tła dla strony:
Kolory mo\na określać na dwa sposoby: wpisując nazwę koloru podając jego numer Pierwszy sposób jest zdecydowanie łatwiejszy. Mo\esz obejrzeć tabelę zawierającą próbki kolorów mających nazwy, ale na razie omówię jeszcze drugi sposób. Wygląda to na przykład tak:
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.:
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 2 z 7 2010-02-14 20:38 YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy 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: H1 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:
A tak to wygląda w praktyce: pierwsza komórka druga komórka trzecia komórka A to ju\ następny wiersz komó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 4 z 7 2010-02-14 20:38 YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy 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:
czerwone
białe
jasnoniebieskie
przezroczyste
zielone
przezroczyste
ró\owe
białe
\ółte
Teraz to samo w praktyce: czerwone białe jasnoniebieskie przezroczyste zielone przezroczyste ró\owe biał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. 5 z 7 2010-02-14 20:38 YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy 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.
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 6 z 7 2010-02-14 20:38 YGREG.COM - HTML - Podstawy http://www.ygreg.com/druk.php?html-podstawy 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:
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 znalezć 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. Grzegorz 'Ygreg' Plebański ygreg@ygreg.com http://www.ygreg.com http://www.ygreg.com 7 z 7 2010-02-14 20:38