Kilka ważnych informacji przed rozpoczęciem przygotowania strony HTML

Pierwszą stronę HTML napiszemy w notatniku, używając tagów (znaczników) języka HTML..
Aby stronę można było oglądać w przeglądarce należy plik w notatniku zapisać z rozszerzeniem nazwa_pliku.html lub nazwa_pliku.htm.
Pierwsza strona powinna mieć nazwę index.html lub index.htm.
Do zapisywania nazw dokumentów nie używamy polskich liter, znaków specjalny oraz spacji, może to spowodować, że dokument nie zostanie odczytany.
Podczas czytania Tagów nie jest rozróżniana wielkość liter.
Zalecane jest stosowanie międzynarodowego, uniwersalnego standardu znaków ISO-8859-2

Dokument HTML zapisany w formacie html jest plikiem tekstowym, można go edytować za pomocą edytora tekstu np. notatnika. Interpretacją poleceń zawartych w dokumencie, zajmuje się przeglądarka internetowa, dzięki której na ekranie wyświetlana jest strona WWW. Przeglądarka rozpoznaje znaczniki jako formę prezentacji treści, które te znaczniki obejmują.

Znacznik języka HTML jest to ciąg znaków objęty nawiasami ostrymi, wielkość liter znaczników jest obojętna. Interpreter (przeglądarka) nie rozróżni tagu <HTML> od <html>, Standardy języka HTML wymagają umieszczania pary znaczników <HTML></HTML>, jednak większość przeglądarek potrafi wyświetlić dokument poprawnie nawet bez tego tagu.
Dokument naszpikowany znacznikami może po jakimś czasie stać się nieczytelny i niezrozumiały dla samego twórcy, który długo do dokumentu nie zaglądał. Dlatego zaleca się umieszczanie komentarzy pomagających "poruszać się" po dokumencie.
Komentarz stanowi część dokumentu, ale nie jest wyświetlany przez przeglądarki. Treść komentarza musi zostać ujęta między znaczniki
< ! - - oraz - - >

< ! - - To jest komentarz - - > to jest przykładowy komentarz.

Większość tagów musi występować parami, jeżeli rozpoczynamy jakiś tag np. tytuł <TITLE> musimy zakończyć go zaraz za tekstem, aby interpreter nie "myślał", że wszystko, co dalej piszemy jest tytułem. Przykładowa para Tagów wygląda następująco:

<TITLE>tekst tytułowy</TITLE>

Dokument HTML musi posiadać strukturę zgodną z ustaleniami W3C.

Podstawowy szkielet dokumentu HTML wygląda następująco:

<HTML>
<HEAD> informacje nagłówkowe</HEAD>
<BODY> treść właściwa strony tak zwane ciało dokumentu</BODY>
</HTML>


<HTML> </HTML>
Są to znaczniki otwierające i zamykające, między nimi jest umieszczana cała treść dokumentu.

<HEAD> </HEAD>
Ta para znaczników jest umieszczana wewnątrz znaczników HTML i zawiera podstawowe informacje o dokumencie, min. tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa.

<BODY> </BODY>
Między tymi znacznikami umieszcza się teść dokumentu, wyświetlaną przez przeglądarkę.

Argumenty znacznika HEAD


Wewnątrz pary znaczników powinno umieścić się szereg innych znaczników zarządzających dokumentem.

Znacznik <TITLE></TITLE> powinien zawierać tytuł strony, który będzie wyświetlany przez przeglądarkę, najczęściej w pasku tytułowym okna

<TITLE>Tytuł naszej strony</TITLE>

Znacznik <META> jest tagiem opcjonalnym, jego użycie nie jest konieczne do poprawnego funkcjonowania strony, ale zaleca się jego stosowanie. Za pomocą atrybutów znacznika META można np. zdefiniować stronę kodową dokumentu, co ułatwi przeglądarce wyświetlanie np. polskich liter. W pewnych przypadkach wartości atrybutów mogą posłużyć serwerowi do bardziej szczegółowego opisania dokumentu.

Najważniejszym zadaniem znacznika META jest deklaracja strony kodowej. Nowsze wersje przeglądarek potrafią automatycznie przełączyć się w odpowiedni dla danego dokumentu tryb kodowania, ale powinno się tego unikać, jawnie określając stronę kodową

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">

Jest to przykład wykorzystania znacznika META.

ISO 8859-2 jest międzynarodowym standardem kodowania polskich znaków, alternatywą jest standard Windows 1250.


Może się zdarzyć ze będziemy potrzebowali, aby nasza strona była regularnie odświeżana przez przeglądarkę w określonym przez nas okresie np., co 15 sekund, wtedy należy użyć znacznika:

<META HTTP-EQUIV="refresh" CONTENT="15"> Jeśli chcemy, aby np. po 15 sekundach załadowała się inna strona należy wprowadzić adres URL jak pokazano poniżej

