Web – парақшасын жасау. Информатика, 10 сынып, дидактикалық материал.
Сурет карталар
Жоспар:
- <MAP> контейнері;
- <AREA> элементі;
- Артықшылықтары мен кемшіліктері.
Сурет карта (англ. image map, кейде cенсорлы карта немесе графикалық карта) – HTML белгілеу тілінің графикалық объектісі, ол суретпен байланысты және суретті басу арқылы белгілі бір URL-ға сілтеме жасалатын арнайы аймақты білдіреді. Сурет картасы бірнеше сілтемені бір суретте сақтауға мүмкіндік береді.
Веб-бетке сурет картаны қосу үшін <map> тегін қолданып, “name” атрибутына бірыңғай идентификатор көрсетіледі. Оның ішіне жұпсыз <area> тегтері қолданылып, әрқайсысы қандай да бір басылатын аймақты білдіреді. Кейін <img> тегін картамен байланыстырып, картаның атын жазатын usemap артибуты қосылады. Атрибуттың мәні # белгіден басталуы керек. <img> тегінде суреттің өлшемі анық көрсетіледі.
<MAP> контейнері
name – сурет картасының идентификаторы. Идентификатор сондай құжаттар арасында бірыңғай болады.
<AREA> элементі
shape – басылатын аймақтың формасы. Төмендегі мәндерді қабылдайды: circle (шеңбер), rect (тік төртбұрыш), poly (бес бұрыш).
alt – аймақтың балама аймағы. Сілтемеге еске салушы мәтін ретінде қолданылады.
coords – басылатын аймақтың координаттары. “0,0” мәніне сәйкес келетін, сол жақ жоғарғы бұрыштан басталатын координаттар пиксельде өлшенеді. Алғашқы сан x осі бойынша, яғни ені бойынша координат болса, екіншісін y осі, ұзындық координаты болып есептеледі. Координат тізімі аймақ формасына байланысты:
Шеңбер үшін шеңбер орайы және радиусы беріледі:
<AREA coords=«x,y,r»>
Тік төртбұрыш үшін – жоғары сол жақтың және төмен оң жақтың координаттары беріледі:
<AREA coords=«x1,y1,x2,y2»>
Бесбұрыш үшін биіктік координаттары беріледі:
<AREA coords=«x1, y1, x2, y2,…, xN, yN»>
Бұл жағдайда аймақтың бірінші және соңғы нүктесі автоматты түрде тұйықталады.
href – аймақ үшін сілтеме адресін білдіреді. Жазу ережесі <а> тегіне жазған сияқты жүзеге асырылады.
Төменде сурет карта жасайтын код жазылып, ол суретпен байланыстырылады:
<html>
<body>
<img width=«500» height=«200» usemap=«#somemap» src=«upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png» > <map name=«somemap»>
<area shape=«rect» coords=«6, 7, 140, 196» href=«kk.wikipedia.org/Тіктөртбұрыш»>
<area shape=«circle» coords=«239, 98, 92» href=«kk.wikipedia.org/Шеңбер»> <area shape=«polygon» coords=«386,16, 344,56, 350,189, 385,132, 489,190, 496,74» href=«kk.wikipedia.org/Көпбұрыш»>
</map>
</body>
</html>
Нəтижесінде браузерде мынадай веб-бет пайда болады:
Сурет 29. Сурет карта
Артықшылықтары мен кемшіліктері
Артықшылықтары:
- Карталар сілтеменің кез келген формадағы аймағын жасауға мүмкіндік береді. Сурет төртбұрыш болғандықтан, географиялық аймақ сияқты күрделі формадағы графикалық сілтемелерді сурет картасыз қолдану мүмкін емес.
- Бір файлмен жұмыс жасау ыңғайлырақ.
Кемшіліктері:
- Әрбір бөлек аймақ үшін балама және еске салушы мәтін қоюға болмайды. Балама мәтін – браузерде сурет жүктелуі өшірілген жағдайда мəтіндік ақпарат алуға қызмет етеді. Егер сурет көрсетілуін өшірсек, нәтижесінде тек бос төртбұрышты көреміз.
- Күрделі формадағы сілтеме аймағы HTML код салмағын ұлғайтады.
- Сурет карталар арқылы əртүрлі эффектілер жасай алмайды. Мысалы, шағын анимация, жылдам жүктелетін суреттердің жеке оңтайландырылуы жəне т.б.
<MARQUEE> және </MARQUEE>
<MARQUEE> және </MARQUEE> тәгтері броузер терезесінде жолдың бір шетінен екінші шетіне жылжып отыратын “сырғымалы жол” жасайды және оның мынадай параметрлері болады:
<MARQUEE [ALІGN=”alіgn”] [BEHAVІOR=”behavіor”]
[BGCOLOR= ”#rrggbb”] [DІRECTІON=”dіrectіon”]
[HEІGHT=”іnteger”] [HSPACE=”іnteger”]
[LOOP=”іnteger”] [SCROLLAMOUNT=”іnteger”]
[SCROLLDELLAY=”іnteger”] [VSPACE=”іnteger”]
[WІDTH=”іnteger”]> Кез келген мәтін
</MARQUEE>
Осылардың бірсыпыраларының мағыналары мен жазылу түрі төмендегідей болып келеді.
ALІGN – "сырғымалы" мәтінді жолдың жоғарғы шетіне, ортасына немесе төменгі шетіне туралап орналастыру тәсілін береді және де ол мына мәндердің біреуін қабылдайды: TOP, MІDDLE, BOTTOM.
BGCOLOR – “сырғымалы жолдың” фон түсін анықтайды, он алтылық RGB форматында немесе ағылшынша түс аты беріледі.
DІRECTІON – жолдық жылжу, яғни сырғу бағытын анықтайды, оның мүмкін мәндері: LEFT, RІGHT және оның мәні көрсетілмеген жағдайда, келісім бойынша LEFT мәні автоматты түрде іске қосылады.
HEІGHT – “сырғымалы жолдың” биіктігін пиксель (нүктелер) арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
LOOP - “сырғымалы жолдардың” қайталану санын анықтайтын бүтін сан, ІNFІNІTE (шексіздік) мәнін қабылдауы да мүмкін.
SCROLLAMOUNT – жылжудың бір қадамында мәтіннің қанша пиксельге жылжитынын анықтайтын бүтін сан.
SCROLLDELAY – екі сырғудың арасындағы интервалды миллисекундпен көрсететін бүтін сан.
WІDTH –экрандағы “сырғымалы жолдың” енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
Енді келесі мысалды Блокнотта теріп, 3-2 мысал.htm атымен сақтап, нәтижесін Internet Explorer программасында көріп шығу керек:
<HTML> <HEAD> <TІTLE> 3-2 мысал </TІTLE> </HEAD>
<BODY text=red>
<CENTER>
<H2> Сырғымалы жолдар </H2> <HR>
<H3> <MARQUEE BGCOLOR= ”yellow” DІRECTІON = ”RІGHT”
SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”>
Бұл бірінші сырғымалы жол
</MARQUEE>
<P> <MARQUEE BGCOLOR= ”Green” DІRECTІON = ”LEFT”
HEІGHT=30 SCROLLAMOUNT=”10” SCROLLDELAY=”100”
WІDTH=”90%”>
Бұл екінші сырғымалы жол </MARQUEE> </H3> <HR>
</CENTER>
</BODY>
</HTML>
Тапсырмалар:
1. Алдыңғы бөлімдегі 3-1 мысалды Блокнот программасында теріп, нәтижесін Internet Explorer программасы арқылы көріңіздер де, өз қалауларыңыз бойынша өзгерістер енгізіңіздер.
2. Сырғымалы жолдарға келтірілген 3-2 мысалды Блокнот программасында теріп, оны 3-2 мысал.htm деп сақтап алып, нәтижесін Internet Explorer программасы арқылы көріңіздер де, келесі өзгерістер енгізіңіздер:
а) сырғымалы жолдардың биіктігін ауыстыру;
ә) бірінші сырғымалы жолдағы мәтін түрін қызылмен, екінші жолдағы мәтін түрін – көкпен бояу;
б) абзацтан кейінгі көлденең сызықтарды әр түрлі түстерге бояу, оның қалыңдығы мен ұзындығын өз қалауларыңызша өзгерту керек.
3. Алдын ала дайындалған lab3.htm файлын (төменде келтірілген) ашып келесі өзгертулерді енгізіңіз:
а) Тақырып және бөлім аттарын ортаға қойыңыз;
ә) Бірініші абзацтың түсін қызыл, екінші абзацтың түсін – көк, үшінші абзацтың түсін жасыл етіп өзгертіңіз;
б) Әр абзацтан кейін көлденең сызықтар сызып, олардың түстерін және ендерін қалауларыңызша өзгертіңіз;
в) Мәтіннің фонын сұр түске өзгертіңіз.
4.lab3.htm файлын ашып келесі өзгертулерді енгізіңіз:
а) pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттарына және Orantang.jpg, Popugay.jpg, Monky.jpg суреттеріне гиперсілтеме жасаңыз.
ЕСКЕРТУ:lab3.htm, pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттары және Orantang.jpg, Popugay.jpg, Monky.jpg суреттері алдын ала дайындалып компьютердің ішіндегі Мои документы немесе басқа бір жұмыс бумасының ішінде орналасуы тиіс. Олардың орнына 2-1 мысал, 2-2 мысал, тағы сол сияқты дайындалған файлдарды қолдануға болады.
Алдын ала дайындалған web-құжат құрылымымен танысуға арналған lab3.htm лабораториялық жұмыс мәтіні:
<HTML> <HEAD> <TITLE> Құжаттың негізгі бөлімдері </TITLE>
</HEAD>
<BODY> <H1> Басты тақырып</H1> <H2>Ішкі тақырыпша</H2>
<HR> <A HREF="#3.1">Үшінші абзацқа көшу</A> <br>
<H3> 1.1 Бірінші абзац </H3> Осы жолдар бірнеше жолға
жазылғанымен
құжатта олар
бірге жазылады
<HR> <H3> 2.1 Екінші абзац </H3>
<P> Абзац үшін жабу тәгі қажет емес. <HR> <A Name="3.1"> </A>
<H3>3.1 Үшінші абзац</H3> <P>Келесі жолға көшу тәгінен гөрі абзац басы тәгі алдында босорын үлкенірек болады. <HR>
Көлденең сызықтан кейінгі мәтін <BR> екіге бөлінген.
<P> <H3 align=center><B>Бірнеше сызықтар салайық. </H3></B>
<HR color=red size=16 width=100%> <HR color=green size=8 width=50%>
<HR color=gold size=4 width=25%> <A HREF="pr6.htm"> pr6 мәтініне </A> ауысып, кейін оралайық. <A HREF="DOG.JPG"> Ит суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="tu2.gif"> Ту суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="cat01.jpg"> Мысық суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="dog03.jpg"> Ит суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="fish.jpg"> Балық суретіне </A> ауысып, кейін оралайық. <P> <IMG SRC="fish.jpg" WIDTH=500 HEIGIT=250 border=2 align="bottom"> <P> <H3 ALIGN=center> Енді өздеріңіз осындай суреттерге сілтеме жасаудан мысал келтіріңіздер </H3>
</BODY>
</HTML>
Әлеуметтік желілерде бөлісіңіз:
Facebook | VK | WhatsApp | Telegram | Twitter
Қарап көріңіз 👇
Пайдалы сілтемелер:
» Туған күнге 99 тілектер жинағы: өз сөзімен, қысқаша, қарапайым туған күнге тілек
» Абай Құнанбаев барлық өлеңдер жинағын жүктеу, оқу
» Дастархан батасы: дастарханға бата беру, ас қайыру
Соңғы жаңалықтар:
» 2025 жылы Ораза және Рамазан айы қай күні басталады?
» Утиль алым мөлшерлемесі өзгермейтін болды
» Жоғары оқу орындарына құжат қабылдау қашан басталады?