Dhtml

Стивен Хольцнер
DHTML
Перевод с английского
BHV, Киев, 2001

Ââåäåíèå
Äîáðî ïîæàëîâàòü â íàøó êíèãó ïî Dynamic HTML! Â ýòîé
êíèãå îïèñàíû ðàçëè÷íûå íåîáû÷íûå òåõíîëîãèè: ñîçäàíèå Web-
ñòðàíèö, èçìåíÿþùèõñÿ â ïðîöåññå ïðîñìîòðà, è ìíîãîñëîéíàÿ
ãðàôèêà; èñïîëüçîâàíèå ãðàôè÷åñêîé àíèìàöèè, îõâàòûâàþùåé
âñþ Web-ñòðàíèöó, è äèàëîãîâûõ îêîí, áëàãîäàðÿ êîòîðûì îðãà-
íèçóåòñÿ âçàèìîäåéñòâèå ñ ïîëüçîâàòåëåì; ïåðåòàñêèâàíèå îáúåêò-
îâ ñ ïîìîùüþ ìûøè, “ïðèâÿçêà” èíôîðìàöèè ê Web-ñòðàíèöå
è îðãàíèçàöèÿ äîñòóïà ê ýòîé èíôîðìàöèè áåç äîïîëíèòåëüíîé
çàãðóçêè åå ñ Web-ñåðâåðà. Dynamic HTML âíîñèò ðåâîëþöèîí-
íûå èçìåíåíèÿâ ïðîöåññ ñîçäàíèÿ Web-ñòðàíèö, è äàííàÿ êíèãà
ïðåäñòàâëÿåò ñîáîé ïîäðîáíîå ðóêîâîäñòâî ïî èñïîëüçîâàíèþ
ýòîãî ÿçûêà.
Ñ ïîìîùüþ Dynamic HTML ìû ïîëó÷àåì âîçìîæíîñòü
ïîñòðîåíèÿ Web-ñòðàíèö íà êà÷åñòâåííî íîâîì óðîâíå. ×èòà-
òåëü ìîã óæå ñëûøàòü ìíîæåñòâî ëåãåíä î Dynamic HTML, îä-
íàêî èñòèíà, ëåæàùàÿ â èõ îñíîâå, íå ìåíåå âïå÷àòëÿþùàÿ.
Dynamic HTML äåéñòâèòåëüíî ïîçâîëÿåò “îæèâèòü” Web-ñòðà-
íèöû äî óðîâíÿ, î êîòîðîì ðàíüøå ìîæíî áûëî òîëüêî ìå÷-
òàòü. Íà çàðå ýðû WWW Web-ñòðàíèöû ïðåäñòàâëÿëè ñîáîé
ñòàòè÷åñêèå îáúåêòû, ñîäåðæàùèå òîëüêî òåêñò è ãðàôèêó. Çà-
òåì Web-ñòðàíèöû ïðåâðàòèëèñü â îáúåäèíåíèÿ ñòàòè÷åñêèõ
ýëåìåíòîâ ñ íåêîòîðûìè âñòðîåííûìè â íèõ àêòèâíûìè îáúåêò-
àìè, òàêèìè êàê àïïëåòû Java èëè ýëåìåíòû óïðàâëåíèÿ Ac-
tiveX. Òåïåðü ðàçâèòèå äîñòèãëî ñâîåãî ñëåäóþùåãî ëîãè÷åñêîãî
óðîâíÿ — âñå ñòàëî àêòèâíûì. Web-ñòðàíèöà ìîæåò “îòñëåæè-
âàòü” è ðåàãèðîâàòü íà ïåðåìåùåíèå óêàçàòåëÿ ìûøè ïî òåêñòó,
5

èçîáðàæåíèÿì èëè òàáëèöàì. Ãðàôè÷åñêèå îáúåêòû ìîãóò ñëó-
æèòü â êà÷åñòâå ôîíà, ðàçìåùàòüñÿ ïîâåðõ òåêñòà, ìîæíî äàæå
çàñòàâèòü ýòè îáúåêòû äâèãàòüñÿ. Òàêæå ìîæíî ñîçäàòü ýôôåêò
âûäåëåíèÿ èëè çàòåíåíèÿ òåêñòà ïðè ïîìåùåíèè íà íåãî óêàçà-
òåëÿ ìûøè. Òàêèì îáðàçîì, ìîæíî ñäåëàòü àêòèâíîé áóêâàëüíî
ëþáóþ ÷àñòü Web-ñòðàíèöû, ÷òî çíà÷èòåëüíî ðàñøèðÿåò âîç-
ìîæíîñòè Web-ñåðâåðà.
Íà ñåãîäíÿøíèé äåíü èìåþòñÿ äâå îñíîâíûå ðåàëèçàöèè
Dynamic HTML: äëÿ Netscape Navigator è äëÿ Microsoft Internet
Explorer. Åñëè âû õîòèòå èçó÷èòü âñå àñïåêòû Dynamic HTML,
òî ñëåäóåò îçíàêîìèòüñÿ ñ îáåèìè åãî ðåàëèçàöèÿìè.
Два броузера, два вида Dynamic HTML
Áûëî áû çäîðîâî, åñëè áû äâå îñíîâíûå ðåàëèçàöèè Dynamic
HTML áûëè ïîõîæè äðóã íà äðóãà, íî, ê ñîæàëåíèþ, êàê ìû óáå-
äèìñÿ, ýòî íå òàê. Òî, ÷òî â îáîèõ áðîóçåðàõ íàçûâàåòñÿ “Dy-
namic HTML”, âûõîäèò äàëåêî çà ðàìêè ñïåöèôèêàöèé íà íîâûå
òýãè è òàáëèöû ñòèëåé, îïðåäåëåííûõ Êîíñîðöèóìîì ïî World
Wide Web (èëè WWWC; www.w3.org). Ðàçëè÷èÿ ìåæäó äâóìÿ
áðîóçåðàìè ñòîëü ñóùåñòâåííû, ÷òî, êðîìå ñàìîé ïðèìèòèâíîé
Web-ñòðàíèöû, ñ ïîìîùüþ Dynamic HTML ïðàêòè÷åñêè íåâîç-
ìîæíî íàïèñàòü êîä, êîòîðûé ìîã áû ðàáîòàòü îäíîâðåìåííî
â îáîèõ áðîóçåðàõ. Åäèíñòâåííûé âûõîä — îñóùåñòâëÿòü ïðî-
âåðêó òèïà áðîóçåðà, íà êîòîðîì ïðîñìàòðèâàåòñÿ ñòðàíèöà,
è ñîîòâåòñòâóþùèì îáðàçîì ïåðåïèñûâàòü åå. Îòëè÷èÿ çàòðàãè-
âàþò òàêèå îñíîâîïîëàãàþùèå àñïåêòû Dynamic HTML, êàê îáðà-
áîòêà ñîáûòèé, ñâÿçàííûõ ñ ìûøüþ è êëàâèàòóðîé, ñîçäàíèå íî-
âûõ ãðàôè÷åñêèõ ýôôåêòîâ è àíèìàöèè, à òàêæå íîâûå ñâîéñòâà,
êîòîðûå äîáàâëåíû ê ñóùåñòâîâàâøèì ðàíåå HTML-òýãàì. Òåì íå
ìåíåå, â ýòîé êíèãå áóäåò ðàññìîòðåíî èñïîëüçîâàíèå Dynamic
HTML â îáîèõ áðîóçåðàõ, ïîñêîëüêó Web-ïðîãðàììèñòû äîëæíû
çíàòü îáå âåðñèè ÿçûêà.
Êàê áóäåò ïîêàçàíî íèæå, âîçìîæíîñòè Dynamic HTML â
Internet Explorer ãîðàçäî øèðå, ïîòîìó ÷òî ïî÷òè â êàæäûé òýã
6

áûëè äîáàâëåíû íîâûå ñâîéñòâà è ñîáûòèÿ. Â ðåàëèçàöèþ Dy-
namic HTML äëÿ Netscape Navigator òàêæå äîáàâëåíû íîâûå
ñâîéñòâà è ñîáûòèÿ, íî â ìåíüøåì îáúåìå.
Íåîáõîäèìî îòìåòèòü, ÷òî Microsoft âêëàäûâàåò â ïîíÿòèå
Dynamic HTML ãîðàçäî áîëüøå, ÷åì Netscape. Ïîýòîìó áîëü-
øàÿ ÷àñòü äàííîé êíèãè ïîñâÿùåíà òîëüêî Internet Explorer. Íè-
æå ïðèâåäåí êðàòêèé ïåðå÷åíü òåì, êîòîðûå áóäóò ðàññìîòðåíû
ïðèìåíèòåëüíî ê Internet Explorer:
n äèíàìè÷åñêîå èçìåíåíèå Web-ñòðàíèöû â ëþáîé ìîìåíò
âðåìåíè;
n èñïîëüçîâàíèå ìûøè è êëàâèàòóðû;
n òàáëèöû ñòèëåé;
n äèàëîãîâûå îêíà;
n äèíàìè÷åñêîå ðàçìåùåíèå îáúåêòîâ íà Web-ñòðàíèöàõ;
n ãðàôè÷åñêàÿ àíèìàöèÿ;
n äèíàìè÷åñêîå èçìåíåíèå âèäà îáúåêòà;
n ñâÿçü ñ áàçàìè äàííûõ.
Íèæå äàí êðàòêèé ñïèñîê òîãî, ÷òî áóäåò ðàññìîòðåíî äëÿ
Netscape Navigator (çàìåòèì, ÷òî ïî÷òè êàæäàÿ èç ýòèõ îñîáåí-
íîñòåé ðåàëèçóåòñÿ èíà÷å, ÷åì â Internet Explorer):
n äèíàìè÷åñêîå èçìåíåíèå Web-ñòðàíèö;
n èñïîëüçîâàíèå ìûøè è êëàâèàòóðû;
n òàáëèöû ñòèëåé;
n äèàëîãîâûå îêíà;
n ñëîè;
n äèíàìè÷åñêîå ðàçìåùåíèå îáúåêòîâ íà Web-ñòðàíèöàõ;
n ãðàôè÷åñêàÿ àíèìàöèÿ;
n äèíàìè÷åñêèå øðèôòû.
Ïî õîäó â òåêñòå áóäåò óòî÷íÿòüñÿ, î êàêîì èìåííî áðîóçåðå
èäåò ðå÷ü â äàííûé ìîìåíò.
Ñóùåñòâóåò è äðóãîå ðàçëè÷èå ìåæäó äâóìÿ ðåàëèçàöèÿìè
Dynamic HTML, êîòîðîå òàêæå îïèñûâàåòñÿ â äàííîé êíèãå, —
ýòî ÿçûê ñöåíàðèåâ. Â Internet Explorer èñïîëüçóåòñÿ êàê VBScript,
òàê è JavaScript, à â Netscape Navigator â íàñòîÿùåå âðåìÿ — òîëüêî
7

