АСТАНА ҚАЛАСЫНЫҢ БІЛІМ БАСҚАРМАСЫ
«БІЛІМ БЕРУДІ ЖАҢҒЫРТУ ОРТАЛЫҒЫ» МКҚК
АСТАНА ҚАЛАСЫ ӘКІМДІГІНІҢ
ҚАНЫШ СӘТБАЕВ АТЫНДАҒЫ BINOM SCHOOL МЕКТЕП-ЛИЦЕЙІ

«10-сынып оқушыларына арналған
Web-жобалау бөлімі бойынша
практикалық жұмыстар жиынтығы»
(оқу құралы)

Астана қаласы, 2024жыл

Білім беру ұйымы әдістемелік бірлестігінің отырысында
сараптау кеңесіне ұсынылды (2024жылғы 4 қаңтар №3 хаттама)

қаралды,

қалалық

Рецензенттер: Темирбеков Алмас Нурланович, PhD, ас.профессор, Есептеу
ғылымдары және статистика кафедрасының меңгерушісі, Алматы қ.,Әл-Фараби атындағы Қазақ
Ұлттық Университеті
Желдыбаева Жаркын Сембаевна, Астана қ., «Өрлеу» біліктілікті арттыру ұлттық
орталық тренері, "International School Zerdeli" ЖШС мектебінің информатика пәні мұғалімі,
педагог-шебер
Құрастырушы:
Акимжанова Назгуль Акказиновна, «10-сынып оқушыларына
арналған Web-жобалау бөлімі бойынша практикалық жұмыстар жиынтығы», оқу құралы,
Астана қаласы, 2024 жылы, 50 бет

Аңдатпа
Бұл авторлық жұмыс 10-сынып оқушыларына арналған HTML web-дизайн бөлімі
бойынша практикалық жұмыстар жинағы болып табылады. Жұмыста web-жобалаудың негізгі
түсініктері мен принциптері, сонымен қатар HTML тілін қолдану арқылы web-беттерді құрудың
практикалық аспектілері қарастырылады.
Жұмыс информатиканы оқитын және web-жобалау саласындағы білімін тереңдеткісі
келетін 10-сынып оқушыларына арналған. Жұмыс информатика мұғалімдеріне web-жобалау
бойынша практикалық сабақтар ұйымдастыру үшін де пайдалы болуы мүмкін.
Аннотация
Данная авторская работа представляет собой комплекс практических работ по разделу
веб-дизайна HTML для учащихся 10 классов. В работе рассматриваются основные понятия и
принципы веб-дизайна, а также практические аспекты создания веб-страниц с использованием
языка HTML.
Работа предназначена для учащихся 10 классов, изучающих информатику и желающих
углубить свои знания в области веб-дизайна. Также работа может быть полезна учителям
информатики для организации практических занятий по веб-дизайну.
Аnnotation
This author's work is a set of practical works on the section of HTML web design for 10th
grade students. The work examines the basic concepts and principles of web design, as well as
practical aspects of creating web pages using the HTML language.
The work is intended for 10th grade students studying computer science and wanting to
deepen their knowledge in the field of web design. The work may also be useful for computer science
teachers to organize practical classes on web design.

Мазмұны
Кіріспе.........................................................................................................................
Қысқаша мазмұндық жоспар....................................................................................
HTML web-сайттарын әзірлеу .................................................................................
Практикалық жұмыс №1...........................................................................................
Практикалық жұмыс №2...........................................................................................
Мәтінді форматтау ....................................................................................................
Практикалық жұмыс №3 .........................................................................................
Практикалық жұмыс №4 .........................................................................................
Таблицалар.................................................................................................................
Практикалық жұмыс №5 .........................................................................................
Практикалық жұмыс №6 .........................................................................................
Web-бетке сурет енгізу Практикалық жұмыс №7…..............................................
Web-бетке гиперсілтеме енгізу Практикалық жұмыс №8…………………….....
CSS..............................................................................................................................
Практикалық жұмыс №9 .........................................................................................
Мультимедианы енгізу..............................................................................................
Практикалық жұмыс №10.........................................................................................
Скрипттер пайдалану.................................................................................................
Практикалық жұмыс №11 .......................................................................................
Жобалық жұмыс ……………………………………………………………………
Жобалық жұмыс тақырыптары.................................................................................
Тест сұрақтары...........................................................................................................
Пайдаланылған әдебиет............................................................................................

3
5
6
10
12
13
15
17
19
21
24
25
28
29
33
34
37
38
40
41
43
45
48

