Postawowym pojeciem w pisaniu stron WWW bezposrednio kodem HTML jest znacznik:
<NAZWA OPCJE> |
Gdzie w miejsce NAZWA wstawiamy konkretna nazwe znacznika np:
<HTML>
<H1> <TABLE> |
W tym miejscu jeszcze nie bedziemy wyjasniac, co oznaczaja konkretne znaczniki a jedynie przyjrzymy sie ich ogolnej strukturze.
Wiekszosci znacznikom odpowiada znacznik zamykajacy, ktory wyglada nastepujaco:
</NAZWA> |
Wszystkie opcje definiowane sa w znaczniku otwierajacym, tak wiec znacznik zamykajacy zawiera tylko nazwe poprzedzona slaszem "/".
Przykalem pary znacznikow jest para zamykajaca i otwierajaca caly dokument HTML:
<HTML> , </HTML> |
Natomiast przykladem znacznika nie majacego swojego odpowiednika zamykajacego jest znacznik
<HR> |
Znacznik ten rysuje przez cala strone linie prosta, wlasnie taka:
Jeszcze jeden przyklad i przejdziemy do omawiania konkretnych znacznikow. To jest przyklad znacznika z okreslona jena opcja:
<BODY BGCOLOR="RED"> |
Znacznik ten definjuje ogolne wlasnosci naszej strony - wtym przypadku okreslilismy kolor tla w naszej stronie na czerwony. Do kwestii oznacznia kolorow dojdziemy w rozdziale "kolory"
Ogolna struktura dokumentu HTML jest zawsze taka sama. Wyjatkiem sa dokumenty, ktore zawieraja obsluge ramek. Ponizej omowimy obydwie mozliwosci
<HTML>
<HEAD> </HEAD> <BODY> tresc dokumentu = to co bedzie widac w oknie przegladarki </BODY> </HTML> |
Widzimy, ze w takim przypadku dokument dzieli sie na dwie czesci: naglowek (HEAD) oraz reszte, czyli cialo (BODY). W naglowku umieszczamy rzeczy, ktorych nie bedzie bezposrednio widac w oknie przegladarki, ale sa one nieraz przydatne do wymuszenia na przegladarce odpowiedniego dzialania. Dla poczatkujacych webmasterow wystarczy jeden znacznik, ktory umieszczamy w czesci HEAD mianowicie: <TITLE>. Dokument, ktory teraz czytacie ma tytul:
<TITLE> Poradnik poczatkujacego webmastera </TITLE> |
Pomiedzy znacznikami <BODY> umieszczamy wszystko to co chcemy, aby gosc na naszej stronie widzial. Moze to byc zwykly tekst z mozliwoscia kontrolowania wielkosci, koloru, kroju itp. Garfika (formaty *.jpg, *.gif) - takze gify animowane. Oraz cala siec polaczen hipertekstowych. Korzystajac ze skryptow JavaScript lub VBScript apletow Javy, itp, itp, mozna na swojej stronie wyczarowac doslownie wszystko.
<HTML>
<HEAD> </HEAD> <FRAMESET COLS="20%,*" FRAMEBORDER="0" BORDER="0"> <FRAME NAME="lewe_okno" SRC="lewe_okno.html" target="prawe_okno"> <FRAME NAME="prawe_okno" SRC="prawe_okno.html"> <NOFRAMES> Tresc dokumentu wyświetlana w przypadku, gdy przeglądarka nie obsługuje ramek </NOFRAMES> </FRAMESET> |
Zamiast poprzedniej pary znacznikow BODY mamy znaczniki FRAMESET ustalaja one podzial okna przegladarki na poszczegolne mniejsze okna. Parametr COLS="20%,*" oznacza, ze dzielimy okno na dwa pionowe okna, z ktorych pierwsze bedzie zajmowalo 20% calego okna a drugie reszte (mozna zamiast gwiazdki wpisac 80%-efekt bedzie ten sam). Zeby podzielic okna na czesci poziome zamiast parametru COLS nalezy uzyc parametru ROWS. Mozliwe jest zagniezdzanie znacznikow w sobie - do uzyskania porzadanego efektu.
Znaczniki <FRAME> sluza do zdefiniowania wlasnosci dokumentu, ktory bedzie wyswietlany w odpowiednim oknie. Podzielilismy okno przegladarki na dwie czesci, tak wiec musimy zdefiniowac dwa okna. Parametr NAME przypisuje nazwe danemu oknu. Parametr SRC podaje sciezke do pliku, ktory ma byc wyswietlony w danej RAMCE. Plik ten tez moze miec konstrukcje z "RAMKAMI". Parametr "TARGET" pozwala na to, by strona wywolana (link=polaczenie hipertekstowe) w biezacej RAMCE wyswietlila sie w innej RAMCE (dlatego potrzebne sa nazwy poszczegolnych RAMEK). Jezeli przypiszemy parametrowi TARGET wartosc _top, to wywolana strona wyswietli sie w calym oknie -poza struktura zdefiniowanych RAMEK.
Znacznik <NOFRAMES> jest pewną alternatywą dla przegląedarek nieobsługujących ramek. Wtedy w oknie przeglądarki wyświetla się treść znajdująca sie pomiędzy tymi znacznikami. Warto zatem cokolwiek tam umieścić, chociażby linki do swojej strony bez ramkowej.
<IMG SRC="logo.jpg" HEIGHT="100" WIDTH="200" ALIGN="CENTER" ALT="jakis napis"> |
Powyzsza linijka kodu wstawia w nasza strone plik graficzny (tutaj logo.jpg)
Poszczegolne opcje:
<A HREF="plik.html" NAME="link"> tekst < /A > |
Powyzszy kod spowoduje pojawienie sie w oknie naszej przegladarki podswietlonego napisu text bedacego linkiem do
pliku plik.html. Mozna takze twozyc linki pomiedzy roznymi czesciami tego samego pliku, do tego sluzy opcja NAME
jezeli jakis link ma nazwe powiedzmy LALA to mozemy sie odwolac do tego miejsca innym linkiem nadajac parametrowi
HREF wartosc : HREF="#LALA".
Zamiast napisu mozna -jako linku - uzyc obrazka:
<A HREF="plik.html" NAME="link"> <img src="guzik.jpg" > < /A > |
Powyzszy kod utworzy link w postaci obrazka (guzik.jpg) do pliku plik.html.
Przy okazji omawiania map obrazowych dowiemy sie, ze jeden obrazek moze byc linkiem do kilku roznych miejsc. Wtedy klikniecie na odpowiednie miejsce na obrazku (z tad bierze sie nazwa mapa) porzeniesiemy sie w odpowiednio okreslone miejsce.
Znacznik < A > moze byc takze celem jakiegos innego linku, sam nie bedac linkiem mianowicie kod:
< A NAME="nazwa" > LALALA < /A> |
sprawi, ze wyraz LALALA bedzie napisany normalna czcianka bez zadnych podkreslen, ale za to jakis inny link bedzie sie mogl odwolac do tego miejsca w dokumencie za pomoca omawianego wczesniej prefiksu #nazwa
<H1 ALIGN="CENTER">naglowek 1 </H1 > |
Jest to znacznik najwiekszego naglowka. Znak naglowka zawiera w sobie przejscie do nowej linii tzn. zaczyna sie od nowej linii oraz pozostala czesc tekstu (grafiki)na stronie takze zaczyna sie od nowej linni Naglowki mozna oczywiscie centrowac, a takze rownac do lewej lub do prawej (ALIGN="RIGHT"(LEFT))
<H6 >naglowek 6 </H6 > |
Jest to ostatni - szosty z kolei naglowek standardowo zdefiniowany w jezyku znacznikow.
Powoduje złamanie linii w miejscu wystąpienia. Tzn. w miejscu wystąpienia znacznika <BR> następuje przejście do nowej linii, czyli tekst (czy inne elementy strony) umieszczone po znaczniku <BR> będą umieszczane od nowej linni.
Znacznik ten pozwala nam w prosty sposob operowac wielkoscia, kolorem i sama czcionka (stylem,fontem):
<FONT COLOR=red SIZE=3 STYLE=Arial>jakis tekst </FONT> |
Oto co dostajemy:
jakis tekst
<B>jakis tekst </B> |
Ten znaczni pogrubia litery znajdujące się pomiędzy znacznikiem otwierający a zamykającym.
<TABLE> tutaj definicja komurek wierszy i ich zawartosci </TABLE> |
Tabele są bardzo przydatne jeżeli chcemy umieścić na stronie cos dokładnie w danym miejscu. Najczęściej stosuje się tabele odpowiedniego komponowania układu strony, tak więc tabele nie są potrzebne tylko do sporządzania jakiś wykazów i przedstawiania konkretnych tabel z danymi, ale są potężnym narzędziem do komponowania całości stron www
<TABLE WIDTH="400" HEIGHT="450" BORDER="2" BGCOLOR="aqua"> ALIGN="center" <TR > <TD> zawartośc 1 komórki </TD> <TD> zawartość drugiej komórki </TD> </TR> </TABLE> |
powyższy kod tworzy tabelę o dwóch komórkach w jednym rzędzie. nadaliśmy także tabeli określoną szerokość i wysokość oraz kolor tła, i grubość ramek (najczęściej daje się wartość zero). Oraz parametr ALIGN="center" centruje całą tabelę. Tabela ta wygląda tak:
zawartośc 1 komórki | zawartość drugiej komórki |