| Składnia Znacznika |
Zastosowanie |
| Znaczniki Sekcji "HEAD" |
| <TITLE> </TITLE> |
dodaje "wyświetla" w pasku górnym strony nadaną przez nas nazwę strony. |
| <META HTTP-EQUIV="content-type" CONTENT=""> |
polecenie jest deklaracją strony kodowej dokumentu. |
| <META NAME ="Description" CONTENT=""> |
polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. |
| <META NAME="Keywords" CONTENT=""> |
polecenie informuje o wyrazach kluczowych dokumentu. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. |
| <META HTTP-EQUIV="Content-Language" CONTENT=""/> |
polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. |
| <META NAME="Author" CONTENT=""> |
polecenie informuje o autorze strony. |
| <META NAME="Generator" CONTENT=""> |
polecenie informuje o użytym narzędziu do tworzenia stron HTML. |
| <META HTTP-EQUIV="Refresh" CONTENT=""> |
polecenie spowoduje regularne odświeżanie strony co x sekund. Może to mieć praktyczne zastosowanie w przypadku, gdy strona zawiera bardzo często aktualizowane informacje (wiele razy dziennie). |
| <META HTTP-EQUIV="Creation-Date" CONTENT=""> |
polecenie informuje o dacie utworzenia dokumentu. |
| Znaczniki Sekcji "BODY" |
| <BODY BACKGROUND=""> |
Parametr pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. |
| <BODY BGCOLOR=""> |
Parametr pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. |
| <BODY TEXT=""> |
Parametr pozwala określić kolor tekstu w dokumencie.UWAGA - wybierając kolor, należy mieć także na uwadze kolor tła. |
| <BODY LINK="" VLINK="" ALINK=""> |
Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. |
| <BODY LEFTMARGIN=""> |
pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o "xx" pikseli w prawo. |
| <BODY TOPMARGIN=""> |
przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o "yy" pikseli w dół. |
| Znaczniki Formatowania Tekstu |
| <H1> </H1> |
Tekst nagłówka "1" |
| <H2> </H2> |
Tekst nagłówka "2" |
| <H6> </H6> |
Tekst nagłówka "6" |
| <B> </B> |
czcionka pogrubiona |
| <I> </I> |
czcionka pochyła |
| <U> </U> |
czcionka podkreślona |
| <TT> </TT> |
pismo maszynowe |
| <SUB> </SUB> |
index dolny |
| <SUP> </SUP> |
index górny |
| <P> </P> |
akapit |
| <P align=""> </P> |
justowanie |
| <P style="text-align:left;"> </P> |
justowanie do lewej strony |
| <P align="RIGHT"> </P> |
justowanie do prawej strony |
| <P style="text-align:center;"> </P> |
justowanie do środka strony |
| <P align="JUSTIFY"> </P> |
justowanie do obu stron (wyrównywanie) |
| <FONT FACE=""> </FONT> |
krój czcionki |
| <FONT SIZE=""> </FONT> |
wielkośc czcionki |
| <FONT COLOR=""> </FONT> |
kolor czcionki ( można wpisac nazwę koloru w języku angielskim lub kod koloru hexadecymalny |
| <BLINK> </BLINK> |
czcionka migająca |
| <STRIKE> </STRIKE> |
czcionka przekreślona |
| <BIG> </BIG> |
duża czcionka (+1 punkt) |
| <SMALL> </SMALL> |
mała czcionka (-1 punkt) |
| <CITE> </CITE> |
cytat |
| <DFN> </DFN> |
definicja, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. |
| <DEL> </DEL> |
pokazuje ono przekreślony fragment tekstu. |
| <INS> </INS> |
gdy chcemy wyraźnie podkreślić jakąś nowość. |
| <STRONG> </STRONG> |
czcionka mocno wyróżniona |
| <EM> </EM> |
czcionka wyróżniona (emfaza) |
| <CODE> </CODE> |
kod (tekst programu) |
| <KBD> </KBD> |
czcionka wprowadzana z klawiatury |
| <SAMP> </SAMP> |
przykład |
| <VAR> </VAR> |
zmienna (słowo kluczowe języka) |
| <PRE> </PRE> |
tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku), pozwala wprowadzać dodatkowe spacje |
| <BLOCKQUOTE> </BLOCKQUOTE> |
bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji. |
| <Q> </Q> |
polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. |
| <ADDRESS> </ADDRESS> |
polecenie jest interpretowane jako kursywa i jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej. |
| Znaczniki Formatowania Wykazów I List |
| <UL> </UL> |
wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego. |
<UL TYPE=disc>
<UL TYPE=circle>
<UL TYPE=square> |
lista nieuporządkowana może dodatkowo zawierać definicję symbolu graficznego |
| <OL> </OL> |
wykaz uporządkowany - służy do sporządzenia wykazu numerowanego |
| <OL START=x> |
parametr START=x pozwala rozpocząć numerowanie listy od x |
<OL TYPE=A>
<OL TYPE=a>
<OL TYPE=I>
<OL TYPE=i>
<OL TYPE=1> |
parametr TYPE=n pozwala określić typ numerowania listy. |
| <DL> </DL> |
lista definicyjna |
| <DT> |
określa punkt listy definicyjnej |
| <DD> |
określa wyjaśnienie terminu listy definicyjnej |
| <LI> |
punkt wykazu |
| Znaczniki Elementów Na Stronie |
| <IMG SRC="xxx.gif" WIDTH=200 HEIGHT=50> |
element graficzny "xxx.gif" długości - 200px, szerokści - 50px |
<IMG SRC="xxx.gif" HSPACE=50>
<IMG SRC="xxx.gif" VSPACE=50> |
parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu. |
<IMG SRC="" align=left>
<IMG SRC="" align=right>
<IMG SRC="" align=top>
<IMG SRC="" align=bottom>
<IMG SRC="" align=middle> |
odrębny, specjalny zespół parametrów, align=\"\", steruje pozycją obrazka w stosunku do oblewającego go akapitu. |
| <MARQUEE> </MARQUEE> |
plywajacy tekst |
| <MARQUEE BEHAVIOR=SCROLL> </MARQUEE> |
powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. |
| <MARQUEE BEHAVIOR=SLIDE> </MARQUEE> |
powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. |
| <MARQUEE BEHAVIOR=ALTERNATE> </MARQUEE> |
powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. |
| <a href=licence.txt> </a> |
wstawiony element w postaci pliku tekstowego |
| Znaczniki Tabel |
| <TABLE> </TABLE> |
ogólne ramy tabeli |
| <TR> </TR> |
wiersz tabeli |
| <TD> </TD> |
komórka w wierszu |
| <TABLE BORDER=""> </TABLE> |
obramowanie tabeli |
| <TABLE BORDER CELLSPACING=""> </TABLE> |
obramowanie komórek tabeli |
| <TABLE BORDER CELLSPACING="" CELLPADDING=""> </TABLE> |
marginesy dla komórek. Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING. |
| <TABLE BORDER WIDTH=""> </TABLE> |
szerokość tabeli |
| <TD WIDTH=""> </TD> |
szerokość komórki |
<TABLE align=right> </TABLE>
<TABLE BORDER=10 align=left> </TABLE> |
parametr align pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu. |
<TD align=center> </TD>
<TD align=left> </TD>
<TD align=right> </TD> |
poziome wyrównanie danych w komórkach |
<TD Valign=top> </TD>
<TD Valign=middle> </TD>
<TD Valign=bottom> </TD> |
pionowe wyrównanie danych w komórkach |
| <TABLE BORDER WIDTH="50%" HEIGHT="30%"> </TABLE> |
możemy zdefiniować nie tylko szerokość, ale i wysokość tabeli |
| <TABLE BORDER BGCOLOR=""> </TABLE> |
kolor tła tabeli |
| <TD BGCOLOR=""> </TD> |
możemy również "pokolorowac" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek. |
| <TABLE BORDERCOLOR=""> </TABLE> |
kolor obramowania tabeli |
| <TABLE BORDERCOLORDARK="" BORDERCOLORLIGHT=""> </TABLE> |
odcień obramowania tabeli |
| Znaczniki Odsyłaczy |
| <A HREF=""> </A> |
ogólna postac odsyłacza |
| <A HREF="http://"> </A> |
odsyłacz do strony www ( zewnętrznej w sieci ) |
| <A HREF="nazwa_strony.html"> </A> |
odsyłacz do strony www ( wewnętrznej, np. na dysku lokalnym ) |
| <A HREF="plik_tekstowy.txt"> </A> |
odsyłacz do pliku tekstowego |
| <A HREF="plik_graficzny.gif"> </A> |
odsyłacz do pliku graficznego |
| <A HREF="plik.mid"> </A> |
odsyłacz do pliku dzwiękowego |
| <A HREF="mailto:nazwa@pl"> </A> |
odyłacz mailowy |
| Znaczniki Formularzy |
| <FORM> </FORM> |
postac ogolna znacznika formularza |
| <FORM ACTION="mailto:mail@pl" METHOD="Post"> </FORM> |
formularz mailowy |
| <FORM><INPUT TYPE="" NAME="" VALUE=""> </FORM> |
służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji. |
| <FORM><SELECT TYPE="" NAME="" VALUE=""> </FORM> |
służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. |
| <FORM><TEXTAREA TYPE="" NAME="" VALUE=""> </FORM> |
jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika. |
| <INPUT TYPE="checkbox" NAME="" VALUE=""> |
TYPE="checkbox" pozwala wprowadzić pole w postaci kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. |
| <INPUT TYPE="radio" NAME="" VALUE="" checked> |
TYPE="radio" pozwala wprowadzić przełącznik (przycisk radiowy). Czytelnik będzie wybierał tylko jedną z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. |
| <INPUT TYPE="submit" VALUE="nazwa"> |
TYPE="submit" służy do wysłania informacji ( np. w postaci przycisku ) |
| <INPUT TYPE="reset" VALUE="Usuń wszystkie informacje"> |
TYPE="reset" spowoduje usunięcie wszystkich danych wpisanych do formularza |
| <BUTTON> Treść przycisku </BUTTON> |
przycisk |
<SELECT NAME="nazwa_listy">
<OPTION>
<OPTION>
<OPTION>...
</SELECT> |
służy do tworzenia rozwijanych menu, zawierających kilka opcji. |
| <TEXTAREA NAME="komentarz" ROWS=10 COLS=50> </TEXTAREA> |
pole wysokości 10 i szerokości 50 |
| Znaczniki Ramek |
| <FRAMESET> </FRAMESET> |
ogólna struktura ramek |
| <FRAMESET COLS="18%,82%"> |
pionowy podział strony na ramki |
| <FRAMESET ROWS="200,*,200"> |
poziomy podział strony na ramki |
| <FRAME SRC="nazwa_pliku.htm"> |
aby przypisać ramce dokument, musimy podać źródło dokumentu. |
| <FRAME SCROLLING=yes> |
jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z suwakami. |
| <FRAME NORESIZE> |
zabezpieczenie ramki przed skalowaniem. |
| FRAMEBORDER = 1 / 0 |
pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. |
| MARGINHEIGHT=x |
wymusza dodatkowy odstęp (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. |
| MARGINWIDTH=x |
wymusza margines lewy i prawy. |
| <NOFRAMES> </NOFRAMES> |
jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce. Posiadacz takij przeglądarki zobaczyłby pustą stronę, gdyby między <NOFRAMES> </NOFRAMES> nie było żadnej informacji. |
| Znaczniki Linii |
| <HR> |
pozioma linia |
| <HR NOSHADE> |
linia pozbawiona cieniowania |
| <HR SIZE=5> |
linia grubosci "5" |
| <HR WIDTH=300> |
linia długości 300 pixeli |
| <HR WIDTH=50%> |
linia długości 50% szerokości strony |
| <HR align=center> |
linia wyśrodkowana |
| <HR COLOR=""> |
linia koloru ... |
| Znaczniki Różne |
| <BR> |
znacznik końca wiersza. |
| <!-- ... --> |
polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie. |
| <DIV> </DIV> |
polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania - środkowanie lub dosunięcie do prawego marginesu. DIV jest często stosowane przy definiowaniu stylów. |
| <FIELDSET> </FIELDSET> |
obramowanie |
| <NOBR> </NOBR> |
niekiedy zdarza się, że jakiś tekst powinien być wyświetlany w jednym wierszu. Aby zapobiec przełamaniu wiersza. |
| <A HREF="" TARGET="_blank"> </A> |
przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki). |
| <A HREF="" TARGET="_self"> </A> |
nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku. |
| <A HREF="" TARGET="_parent"> </A> |
przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu. |
| <A HREF="" TARGET="_top"> </A> |
przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę". |