Кіріспе
Www (World Wide Web – World web) желісінің қарқынды өсуінің нәтижесінде
ақпараттық технологиялардың жаңа саласы пайда болды. Web-дизайн - ақпараттық
технологиялар салаларында суретшілердің, дизайнерлердің шығармашылық идеяларын
жүзеге асыруға жаңа мүмкіндіктер беретін перспективалы қызмет түрлерінің бірі.
Нәтижесінде web-дизайн бойынша оқыту қазіргі уақытта білім берудің маңызды құрамдас
бөлігі болып табылады. Заманауи бәсекеге қабілетті кәсіпорынның қажетті атрибуты - бұл
web-сайттың болуы, оны қолдауды кәсіби маман жүзеге асыруы керек. IT-технологиялар,
дизайн, интернет-ресурсты ілгерілету әдістері саласындағы кең ауқымды білім. Еңбек
нарығында жаңа мамандықтар пайда болып жатыр: web-мастер, HTML-беттеуші, сайт
әкімшісі, SEO-маман, ақпараттық сәулетші және басқалар, тиісінше, оқушыларды
мамандыққа даярлау мақсатында веб-дизайн бойынша жаңа педагогикалық және
әдістемелік идеялар қажет.
Дизайн - бұл ғылыми принциптерді жобалық түрде көркемдік принциптермен
біріктіруге негізделген, әдеттегі жобалауда қол жетпейтін әсер тудыратын жобалау
қызметі.
Web-дизайн - web-сайттың ақпараттық архитектурасының web-технологиялар
көмегімен оны көркемдік безендірумен және Интернетке барынша тиімді пайдалану және
жылжыту мақсатында бағдарламалық кодты оңтайландырумен құру жөніндегі жобалау
қызметі. Web-сайт (қысқаша сайт) – электрондық құжаттар жиынтығы.
10-сынып оқу бағдарламасының контекстінде HTML тілін үйрену
оқушыларға web-дизайнның негізгі принциптерін үйренуге және веб-беттердің қалай
жасалатынын және жұмыс істейтінін түсінуге мүмкіндік береді. Бұл білім ақпараттық
технологиялар саласында әрі қарай оқыту үшін де, цифрлық ортада күнделікті
пайдалану үшін де пайдалы болуы мүмкін. Сонымен қатар, технологияның дамуымен
және өмірдің әртүрлі салаларында Интернеттің болуының өсуімен веб-дизайн және
веб-әзірлеу саласындағы мамандарға сұраныс өсуде. Сондықтан мектеп деңгейінде
HTML тілін үйрену оқушыларды осы саладағы әлеуетті мансап мүмкіндіктеріне
дайындай алады.
Оқу құралы Қазақстан Республикасы Оқу-ағарту министрінің 2022 жылғы 3
тамыздағы № 348 бұйрығымен бекітілген Мектепке дейінгі тәрбие мен оқытудың,
бастауыш, негізгі орта, жалпы орта, техникалық және кәсіптік, орта білімнен кейінгі білім
берудің мемлекеттік жалпыға міндетті стандарттарына сәйкес әзірленген оқу
бағдарламасы негізге ала отырып жасалынды.
Оқу құралы қазақ тілінде оқытатын жалпы білім беретін мектептің 10-сыныбында
сабақ беретін информатика мұғалімдеріне және оқушыларына арналған. Осы жұмыста
информатика пән мұғалімдеріне пайдалы болатын сабақтың теориялық ақпараты мен
практикалық жұмыстары бар.
Негізгі міндеттері:
1) білім алушылардың ақпараттық процестердің қоғамдағы рөлі жайлы, сондай-ақ
ақпараттық
технологияларды
пайдаланудың
техникалық
мүмкіндіктері
мен
перспективалары туралы түсінігін қалыптастыру;
2) білім алушыларға жүйені талдау, шешім ұсыну, бағдарламалық қосымшалар
жасау, оларды дамытып жетілдіру, сонымен қатар, өздерінің өнімдерін бағалау
мүмкіндігін беру мақсатында компьютердің жұмыс істеуінің негізгі қағидаларын түсінуін
қамтамасыз ету;
3) талдау, абстракция, үлгілеу мен программалау арқылы білім алушыларға
әртүрлі тапсырмаларды шешуді үйрету;
4) білім алушылардың логикалық, алгоритмдік, сондай-ақ, жалпылау және
үйлестік тапсырмаларды құрамдас бөліктерге бөлу және ортақ заңдылықтарды табу,
3

қойылған міндеттерді орындауға қажетті тиімді және рационалды тәсілдер табу сияқты
қамтитын есептік ойлау қабілетін дамыту;
5) білім алушылардың ақпараттық мәдениетін қалыптастыру – жалпы ережелерді
ұстану және жеке тұлға мен бүкіл Қазақстандық қауымның мүддесінде әрекет ету;
6) есептеуіш платформалар негізінде басқарылатын электрондық құрылғыларды
құру, программалаудың тәсілдері және қағидаттарымен білім алушыларды таныстыру;
7) қазіргі таңдағы программалау ортасында программалау дағдыларын дамыту;
8) тәжірибеде қолдану арқылы білімді тереңдету және оқуға деген ынтаны
арттыру;
9) ғылыми-техникалық әзірлемелерге деген қызығушылықтарын дамыту;
10) білім алушылардың шығармашылық қабілеттерін дамыту.
10-сыныпқа арналған «Информатика» оқу пәнінің базалық мазмұны:
Ақпараттық объектілерді құру және түрлендіру: web-жобалау: HTML (Hyper Text
Markup Language —«гипермәтіндік белгілеу тілі»), CSS (Cascading Style Sheets —каскадты
кестелер стилі); скрипттерді пайдалану, web-парақшаға мультимедиа нысандарын енгізу.
Осы оқу бөлімі бойынша оқу жүктемесінің көлемі келесі кестеде көрсетілген.
Кесте 1
Web – жобалау бөлімі бойынша оқу жүктемесінің көлемі
Сынып
10

