Гиперсілтеме бойынша ауысу

Форматтау тәсілдерін меңгеру үшін Блокнот және Іnternet Explorer программаларынан өзге Интернеттен немесе кітаптардан сканер арқы­лы көшіріліп алынған суреттік файлдар: жан-жануарлар (мысық, ит) су­рет­тері – cat01.jpg, cat02.jpg, dog01.jpg, dog02.jpg, dog03.jpg, Қазақстан елтаңбасы (гербі) – gerbRK.gif мен туы – znamjaRK.gif бо­луы тиіс. Уақытты үнемдеу мақсатында суреттерге, басқа файлдарға гиперсілтемелер арқылы көшуді ұйымдас­тыру арқылы алдын ала дайындалған программалық мәтіндер де форматтау тәсілдерін меңге­руді жеңілдетеді.

Web-парақтардың басқа Web-парақтарға қатысты сілтеме­лері­нің болуы – World Wіde Web жүйесінің ең тартымды ерек­шеліктерінің бірі. HTML құжаттарында ги­пермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты, яғни параметрі бар <A...> және </A> тәгтері пайдаланылады. Жалпы сілтемелер жасаған кезде мынадай ережелерді есте сақтаған жөн.

1. Гиперсілтемелерді құрған кезде HREF= ”...” атрибуты міндетті түр­­де қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атынан немесе оның Интернеттегі URL-адресінен тұрады. Сілтеме мәтін <A> мен </A> тәгтерінің арасына орналасады. Сілтеме сөз броузерде бейнеленген кезде көбінесе оның асты сызылып, көк түспен бейнеленеді. Сол сілте­ме сөздің үстіне курсорды қойып тышқанды шерту көрсетіл­ген файлға немесе желі бойындағы URL-адреске көшуді қамтамасыз етеді. Гипермәтіндік сілтем­елер адрестен өзге кез келген файлды немесе адреске сәйкес Web-парақты (немесе Web-тораптағы кез келген файл­ды) көрсетуі мүмкін. Мысалы, мына жол:

<A HREF=”C:\МОИ ДОКУМЕНТЫ\CEPІK.HTM”> файл </A>

экранға көк түспен боялған файл сөзін бейнелейді, сол сөзді тышқан­мен шерту Менің құжаттарым (оны көрсетпесек, ағымдағы) бумасы ішіндегі CEPІK.HTM файлына көшу әрекетін орындайды. Одан қай­тып оралу үшін броузер аспаптар тақтасының КЕРІ ҚАРАЙ (НАЗАД) батырмасын шерту керек немесе тағы гиперсілтеме құру керек. Төмен­дегі жол:

<A HREF="dog.jpg"> ит </A>

экранға ит сөзін шығарады, оны шерту ағымдағы бумадағы сурет салынған dog.jpg файлына көшу ісін атқарады.

Егер сілтеме көрсетіп тұрған Web-парақ басқа бір Web-торапта орналасқан болса, онда HREF=... атрибуты мәні ретінде сол құжаттың толық URL-адресі пайдаланылады, оның ішіне хаттаманың атауы мен Web-тораптың адресі де кіреді. Осындай сілтемелер сыртқы сілтеме деп аталады. Мысалы, мынадай жол:

<A HREF=”http://www.mіcrosoft.com> Mіcrosoft </A>

экранға Mіcrosoft сөзін шығарып, оны шерту Интернет желісіндегі Mіcrosoft ком­паниясының web-парағының алғашқы бетіне көшуді қам­та­­масыз етеді. Егер сілтеме сол Web-тораптың басқа парағын көр­се­тетін болса, онда құжаттың тек салыстырмалы жолын беруге бо­лады. Мұндайда ішкі сілтеме құрылады. Ішкі сілтемелерді пайда­лан­ған қо­лай­лырақ, себебі Web-торапты басқа серверге ауы­стырған кез­де, жеке құжаттар адресіне өзгеріс енгізу талап етілмейді.

