Тәжірибелік жұмыс 5

Навигациялық қартаны құру.
Навигациялық картасы <map></map> тэгімен құралады. <map> тэгі  өзіне <area> тэгін енгізеді, ол карта мен сілтіме ішінде геометриялық ауданды анықтайды.

<map> <area ...> <area ...> ... <area ...> </map>

Сурет берілген -  көгілдір түзусызық (240х140 пиксел).

Навигациялық картаны құру, мұнда №1 және №2 (ұзынбұрыш) аудандары сілтіме болады. 
Геометриялық ауданы және сіз оларға басқан кезде пайдаланушы кіреді, онда оның атрибуттары көмегімен, <area> тэгі айқындалады. Бұл атрибуттар shape және coords. 
shape атрибуты – аудан формасын анықтайды түзусызықпа (shape="rect"), дөңгелекпе (shape="circle") немесе көпбұрышпа (shape="poly") соны аңықтайды.

<map> <area shape="rect"> </map>

 Сoords атрибуты – координатарды анықтайды (геометриялық фигуралар лауазымы). Олардың мәндерiнің координаттары мен тәртібі санды таңдаған түрінде байланысты.

Суреттің сол жақ үстінгі бұрышынан есеп жүргізіледі, (0;0) координатың басы деп санауға болады. Сіз түзу сызық ауданымен жұмыс жасап жатырсыз сізге үстінгі сол жақ және астыңғы оң жақ аудан бұрышы керек. coords атрибуты үшін координаты жазу тәртібі келесі: 
<area shape="rect" coords="x1,y1,x2,y2"> 
Мысалда түзу сызықтың №1 координаттары осындай: 
x1=25, y1=36, x2=114, y2=98 
Сонымен коды осы сияқты көрінеді:

<map> <area shape="rect" coords="25,36,114,98"> </map>

 

Ал енді сіздің ауданының сілтімесі қайда жазылатыны керек, сол үшін сізге таныс  href  атрибуты қажет:

<map> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

 

Суреттің бір бөлшегі сілтіме болу үшін карта атауын суретпен байланыстырып көрсету керек. 
<map>  тэгінде  name – карта атауы, атрибуты бар, karta1 – картаның атауы:

<map name="karta1"> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

 

Карта мен суретті байланыстыру үшін usemap="#карта атауы" атрибуты сурет үшін  қажет:

 

<img src="bluerects.gif" usemap="#karta1"> мәтін мәтін мәтін мәтін мәтін мәтін <map name="karta1"> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

<area> ды түзу бұрыш үшін  №2 (x1=153, y1=11, x2=219, y2=127) жазыңыз.

Дөңгелек аудан құру үшін (x және y)  оралық координаты  және пикселде белгенген (R)  радиус ұзындығы қажет. Яғни жазылу тәртібі келесі түрде жазылған: 
<area shape="circle" coords="x,y,R"> 

Аудан түрін көрсетіңіз:

<map> <area shape="circle"> </map>

№1геометриялық аудан мен жұмыс жасаңыз. Берілген жағдайда кішкентай дөңгелек үшін координаттар, осындай болады: x=46, y=48; ал радиус ұзындығы - R=35. Жазып аламыз:

<map> <area shape="circle" coords="46,48,35"> </map>

 

Карта атауын жазыңыз, сілтемесін белгілеп, суретке бекітіңіз:

<img src="mapcircle.gif" usemap="#karta2"> мәтін мәтін мәтін мәтін мәтін мәтін <map name="karta2"> <area href="drugoy_document2.html" shape="circle" coords="46,48,35"> </map>

 

Карта әрбір аймақ үшін Alt атрибутын тағайындалуы мүмкін, сіз қазіргі уақытта тек бір аймағы бар, бірақ әлі күнге дейін, оны alt үшін жазасыз:

<img src="mapcircle.gif" usemap="#karta2"> мәтін мәтін мәтін мәтін мәтін мәтін <map name="karta2"> <area href="drugoy_document2.html" shape="circle" coords="46,48,35" alt="кішкентай дөңгелек"> </map>

 

Нәтижесін қарандар (бірінші дөңгелекті басыңыз): 

екінші дөңгелекке айдар жасаңыз (x=158, y=75, R=53)

Олар желілері арқылы қосылған болса-ақ, нүктені (бұрыштардың координаттары) көрсетіңіз, және сосылайша әр түрлі суретті алуға болады. poly, қолдана отырып, әртүрлі аймаққа кішіпейіл үшбұрышан бастап, әдемі жұлдыз да жасауға болады.

№2 фигурасымен жұмыс істеңіз, өйткені оның бұрыштары аз. Бастау үшін, аудан түрін орнатыңыз:

 

<map> <area shape="poly"> </map>

 

Координаттар келесі қағыда бойынша жағылады: 
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Оның шифры былай ашылады: "бірінші бұрыш координаты (x1,y1), екінші бұрыш координаты (x2,y2), және де көп бұрыштар мен олардың координаттары (...), соңғы бұрыштың координаты (xN,yN)". Яғни берілген бесбұрыш үшін толықтай жазылу былай көрінеді: 
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"> 

