STRUKTURA DOKUMENTU HTML
<HTML>
<HEAD>
<!-- sekcja nagłówka dokumentu -->
<META http-equiv=”content-type” content=”text/html;charset=iso-8859-2”>
<TITLE> tytuł strony (widoczny w pasku tytułu przeglądarki) </TITLE>
</HEAD>
<BODY>
<!-- sekcja BODY to właściwa treść (ciało) dokumentu -->
</BODY>
</HTML>
Wybrane encje (dla strony kodowej Iso-8859-2)
znak |
encja (nazwa znaku) |
twarda spacja |
|
© |
© |
® |
® |
÷ |
÷ |
→ |
→ |
← |
← |
↑ |
↑ |
↓ |
↓ |
↔ |
↔ |
« |
« |
» |
» |
§ |
§ |
SEKCJA BODY w dokumencie HTML
<BODY BGCOLOR=”kolor”> |
określa kolor tła dokumentu |
<BODY BACKGROUND=”nazwa_pliku”> |
określa obrazek, który stanowić będzie tło dokumentu HTML |
<BODY TEXT=”kolor”> |
określa kolor tekstu w dokumencie |
Czcionki w dokumencie HTML:
<FONT SIZE=”n”> </FONT> |
określa wielkość czcionki dokumentu ( n =1,...7 ) |
<FONT FACE=”nazwa_kroju”> </FONT> |
pozwala określić krój czcionki danego fragmentu HTML |
<FONT COLOR=”kolor”> </FONT> |
określa kolor czcionki danemu fragmentowi dokumentu |
Znaczniki czcionek: |
|
<B></B> tekst pogrubiony |
<I></I> tekst pochylony |
<U></U> tekst podkreślony |
<STRIKE> </STRIKE> tekst przekreślony |
<SUP> </SUP> indeks górny |
<SUB> </SUB> indeks dolny |
Formatowanie bloków i linii
<Hx TITLE=”informacja”></Hx> |
określa rozmiar tytułu x=1,...6 z „dymkiem” informacji |
<Hx ALIGN= CENTER></Hx> <Hx ALIGN= RIGHT></Hx> <Hx ALIGN= LEFT></Hx> |
określa tytuł danego stopnia wyśrodkowany określa tytuł danego stopnia justowany do prawego marginesu określa tytuł danego stopnia justowany do lewego marginesu |
Znaczniki akapitów i końca wiersza: |
|
<P> </P> akapit domyślnie wyrównany do lewego marginesu |
<BR> znacznik końca wiersza |
<P ALIGN=RIGHT></P> akapit wyrównany do prawego marginesu |
<P ALIGN=JUSTIFY></P> akapit wyjustowany do obu marginesów |
<CENTER> tekst lub grafika </CENTER> wyśrodkowanie tekstu lub grafiki |
|
Znaczniki linii: |
|
<HR> linia pozioma na szerokość całej strony |
<HR SIZE=n> linia pozioma o grubości n pikseli <HR COLOR=”kolor” określa kolor linii poziomej |
<HR WIDTH=n> linia pozioma o długości n pikseli lub <HR WIDTH=n%> w procencie szerokości strony |
|
<HR ALIGN=położenie> gdzie położenie = LEFT oznacza justowanie linii do lewego brzegu strony, CENTER - umieszczenie na środku, RIGHT - justowanie linii do prawego brzegu strony |
Listy wypunktowane i numerowane:
Wykaz nienumerowany: |
Wykaz numerowany: |
<UL> <LI> pierwszy element </LI> <LI>drugi element</LI> </UL> |
<OL> <LI> pierwszy element </LI> <LI>drugi element</LI> </OL> |
typy wypunktowań: <UL TYPE=circle> <UL TYPE=square> |
typy numerowania: <OL TYPE = x gdzie x może być równe A, a, I, i <OL START=x > początek listy numerowanej |
Wstawianie grafiki do dokumentu
<IMG SRC=”plik_graficzny” WIDTH = x HEIGHT= y BORDER = n ALT=”informacja”> |
WIDTH określa wysokość, zaś HEIGHT szerokość obrazka. Parametr BORDER pozwala wyświetlić wokół obrazka obramowanie o grubości n pikseli. Informacja podana w parametrze ALT wyświetlana jest po skierowaniu kursora myszy na dany obrazek. |
Animacja Marquee
<MARQUEE BEHAVIOR = x DIRECTION = y BGCOLOR=”kolor” LOOP=n>tekst animacji </MARQUEE> |
Parametr BEHAVIOR określa sposób poruszania się tekstu i może przyjmować wartości: x=SCROLL, SLIDE oraz ALTERNATE. Parametr DIRECTION wyznacza początkowy kierunek ruchu (y=LEFT, RIGHT). Kolor drogi, po której porusza się napis wyznacza parametr BGCOLOR. Parametr LOOP pozwala powtórzyć ruch tekstu n razy i zatrzymać się. |
Odsyłacze
Etykiety: <A NAME=”nazwa_etykiety”></A> Odsyłacze do etykiet na określonej stronie: <A HREF = ”strona.htm#nazwa_etykiety”> tekst </A> Odsyłacze do etykiet na tej samej stronie: <A HRE =”#nazwa_etykiety”> tekst </A> Uwaga: Wielkość liter w nazwie etykiety jest ważna!!! |
Odsyłacze: Odsyłacz do innej strony HTML: <A HREF = ”nazwa_strony.htm”> tekst </A> Odsyłacz do witryny www w Internecie: <A HREF = ”adres_witryny www”> tekst </A> Odsyłacz do pliku: <A HREF = ”nazwa_pliku”> tekst </A> Odsyłacz do poczty elektronicznej danej osoby: <A HREF = mailto:adres-e-mail-osoby> tekst </A> |
Tabele w dokumentach HTML
<TABLE> </TABLE> |
ogólne ramy tabeli |
W ramach tabeli tworzy się znacznikami <TR> </TR> jej wiersze. Komórki w obrębi wierszy definiuje się znacznikami <TD> </TD>. Przykład: <TD> <TR> <TD> a1</TD> <TD> a2 </TD> </TR> <TR> <TD> b1</TD> <TD> b2 </TD> </TR> </TD> |
|
Obramowanie tabeli
Kolor obramowania tabeli Kolor tła tabeli Tło tabeli |
<TABLE BORDER=”n”> </TABLE> Uwaga: Przy n=0 tabela została pozbawiona obramowania! <TABLE BORDERCOLOR=”kolor”> </TABLE> <TABLE BGCOLOR=”kolor” > </TABLE> <TABLE BACKGROUND=”nazwa_obrazka”> </TABLE> |
Obramowanie komórek tabeli |
<TABLE CELLSPACING=”n”> </TABLE> |
Odstęp pomiędzy zawartością komórki a jej obramowaniem |
<TABLE CELLPADDING=”n”> </TABLE> |
Szerokość tabeli
Szerokość komórki |
<TABLE WIDTH=”n”> </TABLE> (w pikselach) <TABLE WIDTH=”n%”> </TABLE> (procentowo) <TD BORDER=”n”> </TD> |
Wyrównanie poziome danych w wierszu (komórce) |
<TR ALIGN=”center”> </TR> <TR ALIGN=”left”> </TR> <TR ALIGN=”right”> </TR> Uwaga: Podobnie dla komórek np. <TD ALIGN=”left”> </TD>. |
Łączenie komórek: pionowe poziome |
<TD ROWSPAN=x> (x - liczba łączonych wierszy) <TD COLSPAN=x> (x - liczba łączonych kolumn) |
strona 2 HTML - przegląd wybranych instrukcji
nagłówek
ciało
dokument
HTML
HTML
Strona kodowa ISO Latin 2 (standard międzynarodowy)
H T M L - WYBRANE INSTRUKCJE