Оқу пәнінің атауы
Апта
1

Информатика
(Web – жобалау бөлімі)

4

Жүктеме, сағат
Тоқсан
20

Қысқаша мазмұндық жоспар
№

Тақырыбы

Сағат
саны

Мақсаты
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
10.4.2.2 web-парақшаларды жасауда CSS
қолдану
10.4.2.2 web-парақшаларды жасауда CSS
қолдану
10.4.2.4
web-бетте
мультимедиа
нысандарын енгізу үшін HTML тегтерін
қолдану
10.4.2.4
web-бетте
мультимедиа
нысандарын енгізу үшін HTML тегтерін
қолдану
10.4.2.3 web-беттерді әзірлеу кезінде
дайын скрипттерді пайдалану
10.4.2.3 web-беттерді әзірлеу кезінде
дайын скрипттерді пайдалану
10.4.2.1 web-парақшаларды әзірлеуде
HTML-тегтерін қолдану
20

1.

HTML web-сайттарын әзірлеу

1

2.

Практикалық жұмыс №1-2

2

3.

Мәтінді форматтау

1

4.

Практикалық жұмыс №3-4

2

5.

Таблицалар

1

6.

Практикалық жұмыс №5-6

2

7.

1

9.

Web-бетке
сурет
енгізу
Практикалық жұмыс №7
Web-бетке гиперсілтеме енгізу
Практикалық жұмыс №8
CSS

10.

Практикалық жұмыс №9

1

11.

Мультимедианы енгізу

1

12.

Практикалық жұмыс №10

1

13.

Скрипттер пайдалану

1

14.

Практикалық жұмыс №11-12

2

8.

Практикалық
жұмыс
Жобалық жұмыс
Барлығы
15.

№13

1
1

2

№1 сабақ
5

Тақырыбы: HTML web-сайттарын әзірлеу
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Теориялық ақпарат:
Қолданыстағы web-беттердің басым көпшілігі – бұл жеке тұлғалардың құрған
web-беттері.
Web-бет құру алдында онда не орналасатынын анықтап, оның эскизін қағаз бетіне
түсіріп алу керек:
1. Ақпаратты бірнеше бөлімдер бойынша топтастырыңыздар.
2. Әрбір бөлімде болатын мәтінді құрып алыңыздар.
3. Графиканы тауып, беттегі орнын анықтаңыздар.
4. Егер мәтінге графика, дыбыс немесе видеоклиптер енгізілген болса, оларға
қанша орын қажет болатынын болжап көріңіздер.
Содан кейін web-бетті құра беруге болады. Web-бетті құру үшін HTML тілі
пайдаланылады.
HTML-дің негізгі терминдері - элементтер, тегтер және атрибуттар.
Web-бет элементтерден тұрады. Элемент - бұл тегтер мен оның мазмұнының
жиынтығы. Элементке қойылған бұрыштық жақшалар < > оның тег екенін білдіреді.
Тегтерді жазу барысында үлкен және кіші әріптер бір-бірінен ерекшеленбейді.
Тегтің екі түрі бар - жұп және дара. Тегтер көбіне ашылатын () және
жабылатын () болып жұптасады. Олардың арасында бұл элементке қатысты
мазмұны орналасады. Жұп тег мәтінге оны қолданған жерден бастап, ықпалы аяқталатын
жерге дейін әсер етеді. Дара тег өзі жалғыз қолданылады, мысалы,
.
Ашылатын тег қосымша ақпаратты қамтуы мүмкін - атрибуттар және
атрибуттардың мәндері(Сурет 1). Атрибуттар - элемент туралы қосымша ақпарат беру
үшін пайдаланылатын сипаттамалар.

Сурет 1. Оң жақта орналасқан қызыл сызықты сызуға
арналған команда мысалы
HTML құжатының құрылымы маңызды тегтерден тұрады (Сурет 2): жұптық тег
арасында жалпы HTML құжаты, арасында құжат туралы ақпарат, Бұл тегтер арасында браузердің жоғарғы жағында көрсетілетін бет
тақырыбы жазылады

«Параграф» тегі бір-бірінен абзацтарды бөледі, абзацтың басында
қойылады


Жаңа жолға өтуді жүзеге асырады

---

Горизонталь сызықты сызады

---

Сызықтың биіктігін (қалыңдығын) орнатады
Сызықтың енін орнатады, пайыз пемесе пиксельмен көрсетуге
WIDTH=”…”>
болады.
Мысалы,

---

немесе

---

Сызыққа белгілі бір түс береді
COLOR=”…”>

---

Сызық мәніне қарай туралануы:
left (сол жағы бойынша)
center (ортасы бойынша)
right (оң жағы бойынша)

…

Құжаттың тақырыптарып анықтайды.

…

мәтінді ең үлкен қаріп өлшемімен (ең жоғарғы деңгей)

…

көрсетеді, <Н6> - ең кіші (төмеңгі деңгей).

