Ені бойынша мәтін
Ф.4-51
Қазақстан Республикасы Білім және ғылым министрлігі
Баишев Университеті
Косов Д.А.
Өсімдік және жануарлар әлемінің биологиялық алуан түрлілігі электронды оқулық құру
ДИПЛОМДЫҚ ЖҰМЫС
6В06121 - Ақпараттық жүйелер білім беру бағдарламасы
Ақтөбе 2019
Кіріспе
Ақпараттық технологияны ендіру білімнің жаңа республикалық жүйесінің әр түрлі облыстағы масштабты мінездемесін қабылдайды. Бүгінгі күні ақпараттық технология кең көлемде оқыту жүйесін ұйымдастыру қызметінде барлық республикалық жоғарғы оқу орындарында (ЖОО - да) қолданылады. Студенттердің компьютерлік және интернет кластарындағы жұмысы информатиканы оқыту барысында, сонымен бірге басқа пәндерден, оқу дәрістерін деканатта жоспарлау, компьютер көмегімен немесе электронды компьютерлік тестілеу білімі жер-жердегі студенттер мен талапкерлер үшін жасалған.
ЖОО-дағы ақпараттандырылған жоғарғы білімдер ақпараттық ресурстың қомақты санының жинақталуы, тек қана қажетті жұмыс пен нақты оқу орындарына ғана емес, сонымен бірге барлық білім жүйесіне пайдалы. Электронды оқыту жүйесі, көмекші құралдар, компьютерлік тапсырмалар, лабораториялық жұмыстар, программалық шаралар бұларды оқытушылар өздері құрады және пайдаланады. Электрондық форма ғылыми практика мен әдістемелік жетілдіруде қолданылады. Әрі қарай даму оқыту қызметінің жаңа форма алуы көптеген жаңа ақпаратты технологияға негізделген, соның ішінде бірінші кезекке қашықтықтан оқыту білімі жатады.
Компьютерлік ендіруде және телекомуникациялық технологияда маңызды біріктіру республикалық білім жүйесінің байланыс таратуы соңғы төрт жылда Қазақстан Республикасының (ҚР - ның) ЖОО - дағы студенттер контингентінің жаңа моделі болды. Тестілеу және басқа да білім деңгейін тексеру әдістері әдет пен дағды негізінде ақпараттық процестер комплексін автоматтандыруда, яғни ЖОО-да компьютерлік техника және арнайы программалық әдістемемен қамту жиі қолданылады.
Ақпаратты технологияны кең арнада қолдану қазіргі ЖОО-да ұйымдастыру - басқару қызметі болып табылады. Оның автоматтандыру жолында көптеген автоматтандырылған программалық жүйесі мен талдауларын және де электронды деканаттары тәрізді сабақ жоспарлары, бухгалтерлік есеп жүйелері, студенттер, оқытушылар туралы электрондық қорын көптеген оқу жүйелерінде қолданылады.
Кез - келген ЖОО - да ақпараттандыру және оқудан тыс әр түрлі шаралар өткізуде студент жастар үшін тәрбиелеу жолдарында, олардың ұжымда қызмет етуге талпыныстарын көтеруде, ақпараттық қорын көбейтуде болашақ түлектерге үлкен көмегін тигізеді. Өкінішке орай, біздің облысымызда ЖОО-да әлі күнге дейін компьютерлеу жеткіліксіз деңгейде дамыған, ал студенттер үшін оқудан тыс ақпараттық зерттеу жүйелері мүлде жоқ деуге болады. Оқыту, білім беру тәжірибесі оқыту процесінің сапасын үнемі арттырып отыруды талап етеді. Сол себепті, оқыту процесін технологияландыру мәселесі маңызды болып саналады. Компьютерді оқыту жүйесіне енгізуде оқылатын теориялық материалдардың қандай да бір бөлігін машиналық бағдарламаға ауыстыру мүмкіндігі пайда болады және де бұл жағдайда оқу материалының мазмұны мен құрылысында өзгеріс болады. Қазіргі кезде білім беруді ақпараттандыру процесінің жүргізілуіне байланысты осы процесті жүзеге асырудағы өзекті мәселелердің бірі - электрондық оқыту жүйесін дайындау болып отыр. Ал, оларды оқыту жүйесінде қолдану - сапалы білім берудің бірден-бір құралы болып табылады. Қоғамды ақпараттандыру - бұл глобальді әлеуметтік процесс. Қоғамдық сфераның қызмет түрі қазіргі уақыттағы микропроцессор және есептеуіш техникасы әдісінің негізінде және сонымен қатар, ақпаратты айырбастаудың әр түрлі әдістері қорында жүзеге асырылатын ақпаратты жинақтау, өңдеу, сақтау, беру және қолданудың негізі болып табылады.
Қоғамда белгілі бір сферада қолайлы барлық ақпараттық массивті қолдануға есептелген ашық ақпараттық жүйелерді қолдану қоғамның қондырғы мен басқару механизмін қазіргі заманға сай етуге жол береді. Қоғамды ақпараттандырумен байланысты процестер тек қана ғылыми - техникалық процестің өсуіне ғана емес, сонымен қатар, жаңа ақпараттық ортаны құруға мүмкіндік береді. Қазіргі қоғамның ақпараттану процесінің ең бір үлкен бағыты білімді ақпараттандыру болып табылады. Білімді ақпараттандыру - бұл білім жүйесіне жаңа ақпараттық технологиялар әдісін енгізу.
Бүкіл әлемде кітапты басып шығаратын миллиондаған әр түрлі баспалар бар. Кітаптар үлкен тираждармен көптеген қалаларда таралады, біз оларды пайдаланамыз. Бірақ кітапты сатып алғанда бірден оның мазмұнын түсінбейміз. Мысалы: қазақ тілінен қандай да бір кітапта оқыған материалың кездессе, оны да түсінбейтін жағдай болады. Қазіргі уақытта сол кітапты алуға болады, бірақ оны электронды түрде, яғни толық түсінігі бар дискте қолданған тиімдірек болады. Бұл өзіңізге материалды толық меңгеруіңіз және оны тестімен бекітуіңізге мүмкіндік береді.
Жұмыстың өзектілігі: HTML тілін Delphi программалау тілінің көмегімен қолданушыға қазақ тілінде тиімді қолдану әдістерін ашып жазып, олардың барлығын мысалдар келтіре отырып көрсету.
Дипломдық жұмыс тақырыбының қойылымы:
Өсімдіктер мен жануарлар әлемінің биологиялық алуан түрлілігі пәнінен электронды оқулық дайындау (HTML және javascript гипермәтіндік тілінде).
Мақсаты мен міндеті:
Өсімдіктер мен жануарлар әлемінің биологиялық алуан түрлілігі тақырыбына байланысты HTML тілінде сайт құру және javascript гипермәтіндік тілінде сайттын ішінде тест сұрақтарын енгізу.
1 HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web-парактарының бір ортақ қасиеті-олардың барлығы да HTML тілінде жазылған HTML тілінде Web-парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес HTML - гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.
HTML тілі World Wide Web қызмет бабымен бірге дами отырып, Web парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырылды. Ол World Wide Web жүйесінің негізі бола отырып, оның өте кең тарауына себепші болды. World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады
Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент (anchor) орналасқан мәтін. Ол мәтін ішіне сурет, дыбыс енгізу, мәтінді безендіру, пішіндеу (форматтау) ісін орындайтын немесе осы күжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз- келесі көрсетілетін кұжат бөлігі калай бейнеленетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер (browsers) деп аталатын арнайы көрсету программалары қолданылады. Гипермәтін экранда белгіленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.
Сонымен, мәтіндерді осылай байланыстыра отырып белгілейтін мүмкіндікті беретін HTML miлі. Оның дұрыс нәтиже алуды қамтамасыз ететін өз заңдылықтары мен ережелері бар
HTML тілінін атқаратын қызметі
Web парақтары экранда ықшам түрде безендіріліп көрсетілгенмен HTML тілі мәтін ісі пішімдеп көрсететін тілге жатпайды.Өйткені әрбір тұтынушы әртүрлі компьютерлер пайдаланады. Сол себептен ғана зауыттан шыккан бір компьютердің Windows жүйесін жұмыс істей алатын броузері бар болса екінші бір тұтынушы компьютері тек MS DOC жүйесінде жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету мүмкіндіктері әртүрлі болғандыктан, бір файл екеуіне екі түрлі болып көрсетіледі. Ал, үшін компьютердегі Web-парақтарынын мәтіндері зағиптарға арналған Брайль қаріптері аркылы берілсе, оның нәтижесі тіпті басқаша болады.
Құжаттарды әрбір тұтынушының әртүрлі құрылғыларында және әртүрлі броузер программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу (форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол Интернеттегі мәтін бөліктерінің аткаратын кызметін анықтап, соларды әрбір түтынушыға бейімдеп жеткізе алатын құжат функционалды түрде белгілейтін тіл болып табылады.
Мысалы, егер мәтін тақырыбын бейнелеу керек болса онда HTML коды оны такырып ретінде көрсетуге тырысады. Такырыптың белгілеу коды алынған соң, оны броузер-программа өз мүмкіндіпн пайдаланып, оны үлкейтіп ірі әріптермен жазуы ыктимал немесе экран жолдарының ортасына жылжытып қана көрсетуіне де болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы аркылы берілетін болса, онда такырып қаттырақ шьғатын дауыс аркылы айтылып, одан сон аздап үзіліс жасалуы да мүмкін.
HT ML тілінде мәтінді пішімдеу тәсілдерінің де бар екенін айтып кету керек, бірақ алғашқы тұрғыдан алғанда құжаттың мазмұны мен оны безендіріп көрсету жолдарының айырмашылығы сакталып отырады. Мысалы, тілдің соңғы HTML 4.0 нұсқасында мәтін пішімдеу командаларын пайдалану ұсынылмаған.
E-mail бұл электрондық поштаның ағылшынша аталуы, ол-желі қызметтерінің ішіндегі электрондық мәлімет алмасудың ең негізгісі. Электрондық пошта көмегімен барлық құрылықтарда тұратын адамдар бір-біріне электрондық хаттар мен файлдар жібере алады.
Usenet жүйесінің бірнеше анықтамалары бар, олар - тармакталған дискуссия клубты телеконференция, жаңалықтар тобы. Мұның электрондық поштадан айырмашылығын мәліметті бір адамға ғана емес, бірнеше абоненттер тобына (телеконференциялар) жақтайсыз. Әр түрлі мәселелерді талқылау кезінде конференцияға қатынасушылар тең құқықты болып саналады. Әрбір телеконференция бір тақырыпқа(ғылымда өнерде, спорта, т.с.с. арналады және оның өзіндік адресі болады, мұндағы қарастырылатын мәселелер ауқымы әр түрлі бола береді - өте аукымды тақырыптан (бір сұрақтың барлық жағы) тек бір ғана сұраққа дейін (мысалы, филателия) қамтылады.
ISQ (I seek you - мен сені іздеймін) - желі тұтынушыларына накты уақыт кезеңнен (масштабында) хат-хабарлармен алмасып, бірден чат (chat- әңгіме) құрып, файл жіберуге әңгімелесуге мүмкіндік беретін қызмет түрі.
IRC (Internet Relay Chat) - нақты уақыт кезеңінде телеконференция өткізудің бір түрі тұтынушылардың бір-бірінен әңгіме-дүкен құруға болатын қызметі. IRC-сервсрлері мен IRC-клиенттері көмегімен тұтынушылар бір-бірімен виртуальды әңгіме өткізуді перне тақтада сөздерді теру арқылы жүргізеді.
IP-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды өте тиімді деп айтуға болмас, бұл тек TCPIP хаттамалары негізінде электрондық мәліметті алмасудың жеке бір түрі ғана. Адамның дауысы цифрлы файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы байланысынын ұлттык операторы болып саналатын Қазактелеком ААҚ-ы осы байланыс түрін практикада пайдаланып жүр.
1.1 Мәтіндермен жұмыс
Әріптер құру.
Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі, базалық сызық одан бірнеше жол төмендеп тұрады. Әріп оқушының көңілін мәтінге аударады. Егер бұл бетте басқа айқын белгілер болмаса. Әдетте символдың өзінен басқа өсімдік, жануар және басқа заттар қолданылады. Бұл әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере алады. Егер де сайтты тура солай жасағыңыз келсе, оған бәрінен де оң жағымен түзетілген сурет жақсы келеді.
1-мысал. Әріпті сурет көмегімен жаса
Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері арқылы тігінен және көлденеңнен беріледі.
Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады. Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.
Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені сызу керек.
2-мысал. Мәтін түріндегі әріп.
table align=left border=0 cellspacing=0 celpadding=0
trtdfont size=7"Дfonttdtr
table
Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!". Осы сөзді айтып балконға шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.
"Д имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы
несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!".
Осы сөзді айтып балконға шығады және ол жерден бір нәрсені
алады, сол сәтте ол заттың сол екенін түсінесің.
"Д имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы
несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!".
Осы сөзді айтып балконға шығады және ол жерден бір нәрсені
алады, сол сәтте ол заттың сол екенін түсінесің.
Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды. Бұл жағдайда код HTML айқындалмайды.
3-мысал. Стильдерді қолдану.
head
style type="textcss"
.letter { font-family: Arial; font-size: 24pt; color: navy }
style
head
table align=left border=0 cellspacing=0 celpadding=0
trtdspan class=letter"Дspantdtr
имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!". Осы сөзді айтып балконға шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.
Әріпті сол жағынан негізгі мәтіннен бөлуге ештеңке кедергі бола алмайды.Осы әрекетпен қарапайым эффекті жасай аламыз. Әріпті орналастыру үшін міндетті түрде екі ұяшықты кесте құру керек, сол жағында бірінші символ, ал екінші жағында қалған мәтін орналасады.
4-мысал. Өрістегі әріп.
table width=100% border=0
tr
td valign=top
font size=7Вfont
немесе
span class=letterВspan
немесе
img src=v.gif width=50 height=50 td
td valign=top
Кескіннің мәтінмен ағуы
Веб парақтар беттеулеріндегі (верстка) танымал мүмкіндіктердің бірі, браузер терезесінің шетінде кескін орналасқан, ал мәтін оның басқа жақтарында айнала орналасқан осы кескіннің мәтінмен ағуы қолданылады
Ағуды құру үшін бірнеше әдістер бар, олар НТМL тегтерімен байланысқан сияқты стильдерді қолданумен де байланысады.
Align mega IMG параметрін қолдану.
Кескінді түзету Align mega IMG параметірі мен анықталады. Бұл параметр қай терезенің жанында сурет орналасатындығын береді, және сол кезде анықтай отырып мәтінің ағу әдісін бірге қарастырады. Оң жақ шеті бойынша кескінді тузету және сол жақ бойынша ағуды беру үшін right мәнін және сәйкесінше оған қарама қарсы left мәнін орнатады. Олар ағатын мәтінен кескінге дейінгі ара қашықтықты анықтайды. Бұл атрибуттарсыз кескін мен мәтін бір - біріне тым жабысып тұратындығы 1-мысалда көрсетілген.
1- мысал. Кескін қасиеттерін қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=leftLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. body
html
Кескінен мәтінге дейінгі қашықтық hspace параметірімен басқарылады, ол бір уақытта кескіннен солға және оңға бос орынды қосады. Соңдықтан терезе шетінен көрсетілген осы атрибут арқылы сурет мәні тұрғызылады. Осы ерекшеліктен құтылу үшін Кестены қолдануға болады.
Кестелерді қолдану
Шекаралары көрінбейтін кесте - беттеудің танымал әдістерінің бірі болып табылады. Ізделінді нәтижені алу үшін кескіндегідей мәні мен қолданысы бар TABLE тегінің align қасиеттерін пайдаланамыз. Бірақ кестелерді көрсету үшін және басқару үшін параметірлер көбірек екен, бұл мәтінің ағуы бойынша кескінмен салыстырғанда артықшылық сипатында болып отыр.
2- мысал. Кестелерді қодану
table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0
tr
tdimg src=sample.gif width=50 height=50td
tr
table
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Кесте кескінің өзінен шығатын көрінбейтін шекараны құрады, ол мәтінге жақындауға жол бермейді. Шегініс кестенің ені және биіктігімен анықталады. Мысалда сурет сол жақ шеті бойынша түзетілген, себебі бұл әдіс кестеге орнатылған. Суреттен мәтінге дейінгі көлденең ара қашықтық кестенің енімен кескін енінің айырмашылығына тең. Ал тігінен шегініс мүлдем басқаша, үнемдеу бойынша ұяшық құрамындағыларды түзету тігінен ортасы бойынша орындалады. Сондықтан егер, TD тегінің valign=top параметрі берілсе, тігінен бойынша шегіністер көлденеңіненге қарағанда екі есе аз болады.
Стильдерді қолдану
Суреттің мәтінмен ағуы үшін float параметрін қолдануға болады. Right мәні кескінді түзетуді атқарады, яғни браузер терезесінің оң жақ шеті бойынша, ол мәтінді суреттің сол жағына орналастырады. Ал left мәні керісінше сол жақ шеті бойын түзетеді де мәтінді суреттің оң жағынан қояды.
3- мысал. Стильдерді қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
body
html
Мәтінді түзету
Мәтінді сыртқы көрінісіне және абзац жақтарына байланысты сол жақ, оң жақ, орталық, ені бойынша түзетеді.Ол 1- кестеде көрсетілген.
1-кесте.
Сол жақ бойынша түзету
Оң жақ бойынша түзету
Орталық бойынша түзету
Ені бойынша түзету
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін жылжиды, ал оң жағы түзетілмейді. Оң және орталық бойынша түзету негізінен
тақырыпшаларда қолданылады. Ескертетін жағдай, мәтінді ені бойынша түзету кезінде сөздер арасында үлкен интервалдар пайда болуы 2-кестеде көрсетілген.
2-кесте.
HTML коды
Мағынасы
Мысал
pмәтін p
Сол жақ бойынша түзетілген жаңа параграфты үнсіз келісім бойынша қосады. Параграф алдында автоматты түрде бос жорл қосылады.
Мәтін
p align=left мәтін p
Сол жақ бойынша түзету
Мәтін
p align=right мәтін p
Оң жақ бойынша түзету
Мәтін
p align=center мәтін p
Орталық бойынша түзету
Мәтін
p align=justify мәтін p
Ені бойынша түзету
Ені бойынша мәтін
nobr мәтін nobr
Егер мәтін браузер терезесінен үлкен болса, онда жолдардың автоматты ауысуын өшіреді.
Мәтін
мәтін wbr
Егер NOBR тег. қолданылса, браузердің белгіленген жеріне жолдарды ауыстыруға мүмкіндік береді.
Мәтін
center мәтін center
Орталық бойынша түзету
Мәтін
div align= center мәтін div
Орталық бойынша түзету
Мәтін
div align=left мәтін div
Сол жақ бойынша түзету
Мәтін
div align= right мәтін div
Оң жақ бойынша түзету
Мәтін
div align=justify мәтін div
Ені бойынша түзету
Ені бойынша мәтін
Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген, сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін енгізу керек.
(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл тега DIV жағдайында болмайды.
Сөздер арасындағы бос орын.
HTML-дің ерекшелігі мынада, сөз арасында пробелдер саны қаншалықты болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз арасын алшақтату, үлкейту керек болады. Қаріптің көлемі FONT көмегімен немесе стильдерді қолдану арқылы өзгеретіні белгілі. Кейде пробелді көбірек қою туралы ой келеді. Ол үшін мына конструкцияны қолдану керек.
Обещаемspan style="font-size: 150%" spanобещатьspan style="font-size: 150%" spanнеspan style="font-size: 150%" spanобещать!
Бұл бірішіден айқын болып көрінеді, ал екіншіден бос орын көлемі көлденең ғана емес, тігінен де өзгереді. Сондықтан базалық сызығы аралас болуы мүмкін.
Мәселені бұдан жақсырақ шешу үшін келесі кеңестер ұсынылады.
Бөлінбейтін пробелін қолдану;
символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда пробель қойылғаны үшін таңдалады. Сондықтан да бұндай пробельдің он шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ көрсетеді деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де көрінбейді. Ол 1-мысалда көрсетілген.
1-мысал. символының қолданылуы
Мен сіз үшін өз жұмысымды орындамаймын!
Мысалда абзац төрт пробель арқылы қойылған: біреуі - кәдімгі және үшеуі - символының көмегімен. Пробельдің мұндай көлемі базалық қаріп көмегімен сәйкес келеді.
Бөлінбейтін пробелді қолдану белгіленген қолайсыз жағдайлармен қатар жүреді. Сөздердің араларын бүкіл слайд мәтінінде өзгерту қажет деп санаңыз. Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз арасындағы пробелдің түрі стиль болып табылады. [1,2].
Стильдерді қолдану
Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және басқа да бірліктермен қойыла алады.
2-мысал. word-spacing атрибутын қолдану
span style=" word-spacing: 10px"Піл + жақсы тағам = екі пілspan
Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі. Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне қолдануға болады. Ол 3-мысалда көрсетілген.
3-мысал. Стильдерді қолдану
html
head
style
P { word-spacing: 10px }
style
head
body
p-Булочку надо?p
p-Спасибо, не надо!p
p-Не надо?! Спасибо!p
body
html
Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына ешқандай шегінулер қойылмайды.
Текстің астын сызуды тудыру
Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл үшін border - bottem параметірін қолданатын жаңа стиль шығару керек.Ол мәтіннің астынан сызық шығарады.
1- мысал. Пунктирлі сызықты жіберуді қабылдау.
html
head
style
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
style
head
body
a href=1.htmlПодчеркнутая ссылкаa
body
html
Мысалда, жіберілетін стиль құрылады, онда тышқан тетігімен басылған тектің асты пунктирлі көк сызықты құрайды.
Контекстік селекторлар
Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана анықтауға болады.
Қарапайым селекторларды қолдану
B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }
Контекстік селекторлар пробелмен ажыратылған жай селекторлардан тұрады.
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер ол В тегінің ішінде болса.
2-мысал. Контекстік селекторлар
html
head
style type="textcss"
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
style
head
body
bЖирный шрифтbbr
iКурсивный текстibr
biЖирный курсивный текстibbr
ibКурсивный и жирный текстbi
body
html
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.
В, І, Н1, Р. Cite {color: navy;}
Мысалдағы көк түс қолданылады:
* В тегінің ішіне орналастырылған І тегінің курсивіне
* Н1 барлық тегіне
* Р тегі параграфіндегі Cite класына
1.2 Сілтемелер
Сілтемені қалай жасауға болады?
Сілтемені құру үшін браузерге, сілтеме деген не?, сілтеме жасайтын құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL) документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.
1-мысал. Абсолютті сілтемелерді қолдану
html
body
a href=www.yandex.ruІздейтін жүйе Яндексa
body
html
Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе адреске қатысты құрылады.
Мұндай адрестер мысалдары;
demo
Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе demo папкасында орналасқан index.html файлы болмаса браузер, берілген каталогта бар файлдар мазмұнын көрсетеді.
images pic.gif
Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді. Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта орналасқан ..helpme.html
Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы жоғары деңгейге өтуін білдіреді.
manual info.html
Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде орналасқанын білдіреді.
2-мысал. Қатысты сілтемелерді қолдану.
html
body
a href=imagesxxx.jpgПосмотрите на мою фотографию!abr
a href=tip.htmlКак сделать такое же фото?a
body
html
Браузер енін анықтау.
Кейбір мәселелерде браузер терезесінің оң жағы бойынша қабатты орналастыру талап етіледі. Бірақ, қабат орны пиксельдермен берілгендіктен, оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын білу талап етіледі.
Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі қадам қолданылады. Internet Explorer және Opera-да еннің мәні document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас анықталады, тек Width - ол Нeight - қа айналады. Қорытындысында, JavaScript-те жазылған функциялар 1-мысалда көрсетілгендей түрге ие болады.
1- мысал. Ені мен биіктігін анықтау үшін функциялар
script language="JavaScript"
IE = (document.all);
NC = (document.layers);
Opera = (document.getElementById);
function getHeight()
if (IE Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
function getWidth()
if (IE Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
script
Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті орналастырылуы бар қабат құру қажет.
2- мысал. Қабат құру
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000 cellspacing=0
tr
tdСодержаниеtd
table
div
Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс. Егер қабатты мәтіннен төмен орналастыру керек болса - теріс мән пайдаланылады.
Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.
3- мысал. Браузерлердің оң жақ бұрышында қабатты орналастыруды беру
span class="select"function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}
Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, жұмыс аймағының енінен қабат енін алып тастау керек (мысалда - 100пиксель). Егер қабат браузер терезесінің төменгі бұрышында орналасса, биіктігімен де солай жасаймыз.
Берілген қабат көрсетілген орында қалуы үшін және өз орнын әр қашанда өзгертпеуі үшін яғни терезе өзгергенде SetTimeout функциясы қолданылады, ол әр 1000 миллисекундта қабат орнын қалпына келтіреді (немесе 1 секунд).
3 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға болады, мысалы On load оқиғасын.
4 -мысал. Функцияны автоматты түрде шақыру
body onLoad="putLayer()"
...
body
Браузердің кез-келген бұрыштарында қабатты орналастырудың толық листингін келтірейік
Жоғарғы оң жақ бұрышта
html
head script language="JavaScript"
IE = (document.all);
NC = (document.layers);
Opera = (document.getElementById);
function getHeight() {
if (IE Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
}
function getWidth() {
if (IE Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}
function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()',1000);
}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Оң жақ төменгі бұрышта
html
head
script language="JavaScript"
function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - 200;
if(IE) {
eval('document.all["xyz"].style.lef t = widthBrowser');
eval('document.all["xyz"].style.top = heightBrowser');}
if(NC) {
eval('document.layers["xyz"].left = widthBrowser');
eval('document.layers["xyz"].top = heightBrowser');}
if(Opera) {
eval('document.getElementById("xyz" ).style.left = widthBrowser');
eval('document.getElementById("xyz" ).style.top = heightBrowser');}
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Сол жақ төменгі бұрышта
html
head script language="JavaScript"
function putLayer() {
heightBrowser = getHeight() - 200;
if(IE) eval('document.all["xyz"].style.top = heightBrowser');
if(NC) eval('document.layers["xyz"].top = heightBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.top = heightBrowser');
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Веб-парақтардың оптимизациясы
Веб-парақтардың оптимизациясы дегенде, біз қолданушыға максимальды тез болатын яғни, браузерде парақтарды жүктеуге мүмкіндік беретін әдістер мен тәсілдерді қолдану деп түсінеміз.
Оптимизацияның басты ойы - бұл файлдар көлемін әртүрлі құралдармен кішірейту, бірақ мұнда да белгілі бір әдістер қолданылады, олар парақта басқа элементтер пайда болмайынша контентті жүктеуге мүмкіндік береді. Төменде, осы мақсатқа жетудің кейбір әрекеттері сипатталған.
Маңызды ақпаратты парақ үстіне орналастырыңыз.
Веб-парақтар жоғарыдан төменге қарай жүктеледі, ал төмен орналасқанға қарағанда парақтың жоғарғы жағындағы ақпарат ертерек пайда болады. Сондықтан, қолданушы үшін аса маңызды материалдарды парақтың басына қарай орналастырыңыз.
Бір кескінді көп мәрте қолданыңыз
Беттен - бетке қайталанатын графикалық элементтерді қолданыңыз яғни, логотиптер, навигация элементтері сияқтылар. Суреттің алғашқы жүктелуінде, кескіні бар файл браузер кэшіне орналасады және берілген суретті қайта-қайта қолдану оның ол кездесетін басқа парақтарда пайда болуын тездетеді.
(CSS ) стильдерінің каскадты кестеларін қолданыңыз
Форматтау атрибуттары тобына бірден барлығына бір әрекетті қолдану арқасында стильдер НТМL кодын айтарлықтай ықшамдайды. Стильдер көмегімен мысалға , барлық тақырып жолының түрін өзгертуге болады. Бірақ үш тәсілмен тақырып жолын форматтамаудың орнына яғни, оның өлшемі басында берілсе, кейін қаріп берілсе және ең соңында орталық бойынша түзету болса, оны бір уақытта анықталған тегке стильді қолдану арқылы тура соны іске асыруға болады.[12].
Кестелер ерекшеліктерін ескеріңіз
Әдетте веб-парақтар көрінбейтін шекаралары бар кестелерді қолдану арқылы беттеледі. Сол кестелердің ерекшелігі - егер соңғы сөз кестенің ең төменгі жағына жүктелмесе , экранда ұяшықтардың құрамы бейнеленбейді. Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау үшін, кесте туралы бүкіл ақпаратты алуда қолданады. Алайда, егер кесте биіктігі бойынша үлкен болса, біз қажетті ақпаратты тапқанымызша елеулі уақыт өтіп кетеді. Осыны ескеру, сізге веб-парақтың құрамындағылардың шығуын тездету мүмкіндігін береді. Жүктеуді тездетудің тағы бір әдісі - бұл кестелер орнына қабатты қолдану.
Графиканы оптимизациялаңыз
Веб-параққа графикалық кескіндер тез жүктелуі үшін, сапаларын сақтауда суреттер файлдарының өлшемін кішірейту керек. Графиканы оптимизациялау үшін, файлдар форматын ескере отырып, әртүрлі параметрлермен басқаруға мүмкіндік беретін арнаулы программалар бар. Мысалы, Adobe Image Ready, Ulead SmartSaverPro, MacromediaFireWorks және т.с.с.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы, парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
Салымдарды құру
Салымдар новигация элементінің бірі, сайтты қолданушы салымдарға кез келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша, бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт бөлімдері арқылы өтуін тез түсіндіреді. 1-суретте салым құрудың бір нұсқасы көрсетілген.
1-сурет. Салымдарды құрып орналастыру
Графикалық салымдарды кез келген графикалық редакторда құруға болады. Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз, мысалы 2-суретте көрсетілген стиль арқылы.
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
2-сурет. Стилдердің арқылы салымдарды құру
Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды құрайды, ал шеткі екі ұяшығы сән үшін керек, олар көлденең шетке шегіну сызығы үшін керек.
Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет. Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right: none параметрі қолданылады. Сондай-ақ ағымдағы салым үшін төменгі шекараны жасырып қою керек. Оң және сол ұяшықтың стилін тура сипаттауға болады. Бірақ сайтта салымды көп қолдану үшін бөлек класс қолданған дұрыс.
1-мысал. Кестені қолдану
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; }
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black" td
tr
table
body
html
Кестені қолданудың бірнеше ерекшелігі бар. Терезе көлемін өзгерту кезінде кесте ені бойынша құрылады. Сондықтан салымдар әрқашан көрінеді және міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер терезелерінің кішірейгенін көруге болады. 2-мысалда span тегасы қолданылады, оның көмегімен салымдар жасалынады. Әр түрлі блоктар бір бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.[14].
2-мысал. SPAN тегін қолдану
style
.open { border: solid 1px black; border-right: none; border-bottom: solid 1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; width: 24%; padding: 4px }
style
span style="border-bottom: solid 1px black; width: 10px" spanspan class=openЧебурашкаspanspan class=closeКрокодил Генаspanspan class=closeШапоклякspanspan class=closeКрыса Ларисаspanspan style="border-left: solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px" span
Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі салымдарды құруға болады. 3-суретте түгенделген салымның мысалы көрсетілген, бұл жағдайда белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
3-сурет.
3-мысалда осындай салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан кесте қолданылады.[13].
3-мысал. Салымдарды кесте арқылы құру
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none; font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }
.close { border: solid 1px black; border-right: none; text-align: center; padding: 4px}
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black" td
tr
tr
td bgcolor="#CFD6D4" colspan="6" height=10td
tr
table
body
html
Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр сызықты форматтайды. Оның ені мен түсі height және bgcolor ұяшықтарының ерекшелігімен ауысады.
Скриптер.
Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы динамикалық басқарылуы HTML құжатымен байланысқан программа арқылы іске асады. Мұндай программаларды скриптілер деп атайды немесе басқа әдебиеттерде кездесетіндей - сценарийлер деп атауға болады. Скриптілер SCRIPT тегі арқылы сипатталады, яғни оның құрамында программаға немесе анықталған тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері қолданылады - JavaScript және VB Script.
Скриптерді құру
Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең тарағанының ерекшелігі - бұл Script контейнерінің ішінде программаның орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында программаны қамтиды.
Скрипт жазылу синтаксисы;
script language="язык программирования" type="тип MIME" src="имя файла" Текст программы
script
Language параметрі скрипттің жазылу тіліне нұсқайды, ол JavaScript немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына нұсқа (версия) нөмірін қосады. Мысалы JavaScript 1.3 (1-мысал).
1-мысал. Браузер қолдайтын тілдерді анықтау
html
head
script language="VBScript" VB = True script
script language="JavaScript" JS = 1; script
script language="JavaScript1.1" JS11 = 1; script
script language="JavaScript1.2" JS12 = 1; script
script language="JavaScript1.3" JS13 = 1; script
script language="JavaScript1.4" JS14 = 1; script
script language="JavaScript1.5" JS15 = 1; script
script language="JavaScript"
document.write("bПоддерживаемые языки:bbr");
if(window.JS) document.write("JavaScriptbr");
if(window.JS11) document.write("JavaScript 1.1br");
if(window.JS12) document.write("JavaScript 1.2br");
if(window.JS13) document.write("JavaScript 1.3br");
if(window.JS14) document.write("JavaScript 1.4br");
if(window.JS15) document.write("JavaScript 1.5br");
if(window.VB) document.write("Visual Basicbr");
script
head
body
...
body
html
орындаудың нәтижесі төменде көрсетілген
Language параметрін көрсету ұсынылады, себебі егер, браузер программалау тілін анықтамаса, онда скрипт қабылдамайды және орындамайды да. Сонымен қатар, HTML 4.0 нұсқасында осы параметрді қолдану аса тиімді емес. Оның орнына type параметрін қолданған дұрыс, ал ол анықталған тіл үшін MIME типін нұсқайды: JavaScript үшін - textjava script, ал VB Script үшін - textvb script. Бірақ кейбір браузерлер type параметрін түсіне алмайды, сондықтан language және type екі атрибутын бір уақытта берген дұрыс. Егер браузер type параметрінің мәнін анықтамаса, онда language мәні орындалмайды.
script language="JavaScript" type="textJavaScript"
JavaScript тіліндегі бағдарлама
script
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді, яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі шақырылуда скрипт тез шақырылады.
script language="JavaScript" type="textJavaScript" src="main.js"script
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері
Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз көлемде орналасады. Көп жағдайларда скриптілердің орналасуы программа жұмысына мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте құжат басына орналастырады. Программалық құралдар арқылы объектілерді құруда скриптілерді құжаттың дәл өзіне орналастырып, document.write немесе document.writeln әдісінің көмегімен нәтижесін шығарады.Ол 2-мысалда көрсетілген.
2- мысал. Скрипт көмегімен Кесте құру
html
body
table width=400 border=1
script language="JavaScript"
for (i=1; i6; i++) {
document.writeln("tr");
for (j=1; j6; j++) document.write("td" + i + j + "td");
document.writeln("tr");}
script
table
body
html
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Қазақстан Республикасы Білім және ғылым министрлігі
Баишев Университеті
Косов Д.А.
Өсімдік және жануарлар әлемінің биологиялық алуан түрлілігі электронды оқулық құру
ДИПЛОМДЫҚ ЖҰМЫС
6В06121 - Ақпараттық жүйелер білім беру бағдарламасы
Ақтөбе 2019
Кіріспе
Ақпараттық технологияны ендіру білімнің жаңа республикалық жүйесінің әр түрлі облыстағы масштабты мінездемесін қабылдайды. Бүгінгі күні ақпараттық технология кең көлемде оқыту жүйесін ұйымдастыру қызметінде барлық республикалық жоғарғы оқу орындарында (ЖОО - да) қолданылады. Студенттердің компьютерлік және интернет кластарындағы жұмысы информатиканы оқыту барысында, сонымен бірге басқа пәндерден, оқу дәрістерін деканатта жоспарлау, компьютер көмегімен немесе электронды компьютерлік тестілеу білімі жер-жердегі студенттер мен талапкерлер үшін жасалған.
ЖОО-дағы ақпараттандырылған жоғарғы білімдер ақпараттық ресурстың қомақты санының жинақталуы, тек қана қажетті жұмыс пен нақты оқу орындарына ғана емес, сонымен бірге барлық білім жүйесіне пайдалы. Электронды оқыту жүйесі, көмекші құралдар, компьютерлік тапсырмалар, лабораториялық жұмыстар, программалық шаралар бұларды оқытушылар өздері құрады және пайдаланады. Электрондық форма ғылыми практика мен әдістемелік жетілдіруде қолданылады. Әрі қарай даму оқыту қызметінің жаңа форма алуы көптеген жаңа ақпаратты технологияға негізделген, соның ішінде бірінші кезекке қашықтықтан оқыту білімі жатады.
Компьютерлік ендіруде және телекомуникациялық технологияда маңызды біріктіру республикалық білім жүйесінің байланыс таратуы соңғы төрт жылда Қазақстан Республикасының (ҚР - ның) ЖОО - дағы студенттер контингентінің жаңа моделі болды. Тестілеу және басқа да білім деңгейін тексеру әдістері әдет пен дағды негізінде ақпараттық процестер комплексін автоматтандыруда, яғни ЖОО-да компьютерлік техника және арнайы программалық әдістемемен қамту жиі қолданылады.
Ақпаратты технологияны кең арнада қолдану қазіргі ЖОО-да ұйымдастыру - басқару қызметі болып табылады. Оның автоматтандыру жолында көптеген автоматтандырылған программалық жүйесі мен талдауларын және де электронды деканаттары тәрізді сабақ жоспарлары, бухгалтерлік есеп жүйелері, студенттер, оқытушылар туралы электрондық қорын көптеген оқу жүйелерінде қолданылады.
Кез - келген ЖОО - да ақпараттандыру және оқудан тыс әр түрлі шаралар өткізуде студент жастар үшін тәрбиелеу жолдарында, олардың ұжымда қызмет етуге талпыныстарын көтеруде, ақпараттық қорын көбейтуде болашақ түлектерге үлкен көмегін тигізеді. Өкінішке орай, біздің облысымызда ЖОО-да әлі күнге дейін компьютерлеу жеткіліксіз деңгейде дамыған, ал студенттер үшін оқудан тыс ақпараттық зерттеу жүйелері мүлде жоқ деуге болады. Оқыту, білім беру тәжірибесі оқыту процесінің сапасын үнемі арттырып отыруды талап етеді. Сол себепті, оқыту процесін технологияландыру мәселесі маңызды болып саналады. Компьютерді оқыту жүйесіне енгізуде оқылатын теориялық материалдардың қандай да бір бөлігін машиналық бағдарламаға ауыстыру мүмкіндігі пайда болады және де бұл жағдайда оқу материалының мазмұны мен құрылысында өзгеріс болады. Қазіргі кезде білім беруді ақпараттандыру процесінің жүргізілуіне байланысты осы процесті жүзеге асырудағы өзекті мәселелердің бірі - электрондық оқыту жүйесін дайындау болып отыр. Ал, оларды оқыту жүйесінде қолдану - сапалы білім берудің бірден-бір құралы болып табылады. Қоғамды ақпараттандыру - бұл глобальді әлеуметтік процесс. Қоғамдық сфераның қызмет түрі қазіргі уақыттағы микропроцессор және есептеуіш техникасы әдісінің негізінде және сонымен қатар, ақпаратты айырбастаудың әр түрлі әдістері қорында жүзеге асырылатын ақпаратты жинақтау, өңдеу, сақтау, беру және қолданудың негізі болып табылады.
Қоғамда белгілі бір сферада қолайлы барлық ақпараттық массивті қолдануға есептелген ашық ақпараттық жүйелерді қолдану қоғамның қондырғы мен басқару механизмін қазіргі заманға сай етуге жол береді. Қоғамды ақпараттандырумен байланысты процестер тек қана ғылыми - техникалық процестің өсуіне ғана емес, сонымен қатар, жаңа ақпараттық ортаны құруға мүмкіндік береді. Қазіргі қоғамның ақпараттану процесінің ең бір үлкен бағыты білімді ақпараттандыру болып табылады. Білімді ақпараттандыру - бұл білім жүйесіне жаңа ақпараттық технологиялар әдісін енгізу.
Бүкіл әлемде кітапты басып шығаратын миллиондаған әр түрлі баспалар бар. Кітаптар үлкен тираждармен көптеген қалаларда таралады, біз оларды пайдаланамыз. Бірақ кітапты сатып алғанда бірден оның мазмұнын түсінбейміз. Мысалы: қазақ тілінен қандай да бір кітапта оқыған материалың кездессе, оны да түсінбейтін жағдай болады. Қазіргі уақытта сол кітапты алуға болады, бірақ оны электронды түрде, яғни толық түсінігі бар дискте қолданған тиімдірек болады. Бұл өзіңізге материалды толық меңгеруіңіз және оны тестімен бекітуіңізге мүмкіндік береді.
Жұмыстың өзектілігі: HTML тілін Delphi программалау тілінің көмегімен қолданушыға қазақ тілінде тиімді қолдану әдістерін ашып жазып, олардың барлығын мысалдар келтіре отырып көрсету.
Дипломдық жұмыс тақырыбының қойылымы:
Өсімдіктер мен жануарлар әлемінің биологиялық алуан түрлілігі пәнінен электронды оқулық дайындау (HTML және javascript гипермәтіндік тілінде).
Мақсаты мен міндеті:
Өсімдіктер мен жануарлар әлемінің биологиялық алуан түрлілігі тақырыбына байланысты HTML тілінде сайт құру және javascript гипермәтіндік тілінде сайттын ішінде тест сұрақтарын енгізу.
1 HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web-парактарының бір ортақ қасиеті-олардың барлығы да HTML тілінде жазылған HTML тілінде Web-парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес HTML - гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.
HTML тілі World Wide Web қызмет бабымен бірге дами отырып, Web парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырылды. Ол World Wide Web жүйесінің негізі бола отырып, оның өте кең тарауына себепші болды. World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады
Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент (anchor) орналасқан мәтін. Ол мәтін ішіне сурет, дыбыс енгізу, мәтінді безендіру, пішіндеу (форматтау) ісін орындайтын немесе осы күжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз- келесі көрсетілетін кұжат бөлігі калай бейнеленетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер (browsers) деп аталатын арнайы көрсету программалары қолданылады. Гипермәтін экранда белгіленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.
Сонымен, мәтіндерді осылай байланыстыра отырып белгілейтін мүмкіндікті беретін HTML miлі. Оның дұрыс нәтиже алуды қамтамасыз ететін өз заңдылықтары мен ережелері бар
HTML тілінін атқаратын қызметі
Web парақтары экранда ықшам түрде безендіріліп көрсетілгенмен HTML тілі мәтін ісі пішімдеп көрсететін тілге жатпайды.Өйткені әрбір тұтынушы әртүрлі компьютерлер пайдаланады. Сол себептен ғана зауыттан шыккан бір компьютердің Windows жүйесін жұмыс істей алатын броузері бар болса екінші бір тұтынушы компьютері тек MS DOC жүйесінде жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету мүмкіндіктері әртүрлі болғандыктан, бір файл екеуіне екі түрлі болып көрсетіледі. Ал, үшін компьютердегі Web-парақтарынын мәтіндері зағиптарға арналған Брайль қаріптері аркылы берілсе, оның нәтижесі тіпті басқаша болады.
Құжаттарды әрбір тұтынушының әртүрлі құрылғыларында және әртүрлі броузер программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу (форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол Интернеттегі мәтін бөліктерінің аткаратын кызметін анықтап, соларды әрбір түтынушыға бейімдеп жеткізе алатын құжат функционалды түрде белгілейтін тіл болып табылады.
Мысалы, егер мәтін тақырыбын бейнелеу керек болса онда HTML коды оны такырып ретінде көрсетуге тырысады. Такырыптың белгілеу коды алынған соң, оны броузер-программа өз мүмкіндіпн пайдаланып, оны үлкейтіп ірі әріптермен жазуы ыктимал немесе экран жолдарының ортасына жылжытып қана көрсетуіне де болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы аркылы берілетін болса, онда такырып қаттырақ шьғатын дауыс аркылы айтылып, одан сон аздап үзіліс жасалуы да мүмкін.
HT ML тілінде мәтінді пішімдеу тәсілдерінің де бар екенін айтып кету керек, бірақ алғашқы тұрғыдан алғанда құжаттың мазмұны мен оны безендіріп көрсету жолдарының айырмашылығы сакталып отырады. Мысалы, тілдің соңғы HTML 4.0 нұсқасында мәтін пішімдеу командаларын пайдалану ұсынылмаған.
E-mail бұл электрондық поштаның ағылшынша аталуы, ол-желі қызметтерінің ішіндегі электрондық мәлімет алмасудың ең негізгісі. Электрондық пошта көмегімен барлық құрылықтарда тұратын адамдар бір-біріне электрондық хаттар мен файлдар жібере алады.
Usenet жүйесінің бірнеше анықтамалары бар, олар - тармакталған дискуссия клубты телеконференция, жаңалықтар тобы. Мұның электрондық поштадан айырмашылығын мәліметті бір адамға ғана емес, бірнеше абоненттер тобына (телеконференциялар) жақтайсыз. Әр түрлі мәселелерді талқылау кезінде конференцияға қатынасушылар тең құқықты болып саналады. Әрбір телеконференция бір тақырыпқа(ғылымда өнерде, спорта, т.с.с. арналады және оның өзіндік адресі болады, мұндағы қарастырылатын мәселелер ауқымы әр түрлі бола береді - өте аукымды тақырыптан (бір сұрақтың барлық жағы) тек бір ғана сұраққа дейін (мысалы, филателия) қамтылады.
ISQ (I seek you - мен сені іздеймін) - желі тұтынушыларына накты уақыт кезеңнен (масштабында) хат-хабарлармен алмасып, бірден чат (chat- әңгіме) құрып, файл жіберуге әңгімелесуге мүмкіндік беретін қызмет түрі.
IRC (Internet Relay Chat) - нақты уақыт кезеңінде телеконференция өткізудің бір түрі тұтынушылардың бір-бірінен әңгіме-дүкен құруға болатын қызметі. IRC-сервсрлері мен IRC-клиенттері көмегімен тұтынушылар бір-бірімен виртуальды әңгіме өткізуді перне тақтада сөздерді теру арқылы жүргізеді.
IP-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды өте тиімді деп айтуға болмас, бұл тек TCPIP хаттамалары негізінде электрондық мәліметті алмасудың жеке бір түрі ғана. Адамның дауысы цифрлы файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы байланысынын ұлттык операторы болып саналатын Қазактелеком ААҚ-ы осы байланыс түрін практикада пайдаланып жүр.
1.1 Мәтіндермен жұмыс
Әріптер құру.
Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі, базалық сызық одан бірнеше жол төмендеп тұрады. Әріп оқушының көңілін мәтінге аударады. Егер бұл бетте басқа айқын белгілер болмаса. Әдетте символдың өзінен басқа өсімдік, жануар және басқа заттар қолданылады. Бұл әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере алады. Егер де сайтты тура солай жасағыңыз келсе, оған бәрінен де оң жағымен түзетілген сурет жақсы келеді.
1-мысал. Әріпті сурет көмегімен жаса
Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері арқылы тігінен және көлденеңнен беріледі.
Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады. Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.
Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені сызу керек.
2-мысал. Мәтін түріндегі әріп.
table align=left border=0 cellspacing=0 celpadding=0
trtdfont size=7"Дfonttdtr
table
Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!". Осы сөзді айтып балконға шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.
"Д имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы
несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!".
Осы сөзді айтып балконға шығады және ол жерден бір нәрсені
алады, сол сәтте ол заттың сол екенін түсінесің.
"Д имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы
несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!".
Осы сөзді айтып балконға шығады және ол жерден бір нәрсені
алады, сол сәтте ол заттың сол екенін түсінесің.
Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды. Бұл жағдайда код HTML айқындалмайды.
3-мысал. Стильдерді қолдану.
head
style type="textcss"
.letter { font-family: Arial; font-size: 24pt; color: navy }
style
head
table align=left border=0 cellspacing=0 celpadding=0
trtdspan class=letter"Дspantdtr
имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?". "Ұқсасы несі?!" ─ Диманын жауабы ─ "Менде транплюкатордың өзі бар!". Осы сөзді айтып балконға шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.
Әріпті сол жағынан негізгі мәтіннен бөлуге ештеңке кедергі бола алмайды.Осы әрекетпен қарапайым эффекті жасай аламыз. Әріпті орналастыру үшін міндетті түрде екі ұяшықты кесте құру керек, сол жағында бірінші символ, ал екінші жағында қалған мәтін орналасады.
4-мысал. Өрістегі әріп.
table width=100% border=0
tr
td valign=top
font size=7Вfont
немесе
span class=letterВspan
немесе
img src=v.gif width=50 height=50 td
td valign=top
Кескіннің мәтінмен ағуы
Веб парақтар беттеулеріндегі (верстка) танымал мүмкіндіктердің бірі, браузер терезесінің шетінде кескін орналасқан, ал мәтін оның басқа жақтарында айнала орналасқан осы кескіннің мәтінмен ағуы қолданылады
Ағуды құру үшін бірнеше әдістер бар, олар НТМL тегтерімен байланысқан сияқты стильдерді қолданумен де байланысады.
Align mega IMG параметрін қолдану.
Кескінді түзету Align mega IMG параметірі мен анықталады. Бұл параметр қай терезенің жанында сурет орналасатындығын береді, және сол кезде анықтай отырып мәтінің ағу әдісін бірге қарастырады. Оң жақ шеті бойынша кескінді тузету және сол жақ бойынша ағуды беру үшін right мәнін және сәйкесінше оған қарама қарсы left мәнін орнатады. Олар ағатын мәтінен кескінге дейінгі ара қашықтықты анықтайды. Бұл атрибуттарсыз кескін мен мәтін бір - біріне тым жабысып тұратындығы 1-мысалда көрсетілген.
1- мысал. Кескін қасиеттерін қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=leftLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. body
html
Кескінен мәтінге дейінгі қашықтық hspace параметірімен басқарылады, ол бір уақытта кескіннен солға және оңға бос орынды қосады. Соңдықтан терезе шетінен көрсетілген осы атрибут арқылы сурет мәні тұрғызылады. Осы ерекшеліктен құтылу үшін Кестены қолдануға болады.
Кестелерді қолдану
Шекаралары көрінбейтін кесте - беттеудің танымал әдістерінің бірі болып табылады. Ізделінді нәтижені алу үшін кескіндегідей мәні мен қолданысы бар TABLE тегінің align қасиеттерін пайдаланамыз. Бірақ кестелерді көрсету үшін және басқару үшін параметірлер көбірек екен, бұл мәтінің ағуы бойынша кескінмен салыстырғанда артықшылық сипатында болып отыр.
2- мысал. Кестелерді қодану
table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0
tr
tdimg src=sample.gif width=50 height=50td
tr
table
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Кесте кескінің өзінен шығатын көрінбейтін шекараны құрады, ол мәтінге жақындауға жол бермейді. Шегініс кестенің ені және биіктігімен анықталады. Мысалда сурет сол жақ шеті бойынша түзетілген, себебі бұл әдіс кестеге орнатылған. Суреттен мәтінге дейінгі көлденең ара қашықтық кестенің енімен кескін енінің айырмашылығына тең. Ал тігінен шегініс мүлдем басқаша, үнемдеу бойынша ұяшық құрамындағыларды түзету тігінен ортасы бойынша орындалады. Сондықтан егер, TD тегінің valign=top параметрі берілсе, тігінен бойынша шегіністер көлденеңіненге қарағанда екі есе аз болады.
Стильдерді қолдану
Суреттің мәтінмен ағуы үшін float параметрін қолдануға болады. Right мәні кескінді түзетуді атқарады, яғни браузер терезесінің оң жақ шеті бойынша, ол мәтінді суреттің сол жағына орналастырады. Ал left мәні керісінше сол жақ шеті бойын түзетеді де мәтінді суреттің оң жағынан қояды.
3- мысал. Стильдерді қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
body
html
Мәтінді түзету
Мәтінді сыртқы көрінісіне және абзац жақтарына байланысты сол жақ, оң жақ, орталық, ені бойынша түзетеді.Ол 1- кестеде көрсетілген.
1-кесте.
Сол жақ бойынша түзету
Оң жақ бойынша түзету
Орталық бойынша түзету
Ені бойынша түзету
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін жылжиды, ал оң жағы түзетілмейді. Оң және орталық бойынша түзету негізінен
тақырыпшаларда қолданылады. Ескертетін жағдай, мәтінді ені бойынша түзету кезінде сөздер арасында үлкен интервалдар пайда болуы 2-кестеде көрсетілген.
2-кесте.
HTML коды
Мағынасы
Мысал
pмәтін p
Сол жақ бойынша түзетілген жаңа параграфты үнсіз келісім бойынша қосады. Параграф алдында автоматты түрде бос жорл қосылады.
Мәтін
p align=left мәтін p
Сол жақ бойынша түзету
Мәтін
p align=right мәтін p
Оң жақ бойынша түзету
Мәтін
p align=center мәтін p
Орталық бойынша түзету
Мәтін
p align=justify мәтін p
Ені бойынша түзету
Ені бойынша мәтін
nobr мәтін nobr
Егер мәтін браузер терезесінен үлкен болса, онда жолдардың автоматты ауысуын өшіреді.
Мәтін
мәтін wbr
Егер NOBR тег. қолданылса, браузердің белгіленген жеріне жолдарды ауыстыруға мүмкіндік береді.
Мәтін
center мәтін center
Орталық бойынша түзету
Мәтін
div align= center мәтін div
Орталық бойынша түзету
Мәтін
div align=left мәтін div
Сол жақ бойынша түзету
Мәтін
div align= right мәтін div
Оң жақ бойынша түзету
Мәтін
div align=justify мәтін div
Ені бойынша түзету
Ені бойынша мәтін
Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген, сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін енгізу керек.
(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл тега DIV жағдайында болмайды.
Сөздер арасындағы бос орын.
HTML-дің ерекшелігі мынада, сөз арасында пробелдер саны қаншалықты болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз арасын алшақтату, үлкейту керек болады. Қаріптің көлемі FONT көмегімен немесе стильдерді қолдану арқылы өзгеретіні белгілі. Кейде пробелді көбірек қою туралы ой келеді. Ол үшін мына конструкцияны қолдану керек.
Обещаемspan style="font-size: 150%" spanобещатьspan style="font-size: 150%" spanнеspan style="font-size: 150%" spanобещать!
Бұл бірішіден айқын болып көрінеді, ал екіншіден бос орын көлемі көлденең ғана емес, тігінен де өзгереді. Сондықтан базалық сызығы аралас болуы мүмкін.
Мәселені бұдан жақсырақ шешу үшін келесі кеңестер ұсынылады.
Бөлінбейтін пробелін қолдану;
символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда пробель қойылғаны үшін таңдалады. Сондықтан да бұндай пробельдің он шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ көрсетеді деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де көрінбейді. Ол 1-мысалда көрсетілген.
1-мысал. символының қолданылуы
Мен сіз үшін өз жұмысымды орындамаймын!
Мысалда абзац төрт пробель арқылы қойылған: біреуі - кәдімгі және үшеуі - символының көмегімен. Пробельдің мұндай көлемі базалық қаріп көмегімен сәйкес келеді.
Бөлінбейтін пробелді қолдану белгіленген қолайсыз жағдайлармен қатар жүреді. Сөздердің араларын бүкіл слайд мәтінінде өзгерту қажет деп санаңыз. Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз арасындағы пробелдің түрі стиль болып табылады. [1,2].
Стильдерді қолдану
Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және басқа да бірліктермен қойыла алады.
2-мысал. word-spacing атрибутын қолдану
span style=" word-spacing: 10px"Піл + жақсы тағам = екі пілspan
Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі. Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне қолдануға болады. Ол 3-мысалда көрсетілген.
3-мысал. Стильдерді қолдану
html
head
style
P { word-spacing: 10px }
style
head
body
p-Булочку надо?p
p-Спасибо, не надо!p
p-Не надо?! Спасибо!p
body
html
Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына ешқандай шегінулер қойылмайды.
Текстің астын сызуды тудыру
Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл үшін border - bottem параметірін қолданатын жаңа стиль шығару керек.Ол мәтіннің астынан сызық шығарады.
1- мысал. Пунктирлі сызықты жіберуді қабылдау.
html
head
style
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
style
head
body
a href=1.htmlПодчеркнутая ссылкаa
body
html
Мысалда, жіберілетін стиль құрылады, онда тышқан тетігімен басылған тектің асты пунктирлі көк сызықты құрайды.
Контекстік селекторлар
Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана анықтауға болады.
Қарапайым селекторларды қолдану
B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }
Контекстік селекторлар пробелмен ажыратылған жай селекторлардан тұрады.
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер ол В тегінің ішінде болса.
2-мысал. Контекстік селекторлар
html
head
style type="textcss"
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
style
head
body
bЖирный шрифтbbr
iКурсивный текстibr
biЖирный курсивный текстibbr
ibКурсивный и жирный текстbi
body
html
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.
В, І, Н1, Р. Cite {color: navy;}
Мысалдағы көк түс қолданылады:
* В тегінің ішіне орналастырылған І тегінің курсивіне
* Н1 барлық тегіне
* Р тегі параграфіндегі Cite класына
1.2 Сілтемелер
Сілтемені қалай жасауға болады?
Сілтемені құру үшін браузерге, сілтеме деген не?, сілтеме жасайтын құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL) документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.
1-мысал. Абсолютті сілтемелерді қолдану
html
body
a href=www.yandex.ruІздейтін жүйе Яндексa
body
html
Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе адреске қатысты құрылады.
Мұндай адрестер мысалдары;
demo
Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе demo папкасында орналасқан index.html файлы болмаса браузер, берілген каталогта бар файлдар мазмұнын көрсетеді.
images pic.gif
Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді. Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта орналасқан ..helpme.html
Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы жоғары деңгейге өтуін білдіреді.
manual info.html
Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде орналасқанын білдіреді.
2-мысал. Қатысты сілтемелерді қолдану.
html
body
a href=imagesxxx.jpgПосмотрите на мою фотографию!abr
a href=tip.htmlКак сделать такое же фото?a
body
html
Браузер енін анықтау.
Кейбір мәселелерде браузер терезесінің оң жағы бойынша қабатты орналастыру талап етіледі. Бірақ, қабат орны пиксельдермен берілгендіктен, оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын білу талап етіледі.
Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі қадам қолданылады. Internet Explorer және Opera-да еннің мәні document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас анықталады, тек Width - ол Нeight - қа айналады. Қорытындысында, JavaScript-те жазылған функциялар 1-мысалда көрсетілгендей түрге ие болады.
1- мысал. Ені мен биіктігін анықтау үшін функциялар
script language="JavaScript"
IE = (document.all);
NC = (document.layers);
Opera = (document.getElementById);
function getHeight()
if (IE Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
function getWidth()
if (IE Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
script
Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті орналастырылуы бар қабат құру қажет.
2- мысал. Қабат құру
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000 cellspacing=0
tr
tdСодержаниеtd
table
div
Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс. Егер қабатты мәтіннен төмен орналастыру керек болса - теріс мән пайдаланылады.
Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.
3- мысал. Браузерлердің оң жақ бұрышында қабатты орналастыруды беру
span class="select"function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}
Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, жұмыс аймағының енінен қабат енін алып тастау керек (мысалда - 100пиксель). Егер қабат браузер терезесінің төменгі бұрышында орналасса, биіктігімен де солай жасаймыз.
Берілген қабат көрсетілген орында қалуы үшін және өз орнын әр қашанда өзгертпеуі үшін яғни терезе өзгергенде SetTimeout функциясы қолданылады, ол әр 1000 миллисекундта қабат орнын қалпына келтіреді (немесе 1 секунд).
3 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға болады, мысалы On load оқиғасын.
4 -мысал. Функцияны автоматты түрде шақыру
body onLoad="putLayer()"
...
body
Браузердің кез-келген бұрыштарында қабатты орналастырудың толық листингін келтірейік
Жоғарғы оң жақ бұрышта
html
head script language="JavaScript"
IE = (document.all);
NC = (document.layers);
Opera = (document.getElementById);
function getHeight() {
if (IE Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
}
function getWidth() {
if (IE Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}
function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()',1000);
}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Оң жақ төменгі бұрышта
html
head
script language="JavaScript"
function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - 200;
if(IE) {
eval('document.all["xyz"].style.lef t = widthBrowser');
eval('document.all["xyz"].style.top = heightBrowser');}
if(NC) {
eval('document.layers["xyz"].left = widthBrowser');
eval('document.layers["xyz"].top = heightBrowser');}
if(Opera) {
eval('document.getElementById("xyz" ).style.left = widthBrowser');
eval('document.getElementById("xyz" ).style.top = heightBrowser');}
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Сол жақ төменгі бұрышта
html
head script language="JavaScript"
function putLayer() {
heightBrowser = getHeight() - 200;
if(IE) eval('document.all["xyz"].style.top = heightBrowser');
if(NC) eval('document.layers["xyz"].top = heightBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.top = heightBrowser');
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Веб-парақтардың оптимизациясы
Веб-парақтардың оптимизациясы дегенде, біз қолданушыға максимальды тез болатын яғни, браузерде парақтарды жүктеуге мүмкіндік беретін әдістер мен тәсілдерді қолдану деп түсінеміз.
Оптимизацияның басты ойы - бұл файлдар көлемін әртүрлі құралдармен кішірейту, бірақ мұнда да белгілі бір әдістер қолданылады, олар парақта басқа элементтер пайда болмайынша контентті жүктеуге мүмкіндік береді. Төменде, осы мақсатқа жетудің кейбір әрекеттері сипатталған.
Маңызды ақпаратты парақ үстіне орналастырыңыз.
Веб-парақтар жоғарыдан төменге қарай жүктеледі, ал төмен орналасқанға қарағанда парақтың жоғарғы жағындағы ақпарат ертерек пайда болады. Сондықтан, қолданушы үшін аса маңызды материалдарды парақтың басына қарай орналастырыңыз.
Бір кескінді көп мәрте қолданыңыз
Беттен - бетке қайталанатын графикалық элементтерді қолданыңыз яғни, логотиптер, навигация элементтері сияқтылар. Суреттің алғашқы жүктелуінде, кескіні бар файл браузер кэшіне орналасады және берілген суретті қайта-қайта қолдану оның ол кездесетін басқа парақтарда пайда болуын тездетеді.
(CSS ) стильдерінің каскадты кестеларін қолданыңыз
Форматтау атрибуттары тобына бірден барлығына бір әрекетті қолдану арқасында стильдер НТМL кодын айтарлықтай ықшамдайды. Стильдер көмегімен мысалға , барлық тақырып жолының түрін өзгертуге болады. Бірақ үш тәсілмен тақырып жолын форматтамаудың орнына яғни, оның өлшемі басында берілсе, кейін қаріп берілсе және ең соңында орталық бойынша түзету болса, оны бір уақытта анықталған тегке стильді қолдану арқылы тура соны іске асыруға болады.[12].
Кестелер ерекшеліктерін ескеріңіз
Әдетте веб-парақтар көрінбейтін шекаралары бар кестелерді қолдану арқылы беттеледі. Сол кестелердің ерекшелігі - егер соңғы сөз кестенің ең төменгі жағына жүктелмесе , экранда ұяшықтардың құрамы бейнеленбейді. Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау үшін, кесте туралы бүкіл ақпаратты алуда қолданады. Алайда, егер кесте биіктігі бойынша үлкен болса, біз қажетті ақпаратты тапқанымызша елеулі уақыт өтіп кетеді. Осыны ескеру, сізге веб-парақтың құрамындағылардың шығуын тездету мүмкіндігін береді. Жүктеуді тездетудің тағы бір әдісі - бұл кестелер орнына қабатты қолдану.
Графиканы оптимизациялаңыз
Веб-параққа графикалық кескіндер тез жүктелуі үшін, сапаларын сақтауда суреттер файлдарының өлшемін кішірейту керек. Графиканы оптимизациялау үшін, файлдар форматын ескере отырып, әртүрлі параметрлермен басқаруға мүмкіндік беретін арнаулы программалар бар. Мысалы, Adobe Image Ready, Ulead SmartSaverPro, MacromediaFireWorks және т.с.с.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы, парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
Салымдарды құру
Салымдар новигация элементінің бірі, сайтты қолданушы салымдарға кез келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша, бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт бөлімдері арқылы өтуін тез түсіндіреді. 1-суретте салым құрудың бір нұсқасы көрсетілген.
1-сурет. Салымдарды құрып орналастыру
Графикалық салымдарды кез келген графикалық редакторда құруға болады. Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз, мысалы 2-суретте көрсетілген стиль арқылы.
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
2-сурет. Стилдердің арқылы салымдарды құру
Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды құрайды, ал шеткі екі ұяшығы сән үшін керек, олар көлденең шетке шегіну сызығы үшін керек.
Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет. Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right: none параметрі қолданылады. Сондай-ақ ағымдағы салым үшін төменгі шекараны жасырып қою керек. Оң және сол ұяшықтың стилін тура сипаттауға болады. Бірақ сайтта салымды көп қолдану үшін бөлек класс қолданған дұрыс.
1-мысал. Кестені қолдану
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; }
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black" td
tr
table
body
html
Кестені қолданудың бірнеше ерекшелігі бар. Терезе көлемін өзгерту кезінде кесте ені бойынша құрылады. Сондықтан салымдар әрқашан көрінеді және міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер терезелерінің кішірейгенін көруге болады. 2-мысалда span тегасы қолданылады, оның көмегімен салымдар жасалынады. Әр түрлі блоктар бір бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.[14].
2-мысал. SPAN тегін қолдану
style
.open { border: solid 1px black; border-right: none; border-bottom: solid 1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; width: 24%; padding: 4px }
style
span style="border-bottom: solid 1px black; width: 10px" spanspan class=openЧебурашкаspanspan class=closeКрокодил Генаspanspan class=closeШапоклякspanspan class=closeКрыса Ларисаspanspan style="border-left: solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px" span
Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі салымдарды құруға болады. 3-суретте түгенделген салымның мысалы көрсетілген, бұл жағдайда белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
3-сурет.
3-мысалда осындай салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан кесте қолданылады.[13].
3-мысал. Салымдарды кесте арқылы құру
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none; font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }
.close { border: solid 1px black; border-right: none; text-align: center; padding: 4px}
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black" td
tr
tr
td bgcolor="#CFD6D4" colspan="6" height=10td
tr
table
body
html
Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр сызықты форматтайды. Оның ені мен түсі height және bgcolor ұяшықтарының ерекшелігімен ауысады.
Скриптер.
Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы динамикалық басқарылуы HTML құжатымен байланысқан программа арқылы іске асады. Мұндай программаларды скриптілер деп атайды немесе басқа әдебиеттерде кездесетіндей - сценарийлер деп атауға болады. Скриптілер SCRIPT тегі арқылы сипатталады, яғни оның құрамында программаға немесе анықталған тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері қолданылады - JavaScript және VB Script.
Скриптерді құру
Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең тарағанының ерекшелігі - бұл Script контейнерінің ішінде программаның орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында программаны қамтиды.
Скрипт жазылу синтаксисы;
script language="язык программирования" type="тип MIME" src="имя файла" Текст программы
script
Language параметрі скрипттің жазылу тіліне нұсқайды, ол JavaScript немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына нұсқа (версия) нөмірін қосады. Мысалы JavaScript 1.3 (1-мысал).
1-мысал. Браузер қолдайтын тілдерді анықтау
html
head
script language="VBScript" VB = True script
script language="JavaScript" JS = 1; script
script language="JavaScript1.1" JS11 = 1; script
script language="JavaScript1.2" JS12 = 1; script
script language="JavaScript1.3" JS13 = 1; script
script language="JavaScript1.4" JS14 = 1; script
script language="JavaScript1.5" JS15 = 1; script
script language="JavaScript"
document.write("bПоддерживаемые языки:bbr");
if(window.JS) document.write("JavaScriptbr");
if(window.JS11) document.write("JavaScript 1.1br");
if(window.JS12) document.write("JavaScript 1.2br");
if(window.JS13) document.write("JavaScript 1.3br");
if(window.JS14) document.write("JavaScript 1.4br");
if(window.JS15) document.write("JavaScript 1.5br");
if(window.VB) document.write("Visual Basicbr");
script
head
body
...
body
html
орындаудың нәтижесі төменде көрсетілген
Language параметрін көрсету ұсынылады, себебі егер, браузер программалау тілін анықтамаса, онда скрипт қабылдамайды және орындамайды да. Сонымен қатар, HTML 4.0 нұсқасында осы параметрді қолдану аса тиімді емес. Оның орнына type параметрін қолданған дұрыс, ал ол анықталған тіл үшін MIME типін нұсқайды: JavaScript үшін - textjava script, ал VB Script үшін - textvb script. Бірақ кейбір браузерлер type параметрін түсіне алмайды, сондықтан language және type екі атрибутын бір уақытта берген дұрыс. Егер браузер type параметрінің мәнін анықтамаса, онда language мәні орындалмайды.
script language="JavaScript" type="textJavaScript"
JavaScript тіліндегі бағдарлама
script
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді, яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі шақырылуда скрипт тез шақырылады.
script language="JavaScript" type="textJavaScript" src="main.js"script
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері
Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз көлемде орналасады. Көп жағдайларда скриптілердің орналасуы программа жұмысына мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте құжат басына орналастырады. Программалық құралдар арқылы объектілерді құруда скриптілерді құжаттың дәл өзіне орналастырып, document.write немесе document.writeln әдісінің көмегімен нәтижесін шығарады.Ол 2-мысалда көрсетілген.
2- мысал. Скрипт көмегімен Кесте құру
html
body
table width=400 border=1
script language="JavaScript"
for (i=1; i6; i++) {
document.writeln("tr");
for (j=1; j6; j++) document.write("td" + i + j + "td");
document.writeln("tr");}
script
table
body
html
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Пәндер
- Іс жүргізу
- Автоматтандыру, Техника
- Алғашқы әскери дайындық
- Астрономия
- Ауыл шаруашылығы
- Банк ісі
- Бизнесті бағалау
- Биология
- Бухгалтерлік іс
- Валеология
- Ветеринария
- География
- Геология, Геофизика, Геодезия
- Дін
- Ет, сүт, шарап өнімдері
- Жалпы тарих
- Жер кадастрі, Жылжымайтын мүлік
- Журналистика
- Информатика
- Кеден ісі
- Маркетинг
- Математика, Геометрия
- Медицина
- Мемлекеттік басқару
- Менеджмент
- Мұнай, Газ
- Мұрағат ісі
- Мәдениеттану
- ОБЖ (Основы безопасности жизнедеятельности)
- Педагогика
- Полиграфия
- Психология
- Салық
- Саясаттану
- Сақтандыру
- Сертификаттау, стандарттау
- Социология, Демография
- Спорт
- Статистика
- Тілтану, Филология
- Тарихи тұлғалар
- Тау-кен ісі
- Транспорт
- Туризм
- Физика
- Философия
- Халықаралық қатынастар
- Химия
- Экология, Қоршаған ортаны қорғау
- Экономика
- Экономикалық география
- Электротехника
- Қазақстан тарихы
- Қаржы
- Құрылыс
- Құқық, Криминалистика
- Әдебиет
- Өнер, музыка
- Өнеркәсіп, Өндіріс
Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.
Ақпарат
Қосымша
Email: info@stud.kz