Кодтарға нақты  мәндерді үйлестіріп, алмастырыңыз:

<map> <area shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> </map>

Айдарды жазыңыз, карта атауы, және картаны суретке байлау

<img src="mappoly.gif" usemap="#karta3"> мәтін мәтін мәтін мәтін мәтін мәтін мәтін <map name="karta3"> <area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> </map>

 

Нәтижені тексеріңіз!

Өздігінше бірінші ауданды жазыңыз (алты бұрыш) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58. 

Өздігінше бірінші ауданды жазыңыз (алты бұрыш) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58. 

Бір уақытта әр түрлі аудандарын қолдануға болады, мысалға дөңгелек және көп бұрыш:

<img src="mappoly.gif" usemap="#karta3"> мәтін мәтін мәтін мәтін мәтін мәтін мәтін <map name="karta3"> <area href="drugoy_document3.html" shape="circle" coords="46,48,35,"> <area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> </map>

 

Егер usemap=#KARTA суретіне жазсаңыз, ал картаның атауы (name) болады,  karta – мүмкін қателер, яғни, karta және KARTA – әртүрлі атаулар. Тіркелу әрқашан ескертіледі.
Бір құжаттың ішінде сілтеме жасауңыз – бетті сақтау. Оны екі жолмен жасауға болады.

Бірінші тәсіл -  name атрибут көмегімен (бетті сақтау атауы) A тэгі:

<H2>Григорий Остер, "Зиянды кеңес.<BR> Тіл алмайтын балаларға және олардың ата анасына арналған кітап".</H2> <A href="#stih1">Бірінші өлеңге айдар</A><BR> <A href="#stih2"> Екінші өлеңге айдар </A><BR> <A href="#stih3"> Үшінші өлеңге айдар A><BR><BR> <PRE> Жақында, ғалымдар әлемде тіл алмайтын балалар бар екенін және олар барлығын керсінше дұрыс жасайтының  анықтады. Оларға пайдалы кеңес береді: " Таңертең жуыңыз " – олар барып жуынады. Оларға: "Бір бірімен амандасындар" – олар сол уақытта амандасады. Ғалымдар бұндай балаларға пайдалы және зиянды кеңес беруге қажеті жоқ екенін анықтады. Олар бәрін керсінше істеседе, барлығы дұрыс болып шығады.    </PRE> <H3><A name="stih1">Өлең бірінші</A></H3> <PRE> ... тра-ля-ля 1... </PRE> <H3><A name="stih2">Өлең екінші</A></H3> <PRE> ... тра-ля-ля 2... </PRE> <H3><A name="stih3">Өлең үшінші</A></H3> <PRE> ... тра-ля-ля 3... </PRE>

A – name тэг атрибутын қолданып, тақырыптарды (өлең бірінші, өлең екінші, өлең үшінші) бетті сақтау жасап алыңыз: 
<A name="stih3"> Үшінші өлең</A> 
оларға айдар жасаңыз: 
<A href="#stih3"> Үшінші өлеңге айдар </A> 
Есте сақтаңыз - <A href="#stih3"> - тор символы (#) сілтеме оған бетбелгі атауы міндетті болып табылады. Бетбелгі, және басқа да құжаттар байланыстыруға болады, содан кейін сілтеме осы сияқты көрінеді: 
<A href="ancorpri.html#stih3"> Үшінші өлеңге айдар  басқа бір құжаттан </A> 
немесе
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Үшінші өлеңге айдар (сайт атауы, құжат атауы+ бет атауы)
Екінші тәсіл - id атты атрибут бар, ол құжаттың ішінде тэгінің (элемент) бірегей атын тағайындайды (Base, Head, Html, Meta, Script, Style, Title тэгтерінен басқа). id сұраңыз, мысалы, H3 тэгі (тақырыптарға).

<H2>Григорий Остер, "Зиянды кеңестер.<BR> Тіл алмайтын балаларға және олардың ата анасына арналған кітап ".</H2> <A href="#stih1"> Бірінші өлеңге айдар </A><BR> <A href="#stih2"> Екінші өлеңге айдар </A><BR> <A href="#stih3"> Үшінші өлеңге айдар </A><BR><BR> <PRE> Жақында, ғалымдар әлемде тіл алмайтын балалар бар екенін және олар барлығын керсінше дұрыс жасайтының  анықтады. Оларға пайдалы кеңес береді: " Таңертең жуыңыз " – олар барып жуынады. Оларға: "Бір бірімен амандасындар" – олар сол уақытта амандасады. Ғалымдар бұндай балаларға пайдалы және зиянды кеңес беруге қажеті жоқ екенін анықтады. Олар бәрін керсінше істеседе, барлығы дұрыс болып шығады.  </PRE> <H3 id="stih1">Стих первый</H3> <PRE> ... тра-ля-ля 1... </PRE> <H3 id="stih2">Стих второй</H3> <PRE> ... тра-ля-ля 2... </PRE> <H3 id="stih3">Стих третий</H3> <PRE> ... тра-ля-ля 3... </PRE>