Веб-бағдарламалаудан дәрістер



1. Глоссарий
2. Дәрістер
3. Зертханалық жұмыстар
4. Студенттердің өздік жұмыстарының жоспары
HTML –да тегтік модельдер құжаттың белгілеулері болыпе табылады Тегтік модель құжатты тегпен басталып және аяқталатын контейнерлердің жиынтығы сияқты сипаттайды. Яғни НТМL құжаты қарапайым АSСII-файлы сияқты көрсетіледі .
Көбінесе НТМL құжаттарының тегтерін түсіну және қолдану оңай , өиткені олар ағылшын тілінің сөздерімен пайдаланылған қысқартуларды және белгіленулерді түсінеді. НТМL – тегі қажет емес тегтің атрибуттар тізімінен кейін болатын аттан құралады. Тегтің мәтіні бұрышты жақшалардан тұрады (< және >).Тегтің ең қарапайым оңай вариянты – бұрыштық жақшаларға негізделген аты. Мысалға: <HEAD> немесе . Қиын тегтер үшін, функцияның тегтерін видео өзгерту үшін автормен анықталған дәл мағынасы бар болатын атрибуттардың айырмашылығы сипатталады.
Тегтердің атрибуттары атымен жүреді және бір немесе бірнеше табуляциялардың белгілерімен біріншісі екіншісінен бөлінеді. Тегте атрибуттардың жазылу реті қажет емес. Атрибуттардың мағынасы, егер ондай бар болса ,атрибуттардың атынан кейін тұратын теңдік белгісінен кейін тұрады. Егер атрибуттың мағынасы бір сөз немесе сан болса,,онда оны қосымша белгілемей – ақ теңдік белгісінен кейін көрсетуге болады. Барлық қалған белгілеулерді бір (‘) немесе екі (“) тырнақшалармен аяқтау керек, әсіресе егер олар бірнеше пробелдармен бөлінген сөздерден тұрса. Атрибуттың ұзындығының мағынасы 1024 таңбамен шектелген. Атрибуттардың мағынасын айтуға болмайтын, тегтердің және атрибуттардың аттарында таңбалардың регисті саналмайды. Мысалы, HREF атрибутының мағынасы ретінде басқа құжаттарда URL- ді енгізу кезінде керекті регистрді қолдану қажет.
Көбінесе НТМL-тегі арасында мәтін және құжаттардың басқа элементтері орнласатын бастапқы және соңғы компанеттерден тұрады.
Соңғы тегтің аты бастапқы тегтің атымен бірдей, соңғы тегтің алдына қисық сызық (/) таңбасы қолданылады. Мысалы : шрифт тегінің – курсив түрі үшін , оны жабатын қос былай белгіленеді - , ал тақырып тегі үшін <ТIТLЕ>, оны жабатын қос былай болады - . Соңғы тегтер ешқашан атрибуттардан тұрмайды. Тегтер мағынасы әмбебап программалау тіліндегі тырнақшалардағы "begin/end" түсінігіне жақын.
Жазылған тегті қолдану кезінде құжатта ерекше назар аударып отыру керек. Соңынан бастап біріншісіне дейін жазылған тетерді жауып отыру керек. Кейбіреуі автономды элементтер болғандықтан НТМL-тегтері соңы элементтерден тұрмайды.Мысалы графикалық бейне құжатына қою үшін, бейне тегі қолданылады.Сондай-ақ автономды тегтерде жолдарды бөлу (
), көлденең сызық (
) және қөрініс мазмұнына әсер етпейтін құжат туралы ақпараттан тұратын тегтер, мысалға: <META> және <BASE>.
Кейбір жағдайларда құжаттарда соңғы тегтерді жіберуге болады. Браузердің көпшілігі құжаттағы мәтінді Большинство браузеров реализованы так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. <Р>.
Ең көп таралған тег абзац тегі -

өйткені оны құжаттарда өте жиі қолданады, кейде оны әр абзацтын басына қояды. Бір абзац біткен кезде, келесі тег

браузерге: «Алдындағы абзацты аяқтап келесіні бастау керек» деп сигнал береді. Афторлардың көбі абзацтың соңғы тегін қолданбайды.
Басқада соңғы тегтер бар, браузерлер жақсы жұмыс істейтін. Мысалы НТМL-дың соңғы тегі </HTML>. Денгн менде құжатты құруда шатаспау және қате кетірмес үшін соңғы тектерді мүмкіндігінше қолданып отыру керек.
Жалпы HTML форматында контейнерлерді құрау схемасының жазылу түрі:
"контейнер" := <"тегтің аты" "атрибуттардың тізімі">
контейнер мазмұны

НТМL тегтерінің топтары.
Барлық НТМL тегтернің тағайындалуы мен әрекеттесу орталарын келесі негізгі түрлерге бөліп көрсетуге болады;
• Құжаттың құрлымын анықтайтындар;
• Гипермәтін блоктарын өңдеу (параграфтар, тізімдер, кестелер, суреттер);
• Гипермәтіндік сілтемелер немесе закладки;
• Диалог ұйымдарыүшін формалар;
• Программаны шақыру.
Гипермәтіндік желінің құрлымы гипермәтіндік сілтемелермен беріледі. Гипермәтіндік сілтеме - бұл сілтемесі анықталған тематикалық, логикалық немесе құжатпен қандайда бір басқа тәсілмен байланысқан HTML құжатының басқа адресі немесе Internet – тің ақпараттық ресурсы.
WWW жүйесінде гипермәтіндік сілтемелерді жазу үшін, Universe Resource Locator.деп аталатын арнайы форма өңделіп шығарылған. Бұл өңделген форманы қолдануды келесі мысалда көруге болады:
Бұл мәтін

Гипермәтіндік сілтеме
- дан тұрады.
Жоғарыда көрсетілген мысалда HTML – де якарь (anchor) деп аталатын "A" тегін URL формасында бұл сілтемені жазу үшін, гипермәтіндік сілтемені (Hypertext Reference) білдіретін "HREF" атрибутын қолданады. Берілген сілтеме "polyn.net.kiae.su" желіде "http" протоколымен жүзеге асырылатын рұқсат "altai" директориясында "index.html" атпен жазылған құжатты көрсетеді.
HTML – гипермәтіндік сілтеме екі класқа болінеді: жалпы және контексті гиперметіндік сілтеме. Жалпы сілтемелер толықтай барлық құжаттармен байланысқан және құжатың кез келген фрагментің көру кезінде қолдану мүмкін уақытта, жоғардағы мысалда корсетілгендей, контекісті сілтемелер құжат денесінде вмантированый. Стандартты тілде, оның пайда болған кезінен бастап екі класс сілтемелері бар, бірақ алғашқы кезден бастап әйгілілік контекістік сілтемелерді қолданған. Бұл әйгілілік пайдалану механизімі жалпы сілтемелерді түгелдей "атрофирлеуге" әкеп соқты.
HTML-құжатының құрлымы бірін-біріне қойған контейнерлерді қолдануға мүмкіндік береді. Құжаттың өзі – бұл <HTML> тегінен басталатын және </HTML> тегімен аяқталатын үлкен бір контейнер:
<HTML> құжаттың мазмұны </HTML>
HTML контейнері немесе гипермәтіндік құжат екі қойылған контейнерден тұрады: құжаттың тақырыбы (HEAD) құжаттың денесі (BODY):
Класикалық құжаттың қарапаймы түрін қарастырайық:
Netscape Communication компаниясы фрейм оргонизациясының мүмкіншілігімен құжаттың класикалық формасын кеңейтті, онда жұмыс терезесін бірнеше бағынышсыз фреймдерге болуге болады. Әр фреймда өзінің HTML беті жазылған.


МАЗМҰНЫ

Глоссарий
Дәрістер
Зертханалық жұмыстар
Студенттердің өздік жұмыстарының жоспары

