Материалдар / «ВЕБ - ПАРАҚШАЛАРДЫ ҚҰРУДА HTML - ТЕГТЕРІН ҚОЛДАНУ» (авторлық бағдарлама)

«ВЕБ - ПАРАҚШАЛАРДЫ ҚҰРУДА HTML - ТЕГТЕРІН ҚОЛДАНУ» (авторлық бағдарлама)

Материал туралы қысқаша түсінік

Бұл бағдарлама «Веб-парақшаларды құруда HTML-тегтерін қолдану» тақырыбы бойынша оқушыларға веб-бағдарламалау негіздерін меңгеруге арналған. Бағдарламада HTML тілінің құрылымы, негізгі тегтері, мәтіндерді пішімдеу, графикалық элементтерді орналастыру, гиперсілтемелерді пайдалану, фреймдермен жұмыс істеу және веб-парақтарды дизайн тұрғысынан безендіру мәселелері қарастырылады.

Барлық пәндер Барлық материалдар Барлық сыныптар

Бұл бетте материалдың қысқаша нұсқасы ұсынылған. Материалдың толық нұсқасын жүктеп алып, көруге болады

АЛМАТЫ ОБЛЫСЫ БІЛІМ БАСҚАРМАСЫ

ЕҢБЕКШІҚАЗАҚ АУДАНЫ БІЛІМ БӨЛІМІ

«Ы. АЛТЫНСАРИН АТЫНДАҒЫ №1 ОРТА МЕКТЕБІ» КММ

КУРМАМБАЕВА РАУШАН МЕКИБАЕВНА

«ВЕБ - ПАРАҚШАЛАРДЫ ҚҰРУДА HTML - ТЕГТЕРІН ҚОЛДАНУ»

(авторлық бағдарлама)

Алматы облысы, 2025 жыл

УДК 004

ББК 16

К88

Курмамбаева Раушан Мекибаевна / «Веб - парақшаларды құруда HTML - тегтерін қолдану»/ Алматы облысы, 2025 жыл, 115 бет;

ISBN 978-601-01-0917-9

Бұл бағдарлама «Веб-парақшаларды құруда HTML-тегтерін қолдану» тақырыбы бойынша оқушыларға веб-бағдарламалау негіздерін меңгеруге арналған. Бағдарламада HTML тілінің құрылымы, негізгі тегтері, мәтіндерді пішімдеу, графикалық элементтерді орналастыру, гиперсілтемелерді пайдалану, фреймдермен жұмыс істеу және веб-парақтарды дизайн тұрғысынан безендіру мәселелері қарастырылады.

Оқушылар бағдарламаны игеру барысында теориялық білім мен практикалық дағдыларды қатар меңгереді. Практикалық бөлімде оқушылар қарапайым веб-беттер жасап, оларды жетілдіру арқылы толыққанды сайт құру тәжірибесін жинақтайды. Сонымен қатар, Microsoft FrontPage, GIMP сияқты құралдарды пайдалана отырып, веб-дизайн элементтерін әзірлеуді үйренеді.

Бағдарламаның соңғы кезеңінде оқушылар веб-сайтты интернетке орналастыру әдістерін меңгеріп, ғылыми жоба әзірлеу арқылы өздерінің зерттеу және шығармашылық дағдыларын дамытады. Бұл курс оқушылардың IT саласындағы қызығушылығын арттырып, веб-бағдарламалау мен веб-дизайн бойынша алғашқы қадамдарын жасауға көмектеседі.

© Курмамбаева Раушан Мекибаевна

УДК 004

ББК 16

ISBN 978-601-01-0917-9

Кітап жалпы білім саласы қызметкерлеріне арналған.

Құрал «Atameken-print» жедел баспасында әзірленіп, кітаптар базасына тіркелді.

ТҮСІНІК ХАТ

Бағдарламаның өзектілігі

Қазіргі заманғы ақпараттық технологиялардың дамуы веб-парақтарды құрудың маңыздылығын арттырып, HTML тілін меңгеруді қажетті дағдылардың бірі ретінде бекітті. Бүгінгі таңда сайт жасау мен веб-парақтарды өңдеу дағдылары тек ІТ мамандары үшін ғана емес, сонымен қатар кез келген салада жұмыс істейтін адамдар үшін де пайдалы болып отыр. Цифрлық кеңістікте жеке блогтар, корпоративтік сайттар, электрондық коммерция және білім беру платформалары белсенді түрде дамып келеді. Осыған байланысты оқушылардың HTML тілін қолдану негіздерін меңгеруі олардың ақпараттық-коммуникациялық құзыреттілігін арттыруға, өздерінің жеке веб-парақтарын жасау мүмкіндігін игеруге және ІТ саласындағы кәсіби білімдерін қалыптастыруға септігін тигізеді.

Бұл бағдарламаның өзектілігі – оқушыларға веб-парақ жасау дағдыларын үйрету арқылы олардың технологиялық сауаттылығын дамытуында. Бағдарламада HTML тілінің негізгі тегтері, құрылымы, мәтін және графикалық элементтерді қосу, гиперсілтемелерді пайдалану, веб-парақтардың логикалық құрылымын құру секілді маңызды тақырыптар қарастырылады. Сонымен қатар, бағдарламаның мазмұны оқушылардың тәжірибелік дағдыларын қалыптастыруға, олардың веб-технологиялар саласындағы білімдерін жетілдіруге бағытталған.

2. Ғылыми-әдістемелік негізі

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

Бағдарламаның әдістемелік ерекшеліктері:

Құзыреттілікке бағытталған оқыту – оқушыларға веб-парақтарды өз бетінше құруға мүмкіндік береді.
Жобалық оқыту әдісі – оқушылар өздерінің жеке сайттарын әзірлеу арқылы шығармашылық және аналитикалық ойлау дағдыларын дамытады.
Интерактивті оқыту тәсілдері – веб-дизайн мен кодтау тапсырмалары арқылы тәжірибелік дағдыларды жетілдіреді.
Білімді кезең-кезеңімен меңгеру – HTML-дің негізгі түсініктерінен бастап, күрделі веб-беттерді құруға дейін жүйелі түрде оқытылады.

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

3. Бағдарламаның жаңашылдығы

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

Жаңашылдық элементтері:

Практикалық бағыттылық – оқушылар теориялық материалды меңгергеннен кейін оны тәжірибе жүзінде қолданады.
Жобалық тәсіл – оқушылар жеке веб-парақтарын жасап, оны хостингке орналастыру мүмкіндігіне ие болады.
Геймификация – оқыту процесінде интерактивті элементтер, ойын тәсілдері және кодтау жаттығулары қолданылады.
Заманауи веб-ресурстарды қолдану – оқушылар GitHub Pages, Netlify немесе басқа да платформалар арқылы өз веб-парақтарын жариялауды үйренеді.

4. Педагогикалық орындылығы

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

Педагогикалық тиімділік келесі тәсілдер арқылы қамтамасыз етіледі:

Оқушылардың белсенді қатысуы – практикалық тапсырмаларды орындау арқылы олар өз білімдерін бекітеді.
Жеке және топтық жұмыс – оқушылар жеке веб-парақтарын құрумен қатар, топтық жобаларда жұмыс істеп, бірлескен жұмыстың маңыздылығын түсінеді.
Шығармашылық және зерттеушілік қызмет – оқушылар жаңа веб-технологияларды өз бетінше зерттеп, оларды практикада қолдануға үйренеді.

5. Теориялық маңыздылығы

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

6. Практикалық маңыздылығы

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

Практикалық дағдылар:

HTML негізінде веб-беттерді құру
Мәтінді, суреттерді және гиперсілтемелерді қолдану
Кестелер мен тізімдерді пайдалану
Бірнеше веб-бетті байланыстыру
Фреймдер және iframe технологияларын қолдану
Сайтты серверге жүктеу және орналастыру

7. Бағдарламаның мақсаты мен міндеттері

Мақсаты:

Оқушыларды HTML негіздерін меңгерту арқылы веб-парақтар жасауға үйрету, веб-технологияларды пайдалану дағдыларын қалыптастыру және шығармашылық қабілеттерін дамыту.

Міндеттері:

HTML тілінің негізгі тегтерін үйрету.
Веб-парақтардың құрылымын түсіндіру.
Гиперсілтемелер мен мультимедиалық элементтерді қолдану тәсілдерін меңгерту.
Веб-беттерді стильдеу әдістерін көрсету.
Оқушылардың ақпараттық-коммуникациялық дағдыларын дамыту.
Жеке және топтық жобалар арқылы шығармашылық қабілеттерін жетілдіру.

8. Күтілетін нәтижелер

Бағдарламаны меңгеру нәтижесінде оқушылар:

HTML тілін қолдана отырып веб-парақтар жасай алады.
Веб-беттердің құрылымын дұрыс құрастырады.
Графикалық және гипермәтіндік элементтерді пайдалана алады.
Сайт құрылымын жобалап, оны тиімді ұйымдастыруды үйренеді.
Алынған білімдерін болашақта күрделі веб-жобаларға қолдана алады.

9. Бағдарламаны апробациялау

Бағдарлама білім беру ұйымдарында сынақтан өткізіледі. Оқушылардың веб-технологияларды меңгеру деңгейін анықтау үшін арнайы мониторинг жүргізіледі. Мұғалімдер мен оқушылардың пікірлері негізінде бағдарламаның мазмұны жетілдіріледі.

Апробациялау барысында:

Оқушылардың веб-парақ жасау дағдылары тексеріледі.
Бағдарламаның әдістемелік құралдарының тиімділігі бағаланады.
Мұғалімдердің кері байланысы жиналады.

Қорытынды:
Бұл бағдарлама HTML тілі негізінде веб-парақтар жасауды үйрету арқылы оқушылардың ақпараттық-коммуникациялық дағдыларын дамытуға бағытталған. Оқу барысында алынған білімдер оларға ІТ саласында жаңа мүмкіндіктер ашады және болашақта веб-дизайн мен бағдарламалауға тереңірек үңілуге мүмкіндік береді.

Пайдаланылған әдебиеттер

Оқушыларға арналған әдебиеттер

Жүнісбеков А., Мұхамедкәрім Б. HTML және CSS негіздері – Алматы: Ұлттық білім академиясы, 2021. – 240 б.
Әбдібекұлы Қ. Веб-дизайн негіздері: HTML, CSS – Нұр-Сұлтан: Фолиант, 2020. – 200 б.
Төлеубеков Ә., Шоқанов Б. Ақпараттық технологиялар және веб-бағдарламалау – Алматы: Келешек, 2019. – 184 б.
Омаров С. HTML және JavaScript негіздері – Астана: Қазақ университеті, 2022. – 256 б.
Мұратбеков Е., Ахметов Б. Веб-бағдарламалау негіздері (HTML, CSS, JavaScript) – Шымкент: Қазақ баспа үйі, 2021. – 312 б.

Мұғалімдерге арналған әдістемелік құралдар

Сапарғалиев А., Сейдахметов М. Информатика пәні бойынша веб-технологияларды оқыту әдістемесі – Алматы: Арман, 2020. – 220 б.
Қуанышбаева Ж., Әбілғазина Д. Цифрлық білім беру және веб-құру негіздері – Нұр-Сұлтан: Атамұра, 2019. – 190 б.
Тұрсынов Қ., Әбілдаева А. Орта мектепте веб-дизайнды оқыту әдістемесі – Алматы: Білім, 2021. – 280 б.
Кенжебаев С. Веб-бағдарламалау курсының әдістемелік негіздері – Шымкент: Полиграфия, 2022. – 210 б.
Жолдасбеков Б., Тұяқов Ә. HTML және CSS көмегімен интерактивті сайт жасау әдістері – Алматы: Қазақ университеті, 2020. – 250 б.

КҮНТІЗБЕЛІК –ТАҚЫРЫПТЫҚ ЖОСПАР

(аптасын 1 сағат, жылына 34 сағат)

р/с	Бөлім Бөлімше Тақырып	Оқу мақсаты	Сағат саны			Білім нәтижесі
р/с	Бөлім Бөлімше Тақырып	Оқу мақсаты	Барлығы	Лекция/Теория/Прак-ика1	Практика /Практика2	Білім нәтижесі
1	Кіріспе сабақ	WEB-сайт және Web-бет, интернет желісі, WEB-технологиялар, браузерлер бағдарламалары, ақпаратты ұсынудың интерактивті құралы ұғымымен танысу.	1	1		Курспен танысады. Берліген тапсырмаларды орындайды.
2-3	HTML негізгі түсініктері	Гипермәтіндік құжаттарды белгілеу тілі, тегтер, HTML кодымен танысу.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
4-5	HTML құжатының құрылымы	Сайт жобасын әзірлеу бойынша ұсыныстар.Сайттың жобасын әзірлееу	2	1	1	Сайттың жобасын әзірлейді. Берілген тапсырмаларды орындайды.
6-7	Microsoft FrontPage бағдарламасымен танысу	Құралдар тақтасы. Бағдарламаның мүмкіндіктері. Бағдарламамен жұмыс істеудің негізгі кезеңдермен танысуы.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
8-9	Негізгі веб-бетті құру және фондық безендіру.	Текстура, фон, текстураны қосу, баннер. HTML беті, HTML бетін өңдеу, HTML бетіне мәтін мен графиканы енгізу, веб-бетті қарау және негізгі веб-бетті құрумен танысады.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
10-11	Өздік жұмыс	Өткен тақырыптар бойынша өздік жұмыс жазады	2	1	1	Түрлі тапсырмалар. Сабақтар әзірелуі керек.
12-13	Анимация	Анимациялық файлдар, іске қосу жолы, іске қосу жолының диалогтық терезесі. Семинар:"веб-бетке анимациялық сызбалар мен жүгіру жолын қосу". Флэш-анимациямен жұмыс.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
14-15	Графикалық редакторлармен танысу	"ГИМП" графикалық редакторымен танысу . Графикалық объектілерді құру негіздері.	2	1	1	ГИМП графикалық редакторында жұмыс істеуді үйренеді.
16-17	Графикалық редакторлар арқылы веб-компоненттерді құру	Сайт үшін сызбалар мен басқа графикалық нысандарды жасау. Сайттың логотипін, интерактивті түймелерді жасаңыз және оларды тақырып бетіне орналастыру.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
18-19	Қазіргі сайттардың құрылымы	Қазіргі заманғы сайттардың түрлері, флэш-сайттар. Құрылымдар мен бөлшектер, Web элементтерімен танысу.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
20-21	Мәтінді пішімдеу және графиканы орналастыру	Абзац, мәтін тақырыптары, қаріпті басқару, тізімдер, бөлу жолақтары, графикалық кескіндерді кірістіру, фондық графикамен танысу	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
22-23	Гиперсілтемелермен жұмыс.	Мәтіндік сілтемелер, графикалық сілтемелер, навигациямен жұмыс	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
24-25	Сайт беттерін құру	Бет-сілтеме картасы. Кесте бетімен жұмыс жасауды үйрету.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
26- 27	Дизайн және безендіру	"Сайт дизайны".Сайт беттерін рәсімдеу және толтырумен танысады.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
28-29	Фреймдер	"Фреймдерді толтыру және ресімдеумен танысады.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
30-31	Фреймдер	Фреймдерді практикада қолдануды үйренеді	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
32-33	Сайтты құру және орналастыру	FrontPage бағдарламасын пайдаланып сайт құру.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.
34	Сайт жасау тақырыбына ғылыми жоба әзірлеу	FrontPage бағдарламасын пайдаланып сайт құру. Дайын болған сайтты ресурстарды пайдалана отырып орналстыру.	2	1	1	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Бағдарламаның мазмұны:

1. Кіріспе сабақ

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

2-3. HTML негізгі түсініктері

HTML (HyperText Markup Language) тілінің анықтамасы.
Веб-беттің құрылымы және негізгі элементтері.
HTML тегтері, олардың атрибуттары және синтаксисі.
Қарапайым HTML құжатын құру және шолғышта қарау.

4-5. HTML құжатының құрылымы

HTML құжатының стандартты құрылымы (<!DOCTYPE html>, <html>, <head>, <body>).
Тақырыптық элементтер (<title>, <meta>).
Құжаттың негізгі бөлімдері және олардың қолданылуы.
Кодты реттеу және түсініктемелер ().

6-7. Microsoft FrontPage бағдарламасымен танысу

Microsoft FrontPage-тың веб-сайт жасауға арналған құрал ретінде қолданылуы.
Бағдарлама интерфейсі, жұмыс аймағы және құралдар тақтасы.
Веб-беттерді жасау, өңдеу және алдын ала қарау.
Графикалық және мәтіндік элементтерді енгізу.

8-9. Негізгі веб-бетті құру және фондық безендіру

Қарапайым веб-бетті құру және мазмұнды енгізу.
Фондық түс пен суреттерді қолдану (background-color, background-image).
Стильдерді (CSS) пайдалану арқылы фондық безендіру.
Веб-парақтың жалпы көрінісін жақсарту тәсілдері.

10-11. Өздік жұмыс

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

12-13. Анимация

Веб-парақтарға анимация қосу әдістері.
CSS анимациясы (@keyframes, animation).
GIF және SVG анимацияларын қолдану.
JavaScript және CSS көмегімен анимациялық элементтер жасау.

14-15. Графикалық редакторлармен танысу

Графикалық редакторлардың веб-дизайндағы рөлі.
GIMP, Photoshop және басқа редакторларды қолдану.
Суреттерді өңдеу, өлшемін өзгерту, фонды жою.
Веб-дизайнда қолданылатын кескін форматтары (JPEG, PNG, GIF, SVG).

16-17. Графикалық редакторлар арқылы веб-компоненттерді құру

Веб-сайтқа арналған иконкалар, батырмалар, логотиптер жасау.
Графикалық элементтерді экспорттау және вебке бейімдеу.
CSS арқылы суреттерді стильдеу.

18-19. Қазіргі сайттардың құрылымы

Веб-сайттардың негізгі түрлері (ақпараттық, корпоративтік, электрондық коммерция, блогтар, әлеуметтік желілер).
Қазіргі веб-технологиялар және трендтер.
Респонсивті дизайн және мобильді нұсқалар.

20-21. Мәтінді пішімдеу және графиканы орналастыру

Мәтінді әртүрлі пішімдеу (<b>, <i>, <u>, <h1>-<h6>, <p>).
Тізімдер (<ul>, <ol>, <dl>).
Кестелер (<table>, <tr>, <td>).
Суреттерді енгізу (<img>), суреттерге стиль беру (CSS көмегімен).

22-23. Гиперсілтемелермен жұмыс

Гиперсілтемелерді қолдану (<a ="...">).
Ішкі және сыртқы сілтемелер.
Анкорлық сілтемелер және оларды бет ішінде қолдану.
Суретке гиперсілтеме орнату.

24-25. Сайт беттерін құру

Веб-сайттың бірнеше беттен тұратын құрылымын жасау.
Беттер арасындағы байланыстарды ұйымдастыру.
Веб-сайт навигациясын жасау (<nav>, <ul>, <li>).
Басқа беттерге ауысатын мәзір құру.

26-27. Дизайн және безендіру

CSS арқылы стиль беру (қаріптер, түстер, шекаралар, көлеңкелер).
Батырмалар мен UI элементтерді безендіру.
Мәзірлер мен тақырыптарды безендіру (box-shadow, border-radius).
Сайттың жалпы көрінісін жақсарту.

28-29. Фреймдер

Фреймдерге кіріспе (<frameset>, <frame> тегтері).
Бірнеше веб-беттерді бір терезеде көрсету.
target атрибутын қолдану (сілтемелерді басқа фреймде ашу).
Фреймдер мен iframe технологиялары (<iframe>).

30-31. Фреймдер (тәжірибелік сабақ)

Бағандар мен жолдарға бөлінген фреймдер (cols, rows).
Ішкі фреймдер (nested framesets).
Фреймдердің кемшіліктері және қазіргі веб-дизайндағы баламалар.
CSS Grid және Flexbox көмегімен заманауи фреймдер жасау.

32-33. Сайтты құру және орналастыру

Жасалған веб-сайтты толықтай әзірлеу.
Файл құрылымын реттеу және финалдық түзетулер.
Домен және хостинг негіздері.
Сайтты GitHub Pages, Netlify немесе 000webhost-қа орналастыру.

34. Сайт жасау тақырыбына ғылыми жоба әзірлеу

Ғылыми жоба құрылымы (кіріспе, зерттеу бөлімі, тәжірибе, қорытынды).
Веб-парақ жасауды зерттеу жұмысына енгізу.
Сайт құру процесін сипаттау.
Жобаның маңыздылығын негіздеу және презентация жасау.

Әдістемелік нұсқаулық бөлімі

№1 сабақ

Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы:	Кіріспе сабақ
Оқу бағдарламасына сәйкес оқыту мақсаттары (негізгі мақсат)	WEB-сайт және Web-бет, интернет желісі, WEB-технологиялар, браузерлер бағдарламалары, ақпаратты ұсынудың интерактивті құралы ұғымымен танысу.
Сабақтың мақсаты:	Курспен танысады. Берліген тапсырмаларды орындайды.

Сабақтың барысы

Сабақ

кезеңі/

Уақыты

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

І. Ұйымдастыру кезеңі.

Оқушылармен сәлемдесу, түгендеу,топқабөлу. Психологиялық жағымды ахуал туғызу

Оқушылар 3 топқа бөлінеді (стикер арқылы, стикердің артқы бетінде жақсы тілектер жазуы бар)

Стикердегіжақсы тілектер: белсендібол, мақсатына жет, дұрыс жауап бер, өз елін сүй, жақсы жұмыс жаса, көңілді бол, көмекші бол, белсенді жұмыс жаса.

Оқушылар(түрлі стикерлер арқылы)3-топқа бөлінеді.

I-Интернет тобы

II-Интертақта тобы

III-Компьюттер тобы

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Сабақтың соңы

5 мин

Веб-парақшаларды құру – қазіргі заманғы ақпараттық технологиялардың маңызды бөлігі. Интернеттің дамуымен кез келген адам өз сайтын жасай алады. Бірақ сайттарды құру белгілі бір ережелер мен технологияларды білуді талап етеді. Веб-парақшаларды жасау үшін қолданылатын негізгі технологиялардың бірі – HTML (HyperText Markup Language).

HTML – гипермәтінді белгілеу тілі. Ол веб-парақшаның құрылымын сипаттайды және браузерге мазмұнды қалай көрсету керектігін түсіндіреді. HTML мәтіндік құжаттардың арнайы тегтер көмегімен белгіленуін қамтамасыз етеді. Тегтер мәтінді форматтауға, суреттер, кестелер, сілтемелер қосуға мүмкіндік береді.

HTML-дің негізгі құрылымы мынадай:

<!DOCTYPE html>

<html>

<head>

<title>Менің алғашқы веб-парағым</title>

</head>

<body>

<h1>Сәлем, әлем!</h1>

<p>Бұл менің алғашқы веб-парағым.</p>

</body>

</html>

Бұл код парақтың тақырыбын, негізгі мәтінін және браузерде қалай көрсетілетінін анықтайды. Әрбір HTML құжаты <!DOCTYPE html> декларациясынан басталады, ол құжаттың HTML5 стандартында жазылғанын білдіреді.

HTML тегтерінің негізгі түрлері:

<html> – құжаттың басталуы мен аяқталуын білдіреді.
<head> – бет туралы қосымша ақпарат (метадеректер) қамтиды.
<title> – браузердің тақырып жолында көрсетілетін атау.
<body> – негізгі мазмұнды қамтитын бөлік.
<h1>...<h6> – тақырыптар (үлкеннен кішіге қарай).
<p> – абзац.
<a> – сілтемелер жасауға арналған тег.
<img> – сурет қосуға арналған тег.

HTML – статикалық веб-парақшалар жасаудың негізі. Егер веб-парақша динамикалық әрі интерактивті болуы керек болса, онда қосымша CSS (Cascading Style Sheets) және JavaScript технологиялары қолданылады.

Тапсырмалар

HTML құрылымын талдау.
Төмендегі HTML кодын оқып шығыңыз. Бұл веб-парақша қандай элементтерден тұратынын түсіндіріңіз.

<!DOCTYPE html>

<html>

<head>

<title>HTML негіздері</title>

</head>

<body>

<h1>HTML тілін үйрену</h1>

<p>Бұл – веб-парақшаның негізгі бөлігі.</p>

</body>

</html>

HTML құжат жасау.
Компьютерде Notepad немесе VS Code қолдана отырып, өз веб-парағыңызды жасаңыз. Ол сіздің атыңызды, қысқаша биографияңызды және сүйікті хоббиіңіз туралы ақпаратты қамтуы керек.

HTML тегтерін сәйкестендіру.
Берілген HTML тегтерінің дұрыс жұбын табыңыз:

<h1>, <title>, <body>, <p>
<head>, </head>
<a ="URL">, </a>

Сілтемелер қосу.
Төмендегі кодқа сілтеме (<a> тегін) қосып, оны сіздің сүйікті сайтыңызға бағыттайтындай етіп жазыңыз.

<p>Менің сүйікті сайтым: ...</p>

Кесте құру.
HTML кестесін жасап, оған 3 қатар, 2 баған енгізіңіз.

Сурет қосу.
HTML веб-парақшаңызға сурет (<img> тегін) қосып, оның ені мен биіктігін реттеңіз.

Тізімдер жасау.
HTML-де реттелген және реттелмеген тізімдерді пайдаланып, "Менің сүйікті кітаптарым" немесе "Менің мақсаттарым" атты тізім жасаңыз.

Түсіндіру жұмысы.
<!DOCTYPE html> және <head> бөлімдері не үшін қажет екенін түсіндіріңіз.

Қате түзету.
Төмендегі HTML кодында қате бар. Қай жерде екенін анықтап, түзетіңіз.

<html>

<head>

<title>Менің веб-парағым<title>

</head>

<body>

<h1>Сәлем!</h1>

<p>Бұл менің алғашқы веб-парағым</p>

</body>

</html>

Веб-дизайн ұстанымдары.
Веб-парақша жасағанда қандай дизайн ережелерін сақтау қажет? Мысал келтіріңіз.

Дескрипторлар

Оқушы HTML-дің негізгі құрылымын түсіндіреді.
Оқушы HTML тегтерін дұрыс сәйкестендіреді.
Оқушы жеке веб-парақ жасай алады.
Оқушы <a>, <img>, <p> және <h1> тегтерін қолданады.
Оқушы HTML кесте мен тізімдерді құрастырады.

Сабақты қорытындылау сұрақтары

HTML дегеніміз не және ол не үшін қажет?
Веб-парақшада <head> және <body> бөлімдерінің айырмашылығы қандай?
Веб-парақшаға суреттер мен сілтемелерді қалай қосуға болады?
HTML тілінде қандай негізгі тегтер қолданылады?
Динамикалық веб-парақша жасау үшін HTML-ден басқа қандай технологиялар қажет?

1️⃣ Сабақ басында мұғалімнің түсіндіруін тыңдайды және жаңа тақырып бойынша мәлімет алады
2️⃣ Оқулықтан немесе берілген материалдан HTML негіздерін зерттейді
3️⃣ Мұғалім ұсынған тапсырманы орындайды: HTML-код жазады, веб-парақ құрады
4️⃣ Өз бетінше немесе топпен бірге тәжірибелік жұмыс жасайды, қателерді түзетеді
5️⃣ Дайын веб-парақты шолғышта тексереді және жетілдіреді
6️⃣ Сабақ соңында орындалған жұмысты мұғалімге көрсетеді және кері байланыс алады

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

№2-3 сабақ

Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	HTML негізгі түсініктері
Оқу бағдарламасына сәйкес оқыту мақсаттары	Гипермәтіндік құжаттарды белгілеу тілі, тегтер, HTML кодымен танысу.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтың кезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың

басы

5 минут

Ұйымдастыру кезеңі

Оқушылармен амандасу.
Мұғалім оқушыларды жылы жүзбен қарсы алады.

Сабақтың мақсатын түсіндіру.

Бүгінгі сабақта біз HTML тілінің негізгі түсініктерімен танысамыз.

Веб-парақша құрудың алғашқы қадамдарын жасаймыз.

Оқушылардың сабаққа дайындығын тексеру.

Техникалық құралдардың (компьютер, ноутбук) дайын екеніне көз жеткізу.

Қажетті бағдарламалардың (браузер, мәтіндік редактор) ашылғанын тексеру.

Сабаққа дайындықтарын ұйымдастыру;

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

HTML дегеніміз не?

HTML (HyperText Markup Language) – гипермәтінді белгілеу тілі.
Ол веб-парақтың құрылымын анықтайды және мазмұнды браузерде қалай көрсету керектігін белгілейді.

HTML құрылымы

Әрбір HTML құжаты белгілі бір құрылымға ие. Оның негізгі бөлігі төмендегідей болады:

<!DOCTYPE html>

<html>

<head>

<title>Менің алғашқы веб-парағым</title>

</head>

<body>

<h1>Сәлем, әлем!</h1>

<p>Бұл менің алғашқы веб-парағым.</p>

