Êðàòêèé ó÷åáíèê HTML äëÿ íà÷èíàþùèõ. #I

Ñóááîòà, 28 Ôåâðàëÿ 2009 ã. 11:15 + â öèòàòíèê

HEAD

(HTML 1.0) – Head

Îïðåäåëÿåò íà÷àëî è êîíåö çàãîëîâêà äîêóìåíòà. ßâëÿåòñÿ êîíòåéíåðîì äëÿ ýëåìåíòîâ, ñîäåðæàùèõ òåõíè÷åñêóþ èíôîðìàöèþ î äîêóìåíòå. (TITLE,BASE,STYLE,LINK,META).

Ïðèìåð:
<HTML>
<!-- Íà÷èíàåì çàãîëîâîê... -->
<HEAD>
<TITLE>Ñïðàâî÷íèê ïî HTML</TITLE>
</HEAD>
<!-- ...çàêîí÷èëè. Äàëüøå ïîøëî òåëî äîêóìåíòà -->
<BODY>
Òåêñò äîêóìåíòà
</BODY>
</HTML>

TITLE

(HTML 2.0) – Title

Îïðåäåëÿåò èìÿ âñåãî äîêóìåíòà. Èìÿ, êàê ïðàâèëî, îòîáðàæàåòñÿ â çàãîëîâêå îêíà áðàóçåðà. Äàííûé ýëåìåíò îáÿçàòåëåí äëÿ ëþáîãî HTML-äîêóìåíòà è ìîæåò áûòü óêàçàí íå áîëåå îäíîãî ðàçà.

Ïðèìåð:
  ...

<HEAD>

<TITLE>Ðóêîâîäñòâî ïî ýêñïëóàòàöèè</TITLE>

</HEAD>

...

BASE

(HTML 3.2) – Base URL

Óêàçûâàåò áàçîâûé àäðåñ òåêóùåãî äîêóìåíòà (URL), êîòîðûé ñòàíåò îòïðàâíîé òî÷êîé äëÿ ðàñ÷åòà îòíîñèòåëüíûõ àäðåñîâ âíóòðè äîêóìåíòà. Ýëåìåíò íå èìååò êîíå÷íîãî òåãà. Îáÿçàòåëüíî ïðèñóòñòâèå õîòÿ áû îäíîãî èç àòðèáóòîâ.

Àòðèáóòû:

HREF – îïðåäåëÿåò áàçîâûé àäðåñ (URL) òåêóùåãî äîêóìåíòà.

TARGET – îïðåäåëÿåò èìÿ ôðåéìà, êîòîðîå áóäåò èñïîëüçîâàòüñÿ â ãèïåðññûëêàõ ïî óìîë÷àíèþ. Ýòî ìîæåò âàì ïðèãîäèòüñÿ, åñëè âû õîòèòå îòêðûâàòü âñå ññûëêè äîêóìåíòà â äðóãîì ôðåéìå.

Ïðèìåð:
<HEAD>

<!-- Ïóñòü áðàóçåð äóìàåò, ÷òî íàõîäèòñÿ ïî àäðåñó : -->

<BASE href="http://www.igf.ru/other/index.html">

<TITLE>Ðóêîâîäñòâî ïî ýêñïëóàòàöèè</TITLE>

</HEAD>

...

<!-- À òåïåðü ñîçäàäèì îòíîñèòåëüíóþ ññûëêó íà äîêóìåíò -->

<!-- http://www.igf.ru/list.html --><A href="../list.html">Ñïèñîê</A>...

STYLE

(HTML 3.2) – Style

Èñïîëüçóåòñÿ äëÿ âñòàâêè â äîêóìåíò òàáëèöû ñòèëåé (CSS – Cascade Style Sheet).

Àòðèáóòû:

TYPE – îáÿçàòåëüíûé àòðèáóò. Îïðåäåëÿåò MIME-òèï âñòàâëÿåìîãî áëîêà ñòèëåé. Êàê ïðàâèëî, çíà÷åíèåì ýòîãî àòðèáóòà ÿâëÿåòñÿ "text/css".