JavaScript. Ñ äðóãîé ñòîðîíû, ïî-âèäèìîìó, áîëüøèíñòâî ïðî-
ãðàììèñòîâ, êîòîðûå ðàçðàáàòûâàþò ïðîãðàììû äëÿ Internet
Explorer, ïðåäïî÷èòàþò VBScript, è ñàìà ôèðìà Microsoft òàêæå
îòäàåò ïðåäïî÷òåíèå VBScript: âî âñåé äîêóìåíòàöèè, ðàçðàáî-
òàííîé ýòîé ôèðìîé íà Dynamic HTML, è â ïðèìåðàõ èñïîëüçó-
åòñÿVBScript, à íå JavaScript.
Ýòî ïîñòàâèëî àâòîðà ïåðåä äèëåììîé: åñëè îãðàíè÷èòüñÿ
ëèøü JavaScript, òî â êíèãå áóäåò ïðèìåíÿòüñÿ ÿçûê ñöåíàðèåâ,
êîòîðûé ìîãóò ïîíèìàòü îáà áðîóçåðà. Îäíàêî â òàêîì ñëó÷àå ýòà
êíèãà íå áóäåò ñòîëü ïîëåçíîé äëÿ ïðîãðàììèñòîâ, ðàáîòàþùèõ ñ
Internet Explorer è èñïîëüçóþùèõ VBScript (íå ãîâîðÿ óæå î íà-
÷èíàþùèõ ïðîãðàììèñòàõ, æåëàþùèõ ðàçîáðàòüñÿ â äîêóìåíòà-
öèè Microsoft, â êîòîðîé âñå ïðèìåðû íàïèñàíû íà VBScript).
Ðåøåíèå ýòîé ïðîáëåìû ñîñòîèò â òîì, ÷òîáû èñïîëüçîâàòü
îáà ÿçûêà — JavaScript è VBScript, ÷òî è ïðåäëàãàåòñÿ â äàííîé
êíèãå. Ýòî ðåøåíèå ÿâëÿåòñÿ îïòèìàëüíûì åùå è ïîòîìó, ÷òî
ðåàëèçàöèè Dynamic HTML â äâóõ áðîóçåðàõ ñòîëü ðàçëè÷íû,
÷òî íàïèñàííàÿ ñ ïîìîùüþ Dynamic HTML Web-ñòðàíèöà
î÷åíü ðåäêî áóäåò ðàáîòàòü îäíîâðåìåííî â îáîèõ áðîóçåðàõ, äà-
æå åñëè îíà è ñîçäàíà íà ÿçûêå, êîòîðûé îíè ïîääåðæèâàþò.
Â äàííîé êíèãå ïðèìåðû äëÿ Internet Explorer íàïèñàíû â îñ-
íîâíîì íà VBScript, à ïðèìåðû äëÿ Netscape Navigator — íà
JavaScript. Ýòî ïîçâîëèò ÷èòàòåëþ íàó÷èòüñÿ èñïîëüçîâàòü êàê
JavaScript, òàê è VBScript, ÷òî áóäåò ïîëåçíûì äëÿ ëþáîãî ïðî-
ãðàììèñòà. Óêàçàííûå ÿçûêè ïîõîæè, ïîýòîìó ìîæíî ëåãêî ïå-
ðåêëþ÷àòüñÿ ñ îäíîãî íà äðóãîé.
Как построена данная книга
Ýòà êíèãà ïîçâîëèò ÷èòàòåëþ ïðèîáðåòàòü íàâûêè ïîñòåïåí-
íî — ïî ìåðå ïðî÷òåíèÿ î÷åðåäíîé ãëàâû. Òàê, íàïðèìåð, â ãëàâå
1 ðàññìàòðèâàþòñÿ ýëåìåíòû Web-ñòðàíèöû è íåêîòîðûå îñíîâ-
íûå HTML-òýãè.
Â ãëàâå 2 ÷èòàòåëü óçíàåò, êàê èñïîëüçîâàòü ÿçûê ñöåíàðèåâ
äëÿ ïîäêëþ÷åíèÿ êîäà ê ýëåìåíòàì Web-ñòðàíèöû. Ýòè çíàíèÿ
8

áóäóò íåîáõîäèìû íà ïðîòÿæåíèè âñåé êíèãè, ïîñêîëüêó áîëü-
øèíñòâî âîçìîæíîñòåé Dynamic HTML ðåàëèçóåòñÿ ñ ïîìîùüþ
ÿçûêà ñöåíàðèåâ.
Â ãëàâå 3 íà÷íåòñÿ èçó÷åíèå ñàìîãî Dynamic HTML íà ïðèìå-
ðå äèíàìè÷åñêîãî èçìåíåíèÿ Web-ñòðàíèö â ïðîöåññå èõ ïðîñìîò-
ðà. ×èòàòåëü ïîçíàêîìèòñÿ ñ òåì, êàê îðãàíèçîâàòü ïåðåçàïèñü
Web-ñòðàíèö ïî èíèöèàòèâå ïîëüçîâàòåëÿ èëè â ñîîòâåòñòâèè ñ òå-
êóùèìè äàòîé è âðåìåíåì, à òàêæå ìíîãîå äðóãîå.
Â ãëàâå 4 áóäåò îïèñàíî ìíîæåñòâî íîâûõ ýôôåêòîâ, ñâÿçàí-
íûõ ñ òåêñòîì è ìûøüþ, âêëþ÷àÿ îïðåäåëåíèå ïîëîæåíèÿ óêàçà-
òåëÿ ìûøè íåïîñðåäñòâåííî â ñöåíàðèè è ÷òåíèå ñèìâîëîâ, ââî-
äèìûõ ñ êëàâèàòóðû. Çäåñü òàêæå áóäóò ïðîäåìîíñòðèðîâàíû
íîâûå ýôôåêòû Dynamic HTML, òàêèå êàê èçìåíåíèå öâåòà ãè-
ïåðññûëêè ïðè ïîìåùåíèè íà íåå óêàçàòåëÿ ìûøè.
Â ãëàâå 5 ðàññìîòðèâàþòñÿ îñîáåííîñòè ðåàëèçàöèè Dy-
namic HTML â Internet Explorer. Â ýòîì áðîóçåðå âñå HTML-òý-
ãè ÿâëÿþòñÿ àêòèâíûìè â òîì ñìûñëå, â êîòîðîì ïðåæäå áûëè
àêòèâíûìè ëèøü êíîïêè è òåêñòîâûå ïîëÿ (ò.å. ñ òî÷êè çðåíèÿ
âîçìîæíîñòè íàïèñàíèÿ äëÿ íèõ ñöåíàðèåâ). Çäåñü òàêæå áóäåò
ïîêàçàíî, ÷òî íà îáû÷íîé Web-ñòðàíèöå ìîæåò ñîäåðæàòüñÿ ãî-
ðàçäî áîëüøå èíôîðìàöèè, ÷åì êàæåòñÿ íà ïåðâûé âçãëÿä.
Ãëàâà 6 ïîëíîñòüþ ïîñâÿùåíà ñîçäàíèþ íîâûõ ãðàôè÷åñêèõ
ýôôåêòîâ. ×èòàòåëü óçíàåò, êàê ñ ïîìîùüþ ôèëüòðîâ ìîæíî èç-
ìåíÿòü ãðàôè÷åñêîå èçîáðàæåíèå íà ýêðàíå (íàïðèìåð, ïåðåâî-
ðà÷èâàòü èëè ñîçäàâàòü ýôôåêò âîëíû è ìíîãîå äðóãîå). Áóäåò
òàêæå îïèñàíî, êàê íàêëàäûâàòü òåêñò íà èçîáðàæåíèå, ñîçäàâ-
àòü âåëèêîëåïíûå ãðàôè÷åñêèå ýôôåêòû ñ ïîìîùüþ ýëåìåíòà
óïðàâëåíèÿ Structured graphics è èñïîëüçîâàòü ñëîè.
Â ãëàâå 7 ðàññêàçûâàåòñÿ î ñîçäàíèè ãðàôè÷åñêîé àíèìàöèè.
Ïðè èñïîëüçîâàíèè ýôôåêòîâ äèíàìè÷åñêîãî ïåðåìåùåíèÿ, âðà-
ùåíèÿ è óâåëè÷åíèÿ èçîáðàæåíèÿ Web-ñòðàíèöà “îæèâàåò”.
Â ýòîé ãëàâå áóäåò ïîêàçàíî, êàê ïåðåòàñêèâàòü èçîáðàæåíèÿ ñ
ïîìîùüþ ìûøè è èñïîëüçîâàòü ñëîè äëÿ ñîçäàíèÿ àíèìàöèè.
Â ãëàâå 8 ìû íàó÷èìñÿ ñîçäàâàòü äèàëîãîâûå îêíà, êîòîðûå
ïîÿâëÿþòñÿ íà Web-ñòðàíèöå. Äèàëîãîâûå îêíà ÿâëÿþòñÿ âàæíîé
9

îñîáåííîñòüþ ëþáîé Web-ñòðàíèöû, è èõ èñïîëüçîâàíèå ìîæåò
áûòü âåñüìà ýôôåêòèâíûì.
È, íàêîíåö, â ãëàâå 9 ìû ïîçíàêîìèìñÿ ñ òåì, êàê â Internet
Explorer ðåàëèçóåòñÿ òåõíîëîãèÿ ñâÿçûâàíèÿ äàííûõ ñ Web-
ñòðàíèöåé. Êîãäà îïðåäåëåííàÿ èíôîðìàöèÿ ïðèâÿçûâàåòñÿ ê
Web-ñòðàíèöå, áðîóçåðó íå íóæíî ìíîãîêðàòíî îáðàùàòüñÿ ê
Web-ñåðâåðó, ïîñêîëüêó âñå íåîáõîäèìûå äàííûå ê ýòîìó ìî-
ìåíòó óæå çàãðóæåíû è èõ ìîæíî ñîðòèðîâàòü, ôèëüòðîâàòü èëè
ïðîèçâîäèòü ñ íèìè ëþáûå äðóãèå ìàíèïóëÿöèè.
Âñå ïðèìåðû, ïðèâåäåííûå â äàííîé êíèãå, ìîæíî òàêæå
íàéòè íà ñîîòâåòñòâóþùåì Web-óçëå (ñì. Ïðèëîæåíèå).
Какие инструменты вам понадобятся
Äëÿ òîãî ÷òîáû ïîëüçîâàòüñÿ ïðèìåðàìè èç äàííîé êíèãè,
íóæíî èìåòü ëèøü íåñêîëüêî èíñòðóìåíòîâ, îäèí èç íèõ —
Web-áðîóçåð. Êàê óæå óïîìèíàëîñü âûøå, íà ñåãîäíÿøíèé äåíü
Dynamic HTML ïîääåðæèâàþò äâà Web-áðîóçåðà — Microsoft
Internet Explorer 4 è Netscape Navigator 4. Âïîëíå äîñòàòî÷íî
èìåòü îäèí èç íèõ. Îäíàêî äëÿ òåõ, êòî õî÷åò ïðîôåññèîíàëüíî
çàíèìàòüñÿ ïðîãðàììèðîâàíèåì íà Dynamic HTML, ïîíàäîáÿò-
ñÿ îáà. Ñóùåñòâóåò áîëüøàÿ ðàçíèöà ìåæäó òåì, ÷òî âêëàäûâàåò-
ñÿ â ïîíÿòèå Dynamic HTML ïðèìåíèòåëüíî ê ýòèì äâóì áðî-
óçåðàì. Â ýòîì ïëàíå âåðñèÿ äëÿ Internet Explorer çíà÷èòåëüíî
øèðå, ÷åì âåðñèÿ äëÿ Netscape Navigator.
Êðîìå áðîóçåðà âàì ïîíàäîáèòñÿ åùå êàêîé-íèáóäü òåêñòî-
âûé ðåäàêòîð, â êîòîðîì ìîæíî ñîçäàâàòü Web-ñòðàíèöû. Êàê
áóäåò ïîêàçàíî â ãëàâå 1, ýòîò ðåäàêòîð äîëæåí îáåñïå÷èâàòü
âîçìîæíîñòü ñîõðàíåíèÿ òåêñòà â ôîðìàòå “ïðîñòîé òåêñò”, ðàñ-
ïîçíàâàåìîì Web-áðîóçåðîì. Åñëè ó âàñ åñòü êàêàÿ-íèáóäü ñïå-
öèàëüíàÿ ïðîãðàììà äëÿ ñîçäàíèÿ Web-ñòðàíèö, òî îíà òàêæå
âàì ïðèãîäèòñÿ. Îäíàêî ìû íå áóäåì ðàññìàòðèâàòü ýôôåêòû,
êîòîðûå ÷àñòî ñîçäàþòñÿ íà Web-ñòðàíèöàõ ñ ïîìîùüþ òàêèõ
ïðîãðàìì.
10