</body>

</html>

Бұл қарапайым HTML құжаты 4 негізгі бөліктен тұрады:

<!DOCTYPE html> – құжаттың HTML5 стандартына сай екенін білдіреді.
<html> – бүкіл құжаттың басталуы мен аяқталуын көрсетеді.
<head> – бет туралы қосымша ақпараттар (метадеректер) енгізіледі.
<body> – негізгі мазмұнды қамтиды.

HTML тегтері

HTML-де ақпарат арнайы тегтер көмегімен жазылады. Әрбір тег ашылу (<tag>) және жабылу (</tag>) белгісінен тұрады.

Негізгі HTML тегтері

<h1>...<h6> – тақырыптар (үлкеннен кішіге қарай).
<p> – абзац.
<a> – сілтеме жасау үшін қолданылады.
<img> – сурет қосу үшін қолданылады.
<ul>, <ol>, <li> – тізімдер жасау үшін қолданылады.
<table> – кесте жасауға арналған.

HTML құжаты қалай жұмыс істейді?

HTML құжаты браузерде ашылған кезде, браузер оның құрылымын оқып, сәйкесінше көрсетеді. Браузер кодты түсініп, қолданушыларға веб-парақ түрінде ұсынады.

Тапсырмалар

HTML құрылымын талдау.
Төмендегі HTML кодын қарап шығыңыз. Бұл веб-парақ қандай элементтерден тұратынын сипаттаңыз.

<!DOCTYPE html>

<html>

<head>

<title>HTML негіздері</title>

</head>

<body>

<h1>HTML тілін үйрену</h1>

<p>Бұл – веб-парақтың негізгі бөлігі.</p>

</body>

</html>

 HTML құжат жасау.

Компьютерде Notepad немесе VS Code қолдана отырып, жеке веб-парағыңызды жасаңыз.
Ол сіздің атыңызды, сүйікті хоббиіңізді және қалаған цитатаңызды қамтуы керек.

Тегтерді сәйкестендіру.
Берілген тегтерді дұрыс жұбымен сәйкестендіріңіз:

<h1>, <title>, <body>, <p>
<head>, </head>
<a ="URL">, </a>

html

<p>Менің сүйікті сайтым: ...</p>

Кесте құру.
HTML көмегімен 3 қатар, 2 бағаннан тұратын кесте жасаңыз.

Сурет қосу.
HTML веб-парақшаңызға сурет (<img> тегін) қосып, оның ені мен биіктігін реттеңіз.

Тізімдер жасау.
HTML-де реттелген және реттелмеген тізімдерді пайдаланып, "Менің сүйікті фильмдерім" немесе "Менің мақсаттарым" атты тізім жасаңыз.

Қате түзету.
Төмендегі HTML кодында қате бар. Қай жерде екенін анықтап, түзетіңіз.

<html>

<head>

<title>Менің веб-парағым<title>

</head>

<body>

<h1>Сәлем!</h1>

<p>Бұл менің алғашқы веб-парағым</p>

</body>

</html>

HTML мен CSS байланысы.
HTML құжатында CSS қолдану не үшін қажет? Өз ойыңызды жазыңыз.

Қарапайым веб-бет жасау.
Төмендегі талаптарға сай веб-парақ құрыңыз:

Тақырып: "Менің алғашқы веб-парағым"

Сурет қосу

Тізім жасау

Сілтемелер қосу

Дескрипторлар

Оқушы HTML құрылымын анықтайды.
Оқушы HTML тегтерін дұрыс сәйкестендіреді.
Оқушы жеке веб-парақ жасай алады.
Оқушы <a>, <img>, <p>, <h1> тегтерін қолданады.
Оқушы HTML кесте мен тізімдерді құрастырады.

Сабақты қорытындылау сұрақтары

HTML тілі не үшін қолданылады?
Веб-парақшада <head> және <body> бөлімдерінің айырмашылығы қандай?
HTML құжатында <title> тегі қандай рөл атқарады?
<a> тегі не үшін қолданылады?
Веб-дизайн жасау кезінде қандай негізгі ережелерді сақтау қажет?

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Рефлексия

? Бүгінгі сабақтан не үйрендіңіз?

HTML-дің негізгі түсініктерімен таныстым.
Веб-парақ құрылымын құруды үйрендім.
HTML тегтерінің қалай жұмыс істейтінін түсіндім.

? Сізге қандай тапсырмалар оңай болды?

HTML тегтерін сәйкестендіру.
Веб-парақтың негізгі құрылымын жазу.
Тізімдер мен сілтемелер жасау.

? Қиындық туғызған тапсырмалар болды ма?

HTML құжатын өзім жазып көру.
Кесте мен суреттерді дұрыс орналастыру.
Қателерді табу және түзету.

? Келесі сабақта не үйренгіңіз келеді?

Веб-дизайн негіздері мен CSS қолдануды.
Веб-парақшаларға анимация және стиль беру жолдарын.
HTML және JavaScript байланысын зерттеу.

№4-5 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	HTML құжатының құрылымы
Оқу бағдарламасына сәйкес оқыту мақсаттары	Сайт жобасын әзірлеу бойынша ұсыныстар.Сайттың жобасын әзірлеу
Сабақтың мақсаты	Сайттың жобасын әзірлейді. Берілген тапсырмаларды орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу, оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың көңіл-күйін сұрайды.

Сабаққа қажетті құрал-жабдықтардың (компьютер, интернет, мәтіндік редактор) дайын екенін тексереді.

Сабақтың мақсатын түсіндіру.

Бүгінгі сабақта HTML құжатының құрылымын жан-жақты қарастырамыз.

HTML тіліндегі негізгі бөлімдермен және тегтермен танысамыз.

Веб-парақтың бастапқы нұсқасын жасап көреміз.

Оқушылардың сабаққа дайындығын тексеру.

Алдыңғы сабақтағы білімдерін қайталау мақсатында қысқа сұрақтар қою:

HTML дегеніміз не?

Веб-парақ құру үшін қандай құралдар қажет?

HTML тегтері қалай жазылады?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

HTML дегеніміз не?

HTML (HyperText Markup Language) – веб-парақтарды құру үшін қолданылатын гипермәтінді белгілеу тілі. Ол веб-браузерге парақтың құрылымын сипаттап, мазмұнды қалай көрсету керектігін көрсетеді.

HTML құжатының құрылымы

Кез келген HTML құжаты келесі негізгі бөлімдерден тұрады:

<!DOCTYPE html>

<html>

<head>

<title>Менің алғашқы веб-парағым</title>

</head>

<body>

<h1>Сәлем, әлем!</h1>

<p>Бұл менің алғашқы веб-парағым.</p>

</body>

</html>

Бұл код HTML құжатының стандартты құрылымы болып табылады. Оның негізгі бөлімдерін қарастырайық:

1️⃣ <!DOCTYPE html> – бұл құжаттың HTML5 стандартына сәйкес жазылғанын көрсететін арнайы декларация.

2️⃣ <html> – HTML құжатының басталуын және аяқталуын білдіреді. Барлық код осы тегтің ішінде жазылады.

3️⃣ <head> – веб-парақтың көрінбейтін бөлімі. Бұл бөлімде:

<title> – браузер қойындысында көрсетілетін атау,
<meta> – мета-тегтер (кодировка, автор туралы ақпарат),
<link> – стильдерге сілтеме,
<script> – скрипттер енгізіледі.

4️⃣ <body> – веб-парақтың негізгі мазмұны орналасатын бөлім. Бұл бөлімде:

<h1>...<h6> – тақырыптар,
<p> – абзацтар,
<a> – сілтемелер,
<img> – суреттер,
<ul>, <ol> – тізімдер,
<table> – кестелер жазылады.

HTML тегтерінің түрлері

HTML-де тегтер екі түрлі болады:
✅ Құрамдас тегтер – ашылу (<tag>) және жабылу (</tag>) бөліктерінен тұрады. Мысалы:

<p>Бұл – абзац.</p>

<img src="image.jpg" alt="Сурет сипаттамасы">

Тапсырмалар

1. HTML құжатының құрылымын талдау

Төмендегі HTML кодын оқып, оның қандай бөлімдерден тұратынын анықтаңыз.

<!DOCTYPE html>

<html>

<head>

<title>Бүгінгі сабақ</title>

</head>

<body>

<h1>HTML құрылымы</h1>

<p>Бұл HTML құжатының мысалы.</p>

</body>

</html>

? Сұрақтар:

Бұл кодта қандай бөлімдер бар?
<head> бөлімінде қандай тегтер жазылған?
<body> бөлімінің ішінде не орналасқан?

2. Жеке веб-парақ жасау

Тапсырма: Өз атыңызды, сүйікті хоббиіңізді және өзіңіз туралы қысқаша ақпаратты қамтитын веб-парақ жасаңыз.

Мысал:

<!DOCTYPE html>

<html>

<head>

<title>Мен туралы</title>

</head>

<body>

<h1>Менің атым – Айжан</h1>

<p>Мен кітап оқуды және код жазуды жақсы көремін.</p>

</body>

</html>

3. HTML тегтерін сәйкестендіру

Төмендегі тегтерді олардың атқаратын қызметтерімен сәйкестендіріңіз:

Тег	Қызметі
<title>	?
<h1>	?
<p>	?
<a>	?
<img>	?

4. Қате түзету

Төмендегі кодта бірнеше қате бар. Қателерді тауып, түзетіңіз.

<html>

<head>

<title>Менің веб-парағым<title>

</head>

<body>

<h1>Сәлем!</h1>

<p>Бұл менің алғашқы веб-парағым<p>

</body>

</html>

5. Сурет пен сілтеме қосу

Өзіңізге ұнайтын сайтқа сілтеме беріп, оның логотипін көрсету үшін HTML кодын жазыңыз.

Дескрипторлар

✅ Оқушы HTML құжатының негізгі құрылымын түсіндіреді.
✅ HTML тегтерін дұрыс сәйкестендіреді.
✅ HTML құжатындағы қателерді таба алады.
✅ Жеке веб-парақ жасап, оны браузерде аша алады.

Сабақты қорытындылау сұрақтары

HTML құжаты қандай бөлімдерден тұрады?
<head> және <body> бөлімдерінің айырмашылығы қандай?
<title> тегі не үшін қолданылады?
HTML құжатын жасау үшін қандай бағдарламалар қажет?
Веб-парақ дизайнын жақсарту үшін не істеуге болады?

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Рефлексия

? Бүгінгі сабақта не үйрендіңіз?
? Қандай тапсырма қиындық тудырды?
? Келесі сабақта қандай тақырыпты тереңірек меңгергіңіз келеді?

Рефлексия жасайды.

№6-7 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Microsoft FrontPage бағдарламасымен танысу
Оқу бағдарламасына сәйкес оқыту мақсаттары	Құралдар тақтасы. Бағдарламаның мүмкіндіктері. Бағдарламамен жұмыс істеудің негізгі кезеңдермен танысуы.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу, оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындығын тексереді.

Оқушылардың назарын сабаққа аудару үшін қысқаша әңгіме жүргізеді.

Сабақтың мақсаты мен міндеттерін түсіндіру.

Бүгінгі сабақта Microsoft FrontPage бағдарламасының мүмкіндіктерімен танысамыз.

Веб-сайт құру процесінің негізгі қадамдарын үйренеміз.

Microsoft FrontPage бағдарламасында алғашқы веб-парақты жасап көреміз.

Алдын ала білімді белсендіру.

Веб-сайт дегеніміз не?

Веб-парақтарды қандай бағдарламалармен жасауға болады?

HTML тілін білудің маңызы қандай?

Ширату жаттығуын орындайды.

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Microsoft FrontPage дегеніміз не?

Microsoft FrontPage – бұл веб-парақтар мен веб-сайттар құруға арналған WYSIWYG (What You See Is What You Get) редакторы. Ол Microsoft компаниясы тарапынан әзірленіп, алғаш рет 1996 жылы шығарылды.

Бұл бағдарлама веб-парақтарды код жазбай-ақ құруға мүмкіндік береді, яғни визуалды интерфейс арқылы жұмыс істеуге болады.

Microsoft FrontPage бағдарламасының мүмкіндіктері

✅ Интуитивті интерфейс – пайдаланушыға ыңғайлы графикалық орта.
✅ HTML кодын автоматты түрде жазу – қолданушылар кодпен жұмыс жасамай-ақ веб-парақ жасай алады.
✅ Дайын шаблондар – веб-сайттарды тез құру үшін көптеген дайын үлгілер бар.
✅ Гиперсілтемелер, суреттер және мультимедианы қосу мүмкіндігі.
✅ WYSIWYG редакторы – веб-парақтың нақты көрінісін кодсыз жасау.
✅ Бірнеше браузерге бейімделген веб-беттер жасауға мүмкіндік береді.

Microsoft FrontPage бағдарламасының негізгі компоненттері

? Меню жолағы – бағдарламадағы негізгі әрекеттерді басқару.
? Құралдар тақтасы – тез әрекет етуге мүмкіндік беретін түймелер жинағы.
? Жұмыс аймағы – парақтың дизайнын жасауға арналған орта.
? HTML редакторы – қажет болған жағдайда кодты өзгертуге мүмкіндік береді.
? Навигация аймағы – сайт құрылымын қарауға мүмкіндік береді.

Microsoft FrontPage бағдарламасында веб-парақ құру қадамдары

1️⃣ Бағдарламаны іске қосу

Start → Programs → Microsoft FrontPage
2️⃣ Жаңа веб-парақ ашу
"File" → "New" → "Page or Web"
3️⃣ Парақтың дизайнын құру
Мәтін қосу
Суреттер мен мультимедиа енгізу
Гиперсілтемелер жасау
4️⃣ HTML кодын тексеру (қажет болса)
"View" → "HTML"
5️⃣ Файлды сақтау
"File" → "Save As" → .html форматында сақтау
6️⃣ Браузерде тексеру
"Preview in Browser" функциясын қолдану

Тапсырмалар

1. Microsoft FrontPage интерфейсімен танысу

Бағдарламаны ашып, оның негізгі элементтерін анықтаңыз. Меню жолағы, құралдар тақтасы, жұмыс аймағы, навигация бөлімі қандай қызмет атқаратынын түсіндіріңіз.

2. Алғашқы веб-парақты жасау

Тапсырма: Өз атыңызды, мамандығыңызды және хоббиіңізді көрсететін жеке веб-парақ жасаңыз.

✅ Қадамдар:

Microsoft FrontPage бағдарламасында жаңа парақ ашыңыз.
Веб-параққа тақырып қосыңыз (Мен туралы).
Өзіңіз туралы қысқаша мәтін жазыңыз.
Сурет немесе фон қосыңыз.
Өз қалауыңыз бойынша сілтемелер қосыңыз.
Файлды .html форматында сақтап, браузерде ашып көріңіз.

