Struktura dokumentu
Dokument HTML podzielony jest na dwie sekcje <HEAD> i <BODY>.
Sekcja <HEAD> jest czyms w rodzaju glowy naszego dokumentu w niej
umieszczamy informacje
dotyczace naszej strony czyli: autora, nazwe strony, slowa kluczowe dzieki ktorym
wyszukiwarka bedzie mogla odnalezc nasza strone w sieci, kodowanie naszej strony
i inne. Sekcja <BODY> to "cialo" naszego dokumentu czyli
to co ma wyswietlac przegladarka sa to roznego rodzaju obiekty graficzne, skrypty
no i oczywiscie informacje w postaci tekstowej, ktore chcemy przekazac innym
uzytkownikom sieci. Polecenia </HEAD> i </BODY> koncza
obydwie sekcje naszego dokumentu.
Do sekcji HEAD wpisujemy podstawowe informacje dotyczace naszej strony.
Do tego posluzy nam znacznik META. Wyrozniamy kilka podstawowych znacznikow
http-equiv=" " name="keywords","description","autor","generator"
np.
<meta http-equiv="Content-Type" content="text/html;
charset="iso-8859-2">
okresli zawartosc naszej strony i typ jej kodowania.
<meta name="keywords"content="tu, wpisujemy,
slowa, kluczowe">
okreslamy slowa kojarzace sie ze strona
<meta name="autor" content="tu wpisujemy
autora strony np. Marcin Kukowski" >.
Ostatnim krokiem jest nadanie naszej stronie tytulu. Tytul ten bedzie wyswietlany
w pasku tytulu przegladarki. Do umieszczenia tytulu sluzy polecenie <TITLE>
.
Do sekcji HEAD wpisujemy <title>nazwa naszej strony</title>.
W sekcji BODY umieszczamy zawartosc naszego dokumentu.
Pierwsza czynnoscia jest okreslenie tla , koloru tekstu naszej strony, koloru
aktywnego lacza, i koloru uzytego lacza. Polecenie background="plik .gif
lub .jpg" ustawia jako tlo plik w formacie gif albo jpg. Polecenie bgcolor="#kod
koloru RGB" okresli nam kolor tla. Nastepnym poleceniem jest text="#kod
koloru RGB" okresli nam kolor tekstu na stronie. Dalej mamy dwa polecenia
okreslajace kolor lacz pierwsze do aktywnego lacza link="#kod koloru RGB"
i drugi do lacza uzytego vlink="#kod koloru RGB" np
<BODY bgcolor="#000000" text="#FFFFFF"
link="#FFFF00" vlink="#008000" > .
Operacje na tekscie
Naglowek <H1>przykladowy tekst</H1> jest
to naglowek 1 stopnia, mozemy tworzyc naglowki od 1 do 6 stopnia. 6 stopien
tworzy najmniejszy naglowek.
Akapit tworzymy poprzez wstawienie pary znacznikow <P></P>.
<p> rozpoczyna akapit, a </p> konczy. Pomiedzy nimi umieszczamy
tekst. Znacznik ten moze miec kilka atrybutow formatujacych tekst: <p align="left">,
<p align="center">, <p align="right"> - okreslamy
z ktorej strony ma byc akapit
Potem okreslamy wielkosc czcionki <font size="od 1 do 7"> jej
rodzaj <face="np. Arial"> i jej kolor np
<font size="5" face="Arial" color="#00FF00">
Tu wisujemy nasz tekst ktory ma byc wyswietlony</font>
Nasz tekst mozemy odpowiednio formatowac. Mozemy sprawic by byl on pogrubiony,
pochylony lub podkreslony. Do tego celu sluza nastepujace polecenia
<b>TEKST POGRUBIONY</b>,
<i>TEXT POCHYLONY</i>,
<u>TEKST PODKRESLONY</u>.
Znacznik konca wiersza <BR> konczy linijke tekstu i zaczyna nowa:
Jezyk HTML umozliwia nam oddzielanie fragmentow tekstu liniami aby to zrobic
wpisujemy
<hr width="50%" size="5" color="#FF0000">
otrzymujemy wtedy linie 50 % szerokosci, wielkosci 5 o kolorze czerwonym.
Wykazy i listy
Do tworzenia wykazow nie uporzadkowanych sluzy znacznik <UL></UL>.
<LI> to znacznik punktujacy nasze dane. Wypunktowanie moze miec rozny
ksztalt <UL type="disc lub circle lub square">. np
<UL type="circle"><LI>Ala<LI>Ola<LI>Ula</UL>
Do tworzenia wykazow numerowanych sluzy znacznik <OL></OL>.
Moze on miec rozne parametry START=x , ktory zaczyna numerowanie od dowolnej
cyfry, TYPE=x okreslajacy typ numerowania listy: <OL TYPE=A> numerowanie
wedlug wielkich liter, <OL TYPE=a> numerowanie wedlug malych liter, <OL
TYPE=I> numerowanie wedlug wielkich liczebnikow rzymskich, <OL TYPE=i>
numerowanie wedlug malych liczebnikow rzymskich, <OL TYPE=1> numerowanie
wedlug liczebnikow arabskich.
Tabele
Zawartosc tabeli umieszczamy miedzy dwoma znacznikami <TABLE></TABLE>.
Pomiedzy tymi dwoma znacznikami umieszczamy definicje rzedow, definicje komorek
w rzedach, dane w komorkach, tytul tabeli i naglowki wierszy i kolumn. Wiersze
okreslamy znacznikami <TR> </TR> , a komorki <TD>
</TD> w nich umieszczamy nasze dane np.
<TABLE><TR><TD>tekst</TD></TR></TABLE>
Tabelce mozemy tez nadac obramowanie dodajac polecenie BORDER, ktore moze miec
rozna wartosc : <TABLE BORDER=10> Jezeli chcemy zwiekszyc odleglosc miedzy
komorkami musimy posluzyc sie poleceniem CELLSPACING. Tak jak BORDER moze miec
okreslona wartosc: <TABLE BORDER=10 CELLSPACING=10 > </TABLE>. Kolejnym
parametrem, ktory ksztaltuje nasza tabele jest CELLPADDING ktore okresli odleglosc
zawartych w tabeli danych od obramowania komorki. Parametrami WIDTH i HEIGHT
mamy mozliwosc zdefiniowania szerokosci i wysokosci ( w pikselach lub procentach)
Ustawienie zawartosci w komorkach:
<TD ALIGN=center></TD> ( na srodku )
<TD ALIGN=left> </TD> ( z lewej )
<TD ALIGN=right> </TD> ( z prawej )
Tabele mozemy wzbogacic kolorami, mozemy okreslic tlo komorki(<BGCOLOR=kolor>)
i pokolorowac obramowanie tabeli (<BORDERCOLOR=kolor>), mozemy nawet okreslic
kolor cienia obramowania(<BORDERCOLORDARK=kolor BORDERCOLORLIGHT=kolor>)
co sprawi wrazenie przestrzennosci naszej tabeli. W miejscu "kolor"
wpisujemy nazwe koloru np. red, blue lub w RGB.
Lacza (linki)
Aby stworzyc aktywne lacze ktorym ma byc fragment tekstu w miejsce pomiedzy
poleceniem okreslajacym polozenie tekstu, a kolorem, rodzajem i wielkoscia czcionki
wpisujemy:
<A HREF="jakisplik.htm">. Kazde lacze konczymy
znacznikiem </A> np
<a href="jakisplik.htm">Lacze</a>
Na naszej stronie mozemy tworzyc takze odnosniki np. do dowolnie przez nas wybranego
wersu. Tworzy sie to tak, ze w miejscu do ktorego mamy przeskoczyc wstawiamy
<a name="tu nazwe odnosnika">. Nastepnie tworzymy lacze do tego
odnosnika <a href="#nazwa naszego odnosnika">. Laczem nie musi
byc koniecznie tekst, ale takze dowolny obrazek wstawiony na nasza strone.
<a href="mailto:nasz e-mail np.thetus@o2.pl">
- powoduje otwarcie programu pocztowego w celu wyslania do nas wiadomosci.
Grafika i multimedia
Wstawiamy grafike do dokumentu konstrukcja <IMG SRC="plik_graficzny">
Jesli nie stosujemy zadnych dodatkowych parametrow, obrazek jest ustawiany przy
lewym brzegu dokumentu i ma wielkosc oryginalu. Mozemy jednak uzyc szeregu parametrow,
ktore zmienia polozenie, wielkosc i inne cechy obrazka. <IMG SRC="plik.gif"
HEIGHT=150 WIDTH=200> to polecenie spowoduje, ze obrazek bedzie mial wysokosc
(HEIGHT) rowna 150 i dlugosc (WIDTH) rowna 200.Parametrem BORDER=x wyswietlimy
ramke o grubosci rownej x pikseli: np
<IMG SRC="jakis_obrazek.gif" WIDTH=120 HEIGHT=160
BORDER=10>.
Ramki
Aby stworzyc ramki musimy stworzyc strone, na ktorej zdefiniujemy nasze ramki
na tej stronie nie wstawiamy zadnych obrazkow, zadnego tekstu. Ta strona nie
bedzie wyswietlana przez przegladarke podaje ona tylko informacje jak maja byc
wyswietlone ramki i jaka strona ma byc wyswietlona w ramce. Oto przykladowa
strona ktora zawiera informacje o ramkach:
<html>
<head><title>Nazwa strony</title></head>
<frameset framespacing="0" border="0" rows="124,*"
frameborder="0">
<frame name="banner" scrolling="no" target="contents"
src="jakasstronka.htm">
<frameset cols="138,*">
<frame name="contents" target="main" src="jakasstronka.htm"
scrolling="auto" noresize>
<frame name="main" src="jakasstronka.htm" target="_self"
scrolling="auto">
</frameset>
<noframes><body></body></noframes></frameset>
</html>
W powyzszym przykladzie otrzymamy strone z 3 ramkami gorna, i dwiema bocznymi.
Kluczem do ramek jest para znacznikow <FRAMESET> </FRAMESET>.
Ramki okreslamy odpowiednimi parametrami, ktore definiuja liczbe ramek ich wielkosc
i podzial naszej strony. <FRAMESET COLS="30%,70%"> i <FRAMESET
ROWS="125,*"> sluzy do podzielenia naszej strony na kolumny i wiersze.
Wartosci mozemy podac w pikselach, w procentach szerokosci strony, a takze okreslic
szerokosc jednej kolumny i oznaczyc szerokosc drugiej za pomoca wieloznacznika
*. BORDER=x to parametr ktory okresla w pikselach szerokosc obramowania rozdzielajacego
ramki. Parametr FRAMEBORDER="0" lub "1" wyswietla lub ukrywa
obramowanie rozdzielajace ramki. Na koncu otrzymujemy np.
<FRAMESET FRAMESPACING="0" BORDER="0"
ROWS="124,*" FRAMEBORDER="0">.
Parametr FRAME - wyswietli odpowiedni plik HTML w wybranej przez nas ramce.
Parametr SRC="jakisplik.htm" wyswietli plik HTML w wybranej ramce.
Parametr NAME="nazwa" nadaje ramce nazwe. Jezeli chcemy by jakis plik
ladowal sie w wybranej ramce wystarczy, ze podamy jej nazwe np.
<A HREF="jakisplik.htm" TARGET="nazwa
ramki"></A>.
SCROLLING="yes" , "no" lub "auto" to parametr
ktory okresla czy maja sie pojawiac sowaki w ramce.
<FRAME NORESIZE> - zabezpieczymy ramke przed zmiana rozmiaru.
Formularze
Formularz miesci sie pomiedzy para znacznikow <FORM></FORM>.
Pomiedzy wstawiamy tresc naszego formularza. Do znacznika <FORM> dodajemy
polecenia ACTION i METHOD : np
<FORM ACTION="mailto:n@sz_e-mail" METHOD="Post"></FORM>.
ACTION okresla akcje jaka musi wykonac przegladarka, u nas jest to wyslanie
na podany adres metoda (METHOD) pocztowa . Jezeli uzyjemy takiej konstrukcji
jak powyzej to formularz nie bedzie mial tematu mozemy go nadac dodajac po adresie
e-mail ze znakiem zapytania polecenie subject czyli temat. Do formularza mozemy
wstawic kilka roznych pol ,sa to pola do wpisania informacji np. Imie i Nazwisko
lub e-mail i pola z mozliwoscia wybrania jednej z kilku opcji.
INPUT - z dodatkowymi parametrami TYPE, NAME i VALUE, sluzy do tworzenia pol,
gdzie mozna wpisac informacje lub wybrac jakas opcje
SELECT - sluzy do tworzenia rozwijalnych list z opcjami, sposrod ktorych wybiera
sie pozycje
TEXTAREA - pozwala stworzyc pole tekstowe do ktorego mozna wpisac jakis komentarz.