<META HTTP-EQUIV="refresh" CONTENT="15; URL=http://www.okno.pw.edu.pl ">

Argumenty znacznika BODY

Znacznik <BODY> jest elementem blokowym, w którym znajduje się główna treść dokumentu. Argumenty znacznika <BODY> mogą zadecydować o wyglądzie naszej strony. Dzięki nim możemy wprowadzić bardzo ciekawe urozmaicenia na stronie WWW

Dzięki parametrowi BGCOLOR możemy nadać kolor tła naszej strony, lub ramki

<BODY BGCOLOR="KOLOR"> Kolor może być podany w postaci heksadecymalnej, lub słownie (po angielsku)

<BODY BGCOLOR="red">
<BODY BGCOLOR="#FF0000">

Zamiast tła określonego koloru możemy umieścić na stronie obrazek, w tym celu używamy atrybutu BACKGROUND.

<BODY BACKGROUND ="obrazek.gif">

Atrybut TEXT określa kolor tekstu w całym dokumencie

<BODY TEXT ="green">
<BODY TEXT ="#00FF00">

Przeglądarka Internet Explorer obsługuje jeszcze dwa inne atrybuty, pozwalające ustalić margines górny i margines lewej strony dokumentu

<BODY LEFTMARGIN="wartość">

Zawartość dokumentu zostanie przesunięta od lewej krawędzi strony o wartość atrybutu.

<BODY TOPMARGIN="wartość">

Zawartość dokumentu zostanie przesunięta od górnej krawędzi strony 9-2o wartość atrybutu

W znaczniku <BODY> można zdefiniować kolory HYPERLINKOW (odnośników hipertekstowych),

<BODY LINK="kolor" VLINK="kolor" ALINK="kolor">


Jeżeli chcemy zmienić wielkość lub kolor czcionki używamy tagu <FONT> </FONT>
Znacznik FONT pozwala nam na zmienne parametrów fragmentu tekstu, gdy chcemy żeby był napisany inną czcionką, przy określonej wielkości lub kolorze.
Do zmiany wielkości formatowanego tekstu używamy parametru SIZE

<FONT SIZE="x"> rozmiar tekstu określony wartością x </FONT>

Wielkość tekstu (x) może być z zakresu od 1 do 7
Do zmiany koloru używamy parametru COLOR, wartość jaką posiada parametr color może być zapisana słownie w języku angielskim np. "red", lub w postaci szesnastkowej np. #ff0000. Wielkość liter tradycyjnie nie ma znaczenia.

<FONT COLOR="wartość">ten tekst będzie napisany innym kolorem <FONT>

Aby zmienić czcionkę używamy parametru FACE

<FONT FACE="arial">ten tekst zostanie napisany czcionką arial</FONT>
<FONT FACE="times">ten tekst zostanie napisany czcionką times</FONT>

Wszystkie parametry można łączyć ze sobą, tworząc jeden tag określający rodzaj czcionki, jej kolor i wielkość

<FONT COLOR="red" FACE="arial" SIZE="7">tekst objęty regułą</FONT>

Dla zwiększenia przejrzystości tekstu, niekiedy należy coś pogrubić lub użyć czcionki pochyłej. Służą do tego odpowiednie komendy, które możemy wstawić przed wybrany fragment tekstu np. wyraz lub cały akapit,

<B></B> - pogrubia tekst
<I></I> - pochyla tekst
<U></U> - podkreśla tekst
<STRIKE></STRIKE> - przekreśla tekst
<BIG></BIG> - powiększa tekst
<SMALL></SMALL> - pomniejsza tekst
<SUB></SUB> - tekst pisany niżej
<SUP></SUP> - tekst pisany wyżej

Tekst może zostać wyrównany do, lewej lub prawej strony, może zostać wyśrodkowany lub wyjustowany
Używamy w tym celu polecenia <div align="wartość">:

<div align="left">tekst wyrównany do lewej </div>
<div align="center">tekst wyrównany do środka</div>
<div align="right">tekst wyrównany do prawej </div>
<div align="justify">tekst wyjustowany</div>

Jeżeli chcemy, aby nasz tekst zaczynał się od nowej linii i w notatniku wprowadzimy "enter", tekst i tak zostanie wyświetlony w tej samej linii. Interpreter odwołuje się tyko do znaczników zawartych w dokumencie, więc teoretycznie możemy napisać nasz dokument w jednej linii odpowiednio dobierając tagi a strona HTML wyświetlona przez przeglądarkę będzie sformatowana poprawnie. Aby poprawnie rozdzielić akapity należy użyć tagu <p></p>

Wstawianie interlinii pomiędzy tekst

pierwsza linia tekstu
<p>druga linia tekstu, oddzielona interlinią</p>