1. Глоссарий
1.1. Желі арендасы (англ. dedicated) – Сіздердің жобаларыңыздың
тапсырмаларында сконфигурирленген, арендада физикалық желілер арасындағы
қызмет .
1.2. Администратор домена – доменнің аты тіркелген түр.
1.3. Веб-сайт (веб-сервер, Web-сайт, Сайт; англ. Web site; Site) –
Мағынасымен біріктірілген, сілтемелермен қосылған және бір веб-желіде
орналасқан қайталанатын дизайнерлермен веб - беттердің жиынтығы.
1.4. Веб-страница (web-page) – Веб-сайтта Интернет желісінде орналасқан
ақпараттан тұратын бет.
1.5. Домен (Domain) – Internet желісінің құрылымдық бірлігі.
1.6. Интернет (сеть интернет, internet) - TCPIP протоколында негізделген
бір адрестік кеңістікте бір бірімен өзара байланысқан бүкіл әлемдік
ақпарат желісі .
1.7. Протокол - мәліметтердің берілуінде функционалдық блогтардың мінезін
анықтайтын стандарт .
1.8. Протокол Интернет - интернет үшін жасалған протоколдардың
(стандарттардың) жинағы :
HTTP- өз компьютерлеріңіздің браузерінің көмегімен веб - сайтты қараған
кезде, сілтемелермен жұмсайтын немесе іздеу кезінде осы протоколды
қолданасыз.
SMTP,POP,IMAP – Бұл протоколдар электронды поштаны жіберу, кабылдау және
карап шығу үшін арналған FTP – Интернетте файлдармен алмасу үшін арналған
мәліметтерді жіберетін протокол (File Transfer Protocol).
1.9. Желінің орналасуы (колокейшн; англ. colocation) – тұрақты электрмен
қоректендіру, үйлесімді температура сияқты, техниклық жабдықтарды
функционерлеу шарттарын камтамассыз ету ,Интернет желісінде жоғары
жылдамдығы бар телекоммуникациялық түйіндерде, сіздердің желі
жабдықтарыңыздың орналастыру қызметі.
1.10. Интернет желі (Интернет-желі; анғл. Internet Server) -
Желігеқосылған мықты сенімді компьютер, онда клиенттерге ортақ ресурстарға
және осы ресурстарды басқарушыларға рұқсат беруді орындайтын программа.
1.11. Хостинг (веб-хостинг: анғл. hosting, web-hosting) – қолданушыға
желінің кеңістігінің бір бөлігін арендаға беру және функционалдылықты,
қауіпсіздікті пайдаланушыларға өзінің веб-сайтын құру мақсатында
хакерлерден қорғауды қамтамассыз етілген программалық қамтамассыз етуді
аредаға беру.
1.12. BBS – Хабарландырудың электронды тақтасы (Bulletin board system)
1.13. Bit – бит. Ақпараттың минималды бірлігі. Биттардың сәйкестігі әріппен
, санмен, сигнал берумен, қайта қосылуды орындаумен немесе басқа
функциялармен берілген.
1.14. BPS - битс. 1 секундта бит немесе бод. Мәліметтердің берілу
жылдамдығының өлшемі. Мысалға модем әдетте 56000 BPS жылдамдықта
жіберіледі.
1.15. Browser (броузер, браузер) – программалық қамтамассыз ету, желіде
интерактивті іздеу , қарау, табу және мәліметтерді өңдеу үшін мүмкіндік
беретін грнафикалық интерфейс . Мысал үшін мынандай программалар клтіріледі
Netscape Navigator, Mozilla, Opera, MS Internet Explorer және т.б.
1.16. Cern – ЦЕРН. Европейлік лобараторияда түиінде функцияның бөлімдері
бойынша World Wide Web - тің бірінші конференциясы өткізілген.Сондықтан
оны World Wide Web – тің туған жері деп есептейді. Технологиямен және WWW
стандартымен жұмыс World Wide Web (W3O, www.w3.org түйін)
организациясына берілді. http:www.cern.ch
1.17. Chat – чат. Бұл термин интерактивті конференциялар үшін арналған
көптеген жүйелерді сипаттайды.Сондай жүйелерге мысал: IRC, ICQ, WebChat,
prodigy.
1.18. CGI - Common Gateway Interface веб-сервермен қолданбалы
программалардың сыртқы стандарттарының байланысы болып табылады 1.19.
Communication Link – байланыс каналы.Екі соңғы пайдаланушылар байланысы
үшін арналған программалық қамтамассыз ету және жабдықау.
1.20. CompressionDecompression – ораматүйінді шешу. Жіберу немесе сақтау
үшін мәліметтерді қысуға мүмкіндік беретін сигналдарды кодтаукодтан
шығару әдісі.
1.21. Connection – байланыстыру. Белгіленген түйіндердің немесе комутация
жасаушы тізбектердің арасындағы байланыс.
1.22. Cyberspace – киберкеңістік. Бірінші рет "Neuromancer" Вильям
Гибсонның (William Gibson) жасанды интелекттің тікелей желі организациясы
туралы романында қолданылған термин және компьютерлік коммуникцияның
коллективті сферасына (коллективной сфере) жатады
1.23. Download – жүктеу. Мәліметтердің немесе программалардың бір
құрылғыдан екінші құрылғыға жібереілуі.
1.24. FAQ - Frequently Asked Question. Көінесе жиі қойылатын сұрақтар мен
оларға жауаптар ЧоВо термині қолданылады.
1.25. File Server – файлдық желі. Жойылған қолданушылар үшін фаелдарға
кіруді қамтамассыз ететін компьютер.
1.26. Finger – берілген түйінде желіні қолданушылар туралы керекті
мағлұматтарды тауып беретін протокол.
1.27. Flame – флейм. Форумда немесе чатта ережелердін бұзылыуымен
эмомоционалды таластар (споры).
1.28. Gateway – шлюз. Желілерді біріктіретиін түйін. Интернетке қосылуды
орнатқан кезде шлюздың адресын дұрыс көрсету керек.
1.29. GIF – графикалық формат (Graphics Interchange Format). Интернетте
сонымен қатар веб-серверде фаелдардың бейнелері үшін арналған стандартты
формат.
1.30. GUI - графикалық интерфейс (Graphical User Interface). Графикалық
пайдаланушылық интерфейс.
1.31. Home – Үй беті. Сайттын бастапқы беті, әдетте сипатталатын
мінездемелер туралы мағлұматтардан тұрады.
1.32. HTML (Hyper Text Markup Language). Веб-сайттар үшін жазылған
беттердің "негізгі" тілі.
1.33. HTTP (hypertext transfer protocol). Қарап шығуға және жеке
пайдаланушыларға Бас компьютермен немесе желімен құжаттарды жіберуге
көмектесетін протокол
1.34. Hyperlink – сілтеме. Веб-сайтта әртүрлі беттер арасындағы байланыс.
1.35. Hypermedia – гиперорталық. Түйндерде сілтемелердің көмегімен
біріктіретін ақпараттарды дискретті көрсету әдісі. Мәліметтер мәтіндік,
графикалық, бейнежазбалық, үнтаспалық, мультипликациялық, фотосурет немесе
құжатнаманың орындалуы түрде көрсетілуі мүмкін.
1.36. Hypertext – гипермәтін. Басқа беттерге сілтеме жасаудан тұратын
мәтін, ауысулар орындалуы мүмкін ресурстары немесе серверлері.
1.37. JPEG, JPG - графикалық формат (Joint Photographic Experts Group) –
сапасын жғалту мен көріністердің жинағы үшін пайдаланатын әйгілі әдіс.
Көбінесе фотосуреттер үшін қолданылады.
1.38. Modem - модем (MODulator-DEModulator). Аналогтық жүйелердің комігімен
сандық мәліметтерді орындайтын құрылғы. Мысалға, телефон линиялары арқылы.
1.39. Multimedia – мультимедиа. Бейнежазбалар мен үнтаспалардың қолдауымен,
Компьютерлік жүйелер.
1.40. Page – страница. Веб-сайтта жариаланған құжат.
1.41. PHP - Ашық бастапқы кодпен кең қолданылатын жалпы тағайындалған тілі
болып табылады. PHP Web- тің кіріспесін жасау және HTML- кодында қолданылуы
ушін құрылған.
1.42. PPP (Point to Point Protocol). Әдетте модемді қолданумен, жойылған
пайдаланушылар желісіне қосылу, үшін арналған протокол.
1.43. Site - сайт, түйін. HTTP протоколының көмегімен көру үшін ашық
виртуальді немесе шынайы интернет желісі.
1.44. SSL (Secure Socket Layer) – интернет желілері және компьютермен
колданушылар арасында берілетін ақпараттарды шифрлеу үшін қолданылатын
протокол.
1.45. URL – Интернет адресі (Uniform Resource Locator) – Протокол, желі
аты, файл каталогының жолы және файлдың аты көрсетілетін Интернет бетінің
адресінің жазба түрі. Мысалы ушін: http:www.plusweb.ruindex.shtml
1.46. VRML – үш өлшемді графиктермен интерактивті кеңістікті ауысуда үшін
Web бетін форматтауға арналған вертуальді шынайы модельденген тіл (Virtual
Reality Modeling Language).
1.47. Webmaster - Web-мастер. Веб – сервердің жүйелік администраторы, кейде
Веб-мастер деп Веб-сайтта қызмет ететін дизайнерді немесе програмисті
айтады.
1.48. WWW (World Wide Web)- Бір құжаттан екінші құжатқа жылдам ауысу үшін
жүйелік сілтемелерден тұратын мәтіндік , графикалық және ақпарат
мультимедиясын қарастыруға арналған Internet қызметі.