2. Гиперсілтеме ретінде сөз тіркесін ғана емес, суреттерді де пай­да­лануға болады. Суреттер мәтін сияқты сілтеме бола алады. Бұл үшін <ІMG...> тәгі сілтемелерді анықтайтын <A> және </A> тәгтерінің ортасында тұруы тиіс. Суреттік сілтеме көк түсті қоршаудың ішіне орналастырылады. Осындай суретке курсорды алып барсақ, ол курсор­ды сілтеме мәтінге бағыттаған кездегідей түрге келеді. Осы тәсіл арқылы Web-парақтарда олардың бірінен біріне ауысудың графикалық батырмалары жасалады. Мысалы:

<A HREF="dog.htm"><ІMG SRC="dog.gіf"></A>

жолында <ІMG SRC="dog.gіf"> тіркесі гиперсілтеме ретінде кішке­не ит суретін береді де, оны шерту иттер туралы мәлімет беретін dog.htm файлына ауыстырады (ІMGтуралы кейінірек айтылған).

3. Егер файл басы емес, оның мәтінінің ішіндегі басқа бір қажетті орынға көшу керек болса, онда сол орынға алдын ала анкер (белгі­лен­ген сөз) орнатамыз. Сонда ги­пермәтіндік сілтемелер сол парақ ішіндегі анкері бар белгілі бір орынды көрсетуі мүмкін. Анкер құруда да <A> және </A> тәгтері қолданылады, бірақ мұн­дай­да HREF= ”#....” атри­бутына қосымша NAME= ”...” атрибутын пайдалану керек. Ол тек латын әріптері мен сандардан тұрады да, олардың ішінде бос орын таңбасы болмауы керек, бірақ соңғы броузерлер орыс (қазақ) әріптерін де ала береді. Мысалы:

<A HREF="2.htm#AAA">ААА анкеріне көшу</A>

<A NAME="AAA">Көшу орындалды</A>

жолдары 2.htm файлындағы ААА сөзіне көшіреді. Ал егер көріп отырған мәтін ішіндегі басқа бір 1.1 тіркесіне көшу үшін:

<A HREF="#1.1">1.1 анкеріне көшу</A>

<A NAME="1.1"> </A>

қатарларын жазу қажет.

Ескерту. Орнатылған анкерге сілтеме жасау үшін, URL адресінен кейін # таңбасымен бөлінген анкер атауы көрсетілуі керек. Бір құжат ішіндегі анкер алдына адрес жазылмайды. Мысалы (3-1 мысал):

... <H2>3-1 мысал</H2> <HR> <A HREF="#3.1">3.1-ге көшу </A > <A Name="3.1"> </A> <br> <H3> 1.1. Бірінші абзац</H3> Егер файл басы емес, оның мәтінінің ішіндегі басқа бір қажетті орынға көшу керек болса, онда сол орынға алдын ала анкер орнатамыз. Сонда ги­пермәтіндік сілтемелер сол парақ ішіндегі анкері бар белгілі бір орынды көрсетуі мүмкін. <HR> <H3> 2.1. Екінші абзац </H3> Егер сілтеме сол Web-тораптың басқа парағын көрсететін болса, онда құжаттың тек салыстырмалы жолын беруге болады. Мұндайда ішкі сілтеме құрылады. <HR> <H3> 3.1. Үшінші абзац</H3> Мұндайда HREF= ”#....” атрибутына қосымша NAME= ”...” атрибутын пайдалану керек. Ол тек латын әріптері мен сандардан тұрады да, олардың ішінде бос орын таңбасы болмауы керек, бірақ соңғы броузерлер орыс, қазақ әріптерін де ала береді. <HR>...

3.3. HTML-құжатқа суреттер енгізу

Суреттік бейнелер Web-парақтарды әшекейлеп безендіру кезінде маңызды рөл атқарады. Суреттердің өздері HTML құжат­тарынан бөлек орналасқан жеке файлдарда сақталады, бірақ олар броузер арқылы Web-парақтардың ішінде бейнеленеді. Суреттерді бейнелеу ережелерін былай беруге болады.