Powyższy przykład wygląda nastepująco:

pierwsza linia tekstu

druga linia tekstu, oddzielona interlinią


Jeżeli chcemy przejść do następnej linii, za wyrazem, który ma kończyć linie wstawiamy znacznik <BR>

pierwsza linia tekstu<BR>
druga linia tekstu

powyższy zapis zostanie zinterpretowany w nastepujący sposób

pierwsza linia tekstu
druga linia tekstu

Wypunktowanie nieuporządkowane
Aby wypunktować tekst, musimy zbudować szkielet <UL></UL>
Dopiero między tymi tagami możemy wstawić znaczniki powodujące wypunktowanie tekstu

<UL>
<LI>pierwsza linia tekstu</LI>
<LI>druga linia tekstu</LI>
</UL>



wynik takiego zapisu będzie następujący

tag <UL> może zawierać definicję znaku graficznego

<UL TYPE=disc>
<LI>pierwsza linia tekstu</LI>
<LI>druga linia tekstu</LI>
</UL>


<UL TYPE=circle>
<LI>pierwsza linia tekstu</LI>
<LI>druga linia tekstu</LI>
</UL>

 

 

<UL TYPE=square>
<LI>pierwsza linia tekstu</LI>
<LI>druga linia tekstu</LI>
</UL>

Wypunktowanie uporządkowane

W celu użycia z wypunktowania liczbowego musimy skorzystać z szkieletu <OL></OL>

<OL>
<LI>pierwsza linia tekstu</LI>
<LI>druga linia tekstu</LI>
</OL>

 

  1. pierwsza linia tekstu
  2. druga linia tekstu

Możliwe jest rozpoczęcie numerowania od konkretnej wartości, służy do tego parametr START.

<OL START=x>

x - wartość początkowa (startowa) numeracji

<OL START=5>
<LI>pierwsza linia tekstu</LI>
<LI> druga linia tekstu </LI>
</OL>
  1. pierwsza linia tekstu
  2. druga linia tekstu

Język HTML daje nam możliwość wypunktowania nie tylko liczbami, ale również literami lub cyframi arabskimi. Służy do tego parametr TYPE

<OL TYPE=1> numeracja według liczebników arabskich.
<OL TYPE=A> numeracja według wielkich liter.
<OL TYPE=a> numeracja według małych liter.
<OL TYPE=I> numeracja według wielkich liczebników rzymskich.

Numeracje uporządkowane i nieuporządkowane można łączyć, tworzyć wariacje:

<OL>
<LI>punkt1</LI>
<UL TYPE=square>
<LI>podpunkt 1.1</LI>
<LI>podpunkt 1.2</LI>
</UL>
<LI>punkt 2</LI>
<UL TYPE=circle>
<LI>podpunkt 2.1</LI>
<LI>podpunkt 2.2</LI>
</UL>
<LI>punkt 3 </LI>
<OL TYPE=a>
<LI>podpunkt 3.1 </LI>
<LI>podpunkt 3.2 </LI>
</OL>
</OL>


Wynikiem interpretacji takiego zapisu będzie wyświetlenie następującej informacji.

  1. punkt1
  2. punkt 2
  3. punkt 3
    1. podpunkt 3.1
    2. podpunkt 3.2

linie

W większości przypadków tekst stanowi przeważającą zawartego w dokumencie część przekazu dokumentu. Tego typu strony bardo źle się czyta. Warto zatem pomyśleć o rozbiciu tekstu na mniejsze fragmenty. Dobrym rozwiązaniem tego problemu jest wykorzystanie do podziału strony linii poziomych, dzięki którym tekst stanie się bardziej przejrzysty.

Aby wprowadzić linię poziomą należy skorzystać ze znacznika <HR>

Sposób wyświetlania linii jest zależny od przeglądarki, większość przeglądarek obsługuje ten znacznik bez problemów. Niestety niektóre przykłady atrybutów mogą zadziałać tylko w przeglądarce Internet Explorer.

Linie rysowane są przestrzennie, aby pozbyć się cienia pod liną należy skorzystać ze znacznika NOSHADE

<HR NOSHADE>


Atrybut SIZE służy do zwiększania rozmiaru (grubości) linii

<HR SIZE="1">


<HR SIZE="5">



<HR SIZE=10>



Możliwa jest regulacja długości linii, w tym celu używa się atrybutu WIDTH (długość), Długość linii może być względna i bezwzględna

Długość linii można określić za pomocą pikseli, wtedy długość linii będzie taka sama, bez względu na wielkość okna przeglądarki

<HR WIDTH="50">



<HR WIDTH="500">



W przypadku określenia długości linii w jednostkach względnych uzależniamy długość odcinka od rozmiaru okna przeglądarki

<HR WIDTH="6%">


<HR WIDTH="55%">



