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 <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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
1 z 7
2010-02-14 20:38
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:
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:
<BODY BGCOLOR=#12A24B>
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
2 z 7
2010-02-14 20:38
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:
<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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
3 z 7
2010-02-14 20:38
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ó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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
4 z 7
2010-02-14 20:38
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:
czerwone
białe
jasnoniebieskie
przeźroczyste zielone
przeźroczyste
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.
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
5 z 7
2010-02-14 20:38
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
6 z 7
2010-02-14 20:38
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.
Grzegorz 'Ygreg' Plebański
ygreg@ygreg.com
http://www.ygreg.com
http://www.ygreg.com
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
7 z 7
2010-02-14 20:38
Wyszukiwarka
Podobne podstrony:
kurs html podstawy tworzenia stron www RHQWUXUAVSLOSX6ABOMEHGX52LV2WV67LZXY6RQ
HTML, Podstawowe ćwiczenia
język HTML podstawy (25 str)
Podstawy tworzenia stron WWW w języku HTML, wrzut na chomika listopad, Informatyka -all, INFORMATYKA
PODSTAWY JĘZYKA HTML
Podstawy HTML
KURS Prostego Formatowania Tekstu w Opisie Chomika (kurs podstaw html)
ABC JĘZYKA HTML - Dodatek B. - Podstawowe moduły kodu HTML, ► Szkoła, HTML
podstawy html czesc II
Podstawy HTML
Podstawowe użycie HTML
Informatyka - podstawy HTML 2, SZKOŁA, Informatyka
Informatyka - podstawy HTML, SZKOŁA, Informatyka
podstawy html
więcej podobnych podstron