Электрондық оқулық құру

Егер өз атыңызды  жазатын болсақ: <INPUT NAME = Name Size=35> болады. Сонымен қатар басқада атрибуттар қолдануға болады. Бірінші атрибут MAXLENCTH деп аталады, ол ағымдағы өріске пайдаланушы енгізген символдар санымен  шектеуді айтады. Екінші атрибут Size деп аталады, ағымдағы өрістер орынын алатын, экран облысында көрінетін өлшемді анықтайды. Мағынасы броузер типі бойынша анықтау. Егер  MAXLENCTH мағынасы көп болса, Size- ға  қарағанда, онда броузер берілгендерді терезеде айналдырып жүреді. Соңғы қосымша атрибут Value атрибуты болып табылады, енгізілген өрістің бастапқы мағынасын қамтамасыз ету.

 

TYPE=checkbox атрибуты

HTML формасында тәуелсіз жалауларды құру үшін <INPUT>  тегі TYPE=checkbox атрибутымен бірге қолданылады. Форма <INPUT>    тегін

Сheckbox атрибутымен бірге қолданған кезде онда NAME, Value атрибутында қатысу керек. NAME атрибуты енгізілген өрістің атын көрсетеді. Value атрибуты өрістің мағынасынан тұрады.

  <BR>Қазақстан<INPUT NAME =”Мемелекет”TYPE=checkbox>

  VALUE=”Қазақстан”

   Тәуелсіз Мемлекет<INPUT NAME=”Мемелекет” TYPE=checkbox

        VALUE=”ТМ”>

 

 

 

TYPE=radio атрибуты

Кейбір жағдайларда  мүмкін болатын бірнеше мағыналардың біреуін таңдау керек болады. Мүмкін болатын бірнеше мағыналардың біреуін  пайдаланушы таңдау кездегі кіріс  формасын құру үшін міндетті түрде <INPUT>  тегін TYPE=radio атрибутымен бірге қолдану керек. Формада атрибут іске қосылып жатқанда <INPUT>  тегінде NAME және Value атрибуттары көрсетілуі керек. NAME атрибуты өріс(батырма) атын, ал Value атрибуты өріс мағынасын көрсетеді.

       <BR>Пол ербала<INPUT NAME =”пол”TYPE= radio >

       VALUE=”Ербала”

         Пол қыз <INPUT NAME=”қыз” TYPE= radio VALUE=”қыз”>

 

TYPE=image атрибуты

Формамен жұмыс істеуді  аяқтау үшін пайдаланушы тышқан батырмасымен көрініске апарып шертуге тура келетін жағдайлар болады. Бұл үшін программисттер <INPUT>  тегін TYPE= image  атрибутын қолданады. Пайдаланушы тышқан батырмасымен көрініске апарып шерткенде браузер экран нүктеге сәйкес келетін координаттарды сақтайды. Сосын ол формаға енгізілген ақпаратты «өңдейді». Форма image атрибутын қолданған кезде, <INPUT>  тегінің құрамында NAME және SRC атрибуттары болуы керек. NAME атрибуты формаға енгізілген өріс атын,  SRC атрибуттары құрамында көріністің басталуы URL файлын көрсетеді. Бұл атрибут кеңеймесі <IMG> немесе т.б. болады.

<BR> <INPUT TYPE = image NAME = point SRC =image.gif>

 

<TEXTAREA> тегі -  бірнеше облыстағы тексті шығару

Формадағы типке тәуелді  болатын  текст сапасын шығару үлкен қоғамдық орынға ие. Мұнда  кезде <TEXTAREA> тегі үшін бірнеше қатардағы текст өрісін құруды пайдаланады. Бұл жерде үш атрибутты пайдаланады: COLS, NAME және ROWS.

COLS атрибуты

Мазмұны бойынша тексте сандардың колонкасын көрсетеді.

NAME атрибуты

өріс бойынша атауын анықтайды.

ROWS атрибуты

Текст бойынша сапа түрлерін көрсету.

 

<SELECT> тегі  – форманы тізім түрінде қолдану

HTML-де форма құру қиын болғанда, ағымдық және арнайы мәзірлер тізімі қосылады. Бұл үшін SELECT тегінде TYPE = select атрибутын қолданады. Тізімді анықтау үшін <OPTION> тегін қолданады. <SELECT> тегі  үш атрибут арқылы болады: MULTIPLE, NAME және SIZE

MULTIPLE  атрибуты

Бір атау таңдауды ұсынады.

NAME атрибуты

Объект атауын анықтайды.

SIZE атрибуты

Пайдаланушының тізім  бойынша сандарын анықтайды. Егер формаға SIZE=1 атрибуты белгіленсе, онда браузер тізім бойынша ағымдық мәзірдің түрлерін экранға шығарады. Ал кездейсоқ SIZE>1 болса браузер онда қарапайым тізім ұсынады. Формада <OPTION> тег мүмкіндігімен, ішкі  <SELECT> тегін пайдаланады. Бұл тегтер екі қосымша атрибуттарды қолдайды: SELECTED және VALUE.

SELECTED атрибуты

Бастапқы таңдалған  элементтік белгіні пайдаланады.

