This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
(òåã, îïðåäåëÿþùèé àáçàö), íå òðåáóþò çàâåðøàþùåãî òåãà, íî åãî íàëè÷èå ïðèäàåò èñõîäíîìó òåêñòó äîêóìåíòà ñòðîéíîñòü, äåëàåò åãî ïîíÿòíåå. ßçûê HTML íå÷óâñòâèòåëåí ê ðåãèñòðó ñèìâîëîâ, îïèñûâàþùèõ òåã, è ïðèâåäåííûé ðàíåå ïðèìåð ìîã áû âûãëÿäåòü ñëåäóþùèì îáðàçîì: Çàãîëîâîê äîêóìåíòà
Äîïîëíèòåëüíûå ïðîáåëû, ñèìâîëû òàáóëÿöèè è êîíöà ñòðîêè, äîáàâëåííûå â èñõîäíûé òåêñò HTML-äîêóìåíòà, ÷òîáû ñäåëàòü åãî ïîíÿòíåå, èãíîðèðóþòñÿ âåá-áðàóçåðîì ïðè èíòåðïðåòàöèè äîêóìåíòà. HTML-äîêóìåíò ìîæåò âêëþ÷àòü âûøåîïèñàííûå ýëåìåíòû, òîëüêî åñëè îíè ïîìåùåíû âíóòðü òåãîâ è (áîëåå ïîäðîáíî î òåãå ðàññêàçûâàåòñÿ â óðîêå 2). Âñÿ ïðîãðàììà ñîñòîèò èç íàáîðà òåãîâ. Òåãè ìîãóò èìåòü ïàðàìåòðû, èëè àòðèáóòû, êîòîðûå èãðàþò ðîëü äîïîëíåíèÿ òåãîâ. Èíîãäà òåãè íàçûâàþò äåñêðèïòîðàìè. Äåñêðèïòîð (â ïåðåâîäå ñ ëàò. îïèñàòåëü) — ëåêñè÷åñêàÿ åäèíèöà (ñëîâî, ñëîâîñî÷åòàíèå) èíôîðìàöèîííî-ïîèñêîâîãî ÿçûêà, âûðàæàþùàÿ îñíîâíîå ñìûñëîâîå ñîäåðæàíèå êàêîãî-ëèáî òåêñòà. Äåñêðèïòîð èñïîëüçóåòñÿ ïðè èíôîðìàöèîííîì ïîèñêå äîêóìåíòîâ â èíôîðìàöèîííî-ïîèñêîâûõ ñèñòåìàõ.
Ñòðóêòóðà äîêóìåíòà
25
Áðàóçåð Äëÿ ïðîñìîòðà HTML-äîêóìåíòîâ â WWW íåîáõîäèìî ñïåöèàëüíîå ïðîãðàììíîå îáåñïå÷åíèå. Òàêèå ïðîãðàììû íàçûâàþòñÿ áðàóçåðàìè (îò àíãë. browse — ëèñòàòü, ïðîñìàòðèâàòü, ÷èòàòü). Ñ èõ ïîìîùüþ ìîæíî çàãðóæàòü è ïðîñìàòðèâàòü âåá-ñòðàíèöû, îñóùåñòâëÿòü íàâèãàöèþ â WWW è ò. ä. Áðàóçåð — ïðîãðàììà ïðîñìîòðà HTML-ôàéëîâ, ïðîãðàììà-èíòåðïðåòàòîð ÿçûêà HTML. Áðàóçåð ïîêàçûâàåò íà ýêðàíå òåêñò è ãðàôèêó, èíòåðïðåòèðóÿ êîìàíäû (òåãè), óêàçàííûå â èñõîäíîì òåêñòå â óãëîâûõ ñêîáêàõ. Âåá-áðàóçåð — ýòî ïðèêëàäíàÿ ïðîãðàììà, êîòîðàÿ îòîáðàæàåò ñîäåðæèìîå ôàéëîâ, ïîëó÷åííûõ ñ ëîêàëüíîãî èëè óäàëåííîãî êîìïüþòåðà, â ñîîòâåòñòâèè ñ èíñòðóêöèÿìè, âêëþ÷åííûìè â ýòè ôàéëû. Áðàóçåð ïðåäñòàâëÿåò ñîáîé êëèåíòñêóþ ïðîãðàììó è èñïîëüçóåò äëÿ ïåðåäà÷è çàïðîñîâ âåá-ñåðâåðàì ïðîòîêîë HTTP (HyperText Transfer Protocol — ïðîòîêîë ïåðåäà÷è ãèïåðòåêñòà). Ñóùåñòâóåò äîâîëüíî áîëüøîå êîëè÷åñòâî áðàóçåðîâ, èç êîòîðûõ ñàìûìè ïîïóëÿðíûìè ÿâëÿþòñÿ áðàóçåðû Microsoft Internet Explorer, Netscape Navigator è Mozill è Firefox. Áðàóçåð, ïðî÷èòàâ HTML-ôàéë, ñ ïîìîùüþ òåãîâ èíòåðïðåòèðóåò ñîäåðæàùèåñÿ â äîêóìåíòå äàííûå è ñîîòâåòñòâóþùèì îáðàçîì îòîáðàæàåò èõ íà ýêðàíå êîìïüþòåðà. Áðàóçåðû Netscape Navigator è Internet Explorer èìåþò âñòðîåííûå ïðîãðàììû ÷òåíèÿ íîâîñòåé.
Ñòðóêòóðà äîêóìåíòà Êîãäà âåá-áðàóçåð ïîëó÷àåò äîêóìåíò, îí ïî òåãàì îïðåäåëÿåò, êàê äîêóìåíò äîëæåí áûòü èíòåðïðåòèðîâàí. m Òåã . Ñàìûé ïåðâûé òåã, êîòîðûé âñòðå÷àåòñÿ â äîêóìåíòå, äîëæåí áûòü òåãîì . Äàííûé òåã ñîîáùàåò âåá-áðàóçåðó, ÷òî äîêóìåíò íàïèñàí íà ÿçûêå HTML. Ìèíèìàëüíûé HTML-äîêóìåíò ìîã áû âûãëÿäåòü òàê: ...òåëî äîêóìåíòà...
Òàêèì îáðàçîì, òåãè è îáðàçóþò äëÿ HTML-äîêóìåíòà òàê íàçûâàåìûé êîíòåéíåð. m Òåã . Ñòðóêòóðíî äîêóìåíò ðàñïàäàåòñÿ íà äâå ÷àñòè: çàãîëîâî÷íóþ è îñíîâíóþ, èëè òåëî äîêóìåíòà. Çàãîëîâî÷íàÿ ÷àñòü ðàçìåùàåòñÿ ìåæäó òåãàìè è , îñíîâíàÿ — ìåæäó òåãàìè è . m Òåã <TITLE>. Âíóòðè êîíòåéíåðà è ðàçìåùàåòñÿ åäèíñòâåííûé îáÿçàòåëüíûé êîíòåéíåð èç òåãîâ <TITLE> è , ñîäåðæàùèé òåêñò çàãîëîâêà. Òåã çàãîëîâî÷íîé ÷àñòè äîêóìåíòà äîëæåí áûòü óêàçàí ñðàçó ïîñëå òåãà è áîëåå íèãäå â òåëå äîêóìåíòà. Äàííûé òåã ïðåäñòàâëÿåò ñîáîé îáîáùåííîå îïèñàíèå äîêóìåíòà. Ñëåäóåò èçáåãàòü ðàçìåùåíèÿ êàêîãî-ëèáî òåêñòà âíóòðè òåãà . Îòêðûâàþùèé òåã óêàçûâàåòñÿ íåïîñðåäñòâåííî ïåðåä òåãîì <TITLE> è äðóãèìè òåãàìè, îïèñûâàþùèìè äîêóìåíò, à çàêðûâàþùèé òåã — ñðàçó ïîñëå îêîí÷àíèÿ îïèñàíèÿ äîêóìåíòà.
26
Óðîê 1. Îñíîâíûå ñâåäåíèÿ
Áîëüøèíñòâî âåá-áðàóçåðîâ îòîáðàæàþò ñîäåðæèìîå òåãà <TITLE> â çàãîëîâêå îêíà, ñîäåðæàùåãî äîêóìåíò, è â ôàéëå çàêëàäîê, åñëè îí ïîääåðæèâàåòñÿ âåááðàóçåðîì. Çàãîëîâîê, îãðàíè÷åííûé òåãàìè <TITLE> è , ðàçìåùàåòñÿ âíóòðè òåãîâ . Çàãîëîâîê äîêóìåíòà ïðè îòîáðàæåíèè ñàìîãî äîêóìåíòà â îêíå áðàóçåðà íå âèäåí. Òåãè òåëà äîêóìåíòà èäåíòèôèöèðóþò îòîáðàæàåìûå â îêíå êîìïîíåíòû HTML-äîêóìåíòà. Òåëî äîêóìåíòà ìîæåò ñîäåðæàòü ññûëêè íà äðóãèå äîêóìåíòû, òåêñò è äðóãóþ ôîðìàòèðîâàííóþ èíôîðìàöèþ. m Òåã . Òåëî äîêóìåíòà äîëæíî íàõîäèòüñÿ ìåæäó òåãàìè è . Ýòî òà ÷àñòü äîêóìåíòà, êîòîðàÿ îòîáðàæàåò åãî òåêñòîâóþ è ãðàôè÷åñêóþ èíôîðìàöèþ. Ñëåäóåò çàìåòèòü ÷òî îòêðûâàþùèå è çàêðûâàþùèå òåãè , è íåîáÿçàòåëüíû, íî èõ íàñòîÿòåëüíî ðåêîìåíäóåòñÿ èñïîëüçîâàòü, ïîñêîëüêó ýòî ïîçâîëÿåò âåá-áðàóçåðó óâåðåííî îòäåëèòü äðóã îò äðóãà çàãîëîâî÷íóþ è íåïîñðåäñòâåííî ñìûñëîâóþ ÷àñòè äîêóìåíòà. Òåã ïàðíûé. Ìåæäó îòêðûâàþùèì òåãîì è çàêðûâàþùèì òåãîì ðàçìåùàþòñÿ âñå äðóãèå òåãè ïðîãðàììû, ñîñòàâëÿþùèå îñíîâíîå ñîäåðæàíèå äîêóìåíòà. Òåã ïðåäíàçíà÷àåòñÿ äëÿ âûäåëåíèÿ òîé ÷àñòè äîêóìåíòà, êîòîðàÿ äîëæíà áûòü ïîêàçàíà ïîëüçîâàòåëþ íà ýêðàíå.
Ãèïåðòåêñòîâûå ññûëêè Ãèïåðòåêñòîâûå ññûëêè ÿâëÿþòñÿ êëþ÷åâûì êîìïîíåíòîì, äåëàþùèì âåáñòðàíèöû ïðèâëåêàòåëüíûìè äëÿ ïîëüçîâàòåëåé. Áëàãîäàðÿ ãèïåðòåêñòîâûì ññûëêàì (èëè ïðîñòî ãèïåðññûëêàì) âåá-ñòðàíèöà ñòðóêòóðèðóåòñÿ è ñâÿçûâàåòñÿ ñ äðóãèìè äîêóìåíòàìè, ÷òî îáåñïå÷èâàåò áûñòðîå è óäîáíîå ïîëó÷åíèå èíôîðìàöèè. Òåõíîëîãèÿ ãèïåðññûëîê ïîçâîëÿåò îáúåäèíèòü ìíîæåñòâî äîêóìåíòîâ â îäèí. Ãèïåðòåêñò — èíôîðìàöèîííàÿ ñòðóêòóðà, îáåñïå÷èâàþùàÿ íàâèãàöèþ ïîñðåäñòâîì ãèïåðòåêñòîâûõ ññûëîê. Ãèïåðòåêñòîâûìè ññûëêàìè íàçûâàþòñÿ ôðàãìåíòû òåêñòà èëè èçîáðàæåíèÿ, ïðè àêòèâèçàöèè êîòîðûõ îòîáðàæàþòñÿ ñâÿçàííûå ñ íèìè äîêóìåíòû. Ãèïåðòåêñòîâàÿ ññûëêà — îñíîâíîé ýëåìåíò âñåõ ãèïåðòåêñòîâûõ ñèñòåì, êîòîðûå óêàçûâàþò íà äðóãîé äîêóìåíò èëè íà äðóãóþ ÷àñòü òîãî æå äîêóìåíòà. Òàêàÿ ññûëêà çàäàåòñÿ òåãàìè è . Îíà èìååò íåñêîëüêî àòðèáóòîâ, íàëè÷èå îäíîãî èç äâóõ (HREF èëè NAME) îáÿçàòåëüíî. Ïåðâûé óêàçûâàåò íà ññûëêó çà ïðåäåëû äàííîãî äîêóìåíòà, íàïðèìåð: íàçâàíèå ññûëêè
Âòîðîé ïîçâîëÿåò ïåðåéòè ê îïðåäåëåííûì îáðàçîì îòìå÷åííîìó (ñ ïîìîùüþ òàê íàçûâàåìîãî ÿêîðÿ, èëè çàêëàäêè) ìåñòó òîãî æå ñàìîãî äîêóìåíòà, íàïðèìåð: íàçâàíèå ññûëêè
Ññûëêè èìåþò ñòàíäàðòíûé ôîðìàò, ÷òî ïîçâîëÿåò áðàóçåðó èíòåðïðåòèðîâàòü èõ è âûïîëíÿòü íåîáõîäèìûå ôóíêöèè (âûçûâàòü ìåòîäû) â çàâèñèìîñòè îò
Èçìåíåíèå ïðîãðàììû
27
òèïà ññûëêè. Ññûëêè ìîãóò óêàçûâàòü íà äðóãîé äîêóìåíò, ñïåöèàëüíîå ìåñòî äàííîãî äîêóìåíòà èëè âûïîëíÿòü äðóãèå ôóíêöèè, íàïðèìåð çàïðàøèâàòü ôàéë ïî ïðîòîêîëó FTP (File Transfer Protocol — ïðîòîêîë ïåðåäà÷è ôàéëîâ) äëÿ îòîáðàæåíèÿ åãî áðàóçåðîì.  ññûëêó âêëþ÷àåòñÿ URL (Uniform Resource Locator — óíèôèöèðîâàííûé óêàçàòåëü ðåñóðñà) — àäðåñ îñîáîãî ôîðìàòà, èäåíòèôèöèðóþùèé äðóãèå ëîêàëüíûå èëè óäàëåííûå äîêóìåíòû, ÷òî ÷àñòî òðåáóåòñÿ ïðè îðãàíèçàöèè áîëüøèõ ñòðóêòóðèðîâàííûõ âåá-ñàéòîâ. Ññûëêè ìîæíî èñïîëüçîâàòü äëÿ ïåðåìåùåíèÿ êàê ïî îäíîìó äîêóìåíòó, òàê è îò îäíîãî äîêóìåíòà ê äðóãîìó. Îäíàêî HTML íå ïîääåðæèâàåò âîçâðàò íà ïðåäûäóùóþ ññûëêó, åñëè ïåðåìåùåíèå ïðîèñõîäèò âíóòðè äîêóìåíòà.
Èçìåíåíèå ïðîãðàììû Åñëè â êîäå âåá-äîêóìåíòà (ôàéëå ñ ðàñøèðåíèåì .htm), êîòîðûé ìîæíî ïðîñìîòðåòü â áðàóçåðå Internet Explorer, òðåáóåòñÿ âûïîëíèòü èçìåíåíèÿ, òî ñëåäóåò îòêðûòü ýòîò ôàéë â ïðîãðàììå Áëîêíîò, âûáðàâ â áðàóçåðå Internet Explorer êîìàíäó Âèä4Ïðîñìîòð HTML-êîäà (ðèñ. 1.4).
Ðèñ. 1.4. Ïðîñìîòð HTML-êîäà äîêóìåíòà
HTML-ôàéë áóäåò îòêðûò â îêíå ïðîãðàììû Áëîêíîò (ñì. ðèñ. 1.1). Âûïîëíèâ èçìåíåíèÿ êîäà ïðîãðàììû, ñëåäóåò âîñïîëüçîâàòüñÿ êîìàíäîé Ôàéë4Ñîõðàíèòü (ðèñ. 1.5).
Ðèñ. 1.5. Ñîõðàíåíèå ïðîãðàììû
28
Óðîê 1. Îñíîâíûå ñâåäåíèÿ
×òîáû óâèäåòü èçìåíåíèÿ ïðîãðàììû â áðàóçåðå Internet Explorer, íåîáõîäèìî ùåëêíóòü íà êíîïêå Îáíîâèòü (îíà ÷åòâåðòàÿ ñëåâà íà ðèñ. 1.6) èëè âûïîëíèòü êîìàíäó Âèä4Îáíîâèòü (ñì. ðèñ. 1.4).
Ðèñ. 1.6. Ïàíåëü èíñòðóìåíòîâ ïðîãðàììû Internet Explorer
Ïðè ñëåäóþùèõ èçìåíåíèÿõ âñå ïåðå÷èñëåííûå îïåðàöèè ñëåäóåò ïîâòîðèòü.
Òåãè è àòðèáóòû Òåã — êîä ÿçûêà HTML, ñ ïîìîùüþ êîòîðîãî âûïîëíÿåòñÿ ðàçìåòêà èñõîäíîãî òåêñòà. Òåã çàïèñûâàåòñÿ â óãëîâûõ ñêîáêàõ. Êàê óæå îòìå÷àëîñü, âñå òåãè íà÷èíàþòñÿ ñ ñèìâîëà < è çàêàí÷èâàþòñÿ ñèìâîëîì >. Ïîñëå îòêðûâàþùåé óãëîâîé ñêîáêè ñëåäóåò èìÿ òåãà (êîìàíäû). Êàæäûé òåã ìîæåò èìåòü àòðèáóòû. Ïîñëå ïåðå÷èñëåíèÿ âñåõ àòðèáóòîâ íà÷àëüíûé, èëè îòêðûâàþùèé, òåã çàêðûâàåòñÿ. Ïîñëå îòêðûâàþùåãî òåãà ðàñïîëàãàåòñÿ ñîäåðæèìîå òåãà. Êîä HTML-äîêóìåíòà çàêàí÷èâàåòñÿ êîíå÷íûì, èëè çàêðûâàþùèì, òåãîì (ðèñ. 1.7). Çàêðûâàþùèå òåãè íà÷èíàþòñÿ ñ ñèìâîëà êîñîé ÷åðòû (/).
Ðèñ. 1.7. Ñòðóêòóðà HTML-ýëåìåíòà
Ïðè íàïèñàíèè òåãîâ íå ó÷èòûâàåòñÿ ðåãèñòð áóêâ, òî åñòü êîä ìîæåò áûòü íàïèñàí êàê ñòðî÷íûìè, òàê è ïðîïèñíûìè áóêâàìè, íî â îñíîâíîì èñïîëüçóþò ïðîïèñíûå, ÷òîáû îòëè÷àòü òåãè îò èíôîðìàöèîííîãî íàïîëíåíèÿ äîêóìåíòà. Åñëè òåã íàïèñàí ñ îøèáêîé, òî ïðîãðàììà åãî èãíîðèðóåò, íå ñîîáùàÿ îá îøèáêå. Òåãè íå îòîáðàæàþòñÿ ñàìè, à âëèÿþò íà ñïîñîá îòîáðàæåíèÿ äîêóìåíòà. Àòðèáóòû — äîïîëíèòåëüíûå óïðàâëÿþùèå ñëîâà, îòäåëåííûå îò òåãà è äðóã îò äðóãà ïðîáåëàìè. Ìîæíî ñêàçàòü, ÷òî àòðèáóòû — ýòî èìåíà ñâîéñòâ òåãîâ, êîòîðûå ìîãóò ïðèíèìàòü îïðåäåëåííûå çíà÷åíèÿ. Àòðèáóòû èìåþòñÿ òîëüêî ó îòêðûâàþùèõ òåãîâ, ó çàêðûâàþùèõ òåãîâ èõ íåò. Àòðèáóòû âëèÿþò íà ðåçóëüòàò èíòåðïðåòàöèè òåãà áðàóçåðîì. Íåêîòîðûå àòðèáóòû èìåþò êîíêðåòíîå çíà÷åíèå, êîòîðîå çàäàåòñÿ ïîñëå çíàêà ðàâåíñòâà. Ðàíüøå çíà÷åíèÿ àòðèáóòà òðåáîâàëîñü çàêëþ÷àòü â êàâû÷êè, íî òåïåðü âî ìíîãèõ ñëó÷àÿõ ýòè êàâû÷êè ìîæíî îïóñêàòü áåç êàêèõ-ëèáî ïîñëåäñòâèé.
Àòðèáóòû òåãà
29
Îñíîâíûå ïðàâèëà ñîçäàíèÿ âåá-ñòðàíèö Ïðè ñîçäàíèè âåá-ñòðàíèöû íåîáõîäèìî ïðèäåðæèâàòüñÿ îïðåäåëåííûõ ïðàâèë, êîòîðûå ïåðå÷èñëåíû íèæå. m Ñëåäèòå çà òåì, ÷òîáû âåá-ñòðàíèöû íå ïîëó÷èëèñü ñëèøêîì øèðîêèìè è ïîëüçîâàòåëÿì íå ïðèõîäèëîñü ïîëüçîâàòüñÿ ïðîêðóòêîé. Îáû÷íî, åñëè âåá-ñòðàíèöà íå ïîìåùàåòñÿ íà ýêðàíå, áîëüøèíñòâî áðàóçåðîâ äîáàâëÿþò âíèçó ýêðàíà ãîðèçîíòàëüíóþ ïîëîñó ïðîêðóòêè. Òèïè÷íîé øèðèíîé ýêðàíà ñ÷èòàåòñÿ øèðèíà 640 ïèêñåëîâ. m Êàæäàÿ âåá-ñòðàíèöà äîëæíà èìåòü çàãîëîâîê. m Íå ïåðåãðóæàéòå ñòðàíèöó ãðàôèêîé. m Ïîïûòêà âèçóàëüíî âûäåëèòü âñå îçíà÷àåò íå âûäåëèòü íè÷åãî. m Íå çàáûâàéòå æèòåéñêóþ ìóäðîñòü: «Âñå ãåíèàëüíîå — ïðîñòî». m Ïîìíèòå ïðî ïîñëîâèöó: «Âûïëåñêèâàÿ âîäó èç êîðûòà, íå âûïëåñíèòå ñ âîäîé ðåáåíêà». Èíîãäà âåá-ñòðàíèöà ñäåëàíà òàê êðàñèâî è îðèãèíàëüíî, ÷òî íåïîíÿòíî, ÷åìó îíà ïîñâÿùåíà. m Èñïîëüçóéòå ñâîáîäíîå ïðîñòðàíñòâî äëÿ ïðèâëå÷åíèÿ âíèìàíèÿ. Ìíîãèå ñîçäàòåëè ñàéòîâ êîíöåíòðèðóþò òåêñò â ñåðåäèíå ýêðàíà, îñòàâëÿÿ øèðîêèå ïîëÿ ñëåâà è ñïðàâà îò òåêñòà ïóñòûìè. Ïîäîáíîå ïóñòîå ïðîñòðàíñòâî çàñòàâëÿåò ïîëüçîâàòåëåé êîìïüþòåðà ñîñðåäîòî÷èòüñÿ íà òåêñòå, êîòîðûé íàõîäèòñÿ â ñåðåäèíå.
Àòðèáóòû òåãà  ïðîòèâîïîëîæíîñòü òåãó òåã ñîäåðæèò âñþ òó èíôîðìàöèþ, èç êîòîðîé, ñîáñòâåííî, è ñîñòîèò ðàññìàòðèâàåìûé äîêóìåíò. Ïîðÿäîê ñëåäîâàíèÿ òåãîâ çäåñü èìåííî òàêîé, â êàêîì îíè ïðåäñòàþò ïåðåä ÷èòàòåëåì. Íà÷àëüíûé òåã ìîæåò èìåòü íåñêîëüêî àòðèáóòîâ, íàïðèìåð:
m Àòðèáóò BACKGROUND çàäàåò ãðàôè÷åñêîå èçîáðàæåíèå, êîòîðîå, êàê êàôåëüíàÿ ïëèòêà, çàïîëíèò ôîí äîêóìåíòà. Ôàéë ñ èçîáðàæåíèåì äîëæåí áûòü ñîõðàíåí â ôîðìàòå GIF èëè JPEG. Ïðèìåð:
Ôàéë ñ èçîáðàæåíèåì ôîíà ëó÷øå ðàçìåùàòü â òîì æå êàòàëîãå, ÷òî è ôàéë ñàìîãî äîêóìåíòà, òîãäà URL-àäðåñ è ïóòü óêàçûâàòü íå íóæíî. Ïðèìåð èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìååòñÿ â óðîêå 4. m Àòðèáóò BGCOLOR çàäàåò öâåò ôîíà äîêóìåíòà ïðè ïîìîùè øåñòíàäöàòåðè÷íûõ çíà÷åíèé èíòåíñèâíîñòè öâåòîâîé ìîäåëè RGB (Red, Green, Blue — êðàñíûé, çåëåíûé, ñèíèé) èëè ñòðî÷íîãî ëèòåðàëà, ñîîòâåòñòâóþùåãî íàçâàíèþ öâåòà, íàïðèìåð:
30
Óðîê 1. Îñíîâíûå ñâåäåíèÿ
Ïðèìåðû èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìåþòñÿ â óðîêå 2. m Àòðèáóò TEXT çàäàåò èñïîëüçóåìûé ïî óìîë÷àíèþ öâåò òåêñòà, íå ÿâëÿþùåãîñÿ ãèïåðññûëêîé. Ïî óìîë÷àíèþ òàêîé òåêñò ÷åðíûé. Ïðèìåð:
Ïðèìåð èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìååòñÿ â óðîêå 4. m Àòðèáóò LINK çàäàåò öâåò ãèïåðññûëêè; â áîëüøèíñòâå áðàóçåðîâ îí ïî óìîë÷àíèþ òåìíî-ñèíèé. Ïðèìåð:
Ïðèìåð èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìååòñÿ â óðîêå 15. m Àòðèáóò ALINK çàäàåò öâåò àêòèâíîé ãèïåðññûëêè, êîòîðûé ìåíÿåòñÿ â ìîìåíò ùåë÷êà íà íåé ìûøüþ è êîòîðûé æåëàòåëüíî äåëàòü îòëè÷íûì îò öâåòà ôîíà (çàäàâàåìîãî àòðèáóòîì LINK). Ïðèìåð:
Ïðèìåð èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìååòñÿ â óðîêå 15. m Àòðèáóò VLINK çàäàåò öâåò ïîñåùåííîé ãèïåðññûëêè, êîòîðûé æåëàòåëüíî äåëàòü îòëè÷íûì îò öâåòà ôîíà (çàäàâàåìîãî àòðèáóòîì LINK) è îò öâåòà àêòèâíîé ãèïåðññûëêè (çàäàâàåìîãî àòðèáóòîì ALINK). Ïðèìåð:
Ïðèìåð èñïîëüçîâàíèÿ ýòîãî àòðèáóòà â HTML-äîêóìåíòå èìååòñÿ â óðîêå 15. m Àòðèáóò BGPROPERTIES çàäàåò ñâîéñòâà ôîíîâîãî èçîáðàæåíèÿ.  äàííûé ìîìåíò áðàóçåðàìè ïîääåðæèâàåòñÿ åäèíñòâåííîå åãî çíà÷åíèå fixed, çàïðåùàþùåå ïðîêðóòêó èçîáðàæåíèÿ. Ïðèìåð:
m Àòðèáóò TOPMARGIN çàäàåò âåðõíþþ ãðàíèöó ñòðàíèöû â ïèêñåëàõ. Ïðèìåð:
m Àòðèáóò BOTTOMMARGIN çàäàåò íèæíþþ ãðàíèöó ñòðàíèöû â ïèêñåëàõ. Ïðèìåð:
m Àòðèáóò LEFTMARGIN çàäàåò ëåâóþ ãðàíèöó ñòðàíèöû â ïèêñåëàõ. Ïðèìåð:
m Àòðèáóò RIGHTMARGIN çàäàåò ïðàâóþ ãðàíèöó ñòðàíèöû â ïèêñåëàõ. Ïðèìåð:
Ïðèìåðû èñïîëüçîâàíèÿ â HTML-äîêóìåíòå àòðèáóòîâ, ðåãóëèðóþùèõ ïîëîæåíèå ãðàíèö ñòðàíèöû, èìåþòñÿ â óðîêå 4. Íà ðèñ. 1.8 ïîêàçàíà âåá-ñòðàíèöà (ëèñòèíã 1.1), äëÿ êîòîðîé âåðõíÿÿ, ëåâàÿ, ïðàâàÿ è íèæíÿÿ ãðàíèöû íå çàäàíû, òî åñòü ðàâíû 0. Âèäíî, ÷òî òåêñò êàê áû ïðèëèïàåò ê ëåâîìó êðàþ ñòðàíèöû, îòñòóïîâ ñâåðõó è ñíèçó íå íàáëþäàåòñÿ. Ïðàâûé êðàé òåêñòà èìååò îòñòóï îò ïðàâîé ãðàíèöû òîëüêî èç-çà òîãî, ÷òî â íåì ïîñëå êàæäîé ñòðîêè óêàçàí òåã ïåðåõîäà íà íîâóþ ñòðîêó (òåã
). Ëèñòèíã 1.1. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû, äëÿ êîòîðîé íå çàäàíû ãðàíèöû <TITLE>Ìîÿ ïåðâàÿ ïðîãðàììà À. Ñ. Ïóøêèí Çèìíÿÿ äîðîãàÑêâîçü âîëíèñòûå òóìàíû
Ïðîáèðàåòñÿ ëóíà,
Íà ïå÷àëüíûå ïîëÿíû
Ëüåò ïå÷àëüíî ñâåò îíà
Ïî äîðîãå çèìíåé, ñêó÷íîé
Òðîéêà áîðçàÿ áåæèò,
Êîëîêîëü÷èê îäíîçâó÷íûé
Óòîìèòåëüíî ãðåìèò.
×òî-òî ñëûøèòñÿ ðîäíîå
 äîëãèõ ïåñíÿõ ÿìùèêà:
Òî ðàçãóëüå óäàëîå
Òî ñåðäå÷íàÿ òîñêà...
Íè îãíÿ, íè ÷åðíîé õàòû,
Ãëóøü è ñíåã... Íàâñòðå÷ó ìíå,
Òîëüêî âåðñòû ïîëîñàòû
Ïîïàäàþòñÿ îäíå...
Ñêó÷íî, ãðóñòíî...Çàâòðà, Íèíà,
Çàâòðà ê ìèëîé âîçâðàòÿñü,
ß çàáóäóñü ó êàìèíà,
Çàãëÿæóñü íå íàãëÿäÿñü.
Çâó÷íî ñòðåëêà ÷àñîâàÿ
Ìåäíûé êðóã ñâîé ñîâåðøèò,
È, äîêó÷íûõ óäàëÿÿ,
Ïîëíî÷ü íàñ íå ðàçëó÷èò
Ãðóñòíî, Íèíà: ïóòü ìîé ñêó÷åí,
Äðåìëÿ ñìîëêíóë ìîé ÿìùèê,
Êîëîêîëü÷èê îäíîçâó÷íûé,
Îòóìàíåí ëóííûé ëèê.
1826
Ðèñ. 1.8. Âåá-ñòðàíèöà, äëÿ êîòîðîé íå çàäàíû ãðàíèöû
Íà ðèñ. 1.9 ïîêàçàíà âåá-ñòðàíèöà, äëÿ êîòîðîé âåðõíÿÿ, ëåâàÿ, ïðàâàÿ è íèæíÿÿ ãðàíèöû çàäàíû è ðàâíû 150 ïèêñåëîâ (ëèñòèíã 1.2). Âèäíî, ÷òî òåêñò èìååò îòñòóïû îò ëåâîãî è ïðàâîãî êðàåâ, à òàêæå ñâåðõó (è ñíèçó, â ÷åì ìîæíî óáåäèòüñÿ, âûïîëíèâ ïðîêðóòêó). Òàê êàê òåêñò ïîëíîñòüþ â îêíî íå ïîìåùàåòñÿ, àâòîìàòè÷åñêè ñïðàâà ïîÿâëÿåòñÿ âåðòèêàëüíàÿ ïîëîñà ïðîêðóòêè. Ëèñòèíã 1.2. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû, äëÿ êîòîðîé çàäàíû ãðàíèöû <TITLE>Ìîÿ ïåðâàÿ ïðîãðàììà À. Ñ. Ïóøêèí Çèìíåå óòðî Ìîðîç è ñîëíöå; äåíü ÷óäåñíûé;
Åùå òû äðåìëåøü, äðóã ïðåëåñòíûé,
Ïîðà, êðàñàâèöà, ïðîñíèñü:
Îòêðîé ñîìêíóòû íåãîé âçîðû
Íàâñòðå÷ó ñåâåðíîé Àâðîðû,
Çâåçäîþ Ñåâåðà ÿâèñü!
Âå÷îð, òû ïîìíèøü, âüþãà çëèëàñü,
Íà ìóòíîì íåáå ìãëà íîñèëàñü;
Ëóíà, êàê áëåäíîå ïÿòíî,
Ñêâîçü òó÷è ìðà÷íûå æåëòåëà,
À òû ïå÷àëüíàÿ ñèäåëà-
À íûí÷å ïîãëÿäè â îêíî:
Ïîä ãîëóáûìè íåáåñàìè
Âåëèêîëåïíûìè êîâðàìè,
Áëåñòÿ íà ñîëíöå, ñíåã ëåæèò;
Ïðîçðà÷íûé ëåñ îäèí ÷åðíååò,
È åëü ñêâîçü èíåé çåëåíååò,
È ðå÷êà
32
Óðîê 1. Îñíîâíûå ñâåäåíèÿ
ïîäî ëüäîì áëåñòèò.
Âñÿ êîìíàòà ÿíòàðíûì áëåñêîì
Îçàðåíà. Âåñåëûì òðåñêîì
Òðåùèò çàòîïëåííàÿ ïå÷ü
Ïðèÿòíî äóìàòü ó ëåæàíêè.
Íî çíàåøü: íå âåëåòü ëè â ñàíêè
Êîáûëêó áóðóþ çàïðå÷ü?
Ñêîëüçÿ ïî óòðåííåìó ñíåãó,
Äðóã ìèëûé, ïðåäàäèìñÿ áåãó
Íåòåðïåëèâîãî êîíÿ
È íàâåñòèì ïîëÿ ïóñòûå,
Ëåñà, íåäàâíî ñòîëü ãóñòûå,
È áåðåã, ìèëûé äëÿ ìåíÿ
1829
Ðèñ. 1.9. Âåá-ñòðàíèöà ñ îòñòóïàìè îò ãðàíèö
Ïîäâåäåì èòîãè  ýòîì óðîêå ðàññìîòðåíû áàçîâûå ïîíÿòèÿ, îòíîñÿùèåñÿ ê ñîçäàíèþ âåáñòðàíèö. Ïîêàçàíû ñòðóêòóðà HTML-äîêóìåíòà è íåêîòîðûå îñíîâíûå òåãè. Ïåðå÷èñëåíû ïðàâèëà ñîçäàíèÿ âåá-ñòðàíèö.  çàêëþ÷åíèå óðîêà ïðåäñòàâëåíî íåñêîëüêî ïðèìåðîâ âåá-ñòðàíèö.
Óðîê 2 Òåêñò  ýòîì óðîêå ðàññìàòðèâàþòñÿ îñíîâíûå òåãè, ïðåäíàçíà÷åííûå äëÿ ðàáîòû ñ òåêñòîì. Ýòè òåãè ïîçâîëÿþò ôîðìàòèðîâàòü òåêñò, êðàñèâî ðàñïîëàãàòü åãî íà ñòðàíèöå, à òàêæå âûâîäèòü â âèäå âñïëûâàþùèõ ïîäñêàçîê.
34
Óðîê 2. Òåêñò
Ïåðâàÿ âåá-ñòðàíèöà Ìîæíî îòêðûòü Áëîêíîò è â òåëå äîêóìåíòà çàïèñàòü òåêñò, íå çàäóìûâàÿñü î åãî ðàçìåðàõ è öâåòå. Íà ðèñ. 2.1 ïîêàçàíà òàêàÿ ïðîãðàììà ïðè ïðîñìîòðå â áðàóçåðå (ëèñòèíã 2.1).
Ðèñ. 2.1. Âåá-ñòðàíèöà ñ òåêñòîì
Ëèñòèíã 2.1. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû ñ òåêñòîì <TITLE> Ìîÿ ïåðâàÿ Âåá-ñòðàíè÷êà 33 óäèâèòåëüíåéøèå áóêâû ðóññêîãî àëôàâèòà ïåðåäàþò ÷åëîâå÷åñòâó ñîáûòèÿ, ôàêòû, íàñòðîåíèå, ïåðåæèâàíèÿ, ðàäîñòü è âäîõíîâåíèå, òî åñòü âñå, ÷òî ìîæíî âèäåòü, ñëûøàòü, ïðîáîâàòü, òðîãàòü, ÷åì ìîæíî íàñëàæäàòüñÿ. Êàê æå áóêâû ìîãóò ïåðåäàòü îãðîìíîå êîëè÷åñòâî èíôîðìàöèè? Áóêâû îáðàçóþò ñëîâî, ñëîâà ñîáèðàþòñÿ â ïðåäëîæåíèÿ, ïðåäëîæåíèÿ ìîãóò ñîñòàâèòü öåëóþ êíèãó. Êíèãè ñîñòîÿò èç òåêñòà è ðèñóíêîâ.
Êàê âèäíî íà ðèñóíêå, òî, ÷òî íàõîäèòñÿ ìåæäó òåãàìè <TITLE> è , íå ïîÿâëÿåòñÿ íà ýêðàíå. Îäíàêî ïðè çàãðóçêå äîêóìåíòà â áðàóçåð ýòîò òåêñò çàãðóæàåòñÿ â ïåðâóþ î÷åðåäü è îòîáðàæàåòñÿ â çàãîëîâêå îêíà áðàóçåðà. Åñëè òåêñò çàãîëîâêà äîñòàòî÷íî èíôîðìàòèâåí, ïîëüçîâàòåëü â ïðîöåññå ïîèñêà íóæíûõ äîêóìåíòîâ óæå íà ýòàïå çàãðóçêè ìîæåò îïðåäåëèòü, äåéñòâèòåëüíî ëè åìó íóæåí ýòîò äîêóìåíò, à åñëè íå íóæåí, òî ñðàçó îòêàçàòüñÿ îò åãî çàãðóçêè è ïåðåéòè ê çàãðóçêå ñëåäóþùåãî. Òåêñò íàçâàíèÿ òðåáóåòñÿ è ïðè ñîçäàíèè çàêëàäêè íà äàííûé äîêóìåíò, ñ ýòîé òî÷êè çðåíèÿ åãî èíôîðìàòèâíîñòü òàêæå î÷åíü âàæíà.
Óðîâíè çàãîëîâêîâ Çàãîëîâêè ðàçëè÷íûõ óðîâíåé ïîçâîëÿþò ñòðóêòóðíî ðàçäåëèòü ôîðìàëüíî íå îãðàíè÷åííûé ïî äëèíå òåêñò íà îòäåëüíûå ðàçäåëû è àáçàöû. Ïåðâûé óðîâåíü çàãîëîâêîâ (ñàìûé âûñîêèé) îáîçíà÷àåòñÿ öèôðîé 1, ñëåäóþùèé — 2, è ò. ä. Òåãè
Óðîâíè çàãîëîâêîâ
35
ñ ìåíüøèìè íîìåðàìè îïðåäåëÿþò çàãîëîâêè áîëåå âûñîêèõ óðîâíåé. Áîëüøèíñòâî áðàóçåðîâ ïîääåðæèâàåò èíòåðïðåòàöèþ øåñòè óðîâíåé çàãîëîâêîâ, îïðåäåëÿÿ êàæäîìó èç íèõ ñîáñòâåííûé ñòèëü. Çàãîëîâîê ñàìîãî âåðõíåãî óðîâíÿ èìååò ïðèçíàê 1. Ñèíòàêñèñ çàãîëîâêà ïåðâîãî óðîâíÿ (H, îò àíãë. head — çàãîëîâîê): Çàãîëîâîê ïåðâîãî óðîâíÿ
Çàãîëîâîê ëþáîãî óðîâíÿ ìîæåò áûòü ïðåäñòàâëåí â îáùåì ñëó÷àå òàê: Çàãîëîâîê x-ãî óðîâíÿ
Çäåñü x — öèôðà îò 1 äî 6, îïðåäåëÿþùàÿ óðîâåíü çàãîëîâêà. Àòðèáóò ALIGN óïðàâëÿåò ãîðèçîíòàëüíûì âûðàâíèâàíèåì, ïðèíèìàÿ çíà÷åíèå LEFT (âëåâî), CENTER (ïî öåíòðó), RIGHT (âïðàâî) èëè JUSTIFY (ïî øèðèíå îò ëåâîé ãðàíèöû äî ïðàâîé). Íà ðèñ. 2.2 ïîêàçàíî îêíî ïðîãðàììû, ñîäåðæàùåé çàãîëîâêè, ïðè ïðîñìîòðå â áðàóçåðå (ëèñòèíã 2.2).
Ðèñ. 2.2. Âåá-ñòðàíèöà ñ çàãîëîâêàìè ðàçíûõ óðîâíåé
Ëèñòèíã 2.2. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû ñ çàãîëîâêàìè <TITLE> Çàãîëîâêè Çàãîëîâîê 1 - Òðàíñïîðòíûé ïðîòîêîë Çàãîëîâîê 2 - Ïðîòîêîë ìàðøðóòèçàöèè Çàãîëîâîê 3 - Ïðîòîêîë ïåðåäà÷è ôàéëîâ Çàãîëîâîê 4 - Ïðîòîêîë ïåðåäà÷è ïî÷òû Çàãîëîâîê 5 - Ñåòåâîé ïðîòîêîë Çàãîëîâîê 6 - Ïðîòîêîë ïîääåðæêè ñåòåâîãî àäðåñà
36
Óðîê 2. Òåêñò
Äàííûé òåã ïîÿâèëñÿ â HTML âåðñèè 2.0. Çàãîëîâêè áîëåå âûñîêèõ óðîâíåé îòîáðàæàþòñÿ øðèôòîì áîëüøåãî ðàçìåðà.
Øðèôò Òåã ïîçâîëÿåò ñ ïîìîùüþ àòðèáóòîâ óïðàâëÿòü ðàçìåðîì è öâåòîì øðèôòà. Àòðèáóò SIZE óïðàâëÿåò ðàçìåðîì øðèôòà. Øðèôò ìîæåò èìåòü ðàçìåð îò 1 äî 7. Ìîæíî óêàçàòü ðàçìåð øðèôòà íåïîñðåäñòâåííî öèôðîé èëè çàäàòü ñìåùåíèå îòíîñèòåëüíî áàçîâîãî çíà÷åíèÿ (ïî óìîë÷àíèþ — 3) â ïîëîæèòåëüíóþ èëè îòðèöàòåëüíóþ ñòîðîíó. Ñîîòâåòñòâèå ðàçìåðà øðèôòà âåëè÷èíå â ïóíêòàõ èëëþñòðèðóåò òàáë. 2.1. Òàáëèöà 2.1. Òèïè÷íûå ðàçìåðû øðèôòîâ è èõ âåëè÷èíû â ïóíêòàõ Ðàçìåð øðèôòà 1
Òèïè÷íàÿ âåëè÷èíà â ïóíêòàõ 8
2
10
3
12
4
14
5
18
6
24
7
36
Ðàçìåð øðèôòà ìîæíî èçìåíèòü ïðè ïîìîùè ñëåäóþùåé êîìàíäû:
Äëÿ èçìåíåíèÿ áàçîâîãî çíà÷åíèÿ ñëóæèò òàêàÿ êîìàíäà:
Ïðèìåð èñïîëüçîâàíèÿ øðèôòîâ ðàçíîãî ðàçìåðà ïîêàçàí íà ðèñ. 2.3 (ëèñòèíã 2.3).
Ðèñ. 2.3. Âåá-ñòðàíèöà ñ áóêâàìè ðàçíîãî ðàçìåðà
Øðèôò
37
Ëèñòèíã 2.3. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû, ñîäåðæàùåé áóêâû ðàçíîãî ðàçìåðà <TITLE> Ðàçìåð øðèôòà
Ï Å Ò Å Ð Á Ó Ð Ã
. Òåã
ïîçâîëÿåò ðàçäåëèòü òåêñò íà àáçàöû. Åñëè ýòîãî íå ñäåëàòü, äîêóìåíò áóäåò âûãëÿäåòü êàê îäèí áîëüøîé àáçàö. ALIGN — àòðèáóò âûðàâíèâàíèÿ òåãà
. Ýòîò àòðèáóò ìîæåò èìåòü çíà÷åíèå LEFT, CENTER, RIGHT, JUSTIFY, ÷òî ïîçâîëÿåò âûðîâíÿòü àáçàö ïî ëåâîìó êðàþ, ïî
Àáçàöû è ðàçðûâû ñòðîê
39
öåíòðó, ïî ïðàâîìó êðàþ èëè ïî øèðèíå ñîîòâåòñòâåííî. Íàïðèìåð, ñëåäóþùàÿ çàïèñü âûðàâíèâàåò àáçàö ïî ëåâîìó êðàþ:
Äàííûé òåã ïîÿâèëñÿ â HTML âåðñèè 2.0, îí íå ìîæåò ñîäåðæàòü äðóãèå îòêðûâàþùèå è çàêðûâàþùèå òåãè, òî åñòü ìåæäó òåãàìè
è
ìîæåò áûòü òîëüêî òåêñò è ðàçðûâ ñòðîêè, íî íå äðóãèå òåãè. Òåã. Åñëè çàêðûâàþùèé òåã
îïóùåí, òî ýôôåêòèâíî çàìåíÿåò åãî, íà÷èíàÿ íîâûé àáçàö. Îí ìîæåò èìåòü àòðèáóò ALIGN, êîòîðûé èìååò çíà÷åíèå LEFT, CENTER èëè RIGHT è óêàçûâàåò îòñòóï. Êàæäûé ñëåäóþùèé ðàçäåë èãíîðèðóåò çíà÷åíèå ALIGN, çàäàííîå äëÿ ïðåäûäóùåãî ðàçäåëà. Ñèíòàêñèñ: Òåêñò ðàçäåëà
Ïðèìåð âåá-ñòðàíèöû, ñîäåðæàùåé òåêñò, âûðîâíåííûé ðàçëè÷íûìè ñïîñîáàìè, ïîêàçàí íà ðèñ. 2.7 (ëèñòèíã 2.7).
Ðèñ. 2.7. Âåá-ñòðàíèöà ñ òåêñòîì, âûðîâíåííûì ðàçëè÷íûìè ñïîñîáàìè
Ïðåäâàðèòåëüíîå ôîðìàòèðîâàíèå
41
Ëèñòèíã 2.7. Ïðèìåð âûðàâíèâàíèÿ òåêñòà ðàçëè÷íûìè ñïîñîáàìè <TITLE> Öåíòðèðîâàíèå è âûðàâíèâàíèå
Àòðèáóò ALIGN ïîçâîëÿåò âûðîâíÿòü òåêñò ïî ëåâîìó èëè ïðàâîìó êðàþ,
ïî öåíòðó èëè ïî øèðèíå
Ïî óìîë÷àíèþ òåêñò, ãðàôèêà è ýëåìåíòû òàáëèöû âûðàâíèâàþòñÿ ïî ëåâîìó êðàþ
è íå âûðàâíèâàþòñÿ ïî ïðàâîìó êðàþ, òî åñòü íà÷àëî ñòðîê íàõîäèòñÿ íà îäíîì óðîâíå, à êîíåö - íà ðàçíûõ.
Âûðàâíèâàíèå ïî ëåâîìó êðàþ çàäàåòñÿ àòðèáóòîì ALIGN=LEFT. Âûðàâíèâàíèå ïî ïðàâîìó êðàþ çàäàåòñÿ
àòðèáóòîì ALIGN=RIGHT
Öåíòðèðîâàíèå ýëåìåíòîâ äîêóìåíòà ìîæíî ïðîèçâîäèòü ðàçíûìè ñïîñîáàìè,
íàïðèìåð ñ ïîìîùüþ òåãà ALIGN=CENTER
, , , , , <STRONG>, , , <SMALL>, <STRIKE>, <SUB>, <SUP>, , , , <EM>, , , , <SAMP>, <WBR>, , , <SPAN>, , , , <S> ïîçâîëÿþò ôîðìàòèðîâàòü òåêñò, èçìåíÿòü åãî öâåò, êðàñèâî ðàñïîëàãàòü íà ñòðàíèöå. Äëÿ ðàçðûâà ñòðîê ñëóæàò òåãè
è . Òåãè è èñïîëüçóþòñÿ äëÿ ñîçäàíèÿ âñïëûâàþùèõ ïîäñêàçîê.
Óðîê 3 Ãðàôèêà Îäíà èç íàèáîëåå ïðèâëåêàòåëüíûõ ÷åðò WWW — âîçìîæíîñòü âêëþ÷åíèÿ ññûëîê íà ãðàôè÷åñêèå ôàéëû â HTML-äîêóìåíò. Ãðàôèêà — ëó÷øåå óêðàøåíèå âåá-óçëà. Ïîä ãðàôèêîé ïîäðàçóìåâàþò çíà÷êè, ðèñóíêè, ôîòîãðàôèè è êàðòû èçîáðàæåíèé, çàíèìàþùèå ÷àñòü îêíà áðàóçåðà. Ïðè ðàçìåùåíèè ãðàôèêè íà âåá-ñòðàíèöå íåîáõîäèìî ñëåäèòü çà òåì, ÷òîáû ðàçìåð ãðàôè÷åñêèõ ôàéëîâ áûë êàê ìîæíî ìåíüøå. Õîòÿ â ïðèíöèïå ðàçìåðû ãðàôè÷åñêèõ ôàéëîâ â áàéòàõ ìîãóò áûòü íåîãðàíè÷åííûìè, ñëåäóåò ïîìíèòü, ÷òî ïåðåäà÷à áîëüøîãî ôàéëà ìîæåò çàíÿòü î÷åíü ìíîãî âðåìåíè, îñîáåííî ïðè íèçêîé ïðîïóñêíîé ñïîñîáíîñòè ëèíèé. Åñëè òîò, êòî ñìîòðèò âàøó âåá-ñòðàíèöó, ïëàòèò äåíüãè çà âðåìÿ íàõîæäåíèÿ â Èíòåðíåòå, âðÿä ëè îí çàõî÷åò ñìîòðåòü âàøè ñëåäóþùèå ñòðàíèöû, ó÷èòûâàÿ, ÷òî ïåðâàÿ ñòðàíèöà çàãðóæàåòñÿ î÷åíü äîëãî.  ýòîì óðîêå áóäóò ðàññìîòðåíû ïðèåìû ðàáîòû ñ ãðàôèêîé.
Ðàçìåùåíèå ãðàôèêè íà âåá-ñòðàíèöå
57
Ðàçìåùåíèå ãðàôèêè íà âåá-ñòðàíèöå Äëÿ âñòàâêè ãðàôèêè â âåá-ñòðàíèöó èñïîëüçóåòñÿ òåã . Ãðàôèêà ïîçâîëÿåò çíà÷èòåëüíî óëó÷øèòü âíåøíèé âèä è ôóíêöèîíàëüíîñòü äîêóìåíòîâ. Òåã (îò àíãë. image — èçîáðàæåíèå) ïîÿâèëñÿ â HTML âåðñèè 2.0. Îí èìååò àòðèáóòû SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP, ALIGN, BORDER, HSPACE, VSPACE. Ïðèìåð: .
m Àòðèáóò SRC. Àòðèáóò SRC (îò àíãë. source — èñòî÷íèê) îïðåäåëÿåò ìåñòîðàñïîëîæåíèå èçîáðàæåíèÿ, âêëþ÷àåìîãî â ñîñòàâ äîêóìåíòà. URL — îáÿçàòåëüíûé ïàðàìåòð, êîòîðûé óêàçûâàåò áðàóçåðó, ãäå íàõîäèòñÿ ðèñóíîê. Ðèñóíîê äîëæåí õðàíèòüñÿ â ãðàôè÷åñêîì ôîðìàòå, íàïðèìåð â ôîðìàòå GIF èëè JPG. Åñëè ãðàôè÷åñêèé ôàéë íàõîäèòñÿ â òîì æå êàòàëîãå, ÷òî è ñîäåðæàùèé åãî HTML-äîêóìåíò, äîñòàòî÷íî óêàçàòü òîëüêî èìÿ ýòîãî ôàéëà, íàïðèìåð:
Åñëè ãðàôè÷åñêèé ôàéë íàõîäèòñÿ íà òîì æå ñåðâåðå, ÷òî è ñîäåðæàùèé åãî HTML-äîêóìåíò, íî â äðóãîì êàòàëîãå, ñëåäóåò óêàçàòü èìÿ êàòàëîãà è èìÿ ýòîãî ôàéëà, íàïðèìåð: .
Åñëè ãðàôè÷åñêèé ôàéë íàõîäèòñÿ íå íà òîì ñåðâåðå, íà êîòîðîì íàõîäèòñÿ ñîäåðæàùèé åãî HTML-äîêóìåíò, íåîáõîäèìî óêàçàòü ïîëíûé àäðåñ ýòîãî ôàéëà, íàïðèìåð: .
m Àòðèáóò ALT. Íåîáÿçàòåëüíûé àòðèáóò ALT çàäàåò àëüòåðíàòèâíûé òåêñò, êîòîðûé âûâîäèòñÿ áðàóçåðîì, ïîêà èäåò çàãðóçêà èçîáðàæåíèÿ (èëè áðàóçåðîì, íå ïîääåðæèâàþùèì îòîáðàæåíèå ãðàôèêè). Îáû÷íî ýòî êîðîòêîå îïèñàíèå èçîáðàæåíèÿ, êîòîðîå ïîëüçîâàòåëü ìîã áû èëè ñìîæåò óâèäåòü íà ýêðàíå. Åñëè ýòîò àòðèáóò íå çàäàí, íà ìåñòå èçîáðàæåíèÿ áîëüøèíñòâî áðàóçåðîâ âûâîäÿò çíà÷îê, ùåëêíóâ íà êîòîðîì, ïîëüçîâàòåëü ñìîæåò óâèäåòü èçîáðàæåíèå. Àòðèáóò ALT ðåêîìåíäóåòñÿ óêàçûâàòü, åñëè âàøè ïîëüçîâàòåëè ïðèìåíÿþò áðàóçåð, íå ïîääåðæèâàþùèé ãðàôè÷åñêèé ðåæèì, íàïðèìåð Lunix. m Àòðèáóò LONGDESC. Íåîáÿçàòåëüíûé àòðèáóò LONGDESC çàäàåò ññûëêó íà óäàëåííûé ðåñóðñ. m Àòðèáóò HEIGTH. Íåîáÿçàòåëüíûé àòðèáóò HEIGTH îïðåäåëÿåò âûñîòó ðèñóíêà â ïèêñåëàõ. Åñëè äàííûé ïàðàìåòð íå óêàçàí, èñïîëüçóåòñÿ îðèãèíàëüíàÿ âûñîòà ðèñóíêà. Ýòîò ïàðàìåòð ïîçâîëÿåò ñæèìàòü èëè ðàñòÿãèâàòü èçîáðàæåíèÿ ïî âåðòèêàëè, ÷òî äàåò âîçìîæíîñòü òî÷íåå êîíòðîëèðîâàòü âíåøíèé âèä äîêóìåíòà. Îäíàêî íåêîòîðûå áðàóçåðû íå ïîääåðæèâàþò äàííûé ïàðàìåòð. Èíîãäà ýêðàííîå ðàçðåøåíèå íà ðàçíûõ êîìïüþòåðàõ ìîæåò áûòü ðàçíûì, ïîýòîìó ïðè çàäàíèè àáñîëþòíîé âåëè÷èíû ãðàôè÷åñêîãî îáúåêòà ñëåäóåò áûòü âíèìàòåëüíûì. m Àòðèáóò WIDTH. Íåîáÿçàòåëüíûé àòðèáóò WIDTH èñïîëüçóåòñÿ äëÿ óêàçàíèÿ øèðèíû ðèñóíêà â ïèêñåëàõ.
58
Óðîê 3. Ãðàôèêà
m Àòðèáóò ALIGN. Íåîáÿçàòåëüíûé àòðèáóò ALIGN èñïîëüçóåòñÿ äëÿ òî÷íîãî ïîçèöèîíèðîâàíèÿ îáúåêòîâ íà ýêðàíå. Äîñòóïíûå çíà÷åíèÿ: q top — âåðõíèé êðàé îáúåêòà âûðàâíèâàåòñÿ ïî âåðõíåìó êðàþ ñòðîêè; q middle — öåíòð îáúåêòà âûðàâíèâàåòñÿ ïî áàçîâîé ëèíèè ñòðîêè; q bottom — íèæíèé êðàé îáúåêòà âûðàâíèâàåòñÿ ïî áàçîâîé ëèíèè ñòðîêè; q left — îáúåêò âûðàâíèâàåòñÿ ïî ëåâîìó êðàþ, ïðè ýòîì âîçìîæíî îáòåêàíèå îáúåêòà òåêñòîì; q right — îáúåêò âûðàâíèâàåòñÿ ïî ïðàâîìó êðàþ, ïðè ýòîì âîçìîæíî îáòåêàíèå îáúåêòà òåêñòîì. Åñëè äàííûé ïàðàìåòð íå óêàçàí, áîëüøèíñòâî áðàóçåðîâ ðàñïîëàãàåò èçîáðàæåíèå â ëåâîé ÷àñòè ýêðàíà, à òåêñò — ñïðàâà îò íåãî. m Àòðèáóò BORDER. Àòðèáóò BORDER çàäàåò òîëùèíó îáðàìëåíèÿ äëÿ èçîáðàæåíèÿ. m Àòðèáóò VSPACE. Àòðèáóò VSPACE ïîçâîëÿåò çàäàòü ðàçìåð â ïèêñåëàõ ïóñòîãî ïðîñòðàíñòâà íàä è ïîä èçîáðàæåíèåì, ÷òîáû òåêñò «íå íàåçæàë» íà èçîáðàæåíèå. m Àòðèáóò HSPACE. Àòðèáóò HSPACE ïîçâîëÿåò çàäàòü ðàçìåð â ïèêñåëàõ ïóñòîãî ïðîñòðàíñòâà ñëåâà è ñïðàâà îò èçîáðàæåíèÿ, ÷òîáû òåêñò «íå íàåçæàë» íà èçîáðàæåíèå.
Ôîðìàòû ãðàôè÷åñêèõ ôàéëîâ Áîëüøèíñòâî ôîðìàòîâ ôàéëîâ â êîìïüþòåðíîé ãðàôèêå ïîçâîëÿåò õðàíèòü èíôîðìàöèþ îá èçîáðàæåíèè êàê î íàáîðå òî÷åê. Òî÷íî òàê æå (â âèäå íàáîðà òî÷åê) èçîáðàæåíèÿ âûâîäÿòñÿ íà ýêðàí. Îáû÷íî â Èíòåðíåòå èñïîëüçóþòñÿ äâà ðàñòðîâûõ ôîðìàòà — GIF è JPEG. Êðîìå òîãî, â Èíòåðíåòå äîâîëüíî ìíîãî èçîáðàæåíèé, èìåþùèõ ôîðìàòû BMP è PCX. Ñïåöèàëèñòû ñ÷èòàþò, ÷òî äîâîëüíî áîëüøèå ïåðñïåêòèâû åñòü ó ôîðìàòà PNG — ñàìîãî ñîâðåìåííîãî ôîðìàòà ïåðåíîñèìîé ñåòåâîé ãðàôèêè.
Ôîðìàò GIF Ôîðìàò GIF (Graphic Interchange Format — ôîðìàò îáìåíà ãðàôè÷åñêèìè äàííûìè) ñëóæèò äëÿ çàïèñè è õðàíåíèÿ ðàñòðîâûõ ãðàôè÷åñêèõ èçîáðàæåíèé. Ýòîò ôîðìàò áûë ðàçðàáîòàí êîðïîðàöèåé Compuserve ñ èñïîëüçîâàíèåì òåõíîëîãèè Unisys. Ôîðìàò GIF ïðèìåíÿåòñÿ äëÿ õðàíåíèÿ 256-öâåòíûõ èçîáðàæåíèé (èëè èçîáðàæåíèé ñ ìåíüøèì êîëè÷åñòâîì öâåòîâ), ñæàòûõ ïî ìåòîäó Ëåìïåëà—Çèâà (LZW). Òîò æå ìåòîä ñæàòèÿ õàðàêòåðåí äëÿ àðõèâàòîðîâ ôàéëîâ. Ôîðìàò GIF äîëüøå äðóãèõ ïðåäñòàâëåí â Èíòåðíåòå è ïîääåðæèâàåòñÿ ðàçíûìè ãðàôè÷åñêèìè ðåäàêòîðàìè.  íåì èñïîëüçóþòñÿ èíäåêñèðîâàííûå öâåòà. Âåðñèÿ GIF89a ýòîãî ôîðìàòà îáåñïå÷èâàåò âîçìîæíîñòü ÷åðåññòðî÷íîé ðàçâåðòêè, ÷òî ïîçâîëÿåò ïîñòåïåííî ïîâûøàòü êà÷åñòâî ïðèíÿòîãî ÷åðåç êàíàë ñâÿçè èçîáðàæåíèÿ. Ýòî ñàìûé ðàñïðîñòðàíåííûé ôîðìàò èçîáðàæåíèé â Èíòåðíåòå.
Ôîðìàòû ãðàôè÷åñêèõ ôàéëîâ
59
Èçîáðàæåíèÿ â ôîðìàòå GIF õðàíÿòñÿ â ôàéëàõ ñ ðàñøèðåíèåì .gif. Ê äîñòîèíñòâàì GIF-èçîáðàæåíèé îòíîñèòñÿ òî, ÷òî âèä èçîáðàæåíèÿ íå çàâèñèò îò áðàóçåðà è ïëàòôîðìû. Ëó÷øå âñåãî îòîáðàæàþòñÿ ÷åðòåæè, ðèñóíêè, èçîáðàæåíèÿ ñ íåáîëüøèì êîëè÷åñòâîì îäíîðîäíûõ öâåòîâ, ïðîçðà÷íûå èçîáðàæåíèÿ è àíèìàöèîííûå ïîñëåäîâàòåëüíîñòè.  GIF-èçîáðàæåíèÿõ èñïîëüçóåòñÿ àëãîðèòì ñæàòèÿ áåç ïîòåðè èíôîðìàöèè.
Ôîðìàò JPEG Ïðèìåíÿþùèéñÿ â ôîðìàòå JPEG (Joint Photographic Expert Group — îáúåäèíåííàÿ ãðóïïà ýêñïåðòîâ â îáëàñòè ôîòîãðàôèè) àëãîðèòì îáðàáîòêè èçîáðàæåíèé ðàçðàáîòàí ãðóïïîé ýêñïåðòîâ êàê ñðåäñòâî ñæàòèÿ èçîáðàæåíèé ñ ïàëèòðîé 24 áèòà íà ïèêñåë, ÷òî îáåñïå÷èâàåò îòîáðàæåíèå 16,7 ìèëëèîíà öâåòîâ. JPEG — îäèí èç ñàìûõ ìîùíûõ àëãîðèòìîâ. Ïðàêòè÷åñêè îí ÿâëÿåòñÿ ñòàíäàðòîì äå-ôàêòî äëÿ ïîëíîöâåòíûõ èçîáðàæåíèé. Ôîðìàò JPEG áûë ñîçäàí äëÿ òîãî, ÷òîáû èçáàâèòüñÿ îò íåäîñòàòêîâ ôîðìàòà GIF. Àëãîðèòì îïåðèðóåò îáëàñòÿìè 8´8 ïèêñåëîâ, â êîòîðûõ ÿðêîñòü è öâåò ïëàâíî ìåíÿþòñÿ. Ñæàòèå â ôîðìàòå JPEG îñóùåñòâëÿåòñÿ çà ñ÷åò òîãî, ÷òî â ðåàëüíûõ èçîáðàæåíèÿõ, â ÷àñòíîñòè â ôîòîãðàôèÿõ, öâåò îáû÷íî ìåíÿåòñÿ äîñòàòî÷íî ïëàâíî. Îáåñïå÷èâàåòñÿ âûñîêèé êîýôôèöèåíò ñæàòèÿ, çíà÷åíèå êîòîðîãî äîñòèãàåò 100 è çàâèñèò îò äîïóñòèìîãî óðîâíÿ ïîòåðü èçîáðàçèòåëüíîé èíôîðìàöèè. Ôîðìàò øèðîêî èñïîëüçóåòñÿ â HTML-äîêóìåíòàõ è äëÿ ïåðåäà÷è ãðàôèêè ïî ñåòè. Ñîõðàíÿåò ïàðàìåòðû ãðàôèêè â öâåòîâîé ìîäåëè RGB. Èçîáðàæåíèÿ â ôîðìàòå JPEG õðàíÿòñÿ â ôàéëàõ ñ ðàñøèðåíèåì .jpg.  ôîðìàòå JPEG èñïîëüçóþòñÿ àëãîðèòìû ñæàòèÿ ñ ïîòåðåé èíôîðìàöèè. Ïðè ñæàòèè èç èçîáðàæåíèÿ èñêëþ÷àþòñÿ äàííûå, êîòîðûå ñ÷èòàþòñÿ íåñóùåñòâåííûìè. Ïðè ýòîì åñòü ðèñê ïîëó÷èòü íå÷åòêîå, ðàçìûòîå èçîáðàæåíèå ñ èñêàæåíèåì äåòàëåé.
Ôîðìàò PNG Ïîñëåäíåå âðåìÿ ïîëó÷èëè ðàñïðîñòðàíåíèå ôàéëû â ôîðìàòå PNG (Portable Network Graphics — ïåðåíîñèìàÿ ñåòåâàÿ ãðàôèêà). Ñàìî íàçâàíèå ôîðìàòà ãîâîðèò î åãî íàçíà÷åíèè — èñïîëüçîâàíèè ïðè ïåðåäà÷å èçîáðàæåíèé â ñåòÿõ. Ôîðìàò ïîääåðæèâàåò ïîëíîöâåòíûå RGB-èçîáðàæåíèÿ è èíäåêñèðîâàííûå èçîáðàæåíèÿ. Äîïóñêàåò íàëè÷èå äîïîëíèòåëüíîãî êàíàëà äëÿ õðàíåíèÿ ìàñêè îáðåçêè. Èìååò ýôôåêòèâíûé àëãîðèòì ñæàòèÿ áåç ïîòåðè èíôîðìàöèè.
Ôîðìàò BMP Ïåðâûì ãðàôè÷åñêèì ôîðìàòîì äëÿ IBM-ñîâìåñòèìûõ êîìïüþòåðîâ, íàøåäøèì øèðîêîå ïðèìåíåíèå, áûë ôîðìàò BMP (Bit Map — áèòîâàÿ êàðòà). Ìîæíî ñêàçàòü, ÷òî ñ íåãî âñå íà÷àëîñü.  ôîðìàòå BMP ïåðâîíà÷àëüíî èñïîëüçîâàëîñü ïðîñòåéøåå êîäèðîâàíèå — ïî ïèêñåëàì (ñàìîå íåýêîíîìíîå). Ïèêñåëû îáõîäèëèñü ïîñëåäîâàòåëüíî ïî ñòðîêàì, íà÷èíàÿ ñ íèæíåãî ëåâîãî óãëà ãðàôè÷åñêîãî èçîáðàæåíèÿ. Ôàéëû èìåííî ýòîãî ôîðìàòà ïîääåðæèâàëèñü ïåðâûìè âåðñèÿìè
60
Óðîê 3. Ãðàôèêà
îáîëî÷êè Windows.  íèõ èñïîëüçîâàëèñü òîëüêî èíäåêñèðîâàííûå öâåòà â êîëè÷åñòâå 256, òî åñòü îäèí ïèêñåë ïðåäñòàâëÿëñÿ îäíèì áàéòîì.  äàëüíåéøåì ôîðìàò ñòàë ïðèìåíÿòüñÿ è äëÿ êîäèðîâàíèÿ ïîëíîöâåòíûõ èçîáðàæåíèé. Ýòî ñòàíäàðòíûé ôîðìàò ðàñòðîâîé ãðàôèêè. Ïîñêîëüêó BMP-ôàéëû ïðåäñòàâëÿþò ñîáîé «ðîäíîé» ôîðìàò ãðàôèêè äëÿ Microsoft Windows, ïîäîáíûõ èçîáðàæåíèé â Èíòåðíåòå äîñòàòî÷íî ìíîãî.
Ôîðìàò PCX Ôîðìàò PCX èñïîëüçóåò òîëüêî èíäåêñèðîâàííûå ïàëèòðû. Îí áûë ðàçðàáîòàí ôèðìîé Z-soft ñïåöèàëüíî äëÿ ïàêåòà PaintBrush, à â äàëüíåéøåì ïîëó÷èë áîëåå øèðîêîå ðàñïðîñòðàíåíèå.  íåì ïðåäóñìîòðåíî ñæàòèå, îáåñïå÷èâàþùåå áîëüøóþ êîìïàêòíîñòü ïî ñðàâíåíèþ ñ ôîðìàòîì BMP. Òåì íå ìåíåå ïðàêòè÷åñêè îí ïðèãîäåí òîëüêî äëÿ ïðîñòûõ èçîáðàæåíèé èëè èçîáðàæåíèé ñ èíäåêñèðîâàííûìè öâåòàìè.
Ïèêñåëû è ðàçðåøåíèå  Èíòåðíåòå äëÿ ïåðåäà÷è èçîáðàæåíèé â îñíîâíîì èñïîëüçóåòñÿ ðàñòðîâàÿ ãðàôèêà. Ðàñòðîâàÿ ãðàôèêà — ýòî, âî-ïåðâûõ, ãðàôèêà, ïðåäñòàâëÿåìàÿ â êîìïüþòåðå â âèäå ìíîæåñòâà òî÷åê (ïèêñåëîâ), âî-âòîðûõ, ôàéë îïðåäåëåííîãî ôîðìàòà. Äëÿ ðàñòðîâîé ãðàôèêè âàæíîé õàðàêòåðèñòèêîé ÿâëÿåòñÿ ðàçðåøåíèå èçîáðàæåíèÿ. Îäíà è òà æå êàðòèíêà ìîæåò áûòü ïðåäñòàâëåíà ñ ëó÷øèì èëè õóäøèì êà÷åñòâîì â ñîîòâåòñòâèè ñ êîëè÷åñòâîì òî÷åê íà åäèíèöó äëèíû. Ðàçðåøåíèå — êîëè÷åñòâî òî÷åê íà åäèíèöó èçìåðåíèÿ: m dpi (dots per inch) — êîëè÷åñòâî òî÷åê íà äþéì; m ppi (points/pixels per inch) — êîëè÷åñòâî ïèêñåëîâ íà äþéì; m spi (samples per inch) — îïòè÷åñêîå, ïåðâîíà÷àëüíîå ðàçðåøåíèå ñêàíåðà, îçíà÷àþùåå êîëè÷åñòâî ïðîá íà äþéì, òî åñòü ÷èñëî «ïðîñìîòðîâ» ñêàíåðîì èçîáðàæåíèÿ âî âðåìÿ ñêàíèðîâàíèÿ. Dpi — íàèáîëåå ÷àñòî èñïîëüçóåìûé òåðìèí, êîòîðûé îòíîñèòñÿ òîëüêî ê ìàëåíüêèì òî÷êàì, ñîçäàâàåìûì âûõîäíûì óñòðîéñòâîì. Òî÷êè âûõîäíîãî óñòðîéñòâà íè÷åãî îáùåãî íå èìåþò ñ ðàçðåøåíèåì èçîáðàæåíèÿ, îíè ñâÿçàíû ñ ìèíèìàëüíûì âîñïðîèçâîäèìûì ïðèíòåðîì ðàçìåðîì òî÷êè. Ðàçðåøåíèå èëëþñòðàöèè îáû÷íî èçìåðÿåòñÿ â dpi. ×åì áîëüøå ðàçðåøåíèå, òåì áîëåå êà÷åñòâåííûì ÿâëÿåòñÿ èçîáðàæåíèå, íî è òåì áîëüøèé ðàçìåð èìååò ôàéë, â êîòîðîì èçîáðàæåíèå ñîõðàíÿåòñÿ. Ðàçëè÷àþò ðàçðåøåíèå èçîáðàæåíèÿ, ðàçðåøåíèå ýêðàíà è ðàçðåøåíèå ïðèíòåðà. Ìîíèòîðû, âûïóñêàåìûå ðàçëè÷íûìè ôèðìàìè, êàê ïðàâèëî, èìåþò ñòàíäàðòíûå ðàçðåøåíèÿ: 640´470, 700´600, 1024´768, 1270´1024, 1600´1270, 1920´1600 òî÷åê. Ðàññòîÿíèå ìåæäó ëþìèíîôîðàìè õîðîøåãî ìîíèòîðà ñîñòàâëÿåò 0,2–0,25 ìì. Êîíå÷íî, äëÿ êà÷åñòâåííîãî äèçàéíà òðåáóåòñÿ ìîíèòîð ñ áîëüøèì ðàçðåøåíè-
Ïðèìåðû ðàçìåùåíèÿ ãðàôèêè íà âåá-ñòðàíèöå
61
åì. Èíîãäà äèçàéíåð ìîæåò ðåäàêòèðîâàòü èçîáðàæåíèå ïîïèêñåëüíî. Ðàçðåøàþùàÿ ñïîñîáíîñòü ýêðàíà çàâèñèò îò ìîíèòîðà è âèäåîàäàïòåðà êîìïüþòåðà. Ñòàòè÷åñêèå ðàñòðîâûå èçîáðàæåíèÿ ïðåäñòàâëÿþò ñîáîé äâóõìåðíûé ìàññèâ ÷èñåë. Ýëåìåíòû ýòîãî ìàññèâà íàçûâàþò ïèêñåëàìè (îò àíãë. pixel — picture element, èëè ýëåìåíò èçîáðàæåíèÿ). Ïèêñåë — ìèíèìàëüíûé àäðåñóåìûé ýëåìåíò äâóõìåðíîãî ðàñòðîâîãî èçîáðàæåíèÿ; îäíà òî÷êà èçîáðàæåíèÿ.
Ïðèìåðû ðàçìåùåíèÿ ãðàôèêè íà âåá-ñòðàíèöå Ïðåæäå ÷åì ðàçìåùàòü èçîáðàæåíèå íà âåá-ñòðàíèöå, ïðîâåäåì ýêñïåðèìåíò. Âîçüìåì ëþáèòåëüñêóþ ôîòîãðàôèþ âûñîòîé 11 ñì è øèðèíîé 13 ñì. Êàê îíà áóäåò âûãëÿäåòü íà ýêðàíå? Åñëè ìû îòñêàíèðóåì ôîòîãðàôèþ â òðåõ âàðèàíòàõ, â ïåðâîì âûáåðåì öâåòíîé ðåæèì ñ ðàçðåøåíèåì 300 dpi, âî âòîðîì — ÷åðíî-áåëûé ðåæèì ñ ðàçðåøåíèåì 300 dpi, â òðåòüåì — öâåòíîé ðåæèì ñ ðàçðåøåíèåì 72 dpi, òî â ïåðâûõ äâóõ âàðèàíòàõ îòñêàíèðîâàííàÿ ôîòîãðàôèÿ áóäåò èìåòü ðàçìåð 1304´1479 ïèêñåëîâ, à â òðåòüåì âàðèàíòå — 313´355 ïèêñåëîâ.
Ðèñ. 3.1. Êóïîëà íà âåá-ñòðàíèöå
62
Óðîê 3. Ãðàôèêà
Ïîñêîëüêó ðàçìåðû ôîòîãðàôèè â ïèêñåëàõ â ïåðâûõ äâóõ âàðèàíòàõ îêàçàëèñü áîëüøå ðàçìåðà ýêðàíà â ïèêñåëàõ (ðàçìåð, íàïðèìåð, ìîåãî ýêðàíà ñîñòàâëÿåò 768´1024 ïèêñåëîâ), ïðè ðàçìåùåíèè ôîòîãðàôèè íà âåá-ñòðàíèöå äëÿ åå ïðîñìîòðà ïîòðåáóþòñÿ ïîëîñû ïðîêðóòêè.  òðåòüåì âàðèàíòå îòñêàíèðîâàííàÿ ôîòîãðàôèÿ çàíèìàåò òîëüêî ÷àñòü ýêðàíà. Òàêèì îáðàçîì, äëÿ èçîáðàæåíèé, ðàñïðîñòðàíÿåìûõ ÷åðåç Èíòåðíåò, îáû÷íî óñòàíàâëèâàåòñÿ ðàçðåøåíèå 72 dpi, à ðàçðåøåíèå â 300 dpi õàðàêòåðíî áîëüøå äëÿ ïå÷àòíûõ èçîáðàæåíèé. Íà ðèñ. 3.1 ïîêàçàí ïðèìåð ðàçìåùåíèÿ íà âåá-ñòðàíèöå ïðîèçâîëüíîãî èçîáðàæåíèÿ (îòñêàíèðîâàííîé ôîòîãðàôèè), ñîîòâåòñòâóþùèé êîä ïðèâåäåí â ëèñòèíãå 3.1. Ëèñòèíã 3.1. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû ñ èçîáðàæåíèåì öåðêâè <TITLE> Ðèñóíîê
 ýòîì ïðèìåðå ïðè ðàçìåùåíèè èçîáðàæåíèÿ íà ñòðàíèöå ìû íå êàñàëèñü âîïðîñîâ åãî ðàçìåðîâ è ïîëîæåíèÿ íà ñòðàíèöå. Íà ñàìîì äåëå ýòè âîïðîñû íåîáõîäèìî ó÷èòûâàòü. Ðàçìåðû èçîáðàæåíèÿ ìîæíî óòî÷íèòü è ïðè íåîáõîäèìîñòè èçìåíèòü â ïðîãðàììå Adobe Photoshop.