Standardowo linia umieszczana jest na środku okna, ale dzięki parametrowi ALIGN można to zmienić

<HR WIDTH=50% align=left>



<HR WIDTH=50% align=center>



<HR WIDTH=50% align=right>


Obraz

Grafika stanowi bardzo ważny element na stronach WWW, urozmaica wygląd strony, uprzyjemnia pracę w sieci i przyczynia się do profesjonalnego wyglądu strony. Nadmiar grafiki może jednak spowodować bałagan na stronie lub ja przeciążyć tak, że będzie otwierała się bardzo długo.
Najczęściej spotykanymi elementami graficznymi są to pliki JPEG (Joint Photographic Experts Group) i GIF (Graphic Interchange Format),większość przeglądarek obsługuje format BMP (Bitmap), ze względu na wielkość plików, odradza się jego stosowanie

Podstawowa konstrukcja umieszczania plików graficznych na stronach na postać

<IMG SRC="nazwa.rozszerzenie">

IMG (Image) obraz
SRC (Source) źródło

<IMG SRC="obrazek.gif">

Powyższy zapis będzie zinterpretowany następująco:



Parametr ALIGN służy do określania rozmieszczenia teksu wokół obrazka.

<IMG SRC="obrazek.gif" align="top">

Tekst umieszczony przy górnej krawedzi obrazka.

<IMG SRC="obrazek.gif" align="left">

Tekst
umieszczony
obok
obrazka

<IMG SRC="obrazek.gif" align="right">


Tekst
umieszczony
obok
obrazka

<IMG SRC="obrazek.gif" align="middle">

Tekst umieszczony pośrodku obrazka

<IMG SRC="obrazek.gif" align="bottom">

Tekst umieszczony przy dolnej krawędzi obrazka.

W celu rozmieszczenia obrazka na środku należy objąć go znacznikiem <CENTER></CENTER>

<CENTER><IMG SRC="obrazek.gif" ><CENTER>


Jeżeli okaże się, że obrazek jest zbyt mały lub zbyt wąski można regulować jego wielkość za pomocą parametrów WIDTH (szerokość) oraz HEIGHT (wysokość). Należy jednak pamiętać, że jakość obrazka pogarsza się wraz z jego powiększaniem

<IMG SRC="obrazek.gif" height="500" width="100">

<IMG SRC="obrazek.gif" height="130" width="80">


Filmy

Oprócz plików graficznych można umieszczać na stronach WWW pliki wideo. Przeglądarką obsługującą takie pliki jest Internet Explorer (tylko filmy z rozszerzeniem AVI).

<IMG DYNSRC="film.avi">

Aby uniknąć sytuacji, w której czytelnik naszej strony korzysta z innej przeglądarki niż Internet Explorer i nie będzie mógł zobaczyć, filmu można dodać odpowiedni parametr, który w to miejsce wstawi obrazek.

<IMG DYNSRC="film.avi" SRC="obrazek.gif>

Przeglądarka Internet Explorer, po napotkaniu na parametr DYNSRC odtworzy film, natomiast inne przeglądarki postąpią odwrotnie, czyli najpierw będą szukały parametru SRC gdyż DYNSRC nie jest im znany.

Dźwięk

Za pomocą znacznika <BGSOUND> można umieści na stronie WWW plik muzyczny. Znacznik działa tylko w przeglądarce Internet Explorer. Obecnie przeglądarka firmy Microsoft jest w stanie odtworzyć pliki audio następujących formatów: *.wav, *.mp3, *.mid

<BGSOUND SRC="audio.wav">

Plik audio zostanie odtworzony tylko raz przy pierwszym otworzeniu strony lub po jej odświeżeniu. Aby plik był odtwarzany cyklicznie, lub określoną liczbę razy należy skorzystać z atrybutu LOOP

<BGSOUND SRC="audio.wav" LOOP=5>

ZOBACZ PRZYKŁAD

Plik zostanie odtworzony pięć razy

<BGSOUND SRC="audio.wav" LOOP=infinite>

Plik będzie odtwarzany w nieskończoność (do zamknięcia strony)




Elementem często używanym na stronach WWW jest tabelka. Oprócz standardowych zastosowań (umieszczanie informacji w odpowiednich polach) tabelką możemy się posłużyć w celu odpowiedniego rozmieszczenia elementów na stronie WWW. Siatka tabeli w taki przypadku może być niewidoczna
Wstawienie każdej tabeli rozpoczyna się od TABLE, tag TABLE ma parametr BORDER, służy do określenia grubości ramki. Jeżeli nie użyjemy tego parametru, bądź będzie miał on wartość 0, obramowania tabeli nie będzie widać.
Weźmy pod uwagę następujący zapis w dokumencie HTML:

<TABLE>
<TR>
<TD>element1</TD>
<TD>element2</TD>
<TD>element3</TD>
<TR>
<TD>element4</TD>
<TD>element5</TD>
</TABLE>