2. Дәрістер

1–Дәріс. Гипермәтіндік белгілеулердің принциптері.

Дәріс мазмұны:
• Құжаттардың құрылымы.
• НТМL тегінің топтары.

Гипермәтіндік белгілеулердің принциптері. Құжаттардың құрылымы.
HTML –да тегтік модельдер құжаттың белгілеулері болыпе табылады Тегтік
модель құжатты тегпен басталып және аяқталатын контейнерлердің жиынтығы
сияқты сипаттайды. Яғни НТМL құжаты қарапайым АSСII-файлы сияқты
көрсетіледі .
Көбінесе НТМL құжаттарының тегтерін түсіну және қолдану оңай , өиткені
олар ағылшын тілінің сөздерімен пайдаланылған қысқартуларды және
белгіленулерді түсінеді. НТМL – тегі қажет емес тегтің атрибуттар
тізімінен кейін болатын аттан құралады. Тегтің мәтіні бұрышты жақшалардан
тұрады ( және ).Тегтің ең қарапайым оңай вариянты – бұрыштық жақшаларға
негізделген аты. Мысалға: HEAD немесе i. Қиын тегтер үшін, функцияның
тегтерін видео өзгерту үшін автормен анықталған дәл мағынасы бар болатын
атрибуттардың айырмашылығы сипатталады.
Тегтердің атрибуттары атымен жүреді және бір немесе бірнеше
табуляциялардың белгілерімен біріншісі екіншісінен бөлінеді. Тегте
атрибуттардың жазылу реті қажет емес. Атрибуттардың мағынасы, егер ондай
бар болса ,атрибуттардың атынан кейін тұратын теңдік белгісінен кейін
тұрады. Егер атрибуттың мағынасы бір сөз немесе сан болса,,онда оны қосымша
белгілемей – ақ теңдік белгісінен кейін көрсетуге болады. Барлық қалған
белгілеулерді бір (‘) немесе екі (“) тырнақшалармен аяқтау керек, әсіресе
егер олар бірнеше пробелдармен бөлінген сөздерден тұрса. Атрибуттың
ұзындығының мағынасы 1024 таңбамен шектелген. Атрибуттардың мағынасын
айтуға болмайтын, тегтердің және атрибуттардың аттарында таңбалардың
регисті саналмайды. Мысалы, HREF атрибутының мағынасы ретінде басқа
құжаттарда URL- ді енгізу кезінде керекті регистрді қолдану қажет.
Көбінесе НТМL-тегі арасында мәтін және құжаттардың басқа элементтері
орнласатын бастапқы және соңғы компанеттерден тұрады.
Соңғы тегтің аты бастапқы тегтің атымен бірдей, соңғы тегтің алдына
қисық сызық () таңбасы қолданылады. Мысалы : шрифт тегінің – курсив түрі
үшін i, оны жабатын қос былай белгіленеді - i, ал тақырып тегі үшін
ТIТLЕ, оны жабатын қос былай болады - ТIТLЕ . Соңғы тегтер ешқашан
атрибуттардан тұрмайды. Тегтер мағынасы әмбебап программалау тіліндегі
тырнақшалардағы "beginend" түсінігіне жақын.
Жазылған тегті қолдану кезінде құжатта ерекше назар аударып отыру
керек. Соңынан бастап біріншісіне дейін жазылған тетерді жауып отыру керек.
Кейбіреуі автономды элементтер болғандықтан НТМL-тегтері соңы элементтерден
тұрмайды.Мысалы графикалық бейне құжатына қою үшін, бейне тегі IMG
қолданылады.Сондай-ақ автономды тегтерде жолдарды бөлу (BR), көлденең
сызық (HR) және қөрініс мазмұнына әсер етпейтін құжат туралы ақпараттан
тұратын тегтер, мысалға: META және BASE.
Кейбір жағдайларда құжаттарда соңғы тегтерді жіберуге болады.
Браузердің көпшілігі құжаттағы мәтінді Большинство браузеров реализованы
так, что при обработке текста документа начальный тег воспринимается как
конечный тег предыдущего. Р.
Ең көп таралған тег абзац тегі - P өйткені оны құжаттарда өте жиі
қолданады, кейде оны әр абзацтын басына қояды. Бір абзац біткен кезде,
келесі тег P браузерге: Алдындағы абзацты аяқтап келесіні бастау керек
деп сигнал береді. Афторлардың көбі абзацтың соңғы тегін қолданбайды.
Басқада соңғы тегтер бар, браузерлер жақсы жұмыс істейтін. Мысалы
НТМL-дың соңғы тегі HTML. Денгн менде құжатты құруда шатаспау және қате
кетірмес үшін соңғы тектерді мүмкіндігінше қолданып отыру керек.
Жалпы HTML форматында контейнерлерді құрау схемасының жазылу түрі:
"контейнер" := "тегтің аты" "атрибуттардың тізімі"
контейнер мазмұны " тегтің аты "

НТМL тегтерінің топтары.
Барлық НТМL тегтернің тағайындалуы мен әрекеттесу орталарын келесі
негізгі түрлерге бөліп көрсетуге болады;
• Құжаттың құрлымын анықтайтындар;
• Гипермәтін блоктарын өңдеу (параграфтар, тізімдер, кестелер,
суреттер);
• Гипермәтіндік сілтемелер немесе закладки;
• Диалог ұйымдарыүшін формалар;
• Программаны шақыру.
Гипермәтіндік желінің құрлымы гипермәтіндік сілтемелермен беріледі.
Гипермәтіндік сілтеме - бұл сілтемесі анықталған тематикалық, логикалық
немесе құжатпен қандайда бір басқа тәсілмен байланысқан HTML құжатының
басқа адресі немесе Internet – тің ақпараттық ресурсы.
WWW жүйесінде гипермәтіндік сілтемелерді жазу үшін, Universe Resource
Locator.деп аталатын арнайы форма өңделіп шығарылған. Бұл өңделген форманы
қолдануды келесі мысалда көруге болады:
Бұл мәтін
A HREF="http:polyn.net.kiae.sualta iindex.html"
Гипермәтіндік сілтеме A - дан тұрады.
Жоғарыда көрсетілген мысалда HTML – де якарь (anchor) деп аталатын "A"
тегін URL формасында бұл сілтемені жазу үшін, гипермәтіндік сілтемені
(Hypertext Reference) білдіретін "HREF" атрибутын қолданады. Берілген
сілтеме "polyn.net.kiae.su" желіде "http" протоколымен жүзеге асырылатын
рұқсат "altai" директориясында "index.html" атпен жазылған құжатты
көрсетеді.
HTML – гипермәтіндік сілтеме екі класқа болінеді: жалпы және контексті
гиперметіндік сілтеме. Жалпы сілтемелер толықтай барлық құжаттармен
байланысқан және құжатың кез келген фрагментің көру кезінде қолдану мүмкін
уақытта, жоғардағы мысалда корсетілгендей, контекісті сілтемелер құжат
денесінде вмантированый. Стандартты тілде, оның пайда болған кезінен бастап
екі класс сілтемелері бар, бірақ алғашқы кезден бастап әйгілілік
контекістік сілтемелерді қолданған. Бұл әйгілілік пайдалану механизімі
жалпы сілтемелерді түгелдей "атрофирлеуге" әкеп соқты.
HTML-құжатының құрлымы бірін-біріне қойған контейнерлерді қолдануға
мүмкіндік береді. Құжаттың өзі – бұл HTML тегінен басталатын және HTML
тегімен аяқталатын үлкен бір контейнер:
HTML құжаттың мазмұны HTML
HTML контейнері немесе гипермәтіндік құжат екі қойылған контейнерден
тұрады: құжаттың тақырыбы (HEAD) құжаттың денесі (BODY):
Класикалық құжаттың қарапаймы түрін қарастырайық:
Netscape Communication компаниясы фрейм оргонизациясының мүмкіншілігімен
құжаттың класикалық формасын кеңейтті, онда жұмыс терезесін бірнеше
бағынышсыз фреймдерге болуге болады. Әр фреймда өзінің HTML беті жазылған.