TITLE – îïðåäåëÿåò èìÿ ñîçäàâàåìîé òàáëèöû ñòèëåé. Íåîáõîäèì, åñëè âû ñîáèðàåòåñü èñïîëüçîâàòü íåñêîëüêî ýëåìåíòîâ STYLE â îäíîì äîêóìåíòå.  ýòîì ñëó÷àå áðàóçåð äîëæåí ñïðîñèòü ïîëüçîâàòåëÿ, êàêîé èç ïðåäëîæåííûõ ñòèëåé áóäåò ïðèìåíåí ê äîêóìåíòó.

Ïðèìåð:
<HEAD>

<TITLE>Ïðèìåð èñïîëüçîâàíèÿ òàáëèöû ñòèëåé</TITLE><!-- Âòûêàåì òàáëè÷êó ñòèëåé -->

 <STYLE type="text/css" title="Cool table"><!--

  A {text-decoration : none;}

  P {color : blue; font-size : 12pt; font-family : Arial;}

  H1 {color : red; font-size : 18pt;}

  --></STYLE><!-- ... çàêîí÷èëè âòûêàòü -->

</HEAD>

Ïðèìå÷àíèÿ:

Ïðàêòè÷åñêè âñå ïîïóëÿðíûå áðàóçåðû èãíîðèðóþò àòðèáóò TITLE, ïîýòîìó ìîæåòå åãî íå èñïîëüçîâàòü. À æàëü, çàäóìêà-òî áûëà íåïëîõàÿ...

LINK

(HTML 2.0) – Link

Ýëåìåíò LINK îïèñûâàåò âçàèìîñâÿçü äîêóìåíòà ñ äðóãèìè äîêóìåíòàìè íà ñàéòå, óêàçûâàÿ åãî ìåñòî â èåðàðõè÷åñêîé ñòðóêòóðå ñàéòà. Ýëåìåíò íå èìååò êîíå÷íîãî òåãà.  çàãîëîâêå ìîæåò ñîäåðæàòüñÿ íåñêîëüêî ýëåìåíòîâ LINK.

Àòðèáóòû:

HREF – îïðåäåëÿåò URL îáúåêòà.

REL – îïðåäåëÿåò òèï âçàèìîñâÿçè òåêóùåãî äîêóìåíòà ñ îáúåêòîì, îïðåäåëåííûì àòðèáóòîì HREF. Âîçìîæíûå çíà÷åíèÿ:
stylesheet – óêàçûâàåò íà ôàéë, ñîäåðæàùèé òàáëèöó ñòèëåé (CSS) äëÿ òåêóùåãî
äîêóìåíòà. Áðàóçåð çàãðóçèò css-ôàéë ñ óêàçàííîãî â àòðèáóòå HREF àäðåñà è
ïðèìåíèò åãî ê òåêóùåìó äîêóìåíòó (ñì. òàêæå ýëåìåíò STYLE)
home – óêàçûâàåò íà çàãëàâíóþ ñòðàíèöó âàøåãî ñàéòà
toc, contents – óêàçûâàþò íà ôàéë, ñîäåðæàùèé îãëàâëåíèå äàííîãî äîêóìåíòà.
index – óêàçûâàåò íà ôàéë, ñîäåðæàùèé èíôîðìàöèþ äëÿ èíäåêñíîãî ïîèñêà ïî
òåêóùåìó äîêóìåíòó.
glossary – óêàçûâàåò íà ôàéë, ñîäåðæàùèé ïåðå÷åíü òåðìèíîâ, îòíîñÿùèõñÿ ê
òåêóùåìó äîêóìåíòó.
copyright – óêàçûâàåò íà ñòðàíèöó ñàéòà, â êîòîðîé ãîâîðèòñÿ î åãî ñîçäàòåëÿõ,
àâòîðñêèõ ïðàâàõ è ò.ï.
up, parent – óêàçûâàåò íà "ðîäèòåëüñêóþ" ñòðàíèöó (äîêóìåíò, ñòîÿùèé íà
ñòóïåíüêó âûøå â èåðàðõè÷åñêîé ñòðóêòóðå âàøåãî ñàéòà).
child – óêàçûâàåò íà "äî÷åðíþþ" ñòðàíèöó (äîêóìåíò, ñòîÿùèé íà ñòóïåíüêó íèæå â
èåðàðõè÷åñêîé ñòðóêòóðå âàøåãî ñàéòà).
next – óêàçûâàåò íà ñëåäóþùóþ ñòðàíèöó â ïîñëåäîâàòåëüíîñòè äîêóìåíòîâ (íàïð.
ñëåäóþùóþ ñòðàíèöó ýëåêòðîííîãî êàòàëîãà, äîêóìåíòàöèè èëè ñëîâàðÿ).
previous – óêàçûâàåò íà ïðåäûäóùóþ ñòðàíèöó â ïîñëåäîâàòåëüíîñòè äîêóìåíòîâ.
last, end – óêàçûâàåò íà ïîñëåäíþþ ñòðàíèöó â ïîñëåäîâàòåëüíîñòè äîêóìåíòîâ.
first – óêàçûâàåò íà ïåðâóþ ñòðàíèöó â ïîñëåäîâàòåëüíîñòè äîêóìåíòîâ.
help – óêàçûâàåò íà ñòðàíèöó ñ ïîäñêàçêîé (íàïð. ïî íàâèãàöèè ïî âàøåìó ñàéòó).