Âàì ìîæåò ïîíàäîáèòüñÿ òàêæå ãðàôè÷åñêèé ðåäàêòîð, ñ ïî-
ìîùüþ êîòîðîãî ìîæíî ñîçäàâàòü è ðåäàêòèðîâàòü èçîáðàæåíèÿ.
Îäíàêî íàëè÷èå òàêîé ïðîãðàììû íå ÿâëÿåòñÿ îáÿçàòåëüíûì,
ïîñêîëüêó âñå èñïîëüçóþùèåñÿ â äàííîé êíèãå ãðàôè÷åñêèå
ôàéëû ìîæíî íàéòè íà ñîîòâåòñòâóþùåì Web-óçëå. Ýòèì ìîæ-
íî çàêîí÷èòü ïåðå÷åíü ñðåäñòâ, íåîáõîäèìûõ äëÿ óñïåøíîé ðà-
áîòû ñ äàííîé êíèãîé.
Áîëåå ïîäðîáíóþ èíôîðìàöèþ î ñïåöèôèêå ðåàëèçàöèè
Dynamic HTML äëÿ ðàçëè÷íûõ áðîóçåðîâ ìîæíî íàéòè íà ñëå-
äóþùèõ Web-óçëàõ: www.microsoft.com/workshop/author äëÿ áðî-
óçåðà Microsoft è developer.netscape.com/tech/dynhtml äëÿ áðîóçå-
ðà Netscape.
Ýòà êíèãà ïîñòðîåíà íà ïðèìåðàõ, ò.ê. áëàãîäàðÿ èì ïðîùå ïî-
íÿòü, êàê ðàáîòàþò íåêîòîðûå âåùè. Ïðèìåðû â êíèãå (âñåãî èõ
áîëåå ñîðîêà) äëÿ áîëüøåé ÿñíîñòè ïîäîáðàíû ïî ïðèíöèïó ïî-
ñòåïåííîãî íàðàùèâàíèÿ ñëîæíîñòè. Êîãäà â Web-ñòðàíèöó äî-
áàâëÿåòñÿ íîâûé êîä, òî îí âûäåëÿåòñÿ ïîëóæèðíûì øðèôòîì:
<HTML>
<HEAD>
<TITLE>Íîâûé ïðèìåð</TITLE>
</HEAD>
.
.
.
Ïðèìåðû áóäóò êðàòêèìè, õîðîøî ñòðóêòóðèðîâàííûìè è
íàãëÿäíûìè. Âàì íå ïðèäåòñÿ ïðîñìàòðèâàòü ìíîæåñòâî ñòðà-
íèö êîäà, ÷òîáû ðàçîáðàòüñÿ â êàêîì-íèáóäü âîïðîñå.
Что находится на Web-узле
Âñå ïðèìåðû, ïðèâåäåííûå â äàííîé êíèãå, ìîæíî íàéòè
íà ñîîòâåòñòâóþùåì Web-óçëå. Ìîæíî ëèáî ïðîñòî çàãðóçèòü
ôàéë code.zip ñ òåêñòàìè ïðèìåðîâ, ëèáî ïðîñìîòðåòü ïðèìå-
ðû ïî îòäåëüíîñòè ïóòåì àêòèâèçàöèè ñîîòâåòñòâóþùåé ãèïåð-
ññûëêè. Êàæäàÿ òàêàÿ ãèïåðññûëêà óêàçûâàåò íà Web-ñòðàíèöó
èç äàííîé êíèãè.
11

Åñëè âû ðåøèòå çàãðóçèòü ôàéë code.zip è ðàñïàêîâàòü
åãî, òî äëÿ êàæäîãî ïðèìåðà áóäåò ñîçäàí ñâîé ñîáñòâåííûé êà-
òàëîã, â êîòîðîì áóäåò ñîäåðæàòüñÿ èñõîäíûé òåêñò ïðèìåðà.
×òîáû ïîñìîòðåòü, êàê îí ðàáîòàåò, îòêðîéòå ôàéë ñ ðàñøèðåíè-
åì htm â êàòàëîãå, èìÿ êîòîðîãî ñîîòâåòñòâóåò èìåíè ïðèìåðà.
С чего начать
Ìû ãîòîâû ê ðàáîòå! Íî äëÿ òîãî ÷òîáû ïðèñòóïèòü ê èçó÷å-
íèþ Dynamic HTML, íåîáõîäèìî èìåòü îïðåäåëåííûå íàâûêè
ïî ðàçðàáîòêå Web-ñòðàíèö. Ïîýòîìó â ãëàâå 1 èçëîæåíû îñíî-
âîïîëàãàþùèå ïîíÿòèÿ. Åñëè âû ñ÷èòàåòå, ÷òî äîñòàòî÷íî õîðî-
øî ðàçáèðàåòåñü â ñîçäàíèè ñòàíäàðòíûõ Web-ñòðàíèö, òî ìîæåòå
ñðàçó ïðèñòóïèòü ê èçó÷åíèþ ãëàâû 2. Ïîñêîëüêó íà Web-ñòðà-
íèöå òåïåðü ìîãóò ñòàòü àêòèâíûìè ïî÷òè âñå ýëåìåíòû, òî äëÿ
íà÷àëà íåîáõîäèìî âûðàáîòàòü îáùèé ïîäõîä ê ðàáîòå ñ íèìè.
Ýòîé öåëè êàê ðàç è ñîîòâåòñòâóåò ãëàâà 2, êîòîðàÿ ïðåäñòàâëÿåò
ñîáîé ââåäåíèå â ìåòîäû ðàçðàáîòêè ñöåíàðèåâ Web-ñòðàíèö.
Ãëàâà 1 íà÷íåòñÿ ñ ñîçäàíèÿ ñòàíäàðòíîé Web-ñòðàíèöû. Ýòà
ãëàâà ÿâëÿåòñÿ îáçîðíîé, åå çàäà÷à — íåñêîëüêî îñâåæèòü âàøó
ïàìÿòü. Åñëè îáúåì èçëîæåííîãî â íåé ìàòåðèàëà îêàæåòñÿ äëÿ
âàñ íåäîñòàòî÷íûì, îáðàòèòåñü ê áîëåå îñíîâàòåëüíûì êíèãàì
ïî ñòàíäàðòíîìó (ñòàòè÷åñêîìó) HTML. Ñ äðóãîé ñòîðîíû, åñëè
âû óæå èìååòå íåêîòîðûå íàâûêè ïðîãðàììèðîâàíèÿ íà HTML,
òî íå òåðÿéòå âðåìåíè è ïðèñòóïàéòå ê ÷òåíèþ äàííîé ãëàâû.
12

ÃËÀÂÀ ÏÅÐÂÀß
Îñíîâû HTML
Â ýòîé ãëàâå ìû ðàññìîòðèì ñàì HTML (HyperText Markup
Language — ÿçûê ðàçìåòêè ãèïåðòåêñòà), ÷òîáû çàëîæèòü ïðî÷-
íûå îñíîâû çíàíèé â îáëàñòè ðàçðàáîòêè Web-ñòðàíèö, íà êîòî-
ðûõ ìîãëè áû áàçèðîâàòüñÿ äàëüíåéøèå çíàíèÿ. Web-ñòðàíèöû
ïèøóòñÿ íà HTML è îáû÷íî ïåðåäàþòñÿ ïðîâàéäåðó óñëóã
Internet (ISP — Internet Service Provider) äëÿ ðàçìåùåíèÿ íà
Web-ñåðâåðå. Ïîäðîáíîñòè óñòàíîâêè Web-ñòðàíèöû íà ñåðâåðå
ISP ÿâëÿþòñÿ ñïåöèôè÷íûìè äëÿ êàæäîãî ïðîâàéäåðà. Êàê ïðà-
âèëî, äëÿ ïîëó÷åíèÿ ñòðàíèöû ñ Web-ñåðâåðà èñïîëüçóåòñÿ ïðî-
òîêîë HTTP (HyperText Transfer Protocol — ïðîòîêîë ïåðåäà÷è
ãèïåðòåêñòà). Àäðåñ Web-ñòðàíèöû íàçûâàåòñÿ URL (Universal
Resource Locator — óíèâåðñàëüíûé ëîêàòîð ðåñóðñîâ). Îáû÷íî
URL íà÷èíàåòñÿ ñî ñïåöèôèêàòîðà http:, êàê, íàïðèìåð, àäðåñ
óçëà Microsoft (http://www.microsoft.com) èëè óçëà Netscape (http://
www.netscape.com).
Íàñêîëüêî ïðîñòîé ìîæåò áûòü Web-ñòðàíèöà? Î÷åíü ïðî-
ñòîé — ôàêòè÷åñêè, íà Web-ñåðâåðå ìîæíî ðàçìåñòèòü ôàéëû ñ ïðî-
ñòûì (íå HTML) òåêñòîì, è ïîëüçîâàòåëè ìîãóò áåç ïðîáëåì çàãðó-
çèòü èõ è ïðîñìîòðåòü â ñâîèõ Web-áðîóçåðàõ.
-------------------------------------------
| |
| Ïðèìåð òåêñòà |
| |
-------------------------------------------
Êîíå÷íî, åñëè áû âñå ñâîäèëîñü òîëüêî ê ýòîìó, òî êíèãà áû-
ëà áû î÷åíü êîðîòêîé. Ïðîñòîé òåêñò âûãëÿäèò òî÷íî òàê æå, êàê
îí âûãëÿäåë áû â ðåäàêòîðàõ Notepad èëè WordPad â Windows.
13

Ñäåëàòü ïåðâûé øàã â ñîçäàíèè Web-ñòðàíèöû — ýòî íà÷àòü èñ-
ïîëüçîâàòü òýãè HTML.
Тэги HTML
Web-áðîóçåðû èñïîëüçóþò òýãè HTML äëÿ òîãî, ÷òîáû ïî-
íÿòü, êàêîé âíåøíèé âèä äîëæíà èìåòü Web-ñòðàíèöà. Ñ ïîìîùüþ
òýãîâ ìîæíî çàäàâàòü öâåòà, çàãîëîâêè, òàáëèöû, èçîáðàæåíèÿ è
ìíîãîå äðóãîå. ×òîáû Web-áðîóçåð ðàñïîçíàë Web-ñòðàíèöó, åå
êîä äîëæåí íà÷èíàòüñÿ òýãîì <HTML>. Âñå òýãè HTML çàêëþ÷à-
þòñÿ â óãëîâûå ñêîáêè < è >:
------------------------------------------------
|<HTML> |
| |
| |
-------------------------------------------------
Òåêñò “<HTML>” äåéñòâèòåëüíî ââîäèòñÿ â äîêóìåíò, êîòî-
ðûé äîëæåí ñòàòü Web-ñòðàíèöåé. Web-ñòðàíèöû ìîæíî ñîçäà-
âàòü â ëþáîì ñòàíäàðòíîì òåêñòîâîì ïðîöåññîðå èëè ðåäàêòîðå,
êîòîðûé îáåñïå÷èâàåò ñîõðàíåíèå òåêñòà â ôîðìàòå “òîëüêî
òåêñò”, áåç ñïåöèàëüíûõ êîäîâ ôîðìàòèðîâàíèÿ. (Òàê åñëè âû
ðàáîòàåòå â ðåäàêòîðå WordPad â Windows 95, âûáåðèòå â ìåíþ
“Ôàéë” êîìàíäó “Ñîõðàíèòü êàê...”, à â ïîÿâèâøåìñÿ îêíå — îï-
öèþ “Òåêñòîâûé äîêóìåíò” èç ñïèñêà “Òèï ôàéëà”.) Òàêèå ôàéëû
äîëæíû èìåòü ðàñøèðåíèå html èëè htm. Â ýòîé êíèãå èñïîëüçó-
åòñÿ ñîãëàøåíèå îá èìåíàõ ôàéëîâ â ôîðìàòå 8.3 (ìàêñèìóì âî-
ñåìü ñèìâîëîâ è ðàñøèðåíèå èç òðåõ ñèìâîëîâ), ïîýòîìó áóäåò
èñïîëüçîâàòüñÿ ðàñøèðåíèå htm. Ïåðâóþ ñîçäàííóþ Web-ñòðà-
íèöó, êîòîðàÿ ïðåäíàçíà÷åíà äëÿ îçíàêîìëåíèÿ ñ HTML, íàçî-
âåì html.htm. Âîò íà÷àëüíàÿ ñòðîêà èç ýòîãî ôàéëà:
<HTML>
.
.
.
14

À ñåé÷àñ ïîçíàêîìèìñÿ ñ ýëåìåíòîì, îáëåã÷àþùèì ïîíèìà-
íèå ðàáîòû Web-ñòðàíèöû, — ñ êîììåíòàðèÿìè.
Комментарии на Web-странице
Ïðè ñîçäàíèè Web-ñòðàíèöû ïðîãðàììèñò ìîæåò äîáàâëÿòü
äëÿ ñåáÿ íåêîòîðûå ïðèìå÷àíèÿ, íî íå ïîêàçûâàòü èõ ïîëüçîâà-
òåëÿì. Äëÿ ýòîãî èñïîëüçóþòñÿ êîììåíòàðèè. Êîììåíòàðèè íå
îòîáðàæàþòñÿ Web-áðîóçåðàìè, íî ñëåäóåò èìåòü â âèäó, ÷òî èõ
òåêñò çàãðóæàåòñÿ âìåñòå ñ Web-ñòðàíèöåé, óâåëè÷èâàÿ äëè-
òåëüíîñòü çàãðóçêè. Êîììåíòàðèè çàêëþ÷àþòñÿ â óãëîâûå ñêîá-
êè < è > è íà÷èíàþòñÿ ñ âîñêëèöàòåëüíîãî çíàêà, íàïðèìåð:
<!-- Ýòî êîììåíòàðèé. Êîììåíòàðèè èñïîëüçóþòñÿ äëÿ òîãî,
÷òîáû ââåñòè ïîÿñíèòåëüíûé òåêñò â Web-ñòðàíèöó, êàê
ýòî ñäåëàíî â äàííîì ïðèìåðå. Web-ñòðàíèöà íà÷èíàåòñÿ
ñ òýãà HTML, ïîêàçûâàþùåãî, ÷òî îíà íàïèñàíà íà ÿçûêå
ðàçìåòêè ãèïåðòåêñòà.>
<HTML>
.
.
.
Закрывающие тэги
Ïî÷òè äëÿ êàæäîãî HTML-òýãà, òàêîãî êàê <HTML>, òðåáó-
åòñÿ çàêðûâàþùèé òýã, òåêñò êîòîðîãî íà÷èíàåòñÿ êîñîé ÷åðòîé,
íàïðèìåð </HTML>. Äîáàâèì åãî â êîíåö ôàéëà html.htm:
-------------------------------------------------
|<HTML> |
| |
| |
|</HTML> |
-------------------------------------------------
Â òåêñòå ðåàëüíîãî ôàéëà Web-ñòðàíèöû ýòî áóäåò âûãëÿ-
äåòü òàê:
÷òîáû ââåñòè ïîÿñíèòåëüíûé òåêñò â Web-ñòðàíèöó,
êàê ýòî ñäåëàíî â äàííîì ïðèìåðå. Web-ñòðàíèöà
15