Ðèñ. 3.2. Èçîáðàæåíèå ðîìàøêè íà âåá-ñòðàíèöå
Ïðèìåðû ðàçìåùåíèÿ ãðàôèêè íà âåá-ñòðàíèöå
63
Íà ðèñ. 3.2 ïîêàçàí ïðèìåð ðàçìåùåíèÿ èçîáðàæåíèÿ øèðèíîé 198 è âûñîòîé 155 ïèêñåëîâ (ëèñòèíã 3.2). Õîòÿ ëèñòèíãè 3.1 è 3.2 ïðàêòè÷åñêè ñîâïàäàþò, èçîáðàæåíèÿ èìåþò ðàçíûå ðàçìåðû â ïèêñåëàõ è ïîýòîìó çàíèìàþò ðàçíóþ ïëîùàäü. Ëèñòèíã 3.2. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû ñ èçîáðàæåíèåì ðîìàøêè <TITLE> Ðèñóíîê
Ïî óìîë÷àíèþ ðèñóíîê ðàçìåñòèëñÿ â ëåâîì âåðõíåì óãëó. Íà ðèñ. 3.3 ïîêàçàí åùå îäèí ïðèìåð ðàçìåùåíèÿ íà âåá-ñòðàíèöå èçîáðàæåíèÿ, íî íà ýòîò ðàç â êîäå çàäàíû çíà÷åíèÿ àòðèáóòîâ øèðèíû è âûñîòû (øèðèíà 281, âûñîòà 300 ïèêñåëîâ), à òàêæå óêàçàíà ïîäïèñü (ëèñòèíã 3.3).
Ðèñ. 3.3. Âåá-ñòðàíèöà ñ èçîáðàæåíèåì è ïîäïèñüþ
64
Óðîê 3. Ãðàôèêà
Ëèñòèíã 3.3. Ðàçìåùåíèå íà âåá-ñòðàíèöå èçîáðàæåíèÿ è ïîäïèñè <TITLE>Ðèñóíîê Àòëàíòû íà Ôîíòàíêå
Ðîññèÿ * Ñàíêò-Ïåòåðáóðã*Åùå îäíè àòëàíòû íà Ôîíòàíêå
Óãîë Íåâñêîãî ïðîñïåêòà è Íàáåðåæíîé ðåêè Ôîíòàíêè
Íà ðèñ. 3.4 ïîêàçàí ïðèìåð ðàçìåùåíèÿ ÷åòûðåõ èçîáðàæåíèé øèðèíîé 92 è âûñîòîé 114 ïèêñåëîâ êàæäîå â òàáëèöå (ëèñòèíã 3.4). Ïîäðîáíî ïðèíöèïû ðàáîòû ñ òàáëèöàìè áóäóò ðàññìîòðåíû äàëåå.
Ðèñ. 3.4. ×åòûðå ðèñóíêà â òàáëèöå
Âûðàâíèâàíèå èçîáðàæåíèé
65
Ëèñòèíã 3.4. Ïðèìåð ñîçäàíèÿ ÷åòûðåõ ðèñóíêîâ â òàáëèöå <TITLE>×åòûðå ðèñóíêà â òàáëèöå
Âîçìîæíî | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
îáòåêàíèå òåêñòà | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
âîêðóã òàáëèöû |
... | èëè... | , îí óïðàâëÿåò âûðàâíèâàíèåì äàííûõ â ÿ÷åéêàõ ïî ãîðèçîíòàëè è ìîæåò ïðèíèìàòü çíà÷åíèÿ LEFT (ñëåâà), RIGHT (ñïðàâà) èëè CENTER (ïî öåíòðó). m Àòðèáóò BORDER. Àòðèáóò BORDER îïðåäåëÿåò âèä ãðàíèö òàáëèöû. Åñëè äàííûé àòðèáóò ïðèñóòñòâóåò, ãðàíèöà òàáëèöû ïðîðèñîâûâàåòñÿ äëÿ âñåõ ÿ÷ååê è äëÿ òàáëèöû â öåëîì. Àòðèáóò BORDER ìîæåò ïðèíèìàòü ÷èñëîâûå çíà÷åíèÿ, îïðåäåëÿþùèå òîëùèíó ãðàíèöû, íàïðèìåð: BORDER=3|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
(îò àíãë. Table Data — òàáëè÷íûå äàííûå). ß÷åéêà òàáëèöû ìîæåò áûòü îïèñàíà òîëüêî âíóòðè ñòðîêè òàáëèöû. Êàæäàÿ ÿ÷åéêà äîëæíà áûòü ïðîíóìåðîâàíà íîìåðîì ñòîëáöà, ê êîòîðîìó îíà îòíîñèòñÿ. Åñëè â ñòðîêå äëÿ íåêîòîðûõ ñòîëáöîâ îòñóòñòâóåò îäíà èëè íåñêîëüêî ÿ÷ååê, áðàóçåð îòîáðàæàåò ïóñòóþ ÿ÷åéêó. Ðàñïîëîæåíèå äàííûõ Òåãè ãðóïïèðîâàíèÿ ýëåìåíòîâ òàáëèö 121 â ÿ÷åéêå ïî óìîë÷àíèþ îïðåäåëÿåòñÿ àòðèáóòàìè ALIGN=LEFT è VALIGN=MIDDLE. Äàííîå ðàñïîëîæåíèå ìîæåò áûòü èçìåíåíî êàê íà óðîâíå îïèñàíèÿ ñòðîêè, òàê è íà óðîâíå îïèñàíèÿ ÿ÷åéêè. Ñîçäàíèå çàãîëîâêà è ïîäïèñè òàáëèöû Äëÿ ñîçäàíèÿ çàãîëîâêà òàáëèöû èñïîëüçóåòñÿ ïàðíûé òåã | (îò àíãë. Table Head — çàãîëîâîê òàáëèöû). ß÷åéêà çàãîëîâêà òàáëèöû èìååò øèðèíó âñåé òàáëèöû. Òåêñò â äàííîé ÿ÷åéêå èìååò àòðèáóòû BOLD è ALIGN=CENTER. Äëÿ ñîçäàíèÿ ïîäïèñè òàáëèöû èñïîëüçóåòñÿ ïàðíûé òåã (îò àíãë. caption — ïîäïèñü). Òåã äîëæåí ïðèñóòñòâîâàòü âíóòðè òåãîâ Òåãè ãðóïïèðîâàíèÿ ýëåìåíòîâ òàáëèö Äëÿ ãðóïïèðîâàíèÿ ýëåìåíòîâ òàáëèö ñëóæàò òåãè , è . Ãðóïïèðîâàíèå ñòîëáöîâ òàáëèöû Òåã èñïîëüçóåòñÿ ñ öåëüþ ãðóïïèðîâàíèÿ ñòîëáöîâ òàáëèöû è ìîæåò èìåòü àòðèáóòû BGCOLOR, ALIGN, VALIGN, SPAN, WIDTH, ID. m Àòðèáóò BGCOLOR. Àòðèáóò BGCOLOR çàäàåò öâåò ôîíà ÿ÷ååê, íàïðèìåð: m Àòðèáóò ALIGN. Àòðèáóò ALIGN çàäàåò ðåæèì ãîðèçîíòàëüíîãî âûðàâíèâàíèÿ ñîäåðæèìîãî âíóòðè ÿ÷åéêè. Îí ìîæåò ïðèíèìàòü çíà÷åíèÿ LEFT (âëåâî), CENTER (ïî öåíòðó) è RIGHT (âïðàâî), íàïðèìåð: m Àòðèáóò VALIGN. Àòðèáóò VALIGN çàäàåò ðåæèì âåðòèêàëüíîãî âûðàâíèâàíèÿ ñîäåðæèìîãî âíóòðè ÿ÷åéêè. Îí ìîæåò ïðèíèìàòü çíà÷åíèÿ MIDDLE (ïî ñåðåäèíå) è TOP (ââåðõ), íàïðèìåð: m Àòðèáóò SPAN. Àòðèáóò SPAN çàäàåò êîëè÷åñòâî ñòîëáöîâ â ãðóïïå, íàïðèìåð: m Àòðèáóò WIDTH. Àòðèáóò WIDTH çàäàåò øèðèíó ÿ÷ååê â ñòîëáöàõ, íàïðèìåð: m Àòðèáóò ID. Àòðèáóò ID çàäàåò èìÿ äëÿ ññûëêè, íàïðèìåð: Ãðóïïèðîâàíèå ñòðîê òàáëèöû Äëÿ ñîçäàíèÿ ëîãè÷åñêè ñâÿçàííûõ ãðóïï ñòðîê â òåëå òàáëèöû èñïîëüçóåòñÿ òåã , íàïðèìåð: 122 Óðîê 8. Òàáëèöû | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | ... Ó òåãà åñòü àòðèáóòû BGCOLOR, ALIGN, VALIGN, êîòîðûå èìåþò òîò æå ñìûñë, ÷òî è îäíîèìåííûå àòðèáóòû òåãà . Äëÿ ëîãè÷åñêîãî ãðóïïèðîâàíèÿ ñòðîê â âåðõíåé ÷àñòè òàáëèöû (òî åñòü äëÿ ñîçäàíèÿ âåðõíåé øàïêè òàáëèöû) èñïîëüçóåòñÿ òåã , íàïðèìåð: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | ... Ó òåãà åñòü àòðèáóòû BGCOLOR, ALIGN, VALIGN, ID, êîòîðûå èìåþò òîò æå ñìûñë, ÷òî è îäíîèìåííûå àòðèáóòû òåãà . Äëÿ ëîãè÷åñêîãî ãðóïïèðîâàíèÿ ñòðîê â íèæíåé ÷àñòè òàáëèöû (òî åñòü äëÿ ñîçäàíèÿ íèæíåé øàïêè òàáëèöû) èñïîëüçóåòñÿ òåã , íàïðèìåð: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | ... Ó òåãà åñòü àòðèáóòû BGCOLOR, ALIGN, VALIGN, ID, êîòîðûå èìåþò òîò æå ñìûñë, ÷òî è îäíîèìåííûå àòðèáóòû òåãà . Îñíîâíûå àòðèáóòû ýëåìåíòîâ òàáëèöû Íèæå ïåðå÷èñëåíû îñíîâíûå àòðèáóòû ýëåìåíòîâ òàáëèö. Ñ íåêîòîðûìè èç íèõ ìû óæå ïîçíàêîìèëèñü ïðè èçó÷åíèè òåãîâ, ïðèìåíÿåìûõ ïðè ñîçäàíèè òàáëèö, ñ äðóãèì ïîçíàêîìèìñÿ â ýòîì ðàçäåëå. m Àòðèáóò ALIGN. Àòðèáóò ALIGN óïðàâëÿåò âûðàâíèâàíèåì ñîäåðæèìîãî ÿ÷ååê. Äîïóñòèìûå çíà÷åíèÿ LEFT (âëåâî), RIGHT (âïðàâî) è CENTER (ïî öåíòðó). m Àòðèáóò BACKGROUND. Àòðèáóò BACKGROUND çàäàåò ôîíîâîå èçîáðàæåíèå äëÿ ÿ÷ååê ñòðîêè: BACKGROUND=URL m Àòðèáóò BGCOLOR. Àòðèáóò BGCOLOR çàäàåò ôîíîâûé öâåò äëÿ ÿ÷ååê ñòðîêè. m Àòðèáóò BORDER. Àòðèáóò BORDER çàäàåò òîëùèíó ðàìêè, îáðàìëÿþùåé ÿ÷åéêè ñòðîêè. Íóëåâîå çíà÷åíèå äàííîãî àòðèáóòà îçíà÷àåò îòñóòñòâèå îáðàìëåíèÿ. m Àòðèáóò VALIGN. Àòðèáóò VALIGN âñòðå÷àåòñÿ âíóòðè òåãîâ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
è | . Îí îïðåäåëÿåò âåðòèêàëüíîå âûðàâíèâàíèå äàííûõ â ÿ÷åéêàõ. Äîñòóïíûå çíà÷åíèÿ TOP (ââåðõó), BOTTOM (âíèçó), CENTER (ïî öåíòðó), MIDDLE (ïî ñåðåäèíå) è BASELINE (ïî áàçîâîé ëèíèè). m Àòðèáóò NOWRAP. Àòðèáóò NOWRAP ãîâîðèò î òîì, ÷òî äàííûå â ÿ÷åéêå íå ìîãóò ëîãè÷åñêè ðàçáèâàòüñÿ íà ñòðîêè è äîëæíû áûòü ïðåäñòàâëåíû îäíîé ñòðîêîé. m Àòðèáóò COLSPAN. Àòðèáóò COLSPAN óêàçûâàåò, êàêîå êîëè÷åñòâî ÿ÷ååê áóäåò îáúåäèíåíî ïî ãîðèçîíòàëè ñ óêàçàííîé ÿ÷åéêîé. Ïî óìîë÷àíèþ çíà÷åíèå ýòîãî àòðèáóòà ðàâíî 1. m Àòðèáóò ROWSPAN. Àòðèáóò ROWSPAN óêàçûâàåò, êàêîå êîëè÷åñòâî ÿ÷ååê áóäåò îáúåäèíåíî ïî âåðòèêàëè ñ óêàçàííîé ÿ÷åéêîé. Ïî óìîë÷àíèþ çíà÷åíèå ýòîãî àòðèáóòà ðàâíî 1. Ïðèìåðû òàáëèö 123 m Àòðèáóò RULES. Àòðèáóò RULES îïðåäåëÿåò ïðàâèëà âûâîäà ëèíèé ìåæäó ÿ÷åéêàìè, íàïðèìåð:
Ðèñ. 8.1. Òàáëèöà èç äâóõ ñòðîê è ñåìè ñòîëáöîâ, â êîòîðîé íàäïèñè öåíòðèðîâàíû  ñëåäóþùåì ïðèìåðå, ïðåäñòàâëåííîì íà ðèñ. 8.2, íàäïèñè ÿ÷ååê âûïîëíåíû ñ èñïîëüçîâàíèåì òåãîâ è | , ïîýòîìó îíè ïî óìîë÷àíèþ âûðîâíåíû ïî ëåâîìó êðàþ (ëèñòèíã 8.2).Ðèñ. 8.2. Òàáëèöà èç äâóõ ñòðîê è ñåìè ñòîëáöîâ, â êîòîðîé íàäïèñè âûðîâíåíû ïî ëåâîìó êðàþ Ïðèìåðû òàáëèö 125 Ëèñòèíã 8.2. Ïðèìåð ñîçäàíèÿ òàáëèöû èç äâóõ ñòðîê è ñåìè ñòîëáöîâ, â êîòîðîé íàäïèñè âûðîâíåíû ïî ëåâîìó êðàþ <TITLE>Òàáëèöà èç äâóõ ñòðîê è ñåìè ñòîëáöîâ Òàáëèöà èç äâóõ ñòðîê è ñåìè ñòîëáöîâ
 ëèñòèíãå 8.3 ïðåäñòàâëåíà ïðîãðàììà, ñîçäàþùàÿ òàáëèöó èç ÷åòûðåõ ñòðîê è äâóõ ñòîëáöîâ, ó êîòîðîé øèðèíà ðàìêè ðàâíà 1 ïèêñåëó, à íå 4, êàê â ïðåäûäóùåì ïðèìåðå. Ðåçóëüòàò ðàáîòû ýòîé ïðîãðàììû ïîêàçàí íà ðèñ. 8.3. Ëèñòèíã 8.3. Ïðèìåð ñîçäàíèÿ òàáëèöû èç ÷åòûðåõ ñòðîê è äâóõ ñòîëáöîâ, ó êîòîðîé øèðèíà ðàìêè ðàâíà 1 ïèêñåëó <TITLE>Òàáëèöà öâåòîâ èç ÷åòûðåõ ñòðîê è äâóõ ñòîëáöîâ