Өзін тексеруге арналған сұрақтар:
1. Интернетте адрисация: ip-адресі және URL.
2. HTML тілі. Таңбалар, тегтер, элементтер, атрибуттар.

Ұсынылатын әдебиеттер:
1. Веб-дизайнДмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлинникеМатросов, Сергеев, Чаунин – СПб: BHV, 2000 –
672 стр.

2–Дәріс. HTML-құжатының контейнері.

Дәріс мазмұны:
• Құжат бетінің тегі
• Белгілеуді басқару тегі
• Символдарды бейнелеуді басқару тегі
• Бейнелеу формасын басқару тегі
• Табуляция
• Тізім
• Гипермәтіндік сілтеме

HTML-құжатының контейнері.
Әрбір құжаттың құрама бөліктерінде оның ішінде қолданылатын өзінің
контейнер жинағы болады. Құжат денесінің контейнерлері тақырыпта немесе
FRAMSET контейнерінде қолданылмайды. Контейнерлердің әрбір тобын толықтай
қарастырайық.
HTML-HEAD құжатының тақырыбының контейнерлері
Құжат тақырыбы атрибут қажет етпейді. Тақырып тегінің басты
тағайындалуы – бұа барлық құжаттардың бейнелеу параметрлерін түгелдей
сипаттау. Бұндай параметрлерге құжаттарды бейнелеу стилін, гипермәтіндік
сілтеменің жалпы базалық адресін, жалпы гипермәтіндік сілтеме,
идентификатор және құжат атын және т.б. жатқызуға болады. Біз тек қана жиі
кездесетін контейнерлерді қарастырамыз.
TITLE
Такырып тегінде жиі қолданылатын құжат аты болып табылады.
TITLE келесі синтаксисті алады
TITLE Құжат аты TITLE
TITLE тегінің мазмұны құжат атының алаңында бейнеленеді.
BASE
BASE тегі URL формасында гипермәтіндік сілтеме көрсету формасымен
байланысты. URL спецификациясы құжат адресатының екі формасын анықтайды:
толық және толық емес. HTML URL адресінің толықтай формасын қолдануға
рұқсат етеді. Сонымен спецификацияның екінші формасын қолдану үшін, оны
бірдемемен негіздеу керек, базалық адресті сурау толық еместен URL-дің
толық формасын қалыптастыруда қолдануға болады. BASE тегі осы базаны
анықтауға мүмкіндік береді.
ISINDEX
HTML-құжатын кілттік сөз бойынша іздеу мүмкіндігі құжат тақырыбының
ISINDEX тегі арқылы анықталады. Тілдің алғашқы версиясында берілген тег
қосымша атрибут қабылдамады. Егер сервер кілттік сөз бойынша сұраныс
жасайтын болса, онда ол автоматты түрде тақырыпқа ISINDEX тегін қояды.
Кілттік сөз тізімін клиент құжат адресіне “?” символдан кейін жазады.
Түсінікті, сұранысты сервер атқарады, “?” символдар түгел болған кезде
іздеу машинасына айналды. HTML-құжаты “жазғы” программасымен, сонда кілттік
сөз “?”-кейін осы программаның адресіне жазылады. Тілдің алғашқы
версиясында өңдеу программасын көрсету және “SEARCH ISINDEX” стандартының
орнына сөйлемді сұрау мүмкіндігі туды.
ISINDEX HREF=
http:polyn.net.kiae.sucgi-binse arch
PROMPT=”Enter Keywords:”
Көрсетілген мысалда HREF атрибуты сұранысты өңдеу программасының адресін
анықтайды, ал атрибут PROMPT – шақыру мазмұнын анықтайды.
META
META тегі HTML спецификациясында жоқ құжат тақырыбының конструкциясын
анықтау үшін қажет. Ол үш атрибут қабылдайды: NAME, CONTENT, HTTP-EQUIV.
Берілген текті қолдану қиындығы, осы тег арқылы еңгізілетін конструкцияны
интерпретациялау үшін, сервис немесе интерфейс қолданушылар осы
конструкцияны кеңейтуі және қолдануы керек. Осындай жұмыс түрі үшін
программа SGML конструкциясын түсіндіріп беру(интерпретировать) керек.
Берілген тегті тәжірибеде қолданудың бірден-бір түрі тақырыпқа анықталған
HTTP-EQUIV атрибуты арқылы протокол бойынша HTTP ақпаратын қосу.
META HTTP-EQUIV=”Keywords”
CONTENT=”Plasma, Nuclear Physics”
Осындай қолдану кезінде почтаны жіберуге ыңғайлы болу үшін, HTTP-пакет
тақырыбында мынадай жолдар қосылады: Keywords: Plasma, Nuclear Physics.
Құжат денесінің тегі.
Құжат денесінің тегі интерфейстік қолданушы программасында ақпаратты
көрсетуді басқарады. Олар мәтінде тізілген контекстік гипермәтіндік сілтеме
көмегімен деректер базасының гипермәтіндік құрылымын бейнелейді. Құжат
денесі тұрады:
-иерархиялық контейнер және заставка;
-тақырыптар (Н1-Р6 дейін);
-блоктар(параграфтар, тізімдер, формалар, кестелер, суреттер және
т.б.);
-көлденеңінен белгілеп алу және адрестер;
-мәтіндер, стильдерді жүргізу облыстарына бөлінген(сызылған,
белгіленген, курсивті);
-математикалық бейнелеу, графиктер және гипермәтіндік сілтеме;
BODY
Құжат денесінің тегін бейнелеу BODY тегі арқылы бастап жазылады. HEAD
тегінен айырмашылығы, BODY тегі атрибут қабылдайды:
ID-тег идентификаторы. Тегті атау үшін, сол сияқты гипермәтіндік
сілтеме бойынша нүктелік ауысу түрінде қолданылады. Берілген атрибут құжат
бетінің барлық тегінде бар.
LANG-екісандық ISO-639 код түрінде құжат тілін анықтайды, нүктеден
кейін міндетті емес ISO-3166 форматында қала коды алынады. Тіл стандартын
құраушылардың ниеті бойынша берілген атрибут түсіндіру программасын тану
және көптілді мәтінді бейнелеуді басқару керек. Сонымен қатар Arena да,
арнайы HTML 3.0 иллюстрациялау үшін арналған, ол осы мүмкіндікті іске
асырмайды.
CLASS-“ADDITION.FIRST” типті иерархиялық құрылған ат. Мәтін тегін,
анықталған бейнелеу стилімен байланыстыруға арналған. Қазіргі кезде
қолданылмайды.
Жоғарыда көрсетілген үш атрибут дене тегіне жалпы болып табылады және
алдағы уақытта оларды қарастырмаймыз. Егер атрибут құжат мәтіннің дене
тегінде кеңейтілмесе, онда ол арнайы көрсетіледі.
BACKGROUND-құжат мәтінін бейнелейтін фонды анықтайды, мысалы, HTML-
құжатында фон ретінде үлкен емес графикалық кескін ”bgr.gif” қолданылады.
BODY BACKGROUND =”bgr.gif”
Осы мысалда көрсетілгендей, берілген атрибуттың мәні ретінде URL
формасында қысқартылған адрес қолданылады. Бұл локальдық файл адресі.
Белгілеу тегін басқару.
Тақырыптар.
Тақырыптар құжаттың бастапқы бөлімін қарастырады. Стандартта тақырыптың
алты деңгейі анықталған: Н1-ден Н6-ға дейін. Мәтін, Н1Н1 тегімен
қоршалған, үлкен көлемде болады-бұл басты тақырып. Егер мәтін Н2Н2
тегімен қоршалса, онда ол бірнеше есе кішірек көрінеді; ішкі мәтін
Н3Н3 одан да кішірек және ары қарай Н6Н6 дейін. Кейбір
программалар тақырыптың көп санын қолдануға мүмкіндік береді, бірақ та үш
деңгейден көбі сирек кездеседі, ал бестен көбі тіпті сирек кездеседі.
ALIGN атрибуты.
ALIGN атрибуты мәтінді сол жақ шетке, оң жақ шетке, ортаға және ені
бойынша теңестіруге арналған. Үнсіздік бойынша мәтін сол жақ шетке қарай
теңестіріледі. Берілген атрибутты сол сияқты кестеге және графикке
қолданамыз.