íà÷èíàåòñÿ ñ òýãà HTML, ïîêàçûâàþùåãî,
÷òî îíà íàïèñàíà íà ÿçûêå ðàçìåòêè
ãèïåðòåêñòà.>
<HTML>
.
.
.
</HTML>
Íà ñàìîì äåëå, áîëüøèíñòâî Web-áðîóçåðîâ äîïóñêàþò îò-
ñóòñòâèå òýãà <HTML> è íåêîòîðûõ äðóãèõ òýãîâ, à òàêæå íàëè-
÷èå äðóãèõ îøèáîê. Web-áðîóçåðû ñòîëü òåðïèìû ïîòîìó, ÷òî ó
ëþäåé, ïðîñìàòðèâàþùèõ Web-ñòðàíèöû, íåò âîçìîæíîñòè èñ-
ïðàâèòü îøèáêó, õîòÿ, åñòåñòâåííî, ïðîãðàììèñò äîëæåí ñòà-
ðàòüñÿ ñîçäàâàòü Web-ñòðàíèöû áåç îøèáîê. Äëÿ ïîèñêà îøèáîê
ìîæíî èñïîëüçîâàòü ñïåöèàëüíûå ïðîãðàììû ïðîâåðêè. Åñëè âû
õîòèòå íàéòè ïîäîáíóþ ïðîãðàììó â Internet, îáðàòèòåñü íà êà-
êîé-íèáóäü ïîèñêîâûé ñåðâåð è ïðîñòî ââåäèòå ñëîâî “validator”.
Ïðîãðàììû ïðîâåðêè ñ÷èòûâàþò Web-ñòðàíèöó ïî ïåðåäàííî-
ìó èì URL, à çàòåì ïðåäîñòàâëÿþò îò÷åò îáî âñåõ îáíàðóæåííûõ
îøèáêàõ.
Òåïåðü, êîãäà ñîçäàí îáùèé âèä Web-ñòðàíèöû, ðàññìîòðèì
ïåðâûé ýëåìåíò áîëüøèíñòâà Web-ñòðàíèö — çàãîëîâîê.
Заголовок Web-страницы
Web-ñòðàíèöà îáû÷íî íà÷èíàåòñÿ ñ çàãîëîâêà, êîòîðûé óñòàíàâ-
ëèâàåòñÿ ñ ïîìîùüþ òýãà <HEAD>:
-------------------------------------------------
|<HTML> |
| |
| --------------------------------------------- |
| |<HEAD> | |
| | | |
| | | |
| |</HEAD> | |
| --------------------------------------------- |
-------------------------------------------------
16

Ðàíüøå çàãîëîâîê âêëþ÷àë ôîðìàëüíóþ ñòðóêòóðó ñ ôîðìà-
òèðîâàííîé èíôîðìàöèåé îá îñòàëüíîé ÷àñòè ñòðàíèöû, íî
òåïåðü îí èñïîëüçóåòñ¸ ëèøü â ñîêðàùåííîì âàðèàíòå è, êàê
ïðàâèëî, ñîäåðæèò òîëüêî çàãëàâèå Web-ñòðàíèöû.
Заглавие Web-страницы
Çàãëàâèå èãðàåò âàæíóþ ðîëü (õîòÿ ìíîãèå ïðîãðàììèñòû íå
îñîçíàþò ýòîãî è ÷àñòî ïðîïóñêàþò åãî), ïîñêîëüêó åãî òåêñò
ïîÿâèòñÿ â ñòðîêå çàãîëîâêà Web-áðîóçåðà ïðè âûâîäå ñòðàíèöû.
Ýòîò òåêñò èñïîëüçóåòñÿ òàêæå ïîèñêîâûìè ñèñòåìàìè Internet,
òàêèìè êàê Yahoo èëè AltaVista. Çàãëàâèå óñòàíàâëèâàåòñÿ ñ ïî-
ìîùüþ òýãà <TITLE> â çàãîëîâêå Web-ñòðàíèöû. Îáðàòèòå
âíèìàíèå íà íàëè÷èå çàêðûâàþùåãî òýãà </TITLE>:
------------------------------------------------
|<HTML> |
| |
| -------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |Ýòî çàãëàâèå | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| -------------------------------------------- |
------------------------------------------------
Äàâàéòå äîáàâèì çàãëàâèå “Äîáðî ïîæàëîâàòü â Dynamic
HTML!” â ðàçðàáàòûâàåìóþ Web-ñòðàíèöó. Ýòî áóäåò âûãëÿ-
äåòü òàê:
<!-- Ýòî êîììåíòàðèé. Êîììåíòàðèè èñïîëüçóþòñÿ äëÿ
òîãî, ÷òîáû ââåñòè ïîÿñíèòåëüíûé òåêñò â
Web-ñòðàíèöó, êàê ýòî ñäåëàíî â äàííîì ïðèìåðå.
Web-ñòðàíèöà íà÷èíàåòñÿ ñ òýãà HTML, ïîêàçûâàþùåãî,
÷òî îíà íàïèñàíà íà ÿçûêå ðàçìåòêè ãèïåðòåêñòà.>
<HTML>
<!-- Ñëåäóþùèé ðàçäåë — ýòî çàãîëîâîê. Çäåñü ðàçìåùàåòñÿ
17

çàãëàâèå Web-ñòðàíèöû, êîòîðîå âûâîäèòñÿ Web-áðîóçåðàìè
è èñïîëüçóåòñÿ â ïîèñêîâûõ ñèñòåìàõ Internet. Çàãîëîâîê
çàäàåòñÿ òýãîì HEAD, à çàãëàâèå — òýãîì TITLE.>
<HEAD>
<TITLE>Äîáðî ïîæàëîâàòü â Dynamic HTML!</TITLE>
</HEAD>
.
.
.
Òåïåðü ïåðåéäåì ê òîé ÷àñòè Web-ñòðàíèöû, ãäå âûïîëíÿþò-
ñÿ âñå îñíîâíûå äåéñòâèÿ.
Тело Web-страницы
Òåëî Web-ñòðàíèöû ñîçäàåòñÿ ñ ïîìîùüþ òýãà <BODY>:
--------------------------------------------------
|<HTML > |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| |</BODY> | |
| ---------------------------------------------- |
| |
|</HTML> |
--------------------------------------------------
Â òýãå <BODY> ìîæíî èñïîëüçîâàòü ðÿä êëþ÷åâûõ ñëîâ, íà-
çûâàåìûõ àòðèáóòàìè, äëÿ óñòàíîâêè òàêèõ ïàðàìåòðîâ, êàê öâåò
18

ôîíà ñòðàíèöû, öâåò òåêñòà ïî óìîë÷àíèþ, öâåò ãèïåðññûëîê (ò.å.
âûäåëåííûõ îáúåêòîâ, êîòîðûå ìîæíî àêòèâèçèðîâàòü äëÿ òîãî, ÷òî-
áû ïåðåéòè â íîâîå ìåñòî), öâåò ãèïåðññûëîê, êîòîðûå óæå ïîñåùà-
ëèñü, è äð. Íèæå îïèñàíî, êàê èñïîëüçîâàòü òýã <BODY> â Internet
Explorer è Netscape Navigator. Êîãäà äàëåå â êíèãå áóäóò ââîäèòüñÿ
íîâûå HTML-òýãè, îíè áóäóò îïèñûâàòüñÿ äëÿ îáîèõ áðîóçåðîâ òà-
êèì æå îáðàçîì.
Internet Explorer Netscape Navigator
<BODY <BODY
ALIGN=CENTER | LEFT | RIGHT ALINK="öâåò"
ALINK=öâåò BACKGROUND="URL ôîíà"
BACKGROUND=ñòðîêà BGCOLOR="öâåò"
BGCOLOR=öâåò LINK="öâåò"
BGPROPERTIES=FIXED TEXT="öâåò"
BOTTOMMARGIN=öåëîå ÷èñëî ONBLUR="JavaScript-êîä"
CLASS=ñòðîêà ONFOCUS="JavaScript-êîä"
ID=èäåíòèôèêàòîð ONLOAD="JavaScript-êîä"
LANG=ñòðîêà ONUNLOAD="JavaScript-êîä"
LANGUAGE=JAVASCRIPT |
VBSCRIPT
VLINK="öâåò"
LEFTMARGIN=öåëîå ÷èñëî >
LINK=öâåò
RIGHTMARGIN=öåëîå ÷èñëî
SCROLL=YES | NO
STYLE=ñòðîêà
TEXT=öâåò
TITLE=ñòðîêà
TOPMARGIN=öåëîå ÷èñëî
VLINK=öâåò
ñîáûòèå=ñöåíàðèé
>
19

Â äàííîì ñëó÷àå äàâàéòå çàäàäèì öâåò òåêñòà, ãèïåðññûëîê,
àêòèâíûõ ãèïåðññûëîê è ãèïåðññûëîê, êîòîðûå óæå ïîñåùàëèñü.
Öâåò óñòàíàâëèâàåòñÿ ïóòåì óêàçàíèÿ çíà÷åíèÿ êðàñíîé, çåëå-
íîé è ñèíåé ñîñòàâëÿþùèõ â øåñòíàäöàòåðè÷íîì (ïî îñíîâà-
íèþ 16) ôîðìàòå. Çíà÷åíèå êàæäîé ñîñòàâëÿþùåé ìîæåò èçìå-
íÿòüñÿ îò 0 äî 255, ÷òî â øåñòíàäöàòåðè÷íîé ñèñòåìå
ñîîòâåòñòâóåò ÷èñëàì îò 00 äî ff. Çíà÷åíèÿ âñåõ ñîñòàâëÿþùèõ
öâåòà êîìïîíóþòñÿ â øåñòèçíà÷íîå øåñòíàäöàòåðè÷íîå ÷èñëî —
ñíà÷àëà çíà÷åíèå êðàñíîé ñîñòàâëÿþùåé, çàòåì çåëåíîé è ñèíåé.
Òàê, â ÷åðíîì öâåòå çíà÷åíèÿ âñåõ ñîñòàâëÿþùèõ ðàâíû 0, ïîýòî-
ìó îí ïðåäñòàâëÿåòñÿ êàê 000000. Â áåëîì öâåòå çíà÷åíèÿ âñåõ
ñîñòàâëÿþùèõ ðàâíû 255 (ff), è îí ïðåäñòàâëÿåòñÿ êàê ffffff. ×èñ-
òûé êðàñíûé öâåò ïðåäñòàâëÿåòñÿ êàê ff0000, çåëåíûé — 00ff00,
ñèíèé — 0000ff. Öâåòà, êîòîðûå ñëåäóåò çàäàòü äëÿ Web-ñòðàíè-
öû, óñòàíàâëèâàþòñÿ â òýãå <BODY> ñëåäóþùèì îáðàçîì:
<HTML>
<!-- Ñëåäóþùèé ðàçäåë — ýòî çàãîëîâîê. Çäåñü
ðàçìåùàåòñÿ çàãëàâèå Web-ñòðàíèöû, êîòîðîå âûâîäèòñÿ
Web-áðîóçåðàìè è èñïîëüçóåòñÿ â ïîèñêîâûõ ñèñòåìàõ
Internet. Çàãîëîâîê çàäàåòñÿ òýãîì HEAD, à çàãëàâèå —
òýãîì TITLE.>
<HEAD>
</HEAD>
<!-- Çàòåì ðàñïîëàãàåòñÿ òåëî Web-ñòðàíèöû. Çäåñü â
òýãå BODY óñòàíàâëèâàþòñÿ ïàðàìåòðû åå îôîðìëåíèÿ.>
<BODY TEXT = ffff00 LINK = ff0000 ALINK = ffffff
VLINK = ffff00>
.
.
.
20