TYPE – îïðåäåëÿåò MIME-òèï äëÿ îáúåêòà, óêàçàííîãî â àòðèáóòå HREF.

Ïðèìåð 1:
<HEAD>
<TITLE>Ýëåìåíò DIV</TITLE>
<LINK rel="HOME" title="HTML-ñïðàâî÷íèê" href="index.html">
<LINK rel="UP" title="Òåêñòîâûå áëîêè" href="textblocks.html">
<LINK rel="PREVIOUS" title="Ýëåìåíò P" href="p.html">
<LINK rel="NEXT" title="Ýëåìåíò ADDRESS" href="address.html">
</HEAD>

Ïðèìåð 2:

<HEAD>
<TITLE>Ïîëäíåâüå</TITLE>
<LINK rel="stylesheet" type="text/css" href="deco1.css">
</HEAD>


Ïðèìå÷àíèÿ:

Ýëåìåíò LINK, ê ñîæàëåíèþ, èñïîëüçóåòñÿ web-ìàñòåðàìè äîâîëüíî ðåäêî, ÷àùå âñåãî òîëüêî äëÿ âíåäðåíèÿ CSS èç îòäåëüíîãî ôàéëà. Ïî÷òè âñå áðàóçåðû èãíîðèðóþò èíôîðìàöèþ î ïîëîæåíèè äîêóìåíòà â ñòðóêòóðå ñàéòà – ýòà èíôîðìàöèÿ èíòåðåñíà òîëüêî èíäåêñèðóþùèì ðîáîòàì ïîèñêîâûõ ñèñòåì.

META

(HTML 2.0) – Meta

Ýëåìåíò ÌÅÒÀ èñïîëüçóåòñÿ äëÿ òåõîïèñàíèÿ äîêóìåíòà, êîòîðîå ïðåäñòàâëÿåò ñîáîé ìåòàäàííûå â âèäå ïàðû "èìÿ-çíà÷åíèå". Ñ ïîìîùüþ ýòîãî ýëåìåíòà â çàãîëîâîê äîêóìåíòà âíåäðÿåòñÿ äîïîëíèòåëüíàÿ ïîëåçíàÿ èíôîðìàöèÿ, íåâèäèìàÿ äëÿ ïîëüçîâàòåëÿ, íî ïîðîé ïðîñòî íåçàìåíèìàÿ äëÿ ïðàâèëüíîé èíäåêñàöèè âàøåé ñòðàíèöû ðîáîòàìè ïîèñêîâûõ ñåðâåðîâ. Ýëåìåíò íå èìååò êîíå÷íîãî òåãà.

Àòðèáóòû:

NAME – îïðåäåëÿåò èìÿ ìåòà-çàïèñè. Ñóùåñòâóåò ìíîæåñòâî ïðåäîïðåäåëåííûõ èìåí, íåêîòîðûå èç êîòîðûõ âû ìîæåòå óâèäåòü â óêàçàííîì íèæå ïðèìåðå.