Келесі кесте ALIGN атрибутының мүмкін мәнін анықтайды.

Мән Қолданылуын сипаттау
Left Сол жақ шетке теңестіру
Right Оң жақ шетке теңестіру
Justify Сол және оң жақ шетке теңестіру
Center Ені бойынша теңестіру

Justify мәні интерпрпетацияның барлық программаларында іске
асырылмаған.
Айналдыру (оборачивание)
ALIGN атрибутының көмегімен сіз мәтінді графикалық объектінің
айналасында орап қою болады. Ол үшін IMG SRC=”путьфайл.gif” тегін
графикалық объект тұратын жерге апарып қою керек және ALIGN=LEFT,
ALIGN=RIGHT және ALIGN=CENTER атрибутын қосу қажет. Одан басқа HSPACE= және
VSPACE= атрибутының (олар төменде сипатталады) көмегімен бейнені мәтіннен
айыратын тік және көлденең алаң ұзындығы сұралады. Сонымен қатар бейненің
айналасына рамка құруға және кестені мәтінмен жиектеуге болады.
Жалпы айтқанда, CLEAR барлық блоктық тегтер үшін жалпы болып табылады,
бірақ та барлығына да іске асырылған жоқ.. CLEAR келесі мәндерді
қабылдайды:

Мәні Тағайындалуы
Left Беттің сол жақ шетінде орналасқан суретті өткізу
Right Беттің оң жақ шетінде орналасқан суретті немесе кестені өткізу
All Суреттің немесе кестенің алдында тұрған мәтінді үзу және
төменде жалғастыру

CLEAR атрибутында сандық мәнді де көрсетуге болады:
P CLEAR=”100 pix”
BR тегі
Жолдың аударылымы мәтінді бейнелеудің стандарттар ретін бұзу үшін
қолданылады. Интерпретацияның қарапайым режимінде қолданушының интерфейс
программасы мәтінді автоматты түрде жолдарға бөлу арқылы жұмыс терезесінде
көрсетеді. Бұл режимде мәтінде бар болған соңғы жол ескерілмейді. Кей-кезде
үлкен айқындық үшін басуды жаңа жолдан бастау керек. Ол мақсатта BR тегі
қолданылады. BR тегіндегі CLEAR атрибуты көрсетілген нүктеде объектіні
мәтінмен сүйірлеу(обтекание) үшін қолданылады және содан кейін мәтінді
объекттің ар жағында бос областа жалғастыру үшін. Объекттің ар жағында
жалғасып жатқан мәтін CLEAR атрибутында LEFT, RIGHT және ALL мәндеріне
сәйкес тегістеледі

BR CLEAR =LEFT Мәтін сол жақтағы жақын арадағы бос алаңнан бастап
жалғастырылады
BR CLEAR =RIGHT Мәтін оң жақтағы жақын арадағы бос алаңнан бастап
жалғастырылады
BR CLEAR =ALL Мәтін сол және оң жақтағы алаң бос болғанда
жалғастырылады

NOBR тегі
NOBR тегі (No Break, үзіліссіз) браузерге барлық мәтінді бір жолда
үзіліссіз бейнелеуге нұсқау береді. Егер NOBR тегінде бекітілген мәтін
экранға сыймаса, браузер құжат терезесінің төменгі бөлігіне горизонтальды
айналдыру жолағын қосады. Егер сіз айкын жерден жолды алып тастағыңыз
келсе, сол жерге BR тегін қойыңыз.
Символдарды бейнелеуді басқару тегі
Бұл тегтерді екі классқа бөлуге болады: бейнелеу формасын басқару тегі
(font style) және ақпарат типін сипаттайтын тегтер (information type).
Әртүрлі тегтер бейнелеу кезінде бірдей нәтиже көрсетеді. Ол басты жағдайда
програманы түсіндірушінің жөндеуіне және қолданушының ұнатуына байланысты.
Бейнелеу формасын басқару тегі
Курсив, күшейту, асты сызылған, жоғарғы индекс, төменгі индекс, үлкен
шрифт, кіші шрифт, қызыл, көк, әртүрлі комбинациялар – бетті көркемдеуге
және функциональдауға мүмкіндік береді. Internet Explorer және Netscape
Navigator Face= атрибутының көмегімен шрифты анықтауға болады. Енді бір
бетке бірнеше шрифт түрлерін біріктіруге болады.
SIZE=атрибуты
FONT тегіндегі SIZE=атрибуты берілген областа мәтін мөлшерін сұрауға
мүмкіндік береді. Егер сіз барлық беттің шрифт мөлшерін беру үшін
BACKGROUND SIZE =n тегін қолданбасаңыз, онда үніздік бойынша 3 алынады.
BIG және SMALL тегтері
BIGBIG және SMALLSMALL тегтері арасында орналасқан мәтін сәйкес
келеді.
COLOR=xx атрибуты
Егер сіз өзіңіздің бетіңізді одан әрі әдемілегіңіз келсе, онда FONT
тегіндегі COLOR= атрибутын қолдануыңызға болады және басты шектеу
компьютердегі қолданушылардың түстер палитрасы болады. Әзірше тек қана
танымал браузерлер шрифт түсін бейнелейді.
FONT COLOR= тегін шрифт түсін ауыстыруға қолданады.

Бейнелеу формасын басқару тегітері

Тегтер Мәні
I ... .I Курсив (Italic)
B...B Усиление (BOLD)
TT...TT Телетайп
U...U Асты сызылған
S...S Сызылған текст
BIG...BIG Үлкейтілген фонт
SMALL...SMALL Кішірейтілген фонт
SUB...SUB Жолма-жол символдар
SUP...SUP Жол үсті символдар

Ақпарат типін сипаттайтын тегтер
Тегтер Мәні
EM...EM Типографиялық күшейту
CITE...CITE Цитирование
STRONG...STRONG Усиление
CODE...CODE Мысал кодын көрсетеді (мысалы, программа коды)
SAMP...SAMP Литералықтардың жүйелілігі
KBD...KBD Клавиатура арқылы символдарды еңгізу мысалы
VAR...VAR Айнымалылар
DFN...DFN Анықтау
Q...Q Жақшаға алынған мәтін