VALUE атрибуты

Пайдаланушы  таңдап алынған  пунктегі мәліметті  белгілейді. <OPTION> тегі өрістегі белгіге тең болады.

 

 

 

Сурет 17 -  Таңдау пункті

 

 

5. HTML құжатта графикалық кескінмен жұмыс

 

 

HTML-да мәтiн форматтаудан Web-дизайнға өтудiң алғашқы қадамы Web-бетке сурет орналастырудан басталады. Суреттер web-беттi тек безендiрiп ғана қоймай, пайдаланушыға ақпаратты түсiнiктi берiлуiне, беттегi ақпаратты логикалық тiзбектерiн құруға т.с.с. web-беттiң негiзгi сипаттамаларына әсер етедi[13].

HTML құжатға сурет енгiзу  үшiн <IMG> тегі қолданылады. Оның src атрибутына URL нұсқауын беру арқылы кез-келген графикалық кескiндi құжатқа кiрiстiруге болады. HTML құжатқа суреттер кiрiстiру <BODY> бөлiмiнде орындалады. Мысалы,

<HTML>

<HEAD>

<TITLE> Cурет кiрiстiру </TITLE>

</HEAD>

<BODY>

<IMG src="NEW9.gif">

</BODY>

</HTML>

 

 

 

Сурет 18 - Броузер бетіне сурет орнату

 

 

<IMG> тегінің атрибуттары броузердiң суреттермен жұмыс iстеуiн басқаруға мүмкiндiк бередi.

• src=”x” – суреттiң тұрған орны (оның абсолют не салыстырмалы URL-адресi);
• width=”х” – броузерге сурет енiн алдын-ала тағайындауға мүмкiндiк бередi;
• height=”х” – броузерге сурет биiктiгiн алдын-ала тағайындауға мүмкiндiк бередi;
• border=”x” – сурет рамкасының енiн анықтайды;
• align=”x” – суреттiң бетте көлденең және тiк орналасуы түрлерiн анықтайды;
• alt=”x” – суреттiң орнына оның сипаттамасын шығаруға мѕмкiндiк бередi. Сонымен қатар тышқан көрсеткiшi сурет үстiне орналасқан кезде, ол жайлы қысқаша мәлiмет шығарады;
• hspace=”x” – суреттiң оң және сол жағынан бос орындар қалдыру.
• vspace=”x” – суреттiң жоғарғы және төменгi жағынан бос орындар қалдыру.

HTML құжатта графикалық кескiндермен жұмыс iстеуде <IMG> тегінің width және height атрибуттарын мiндеттi түрде қолдану керек. Себебi броузер суреттiң енiн, биiктiгiн өзi анықтай алмайды, оны созып не қысып жiберуi мүмкiн. Бұл суреттi броузерге пайдаланушының қалауы бойынша шығаруына кедергi келтiредi. width және height атрибуттарының жазылу үлгiсi[10]:

<IMG src=" NEW9.gif" width="150" height="150">

 

<Border> атрибуты cурет шетiндегi рамканың енiн анықтайды. Егер бұл атрибуттың мәнi 0-ге тең болса, онда сурет шетiнде рамка болмайды.

<IMG src=" NEW9.gif" width="130" height="150"border=”4”>

 

Суреттiң web-бетте орналасуын align атрибуты анықтайды. Бұл атрибут суреттiң броузерде көлденеңнен орналасуын анықтайтын мәндерiне ие болуы мүмкiн.

<IMG src=" NEW9.gif" width="130" height="150"border=”4” align=”right”>

Бұл графикалық кескінді келесі суреттен көре аламыз:

 

 

Сурет 19 - Өлшемі берілген графикалық кескін

 

 

IMG тегі alt атрибут көмегiмен суретке сипаттама беруге болады.

 

<IMG src=" NEW9.gif" width="130" height="150" border=”15” alt=”Жаңа батырма қосу”>

 

 

Сурет 20 - Тышқан көрсеткiшi сурет үстiне орналасқан

кезде суреттiң сипаттамасы

 

 

hspace және vspace атрибуттарын пайдалану арқылы графикалық кескiннiң айналасына мәтiннiң орналасу түрiн анықтауға болады. Мысалы,

<BODY>

<P> <B>Пайдаланылатын  әдебиеттер тізімі</B></P>

<IMG src=" NEW9.gif" width="70" height="95" border=”2” alt="Пайдаланылған әдебиеттер тізімі " align="right" hspace="70">

<P> <OL>

<LI>Пинтер Лес, Пинтер  Джон. Visual FoxPro : Уроки  программирования. М.: ТОО Эдель, 1996

<LI>С.Каратягин, А.Тихонов,  Л.Тихонова . Visual FoxPro 6 . Москва:    ЗАО «Издательство Бином», 1999-773 с.

<LI>М.Хольцшлаг. HTML 4.0.-М.:2003,869 с.

<LI>А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.

<LI>Я.Нильсен. Web-дизайн. Спб. 2002, 187 с.

<LI>Пинтер Лес, Пинтер  Джон. Visual FoxPro : Уроки  программирования. М.: ТОО Эдель, 1996