…

Ескерту: егер тақырып деңгейін көрсетпесеңіздер, браузер оны <Н>

… < H5>
өлшемімен көрсетеді.

… < H6>

Мәтін мәніне қарай туралануы:

left (сол жағы бойынша)
…
center (ортасы бойынша)

right (оң жағы бойынша)
HTML файлдарын құрудың(және сақтау) екі жолы бар:
1) HTML тілінде web-бет немесе сайт құру үшін кәдімгі блокнот қосымшасын
қолдануға болады. Кодты блокнотта жазамыз да, сақталу орнын көрсетіп, Файл => …
Тег


7

ретінде сақтау (Сохранить как) => Файл атауы name*.html, ал Файл типтеріне Барлық
файлдарды (Все файлы), кодировка бөлімінен UTF-8 кодтауын таңдап, Сақтау
батырмасын басамыз (Сурет 3). Жұмыс нәтижесін браузермен ашып қараймыз.

Сурет 3. Блокнотта (текстовый документ) файлды сақтау
2) HTML файлдарын құруды жеңілдететін көптеген программалар бар. Соның
бірі Notepad++ тег редакторын келесі адрестен жүктеуrе болады: https://notepad-plusplus.org/downloads/v8.4.6/ Мәтіндік файлды сақтау үшін Файл=>Қалай сақтау …
командасын таңдаңыздар. Ашылған диалогтық терезедегі Файл аты жазбасына қарамақарсы жолында 4-суретте көрсетілгендей name атымен файлды сақтап, файл типіне html
таңдау.

Сурет 4. Notepad++ файлды сақтау

Notepad++-тағы түрі
Браузердегі түрі
Сурет 5. HTML құжат тақырыптарына мысал
HTML құжаттың мәтінін форматтауда физикалық және логикалық форматтау
қолданылады. Физикалық форматтау тегтері шрифтің қандай қасиетін өзгертуді (мысалы,
қою қара), ал логикалық форматтау, мысалы, іздеу жүйесінде қандай мәтін екенін
(мысалы, маңызды) көрсетеді.
Кесте 3
Мәтінді форматтау тегтері
Физикалық форматтау тегтері
Физикалық форматтау тегтері
қою қаріпті мәтін
мәтіннің маңызды фрагменті
курсивпен мәтін
ерекшеленген мәтін
сызылып тасталған мәтін өшірілген, сызылып тасталған мәтін
асты сызылған мәтін
бұрын асты сызылмаған, қосылған мәтін

8

Бақылау сұрақтары мен тапсырмалар:
1. Web-бетте қандай ақпаратты орналастыруға болады?
2. Web-беттердің сыртқы бейнесін басқаратын тегтерін атап шығыңыздар және
сипаттаңыздар.
3. Web-бетті құрудың негізгі қадамдарын көрсетіңіздер.
4. Тег, атрибут, атрибуттың аты, атрибуттың мәніне мысал келтіріп, түсіндіріңіз.
5. Notepad++ редакторын жүктеп алыңыздар. Редактордың және Блокнотта
«қолмен» енгізудің артықшылықтары мен кемшіліктерін салыстырыңыздар.

Өз бетінше жұмыс істеуге арналған тапсырмалар:
Тапсырма №1. HTML құжат тақырыптарына мысалын(Сурет 5) үлгі ретінде алып,
«Отбасы құндылықтары» тақырыбында жоба жасаңыз. Мысалы:

Отбасы
құндылықтары

,

Махаббат

,

Қолдау

, т.б.
Тапсырма №2. HTML құрылымының мысалы (Сурет 6) бойынша HTML құжатын
құрып, браузердегі түрін тексеріп, талдау жазаңыздар.

Notepad++-тағы түрі
Сурет 6. HTML құрылымының мысалы

9

Браузердегі түрі

№2 сабақ
Тақырыбы: Практикалық жұмыс №1
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Практикалық жұмыстың барысы:
1. Беттің барлық компоненттерін сақтау үшін Windows жүйесінде жаңа бума (сайт
папкасы) құрыңыздар.
2. Іске қосу (Пуск) батырмасын және
notepad++ белгішені басыңыздар.
3. Notepad ++ редакторы ашылады.
4. Келесі HTML кодын теріңіздер:




Білім туралы

4. name.html атауымен cайт папкада сақтаңыздар. Жоғарыда(Сурет 4) қалай сақтау
керектігі жазылған.
5. Сайт папкасын ашыңыздар. Онда браузермен ашатын web –парақша
(name.html) бар.
6. name.html файлын екі рет басып, браузерде көруге болады. Нәтижені
талдаңыздар.
7. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: «Білім туралы» тіркесін
тақырып ретінде жасаңыздар. Ол үшін name.html кодын ашып, өзгерістер енгізіңіздер:

Білім туралы

