Znaczniki HTML

HTML 4.01

HTML (ang. HyperText Markup Language, pol.

hipertekstowy język znaczników) – dominujący język
wykorzystywany do tworzenia stron internetowych.

Pozwala opisać strukturę informacji zawartych w

dokumencie nadając znaczenie poszczególnym

fragmentom tekstu (formując linki, nagłówki, akapity, listy,

itp.) oraz osadzić w tekście dodatkowe obiekty np.
statyczne grafiki, interaktywne formularze, dynamiczne

animacje. W składni języka HTML wykorzystuje się

znaczniki opatrzone z obu stron nawiasami ostrokątnymi.

!DOCTYPE [HTML]

Zalecane przez W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Forma przejściowa, to co strict + znaczniki zdeprecjonowane:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Używany na stronach z ramkami:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

!DOCTYPE [

XHTML

]

Zalecane przez W3C:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Forma przejściowa, to co strict + znaczniki zdeprecjonowane:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

Używany na stronach z ramkami:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Parametry znaczników

<znacznik

parametr1

"wartość1"

parametr2

"wartość2"

parametr3

"wartość3"

Wybrane parametry:

color,

left, top, width, height,

href, src

Kodowanie kolorów

Przykładowe kolory:

biały:

color="#

czarny:

color="#

brązowy:

color="#

„

żółty:

color="#



Red

Green

Blue

– model oparty o 3 podstawowe składowe chromatyczne

widzialnego światła białego. Model zastosowano do wyświetlania obrazów

na ekranach CRT i LCD



Barwy uzyskiwane są poprzez mieszanie podstawowych kolorów.



Im więcej światła tym jaśniejszy będzie kolor

0 – 255 DEC

00 – FF HEX

Szkielet dokumentu HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Nagłówki

<H1>

Nagłówek 1

</H1>

<H2>

Nagłówek 2

</H2>

...

<H6>

Nagłówek 6

</H6>

Znaczniki tekstu

<P>

Tekst

</P>

Formatowanie tekstu:

<B>

Pogrubienie

</B>

Pogrubienie

<I>

Pochylenie

</I>

Pochylenie

<U>

Podkreślenie

</U>

Podkreślenie

Znaczniki można zagnieżdżać:

<B>

Pog

<I>

rub

</I>

ienie

</B>

Pogrubienie

parametr: ALIGN= "left"

lub "right"

lub "center"

Formatowanie tekstu

<FONT color="#FF

Tekst

</FONT>

Indeksy:

<SUB>

dolny

</SUB>

Indeks dolny

<SUP>

górny

</SUP>

Indeks górny

Przejście do nowej linii:

<BR>

Podkreślenie:

<HR>

Listy

Lista numerowana:

<OL> </OL>

Lista nienumerowana:

<UL> </UL>

Składowa listy:

<LI>

Przykład listy:

<OL>

<LI>

Jabłka

<LI>

Gruszki

<LI>

Śliwki

</OL>

Lista definicji

Lista numerowana:

<DL> </DL>

Hasło:

<DT> </DT>

Definicja hasła:

<DD> </DD>

Przykład listy:

<DL>

<DT>

Hasło1

</DT>

<DD>

Def1

</DD>

<DT>

Hasło2

</DT>

<DD>

Def2

</DD>

</DL>

Tabele

Znacznik tabeli:

<TABLE> </TABLE>

Wiersz tabeli:

<TR> </TR>

Komórki tabeli:

<TD> </TD>

zwykła komórka

<TH> </TH>

komórka nagłówkowa

Przykład tabeli

<TABLE>

<TR>

<TD>

Jabłka

</TD>

</TR>

<TR>

<TD>

Gruszki

</TD>

</TR>

<TR>

<TD>

Śliwki

</TD>

</TR>

</TABLE>

Selektory

SELEKTOR

{

właściwość1

wartość1;

właściwość2

wartość2;

itd...

}

Selektory -

przykład

{

color

: #80FF00;

margin-left

: 20px;

}

Klasy

SELEKTOR.klasa1

{

właściwość1

wartość1;

właściwość2

wartość2;

}

SELEKTOR.klasa2

{

właściwość1

wartość3;

właściwość2

wartość4;

}

Klasy w HTML

<ZNACZNIK

class="klasa1"

obiekt, którego dotyczy znacznik

</ZNACZNIK>

ZNACZNIK.klasa1

{

właściwość1

wartość1;

właściwość2

wartość2;

}

Klasy uniwersalne

*.klasa1

{

właściwość1

wartość1;

właściwość2

wartość2;

}

*.klasa2

{

właściwość1

wartość3;

właściwość2

wartość4;

}

Pseudoklasy

P:first-letter {

background: Black;

color: Lime;

padding-bottom: 5px;

padding-top: 5px;

padding-left: 5px;

padding-right: 5px;

}

Grupowanie selektorów

SELEKTOR1, SELEKTOR2

{

właściwość1

wartość1;

właściwość2

wartość2;

itd...

}

Łączenie arkusza stylów z plikiem HTML

<HEAD>

<LINK rel="Stylesheet„

type="text/css"

href="style.css" />

</HEAD>

Dla zwiększenia giętkości, zalecane jest aby autorzy korzystali z zewnętrznych opisów

wyglądu. Takie rozwiązanie ma dwie zalety:

treść opisu może być zmieniana bez modyfikacji źródłowego dokumentu HTML,

pliki CSS mogą być współdzielone przez kilka dokumentów.

W celu przyłączenia zewnętrznego opisu wyglądu dokumentu należy wykorzystać
znacznik LINK:

Document Outline