3. Гиперсілтемелер қосу

Берілген мәтінге гиперсілтеме қосып, оны сүйікті сайтыңызға бағыттаңыз.

<p>Менің сүйікті сайтым: ...</p>

✅ Қосу жолы:

Мәтінді белгілеп, "Insert" → "Hyperlink" батырмасын басыңыз.
URL мекенжайын енгізіңіз.
"OK" батырмасын басып, браузерде тексеріңіз.

4. Кесте құру

Microsoft FrontPage арқылы 3 қатар, 2 бағаннан тұратын кесте жасаңыз.

✅ Қадамдар:

"Table" → "Insert Table" таңдаңыз.
Қажетті қатарлар мен бағандарды енгізіңіз.
Кестенің ішіне мәтін енгізіңіз.

5. Веб-сайт құрылымын жасау

Microsoft FrontPage бағдарламасында негізгі бет және оған екінші деңгейлі беттерді қосыңыз.

✅ Қадамдар:

"New Page" батырмасын басыңыз.
"Navigation View" қолдана отырып, беттерді біріктіріңіз.
Барлығын .html форматында сақтап, браузерде тексеріңіз.

Дескрипторлар

✅ Оқушы Microsoft FrontPage бағдарламасының интерфейсін сипаттайды.
✅ Веб-парақтың негізгі элементтерін жасайды.
✅ Гиперсілтемелер мен суреттерді енгізеді.
✅ Веб-беттер арасындағы навигацияны орнатады.
✅ HTML құжаттарын дұрыс сақтайды және браузерде ашады.

Сабақты қорытындылау сұрақтары

Microsoft FrontPage қандай бағдарлама?
Бұл бағдарламаның басты артықшылықтары қандай?
Веб-парақ жасау процесі қандай кезеңдерден тұрады?
FrontPage бағдарламасында қалай сурет және гиперсілтеме қосуға болады?
FrontPage бағдарламасын қазіргі уақытта қолдануға бола ма, жоқ па? Неге?

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Рефлексия

Рефлексия жасайды.

№ 8-9 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Негізгі веб-бетті құру және фондық безендіру.
Оқу бағдарламасына сәйкес оқыту мақсаттары	Текстура, фон, текстураны қосу, баннер. HTML беті, HTML бетін өңдеу, HTML бетіне мәтін мен графиканы енгізу, веб-бетті қарау және негізгі веб-бетті құрумен танысады.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Сабақтың мақсатын түсіндіру:

Веб-бетті құруды үйренеміз.Фондық безендіру әдістерін қарастырамыз.

HTML және CSS көмегімен парақтың дизайнын жақсартамыз.

Алдын ала білімді белсендіру:

HTML құжатында қандай негізгі тегтер бар?

Фондық түстер мен суреттерді қосу үшін қандай тәсілдер қолданылады?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Веб-бет дегеніміз не?

Веб-бет – бұл интернетте көрсетілетін құжат. Ол HTML көмегімен жасалады және браузер арқылы көрінеді.

Негізгі веб-бетті құру

HTML құжатының стандартты құрылымы төмендегідей:

<!DOCTYPE html>

<html>

<head>

<title>Менің алғашқы веб-бетім</title>

</head>

<body>

<h1>Сәлем, әлем!</h1>

<p>Бұл менің алғашқы веб-бетім.</p>

</body>

</html>

Бұл кодта веб-бет жасалып, оның тақырыбы (<title>) мен негізгі мазмұны (<body>) көрсетіледі.

Фондық безендіру әдістері

1️⃣ Түсті фон қосу

html

2️⃣ Фонға сурет қою

3️⃣ CSS қолдану арқылы фон орнату

<style>

body {

background-color: #f0f0f0;

background-image: url('background.jpg');

background-repeat: no-repeat;

background-size: cover;

}

</style>

Тапсырмалар

HTML веб-бетін жасау.

Жаңа веб-бет құрып, оған <h1>, <p>, <img> элементтерін қосыңыз.

Фондық түсті өзгерту.

Веб-бетіңізге кез келген түсті фон қойып, оны браузерде ашып көріңіз.

Фондық сурет қосу.

Өз веб-бетіңізге суретті фон ретінде қосып, оның орналасуын реттеңіз.

CSS көмегімен стиль жасау.

Парақтың мәтіні мен дизайнын жақсарту үшін CSS қолданыңыз.

Дескрипторлар

✅ Оқушы HTML веб-бетін құра алады.
✅ Фондық түсті өзгерте алады.
✅ Фондық сурет орната алады.
✅ CSS көмегімен безендіру жасай алады.

Сабақты қорытындылау сұрақтары

Веб-бет қалай құрылады?
Фондық түсті қалай өзгертуге болады?
Фондық суретті орнату үшін қандай тег қолданылады?
CSS арқылы фонды қалай басқаруға болады?

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Рефлексия

Рефлексия жасайды.

№10-11 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Өздік жұмыс
Оқу бағдарламасына сәйкес оқыту мақсаттары	Өткен тақырыптар бойынша өздік жұмыс жазады
Сабақтың мақсаты	Түрлі тапсырмалар. Сабақтар әзірелуі керек.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындығын тексереді.

Оқушылардың назарын сабаққа аудару үшін қысқаша әңгіме жүргізеді.

Сабақтың мақсаты мен міндеттерін түсіндіру.

Бүгінгі сабақта негізгі веб-бетті құру және фондық безендіруді үйренеміз.

Веб-парақтың құрылымын жасап, фонға түстер мен суреттер қосуды меңгереміз.

HTML және CSS көмегімен парақтың дизайнын жақсартамыз.

Алдын ала білімді белсендіру.

HTML құжатында қандай негізгі тегтер бар?

Веб-парақтың безендіруін қалай жақсартуға болады?

Фондық түстер мен суреттерді қосу үшін қандай тәсілдер қолданылады?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Өздік жұмысқа тапсырмалар

✅ 1. HTML құжатын құру
Тапсырма: Жаңа HTML құжатын жасап, оған өзіңіздің атыңызды, жасыңызды және сүйікті хоббиіңізді көрсететін бет жасаңыз.

✅ 2. Фондық түсті өзгерту
Тапсырма: Веб-бетіңіздің фонын ашық көк түске өзгертіңіз (background-color).

✅ 3. Фонға сурет қосу
Тапсырма: Веб-бетіңіздің артына қалаған суретті фон ретінде қойыңыз.

✅ 4. Қаріп пен мәтін түсін өзгерту
Тапсырма: Мәтіннің түсін қою қызылға өзгертіп, қаріп өлшемін 20px етіп орнатыңыз.

✅ 5. Тізім жасау
Тапсырма: Өз сүйікті кітаптарыңыздың немесе фильмдеріңіздің тізімін реттелген (<ol>) және реттелмеген (<ul>) түрде жасаңыз.

✅ 6. Гиперсілтеме қосу
Тапсырма: Веб-бетке өзіңіздің сүйікті сайтыңызға апаратын гиперсілтеме (<a>) қосыңыз.

✅ 7. Кесте жасау
Тапсырма: 3 қатар, 2 бағаннан тұратын кесте құрыңыз. Онда пән атаулары мен олардың мұғалімдерінің атын жазыңыз.

✅ 8. CSS арқылы веб-беттің стилін жақсарту
Тапсырма: Веб-бетіңіздің мәтіндерін ортасына орналастырып, парақтың шетінен 10px арақашықтық қойыңыз.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және

Сабақтың

соңы

5 мин

Сабақты қорытындылау сұрақтары

HTML веб-беті қалай құрылады?
Веб-беттің фонын қандай әдістермен өзгертуге болады?
CSS арқылы фондық суретті қалай орнатуға болады?
Мәтіннің түсін және қаріп өлшемін қалай өзгертуге болады?
Веб-беттің құрылымын жақсарту үшін қандай қосымша мүмкіндіктерді қолдануға болады?
Тізімдер мен кестелер веб-бетте қандай рөл атқарады?
Веб-бетті көркемдеу үшін қандай CSS стильдері маңызды?

Рефлексия жасайды.

№12-13 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Анимация
Оқу бағдарламасына сәйкес оқыту мақсаттары	Анимациялық файлдар, іске қосу жолы, іске қосу жолының диалогтық терезесі. Семинар:"веб-бетке анимациялық сызбалар мен жүгіру жолын қосу". Флэш-анимациямен жұмыс.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, сабаққа назар аударуды сұрайды.

Оқушылардың сабаққа дайындығын тексеру.

Сабақтың мақсатын түсіндіру:

Бүгінгі сабақта анимация ұғымымен танысамыз.

Веб-парақтарда анимацияны қолдану әдістерін үйренеміз.

HTML, CSS және JavaScript көмегімен қарапайым анимациялар жасап көреміз.

Алдын ала білімді белсендіру:

Анимация дегеніміз не?

Веб-парақтағы анимацияларды қалай жасауға болады?

Анимация пайдаланудың қандай артықшылықтары бар?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Анимация дегеніміз не?

Анимация – бұл объектілердің қозғалысын немесе өзгерісін көрсететін технология. Веб-дизайнда анимация пайдаланушының назарын аудару, интерактивтілік қосу, визуалды әсер ету мақсатында қолданылады.

Веб-парақта анимацияны қолдану әдістері

1️⃣ CSS арқылы анимация жасау
2️⃣ JavaScript көмегімен анимация қосу
3️⃣ GIF және SVG арқылы анимация жасау

1. CSS арқылы анимация жасау

CSS көмегімен қарапайым анимациялар жасауға болады.

Мысал: батырманың түсін өзгерту

<!DOCTYPE html>

<html>

<head>

<style>

@keyframes changeColor {

0% { background-color: red; }

50% { background-color: yellow; }

100% { background-color: green; }

}

.animated-button {

padding: 15px 30px;

font-size: 18px;

background-color: red;

color: white;

border: none;

cursor: pointer;

animation: changeColor 3s infinite;

}

</style>

</head>

<body>

<button class="animated-button">Басып көріңіз!</button>

</body>

</html>

2. JavaScript көмегімен анимация жасау

JavaScript арқылы анимацияларды динамикалық түрде басқара аламыз.

Мысал: объектіні қозғалту

<!DOCTYPE html>

<html>

<head>

<style>

#box {

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

}

</style>

</head>

<body>

<div id="box"></div>

<script>

let box = document.getElementById("box");

let position = 0;

