Интернетте программалау
МАЗМҰНЫ
Кiрiспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1 HTML . интернетте программалаудың негiзгi құралы ... ... ... ... ... ...
1.1 Интернетте программалау ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1.2 НTML құжаттармен жұмыс істеу негіздері ... ... ... ... ... ... ... ... ...
1.3 WEB . беттер құру технологиясы ... ... ... ... ... ... ... ... ... ... ... ... .
2 Графикалық web.дизайн ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
2.1 HTML құжатта графикалық кескіндермен жұмыс ... ... ... ... ... ... ...
2.2 Web бетте анимацияны қолдану технологиясы ... ... ... ... ... ... ... ...
3 Орта мектепте күнделікті білім алатын процесін автоматтандыру ... ... ... ..
4 Бизнес.жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..
4.1 Аннотация ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.2 Түйін ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
4.3 Кәсіпорын сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.4 Өнімнің сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.5 Маркетинг жоспары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.6 Өндірістік жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.7 Ұйымдастырушылық жоспар
4.8 Қаржылық жоспар
4.9 Жұмыстардың орындалу тізбесі
Қорытынды
Әдебиеттер тізімі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Кiрiспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1 HTML . интернетте программалаудың негiзгi құралы ... ... ... ... ... ...
1.1 Интернетте программалау ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1.2 НTML құжаттармен жұмыс істеу негіздері ... ... ... ... ... ... ... ... ...
1.3 WEB . беттер құру технологиясы ... ... ... ... ... ... ... ... ... ... ... ... .
2 Графикалық web.дизайн ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
2.1 HTML құжатта графикалық кескіндермен жұмыс ... ... ... ... ... ... ...
2.2 Web бетте анимацияны қолдану технологиясы ... ... ... ... ... ... ... ...
3 Орта мектепте күнделікті білім алатын процесін автоматтандыру ... ... ... ..
4 Бизнес.жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..
4.1 Аннотация ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.2 Түйін ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
4.3 Кәсіпорын сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.4 Өнімнің сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.5 Маркетинг жоспары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.6 Өндірістік жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.7 Ұйымдастырушылық жоспар
4.8 Қаржылық жоспар
4.9 Жұмыстардың орындалу тізбесі
Қорытынды
Әдебиеттер тізімі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Кiрiспе
Қазiргi кезде информациялық қоғамда адамзаттың байланыс құралының өзгеше екенiн практика көрсетiп отыр. Олай болса, оқу орындарындағы Информатиканы пәнiнiң “Интернет желiсi және компьютерлiк коммуникациялар” курсын оқыту өзектi тақырыптардың бiрi болып саналады.
Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар болсақ, Интернет адамға қашықтық деген ұғымды жоққа шығарып, әлемнiң кез-келген нүктесiнен жылдам хабар алуға, бейнелi түрде байланысуға, информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты түсiнiктi түрде беруге, қабылдауға мүмкiндiк туғызып отыр.
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-бiрiмен байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы өз бiлiм деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi мәселелерiнiң бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер тапшылығы болса, оны Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi шешуге болады. Жалпы айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының қызметкерi болсын, бiлiм алушы оқушы не студент болсын Интернет желiсiнде жұмыс iстей алуы заман талабы болып отыр.
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап алу ғана.
Web бет дегенiмiз не?
Web бет World Wide Web, яғни “дүниежүзiлiк өрмек” 1994 жылдың 14 желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар, жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар, жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз Web беттерiн ашуға ұмтылуда.
Web бет ашу үшiн Интернетте программалай бiлу керек. Интернетте программалаудың негiзгi құралы – HTML (Hypertext Markup Language) - гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық объект түрiнде болып келедi.
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң тағы бiр оңай жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану (FrontPage, WYSIWYG, AceHTML Pro т.с.с.). Бiрақ олардың өз кемшiлiктерi бар. Бiз оларңа тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке диплом жұмысын жазуға болады.
Бүгiнде жоғары және үздiксiз бiлiмге деген сұраныстың артуына байланысты бiлiм берудiң түрлi мақсаттағы құрылымдары пайда болуда. Осынау құрылымдардың бiрi қашықтан оқыту жүйесi алдыңғы қатарлы елдерде ырғақты түрде дамып келедi. Бiр ғана АҚШ пен Канаданың өзiнде 70-тен астам колледждер мен жоғары оқу орындары студенттерге қашықтан оқыту жүйесiн ұсынуда. Европалық елдерде қашықтан оқыту жүйесiнiң жұмысын ұйымдастыруда телекоммуникациялық жүйелердi және компьютердi пайдалану тәжiрибесi молынан жинақталған. Ресейде қашықтан оқыту мәселелерiмен ММТУ, МЭИ, МИЭМ т.с.с. жетекшi оқу орындары айналысуда.
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнде программалу негiздерiн оқыта отырып, Web беттер ашуға нақты мысалдар келтiру арқылы Интернет-оқулық құру технологиясын жетiлдiру. Бұл қашықтан оқыту жүйесi негiзiнде оқып жатқан студенттiң “Интернет желiсi және компьютерлiк коммуникациялар” тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк бередi.
Қазiргi кезде информациялық қоғамда адамзаттың байланыс құралының өзгеше екенiн практика көрсетiп отыр. Олай болса, оқу орындарындағы Информатиканы пәнiнiң “Интернет желiсi және компьютерлiк коммуникациялар” курсын оқыту өзектi тақырыптардың бiрi болып саналады.
Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар болсақ, Интернет адамға қашықтық деген ұғымды жоққа шығарып, әлемнiң кез-келген нүктесiнен жылдам хабар алуға, бейнелi түрде байланысуға, информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты түсiнiктi түрде беруге, қабылдауға мүмкiндiк туғызып отыр.
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-бiрiмен байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы өз бiлiм деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi мәселелерiнiң бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер тапшылығы болса, оны Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi шешуге болады. Жалпы айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының қызметкерi болсын, бiлiм алушы оқушы не студент болсын Интернет желiсiнде жұмыс iстей алуы заман талабы болып отыр.
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап алу ғана.
Web бет дегенiмiз не?
Web бет World Wide Web, яғни “дүниежүзiлiк өрмек” 1994 жылдың 14 желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар, жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар, жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз Web беттерiн ашуға ұмтылуда.
Web бет ашу үшiн Интернетте программалай бiлу керек. Интернетте программалаудың негiзгi құралы – HTML (Hypertext Markup Language) - гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық объект түрiнде болып келедi.
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң тағы бiр оңай жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану (FrontPage, WYSIWYG, AceHTML Pro т.с.с.). Бiрақ олардың өз кемшiлiктерi бар. Бiз оларңа тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке диплом жұмысын жазуға болады.
Бүгiнде жоғары және үздiксiз бiлiмге деген сұраныстың артуына байланысты бiлiм берудiң түрлi мақсаттағы құрылымдары пайда болуда. Осынау құрылымдардың бiрi қашықтан оқыту жүйесi алдыңғы қатарлы елдерде ырғақты түрде дамып келедi. Бiр ғана АҚШ пен Канаданың өзiнде 70-тен астам колледждер мен жоғары оқу орындары студенттерге қашықтан оқыту жүйесiн ұсынуда. Европалық елдерде қашықтан оқыту жүйесiнiң жұмысын ұйымдастыруда телекоммуникациялық жүйелердi және компьютердi пайдалану тәжiрибесi молынан жинақталған. Ресейде қашықтан оқыту мәселелерiмен ММТУ, МЭИ, МИЭМ т.с.с. жетекшi оқу орындары айналысуда.
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнде программалу негiздерiн оқыта отырып, Web беттер ашуға нақты мысалдар келтiру арқылы Интернет-оқулық құру технологиясын жетiлдiру. Бұл қашықтан оқыту жүйесi негiзiнде оқып жатқан студенттiң “Интернет желiсi және компьютерлiк коммуникациялар” тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк бередi.
Пайдаланылған әдебиеттер
1. М.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с.
2. А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
3. Я.Нильсен. Web-дизайн. Спб. 2002, 187 с.
4. Дж.Вайскопф. MS Front Page 2000. Учебный курс. Санкт-Петербург, 2002.
5. В.Холмогоров. Основы web-мастерства. Санкт-Петербург, 2002.
6. П.Кент. World Wide Web. –М.: Компьютер, 1996.
7. А.И.Тихонов. Публикация данных в Интернет. –М.: МЭИ, 2000.
8. С.В.Назаров. Пакеты программ офисного назначения. –М.: Финансы и статистика, 1997.
9. А.И.Гусева. Технология межсетевых взаимодействий. Санкт-Петербург, 2001.
10. А.Вендров. Программирования в Интернет. Спб, 2002.
11. А.Г.Корнеев. Базы данных в Интернет. –М.: Нолидж, 2002.
12. А.Вендров. Case технологий. Спб, 2001.
13. Л.Омельченко, А.Федоров. Самоучитель MS FrontPage 2000. Питер, 2000.
14. А.А.Зенкин. Когнитивная компьютерная графика. –М.: Наука, 1995.
15. Шафрин А.Ю. Информационные технологии. – М.: Дрофа. 1999.
16. Горячев А., Шафрин А.Ю. Практикум по информационным технологиям. – М.: Дрофа. 1999.
17. Н.Г. Борисова. Программно-методическое обеспечение учебных компьютерных технологий по спецдисциплинам. ІІІ Международная конференция “Математическое моделирование и информационные технологии в образовании и науке” ("ММ ИТОН"). Алматы. 29.09-02.10.2005. КазНПУ им. Абая
18. Уркумбаев М.Ф., Терещенко С.А., Уркумбаева Т.Н. «Арифметика успеха».- Тараз, 2005 г.
19. Уркумбаев М.Ф., Терещенко С.А., Уркумбаева Т.Н. «Алгебра власти».-Тараз, 2005 г.
20. Уркумбаев М.Ф., Уркумбаев Б.Ф., Аманбаев Б.Б., Уркумбаева М.М. «Бизнес-план в дипломной работе».- Шымкент, 2005 г., 217 стр.
21. Алан Вест Бизнес - план: учеб. пр. пособие (перевод с английского Н.И.Аклозовой и И.Ю.Букиной - 3-е изд. - Москва: издательство Проспект, 2005 - 232 с.)
22.Алексеева М.М, «Планирование деятельности фирмы» - М.: Финансы и статистика, 2001г.
1. М.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с.
2. А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
3. Я.Нильсен. Web-дизайн. Спб. 2002, 187 с.
4. Дж.Вайскопф. MS Front Page 2000. Учебный курс. Санкт-Петербург, 2002.
5. В.Холмогоров. Основы web-мастерства. Санкт-Петербург, 2002.
6. П.Кент. World Wide Web. –М.: Компьютер, 1996.
7. А.И.Тихонов. Публикация данных в Интернет. –М.: МЭИ, 2000.
8. С.В.Назаров. Пакеты программ офисного назначения. –М.: Финансы и статистика, 1997.
9. А.И.Гусева. Технология межсетевых взаимодействий. Санкт-Петербург, 2001.
10. А.Вендров. Программирования в Интернет. Спб, 2002.
11. А.Г.Корнеев. Базы данных в Интернет. –М.: Нолидж, 2002.
12. А.Вендров. Case технологий. Спб, 2001.
13. Л.Омельченко, А.Федоров. Самоучитель MS FrontPage 2000. Питер, 2000.
14. А.А.Зенкин. Когнитивная компьютерная графика. –М.: Наука, 1995.
15. Шафрин А.Ю. Информационные технологии. – М.: Дрофа. 1999.
16. Горячев А., Шафрин А.Ю. Практикум по информационным технологиям. – М.: Дрофа. 1999.
17. Н.Г. Борисова. Программно-методическое обеспечение учебных компьютерных технологий по спецдисциплинам. ІІІ Международная конференция “Математическое моделирование и информационные технологии в образовании и науке” ("ММ ИТОН"). Алматы. 29.09-02.10.2005. КазНПУ им. Абая
18. Уркумбаев М.Ф., Терещенко С.А., Уркумбаева Т.Н. «Арифметика успеха».- Тараз, 2005 г.
19. Уркумбаев М.Ф., Терещенко С.А., Уркумбаева Т.Н. «Алгебра власти».-Тараз, 2005 г.
20. Уркумбаев М.Ф., Уркумбаев Б.Ф., Аманбаев Б.Б., Уркумбаева М.М. «Бизнес-план в дипломной работе».- Шымкент, 2005 г., 217 стр.
21. Алан Вест Бизнес - план: учеб. пр. пособие (перевод с английского Н.И.Аклозовой и И.Ю.Букиной - 3-е изд. - Москва: издательство Проспект, 2005 - 232 с.)
22.Алексеева М.М, «Планирование деятельности фирмы» - М.: Финансы и статистика, 2001г.
Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 69 бет
Таңдаулыға:
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 69 бет
Таңдаулыға:
Мазмұны
Кiрiспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1 HTML – интернетте программалаудың негiзгi құралы ... ... ... ... ... ...
1.1 Интернетте программалау ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1.2 НTML құжаттармен жұмыс істеу негіздері ... ... ... ... ... ... ... ... ...
1.3 WEB - беттер құру технологиясы ... ... ... ... ... ... ... ... ... ... ... ... .
2 Графикалық web-
дизайн ... ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ..
... ... ..
2.1 HTML құжатта графикалық кескіндермен жұмыс ... ... ... ... ... ... ...
2.2 Web бетте анимацияны қолдану технологиясы ... ... ... ... ... ... ... ...
3 Орта мектепте күнделікті білім алатын процесін автоматтандыру ... ... ... ..
4 Бизнес-жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. ... ...
4.1 Аннотация ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.2 Түйін ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
4.3 Кәсіпорын сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.4 Өнімнің сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.5 Маркетинг жоспары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.6 Өндірістік жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.7 Ұйымдастырушылық жоспар
4.8 Қаржылық жоспар
4.9 Жұмыстардың орындалу тізбесі
Қорытынды
Әдебиеттер тізімі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Кiрiспе
Қазiргi кезде информациялық қоғамда адамзаттың байланыс құралының
өзгеше екенiн практика көрсетiп отыр. Олай болса, оқу орындарындағы
Информатиканы пәнiнiң “Интернет желiсi және компьютерлiк коммуникациялар”
курсын оқыту өзектi тақырыптардың бiрi болып саналады.
Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар
болсақ, Интернет адамға қашықтық деген ұғымды жоққа шығарып, әлемнiң кез-
келген нүктесiнен жылдам хабар алуға, бейнелi түрде байланысуға,
информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты түсiнiктi түрде
беруге, қабылдауға мүмкiндiк туғызып отыр.
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары
және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-бiрiмен
байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы өз бiлiм
деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi мәселелерiнiң
бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер тапшылығы болса, оны
Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi шешуге болады. Жалпы
айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының қызметкерi болсын,
бiлiм алушы оқушы не студент болсын Интернет желiсiнде жұмыс iстей алуы
заман талабы болып отыр.
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз
тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық
пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе
бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық
мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп
түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап
алу ғана.
Web бет дегенiмiз не?
Web бет World Wide Web, яғни “дүниежүзiлiк өрмек” 1994 жылдың 14
желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген
жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар,
жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк
алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар,
жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар
желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен
тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде
салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз
Web беттерiн ашуға ұмтылуда.
Web бет ашу үшiн Интернетте программалай бiлу керек. Интернетте
программалаудың негiзгi құралы – HTML (Hypertext Markup Language) -
гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер
арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық
объект түрiнде болып келедi.
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан
оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң
тағы бiр оңай жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану
(FrontPage, WYSIWYG, AceHTML Pro т.с.с.). Бiрақ олардың өз кемшiлiктерi
бар. Бiз оларңа тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке
диплом жұмысын жазуға болады.
Бүгiнде жоғары және үздiксiз бiлiмге деген сұраныстың артуына
байланысты бiлiм берудiң түрлi мақсаттағы құрылымдары пайда болуда. Осынау
құрылымдардың бiрi қашықтан оқыту жүйесi алдыңғы қатарлы елдерде ырғақты
түрде дамып келедi. Бiр ғана АҚШ пен Канаданың өзiнде 70-тен астам
колледждер мен жоғары оқу орындары студенттерге қашықтан оқыту жүйесiн
ұсынуда. Европалық елдерде қашықтан оқыту жүйесiнiң жұмысын ұйымдастыруда
телекоммуникациялық жүйелердi және компьютердi пайдалану тәжiрибесi молынан
жинақталған. Ресейде қашықтан оқыту мәселелерiмен ММТУ, МЭИ, МИЭМ т.с.с.
жетекшi оқу орындары айналысуда.
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнде программалу
негiздерiн оқыта отырып, Web беттер ашуға нақты мысалдар келтiру арқылы
Интернет-оқулық құру технологиясын жетiлдiру. Бұл қашықтан оқыту жүйесi
негiзiнде оқып жатқан студенттiң “Интернет желiсi және компьютерлiк
коммуникациялар” тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк
бередi.
1 HTML – интернетте программалаудың негiзгi құралы
1.1 Интернетте программалау
Ең алдымен Web бет құрудың ең ыңғайлы құралын таңдап алу керек. Әрине
ол - HTML тiлi. Бiрақ HTML тiлiнде программалу үшiн арнайы орта құрылмаған.
Себебi Web бет құру мен оны безендiруде тек бiр ортаны ғана пайдалану оның
мүмкiндiктерiн шектейдi. Сондықтан көп жағдайларда HTML тiлiнде
программалау кәдiмгi мәтiндiк редакторлардың көмегiмен жүзеге асырылады да,
web беттiң графикалық безендiрiлуi және анимациялық мүмкiндiктерi басқа
орталарда iске асырылады. Windows ортасында NotePad (Блокнот) редакторы
HTML-дың ең кеңiнен тараған құралы. Ол Windows жүйесiнiң барлық
нұсқаларында кездеседi.
HTML тiлiнiң синтаксисi мен құрылымы. Әрбiр тiлдiң өзiндiк құрылымдық
логикалық ерекшелiктерi болатыны сияқты HTML тiлiнiң де өзiндiк
ерекшелiктерi бар. Алайда ол ең қарапайым, қатаң логикалық ережелерге онша
бағына бермейтiн тәуелсiз тiл. Дегенмен оның да өз синтаксисi, басқарушы
құрылымдары бар. Тiлдiң негiзгi басқарушы құрылымы дескриптор (кейде
элемент дщеп те аталады). Дескриптор – белгiлi-бiр әрекеттi анықтайтын HTML
элементi. Дескрипторлардың мүмкiндiктерi мәндерге ие бола алатын
аттрибуттарды қолдану арқылы толығымен ашылады.
HTML дескрипторлары дербес ережелерге бағынумен қатар, жалпы ережелерге
де бағынады. Бiрiншi ереже бойынша барлық дескрипторлар “кiшi” () және
“үлкен” () символдарының арасына жазылады, мысалы:
HTML
Келесi ереже дескрипторды ашу және жабу компоненттерiн қолдануға
арналған. Дескрипторды жабу “кiшi” () және “үлкен” () символдарының
арасына қисық сызық () символын қою арқылы iске асырылады:
HTML
Бұл ашылған дескрипторды белгiлi-бiр жерде жабу керектiгiн бiлдiредi.
Бiрақ көптеген дескрипторлар бұл ережеге бағынбайды. Мысалы, абзацтар үшiн
қолданылатын Р дескрипторы, тек ашылады, оны жабудың қажетi жоқ.[1].
Жалпы ережеге дескрипторларды төменгi не жоғарғы регистрде жазу тәсiлi
де кiредi. Әдетте түсiнiктi болу үшiн дескрипторлар жоғарғы регистрде
жазылады. Бiрақ кодтаудың жаңа әдiснамасы – XHTML-да (кеңейтiлген HTML)
дескрипторларды төменгi регистрде жазу қалыптасқан.
Дескрипторларды жазудағы тағы бiр маңызды мәселе бос орындар (пробел)
қалдыру. HTML кодтарының кейбiр тұстарына бос орын қалдыру мiндеттi болса,
кейде артық қалдырылған бос орын броузердi қатты шатастыратыны сонша, ол
ешқандай да информация бере алмай қалады.
Жоғарыда ескертiп кеткенiмiздей атрибуттар дескрипторлардың әрекетiн
анықтайды. Көп жағдайларда дескрипторлар атрибутсыз жұмыс жасайды. Алайда
кейде мiндеттi түрде атрибуты болуы тиiс дескрипторлар кездеседi.
Атрибуттар дескриптордың атауынан кейiн бiр бос орын тасталып, мән
меншiктелiп жазылуы керек. Дескрипторда бiрнеше атрибут болса, олар бос
орын арқылы ажыратылады. Мысалы,
BODY bgcolor=#FFFFFF text=#000000
мұндағы bgcolor – фон түсi, text – мәтiн түсi.
HTML-де дескрипторға атрибуттар тiркелiп, атрибуттарға мәндер
меншiктелiп жазылған сөйлем жол деп аталады.
Атрибуттарға мiндеттi түрде мәндер меншiктелуi тиiс. Бұлай болмаған
жағдайда HTML дескрипторды қабылдамайды. Матрибуттарға меншiктелетiн мәндер
түрлiше болуы мүмкiн: сандық, мәтiндiк, пайыздық, т.с.с. Мысалы, DIV -
бөлiм дескрипторының align атрибутына left (сол жақ шетi), right (оң жақ
шетi), center (ортасы), justify (енi бойынша) мәндердiң бiрiн меншiктеу
жолы:
DIV align= “right”
DIV мiндеттi түрде жабылуы тиiс дескриптор болғандықтан оны DIV
арқылы жабу керек.
Сол сияқты FONT (шрифт) дескрипторының size (өлшем атрибуты 1-ден 7-
ге дейiн мәндер қабылдайды, мұндағы 1 ең кiшi шрифт өлшемi, ал 7 ең үлкен
шрифт өлшемi) атрибутына мән меншiктеу жолы:
FONT size= “5”
Бұл кезде броузердегi мәтiннiң шрифт өлшемi FONT дескрипторы
жабылғанша 5 өлшемiн қабылдап тұрады - FONT.
Сандық мәндердiң келесi бiр типi оналытылық код түрiнде берiледi. Бұл
HTML-де пайдалануға мүмкiн түстердiң оналтылық санау жүйесiнде алфавиттiк-
цифрлық коды. Мұндай мысал жоғарыда келтiрiлген болатын. Мысалдағы, FFFFFF
– ақ түстi фон, ал 000000 - қара мәтiн түсiн бередi. Оналтылық мәндердiң
алдына # символы қойылады.
HTML-де сiлтеме дескрипторы - А арқылы Web-адрестi шығаруға болады:
A href= “http:www.yahoo.com” A
Осы сияқты каталогты және кескiн файлдары дескрипторын қолдануға
болады:
IMG src= “suretteraspan.gif”
Өздерiңiз байқағандай барлық аттрибуттардың мәндерiнiң алдына = (теңдiк
белгiсi) таңбасы қойылады және оналтылық мәндерден басқа типтегi мәндер
тырнақшаға (“ ”) алынып жазылады. Бұл HTML-да жол жазудың жалпы
ережелерiнiң бiрi.
Арнайы символдардың көмегiмен HTML бетке HTML кодын шығаруға болады. Ол
үшiн “кiшi” және “үлкен” символдарының орнына & символын пайдалану керек,
мысалы,
< IMG src= “aspan.gif” >
Арнайы символдар мен дескриптордың қолданылу айырмашылығы 1 және 2-
суреттерде келтiрiлген.[4].
1 сурет - “Кiшi” және “үлкен” символдары арқылы берiлген дескриптор
графикалық кескiндi шығарады
2 сурет - Арнайы символдар көмегiмен HTML кодты HTML бетке шығаруға
болады
1.2 НTML құжаттармен жұмыс істеу негіздері
1.HTML қабықшасы. HTML қабықша – беттiң тақырыбы (HEAD) және негiзгi
дескрипторлардан тұратын денесi (BODY) орналасқан қарапайым дескриптор.
Тақырыбы және денесi бар HTML дескриптордың жазылу үлгiсi:
HTML
HEAD
TITLExc TITLE
HEAD
BODY BODY
HTML
мұндағы, TITLE TITLE жолы құжат тақырыбын бередi. Құжат тақырыбы
келесi мәлiметтердi қамтиды:
Беттiң аталуы. TITLE және TITLE дескриторлары беттiң аталуын
анықтайды. Ол HTML құжаттың денесiнiң құрамына кiрмейдi.
Стиль. HTML құжатты басқарудың элементтерi мен стилдерiн тақырыпқа
енгiзу қажет болған жағдайда қолданылады.
Метаинформация. МЕТА дескрипторы құжат авторы, кiлттiк сөздер, арнайы
әрекеттер қажет болған жағдайда қолданылады.
Кез келген құжатты құрғанда оның басқару элементтерi мен стильдерi,
авторы, кiлттiк сөздер жайлы мәлiметтер онша қажет бола бермейтiндiктен
аталған дескрипторлардың барлығы бiрдей жиi қолданыста емес. Дегенмен әрбiр
құжаттың атауы болуы тиiс, сондықтан TITLE дескрипторы жиi
қолданылады.[7].
2.Құжат денесiнiң құрылымы. HTML құжаттың денесi орналасатын негiзгi
бөлiгi BODY және BODY дескрипторлары арқылы iске асырылады. Құжат
денесiне енгiзiлетiн информация келесiдей болуы мүмкiн:
Мәтiн. Құжат құрамында кездесетiн мәтiндер. Олар оқылуы жеңiл әрi
түсiнiктi болу үшiн форматталуы да мүмкiн.
Графикалық кескiн. Құжатта жылжуға немесе информацияны көрнекi түрде
беру үшiн енгiзiлетiн графикалық информация.
Сiлтеме. Web түйiннiң iшiнде оңай жылжуға және желiнiң басқа да
тұстарына жылдам өтуге арналған сiлтемелер.
Мультимедиа және арнайы программалар. Видеороликтер, Java аплеттерiмен,
Flash, Shockwave программаларымен жұмысты басқаратын дескрипторлар құжат
денесiнде орналасуы тиiс.
3.Түсiнiктемелер. Құжатта қолданылып жатқан дескрипторлар мен
әрекеттерге берiлетiн түсiнiктеменi құжат денесiнiң кез келген тұсына
енгiзуге болады. Түсiнiктеме үлкен HTML-беттер құрғанда өте тиiмдi.
Түсiнiктеме !-- -- дескрипторы арқылы жазылады.
4. Форматтау элементтерi. Мәтiндi форматтау – HTML тiлiнiң ең қарапайым
және ең қуатты құралы. Себебi Web-бет форматталған мәтiннен тұрғанда ғана
түсiнiктi әрi әсем болып көрiнедi. Мәтiндi форматтауда келесi дескрипторлар
қолданылады:
• H1..H1-H6..H1. Дескрипторлар диапазоны тақырыптар мен
тақырып мазмұнына қолданылады;
• BR. Каретканы қайтару дескрипторы;
• P..P. Абзацты ашужабу дескрипторлары;
• B..B. Мәтiндi жартылай қалың ету;
• I..I. Мәтiндi көлбеу ету;
• U..U. Мәтiн астын сызу.
Осы аталған дескрипторларды пайдаланып алғашқы HTML құжатты
жазайық.[10].
1-мысал.
1. Блокнот қосымшасын iске қосыңыз;
2. Құжат мәтiнiн енгiзiңiз:
HTML
HEAD
TITLE Негiзгi HTML-бет TITLE
HEAD
BODY
H1 Мәтiндi форматтау H1
BR
P B World Wide Web B жүйесiнiң негiзгi қызметi қажеттi
информацияны Iiздеу, жинау, экранға шығару. IОның экранға шығаратын
мәлiметтерi Web-беттер түрiнде сақталған BUэлектрондық құжаттар BU
P
BODY
HTML
3. Құжатты жұмыс үстелiне “Негiзгi HTML-бет.html” атауымен сақтаңыз.
Мұндағы құжат атауынан кейiнгi .html кеңейтпесi құрылған құжаттың
HTML-құжат екенiн бiлдiредi.
4. Файлды сақтап болған соң, жұмыс үстелiндегi “Негiзгi HTML-бет”
файлына тышқанның сол жақ түймесiн екi рет шертiңiз. 3-суреттегi
HTML-бет көрiнедi.
3 сурет - Негiзгi HTML-бет
Е с к е р т у. 3-суреттегi мәтiндегi қазақ әрiптерi дұрыс көрiнбейдi.
Себебi Интернет желiсiнде тек стандартты шрифттер қолданылады. Бұл
мәселенiң шешуi осы бөлімнің 6-тақырыбында қарастырылған.[14].
5. Абзацтармен жұмыс. Абзац мәтiнiнiң бетте орналасуы дескрипторлардың
align атрибутына меншiктелетiн мәндерге байланысты болады. Align атрибуты
төрт түрлi мәннiң бiрiне ие болуы мүмкiн: left (сол жақ шетi бойынша),
right (оң жақ шетi бойынша), center (бет ортасына), justify (мәтiн енi
бойынша). Мысалы, жоғарыда келтiрiлген “Негiзгi HTML-бет” құжатындағы
мәтiндi беттiң ортасына орналастыру үшiн HTML кодтың абзац дескрипторының
align атрибутына center мәнiн меншiктеу керек:
P align=“center” B World Wide Web B жүйесiнiң негiзгi қызметi
қажеттi информацияны Iiздеу, жинау, экранға шығару. IОның экранға
шығаратын мәлiметтерi Web-беттер түрiнде сақталған B U электрондық
құжаттар B U P
4 сурет - Бет ортасына орналасқан мәтiн
Абзацтармен жұмыс iстеудiң тағы бiр ерекшелiгi мәтiн жолдарының
интервалын беруге болады. Мәтiн жолдарының арасындағы интервалдар style
атрибуты арқылы анықталады. Жазылу үлгiсi: P style= “line-height:27pt”,
мұндағы pt – интервал өлшем бiрлiгi – пункт. Мысалы, 4-суреттегi мәтiндi 27
пункт интервалмен шығару төмендегiше болады:[13].
P align=“center” style= “line-height:27pt” B World Wide Web B
жүйесiнiң негiзгi қызметi қажеттi информацияны Iiздеу, жинау, экранға
шығару. IОның экранға шығаратын мәлiметтерi Web-беттер түрiнде сақталған
B U электрондық құжаттар B U P
Мәтiн фонының түсi де style атрибуты арқылы берiледi. Мысалы, P style=
“color:#FFFFFF; background:#008000”, мұндағы color – мәтiн шрифтiнiң түсi
(ақ), ал background – фон түсi (жасыл).
P align="center" style="line-height:27pt; color:#FFFFFF;
background:#008000"
B World Wide Web B жүйесiнiң негiзгi қызметi қажеттi информацияны
I iздеу, жинау, экранға шығару. I Оның экранға шығаратын мәлiметтерi
Web-беттер түрiнде сақталған [11].
B U электрондық құжаттар B U
P
5 сурет - Жасыл фонда шығарылған мәтiн
6. Шрифттермен жұмыс. Web-беттiң дизайн тиiмдiлiгi оның қаншалықты
деңгейде дайындалғанын анықтайды. Дизайн тиiмдiлiгi деген не? Бұл Web-
беттiң сыртқы түрiнiң түсiнiктi әрi әдемi безендiрiлуi. Шрифттермен жұмыс
iстей бiлу осы дизайн тиiмдiлiгiне қол жеткiзудiң негiзгi шарттарының бiрi.
Сондықтан әрбiр web-бет құрушы шрифттермен жұмыс iстеу тәсiлдерiн толық
меңгеруi тиiс.
Қазiргi кезде шрифттер өте көп болғандықтан оларды, белгiлi бiр
топтастырып алған жөн. Негiзiнен мұндай үш түрлi топ бар:
• Категория – шрифттердiң негiзгi класы. Оны шрифттiң “ұлты” деп те
атайды.
• Гарнитура – белгiлi бiр қасиеттерiне байланысты топтастырылған
шрифттер класы. Мұны шрифттiң “фамилиясы” деп түсiнуге болады.
• Кескiн – әрбiр шрифттiң қайталанбайтын өзiндiк ерекшелiгi. [9].
1 кесте - Негiзгi шрифт категориялары, гарнитуралары
Категориялар Гарнитуралар
Serif Times, Century Schoolbook, Garamond
Sans-Serif Hevletica, Arial, Verdana
Monospaced Courier, Courier New
Script Nuptical Script, Boulevard, Signature
Decorative Whimsy, Arriba!, Bergel
2 кесте - Гарнитуралар және кескiндер
Гарнитура Кескiн
Times Roman (тiк), Italic (көлбеу)
Arial Regular (кәдiмгi), Bold Italic (жартылай қалың көлбеу)
Courier Regular, Oblique (қиғаш)
Whimsy Regular, Bold (жартылай қалың)
HTML-да шрифттермен жұмыс iстеу FONT элементiмен жұмыс iстеуге
негiзделген. FONT дескрипторының негiзгi үш атрибуты бар:
• size (кегль) – мәтiн таңбаларының биiктiгi;
• color (түс) – шрифт түсi. Шрифт түсi көп жағдайда оналтылық кодта
берiледi.
• face (гарнитура) – қажеттi шрифт атауын таңдауға мүмкiндiк бередi.
1-мысалдағы мәтiнге FONT дескрипторын пайдалану:
BODY
!—Мәтiн шрифтiнiң атауы Times Kaz, өлшемi 2, түсi – көк --
FONT face="Times Kaz" size="3" color="#0000FF"
H1 Мәтiндi форматтау H1 BR
P align=“center” B FONT size="4" color="#FF0000"
!—Мәтiн шрифтiнiң өлшемi 4, түсi – қызыл --
World Wide Web FONT
B жүйесiнiң негiзгi қызметi қажеттi информацияны Iiздеу, жинау,
экранға шығару. IОнығ экранға шығаратын мәлiметтерi Web-беттер түрiнде
сақталған BU электрондық құжаттар B U P
FONT
BODY
Ескерту. Times Kaz шрифтi арқылы терiлген мәтiннiң қазақша әрiптерi
көрiнуi үшiн HTML құжат iске қосылғаннан соң броузер терезесiнен Вид-Вид
кодировки-Определенный пользователем командасын беру керек (6-сурет).
6 сурет - Шрифтi, өлшемi, түсi берiлген HTML құжат
7. Кестелермен жұмыс. Кестелердiң HTML құжаттарға енгiзiлуi кестелiк
берiлгендердi экранға шығару мақсатында пайда болды. Кесте пайдаланушыға
көптеген жеңiлдiктер бередi. Онда мәтiндiк берiлгендермен қатар графикалық
берiлгендердi де орналастыруға болады. Кестемен жұмыс iстеу
дескрипторлары:[13].
• TABLE..TABLE - кестенiң басы мен аяғын бiлдiретiн негiзгi
дескриптор. Бұл дескриптор көптеген атрибуттарға ие:
3 кесте - TABLE дескрипторының негiзгi атрибуттары
Атрибут және оның мәнi Сипаттамасы
align=“x” Ұяшық iшiндегiсiн орналастыруға арналған:
мүмкiн болатын мәндерi: left (сол жақ
шетiне), right (оң жақ шетiне), middle
border=“x” (ортасына);
cellspacing=“x” кесте қабырғаларының жуандығын анықтайды;
кестенiң көршi ұяшықтарының арасындағы ара
cellpadding=“x” қашықтықты анықтайды
кестенiң ұяшығының қабырғасы мен ондағы
информация арасындағы ара қашықтықты
width= “x%” не width= “x” анықтайды
кесте енiнiң өлшемiн анықтайды.
• TR..TR - кесте қатарын ашатын және жабатын дескрипторлар. Кесте
қатарымен жұмыс iстейтiн бұл дескриптордың екi атрибыту бар: align –
ұяшықтағы мәлiметтiң көлденеңiнен орналасуы; valign - ұяшықтағы
мәлiметтiң тiгiнен орналасуы. Бұл атрибуттарды TABLE, TD
дескрипторларына қолдануға да болады;
• TD..TD - кестенiң жеке ұяшығын құратын дескриптор.
Дескрипторларды пайдаланып қарапайым кесте құрып көрейiк:
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжаттың кодын енгiзiңiз:
HTML HEAD TITLE Кесте 1 TITLE
BODY
TABLE border=“1” width= “485” cellpadding=”20”
cellspacing="10"
TR valign=“top”
TD Кестенiн 1-уяшыгы TD TR
TR valign=“bottom”
TD Кестенiн 2-уяшыгы TD TR
TR align=“middle”
TD Кестенiн 3-уяшыгы TD TR
TR align=“right”
TD Кестенiн 4-уяшыгы TD TR
TABLE BODY HTML
3. Файлды “Кесте1.html” атауымен жұмыс үстелiне сақтаңыз.
4. Жұмыс үстелiндегi “Кесте1” файлын iске қосыңыз. 7-суреттегi HTML
құжат көрiнедi.[12].
7 сурет - Ұяшықтарының iшiндегi мәлiметтерi түрлiше орналасқан кесте
Кей жағдайларда кесте ұяшықтарының параметрлерi бiр-бiрiмен сәйкес келе
бермейдi, яғни ұяшықтардың енi, биiктiктерi, iшiндегi информацияның
орналасуы т.с.с. түрлiше болуы мүмкiн. Бұл жағдайда ұяшық атрибуттары
қолданылады (4-кесте).[11].
4 кесте - TABLE дескрипторының негiзгi атрибуттары
Атрибут және Сипаттамасы
оның мәнi
width= “x%” не Ұяшықтың енiнiң ұзындығын анықтайды. Ұяшық енiнiң
width= “x” ұзындығын пайыздық көрсеткiш арқылы не пиксель
өлшемiмен беруге болады.
align=“x” Ұяшық iшiндегi мәлiметтiң көлденең орналасу түрiн
анықтайды: мүмкiн болатын мәндерi: left (сол жақ
шетiне), right (оң жақ шетiне), middle (ортасына);
valign=“x” Ұяшық iшiндегi мәлiметтiң тiгiнен орналасу түрiн
анықтайды: мүмкiн болатын мәндерi: top (жоғарғы
жағына), bottom (төменгi жағына), middle
colspan=”x” (ортасына);
rowspan=”x” кесте қатарының х ұяшығын бiрiктiру;
bgcolor=”x” кесте бағанының х ұяшығын бiрiктiру;
background=”url” Ұяшықтың фон түсiн анықтайды;
height=”x” ұяшықтың фоны ретiнде сурет алынады;
ұяшық биiктiгiн анықтайды.
Кесте ұяшығының атрибуттарын қолданып HTML құжат құрайық.
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжаттың кодын енгiзiңiз:
HTML HEAD
TITLE Кесте уяшыктарынын атрибуттарын пайдалану TITLE HEAD
BODY
TABLE border=“1” width= “525” cellpadding=”5”
cellspacing="5" TR TD width=”200” valign=”top” align=”middle”
bgcolor=”CC9999”
Кестенiн 1-катарынын 1-уяшыгы TD
TD width=”200” valign=”top” align=”middle”
Кестенiн 1-катарынын 2-уяшыгы TD
TD width=”200” valign=”top” align=”middle”
background=”backgrnd.gif”
Кестенiн 1-катарынын 2-уяшыгы TD
TR TR
TD width=”200” valign=”top” align=”middle”
Кестенiн 2-катарынын 1-уяшыгы TD
TD width=”400” valign=”top” align=”middle” colspan=”2”
Кестенiн 2-катарынын 2-уяшыгы TD
TR
TABLE BODY HTML
3. Файлды “Кесте2.html” атауымен жұмыс үстелiне сақтаңыз.
4. Жұмыс үстелiндегi “Кесте2” файлын iске қосыңыз. 8-суреттегi HTML
құжат көрiнедi.[7].
8 сурет - Екiншi қатарындағы 2 және 3 ұяшықтары бiрiктiрiлген кесте
HTML-да енi шектелген кестелерден басқа динамикалық кестелер де
қолданылады. Бұл кестелердiң енi мен ұзындығы пайдаланушының броузерiнiң
өлшемiне қатысты өзгерiп отырады. Мұндай кестелердi құру үшiн ен, ұзындық
шамаларын пиксель түрiнде емес пайыздық өлшем түрiнде беру керек. Мысалы,
width=”25%”, height=”100%” т.c.c.[8].
8. Тiзiмдер. Web беттегi информацияның анық және байланысты болуының
маңызды мәселе екенiн жоғарыда атап кеткенбiз. Тiзiмдер пайдаланушыға web-
беттегi информацияның негiзгi бөлiктерiнiң басты идеяларымен таныстыруда
үлкен маңызға ие. HTML-дағы тiзiмдер информацияны логикалық элементтер
тiзбектерiне бөлiп қарастыруға мүмкiндiк бередi.
Тiзiмдер сонымен қатар web дизайнда да көп пайдасын тигiзедi. Оның
көмегiмен маңызды информациялар тiзбегiн ерекшелеп қоюға, глоссарийлер
жасауға, т.с.с. болады.
HTML тiзiмдерiн құруда келесi дескрипторлар қолданылады:
• UL..(UL) – маркерлi тiзiм;
• OL..(OL) – нөмiрленген тiзiм;
• LI - тiзiм элементiнiң дескрипторы;
• DL..DL - анықтамалар тiзiмiнiң дескрипторы;
HTML құжаттың мәтiнiн логикалық байланыста ұйымдастыру үшiн көп
жағдайларда маркелi тiзiмдер қолданылады. Мұндай тiзiмдерде әрбiр
элементтiң алдына белгiлi-бiр символдар қойылады. Мысалы,
UL
LIP Карындаш P
LIP Кiтап P
LIP Даптер P
UL
Нәтижеде броузерде төмендегi тiзiм пайда болады:
• Карындаш
• Кiтап
• Дәптер
Нөмiрленген тiзiмдерде реттелген сандық мәндер қолданылады. Мысалы,
P Пайдаланылган адебиеттер
OL
LIО.Камардинов. Информатика. -Шымкент. 2000, 250 б.
LIР.Кадiрбаева. MS FrontPage. -Шымкент. 2001, 84 б.
LIМ.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с.
LIА.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
LIЯ.Нильсен. Web-дизайн. Спб. 2002, 187 с.
OL
P
9 сурет - Нөмiрленген тiзiм
Кей жағдайларда күрделi тiзiмдердi қолдануға тура келедi. Күрделi
тiзiмдер дегенiмiз не? Күрделi тiзiм – тiзiм iшiнде қосымша тiзiмнiң
орналасуы. Мысалы, кiтап мазмұны тараулардан, параграфтардан, пункттерден
тұратындықтан күрделi тiзiм бола алады. [3].
Дипломдық жұмыс мазмұны енгiзiлген күрделi тiзiм құратын HTML код
құрайық:
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжат кодын енгiзiңiз:
HTML
HEAD
TITLE МАЗМУН
TITLE
P align="center"
B МАЗМУНЫ
OL
LI P КIРIСПЕ P
LI
P HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ P
OL
LI
P Интернетте программалау. HTML тiлiне кiрiспе P
LI
P НTML кужаттармен жумыс iстеу негiздерi P
OL
LI
P ГРАФИКАЛЫК WEB-ДИЗАЙН P
OL
LI P Web беттi тиiмдi безендiру P
LI
P Web бетте анимациялык кескiндердi бейнелеу технологиясы P
OL
LI P КОРЫТЫНДЫ P
LI P ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР P
B
P
OL
HTML
3. HTML құжатты “Мазмун.html” атауымен жұмыс үстелiне сақтаңыз.
4. “Мазмун” файлын iске қосыңыз (10-сурет).
10 сурет - Интернет оқулық мазмұны шығарылған күрделi тiзiм
Маркерлi және нөмiрленген тiзiмдердiң екi атрибуты бар: type және
value. Бұлардың бiрiншiсi сәйкесiнше маркерленген тiзiмнiң маркерiнiң түрiн
анықтайды да, екiншiсi меншiктелген мән бойынша тiзiмдi сәйкес нөмiрден
бастап бередi.[9].
LI type=”circle” Шебер-маркер
LI type=”square” Квадрат-маркер
OL
LI value=”10” Тiзiмнiн оныншы элементi
LI Тiзiмнiн он бiрiншi элементi
LI т.с.с.
OL
11 сурет – type және value атрибуттары қолданылған тiзiм
9. Фреймдер. Фреймдердi қолдану web-беттер құрудағы ыңғайлы тәсiлдердiң
бiрi. Фрейм броузер екi және одан да көп беттерге бөлiп қарастыруға
мүмкiндiк бередi.
Фреймдердi құру үшiн келесi дескрипторлар қолданылады:
• FRAMESET...FRAMESET - негiзгi атрибуттары жолдар мен
бағандар санын анықтайды.
5 кесте - FRAMESET дескрипторының негiзгi атрибуттары
Атрибут және оның Сипаттамасы
мәнi
cols=“x” тiк фреймдердiң өлшемiн пиксель не пайыздық өлшем
бойынша анықтайды; х-ке меншiктелетiн * мәнi
динамикалық фрейм құруға мүмкiндiк бередi
rows=“x” көлденең фреймдердiң өлшемiн пиксель не пайыздық
өлшем бойынша анықтайды; х-ке меншiктелетiн * мәнi
динамикалық фрейм құруға мүмкiндiк бередi
фреймнiң қабырғасының өлшемiн анықтау;
border=“x”
• FRAME - жеке фреймге кiрiстiрiлетiн HTML-құжаттың адресiн
анықтайды.
6 кесте - FRAME дескрипторының негiзгi атрибуттары
Атрибут және оның Сипаттамасы
мәнi
name=“x” HTML-құжаттар арасында байланыстар орнату үшiн
қолданылады;
scrolling=“x” Көлденең және тiк айналдыру белдеушелерiн iске
қосады (мәндерi: “yes” не “no”)
src=“x” фреймге орналасатын құжаттың URL адресiн анықтайды
Ендi аталған дескрипторларды пайдаланып қарапайым фрейм құратын құжат
жазып көрелiк:
HTML
HEAD
TITLE
Негiзгi
TITLE
HEAD
FRAMESET cols="260,*"
FRAME src="mazmun.html" scrolling="auto"
FRAME src="1.html" name="onjak"
FRAMESET
HTML
Құжаттың орындалу нәтижесi 12-суретте келтiрiлген. Суреттен көрiп
тұрғанымыздай сол жақ фреймде негiзгi мазмұн орналасқан да, броузердiң сол
фреймiнде мазмұннан сәйкес таңдалған тақырып ашылған. Әрине мазмұндағы
қажеттi сiлтемеге басқан кезде сәйкес құжаттың ашылуын қамтамасыз ету
“Mazmun.html” құжатындағы сiлтемелерге байланысты орындалады. [11].
12 сурет - Фреймдерге бөлiнген броузер
Кей жағдайларда құжаттағы мәтiнге қатысты динамикалық фреймдер құруға
болады. Бiздiң мысалымыздағы
FRAMESET cols="260,*"
жолындағы * таңбасы фреймнiң биiктiгiнiң динамикалық екендiгiн
бiлдiредi.
Жалпы фреймдер веб-беттер құруда үлкен септiгiн тигiзiп ғана қоймай,
оны безендiру жұмыстарын да жеңiлдетедi. [13].
1.3 Web - беттер құру технологиясы
Интернет желiсiн пайдаланушылар арасында байланыс болмаса, онда желi
жай ғана информация баспаханасы ретiнде жұмыс iстер едi. Байланыс - бiр
құжаттың көлемiнен шығып, оған қатысы бар құжаттарға ғана емес, онымен
идеясы жақын келетiн барлық информацияны шығарып алу, олардың авторларымен
қарым-қатынас жасау құралы. Сондықтан кез келген желінің негiзi – байланыс
болып табылады. Web-беттiң негiзгi мәнi осы байланысты ұйымдастыру. Жай
ғана ұйымдастырмай тиiмдi, түсiнiктi, жылдам түрде ұйымдастыру.
Web беттер бiр-бiрiмен байланыстырылып web-түйiндi құрайды. Web-түйiн
Интернет желiсiнiң басты қаруы. Көптеген ғылыми, экономикалық, медицина,
жарнама, ақпарат тарату құралдары, ойын-сауық т.с.с. салалардағы түрлi
информациялар өрмекшiнiң өрмегiндегi өрмектерi секiлдi бiр-бiрiмен тығыз
байланыстырылып үлкен жүйе құрайды. [9].
1. Абсолют және салыстырмалы сiлтемелер. Алғашқы кездерi гиперсiлтеме
деп аталған әдiс уақыт өте келе дамытылып, сiлтеме ретiнде мультимедиа
құралдарын да қолдануға болатындығын көрсеттi. Осыған байланысты қазiргi
кезде гипермедиа терминi пайда болды.
HTML тiлiнде сiлтемелiк байланысты А дескрипторы ұйымдастырады. Оны
кейде зәкiр деп те атайды. А дескрипторы бiр HTML құжатты екiншiсiмен
байланыстырады. Байланыс екiншi құжаттың қайда орналасқанына қарамастан
орнатыла бередi. Тек ол орналасқан адрес Web-түйiнге қосылса болғаны.
A дескрипторының ең негiзгi атрибуты href, яғни гипермәтiндiк
сiлтеме. href атрибутының мәнi көбiне URL (ресурстардың универсал локаторы)
болып келедi. Басқаша айтқанда URL – Web-түйiннiң адресi. Ол бiрнеше
бөлiктерден тұрады: байланыстыру протоколының префиксi (http:), домен
атауы (көбiнесе www-ден басталады ) және ресурс көрсеткiшi (әдетте файл
атауы).
A және A дескрипторларының арасында жазылған кез келген мәтiн
гипертекстiк мәтiн болып табылады.
HTML тiлiнде А дескрипторы арқылы сiлтемелiк байланысты
ұйымдастырудың екi түрi бар: абсолют және салыстырмалы.
Толық URL арқылы берiлетiн абсолют сiлтеме жоғарыда қарастырылды. Бұл
сiздiң бүкiл (абсолют) Web-адрестi толық пайдаланғаныңызды бiлдiредi.
Абсолют сiлтеме қажеттi web-бет орналасқан web-түйiннiң алғашқы бетiн
ашады. Бұл сiздiң броузерiңiзге қажеттi сервердi тауып, оған ауысуға
мүмкiндiк бередi.[4].
Салыстырмалы сiлтеме сiз өзiңiз орналасқан сервердегi адреске кiруде
қолданылады. Бiр web-түйiннiң iшiнде, бiр каталогтың iшiнде орналасқан бет
үшiн тек файл атауын беру арқылы, оны ашып алуға болады.
Мысалы,
A href=”Мазмун.html” Дипломдык жумыс мазмуны A
Егер сiз басқа каталогта орналасқан құжатқа гиперсiлтеме құрғыңыз
келсе, онда мәселе сәл қиындайды. Мұндай құжатқа сiлтеме жасау үшiн оның
орналасқан каталогының атауы, яғни құжаттың толық адресi href атрибутына
меншiктелуi тиiс.
Мысалы,
A href=”111Мазмун.html”Дипломдык жумыс мазмуныA
Абсолют және салыстырмалы сiлтемелердi пайдалана отырып, дипломдық
жұмыс мазмұнын көрiп шығуға арналған web-түйiн құрып көрелiк.
1. Блокнот қосымшасын ашыңыз;
2. HTML кодын терiңiз;
HTML
HEAD
TITLE Дипломдык жумыска сiлтеме TITLE
HEAD
BODY
A href="Мазмун.html" Интернет оқулық мазмунын кору ушiн шертiнiз A
BODY
HTML
3. Құжатты “Сiлтеме.html” атауымен сақтаңыз;
4. Жоғарыда келтiрiлген “Мазмун.html” файлын iске қосыңыз. Мазмұн
файлының орындалуы көрiнедi;
5. Броузер терезесiнде тышқанның оң жақ түймесiн шертiп, контекстi
мәзiрден Просмотр в виде HTML командасын берiңiз.
6. Көрiнген HTML кодты төмендегiше етiп өзгертiңiз;
HTML
HEAD
TITLE
МАЗМУН
TITLE
BODY
P align="center"
A href="Сiлтеме.html" Керi A
BR BR
B МАЗМУНЫ
OL
LI
P A href="Кiрiспе.html" КIРIСПЕ A
P
LI
P HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ P
OL
LI
P Интернетте программалау. HTML тiлiне кiрiспе P
LI
P НTML кужаттармен жумыс iстеу негiздерi P
OL
LI
P ГРАФИКАЛЫК WEB-ДИЗАЙН P
OL
LI P Web беттi тиiмдi безендiру P LI
P Web бетте анимациялык кескiндердi бейнелеу технологиясы P
OL LI P КОРЫТЫНДЫ P
LI ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР B P OL
BODY
HTML
7. Өзгерiс енгiзiлген құжатты “Мазмун.html” атауымен қайта сақтаңыз;
8. Жұмыс үстелiндегi “Сiлтеме.html” файлын iске қосыңыз. 13-суреттегi
броузер терезесi көрiнедi.
9. Броузердегi сiлтемеге шертiп, құжат мазмұнын ашыңыз (14-сурет);
10. 14-суретте көрiнген броузер терезесiндегi Керi сiлтемесi мазмұнға
сiлтеме бетiн қайта iске қосады (13-сурет). Ал КIРIСПЕ сiлтемесi
“Кiрiспе.html” құжатын ашуы тиiс. Егер алдын-ала мұндай құжат құрылмаған
болса, броузер терезесiнде 15-суреттегi хабарлама көрiнедi. Сондықтан құжат
кiрiспесi орналасқан HTML құжатты алдын-ала әзiрлеп қойан жөн.[5].
2. Iшкi ciлтемелер. Кейде бiр web-бетте орналасуы тиiс информация үлкен
болуы мүмкiн. Мұндай информацияның соңы компьютер экранында көрiнбей қалады
және пайдаланушы оны көру үшiн броузердiң оң жақ шетiнде орналасқан жоғары-
төмен жылжыту белдеушесiн пайдалануына тура келедi. Бұл жағдайда адамның
психофизиологиялық ерекшелiктерiне байланысты информацияны қабылдау төмен
деңгейде өтетiнi жайлы талай мамандар айтып жүр. Мұндай кемiшiлiктi жою
үшiн бiр web-бет iшiнде жылжу әдiсiн пайдалануға болады. Ол үшiн беттегi
информацияны мазмұнына қарай бiрнеше бөлiктерге бөлiп қарастыру керек.
Әрбiр бөлiкке жеке атау берiп, бұл атаулар тiзiм түрiнде құжаттың басында
орналасуы тиiс. Тiзiмнiң қажеттi элементiне басқан кезде броузер экран
бетiнде мазмұны сәйкес мәлiметтердi көрсетедi.[7]
13 сурет - Web-беттiң жоқтығын не ашылмайтынын хабарлау
Ендi iшкi сiлтемелердi ұйымдастыруды дипломдық жұмыстың кiрiспесiне
пайдаланып көрейiк.
1. Блокнот қосымшасын ашыңыз;
2. Кiрiспенiң HTML кодын терiңiз;
HTML
HEAD
TITLE КIРIСПЕ TITLE
HEAD
FONT face="Times Kaz"
PA name=#"top" AP
P align="center"
B КIРIСПЕ B P
UL
LI
A href=#"Интернет" Интернет туралы қысқаша мәлiмет A
LI
A href=#"Web бет деген не?" Web бет деген не?A
LI
A href=#"HTML" HTML жайлы A
UL
LI
A name=#"Интернет" Интернет туралы қысқаша мәлiмет A
PИнформациялық қоғамда адамзаттың байланыс құралының өзгеше екенiн
практика көрсетiп отыр. Олай болса, жоғары оқу орындарындағы Информатиканы
оқыту әдiстемесiндегi "Интернет желiсi және компьютерлiк коммуникациялар"
курсы өзектi тақырыптардың бiрi болып саналады.P
PҚазiргi кездегi Интернет желiсiнiң мүмкiндiктерiне, қызметiне
толығырақ тоқталар болсақ, Интернет адамға қашықтық деген ұғымды жоққа
шығарып, әлемнiң кез-келген нүктесiнен жылдам хабар алуға, бейнелi түрде
байланысуға, информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты
түсiнiктi түрде беруге, қабылдауға мүмкiндiк туғызып отыр.P
PИнтернеттiң құрамында миллиондаған компьютерлер, компьютер
терминалдары және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-
бiрiмен байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы
өз бiлiм деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi
мәселелерiнiң бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер
тапшылығы болса, оны Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi
шешуге болады. Жалпы айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының
қызметкерi болсын, бiлiм алушы оқушы не студент болсын Интернет желiсiнде
жұмыс iстей алуы заман талабы болып отыр. P[10].
PПайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз
тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық
пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе
бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық
мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп
түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап
алу ғана.P.[13].
P align="center"
A href=#"top" Беттiн басына өту AP
LI
A name=#"Web бет деген не?" Web бет деген не? A
PWeb бет World Wide Web, яғни "дүниежүзiлiк өрмек" 1994 жылдың 14
желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген
жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар,
жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк
алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар,
жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар
желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен
тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде
салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз
Web беттерiн ашуға ұмтылуда.P
PWeb бет ашу үшiн Интернетте программалай бiлу керек. Интернетте
программалаудың негiзгi құралы - HTML (Hypertext Markup Language) -
гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер
арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық
объект түрiнде болып келедi. P
P align="center"
A href=#"top" Беттiн басына өту
AP
LI
A name=#"HTML" HTML жайлыA
PHTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан
оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң
тағы бiр жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану
(FrontPage, WYSIWYG т.с.с.). Бiрақ олардың өз кемшiлiктерi бар. Бiз оларға
тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке диплом жұмысын жазуға
болады.P.[13].
PДипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнiң" негiздерiн
оқыта отырып, Интернетте Web беттер ашуға нақты мысалдар келтiру арқылы
оқушының не студенттiң "Интернет желiсi және компьютерлiк коммуникациялар"
тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк беру болып табылады.
P
P align="center"
A href=#"top" Беттiн басына өту AP
FONT
HTML
3. Құжатты жұмыс үстелiне “Кiрiспе.html” атауымен сақтаңыз;
4. “Кiрiспе” файлын iске қосыңыз. 16-суреттегi web-бет ашылады.
Броузердегi маркерлi тiзiмнен қажеттi сiлтеме шертiлсе, броузер құжаттың
осы сiлтемеге сәйкес бөлiгiне өтедi (17-сурет). Құжаттың бас жағына өту
“Беттiң басына өту” сiлтемесi арқылы орындалады.[12].
16 сурет - Iшкi сiлтемелерi бар web-бет
17 сурет - Iшкi сiлтеме көмегiмен ашылған құжат бөлiгi
2 Графикалық web-дизайн
2.1 HTML құжатта графикалық кескiндермен жұмыс
HTML-да мәтiн форматтаудан Web-дизайнға өтудiң алғашқы қадамы Web-бетке
сурет орналастырудан басталады. Суреттер web-беттi тек безендiрiп қана
қоймай, пайдаланушыға информацияның түсiнiктi берiлуiне, беттегi
информацияның логикалық тiзбектерiн құруға т.с.с. web-беттiң негiзгi
сипаттамаларына әсер етедi.
HTML құжатқа сурет енгiзу үшiн IMG дескрипторы қолданылады. Оның src
атрибутына URL нұсқауын беру арқылы кез-келген графикалық кескiндi құжатқа
кiрiстiруге болады. HTML құжатқа суреттер кiрiстiру BODY бөлiмiнде
орындалады. Мысалы,
HTML
HEAD
TITLE Cурет кiрiстiру TITLE
HEAD
BODY
IMG src="СуреттерКiтап.gif"
BODY
HTML
18 сурет - Броузердегi сурет
IMG дескрипторының атрибуттары броузердiң суреттермен жұмыс iстеуiн
басқаруға мүмкiндiк бередi.
• src=”x” – суреттiң түрған орны (оның абсолют не салыстырмалы URL-
адресi);
• width=”х” – броузерге сурет енiн алдын-ала тағайындауға мүмкiндiк
бередi;
• height=”х” – броузерге сурет биiктiгiн алдын-ала тағайындауға
мүмкiндiк бередi;
• border=”x” – сурет рамкасының енiн анықтайды;
• align=”x” – суреттiң бетте көлденең және тiк орналасуы түрлерiн
анықтайды;
• alt=”x” – суреттiң орнына оның сипаттамасын шығаруға мүмкiндiк
бередi. Сонымен қатар тышқан көрсеткiшi сурет үстiне орналасқан
кезде, ол жайлы қысқаша мәлiмет шығарады;
• hspace=”x” – суреттiң оң және сол жағынан бос орындар қалдыру. Мәнi
сан түрiнде анықталады;
• vspace=”x” – суреттiң жоғарғы және төменгi жағынан бос орындар
қалдыру. Мәнi сан түрiнде анықталады;
HTML құжатта графикалық кескiндермен жұмыс iстеуде IMG дескрипторының
width және height атрибуттарын мiндеттi түрде қолдану керек. Себебi броузер
суреттiң енiн, биiктiгiн өзi анықтай алмай, оны созып не қысып жiберуi
мүмкiн. Бұл суреттi броузерге пайдаланушының қалауы бойынша шығаруына
кедергi келтiредi. width және height атрибуттарының жазылу үлгiсi:
IMG src="СуреттерКiтап.gif" width="150" height="150"
border атрибуты cурет шетiндегi рамканың енiн анықтайды. Егер бұл
атрибуттың мәнi 0-ге тең болса, онда сурет шетiнде рамка болмайды.
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4”
Суреттiң web-бетте орналасуын align атрибуты анықтайды. Бұл атрибут
суреттiң броузерде көлденiңiнен орналасуын анықтайтын left (сол жақ шетi),
right (оң жақ шетi), center (ортасы) мәндерiне және тiгiнен орналасуын
анықтайтын top (жоғарғы жақ шетi), bottom (төменгi жақ шетi), middle
(ортасы) мәндерiне ие болуы мүмкiн.[12].
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4” align=”right”
19-суретте енiнiң, биiктiгiнiң және рамка енiнiң өлшемдерi берiлген,
беттiң оң жақ шетiне орналастырылған графикалық кескiн келтiрiлген.
19 сурет - өлшемдерi берiлген графикалық кескiн
IMG дескрипторының alt атрибутының көмегiмен суретке сипаттама беруге
болады.
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4” alt=”Пайдаланылган әдебиеттер”
20 сурет - Тышқан көрсеткiшi сурет үстiне орналасқан кезде суреттiң
сипаттамасы көрiнедi
Hspace және vspace атрибутарын пайдалану арқылы графикалық кескiннiң
айналасына мәтiннiң орналасу түрiн анықтауға болады. Мысалы,
BODY
P BПайдаланылган эдебиеттер BP
IMG src="СуреттерКiтап.gif" width="100" height="110" border=”2”
alt="Пайдаланылган эдебиеттер" align="right" hspace="50"
P OL
LIО.Камардинов. Информатика.-Шымкент.2000,250 б.
LIР.Кадiрбаева. MS FrontPage.-Шымкент.2001,84 б.
LIМ.Хольцшлаг. HTML 4.0.-М.:2003,869 с.
LIА.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
LIЯ.Нильсен. Web-дизайн. Спб. 2002, 187 с.
OL
P
BODY
21 сурет - IMG дескрипторының hspace атрибутының көмегiмен графикалық
кескiн мен мәтiннiң бетте орналасуы
HTML құжатта графикалық кескiндi не мәтiндi жылжымалы түрде Ѕйымдастыру
мүмкiн. Бұл жағдайда суреттiң не мәтiннiң өлшемiне қатысты броузердегi
мәтiн не сурет жылжымалы болады (21-сурет).[13]
3.Суреттердi байланыстыру. Мәтiндер сияқты суреттер де гиперсiлтеме
бола алады. Суреттердi сiлетеме түрiнде ұйымдастыру құжаттар арасында
жылжудың көп тараған түрi.
Суреттердi байланыстыру гипермәтiндiк сiлтеме жасау сияқты А
дескрипторының көмегiмен орындалады. Мысалы,
A href=”Пайд.эдеб.html” IMG src=”СуреттерКiтап.gif”
border=”0” alt=”Пайдаланылган эдебиеттер” A
Келтiрiлген HTML код нәтижесiнде броузерде пайда болған суретке
тышқанның сол жақ түймесi бiр рет шертiлген кезде “Пайд.әдеб” құжаты
ашылады (23-сурет).[1]
22 сурет - “Пайдаланылған әдебиеттер” құжатын ашатын суретсiлтеме
2.2 Web бетте анимациялық кескiндердi бейнелеу технологиясы
Интернет броузерi кез келген информация орналаса беретiн универсал
орта. Сондықтан онда мәтiндiк, графикалық информациямен қатар,
мультимедиалық информацияны да кiрiстiруге болады. Мультимедиалық
информация көбiне дыбыстық және анимациялық құбылыстар түрiнде бейнеленедi.
HTML құжатқа дыбыс және анимация құбылыстарын шығару үшiн оларды
ойнататын программалық модульдiң компьютерге алдын-ала орнатылып қойылуы
тиiс. МҰндай модульдерге MS MediaPlayer, AppleQuickTime, RealPlayer G2
т.с.с. программалық өнiмдер жатады.
HTML құжат келесi типтегi мультимедиалық информацияны бейнелей алады:
.avi – AudioVideo Interface (дыбысбейне интерфейсi). Windows
жѕйесiнде дыбыспен және бейнеклиптермен жұмыс iстеудi қамтамасыз ету үшiн
қолданылады. Бұл форматтағы файлдар өте шағын болып келедi және желi
бойынша Ұзақ жүктелмейдi. Сондықтан пайдаланушылар көп жағдайда .avi
форматтағы файлдарды ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Кiрiспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1 HTML – интернетте программалаудың негiзгi құралы ... ... ... ... ... ...
1.1 Интернетте программалау ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
1.2 НTML құжаттармен жұмыс істеу негіздері ... ... ... ... ... ... ... ... ...
1.3 WEB - беттер құру технологиясы ... ... ... ... ... ... ... ... ... ... ... ... .
2 Графикалық web-
дизайн ... ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ..
... ... ..
2.1 HTML құжатта графикалық кескіндермен жұмыс ... ... ... ... ... ... ...
2.2 Web бетте анимацияны қолдану технологиясы ... ... ... ... ... ... ... ...
3 Орта мектепте күнделікті білім алатын процесін автоматтандыру ... ... ... ..
4 Бизнес-жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. ... ...
4.1 Аннотация ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.2 Түйін ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .
4.3 Кәсіпорын сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.4 Өнімнің сипаттамасы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.5 Маркетинг жоспары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.6 Өндірістік жоспар ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
4.7 Ұйымдастырушылық жоспар
4.8 Қаржылық жоспар
4.9 Жұмыстардың орындалу тізбесі
Қорытынды
Әдебиеттер тізімі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Кiрiспе
Қазiргi кезде информациялық қоғамда адамзаттың байланыс құралының
өзгеше екенiн практика көрсетiп отыр. Олай болса, оқу орындарындағы
Информатиканы пәнiнiң “Интернет желiсi және компьютерлiк коммуникациялар”
курсын оқыту өзектi тақырыптардың бiрi болып саналады.
Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар
болсақ, Интернет адамға қашықтық деген ұғымды жоққа шығарып, әлемнiң кез-
келген нүктесiнен жылдам хабар алуға, бейнелi түрде байланысуға,
информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты түсiнiктi түрде
беруге, қабылдауға мүмкiндiк туғызып отыр.
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары
және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-бiрiмен
байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы өз бiлiм
деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi мәселелерiнiң
бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер тапшылығы болса, оны
Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi шешуге болады. Жалпы
айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының қызметкерi болсын,
бiлiм алушы оқушы не студент болсын Интернет желiсiнде жұмыс iстей алуы
заман талабы болып отыр.
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз
тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық
пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе
бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық
мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп
түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап
алу ғана.
Web бет дегенiмiз не?
Web бет World Wide Web, яғни “дүниежүзiлiк өрмек” 1994 жылдың 14
желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген
жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар,
жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк
алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар,
жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар
желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен
тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде
салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз
Web беттерiн ашуға ұмтылуда.
Web бет ашу үшiн Интернетте программалай бiлу керек. Интернетте
программалаудың негiзгi құралы – HTML (Hypertext Markup Language) -
гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер
арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық
объект түрiнде болып келедi.
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан
оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң
тағы бiр оңай жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану
(FrontPage, WYSIWYG, AceHTML Pro т.с.с.). Бiрақ олардың өз кемшiлiктерi
бар. Бiз оларңа тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке
диплом жұмысын жазуға болады.
Бүгiнде жоғары және үздiксiз бiлiмге деген сұраныстың артуына
байланысты бiлiм берудiң түрлi мақсаттағы құрылымдары пайда болуда. Осынау
құрылымдардың бiрi қашықтан оқыту жүйесi алдыңғы қатарлы елдерде ырғақты
түрде дамып келедi. Бiр ғана АҚШ пен Канаданың өзiнде 70-тен астам
колледждер мен жоғары оқу орындары студенттерге қашықтан оқыту жүйесiн
ұсынуда. Европалық елдерде қашықтан оқыту жүйесiнiң жұмысын ұйымдастыруда
телекоммуникациялық жүйелердi және компьютердi пайдалану тәжiрибесi молынан
жинақталған. Ресейде қашықтан оқыту мәселелерiмен ММТУ, МЭИ, МИЭМ т.с.с.
жетекшi оқу орындары айналысуда.
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнде программалу
негiздерiн оқыта отырып, Web беттер ашуға нақты мысалдар келтiру арқылы
Интернет-оқулық құру технологиясын жетiлдiру. Бұл қашықтан оқыту жүйесi
негiзiнде оқып жатқан студенттiң “Интернет желiсi және компьютерлiк
коммуникациялар” тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк
бередi.
1 HTML – интернетте программалаудың негiзгi құралы
1.1 Интернетте программалау
Ең алдымен Web бет құрудың ең ыңғайлы құралын таңдап алу керек. Әрине
ол - HTML тiлi. Бiрақ HTML тiлiнде программалу үшiн арнайы орта құрылмаған.
Себебi Web бет құру мен оны безендiруде тек бiр ортаны ғана пайдалану оның
мүмкiндiктерiн шектейдi. Сондықтан көп жағдайларда HTML тiлiнде
программалау кәдiмгi мәтiндiк редакторлардың көмегiмен жүзеге асырылады да,
web беттiң графикалық безендiрiлуi және анимациялық мүмкiндiктерi басқа
орталарда iске асырылады. Windows ортасында NotePad (Блокнот) редакторы
HTML-дың ең кеңiнен тараған құралы. Ол Windows жүйесiнiң барлық
нұсқаларында кездеседi.
HTML тiлiнiң синтаксисi мен құрылымы. Әрбiр тiлдiң өзiндiк құрылымдық
логикалық ерекшелiктерi болатыны сияқты HTML тiлiнiң де өзiндiк
ерекшелiктерi бар. Алайда ол ең қарапайым, қатаң логикалық ережелерге онша
бағына бермейтiн тәуелсiз тiл. Дегенмен оның да өз синтаксисi, басқарушы
құрылымдары бар. Тiлдiң негiзгi басқарушы құрылымы дескриптор (кейде
элемент дщеп те аталады). Дескриптор – белгiлi-бiр әрекеттi анықтайтын HTML
элементi. Дескрипторлардың мүмкiндiктерi мәндерге ие бола алатын
аттрибуттарды қолдану арқылы толығымен ашылады.
HTML дескрипторлары дербес ережелерге бағынумен қатар, жалпы ережелерге
де бағынады. Бiрiншi ереже бойынша барлық дескрипторлар “кiшi” () және
“үлкен” () символдарының арасына жазылады, мысалы:
HTML
Келесi ереже дескрипторды ашу және жабу компоненттерiн қолдануға
арналған. Дескрипторды жабу “кiшi” () және “үлкен” () символдарының
арасына қисық сызық () символын қою арқылы iске асырылады:
HTML
Бұл ашылған дескрипторды белгiлi-бiр жерде жабу керектiгiн бiлдiредi.
Бiрақ көптеген дескрипторлар бұл ережеге бағынбайды. Мысалы, абзацтар үшiн
қолданылатын Р дескрипторы, тек ашылады, оны жабудың қажетi жоқ.[1].
Жалпы ережеге дескрипторларды төменгi не жоғарғы регистрде жазу тәсiлi
де кiредi. Әдетте түсiнiктi болу үшiн дескрипторлар жоғарғы регистрде
жазылады. Бiрақ кодтаудың жаңа әдiснамасы – XHTML-да (кеңейтiлген HTML)
дескрипторларды төменгi регистрде жазу қалыптасқан.
Дескрипторларды жазудағы тағы бiр маңызды мәселе бос орындар (пробел)
қалдыру. HTML кодтарының кейбiр тұстарына бос орын қалдыру мiндеттi болса,
кейде артық қалдырылған бос орын броузердi қатты шатастыратыны сонша, ол
ешқандай да информация бере алмай қалады.
Жоғарыда ескертiп кеткенiмiздей атрибуттар дескрипторлардың әрекетiн
анықтайды. Көп жағдайларда дескрипторлар атрибутсыз жұмыс жасайды. Алайда
кейде мiндеттi түрде атрибуты болуы тиiс дескрипторлар кездеседi.
Атрибуттар дескриптордың атауынан кейiн бiр бос орын тасталып, мән
меншiктелiп жазылуы керек. Дескрипторда бiрнеше атрибут болса, олар бос
орын арқылы ажыратылады. Мысалы,
BODY bgcolor=#FFFFFF text=#000000
мұндағы bgcolor – фон түсi, text – мәтiн түсi.
HTML-де дескрипторға атрибуттар тiркелiп, атрибуттарға мәндер
меншiктелiп жазылған сөйлем жол деп аталады.
Атрибуттарға мiндеттi түрде мәндер меншiктелуi тиiс. Бұлай болмаған
жағдайда HTML дескрипторды қабылдамайды. Матрибуттарға меншiктелетiн мәндер
түрлiше болуы мүмкiн: сандық, мәтiндiк, пайыздық, т.с.с. Мысалы, DIV -
бөлiм дескрипторының align атрибутына left (сол жақ шетi), right (оң жақ
шетi), center (ортасы), justify (енi бойынша) мәндердiң бiрiн меншiктеу
жолы:
DIV align= “right”
DIV мiндеттi түрде жабылуы тиiс дескриптор болғандықтан оны DIV
арқылы жабу керек.
Сол сияқты FONT (шрифт) дескрипторының size (өлшем атрибуты 1-ден 7-
ге дейiн мәндер қабылдайды, мұндағы 1 ең кiшi шрифт өлшемi, ал 7 ең үлкен
шрифт өлшемi) атрибутына мән меншiктеу жолы:
FONT size= “5”
Бұл кезде броузердегi мәтiннiң шрифт өлшемi FONT дескрипторы
жабылғанша 5 өлшемiн қабылдап тұрады - FONT.
Сандық мәндердiң келесi бiр типi оналытылық код түрiнде берiледi. Бұл
HTML-де пайдалануға мүмкiн түстердiң оналтылық санау жүйесiнде алфавиттiк-
цифрлық коды. Мұндай мысал жоғарыда келтiрiлген болатын. Мысалдағы, FFFFFF
– ақ түстi фон, ал 000000 - қара мәтiн түсiн бередi. Оналтылық мәндердiң
алдына # символы қойылады.
HTML-де сiлтеме дескрипторы - А арқылы Web-адрестi шығаруға болады:
A href= “http:www.yahoo.com” A
Осы сияқты каталогты және кескiн файлдары дескрипторын қолдануға
болады:
IMG src= “suretteraspan.gif”
Өздерiңiз байқағандай барлық аттрибуттардың мәндерiнiң алдына = (теңдiк
белгiсi) таңбасы қойылады және оналтылық мәндерден басқа типтегi мәндер
тырнақшаға (“ ”) алынып жазылады. Бұл HTML-да жол жазудың жалпы
ережелерiнiң бiрi.
Арнайы символдардың көмегiмен HTML бетке HTML кодын шығаруға болады. Ол
үшiн “кiшi” және “үлкен” символдарының орнына & символын пайдалану керек,
мысалы,
< IMG src= “aspan.gif” >
Арнайы символдар мен дескриптордың қолданылу айырмашылығы 1 және 2-
суреттерде келтiрiлген.[4].
1 сурет - “Кiшi” және “үлкен” символдары арқылы берiлген дескриптор
графикалық кескiндi шығарады
2 сурет - Арнайы символдар көмегiмен HTML кодты HTML бетке шығаруға
болады
1.2 НTML құжаттармен жұмыс істеу негіздері
1.HTML қабықшасы. HTML қабықша – беттiң тақырыбы (HEAD) және негiзгi
дескрипторлардан тұратын денесi (BODY) орналасқан қарапайым дескриптор.
Тақырыбы және денесi бар HTML дескриптордың жазылу үлгiсi:
HTML
HEAD
TITLExc TITLE
HEAD
BODY BODY
HTML
мұндағы, TITLE TITLE жолы құжат тақырыбын бередi. Құжат тақырыбы
келесi мәлiметтердi қамтиды:
Беттiң аталуы. TITLE және TITLE дескриторлары беттiң аталуын
анықтайды. Ол HTML құжаттың денесiнiң құрамына кiрмейдi.
Стиль. HTML құжатты басқарудың элементтерi мен стилдерiн тақырыпқа
енгiзу қажет болған жағдайда қолданылады.
Метаинформация. МЕТА дескрипторы құжат авторы, кiлттiк сөздер, арнайы
әрекеттер қажет болған жағдайда қолданылады.
Кез келген құжатты құрғанда оның басқару элементтерi мен стильдерi,
авторы, кiлттiк сөздер жайлы мәлiметтер онша қажет бола бермейтiндiктен
аталған дескрипторлардың барлығы бiрдей жиi қолданыста емес. Дегенмен әрбiр
құжаттың атауы болуы тиiс, сондықтан TITLE дескрипторы жиi
қолданылады.[7].
2.Құжат денесiнiң құрылымы. HTML құжаттың денесi орналасатын негiзгi
бөлiгi BODY және BODY дескрипторлары арқылы iске асырылады. Құжат
денесiне енгiзiлетiн информация келесiдей болуы мүмкiн:
Мәтiн. Құжат құрамында кездесетiн мәтiндер. Олар оқылуы жеңiл әрi
түсiнiктi болу үшiн форматталуы да мүмкiн.
Графикалық кескiн. Құжатта жылжуға немесе информацияны көрнекi түрде
беру үшiн енгiзiлетiн графикалық информация.
Сiлтеме. Web түйiннiң iшiнде оңай жылжуға және желiнiң басқа да
тұстарына жылдам өтуге арналған сiлтемелер.
Мультимедиа және арнайы программалар. Видеороликтер, Java аплеттерiмен,
Flash, Shockwave программаларымен жұмысты басқаратын дескрипторлар құжат
денесiнде орналасуы тиiс.
3.Түсiнiктемелер. Құжатта қолданылып жатқан дескрипторлар мен
әрекеттерге берiлетiн түсiнiктеменi құжат денесiнiң кез келген тұсына
енгiзуге болады. Түсiнiктеме үлкен HTML-беттер құрғанда өте тиiмдi.
Түсiнiктеме !-- -- дескрипторы арқылы жазылады.
4. Форматтау элементтерi. Мәтiндi форматтау – HTML тiлiнiң ең қарапайым
және ең қуатты құралы. Себебi Web-бет форматталған мәтiннен тұрғанда ғана
түсiнiктi әрi әсем болып көрiнедi. Мәтiндi форматтауда келесi дескрипторлар
қолданылады:
• H1..H1-H6..H1. Дескрипторлар диапазоны тақырыптар мен
тақырып мазмұнына қолданылады;
• BR. Каретканы қайтару дескрипторы;
• P..P. Абзацты ашужабу дескрипторлары;
• B..B. Мәтiндi жартылай қалың ету;
• I..I. Мәтiндi көлбеу ету;
• U..U. Мәтiн астын сызу.
Осы аталған дескрипторларды пайдаланып алғашқы HTML құжатты
жазайық.[10].
1-мысал.
1. Блокнот қосымшасын iске қосыңыз;
2. Құжат мәтiнiн енгiзiңiз:
HTML
HEAD
TITLE Негiзгi HTML-бет TITLE
HEAD
BODY
H1 Мәтiндi форматтау H1
BR
P B World Wide Web B жүйесiнiң негiзгi қызметi қажеттi
информацияны Iiздеу, жинау, экранға шығару. IОның экранға шығаратын
мәлiметтерi Web-беттер түрiнде сақталған BUэлектрондық құжаттар BU
P
BODY
HTML
3. Құжатты жұмыс үстелiне “Негiзгi HTML-бет.html” атауымен сақтаңыз.
Мұндағы құжат атауынан кейiнгi .html кеңейтпесi құрылған құжаттың
HTML-құжат екенiн бiлдiредi.
4. Файлды сақтап болған соң, жұмыс үстелiндегi “Негiзгi HTML-бет”
файлына тышқанның сол жақ түймесiн екi рет шертiңiз. 3-суреттегi
HTML-бет көрiнедi.
3 сурет - Негiзгi HTML-бет
Е с к е р т у. 3-суреттегi мәтiндегi қазақ әрiптерi дұрыс көрiнбейдi.
Себебi Интернет желiсiнде тек стандартты шрифттер қолданылады. Бұл
мәселенiң шешуi осы бөлімнің 6-тақырыбында қарастырылған.[14].
5. Абзацтармен жұмыс. Абзац мәтiнiнiң бетте орналасуы дескрипторлардың
align атрибутына меншiктелетiн мәндерге байланысты болады. Align атрибуты
төрт түрлi мәннiң бiрiне ие болуы мүмкiн: left (сол жақ шетi бойынша),
right (оң жақ шетi бойынша), center (бет ортасына), justify (мәтiн енi
бойынша). Мысалы, жоғарыда келтiрiлген “Негiзгi HTML-бет” құжатындағы
мәтiндi беттiң ортасына орналастыру үшiн HTML кодтың абзац дескрипторының
align атрибутына center мәнiн меншiктеу керек:
P align=“center” B World Wide Web B жүйесiнiң негiзгi қызметi
қажеттi информацияны Iiздеу, жинау, экранға шығару. IОның экранға
шығаратын мәлiметтерi Web-беттер түрiнде сақталған B U электрондық
құжаттар B U P
4 сурет - Бет ортасына орналасқан мәтiн
Абзацтармен жұмыс iстеудiң тағы бiр ерекшелiгi мәтiн жолдарының
интервалын беруге болады. Мәтiн жолдарының арасындағы интервалдар style
атрибуты арқылы анықталады. Жазылу үлгiсi: P style= “line-height:27pt”,
мұндағы pt – интервал өлшем бiрлiгi – пункт. Мысалы, 4-суреттегi мәтiндi 27
пункт интервалмен шығару төмендегiше болады:[13].
P align=“center” style= “line-height:27pt” B World Wide Web B
жүйесiнiң негiзгi қызметi қажеттi информацияны Iiздеу, жинау, экранға
шығару. IОның экранға шығаратын мәлiметтерi Web-беттер түрiнде сақталған
B U электрондық құжаттар B U P
Мәтiн фонының түсi де style атрибуты арқылы берiледi. Мысалы, P style=
“color:#FFFFFF; background:#008000”, мұндағы color – мәтiн шрифтiнiң түсi
(ақ), ал background – фон түсi (жасыл).
P align="center" style="line-height:27pt; color:#FFFFFF;
background:#008000"
B World Wide Web B жүйесiнiң негiзгi қызметi қажеттi информацияны
I iздеу, жинау, экранға шығару. I Оның экранға шығаратын мәлiметтерi
Web-беттер түрiнде сақталған [11].
B U электрондық құжаттар B U
P
5 сурет - Жасыл фонда шығарылған мәтiн
6. Шрифттермен жұмыс. Web-беттiң дизайн тиiмдiлiгi оның қаншалықты
деңгейде дайындалғанын анықтайды. Дизайн тиiмдiлiгi деген не? Бұл Web-
беттiң сыртқы түрiнiң түсiнiктi әрi әдемi безендiрiлуi. Шрифттермен жұмыс
iстей бiлу осы дизайн тиiмдiлiгiне қол жеткiзудiң негiзгi шарттарының бiрi.
Сондықтан әрбiр web-бет құрушы шрифттермен жұмыс iстеу тәсiлдерiн толық
меңгеруi тиiс.
Қазiргi кезде шрифттер өте көп болғандықтан оларды, белгiлi бiр
топтастырып алған жөн. Негiзiнен мұндай үш түрлi топ бар:
• Категория – шрифттердiң негiзгi класы. Оны шрифттiң “ұлты” деп те
атайды.
• Гарнитура – белгiлi бiр қасиеттерiне байланысты топтастырылған
шрифттер класы. Мұны шрифттiң “фамилиясы” деп түсiнуге болады.
• Кескiн – әрбiр шрифттiң қайталанбайтын өзiндiк ерекшелiгi. [9].
1 кесте - Негiзгi шрифт категориялары, гарнитуралары
Категориялар Гарнитуралар
Serif Times, Century Schoolbook, Garamond
Sans-Serif Hevletica, Arial, Verdana
Monospaced Courier, Courier New
Script Nuptical Script, Boulevard, Signature
Decorative Whimsy, Arriba!, Bergel
2 кесте - Гарнитуралар және кескiндер
Гарнитура Кескiн
Times Roman (тiк), Italic (көлбеу)
Arial Regular (кәдiмгi), Bold Italic (жартылай қалың көлбеу)
Courier Regular, Oblique (қиғаш)
Whimsy Regular, Bold (жартылай қалың)
HTML-да шрифттермен жұмыс iстеу FONT элементiмен жұмыс iстеуге
негiзделген. FONT дескрипторының негiзгi үш атрибуты бар:
• size (кегль) – мәтiн таңбаларының биiктiгi;
• color (түс) – шрифт түсi. Шрифт түсi көп жағдайда оналтылық кодта
берiледi.
• face (гарнитура) – қажеттi шрифт атауын таңдауға мүмкiндiк бередi.
1-мысалдағы мәтiнге FONT дескрипторын пайдалану:
BODY
!—Мәтiн шрифтiнiң атауы Times Kaz, өлшемi 2, түсi – көк --
FONT face="Times Kaz" size="3" color="#0000FF"
H1 Мәтiндi форматтау H1 BR
P align=“center” B FONT size="4" color="#FF0000"
!—Мәтiн шрифтiнiң өлшемi 4, түсi – қызыл --
World Wide Web FONT
B жүйесiнiң негiзгi қызметi қажеттi информацияны Iiздеу, жинау,
экранға шығару. IОнығ экранға шығаратын мәлiметтерi Web-беттер түрiнде
сақталған BU электрондық құжаттар B U P
FONT
BODY
Ескерту. Times Kaz шрифтi арқылы терiлген мәтiннiң қазақша әрiптерi
көрiнуi үшiн HTML құжат iске қосылғаннан соң броузер терезесiнен Вид-Вид
кодировки-Определенный пользователем командасын беру керек (6-сурет).
6 сурет - Шрифтi, өлшемi, түсi берiлген HTML құжат
7. Кестелермен жұмыс. Кестелердiң HTML құжаттарға енгiзiлуi кестелiк
берiлгендердi экранға шығару мақсатында пайда болды. Кесте пайдаланушыға
көптеген жеңiлдiктер бередi. Онда мәтiндiк берiлгендермен қатар графикалық
берiлгендердi де орналастыруға болады. Кестемен жұмыс iстеу
дескрипторлары:[13].
• TABLE..TABLE - кестенiң басы мен аяғын бiлдiретiн негiзгi
дескриптор. Бұл дескриптор көптеген атрибуттарға ие:
3 кесте - TABLE дескрипторының негiзгi атрибуттары
Атрибут және оның мәнi Сипаттамасы
align=“x” Ұяшық iшiндегiсiн орналастыруға арналған:
мүмкiн болатын мәндерi: left (сол жақ
шетiне), right (оң жақ шетiне), middle
border=“x” (ортасына);
cellspacing=“x” кесте қабырғаларының жуандығын анықтайды;
кестенiң көршi ұяшықтарының арасындағы ара
cellpadding=“x” қашықтықты анықтайды
кестенiң ұяшығының қабырғасы мен ондағы
информация арасындағы ара қашықтықты
width= “x%” не width= “x” анықтайды
кесте енiнiң өлшемiн анықтайды.
• TR..TR - кесте қатарын ашатын және жабатын дескрипторлар. Кесте
қатарымен жұмыс iстейтiн бұл дескриптордың екi атрибыту бар: align –
ұяшықтағы мәлiметтiң көлденеңiнен орналасуы; valign - ұяшықтағы
мәлiметтiң тiгiнен орналасуы. Бұл атрибуттарды TABLE, TD
дескрипторларына қолдануға да болады;
• TD..TD - кестенiң жеке ұяшығын құратын дескриптор.
Дескрипторларды пайдаланып қарапайым кесте құрып көрейiк:
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжаттың кодын енгiзiңiз:
HTML HEAD TITLE Кесте 1 TITLE
BODY
TABLE border=“1” width= “485” cellpadding=”20”
cellspacing="10"
TR valign=“top”
TD Кестенiн 1-уяшыгы TD TR
TR valign=“bottom”
TD Кестенiн 2-уяшыгы TD TR
TR align=“middle”
TD Кестенiн 3-уяшыгы TD TR
TR align=“right”
TD Кестенiн 4-уяшыгы TD TR
TABLE BODY HTML
3. Файлды “Кесте1.html” атауымен жұмыс үстелiне сақтаңыз.
4. Жұмыс үстелiндегi “Кесте1” файлын iске қосыңыз. 7-суреттегi HTML
құжат көрiнедi.[12].
7 сурет - Ұяшықтарының iшiндегi мәлiметтерi түрлiше орналасқан кесте
Кей жағдайларда кесте ұяшықтарының параметрлерi бiр-бiрiмен сәйкес келе
бермейдi, яғни ұяшықтардың енi, биiктiктерi, iшiндегi информацияның
орналасуы т.с.с. түрлiше болуы мүмкiн. Бұл жағдайда ұяшық атрибуттары
қолданылады (4-кесте).[11].
4 кесте - TABLE дескрипторының негiзгi атрибуттары
Атрибут және Сипаттамасы
оның мәнi
width= “x%” не Ұяшықтың енiнiң ұзындығын анықтайды. Ұяшық енiнiң
width= “x” ұзындығын пайыздық көрсеткiш арқылы не пиксель
өлшемiмен беруге болады.
align=“x” Ұяшық iшiндегi мәлiметтiң көлденең орналасу түрiн
анықтайды: мүмкiн болатын мәндерi: left (сол жақ
шетiне), right (оң жақ шетiне), middle (ортасына);
valign=“x” Ұяшық iшiндегi мәлiметтiң тiгiнен орналасу түрiн
анықтайды: мүмкiн болатын мәндерi: top (жоғарғы
жағына), bottom (төменгi жағына), middle
colspan=”x” (ортасына);
rowspan=”x” кесте қатарының х ұяшығын бiрiктiру;
bgcolor=”x” кесте бағанының х ұяшығын бiрiктiру;
background=”url” Ұяшықтың фон түсiн анықтайды;
height=”x” ұяшықтың фоны ретiнде сурет алынады;
ұяшық биiктiгiн анықтайды.
Кесте ұяшығының атрибуттарын қолданып HTML құжат құрайық.
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжаттың кодын енгiзiңiз:
HTML HEAD
TITLE Кесте уяшыктарынын атрибуттарын пайдалану TITLE HEAD
BODY
TABLE border=“1” width= “525” cellpadding=”5”
cellspacing="5" TR TD width=”200” valign=”top” align=”middle”
bgcolor=”CC9999”
Кестенiн 1-катарынын 1-уяшыгы TD
TD width=”200” valign=”top” align=”middle”
Кестенiн 1-катарынын 2-уяшыгы TD
TD width=”200” valign=”top” align=”middle”
background=”backgrnd.gif”
Кестенiн 1-катарынын 2-уяшыгы TD
TR TR
TD width=”200” valign=”top” align=”middle”
Кестенiн 2-катарынын 1-уяшыгы TD
TD width=”400” valign=”top” align=”middle” colspan=”2”
Кестенiн 2-катарынын 2-уяшыгы TD
TR
TABLE BODY HTML
3. Файлды “Кесте2.html” атауымен жұмыс үстелiне сақтаңыз.
4. Жұмыс үстелiндегi “Кесте2” файлын iске қосыңыз. 8-суреттегi HTML
құжат көрiнедi.[7].
8 сурет - Екiншi қатарындағы 2 және 3 ұяшықтары бiрiктiрiлген кесте
HTML-да енi шектелген кестелерден басқа динамикалық кестелер де
қолданылады. Бұл кестелердiң енi мен ұзындығы пайдаланушының броузерiнiң
өлшемiне қатысты өзгерiп отырады. Мұндай кестелердi құру үшiн ен, ұзындық
шамаларын пиксель түрiнде емес пайыздық өлшем түрiнде беру керек. Мысалы,
width=”25%”, height=”100%” т.c.c.[8].
8. Тiзiмдер. Web беттегi информацияның анық және байланысты болуының
маңызды мәселе екенiн жоғарыда атап кеткенбiз. Тiзiмдер пайдаланушыға web-
беттегi информацияның негiзгi бөлiктерiнiң басты идеяларымен таныстыруда
үлкен маңызға ие. HTML-дағы тiзiмдер информацияны логикалық элементтер
тiзбектерiне бөлiп қарастыруға мүмкiндiк бередi.
Тiзiмдер сонымен қатар web дизайнда да көп пайдасын тигiзедi. Оның
көмегiмен маңызды информациялар тiзбегiн ерекшелеп қоюға, глоссарийлер
жасауға, т.с.с. болады.
HTML тiзiмдерiн құруда келесi дескрипторлар қолданылады:
• UL..(UL) – маркерлi тiзiм;
• OL..(OL) – нөмiрленген тiзiм;
• LI - тiзiм элементiнiң дескрипторы;
• DL..DL - анықтамалар тiзiмiнiң дескрипторы;
HTML құжаттың мәтiнiн логикалық байланыста ұйымдастыру үшiн көп
жағдайларда маркелi тiзiмдер қолданылады. Мұндай тiзiмдерде әрбiр
элементтiң алдына белгiлi-бiр символдар қойылады. Мысалы,
UL
LIP Карындаш P
LIP Кiтап P
LIP Даптер P
UL
Нәтижеде броузерде төмендегi тiзiм пайда болады:
• Карындаш
• Кiтап
• Дәптер
Нөмiрленген тiзiмдерде реттелген сандық мәндер қолданылады. Мысалы,
P Пайдаланылган адебиеттер
OL
LIО.Камардинов. Информатика. -Шымкент. 2000, 250 б.
LIР.Кадiрбаева. MS FrontPage. -Шымкент. 2001, 84 б.
LIМ.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с.
LIА.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
LIЯ.Нильсен. Web-дизайн. Спб. 2002, 187 с.
OL
P
9 сурет - Нөмiрленген тiзiм
Кей жағдайларда күрделi тiзiмдердi қолдануға тура келедi. Күрделi
тiзiмдер дегенiмiз не? Күрделi тiзiм – тiзiм iшiнде қосымша тiзiмнiң
орналасуы. Мысалы, кiтап мазмұны тараулардан, параграфтардан, пункттерден
тұратындықтан күрделi тiзiм бола алады. [3].
Дипломдық жұмыс мазмұны енгiзiлген күрделi тiзiм құратын HTML код
құрайық:
1. Блокнот қосымшасын iске қосыңыз;
2. HTML құжат кодын енгiзiңiз:
HTML
HEAD
TITLE МАЗМУН
TITLE
P align="center"
B МАЗМУНЫ
OL
LI P КIРIСПЕ P
LI
P HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ P
OL
LI
P Интернетте программалау. HTML тiлiне кiрiспе P
LI
P НTML кужаттармен жумыс iстеу негiздерi P
OL
LI
P ГРАФИКАЛЫК WEB-ДИЗАЙН P
OL
LI P Web беттi тиiмдi безендiру P
LI
P Web бетте анимациялык кескiндердi бейнелеу технологиясы P
OL
LI P КОРЫТЫНДЫ P
LI P ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР P
B
P
OL
HTML
3. HTML құжатты “Мазмун.html” атауымен жұмыс үстелiне сақтаңыз.
4. “Мазмун” файлын iске қосыңыз (10-сурет).
10 сурет - Интернет оқулық мазмұны шығарылған күрделi тiзiм
Маркерлi және нөмiрленген тiзiмдердiң екi атрибуты бар: type және
value. Бұлардың бiрiншiсi сәйкесiнше маркерленген тiзiмнiң маркерiнiң түрiн
анықтайды да, екiншiсi меншiктелген мән бойынша тiзiмдi сәйкес нөмiрден
бастап бередi.[9].
LI type=”circle” Шебер-маркер
LI type=”square” Квадрат-маркер
OL
LI value=”10” Тiзiмнiн оныншы элементi
LI Тiзiмнiн он бiрiншi элементi
LI т.с.с.
OL
11 сурет – type және value атрибуттары қолданылған тiзiм
9. Фреймдер. Фреймдердi қолдану web-беттер құрудағы ыңғайлы тәсiлдердiң
бiрi. Фрейм броузер екi және одан да көп беттерге бөлiп қарастыруға
мүмкiндiк бередi.
Фреймдердi құру үшiн келесi дескрипторлар қолданылады:
• FRAMESET...FRAMESET - негiзгi атрибуттары жолдар мен
бағандар санын анықтайды.
5 кесте - FRAMESET дескрипторының негiзгi атрибуттары
Атрибут және оның Сипаттамасы
мәнi
cols=“x” тiк фреймдердiң өлшемiн пиксель не пайыздық өлшем
бойынша анықтайды; х-ке меншiктелетiн * мәнi
динамикалық фрейм құруға мүмкiндiк бередi
rows=“x” көлденең фреймдердiң өлшемiн пиксель не пайыздық
өлшем бойынша анықтайды; х-ке меншiктелетiн * мәнi
динамикалық фрейм құруға мүмкiндiк бередi
фреймнiң қабырғасының өлшемiн анықтау;
border=“x”
• FRAME - жеке фреймге кiрiстiрiлетiн HTML-құжаттың адресiн
анықтайды.
6 кесте - FRAME дескрипторының негiзгi атрибуттары
Атрибут және оның Сипаттамасы
мәнi
name=“x” HTML-құжаттар арасында байланыстар орнату үшiн
қолданылады;
scrolling=“x” Көлденең және тiк айналдыру белдеушелерiн iске
қосады (мәндерi: “yes” не “no”)
src=“x” фреймге орналасатын құжаттың URL адресiн анықтайды
Ендi аталған дескрипторларды пайдаланып қарапайым фрейм құратын құжат
жазып көрелiк:
HTML
HEAD
TITLE
Негiзгi
TITLE
HEAD
FRAMESET cols="260,*"
FRAME src="mazmun.html" scrolling="auto"
FRAME src="1.html" name="onjak"
FRAMESET
HTML
Құжаттың орындалу нәтижесi 12-суретте келтiрiлген. Суреттен көрiп
тұрғанымыздай сол жақ фреймде негiзгi мазмұн орналасқан да, броузердiң сол
фреймiнде мазмұннан сәйкес таңдалған тақырып ашылған. Әрине мазмұндағы
қажеттi сiлтемеге басқан кезде сәйкес құжаттың ашылуын қамтамасыз ету
“Mazmun.html” құжатындағы сiлтемелерге байланысты орындалады. [11].
12 сурет - Фреймдерге бөлiнген броузер
Кей жағдайларда құжаттағы мәтiнге қатысты динамикалық фреймдер құруға
болады. Бiздiң мысалымыздағы
FRAMESET cols="260,*"
жолындағы * таңбасы фреймнiң биiктiгiнiң динамикалық екендiгiн
бiлдiредi.
Жалпы фреймдер веб-беттер құруда үлкен септiгiн тигiзiп ғана қоймай,
оны безендiру жұмыстарын да жеңiлдетедi. [13].
1.3 Web - беттер құру технологиясы
Интернет желiсiн пайдаланушылар арасында байланыс болмаса, онда желi
жай ғана информация баспаханасы ретiнде жұмыс iстер едi. Байланыс - бiр
құжаттың көлемiнен шығып, оған қатысы бар құжаттарға ғана емес, онымен
идеясы жақын келетiн барлық информацияны шығарып алу, олардың авторларымен
қарым-қатынас жасау құралы. Сондықтан кез келген желінің негiзi – байланыс
болып табылады. Web-беттiң негiзгi мәнi осы байланысты ұйымдастыру. Жай
ғана ұйымдастырмай тиiмдi, түсiнiктi, жылдам түрде ұйымдастыру.
Web беттер бiр-бiрiмен байланыстырылып web-түйiндi құрайды. Web-түйiн
Интернет желiсiнiң басты қаруы. Көптеген ғылыми, экономикалық, медицина,
жарнама, ақпарат тарату құралдары, ойын-сауық т.с.с. салалардағы түрлi
информациялар өрмекшiнiң өрмегiндегi өрмектерi секiлдi бiр-бiрiмен тығыз
байланыстырылып үлкен жүйе құрайды. [9].
1. Абсолют және салыстырмалы сiлтемелер. Алғашқы кездерi гиперсiлтеме
деп аталған әдiс уақыт өте келе дамытылып, сiлтеме ретiнде мультимедиа
құралдарын да қолдануға болатындығын көрсеттi. Осыған байланысты қазiргi
кезде гипермедиа терминi пайда болды.
HTML тiлiнде сiлтемелiк байланысты А дескрипторы ұйымдастырады. Оны
кейде зәкiр деп те атайды. А дескрипторы бiр HTML құжатты екiншiсiмен
байланыстырады. Байланыс екiншi құжаттың қайда орналасқанына қарамастан
орнатыла бередi. Тек ол орналасқан адрес Web-түйiнге қосылса болғаны.
A дескрипторының ең негiзгi атрибуты href, яғни гипермәтiндiк
сiлтеме. href атрибутының мәнi көбiне URL (ресурстардың универсал локаторы)
болып келедi. Басқаша айтқанда URL – Web-түйiннiң адресi. Ол бiрнеше
бөлiктерден тұрады: байланыстыру протоколының префиксi (http:), домен
атауы (көбiнесе www-ден басталады ) және ресурс көрсеткiшi (әдетте файл
атауы).
A және A дескрипторларының арасында жазылған кез келген мәтiн
гипертекстiк мәтiн болып табылады.
HTML тiлiнде А дескрипторы арқылы сiлтемелiк байланысты
ұйымдастырудың екi түрi бар: абсолют және салыстырмалы.
Толық URL арқылы берiлетiн абсолют сiлтеме жоғарыда қарастырылды. Бұл
сiздiң бүкiл (абсолют) Web-адрестi толық пайдаланғаныңызды бiлдiредi.
Абсолют сiлтеме қажеттi web-бет орналасқан web-түйiннiң алғашқы бетiн
ашады. Бұл сiздiң броузерiңiзге қажеттi сервердi тауып, оған ауысуға
мүмкiндiк бередi.[4].
Салыстырмалы сiлтеме сiз өзiңiз орналасқан сервердегi адреске кiруде
қолданылады. Бiр web-түйiннiң iшiнде, бiр каталогтың iшiнде орналасқан бет
үшiн тек файл атауын беру арқылы, оны ашып алуға болады.
Мысалы,
A href=”Мазмун.html” Дипломдык жумыс мазмуны A
Егер сiз басқа каталогта орналасқан құжатқа гиперсiлтеме құрғыңыз
келсе, онда мәселе сәл қиындайды. Мұндай құжатқа сiлтеме жасау үшiн оның
орналасқан каталогының атауы, яғни құжаттың толық адресi href атрибутына
меншiктелуi тиiс.
Мысалы,
A href=”111Мазмун.html”Дипломдык жумыс мазмуныA
Абсолют және салыстырмалы сiлтемелердi пайдалана отырып, дипломдық
жұмыс мазмұнын көрiп шығуға арналған web-түйiн құрып көрелiк.
1. Блокнот қосымшасын ашыңыз;
2. HTML кодын терiңiз;
HTML
HEAD
TITLE Дипломдык жумыска сiлтеме TITLE
HEAD
BODY
A href="Мазмун.html" Интернет оқулық мазмунын кору ушiн шертiнiз A
BODY
HTML
3. Құжатты “Сiлтеме.html” атауымен сақтаңыз;
4. Жоғарыда келтiрiлген “Мазмун.html” файлын iске қосыңыз. Мазмұн
файлының орындалуы көрiнедi;
5. Броузер терезесiнде тышқанның оң жақ түймесiн шертiп, контекстi
мәзiрден Просмотр в виде HTML командасын берiңiз.
6. Көрiнген HTML кодты төмендегiше етiп өзгертiңiз;
HTML
HEAD
TITLE
МАЗМУН
TITLE
BODY
P align="center"
A href="Сiлтеме.html" Керi A
BR BR
B МАЗМУНЫ
OL
LI
P A href="Кiрiспе.html" КIРIСПЕ A
P
LI
P HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ P
OL
LI
P Интернетте программалау. HTML тiлiне кiрiспе P
LI
P НTML кужаттармен жумыс iстеу негiздерi P
OL
LI
P ГРАФИКАЛЫК WEB-ДИЗАЙН P
OL
LI P Web беттi тиiмдi безендiру P LI
P Web бетте анимациялык кескiндердi бейнелеу технологиясы P
OL LI P КОРЫТЫНДЫ P
LI ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР B P OL
BODY
HTML
7. Өзгерiс енгiзiлген құжатты “Мазмун.html” атауымен қайта сақтаңыз;
8. Жұмыс үстелiндегi “Сiлтеме.html” файлын iске қосыңыз. 13-суреттегi
броузер терезесi көрiнедi.
9. Броузердегi сiлтемеге шертiп, құжат мазмұнын ашыңыз (14-сурет);
10. 14-суретте көрiнген броузер терезесiндегi Керi сiлтемесi мазмұнға
сiлтеме бетiн қайта iске қосады (13-сурет). Ал КIРIСПЕ сiлтемесi
“Кiрiспе.html” құжатын ашуы тиiс. Егер алдын-ала мұндай құжат құрылмаған
болса, броузер терезесiнде 15-суреттегi хабарлама көрiнедi. Сондықтан құжат
кiрiспесi орналасқан HTML құжатты алдын-ала әзiрлеп қойан жөн.[5].
2. Iшкi ciлтемелер. Кейде бiр web-бетте орналасуы тиiс информация үлкен
болуы мүмкiн. Мұндай информацияның соңы компьютер экранында көрiнбей қалады
және пайдаланушы оны көру үшiн броузердiң оң жақ шетiнде орналасқан жоғары-
төмен жылжыту белдеушесiн пайдалануына тура келедi. Бұл жағдайда адамның
психофизиологиялық ерекшелiктерiне байланысты информацияны қабылдау төмен
деңгейде өтетiнi жайлы талай мамандар айтып жүр. Мұндай кемiшiлiктi жою
үшiн бiр web-бет iшiнде жылжу әдiсiн пайдалануға болады. Ол үшiн беттегi
информацияны мазмұнына қарай бiрнеше бөлiктерге бөлiп қарастыру керек.
Әрбiр бөлiкке жеке атау берiп, бұл атаулар тiзiм түрiнде құжаттың басында
орналасуы тиiс. Тiзiмнiң қажеттi элементiне басқан кезде броузер экран
бетiнде мазмұны сәйкес мәлiметтердi көрсетедi.[7]
13 сурет - Web-беттiң жоқтығын не ашылмайтынын хабарлау
Ендi iшкi сiлтемелердi ұйымдастыруды дипломдық жұмыстың кiрiспесiне
пайдаланып көрейiк.
1. Блокнот қосымшасын ашыңыз;
2. Кiрiспенiң HTML кодын терiңiз;
HTML
HEAD
TITLE КIРIСПЕ TITLE
HEAD
FONT face="Times Kaz"
PA name=#"top" AP
P align="center"
B КIРIСПЕ B P
UL
LI
A href=#"Интернет" Интернет туралы қысқаша мәлiмет A
LI
A href=#"Web бет деген не?" Web бет деген не?A
LI
A href=#"HTML" HTML жайлы A
UL
LI
A name=#"Интернет" Интернет туралы қысқаша мәлiмет A
PИнформациялық қоғамда адамзаттың байланыс құралының өзгеше екенiн
практика көрсетiп отыр. Олай болса, жоғары оқу орындарындағы Информатиканы
оқыту әдiстемесiндегi "Интернет желiсi және компьютерлiк коммуникациялар"
курсы өзектi тақырыптардың бiрi болып саналады.P
PҚазiргi кездегi Интернет желiсiнiң мүмкiндiктерiне, қызметiне
толығырақ тоқталар болсақ, Интернет адамға қашықтық деген ұғымды жоққа
шығарып, әлемнiң кез-келген нүктесiнен жылдам хабар алуға, бейнелi түрде
байланысуға, информацияның әр тiлдiң, елдiң ерекшелiгiне байланысты
түсiнiктi түрде беруге, қабылдауға мүмкiндiк туғызып отыр.P
PИнтернеттiң құрамында миллиондаған компьютерлер, компьютер
терминалдары және қарапайым пайдаланушы адамдар бар. Осы пайдаланушылар бiр-
бiрiмен байланысу арқылы информацияны жылдам, түсiнiктi алуға, осы арқылы
өз бiлiм деңгейiн жоғарылатуға ұмтылуда. Бiлiм беру саласының күрделi
мәселелерiнiң бiрi пән бойынша курстар, тақырыптар жайлы мәлiметтер
тапшылығы болса, оны Интернет желiсiн пайдалану арқылы жылдам әрi тиiмдi
шешуге болады. Жалпы айтқанда қазiргi кезеңде әрбiр бiлiм беру саласының
қызметкерi болсын, бiлiм алушы оқушы не студент болсын Интернет желiсiнде
жұмыс iстей алуы заман талабы болып отыр. P[10].
PПайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
электрондық поштасын, web бетiн ашып қоюына толық мүмкiндiк бар. Бұл өз
тарапынан пайдаланушыға көптеген жеңiлдiктер бередi. Себебi электрондық
пошта көмегiмен пайдаланушы байланысқысы келген адамына хат жолдауға немесе
бiреуден хат алуға, хатты текст, сурет, анимация түрiнде жiберуiне толық
мүмкiндiгi бар, ал web бетi бар пайдаланушыға мәлiметтер өзiнен-өзi келiп
түсiп жатады. Оның жұмысы осы информацияның iшiнен өзiне қажеттiсiн таңдап
алу ғана.P.[13].
P align="center"
A href=#"top" Беттiн басына өту AP
LI
A name=#"Web бет деген не?" Web бет деген не? A
PWeb бет World Wide Web, яғни "дүниежүзiлiк өрмек" 1994 жылдың 14
желтоқсанында пайда болған консорциумның Интернет желiсiне енгiзген
жаңалығы болатын. Web бет көмегiмен көптеген iрi компаниялар, фирмалар,
жеке пайдаланушылар өзiнiң кәсiпкерлiк мүдделерiн iске асыруға мүмкiндiк
алcа, олармен қатар бiлiм берушi мекемелер (ғылыми бағыттағы институттар,
жоғары оқу орындары, мектептер т.с.с.) үшiн кең мүмкiндiктер ашылды. Олар
желiде өз Web беттерiн ашу арқылы көптеген басқа бiлiм мекемелерiмен
тәжiрибе, информация алмасуына даңғыл жол ашылды. Сондықтан қазiрге кезде
салмақты оқу орындарының барлығы дерлiк Интернеттен өз орындарын, яғни өз
Web беттерiн ашуға ұмтылуда.P
PWeb бет ашу үшiн Интернетте программалай бiлу керек. Интернетте
программалаудың негiзгi құралы - HTML (Hypertext Markup Language) -
гиперсiлтемелер құру тiлi. Интернетте гиперсiлтеме көмегiмен Web беттер
арасында байланыс жасауға мүмкiндiк берiледi. Ол сөз, мәтiн не графикалық
объект түрiнде болып келедi. P
P align="center"
A href=#"top" Беттiн басына өту
AP
LI
A name=#"HTML" HTML жайлыA
PHTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
ұйымдастырылған. Ол жоғары деңгейлi программалау тiлiне жатпайды. Сондықтан
оны жай пайдаланушы да оңай үйренiп алуына болады. HTML тiлiн үйренудiң
тағы бiр жолы гиперсiлтемелер құруға арналған арнайы орталарды қолдану
(FrontPage, WYSIWYG т.с.с.). Бiрақ олардың өз кемшiлiктерi бар. Бiз оларға
тоқталмаймыз. Өйткенi олардың кемшiлiктерi жайлы жеке диплом жұмысын жазуға
болады.P.[13].
PДипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнiң" негiздерiн
оқыта отырып, Интернетте Web беттер ашуға нақты мысалдар келтiру арқылы
оқушының не студенттiң "Интернет желiсi және компьютерлiк коммуникациялар"
тақырыбын жеңiл әрi жылдам оқып-үйренуiне мүмкiндiк беру болып табылады.
P
P align="center"
A href=#"top" Беттiн басына өту AP
FONT
HTML
3. Құжатты жұмыс үстелiне “Кiрiспе.html” атауымен сақтаңыз;
4. “Кiрiспе” файлын iске қосыңыз. 16-суреттегi web-бет ашылады.
Броузердегi маркерлi тiзiмнен қажеттi сiлтеме шертiлсе, броузер құжаттың
осы сiлтемеге сәйкес бөлiгiне өтедi (17-сурет). Құжаттың бас жағына өту
“Беттiң басына өту” сiлтемесi арқылы орындалады.[12].
16 сурет - Iшкi сiлтемелерi бар web-бет
17 сурет - Iшкi сiлтеме көмегiмен ашылған құжат бөлiгi
2 Графикалық web-дизайн
2.1 HTML құжатта графикалық кескiндермен жұмыс
HTML-да мәтiн форматтаудан Web-дизайнға өтудiң алғашқы қадамы Web-бетке
сурет орналастырудан басталады. Суреттер web-беттi тек безендiрiп қана
қоймай, пайдаланушыға информацияның түсiнiктi берiлуiне, беттегi
информацияның логикалық тiзбектерiн құруға т.с.с. web-беттiң негiзгi
сипаттамаларына әсер етедi.
HTML құжатқа сурет енгiзу үшiн IMG дескрипторы қолданылады. Оның src
атрибутына URL нұсқауын беру арқылы кез-келген графикалық кескiндi құжатқа
кiрiстiруге болады. HTML құжатқа суреттер кiрiстiру BODY бөлiмiнде
орындалады. Мысалы,
HTML
HEAD
TITLE Cурет кiрiстiру TITLE
HEAD
BODY
IMG src="СуреттерКiтап.gif"
BODY
HTML
18 сурет - Броузердегi сурет
IMG дескрипторының атрибуттары броузердiң суреттермен жұмыс iстеуiн
басқаруға мүмкiндiк бередi.
• src=”x” – суреттiң түрған орны (оның абсолют не салыстырмалы URL-
адресi);
• width=”х” – броузерге сурет енiн алдын-ала тағайындауға мүмкiндiк
бередi;
• height=”х” – броузерге сурет биiктiгiн алдын-ала тағайындауға
мүмкiндiк бередi;
• border=”x” – сурет рамкасының енiн анықтайды;
• align=”x” – суреттiң бетте көлденең және тiк орналасуы түрлерiн
анықтайды;
• alt=”x” – суреттiң орнына оның сипаттамасын шығаруға мүмкiндiк
бередi. Сонымен қатар тышқан көрсеткiшi сурет үстiне орналасқан
кезде, ол жайлы қысқаша мәлiмет шығарады;
• hspace=”x” – суреттiң оң және сол жағынан бос орындар қалдыру. Мәнi
сан түрiнде анықталады;
• vspace=”x” – суреттiң жоғарғы және төменгi жағынан бос орындар
қалдыру. Мәнi сан түрiнде анықталады;
HTML құжатта графикалық кескiндермен жұмыс iстеуде IMG дескрипторының
width және height атрибуттарын мiндеттi түрде қолдану керек. Себебi броузер
суреттiң енiн, биiктiгiн өзi анықтай алмай, оны созып не қысып жiберуi
мүмкiн. Бұл суреттi броузерге пайдаланушының қалауы бойынша шығаруына
кедергi келтiредi. width және height атрибуттарының жазылу үлгiсi:
IMG src="СуреттерКiтап.gif" width="150" height="150"
border атрибуты cурет шетiндегi рамканың енiн анықтайды. Егер бұл
атрибуттың мәнi 0-ге тең болса, онда сурет шетiнде рамка болмайды.
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4”
Суреттiң web-бетте орналасуын align атрибуты анықтайды. Бұл атрибут
суреттiң броузерде көлденiңiнен орналасуын анықтайтын left (сол жақ шетi),
right (оң жақ шетi), center (ортасы) мәндерiне және тiгiнен орналасуын
анықтайтын top (жоғарғы жақ шетi), bottom (төменгi жақ шетi), middle
(ортасы) мәндерiне ие болуы мүмкiн.[12].
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4” align=”right”
19-суретте енiнiң, биiктiгiнiң және рамка енiнiң өлшемдерi берiлген,
беттiң оң жақ шетiне орналастырылған графикалық кескiн келтiрiлген.
19 сурет - өлшемдерi берiлген графикалық кескiн
IMG дескрипторының alt атрибутының көмегiмен суретке сипаттама беруге
болады.
IMG src="СуреттерКiтап.gif" width="130" height="150"
border=”4” alt=”Пайдаланылган әдебиеттер”
20 сурет - Тышқан көрсеткiшi сурет үстiне орналасқан кезде суреттiң
сипаттамасы көрiнедi
Hspace және vspace атрибутарын пайдалану арқылы графикалық кескiннiң
айналасына мәтiннiң орналасу түрiн анықтауға болады. Мысалы,
BODY
P BПайдаланылган эдебиеттер BP
IMG src="СуреттерКiтап.gif" width="100" height="110" border=”2”
alt="Пайдаланылган эдебиеттер" align="right" hspace="50"
P OL
LIО.Камардинов. Информатика.-Шымкент.2000,250 б.
LIР.Кадiрбаева. MS FrontPage.-Шымкент.2001,84 б.
LIМ.Хольцшлаг. HTML 4.0.-М.:2003,869 с.
LIА.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
LIЯ.Нильсен. Web-дизайн. Спб. 2002, 187 с.
OL
P
BODY
21 сурет - IMG дескрипторының hspace атрибутының көмегiмен графикалық
кескiн мен мәтiннiң бетте орналасуы
HTML құжатта графикалық кескiндi не мәтiндi жылжымалы түрде Ѕйымдастыру
мүмкiн. Бұл жағдайда суреттiң не мәтiннiң өлшемiне қатысты броузердегi
мәтiн не сурет жылжымалы болады (21-сурет).[13]
3.Суреттердi байланыстыру. Мәтiндер сияқты суреттер де гиперсiлтеме
бола алады. Суреттердi сiлетеме түрiнде ұйымдастыру құжаттар арасында
жылжудың көп тараған түрi.
Суреттердi байланыстыру гипермәтiндiк сiлтеме жасау сияқты А
дескрипторының көмегiмен орындалады. Мысалы,
A href=”Пайд.эдеб.html” IMG src=”СуреттерКiтап.gif”
border=”0” alt=”Пайдаланылган эдебиеттер” A
Келтiрiлген HTML код нәтижесiнде броузерде пайда болған суретке
тышқанның сол жақ түймесi бiр рет шертiлген кезде “Пайд.әдеб” құжаты
ашылады (23-сурет).[1]
22 сурет - “Пайдаланылған әдебиеттер” құжатын ашатын суретсiлтеме
2.2 Web бетте анимациялық кескiндердi бейнелеу технологиясы
Интернет броузерi кез келген информация орналаса беретiн универсал
орта. Сондықтан онда мәтiндiк, графикалық информациямен қатар,
мультимедиалық информацияны да кiрiстiруге болады. Мультимедиалық
информация көбiне дыбыстық және анимациялық құбылыстар түрiнде бейнеленедi.
HTML құжатқа дыбыс және анимация құбылыстарын шығару үшiн оларды
ойнататын программалық модульдiң компьютерге алдын-ала орнатылып қойылуы
тиiс. МҰндай модульдерге MS MediaPlayer, AppleQuickTime, RealPlayer G2
т.с.с. программалық өнiмдер жатады.
HTML құжат келесi типтегi мультимедиалық информацияны бейнелей алады:
.avi – AudioVideo Interface (дыбысбейне интерфейсi). Windows
жѕйесiнде дыбыспен және бейнеклиптермен жұмыс iстеудi қамтамасыз ету үшiн
қолданылады. Бұл форматтағы файлдар өте шағын болып келедi және желi
бойынша Ұзақ жүктелмейдi. Сондықтан пайдаланушылар көп жағдайда .avi
форматтағы файлдарды ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Пәндер
- Іс жүргізу
- Автоматтандыру, Техника
- Алғашқы әскери дайындық
- Астрономия
- Ауыл шаруашылығы
- Банк ісі
- Бизнесті бағалау
- Биология
- Бухгалтерлік іс
- Валеология
- Ветеринария
- География
- Геология, Геофизика, Геодезия
- Дін
- Ет, сүт, шарап өнімдері
- Жалпы тарих
- Жер кадастрі, Жылжымайтын мүлік
- Журналистика
- Информатика
- Кеден ісі
- Маркетинг
- Математика, Геометрия
- Медицина
- Мемлекеттік басқару
- Менеджмент
- Мұнай, Газ
- Мұрағат ісі
- Мәдениеттану
- ОБЖ (Основы безопасности жизнедеятельности)
- Педагогика
- Полиграфия
- Психология
- Салық
- Саясаттану
- Сақтандыру
- Сертификаттау, стандарттау
- Социология, Демография
- Спорт
- Статистика
- Тілтану, Филология
- Тарихи тұлғалар
- Тау-кен ісі
- Транспорт
- Туризм
- Физика
- Философия
- Халықаралық қатынастар
- Химия
- Экология, Қоршаған ортаны қорғау
- Экономика
- Экономикалық география
- Электротехника
- Қазақстан тарихы
- Қаржы
- Құрылыс
- Құқық, Криминалистика
- Әдебиет
- Өнер, музыка
- Өнеркәсіп, Өндіріс
Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.
Ақпарат
Қосымша
Email: info@stud.kz