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ę". |