function moveBox() {

if (position < 300) {

position += 5;

box.style.left = position + "px";

requestAnimationFrame(moveBox);

}

moveBox();

</script>

</body>

</html>

3. GIF және SVG арқылы анимация жасау

GIF – қысқа, қайталанатын анимацияларды жасау үшін қолданылады.
SVG (Scalable Vector Graphics) – векторлық анимацияларды веб-параққа енгізуге мүмкіндік береді.

SVG анимациясының мысалы

html

<svg width="200" height="200">

<circle cx="50" cy="50" r="20" fill="blue">

<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/>

</circle>

</svg>

Тапсырмалар

✅ 1. CSS арқылы анимация жасау.

Батырманың түсін біртіндеп өзгеретін етіп жасаңыз.

✅ 2. JavaScript көмегімен анимация қосу.

Квадраттың экранда оңға және солға қозғалуын қамтамасыз етіңіз.

✅ 3. Объектінің мөлшерін өзгерту.

CSS анимациясын қолданып, шеңбердің өлшемін үлкейіп-кішірейетін етіп жасаңыз.

✅ 4. Түссіздену анимациясын жасау.

JavaScript көмегімен элементтің біртіндеп көрініп және жоғалуын қамтамасыз етіңіз.

✅ 5. SVG анимациясын қолдану.

Шеңбердің түстерін өзгеретін етіп жасаңыз.

✅ 6. GIF анимациясын веб-бетке қосу.

Веб-параққа анимациялық GIF суретті орналастырыңыз.

✅ 7. Бірнеше элементті бірге анимациялау.

Екі объектінің бір уақытта қозғалуы немесе түсін өзгертуін көрсететін анимация жасаңыз.

✅ 8. Анимацияның орындалу уақытын басқару.

CSS немесе JavaScript көмегімен анимацияның жылдамдығын өзгертіп, баяу басталып, жылдам аяқталатын етіп реттеңіз.

Дескрипторлар

✅ Оқушы анимацияның негізгі түрлерін түсіндіре алады.
✅ CSS көмегімен қарапайым анимация жасай алады.
✅ JavaScript арқылы анимацияларды динамикалық түрде басқара алады.
✅ SVG және GIF көмегімен анимация жасай алады.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Сабақты қорытындылау сұрақтары

Веб-дизайнда анимация не үшін қажет?
CSS көмегімен қандай анимация жасауға болады?
JavaScript арқылы анимация жасаудың артықшылықтары қандай?
SVG анимациясын қалай қолдануға болады?
Анимацияны веб-парақта тым көп қолдану қандай мәселелер тудыруы мүмкін?

Рефлексия жасайды.

№ 14-15 сабақ

Бөлім:
Мұғалімніңаты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Графикалық редакторлармен танысу
Оқу бағдарламасына сәйкес оқыту мақсаттары	«ГИМП» графикалық редакторымен танысу . Графикалық объектілерді құру негіздерімен таныстыру
Сабақтың мақсаты	ГИМП графикалық редакторында жұмыс істеуді үйренеді.

Сабақтың барысы

Сабақтың

кезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындығын тексереді.

Оқушылардың назарын сабаққа аудару мақсатында қысқаша әңгіме жүргізеді.

Сабақтың мақсаты мен міндеттерін түсіндіру:

GIMP графикалық редакторымен танысу.

Графикалық объектілерді құру негіздерін үйрену

Редактордың негізгі құралдарын зерттеу және қолдану.

Алдын ала білімді белсендіру:

Графикалық редактор дегеніміз не?

Графикалық редакторлардың қандай түрлері бар?

Сурет салу немесе өңдеуде қандай бағдарламаларды қолдандыңыз?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Графикалық редактор дегеніміз не?

Графикалық редактор – бұл суреттер мен графикалық объектілерді жасау, өңдеу, өзгертуге арналған бағдарламалық құрал.

Графикалық редакторлар екі түрге бөлінеді:

Растрлық (Bitmap) графика редакторлары:

Пиксельдермен жұмыс істейді.

Үлкейткен кезде сапасы төмендейді.

Мысалдар: GIMP, Photoshop, Paint.

Векторлық (Vector) графика редакторлары:

Формулалар мен координаттарға негізделген.

Үлкейткен кезде сапасы өзгермейді.

Мысалдар: CorelDRAW, Inkscape, Adobe Illustrator.

GIMP графикалық редакторы

GIMP (GNU Image Manipulation Program) – ашық кодты, тегін графикалық редактор, ол суреттерді өңдеу, монтаждау, дизайн жасау үшін қолданылады.

GIMP бағдарламасының мүмкіндіктері

✅ Кескіндерді жасау және өңдеу
✅ Қабаттармен (Layers) жұмыс істеу
✅ Фильтрлер мен эффектілерді қолдану
✅ Суреттерді форматтау және түстерін өзгерту
✅ Веб-дизайн элементтерін жасау

GIMP интерфейсі және негізгі құралдар

Меню жолағы – негізгі функциялар орналасқан аймақ.
Құралдар тақтасы – қарындаш, өшіргіш, градиент, лассо, текст құралдары.
Қабаттар панелі (Layers) – кескіндерді бірнеше қабатпен өңдеуге мүмкіндік береді.
Түс палитрасы – түстерді таңдау және градиенттер жасау.

Графикалық объектілерді құру негіздері

Жаңа кескін құру: File → New
Қарындашпен сурет салу: Pencil Tool
Өшіргіш қолдану: Eraser Tool
Фигуралар салу: Rectangle, Ellipse Tool
Түстермен жұмыс істеу: Paint Bucket Tool
Қабаттарды пайдалану: Layer → New Layer

Тапсырмалар

✅ 1. GIMP интерфейсімен танысу.

Бағдарламаны ашып, оның негізгі элементтерін анықтаңыз.

✅ 2. Жаңа сурет құру.

GIMP-те жаңа құжат ашып, фондық түсті таңдаңыз.

✅ 3. Қарапайым фигураларды салу.

Тік төртбұрыш, шеңбер және сызықтар салыңыз.

✅ 4. Градиент құру.

Градиент құралын пайдаланып, екі түсті бір-бірімен араластырыңыз.

✅ 5. Қабаттармен жұмыс істеу.

Бірнеше қабат қосып, әр қабатқа жеке элементтер орналастырыңыз.

✅ 6. Өшіргіш және қылқалам қолдану.

Өшіргіш пен әртүрлі қылқалам түрлерін қолданып, суретті өңдеңіз.

✅ 7. Мәтін қосу.

Суретке мәтін қосып, оның қаріпін, түсін өзгертіңіз.

✅ 8. Файлды сақтау.

Дайын жұмысты PNG немесе JPEG форматында сақтаңыз.

Дескрипторлар

✅ Оқушы GIMP интерфейсін сипаттай алады.
✅ Жаңа сурет құрып, түрлі құралдарды қолданады.
✅ Фигуралар мен қабаттармен жұмыс істей алады.
✅ Өшіргіш, қылқалам және мәтін құралдарын пайдаланады.
✅ Градиент және түстерді өзгерту әдістерін қолданады.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Сабақты қорытындылау сұрақтары

Графикалық редактор дегеніміз не?
GIMP бағдарламасының қандай мүмкіндіктері бар?
Растрлық және векторлық графика айырмашылығы қандай?
Графикалық объектілерді қалай жасауға болады?
Қабаттармен жұмыс істеудің қандай артықшылықтары бар?
Градиент пен түс палитрасын қалай қолдануға болады?
Файлды қандай форматта сақтау керек?

Рефлексия жасайды.

№16-17 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Графикалық редакторлар арқылы веб-компоненттерді құру
Оқу бағдарламасына сәйкес оқыту мақсаттары	Сайт үшін сызбалар мен басқа графикалық нысандарды жасау. Сайттың логотипін, интерактивті түймелерді жасаңыз және оларды тақырып бетіне орналастыру.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтың кезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа қызығушылығын арттыру мақсатында қысқаша сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Графикалық редакторлар көмегімен веб-компоненттерді жасау жолдарын үйрену.

GIMP және Adobe Photoshop бағдарламаларын пайдалана отырып, навигациялық батырмалар, белгішелер (иконкалар), баннерлер жасау.

Дайын графикалық элементтерді веб-бетке орналастыру.

Алдын ала білімді белсендіру:

Веб-компонент дегеніміз не?

Графикалық редакторларды қандай мақсатта қолдануға болады?

Веб-дизайнда қандай элементтер жиі қолданылады?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Веб-компонент дегеніміз не?

Веб-компонент – бұл веб-бетте қолданылатын графикалық элемент немесе интерактивті бөлік. Веб-компоненттерге батырмалар (buttons), белгішелер (icons), баннерлер (banners), фондық элементтер және интерфейс элементтері жатады.

Веб-компоненттерді жасауға арналған графикалық редакторлар

✅ GIMP – ашық кодты тегін графикалық редактор.
✅ Adobe Photoshop – кәсіби деңгейдегі графикалық өңдеу құралы.
✅ Figma – веб-дизайн жасауға арналған онлайн платформа.

Графикалық редакторларда веб-компонент жасау қадамдары

1️⃣ Жаңа құжат құру:

GIMP немесе Photoshop-ты ашу.
Файл өлшемін веб-дизайнға сәйкес таңдау (мысалы, 1920x1080 px).

2️⃣ Батырма (button) жасау:

Тікбұрышты фигура құрып, оған түстер мен көлеңкелер қосу.
Мәтін енгізіп, оны стильдеу.
Батырманы PNG форматында сақтау.

3️⃣ Белгіше (icon) жасау:

Векторлық фигураларды пайдаланып, шағын өлшемді белгішелер салу.
Қарапайым және минималистік стильді ұстану.
SVG немесе PNG форматында сақтау.

4️⃣ Баннер жасау:

Жоғары сапалы суретке мәтін мен эффектілер қосу.
Градиент және текстура элементтерін енгізу.
JPEG немесе PNG форматында сақтау.

5️⃣ Графикалық элементті веб-бетке орналастыру:

<img> тегін қолдану.
CSS арқылы компонентке стиль беру.

Тапсырмалар

✅ 1. Жаңа құжат құру.

Графикалық редакторда жаңа веб-дизайнға сәйкес құжат жасаңыз.

✅ 2. Навигациялық батырма жасау.

Батырма құрып, оған көлеңке және түстер қосыңыз.

✅ 3. Белгіше (иконка) жасау.

Веб-сайтта қолдануға болатын 3 белгіше жасаңыз.

✅ 4. Баннер жасау.

Веб-сайтқа арналған жарнамалық баннер әзірлеңіз.

✅ 5. Дайын элементтерді PNG және SVG форматтарында сақтау.

Файлдарды веб-форматқа келтіріңіз.

✅ 6. HTML және CSS көмегімен веб-бетке орналастыру.

Жасалған графикалық компоненттерді HTML бетіне енгізіңіз.

✅ 7. CSS арқылы дизайн жақсарту.

Батырмаларды анимациямен толықтырыңыз.

✅ 8. Фондық элемент жасау.

Веб-бетке арналған фондық текстура әзірлеңіз.

Дескрипторлар

✅ Оқушы веб-компонент түсінігін түсіндіреді.
✅ Графикалық редакторда батырма, белгіше, баннер жасай алады.
✅ Дизайн элементтерін PNG және SVG форматтарында сақтайды.
✅ Дайын элементтерді HTML және CSS арқылы веб-бетке қосады.
✅ Веб-бетті безендіру үшін графикалық стильдерді қолданады.

6️⃣ Сабақ соңында орындалған жұмысты мұғалімге көрсетеді және кері байланыс алады

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың

соңы

5 мин

Сабақты қорытындылау сұрақтары

Веб-компонент дегеніміз не?
Графикалық редакторлар веб-дизайнда қандай рөл атқарады?
Навигациялық батырманы қалай жасауға болады?
Белгішелерді қай форматта сақтау керек?
Веб-сайтқа баннерлерді қалай орналастыруға болады?
PNG мен SVG форматтарының айырмашылығы қандай?
Веб-дизайнда анимация мен графиканың маңызы қандай?

Рефлексия жасайды.

№18-19 Сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Қазіргі сайттардың түрлері
Оқу бағдарламасына сәйкес оқыту мақсаттары	Қазіргі заманғы сайттардың түрлері, флэш-сайттар. Құрылымдар мен бөлшектер, Web элементтерімен танысу.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтың

кезеңі/ уақыт

Педагогтің әрекеті

Оқушының әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа қызығушылығын арттыру мақсатында сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Қазіргі веб-сайттардың негізгі түрлерімен танысу.

Сайттардың ерекшеліктері мен олардың қолданылу салаларын анықтау.

Сайттарды құру технологияларына қысқаша шолу жасау.

Алдын ала білімді белсендіру:

Веб-сайт дегеніміз не?

Қандай сайттарды білесіздер?

Сайттар не үшін қажет?

«Ауызша мадақ-тау» әдісі

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

РЕФЛЕКСИЯ

Веб-сайт дегеніміз не?

Веб-сайт – бұл интернетте орналасқан веб-беттер жиынтығы. Ол ақпарат тарату, қызмет көрсету, сауда жасау және қарым-қатынас орнату үшін қолданылады.

Қазіргі веб-сайттардың негізгі түрлері

1️⃣ Ақпараттық сайттар

Газеттер мен журналдардың онлайн-нұсқалары.
Ғылыми және энциклопедиялық сайттар.
Мысалдар: Wikipedia, BBC News, National Geographic.

2️⃣ Корпоративтік сайттар

Компаниялар мен ұйымдардың ресми беттері.
Қызметтер мен байланыс мәліметтері беріледі.
Мысалдар: Microsoft, Samsung, KazMunayGas.

3️⃣ Электрондық коммерция сайттары (E-commerce)

Тауарлар мен қызметтерді сатуға арналған платформалар.
Онлайн төлем жүйелерімен біріктірілген.
Мысалдар: Amazon, Kaspi.kz, AliExpress.

4️⃣ Әлеуметтік желілер

Адамдар арасында байланыс орнатуға мүмкіндік береді.
Мәтін, фото, видео жариялау мүмкіндігі бар.
Мысалдар: Facebook, Instagram, TikTok.

5️⃣ Блогтар мен форумдар

Жеке пікірлер мен мақалалар жариялауға арналған сайттар.
Қолданушылар арасында пікір алмасу орындары.
Мысалдар: Medium, Reddit, KzForum.

6️⃣ Видео және мультимедиялық платформалар

Видео, музыка және басқа мультимедиялық контент таратуға арналған.
Мысалдар: YouTube, Spotify, Netflix.

7️⃣ Онлайн білім беру сайттары

Курстар мен вебинарлар өткізуге арналған платформалар.
Тестілеу және сертификат беру мүмкіндігі бар.
Мысалдар: Coursera, Khan Academy, OpenAI Learn.

8️⃣ Портфолио және жеке сайттар

Дизайнерлер, фотографтар, программистер үшін жеке жұмыстарын көрсетуге арналған.
Мысалдар: Dribbble, Behance, GitHub Pages.

Тапсырмалар

✅ 1. Веб-сайт түрлерін сәйкестендіру.

Әр сайттың түрін сипаттамасымен сәйкестендіріңіз.

✅ 2. Ақпараттық сайттар талдау.

Екі түрлі жаңалық сайттарын таңдап, олардың мазмұны мен құрылымын талдаңыз.

✅ 3. Корпоративтік сайтты зерттеу.

Кез келген компанияның ресми сайтын қарап, оның құрылымы мен функцияларын сипаттаңыз.

✅ 4. Электрондық коммерция сайттарын салыстыру.

Kaspi.kz және Amazon сайттарын салыстырып, олардың ерекшеліктерін анықтаңыз.

✅ 5. Әлеуметтік желілер мен форумдарды талдау.

Facebook пен Reddit платформаларын салыстырып, олардың қандай айырмашылықтары бар екенін сипаттаңыз.

✅ 6. Онлайн білім беру платформаларымен танысу.

Coursera немесе Khan Academy сайттарына кіріп, олардың ұсынатын мүмкіндіктерін сипаттаңыз.

✅ 7. Портфолио сайт жасау (теориялық).

Егер сіз веб-дизайнер немесе фотограф болсаңыз, қандай сайт жасағыңыз келетінін сипаттаңыз.

✅ 8. Жаңа сайт түрін ұсыну.

Болашақта қандай жаңа сайт түрлері пайда болуы мүмкін деп ойлайсыз?

Дескрипторлар

✅ Оқушы қазіргі сайттардың түрлерін сипаттай алады.
✅ Ақпараттық, корпоративтік және коммерциялық сайттардың айырмашылығын түсінеді.
✅ Веб-сайт құрылымын талдай алады.
✅ Әлеуметтік желілер мен форумдарды салыстыра алады.
✅ Онлайн білім беру сайттарының мүмкіндіктерін сипаттай алады.

Сабақты қорытындылау сұрақтары

Қазіргі сайттардың қандай түрлері бар?
Ақпараттық сайт пен корпоративтік сайттың айырмашылығы қандай?
Электрондық коммерция сайттары қалай жұмыс істейді?
Әлеуметтік желілердің қоғамға әсері қандай?
Онлайн білім беру платформаларының маңызы қандай?
Веб-сайттар қандай технологиялармен жасалады?
Болашақта қандай жаңа веб-сайттар пайда болуы мүмкін

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

№20-21сабақ

Бөлім:
Мұғалімніңаты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Мәтінді пішімдеу және графиканы орналастыру
Оқу бағдарламасына сәйкес оқыту мақсаттары	Абзац, мәтін тақырыптары, қаріпті басқару, тізімдер, бөлу жолақтары, графикалық кескіндерді кірістіру, фондық графикамен танысу
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтың

кезеңі/ уақыт

Педагогтің әрекеті

Оқушының

әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа назарын аудару үшін қысқаша әңгіме жүргізеді.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Мәтінді пішімдеудің негізгі әдістерімен танысу.

Веб-бетте графикалық элементтерді дұрыс орналастыруды үйрену.

HTML және CSS көмегімен мәтінді стильдеу және суреттерді дұрыс қою жолдарын қарастыру.

Алдын ала білімді белсендіру:

HTML-де мәтінмен жұмыс істеу үшін қандай тегтер қолданылады?

Графикалық файлдар қандай форматтарда болады?

Веб-бетте мәтін мен суреттерді үйлесімді орналастырудың маңызы қандай?

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

Қысқаша лекция

1. HTML мәтінді пішімдеу тәсілдері

HTML-де мәтінге әртүрлі стильдер беру үшін арнайы тегтер қолданылады.

? Негізгі мәтін пішімдеу тегтері:

<b> (қалың мәтін) → Жай мәтін → <b>Жай мәтін</b>
<i> (курсив) → Мысал → <i>Мысал</i>
<u> (астын сызу) → <u>Сызықпен белгіленген</u> → <u>Сызықпен белгіленген</u>
<p> (абзац) → Жаңа жолдан басталады.
<h1> ... <h6> (тақырыптар) → H1 ең үлкен, H6 ең кіші
<span> – мәтіннің бөлігін пішімдеу үшін.
<div> – мәтіндік блок жасау үшін.

? CSS көмегімен стиль беру:

css

p {

font-size: 18px;

color: blue;

text-align: center;

}

2. Веб-бетке графиканы орналастыру

Графиканы веб-бетке қосу үшін <img> тегі қолданылады.

? Негізгі параметрлері:

<img src="image.jpg" alt="Сурет сипаттамасы" width="300" height="200">

✅ src – суреттің мекенжайы
✅ alt – сурет жүктелмесе, көрсетілетін мәтін
✅ width / height – өлшемдерін өзгерту

3. Мәтін мен суретті үйлестіру

Кейде сурет мәтіннің жанында тұруы қажет. Оны жасау үшін CSS арқылы float мәнін қолдануға болады:

img {

float: left;

margin-right: 10px;

}

Тапсырмалар

✅ 1. HTML мәтінді пішімдеу.

Берілген мәтінді <b>, <i>, <u>, <p> тегтерімен безендіріңіз.

✅ 2. CSS көмегімен стиль беру.

Мәтіннің қаріп өлшемін 20px, түсін жасыл, ортасына орналастырыңыз.

✅ 3. Суретті веб-бетке қосу.

Өз сүйікті суретіңізді веб-бетке енгізіңіз.

✅ 4. Суретке балама мәтін беру.

Сурет жүктелмесе, көрінетін alt мәтінін жазыңыз.

✅ 5. Суретті сол жаққа орналастыру.

CSS арқылы суретті солға, ал мәтінді оң жаққа орналастырыңыз.

✅ 6. Сурет өлшемін өзгерту.

Width параметрі арқылы суреттің өлшемін 300px, биіктігін 200px етіп орнатыңыз.

✅ 7. Мәтін мен суретті үйлестіру.

Бір веб-бетке сурет және мәтін қосып, стильдеңіз.

✅ 8. Графикалық файл түрлерін зерттеу.

PNG, JPEG, GIF форматтарының айырмашылығын сипаттаңыз.

Дескрипторлар

✅ Оқушы HTML көмегімен мәтінді пішімдей алады.
✅ CSS арқылы стиль бере алады.
✅ Суреттерді веб-бетке қоса алады.
✅ Мәтін мен суретті үйлестіреді.
✅ Графикалық файлдардың түрлерін сипаттай алады.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Сабақты қорытындылау сұрақтары

HTML мәтінді пішімдеуде қандай тегтер қолданылады?
Веб-бетке суретті қалай орналастыруға болады?
Сурет өлшемін өзгерту үшін қандай атрибуттар қолданылады?
CSS көмегімен мәтінді безендірудің қандай әдістері бар?
alt атрибуты не үшін қажет?
PNG, JPEG және GIF файлдарының айырмашылығы қандай?
Мәтін мен суретті үйлестіру үшін қандай CSS қасиеттері қолданылады?

№22-23 сабақ

Бөлім:
Мұғалімніңаты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтыңтақырыбы	Гиперсілтемелермен жұмыс.
Оқу бағдарламасына сәйкес оқыту мақсаттары	Мәтіндік сілтемелер, графикалық сілтемелер, навигациямен жұмыс
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының

әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа назарын аудару мақсатында қысқаша сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Гиперсілтемелердің қызметі мен түрлерін түсіну.

HTML көмегімен сілтемелер жасау.

CSS арқылы сілтемелердің сыртқы көрінісін өзгерту.

Ішкі және сыртқы гиперсілтемелермен жұмыс істеу.

Алдын ала білімді белсендіру:

Гиперсілтеме дегеніміз не?

Веб-сайттарда гиперсілтемелер қандай рөл атқарады?

Гиперсілтемені басқан кезде не болады?

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

1. Гиперсілтеме дегеніміз не?

Гиперсілтеме (Hyperlink) – бұл бір веб-бетті екіншісіне байланыстыратын элемент. Ол мәтінге, суретке немесе кез келген веб-объектіге орналастырылуы мүмкін.

2. HTML гиперсілтемелерін жасау

HTML-де гиперсілтеме <a> (anchor) тегі арқылы жасалады.

Негізгі синтаксис:

<a ="https://www.google.com">Google-ға өту</a>

✅ – сілтеменің мекенжайы
✅ "Google-ға өту" – сілтеменің мәтіні

3. Ішкі және сыртқы сілтемелер

1️⃣ Сыртқы сілтемелер:

Басқа веб-сайтқа апаратын сілтемелер.

Мысалы:

<a ="https://www.bbc.com">BBC сайтына өту</a>

2️⃣ Ішкі сілтемелер:

Бір сайттың ішіндегі беттерді байланыстырады.

Мысалы, index.html беттен about.html бетке өту:

<a ="about.html">Біз туралы</a>

3️⃣ Электрондық поштаға сілтеме:

<a ="mailto:example@email.com">Бізге хат жазыңыз</a>

4. Сілтемені жаңа бетте ашу

Сілтемені жаңа қойындыда ашу үшін target="_blank" атрибутын қолданамыз:

<a ="https://www.wikipedia.org" target="_blank">Wikipedia</a>

5. Сілтеме ретінде сурет қолдану

Кез келген суретті гиперсілтеме ретінде қолдануға болады:

<a ="https://www.youtube.com">

<img src="youtube-logo.png" alt="YouTube" width="100">

</a>

6. CSS арқылы сілтемелерді стильдеу

Гиперсілтеменің көрінісін жақсарту үшін CSS пайдалана аламыз:

a {

color: blue;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: red;

text-decoration: underline;

}

✅ color – мәтіннің түсін өзгерту
✅ text-decoration – сілтеменің асты сызылғанын басқару
✅ :hover – сілтеменің үстіне курсорды апарғанда болатын өзгерістер

Тапсырмалар

✅ 1. HTML гиперсілтемесін жасау.

Веб-бетке кез келген сыртқы сайтқа апаратын сілтеме қосыңыз.

✅ 2. Ішкі гиперсілтеме жасау.

Бір HTML беттен екінші бетке өтетін сілтеме жасаңыз.

✅ 3. Электрондық пошта сілтемесін жасау.

Веб-бетке электрондық поштаға хат жіберетін сілтеме қосыңыз.

✅ 4. Суретке сілтеме беру.

Кез келген суретті гиперсілтемеге айналдырыңыз.

✅ 5. Сілтемені жаңа бетте ашу.

target="_blank" қолданып, сілтемені жаңа қойындыда ашылатындай етіңіз.

✅ 6. CSS көмегімен сілтемелерді стильдеу.

Сілтеменің түсін өзгертіп, hover әсерін қосыңыз.

✅ 7. Белгілі бір бет ішіндегі бөлімге өту.

Бір беттің ішінде қажетті бөлімге сілтеме жасау (id атрибутын қолдану).

✅ 8. Гиперсілтемелердің қолданылу аясын зерттеу.

Қандай веб-сайттарда сілтемелердің ерекше түрлері қолданылады?

Дескрипторлар

✅ Оқушы гиперсілтемелердің негізгі түрлерін біледі.
✅ HTML көмегімен сілтемелер жасай алады.
✅ Ішкі және сыртқы гиперсілтемелермен жұмыс істей алады.
✅ CSS арқылы сілтемелердің стильдерін өзгерте алады.
✅ Гиперсілтемені суретке орналастыра алады.

Сабақты қорытындылау сұрақтары

Гиперсілтемелердің негізгі түрлері қандай?
HTML-де гиперсілтеме жасау үшін қандай тег қолданылады?
target="_blank" атрибуты не үшін қолданылады?
Сілтемені суретке қалай қосуға болады?
Ішкі гиперсілтеме қалай жұмыс істейді?
Электрондық поштаға сілтеме жасау үшін қандай атрибут қолданылады?
CSS арқылы сілтеменің көрінісін қалай өзгертуге болады?

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Рефлексия

Рефлексия жасайды.

Сабақты қаншалықты түсінгендіктерін қорытындылау мақсатында аттары жазылған стикерлерді жетістік баспалдағының тиісті деңгейіне жабыстырады.

Оқушылар сабақ барысында берілген критерийлер бойынша бағаланады

№24-25 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Сайт беттерін құру
Оқу бағдарламасына сәйкес оқыту мақсаттары	Бет-сілтеме картасы. Кесте бетімен жұмыс жасауды үйрету.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының

әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа назарын аудару үшін қысқаша сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Сайт беттерін құрудың негізгі қағидаларымен танысу.

HTML және CSS көмегімен веб-бет құруды үйрену.

Веб-бет құрылымын ұйымдастыру.

Ішкі және сыртқы байланыстарды орнату.

Алдын ала білімді белсендіру:

Веб-сайттың негізгі беттері қандай?

HTML және CSS көмегімен веб-бет жасау үшін қандай қадамдар керек?

Веб-беттің құрылымы қандай элементтерден тұрады?

ҚБ

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

1. Веб-сайт дегеніміз не?

Веб-сайт – бұл бірнеше веб-беттерден тұратын интернетте орналастырылған ресурс. Әрбір сайттың негізгі беті (homepage) және қосымша беттері болады.

2. Веб-бет құрылымы

Веб-бет HTML және CSS арқылы құрылады. Негізгі құрылым келесідей болады:

<!DOCTYPE html>

<html>

<head>

<title>Менің сайтым</title>

<meta charset="UTF-8">

<link rel="stylesheet" ="style.css">

</head>

<body>

<header>

<h1>Сайттың тақырыбы</h1>

</header>

<nav>

<ul>

<li><a ="index.html">Басты бет</a></li>

<li><a ="about.html">Біз туралы</a></li>

<li><a ="contact.html">Байланыс</a></li>

</ul>

</nav>

<section>

<h2>Қош келдіңіз!</h2>

<p>Бұл менің алғашқы веб-сайтым.</p>

</section>

<footer>

</footer>

</body>

</html>

3. Сайттың негізгі беттері

1️⃣ Басты бет (index.html) – сайттың негізгі беті, қолданушы алғаш кірген кезде көретін бет.
2️⃣ "Біз туралы" беті (about.html) – сайт немесе компания туралы ақпарат.

3️⃣ "Байланыс" беті (contact.html) – байланыс ақпараттары мен формалары.
4️⃣ "Қызметтер" беті (services.html) – ұсынатын қызметтер немесе өнімдер.
5️⃣ "Галерея" беті (gallery.html) – суреттер мен мультимедианы көрсету.

4. Веб-беттер арасындағы байланыс

HTML-де гиперсілтемелер арқылы сайттың беттерін байланыстыруға болады:

<a ="about.html">Біз туралы</a>

5. CSS көмегімен бет дизайнын жақсарту

CSS стилін қосу арқылы веб-бетті әдемілеуге болады:

css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

}