Wynikiem takiego zapisu będzie wyświetlenie w przeglądarce odpowiedniego układu elementów

element1 element2 element3
element4


znacznik <TR> definiuje jeden wiersz tabeli
znacznik <TD> definiuje komórkę tabeli

Przeglądarki automatycznie określają szerokość tabeli na taką wielkość, aby mogła zostać poprawnie wyświetlona zawartość komórek. Aby zwiększyć szerokość tabeli należy skorzystać z parametru WIDTH
Wartość atrybutu WIDTH, może być liczba całkowitą określająca szerokość tabeli w pikselach, albo wartością procentową, obliczaną względem szerokości ekranu

Przykład tabeli, szerokość określona wartością całkowitą:

<TABLE WIDTH="264">

 



oraz szerokość określona za pomocą wartości procentowej

<
TABLE WIDTH="30%">

 



Jeżeli wprowadzimy parametr BORDER=x pojawi się obramowanie tabeli o grubości odpowiadającej wartości parametru "x"

<TABLE BORDER=1>
<TR>
<TD>element1</TD>
<TD>element2</TD>
<TD>element3</TD>
<TR>
<TD>element4</TD>
<TD>element5</TD>
</TABLE>


Przeglądarka zinterpretuje ten zapis następująco,

element1 element2 element3
element4 element5  


Tabela często jest używana do rozmieszczania tekstu i obrazków na stronach WWW, wystarczy przypisać zerową wartość parametrowi "BORDER=0" lub w ogóle go nie podawać, aby obramowanie tabelki w ogóle nie było widoczne. Tabela znakomicie nadaje się do wyróżnienia tekstu na stronie poprzez zmianę koloru tła w komórkach, w których tekst jest umieszczony. Do zmiany koloru tła tabeli służy parametr BGCOLOR

<TABLE BGCOLOR=red>
<TR>
<TD>przykładowy tekst na czerwonym tle</TD>
</TABLE>


wynikiem umieszczenia takiego zapisu będzie wyświetlanie obrazu:

przykładowy tekst na czerwonym tle

Tabelka może posiadać kolorowe obramowania. Do ustalenia koloru obramowania służy parametr BORDERCOLOR.

<TABLE WIDTH="55%" BORDER="1" BORDERCOLOR="#FF0000">
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>

&nbsp - twarda spacja

 


Aby uzyskać tabelkę z większym, lub mniejszym odstępem między liniami obramowania, należy użyć parametru CELLSPACING

<TABLE WIDTH="55%" BORDER="1" cellspacing="0" BORDERCOLOR="#FF0000">
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>

 

<TABLE WIDTH="55%" BORDER="1" cellspacing="8" BORDERCOLOR="#FF0000">
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>

 


Odsyłacze, czyli inaczej hyperlinki, są najczęściej spotykanym elementem aktywnym na stronach WWW.
Dzięki odsyłaczom możemy poruszać się pomiędzy plikami zawartymi na naszym serwerze oraz stworzyć połączenia ze stronami znajdującymi się w innych serwisach.
Hyperlinki pozwalają na odtworzenie pliku multimedialnego.
Odsyłacze można porównać do spisu treści. Dobrym przykładem jest nasz podręcznik, którego odnośniki do lekcji, czy segmentu są odnośnikami do konkretnych grup informacji. Gdyby nie linki cały podręcznik musiałby być jedną stroną, co bardzo utrudniłoby jego czytanie i wyszukiwanie poszczególnych partii materiału byłoby bardzo niewygodne

Do umieszczenia linku na stronie służy komenda <a></a> z parametrem HREF lub NAME


Konstrukcja odsyłaczy wygląda następująco:

<a PARAMETR="miejsce odniesienia">Tekst który należy kliknąć</a>

Miejsce odniesienia należy umieszczać w cudzysłowie.


Pierwszym z parametrów, który należy omówić jest NAME, dzięki niemu możemy stworzyć spis treści, i poruszać się dynamicznie po jednej stronie

Załóżmy ze nasza strona nazywa się index.html i musimy umieścić na niej bardzo dużą ilość tekstu podzielonego tematycznie i chcemy dać czytelnikowi możliwość obejrzenia wybranego tematu bez potrzeby przewijania całej strony w poszukiwaniu odpowiednich informacji.
Wewnątrz tekstu tworzymy tzw. Kotwice, dzięki nim, posługując się parametrem HREF dostaniemy się do wskazanego miejsca w dokumencie

SPIS TRESCI
<a HREF="pierwszy">Pierwszy temat</a>
<a HREF="drugi">Drugi temat</a>
<a HREF="trzeci">Trzeci temat</a>


<a NAME=index.html#pierwszy>Pierwszy temat</a>
Tu umieszczamy tekst pierwszego tematu