HTTP-EQUIV – îïðåäåëÿåò èìÿ ìåòà-çàïèñè. Ïðàêòè÷åñêè àíàëîãè÷åí àòðèáóòó NAME, íî èñïîëüçóåòñÿ ëèøü â ñëó÷àå íåîáõîäèìîñòè ïåðåäà÷è äîïîëíèòåëüíîé èíôîðìàöèè â HTTP-çàãîëîâêå.

CONTENT – ïðèñâàèâàåò çíà÷åíèå ìåòà-çàïèñè, îïðåäåëåííîé â àòðèáóòå NAME (èëè HTTP-EQUIV).

Ïðèìåð:
<HEAD>
...
<META http-equiv="Expires" content="Sat, 26 Jun 1999 17:38:15 GMT">
<META name="GENERATOR" content="Greenback">
<META name="Publisher-Email" content="green@igf.ru">
<META name="Publisher-URL" content="Idea GraFix – http://www.igf.ru/">
<META name="Keywords" content="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,ãðàôèêà">
<META name="Description" content="Ðîññèéñêèé ñàéò, ïîëíîñòüþ ïîñâÿùåííûé
3D-ãðàôèêå, åå ðàçðàáîòêå è èñïîëüçîâàíèþ.">...
</HEAD>

FRAMESET

(HTML 4.0) – Frame Set

Îïðåäåëÿåò ôðåéìîâóþ (îêîííóþ) ñòðóêòóðó äîêóìåíòà: ðàçìåðû è ðàñïîëîæåíèå ôðåéìîâ íà ñòðàíèöå. Ñîçäà¸òñÿ âìåñòî òåëà äîêóìåíòà (òî åñòü ýëåìåíò BODY â äîêóìåíòå íå èñïîëüçóåòñÿ).

Îòêðûâàåò è çàêðûâàåò ñïèñîê ôðåéìîâ, îïðåäåëÿåìûõ ñ ïîìîùüþ ýëåìåíòà FRAME. Ìåæäó íà÷àëüíûì è êîíå÷íûì òåãàìè êðîìå ýëåìåíòîâ FRAME è NOFRAMES ìîãóò íàõîäèòüñÿ äðóãèå ýëåìåíòû FRAMESET. Òî åñòü ýëåìåíò FRAMESET ïîääåðæèâàåò âëîæåííûå êîíñòðóêöèè ôðåéìîâ.

Àòðèáóòû:

ROWS – îïðåäåëÿåò êîëè÷åñòâî è ðàçìåðû ãîðèçîíòàëüíûõ ôðåéìîâ (ôðåéìîâ-ñòðîê) â îêíå áðàóçåðà.  êà÷åñòâå çíà÷åíèÿ çàäàåòñÿ ñïèñîê ðàçìåðîâ ôðåéìîâ ÷åðåç çàïÿòóþ. Ñïîñîáû çàäàíèÿ ðàçìåðîâ:

â ïðîöåíòàõ îò âûñîòû ðàáî÷åé îáëàñòè îêíà áðàóçåðà. Íàïðèìåð: "30%,30%,40%";
â âèäå çíàêà "*" (çâåçäî÷êà), ãîâîðÿùåãî î òîì, ÷òî ôðåéì çàíèìàåò âñå ñâîáîäíîå ïðîñòðàíñòâî îêíà áðàóçåðà, íåçàíÿòîå äðóãèìè ôðåéìàìè ñ ÿâíî óêàçàííûìè ðàçìåðàìè. Íàïðèìåð, çâåçäî÷êà â çàïèñè "25%,25%,*" ðàâíîñèëüíà 50%;
â ïèêñåëàõ. Íàïðèìåð: "75,*";


Âñå òðè ñïîñîáà ìîæíî ñîâìåùàòü. Íàïðèìåð, "25%,40,*" ðàçîáúåò ýêðàí íà òðè ãîðèçîíòàëüíûõ ôðåéìà, ïåðâûé èç êîòîðûõ áóäåò âûñîòîé â ÷åòâåðòü îêíà áðàóçåðà, âòîðîé – â 40 ïèêñåëîâ, à òðåòèé çàéìåò âñþ îñòàâøóþñÿ ïëîùàäü.