header {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

}

nav ul {

list-style-type: none;

padding: 0;

}

nav ul li {

display: inline;

margin-right: 20px;

}

nav ul li a {

text-decoration: none;

color: #333;

}

Тапсырмалар

✅ 1. HTML құрылымын жасау.

Жаңа HTML құжат жасап, <header>, <nav>, <section>, <footer> элементтерін қосыңыз.

✅ 2. Веб-сайттың бірнеше бетін жасау.

"index.html", "about.html", "contact.html" беттерін құрып, олардың арасын гиперсілтемелермен байланыстырыңыз.

✅ 3. CSS файл қосу.

style.css файлын жасап, беттің түсін өзгерту, қаріп стилін таңдау, батырмаларға дизайн беру.

✅ 4. Меню жасау.

Веб-сайттың барлық беттерінде навигациялық мәзір (navigation menu) қосыңыз.

✅ 5. Суреттер қосу.

<img> тегі арқылы беттерге суреттер орналастырыңыз.

✅ 6. "Байланыс" бетіне форма қосу.

HTML <form> тегін пайдаланып, аты, электрондық пошта, хабарлама жолдарын енгізіңіз.

✅ 7. CSS арқылы мобильді нұсқа жасау.

@media сұранысын пайдаланып, веб-бетті телефонға бейімдеу.

✅ 8. Веб-бетті браузерде тексеру.

Барлық беттердің дұрыс жұмыс істейтінін тексеріңіз.

Дескрипторлар

✅ Оқушы HTML көмегімен веб-беттің құрылымын жасайды.
✅ Сайттың бірнеше бетін байланыстырады.
✅ CSS стилін қосып, дизайнын жақсартады.
✅ Меню және гиперсілтемелер арқылы сайттың ішкі беттерін жасайды.
✅ Формалар мен суреттер қосады.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Сабақты қорытындылау сұрақтары

Веб-сайттың негізгі беттері қандай?
HTML-де сайт беттерін қалай байланыстыруға болады?
CSS көмегімен веб-бетті қалай стильдеуге болады?
Навигациялық мәзір қандай рөл атқарады?
"Байланыс" бетінде форма қалай жасалады?
Веб-бетті мобильді құрылғыларға қалай бейімдеуге болады?
Браузерде веб-бетті тексерудің қандай жолдары бар?

№ 26- 27 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Дизайн және безендіру
Оқу бағдарламасына сәйкес оқыту мақсаттары	«Сайт дизайны» .Сайт беттерін рәсімдеу және толтырумен танысады.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының

әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа назарын аудару үшін қысқаша сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Дизайн және безендірудің негізгі қағидаларымен танысу.

Веб-сайттың визуалды стилін жақсарту әдістерін үйрену.

HTML және CSS көмегімен веб-бетті безендіру.

Алдын ала білімді белсендіру:

Дизайн және безендіру веб-сайтта қандай рөл атқарады?

Жақсы безендірілген сайттың ерекшеліктері қандай?

CSS қандай мақсатта қолданылады?

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

1. Дизайн дегеніміз не?

Дизайн – пайдаланушыларға ыңғайлы, эстетикалық жағымды веб-сайт жасау процесі. Ол сайттың құрылымын, түстерін, шрифтерін және интерактивті элементтерін қамтиды.

2. Веб-сайт дизайнындағы негізгі қағидалар

✅ Қарапайымдылық (Simplicity) – қолданушыларға түсінікті интерфейс жасау.
✅ Оқылымдылық (Readability) – қаріптер мен мәтіндерді ыңғайлы орналастыру.
✅ Түс үйлесімділігі (Color Harmony) – көзге жайлы түстерді таңдау.
✅ Қолданушы тәжірибесі (User Experience, UX) – сайтты ыңғайлы ету.
✅ Навигацияның қарапайымдылығы – сайт беттері арасында оңай ауысу.