126 Óðîê 8. Òàáëèöû Ðèñ. 8.3. Òàáëèöà èç ÷åòûðåõ ñòðîê è äâóõ ñòîëáöîâ, ó êîòîðîé øèðèíà ðàìêè ðàâíà 1 ïèêñåëó Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó èç ïðåäûäóùåãî ïðèìåðà, íî âûðîâíåííóþ ïî öåíòðó è èìåþùóþ òîëùèíó ðàìêè 70 ïèêñåëîâ, ïðåäñòàâëåíà â ëèñòèíãå 8.4, à ðåçóëüòàò ðàáîòû ýòîé ïðîãðàììû ïîêàçàí íà ðèñ. 8.4. Çäåñü íåñêîëüêî ðàç èñïîëüçîâàí òåã , ÷òî ïîçâîëèëî îïóñòèòü òàáëèöó îòíîñèòåëüíî çàãîëîâêà. Øèðèíà ýòîé òàáëèöû, ðåãóëèðóåìàÿ ïàðàìåòðîì WIDTH, ñîñòàâëÿåò 30 % îò øèðèíû ýêðàíà. Ðèñ. 8.4. Òàáëèöà, ó êîòîðîé øèðèíà ðàìêè ðàâíà 70 ïèêñåëàì Ïðèìåðû òàáëèö 127 Ëèñòèíã 8.4. Ïðèìåð ñîçäàíèÿ òàáëèöû, ó êîòîðîé øèðèíà ðàìêè ðàâíà 70 ïèêñåëàì <TITLE>Òàáëèöà öâåòîâ èç ÷åòûðåõ ñòðîê è äâóõ ñòîëáöîâ
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó èç äåâÿòè ñòðîê è äåâÿòè ñòîëáöîâ, ïðåäñòàâëåíà â ëèñòèíãå 8.5, à ðåçóëüòàò ðàáîòû ýòîé ïðîãðàììû ïîêàçàí íà ðèñ. 8.5. Ïîäïèñü òàáëèöû, êîòîðàÿ çàäàåòñÿ òåãîì , ðàñïîëîæåíà ñâåðõó. Ðèñ. 8.5. Òàáëèöà èç äåâÿòè ñòðîê è äåâÿòè ñòîëáöîâ Ëèñòèíã 8.5. Ïðèìåð ñîçäàíèÿ òàáëèöû óìíîæåíèÿ <TITLE>Òàáëèöà
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó áåç ðàìîê èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ, ïîêàçàíà â ëèñòèíãå 8.6 (ðèñ. 8.6). Ðèñ. 8.6. Òàáëèöà èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ Ëèñòèíã 8.6. Ïðèìåð ñîçäàíèÿ òàáëèöû èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ <TITLE>Òàáëèöû áåç ðàìêè Ïðîñòàÿ òàáëèöà áåç ðàìêè
13 ÿ÷åéêà 14 23 | ÿ÷åéêà 24 33 | ÿ÷åéêà 34 43 | ÿ÷åéêà 24 53 | ÿ÷åéêà 44 63 | ÿ÷åéêà 54 73 | ÿ÷åéêà 64 83 | ÿ÷åéêà 74 | Ïðèìåðû òàáëèö 129 Ïðîãðàììà, ñîçäàþùàÿ òó æå òàáëèöó áåç ðàìîê èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ, íî ñ àòðèáóòîì WIDTH, ðàâíûì 100 %, ïîêàçàíà â ëèñòèíãå 8.7 (ðèñ. 8.7). Ðèñ. 8.7. Òàáëèöà ñ øèðèíîé, ðàâíîé øèðèíå ýêðàíà Ëèñòèíã 8.7. Ïðèìåð ñîçäàíèÿ òàáëèöû èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ ñ øèðèíîé, ðàâíîé øèðèíå ýêðàíà <TITLE>Òàáëèöû áåç ðàìêè Ïðîñòàÿ òàáëèöà áåç ðàìêè
ÿ÷åéêà 13 | ÿ÷åéêà 14 | ÿ÷åéêà 23 | ÿ÷åéêà 24 | ÿ÷åéêà 33 | ÿ÷åéêà 34 | ÿ÷åéêà 43 | ÿ÷åéêà 24 | ÿ÷åéêà 53 | ÿ÷åéêà 44 | ÿ÷åéêà 63 | ÿ÷åéêà 54 | ÿ÷åéêà 73 | ÿ÷åéêà 64 | ÿ÷åéêà 83 | ÿ÷åéêà 74 | Ïðîãðàììà, ñîçäàþùàÿ òó æå òàáëèöó, íî ó êîòîðîé ðàññòîÿíèå îò ãðàíèöû ÿ÷åéêè äî åå ñîäåðæèìîãî, çàäàâàåìîå ïàðàìåòðîì CELLPADDING, ðàâíî 20 ïèêñåëàì, ïîêàçàíà â ëèñòèíãå 8.8 (ðèñ. 8.8). 130 Óðîê 8. Òàáëèöû Ëèñòèíã 8.8. Ïðèìåð ñîçäàíèÿ òàáëèöû èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ <TITLE>Òàáëèöû áåç ðàìêè Ïðîñòàÿ òàáëèöà áåç ðàìêè
13 ÿ÷åéêà 14 23 | ÿ÷åéêà 24 33 | ÿ÷åéêà 34 43 | ÿ÷åéêà 24 53 | ÿ÷åéêà 44 63 | ÿ÷åéêà 54 73 | ÿ÷åéêà 64 83 | ÿ÷åéêà 74 | Ðèñ. 8.8. Òàáëèöà èç âîñüìè ñòðîê è ïÿòè ñòîëáöîâ Ïðîãðàììà, ñîçäàþùàÿ òó æå òàáëèöó, íî ñ ôîíîâûì èçîáðàæåíèåì, ïðåäñòàâëåíà â ëèñòèíãå 8.9 (ðèñ. 8.9). Ëèñòèíã 8.9. Ïðèìåð ñîçäàíèÿ òàáëèöû, ó êîòîðîé ôîíîì ÿâëÿåòñÿ èçîáðàæåíèå <TITLE>Òàáëèöû áåç ðàìêè Ïðîñòàÿ òàáëèöà áåç ðàìêè
131 12 ÿ÷åéêà 13 | ÿ÷åéêà 14 22 | ÿ÷åéêà 23 | ÿ÷åéêà 24 32 | ÿ÷åéêà 33 | ÿ÷åéêà 34 42 | ÿ÷åéêà 43 | ÿ÷åéêà 24 52 | ÿ÷åéêà 53 | ÿ÷åéêà 44 62 | ÿ÷åéêà 63 | ÿ÷åéêà 54 72 | ÿ÷åéêà 73 | ÿ÷åéêà 64 82 | ÿ÷åéêà 83 | ÿ÷åéêà 74 | Ðèñ. 8.9. Òàáëèöà, ó êîòîðîé ôîíîì ÿâëÿåòñÿ èçîáðàæåíèå Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó ñ èñïîëüçîâàíèåì àòðèáóòà CELLPADDING, ðàâíîãî 20, ïîêàçàíà â ëèñòèíãå 8.10 (ðèñ. 8.10). Ëèñòèíã 8.10. Ïðèìåð ñîçäàíèÿ òàáëèöû, ñîçäàííîé ñ èñïîëüçîâàíèåì àòðèáóòà CELLPADDING <TITLE> Òåêñò â òàáëèöàõ ÑÅÂÅÐÎ-ÇÀÏÀÄÍÛÉ ÈÍÑÒÈÒÓÒ ÏÅ×ÀÒÈ ÍÀØ ÀÄÐÅÑ ïåðåóëîê Äæàìáóëà, äîì 13
Ðèñ. 8.10. Òàáëèöà, ñîçäàííàÿ ñ èñïîëüçîâàíèåì àòðèáóòà CELLPADDING Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé îáúåäèíåíû ÿ÷åéêè ñ ïîìîùüþ àòðèáóòîâ ROWSPAN è COLSPAN, ïîêàçàíà â ëèñòèíãå 8.11 (ðèñ. 8.11). Ëèñòèíã 8.11. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ îáúåäèíåííûìè ÿ÷åéêàìè <TITLE> Òåêñò â òàáëèöàõ
Ïðèìåðû òàáëèö 133 Ðèñ. 8.11. Òàáëèöà ñ îáúåäèíåííûìè ÿ÷åéêàìè Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé ÿ÷åéêè îáúåäèíåíû ñ ïîìîùüþ àòðèáóòîâ ROWSPAN è COLSPAN è â êà÷åñòâå ôîíà âûáðàíû ðèñóíêè, ïîêàçàíà â ëèñòèíãå 8.12 (ðèñ. 8.12). Ðèñ. 8.12. Òàáëèöà ñ îáúåäèíåííûìè ÿ÷åéêàìè è ôîíîâûìè ðèñóíêàìè 134 Óðîê 8. Òàáëèöû Ëèñòèíã 8.12. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ îáúåäèíåííûìè ÿ÷åéêàìè è ôîíîâûìè ðèñóíêàìè <TITLE>Òàáëèöà
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ âíèçó (ALIGN=BOTTOM), ïîêàçàíà â ëèñòèíãå 8.13 (ðèñ. 8.13). Ëèñòèíã 8.13. Ïðèìåð ñîçäàíèÿ òàáëèöû, â êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ âíèçó <TITLE> Åùå îäíà òàáëèöà
Ðèñ. 8.13. Òàáëèöà, â êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ âíèçó Åùå îäèí ïðèìåð òàáëèöû (òàáëèöû öâåòîâ) ïîêàçàí íà ðèñ. 8.14 (ëèñòèíã 8.14). Ðèñ. 8.14. Òàáëèöà öâåòîâ 136 Óðîê 8. Òàáëèöû Ëèñòèíã 8.14. Ïðèìåð ñîçäàíèÿ òàáëèöû öâåòîâ <TITLE>Òàáëèöà
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé ïðåäñòàâëåíû êîäû öâåòîâ, ïîêàçàíà â ëèñòèíãå 8.15 (ðèñ. 8.15). Ðèñ. 8.15. Òàáëèöà ñ êîäàìè öâåòîâ Ëèñòèíã 8.15. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ êîäàìè öâåòîâ <TITLE>Òåñò öâåòà
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé îòðàæåíû âñå öâåòà ðàäóãè, ïîêàçàíà â ëèñòèíãå 8.16 (ðèñ. 8.16). Ðàìêà òàáëèöû îêðàøåíà â òîìàòíûé öâåò. Ðèñ. 8.16. Òàáëèöà, â êîòîðîé ïîêàçàíû âñå öâåòà ðàäóãè Ëèñòèíã 8.16. Ïðèìåð ñîçäàíèÿ òàáëèöû, â êîòîðîé ïîêàçàíû âñå öâåòà ðàäóãè <TITLE>Ðàäóãà Ðàäóãà
Ïðîãðàììà, â êîòîðîé ôîí òàáëèöû è äîêóìåíòà çàêðàøåí ðàçíûìè öâåòàìè, ïîêàçàíà â ëèñòèíãå 8.17 (ðèñ. 8.17). 138 Óðîê 8. Òàáëèöû Ðèñ. 8.17. Âåá-ñòðàíèöà, íà êîòîðîé ôîí òàáëèöû è äîêóìåíòà çàêðàøåí ðàçíûìè öâåòàìè Ëèñòèíã 8.17. Ïðèìåð, â êîòîðîì ôîí òàáëèöû îòëè÷àåòñÿ îò ôîíà äîêóìåíòà <TITLE>Ïðîñòàÿ òàáëèöà Ïðîñòàÿ òàáëèöà
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó, â êîòîðîé îòðàæåíû ðàçëè÷íûå ñïîñîáû âûðàâíèâàíèÿ, ïîêàçàíà â ëèñòèíãå 8.18 (ðèñ. 8.18). Ðàìêà òàáëèöû îêðàøåíà â ÷åðíûé è áåëûé öâåòà. Ëèñòèíã 8.18. Ïðèìåð ñîçäàíèÿ òàáëèöû, â êîòîðîé îòðàæåíû ðàçëè÷íûå ñïîñîáû âûðàâíèâàíèÿ <TITLE>Âûðàâíèâàíèå â òàáëèöàõ <STRONG><EM>Ðàçëè÷íûå ñïîñîáû âûðàâíèâàíèÿ
Ðèñ. 8.18. Òàáëèöà, â êîòîðîé îòðàæåíû ðàçëè÷íûå ñïîñîáû âûðàâíèâàíèÿ Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó ñ òðåìÿ ñòîëáöàìè è ÷åòûðüìÿ ñòðîêàìè, ïîäïèñü êîòîðîé ðàñïîëàãàåòñÿ âíèçó, ïîêàçàíà â ëèñòèíãå 8.19 (ðèñ. 8.19). Ðèñ. 8.19. Òàáëèöà, ó êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ âíèçó 140 Óðîê 8. Òàáëèöû Ëèñòèíã 8.19. Ïðèìåð ñîçäàíèÿ òàáëèöû, ó êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ âíèçó <TITLE>Òàáëèöû Òàáëèöà ñ òðåìÿ ñòîëáöàìè è ÷åòûðüìÿ ñòðîêàìè
Ïðîãðàììà, ñîçäàþùàÿ òàáëèöó ñ ÷åòûðüìÿ ñòîëáöàìè è òðåìÿ ñòðîêàìè, ïîêàçàíà â ëèñòèíãå 8.20 (ðèñ. 8.20). Ðèñ. 8.20. Òàáëèöà ñ ÷åòûðüìÿ ñòîëáöàìè è òðåìÿ ñòðîêàìè Ëèñòèíã 8.20. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ ÷åòûðüìÿ ñòîëáöàìè è òðåìÿ ñòðîêàìè <TITLE>Òàáëèöà ñ ÷åòûðüìÿ ñòîëáöàìè è òðåìÿ ñòðîêàìè Òàáëèöà ñ ÷åòûðüìÿ ñòîëáöàìè è òðåìÿ ñòðîêàìè
Åùå îäèí ïðèìåð ïðîãðàììû, ñîçäàþùåé òàáëèöó ñ òðåìÿ ñòîëáöàìè è ÷åòûðüìÿ ñòðîêàìè, ó êîòîðîé, â îòëè÷èå îò ïðèâåäåííîé íà ðèñ. 8.19, ïîäïèñü ðàçìåùåíà ñâåðõó, ïîêàçàí â ëèñòèíãå 8.21 (ðèñ. 8.21). Ðèñ. 8.21. Òàáëèöà, ó êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ ñâåðõó Ëèñòèíã 8.21. Ïðèìåð ñîçäàíèÿ òàáëèöû, ó êîòîðîé ïîäïèñü ðàñïîëàãàåòñÿ ñâåðõó <TITLE>Òàáëèöû ñ îáúåäèíåííûìè ÿ÷åéêàìè Òàáëèöû ñ ðàçëè÷íûìè ðàìêàìè
Åùå îäèí ïðèìåð ïðîãðàììû, ñîçäàþùåé òàáëèöó áåç ðàìêè ñ òðåìÿ ñòîëáöàìè è ÷åòûðüìÿ ñòðîêàìè, ó êîòîðîé çàãîëîâîê âûðîâíåí ïî öåíòðó, ïîêàçàí â ëèñòèíãå 8.22 (ðèñ. 8.22). 142 Óðîê 8. Òàáëèöû Ðèñ. 8.22. Òàáëèöà áåç ðàìêè Ëèñòèíã 8.22. Ïðèìåð ñîçäàíèÿ òàáëèöû áåç ðàìêè ñ âûðîâíåííûì ïî öåíòðó çàãîëâêîì <TITLE> Çàãîëîâîê, âûðîâíåííûé ïî öåíòðó Çàãîëîâîê, âûðîâíåííûé ïî öåíòðó
Ðàññìîòðèì åùå îäèí ïðèìåð ñîçäàíèÿ òàáëèöû, ïðåäñòàâëåííûé â ëèñòèíãå 8.23.  ýòîì ïðèìåðå ïîêàçàíî, ÷òî æèðíûå ðàìêè ìîãóò ñîçäàâàòü ðàçëè÷íûå âèçóàëüíûå ýôôåêòû (ðèñ. 8.23). Ïðîòèâîïîëîæíûé ðåçóëüòàò ìîæíî ïîëó÷èòü, åñëè ñîçäàòü òàáëèöó áåç ðàìêè. Ïðè ñîçäàíèè âëîæåííûõ òàáëèö ãðàíèöû äåëàþò ðàçíîé òîëùèíû, ÷òîáû ëåã÷å áûëî ðàçëè÷àòü òàáëèöû. Ëèñòèíã 8.23. Ïðèìåð ñîçäàíèÿ âëîæåííûõ òàáëèö ñ ðàçíîé òîëùèíîé ðàìîê <TITLE>Òàáëèöû ñ ðàçíîé òîëùèíîé ðàìîê
Ðèñ. 8.23. Âëîæåííûå òàáëèöû ñ ðàçíîé òîëùèíîé ðàìîê Ïðèìåð òàáëèöû, â êîòîðîé íàáëþäàþòñÿ èíòåðåñíûå ýôôåêòû ðàçìåùåíèÿ òåêñòà çà ñ÷åò èñïîëüçîâàíèÿ àòðèáóòà CELLSPACING, ïîêàçàí íà ðèñ. 8.24 (ëèñòèíã 8.24). Ðèñ. 8.24. Òàáëèöà ñ èíòåðåñíûìè ýôôåêòàìè ðàçìåùåíèÿ òåêñòà 144 Óðîê 8. Òàáëèöû Ëèñòèíã 8.24. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ èíòåðåñíûìè ýôôåêòàìè ðàçìåùåíèÿ òåêñòà <TITLE>Àòðèáóòû òåãîâ òàáëèöû
Ïðèìåð òàáëèöû, â êîòîðîé ñ ïîìîùüþ àòðèáóòà CELLSPACING èìèòèðóåòñÿ ðàìêà âîêðóã èçîáðàæåíèÿ, ïîêàçàí íà ðèñ. 8.25 (ëèñòèíã 8.25). Ðèñ. 8.25. Òàáëèöà, â êîòîðîé èìèòèðóåòñÿ ðàìêà âîêðóã èçîáðàæåíèÿ Ëèñòèíã 8.25. Ïðèìåð ñîçäàíèÿ òàáëèöû, â êîòîðîé èìèòèðóåòñÿ ðàìêà âîêðóã èçîáðàæåíèÿ <TITLE>Ðàìêà âîêðóã ôîòîãðàôèè Ïðèìåðû òàáëèö 145
Åùå îäèí ïðèìåð òàáëèöû, â êîòîðîé èìèòèðóåòñÿ ðàìêà ñ òåíüþ, ïîêàçàí íà ðèñ. 8.26 (ëèñòèíã 8.26). ß÷åéêà âûãëÿäèò âûïóêëîé. Ðèñ. 8.26. Òàáëèöà ñ âûïóêëîé ðàìêîé Ëèñòèíã 8.26. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ âûïóêëîé ðàìêîé <TITLE>Ðàìêà ñ òåíüþ
Òàáëèöû ïîçâîëÿþò ðàçìåùàòü òåêñò â êîëîíêàõ. Ïðèìåð ïîêàçàí íà ðèñ. 8.27 (ëèñòèíã 8.27). Ëèñòèíã 8.27. Ðàçìåùåíèå òåêñòà â êîëîíêàõ <TITLE>Òåêñò â êîëîíêàõ 146 Óðîê 8. Òàáëèöû
Ðèñ. 8.27. Òåêñò â êîëîíêàõ Ïðèìåð ðàçíîöâåòíîé òàáëèöû èç ÷åòûðåõ ñòîëáöîâ ïîêàçàí íà ðèñ. 8.28 (ëèñòèíã 8.28). Ðèñ. 8.28. Òàáëèöà èç ÷åòûðåõ ñòîëáöîâ Ïðèìåðû òàáëèö 147 Ëèñòèíã 8.28. Ïðèìåð ñîçäàíèÿ òàáëèöû èç ÷åòûðåõ ñòîëáöîâ <TITLE>Òåêñò â ÷åòûðåõ ñòîëáöàõ Äàòû âîçíèêíîâåíèÿ ìàòåìàòè÷åñêèõ çíàêîâ
Ïðèìåð òàáëèöû ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ ïîêàçàí íà ðèñ. 8.29 (ëèñòèíã 8.29). Ðèñ. 8.29. Òàáëèöà ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ Ëèñòèíã 8.29. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ <TITLE>Òàáëèöà ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ
Ïðèìåð òàáëèöû ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ è ñòðîê ïîêàçàí íà ðèñ. 8.30 (ëèñòèíã 8.30). Ïðèìåðû òàáëèö 149 Ðèñ. 8.30. Òàáëèöà ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ è ñòðîê Ëèñòèíã 8.30. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ è ñòðîê <TITLE>Òàáëèöà ñ îáùèì çàãîëîâêîì è îòäåëüíûìè çàãîëîâêàìè ñòîëáöîâ è ñòðîê
Ïðèìåð òàáëèöû ñ îáúåäèíåííûìè ÿ÷åéêàìè â ñòîëáöàõ è ñòðîêàõ ïîêàçàí íà ðèñ. 8.31 (ëèñòèíã 8.31). Ëèñòèíã 8.31. Ïðèìåð ñîçäàíèÿ òàáëèöû ñ îáúåäèíåííûìè ÿ÷åéêàìè â ñòîëáöàõ è ñòðîêàõ <TITLE>Òàáëèöà ñ îáúåäèíåííûìè ÿ÷åéêàìè â ñòîëáöàõ è ñòðîêàõ
Ïðèìåð òàáëèöû, ðàçìåùåííîé â ÿ÷åéêå äðóãîé òàáëèöû, ïîêàçàí íà ðèñ. 8.33 (ëèñòèíã 8.33). Ðèñ. 8.33. Òàáëèöà, êîòîðàÿ ðàçìåùàåòñÿ â ÿ÷åéêå äðóãîé òàáëèöû Ëèñòèíã 8.33. Ïðèìåð ñîçäàíèÿ òàáëèöû, êîòîðàÿ ðàçìåùàåòñÿ â ÿ÷åéêå äðóãîé òàáëèöû <TITLE>Îáúåäèíåíèå ÿ÷ååê â ñòîëáöàõ è ñòðîêàõ
152 Óðîê 8. Òàáëèöû Ïðèìåðû òðåõ òàáëèö, ñîñòîÿùèõ èç îäíîé ÿ÷åéêè è èìåþùèõ ðàìêè ðàçíîé òîëùèíû, ïîêàçàíû íà ðèñ. 8.34 (ëèñòèíã 8.34). Ðèñ. 8.34. Òàáëèöû, ñîñòîÿùèå èç îäíîé ÿ÷åéêè Ëèñòèíã 8.34. Ïðèìåðû òàáëèö, ñîñòîÿùèõ èç îäíîé ÿ÷åéêè <TITLE>Îáúåäèíåíèå ÿ÷ååê â ñòîëáöàõ è ñòðîêàõ
Ïîäâåäåì èòîãè  ýòîì óðîêå ðàññêàçàíî î ñîçäàíèè òàáëèö. Òåã — ÿ÷åéêó òàáëèöû, òåã | — çàãîëîâîê òàáëèöû, òåã — ïîäïèñü òàáëèöû. Âñå ýòè òåãè äîëæíû ðàñïîëàãàòüñÿ âíóòðè òåãîâ | Óðîê 9 Ôîðìû Ôîðìû ïðåäñòàâëÿþò ñîáîé âàæíûå ýëåìåíòû HTML-ñòðàíèö, ïîçâîëÿþùèå ðàçðàáîò÷èêàì ñòðàíèö èíòåðàêòèâíî âçàèìîäåéñòâîâàòü ñ ïîñåòèòåëÿìè. Ñ èõ ïîìîùüþ ïîëüçîâàòåëü ìîæåò ïîñûëàòü êîììåíòàðèè ïî ïîâîäó ïîñåùåíèÿ îïðåäåëåííîãî óçëà, ïåðåñûëàòü çàïðîñû, ðåãèñòðèðîâàòüñÿ. Ðàçðàáîò÷èê çàäàåò âîïðîñû, ñîçäàâàÿ ôîðìó, à ïîëüçîâàòåëü îòâå÷àåò íà íèõ, çàïîëíÿÿ åå. Ôîðìà ñîçäàåòñÿ ïðè ïîìîùè ðàçëè÷íûõ òåãîâ è àòðèáóòîâ, çàêëþ÷åííûõ â ïàðó òåãîâ è .  ýòîì óðîêå ðàññìàòðèâàþòñÿ ìåòîäû ñîçäàíèÿ ôîðì. 154 Óðîê 9. Ôîðìû Ñîçäàíèå ôîðì Ôîðìû ïðåäíàçíà÷åíû äëÿ ââîäà èíôîðìàöèè. Âñå ôîðìû íà÷èíàþòñÿ òåãîì (îò àíãë. form — ôîðìà) è çàâåðøàþòñÿ òåãîì . Ó ôîðìû ìîãóò áûòü àòðèáóòû NAME, ACTION, METHOD, TARGET. m Àòðèáóò NAME. Àòðèáóò NAME îïðåäåëÿåò èìÿ ôîðìû è îáû÷íî íå óêàçûâàåòñÿ. Ïðèìåíÿåòñÿ äëÿ èäåíòèôèêàöèè ôîðìû, åñëè â äîêóìåíòå ïðèñóòñòâóåò íåñêîëüêî ôîðì. m Àòðèáóò ACTION. Îáÿçàòåëüíûé àòðèáóò ACTION çàäàåò URL-àäðåñ ïðîãðàììû, êîòîðàÿ áóäåò âûçûâàòüñÿ äëÿ îáðàáîòêè ôîðìû. m Àòðèáóò METHOD. Àòðèáóò METHOD îïðåäåëÿåò ñïîñîá îòïðàâêè ïàðàìåòðîâ ôîðìû. Ïðèíèìàåò çíà÷åíèå GET èëè POST.  íàñòîÿùåå âðåìÿ èñïîëüçîâàíèå ìåòîäà GET íå ðåêîìåíäóåòñÿ. m Àòðèáóò TARGET. Àòðèáóò TARGET îïðåäåëÿåò îêíî, â êîòîðîå âîçâðàùàåòñÿ ðåçóëüòàò îáðàáîòêè îòïðàâëåííîé ôîðìû. Âîçìîæíûå çíà÷åíèÿ SELF, PARENT, TOP, BLANK èëè ÿâíî óêàçàííîå èìÿ îêíà. Ïðèìåð ýëåìåíòàðíîé ôîðìû ïîêàçàí íà ðèñ. 9.1 (ëèñòèíã 9.1). Èìåþùèåñÿ íà ôîðìå ïîëÿ ââîäà çàäàþòñÿ òåãîì . Àòðèáóò SIZE ðåãóëèðóåò äëèíó ïîëÿ ââîäà. Ðèñ. 9.1. Âåá-ñòðàíèöà, ñîäåðæàùàÿ ýëåìåíòàðíóþ ôîðìó Ëèñòèíã 9.1. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû, ñîäåðæàùåé ýëåìåíòàðíóþ ôîðìó <TITLE> Ôîðìû Ìîÿ ïåðâàÿ ôîðìà ÏÅÐÂÎÅ ÏÎËÅ ÂÒÎÐÎÅ ÏÎËÅ Ñîçäàíèå ôîðì 155 Ñîçäàòü ôîðìó ëåãêî, íî òðóäíî êðàñèâî âûñòðîèòü âñå ýëåìåíòû. Ýòà ïðîáëåìà íå èìååò ïðîñòîãî ðåøåíèÿ. Ìîæíî ðàçìåñòèòü ïîëÿ ââîäà è ðàñêðûâàþùèåñÿ ñïèñêè â ëåâîé ÷àñòè ñòðàíèöû, à âåñü ñîïðîâîäèòåëüíûé òåêñò — ñïðàâà. Ïîñêîëüêó äëèíà ïîëåé ââîäà çàäàåòñÿ àòðèáóòîì SIZE, ìîæíî âûðîâíÿòü ñòðîêè ïî ëåâîìó êðàþ, à òåêñò ñïðàâà îñòàâèòü íå âûðîâíåííûì, êàê â áîëüøèíñòâå äîêóìåíòîâ. Òàêàÿ ôîðìà âûãëÿäèò àêêóðàòíåå. Ïðèìåð òàêîé ôîðìû ïîêàçàí íà ðèñ. 9.2 (ëèñòèíã 9.2). Ðèñ. 9.2. Ôîðìà ñ âûðîâíåííûìè ýëåìåíòàìè Ëèñòèíã 9.2. Ïðèìåð ñîçäàíèÿ ôîðìû ñ âûðîâíåííûìè ýëåìåíòàìè <TITLE> ÔÎÐÌÛ ÊÀÊÀß ÔÎÐÌÀ ÂÛÃËßÄÈÒ ËÓ×ØÅ?
156 Óðîê 9. Ôîðìû Ðàçìåùåíèå íà ôîðìå ýëåìåíòîâ óïðàâëåíèÿ Äëÿ ñîçäàíèÿ ïîëåé ââîäà, ñ êîòîðûìè ìû ïîçíàêîìèëèñü â ïðåäûäóùåì ðàçäåëå, è äðóãèõ ýëåìåíòîâ óïðàâëåíèÿ èñïîëüçóåòñÿ òåã (îò àíãë. input — ââîä). Òåã èìååò àòðèáóòû NAME, SIZE, CHECKED, MAXLENGTH, SRC, TYPE. m Àòðèáóò NAME. Àòðèáóò NAME îïðåäåëÿåò èìÿ ïîëÿ ââîäà. Äàííîå èìÿ èñïîëüçóåòñÿ êàê óíèêàëüíûé èäåíòèôèêàòîð ïîëÿ, ïî êîòîðîìó âïîñëåäñòâèè ìîæíî ïîëó÷èòü äàííûå, ââåäåííûå ïîëüçîâàòåëåì â ýòî ïîëå. m Àòðèáóò SIZE. Àòðèáóò SIZE îïðåäåëÿåò ðàçìåð ïîëÿ ââîäà â ñèìâîëàõ. m Àòðèáóò CHECKED. Àòðèáóò CHECKED èñïîëüçóåòñÿ ñ ôëàæêàìè è ïåðåêëþ÷àòåëÿìè. Îí îçíà÷àåò, ÷òî ôëàæîê èëè ïåðåêëþ÷àòåëü, èìåþùèé ýòîò àòðèáóò, ïðè îòêðûòèè ñòðàíèöû áóäåò óñòàíîâëåí. m Àòðèáóò MAXLENGTH. Àòðèáóò MAXLENGTH îïðåäåëÿåò êîëè÷åñòâî ñèìâîëîâ, êîòîðîå ïîëüçîâàòåëè ìîãóò ââåñòè â ïîëå ââîäà. Ïðè ïðåâûøåíèè ýòîãî êîëè÷åñòâà áðàóçåð îòðåàãèðóåò íà ïîïûòêó ââîäà íîâîãî ñèìâîëà çâóêîâûì ñèãíàëîì è íå äàñò åãî ââåñòè. Íå ñëåäóåò ïóòàòü ýòîò àòðèáóò ñ àòðèáóòîì SIZE, êîòîðûé îïðåäåëÿåò êîëè÷åñòâî âèäèìûõ â ïîëå ñèìâîëîâ. Åñëè êîëè÷åñòâî ââåäåííûõ ñèìâîëîâ îêàæåòñÿ áîëüøå ÷åì SIZE, â ïîëå ïîÿâèòñÿ âîçìîæíîñòü ïðîêðóòêè. Ïî óìîë÷àíèþ çíà÷åíèå MAXLENGTH ðàâíî áåñêîíå÷íîñòè. m Àòðèáóò SRC. Àòðèáóò SRC çàäàåò URL-àäðåñ, óêàçûâàþùèé íà èçîáðàæåíèå (èñïîëüçóåòñÿ ñîâìåñòíî ñ àòðèáóòîì IMAGE). m Àòðèáóò TYPE. Àòðèáóò TYPE îïðåäåëÿåò òèï ýëåìåíòà óïðàâëåíèÿ. Ïî óìîë÷àíèþ ýòî îäíîñòðî÷íîå ïîëå ââîäà. Âñå îñòàëüíûå òèïû äîëæíû áûòü ÿâíî óêàçàíû. q Çíà÷åíèå CHECKBOX ïðåâðàùàåò ïîëå ââîäà âî ôëàæîê, êîòîðûé èñïîëüçóåòñÿ äëÿ ïåðåäà÷è â âûçûâàåìóþ ïðîãðàììó ïðîñòûõ ëîãè÷åñêèõ çíà÷åíèé (ON èëè OFF), çàäàííûõ ïîëüçîâàòåëåì. q Çíà÷åíèå HIDDEN ñêðûâàåò ýëåìåíò óïðàâëåíèÿ — îí íå îòîáðàæàåòñÿ áðàóçåðîì è íå äàåò ïîëüçîâàòåëþ âîçìîæíîñòü èçìåíèòü ïðèñâîåííîå åìó ïî óìîë÷àíèþ çíà÷åíèå. Òàêîé ýëåìåíò óïðàâëåíèÿ èñïîëüçóåòñÿ äëÿ ïåðåäà÷è â ïðîãðàììó íåèçìåííîé èíôîðìàöèè, íàïðèìåð èäåíòèôèêàòîðà ïîëüçîâàòåëÿ èëè ïàðîëÿ. q Çíà÷åíèå IMAGE ïîçâîëÿåò ñâÿçàòü ñ èìåíåì ýëåìåíòà óïðàâëåíèÿ èçîáðàæåíèå. Ïðè ùåë÷êå ìûøüþ íà òàêîì èçîáðàæåíèè áóäåò íåìåäëåííî âûçâàíà àññîöèèðîâàííàÿ ñ ôîðìîé ïðîãðàììà. q Çíà÷åíèå PASSWORD âíåøíå íå ìåíÿåò ïîëå ââîäà, íî ââîäèìîå ïîëüçîâàòåëåì çíà÷åíèå íå îòîáðàæàåòñÿ áðàóçåðîì íà ýêðàíå. q Çíà÷åíèå RADIO ïðåâðàùàåò ïîëå ââîäà â ïåðåêëþ÷àòåëü, êîòîðûé ïîçâîëÿåò âûáðàòü îäíî çíà÷åíèå èç íåñêîëüêèõ, çàäàâàåìûõ ïåðåêëþ÷àòåëÿìè ñ ðàçíûìè çíà÷åíèÿìè àòðèáóòà VALUE, íî ñ îäèíàêîâûìè çíà÷åíèÿìè Ðàçìåùåíèå íà ôîðìå ýëåìåíòîâ óïðàâëåíèÿ 157 àòðèáóòà NAME.  âûçûâàåìóþ ïðîãðàììó áóäåò ïåðåäàíî çíà÷åíèå NAME=VALUE, ïðè÷åì VALUE ïðèìåò çíà÷åíèå óñòàíîâëåííîãî ïåðåêëþ÷àòåëÿ. Ïðè óñòàíîâêå îäíîãî ïåðåêëþ÷àòåëÿ âñå îñòàëüíûå àâòîìàòè÷åñêè ñáðàñûâàþòñÿ. q Çíà÷åíèå RESET ïðåâðàùàåò ïîëå ââîäà â êíîïêó, ïðè ùåë÷êå íà êîòîðîé âñå ýëåìåíòû óïðàâëåíèÿ ôîðìû ïðèìóò çíà÷åíèÿ, çàäàííûå äëÿ íèõ ïî óìîë÷àíèþ. q Çíà÷åíèå SUBMIT ïðåâðàùàåò ïîëå ââîäà â êíîïêó, ïðè ùåë÷êå íà êîòîðîé áóäåò âûçâàíà àññîöèèðîâàííàÿ ñ ôîðìîé ïðîãðàììà èëè ïðîèçîéäåò ïåðåõîä ïî çàäàííîìó URL-àäðåñó. q Çíà÷åíèå TEXT îïèñûâàåò îäíîñòðî÷íîå ïîëå ââîäà. Èñïîëüçóéòå àòðèáóòû MAXLENGTH è SIZE äëÿ îïðåäåëåíèÿ ìàêñèìàëüíîé äëèíû ââîäèìîãî çíà÷åíèÿ â ñèìâîëàõ è ðàçìåðà ïîëÿ ââîäà (ïî óìîë÷àíèþ 20 ñèìâîëîâ). m Àòðèáóò VALUE. Àòðèáóò VALUE ïîçâîëÿåò ïðèñâîèòü ýëåìåíòó óïðàâëåíèÿ çíà÷åíèå ïî óìîë÷àíèþ èëè çíà÷åíèå, êîòîðîå áóäåò ïðèñâîåíî àòðèáóòó NAME ïðè óñòàíîâêå ñîîòâåòñòâóþùåãî ïåðåêëþ÷àòåëÿ (äëÿ òèïà ïåðåêëþ÷àòåëÿ äàííûé àòðèáóò îáÿçàòåëåí). Ïðèìåð ôîðìû ñ ïåðåêëþ÷àòåëÿìè (TYPE=RADIO) ïîêàçàí íà ðèñ. 9.3 (ëèñòèíã 9.3). Ðèñ. 9.3. Ôîðìà ñ ïåðåêëþ÷àòåëÿìè Ëèñòèíã 9.3. Ïðèìåð ñîçäàíèÿ ôîðìû ñ ïåðåêëþ÷àòåëÿìè <TITLE>Ïðèìåð ôîðìû 56600 áèò/ñ  ëèñòèíãå 9.4 ïðåäñòàâëåí ïðèìåð ñîçäàíèÿ ôîðìû, ñîäåðæàùåé êíîïêó îòïðàâêè äàííûõ (TYPE=SUBMIT). Ñàìà ôîðìà ïîêàçàíà íà ðèñ. 9.4. 158 Óðîê 9. Ôîðìû Ëèñòèíã 9.4. Ïðèìåð ñîçäàíèÿ ôîðìû ñ êíîïêîé îòïðàâêè <TITLE>Àòðèáóò SUBMIT Ðèñ. 9.4. Ôîðìà ñ êíîïêîé îòïðàâêè  îòëè÷èå îò ïåðåêëþ÷àòåëåé, â ãðóïïå ôëàæêîâ (TYPE=CHECKBOX) ñ îäèíàêîâûìè èìåíàìè ìîæåò áûòü óñòàíîâëåíî ñêîëüêî óãîäíî ôëàæêîâ.  ëèñòèíãå 9.5 ïðèâåäåí ïðèìåð ñîçäàíèÿ ôîðìû ñ ôëàæêàìè, ïðè÷åì, êàê ïîêàçàíî íà ðèñ. 9.5, ïðè îòêðûòèè ôîðìû âòîðîé è òðåòèé ôëàæîê îêàçûâàþòñÿ óñòàíîâëåííûìè, ïîñêîëüêó äëÿ íèõ óêàçàí àòðèáóò CHECKED. Ðèñ. 9.5. Ôîðìà ñ ôëàæêàìè Ñïèñêè âûáîðà 159 Ëèñòèíã 9.5. Ïðèìåð ñîçäàíèÿ ôîðìû ñ ôëàæêàìè <TITLE>Ôëàæêè Âñåìèðíàÿ ïàóòèíà Hyper Text Transfer Protocol Hyper Text Markup Language  ëèñòèíãå 9.6 ïðèâåäåí ïðèìåð ñîçäàíèÿ ôîðìû ñ ïîëåì äëÿ ââîäà ïàðîëÿ (TYPE=PASSWORD). Ïðè ââîäå èíôîðìàöèè â òàêîå ïîëå îíà îòîáðàæàåòñÿ â âèäå çâåçäî÷åê (ðèñ. 9.6). Ðèñ. 9.6. Ôîðìà ñ ïîëåì äëÿ ââîäà ïàðîëÿ Ëèñòèíã 9.6. Ïðèìåð ñîçäàíèÿ ôîðìû ñ ïîëåì äëÿ ââîäà ïàðîëÿ <TITLE> Ââîä ïàðîëÿ Ñïèñêè âûáîðà Äëÿ ñîçäàíèÿ íà ôîðìå ñïèñêîâ, ïîçâîëÿþùèõ âûáðàòü îäíî èëè íåñêîëüêî çíà÷åíèé èç ìíîæåñòâà âîçìîæíûõ, èñïîëüçóåòñÿ ïàðíûé òåã <SELECT>. Ïî óìîë÷àíèþ â ïîëå ñïèñêà îòîáðàæàåòñÿ åãî ïåðâûé ýëåìåíò. Ýëåìåíò ñïèñêà ñîçäàåòñÿ ñ ïîìîùüþ òåãà .  ëèñòèíãå 9.7 ïðåäñòàâëåí ïðèìåð èñïîëüçîâàíèÿ òåãîâ <SELECT> è (ðèñ. 9.7). 160 Óðîê 9. Ôîðìû Ëèñòèíã 9.7. Ïðèìåð ñîçäàíèÿ âåá-ñòðàíèöû, ñîäåðæàùåé ñïèñîê âûáîðà <TITLE> Ôîðìû Óñòðîéñòâà ââîäà-âûâîäà êîìïüþòåðà <SELECT NAME=group> Êëàâèàòóðà Ìûøü Ìîíèòîð Ïðèíòåð Ãèáêèé ìàãíèòíûé äèñê CD-äèñê DVD-äèñê Ñèíõðîíèçàòîð ñ êàðìàííûì ÏÊ Ðèñ. 9.7. Âåá-ñòðàíèöà ñ ðàñêðûòûì ñïèñêîì âûáîðà Ñïèñîê âûáîðà, ñîçäàâàåìûé òåãîì <SELECT>, íå îáÿçàòåëüíî ÿâëÿåòñÿ îäíîñòðî÷íûì. Êîëè÷åñòâî îäíîâðåìåííî âèäèìûõ íà ýêðàíå ýëåìåíòîâ ñïèñêà çàäàåòñÿ àòðèáóòîì SIZE. Åñëè êîëè÷åñòâî ýëåìåíòîâ ñïèñêà ïðåâûøàåò çíà÷åíèå, óêàçàííîå â àòðèáóòå SIZE, ñïðàâà ïîÿâëÿåòñÿ ïîëîñà ïðîêðóòêè. ×òîáû â ñïèñêå îäíîâðåìåííî ìîæíî áûëî âûáðàòü íåñêîëüêî ýëåìåíòîâ (ñ ïîìîùüþ êëàâèøè Shift èëè Ctrl), ïðèìåíÿåòñÿ àòðèáóò MULTIPLE, êîòîðûé çàäàåò ìàêñèìàëüíîå êîëè÷åñòâî îäíîâðåìåííî âûáðàííûõ ýëåìåíòîâ. Ïðèìåð èñïîëüçîâàíèÿ òåãà <SELECT> ñ àòðèáóòàìè SIZE è MULTIPLE ïîêàçàí íà ðèñ. 9.8 (ëèñòèíã 9.8). Ëèñòèíã 9.8. Ïðèìåð ñîçäàíèÿ ìíîãîñòðî÷íîãî ñïèñêà <TITLE> Òåã SELECT MULTIPLE <SELECT NAME=group SIZE=4 MULTIPLE=2> Çàïèñü íà ôîðìíûé öèëèíäð; Ñïèñêè âûáîðà 161 Çàïèñü íà ôîðìó; Çàïèñü íà ôîòîôîðìó; Ïå÷àòíàÿ ìàøèíà; Ïðÿìàÿ çàïèñü; Ðèñ. 9.8. Ìíîãîñòðî÷íûé ñïèñîê íà ôîðìå  òåãå îáÿçàòåëüíî íàäî óêàçûâàòü àòðèáóò VALUE. Òîëüêî â ýòîì ñëó÷àå ïðîãðàììà, àññîöèèðîâàííàÿ ñ ôîðìîé, ñìîæåò îïðåäåëèòü, êàêîé ýëåìåíò ñïèñêà âûáðàí. Ñîîòâåòñòâóþùèé ïðèìåð ïîêàçàí íà ðèñ. 9.9 (ëèñòèíã 9.9). Ðèñ. 9.9. Ñïèñîê, â êîòîðîì èñïîëüçóåòñÿ àòðèáóò VALUE Ëèñòèíã 9.9. Ïðèìåð ñîçäàíèÿ ñïèñêà, â êîòîðîì èñïîëüçóåòñÿ àòðèáóò VALUE <TITLE> SELECT.HTM Ôîðìàòû ãðàôè÷åñêèõ ôàéëîâ: <SELECT NAME="GIF - Graphics Interchange Format"> GIF - Graphics Interchange Format JPEG - Joint Photographic Expert Group PNG - Portable Network Graphic BMP - Bit Map - áèòîâàÿ êàðòà 162 Óðîê 9. Ôîðìû Ìíîãîñòðî÷íûå òåêñòîâûå ïîëÿ Äëÿ ñîçäàíèÿ íà ôîðìå ìíîãîñòðî÷íûõ òåêñòîâûõ ïîëåé, ïîçâîëÿþùèõ ïîëüçîâàòåëþ ââîäèòü áîëüøèå îáúåìû èíôîðìàöèè, ñëóæèò òåã . Ýòîò òåã èìååò àòðèáóòû NAME, ROWS, COLS. m Àòðèáóò NAME. Àòðèáóò NAME çàäàåò èìÿ ïîëÿ ââîäà. m Àòðèáóò ROWS. Àòðèáóò ROWS çàäàåò âûñîòó ïîëÿ ââîäà â ñèìâîëàõ. m Àòðèáóò COLS. Àòðèáóò COLS çàäàåò øèðèíó ïîëÿ ââîäà â ñèìâîëàõ. Äëÿ òîãî ÷òîáû â ïîëå ââîäà ïî óìîë÷àíèþ ïðè îòêðûòèè ôîðìû âûâîäèëñÿ êàêîé-ëèáî òåêñò, åãî íåîáõîäèìî âñòàâèòü ìåæäó òåãàìè è . Ïðèìåð èñïîëüçîâàíèÿ òåãà ïîêàçàí íà ðèñ. 9.10 (ëèñòèíã 9.10). Ðèñ. 9.10. Ôîðìà ñ ìíîãîñòðî÷íûì òåêñòîâûì ïîëåì Ëèñòèíã 9.10. Ïðèìåð ñîçäàíèÿ ôîðìû ñ ìíîãîñòðî÷íûì òåêñòîâûì ïîëåì <TITLE>Òåã TEXTAREA URL Uniform Resource Locator - óíèôèöèðîâàííûé óêàçàòåëü ðåñóðñà Ñòàíäàðòíûé ñïîñîá àäðåñàöèè ôàéëîâ â WWW EPS Encapsulated PostScript Ôîðìàò, ïîçâîëÿþùèé ñîõðàíÿòü ãðàôè÷åñêèå èçîáðàæåíèÿ è ïåðåíîñèòü èõ èç îäíîãî ïðèëîæåíèÿ â äðóãîå. Ïîäâåäåì èòîãè 163 Ïîäâåäåì èòîãè  ýòîì óðîêå ðàññêàçàíî, êàê ñîçäàâàòü ôîðìû, ïîçâîëÿþùèå ðàçðàáîò÷èêàì èíòåðàêòèâíî âçàèìîäåéñòâîâàòü ñ ïîñåòèòåëÿìè ñâîèõ ñòðàíèö. Òàêîå âçàèìîäåéñòâèå ïðîèñõîäèò ïîñðåäñòâîì ðàçìåùàåìûõ íà ôîðìå ýëåìåíòîâ óïðàâëåíèÿ, òàêèõ êàê îäíîñòðî÷íûå è ìíîãîñòðî÷íûå ïîëÿ ââîäà, ôëàæêè, ïåðåêëþ÷àòåëè, êíîïêè, ðàñêðûâàþùèåñÿ è ïðîêðó÷èâàþùèåñÿ ñïèñêè. Äëÿ ñîçäàíèÿ ôîðì èñïîëüçóåòñÿ òåã , äëÿ ñîçäàíèÿ ýëåìåíòîâ óïðàâëåíèÿ — òåã , äëÿ ñîçäàíèÿ ñïèñêîâ — òåã <SELECT>, äëÿ ñîçäàíèÿ ìíîãîñòðî÷íûõ ïîëåé ââîäà — òåã . Óðîê 10 Ôðåéìû Ôðåéìû ïîçâîëÿþò ðàçáèâàòü âåá-ñòðàíèöû íà ïîäîêíà, ïðè÷åì êàæäîå ïîäîêíî (ôðåéì) ìîæåò èìåòü ñîáñòâåííûå ïîëîñû ïðîêðóòêè è ôóíêöèîíèðîâàòü íåçàâèñèìî îò äðóãèõ ïîäîêîí ëèáî, íàîáîðîò, — óïðàâëÿòü èõ ñîäåðæàíèåì. Ôðåéìû ìîãóò çíà÷èòåëüíî óëó÷øèòü âíåøíèé âèä âåá-ñòðàíèö è ïîâûñèòü èõ ôóíêöèîíàëüíîñòü. Íàáîðû ôðåéìîâ 165 Ñâîéñòâà ôðåéìîâ Íèæå ïåðå÷èñëåíû íåêîòîðûå ñâîéñòâà ôðåéìîâ. m Êàæäûé ôðåéì èìååò ñâîé URL-àäðåñ, ÷òî ïîçâîëÿåò îáðàùàòüñÿ ê íåìó è çàãðóæàòü åãî íåçàâèñèìî îò äðóãèõ ôðåéìîâ. m Êàæäûé ôðåéì èìååò ñîáñòâåííîå èìÿ (çàäàâàåìîå àòðèáóòîì NAME), ïîçâîëÿþùåå îáðàòèòüñÿ ê íåìó èç äðóãîãî ôðåéìà. m Ðàçìåð ôðåéìà ìîæåò áûòü èçìåíåí ïîëüçîâàòåëåì ïðÿìî íà ýêðàíå ìûøüþ (åñëè ýòî íå çàïðåùåíî ñ ïîìîùüþ ñïåöèàëüíîãî ïàðàìåòðà). Ïåðå÷èñëåííûå ñâîéñòâà ôðåéìîâ ïîçâîëÿþò ñîçäàâàòü ðàçíîîáðàçíûå èíòåðôåéñíûå ðåøåíèÿ. m  îòäåëüíîì ôðåéìå, êîòîðûé áóäåò âñå âðåìÿ îñòàâàòüñÿ íà ýêðàíå, ìîæíî ðàçìåñòèòü ñòàòè÷åñêóþ èíôîðìàöèþ, êîòîðóþ àâòîð ñ÷èòàåò íåîáõîäèìûì ïîñòîÿííî ïîêàçûâàòü ïîëüçîâàòåëþ. Ýòî ìîæåò áûòü ãðàôè÷åñêèé ëîãîòèï ôèðìû, ñîãëàøåíèå îá àâòîðñêèõ ïðàâàõ, íàáîð óïðàâëÿþùèõ êíîïîê, îãëàâëåíèå âñåõ èëè ÷àñòè âåá-äîêóìåíòîâ, ñîäåðæàùèõñÿ íà âåá-ñåðâåðå, ÷òî ïîçâîëèò ïîëüçîâàòåëþ áûñòðî íàõîäèòü èíòåðåñóþùóþ åãî èíôîðìàöèþ. m Ïðè èíòåíñèâíûõ îáðàùåíèÿõ ïîëüçîâàòåëÿ ê âåá-ñåðâåðó ìîæíî ïîñòîÿííî îòîáðàæàòü íà ýêðàíå äâà ôðåéìà — â îäíîì ôðåéìå ïîëüçîâàòåëü áóäåò ââîäèòü ñâîè çàïðîñû ê ñåðâåðó, à â äðóãîì âèäåòü ðåçóëüòàòû èõ îáðàáîòêè ñåðâåðîì. m Äëÿ âåá-ïðèëîæåíèé, îáñëóæèâàþùèõ áàçû äàííûõ, ìîæíî ñîçäàâàòü ôîðìû ñ ôðåéìàìè, ñâÿçûâàÿ èõ îòíîøåíèÿìè «ãëàâíûé—ïîä÷èíåííûé». Òîãäà â ãëàâíîì ôðåéìå áóäóò îòîáðàæàòüñÿ îáùèå äàííûå èç áàçû äàííûõ, à â ïîä÷èíåííîì — ïîäðîáíûå äàííûå, îòíîñÿùèåñÿ ê âûáðàííîìó â ãëàâíîì ôðåéìå ýëåìåíòó. Íàáîðû ôðåéìîâ Ôîðìàò äîêóìåíòà, èñïîëüçóþùåãî ôðåéìû, âíåøíå î÷åíü íàïîìèíàåò ôîðìàò îáû÷íîãî äîêóìåíòà, òîëüêî âìåñòî òåãà èñïîëüçóåòñÿ ïàðíûé òåã : ... ... Òî åñòü ïåðåä òåì êàê ðàçìåùàòü íà âåá-ñòðàíèöû ôðåéìû, ñ ïîìîùüþ òåãà (îò àíãë. frame set — íàáîð ôðåéìîâ) ñîçäàþò òàê íàçûâàåìûé íàáîð ôðåéìîâ, ñîäåðæàùèé èíôîðìàöèþ î ÷èñëå ôðåéìîâ, èõ îòíîñèòåëüíûõ è àáñîëþòíûõ ðàçìåðàõ. Òåã íå íåñåò êàêîé-ëèáî èíôîðìàöèîííîé íàãðóçêè, îí òîëüêî îïèñûâàåò ôðåéìû. Òåã äîïóñêàåò âëîæåíèÿ. Îáùèé ñèíòàêñèñ íàáîðà ôðåéìîâ: ... 166 Óðîê 10. Ôðåéìû Îáùèé êîíòåéíåð îïèñûâàåò âñå ôðåéìû, íà êîòîðûå äåëèòñÿ ýêðàí. Ìîæíî ðàçäåëèòü ýêðàí íà íåñêîëüêî âåðòèêàëüíûõ èëè íåñêîëüêî ãîðèçîíòàëüíûõ ôðåéìîâ. Äëÿ îïèñàíèÿ êàæäîãî ôðåéìà â îòäåëüíîñòè ñëóæèò òåã . Ìåæäó òåãàìè è ìîãóò íàõîäèòüñÿ òåãè , âëîæåííûå òåãè è , à òàêæå êîíòåéíåð èç òåãîâ è , êîòîðûé ïîçâîëÿåò ïðîäóáëèðîâàòü äîêóìåíò äëÿ áðàóçåðîâ, íå ïîääåðæèâàþùèõ ôðåéìû. Òåã äîïóñêàåò âëîæåíèÿ è ìîæåò èìåòü àòðèáóòû COLS, ROWS, BORDER, FRAMEBORDER, ïðè÷åì àòðèáóòû ROWS è COLS âçàèìîèñêëþ÷àþùèå. m Àòðèáóò COLS. Àòðèáóò COLS çàäàåò êîëè÷åñòâî è ðàçìåðû ñòîëáöîâ â ñîçäàâàåìîì íàáîðå ôðåéìîâ. Çíà÷åíèÿ øèðèíû ðàçëè÷íûõ ôðåéìîâ ïåðå÷èñëÿþòñÿ â êàâû÷êàõ ÷åðåç çàïÿòóþ â ïèêñåëàõ, â ïðîöåíòàõ (%) èëè â ñâÿçàííûõ ìàñøòàáíûõ êîýôôèöèåíòàõ (*), íàïðèìåð: m Àòðèáóò ROWS. Àòðèáóò ROWS çàäàåò êîëè÷åñòâî è ðàçìåðû ñòðîê â ñîçäàâàåìîì íàáîðå ôðåéìîâ â ïèêñåëàõ, â ïðîöåíòàõ (%) èëè â ñâÿçàííûõ ìàñøòàáíûõ êîýôôèöèåíòàõ (*), íàïðèìåð: Êîëè÷åñòâî ôðåéìîâ îïðåäåëÿåòñÿ êîëè÷åñòâîì çíà÷åíèé â ñïèñêå. Îáùàÿ ñóììà çíà÷åíèé âûñîòû âñåõ ôðåéìîâ (ïðè ëþáîì ñïîñîáå çàäàíèÿ çíà÷åíèé àòðèáóòà) äîëæíà ñîñòàâëÿòü âûñîòó âñåãî îêíà. Îòñóòñòâèå àòðèáóòà ROWS îçíà÷àåò îäèí ôðåéì âûñîòîé ñ îêíî áðàóçåðà. m Àòðèáóò BORDER. Àòðèáóò BORDER çàäàåò òîëùèíó îáðàìëåíèÿ â ïèêñåëàõ äëÿ âñåõ ôðåéìîâ, âõîäÿùèõ â äàííûé íàáîð ôðåéìîâ, íàïðèìåð: m Àòðèáóò FRAMEBORDER. Àòðèáóò FRAMEBORDER ïîçâîëÿåò îòìåíèòü âûâîä îáðàìëåíèÿ ó ôðåéìîâ íåçàâèñèìî îò çíà÷åíèÿ àòðèáóòà BORDER. Çíà÷åíèå 1 ñîîòâåòñòâóåò íàëè÷èþ, à 0 — îòñóòñòâèþ îáðàìëåíèÿ, íàïðèìåð: Çàäàíèå çíà÷åíèé àòðèáóòà ROWS èëè COLS â ïèêñåëàõ — äàëåêî íå ñàìûé ëó÷øèé ñïîñîá îïèñàíèÿ âûñîòû ôðåéìà, ïîñêîëüêó ïîëüçîâàòåëè ìîãóò ïðîèçâîëüíûì îáðàçîì ìåíÿòü ðàçìåð ðàáî÷åãî ïîëÿ áðàóçåðà, íå ãîâîðÿ óæå î ðàçëè÷íûõ ðàçðåøåíèÿõ ýêðàíà. Åñëè âû âñå æå âûáðàëè äàííûé ñïîñîá îïèñàíèÿ ðàçìåðà, íàñòîÿòåëüíî ðåêîìåíäóåòñÿ ñî÷åòàòü åãî ñ êàêèì-ëèáî äðóãèì, ÷òîáû â ðåçóëüòàòå ïîëó÷èëîñü 100-ïðîöåíòíîå çàïîëíåíèå îêíà áðàóçåðà. Åñëè çíà÷åíèÿ àòðèáóòà ROWS èëè COLS óêàçûâàþòñÿ â ïðîöåíòàõ (îò 1 äî 100) è îáùàÿ ñóììà ðàçìåðîâ îïèñûâàåìûõ ôðåéìîâ ïðåâûøàåò 100, òî ðàçìåðû âñåõ ôðåéìîâ ïðîïîðöèîíàëüíî óìåíüøàþòñÿ, ÷òîáû â ðåçóëüòàòå ïîëó÷èëàñü ñóììà â 100 %. Åñëè, ñîîòâåòñòâåííî, ñóììà ìåíüøå 100 %, òî ðàçìåðû ïðîïîðöèîíàëüíî óâåëè÷èâàþòñÿ. Çàäàíèå îäíîãî èç çíà÷åíèé àòðèáóòà ROWS èëè COLS ñ åäèíè÷íûì ìàñøòàáíûì êîýôôèöèåíòîì (â ýòîì ñëó÷àå óêàçûâàåòñÿ ïðîñòî çâåçäî÷êà áåç ÷èñëà) îçíà÷àåò, ÷òî âñå îñòàâøååñÿ ìåñòî áóäåò ïðèíàäëåæàòü äàííîìó ôðåéìó. Åñëè åäèíè÷íûå Âñòàâêà ôðåéìà â äîêóìåíò ñ íàáîðîì ôðåéìîâ 167 ìàñøòàáíûå êîýôôèöèåíòû óêàçûâàþòñÿ äëÿ äâóõ èëè áîëåå ôðåéìîâ, òî îñòàâøååñÿ ïðîñòðàíñòâî äåëèòñÿ ïîðîâíó ìåæäó ýòèìè ôðåéìàìè. Åñëè ïåðåä çâåçäî÷êîé ñòîèò öèôðà, òî îíà çàäàåò ìàñøòàáíûé êîýôôèöèåíò äëÿ äàííîãî ôðåéìà (âî ñêîëüêî ðàç îí äîëæåí áûòü áîëüøå àíàëîãè÷íîãî ôðåéìà, îïèñàííîãî çâåçäî÷êîé áåç ÷èñëà). Ðàññìîòðèì ïðèìåðû. COLS="3*,*,*" Ýòà çàïèñü ãîâîðèò î òîì, ÷òî áóäåò ñîçäàíî òðè ôðåéìà, ïðè÷åì ïåðâûé ôðåéì çàéìåò 3/5 ñâîáîäíîãî ïðîñòðàíñòâà ïî ãîðèçîíòàëè, à äâà äðóãèõ — ïî 1/5. COLS="50%,50%" Òàêàÿ çàïèñü îçíà÷àåò äåëåíèå îáëàñòè ïðîñìîòðà íà äâå ðàâíûå ÷àñòè. COLS="20%,80%" Ýòà çàïèñü îçíà÷àåò äåëåíèå îáëàñòè ïðîñìîòðà íà íåðàâíûå ÷àñòè (ñëåâà 20, ñïðàâà 80 %): ROWS="100,20%,*" Äàííàÿ çàïèñü îçíà÷àåò äåëåíèå îáëàñòè ïðîñìîòðà íà òðè ÷àñòè. Ïåðâîé (âåðõíåé) îòâåäåíî 100 ïèêñåëîâ, âòîðîé (ñðåäíåé) — 20 % îñòàâøåãîñÿ ïðîñòðàíñòâà, òðåòüåé (íèæíåé) — âñå îñòàëüíîå. COLS="*,3*" Ýòà çàïèñü îçíà÷àåò äåëåíèå îáëàñòè ïðîñìîòðà íà íåðàâíûå ÷àñòè, ïðè÷åì ïðàâàÿ ÷àñòü â òðè ðàçà øèðå ëåâîé. Òîãî æå ýôôåêòà ìîæíî äîáèòüñÿ ñ ïîìîùüþ ñëåäóþùåé çàïèñè: COLS="25%,75%" Ñîâìåñòíîå èñïîëüçîâàíèå â îäíîì òåãå àòðèáóòîâ COLS è ROWS ìîæåò ïðèâåñòè ê íåïðåäñêàçóåìûì ðåçóëüòàòàì. Ôðåéìû ïîääåðæèâàþòñÿ íå âñåìè áðàóçåðàìè. ×òîáû ïîëüçîâàòåëè òàêèõ áðàóçåðîâ ìîãëè âèäåòü ñîäåðæèìîå âåá-ñòðàíèöû ñ ôðåéìàìè, èñïîëüçóåòñÿ ïàðíûé òåã . Ýòîò òåã ïîìåùàåòñÿ âíóòðè êîíòåéíåðà , è âñå, ÷òî íàõîäèòñÿ ìåæäó òåãàìè è , èãíîðèðóåòñÿ áðàóçåðàìè, ïîääåðæèâàþùèìè ôðåéìû. Òî åñòü ðàçðàáîò÷èêó âåá-ñòðàíèöû íóæíî íàïèñàòü êîä, äóáëèðóþùèé ñîäåðæèìîå ôðåéìîâ äðóãèìè ñðåäñòâàìè, è ïîìåñòèòü ýòîò êîä ìåæäó òåãàìè è , òîãäà âñå ïîëüçîâàòåëè ñìîãóò óâèäåòü åãî âåá-ñòðàíèöó. Âñòàâêà ôðåéìà â äîêóìåíò ñ íàáîðîì ôðåéìîâ Êàê óæå îòìå÷àëîñü, äëÿ âñòàâêè â äîêóìåíò îòäåëüíîãî ôðåéìà ñëóæèò íåïàðíûé òåã ñ àòðèáóòàìè NAME, SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER. 168 Óðîê 10. Ôðåéìû m Àòðèáóò NAME. Àòðèáóò NAME çàäàåò èìÿ ôðåéìà. Èìÿ ïîçâîëÿåò îáðàòèòüñÿ ê ýòîìó ôðåéìó â ïðîãðàììå (ýòî äåëàåòñÿ ñ ïîìîùüþ àòðèáóòà TARGET, î êîòîðîì ðàññêàçûâàåòñÿ â ðàçäåëå «Âçàèìîäåéñòâèå ôðåéìîâ»), íàïðèìåð çàãðóçèòü â íåãî ñîäåðæèìîå íîâîãî HTML-ôàéëà. Ñèíòàêñèñ: NAME="èìÿ" m Àòðèáóò SRC. Àòðèáóò SRC çàäàåò äîêóìåíò, êîòîðûé äîëæåí îòîáðàæàòüñÿ âíóòðè äàííîãî ôðåéìà, íàïðèìåð: Åñëè àòðèáóò SRC îòñóòñòâóåò, îòîáðàæàåòñÿ ïóñòîé ôðåéì. m Àòðèáóò MARGINWIDTH. Àòðèáóò MARGINWIDTH ïîçâîëÿåò óêàçàòü âåëè÷èíó âåðòèêàëüíûõ ðàçäåëèòåëüíûõ ïîëîñ ìåæäó ôðåéìàìè: MARGINWIDTH="value" Çíà÷åíèå value óêàçûâàåòñÿ â ïèêñåëàõ è íå ìîæåò áûòü ìåíüøå åäèíèöû. Çíà÷åíèå, óñòàíàâëèâàåìîå ïî óìîë÷àíèþ, çàâèñèò îò èñïîëüçóåìîãî áðàóçåðà. m Àòðèáóò MARGINHEIGHT. Àòðèáóò MARGINHEIGHT ïîçâîëÿåò óêàçàòü âåëè÷èíó ãîðèçîíòàëüíûõ ðàçäåëèòåëüíûõ ïîëîñ ìåæäó ôðåéìàìè: MARGINHEIGHT="value" Çíà÷åíèå value óêàçûâàåòñÿ â ïèêñåëàõ è íå ìîæåò áûòü ìåíüøå åäèíèöû. m Àòðèáóò SCROLLING. Àòðèáóò SCROLLING óïðàâëÿåò âûâîäîì ïîëîñ ïðîêðóòêè ôðåéìà: SCROLLING="yes|no|auto" Çíà÷åíèå yes óêàçûâàåò, ÷òî ôðåéì áóäåò èìåòü ïîëîñû ïðîêðóòêè â ëþáîì ñëó÷àå, çíà÷åíèå no — ÷òî ïîëîñ ïðîêðóòêè íå áóäåò. Çíà÷åíèå auto, çàäàííîå ïî óìîë÷àíèþ, ãîâîðèò î òîì, ÷òî ïîëîñû ïðîêðóòêè ïîÿâÿòñÿ òîëüêî ïðè íåîáõîäèìîñòè. m Àòðèáóò NORESIZE. Àòðèáóò NORESIZE ïîçâîëÿåò ñîçäàâàòü ôðåéìû áåç âîçìîæíîñòè èçìåíåíèÿ èõ ðàçìåðîâ. Ïî óìîë÷àíèþ ðàçìåð ôðåéìà ìîæíî èçìåíèòü ìûøüþ òàê æå ïðîñòî, êàê è ðàçìåð îêíà Windows. Àòðèáóò NORESIZE çàïðåùàåò òàêóþ âîçìîæíîñòü. Åñëè ó îäíîãî èç ôðåéìîâ óñòàíîâëåí àòðèáóò NORESIZE, ýòî ëèøàåò ïîëüçîâàòåëÿ âîçìîæíîñòè ïåðåòàñêèâàòü ãðàíèöû íå òîëüêî äàííîãî ôðåéìà, íî è ïðèëåãàþùèå ê íåìó ãðàíèöû äðóãèõ ôðåéìîâ. m Àòðèáóò FRAMEBORDER. Àòðèáóò FRAMEBORDER çàäàåò îáðàìëåíèå ó ôðåéìîâ è ìîæåò ïðèíèìàòü çíà÷åíèÿ 1 (åñòü îáðàìëåíèå) èëè 0 (íåò îáðàìëåíèÿ), íàïðèìåð: Âñòàâêà ôðåéìà â äîêóìåíò áåç íàáîðà ôðåéìîâ Äëÿ âèçóàëèçàöèè âåá-ñòðàíèöû â äðóãîì äîêóìåíòå íå îáÿçàòåëüíî ïðåäâàðèòåëüíî ñîçäàâàòü â íåì íàáîð ôðåéìîâ. Ôðåéì ìîæíî âñòàâèòü íå òîëüêî â äîêóìåíò ñ íàáîðîì ôðåéìîâ, íî è â «îáû÷íûé» äîêóìåíò. Äëÿ ýòîãî èñïîëüçóåòñÿ Âçàèìîäåéñòâèå ôðåéìîâ 169 òåã <IFRAME>, êîòîðûé, â îòëè÷èå îò òåãà , âñòàâëÿåòñÿ íå ìåæäó òåãàìè è , à ìåæäó òåãàìè è . Òåã <IFRAME> èìååò àòðèáóòû SRC, FRAMEBOARD, MARGINHEIGHT, MARGINWIDTH, NAME, ALIGN, SCROLLING, WIDTH, HEIGHT. m Àòðèáóò SRC. Àòðèáóò SRC çàäàåò äîêóìåíò, êîòîðûé äîëæåí áûòü îòîáðàæåí âî ôðåéìå, íàïðèìåð: <IFRAME SRC="URL"> m Àòðèáóò FRAMEBORDER. Àòðèáóò FRAMEBORDER çàäàåò îáðàìëåíèå ó ôðåéìîâ. Ìîæåò ïðèíèìàòü çíà÷åíèå 1 (åñòü îáðàìëåíèå) èëè 0 (íåò îáðàìëåíèÿ), íàïðèìåð: <IFRAME FRAMEBORDER="1"> <IFRAME FRAMEBORDER="0"> m Àòðèáóò MARGINHEIGHT. Àòðèáóò MARGINHEIGHT çàäàåò òîëùèíó âåðõíåé è íèæíåé ãðàíèö îáðàìëåíèÿ â ïèêñåëàõ, íàïðèìåð: <IFRAME MARGINHEIGHT ="÷èñëî"> m Àòðèáóò MARGINWIDTH. Àòðèáóò MARGINWIDTH çàäàåò òîëùèíó ïðàâîé è ëåâîé ãðàíèö îáðàìëåíèÿ â ïèêñåëàõ, íàïðèìåð: <IFRAME MARGINWIDTH="÷èñëî"> m Àòðèáóò NAME. Àòðèáóò NAME îïðåäåëÿåò èìÿ ôðåéìà, ïî êîòîðîìó ê íåìó ìîæíî áóäåò îáðàùàòüñÿ â ññûëêàõ. m Àòðèáóò ALIGN. Àòðèáóò ALIGN ïîçâîëÿåò ïîçèöèîíèðîâàòü ôðåéì ïî îòíîøåíèþ ê òåêñòó è ïðèíèìàåò çíà÷åíèÿ LEFT (ñëåâà), RIGHT (ñïðàâà), MIDDLE (ïîñåðåäèíå), TOP (ñâåðõó) è BOTTOM (ñíèçó), íàïðèìåð: <IFRAME ALIGN="LEFT"> m Àòðèáóò SCROLLING. Àòðèáóò SCROLLING îïðåäåëÿåò âèä ïîëîñ ïðîêðóòêè ó ôðåéìà è ïðèíèìàåò çíà÷åíèÿ yes (åñòü ïîëîñû), no (íåò ïîëîñ) è auto (ïîëîñû ïîÿâëÿþòñÿ ïðè íåîáõîäèìîñòè), íàïðèìåð: m Àòðèáóò WIDTH. Àòðèáóò WIDTH îïðåäåëÿåò øèðèíó ôðåéìà â ïèêñåëàõ, íàïðèìåð: <IFRAME WIDTH ="÷èñëî"> m Àòðèáóò HEIGHT. Àòðèáóò HEIGHT îïðåäåëÿåò âûñîòó ôðåéìà â ïèêñåëàõ, íàïðèìåð: <IFRAME HEIGHT="÷èñëî"> Âçàèìîäåéñòâèå ôðåéìîâ Ïðè ðàçðàáîòêå ñòðàíèö ñ ôðåéìàìè âîçíèêàåò âîïðîñ: «À êàê ñäåëàòü òàê, ÷òîáû, ùåëêíóâ íà ññûëêå â îäíîì ôðåéìå, èíèöèèðîâàòü ïîÿâëåíèå èíôîðìàöèè â äðóãîì?». Îòâåòîì íà äàííûé âîïðîñ ÿâëÿåòñÿ îðãàíèçàöèÿ âçàèìîäåéñòâèÿ ôðåéìîâ. Êàæäûé ôðåéì ìîæåò èìåòü ñîáñòâåííîå èìÿ, îïðåäåëÿåìîå ïðè åãî ñîçäàíèè àòðèáóòîì NAME. Ñóùåñòâóåò òàêæå ñïåöèàëüíûé àòðèáóò TARGET, ïîçâîëÿþùèé àäðåñîâàòü öåëåâîé ôðåéì: TARGET="èìÿ" 170 Óðîê 10. Ôðåéìû Äàííûé àòðèáóò ìîæíî óêàçûâàòü âíóòðè ñàìûõ ðàçíûõ òåãîâ, íàïðèìåð â ññûëêàõ: Ïåðåõîä âî ôðåéì ñ èìåíåì Frame1 Ðàçìåùåíèå àòðèáóòà TARGET â òåãå ïîçâîëÿåò íå óêàçûâàòü ïðè îïèñàíèè êàæäîé ññûëêè ôðåéì-ïðèåìíèê äîêóìåíòîâ, âûçûâàåìûõ ïî ññûëêàì. Ýòî î÷åíü óäîáíî, åñëè â îäíîì ôðåéìå, íàïðèìåð, íàõîäèòñÿ ìåíþ, à â äðóãîì âûâîäèòñÿ èíôîðìàöèÿ, ñîîòâåòñòâóþùàÿ âûáðàííîìó ïóíêòó ìåíþ: Ïåðâàÿ ÷àñòü | Âòîðàÿ ÷àñòü Äîïóñêàåòñÿ âêëþ÷åíèå àòðèáóòà TARGET â ññûëêó ïðè ñîçäàíèè êàðòû èçîáðàæåíèÿ, íàïðèìåð: 224 Óðîê 15. Åùå ðàç ñ íà÷àëà m Ñïèñîê êëþ÷åâûõ ñëîâ äëÿ ïîèñêîâûõ ñèñòåì: <META NAME="keywords" CONTENT="Êëþ÷åâûå ñëîâà"> Êëþ÷åâûå ñëîâà â ñïèñêå ïèøóòñÿ ÷åðåç ïðîáåë èëè çàïÿòóþ. Ýòè ñëîâà íóæíû ïîèñêîâûì ìàøèíàì äëÿ èíäåêñàöèè ñòðàíèöû â ñâîåì êàòàëîãå, íàïðèìåð: <META NAME="keywords" CONTENT="HTML html JavaScript javascript css CSS VBScript vbscript VRML vrml php PHP Perl perl òåãè àòðèáóòû ëèñòèíã áðàóçåð">; m Èìÿ àâòîðà äîêóìåíòà, àäðåñ åãî ýëåêòðîííîé ïî÷òû, äîìàøíèé àäðåñ, äðóãèå äàííûå: <META NAME="author" CONTENT="Èíôîðìàöèÿ_îá_àâòîðå"> m Íàçâàíèå ïðîãðàììû, ñ èñïîëüçîâàíèåì êîòîðîé ñîçäàí äîêóìåíò: <META NAME="generator" CONTENT="Íàçâàíèå_ïðîãðàììû"> m Âðåìÿ «óñòàðåâàíèÿ» äîêóìåíòà (òî åñòü ñðîê ãîäíîñòè): <META NAME = “expires” CONTENT = “Äàòà> m Àäðåñ ýëåêòðîííîé ïî÷òû: <META NAME="Reply-to" CONTENT="Èìÿ@Àäðåñ"> m Îïèñàíèå àâòîðñêèõ ïðàâ íà äîêóìåíò: <META NAME="Copyrigh" CONTENT="Àâòîðñêèå_ïðàâà"> Àòðèáóò HTTP-EQUIV Íèæå ïðåäñòàâëåíû ïðèìåðû òåãà <META> ñ àòðèáóòîì HTTP-EQUIV. m Ñëåäóþùàÿ çàïèñü ïîçâîëÿåò âåðíóòüñÿ ÷åðåç çàäàííûé ïðîìåæóòîê âðåìåíè íà îïðåäåëåííûé àäðåñ: <META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://www.piter-press.ru">  äàííîì ñëó÷àå ñðàçó ïîñëå çàãðóçêè ñòðàíèöû áðàóçåð ïåðåéäåò íà àäðåñ http://www.piter-press.ru. m MIME-òèï ñîäåðæèìîãî è åãî êîäèðîâêà: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251">  äàííîì ñëó÷àå â êà÷åñòâå MIME-òèïà óêàçàíî çíà÷åíèå text/html, òî åñòü ãèïåðòåêñò, à â êà÷åñòâå êîäèðîâêè — çíà÷åíèå windows-1251. Âîîáùå ãîâîðÿ, ÿâíî óêàçûâàòü êîäèðîâêó íå ðåêîìåíäóåòñÿ. Áðàóçåðû è ñàìè íåïëîõî ñïðàâëÿþòñÿ ñ åå âûáîðîì. m Âðåìÿ «óñòàðåâàíèÿ» äîêóìåíòà (òî åñòü ñðîê ãîäíîñòè): <META HTTP-EQUIV="expires" CONTENT="Mon, 7 Nov 2004 10:00:00 GMT"> Ñðîê ãîäíîñòè óêàçûâàåòñÿ â ôîðìàòå RFC-850 (ñòàíäàðò ýëåêòðîííîé ïî÷òû): q Mon — äåíü íåäåëè; q 7 Nov — äåíü ìåñÿöà è ìåñÿö; q 2004 — ãîä; q 10:00:00 — âðåìÿ (÷àñû, ìèíóòû è ñåêóíäû); q GMT — âðåìåííîé ïîÿñ (â äàííîì ñëó÷àå âðåìÿ óêàçàíî ìîñêîâñêîå). Ïîäâåäåì èòîãè 225 Ïî èñòå÷åíèè óêàçàííîé äàòû äîêóìåíò áóäåò óäàëåí èç ëîêàëüíîãî êýøà è ïðè ïîâòîðíîì îáðàùåíèè çàíîâî çàïðîøåí èç ñåòè.  ýòîé ïðîöåäóðå ó÷àñòâóþò è áðàóçåð è ñåðâåð. Åñëè óêàçûâàåòñÿ íóëåâàÿ äàòà, äîêóìåíò óäàëÿåòñÿ ñðàçó ïîñëå çàãðóçêè, òî åñòü âîîáùå íå ñîõðàíÿåòñÿ â êýøå. Ñâÿçü âåá-ñòðàíèöû ñ äîïîëíèòåëüíûìè ôàéëàìè Ñâÿçü òåêóùåé ñòðàíèöû ñ äðóãèìè ôàéëàìè çàäàåòñÿ òåãîì . Îñíîâíîå ïðèìåíåíèå — îáðàùåíèå ê îïèñàííûì â îòäåëüíîì ôàéëå ñòèëÿì. Òåã âñòàâëÿåòñÿ ìåæäó òåãàìè : <TITLE>CSS Units <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <META content="John Pozadzides/Liam Quinn" name=author> <META content="A description of the units available in Cascading Style Sheets, level 1." name=description> <META content="html authoring, newsgroup, web design group, web page design, help, frequently asked questions, internet help, site creation, page creation, site design, page design, site layout, page layout, html, hypertext markup language, hyper text markup language, questions, graphics, www pages, html 3.2, help files, tutorials, articles, reference material, guide, style, stylesheet, style sheet, css, cascading style sheets, units, color, colour, colors, colours, length, lengths, percentage, percentages, value, values, URL, uniform resource locator, rgb, answer" name=keywords> <META http-equiv=Content-Style-Type content=text/css> <META content="MSHTML 6.00.2600.0" name=GENERATOR> Òåã íå èìååò çàêðûâàþùåãî òåãà, íî èìååò îáÿçàòåëüíûå àòðèáóòû: HREF (öåëåâîé àäðåñ), TYPE (òèï äàííûõ) è ëèáî REL (îòíîøåíèå öåëåâîãî äîêóìåíòà, çàäàííîãî àòðèáóòîì HREF, ê òåêóùåé ñòðàíèöå), ëèáî REV (îáðàòíîå îòíîøåíèå). Ïîäâåäåì èòîãè  ýòîì óðîêå ðàññêàçàíî, ÷òî íà÷àëî ïðîãðàììû íà ÿçûêå HTML ñîäåðæèò âàæíóþ èíôîðìàöèþ è èíîãäà ìîæåò áûòü äîâîëüíî ñëîæíûì. Óðîê 16 Ñëîè  ýòîì óðîêå ðàññìàòðèâàþòñÿ ñëîè è ñïîñîáû èõ âêëþ÷åíèÿ â âåá-ñòðàíèöû. Ñëîè âïåðâûå ïîÿâèëèñü â ïðîãðàììå Adobe Photoshop, à ñïóñòÿ íåêîòîðîå âðåìÿ èõ ñòàëè èñïîëüçîâàòü â ïðîãðàììàõ Adobe PageMaker, CorelDRAW è äðóãèõ. Ñîçäàíèå ñëîÿ ñ ïîìîùüþ òåãà 227 Ïîíÿòèå ñëîÿ Ïîíÿòèå ñëîÿ (layer) îáû÷íî èëëþñòðèðóþò ñ ïîìîùüþ ëèñòà ïðîçðà÷íîé áóìàãè (êàëüêè). Íà êàæäîì èç òàêèõ ëèñòîâ ìîæåò íàõîäèòüñÿ ãðàôè÷åñêèé èëè òåêñòîâûé ôðàãìåíò åäèíîé êîìïîçèöèè, îáðàçóåìîé ïðè íàëîæåíèè ëèñòîâ êàëüêè äðóã íà äðóãà. Ïðåèìóùåñòâî ñëîèñòîé ñòðóêòóðû ñîñòîèò â òîì, ÷òî ìîæíî ðåäàêòèðîâàòü êîä ïðîãðàììû êàæäîãî ñëîÿ îòäåëüíî, íå çàòðàãèâàÿ äðóãèõ ÷àñòåé êîäà íà äðóãèõ ñëîÿõ. Ñòîïêó ñëîåâ òàêæå ñðàâíèâàþò ñ êîëîäîé èãðàëüíûõ êàðò. Èõ, êàê è êàðòû, ìîæíî ïåðåòàñîâûâàòü. Ñëîè óêðàøàþò âåá-ñòðàíèöó. Ñ ïîÿâëåíèåì áðàóçåðà Netscape Communicator âåðñèè 4 òåõíîëîãèþ ñëîåâ ñòàëè ïðèìåíÿòü íåïîñðåäñòâåííî äëÿ îôîðìëåíèÿ âåá-ñòðàíèö. Ñëîé ìîæíî îïèñàòü òåãîì (äëÿ Netscape Communicator) èëè (äëÿ Internet Explorer) è íàïîëíèòü íóæíûì ñîäåðæàíèåì äëÿ ïîñëåäóþùåãî òî÷íîãî ïîçèöèîíèðîâàíèÿ íà ñòðàíèöå. Ñëîÿì ìîæíî çàäàâàòü àáñîëþòíûå êîîðäèíàòû, îòíîñèòåëüíóþ ãëóáèíó, ôîí è ò. ä. Äëÿ ñîçäàíèÿ äèíàìè÷åñêèõ ñëîåâ èñïîëüçóåòñÿ ÿçûê JavaScript. Ìîæíî, íàïðèìåð, íàðèñîâàòü íåñêîëüêî êàðòèíîê, ïðåäñòàâëÿþùèõ êàäðû àíèìàöèè, ðàñïîëîæèòü èõ íà ðàçíûõ ñëîÿõ è çàòåì, ïîî÷åðåäíî èçìåíÿÿ àòðèáóò âèäèìîñòè ñëîåâ, ïîêàçûâàòü êàðòèíêè çðèòåëþ, ñîçäàâàÿ ýôôåêò àíèìàöèè. Äëÿ ïåðåìåùåíèÿ êàðòèíêè ïî ýêðàíó ìîæíî ïðîñòî ìåíÿòü ïîçèöèþ ñëîÿ, íà êîòîðîì îíà ðàñïîëîæåíà. Ñîçäàíèå ñëîÿ ñ ïîìîùüþ òåãà Ïàðíûé òåã ïðåäíàçíà÷åí äëÿ ïîçèöèîíèðîâàíèÿ òåêñòîâîãî èëè ãðàôè÷åñêîãî ñëîÿ. Äëÿ ýòîãî ñëóæèò àòðèáóò ALIGN, êîòîðûé ìîæåò èìåòü çíà÷åíèå LEFT (ïî ëåâîìó êðàþ), CENTER (ïî öåíòðó) èëè RIGHT (ïî ïðàâîìó êðàþ). Êðîìå ýòîãî àòðèáóòà òåã ìîæåò èìåòü è äðóãèå àòðèáóòû. m Àòðèáóò CLASS. Àòðèáóò CLASS ñëåäóåò óêàçûâàòü, åñëè ïðè îáðàáîòêå òåãà òðåáóåòñÿ èñïîëüçîâàòü ñâîéñòâà òîãî èëè èíîãî êëàññà. Íàïðèìåð, ÷òîáû îäíó ñòðîêó îòîáðàçèòü êóðñèâîì, à äðóãóþ ïîëóæèðíûì øðèôòîì, ïîòðåáóåòñÿ ñëåäóþùèé ôðàãìåíò êîäà: Îòîáðàæåíèå òåêñòà êóðñèâîì Îòîáðàæåíèå òåêñòà ïîëóæèðíûì øðèôòîì m Àòðèáóò ID. Àòðèáóò ID ïîçâîëÿåò èñïîëüçîâàòü ãëîáàëüíûå èäåíòèôèêàòîðû. Èäåíòèôèêàòîð ïîõîæ íà êëàññ, íî âìåñòî òî÷êè ïåðåä èìåíåì èäåíòèôèêàòîðà óêàçûâàåòñÿ ñèìâîë #: <STYLE TYPE=text/css> 228 Óðîê 16. Ñëîè Ïîñëå îïèñàíèÿ èäåíòèôèêàòîðà åãî ñëåäóåò âêëþ÷èòü â ñîñòàâ òåãà: Îòîáðàæåíèå òåêñòà êóðñèâîì Îòîáðàæåíèå òåêñòà ïîëóæèðíûì . Èäåíòèôèêàòîðû ïðèìåíÿþò, åñëè ñòèëè äîëæíû èñïîëüçîâàòüñÿ â äîêóìåíòå îäíîêðàòíî.  ïðîòèâíîì ñëó÷àå ëó÷øå çàäåéñòâîâàòü êëàññû. m Àòðèáóò STYLE. Àòðèáóò STYLE ñîäåðæèò èíôîðìàöèþ î ñòèëå (îòñòóïàõ ñëåâà, ñïðàâà, ñâåðõó, ñíèçó, î ïîëîæåíèè íà ñòðàíèöå), íàïðèìåð: . Íà ðèñ. 16.1 ïîêàçàí ïðèìåð èñïîëüçîâàíèÿ ñëîåâ (ëèñòèíã 16.1). Ðèñ. 16.1. Ñëîè íà âåá-ñòàðíèöå Ëèñòèíã 16.1. Ïðèìåð èñïîëüçîâàíèÿ ñëîåâ ÏÅÒÐÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÊÐÓÆÅÂÍÎÉ ÓÇÎÐ ÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÊÐÓÆÅÂÍÎÉ ÓÇÎÐ ÎÃÐÀÄ Ñîäåðæèìîå ñëîÿ ÏÅÒÐÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÊÐÓÆÅÂÍÎÉ ÓÇÎÐ ÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÏÅÒÐÎÃÐÀÄ ÊÐÓÆÅÂÍÎÉ ÓÇÎÐ ÎÃÐÀÄ Íà ðèñ. 16.2 ïîêàçàí ïðèìåð íàëîæåíèÿ äâóõ òåêñòîâûõ ñëîåâ äðóã íà äðóãà (ëèñòèíã 16.2). Ñîçäàíèå ñëîÿ ñ ïîìîùüþ òåãà 229 Ðèñ. 16.2. Íàëîæåíèå òåêñòîâûõ ñëîåâ äðóã íà äðóãà Ëèñòèíã 16.2. Ïðèìåð íàëîæåíèÿ òåêñòîâûõ ñëîåâ äðóã íà äðóãà Çàãîëîâîê 1-ãî óðîâíÿ < Çàãîëîâîê 2-ãî óðîâíÿ Âñå íàäïèñè ñäåëàíû âíóòðè òåãîâ DIV C ïîìîùüþ êàñêàäíûõ ëèñòîâ ñòèëåé ìîæíî ñîçäàòü ñâîé ñòèëü äëÿ âñåõ ñòðàíèö ñàéòà, ïðèäàþùèé åìó ñîáñòâåííîå ëèöî è äåëàþùèé åãî óçíàâàåìûì. Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû& nbsp; Ýòî óçîð ñòðàíèöû& nbsp; Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû230 Óðîê 16. Ñëîè Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Åùå îäèí ïðèìåð èñïîëüçîâàíèÿ òåãà ïîêàçàí íà ðèñ. 16.3 (ëèñòèíã 16.3). Ðèñ. 16.3. Ïðèìåð èñïîëüçîâàíèÿ òåãà Ñîçäàíèå ñëîÿ ñ ïîìîùüþ òåãà 231 Ëèñòèíã 16.3. Ïðèìåð èñïîëüçîâàíèÿ òåãà <TITLE>Ðàáîòà ñî ñòðóêòóðèðîâàííûì òåêñòîì Êàìåííîîñòðîâñêèé ïðîñïåêò Ôîòîãðàôèÿ, âûðîâíåííàÿ ïî öåíòðó áëîêà Çäåñü âûðàâíèâàíèå ïî ïðàâîìó êðàþ Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Ýòî óçîð ñòðàíèöû Äèíàìè÷åñêèé ñëîé <SCRIPT LANGUAGE=JavaScript1.2> function colorlayer(changeto) { bgColor=changeto } <SCRIPT LANGUAGE=VBSCRIPT>Ïîäâåäåì èòîãè 233 Sub MyDiv_onmouseover() document.all.MyDiv.style.backgroundColor="blue" End Sub Sub MyDiv_onmouseout() document.all.MyDiv.style.backgroundColor="green" End Sub Ïîäâåäåì èòîãè  ýòîì óðîêå ðàññêàçàíî î òîì, ÷òî òàêîå ñëîè è ñ ïîìîùüþ êàêèõ òåãîâ èõ ìîæíî ñîçäàâàòü, â ÷àñòíîñòè ïîêàçàíû ïðèìåðû èñïîëüçîâàíèÿ òåãîâ è . Áîëåå ñëîæíûå äèíàìè÷åñêèå ñëîè ñîçäàþòñÿ ñðåäñòâàìè ÿçûêà JavaScript. Óðîê 17 Êàñêàäíûå ëèñòû ñòèëåé Ýòîò óðîê ïðåäñòàâëÿåò ñîáîé ââåäåíèå â áîëüøóþ è ñëîæíóþ òåìó êàñêàäíûõ ëèñòîâ ñòèëåé (Cascading Style Sheets, CSS). Óðîâíè CSS 235 Ïîääåðæêà ñòèëåé Ñòèëü îïðåäåëÿåò îñîáåííîñòè ôîðìàòèðîâàíèÿ è îòîáðàæåíèÿ ýëåìåíòîâ âåáñòðàíèö. Ìîæíî çàäàòü ñòèëü äëÿ íà÷åðòàíèÿ øðèôòà, äëÿ öâåòà ôîíà, äëÿ öâåòà ãèïåðòåêñòîâûõ ññûëîê, äëÿ ïîëåé, äëÿ ðàñïîëîæåíèÿ îáúåêòîâ íà ñòðàíèöå è ò. ä. Ñòèëè HTML-, XHTML- è XML-äîêóìåíòîâ çàäàþòñÿ ñ ïîìîùüþ êàñêàäíûõ ëèñòîâ ñòèëåé (CSS). CSS ïðåäîñòàâëÿåò ðàçðàáîò÷èêó íîâûå âîçìîæíîñòè: m âìåñòî òîãî ÷òîáû êîäèðîâàòü êàæäóþ âåá-ñòðàíèöó, ìîæíî ñîçäàòü îäèí ôàéë, ñîäåðæàùèé ëèñòû ñòèëåé, è ññûëàòüñÿ íà íåãî èç âñåõ HTML-äîêóìåíòîâ; m ëèñòû ñòèëåé îáåñïå÷èâàþò äîïîëíèòåëüíóþ ñòåïåíü êîíòðîëÿ íàä øðèôòàìè, öâåòîì ôîíà è äðóãèìè õàðàêòåðèñòèêàìè, âëèÿþùèìè íà îòîáðàæåíèå äîêóìåíòà; m ëèñòû ñòèëåé ïîçâîëÿþò äîñòàòî÷íî áûñòðî è ïðîñòî èçìåíÿòü âíåøíèé âèä âåá-ñòðàíèö; m ïîñêîëüêó ñòàíîâèòñÿ ìåíüøå îáúåì äîêóìåíòîâ, óìåíüøàåòñÿ âðåìÿ èõ çàãðóçêè. Ôîðìàò çàïèñè ñòèëåâûõ ïðàâèë CSS ïîõîæ íà òàáëè÷íîå ïðåäñòàâëåíèå äàííûõ. Çàãîëîâîê òàáëèöû íàïîìèíàåò îïèñàíèå ýëåìåíòà, êëàññà èëè èäåíòèôèêàòîðà ñòèëÿ, â êà÷åñòâå ÿ÷ååê è ðÿäîâ òàáëèöû âûñòóïàþò ñâîéñòâà è çíà÷åíèÿ ñòèëåé, íàïðèìåð: A.menu:link { COLOR: #c2a1a0; FONT-FAMILY: Arial; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none }  ñîîòâåòñòâèè ñ ïðàâèëàìè HTML ïðè èñïîëüçîâàíèè ñòèëåé â êîäå íåîáõîäèìî âêëþ÷àòü â çàãîëîâîê äîêóìåíòà (â òåã ) META-îïðåäåëåíèå: <META http-equiv=Content- Style-Type content="text/css;> Ñòèëè ïðåäîñòàâëÿþò ðàçðàáîò÷èêó ìàêñèìàëüíûé óðîâåíü êîíòðîëÿ íàä îñîáåííîñòÿìè îòîáðàæåíèÿ âåá-ñòðàíèöû. Ðàçðàáîò÷èê ìîæåò çàäàâàòü îòäåëüíûå ñòèëè äëÿ êàæäîãî àáçàöà, çàãîëîâêà, ãîðèçîíòàëüíîé ëèíèè, ÿ÷åéêè òàáëèöû è äðóãèõ ýëåìåíòîâ. Óðîâíè CSS Åñëè èñòîðèÿ ÿçûêà HTML óõîäèò êîðíÿìè â äàëåêèé 1989 ãîä, òî òåõíîëîãèÿ CSS ïðåäñòàâëÿåòñÿ íàì áîëåå «ìîëîäîé». Âïåðâûå î íåé ñòàëî èçâåñòíî â ìàå 1995 ãîäà, êîãäà ñàì íåäàâíî îáðàçîâàííûé (è â äåêàáðå 1994 ãîäà ïðîâåäøèé 236 Óðîê 17. Êàñêàäíûå ëèñòû ñòèëåé ñâîå ïåðâîå ñîâåùàíèå) êîíñîðöèóì W3C îáúÿâèë î âûáîðå òåõíîëîãèè CSS äëÿ ôîðìàòèðîâàíèÿ HTML-äîêóìåíòîâ. Óæå â íîÿáðå òîãî æå 1995 ãîäà êîíñîðöèóì W3C âíîâü îáðàùàåòñÿ ê ýòîé òåìå íà ñâîåì ñåìèíàðå ïî êàñêàäíûì ýëåìåíòàì îôîðìëåíèÿ. Âïåðâûå ïîääåðæêà CSS áûëà ðåàëèçîâàíà â áðàóçåðå Internet Explorer 3.0. Òàì âñå òîëüêî íà÷èíàëîñü, ïîýòîìó ïðàâèëà ñîñòàâëåíèÿ ñòèëåâûõ øàáëîíîâ áûëè âåñüìà ðàçðîçíåííûìè. Ñî âðåìåíåì ñòðóêòóðà CSS íåñêîëüêî ðàç âèäîèçìåíÿëàñü, äîáàâëÿëèñü íîâûå ýëåìåíòû, óáèðàëèñü ñòàðûå. Ïåðâûé óðîâåíü ñòèëåâûõ øàáëîíîâ (CSS1) áûë óòâåðæäåí 11 ÿíâàðÿ 1999 ãîäà, âòîðîé óðîâåíü (CSS2) áûë ïðèíÿò ê îáñóæäåíèþ â ìàå 1998 ãîäà, à òðåòèé óðîâåíü (CSS3) íà÷àëè îáñóæäàòü â ìàå 2001 ãîäà. Ïåðåõîä îò îäíîãî óðîâíÿ ê äðóãîìó ãîâîðèò î ïîïûòêàõ ñèñòåìàòèçàöèè CSS. Ïî÷åìó ëèñòû ñòèëåé íàçûâàþò êàñêàäíûìè? Ýòîò ýïèòåò óïîòðåáëÿþò ïîòîìó, ÷òî ê îäíîìó HTML-ýëåìåíòó ìîæíî ïðèìåíÿòü íåñêîëüêî ñòèëåâûõ ïðàâèë, èíòåðïðåòèðóåìûõ áðàóçåðîì ïîñëåäîâàòåëüíî, äðóãèìè ñëîâàìè — êàñêàäîì. Âàæíîé îñîáåííîñòüþ ñòèëåâîãî îôîðìëåíèÿ ÿâëÿåòñÿ òî, ÷òî ïðåîáðàçîâàíèþ çàäàííûì ñòèëåì ïîäâåðãàþòñÿ âñå òåãè, çàêëþ÷åííûå âíóòðè òåãà ñ óêàçàííûì ñòèëåì. Íàïðèìåð, åñëè îïðåäåëÿåòñÿ ñòèëü äëÿ òåãà , òî îí ïðèñâàèâàåòñÿ âñåìó ñîäåðæèìîìó âåá-ñòðàíèöû. Ýòî êà÷åñòâî íàçûâàåòñÿ íàñëåäîâàíèåì ïî àíàëîãèè ñ íàñëåäîâàíèåì â îáúåêòíî-îðèåíòèðîâàííûõ ÿçûêàõ ïðîãðàììèðîâàíèÿ. Ñèíòàêñèñ ëèñòà ñòèëÿ Ñèíòàêñèñ ëèñòà ñòèëÿ èìååò ÷åòêóþ ñòðóêòóðó. m Ýëåìåíò. Âñå íà÷èíàåòñÿ ñ ýëåìåíòà, èëè ñåëåêòîðà. Ýëåìåíòàìè ìîãóò áûòü íå òîëüêî ïðîñòûå òåãè, íàïðèìåð çàãîëîâîê èëè àáçàö , íî è áîëåå ñëîæíûå òåãè, íàïðèìåð ññûëêà èëè òàáëèöà . m Ñâîéñòâî. Èìåííî äëÿ ýëåìåíòà íàçíà÷àþòñÿ àòðèáóòû ôîðìàòèðîâàíèÿ èëè íàáîð ñâîéñòâ. Êàæäûé ýëåìåíò õàðàêòåðèçóåòñÿ ñâîèìè ñâîéñòâàìè, íàïðèìåð íà÷åðòàíèå øðèôòà (FONT-FAMILY: Arial), çíà÷åíèÿ ïîëÿ (MARGIN: 15px), îáðàìëåíèå (BORDER-RIGHT: white 1px solid), âûñîòà (HEIGHT: 1px) è äðóãèå. m Çíà÷åíèå. Êàæäîå ñâîéñòâî äîñòèãàåò îïðåäåëåííîãî çíà÷åíèÿ.  ïðèìåðàõ ñâîéñòâà ïðèâåäåíû óæå ñî çíà÷åíèÿìè (Arial; white 1px solid, 1px). m Îáúÿâëåíèå. Ñâîéñòâî è çíà÷åíèå, êîòîðîå îíî äîëæíî ïðèíÿòü, îáðàçóþò îáúÿâëåíèå. m Ïðàâèëî. Ýëåìåíò è åãî îáúÿâëåíèå îáðàçóþò ïðàâèëî. Ïðàâèëî îïðåäåëåíèÿ ñèíòàêñèñà ëèñòà ñòèëÿ èëëþñòðèðóåò ðèñ. 17.1. Ïóñòü, íàïðèìåð, íåîáõîäèìî ñäåëàòü æèðíûé ñèíèé ïîä÷åðêíóòûé òåêñò, òîãäà â êîäå äåëàåòñÿ ñëåäóþùàÿ çàïèñü: <STRONG> Ïîêëîíèòåñü Ñîëíöó | Ãðóïïèðîâàíèå ñòèëåé è ñåëåêòîðû êëàññîâ 237 Ðèñ. 17.1. Ïðàâèëî îïðåäåëåíèÿ ñèíòàêñèñà ëèñòà ñòèëÿ À åñëè ïîäîáíûé ñòèëü òðåáóåòñÿ ïðèìåíèòü íåñêîëüêî ðàç? Õîðîøî åñëè 5 ðàç, à åñëè 10–20? Âîò òóò è ïîìîãàåò ÑSS. Áëàãîäàðÿ ñëåäóþùåé çàïèñè âñå ýëåìåíòû H1 â äîêóìåíòå áóäóò êðàñíîãî öâåòà, ðàçìåðîì â 20 òî÷åê: H1 {color:red; size:20pt;} Ãðóïïèðîâàíèå ñòèëåé è ñåëåêòîðû êëàññîâ Ñóùåñòâóþò äîïîëíèòåëüíûå ìåòîäû, êîòîðûå ðàñøèðÿþò ôóíêöèîíàëüíûå âîçìîæíîñòè êàñêàäíûõ ëèñòîâ ñòèëåé. Ñòèëè ìîæíî ñãðóïïèðîâàòü, ÷òî ïîçâîëÿåò óìåíüøèòü êîëè÷åñòâî íåîáõîäèìûõ àòðèáóòîâ è àðãóìåíòîâ ïóòåì ñîçäàíèÿ ëîãè÷åñêèõ ãðóïï. Ãðóïïèðîâàíèå ëèñòîâ ñòèëåé ìîæåò ïðîèñõîäèòü ïî îäèíàêîâûì òåãàì èëè ïî àòðèáóòàì îäíîãî ñåìåéñòâà. Ïîðÿäîê ñëåäîâàíèÿ àòðèáóòîâ èãðàåò âàæíóþ ðîëü: àòðèáóòû íà÷åðòàíèÿ è òèïà øðèôòà äîëæíû íàõîäèòüñÿ ïåðåä îñòàëüíûìè àòðèáóòàìè — êåãëü äîëæåí áûòü çàäàí äî ìåæñòðî÷íîãî èíòåðâàëà, è òîëüêî ïîòîì â ñòðîêó ìîæíî äîáàâèòü äîïîëíèòåëüíóþ èíôîðìàöèþ.  ñëó÷àå ãðóïïèðîâàíèÿ àòðèáóòîâ çàïÿòûå ìåæäó íèìè íå ñòàâÿòñÿ, èñêëþ÷åíèå ñîñòàâëÿåò àòðèáóò ñåìåéñòâà øðèôòà, ïåðåä íèì ñòàâèòñÿ çàïÿòàÿ. m Ïðèìåð ãðóïïèðîâàíèÿ ïî òåãàì: q äî ãðóïïèðîâàíèÿ: H1 {font-family: arial; font-size: 14pt} H2 {font-family: arial; font-size: 14pt} H3 {font-family: arial; font-size: 14pt} q ïîñëå ãðóïïèðîâàíèÿ: H1,H2,H3 {font-family: arial font-size: 14pt} m Ïðèìåð ãðóïïèðîâàíèÿ ïî àòðèáóòàì îäíîãî ñåìåéñòâà: q äî ãðóïïèðîâàíèÿ: BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt} q ïîñëå ãðóïïèðîâàíèÿ: BODY {margin: 12pt 10pt 15pt} Àòðèáóòîì ýëåìåíòà â HTML, îïðåäåëÿþùèì åãî êëàññ, ÿâëÿåòñÿ àòðèáóò CLASS.  CSS ìîæíî îïèñàòü ñîáñòâåííûå ñòèëè äëÿ ðàçëè÷íûõ êëàññîâ îäíèõ è òåõ æå ýëåìåíòîâ. 238 Óðîê 17. Êàñêàäíûå ëèñòû ñòèëåé Ñåëåêòîðû êëàññîâ (class selectors) èìåþò ñèíòàêñèñ: ñåëåêòîð.êëàññ {câîéñòâà} Êëàññû ìîãóò òàêæå áûòü îïèñàíû áåç ÿâíîãî ïðèâÿçûâàíèÿ èõ ê îïðåäåëåííûì ýëåìåíòàì, ñèíòàêñèñ: .êëàññ {ñâîéñòâà} ×åòûðå âàðèàíòà èñïîëüçîâàíèÿ CSS Ñóùåñòâóåò ÷åòûðå âàðèàíòà èñïîëüçîâàíèÿ ëèñòîâ ñòèëåé â HTML-äîêóìåíòå: m âñòðàèâàíèå; m ïîäêëþ÷åíèå; m ñâÿçûâàíèå; m èìïîðò.  ñîñòàâå äîêóìåíòà ìîæíî îäíîâðåìåííî èñïîëüçîâàòü ðàçëè÷íûå òèïû ëèñòîâ ñòèëåé. Ïðè ýòîì äåéñòâóþò ïðàâèëà êàñêàäèðîâàíèÿ: âñòðàèâàåìûå ñòèëè èìåþò ïðèîðèòåò ïåðåä ïîäêëþ÷àåìûìè, ïîäêëþ÷àåìûå ñòèëè èìåþò ïðèîðèòåò ïåðåä ñâÿçûâàåìûìè, ñâÿçûâàåìûå ñòèëè èìåþò ïðèîðèòåò ïåðåä èìïîðòèðóåìûìè. Âñòðàèâàåìûå ñòèëè Âñòðàèâàåìûå ñòèëè îïðåäåëÿþòñÿ â HTML-òåãå è îêàçûâàþò âëèÿíèå òîëüêî íà ýòîò òåã. Ñîîòâåòñòâóþùèé êîä ïîêàçàí â ëèñòèíãå 17.1 (ðèñ. 17.2). Ðèñ. 17.2. Ïðèìåíåíèå ñòèëÿ ê àáçàöó Ëèñòèíã 17.1. Ïðèìåð ïðèìåíåíèÿ ñòèëÿ ê àáçàöó <TITLE>Ïðèìåð âñòðàèâàåìîãî ñòèëÿ Òåêñò ýòîãî àáçàöà áóäåò îòîáðàæàòüñÿ øðèôòîì Comic Sans MS ðàçìåðîì 17 ïóíêòîâ Ïîäêëþ÷àåìûå ñòèëè Ïîäêëþ÷àåìûå ñòèëè, êîòîðûå òàêæå íàçûâàþò âíóòðåííèìè ñòèëÿìè, ïðèìåíÿþòñÿ êî âñåé âåá-ñòðàíèöå. Äëÿ ýòîãî ñëóæèò òåã <STYLE>, ïîìåùàåìûé â çàãîëî- ×åòûðå âàðèàíòà èñïîëüçîâàíèÿ CSS 239 âîê HTML-äîêóìåíòà. Ñòèëè îïðåäåëÿþòñÿ äëÿ ðàçëè÷íûõ òèïîâ HTML-äîêóìåíòîâ. Òàê, ìîæíî çàäàòü îòîáðàæåíèå âñåõ ýëåìåíòîâ ñåðûì öâåòîì øðèôòîì Verdana ðàçìåðîì 14 ïóíêòîâ. Ñîîòâåòñòâóþùèé êîä ïðåäñòàâëåí â ëèñòèíãå 17.2 (ðèñ. 17.3). Ðèñ. 17.3. Èñïîëüçîâàíèå ïîäêëþ÷àåìûõ ñòèëåé Ëèñòèíã 17.2. Ïðèìåð èñïîëüçîâàíèÿ ïîäêëþ÷àåìûõ ñòèëåé <TITLE>Ïîäêëþ÷àåìûå ñòèëè <STYLE> Èâàí Êîìîëîâ ÍÅÇÀÁÓÄÊÀ Íåçàáóäêà, ñ âåòðîì ñïîðÿ Âñïîìíè ìàé è áåðåã ðå÷êè, È óøåë â øèðîêî ïîëå Ïðèëåòàé â çåëåíîì çâîíå, 240 Óðîê 17. Êàñêàäíûå ëèñòû ñòèëåé  ëèñòèíãå 17.3 ïðåäñòàâëåí êîä åùå îäíîé ñòðàíèöû (ðèñ. 17.4). Ñòèëü, ïðèìåíåííûé ê ïåðâîé ôðàçå, ôîðìàòèðóåò åå ñåðûì öâåòîì è êóðñèâîì. Âòîðàÿ ôðàçà íàïèñàíà ñåðûì öâåòîì è ïîä÷åðêíóòà. Òðåòüÿ ôðàçà íàïèñàíà ÷åðíûì öâåòîì è ïîä÷åðêíóòà. Ðèñ. 17.4. Ïðèìåíåíèå ñòèëåé ê àáçàöàì Ëèñòèíã 17.3. Ïðèìåð ïðèìåíåíèÿ ñòèëåé ê àáçàöàì <TITLE> Ïðèìåð CSS <STYLE> .gray {color:gray; font-style:italic} #boldunderline {text-decoration:underline; font-weight:bold} Ð. Ïðóö Ìîè ãëàçà íå óâëàæíÿþòñÿ ñëåçàìè Ïðè ìûñëè î ñêîðîòå÷íîñòè æèçíè: Âå÷íàÿ þíîñòü ñâîéñòâåííà âñÿêîìó, Êòî èùåò âå÷íîãî Åùå îäèí ïðèìåð ïðèìåíåíèÿ ñòèëåé ïîêàçàí íà ðèñ. 17.5 (ëèñòèíã 17.4). Ëèñòèíã 17.4. Åùå îäèí ïðèìåð ïðèìåíåíèÿ ñòèëåé <TITLE>Ïðèìåð êàñêàäíûõ ëèñòîâ ñòèëåé <STYLE TYPE=text/css> H1 { FONT-SIZE: 32px; COLOR: red; FONT-STYLE: italic } .blue { COLOR: blue } #bold { FONT-WEIGHT: bold ×åòûðå âàðèàíòà èñïîëüçîâàíèÿ CSS 241 } Çàãîëîâîê ôîðìàòèðîâàí êðóïíûì êðàñíûì êóðñèâîì Äàííîå ñëîâî - ñèíåå, a äðóãèå ñëîâà - æèðíûå. Ðèñ. 17.5. Åùå îäèí ïðèìåð ïðèìåíåíèÿ ñòèëåé Ñâÿçûâàåìûå ñòèëè Ñâÿçûâàåìûå, èëè âíåøíèå, ñòèëè ïðèìåíÿþòñÿ ê äîêóìåíòàì âñåãî âåá-ñàéòà. Ñîçäàéòå ñ ïîìîùüþ ëþáîãî òåêñòîâîãî ðåäàêòîðà äîêóìåíò, ñîäåðæàùèé òîëüêî îïðåäåëåíèÿ ñòèëåé, è ñîõðàíèòå åãî â ôàéëå ñ ðàñøèðåíèåì .css. Ñîçäàííûå òàêèì îáðàçîì ñïèñêè ìîæíî ïðèìåíèòü ê ëþáîé âåá-ñòðàíèöå. ×òîáû ññûëêà ðàáîòàëà, íåîáõîäèìî äîáàâèòü ññûëêó íà ñîçäàííûé ôàéë ñòèëåé â ðàçäåë çàãîëîâêà HTML-äîêóìåíòà. Åñëè â ôàéë ñòèëåé áûëè âíåñåíû èçìåíåíèÿ, òî ýòè èçìåíåíèÿ îòðàçÿòñÿ â êàæäîì äîêóìåíòå, êîòîðûé ñîäåðæèò ññûëêó íà ôàéë ñòèëåé. Íà ðèñ. 17.6 ïîêàçàí ðåçóëüòàò ïðèìåíåíèÿ CSS ê òåêñòó (ëèñòèíã 17.5). Ëèñòèíã 17.5. Ïðèìåð ïðèìåíåíèÿ ñòèëåé, íàõîäÿùèõñÿ âî âíåøíåì ôàéëå <TITLE>Ïðèìåð èñïîëüçîâàíèÿ css-ôàéëîâ Èâàí Êîìîëîâ Ó êàæäîãî ñâîå Ó ãîð - îòðîãè, 242 Óðîê 17. Êàñêàäíûå ëèñòû ñòèëåé Ïîäñíåæíèêè Ïðîáóäèëèñü ïåðâûìè, Ðèñ. 17.6. Ïðèìåíåíèå ñòèëåé, íàõîäÿùèõñÿ âî âíåøíåì ôàéëå Âíåøíèé css-ôàéë style.css, îïðåäåëÿþùèé ïàðàìåòðû ôîðìàòèðîâàíèÿ ïîêàçàííîé íà ðèñ. 17.6 âåá-ñòðàíèöû, ïðåäñòàâëåí â ëèñòèíãå 17.6. Ëèñòèíã 17.6. Âíåøíèé css-ôàéë äëÿ âåá-ñòðàíèöû, ïîêàçàííîé íà ðèñ. 17.6 BODY { BACKGROUND: #FFFFFF; COLOR: #000000; } H1 { font-family: Helvetica, Arial; font-size: 24 pt; COLOR: #0000FF; } P {font-family: Garamond, Times; font-size: 14 pt; } Èìïîðòèðóåìûå ñòèëè Èìïîðò âíåøíèõ ñòèëåé íàïîìèíàåò èõ ñâÿçûâàíèå. Åäèíñòâåííîå îòëè÷èå ñîñòîèò â òîì, ÷òî èìïîðò ìîæíî ñî÷åòàòü ñ äðóãèìè ìåòîäàìè îïðåäåëåíèÿ ñòèëåé. Íà ðèñ. 17.7 ïîêàçàí ðåçóëüòàò èìïîðòà âíåøíèõ ñòèëåé (ëèñòèíã 17.7). ×åòûðå âàðèàíòà èñïîëüçîâàíèÿ CSS 243 Ðèñ. 17.7. Èìïîðò âíåøíèõ ñòèëåé Ëèñòèíã 17.7. Ïðèìåð èìïîðòà âíåøíèõ ñòèëåé <TITLE>Ïðèìåð èìïîðòà âíåøíèõ ñòèëåé <style type="text/css"> Ñîâðåìåííûå òåõíîëîãèè ôîðìàòèðîâàíèÿ Èìïîðò âíåøíèõ ñòèëåé Âíåøíèé css-ôàéë äëÿ âåá-ñòðàíèöû, ïîêàçàííîé íà ðèñ. 17.7, ïðåäñòàâëåí â ëèñòèíãå 17.8 (ýòî ôàéë Ëèñòèíã17.8.css). Ëèñòèíã 17.8. Âíåøíèé css-ôàéë äëÿ âåá-ñòðàíèöû, ïîêàçàííîé íà ðèñ. 17.7 <STYLE type="text/css"> h3 {color:crimson font-family:Arial Black} p {background:cornsilk; font-family: times}  ýòîì ïðèìåðå áðàóçåð ñíà÷àëà èìïîðòèðóåò ïðàâèëà, ñîäåðæàùèåñÿ â ôàéëå Ëèñòèíã17.8.css (âûðàæåíèå @import äîëæíî áûòü ðàñïîëîæåíî ïåðâûì), è çàòåì ôîðìèðóåò íàáîð ïðàâèë äëÿ äàííîé âåá-ñòðàíèöû. Ñëåäóåò çàìåòèòü, ÷òî äëÿ òåãà çàäàíû äâà ïðîòèâîðå÷àùèõ äðóã äðóãó ïðàâèëà. Îäíî èç íèõ ñîäåðæèòñÿ âî âíåøíåì ôàéëå, à äðóãîå âêëþ÷åíî â ñîñòàâ äîêóìåíòà.  ýòîì ñëó÷àå âêëþ÷åííîå ïðàâèëî çàìåíÿåò èìïîðòèðîâàííîå ïðàâèëî. À äëÿ òåãà äåéñòâóþò âíåøíèå ïðàâèëà, òàê êàê âíóòðåííèõ ïðàâèë íå ïðåäñòàâëåíî.
Íà ðèñ. 17.9 ïîêàçàíà åùå îäíà âåá-ñòðàíèöà, âûïîëíåííàÿ ñ ïîìîùüþ CSS (ëèñòèíã 17.10). 250 Óðîê 17. Êàñêàäíûå ëèñòû ñòèëåé Ðèñ. 17.9. Åùå îäèí ïðèìåð èñïîëüçîâàíèÿ ñòèëåé Ëèñòèíã 17.10. Ïðèìåð áîëåå ñëîæíîé ïðîãðàììû íà èñïîëüçîâàíèå ñòèëåé <TITLE>Ïðèìåð èñïîëüçîâàíèÿ ôàéëîâ ñ ðàñøèðåíèåì css <META HTTP-EQUIV=Content-Type CONTENT="text/html; CHARSET=windows-1251"> <META CONTENT="MSHTML 6.00.2600.0" NAME=GENERATOR>
|