<LI>С.Каратягин, А.Тихонов,  Л.Тихонова . Visual FoxPro 6 . Москва:    ЗАО «Издательство Бином», 1999-773 с.

<LI>М.Хольцшлаг. HTML 4.0.-М.:2003,869 с.

<LI>А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.

<LI>Я.Нильсен. Web-дизайн. Спб. 2002, 187 с.

</OL> </P>

</BODY>

 

 

Сурет 21 - <IMG> тегінің hspace атрибутының көмегiмен графикалық кескiн мен мәтiннiң бетте орналасуы

 

 

 HTML құжатта графикалық кескiндi немесе мәтiндi жылжымалы түрде ұйымдастыру мүмкiн. Бұл жағдайда суреттiң немесе мәтiннiң өлшемiне қатысты броузердегi мәтiн немесе сурет жылжымалы болады.

 

6. Web бетте анимациялық кескiндердi бейнелеу технологиясы

 

 

Интернет броузерi кез  келген информация орналаса беретiн универсал орта. Сондықтан онда мәтiндiк, графикалық ақпараттармен қатар, мультимедиалық ақпараттарды да кiрiстiруге болады. Мультимедиалық ақпарат көбiне дыбыстық және анимациялық құбылыстар түрiнде бейнеленедi[14].

HTML құжатқа дыбыс және анимация құбылыстарын шығару үшiн оларды ойнататын бағдарламалық модульдiң компьютерге алдын-ала орнатылып қойылуы тиiс. Мұндай модульдерге MS MediaPlayer, AppleQuickTime, RealPlayer G2 т.с.с. бағдарламалық өнімдер жатады.

HTML құжат  келесi типтегi мультимедиалық ақпаратты бейнелей алады:

.avi – Audio/Video Interface (дыбыс/бейне интерфейсi). Windows жүйесiнде дыбыспен және бейнеклиптермен жұмыс iстеудi қамтамасыз ету үшiн қолданылады. Бұл форматтағы файлдар өте шағын болып келедi және желi бойынша ұзақ жүктелмейдi. Сондықтан пайдаланушылар көп жағдайда .avi форматтағы файлдарды қолданады;

.mp3 – бұл формат негiзiнен дыбыстық және бейне файлдарды сығымдау үшiн қолданылады. Файлдарды кодек әдiсiмен (сығымдау және қайта қалпына келтiру әдiстерi) сығымдағанда олардың көлемi өте шағын болғанмен, сапасы жоғары кейiнде қалатындықтан Internet желiсiн бұл формат пайдаланушылар арасында кеңiнен танымал;

.mpeg – стандартталған бейнеформат. Сонымен қатар ол өте тиiмдi және оның сығымдалу техникасы жоғары деңгейде, т.с.с.

 Дыбыс және бейне файлдардың web-бетте орналасуы екi түрлi тісiлмен жүзеге асырылады: <A> тегі немесе <EMBED> тегін қолдану.

 Бұл екi тәсiлдiң екеуi де мультимедиалық файлды iске қосу үшiн сыртқы модуль - бағдарламаны қолданады. Олардың бiр-бiрiнен айырмашылығы бiрiншi тәсiл бойынша сыртқы модуль - бағдарлама бейнклиптi броузерден тыс орындайды да, екiншi тәсiл бойынша бейнефильм пайдаланушы броузерiнiң iшiнде орындалады.

Бейнефильмдi бiрiншi тәсiлдi пайдаланып ойнату үлгiсi:

<A href=Суреттер/speedis.avi> Бейнефильм </A>

EMBED тегі болғанға дейiн бiзге кездескен жоқ. Сондықтан бұл тегке тоқталайық. Тегтердің бiрнеше атрибуттары бар:

height=”pixel/percent”. Бейнеклиптiң орындалатын аумағының биiктiгi;

width=”pixel/percent”. Бейнеклиптiң орындалатын аумағының енi;

autoplay=”true/false”. Егер атрибут мәнi true болса, бейнеклип web-бет iске қосылған мезетте бiрден орындала бастайды, ал мән false болса, бейнеклиптi орындауға жiберу үшiн модуль - бағдарламаны басқару панелiндегi iске қосу түймесiне шерту керек;

controller=”true/false”. Пайдаланушыға броузерге басқару элементтерiн кiрiстiруге мүмкiндiк бередi;

loop=”true/false”. Егер пайдаланушыға бейнеклиптiң циклдiк түрде айналып орындала беруi қажет болса, атрибутке true мәнiн меншiктеу керек. Басқа жағдайда клип бiр рет ғана орындалады.

 

Бейнефильмдi ойнатуда EMBED тегін айдалану:

 

<EMBED src= cool.avi width=”100” height=”80” controller=false autoplay=true playeveryframe=false" loop=true>

 

Web-дизайында көбiне қысқаша анимациялық файлдар қолданылады. Мұндай анимациялық файлдарды жасаудың Flash, GIF-анимация т.с.с. көптеген инструменталды программалары бар[10,11]

 

3.7 Visual FoxPro ортасында <span class="dash0422_0435_043a_0441_0442__Char" style=" font-family: 'T