3. CSS көмегімен веб-бетті безендіру

CSS – веб-беттің көрінісін стильдеу үшін қолданылады.

Негізгі CSS стильдері:

css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

margin: 0;

padding: 0;

}

h1 {

color: #007bff;

text-align: center;

}

p {

font-size: 18px;

line-height: 1.6;

}

button {

background-color: #28a745;

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

}

button:hover {

background-color: #218838;

}

✅ Фондық түс, қаріп, өлшем және батырма стильдері CSS арқылы өзгертіледі.

4. Дизайн элементтері

1️⃣ Түстер (Colors):

Веб-сайтқа сәйкес келетін түстерді таңдау маңызды.
Жылы түстер (қызыл, сары, қызғылт сары) – энергия мен динамиканы білдіреді.
Суық түстер (көк, жасыл, күлгін) – сенімділік пен тұрақтылықты көрсетеді.
CSS мысалы:

body { background-color: #f0f0f0; }

h1 { color: #007bff; }

2️⃣ Қаріптер (Fonts):

Оқылымды қаріп таңдау қажет (Arial, Roboto, Open Sans).

CSS көмегімен қаріп өзгерту:

p { font-family: 'Arial', sans-serif; font-size: 18px; }

3️⃣ Бос кеңістік (White Space):

Мәтіндер мен элементтер арасында жеткілікті арақашықтық болуы керек.

4️⃣ Суреттер мен графика:

Сапалы және жеңіл суреттер қолдану ұсынылады.
HTML код арқылы сурет қосу:

<img src="design.jpg" alt="Дизайн үлгісі" width="400">

5️⃣ Батырмалар (Buttons):

Пайдаланушыларға оңай түсінікті интерактивті батырмалар жасау.
CSS стилі:

.btn {

background-color: #ff4500;

color: white;

padding: 10px 20px;

text-decoration: none;

}

Тапсырмалар

✅ 1. Веб-бетке фондық түс қосу.

CSS көмегімен сайттың фондық түсін өзгертіңіз.

✅ 2. Қаріп стилін таңдау.

Веб-беттегі мәтіннің қаріпін Arial немесе Roboto етіп өзгертіңіз.

✅ 3. Батырма дизайнын жасау.

CSS көмегімен әдемі батырма жасаңыз.

✅ 4. Веб-бетке сурет қосу.

HTML арқылы сурет орналастырыңыз және оның өлшемін CSS арқылы реттеңіз.

✅ 5. Түстер үйлесімін жасау.

Веб-бетке сәйкес келетін түстерді анықтап, қолдану.

✅ 6. Тақырыптарды стильдеу.

<h1>, <h2>, <p> стильдерін өзгертіңіз.

✅ 7. Навигация мәзірін жасау.

CSS көмегімен қарапайым мәзір әзірлеңіз.

✅ 8. Сайттың жалпы стилін аяқтау.

Веб-бетті безендіріп, браузерде тексеріңіз.

Дескрипторлар

✅ Оқушы дизайн және безендіру қағидаларын түсінеді.
✅ CSS көмегімен сайттың сыртқы көрінісін өзгертеді.
✅ Батырмалар мен мәтін стилін өзгертеді.
✅ Веб-бетке сурет пен түстер қосады.
✅ Навигация мәзірін жасап, стильдейді.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Сабақты қорытындылау сұрақтары

Дизайн дегеніміз не және оның веб-сайттағы рөлі қандай?
Веб-бетке CSS көмегімен фондық түс қалай беріледі?
Жақсы безендірілген сайттың ерекшеліктері қандай?
Қаріп пен түстерді таңдау неге маңызды?
Батырмаларды қалай стильдеуге болады?
Навигация мәзірін жасау үшін қандай әдістер қолданылады?
Дизайнды жақсарту үшін қандай құралдар пайдалануға болады?

№ 28-29 сабақ

Бөлім:
Мұғалімнің аты-жөні
Күні:
Сынып:	Қатысушылар саны:	Қатыспағандар саны:
Сабақтың тақырыбы	Фреймдер
Оқу бағдарламасына сәйкес оқыту мақсаттары	Фреймдерді толтыру және ресімдеумен танысады.
Сабақтың мақсаты	Ұсынылған жұмыспен танысады. Берліген тапсырманы орындайды.

Сабақтың барысы

Сабақтыңкезеңі/ уақыт

Педагогтің әрекеті

Оқушының

әрекеті

Бағалау

Ресурстар

Сабақтың басы

5 минут

Ұйымдастыру кезеңі

Амандасу және оқушыларды түгендеу.

Мұғалім оқушылармен амандасып, олардың сабаққа дайындықтарын тексереді.

Оқушылардың сабаққа назарын аудару үшін қысқаша сұрақтар қояды.

Сабақтың мақсаты мен міндеттерін түсіндіру:

Фреймдер (Frames) ұғымымен танысу.

Фреймдерді пайдалану арқылы веб-бетті ұйымдастыруды үйрену.

Фреймдерді HTML көмегімен құру және қолдану.

Алдын ала білімді белсендіру:

Веб-бетте ақпараттарды бөліктерге бөлудің қандай жолдары бар?

Фреймдерді қолданудың қандай артықшылықтары бар?

Қазіргі веб-дизайнда фреймдерді қолдану орынды ма?

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

Сабақтың ортасы

30мин

1. Фрейм дегеніміз не?

Фреймдер – бұл бір веб-парақ ішінде бірнеше бөлек веб-беттерді көрсетуге мүмкіндік беретін HTML құрылымы. Фреймдерді қолдану арқылы веб-сайттың навигациясын жақсартуға, бет бөлімдерін бөлек жүктеуге және әртүрлі ақпаратты бір экранда көрсетуге болады.

Ескерту: Қазіргі заманғы веб-дизайнда фреймдер сирек қолданылады, өйткені олар мобильді құрылғыларда ыңғайсыз және іздеу жүйелерінде индексациялау қиын. Бірақ оларды түсіну – ескі веб-парақтармен жұмыс істегенде маңызды.

2. Фреймдерді жасау

Фреймдерді пайдалану үшін <frameset>, <frame> және <noframes> тегтері қолданылады.

Негізгі құрылым:

<!DOCTYPE html>

<html>

<head>

<title>Фреймдер мысалы</title>

</head>

<frameset cols="30%, 70%">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

✅ Бұл код екі бөлікке бөлінген веб-бетті жасайды:

Сол жақ (30%) – мәзірі бар бөлік (menu.html).
Оң жақ (70%) – негізгі мазмұн көрсетілетін бөлік (content.html).

3. Фреймдердің түрлері

1️⃣ Бағандарға бөлінген фреймдер (Cols – Columns)

Веб-бетті тік бағандарға бөледі.
Мысалы:

html

<frameset cols="25%, 75%">

<frame src="navigation.html">

<frame src="main.html">

</frameset>

2️⃣ Жолдарға бөлінген фреймдер (Rows)

Веб-бетті көлденең жолдарға бөледі.
Мысалы:

<frameset rows="20%, 80%">

<frame src="header.html">

<frame src="body.html">

</frameset>

3️⃣ Аралас фреймдер (Nested Framesets)

Фреймдерді ішкі фреймдер ретінде орналастыру.
Мысалы:

<frameset rows="20%, 80%">

<frame src="top.html">

<frameset cols="30%, 70%">

<frame src="menu.html">

<frame src="content.html">

</frameset>

4. Фрейм параметрлері

Параметр

Сипаттамасы

src

Фреймге жүктелетін беттің сілтемесі

name

Фреймнің атауы (сілтемелер арқылы басқару үшін)

scrolling

yes, no, auto – айналдыру жолағын көрсету немесе жасыру

noresize

Фрейм өлшемін өзгертуге тыйым салу

border

Фреймдер арасындағы шекараның қалыңдығы

5. Фрейм ішіндегі сілтемелер

Фреймдегі сілтемені басқа фреймде ашу үшін target атрибуты қолданылады.

html

<a ="page.html" target="content_frame">Мазмұнды ашу</a>

✅ Бұл сілтеме "content_frame" атаулы фреймде ашылады.

Тапсырмалар

✅ 1. Екі бағанды фрейм жасау.

Сол жақта меню, оң жақта мазмұн бар веб-бет құрыңыз.

✅ 2. Жолдарға бөлінген фрейм жасау.

Жоғарғы бөлікте тақырып, төменгі бөлікте негізгі ақпарат көрсетілетіндей жасаңыз.

✅ 3. Аралас фреймдер құру.

Бет үш бөлікке бөлінетіндей құрылым жасаңыз (тақырып, меню, мазмұн).

✅ 4. Фрейм ішіндегі сілтемені басқа фреймде ашу.

Сілтеме арқылы негізгі мазмұнды басқа фреймге жүктейтін HTML құрыңыз.

✅ 5. Фрейм өлшемін өзгерту.

noresize параметрін пайдаланып, фрейм өлшемін бекітіңіз.

✅ 6. Фреймдермен жұмыс істеу ыңғайсыздығын талдау.

Фреймдердің артықшылықтары мен кемшіліктерін сипаттаңыз.

✅ 7. CSS және Flexbox көмегімен фреймдерді ауыстыру.

CSS көмегімен қазіргі заманғы сайттарда фреймдердің орнына қандай тәсілдер қолданылатынын зерттеңіз.

✅ 8. Фреймдермен сайт жасау қажет пе?

Қазіргі веб-дизайнда фреймдерді қолдану қаншалықты орынды екенін талдаңыз.

Дескрипторлар

✅ Оқушы HTML көмегімен фреймдер құра алады.
✅ Фреймдерді қатарлар мен бағандарға бөледі.
✅ Фрейм ішіндегі сілтемелерді дұрыс қолданады.
✅ Фрейм параметрлерін өзгертіп, өлшемдерін реттейді.
✅ Фреймдерді CSS арқылы ауыстыру әдістерін түсінеді.

Бағдаршам әдісі арқылы бағалау

Жапондық бағалау

⭐⭐❤️ Екі жұлдыз, бір тілек

? Амандасу арқылы бағалау

??? Жұлдыздар арқылы бағалау

??? Смайлик арқылы бағалау

❄️ Қар ұшқыны бағалау

? Табыс сатысы арқылы бағалау

? W3Schools – HTML оқыту платформасы
https://www.w3schools.com/html/

? Mozilla Developer Network (MDN) – HTML анықтамалығы
https://developer.mozilla.org/en-US/docs/Web/HTML

? Қазақстандық Информатика оқулығы (Б.Мадияров, А.Сағымбаева, Н.Берікқызы) – HTML негіздері

? GitHub Pages – Веб-сайттарды тегін орналастыру платформасы
https://pages.github.com/

? Codecademy – HTML және CSS интерактивті курсы
https://www.codecademy.com/learn/learn-html

? ҚР Білім беру ресурстары – HTML және веб-дизайн бойынша материалдар
https://openu.kz/kz

? Қазақстандық IT білім беру платформасы (BilimLand)
https://bilimland.kz/

? FreeCodeCamp – Веб-бағдарламалау курстары
https://www.freecodecamp.org/

Сабақтың соңы

5 мин

Сабақты қорытындылау сұрақтары

Фреймдер қандай мақсатта қолданылады?
Фреймдерді бағандар және жолдар арқылы қалай бөлуге болады?
target атрибуты не үшін қажет?
Фреймдердің кемшіліктері қандай?
Қазіргі веб-дизайнда фреймдердің орнына не қолданылады?
Фреймдер пайдаланылатын жағдайлар қандай?
CSS көмегімен фреймдерді ауыстыру мүмкін бе?

Практикалық сабақтар

№30-31 сабақ

1. Фреймдер құрылымын жасау

Тапсырма:
Жаңа HTML құжат ашып, екі бағанды фрейм жасаңыз.

Сол жақтағы фреймде меню орналасады.
Оң жақтағы фреймде мазмұн көрсетіледі.

? Күтілетін нәтиже: Веб-бет екі бөлікке бөлінеді, меню мен мазмұн жеке фреймдерде көрінеді.

Код үлгісі:

html

<!DOCTYPE html>

<html>

<head>

<title>Фреймдер мысалы</title>

</head>

</frameset>

</html>

2. Меню беті үшін HTML құру

Тапсырма:
Фреймдерде көрсетілетін menu.html файлын жасаңыз.

Бұл бетте гиперсілтемелер болады, олар мазмұнды екінші фреймге жүктейді.

? Күтілетін нәтиже: Менюдегі сілтемелерді басқанда, мазмұн фреймде өзгеруі керек.

Код үлгісі:

html

!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

3. Мазмұн беттері үшін HTML құру

Тапсырма:
Әрбір мәзірдегі сілтеме жаңа мазмұн көрсетуі үшін page1.html, page2.html, page3.html файлдарын жасаңыз.

? Күтілетін нәтиже: Әр сілтеме өз мазмұнын бөлек фреймде ашады.

Код үлгісі (page1.html):

html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Бұл – бірінші бет</h2>

<p>Бұл бетте алғашқы ақпарат орналасқан.</p>

</body>

</html>

Осыған ұқсас page2.html және page3.html құжаттарын жасаңыз.

4. Жолдарға бөлінген фрейм жасау

Тапсырма:
Жаңа frameset.html файлын ашып, бетті екі жолға бөліңіз.

Жоғарғы фреймде тақырып,
Төменгі фреймде мазмұн орналасады.

? Күтілетін нәтиже: Веб-бет екі көлденең бөлікке бөлінеді.

Код үлгісі:

html

<!DOCTYPE html>

<html>

<head>

<title>Жолдарға бөлінген фрейм</title>

</head>

</frameset>

</html>

5. Фреймдер ішіндегі сілтемелерді басқару

Тапсырма:
Жасалған мәзірдегі сілтемелерді белгілі бір фреймде ашу үшін target атрибутын қолданыңыз.

? Күтілетін нәтиже: Сілтемелер тек мазмұнды өзгертіп, сайттың құрылымын сақтап қалады.

Мәзір файлын өзгерту (menu.html):

html

<ul>

</ul>

6. Фреймдерді өзгерту мүмкіндігін шектеу

Тапсырма:
Фреймдердің өлшемін өзгертуге болмайтындай етіп бекітіңіз.

? Күтілетін нәтиже: Пайдаланушы фреймдерді өзгерте алмайды.

Код үлгісі:

html

</frameset>

7. CSS көмегімен фреймдерді ауыстыру

Тапсырма:
Фреймдердің орнына CSS Grid немесе Flexbox арқылы заманауи веб-дизайнды пайдаланыңыз.

? Күтілетін нәтиже: Фреймдер орнына адаптивті құрылым жасалады.

CSS Grid үлгісі:

css

.container {

display: grid;

grid-template-columns: 1fr 3fr;

height: 100vh;

}

.menu {

background-color: #f4f4f4;

padding: 20px;

}

.content {

background-color: #ffffff;

padding: 20px;

}

HTML:

html

<ul>

</ul>

</div>

<h2>Мазмұн</h2>

<p>Бұл жерде негізгі ақпарат орналасады.</p>

</div>

Бағалау критерийлері (дескрипторлар)

✅ Оқушы HTML көмегімен фреймдерді құра алады.
✅ Бағандар мен жолдар арқылы фреймдерді бөліп көрсете алады.
✅ Фреймдер арасындағы байланыстарды гиперсілтемелермен реттейді.
✅ Фреймдерді бекіту, өлшемін өзгерту және стиль беру әдістерін қолданады.
✅ CSS көмегімен фреймдер орнына заманауи әдістерді пайдалануды түсінеді.

Қорытындылау сұрақтары

Фреймдердің қандай түрлері бар?
Фреймдер арасындағы байланыстар қалай жасалады?
target атрибутының қызметі қандай?
noresize атрибуты қандай рөл атқарады?
Қазіргі веб-дизайнда фреймдерді пайдалану ұсыныла ма? Неге?
CSS арқылы фреймдер орнына қандай әдістерді қолдануға болады?
Фреймдер қандай жағдайларда тиімді?

№ 32-33 сабақ

Сайтты құру және орналастыру

1. Веб-сайт құрылымын жасау

Тапсырма:

Веб-сайттың негізгі құрылымын құру үшін HTML және CSS файлдарын жасаңыз.
"index.html", "about.html", "contact.html" секілді беттерді қосыңыз.

✅ Нәтиже: Веб-сайт бірнеше беттен тұратын құрылымға ие болады.

2. Сайттың стильдерін жасау

Тапсырма:

Сайттың стилін реттеу үшін CSS файлын (style.css) жасаңыз.
Қаріп, түс, фон және орналасу стилдерін қолданыңыз.

✅ Нәтиже: Веб-сайттың эстетикалық көрінісі жақсарады.

3. Веб-сайтқа мәзір қосу

Тапсырма:

Веб-сайттың барлық беттерінде бірдей навигация мәзірін жасаңыз.
"index.html", "about.html", "contact.html" беттеріне ауысатын сілтемелер қосыңыз.

✅ Нәтиже: Пайдаланушылар сайттың беттері арасында оңай ауыса алады.

4. Контакт формасын жасау

Тапсырма:

"contact.html" бетіне байланыс формасын қосыңыз.
Аты, электрондық пошта және хабарлама өрістерін қосыңыз.

✅ Нәтиже: Пайдаланушылар сайт арқылы байланыс жасай алады.

5. Сайтқа суреттер қосу

Тапсырма:

Веб-сайтқа суреттерді қосып, олардың дұрыс көрсетілуін қамтамасыз етіңіз.
Суреттердің өлшемдерін CSS арқылы реттеңіз.

✅ Нәтиже: Веб-сайтта визуалды элементтер пайда болады.

6. Сайтты тестілеу және қателерді түзету

Тапсырма:

Веб-сайттың барлық сілтемелерін тексеріңіз.
Қате немесе дұрыс жүктелмейтін беттерді түзетіңіз.

✅ Нәтиже: Сайт толығымен жұмыс істейтін күйде болады.

7. Сайтты хостингке жүктеу

Тапсырма:

GitHub Pages, Netlify, немесе 000webhost сияқты тегін хостингке сайтты жүктеңіз.
Файлдарды серверге дұрыс орналастырыңыз.

✅ Нәтиже: Сайт интернетте қолжетімді болады.

8. Сайттың жұмысын тексеру

Тапсырма:

Веб-сайтты әртүрлі құрылғыларда (телефон, планшет, компьютер) ашып көріңіз.
Жауап беретін (responsive) дизайны бар-жоғын тексеріңіз.

✅ Нәтиже: Веб-сайт барлық құрылғыларда дұрыс көрінуі керек.

№34 сабақ

«Сайт жасау тақырыбына ғылыми жоба әзірлеу»

1. Ғылыми жоба дегеніміз не?

Ғылыми жоба – зерттеу, талдау және тәжірибе негізінде белгілі бір мәселені шешу немесе жаңа нәрсе ұсыну мақсатында жасалатын жұмыс.

2. Сайт жасауға арналған ғылыми жобаның құрылымы

Ғылыми жобаның құрылымы келесі бөлімдерден тұрады:

✅ Кіріспе – зерттеу тақырыбының маңыздылығын түсіндіру.
✅ Негізгі бөлім – теориялық материалдар, сайт жасау технологиялары.
✅ Тәжірибелік бөлім – сайт құру процесі, қолданылған әдістер.
✅ Қорытынды – зерттеу нәтижелері мен ұсыныстар.

3. Жоба тақырыбының өзектілігі

Ғылыми жоба барысында сайт жасаудың маңыздылығын түсіндіру қажет. Мысалы:

Веб-сайттар ақпарат алмасудың ең тиімді құралдарының бірі.
Кәсіпкерлер үшін сайт – маркетингтің негізгі бөлігі.
Оқушыларға арналған білім беру платформаларын жасау қажеттілігі.

4. Сайт жасау әдістері

Жобада қолданылатын технологиялар:
1️⃣ HTML, CSS, JavaScript – сайттың құрылымын, стилін және интерактивті элементтерін жасау.
2️⃣ CMS жүйелері (WordPress, Joomla) – сайтты код жазбай жасау.
3️⃣ Хостинг және домен – дайын сайтты интернетке жүктеу.

5. Практикалық бөлім: Сайт жасау

Оқушылар өз ғылыми жобаларында келесі қадамдарды орындауы тиіс:

1️⃣ Жоба тақырыбын таңдау.
2️⃣ Сайттың мақсаты мен аудиториясын анықтау.
3️⃣ Веб-сайт құрылымын жобалау (сайт картасы).
4️⃣ HTML, CSS, JavaScript көмегімен сайттың бастапқы нұсқасын жасау.
5️⃣ Сайтты тестілеу және кемшіліктерді түзету.
6️⃣ Хостингке орналастыру және қорытынды жазу.

Тапсырмалар

✅ 1. Ғылыми жобаның тақырыбын анықтау.

«Сайт жасау» тақырыбы бойынша зерттеу тақырыбын нақтылаңыз.

✅ 2. Жобаның мақсаттарын анықтау.

Жобада қандай мәселе зерттеледі және қандай нәтижеге қол жеткізгіңіз келеді?

✅ 3. Ғылыми жобаның жоспарын жасау.

Кіріспе, негізгі бөлім, тәжірибелік бөлім және қорытынды бөлімдерінің құрылымын жазыңыз.

✅ 4. Сайттың макетін құру.

Қағазға немесе компьютерде сайттың құрылымын сызу.

✅ 5. Сайт жасау процесін бастау.

HTML және CSS көмегімен басты бетті жасау.

✅ 6. Жобада қолданылатын технологияларды зерттеу.

CMS жүйелерін немесе бағдарламалау тілдерін қолдану ерекшеліктерін анықтау.

✅ 7. Сайтты тестілеу және бағалау.

Қателерді түзетіп, сайттың жұмысын тексеру.

✅ 8. Ғылыми жобаны жазу және презентация дайындау.

Жобаның негізгі нәтижелерін сипаттап, презентация жасау.

Бағдарламаның қорытындысы:

Веб-парақшаларды құруда HTML тегтерін қолдану тақырыбына арналған бұл оқу бағдарламасы веб-бағдарламалау негіздерін меңгеруге бағытталған. Оның басты мақсаты – оқушыларға веб-парақ құрудың құрылымдық және техникалық аспектілерін үйрету, HTML тілінің негізгі мүмкіндіктерін түсіндіру, сондай-ақ оларды практикалық түрде қолдану дағдыларын дамыту.

Бағдарлама барысында оқушылар веб-технологиялар туралы базалық түсініктерді меңгерді. Олар HTML-дің негізгі құрылымын, оның элементтері мен атрибуттарын, сонымен қатар веб-парақтың логикалық құрылымын жасау тәсілдерін үйренді. HTML-дің негізгі тегтері, соның ішінде <html>, <head>, <body>, <h1> – <h6>, <p>, <a>, <img>, <table>, <ul>, <ol>, <div>, <span> және басқа да маңызды элементтер егжей-тегжейлі қарастырылды. Бұл арқылы оқушылар сайт беттерін дұрыс құрастыруға, мәтіндерді форматтауға, кестелер мен тізімдер құруға, гиперсілтемелерді байланыстыруға, суреттер мен мультимедиялық элементтерді енгізуге үйренді.

Бағдарламаның маңызды бөлігі веб-парақтардың көрнекі құрылымын әзірлеу және безендіру болды. Осыған байланысты оқушылар CSS стилдік кестелерін пайдалана отырып, беттердің дизайнын жақсартуды үйренді. Олар түстерді, қаріптерді, фондық суреттерді өзгерту, парақ орналасуын басқару және жауап беретін дизайн жасау сияқты веб-дизайн элементтерін қолданды. Бұл HTML-ді пайдалану тәжірибесін кеңейтіп, веб-парақтарды эстетикалық және пайдаланушыға ыңғайлы етіп жасауға мүмкіндік берді.

Практикалық бөлімде оқушылар өз бетінше веб-парақтар жасап, оларды құрылымдық және мазмұндық жағынан жетілдірді. Сонымен қатар, веб-сайт беттерінің арасындағы байланыстарды ұйымдастыру мақсатында гиперсілтемелермен жұмыс істеу қарастырылды. Оқушылар әртүрлі веб-парақтарды байланыстыратын көпбеттік сайт құрылымдарын жасады.

Бағдарламаның тағы бір маңызды кезеңі графикалық элементтермен жұмыс істеу болды. HTML арқылы суреттерді енгізу, оларды реттеу, өлшемін өзгерту, фондық бейнелерді қосу және басқа да графикалық мүмкіндіктерді игеру оқушылардың практикалық дағдыларын нығайтты. Сонымен қатар, HTML5-тің жаңа мүмкіндіктері, соның ішінде аудио және видео файлдарды ендіру, формалар құру сияқты аспектілер қарастырылды.

Оқыту барысында алынған білімдер фреймдер мен кестелер арқылы веб-парақ құрылымын жақсартуға бағытталды. Көптеген веб-парақтарда кездесетін құрылымдық бөлімдерді жасау үшін <iframe>, <table>, <tr>, <td>, <th> сияқты тегтер қолданылды. Бұл бөлімдер оқушыларға беттерді тиімді ұйымдастыруға көмектесіп, веб-құрылымдардың икемділігін қамтамасыз етті.

Бағдарламаның тағы бір ерекшелігі – интерактивті элементтерді пайдалану мүмкіндігін қарастыру. HTML және CSS көмегімен батырмалар, қалқымалы хабарламалар, динамикалық беттер құру оқушылардың веб-парақтарды функционалды ету қабілеттерін арттырды.

Қорытындылай келе, бұл оқу бағдарламасы оқушыларға HTML тілін қолдану арқылы веб-парақтар жасаудың теориялық және практикалық негіздерін меңгеруге мүмкіндік берді. Бағдарлама барысында алынған білімдер мен дағдылар оқушыларға қарапайым веб-сайттар жасауға және оларды интернетке орналастыруға көмектесті. Сонымен қатар, бұл курс веб-бағдарламалаудың келесі деңгейлеріне өтуге сенімді негіз қалады, себебі ол тек HTML тілін ғана емес, сонымен қатар веб-дизайн мен құрылымдық жоспарлауды да үйретті. Бұл веб-технологияларды әрі қарай зерттеуге қызығушылықты арттырып, оқушыларды күрделі веб-жобаларды әзірлеуге дайындайды.

Бағдарлама соңында оқушылар өздерінің жобалық жұмыстарын жасап, оларды тәжірибелік түрде іске асырып, сайт құрудың барлық негізгі аспектілерін қолдана алды. Осылайша, оқушылардың алған білімдері болашақта жеке веб-парақтар мен толыққанды сайттарды жасау үшін қажетті негізді қалады.

КУРМАМБАЕВА РАУШАН МЕКИБАЕВНА

«ВЕБ - ПАРАҚШАЛАРДЫ ҚҰРУДА HTML - ТЕГТЕРІН ҚОЛДАНУ»

(авторлық бағдарлама)

Басуға қол қойылған күні: 06.02.2025 жыл Пішімі 60х84 1/16 Қағазы офсеттік. Офсеттік басылым. Баспа табағы 7,1

Таралымы сұраныс бойынша

Тапсырыс № 077

Кітап «Атамекен-Принт» баспаханасында басылды.

Астана қаласы – 2025 жыл

Басылымға ұсынған «Mugalim.kz» әдістемелік орталығы

Телефон: 8 705-533-09-49

Жариялаған:

КУРМАМБАЕВА РАУШАН МЕКИБАЕВНА

18 Сәуір 2025

Материал жариялап, аттестацияға 100% жарамды сертификатты тегін алыңыз!

Ustaz tilegi журналы министірліктің тізіміне енген. Qr коды мен тіркеу номері беріледі. Материал жариялаған соң сертификат тегін бірден беріледі.

Оқу-ағарту министірлігінің ресми жауабы

Сайтқа 5 материал жариялап, тегін АЛҒЫС ХАТ алыңыз!

Қазақстан Республикасының білім беру жүйесін дамытуға қосқан жеке үлесі үшін және де Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық материалыңызбен бөлісіп, белсенді болғаныңыз үшін алғыс білдіреміз!

Сайтқа 25 материал жариялап, тегін ҚҰРМЕТ ГРОМАТАСЫН алыңыз!

Тәуелсіз Қазақстанның білім беру жүйесін дамытуға және білім беру сапасын арттыру мақсатында Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық жұмысын жариялағаны үшін марапатталасыз!

Ресми байқаулар тізімі

Республикалық байқауларға қатысып жарамды дипломдар алып санатыңызды көтеріңіз!

«ВЕБ - ПАРАҚШАЛАРДЫ ҚҰРУДА HTML - ТЕГТЕРІН ҚОЛДАНУ» (авторлық бағдарлама)

Химия пәні

Тарих пәні

Биология пәні

Ағылшын тілі пәні

География пәні

Информатика пәні

Мектепке дейінгі білім беру

«Қазақ тілі» жəне «Қазақ əдебиеті»

Дене шынықтыру

Білім алушылардың білім сапасын арттыру

Инклюзивті білім беру