Íå âñåãäà áûâàåò ïðîñòî ïîëó÷èòü öâåòîâûå çíà÷åíèÿ äëÿ
òåõ öâåòîâ, êîòîðûå íóæíû, ïîýòîìó äëÿ Web-áðîóçåðîâ îïðåäå-
ëåíî ìíîæåñòâî öâåòîâûõ êîíñòàíò, êîòîðûå ìîæíî óêàçûâàòü
âìåñòî øåñòíàäöàòåðè÷íûõ çíà÷åíèé (òàáë. 1.1). Êàæäîìó öâåòó
òàêæå ñîîòâåòñòâóåò îïðåäåëåííîå øåñòíàäöàòåðè÷íîå çíà÷å-
íèå. Íàïðèìåð, ñåðîìó öâåòó — 808080, êîðàëëîâîìó — ff7f50,
ìàëèíîâîìó — dc143c è òàê äàëåå.
Таблица 1.1. Предопределенные цветовые константы
21
aliceblue antiquewhite aqua
quamarine azure beige
bisque black blanchedalmond
blue blueviolet brown
burlywood cadetblue chartreuse
chocolate coral cornflowerblue
cornsilk crimson cyan
darkblue darkcyan darkgoldenrod
darkgray darkgreen darkkhaki
darkmagenta darkolivegreen darkorange
darkorchid darkred darksalmon
darkseagreen darkslateblue darkslategray
darkturquoise darkviolet deeppink
deepskyblue dimgray dodgerblue
firebrick floralwhite forestgreen
fuchsia gainsboro ghostwhite
gold goldenrod gray
green greenyellow honeydew
hotpink indianred indigo
ivory khaki lavender
lavenderblush lawngreen lemonchiffon
lightblue lightcoral lightcyan
lightgoldenrodyellow lightgreen lightgrey
lightpink lightsalmon lightseagreen

Òåïåðü íàçíà÷èì èçîáðàæåíèå, êîòîðîå áóäåò èñïîëüçîâàòü-
ñÿ â êà÷åñòâå ôîíà Web-ñòðàíèöû. Web-áðîóçåð àâòîìàòè÷åñêè
“ðàçìíîæèò” äàííîå èçîáðàæåíèå äëÿ çàïîëíåíèÿ âñåãî ôîíà.
Использование изображения в качестве фона
×òîáû íàçíà÷èòü èçîáðàæåíèå, êîòîðîå äîëæíî áûòü èñ-
ïîëüçîâàíî â êà÷åñòâå ôîíà Web-ñòðàíèöû, ìîæíî ïðèìåíèòü
åùå îäèí òýã <BODY>, óêàçàâ â àòðèáóòå BACKGROUND èìÿ
22
lightskyblue lightslategray lightsteelblue
lightyellow lime limegreen
linen magenta maroon
mediumaquamarine mediumblue mediumorchid
mediumpurple mediumseagreen mediumslateblue
mediumspringgreen mediumturquoise mediumvioletred
midnightblue mintcream mistyrose
moccasin navajowhite navy
oldlace olive olivedrab
orange orangered orchid
palegoldenrod palegreen paleturquoise
palevioletred papayawhip peachpuff
peru pink plum
powderblue purple red
rosybrown royalblue saddlebrown
salmon sandybrown seagreen
seashell sienna silver
skyblue slateblue slategray
snow springgreen steelblue
tan teal thistle
tomato turquoise violet
wheat white whitesmoke
yellow yellowgreen

ôàéëà èçîáðàæåíèÿ. (Íå îáÿçàòåëüíî èñïîëüçîâàòü íîâûé òýã
<BODY>; ìîæíî ïðîñòî äîáàâèòü àòðèáóò BACKGROUND â
óæå èìåþùèéñÿ òýã <BODY>.)
Ôàéëû èçîáðàæåíèé ÷àñòî õðàíÿòñÿ â ïîäêàòàëîãàõ ñ èìåíà-
ìè images, gif èëè graphics. Â äàííîì ñëó÷àå ôàéë èçîáðà-
æåíèÿ, èñïîëüçóåìîãî â êà÷åñòâå ôîíà (back.gif — ðèñ. 1.1),
ðàçìåùàåòñÿ â ïîäêàòàëîãå gif.
Рис. 1.1. Фоновое изображение back.gif
Ôîíîâîå èçîáðàæåíèå äîáàâëÿåòñÿ ñ óêàçàíèåì ïóòè ê ôàéëó:
<HTML>
òýãîì TITLE.>
<HEAD>
</HEAD>
23

VLINK = ffff00>
<!-- Èñïîëüçóÿ êëþ÷åâîå ñëîâî BACKGROUND, ìîæíî
çàïîëíèòü ôîí Web-ñòðàíèöû òðåáóåìûì èçîáðàæåíèåì.>
<BODY BACKGROUND = "gif/back.gif">
.
.
Íîâûé âèä Web-ñòðàíèöû ïîêàçàí íà ðèñ. 1.2. Êàê ìîæíî
óáåäèòüñÿ, áðîóçåð “ðàçìíîæèë” èçîáðàæåíèå òàêèì îáðàçîì,
÷òîáû ðàâíîìåðíî çàïîëíèòü èì ôîí ñòðàíèöû.
Рис. 1.2. Новый фон Web-страницы
24

Èòàê, òåëî íîâîé Web-ñòðàíèöû ñîçäàíî. Ñëåäóþùèì øà-
ãîì áóäåò âûâåñòè íà íåé êàêîé-íèáóäü òåêñò. Â äàííîì ñëó÷àå
íà ýêðàí âûâîäèòñÿ íàäïèñü “Äîáðî ïîæàëîâàòü â Dynamic
HTML!”.
Видимые заголовки
Web-ñòðàíèöû íè ó êîãî íå âûçîâóò èíòåðåñà, åñëè íà íèõ íå
ñîäåðæèòñÿ êàêîé-ëèáî ïîëåçíîé èíôîðìàöèè. Íà÷íåì ñ âèäè-
ìîãî çàãîëîâêà (íå ïóòàòü ñ íåâèäèìûì çàãîëîâêîì Web-ñòðàíè-
öû, ñîäåðæàùèì åå çàãëàâèå). Äëÿ âûâîäà òàêèõ çàãîëîâêîâ èñ-
ïîëüçóþòñÿ òýãè <H#>. Âñåãî èõ øåñòü — îò <H1> äî <H6>.
Ñ ïîìîùüþ òýãà <H1> çàäàåòñÿ ñàìûé áîëüøîé çàãîëîâîê âåðõíå-
ãî óðîâíÿ:
--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | <H1>Ýòî îñíîâíîé çàãîëîâîê</H1> | |
| | | |
| |</BODY> | |
| ---------------------------------------------- |
| |
|</HTML> |
--------------------------------------------------
25

Ñîçäàâàåìûé çàãîëîâîê ìîæíî òàêæå îòöåíòðèðîâàòü ñ ïî-
ìîùüþ òýãà <CENTER>:
<HTML>
òýãîì TITLE.>
<HEAD>
</HEAD>
VLINK = ffff00>
<!-- Òåïåðü ñîçäàäèì âèäèìûé çàãîëîâîê. Ýòî ìîæíî
ñäåëàòü ñ ïîìîùüþ òýãà H1, êîòîðûé óñòàíàâëèâàåò
ìàêñèìàëüíî âîçìîæíûé ðàçìåð øðèôòà. Òýã CENTER
öåíòðèðóåò ðàñïîëîæåíèå çàãîëîâêà íà Web-ñòðàíèöå.>
<CENTER>
<H1>Äîáðî ïîæàëîâàòü â Dynamic HTML!</H1>
</CENTER>
.
.
Ðåçóëüòàò ðàáîòû ýòîãî ñöåíàðèÿ ïðèâåäåí íà ðèñ. 1.2. Êàê
âèäíî èç ðèñóíêà, çàãîëîâîê “Äîáðî ïîæàëîâàòü â Dynamic
HTML!” âûâîäèòñÿ êðóïíûì øðèôòîì ñ âûðàâíèâàíèåì ïî
26

öåíòðó. Ðàçìåð øðèôòà çàãîëîâêîâ áîëåå íèçêîãî óðîâíÿ ïðîïîð-
öèîíàëüíî óìåíüøàåòñÿ, à çàãîëîâîê <H6> áóäåò âûâîäèòüñÿ ñà-
ìûì ìåëêèì øðèôòîì. Òåïåðü ðàññìîòðèì äðóãóþ íåîòúåìëåìóþ
÷àñòü ñòàíäàðòíîé Web-ñòðàíèöû — èçîáðàæåíèå.
Использование изображений на Web-страницах
Äàâàéòå ïîìåñòèì íà íàøó Web-ñòðàíèöó èçîáðàæåíèå:
--------------------------------------------------
|<HTML > |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | Èçîáðàæåíèå | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| ---------------------------------------------- |
| |
--------------------------------------------------
27

Èçîáðàæåíèå âíåäðÿåòñÿ â Web-ñòðàíèöó ñ ïîìîùüþ òýãà
<IMG>. Òýã äîñòàòî÷íî ñëîæåí è ñîäåðæèò ìíîæåñòâî àòðèáóòîâ:
<IMG <IMG
ALIGN=ABSBOTTOM |
ABSMIDDLE | BASELINE |
BOTTOM | LEFT | MIDDLE |
RIGHT | TEXTTOP | TOP
ALIGN="LEFT" | "RIGHT" |
"TOP" | "ABSMIDDLE" |
"ABSBOTTOM" | "TEXTTOP" |
"MIDDLE" |"BASELINE" |
"BOTTOM"
ALT=ñòðîêà ALT="Àëüòåðíàòèâíûé òåêñò"
BORDER=öåëîå ÷èñëî BORDER="Òîëùèíà ðàìêè
â ïèêñåëàõ"
CLASS=ñòîêà HEIGHT="Âûñîòà"
DATAFLD=ñòðîêà HSPACE="Ãîðèçîíòàëüíàÿ
ãðàíèöà â ïèêñåëàõ"
DATASRC=ñòðîêà ISMAP
DYNSRC=ñòðîêà LOWSRC="Ìåñòîïîëîæåíèå"
HEIGHT=öåëîå ÷èñëî NAME="Èìÿ èçîáðàæåíèÿ"
HSPACE=öåëîå ÷èñëî ONABORT="JavaScript-êîä"
ID=èäåíòèôèêàòîð ONERROR="JavaScript-êîä"
ISMAP ONLOAD="JavaScript-êîä"
LANG=ñòðîêà SRC="Ìåñòîïîëîæåíèå"
VBSCRIPT
SUPPRESS
LOOP=ñòðîêà USEMAP="Ìåñòîïîëîæåíèå#
Èìÿ_èçîáðàæåíèÿ"
LOWSRC=ñòðîêà VSPACE="Âåðòèêàëüíàÿ
NAME=ñòðîêà WIDTH="Øèðèíà"
SRC=ñòðîêà >
STYLE=ñòðîêà
TITLE=ñòðîêà
USEMAP=ñòðîêà
VSPACE=öåëîå ÷èñëî
WIDTH=öåëîå ÷èñëî
>
28

Îäíàêî ïðåæäå ÷åì ðàçìåùàòü èçîáðàæåíèå, ñëåäóåò ñäå-
ëàòü íåáîëüøîé îòñòóï, ÷òîáû îòäåëèòü èçîáðàæåíèå îò çàãî-
ëîâêà.
Тэг <BR>>
Ïåðåä íåïîñðåäñòâåííîé âñòàâêîé èçîáðàæåíèÿ â Web-ñòðà-
íèöó çàðåçåðâèðóåì íåìíîãî ìåñòà ïî âåðòèêàëè ìåæäó íèì è
çàãîëîâêîì, äîáàâëåííûì â ïðåäûäóùåì ïàðàãðàôå. Ýòî ìîæíî
ñäåëàòü ñ ïîìîùüþ òýãà <BR>, êîòîðûé âñòàâëÿåò ñèìâîë ïåðå-
âîäà ñòðîêè (ïîäîáíî ïåðåâîäó ñòðîêè â òåêñòîâîì äîêóìåíòå).
Äëÿ äàííîãî òýãà íå íóæåí çàêðûâàþùèé òýã.
<HTML>
òýãîì TITLE.>
<HEAD>
</HEAD>
VLINK = ffff00>
<!-- Òåïåðü ñîçäàäèì âèäèìûé çàãîëîâîê. Ýòî ìîæíî
ñäåëàòü ñ ïîìîùüþ òýãà H1, êîòîðûé óñòàíàâëèâàåò
ìàêñèìàëüíî âîçìîæíûé ðàçìåð øðèôòà. Òýã CENTER
29

