WWW — êðàòêî îáî âñ¸ì
Àâòîð: /RomanSavochenko
Ïðèìå÷àíèå: Ðàçðåøàåòñÿ âíîñèòü èçìåíåíèÿ â äàííûé äîêóìåíò ñ öåëüþ èñïðàâëåíèÿ îáíàðóæåííûõ îøèáîê èëè ñ öåëüþ åãî äîïîëíåíèÿ.
OpenDocument: 
file:wwwshortall.odt
PDF: 
ftp://ftp.oscada.org.ua/books/WWWShortAll.pdf
Ââåäåíèå
Web òåõíîëîãèè ïîëó÷àþò âñ¸ áîëüøåå ðàñïðîñòðàíåíèå, à òàêæå ïðèîáðåòàþò âñ¸ íîâûå è íîâûå âîçìîæíîñòè. Ñëåäîâàòåëüíî âîïðîñ ëàêîíè÷íîãî èçëîæåíèÿ ìàòåðèàëà, â öåëîì, ÿâëÿåòñÿ âàæíûì äëÿ àäåêâàòíîãî âîñïðèÿòèÿ òåõíîëîãèè ïðè èçó÷åíèè. Êðîìå ýòîãî íåìàëîâàæíûì ÿâëÿåòñÿ ðåøåíèå ïðîáëåìû ïîääåðæàíèÿ çíàíèé â àêòóàëüíîì ñîñòîÿíèè.
Äàííûé äîêóìåíò ïðèçâàí ðåøèòü ýòè âîïðîñû ïóòåì ñæàòîãî è ëàêîíè÷íîãî èçëîæåíèÿ ìàòåðèàëà ãðàíè÷àùåãî ñî ñïðàâî÷íûì ïðåäñòàâëåíèåì.
ßçûê ãèïåðòåêñòîâîé ðàçìåòêè (HTML, XHTML è XML)
Ïðàêòè÷åñêè, ÿçûê ãèïåðòåêñòîâîé ðàçìåòêè ïîÿâèëñÿ ïåðâûì, ñîâìåñòíî ñ ïðîòîêîëîì HTTP(Hyper Text Transfer Protocol). Ñëåäîâàòåëüíî èçó÷åíèå åãî, êàê îñíîâû Web-òåõíîëîãèè ÿâëÿåòñÿ ïåðâîî÷åðåäíîé çàäà÷åé.
ßçûê ðàçìåòêè HTML ÿâëÿåòñÿ äîâîëüíî ìÿãêèì â ïëàíå òðåáîâàíèé ê ñèíòàêñèñó, ÷òî è ïðèâåëî ê çíà÷èòåëüíûì ïðîáëåìàì â ñòàíäàðòèçàöèè åãî îáðàáîòêè â ðàçëè÷íûõ WWW-áðàóçåðàõ. Äëÿ ðåøåíèÿ ýòîé ïðîáëåìû áûëî ïðèíÿòî ðåøåíèå íà ïîñòåïåííûé ïåðåõîä îò HTML ê áîëåå ñòðîãîìó ÿçûêó XML. Ïðîìåæóòî÷íîé ñòóïåíüþ â ýòîì ïåðåõîäå ñòàë ÿçûê XHTML.
Îñíîâíûì ýëåìåíòîì ýòèõ ÿçûêîâ ÿâëÿåòñÿ êîíòåéíåð, âèä êîòîðîãî, óñëîâíî, ìîæíî èçîáðàçèòü ñëåäóþùèì îáðàçîì:
<ÈìÿÒåãà àòðèáóòà1" àòðèáóòà2"> Òåëî êîíòåéíåðà </
 ÿçûêàõ XHTML è XML íàëè÷èå çàêðûâàþùåãî òåãà ÿâëÿåòñÿ îáÿçàòåëüíûì òðåáîâàíèåì.  ñëó÷àå îòñóòñòâèÿ òåëà êîíòåéíåðà âèä êîíòåéíåðà ïðèéìåò âèä:
<ÈìÿÒåãà àòðèáóòà1" àòðèáóòà2" />
Òàêæå, ÿçûêàìè XHTML è XML çàïðåùàåòñÿ ïåðåñå÷åíèå òåãîâ. Ò.å. ðàíåå îòêðûòûå òåãè äîëæíû çàêðûâàòüñÿ ïîñëå òåãîâ îòêðûòûõ â íèõ.
Îáùàÿ ñòðóêòóðà ñòðàíèöû íà ÿçûêå ãèïåðòåêñòîâîé ðàçìåòêè:
<?xml version='1.0' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8"/>
<title>Çàãîëîâîê ñàéòà</title>
</head>
<body bgcolor="#818181" text="#000000" link="#3366ff" vlink="#339999" alink="#33ccff">
...
Òåëî ñòðàíèöû
...
</body>
</html>
 ñëó÷àå ñ HTML ýòà ñòðóêòóðà ìîæåò áûòü óïðîùåíà äî âèäà:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Çàãîëîâîê</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Êàê ìîæíî âèäåòü èç ïðèìåðîâ, ñòðàíèöà ñîñòîèò èç äâóõ îñíîâíûõ ÷àñòåé:
- Çàãîëîâêà ñòðàíèöû (HEAD)
- Òåëà ñòðàíèöû (BODY)
Êàæäàÿ ÷àñòü èìååò ñâîé íàáîð òåãîâ êîòîðûé ìîæåò íåçíà÷èòåëüíî ïåðåñåêàòüñÿ. Ò.å. ñóùåñòâóþò òåãè êîòîðûå ìîãóò èñïîëüçîâàòüñÿ êàê â îäíîé ÷àñòè òàê è â äðóãîé.
Îñíîâíûå òåãè ÿçûêà è èõ àòðèáóòû:
<HTML> ... </HTML> — Çàêëþ÷àåò òåëî äîêóìåíòà.
<HEAD> ... </HEAD> — Çàêëþ÷àåò çàãîëîâêà äîêóìåíòà.
<BODY> ... </BODY> — Çàêëþ÷àåò òåëî ñòðàíèöû.
BGcolor — öâåò ôîíà ñòðàíèöû;
Text — öâåò òåêñòà;
Link — öâåò ãèïåðòåêñòîâûõ ññûëîê;
ALink — öâåò àêòèâíûõ ãèïåðòåêñòîâûõ ññûëîê;
VLink — öâåò ïðîéäåííûõ ãèïåðòåêñòîâûõ ññûëîê;
LeftMargin — çàäà¸ò øèðèíó ëåâîãî ïîëÿ ñòðàíèöû (â ïèêñåëàõ);
TopMargin — çàäà¸ò øèðèíó âåðõíåãî ïîëÿ ñòðàíèöû (â ïèêñåëàõ).
<BASE Href="http://my.resource.org/test/"> — Îïðåäåëÿåò áàçîâóþ òî÷êó âõîäà. Èñïîëüçóåòñÿ îòíîñèòåëüíî àäðåñóåìûìè ññûëêàìè. Ìîæåò èñïîëüçîâàòüñÿ â òåãàõ: HTML, HEAD, BODY à òàêæå âíå òåëà äîêóìåíòà.
Target — áàçîâîå èìÿ ôðåéìà, äëÿ îòîáðàæåíèÿ â í¸ì âíóòðåííèõ ññûëîê.
<FRAMESET> ... </FRAMESET> — Îïèñàíèå ôðåéìîâîé ñòðóêòóðû äîêóìåíòà. Îïðåäåëÿåòñÿ òîëüêî íà îäíîé ñòðàíèöå ÿâëÿþùåéñÿ òî÷êîé âõîäà íà äîêóìåíò. Ñòðàíèöà ñ ôðåéìîâîé ñòðóêòóðîé ìîæåò íå ñîäåðæàòü òåëà ñòðàíèöû (<BODY>).
<NOFRAMES> Òåêñò </NOFRAMES> — Òåêñò ñîîáùåíèÿ äëÿ áðàóçåðîâ íå ïîääåðæèâàþùèõ ôðåéìû.
<!-- Êîììåíòàðèé --> — Êîììåíòèðîâàíèå ó÷àñòêîâ òåêñòà.
Òåãè çàãîëîâêà <HEAD>
<TITLE> Hello </TITLE> — Óñòàíàâëèâàåò èìÿ îêíà áðàóçåðà.
<META Name="Refresh" HTTP-EQUIV="Refresh" Content="1; URL=refresh.htm" /> — Ïðåäîñòàâëÿåò óïðàâëÿþùóþ èíôîðìàöèþ.
Content — ïàðàìåòð îïöèè, òèï êîòîðîé óêàçàí â HTTP-EQUIV;
HTTP-EQUIV — òèï îïöèè:
"Content-Type" — óêàçûâàåò êîäèðîâêó äîêóìåíòà (Content="text/html; Charset=UTF8");
"Cache-Control" — óïðàâëåíèå êåøèðîâàíèåì:
Content="no-store" — çàïðåòèòü õðàíåíèå äîêóìåíòà ïîñëå ïåðåñûëêè.
"Keywords" — êëþ÷åâûå ñëîâà äîêóìåíòà äëÿ ïîèñêîâûõ ñèñòåì (Content="home page; Vasa Pupkin").
<LINK Rel="stylesheet" Href="../css/css.htm" Type="text/css" /> — Îáñëóæèâàíèå ðàçëè÷íûõ ñâÿçåé. Îáû÷íî èñïîëüçóåòñÿ äëÿ çàãðóçêè ñòèëåé (CSS).
"shortcut icon" — óêàçàíèå èêîíêè ñàéòà, âûñâå÷èâàåòñÿ â çàêëàäêàõ áðàóçåðà äëÿ äàííîãî ñàéòà.
Type — òèï ñîäåðæàíèÿ (text/css, text/javascript).
<STYLE Type=" îïèñàíèå ñòèëÿ/ñòèëåé </STYLE> — Ñîäåðæèò îïèñàíèå ñòèëÿ âñåãî äîêóìåíòà.
<SCRIPT Type=" Src="URL"> JavaScript/VBScript-êîä </SCRIPT> — Ðàçìåùàåò íà ñòðàíèöó êîä ñêðèïòà èç ôàéëà. Êîä ìîæåò ïîìåùàòüñÿ íåïîñðåäñòâåííî â òåëå êîíòåéíåðà.
Src — ôàéë ñî ñêðèïòàìè, óêàçûâàåòñÿ â ñëó÷àå çàãðóçêè ñêðèïòîâ èç âíåøíåãî ôàéëà.
Òåãè òåëà ñîîáùåíèÿ <BODY>
Óïðàâëåíèÿ ðàçìåòêîé
<H1> Çàãîëîâîê </H1> — Îïðåäåëåíèå çàãîëîâêà ñ óêàçàííûì óðîâíåì îò 1 äî 6.
<P/> — Íà÷àëî íîâîãî àáçàöà.
<ÑÅNÒÅR> Objects </CENTER> — Öåíòðèðîâàíèå îáúåêòîâ âíóòðè òåãà.
<BR/> — Ðàçðûâ ñòðîêè (íà÷àòü ñ íîâîé ñòðîêè).
<NOBR> Text </NOBR> — Ôîðìèðîâàíèå íåðàçðûâíîé ñòðîêè.
Óïðàâëåíèÿ îòîáðàæåíèåì
<ÂIG> Òåêñò </BIG> — Òåêñò ñî øðèôò áîëåå ñòàíäàðòíîãî.
<SMALL> Òåêñò </SMALL> — Òåêñò ñî øðèôò ìåíåå ñòàíäàðòíîãî.
<SUÐ> Èíäåêñ </SUP> — Òåêñò â íèæíåì èíäåêñå.
<SUÂ> Èíäåêñ </SUB> — Òåêñò â âåðõíåì èíäåêñå.
<FONT> Èåêñò </FONT> — Òåêñò ñ óêàçàííûìè ïàðàìåòðàìè øðèôòà.
Color — öâåò øðèôòà.
<I> Òåêñò </I> — Òåêñò êóðñèâîì.
<B> Òåêñò </B> — Óñèëåíèå òåêñòà.
<TT> Òåêñò </TT> — Òåêñò òåëåòàéïîì.
<U> Òåêñò </U> — Ïîä÷¸ðêèâàíèå òåêñòà.
<S> Òåêñò </S> — Ïåðå÷¸ðêèâàíèå òåêñòà.
<ÅÌ> Òåêñò </ÅÌ> — Òèïîãðàôñêè óñèëåííûé òåêñò.
<ÑIÒÅ> Òåêñò </ÑIÒÅ> — Öèòàòà.
<STRONG> Òåêñò </STRONG> — Óñèëåííûé òåêñò.
<ÑODE> Òåêñò </ÑÎDE> — Èñõîäíûå òåêñòû êîäà (íàïðèìåð, "êîäû ïðîãðàììû").
<SÀÌÐ> Òåêñò </SÀÌÐ> — Ëèòåðàëû.
<ÊÂD> Òåêñò </ÊÂD> — Êëàâèàòóðíûå ñèìâîëû.
<VAR> Òåêñò </VAR> — Ïåðåìåííàÿ.
<DFN> Òåêñò </DFN> — Îïðåäåëåíèå.
<Q> Òåêñò </Q> — Òåêñò â ñêîáêàõ.
<ÐRÅ> Òåêñò </PRE> — Ïðåôîðìàòèðîâàííûé âûâîä òåêñòà (êàê åñòü).
<ÂLÎÑKQUOTE> Òåêñò </ÂLÎÑKQUOTE> — Ôîðìèðîâàíèå áëîêîâ öèòàò. Äîáàâëÿþòñÿ ïîëÿ ñëåâà è ñïðàâà îò òåêñòà.
<HR/> — Ãîðèçîíòàëüíàÿ ëèíåéêà.
<FIELDSET> Òåêñò </FIELDSET> — Áîðäþð âîêðóã òåêñòà èëè ïðîèçâîëüíîãî ó÷àñòêà ñòðàíèöû.
Ñïèñêè
<DL>...</DL> — Ôîðìèðóåò ñïèñîê îïðåäåëåíèé.
<DD> Îïðåäåëåíèå </DD> — Îïðåäåëåíèå.
<UL>...</UL> — Íåíóìåðîâàííûé ñïèñîê.
<LI> Ýëåìåíò </LI> — Îïèñàíèå ýëåìåíòà ïåðå÷èñëåíèÿ.
<OL>...</OL> — Íóìåðîâàííûé ñïèñîê.
<LI> Ýëåìåíò </LI> — Îïèñàíèå ýëåìåíòà ïåðå÷èñëåíèÿ.
Òàáëèöû
<TABLE> ... </TABLE> — Îïèñàíèå òàáëèöû.
Border — òèï è ðàçìåð ãðàíèöû òàáëèöû;
Width — îáùàÿ øèðèíà òàáëèöû (â ïèêñåëàõ èëè ïðîöåíòàõ - 50%, 300);
Height — îáùàÿ âûñîòà òàáëèöû;
ÑellPadding — øèðèíà ïóñòîãî ïðîñòðàíñòâà ìåæäó ñîäåðæèìûì ÿ÷åéêè è åå ãðàíèöàìè;
CellSpacing — øèðèíà ïðîìåæóòêîâ ìåæäó ÿ÷åéêàìè;
BgColor — öâåò ôîíà òàáëèöû;
BackGround — ôîíîâîå èçîáðàæåíèå äëÿ òàáëèöû.
<CAPTION>Ïîäïèñü</CAPTION> — Óêàçàíèå ïîäïèñè òàáëèöû.
<TR> ... </TR> — Ôîðìèðîâàíèå ñòðîêè.
BgColor — öâåò ôîíà ñòðîêè;
Align — âûðàâíèâàíèå ïî ãîðèçîíòàëè (blåådleft, left, ñånter, right);
Valign — âûðàâíèâàíèå ïî âåðòèêàëå (top, middle, bottom).
<TD Colspan="3">Òåêñò</TD> — Îïèñàíèå ÿ÷åéêè ñòðîêè.
Valign — âûðàâíèâàíèå ïî âåðòèêàëå (top, middle, bottom);
ColSpan — îáúåäèíåíèå óêàçàííîãî êîëè÷åñòâà êîëîíîê â îäíó;
RowSpan — îáúåäèíåíèå óêàçàííîãî êîëè÷åñòâà ñòðîê â îäíó;
Nowrap — íå ïåðåíîñèòü ñîäåðæèìîå ÿ÷åéêè íà ñëåäóþùóþ ñòðîêó;
BgColor — öâåò ôîíà ÿ÷åéêè;
BackGround — ôîíîâîå èçîáðàæåíèå ÿ÷åéêè;
Width — øèðèíà ÿ÷åéêè.
<TH> Òåêñò </TH> — Çàãîëîâîê.
Valign — âûðàâíèâàíèå ïî âåðòèêàëå (top, middle, bottom);
Colspan — îáúåäèíåíèå óêàçàííîãî êîëè÷åñòâà êîëîíîê â îäíó;
RowSpan — îáúåäèíåíèå óêàçàííîãî êîëè÷åñòâà ñòðîê â îäíó;
Nowrap — íå ïåðåíîñèòü ñîäåðæèìîå ÿ÷åéêè íà ñëåäóþùóþ ñòðîêó;
BgColor — öâåò ôîíà ÿ÷åéêè;
BackGround — ôîíîâîå èçîáðàæåíèå ÿ÷åéêè;
Width — øèðèíà ÿ÷åéêè.
Ãèïåðòåêñòîâûå ññûëêè
<A Href="http://myaddr.org"> Ìîÿ ññûëêà </A> — ßêîðü. Ôîðìèðîâàíèå òåêñòîâîé ññûëêè.
<A Href="à íà òî÷êó "ðîint" â äîêóìåíòå</A>
<A Href="http://myaddr.org"><IMG Href="http://youraddr.org/img.png"/></A> — Ðèñóíîê â êà÷åñòâå ññûëêè.
<A Href=" íà àäðåñ ýëåêòðîííîé ïî÷òû</A>.
Name — îáúÿâëåíèå òî÷êè äëÿ ññûëêè âíóòðè äîêóìåíòà (Name="ðîint").
Èçîáðàæåíèÿ
<IMG Src="http://mysite.org/img.png" Alt="Ðèñóíîê"/> — Ôîðìèðîâàíèå ðèñóíêà.
Alt — òåêñò âûâîäèìûé áðàóçåðîì âìåñòî èçîáðàæåíèÿ (èçîáðàæåíèÿ âûêëþ÷åíû);
Align — ñïîñîá îáòåêàíèÿ èçîáðàæåíèÿ (top, texttop, middle, absmiddle, baseline, bottom, absbottom, left, right, all);
ÍSpace — øèðèíà ãîðèçîíòàëüíûõ ïîëåé îòäåëÿþùèõ ðèñóíîê;
VSpace — øèðèíà âåðòèêàëüíûõ ïîëåé îòäåëÿþùèõ ðèñóíîê;
Border — øèðèíà ðàìêè âîêðóã èçîáðàæåíèÿ.
Width — øèðèíà èçîáðàæåíèÿ;
Height — âûñîòà èçîáðàæåíèÿ;
Usemap — èìÿ êàðòû äàííîãî èçîáðàæåíèÿ <IMG Src="mage.png" Alt="Èçîáðàæåíèÿ" Usemap="#map">, êàðòà îïèñûâàåò àêòèâíûå ó÷àñòêè èçîáðàæåíèÿ.
<MAP Name="map"> ... </MAP> — Îïèñàíèå êàðòû èçîáðàæåíèÿ.
<AREA Shape="rect" Coords="0,0,100,100" Href="http://mydomain.org"/> — Îïèñàíèå àêòèâíîé îáëàñòè è ññûëêè.
Coords — êîîðäèíàòû àêòèâíîé îáëàñòè;
Href — àäðåñ ãèïåðñûëêè;
Nohref — áåç ññûëêè.
Ôîðìû
<FORM Method="post" Action="http://mydomen.org"> ... </FORM> — Ôîðìèðîâàíèå ôîðìû.
Action — àäðåñ ñåðâåðà îáðàáàòûâàþùåãî äàííûå ôîðìû.
<INPUT Name="Name" Size="35"/> — Ïîëå ââîäà ñòðîêè.
Type — òèï ïîëÿ ââîäà:
"checkbox" — ôëàæîê âûáîðà (Checked — âûáðàí);
"radio" — ôëàæîê âûáîðà îäíîãî èç ãðóïïû ôëàæêîâ;
"password" — ïîëå ââîäà ïàðîëÿ (áåç îòîáðàæåíèÿ ââåäåííûõ ñèìâîëîâ);
"reset" — êíîïêà ñáðîñà ôîðìû (Value — íàäïèñü íà êíîïêå);
"submit" — êíîïêà çàâåðøåíèÿ ââîäà äàííûõ (Value — íàäïèñü íà êíîïêå);
"hidden" — ñêðûòîå ïîëå (äëÿ ñêðûòèÿ àòðèáóòîâ Name è Value è èñïîëüçîâàíèå èõ â óïðàâëÿþùèõ öåëÿõ);
"file" — ïîëå ââîäà/âûáîðà ôàéëà;
"button" — êíîïêà;
"image" — âûïîëíÿåò ôóíêöèþ çàâåðøåíèÿ ââîäà ïî êëèêó íà èçîáðàæåíèè (Src — ñîäåðæèò àäðåñ èçîáðàæåíèÿ).
Size — ðàçìåð ïîëÿ ââîäà (ñèìâîëîâ);
Value — íà÷àëüíîå çíà÷åíèå ïîëÿ ââîäà èëè èìÿ äëÿ checkbox è radio, à òàêæå íàäïèñü íà êíîïêàõ;
Src — ñîäåðæèò ïóòü ê ôàéëó èçîáðàæåíèÿ äëÿ êíîïîê;
Align — âûðàâíèâàíèå äëÿ (Type="image");
Checked — ôëàæîê âûáðàí (äëÿ Type="checkbox");
Disabled — ïîëå ââîäà íåàêòèâíî/îòêëþ÷åíî.
<TEXTAREA Name="name" Cols="38" Rows="3">Òåêñò</TEXTAREA> — Îáëàñòü ââîäà áîëüøîãî êîëè÷åñòâà òåêñòà.
Cols — êîëè÷åñòâî êîëîíîê ââîäà;
Rows — êîëè÷åñòâî âèäèìûõ ñòðîê òåêñòîâîãî ââîäà.
<SELECT Name="mysel"> ... </SELECT> — Ïîëå âûáîðà çíà÷åíèé (combobox).
Name — íàèìåíîâàíèå îáúåêòà;
Size — êîëè÷åñòâî âèäèìûõ ñòðîê ñïèñêà (1 - êàê combobox).
Value — çíà÷åíèå âîçâðàùàåìîå ôîðìîé ïðè âûáîðå.
Ôðåéìû
<FRAMESET Cols="30%,*"> ... </FRAMESET> — Ôîðìèðîâàíèå ôðåéìîâîé ñòðóêòóðû.
Rows — ïåðå÷åíü (÷åðåç ",") ñòðîê è èõ ðàçìåðû (* - îñòàâøååñÿ ïðîñòðàíñòâî).
<FRAMESET Cols="30%,*"> ... </FRAMESET> — Ðåêóðñèâíîå âëîæåíèå ôðåéìîâûõ ñòðóêòóð.
<FRAME Src="index.html" Name="Left" /> — Îïèñàíèå îòäåëüíî âçÿòîãî ôðåéìà.
Src — óêàçûâàåò íà URL ôðåéìà;
ÌarginWidth — ãîðèçîíòàëüíûé îòñòóï ìåæäó ñîäåðæèìûì êàäðà è åãî ãðàíèöàìè;
ÌarginHeight — âåðòèêàëüíûé îòñòóï ìåæäó ñîäåðæèìûì êàäðà è åãî ãðàíèöàìè;
Scrolling — íàëè÷èå ïîëîñû ïðîêðóòêè âî ôðåéìå (no,yes,auto);
NoResize — çàïðåòèòü èçìåíåíèå ðàçìåðà ôðåéìà.
<NOFRAMES> Òåêñò </NOFRAMES> — Ñîäåðæèò èíôîðìàöèþ äëÿ áðàóçåðîâ íå ïîääåðæèâàþùèõ ôðåéìû.
Êàñêàäíûå òàáëèöû ñòèëåé (CSS)
Ïðåäíàçíà÷åíû äëÿ ðàñøèðåíèÿ óïðàâëÿåìîñòè òåêñòîâîé ÷àñòè äîêóìåíòà, à òàêæå äëÿ âûäåëåíèÿ ñòèëåâîé ñîñòàâëÿþùåé äîêóìåíòà â îòäåëüíóþ ÷àñòü, îñòàâèâ ÿçûêàì HTML/XHTML/XML äåêëàðàòèâíûå ôóíêöèè â ôîðìèðîâàíèè äîêóìåíòà.
Ïîääåðæèâàåòñÿ íåñêîëüêî ñïîñîáîâ âêëþ÷åíèÿ ñòèëåé â äîêóìåíò. Âñå îíè ïåðå÷èñëåíû íèæå â ñîîòâåòñòâèå ñ èåðàðõè÷íîñòüþ:
- Çàãðóçêà èç ôàéëà ïîñðåäñòâîì òåãà <LINK> â çàãîëîâêå <HEAD>: <LINK Rel="stylesheet" Href="../css/css.htm" Type="text/css" />;
- Îïèñàíèå â òåãå <STYLE> çàãîëîâêà äîêóìåíòà <HEAD>: <STYLE>P { color:grey; text-align:left }</STYLE>;
- Îïèñàíèå ñòèëÿ íåïîñðåäñòâåííî â òåãå íàçíà÷åíèÿ èñïîëüçóÿ àòðèáóò Style: <P Style="color:grey; text-align:left"></P>.
Ñèíòàêñèñ îïèñàíèÿ ñòèëåé ìîæåò áûòü äâóõ òèïîâ:
selector[, selector[, ...]]{ attribute:value;[atribute:value;...] } — ïåðå÷èñëåíèå ñåëåêòîðîâ, äëÿ êîòîðûõ äåéñòâóåò äàííîå îïèñàíèå ñòèëÿ.
selector selector [selector ...] { attribute:value;[atribute:value;...] } — çàäàíèå èåðàðõèè âëîæåííîñòè ñåëåêòîðîâ, äëÿ ñîâîêóïíîñòè êîòîðûõ îïðåäåëåí ñòèëü.
Ïðè ýòîì ñåëåêòîð <selector> ìîæåò áûòü ïðåäñòàâëåí ñëåäóþùèìè ñïîñîáàìè:
- Èìåíåì òåãà: P { color:grey; text-align:left }.
- Êëàññîì ñòèëÿ: .myclass { color:grey; text-align:left }. Èñïîëüçîâàíèå êëàññà äîëæíî óêàçûâàòüñÿ â òåãàõ ñ ïîìîùüþ àòðèáóòà Class: <P Class="myclass"></P>.
- Èìåíåì òåãà è êëàññîì ñòèëÿ: P.myclass { color:grey; text-align:left }. Èñïîëüçîâàíèå òàêæå äîëæíî óêàçûâàòüñÿ â òåãàõ ñ ïîìîùüþ àòðèáóòà Class: <P Class="myclass"></P>.
- Ïî èäåíòèôèêàòîðó òåãà: #myid { color:grey; text-align:left }. Ñîîòâåòñòâåííî, ó òåãà äîëæåí áûòü îïðåäåë¸í àòðèáóò Id: <P Id="myid"></P>.
- Ïî ìîäèôèêàòîðó òåãà: P:first-line { color:green }.
Ñïåöèôèêàöèÿ ÿçûêîâ HTML/XHTML/XML ñîäåðæèò îïðåäåëåíèå îáîáùàþùèõ ýëåìåíòîâ. Ýòèìè ýëåìåíòàìè ÿâëÿþòñÿ áëî÷íûé DIV è ñòðîêîâûé SPAN. Âñå äðóãèå ýëåìåíòû òåêñòîâîé ðàçìåòêè ìîæíî îïèñàòü ÷åðåç DIV è SPAN èñïîëüçóÿ CSS. Ñîáñòâåííî, òîëüêî â ñâÿçêå ñ CSS ýëåìåíòû DIV è SPAN èìåþò ñìûñë.
 áëî÷íîì ýëåìåíòå DIV ìîæíî ìàíèïóëèðîâàòü ãðàíèöàìè áëîêà (border), îòñòóïàìè ê íåé îò âíåøíåãî áëîêà (margin) è îò âíóòðåííåãî (padding).