8. Файлды сақтаңыздар (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.
9. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: тақырыпты туралауды
«ортасы» бойынша орнатыңыздар. Ол үшін name.html кодын ашып, өзгерістер
енгізіңіздер:

Білім туралы

10. Браузерде парақшаны қарап шығыңыздар (Обновить батырмасын
басыңыздар).

10

11. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: парақшаға негізгі
мәтінді қосыңыздар. Оны абзац ретінде жасаңыз, мәтінді «ені» бойынша туралаңыздар,
Ол үшін name.html кодын ашып, өзгерістер енгізіңіздер:

Білім туралы

Білім беру - бұл белгілі бір білімге байланысты адам әдеттерді,
әдістерді, дағдыларды, сенімдерді және этикалық принциптерді игеретін теориялықпрактикалық процедура. Бұл білім адамзат тарихында ұрпақтан-ұрпаққа ауысып, сіңіріліп
отырады.

12. Браузерде парақшаны қарап шығыңыз (Обновить батырмасын басыңыз).
13. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: парақшаға горизонталь
сызықты сызыңыз, пайыз ретінде енін орнатыңыз, Ол үшін name.html кодын ашып,
өзгерістер енгізіңіздер:

Білім туралы

---

Білім беру - бұл белгілі бір білімге байланысты адам әдеттерді,
әдістерді, дағдыларды, сенімдерді және этикалық принциптерді игеретін теориялықпрактикалық процедура. Бұл білім адамзат тарихында ұрпақтан - ұрпаққа ауысып,
сіңіріліп отырады.

14. Браузерде парақшаны қарап шығыңыз (Обновить
батырмасын басыңыз).

11

№3 сабақ
Тақырыбы: Практикалық жұмыс №2
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Өз бетінше жұмыс істеуге арналған тапсырмалар:
Тапсырма №1: Жаңа жолға көшу (абзац) тегін пайдаланып өлең жолын енгізу.
«Өлең» сөзін тақырып ретінде, «Абай» сөзіне қою қаріпті мәтінді қолданыңыздар.

Сурет 7. Web-беттің үлгісі
Тапсырма №2: Браузер бетінде өз аты-жөніңіз, сыныбыңыз шығып тұратындай
web-бет құрыңыздар. Аты-жөніңіз қою қаріпті, курсивті, оң бойынша туралануы керек,
сыныбыңыз сол бойынша тураланып, асты сызылған мәтін ретінде қолданылуы керек. Ал
тақырыбы сызылып тасталған мәтін, ортасы бойынша туралануы керек.

Сурет 8. Web-беттің үлгісі
Тапсырма №3: «Дұрыс тамақтану» тақырыбында web-бет құрыңыздар. Webқұжаттың сыртқы бейнесін басқару тегтері мен мәтінді форматтау тегтерін қолданыңыз.
Креативті ойланып, тапсырманы орындаңыз.
Мысалы: «Адам денсаулығы 70% тамақтануға байланысты» тіркесін енгізетін
болсақ, «тамақтануға» сөзін қою қаріппен, «Зиянды тағам түрлеріне фастфуд жатқызуға
болады» тіркесінде фастфуд сызылып тасталған.

12

№4 сабақ
Тақырыбы: Мәтінді форматтау
Мақсаты: Web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Теориялық ақпарат:
Кесте 4
тегінің сипаттамасы
Teг
Түсіндірмелер
…
Мәтіннің өлшемін 1-ден (ең аз) 7-ге дейінгі (ең
үлкен) аралықта орнатады.
Ескерту: егер мәтіннің өлшемін анықтамаса, онда
браузер оның өлшемін
түрде бейнелейді
…
Қаріптерді түрлі кескінде (гарнитура) орнатады
…
Мәтіннің түсін орнатады
Кесте 5
Қосымша форматтау тегтері
Teг
…< SUB
^…
…

Түсіндірмелер
Мәтінді төменгі индекс түрінде шығарады
Мәтінді жоғары индекс түрінде шығарады
Мәтін сызылған
Кесте 6

Арнайы символдар
Символ
Атауы
HTML-де жазылуы
§
Параграф белгісі
§
º
Градус белгісі
°
<
Кіші белгісі
<
>
Үлкен белгісі
>
±
Плюс, минус белгісі
±
Ескерту. HTML-де арнайы символдарды жазу кішкентай әріптермен жүзеге асуы
керек. Егер параграф белгісі ° орнына &DEG деп жазылса, онда браузер экранында º
символының орнына &DEG шығып тұрады.
Мәтін түсін басқару
Түсті алты таңбалы оналтылық кодпен анықтайды. Кодтың алдында # белгісін
орнату қажет немесе түстің әріптік мәнін көрсету керек. Мысалы, мәтінді қызыл түсті етіп
орнату үшін:
Қызыл түсті мәтін , Мұндағы #FF0000 қызыл түстің коды немесе Қызыл түсті мәтін мұндағы
RED - түстің атауы.
Ескерту. Егер мәтіннің түсін көрсетпесеңіздер, мәтін әдеттегідей қара түсте
беріледі.
Түстердің ағылшын тіліндегі атауын https://colorscheme.ru/html-colors.html
адресінен табуға болады.
Жүгіртпе жолды құру
Жүгіртпе жол ретінде осы web-бетке кірушілердің ерекше назарын талап ететін
мәтін тақырыбы немесе жол түсіндіріледі.
13

Кесте 7
Жүгіртпе жолды құру тегі және оның атрибуттары
Teг
Түсіндірмелер
… Жүгіртпе жол құрады
ALIGN=' '
Жүгіртпе жолды мәтінге қатысты вертикаль орнатады.
Мәндерді қабылдайды:
ТОР - жоғарғы орналасуы бойынша;
MIDDLE - ортасында;
ВОТТОМ - төменгі орналасуы бойынша
BGCOLOR=' '
Жүгіртпе жолдың фон түсін орнатады
HTML тізімдерін құру
Тізімдер түрлі мәліметтерді реттеуге және тәртіпке келтіруге, сонымен қатар
оларды пайдаланушы үшін көрнекі және ыңғайлы түрде көрсетуге мүмкіндік береді.
Кесте 8
Teг

…

…

…

Тізімдерді құруға арналған тегтер
Түсіндірмелер
Белгіленген тізімді жиектеу
Нөмірленген тізімді жиектеу
Тізімнің әрбір әлементін жиектеу

Бақылау сұрақтары:
1. тегінің мүмкіндіктерін атаңыздар.
2. HTML-де қандай арнайы символдар қарастырылған?
3. тегінің көмегімен мәтін мен фонның түсін қалай өзгертуге болады?
4. Web-бетте жүгіртпе жол қалай құрылады? Жүгіртпе жолдың атрибуттарын
атаңыздар және оларга сипаттама беріңіздер.
5. Тізім дегеніміз не? Маркерлі тізімнің нөмірленген тізімнен қандай
айырмашылығы бар?

14

№5 сабақ
Тақырыбы: Практикалық жұмыс №3
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Практикалық жұмыстың барысы:
1. Іске қосу (Пуск) батырмасын және
notepad++ белгішені басыңыздар.
2. Notepad ++ редакторы ашылады. «Бас әріптермен мәтін құру» практикалық
жұмысын орындаңыздар.
3. Келесі HTML кодын теріңіз:



Біз Web-бетті құрастырған тіл:

H
yper
T
ext
M
arkup
L
anguage

4. font.html атауымен cайт папкасында сақтаңыздар.
5. Сайт папкасын ашыңыздар. Онда браузермен ашатын web-парақша(font.html)
бар.
6. font.html файлын екі рет басып, браузерде көруге болады. Нәтижені
талдаңыздар.

Сурет 9. Web-беттің үлгісі
7. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: түрлі түсті мәтін
құрайық. Ол үшін font.html файлын ашып, өзгерістер енгізіңіздер:



Біз Web-бетті құрастырған тіл:

H
yper
T
ext
M
arkup
L
15

anguage

8. Файлды сақтаңыз (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.

Сурет 10. Web-беттің үлгісі
9. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: компьютерде жасыл
фонда ақ түсті мәтінді енгізіңіздер. Bgcolor=' ' фон түсін орнатады, Text=' ' мәтіннің түсін
орнатады:



Біз Web-бетті құрастырған тіл:

H
yper
T
ext
M
arkup
L
anguage


Сурет 11. Web-беттің үлгісі
10. Браузерде
басыңыздар).

парақшаны

қарап

шығыңыздар

(Обновить

батырмасын

Өз бетінше жұмыс істеуге арналған тапсырмалар:
Тапсырма №1: «Досыма хат»
Браузер бетінде досыңызға арналған хат шығару керек. Дос жайлы нақыл сөздерді
қосып, хаттарыңызды көркем түрде жазыңыздар. Құжаттың тақырыбының түсін
өзгертіңіздер. Дайындаған құжаттың фон түсін өзгертіңіздер.
Тапсырма №2: «Менің хоббиім» туралы web-бетті құрыңыздар. Web-бет ортаға
түзетілген «Менің хоббиім» тақырыбынан, өздеріңіз туралы қысқаша сипаттамадан және
өздеріңіздің қызығушылықтарыңыз туралы (спорт, ән айту, билеу және т.б.) тізімнен
тұруы керек.
16

№6 сабақ
Тақырыбы: Практикалық жұмыс №4
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Практикалық жұмыстың барысы:
1. Іске қосу (Пуск) батырмасын және
notepad++ белгішені басыңыздар.
2. Notepad ++ редакторы ашылады. «Компьютерде жоғарғы және төменгі
индекстерді қолдану» практикалық жұмысын орындаңыздар.
3. Келесі HTML кодын теріңіздер:
html>




Сандарды екілік санау жүйесінен ондық санау жүйесіне ауыстыру:
101101₂ = 45 ₁₀

Ақпараттың өлшем бірліктері

1 килобайт = 1 кб = 2¹⁰ байт 1024 байт

4. index.html атауымен cайт папкасында сақтаңыздар.
5. Сайт папкасын ашыңыздар. Онда браузермен ашатын веб-парақша(index.html)
бар.
6. index.html файлын екі рет басып, браузерде көруге болады. Нәтижені
талдаңыздар.

Сурет 12. Web-беттің үлгісі
7. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: компьютерде маркерлі
тізімді құрудың мысалын жасаңыздар:

• Абай Құнанбаев
  
  
  
  • « Қара сөздері »
  
  
  • « Көзімнің қарасы »
  
  
  • « Жиырма өлеңі »
  
  
  
  


• Мұхтар Әуезов
  
  
  
  • « Абай жолы »
  
  17
  
  
  • « Жастар тайпасы »
  
  
  • «Өткізуге арналған »
  
  
  
  

8. Файлды сақтаңыздар (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.

Сурет 13. Web-беттің үлгісі

Өз бетінше жұмыс істеуге арналған тапсырмалар:
Тапсырма №1: Браузердің экранында келесі ақпаратты көрсететін HTML құжат
құрыңыздар. Кесте 8 қолдаңыздар, арнайы символдар туралы қосымша ақпаратты
https://htmlbook.ru/samhtml/tekst/spetssimvoly қарауға болады.

Сурет 14. Web-беттің үлгісі
Ескерту. Мәтіннің тақырыбы жүгіртпе жол түрінде орындалды. Жүгірпе жол
үшін келесі параметрлер орнатылған: жүгіртпе жолдың мәтіні солдан оңға қарай
қозғалуы; жүгіртпе жол үшін фон орнатылған; жүгіртпе жол анимациясын қайталау саны
үшке тең; жүгіртпе жолдың стилі: ALTERNATE.
Тапсырма №2: Экрандағы мәтіннің орналасуын бақылау Наурыз мерекесіне
байланысты, Қазақстан халқына құттықтау жазыңыздар. Нәтижесін экранға шығарып, өз
қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыздар. Өзгерістердің браузерде
енгенін тексеріңіздер.
Тапсырма №3: Сыныптастарыңның тізімін орналастыру. Сыныптағы
оқушылардың тізімін жазыңыздар. Нәтижесіне кейін өз қалауларыңызша өзгерістер
енгізіп, қайталап сақтаңыздар.
Тапсырманы орындауға арналған нұсқаулық:
1. Енгізілген тізімдегі мәтіндерді қажеттеріңізге қарай таңдап, түстерін, өлшемін,
қарпін орнатыңыздар.
2. Құжат бетіне нөмірленген, нөмірленбеген тізімдерін шығарыңыздар.
18

№7 сабақ
Тақырыбы: Таблицалар
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Теориялық ақпарат:
HTML-де кесте құру
Ақпаратты жақсы көрсету үшін кестелерді пайдалануға болады. TABLE элементі–
тег кестенің мазмұны орналасқан контейнерлерін білдіреді. Кесте жолдар арқылы
құрылған: жолды белгілеу үшін TR контейнері, бағанның (жолдардың) тақырыптарын
көрсету - TH контейнері, ұяшықтардағы деректер үшін - TD контейнері пайдаланылады.
Ағымдағы жағдайда кесте ұяшықтарының айналасында ешқандай жақтау болмайды.
Кесте тақырыбы -
Кесте 9
Кесте тегінің атрибуттары
Атрибут
Атрибут мәнінің сипаттамасы
ALIGN"…
Жол ұяшықтарындағы мәліметтерді туралау режимін
анықтайды
left - сол жақ шеті бойынша туралау
center - ортасы бойынша туралау
right - оң жақ шеті бойынша туралау
justify - екі шеті бойынша туралау
BACKGROUND="URL"
Жол ұяшықтарынын фонын толтыратын URL сурет
BGCOLOR="ЦВЕТ"
Жол ұяшықтарының фон түсі
BORDERCOLOR="ЦВЕТ" Ұяшық жиегінің түсін өзгерту
WIDTH=' '
Барлық кестенің немесе ұяшықтың енін пиксельдерде немесе
браузер терезесінің еніне қатысты пайыздық үлесте
анықтайды
HEIGHT=' '
Барлық кестенің немесе ұяшықтың биіктігін пиксельдерде
немесе браузер терезесінің биіктігіне қатысты пайыздық
үлесте анықтайды
BORDER=' '
Кесте жиегінің енін пиксельдерде орнатады, мысалы, border-2
Ұяшықтарды біріктіру
Бір бағанда екі іргелес ұяшықтарды біріктіру үшін немесе тегінің
ROWSPAN атрибутын пайдалану керек, мысалы:
.
Бір жолда екі іргелес ұяшықты біріктіру үшін сол тегтердің СOLSPAN
атрибуттарын пайдалану керек, мысалы:
.

Бақылау сұрақтары:
1. Кестенің негізгі құрылымдық элементін атаңыздар.
2. … тегінің … тегінен айырмашылығын көрсетіңіздер.
3. Ұяшықтарды біріктіру не үшін қажет?
4. Ұяшықты түспен ерекшелеңіздер.
5. Ұяшық шегарасының түсін қалай өзгертуге болады?
6. Ұяшық ішіндегі мәтіндерді туралау үшін қандай атрибуттар қолданылады?

19

Өз бетінше жұмыс істеуге арналған тапсырма:
Тапсырма №1. Жиекті және жиексіз кесте мысалы (Сурет 15) бойынша HTML
құжатын құрып, браузердегі түрін тексеріп, талдау жазаңыздар.

Notepad++-тағы түрі
Браузердегі түрі
Сурет 15. Жиекті және жиексіз кесте мысалы
Тапсырма №2. Жиекті және жиексіз кесте мысалы (Сурет 16) бойынша HTML
құжатын құрып, браузердегі түрін тексеріп, талдау жазаңыздар.
Ескерту: «Cабақ үлгерімі» тақырыбын астына жазыңыз.

Notepad++-тағы түрі

Браузердегі түрі
Сурет 16. Ұяшықтарды біріктіру

20

№8 сабақ
Тақырыбы: Практикалық жұмыс №5
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Практикалық жұмыстың барысы:
1. Іске қосу (Пуск) батырмасын және
notepad++ белгішені басыңыздар.
2. Notepad ++ редакторы ашылады. «Кесте құру» практикалық жұмысын
орындаңыздар.
3. Келесі HTML кодын теріңіздер:

Бірінші ұяшық	Екінші ұяшық	Үшінші ұяшық

4. table.html атауымен cайт папкасына сақтаңыздар.
5. Сайт папкасын ашыңыздар. Онда браузермен ашатын web -парақша(table.html)
бар.
6. table.html файлын екі рет басып, браузерде көруге болады. Нәтижені
талдаңыздар.

Сурет 17. Web-беттің үлгісі
7. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: table.html құжатына
кесте жиегінің түсін LimeGreen бояңыздар және өлшемін 5 деп өзгеріс енгізіңіздер:

Бірінші ұяшық	Екінші ұяшық	Үшінші ұяшық

8. Файлды сақтаңыздар (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.

Сурет 18. Web-беттің үлгісі
21

9. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: құжат денесін,
яғни жалпы құжат фонын «ivory» бояп, бірінші жолдың екінші ұяшығын «#F0E68C»,
екінші жолын «violet» деп өзгеріс енгізіңіздер:

Бірінші ұяшық	Екінші ұяшық	Үшінші ұяшық
Төртінші ұяшық	Бесінші ұяшық	Алтыншы ұяшық

10. Файлды сақтаңыздар (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.

Сурет 19. Web-беттің үлгісі
11. Барлығы дұрыс болса, келесі тапсырманы орындаңыз: бірінші, алтыншы
ұяшықты біріктіріп, құжаттағы кестегі өзгеріс енгізіңіздер:

Бірінші ұяшық	Екінші ұяшық	Үшінші ұяшық	Төртінші ұяшық
	Бесінші ұяшық	Алтыншы ұяшық

12. Файлды сақтаңыздар (Файл→Сохранить). Браузерде бетті көруге өтіңіздер.
Обновить
батырмасын немесе F5 пернесін басыңыздар.

Сурет 20. Web-беттің үлгісі
22

Өз бетінше жұмыс істеуге арналған тапсырма:
1. Жаңа web-бетті құрыңыздар. Бетке кестені орналастырыңыздар.
1) Кестені беттің ортасы бойынша туралаңыздар.
2) Кестенің артқы фоны -#87CEEB
3) Кесте ені - 500 пиксель.
4) Шегараның қалындығы - 5 пиксель, шегара түсі - #F0E68C.
6) Кестенің екінші қатарының түсі - #AFEEEE, 3-ұяшық түсі - #66CDAA, 5-ұяшық
түсі - #F0E68C
7) Кестелердің, жолдардың және ұяшықтардың артқы фондарын форматтау:

Сурет 21. Web-беттің үлгісі

23

№9 сабақ
Тақырыбы: Практикалық жұмыс №6
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Өз бетінше жұмыс істеуге арналған тапсырмалар:
Тапсырма №1. Төмендегідей үлгіде кесте ұяшықтарын біріктіріңіздер.

Тапсырма №2. Төмендегідей үлгіде HTML құжатын құрастырыңыздар. Бірінші
кесте жолынының ұяшықтарын біріктіріңіздер. Кесте фонын #E6E6FA, ал бірініші,
үшінші, бесінші жолдарды #E6E6FA ауыстырыңыздар. Мәтінді форматтау тегтерін үлгі
бойынша қолданыңыздар:

Сурет 22. Web-беттің үлгісі

24

№10 сабақ
Тақырыбы: Web-бетке сурет енгізу Практикалық жұмыс №7
Мақсаты: web-парақшаларды әзірлеуде HTML-тегтерін қолдану

Теориялық ақпарат:
Web-бетке сурет қою
Бетке сурет қою үшін тегі қолданылады. Стандартты сурет форматтары
GIF, PNG және JPEG болып табылады. Жалғыз тегі ештеңе білдірмейді. Оған тиісті
атрибуттарды қосу керек. Бұл тегтің бірінші, ең маңызды атрибуты - src атрибуты болып
табылады (ағылшын тіліндегі source - дереккөзі сөзінің қысқартуы). Бұл атрибут сурет
файлының орналасқан жерін көрсетеді.
HTML бетке суретті қою коды келесі түрге ие:
Ескерту: Біздің image.jpg файлымыз бен бет файлы бір бумада орналасқан болса,
сурет атын көрсеткен жеткілікті. Егер сурет файлы басқа жерде орналасқан болса, онда
оны ашу үшін толық жолды жазу керек.
Сурет файлының адресін көрсетудің кейбір мысалдарын қарастырайық:
- мұндай жазба біздің