<a NAME=index.html#drugi>Drugi temat </a>
Tu umieszczamy tekst drugiego tematu

<a NAME=index.html#trzeci>Trzeci temat</a>
Tu umieszczamy tekst trzeciego tematu

Wynikiem takiego zapisu będzie wyświetlenie poniższego przykładu.

ZOBACZ PRZYKŁAD

Ten sam tekst możemy podzielić na oddzielne strony, i każdy z tematów umieścić na jednej z nich, takie rozwiązanie ułatwi czytelnikowi przeglądanie dokumentu
Załóżmy ze nasza strona ze spisem treści nazywa się index.html, a poszczególne tematy mają nazwy 1.html, 2.html, 3.html

SPIS TRESCI

<a HREF="1.html">Pierwszy temat</a>
<a HREF="2.html">Drugi temat</a>
<a HREF="3.html">Trzeci temat</a>

 

Jeżeli nasze pliki na serwerze będą umieszczone w katalogach, przy pisaniu odsyłaczy oczywiście trzeba to uwzględnić. Powyższy przykład dotyczy plików zapisanych w tym samy katalogu.
Załóżmy, że pliki 1.html, 2.html, 3.html chcemy przechowywać w katalogu "pliki"
Tworząc odsyłacze będziemy musieli podać ścieżkę dostępu do tego pliku w sposób następujący

<a HREF=pliki/1.html>Pierwszy temat</a>
<a HREF=pliki/2.html>Drugi temat</a>
<a HREF=pliki/3.html>Trzeci temat</a>

 

Może się zdarzyć, że chcemy do odsyłacza hypretekstowego podpiąć plik, który znajduje się w katalogu równorzędnym

<a HREF=../pliki/1.html>Pierwszy temat</a>
<a HREF=../pliki2.html>Drugi temat</a>
<a HREF=../pliki/3.html>Trzeci temat</a>

bądź nadrzędnym

<a HREF=../../pliki/1.html>Pierwszy temat</a>
<a HREF=../../pliki2.html>Drugi temat</a>
<a HREF=./../pliki/3.html>Trzeci temat</a>

" ../ " powoduje wyjście o jeden poziom wyżej w strukturze katalogów

Jeżeli chcemy umieścić na naszej stronie link do jakiś innej strony WWW należy wpisać w kodzie dokumentu jego URL

<a HREF="http://www.okno.pw.edu.pl">Strona do OKNA</a>

URL - jednolity lokalizator zasobu. Każdy dokument w Internecie posiada niepowtarzalny adres URL, składnia tego adresu wygląda następująco

Protokół://nazwa_serwera_i_jego_domena/nazwa_pliku

http://www.okno.pw.edu.pl/index.html


Jeżeli chcemy, aby podlinkowana strona po kliknięciu na odpowiadający jej hyperlink wyświetliła się w nowym oknie musimy skorzystać z parametru TARGET

<a PARAMETR="miejsce odniesienia" TARGET="wartość">Tekst, który należy kliknąć</a>

parametr TARGET może przyjmować następujące wartości


Dzięki linkom możemy, podąć ścieżkę dostępu, ułatwić osobom odwiedzającym strony dotarcie np. do pliku MP3 lub GIF

<a HREF="muzyka.mp3">PLIK MP3</a>
<a HREF="obrazek.gif">OBRAZEK GIF</a>

Odsyłacze to nie tylko odnośniki do stron lub plików, hyprelink może wskazywać na adres e-mail, ułatwiając napisanie listu
Poniższa konstrukcja pokazuje sposób tworzenia takiego odnośnika

<a HREF="mailto:login@domena.pl>Tekst do kliknięcia</a>

Jeżeli chcemy, aby wysłany mail przychodził do nas z odpowiednim tytułem należy dodać:

<a HREF="mailto:login@domena.pl?subject=temat maila>Tekst do kliknięcia</a>

Jeżeli tworzymy stronę wspólnie z kimś i chcemy, aby miale od czytelników docierały do obydwu autorów musimy skorzystać z następującego zapisu:

<a HREF="mailto:login1@domena.pl?cc=login2@domena.com?subject=maile od czytelników strony>Tekst do klikniecia</a>

Bardzo ważną konstrukcją, pojawiająca się w dokumentach HTML są formularze. Umożliwiają one interakcję pomiędzy serwerem WWW i odwiedzającymi strony.
Formularz pozwala na umieszczenie danych, które zostaną wysłane bezpośrednio do serwera, bądź do autora strony za pomocą poczty e-mail.
Dzięki formularzom użytkownik może komunikować się z bazą danych, wysyłając zapytanie do serwera bazo danowego.