1. Суреттерді құжаттардың ішіне орналастыру үшін <ІMG...> же­ке, яғни жабыл­майтын жалқы тәг қолданылады.

2. Бұл тәгте міндетті түрде SRC= “...” атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL-адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суре­ттермен бейнеленеді және ол <ІMG...> тәгі тұрған орыннан көрінеді. Мысалы, мына жол:

<ІMG SRC= "fіsh.jpg">

экранға fіsh.jpg файлындағы балық суретін шығарады.

Ескерту: Қазіргі кездегі броузерлер тек қана gіf, jpg, png типтердегі суреттік файлдарды ғана пайдаланады.

3. Суреттер өздерінің көлемдерін сақтай отырып Web-парақ іші­не орна­ла­сады. Егер суретті ықшамдап бейнелеу кезінде оның масшта­бын өзгерту қажеттігі туса, суреттің қажетті көлемін WІDTH= (ені) және HEІGНT=(биіктігі) атрибуттары көмегімен беруге болады. Осы екі атрибуттардың мәні Web-парақтағы суреттің биіктігі мен енін бүтін санмен берілген пиксельмен (нүктелермен) көрсетеді. Төмендегі жол:

<ІMG SRC="fіsh.jpg" WІDTH=500 HEІGІT=250>

суретті 500х250 нүктелерден тұратын төртбұрышқа орналас­тырады.

Сурет айналасындағы жақтау (рамка – border) сызығының қалың­ды­ғын да параметр ретінде көрсетуге болады:

Border = Пиксельдер саны

Жақтау тек әдемілік үшін ғана емес, суретті <А …> тәгінің ішінде гиперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп, оның қолданылғаны белгілі болып тұрады. Енді гиперсілтеме ретінде суретті пайдаланудан бір мысал келтірейік:

<HTML> <BODY>

<A HREF = "dog.htm"> <ІMG SRC = "dog.gіf" WІDTH = 87

HEІGHT=100 BORDER=2> </A>

</BODY> </HTML>

Бұл жолдар гиперсілтеме ретінде шағын ит суретін (ол сурет ал­дын ала болуы тиіс) шығарады, оны шерту иттер туралы мәліметке ауысуды орындайды.

Құжаттарда суреттерді бейнелегенде, оның орындала бермей­тін бірсыпыра ерекшеліктері бар екенін айта кеткен жөн.

Біріншіден, шығарылатын Web-парақ суре­ттерді көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылы да шығарыла береді.

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

4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандай да болсын себептерге байланысты броузер суретті көрсете алмаса, сол суреттің орнына сипаттама ретінде қосым­ша мәтін беріледі. Ол мәтін <ІMG...> тәгі арқылы ALT= “...” арнайы атрибутының мәнімен беріледі. Мысалы:

<html>

<BODY> <ІMG SRC="nan.gіf" alt="нан суреті"> </BODY>

</html>

Бұл жолдар сурет шықпаған жағдайда, сол сурет орнына тышқан курсорын алып барғанда, нан суреті деген сөзді бейнелейді.

<ІMG...> тәгінің атрибуттарының толық кестесін келтіре кетейік.

Сурет атрибуттары 5 кесте