Осы тегтерді қолдану кезінде, олардың бейнеленуі программа-интерфейсін
қолданушылардың жөнге келтіруіне байланысты екенін ұмытпаған жөн, олар
гипермәтіндік программа құрушының жөнге келтіруімен сәйкес келмеуі де
мүмкін. Интерфейс жөнге келтірулерін айырбастау стильдерін қолдану,
казіргі кезде проблемалық болып келеді.
DL тегі
(Definition List:DL) тізіміндегі тегті қолдану қарапайым мәтіндік
редакторда шегіністі қолдануды еске түсіреді. DL тегі мәтінді форматтау
үшін құрылған, оңға қарай улкен шегініс арқылы анықталады. DL тегі
номерсіз шегінетін жеке абзацтар және маркерлер құруға арналған. Шегініс ол
жақтан басталады. Егер сіздің бетіңізде бірнеше DL тегі бар болса, онда
мәтін ақырын оңға қарай жылжи бастайды. Анықтау соңында жабылған DL
тегін қойыңыз. Ұмытпаңыз, DL тегі тек қана абзацтың сол жақ шекарасын
хылжытады.
BLOCKQUOTE тегі
Тег мәтіннің сол және оң жағынан орын қосады. Бұл қолайлы тег, ол
мәтінді беттің ортасына орналастыруға мүмкіндік береді. BLOCKQUOTE тегін
бірнеше рет қолданған кезде мәтін ортаға бірнеше рет қысыла береді.
Microsoft Internet Explorer және Netscape Navigator BODY тегінде
LEFTMARGIN=n және TOPMARGIN=n атрибуттарын қолдануға рұқсат етеді.
LEFTMARGIN= атрибуты барлық бет үшін сол жақ орынды береді. TOPMARGIN=
жоғарғы орнын анықтайды. n саны орынның енін пиксель бойынша көрсетеді.
Мысалы, BODY LEFTMARGIN=”40” тегі барлық бет үшін сол жақ енін 40
пиксельде құрады. n арқылы, 0 тең, сол жақ орны шегінеді.
Табуляция
Бұл құралдардың қажеттілігі бұрын пайда болды, тек жақында ғана
құрастырушылар ұсынды. Табуляцияны бірнеше тәсілмен беруге болады.
Ең қарапайым, TAB IDENT=n тегін жазу, онда n жаңа абзацтың алдындғы
еn-бос орындар санын анықтайды. еn-бос орын – өлшеудің типографиялық
бірлігі, сіз қолданатын шрифтағы n әріпінің енімен бірдей. Соған сәйкес
TAB IDENT=4 тегі ені 4 еn-бос орын болатын табуляция символын алады.
Егер сіз бірнеше орынға берілген мөлшерде табуляция символын
қолданғыңыз келсе, онда оның мөлшерін беретін орынға TAB тегін ID=
атрибутымен бірге қойыңыз, мысалы, соған сәйкес:
TAB ID=”tabone”
Енді беттің кез-келген жеріне TAB TO=”TABONE” жазса жеткілікті, және
табуляция символы TABONE тең болады. Сәйкесінше TABTWO, TABTHREE, TABFOUR
ұқсас тәлімен құруға болады.
TAB тегін мәтінде және графикте орналастыруда қолдануға болады.
Тізімдер
Тізімдер мәтін құрылымының негізгі құралдары болып табылады және
белгілеулердің барлық тілдерінде қолданылады. HTML-де келесі тізім
түрлерінен тұрады: номерленбейтін тізім (реттелмеген), номерленетін тізім
(реттелген) және анықтамалдың тізімі. Номерленбейтін тізім тегі (Unordered
Lists UL) және номерленетін тізім тегі (Ordered Lists OL) – бұл HTML
негізі. HTML 3.0 номерленбейтін тізімде маркердің әртүрлі типін таңдауда
тізім тегіне бірнеше атрибуттар қосады. Тізім ортасындағы маркер типін
ауыстыру үшін мынадай LI(List Item) тегіне атрибут қосуға болады. Жаңа
атрибут пайда болған кезде, тізімде қалған маркерлер де осындай түрді
алады.
UL тегі
Номерленбейтін тізім. Номерленбейтін тізім мәтін типін құруға арналған.
тізімнің бірінші элементі
тізімнің екінші элементі
тізімнің үшінші элементі
Берілген тізім келесі түрде жазылады:
UL
LI тізімнің бірінші элементі
LI тізімнің екінші элементі
LI тізімнің үшінші элементі
UL
UL және UL тегі – бұл номерленбейтін тізімнің басы және соңы,
LI(List Item) тегі тізім элементінің тегін береді. Осы тегке қосымша,
тізімді атауға арналған - LH (List Header) бар. Келесі түрдегі
номерленбейтін тізімді бейнелейтін мысал келтірейік:
HR тегі
Горизонтальды сызып алу (horizontal rule) құжатты бөлікке бөлу үшін
қолданылады. Бір ғана HR тегі арқылы бетке мүлдем өзгеше түр беруге
болады. HR тегін тәжірибеде көріңіз және сонда сіз қолданып жүрген
сызықтан өзгеше сызық аласыз.
PRE тегі
Форматтаусыз мәтінді бейнелеу.
BLINK тегі
BLINK тегі оған қосылған мәтіннің жыпылықтауын туғызады.
Гипермәтіндік сілтеме
Жоғарыда қарастырылған мәтінді бейнелеу құралдары, құжаттың басты тегі
- гипермәтіндік сілтемеге – қосымша, сөзсіз маңызды болып келеді.
Гипермәтіндік сілтеме жазу үшін, “зәкір (якорь)” (anchor) деп аталатын
A... ... ..A контейнері қолданылады. Зәкір бірнеше атрибут қабылдайды, ең
негізгісі HREF (Hyper Text Reference) болып табылады. Қарапайым сілтемені
мына түрде жазуға болады:
A HREF=”http:polyn.net.kiae.suinde x.shtml”
Деректер базасының индексі“Жусан”A
HREF атрибутының мәні болып, “polyn.net.kiae.su” машинасында
“index.shtml” құжат адресі табылады, оған рұқсат HTTP протоколы арқылы
беріледі. Осы адрестің жазу формасы универсалды локаторлық ресурс (Universe
Resource Locator) деп аталады және WWW технологиясының құрама бөлімі болып
табылады.
А контейнерінің мазмұны, тег басы және тег соңы аралығында қосылады,
мәтінде контекстік гипермәтіндік сілтемеге арналған түспен бөлінеді.
Web-серверді құрұдың ерекшелігі, онда көрсетілген ақпаратты жеке
бөліктерге бөлуге болады. Жеке бөліктер арасындағы байланыс ұйымдары
гипермәтіндік сілтеме арқылы анықталады.

Өзін тексеруге арналған сұрақтар:
1. html-құжатының құрылымы. Беттің құрылымдық элементтері.Элементтер
типі.
2. WWW-сервисінің жұмыс тәртібі. Сервер және клиент арасында мәлімет
алмасу. Формалар.

Ұсынылатын әдебиеттер:
1. Веб-дизайнДмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлинникеМатросов, Сергеев, Чаунин – СПб: BHV, 2000 –
672 стр.

3–Дәріс. Webтегі графика

Дәріс мазмұны:
• графика өлшемдерін қалай беруге болады;
• активті бейнелер;
• активті бейнені қалай жасауға болады;
• сервердегі активті бейнелер;
• клиенттегі активті бейнелер;
• серверде де, клиентте де жұмыс істейтін активті бейнелер.