Tworzenie pola formularza zaczynamy od pary tagów FORM. Miedzy tymi znacznikami będziemy umieszczać inne tagi formularza, znacznik FORM na dwa parametry: ACTION i METHOD. Atrybut ACTION wskazuje na adres URL aplikacji przetwarzającej dane formularza. Do określania metody przesyłania danych z formularza używamy atrybutu METHOD. Metody są dwie POST i GET.
W przypadku zastosowania metody POST przeglądarka wysyła dane w dwóch etapach:

pierwszy etap - komunikacja z URL wskazanym w atrybucie ACTION
drugi etap - po ustaleniu połączenia dane wysyłane są z wykożystaniem oddzielnej transmisji.

W metodzie GET nawiązanie połączenia i wysłanie danych odbywa się w jednym etapie.
Załóżmy, że chcemy aby dane umieszczone w formularzu były wysłane do naszej skrzynki pocztowej. W tym celu należy parametrowi ACTION przypisać odpowiednią wartość.

<FORM ACTION="mailto:mój_e-mail@domena.pl>
</FORM>

Parametrowi METHOD należy przypisać wartość wysłania.

<FORM ACTION="mailto:mój_e-mail@domena.pl" METHOD="POST">
</FORM>,

Do do tego zapisu można dodać jeszcze parametr SUBJECT, który ustali temat maila. Ułatwi nam to segregacje maili otrzymywanych z poszczególnych formularzy

<FORM ACTION="mailto:mój_e-mail@domena.pl?subject=temat formularza" METHOD="POST">
</FORM>

Tak wysłany tekst z formularza nie bedzie czytelny. Otrzymamy go w postaci zakodowanej.
Przeglądarka przed wysłaniem danych koduje je tak, aby nie uległy przekłamaniu w czasie przesyłania. Od serwera zależy czy dane zostaną rozkodowane czy przesłane dalej w postaci niezmienionej. Aby dotarły do nas dane w postaci rozkodowanejj należy użyć opcjonalnego parametru ENCTYPE o wartości text/plain.


<FORM ENCTYPE="text/plain" ACTION="mailto:mój_e-mail@domena.pl?subject="temat formularza" METHOD="POST">
</FORM>

Podstawowym tagiem, którego używa się przy tworzeniu formularza jest znacznik INPUT, pozwala on użytkownikowi na wprowadzanie tekstu, lub wybór jednej z dostępnych opcji.
INPUT posiada cztery parametry TYPE, NAME, VALUE, MAXLENGTH

<INPUT TYPE="typ formularza" NAME="nazwa" VALUE="wartość" MAXLENGTH="ilość liter do wpisania">

TYPE

Parametr TYPE pozwala na wybór typu, jaki ma przyjąć element formularza

TYPE=text

W tym wypadku nie musimy podawać wartości VALUE,



TYPE=radio


W celu umożliwiena czytelnikowi wyboru tylko jednego wariantu musimy pamiętać aby wartość parametru NAME była taka sama przykażdej przewidywanej opcji wyboru, w innym wypadku będzie można wybrać kilka opcji. Efekt wykorzystania wartości RADIO jest pokazany poniżej

Ile masz lat ?

 

10-20
21-30

 

Jeśli zaznaczamy jedną z pozycji to przy innej opcji znika zaznaczenie. Musimy pamiętać że parametr NAME musi we wszystkich przypadkach mieć tę samą wartość.


<FORM ACTION="mailto:mój_e-mail@domena.pl METHOD="post">
ILE MASZ LAT ?
<INPUT TYPE="radio" NAME="lata" VALUE="10-20">10-20<br>
<INPUT TYPE="radio" NAME="lata" VALUE="21-30">21-30<br>
<INPUT TYPE="radio" NAME="lata" VALUE="31-40">31-40<br>
</FORM>

Wynikiem takiego zapisu będzie udostepnienie nastepujących pól wyboru.

ILE MASZ LAT ?

10-20
21-30
31-40

Jeśli chcemy, aby jedno z pól od razu było zaznaczone dopisujemy parametr opcjonalny CHECKED

ILE MASZ LAT ?

10-20
21-30
31-40

 

TYPE=checkbox

Wartość checkbox umożliwia wstawienia pola kwadratu, które po kliknięciu zaznaczy się, a po ponownym kliknięciu zaznaczenie zniknie, pozwala to czytelnikowi na wybranie jednej lub wielu opcji w zależności od tego jak stworzymy formularz.
Poniższy kod i przykład obrazują zastosownie tego typu elementów w polach formularzy

<FORM ACTION="mailto:mój_e-mail@domena.pl METHOD="post">
SKĄD POCHODZISZ ?
<INPUT TYPE="checkbox" NAME="pochodzenie" VALUE="Polska"> Polska <br>
<INPUT TYPE="checkbox" NAME="pochodzenie" VALUE="Niemcy"> Niemcy <br>
<INPUT TYPE="checkbox" NAME="pochodzenie" VALUE="Francja"> Francja <br>
</FORM>