öåíòðèðóåò ðàñïîëîæåíèå çàãîëîâêà íà Web-ñòðàíèöå.>
<CENTER>
<H1>Äîáðî ïîæàëîâàòü â Dynamic HTML!</H1>
</CENTER>
<!-- Òýã BR äîáàâëÿåò ñèìâîë ïåðåâîäà ñòðîêè è
ïîìîãàåò äîáèòüñÿ òðåáóåìîãî ðàñïîëîæåíèÿ ýëåìåíòîâ
íà Web-ñòðàíèöå.>
<BR>
.
.
.
Вставка изображения
Òåïåðü âñå ãîòîâî äëÿ òîãî, ÷òîáû âñòàâèòü èçîáðàæåíèå â
Web-ñòðàíèöó. Îáû÷íî â êà÷åñòâå ïåðâîãî èçîáðàæåíèÿ áåðåòñÿ
ôîòîãðàôèÿ àâòîðà Web-ñòðàíèöû, âìåñòî êîòîðîé â äàííîì
ïðèìåðå èñïîëüçóåòñÿ èçîáðàæåíèå-çàìåíèòåëü yourgif.gif
(ðèñ. 1.3). Ìîæåòå âñòàâèòü âìåñòî íåãî ñâîþ ôîòîãðàôèþ.
(Êðîìå èçîáðàæåíèé ôîðìàòà GIF Web-áðîóçåðû ìîãóò îòîáðà-
æàòü ôàéëû è äðóãèõ ôîðìàòîâ, òàêèõ êàê JPEG, BMP, TIF, à òàê-
æå ôîðìàòîâ âèäåîèçîáðàæåíèé, òàêèõ êàê AVI, MOV è ïð.)
Рис. 1.3. Изображение-заменитель
×òîáû âñòàâèòü èçîáðàæåíèå â Web-ñòðàíèöó ñ ïîìîùüþ òý-
ãà <IMG>, íåîáõîäèìî çíàòü ðàçìåðû èçîáðàæåíèÿ. Äëÿ ýòîãî
ìîæíî èñïîëüçîâàòü ìíîãèå ãðàôè÷åñêèå óòèëèòû, ïðåäëàãàåì-
ûå áåñïëàòíî â Internet. Ñóùåñòâóþò òàêæå ïðîãðàììû, êîòîðûå
30

ìîãóò ïðî÷èòàòü èçîáðàæåíèå ïî ïðåäîñòàâëåííîìó URL è ñî-
îáùèòü åãî ðàçìåðû. Åñëè èçîáðàæåíèå ìîæåò áûòü ïðåîáðàçî-
âàíî â ôîðìàò BMP, òî åãî ìîæíî îòêðûòü â ðåäàêòîðå Paint â
Windows è âûáðàòü äëÿ íåãî íåîáõîäèìûå ðàçìåðû, êîòîðûå
îòîáðàçÿòñÿ â ïðàâîì íèæíåì óãëó. Â äàííîì ñëó÷àå èçîáðàæå-
íèå äîáàâëåíî â Web-ñòðàíèöó ñëåäóþùèì îáðàçîì:
<HTML>
.
.
.
<!-- Òýã BR äîáàâëÿåò ñèìâîë ïåðåâîäà ñòðîêè è
ïîìîãàåò äîáèòüñÿ òðåáóåìîãî ðàñïîëîæåíèÿ ýëåìåíòîâ
íà Web-ñòðàíèöå.>
<BR>
<!-- Òýã IMG ïîêàçûâàåò, ÷òî â Web-ñòðàíèöó áóäåò
âñòàâëåíî èçîáðàæåíèå. Â äàííîì ñëó÷àå ýòî ôàéë
yourgif.gif.>
<CENTER>
<IMG WIDTH=236 HEIGHT=118
SRC="gif/yourgif.gif"></IMG>
</CENTER>
.
.
.
Вывод текста
Ïîêà ÷òî åäèíñòâåííûé òåêñò, êîòîðûé ïðèñóòñòâóåò íà
Web-ñòðàíèöå, — ýòî òåêñò çàãîëîâêà <Í1>, íî ìîæíî òàêæå âû-
âåñòè è îáû÷íûé òåêñò.
31

--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | --------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | --------------------------------------- | |
| ---------------------------------------------- |
| |
--------------------------------------------------
Äëÿ âûâîäà òåêñòà íà Web-ñòðàíèöå åãî ñëåäóåò ïðîñòî ïî-
ìåñòèòü â òåëî ñòðàíèöû. Òåêñò áóäåò âûâîäèòüñÿ öâåòîì è
øðèôòîì, çàäàííûìè òýãîì <BODY>. (Êàê áóäåò ïîêàçàíî íè-
æå, òèï, ðàçìåð è íà÷åðòàíèå øðèôòà ìîæíî èçìåíèòü ñ ïîìî-
32

ùüþ òýãà <FONT>.) Â äàííîì ñëó÷àå íà Web-ñòðàíèöó áóäåò
ïîìåùåí ñëåäóþùèé òåêñò:
Äîáðî ïîæàëîâàòü â îáçîð ïî HTML. Ïîíèìàíèå îñíîâ
HTML ÿâëÿåòñÿ íåîáõîäèìûì äëÿ äàëüíåéøåãî èçó÷åíèÿ
Dynamic HTML. Â ñëåäóþùèõ ãëàâàõ, îñíîâûâàÿñü íà
ïîëó÷åííûõ çíàíèÿõ, ìû áóäåì ïîñòåïåííî äîáàâëÿòü
íîâûå ýëåìåíòû Dynamic HTML, ñîçäàâàÿ îðèãèíàëüíûå
Web-ñòðàíèöû. Çà äîïîëíèòåëüíîé èíôîðìàöèåé ïî äàííîé
òåìå îáðàòèòåñü íà Web-óçåë <A
HREF="http://www.microsoft.com">Microsoft</A>.
Ýòîò òåêñò áóäåò îôîðìëåí îòäåëüíûì àáçàöåì ñ ïîìîùüþ
òýãà <Ð>. Web-áðîóçåð àâòîìàòè÷åñêè âûðîâíÿåò òåêñò ïî øè-
ðèíå ñòðàíèöå.
<HTML>
.
.
.
<!-- Òýã IMG ïîêàçûâàåò, ÷òî â Web-ñòðàíèöó áóäåò
âñòàâëåíî èçîáðàæåíèå.
Â äàííîì ñëó÷àå ýòî ôàéë yourgif.gif.>
<CENTER>
<IMG WIDTH=236 HEIGHT=118
SRC="gif/yourgif.gif"></IMG>
</CENTER>
<!-- Òýã Ð ïîçâîëÿåò îñóùåñòâèòü ïðåäâàðèòåëüíîå
ôîðìàòèðîâàíèå òåêñòà. Âåñü òåêñò, çàêëþ÷åííûé â òýãè
Ð, áóäåò âûâåäåí íà ýêðàí îòäåëüíûì àáçàöåì.>
<P>
33

</P>
<BR>
<BR>
Ðåçóëüòàò ðàáîòû ýòîãî ñöåíàðèÿ ïðèâåäåí íà ðèñ. 1.2. ×òî-
áû ñàìîñòîÿòåëüíî çàäàòü ïàðàìåòðû ôîðìàòèðîâàíèÿ òåêñòà,
çàêëþ÷èòå åãî â òýã <PRE>. Åñëè ïîñòóïèòü òàêèì îáðàçîì, òî
Web-áðîóçåð áóäåò âûâîäèòü òåêñò òî÷íî â òîì âèäå, â êîòîðîì
îí áûë îòôîðìàòèðîâàí âàìè, ñîõðàíÿÿ ïðîáåëû è ñèìâîëû íî-
âîé ñòðîêè.
Îáðàòèòå âíèìàíèå íà òî, ÷òî â êîíöå Web-ñòðàíèöû, ïðèâå-
äåííîé íà ðèñ. 1.2, âêëþ÷åíà ãèïåðññûëêà (ñëîâî “Microsoft” íà
ýòîì ðèñóíêå ïîä÷åðêíóòî). Åñëè ùåëêíóòü ìûøüþ íà ýòîì ñëî-
âå, Web-áðîóçåð ïåðåéäåò íà Web-ñòðàíèöó ôèðìû Microsoft ïî
àäðåñó http://www.microsoft.com. Ýòîò ýôôåêò äîñòèãàåòñÿ ñ ïî-
ìîùüþ òýãà <Anchor>.
Тэг <Anchor> и гиперссылки
Òýã <Anchor> (ñîêðàùåííî <À>) ïðåäíàçíà÷åí äëÿ ñîçäàí-
èÿ ãèïåðññûëîê. Ñ ïîìîùüþ ýòîãî òýãà ìîæíî îðãàíèçîâûâàòü
êàê ãèïåðññûëêè íà äðóãèå ñòðàíèöû, òàê è ìåòêè ïåðåõîäîâ äëÿ
ãèïåðññûëîê âíóòðè ñòðàíèöû (íàçûâàåìûå ÿêîðÿìè). Íèæå
ïðèâåäåíû âîçìîæíûå àòðèáóòû òýãà <À> (áîëåå ïîäðîáíî îíè
áóäóò ðàññìîòðåíû äàëüøå).
<A <A
ACCESSKEY=ñòðîêà HREF="Ìåñòîïîëîæåíèå"
CLASS=ñòðîêà NAME="Èìÿ îáúåêòà"
DATAFLD=ñòðîêà ONCLICK="JavaScript-êîä"
DATASRC=ñòðîêà ONMOUSEOUT="JavaScript-êîä"
34

HREF=ñòðîêà ONMOUSEOVER="JavaScript-êîä"
ID=èäåíòèôèêàòîð TARGET="Èìÿ îêíà" | "_blank" |
"_parent" | "_self" | "_top"
LANG=ñòðîêà >
VBSCRIPT
METHODS=ñòðîêà
NAME=ñòðîêà
REL=ñòðîêà
REV=ñòðîêà
STYLE=ñòðîêà
TARGET=èìÿ | _blank |
_parent | _self | _top
TITLE=ñòðîêà
URN=ñòðîêà
>
Àòðèáóò HREF èñïîëüçóåòñÿ äëÿ îðãàíèçàöèè ãèïåðññûëêè.
Íàïðèìåð, â òåêñòå, êîòîðûé áûë òîëüêî ÷òî ïîìåùåí íà Web-
ñòðàíèöó, ñ ïîìîùüþ ýòîãî àòðèáóòà áûëà óñòàíîâëåíà ãèïåð-
ññûëêà íà Web-óçåë Microsoft.
Åñëè àêòèâèçèðîâàòü ýòó ññûëêó, Web-áðîóçåð îñóùåñòâèò
ïåðåõîä íà Web-óçåë Microsoft. Òàêèì îáðàçîì ìîæíî ëåãêî ñîç-
äàâàòü ãèïåðññûëêè.
35

Сочетание текста и графики
Èçîáðàæåíèÿ è òåêñò íà Web-ñòðàíèöàõ ìîæíî ðàçìåùàòü
ïðîèçâîëüíûì îáðàçîì: òàê, èçîáðàæåíèå ìîæíî ïîìåñòèòü â ëå-
âîé ÷àñòè Web-ñòðàíèöû, à òåêñò ðàñïîëîæèòü ñïðàâà îò íåãî:
--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | ------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | ------------------------------------- | |
| | | |
| | ------------- --------------- | |
| | | | | | | |
| | | Èçîáðàæåíèå | | Òåêñò | | |
| | | | | | | |
| | ------------- --------------- | |
| | | |
| ---------------------------------------------- |
| |
--------------------------------------------------
36

Рис. 1.4. Изображение, которое будет выровнено по левому краю страницы
Âûðàâíèâàíèå òåêñòà è ãðàôèêè îñóùåñòâëÿåòñÿ ïðîùå, ÷åì
ìîæíî ïðåäïîëîæèòü. Äëÿ òîãî ÷òîáû ðàñïîëîæèòü èçîáðàæå-
íèå ïî ëåâîìó êðàþ ñòðàíèöû, ñëåäóåò ïðîñòî âîñïîëüçîâàòüñÿ
àòðèáóòîì ALIGN òýãà <IMG>, çàäàâ åãî ðàâíûì LEFT. Â ðå-
çóëüòàòå Web-áðîóçåð àâòîìàòè÷åñêè ðàñïîëîæèò ïîñëåäóþùè-
é òåêñò ñïðàâà îò èçîáðàæåíèÿ. Íèæå ïðèâåäåí òåêñò, êîòîðûé
áóäåò ðàçìåùåí âîçëå èçîáðàæåíèÿ.
Ýòîò òåêñò áóäåò ðàçìåùåí ðÿäîì ñ èçîáðàæåíèåì. Çäåñü
òåêñò âûâîäèòñÿ êðàñíûì öâåòîì ñïðàâà îò èçîáðàæåíèÿ.
Åñëè òðåáóåòñÿ ðàçìåñòèòü òåêñò ñëåâà, òî âìåñòî
ALIGN = LEFT ñëåäóåò çàäàòü ALIGN = RIGHT.
Âîò êàê ýòî âûãëÿäèò â ôàéëå html.htm:
<HTML>
.
.
.
<P>
37