Графика
Webтегі ең кең таралған графикалық форматтар болып GIF және JPEG
форматтары болып табылады. Web – бетке бейне қою үшін ең алдымен оны
салып алу қажет немесе дайын бейнені алуға болады. Сурет салудың кез-
келген программасында қарапайым бейнені салу және оны қажет етілген
форматқа сақтау қиынға түспейді. Егер программа бұл форматты қабылдамаса,
онда файлды өңдеу қажет. Бір графикалық форматтың басқа форматқа
өңделуіне арналған бірнеше программалар бар. Суреттерді әртүрлі
программалық пакеттерден немесе Internet Web – беттерінің бірінен алуға
етуге болады. Егер браузер Web – бетті бейнемен бірге шығарса, сәйкес
графикалық файл компьютер жадысында уақытша сақталады. Браузердің
көпшілігінде файлды үнемі локальды дискіде сақтауға рұқсат беретін
командалары бар.Графикалық файлды алудың бірнеше басқа да варианттары
бар:
Бейнелер өзінің ақпараттылығымен пайдалы болуы мүмкін және Web – бетке
көз тартар түр береді. Бейнелерді қолдануда кең таралған жағдайларды
қарастырайық:
- іскерлік беттегі компанияның логотипі;
- жарнамалық хабарландыруға арналған графика;
- әртүрлі суреттер;
- диаграммалар және графиктер;
- шығармашылықтар шрифтер;
- бет авторының қолы;
- графикалық жолдың горизонтальды бөлінді сызық ретінде қолданылуы;
- әдемі маркерленген тізімдерді құруға арналған графикалық маркерлердің
қолданылуы.
Енді Web – бетке бейнені қалай қою керек екендігін қарастырайық. HTML
тегі болып браузер бейнені шығаруды талап ететін IMG келеIMGсі ортақ
форматы табылады:
IMG SRC =”picture.gif”
Тұйықтаушы тег талап етілмейді.Мұндағы SRC – (SouRCe)бастауды
білдіреді, ал файлдың аты шығарылған графикалық файлдың атын білдіреді. Web
– беттегі бейнелер қарапайым мәтін сияқты гипермәтінді сілтемелер ретінде
қолданылуы мүмкін.. Бетті оқушы бейненің үстінен шертеді де, басқа бетке
немесе бейнеге ауысады. Гипермәтінді белгі сияқты бейнені белгілеуде,
мәтінде де қолданылатын A тегі қолданылады, бірақ A және A арасына
IMG бейнесінің тегі қойылады.
A HREF=”файлдың немесе бейненің адресі”
IMG SRC=”picture.gif” A
Бұндай бейненің гипермәтінді сілтеме ретінде қолданылуы қосымша рамка
ретінде.
Шектелген тікбұрыштар және ALT= атрибуттары
Графика бетінің жүктелу уақытын азайту үшін HTML – кодында бейненің
өлшемін анықтау пайдалы. Егер ол беттің жүктелгенінен бұрын белгілі болса,
онда браузер ең басында суретке рамканы апарады, содан кейін бетке мәтінді
жүктей алады. Егер графикалық бейненің өлшемі анықталған болса, онда оған
браузер шектелген тікбұрыш түріндегі орын резервтейді. Графика жүктеліп
жатқан кезде бетті оқушы мәтінді оқи беруіне болады. Бұндай жұмыстың
методикасы - өз оқушыларына деген жұмсақ мінезді қарым – қатынасын
білдіреді.
Графика өлшемдерін қалай беруге болады?
Егер сізде қандай да бір графикамен жұмыс істеу программасы бар
болса, онда бейненің өлшемін анықтау қиын емес. Ең алдымен файлды
графикалық редакторде ашыңыз және суреттің өлшемін пиксельмен анықтаңыз.
Бейне тегінде өз суретіңіздің ені мен ұзындығын мына түрде беріңіз:
IMG SRC= ”picture.gif ” WIDH=413 HEIGHT=356
Егер сіз графикалық бейненің өлшемін көрсетпесеңіз, онда браузер
әрбір суретті толығымен жүктейді және осыдан кейін ғана мәтінді жүктеуге
көшуге болады. Ал бұл көп уақытты алады. Егер өлшемдер беріліп тұрса, онда
көптеген жүргізуші браузерлер қажетті өлшемдегі шектелген тікбұрышты сыза
алады және оны бейнемен төгуге етуді бастайды.
ALT= атрибуты
IMG тегінің ALT= атрибуты қолданушыларға, тек мәтінді көретін
браузерлер (егер браузерде графика режимі өшіп жатса), графиканың бетте
орналасуы немесе оның мақсаттары туралы ақпарат алуына мүмкіндік береді.
Microsoft Internet Explorer бейне шектелген тікбұрыштағы ALT= атрибутынан
мәтінді көрсетеді. Егер Auto Load Image режимі қосылып тұрған жағдайда ғана
Netscape Navigator бұл мәтінді шығарады.
IMG тегі ALT= атрибутымен бірге келесі түрде болады:
Активті бейнелер.
Активті бейнелер (image maps) немесе бейнелер, тышқан батырмасын
сезушілер сіздерге туынды формасындағы графикалық мәзірді өз
тармақтарыңызда құруға мүмкінді береді. Мұндай мәзірді қолдану арқылы
оқушылар барлық тұйықтарда және сіздің Web – тармақ даңғылыңызда серуендей
алады. Активті бейнелер - бұл басқа беттердің URL – на немесе
тармақтарына сілтемеленетін активті облысты деп аталатын жай сурет. Келесі
түрде жұмыс істейтін бейне бар: қолданушы активті бейнелердің IMG тегіндегі
ISMAP атрибуты көмегімен анықталған суретті тышқанмен шерткен кезде, шерту
координаттары Web- серверге беріледі. Сервер картада жіберілген координатты
құрайтын активті облысты іздейді. Егер мұндай облыс бар болса, онда
берілгендер URL картасында активтенеді және қолданушының браузері жаңа
бетке көшеді.
Активті бейненің көмегімен сіз бірден екі есепті шеше аласыз:
өзіңіздің Web – тармағыңыздың мәзірін құра аласыз және онда графика
орналастыра аласыз.
Активті бейнені қайда қоюға болады: серверде немесе клиентте?
Активті бейненің 2 типі бар: серверде және клиентте. Бірінші типтегі
бейнені сервер URL активті облыстың сәйкес берілгендерін табу және
браузерге қажетті бетті браузерде қолданады. Клиенттік машинада жұмыс
істейтін активті бейнелер HTML бетіндегі активті облыстар жайлы ақпарат
береді. Сондықтан браузер қандай облыс активті екенін өзі түсіндіреді және
серверден қажетті бетті сұрайды.
Активті бейнені қалай жасауға болады?
Активті бейненің құрылу процесі 2 сатыдан тұралы. Ең алдымен сіз
активті етіп жасайтын суреттің облысын анықтауыңыз қажет, содан кейін оны
сілтемелермен басқа URL – апаруыңыз керек. Мұның бәрін активті облыстың
координат бұрыштарын анықтау арқылы жасауға болады, бірақ қандай да бір
программамен, мысалы, MapEdit – ті қолдану оңайға түседі.
Картаны анықтау оңай. MapEdit – та сіз құрғалы отырған активті
облыстағы бейнені құрайтын файл ашу қажет, одан кейін тышқанды апарып шерту
арқылы облыс шекарасын береміз. Программа файлды активті облыстың
белгіленген шекарасын автоматты түрде генерациялайды. Содан кейін осы
облыспен URL-ді жазу қажет. Бейненің кез-келген орнында тікбұрыш, көпбұрыш
немесе шеңбер формасында активті облыстар салуға болады және әрқайсысына
URL-ді анықтау керек. Активті облыстар қиылысуы мүмкін, бірақ бұл жағдайда
мәселелер туындайды. Оқушы дұрыс сілтемені таңдап отырғанына сенімді болу
үшін облыстар арасына біраз орын қалдыру қажет;
Активті облыстың шекаралары тікбұрыш, көпбұрыш немесе шеңбердің
центрі мен радиусының координаттар бұрышымен беріледі. Бұл параметрлер
картаға (Map-файл) жазылып отырады.
Активті бейнені құрып болғаннан кейін, сіз алынған файлды NCSA немесе
CERN форматында сақтай аласыз. Егер ол серверде немесе CSIM форматында
жұмыс істесе және егер ол клиенттік машинада функционирленсе. Ал қалған
барлық жұмысты MapEdit программасы орындайды. Ол картаны серверде құрады
немесе картаны клиент жақтағы сіз көрсеткен HTML файлында кірістіреді.
Егер сіз активті бейнені клиентте жасайтын болсаңыз, онда MapEdit Map
тегтері үшін ғана берілгендерді қояды. USEMAP атрибутымен бірге бейне
тегін өзіңіз беруіңізге тура келеді және оны MAP тегінен кейін бірақ
аласыз. USEMAP атрибутында карта атының алдынан # символын қоюды ұмытпаңыз:
IMG SRC=” mymap.gif ” USEMAP=”glava1~2.shtml#sitemap”
Сервердегі активті бейнелер.
Бұрын қолданыста болған активті бейненің құрылуында (html 2.0 үшін)
IMG тегіндегі ISMAP атрибутының қолданылуы талап етіледі. IMG тегі бейнеге
қатысты, оны бастапқы және соңғы тегі арасына файл – картаның
сілтемелеріне орналастыру қажет. Сізге HTML – файлына мынадай жолдарды
енгізу керек:
A HREF=”pathsomemap.map“
IMG SRC =” pathsomemap.map “ ISMAP A
ISMAP атрибуты браузерге берілгендер бейнесі активті екенін
көрсетеді. Егер оның қандай да бір облысында тышқан шертпесі пайда болса,
онда ISMAP атрибуты көмегімен серверге координат шертпесін құрайтын
хабарлама жіберіледі.
Клиенттегі активті бейнелер.
Алдыңғы бөлімде жазылған бейнелерге қарағанда, клиенттегі активті
бейнелер сервердің программалық жабдықтарына тәуелсіз жұмыс істейді және
сіз өз файлдарыңызда басқа серверге ауыстырсаңыз да функционирленуін
тоқтатпайды. Бұндай бейнелерге 2 нәрсе қажет: HTML 3.0 қолдайтын браузер
және HTML файлында жазылған карта туралы ақпарат.
Серверде де, клиентте де жұмыс істейтін активті бейнелер.
Сіздің серверде де, клиент – машинасында да жұмыс істейтін бейнемен
жұмыс істегіңіз келетін шығар.
Серверде де, клиентте де активті бейнелер құрғаннан кейін оларды бір
HTML файлында біріктіру қиын емес. Ол үшін HTML документіне сервердегі
активті бейне үшін жасауға арналған сол жазуды апару қажет. IMG тегіне
USEMAP= атрибутын қосуды ұмытпаңыз. USEMAP= атрибуты ISMAP тегіне қарағанда
жоғары приоритетті болып табылады. Егер браузер клиентте жұмыс істейтін
активті бейнені қолдаса, онда бұл атрибутты ол мойындайды. Бұндай
бейнелерді білмейтін браузер USEMAP= атрибутына әсет етеді.