COLS – îïðåäåëÿåò êîëè÷åñòâî è ðàçìåðû âåðòèêàëüíûõ ôðåéìîâ (ôðåéìîâ-ñòîëáöîâ) â îêíå áðàóçåðà.  êà÷åñòâå çíà÷åíèÿ çàäàåòñÿ ñïèñîê ðàçìåðîâ ôðåéìîâ ÷åðåç çàïÿòóþ. Ðàçìåðû çàäàþòñÿ òàê æå, êàê è â ïðåäûäóùåì àòðèáóòå ROWS.

BORDER – îïðåäåëÿåò øèðèíó ðàìîê ôðåéìîâ â ïèêñåëàõ. Äàííûé àòðèáóò äåéñòâóåò òîëüêî â áðàóçåðàõ Netscape;

FRAMEBORDER – îïðåäåëÿåò íàëè÷èå ðàìîê ó ñîäåðæàùèõñÿ âíóòðè FRAMESET ôðåéìîâ. Âîçìîæíûå çíà÷åíèÿ:

Yes – îòîáðàæàòü ðàìêè;
No èëè 0 – íå îòîáðàæàòü ðàìêè;


Áðàóçåðû Netscape íå ïîääåðæèâàþò äàííûé àòðèáóò â ïîëíîé ìåðå è äëÿ ãëîáàëüíîãî îïðåäåëåíèÿ øèðèíû ðàìîê èñïîëüçóþò àòðèáóò BORDER.

FRAMESPACING – îïðåäåëÿåò ðàññòîÿíèå (òàê íàçûâàåìóþ "ñåðóþ îáëàñòü") ìåæäó ôðåéìàìè â ïèêñåëàõ. Äàííûé àòðèáóò íåîáõîäèì äëÿ ñîçäàíèÿ ôðåéìîâ áåç ðàìîê.

Ïðèìå÷àíèå:

Îáðàòèòå âíèìàíèå íà òî, ÷òî FRAMESET-ñòðóêòóðà ñîçäà¸òñÿ âìåñòî ýëåìåíòà BODY. FRAMESET-ñòðóêòóðà, ðàñïîëîæåííàÿ â çàãîëîâêå (âíóòðè ýëåìåíòà HEAD) ñ÷èòàåòñÿ îøèáêîé.

FRAME

(HTML 4.0) – Frame

Îïðåäåëÿåò ôðåéì è åãî ñâîéñòâà âíóòðè FRAMESET-ñòðóêòóðû. (ñì. ýëåìåíò FRAMESET)

Àòðèáóòû:

SRC – îáÿçàòåëüíûé àòðèáóò. Óêàçûâàåò àäðåñ (URL) HTML-ôàéëà, îòîáðàæàåìîãî â äàííîì ôðåéìå.

NAME – îïðåäåëÿåò èìÿ äàííîãî ôðåéìà, êîòîðîå áóäåò â äàëüíåéøåì èñïîëüçîâàòüñÿ äëÿ ññûëêè íà íåãî èç äðóãèõ äîêóìåíòîâ ñ ïîìîùüþ àòðèáóòà TARGET (ñì. ýëåìåíò A).  êà÷åñòâå çíà÷åíèÿ íóæíî óêàçàòü ëþáîå èìÿ áåç ïðîáåëîâ ñ èñïîëüçîâàíèåì ëàòèíñêèõ ñèìâîëîâ è öèôð. Èìÿ íå äîëæíî íà÷èíàòüñÿ ñ öèôð è ñïåöèàëüíûõ ñèìâîëîâ.

MARGINWIDTH – îïðåäåëÿåò øèðèíó (â ïèêñåëàõ) ëåâîãî è ïðàâîãî ïîëåé ôðåéìà. Åñëè àòðèáóò íå óêàçàí, áðàóçåð ñàìîñòîÿòåëüíî îïðåäåëèò îïòèìàëüíûé ðàçìåð îòñòóïà.