Àòðèáóòû
Ãðàíèöû áëîêà
- border — êðàòêîå îïèñàíèå ïàðàìåòðîâ âñåé ãðàíèöû ("1px solid blue");
- border-top — êðàòêîå îïèñàíèå ïàðàìåòðîâ ãðàíèöû ñâåðõó;
- border-bottom — êðàòêîå îïèñàíèå ïàðàìåòðîâ ãðàíèöû ñíèçó;
- border-left — êðàòêîå îïèñàíèå ïàðàìåòðîâ ãðàíèöû ñëåâà;
- border-right — êðàòêîå îïèñàíèå ïàðàìåòðîâ ãðàíèöû ñïðàâà;
- border-width — îáùàÿ øèðèíà ãðàíèöû;
- border-top-width — øèðèíà ãðàíèöû ñâåðõó;
- border-bottom-width — øèðèíà ãðàíèöû ñíèçó;
- border-left-width — øèðèíà ãðàíèöû ñëåâà;
- border-right-width — øèðèíà ãðàíèöû ñïðàâà;
- border-color — îáùèé öâåò ãðàíèöû;
- border-top-color — öâåò âåðõíåé ãðàíèöû;
- border-bottom-color — öâåò íèæíåé ãðàíèöû;
- border-left-color — öâåò ëåâîé ãðàíèöû;
- border-right-color — öâåò ïðàâîé ãðàíèöû;
- border-style — îáùèé ñòèëü ãðàíèöû (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
- border-top-style — ñòèëü âåðõíåé ãðàíèöû;
- border-bottom-style — ñòèëü íèæíåé ãðàíèöû;
- border-left-style — ñòèëü ëåâîé ãðàíèöû;
- border-right-style — ñòèëü ïðàâîé ãðàíèöû.
Îòñòóïû áëîêà. Îòñòóïû îò âíåøíåãî áëîêà (margin) è îò âíóòðåííåãî, íàáèâêà (padding)
- margin — îáùèé âíåøíèé îòñòóï ("5px" èëè ïåðå÷èñëåíèå: "5px 3px 5px 3px");
- margin-top — âåðõíèé âíåøíèé îòñòóï;
- margin-bottom — íèæíèé âíåøíèé îòñòóï;
- margin-left — ëåâûé âíåøíèé îòñòóï;
- margin-right — ïðàâûé âíåøíèé îòñòóï;
- padding — îáùèé ðàçìåð íàáèâêè ("4px" èëè ïåðå÷èñëåíèå: "4px 3px 2px 1px");
- padding-left — ðàçìåð íàáèâêè ñëåâà;
- padding-right — ðàçìåð íàáèâêè ñïðàâà;
- padding-top — ðàçìåð íàáèâêè ñâåðõó;
- padding-bottom — ðàçìåð íàáèâêè ñíèçó.
Îáòåêàíèå è âûðàâíèâàíèå áëîêà
- float — ôîðìèðîâàíèå ïëàâàþùåãî áëîêà è åãî ðàñïîëîæåíèå (left, right, both);
- clear — îáòåêàíèå áëîêà (right, left, none, both).
Öâåò è øðèôò â CSS
- color — öâåò òåêñòà;
- background — êðàòêîå îïèñàíèå õàðàêòåðèñòèê ôîíà (background: blue http://mysyte.org/bk.png no-repeat fixed center);
- background-color — öâåò ôîíà;
- background-image — àäðåñ ôîíîâîãî èçîáðàæåíèÿ;
- background-repeat — ?
- background-attachment — ?
- background-position — ?
- font — êðàòêîå îïèñàíèå øðèôòà (font:bold 10pt verbana);
- font-family — ñåìåéñòâî øðèôòà (verbana, arial, sans-serif);
- font-style — ñòèëü øðèôòà (italic, normal );
- font-weight — óñèëåíèå øðèôòà (normal, bold);
- font-size — ðàçìåð øðèôòà, êåãëü (10pt, large, larger, small, smaller, medium, x-small, xx-small);
- font-variant — âàðèàíò íà÷åðòàíèÿ êîïèòåëü (normal, small-caps).
Óïðàâëåíèå òåêñòîì
- letter-spacing — ðàññòîÿíèå ìåæäó áóêâàìè òåêñòà;
- line-height — ðàññòîÿíèå ìåæäó ñòðîêàìè òåêñòà;
- text-align — âûðàâíèâàíèå òåêñòà (justify, left, right, center);
- text-transform — ïðåîáðàçîâàíèå òåêñòà (uppercase, lowercase, capitalize);
- text-decoration — îôîðìëåíèå òåêñòà (none, underline, line-through);
- text-indent — îòñòóï ïåðâîé ñòðîêè ïàðàãðàôà (àáçàö).
Óïðàâëåíèå âèäèìîñòüþ. Ñëîè. Ïîëîæåíèÿ è ðàçìåðû áëîêîâ
- position — òèï ïîçèöèîíèðîâàíèÿ:
"absolute" — îòíîñèòåëüíî ëåâîãî âåðõíåãî óãëà äîêóìåíòà;
"relative" — îòíîñèòåëüíî ëåâîãî âåðõíåãî óãëà ðîäèòåëüñêîãî èëè ïðåäûäóùåãî áëîêà.
- top — ðàññòîÿíèå äî áëîêà îò âåðõà ãðàíèöû;
- left — ðàññòîÿíèå äî áëîêà îò ëåâîé ãðàíèöû;
- height — âûñîòà áëîêà;
- width — øèðèíà áëîêà;
- visibility — âèäèìîñòü áëîêà (hidden, visible);
- z-index — ïîðÿäîê ïåðåêðûòèÿ, áîëüøåå çíà÷åíèå àòðèáóòà îïðåäåëÿåò âåðõíèé áëîê;
- clip — âûäåëåíèå ÷àñòè áëîêà (clip:rect(0,50,10,5)).
Äðóãèå àòðèáóòû
- display — îïðåäåëÿåò âèäèìîñòü ýëåìåíòà (none);
- list-style-type — ñòèëü çíà÷êîâ ñïèñêà (none, square, disk, circle, lower-roman, upper-alpha, lower-alpha);
- white-space — ïóñòîå ïðîñòðàíñòâî (nowrap).
- font-face — ?;
- vertical-align — âåðòèêàëüíîå âûðàâíèâàíèå (top).
Ìîäèôèêàòîðû òåãîâ
Ìîäèôèêàòîðû èñïîëüçóþòñÿ äëÿ êîíêðåòèçàöèè ãðóïïû ñâîéñòâ òåãà.
Òåêñò <span>:
- :first-line — ìîäèôèêàòîð ïåðâîé ñòðîêè ïàðàìåòðà;
- :first-letter — ìîäèôèêàòîð ïåðâîé áóêâû ïåðâîé ñòðîêè.
Ãèïåðòåêñòîâûå ññûëêè <a>:
- :link — ññûëêà ïî óìîë÷àíèþ;
- :visited — ïîñåù¸ííàÿ ññûëêà;
- :hover — ïîä êóðñîðîì;
- :active — àêòèâíàÿ.
JavaScript
JavaScript ýòî ÿçûê ñîçäàííûé ôèðìîé Netscape äëÿ ïðîãðàììèðîâàíèÿ ãèïåðòåêñòîâûõ ñòðàíèö ñ èñïîëíåíèåì ïðîãðàììû íà ñòîðîíå áðàóçåðà. Ïðîãðàììèðîâàíèå çàêëþ÷àåòñÿ âî âíåäðåíèè òåêñòîâ ïðîãðàìì íà ÿçûêå JavaScript â òåëî ãèïåðòåêñòîâûõ ñòðàíèö è ïîñëåäóþùåå èñïîëíåíèå ýòèõ ïðîãðàìì áðàóçåðîì. Èñïîëüçîâàíèå ýòîãî ÿçûêà â ñîçäàíèè ñàéòîâ ïîçâîëÿåò ñäåëàòü èõ áîëåå æèâûìè è äèíàìè÷íûìè. Ïîñðåäñòâîì ÿçûêà JavaScript ìîæíî ïîëó÷èòü äîñòóï íå òîëüêî ê äîêóìåíòó íà êîòîðîì ïðîãðàììà ðàçìåùåíà, íî è ê ñâîéñòâàì ñàìîãî áðàóçåðà.  ïîñëåäñòâèè ÿçûê áûë ñòàíäàðòèçèðîâàí ECMA (European Computer Manufacturers Association).
ßçûê îáâÿçûâàåò îáúåêòíóþ ìîäåëü áðàóçåðà è äîêóìåíòîâ îïåðèðóÿ ñâîéñòâàìè, ìåòîäàìè è ñîáûòèÿì îáúåêòîâ. Ñâîéñòâàìè îáúåêòà ÿâëÿþòñÿ àòðèáóòû òåãîâ ñòðàíèöû, à òàêæå àòðèáóòû îáúåêòîâ áðàóçåðà. Ìåòîäàìè îáúåêòîâ âûñòóïàþò ôóíêöèè èçìåíåíèÿ ñâîéñòâ îáúåêòîâ äîêóìåíòà è áðàóçåðà. Ñîáûòèÿ îáúåêòîâ ïðåäñòàâëåíû ôóíêöèÿìè, êîòîðûå àêòèâèðóþòñÿ ïðè âûïîëíåíèè òîãî èëè èíîãî äåéñòâèÿ íàä îáúåêòîì. Âñå òåãè ãèïåðòåêñòîâîé ñòðàíèöû ðàñøèðåíû àòðèáóòàìè ïðåäñòàâëÿþùèìè ñîáûòèéíûå ôóíêöèè. Äëÿ îáðàáîòêè ñîáûòèé êîä ïðîãðàììû ïîìåùàåòñÿ â çíà÷åíèå ýòèõ àòðèáóòîâ.
 öåëîì, êîä ñöåíàðèåâ ìîæåò ðàçìåùàòüñÿ íà ñòðàíèöå ñëåäóþùèìè ñïîñîáàìè:
- Â ãèïåðòåêñòîâîé ññûëêè (URL-ñõåìà). Âûïîëíÿåòñÿ îáðàáîòêà ïðîãðàììû âìåñòî ññûëêè. Èñïîëüçóåòñÿ â àòðèáóòàõ ñîäåðæàùèõ URL. Íàïðèìåð:
-  îáðàáîò÷èêå ñîáûòèé. Èñïîëüçóåòñÿ äëÿ ðàçìåùåíèÿ ñöåíàðèåâ îáðàáîòêè ñîáûòèé. Íàïðèìåð:
- Ïîäñòàíîâêà. Âûïîëíÿåòñÿ ïîäñòàíîâêà â àòðèáóòû êîíòåéíåðîâ äîêóìåíòà ðåçóëüòàòà èñïîëíåíèÿ ñêðèïòà. Íàïðèìåð:
- Âñòàâêà ÷åðåç êîíòåéíåð SCRIPT. Ïîñðåäñòâîì êîíòåéíåðà SCRIPT ïðîèçâîäèòñÿ êàê çàãðóçêà ôàéëîâ ñî ñöåíàðèÿìè òàê è íåïîñðåäñòâåííîå îïðåäåëåíèå òåêñòà ñöåíàðèåâ. Âûïîëíåíèå ñöåíàðèåâ ïðîèçâîäèòñÿ ñðàçó, ïðè îáíàðóæåíèè ýòîãî êîíòåéíåðà â ïðîöåññå îáðàáîòêè äîêóìåíòà. Äàííûé ñïîñîá ìîæíî èñïîëüçîâàòü äëÿ ðàçìåùåíèÿ êîäà âíóòðè äîêóìåíòà è óñëîâíîé ãåíåðàöèè äîêóìåíòà íà ñòîðîíå áðàóçåðà. Åñëè óêàçàí èñõîäíûé ôàéë â àòðèáóòå <src> è îí ïðèñóòñòâóåò, òî òåëî êîíòåéíåðà SCRIPT íå îáðàáàòûâàåòñÿ. Ïðèìåð:
<HTML><HEAD>
<SCRIPT type="text/javascript" src="http://myscript.js">
//Ìîé ñöåíàðèé
</SCRIPT>
</HEAD></HTML>
Òèïû äàííûõ
ßçûêîì JavaScript ïîääåðæèâàåòñÿ íåñêîëüêî ïðîñòûõ òèïîâ:
- ×èñëî: ëþáîå öåëîå èëè âåùåñòâåííîå ÷èñëî (23, 05, 0x1A, 3.14159, -3.1E1 ).
- Ëîãè÷åñêèé: ëîãè÷åñêèé ïðèçíàê (true èëè false).
- Ñòðîêà: ñòðîêè è òåêñòû ("Ñòðîêà"). Â ñòðîêå ìîæíî èñïîëüçîâàòü ñïåöèàëüíûå ñèìâîëû:
\b — çàáîé;
\f — ïåðåâîä ñòðàíèöû;
\n — íîâàÿ ñòðîêà;
\r — âîçâðàò êàðåòêè;
\t — òàáóëÿöèÿ;
\\ — äâîéíîé îáðàòíûé ñëåø.
- Íóëü: ñïåöèàëüíîå êëþ÷åâîå ñëîâî äëÿ îáîçíà÷åíèÿ ïóñòîãî çíà÷åíèÿ (null).
Ïåðåìåííûå â JavaScript îïðåäåëÿþòñÿ ïóò¸ì ïðÿìîãî ïðèñâàèâàíèÿ â íîâóþ ïåðåìåííóþ (x=3) èëè ïîñðåäñòâîì var (var x=3). Òèï ïåðåìåííîé ìåíÿåòñÿ ïðè ïðèñâàèâàíèè çíà÷åíèÿ äðóãîãî òèïà. Ïðè ñìåøàííûõ îïåðàöèÿõ ñóììèðîâàíèÿ ðåçóëüòàòîì ÿâëÿåòñÿ ñòðîêà.
Îïåðàöèè
| Ñèìâîë | Îïèñàíèå |
| Ñàìûé âûñîêèé ïðèîðèòåò | |
| () | Âûçîâ ôóíêöèè |
| [] | Âûäåëåíèå ýëåìåíòà ìàññèâà |
| . | Âûäåëåíèå ýëåìåíòà ñòðóêòóðû èëè îáúåäèíåíèÿ |
| ++ | Ïîñò-ïðèðàùåíèå |
| — | Ïîñò-äåêðåìåíò |
| + | Óíàðíûé ïëþñ |
| - | Óíàðíûé ìèíóñ |
| ! | Ëîãè÷åñêîå îòðèöàíèå |
| ~ | Ïîáèòîâîå îòðèöàíèå |
| * | Óìíîæåíèå |
| / | Äåëåíèå |
| % | Îñòàòîê îò äåëåíèÿ |
| + | Ñóììà |
| - | Ðàçíîñòü |
| << | Ñäâèã âëåâî |
| >> | Ñäâèã âïðàâî |
| >>> | Ñäâèã âïðàâî, ñ çàïîëíåíèåì íóëÿìè |
| < | Ìåíüøå |
| <= | Ìåíüøå è ðàâíî |
| > | Áîëüøå |
| >= | Áîëüøå è ðàâíî |
| == | Ðàâíî |
| != | Íåðàâíî |
| & | Ïîðàçðÿäíûé "È" |
| ^ | Ïîðàçðÿäíûé "èñêëþ÷àþùèé ÈËÈ" |
| | | Ïîðàçðÿäíûé "ÈËÈ" |
| && | Ëîãè÷åñêèé "È" |
| || | Ëîãè÷åñêèé "ÈËÈ" |
| ?: | Óñëîâíàÿ îïåðàöèÿ(var i=(val>=0)?val:-val;) |
| = | Ïðèñâàèâàíèå |
| +=, -=, *=, /=, %=, |=, &=, <=, >= | Ñîñòàâíîå ïðèñâàèâàíèå |
Îïåðàòîðû
Óïðàâëÿþùèå îïåðàòîðû:
- if...else — Óñëîâíûå îïåðàòîðû.
Äåéñòâèå: Åñëè óñëîâèå <condition> èñòèííî, âûïîëíÿåòñÿ âûðàæåíèå <statements1>, èíà÷å <statements2>. Óñëîâèå ìîæåò áûòü ëþáûì êîòîðîå ìîæíî îöåíèòü êàê èñòèííîå èëè ëîæíîå. Âûðàæåíèÿ, êîòîðûå íóæíî âûïîëíèòü, ìîãóò áûòü ëþáûìè âêëþ÷àÿ óñëîâíûå. Áîëåå ÷åì îäèí îïåðàòîð äîëæåí áûòü çàêëþ÷åí â ôèãóðíûå ñêîáêè, { }.
- for, for...in, while, break è continue — Îïåðàòîðû öèêëîâ. Â òåëå öèêëà ìîãóò èñïîëüçîâàòüñÿ îïåðàòîðû <break> è <continue>. Ïåðâûé äëÿ ïðåðûâàíèÿ öèêëà, à âòîðîé äëÿ ïåðåõîäà ê ñëåäóþùåé èòåðàöèè öèêëà.
Äåéñòâèå: Âûïîëíåíèå âûðàæåíèÿ <statement> ïîêà óñëîâèå <condition> èñòèííî. Ïåðåä çàïóñêîì öèêëà âûïîëíÿåòñÿ âûðàæåíèå <initstatement>. Ïîñëå êàæäîé èòåðàöèè öèêëà âûïîëíÿåòñÿ âûðàæåíèå <poststatement>.
Çàïèñü: while(<condition>) <statement>;
Äåéñòâèå: Âûïîëíåíèå âûðàæåíèÿ <statement> ïîêà óñëîâèå <condition> èñòèííî.
Çàïèñü: for( <attr> in <obj> ) <statement>;
Äåéñòâèå: Âûïîëíåíèå âûðàæåíèÿ <statement> äëÿ âñåõ àòðèáóòîâ <attr> îáúåêòà <obj>.
- new, this è with — Îïåðàòîðû ìàíèïóëÿöèè ñ îáúåêòàìè.
- // <coment> è /* <coment> */ — Êîììåíòàðèè. Ïåðâûé ýòî îäíî-ñòðî÷íûé êîììåíòàðèé, à âòîðîé ìíîãî-ñòðî÷íûé.
Ñïåöèàëüíûå îïåðàòîðû:
- new {Type} — Ñîçäàíèå ýêçåìïëÿðà îáúåêòà ïîëüçîâàòåëüñêîãî èëè âñòðîåííîãî òèïà (name = new typ( param1 [,param2] ...[,paramN] )).
- typeof {Operand} — Îïðåäåëåíèå òèïà îïåðàíäà. Âîçâðàùàåò òèï îïåðàíäà â âèäå ñòðîêè (typeof val).
- void (expression) — Îïðåäåëÿåò âûðàæåíèå, êîòîðîå íå âîçâðàùàåò íèêàêîãî çíà÷åíèÿ ( void (0) ).
Ôóíêöèè
Ôóíêöèè - îäèí èç ôóíäàìåíòàëüíûõ áëîêîâ JavaScript. Ôóíêöèÿ - JavaScript-ïðîöåäóðà - íàáîð îïåðàòîðîâ, êîòîðûé èñïîëíÿåò îïðåäåëåííóþ çàäà÷ó. Îïðåäåëÿåòñÿ è èñïîëüçóåòñÿ ôóíêöèÿ ñëåäóþùèì îáðàçîì:
function parWrite(str)
{
document.write("<HR><P>" + str)
}
parWrite(2345);
ßçûêîì ïðåäóñìîòðåíà ïîääåðæêà ïåðåìåííîãî ÷èñëà ïàðàìåòðîâ ôóíêöèé. Äëÿ äîñòóïà ê ïðîèçâîëüíîìó ïàðàìåòðó ïðåäóñìîòðåí çàïðîñ: <functionName>.arguments[i]. Äëÿ îïðåäåëåíèÿ ÷èñëà äîñòóïíûõ àòðèáóòîâ èñïîëüçóåòñÿ çàïðîñ: <functionName>.arguments.length. Ïðèìåð ôóíêöèè ñ ïåðåìåííûì ÷èñëîì ïàðàìåòðîâ è å¸ âûçîâ ïðèâåä¸í íèæå:
function list(type)
{
document.write("<" + type + "L>")
for( var i = 1; i < list.arguments.length; i++ )
document.write("<LI>" + list.arguments[i]+"</LI>")
document.write("</" + type + "L>")
}
list("Î", "one", 1967, "three", "etc., etc...");
Ñîáûòèÿ è èõ îáðàáîòêà
Óïðàâëåíèå ýëåìåíòàìè äîêóìåíòà ïîëüçîâàòåëåì ïåðåäàþòñÿ â ïðîãðàììó ïîñðåäñòâîì ñîáûòèé. Ñòàíäàðòàìè óïðàâëåíèÿ áðàóçåðîì ïðåäóñìîòðåíà ãðóïïà ñîáûòèé äëÿ ðàçëè÷íûõ ýëåìåíòîâ, êîòîðûå ïåðå÷èñëåíû â òàáëèöå íèæå.
| Ñîáûòèå/îáðàáîò÷èê | Îáëàñòü èñïîëüçîâàíèÿ | Ïðè÷èíà âîçíèêíîâåíèÿ | Ìåòîä èìèòàöèè |
| onAbort | images | Ïîëüçîâàòåëü ïðåðûâàåò çàãðóçêó èçîáðàæåíèÿ. | |
| onBlur | windows, frames è âñå ôîðìû ýëåìåíòîâ | Ïîëüçîâàòåëü óáèðàåò ôîêóñ ââîäà. | blur() |
| onChange | òåêñòîâûå ïîëÿ, òåêñòîâûå îáëàñòè | Ïîëüçîâàòåëü ìåíÿåò çíà÷åíèå ýëåìåíòà. | change() |
| onClick | button, radio button, checkboxes, submit button, reset button, links | Ïîëüçîâàòåëü âûáèðàåò ôîðìó èëè ññûëêó. | click() |
| onDblClick | button, radio button, checkboxes, submit button, reset button, links | Äâîéíîé ùåë÷îê | |
| onError | images, windows | Îøèáêà çàãðóçêè äîêóìåíòà èëè èçîáðàæåíèÿ. | |
| onFocus | windows, frames, è âñå ôîðìû ýëåìåíòîâ. | Ïîëüçîâàòåëü ïåðåäàåò ôîêóñ ââîäà. | focus() |
| onKeyDown | button, radio button, checkboxes, submit button, reset button, links | Íàæàòà êëàâèøà íà êëàâèàòóðå | |
| onKeyPress | button, radio button, checkboxes, submit button, reset button, links | Íàæàòà è îòïóùåíà êëàâèøà íà êëàâèàòóðå | |
| onKeyUp | button, radio button, checkboxes, submit button, reset button, links | Îòïóùåíà êëàâèøà íà êëàâèàòóðå | |
| onLoad | òåëî äîêóìåíòà | Ïîëüçîâàòåëü çàãðóæàåò ñòðàíèöó â áðàóçåð. | |
| onMouseDown | button, radio button, checkboxes, submit button, reset button, links | Íàæàòà êíîïêà ìûøè â ïðåäåëàõ òåêóùåãî ýëåìåíòà. | |
| onMouseMove | button, radio button, checkboxes, submit button, reset button, links | Ïåðåìåùåíèå êóðñîðà ìûøè â ïðåäåëàõ òåêóùåãî ýëåìåíòà. | |
| onMouseOut | button, radio button, checkboxes, submit button, reset button, links | Ïîëüçîâàòåëü ïåðåìåùàåò óêàçàòåëü ìûøè ïî îáëàñòè. | |
| onMouseOver | button, radio button, checkboxes, submit button, reset button, links | Êóðñîð ìûøè íàâåäåí íà òåêóùèé ýëåìåíò. | |
| onMouseUp | button, radio button, checkboxes, submit button, reset button, links | Îòïóùåíà êíîïêà ìûøè â ïðåäåëàõ òåêóùåãî ýëåìåíòà . | |
| onMove | window | Ïåðåìåùåíèå îêíà. | |
| onReset | form | Ñáðîñ äàííûõ ôîðìû ( ùåë÷îê ïî êíîïêå <input type="reset"> ). | reset() |
| onResize | window | Èçìåíåíèå ðàçìåðîâ îêíà. | |
| onSelect | input, textarea | Âûäåëåíèå òåêñòà â òåêóùåì ýëåìåíòå. | |
| onSubmit | form | Îòïðàâêà äàííûõ ôîðìû ( ùåë÷îê ïî êíîïêå <input type="submit"> ). | submit() |
| onUnload | body, frameset | Ïîïûòêà çàêðûòèÿ îêíà áðàóçåðà è âûãðóçêè äîêóìåíòà |
Îáúåêòû
 JavaScript îáúåêòû ïðåäñòàâëåíû îáúåêòíîé ìîäåëüþ áðàóçåðà è âñòðîåííûìè íå âèçóàëüíûìè îáúåêòàìè. Êðîìå òîãî, ïîëüçîâàòåëåì ìîãóò ñîçäàâàòüñÿ ñîáñòâåííûå îáúåêòû. Îáúåêò ìîæåò ñîäåðæàòü ñâîéñòâà è ôóíêöèè.
Ê ñâîéñòâàì îáúåêòà ìîæíî ïîëó÷èòü äîñòóï äâóìÿ ñïîñîáàìè. Ïåðâûé ñïîñîá ýòî èåðàðõè÷åñêîå îáðàùåíèå (<object>.<attr>). Âòîðîé ñïîñîá ýòî äîñòóï ê îáúåêòó êàê ê ìàññèâó (<object>[<attr>]). Ïðè äîñòóïå ê ýëåìåíòó îáúåêòà êàê ê ìàññèâó ìîæíî îáðàùàòüñÿ êàê ïî èìåíè, òàê è ïî èíäåêñó.
Äëÿ àäðåñàöèè ê òåêóùåìó îáúåêòó èñïîëüçóåòñÿ êëþ÷åâîå ñëîâî <this>. Íàïðèìåð ïðè ïðÿìîì îïèñàíèè îáðàáîò÷èêîâ ñîáûòèé ïî òåêóùåìó îáúåêòó:
<INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)"/>
Äëÿ îáðàùåíèÿ ê ýëåìåíòàì ðîäèòåëüñêîãî îáúåêòà ìîæíî èñïîëüçîâàòü àòðèáóò "parent" (parent.color).
Îïðåäåëåíèå íîâîãî îáúåêòà ïðîèçâîäèòñÿ ïîñðåäñòâîì êëþ÷åâîãî ñëîâà <function>, à ñîçäàíèå ýêçåìïëÿðà îáúåêòà ïîñðåäñòâîì <new>. Ê ýêçåìïëÿðó îáúåêòà ìîæíî ñâîáîäíî äîáàâëÿòü íîâûå ñâîéñòâà, ïóò¸ì ïðîñòîãî ïðèñâàèâàíèÿ. Íàïðèìåð:
function person(name,age,sex)
{
this.name = name;
this.age = age;
this.sex = sex;
}
function setUser(user)
{
this.user = user;
}
function book(name, author, year, publisher, person)
{ this.name = name;
this.author = author;
this.year = year;
this.publisher= publisher;
this.user = person;
this.setUser = setUser; //Ïîäêëþ÷åíèå ê îáúåêòó ìåòîäà setUser()
}
pers1 = new person("Vasja",24,"M");
book1 = new book("JavaScript","Flenagan",2006,"O`REILY",pers1);
userNm=book1.user.name;
book.prototype.user=null; //Óñòàíîâêà ñâîéñòâà âî âñåõ ýêçåìïëÿðàõ îáúåêòà book
book1.setUser("Vasja");
Âñòðîåííûå òèïû îáúåêòîâ
- Array — Îáúåêò ìàññèâà. Ìàññèâ - óïîðÿäî÷åííûé íàáîð çíà÷åíèé, ê êîòîðûì ìîæíî îáðàòèòüñÿ ïî èíäåêñó. Ýêçåìïëÿð ìàññèâà ìîæíî ñîçäàòü äâóìÿ ñïîñîáàìè, ïóò¸ì óêàçàíèÿ êîëè÷åñòâà ýëåìåíòîâ â ìàññèâå è ïðÿìîãî óêàçàíèÿ ýëåìåíòîâ:
aObjNm = new Array(<arrayLength>);
aObjNm = new Array(<element0>, <element1>, ..., <elementn>);
a = new Array(4);
for (i=0; i < 4; i++)
{
a[i] = new Array(4);
for(j=0; j < 4; j++) a[i][j] = "["+i+","+j+"]";
}
Ñâîéñòâà:- length — ðàçìåð ìàññèâà;
Ìåòîäû:
- join() — ñâÿçûâàíèå âñåõ ýëåìåíòîâ ìàññèâà â ñòðîêó, ÷åðåç çíàê çàïÿòîé;
- reverse() — ðåâåðñ ïîðÿäêà ýëåìåíòîâ â ìàññèâå;
- sort() — ñîðòèðîâêà ýëåìåíòîâ ìàññèâà â ëåêñèêîãðàôè÷åñêîì ïîðÿäêå;
- concat() — äîáàâëåíèå ê ìàññèâó çíà÷åíèé;
- splice(<beg>,<end>) — ïîëó÷åíèå ÷àñòè ìàññèâà íà÷èíàÿ ñ <beg> è çàêàí÷èâàÿ <end>;
- push(), pop() — ðàáîòà ñ ìàññèâîì êàê ñî ñòåêîì;
- Boolean — Äàííûé îáúåêò èñïîëüçóåòñÿ êîãäà íåîáõîäèìî ïðåîáðàçîâàòü íå-boolean çíà÷åíèå â boolean.
bfalse = new Boolean(false);
Ìåòîäû:- valueOf() — Çíà÷åíèå îáúåêòà.
- Date — Äàòà. Õðàíèò çíà÷åíèå äàòû â ìèëëèñåêóíäàõ ñ 1 ÿíâàðÿ 1970ã, 00:00:00.
today = new Date(); //Òåêóùåå âðåìÿ
tmFromStr = new Date("November 3, 2007 13:54:00"); //Èç ñòðîêè
tmSet = new Date(2007,11,3,13,54,00); //Ïðÿìàÿ óñòàíîâêà
Ìåòîäû:- <mtm> getTime() — ïîëó÷åíèå âðåìåíè â ìèëëèñåêóíäàõ ñ 01.01.1970;
- setTime(<mtm>) — óñòàíîâêà âðåìåíè â ìèëëèñåêóíäàõ ñ 01.01.1970;
- <dt_part> get[Year]|[Month]|[Day]|[Days]|[Hours]|[Minutes]|[Seconds]() — ïîëó÷åíèÿ ãîäà, ìåñÿöà, äíÿ íåäåëè, äíÿ ìåñÿöà, ÷àñîâ, ìèíóò è ñåêóíä ñîîòâåòñòâåííî;
- set[Year]|[Month]|[Days]|[Hours]|[Minutes]|[Seconds](<dt_part>) — óñòàíîâêà ãîäà, ìåñÿöà, äíÿ ìåñÿöà, ÷àñîâ, ìèíóò è ñåêóíä ñîîòâåòñòâåííî;
- <mtm> parse(dtStr) static — ïîëó÷åíèå äàòû ïóò¸ì ðàçáîðà ñòðîêè âèäà "November 3, 2007 13:54:00";
- Function — Îáúåêò ôóíêöèè. Èñïîëüçóåòñÿ äëÿ çàêðåïëåíèÿ çà ïåðåìåííîé èëè ñâîéñòâîì ôóíêöèè êàêîé ëèáî ïðîöåäóðû. Ôîðìàò îïðåäåëåíèÿ ýêçåìïëÿðà îáúåêòà ôóíêöèè: functionObjectName = new Function ([<arg1>, <arg2>, ... <argn>,] functionBody). Ïðèìåð èñïîëüçîâàíèÿ:
var setBGColor = new Function("document.bgColor='antiquewhite'");
document.form1.colorButton.onclick=setBGColor;
<INPUT NAME="colorButton" TYPE="button" VALUE="Change background color" onClick="setBGColor()"/>
- Math — Âñòðîåííûé îáúåêò äîñòóïà ê ìàòåìàòè÷åñêèì ôóíêöèÿì è êîíñòàíòàì. Âñå åãî ñâîéñòâà è ìåòîäû ÿâëÿþòñÿ ñòàòè÷åñêèìè, à çíà÷èò äîñòóïíû áåç ñîçäàíèÿ ýêçåìïëÿðà îáúåêòà è ïîñðåäñòâîì èìåíè îáúåêòà (Math.PI).
Ñâîéñòâà:
- PI — êîíñòàíòà pi (3.14159276);
Ìåòîäû:
- abs() — àáñîëþòíîå çíà÷åíèå;
- sin() — ñèíóñ;
- cos() — êîñèíóñ;
- tan() — òàíãåíñ;
- acos() — àðêêîñèíóñ;
- asin() — àðêñèíóñ;
- atan() — àðêòàíãåíñ;
- exp() — ýêñïîíåíòà;
- log() — íàòóðàëüíûé ëîãàðèôì;
- ceil() — âîçâðàùàåò íàèìåíüøåå öåëîå, áîëüøåå èëè ðàâíîå àðãóìåíòó;
- floor() — âîçâðàùàåò íàèáîëüøåå öåëîå, ìåíüøåå èëè ðàâíîå àðãóìåíòó;
- min(), max() — âîçâðàùàåò ìåíüøåå èëè áîëüøåå (ñîîòâåòñòâåííî) èç äâóõ àðãóìåíòîâ;
- pow() — âîçâåäåíèå â ñòåïåíü, ïåðâûé àðãóìåíò îñíîâàíèå, âòîðîé ïîêàçàòåëü ñòåïåíè;
- round() — îêðóãëÿåò àðãóìåíò äî áëèæàéøåãî öåëîãî;
- sqrt() — êâàäðàòíûé êîðåíü.
- Number — Ñîäåðæèò ñòàòè÷åñêèå ñâîéñòâà öèôðîâûõ êîíñòàíò.
Ñâîéñòâà:
- MAX_VALUE — íàèáîëüøåå çíà÷åíèå;
- MIN_VALUE — íàèìåíüøåå çíà÷åíèå;
- NaN — íåîïðåäåëåííîñòü;
- NEGATIVE_INFINITY — îòðèöàòåëüíàÿ áåñêîíå÷íîñòü;
- POSITIVE_INFINITY — ïîëîæèòåëüíàÿ áåñêîíå÷íîñòü.
Ìåòîäû:
- toFixed(<num>) — Îêðóãëåíèå ÷èñëà äî óêàçàííîãî çíàêà ïîñëå çàïÿòîé.
- toString(<base>) — Ïðåîáðàçîâàíèå â ñòðîêó ñ óêàçàííîé áàçîé (2-36).
- String — Îáúåêò äëÿ ðàáîòû ñî ñðîêàìè â ïðèëîæåíèÿõ. Ôàêòè÷åñêè äàííûé îáúåêò ïðåäñòàâëÿåò ñòðîêîâûå ëèòåðàëû è ïåðåìåííûå ñòðîêîâîãî òèïà, à çíà÷èò åãî ñâîéñòâà è ìåòîäû õàðàêòåðíû äëÿ íèõ.
Ñâîéñòâà:
- length — äëèíà ñòðîêè;
Ìåòîäû:
- <str> anchor() — ñîçäàåò HTML-ÿêîðü;
- <str> big() | blink() | bold() | fixed() | italics() | small() | strike() | sub() | sup() — ñîçäàåò ñòðîêó HTML, ñîîòâåòñòâóþùåãî âèäà;
- <el> charAt(<simb>) — âîçâðàùàåò ñèìâîë ïî åãî íîìåðó â ñòðîêå;
- <pos> indexOf(<substr>) | lastIndexOf(substr) — âîçâðàùàþò ïåðâóþ (ïîñëåäíþþ) ïîçèöèþ ñïåöèôèöèðîâàííîé ïîäñòðîêè;
- <str> link(<addr>) — ñîçäàåò ãèïåðòåêñòîâóþ ññûëêó äëÿ àäðåñà <addr>;
- <array> split(<sep>) — ðàçáèâàåò îáúåêò String íà ìàññèâ ïîäñòðîê ïî ðàçäåëèòåëþ <sep>;
- <str> substring(<pos>,<len>) — èçâëåêàåò ïîäñòðîêó èç ñòðîêè íà÷èíàÿ ñ ïîçèöèè <pos> è äëèíîé <len>;
- <str> toLowerCase() | toUpperCase() — âîçâðàùàåò ñòðîêó â íèæíåì èëè âåðõíåì ðåãèñòðå, ñîîòâåòñòâåííî.
Ãëîáàëüíûå ñâîéñòâà è ìåòîäû
- self, window — ññûëêà íà îáúåêò òåêóùåãî îêíà/ôðåéìà;
- top — ññûëêà íà îáúåêò ñàìîãî âåðõíåãî îêíà;
- parent — ññûëêà íà ðîäèòåëüñêèé îáúåêò;
- {winName} — ãëîáàëüíîå èìÿ îêíà, èñïîëüçóåìîå äëÿ ïðÿìîé àäðåñàöèè ê íåìó;
- <bool> isNaN(<val>) — îöåíêà àðãóìåíòà íà íåîïðåäåëåííîñòü;
- <str> toString(<obj>) — ïðåîáðàçîâàíèå îáúåêòà â ñòðîêó;
- <tid> setTimeout(<call_func>,<tm>) — óñòàíîâêà èíòåðâàëà <tm>, â ìèëëèñåêóíäàõ, ïî èñòå÷åíèþ êîòîðîãî âûçâàòü ôóíêöèþ <call_func>;
- clearTimeout(<tid>) — îñòàíîâ ðàíåå ñîçäàííîãî èíòåðâàëüíîãî âûçîâà ñ èäåíòèôèêàòîðîì <tid>;
- <numb> parseInt(<str>[,<radix>]) — ïðåîáðàçîâàíèå ñòðîêè <str> ê öåëîìó ñ îñíîâàíèåì <radix>;
- <numb> parseFloat(<str>) — ïðåîáðàçîâàíèå ñòðîêè ê âåùåñòâåííîìó;
- <rez> eval(<str>) — âû÷èñëåíèå âûðàæåíèÿ â str è âîçâðàò ðåçóëüòàòà â <rez>.
Èåðàðõèÿ îáúåêòîâ áðàóçåðà
window — êîðíåâîé îáúåêò îêíà;
- status — ñîäåðæèìîå è äîñòóï ê ñòðîêå ñòàòóñà;
- alert(<string>) — ñôîðìèðîâàòü äèàëîãîâîå îêíî ñ ïðåäóïðåæäåíèåì;
- confirm(<string>) — ñôîðìèðîâàòü äèàëîãîâîå îêíî ïîäòâåðæäåíèÿ ñ êíîïêàìè: "Ok" è "Cancel";
- prompt(<string>) — ñôîðìèðîâàòü äèàëîãîâîå îêíî ñ ïîëåì ââîäà çíà÷åíèÿ;
- <wid> open(<url>,<title>,<add_params>) — îòêðûòèå íîâîãî îêíà äëÿ <url> ñ íàçâàíèåì <title> è ãðóïïîé äîïîëíèòåëüíûõ ïàðàìåòðîâ <add_params> (width=400,height=150). Äîïîëíèòåëüíûå ïàðàìåòðû: width, height, status=no, menu, toolbar=yes;
- close() — çàêðûòèå îêíà;
- focus() — óñòàíîâêà ôîêóñà íà äàííîå îêíî;
- blur() — ñíÿòèå ôîêóñà ñ äàííîãî îêíà;
- scroll() — ïðîêðóòêà îêíà ê óêàçàííîé ïîçèöèè;
window.location — URL ñòðàíèöû äàííîãî îêíà, ìîæåò áûòü èçìåíåí äëÿ ïåðåõîäà íà äðóãóþ ñòðàíèöó;
- href — ïîëíûé òåêñò URL;
- protocol — ïðîòîêîë URL;
- host — àäðåñ ñåðâåðà;
- pathname — àäðåñ ê ðåñóðñó;
- search — àòðèáóòû çàïðîñà.
window.navigator — îáúåêò áðàóçåðà;
window.navigator.plugms[] — ïðîãðàììû áðàóçåðà;
window.navigator.mimeTypes[] — ïîääåðæèâàåìûå MIME-òèïû;
window.frames[] — ôðåéìû îêíà è ñàìè îêíà;
- location — URL ôðåéìà, ìîæåò áûòü èçìåíåí äëÿ îòîáðàæåíèÿ äðóãîé ñòðàíèöû;
window.history — èñòîðèÿ âèçèòîâ;
window.document — äîêóìåíò;
- bgColor, fgColor, linkColor, alinkColor, è vlinkColor — ñâîéñòâà ãëîáàëüíûõ öâåòîâ äîêóìåíòà;
- lastModified — äàòà ïîñëåäåíåé ìîäèôèêàöèè äîêóìåíòà;
- referrer — ïðåäûäóùèé ïî÷åùàåìûé URL;
- URL — URL äîêóìåíòà;
- open() — îòêðûòèå äîêóìåíòà îêíà äëÿ çàïèñè â íåãî;
- close() — çàêðûòèå äîêóìåíòà íà çàïèñü;
- write(<str_el1>[,<str_el2>[,<str_el3>,...,<str_eln>]]) — çàïèñü ñòðîêè, ñîñòîÿùåé èç ýëåìåíòîâ <str_el{x}> â êîíåö äîêóìåíòà, èñïîëüçóåòñÿ äëÿ äèíàìè÷åñêîãî ôîðìèðîâàíèÿ äîêóìåíòà;
- writeln(<str_el1>[,<str_el2>[,<str_el3>,...,<str_eln>]]) — âûïîëíÿåò òóæå ôóíêöèþ, ÷òî è ôóíêöèÿ <write>, à òàêæå äîáàâëÿåò ïåðåâîä ñòðîêè â êîíöå ñòðîêè;
window.document.forms[] — ôîðìû äîêóìåíòà;
- document — ññûëêà íà îáúåêò äîêóìåíòà-âëàäåëüöà.
window.document.forms[].elements[] — ýëåìåíòû ôîðìû;
- form — ññûëêà íà îáúåêò ôîðìû-âëàäåëüöà.
window.document.anchors[] — ÿêîðÿ (ññûëêè) äîêóìåíòà;
window.document.links[] — ññûëêè äîêóìåíòà;
- href — àäðåñ ññûëêè;
window.document.images[] — èçîáðàæåíèÿ äîêóìåíòà;
window.document.applets[] — àïëåòû äîêóìåíòà;
window.document.embeds[] — ???
window.packages[] — ïàêåòû.
window.event — ãëîáàëüíûé îáúåêò ñîáûòèé Event
- type — òèï ñîáûòèÿ (keydown, ;
- target — óçåë - èñòî÷íèê ñîáûòèÿ;
- currentTarget — óçåë - îáðàáîò÷èê ñîáûòèÿ;
- timeStamp — âðåìÿ âîçíèêíîâåíèÿ ñîáûòèÿ (îáúåêò Date);
- button — íîìåð êíîïêè ìûøè (0-ëåâàÿ,1-ñðåäíÿÿ,2-ïðàâàÿ);
- altKey, ctrlKey, metaKey, shiftKey — ïðèçíàêè óäåðæàíèÿ êëàâèøè ìîäèôèêàòîðà â ìîìåíò êëèêà ìûøüþ;
- clientX, clientY — ïîëîæåíèå êóðñîðà ìûøè îòíîñèòåëüíî êëèåíòñêîé îáëàñòè;
- pageX, pageY — ïîëîæåíèå êóðñîðà ìûøè îòíîñèòåëüíî ëåâîãî âåðõíåãî óãëà îêíà (NN);
- screenX, screenY — ïîëîæåíèå êóðñîðà ìûøè îòíîñèòåëüíî ýêðàíà;
- offsetX, offsetY — ïîëîæåíèå êóðñîðà ìûøè îòíîñèòåëüíî èñõîäíîãî ýëåìåíòà (IE);
- keyCode — êîä íàæàòîé êëàâèøè (IE);
- which — êíîïêà ìûøè èëè êîä íàæàòîé êëàâèøè (NN).
Ïðèëîæåíèå
Ñòðóêòóðà URL (Unifical resource locator)
 îáùåì âèäå Unifical resource locator(URL) çàïèñûâàåòñÿ ñëåäóþùèì îáðàçîì:
ãäå:
user — èäåíòèôèêàòîð ïîëüçîâàòåëÿ;
password — ïàðîëü;
domain.ru — äîìåííîå èìÿ ñåðâåðà;
port — íîìåð TCP-ïîðòà ñåðâåðà;
path — ïóòü â êîðíåâîì êàòàëîãå ñåðâåðà ê ðåñóðñó;
some.html — ðåñóðñ;
query_string — ïàðàìåòð çàïðîñà.
CER (Character Entity Reference)
CER (Character Entity Reference) - ñîãëàøåíèå î êîäèðîâàíèè è ïðåäñòàâëåíèè ñïåöèàëüíûõ ñèìâîëîâ:
| ×èñëîâîé êîä | Èìåííàÿ çàìåíà | Ñèìâîë | Îïèñàíèå |
| " | " | " | Êàâû÷êà |
| & | & | & | Àìïåðñàíò |
| < | < | < | Ìåíüøå |
| > | > | > | Áîëüøå |
|   | | Íåðàçðûâíûé ïðîáåë | |
| ¡ | ¡ | ¡ | Ïåðåâåðíóòûé âîñêëèöàòåëüíûé çíàê |
| ¢ | ¢ | ¢ | Öåíò |
| £ | £ | £ | Ôóíò |
| ¤ | ¤ | ¤ | Âàëþòà |
| ¥ | ¥ | ¥ | Éåíà |
| ¨ | ¨ | ¨ | Óìëÿóò |
| © | © | © | Êîïèðàéò |
| « | « | « | Ëåâàÿ óãëîâàÿ êàâû÷êà |
| ® | ® | ® | Çàðåãèñòðèðîâàííàÿ òîðãîâàÿ ìàðêà |
| ± | ± | ± | Ïëþñ èëè ìèíóñ |
| » | » | » | Ïðàâàÿ óãëîâàÿ êàâû÷êà |
Öâåòà è èõ êîäû
| Öâåò | Êîä |
| aqua | #00FFFF |
| navy | #000080 |
| black | #000000 |
| olive | #808000 |
| blue | #0000FF |
| purple | #800080 |
| fuchsia | #FF00FF |
| red | #FF0000 |
| gray | #808080 |
| silver | #C0C0C0 |
| green | #008000 |
| teal | #008080 |
| lime | #00FF00 |
| white | #FFFFFF |
| maroon | #800000 |
| yellow | #FFFF00 |
Åäèíèöû ðàçìåðîâ
Ðàçìåðû â äîêóìåíòå HTML/XHTML/XML ìîæíî óêàçûâàòü íåñêîëüêèìè ñïîñîáàì.
| Åäèíèöà | Îïèñàíèå |
| 100px | Ïèêñåëû (100 ïèêñåëîâ) |
| 50pt | Òèïîãðàôè÷åñêèå ïóíêòû (50 ïóíêòîâ, 1pt = 0,35mm) |
| 10em | Óñëîâíûå åäèíèöû (10 óñëîâíûõ åäèíèö) |
| 100% |  ïðîöåíòàõ îò îïîðíîé âåëè÷èíû |
Øðèôòû
Ñåìåéñòâà øðèôòîâ:
| Øðèôò | Îïèñàíèå |
| serif | Øðèôò ñ çàñå÷êàìè (Times) |
| sans-serif | Øðèôò áåç çàñå÷åê (Arial, Helvetica) |
| monospace | Ìîíî-øèðèííûé (Courier) |
Ëèòåðàòóðà
1. Á.Ï. Õðàìöîâ, Ñ.À.Áðèê, À.Ì.Ðóñàê, À.È.Ñóðèí; "Îñíîâû WEB-òåõíîëîãèé."; Èíòåðíåò-Óíèâåðñèòåò; Ìîñêâà; 2003
2. Ìîëëè Ý. Õîëüöøëàã; "Èñïîëüçîâàíèå HTML è XHTML. Ñïåöèàëüíûé ñïðàâî÷íèê."; Âèëüÿìñ; Ìîñêâà, Ñàíêò-Ïåòåðáóðã, Êèåâ: 2003