<BR>
<BR>
</P>
<!-- Òåïåðü èñïîëüçóåì ñî÷åòàíèå òåêñòà è ãðàôèêè,
ðàçìåùàÿ èçîáðàæåíèå ïî ëåâîìó êðàþ Web-ñòðàíèöû, à
òåêñò — ñïðàâà îò íåãî. Ýòî äîñòèãàåòñÿ ñ ïîìîùüþ
êëþ÷åâîãî ñëîâà ALIGN. Äàëåå áóäåò ïîêàçàíî, êàê òî
æå ñàìîå ìîæíî ñäåëàòü ëó÷øå ñ ïîìîùüþ òýãà DIV.>
<IMG WIDTH=141 HEIGHT=126 SRC="gif/sidebar.gif"
ALIGN=LEFT>
Ýòîò òåêñò áóäåò ðàçìåùåí ðÿäîì ñ èçîáðàæåíèåì.
Â äàííîì ñëó÷àå òåêñò âûâîäèòñÿ êðàñíûì öâåòîì ñïðàâà
îò èçîáðàæåíèÿ. Åñëè òðåáóåòñÿ ðàçìåñòèòü òåêñò
ñëåâà, òî âìåñòî ALIGN = LEFT ñëåäóåò çàäàòü ALIGN =
RIGHT.>
</IMG>
<BR>
<BR>
<BR>
<BR>
.
.
.
Ðåçóëüòàò ðàáîòû ýòîãî ñöåíàðèÿ ïðèâåäåí íà ðèñ. 1.2. Ïîìè-
ìî ïðîñòîãî îòîáðàæåíèÿ òåêñòà, ìîæíî òàêæå óïðàâëÿòü ñïîñî-
áîì åãî âûâîäà, ÷åìó è ïîñâÿùåí ñëåäóþùèé ïàðàãðàô.
38

Изменение шрифта, заданного по умолчанию
×òîáû èçìåíèòü âíåøíèé âèä òåêñòà, ñëåäóåò èñïîëüçîâàòü
òýã <FONT>. Ýòîò òýã âêëþ÷àåò àòðèáóòû, êîòîðûå ïîçâîëÿþò
óñòàíàâëèâàòü òèï, íà÷åðòàíèå, ðàçìåð è öâåò øðèôòà.
<FONT <FONT
CLASS=ñòðîêà COLOR="Öâåò"
COLOR=öâåò FACE="Ñïèñîê øðèôòîâ"
FACE=ñòðîêà POINT-SIZE="Ðàçìåð â ïóíêòàõ"
ID=èäåíòèôèêàòîð SIZE="Ðàçìåð øðèôòà"
LANG=ñòðîêà WEIGHT="Íàñûùåííîñòü"
VBSCRIPT
>
SIZE=ñòðîêà
STYLE=ñòðîêà
TITLE=ñòðîêà
>
Íàïðèìåð, ÷òîáû òåêñò, ðàçìåùåííûé ñïðàâà îò èçîáðàæå-
íèÿ, áûë êðàñíîãî öâåòà, åãî íåîáõîäèìî çàêëþ÷èòü â òýã
<FONT> ñëåäóþùèì îáðàçîì:
<HTML>
.
.
.
39

<P>
<BR>
<BR>
</P>
ðàçìåùàÿ èçîáðàæåíèå ïî ëåâîìó êðàþ Web-ñòðàíèöû,
à òåêñò — ñïðàâà îò íåãî. Ýòî äîñòèãàåòñÿ ñ ïîìîùüþ
ALIGN=LEFT>
<FONT COLOR = "ff0000">
RIGHT.
</FONT>
<BR>
<BR>
<BR>
<BR>
.
.
.
Ñëåäóåò îòìåòèòü, ÷òî öâåò òåêñòà ìåíÿåòñÿ íà ñòàíäàðòíûé
æåëòûé öâåò ñðàçó ïîñëå òýãà </FONT>. Ïîìèìî öâåòà, ìîæíî
èçìåíèòü è äðóãèå ïàðàìåòðû òåêñòà, òàêèå êàê ðàçìåð øðèôòà.
Íàïðèìåð, ìîæíî èñïîëüçîâàòü òýã <FONT> äëÿ ðàçìåùåíèÿ
íà Web-ñòðàíèöå òåêñòà, ïðåäñòàâëåííîãî øðèôòîì óâåëè÷åí-
íîãî ðàçìåðà:
40

--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | ------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | ------------------------------------- | |
| | | |
| | ------------- ------------------ | |
| | | | | | | |
| | | | | | | |
| | ------------- ------------------ | |
| | | |
| | | |
| | ------------------------------------- | |
| | | Óâåëè÷åííûé òåêñò | | |
| | ------------------------------------- | |
| | | |
| ---------------------------------------------- |
| |
--------------------------------------------------
41

Äëÿ ýòîãî ïðîñòî çàêëþ÷èì òðåáóåìûé òåêñò â òýã <FONT>,
óêàçàâ ðàçìåð øðèôòà 5. Ðàçìåð øðèôòà ìîæåò èçìåíÿòüñÿ îò
1 äî 7.
<HTML>
.
.
.
ðàçìåùàÿ èçîáðàæåíèå ïî ëåâîìó êðàþ Web-ñòðàíèöû, à
òåêñò — ñïðàâà îò íåãî. Ýòî äîñòèãàåòñÿ ñ ïîìîùüþ
ALIGN=LEFT>
<FONT COLOR = "ff0000">
RIGHT.
</FONT>
</IMG>
<BR>
<BR>
<BR>
<BR>
<!-- Òýã FONT ïîçâîëÿåò ðåãóëèðîâàòü ðàçìåð øðèôòà,
êîòîðûì îòîáðàæàåòñÿ òåêñò. Â äàííîì ïðèìåðå ðàçìåð
øðèôòà çàäàåòñÿ ðàâíûì 5.>
<FONT SIZE = 5>
Òýã FONT ìîæíî òàêæå èñïîëüçîâàòü äëÿ óâåëè÷åíèÿ
ðàçìåðà øðèôòà.
</FONT>
42

<BR>
<BR>
.
.
.
ìîæíî çàìåòèòü, âñòàâëåííûé òåêñò âûâîäèòñÿ áîëåå êðóïíûì
øðèôòîì, ÷åì ïðåäûäóùèé òåêñò. Èñïîëüçîâàíèå òýãà <FONT>
ïîçâîëÿåò èçìåíèòü ðàçìåð øðèôòà â ëþáîé ìîìåíò.
Рис. 1.5. Пример изменения размера шрифта
Òåïåðü íàøà Web-ñòðàíèöà ñîäåðæèò è òåêñò, è èçîáðàæå-
íèÿ. Îäíàêî ñóùåñòâóåò åùå ìíîæåñòâî äðóãèõ ýëåìåíòîâ, êîòî-
ðûå ìîãóò áûòü èñïîëüçîâàíû íà Web-ñòðàíèöàõ. Îäíèì èç íàè-
43

áîëåå ïîïóëÿðíûõ ýëåìåíòîâ ÿâëÿåòñÿ òàáëèöà. Ñîçäàíèþ
òàáëèö ïîñâÿùåí ñëåäóþùèé ïàðàãðàô.
Таблицы
Òàáëèöû ïðåäíàçíà÷åíû äëÿ óïîðÿäî÷åííîãî ðàçìåùåíèÿ
èíôîðìàöèè, âûâîäèìîé íà Web-ñòðàíèöå. Â ÿ÷åéêè òàáëèöû
ìîæíî ïîìåùàòü ëþáóþ èíôîðìàöèþ — òåêñò, èçîáðàæåíèÿ, ãè-
ïåðññûëêè è òîìó ïîäîáíîå. Äàâàéòå äîáàâèì òàáëèöó â ñîçäàâ-
àåìóþ íàìè Web-ñòðàíèöó html.htm.
--------------------------------------------------
|<HTML > |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | ------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | ------------------------------------- | |
| | | |
44

| | ------------- ------------------ | |
| | | | | | | |
| | | | | | | |
| | ------------- ------------------ | |
| | | |
| | | |
| | -------------------------------------- | |
| | -------------------------------------- | |
| | | |
| | ---------------------------- | |
| | | | | |
| | |----------------------------| | |
| | | | | | | |
| | |----------------------------| | |
| | | | | | | |
| | ---------------------------- | |
| ---------------------------------------------- |
| |
--------------------------------------------------
Íèæå ïîêàçàí âèä ñîçäàâàåìîé òàáëèöû, ñîñòîÿùåé èç òðåõ
ñòîëáöîâ, äâóõ ñòðîê è çàãîëîâêà, êîòîðûé ïî øèðèíå çàíèìàåò
âñå òðè ñòîëáöà:
------------------------------------
| Ýòî òàáëèöà |
|------------------------------------|
| Ýòî | ÿ÷åéêè | äëÿ |
|------------------------------------|
| äàííûõ | â | òàáëèöå |
------------------------------------
Äëÿ ôîðìèðîâàíèÿ òàáëèö ïðåäíàçíà÷åí òýã <TABLE>, êî-
òîðûé èìååò ñëåäóþùèå àòðèáóòû:
<TABLE <TABLE
ALIGN=CENTER | LEFT |
RIGHT
ALIGN="CENTER" | "LEFT" |
"RIGHT"
BACKGROUND=ñòðîêà BGCOLOR="öâåò"
BGCOLOR=öâåò BORDER="çíà÷åíèå"
BORDER=öåëîå ÷èñëî CELLPADDING="çíà÷åíèå"
45

BORDERCOLOR=öâåò CELLSPACING="çíà÷åíèå"
BORDERCOLORDARK=öâåò COLS="÷èñëî ñòîëáöîâ"
BORDERCOLORLIGHT=öâåò HEIGHT="âûñîòà"
CELLPADDING=öåëîå ÷èñëî HSPACE="ãîðèçîíòàëüíàÿ
CELLSPACING=öåëîå ÷èñëî WIDTH="ïèêñåëû" |
"çíà÷åíèå%"
CLASS=ñòðîêà VSPACE="âåðòèêàëüíàÿ
COLS=öåëîå ÷èñëî >
DATAPAGESIZE=öåëîå ÷èñëî
DATASRC=èäåíòèôèêàòîð
FRAME=ABOVE | BELOW |
BORDER | BOX | HSIDES |
LHS | RHS | VOID | VSIDES
HEIGHT=öåëîå ÷èñëî
ID=èäåíòèôèêàòîð
LANG=ñòðîêà
VBSCRIPT
RULES=ALL | COLS |
GROUPS | NONE | ROWS
STYLE=ñòðîêà
TITLE=ñòðîêà
WIDTH=öåëîå ÷èñëî
>
Íèæå ïðèâåäåí ïðèìåð òîãî, êàê ñîçäàåòñÿ òàáëèöà â ðåàëü-
íîì ñöåíàðèè íà HTML. Ñíà÷àëà ïðè ïîìîùè àòðèáóòà BORD
òýãà <TABLE> ôîðìèðóåòñÿ ðàìêà òàáëèöû.
<TABLE BORDER>
.
.
.
46