MARGINHEIGHT – îïðåäåëÿåò øèðèíó (â ïèêñåëàõ) âåðõíåãî è íèæíåãî ïîëåé ôðåéìà. Åñëè àòðèáóò íå óêàçàí, áðàóçåð ñàìîñòîÿòåëüíî îïðåäåëèò îïòèìàëüíûé ðàçìåð îòñòóïà.

SCROLLING – îïðåäåëÿåò íàëè÷èå ëèíååê ïðîêðóòêè ñîäåðæèìîãî ôðåéìà. Âîçìîæíûå çíà÷åíèÿ:

yes – îòîáðàæàòü ëèíåéêè ïðîêðóòêè.
no – íå îòîáðàæàòü ëèíåéêè ïðîêðóòêè.
auto – îòîáðàæàòü ëèíåéêè ïðîêðóòêè ïðè íåîáõîäèìîñòè (åñëè äîêóìåíò, óêàçàííûé â àòðèáóòå SRC, íå óìåùàåòñÿ âî ôðåéìå).


NORESIZE – íå ïîçâîëÿåò èçìåíÿòü ðàçìåðû ôðåéìà. Äàííûé àòðèáóò ÿâëÿåòñÿ ôëàãîì è íå òðåáóåò óêàçàíèÿ çíà÷åíèÿ.

FRAMEBORDER – îïðåäåëÿåò íàëè÷èå ðàìîê ó ôðåéìà. Âîçìîæíûå çíà÷åíèÿ:

yes – îòîáðàæàòü ðàìêè;
no èëè 0 – íå îòîáðàæàòü ðàìêè;


Áðàóçåðû Netscape íå ïîääåðæèâàþò äàííûé àòðèáóò â ïîëíîé ìåðå è äëÿ ãëîáàëüíîãî îïðåäåëåíèÿ øèðèíû ðàìîê èñïîëüçóþò àòðèáóò BORDER ýëåìåíòà FRAMESET.

Ïðèìåð (ôàéë index.html):
 ...
 <FRAMESET frameborder="0" framespacing="0" border="0" cols="265,*">
 <FRAME src="frame1.html" name="page">
 <FRAMESET rows="165,*">
 <FRAME src="frame2.html" name="menu1" marginwidth="0">
 <FRAME src="frame3.html" name="menu2" marginwidth="0">
 </FRAMESET>
<NOFRAMES>Âàø áðàóçåð íå ïîääåðæèâàåò ôðåéìû</NOFRAMES>
 </FRAMESET>
<BODY>
</BODY>
...

NOFRAMES

(HTML 4.0) – No Frames

Âñå, ÷òî íàõîäèòñÿ ìåæäó íà÷àëüíûì è êîíå÷íûì òåãàìè äàííîãî ýëåìåíòà, áóäåò îòîáðàæåíî áðàóçåðîì, åñëè îí íå ïîääåðæèâàåò ôðåéìû. Ýëåìåíò NOFRAMES íå èìååò àòðèáóòîâ è äîëæåí íàõîäèòüñÿ âíóòðè ýëåìåíòà FRAMESET.

Ïðèìåð:
<FRAMESET rows="*,*">
<NOFRAMES>Âàø áðàóçåð íå ïîääåðæèâàåò ôðåéìû. Îáûäíî, äà?</NOFRAMES>
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
 </FRAMESET>

SCRIPT

(HTML 3.2) – Script

Âñòàâëÿåò ñêðèïò â äîêóìåíò. Ñàì òåêñò ñêðèïòà ëèáî ðàñïîëàãàåòñÿ ìåæäó íà÷àëüíûì è êîíå÷íûì òåãàìè, ëèáî îïðåäåëÿåòñÿ êàê URL ôàéëà, ñîäåðæàùåãî ñêðèïò, â àòðèáóòå SRC.

Àòðèáóòû:

LANGUAGE – îïðåäåëÿåò ÿçûê, íà êîòîðîì íàïèñàí ñêðèïò, íàïðèìåð, JavaScript.

SRC – îïðåäåëÿåò URL ñêðèïòà.