SKĄD POCHODZISZ ?

Polska
Niemcy
Francja

 


Jeśli chcemy, aby czytelnik wysłał do nas formularz z danymi musimy mu dąć taka możliwość najczęściej spotykanym elementem do wysłania formularza jest porostu guzik (button).

<INPUT TYPE="submit" VALUE="Wyślij informacje">

 


Obok tego guzika powinien znaleźć się inny button, jeżeli czytelnik rozmyśli się i będzie chciał wypełnić pola od nowa wystarczy ze kliknie w guzik typu reset

<INPUT TYPE="reset" VALUE="Usuń informacje">

 

Ostatnią wartością parametru TYPE, którą omówimy jest hidden, w wyniku jej użycia otrzymujemy pole ukryte. Pola ukryte to takie, których wartości przeglądarka lub użytkownik nie mogą usunąć, zignorować, zmodyfikować.
Pola ukryte nie są widoczne w przeglądarce, ale wysyłane jak każdy inny element INPUT

<INPUT TYPE="hidden" NAME="nazwa" VALUE="wartość">

Kolejnym istotnym znacznikiem jest SELECT, tag ten służy do tworzenia rozwijanych pól wyboru.

<SELECT NAME="nazwa pola">
<OPTION> pierwsze pole wyboru</OPTION>
<OPTION> drugie pole wyboru</OPTION>
<OPTION> trzecie pole wyboru</OPTION>
</SELECT>

 

Jeżeli chcemy, aby na stronie w polu wyboru wyświetlonych było więcej linii (odpowiadających poszczególnym opcjom wyboru) należy dodać parametr SIZE.

<SELECT NAME="nazwa pola" SIZE="2">
<OPTION> pierwsze pole wyboru</OPTION>
<OPTION> drugie pole wyboru</OPTION>
<OPTION> trzecie pole wyboru</OPTION>
</SELECT>

 

Dla umorzliwienia użytkownikowi formularza napisania dłuższego komentarza, należy skorzystać ze znacznika TEXTAREA. Jest on wygodniejszy od wspomnianego wcześniej tagu TYPE=text. Rozplanowanie ramki dla umieszczania komentarza oraz wprowadzanie nieograniczonej ilości znaków. Wielkość pola tekstowego można ustalić za pomocą parametrów cols i rows. Parametry te informują przeglądarkę o zaplanowanej ilości wierszy i kolumn pola tekstowego.

<TEXTAREA cols=20 rows=7>


Od czasu wprowadzenia drugiej wersji Netscape Navigator rynek, wyswietlanie ramek przestało być problemem dla przeglądarek. Ramki zyskały popularność. Bardzo szybko zostały wykorzystane w przeglądarce INTERNET EXPLORER firmy MICROSOFT, w której rozszerzono ich możliwości wykorzystania.

Czym są ramki ? Niczym innym jak jedną stroną podzieloną na kilka mniejszych okien posiadających cechy niezależnej strony. Ramki tworzy się w dokumencie o specyficznej konstrukcji, zawartość pliku opisującego układ i wielkość ramek nie jest wyświetlana. Główne okno dzieli się na kolumny i rzędy zdefiniowane w głównym dokumencie. W ramkach wyświetlane są dokumenty wskazane przez autora strony

Do stworzenia dokumentu opartego na ramkach wystarcza trzy znaczniki <FRAMESET></FRAMESET>, <FRAME></FRAME>, <NOFRAMES></NOFRAMES>
Strona oparta na ramkach wymaga stworzenia dokumentu, w którym zostaną one zdefiniowane.

Szkielet głównego dokumentu:

<FRAMESET rows="*" cols="30%,*,30%">
<!- dzięki parametrom cols i rows ustalamy ile chcmy mieć ramek na stronie w naszym przypadku będą to trzy pionowe ramki lewa i prawa, zajmujące 30% wielkości ekranu oraz środkową zajmującą pozostały obszar -->

<FRAME src="1.html">
<!- jeśli stworzymy stronę o nazwie 1.html wyświetli się ona w lewej ramce -->

<FRAME src="2.html" name="cialo">
<!- poprzez nadanie parametru NAME można zrobić link do konkretnej ramki np.
jeśli w lewej ramce czyli 1.html utworze link <a href="http://www.okno.pw.edu.pl" target="cialo">LINK DO OKNA</a> strona okna wyświetli się w środkowej ramce -->

<FRAME src="3.html" scrolling=no>
<!- parametrem SCROLLING ustawiamy czy ramka ma mieć pasek przewijania czy nie -->

</FRAMESET>

<NOFRAMES>
<! - Miedzy tymi znacznikami umieszczamy treść która zostanie wyświetlona w przeglądarce która nie obsługuje ramek -- >
</NOFRAMES>


ZOBACZ PRZYKŁAD