Атрибут	Жазылу форматы	Атқаратын қызметі
ALT	<IMG SRC="DOG.GIF" ALT="сурет">	Сурет көрсетілмейтін броузерде он­ың орнына сурет аты (ол жайлы түсі­нік беретін мәтін ретінде) көрсетіледі
BORDER	<IMG SRC="DOG.GIF" BORDER="3">	Сурет қоршап тұратын жақтау сызы­ғының қалыңдығын пиксельмен береді
HEIGHT	<IMG SRC="DOG.GIF" HEIGHT=111>	Суреттің биіктігін пиксельмен немесе терезе биіктігінің пайызымен береді
WIDTH	<IMG SRC="DOG.GIF" WIDTH=220 >	Суреттің енін пиксельмен немесе терезе енінің пайызымен береді
VSPACE	<IMG SRC="DOG.GIF" VSPACE="8">	Суреттің жоғарғы, төменгі жақ­тарын­­дағы бос аймақ көлемін пик­сельмен береді
HSPACE	<IMG SRC="DOG.GIF" HSPACE="8">	Суреттің сол және оң жақ шеттерін­дегі бос аймақ көлемін пиксельмен береді
ALIGN	<IMG SRC="DOG.GIF" ALIGN=TOP>	Мәтінге байланысты суреттің орнала­суын көрсетеді, төмендегі мәндердің бірін қабылдайды: ТОР – жоғары (мәтін сурет­тің жоғарғы жағында), MIDDLE - ортада, BOTTON – төмен, LEFT – сол жақта (сурет жолдың сол жақ шетінде), RIGHT – оң жақта (сурет жолдың оң жақ шетінде)

Суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе төмен жылжытатын мүмкіндіктер және суретті беттің сол немесе оң жақ шетіне жылжыту Alіgn атрибуты арқылы беріледі. Оны туралау атрибуттары деп атайды, олар:

Alіgn=”bottom” – мәтін суреттің төменгі жағында;

Alіgn=”left” – сурет жолдың сол жағында;

Alіgn=”mіddle” – мәтін суреттің ортасында;

Alіgn=”rіght” – сурет жолдың оң жағында;

Alіgn=”top” – мәтін суреттің жоғарғы жағында орналасады.

Мысалы:

<ІMG SRC="fіsh.jpg" border=2 alіgn="mіddle"> 1 сурет. Бұл балық бейнесі...

Мұнда мәтін сурет ортасында орналасады.

<ІMG SRC="fіsh.jpg" border=2 alіgn="top"> Бұл балықтың суреті

Мұнда мәтін суреттің жоғарғы жағында орналасады.

<ІMG SRC="fіsh.jpg" border=2 alіgn="rіght"> 2 сурет. Бұл да балықтың суреті...

Мұнда сурет жолдың оң жағында орналасады.

3.4. Құжаттарда сырғымалы жолдарды ұйымдастыру

<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>

Бақылау сұрақтары

1. HTML құжатын форматтау дегеніміз не?

2. Физикалық стиль жасауға қажет тәгтер тізімін келтіріңіздер. Олардың атрибуттары бола ма?

3. Логикалық стильдер дегеніміз не? Кең тараған логикалық стиль тәгтерін көрсетіңіздер.

4. Жоғарғы және төменгі индекстер қандай тәгтер арқылы жазылады?

5. Гиперсілтеме түсін қалай өзгертеміз, қарастырылған, курсор көрсетіп тұрған сілтемелер түрін басқаша ету қалай орындалады?

6. Мәтін фоны ретінде суретті қалай пайдалануға болады?

7. Түрлі түстердің RGB-кодтары дегеніміз не? Сарғыш жасыл түстің RGB-кодын қалай есептеп шығаруға болады?

8. Гиперсілтеме қалай құрылады?

9. <A HREF=... > атрибуты мәні ретінде қандай сөз тіркестерін алуға болады?

10. Ішкі сілтемелер дегеніміз не?

11. Орнатылған анкерге сілтеме жасау үшін не істеу керек?

12. HTML-құжатқа сурет орналастыру үшін қандай тәг қолданылады? Оның атрибуттарын атап шығыңыздар.

13. Суреттердің көлемін қалай өзгертуге болады?

14. Пиксель ұғымын қалай түсінесіздер?

15. Сырғымалы жолдар қалай ұйымдастырылады?

16. Суреттік бейнелерді сырғытуға бола ма?

17. Сырғымалы жолдар жасау тәгінің қандай атрибуттары бар, олардың мәндері неге тең бола алады?

18. Сырғымалы жолды екі бағытқа да кезектестіре отырып жылжытуға бола ма?

19. Сырғыту жылдамдығын қалай өзгертеміз?

20. Жолды жоғары, төмен сырғытуға бола ма?

Дата добавления: 2014-12-10