Ïðèìåð 1:
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js"></SCRIPT>

 öåëÿõ ñîâìåñòèìîñòè ñî ñòàðûìè áðàóçåðàìè, ñîäåðæèìîå ýëåìåíòà SCRIPT ñëåäóåò çàêëþ÷àòü ìåæäó <!-- è -->, ò.å. îôîðìëÿòü åãî êàê html-êîììåíòàðèé:

Ïðèìåð 2:
<SCRIPT LANGUAGE="JavaScript"><!--
window.location="http://www.art-russia.com";
// -->
</SCRIPT>

Ãäå ðàçìåùàòü ñêðèïò:

Ýëåìåíò SCRIPT ìîæíî ðàñïîëàãàòü ëèáî â çàãîëîâêå (âíóòðè ýëåìåíòà HEAD) ëèáî â òåëå äîêóìåíòà (âíóòðè BODY).

NOSCRIPT

(HTML 4.0) – No Script

Îïðåäåëÿåò òåêñò, êîòîðûé áóäåò îòîáðàæåí, åñëè áðàóçåð ïî êàêîé-ëèáî ïðè÷èíå íå ðàáîòàåò ñî ñêðèïòàìè.

Ïðèìåð:
<SCRIPT LANGUAGE="JavaScript"><NOSCRIPT> Ïîðà ìåíÿòü áðàóçåð... </NOSCRIPT>
  <!--
  window.location="http://www.igf.ru";
  -->
</SCRIPT>

MAP

(HTML 3.2) – Map

Ñîçäàåò íîâóþ íàâèãàöèîííóþ êàðòó. Ìåæäó íà÷àëüíûì è êîíå÷íûì òåãàìè ñîäåðæèò îäèí èëè íåñêîëüêî ýëåìåíòîâ AREA, îïðåäåëÿþùèõ íàâèãàöèîííûå îáëàñòè êàðòû.

Àòðèáóòû:

NAME – åäèíñòâåííûé è îáÿçàòåëüíûé àòðèáóò. Îïðåäåëÿåò èìÿ íàâèãàöèîííîé êàðòû, óíèêàëüíîå äëÿ äàííîãî äîêóìåíòà. Èñïîëüçóåòñÿ äëÿ âûçîâà êàðòû ñ ïîìîùüþ àòðèáóòà USEMAP ýëåìåíòà IMG. Âû ìîæåòå óêàçàòü ëþáîå èìÿ áåç ïðîáåëîâ ñ èñïîëüçîâàíèåì ëàòèíñêèõ ñèìâîëîâ è öèôð.

Ïðèìåð:
 <!-- Ñîçäàåì êàðòó Map1 : -->
<MAP name="Map1">
<!-- Çàäàåì îáëàñòè -->
<AREA href="...>
  <AREA HREF=" ...>
...
</MAP>
<!-- Êàðòà ãîòîâà. Ïðèìåíèì å¸ ê êàðòèíêå: --><IMG src="image.gif" usemap="#Map1" width="200" height="100" alt="Êàðòèíêà">

AREA

(HTML 3.2) – Map Area

Ñîçäàåò îáëàñòü êàðòû, îïðåäåëåííîé ñ ïîìîùüþ ýëåìåíòà MAP. Ýëåìåíò äîëæåí ðàñïîëàãàòüñÿ ìåæäó íà÷àëüíûì è êîíå÷íûì òåãàìè ýëåìåíòà MAP. Íå èìååò êîíå÷íîãî òåãà.

Àòðèáóòû:

SHAPE – îïðåäåëÿåò ôîðìó íàâèãàöèîííîé îáëàñòè. Âîçìîæíûå çíà÷åíèÿ:

rect – ïðÿìîóãîëüíèê;
circle – îêðóæíîñòü;
poly – ìíîãîóãîëüíèê.


 çàâèñèìîñòè îò âûáðàííîé ôîðìû ìåíÿåòñÿ ñïîñîá çàäàíèÿ åå êîîðäèíàò â àòðèáóòå COORDS.