Өзін тексеруге арналған сұрақтар:
1. XML және HTML. XML Синтаксисі. XML-дің HTML-ден айырмашылығы. DTD.
2. XML- құжатының визуалды тәсілдері.

Ұсынылатын әдебиеттер:
1. Веб-дизайнДмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлинникеМатросов, Сергеев, Чаунин – СПб: BHV, 2000 –
672 стр.

4–Дәріс. HTML-да кестенің жазылу тәсілдері.

Дәріс мазмұны:
• TABLE, TR, TD, TH, CAPTION.
• NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=,
СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары.

HTML-да кестенің жазылу тәсілдері.
TABLE тегі.
Кестенің жазылуы үшін TABLE тегі қолданылады. TABLE тегі
басқалар сияқты жолды кестеге дейін және кестеден кейін автоматты түрде
аударады.
TR тегі.
TR тегі (Table – Row сөзінен қысқартылған) – кестенің жолын
құрады. Егер кесте екі жиын тегінен TR TR құралса, онда ол екі жолдан
да тұрады. Сіз бір жолға орналастыратын бүкіл мәтін, басқа тег және
атрибуттар TR TR тегтерінің арасына орналасуы қажет.
TD тегі.
Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады. Мәтін
немесе бейне құрайтын әрбір ұяшық TD TD тегтерімен қоршалуы керек.
Жолдағы TD TD тегтерінің саны ұяшық санын анықтайды. TD TD
тегтерінің бес сыңарлы жолы бес ұяшықтан тұрады.
TH тегі.
Кестенің баған және жолының тақырыпшасын беру кезінде TH TH
тақырып тегі қолданылады. Бұл TD TD тегімен аналогты болып келеді.
TH TH тегтерінің арасындағы мәтін автоматты түрде қою шрифтпен
жазылады және үнсіздік бойынша ұяшықтың ортасында орналасады.
Орталықтандыруды алып тастауға болады және мәтінді сол жақ немесе оң жақ
жиек бойынша тегістеуге болады. Егер TD TD ні В тегімен және
ALIGN=CENTER атрибутымен бірге қолданса, онда мәтін де тақырып сияқты
көрінеді. Бірақта, барлық браузерлердің кестеде қою шрифті қабылдамайтынын
ескерген жөн, сондықтан кестенің тақырыбын TH көмегімен берген дұрыс.
CAPTION тегі.
CAPTION кестенің тақырыбын құруға рұқсат береді. Үнсіздік бойынша
тақырып орталықтанады және (CAPTION ALIGN=TOP) кестесінің үстінде немесе
(CAPTION ALIGN= BOTTOM) кестенің астында орналасады. Тақырып кез-келген
мәтіннен және бейнеден тұруы мүмкін. Кей кезде CAPTION тегі сурет
астындағы жазуға қолданылады.
NOWRAP атрибуты .
Кестедегі ұяшықтың бір жолына сыймайтын кез-келген мәтін келесі жолға
көшеді. Бірақта, NOWRAP атрибутын TH және TD тегтерімен бірге
қолданғанда ұяшықтың ұзындығы мәтін бір жолға сыятындай етіп кеңейтіледі.
COLSPAN= атрибуты.
TH және TD тегтері COLSPAN= атрибутының көмегімен модифицирленеді
(Column Span, бағандардың бірігуі). Егер сіз қандай да бір ұяшықты
кеңейткіңіз келсе, онда осы COLSPAN= атрибутын қолдануға болады.
ROWSPAN= атрибуты.
TH және TD тегтерінде қолданылатын ROWSPAN= атрибуты COLSPAN=
атрибутына аналогты болып келеді және ол жолдардың санын береді. Егер сіз
ROWSPAN= атрибутында санды көрсетсеңіз, онда жолдың сәйкес саны
кеңейтілген ұяшықтың үстінде болуы қажет.Оны кестенің төменгі жағына
орналастырмау керек.
WIDTH= атрибуты.
WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін
беруде TABLE тегіне қоюға болады және ұяшық тобының немесе ұяшық енін
беруде TR немесе TH тегтерінде қолдануға болады. Енін пиксельмен
немесе пайызбен көрсетуге болады. Мысалы, егер сіз TABLE тегінде
WIDTH=250 деп берсеңіз, онда сіз монитордағы бет өлшеміне тәуелсіз ені 250
пиксель кестені аласыз. TABLE тегінде WIDTH=50% беру кезінде, кесте
экрандағы кез келген өлшемдегі бейнеде беттің жарты енін алып тұрады.
UNIT=атрибуты.
TABLE тегінің UNIT=атрибуты барлық кесте мен оның жеке бағандарының
өлшемдерін көрсетуде қолданылатын өлшем бірлікті анықтайды. UNIT=атрибуты
үш мәнді қабылдауы мүмкін:
UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең
өлшем бірлікті береді. Еn - бос орын - n әріпінің еніне тең типографты
өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ
шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en-
бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en
- бос орын 4 - пунктті алады.
UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін
қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына
қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар
проценттердегі бағандар ені болып қабылданады.
UNIT= PIXELS – бұл мән экрандағы бағанның енін нақты білуде
қолданылады. Бұл жағдайда оны пиксельмен беру оңай. Мысалы, TABLE UNIT=
PIXELS WIDTH=340 кестенің енін 340 пиксельмен формалайды.
COLSPEC=атрибуты.
UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір
бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін
анықтайды. Тек TABLE ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Графиктік редакторлар
WEB - сайттар түрлері, жобалау кезеңдері. Бағдарламалық жабдықты таңдау
Мәтіндік файл HTML файлына айналуы үшін оның кеңейтілуін
Paint растрлық графикалық редакторы
Көбіне дата журналистер
Қашықтықтан білім беру технологиясының мәні
Оқытудың компыотерлік құралдарын жасау әдістемесі
Автоматтандырылған ақпараттық жүйе (Глоссарий)
ЗАМАНАУИ ҚАШЫҚТЫҚТАН ОҚЫТУ ПЛАТФОРМАЛАРЫ
Интерактивті тақтаның құралдары
Пәндер
since 2008 © stud.kz Stud.kz | 0.007