Äàëåå ïðè ïîìîùè òýãà <TR>> (Table Row — ñòðîêà òàáëè-
öû) ñîçäàåòñÿ ïåðâàÿ ñòðîêà òàáëèöû. Çíà÷åíèå àòðèáóòà
ALIGN òýãà <TR> óêàçûâàåò, ÷òî â äàííîì ïðèìåðå òåêñò äîë-
æåí áûòü âûðîâíåí ïî öåíòðó êàæäîé ÿ÷åéêè.
<TABLE BORDER>
<TR ALIGN = CENTER>
.
.
.
Â ïåðâîé ñòðîêå ñîäåðæèòñÿ çàãîëîâîê òàáëèöû, êîòîðûé óñ-
òàíàâëèâàåòñÿ ñ ïîìîùüþ òýãà <TH> (Table Header — çàãîëîâîê
òàáëèöû) è âûâîäèòñÿ ïîëóæèðíûì øðèôòîì. Äëÿ îáúåäèíå-
íèÿ âñåõ ñòîëáöîâ â çàãîëîâêå òàáëèöû èñïîëüçóåòñÿ àòðèáóò
COLSPANà òýãà <TH>.
<TABLE BORDER>
<TR ALIGN = CENTER>
<TH COLSPAN = 3>Ýòî òàáëèöà
</TH>
.
.
.
Èòàê, íà ýòîì çàêàí÷èâàåòñÿ çàãîëîâîê è ñîîòâåòñòâåííî
ïåðâàÿ ñòðîêà òàáëèöû, êîòîðóþ íåîáõîäèìî çàâåðøèòü çàêðû-
âàþùèì òýãîì </TR>.
<TABLE BORDER>
<TR ALIGN = CENTER>
</TH>
</TR>
.
.
.
Ñîçäàíèå âòîðîé ñòðîêè òàêæå ñëåäóåò íà÷àòü ñ òýãà <TR>.
<TABLE BORDER>
<TR ALIGN = CENTER>
47

</TH>
</TR>
<TR ALIGN = CENTER>
.
.
.
Ñîäåðæèìîå êàæäîé ÿ÷åéêè çàäàåòñÿ ñ ïîìîùüþ òýãà <TD>
(Table Data — äàííûå òàáëèöû).
<TABLE BORDER>
<TR ALIGN = CENTER>
</TH>
</TR>
<TR ALIGN = CENTER>
<TD>Ýòî</TD>
<TD>ÿ÷åéêè</TD>
<TD>äëÿ</TD>
</TR>
.
.
.
Òåïåðü äîáàâèì â òàáëèöó òðåòüþ ñòðîêó:
<TABLE BORDER>
<TR ALIGN = CENTER>
</TH>
</TR>
<TR ALIGN = CENTER>
<TD>Ýòî</TD>
<TD>äëÿ</TD>
</TR>
<TR ALIGN = CENTER>
<TD>äàííûõ</TD>
<TD>â</TD>
<TD>òàáëèöå</TD>
</TR>
.
.
.
48

Ñîçäàíèå òàáëèöû äîëæíî çàâåðøàòüñÿ òýãîì </TABLE>.
<TABLE BORDER>
<TR ALIGN = CENTER>
</TH>
</TR>
<TR ALIGN = CENTER>
<TD>Ýòî</TD>
<TD>äëÿ</TD>
</TR>
<TR ALIGN = CENTER>
<TD>äàííûõ</TD>
<TD>â</TD>
<TD>òàáëèöå</TD>
</TR>
</TABLE>
Âèä òàáëèöû èçîáðàæåí íà ðèñ. 1.5. Äàì âàì ïîëåçíûé ñîâåò:
åñëè ó âàñ âîçíèêàþò ïðîáëåìû ñ ñîçäàíèåì òàáëèöû, ïîïðîáóé-
òå íà ïåðâîì ýòàïå íå ââîäèòü òåêñò â òàáëèöó. Ýòî ïîìîæåò áî-
ëåå ÿñíî óâèäåòü åå êîíòóðû. Òåêñò â êàæäóþ ÿ÷åéêó ìîæíî ââå-
ñòè ïîçäíåå.
Списки
Ñóùåñòâóåò íåñêîëüêî òèïîâ HTML-ñïèñêîâ: ñïèñêè îïðåäå-
ëåíèé (ïðîñòûå ñïèñêè), óïîðÿäî÷åííûå ñïèñêè (â íèõ ýëåìåíòû
ñíàáæåíû öèôðîâîé íóìåðàöèåé) è íåóïîðÿäî÷åííûå ñïèñêè (ñ
ìàðêåðàìè âîçëå êàæäîãî ýëåìåíòà ñïèñêà). Äàâàéòå äîáàâèì â
ðàçðàáàòûâàåìóþ Web-ñòðàíèöó íåóïîðÿäî÷åííûé ñïèñîê.
--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
49

| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | ------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | ------------------------------------- | |
| | | |
| | ------------- ----------------- | |
| | | | | | | |
| | | | | | | |
| | ------------- ----------------- | |
| | | |
| | | |
| | ------------------------------------- | |
| | ------------------------------------- | |
| | | |
| | ---------------------------- | |
| | | | | |
| | |----------------------------| | |
| | | | | | | |
| | |----------------------------| | |
| | | | | | | |
| | ---------------------------- | |
| | | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | | |
| |</BODY> | |
| ---------------------------------------------- |
| |
|</HTML> |
--------------------------------------------------
50

</UL>
</FONT>
Òåïåðü îñòàåòñÿ òîëüêî äîáàâèòü ýëåìåíòû â ñïèñîê. Äëÿ
ýòîãî èñïîëüçóåòñÿ òýã <LI> (List Item — ýëåìåíò ñïèñêà), êîòî-
ðûé ÿâëÿåòñÿ îäíèì èç íåìíîãèõ, íå íóæäàþùèõñÿ â çàêðûâàþ-
ùåì òýãå.
<UL>
<LI>Ýòî
<LI>íàø
<LI>íåóïîðÿäî÷åííûé
<LI>ñïèñîê
</UL>
</FONT>
Ðåçóëüòàòû ðàáîòû ýòîãî ñöåíàðèÿ ïðèâåäåíû íà ðèñ. 1.5. Êàê
âèäíî èç ðèñóíêà, ýëåìåíòû ñïèñêà ðàñïîëîæåíû äðóã ïîä äðóãîì è
ñëåâà âîçëå êàæäîãî èç íèõ èìåþòñÿ ìàðêåðû.
Отправка электронной почты с Web-страницы
Ïîñëåäíèì øàãîì â ðàçðàáîòêå Web-ñòðàíèöû áóäåò äîáàâ-
ëåíèå â íåå ãèïåðññûëêè íà àäðåñ ýëåêòðîííîé ïî÷òû.
--------------------------------------------------
|<HTML> |
| |
| ---------------------------------------------- |
| |<HEAD> | |
| | | |
| |<TITLE> | |
| |</TITLE> | |
| | | |
| |</HEAD> | |
| ---------------------------------------------- |
| ---------------------------------------------- |
| |<BODY> | |
| | | |
| | | |
| | ------------------- | |
52

| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------------- | |
| | | |
| | ------------------------------------- | |
| | | | | |
| | | Òåêñò | | |
| | | | | |
| | ------------------------------------- | |
| | | |
| | ------------- ------------------ | |
| | | | | | | |
| | | | | | | |
| | ------------- ------------------ | |
| | | |
| | | |
| | ------------------------------------- | |
| | ------------------------------------- | |
| | | |
| | ---------------------------- | |
| | | | | |
| | |----------------------------| | |
| | | | | | | |
| | |----------------------------| | |
| | | | | | | |
| | ---------------------------- | |
| | | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | _____ | |
| | * |_____| | |
| | | |
| | --------------------------------------- | |
| | | Àäðåñ ýëåêòðîííîé ïî÷òû | | |
| | --------------------------------------- | |
| | | |
| ---------------------------------------------- |
| |
--------------------------------------------------
53

Äîáàâèòü ïîäîáíóþ ãèïåðññûëêó î÷åíü ïðîñòî. Äëÿ ýòîãî
ñëåäóåò ïðè îïðåäåëåíèè URL-àäðåñà ãèïåðññûëêè èñïîëüçî-
âàòü êëþ÷åâîå ñëîâî “MAILTO:” â êà÷åñòâå çíà÷åíèÿ àòðèáóòà
HREF òýãà <ANCHOR>. Ýòî çàñòàâèò Web-áðîóçåð ñ÷èòàòü
äàííûé URL àäðåñîì äëÿ îòïðàâêè ýëåêòðîííîé ïî÷òû. Êàê
òîëüêî ïîëüçîâàòåëü àêòèâèçèðóåò ýòó ãèïåðññûëêó, çàãðóçèòñÿ
ïðîãðàììà ýëåêòðîííîé ïî÷òû, ïðåäëàãàþùàÿ îòïðàâèòü ñîîá-
ùåíèå ïî óêàçàííîìó àäðåñó. Â ëèñòèíãå íàøåé Web-ñòðàíèöû
ýòî âûãëÿäèò ñëåäóþùèì îáðàçîì.
÷òîáû ââåñòè ïîÿñíèòåëüíûé òåêñò â Web-ñòðàíèöó, êàê
ýòî ñäåëàíî â äàííîì ïðèìåðå. Web-ñòðàíèöà íà÷èíàåòñÿ
ñ òýãà HTML, ïîêàçûâàþùåãî, ÷òî îíà íàïèñàíà íà ÿçûêå
ðàçìåòêè ãèïåðòåêñòà.>
<HTML>
.
.
.
<!-- Ñ ïîìîùüþ òýãîâ UL è LI ñîçäàåòñÿ
íåóïîðÿäî÷åííûé ñïèñîê.>
<UL>
<LI>Ýòî
<LI>íàø
<LI>íåóïîðÿäî÷åííûé
<LI>ñïèñîê
</UL>
</FONT>
<!-- Åñëè äîáàâèòü òýã À ñ êëþ÷åâûì ñëîâîì "MAILTO:"
â àòðèáóòå HREF, òî ïîÿâèòñÿ âîçìîæíîñòü ñâÿçàòüñÿ ñ
àâòîðîì Web-ñòðàíèöû ïî ýëåêòðîííîé ïî÷òå.>
Ïðèñûëàéòå ìíå ñîîáùåíèÿ ïî àäðåñó:
<A HREF="MAILTO: username@internetprovider.com">
username@internetprovider.com</A>
<BR>
<BR>
.
.
.
54

ìîæíî çàìåòèòü, â íèæíåé ÷àñòè ñòðàíèöû ðàñïîëîæåíà ñòðîêà
“Ïðèñûëàéòå ìíå ñîîáùåíèÿ ïî àäðåñó: username@internetpro-
vider.com”. Ïîñëå òîãî êàê ïîëüçîâàòåëü àêòèâèçèðóåò ýòó ãèïåð-
ññûëêó, çàïóñòèòñÿ ïðîãðàììà ýëåêòðîííîé ïî÷òû, è ïîëüçîâà-
òåëþ áóäåò ïðåäîñòàâëåíà âîçìîæíîñòü îòïðàâèòü ñîîáùåíèå ïî
àäðåñó, óêàçàííîìó â ãèïåðññûëêå.
Завершение создания Web-страницы
×òîáû çàâåðøèòü ñîçäàíèå Web-ñòðàíèöû, äîáàâèì ïîñëåä-
íþþ íàäïèñü “ÏÐÎÃÐÀÌÌÈÐÓÉÒÅ ÍÀ DYNAMIC HTML!”,
êîòîðàÿ áóäåò âûâîäèòüñÿ êðàñíûì öâåòîì.
<HTML>
.
.
.
â àòðèáóòå HREF, òî ïîÿâèòñÿ âîçìîæíîñòü ñâÿçàòüñÿ ñ
àâòîðîì Web-ñòðàíèöû ïî ýëåêòðîííîé ïî÷òå.>
<BR>
<BR>
<!-- Íàêîíåö, âûâîäèòñÿ çàâåðøàþùàÿ íàäïèñü.>
<FONT COLOR = ff0000>
<CENTER>
<H1>ÏÐÎÃÐÀÌÌÈÐÓÉÒÅ ÍÀ DYNAMIC HTML!</H1>
<BR>
<BR>
55

</CENTER>
</FONT>
.
.
.
Òåïåðü îñòàåòñÿ çàêðûòü òýãè <BODY> è <HTML>.
<HTML>
.
.
.
â àòðèáóòå HREF, òî ïîëüçîâàòåëÿì áóäåò ïðåäîñòàâëåíà
âîçìîæíîñòü ñâÿçàòüñÿ ñ àâòîðîì Web-ñòðàíèöû ïî
ýëåêòðîííîé ïî÷òå.>
<BR>
<BR>
<!-- Íàêîíåö, âûâîäèòñÿ çàâåðøàþùàÿ íàäïèñü.>
<FONT COLOR = ff0000>
<CENTER>
<H1>ÏÐÎÃÐÀÌÌÈÐÓÉÒÅ ÍÀ DYNAMIC HTML!</H1>
<BR>
<BR>
</CENTER>
</FONT>
<!-- Òýãè /BODY è /HTML çàêðûâàþò ñîîòâåòñòâåííî òåëî
Web-ñòðàíèöû è ñàìó ñòðàíèöó.>
</BODY>
</HTML>
56

Dhtml

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Recently uploaded

Recently uploaded (8)

Dhtml