COORDS – îïðåäåëÿåò êîîðäèíàòû íàâèãàöèîííîé îáëàñòè íà êàðòå. Èñïîëüçóåòñÿ â ïàðå ñ àòðèáóòîì SHAPE. Ñïîñîáû çàäàíèÿ êîîðäèíàò äëÿ ðàçíûõ òèïîâ îáëàñòåé:

SHAPE="rect" COORDS="ëåâûé x, âåðõíèé y, ïðàâûé x, íèæíèé y";
SHAPE="circle" COORDS="öåíòð x, öåíòð y, ðàäèóñ";
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";


HREF – îïðåäåëÿåò îáëàñòü êàê ãèïåðòåêñòîâóþ ññûëêó. Çíà÷åíèå çàäàåòñÿ â âèäå ññûëêè (URL).

TARGET – îïðåäåëÿåò îêíî (ôðåéì), íà êîòîðîå óêàçûâàåò ãèïåðòåêñòîâàÿ ññûëêà. Ýòîò àòðèáóò èñïîëüçóåòñÿ òîëüêî ñîâìåñòíî ñ àòðèáóòîì HREF.  êà÷åñòâå çíà÷åíèÿ íåîáõîäèìî çàäàòü ëèáî èìÿ îäíîãî èç ñóùåñòâóþùèõ ôðåéìîâ (ñì. ýëåìåíò FRAME) ëèáî îäíî èç çàðåçåâèðîâàííûõ èìåí, ïîäðîáíî îïèñàííûõ â àòðèáóòå TARGET ýëåìåíòà A.

NOHREF – îïðåäåëÿåò îáëàñòü êàê íåàêòèâíóþ (íåâîñïðèèì÷èâóþ ê íàæàòèþ). Äàííûé àòðèáóò ïðîòèâîïîëîæåí àòðèáóòó HREF è èñïîëüçóåòñÿ äëÿ îòìåíû äåéñòâèÿ ïîñëåäíåãî.

ALT – îïðåäåëÿåò àëüòåðíàòèâíûé òåêñò-ïîäñêàçêó äëÿ äàííîé îáëàñòè.

Ïðèìåð:

 <!-- Ñîçäàåì õèòðóþ êàðòó ñ êðóãëîé äûðêîé ïîñåðåäèíå -->
<MAP name="map1">
<AREA nohref shape="circle" coords="80,70,40">
<AREA href="guide.html" alt="Ïóòåâîäèòåëü" shape="rect" coords="0,0,167,140">
</MAP>
...
<!-- Ïðèìåíÿåì åå ê êàðòèíêå --><IMG src="/img/logo.gif" width="167" height="140" border="0" alt="Ïóòåâîäèòåëü" usemap="#map1">


Ïðèìå÷àíèÿ:

 ïîñëåäîâàòåëüíîñòè èç íåñêîëüêèõ ýëåìåíòîâ AREA íàèáîëüøèé ïðèîðèòåò èìåþò òå, êîòîðûå áûëè îïðåäåëåíû ïåðâûìè. Îíè ïåðåêðûâàþò îáëàñòè, îïðåäåëåííûå ïîçæå. Èìåííî ïîýòîìó â ïðèâåäåííîì âûøå ïðèìåðå ñíà÷àëà ñîçäàåòñÿ ïàññèâíàÿ îáëàñòü (îòâåðñòèå) è ëèøü ïîòîì – àêòèâíàÿ ñî ññûëêîé.

Ñòàðàéòåñü âñåãäà óêàçûâàòü àòðèáóò ALT. Ïîëüçîâàòåëè, ðàáîòàþùèå â òåêñòîâîì ðåæèìå (à òàêèõ íåìàëî!), ñêàæóò âàì ñïàñèáî.
 


 

Äîáàâèòü êîììåíòàðèé:
Òåêñò êîììåíòàðèÿ: ñìàéëèêè

Ïðîâåðêà îðôîãðàôèè: (íàéòè îøèáêè)

Ïðèêðåïèòü êàðòèíêó:

 Ïåðåâîäèòü URL â ññûëêó
 Ïîäïèñàòüñÿ íà êîììåíòàðèè
 Ïîäïèñàòü êàðòèíêó