Тақырып бойынша 11 материал табылды

«HTML көмегімен сайт жасау» (қоғамдық-гуманитарлық бағытта оқытылатын 10 сыныптарға арналған таңдау курсының бағдарламасы)

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

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

Материалдың қысқаша нұсқасы

«АЛМАТЫ ОБЛЫСЫ БІЛІМ БАСҚАРМАСЫНЫҢ ЖАМБЫЛ АУДАНЫ БОЙЫНША БІЛІМ БӨЛІМІ» МЕМЛЕКЕТТІК МЕКЕМЕСІНІҢ «ҚАРҒАЛЫ №3 ОРТА МЕКТЕБІ» КОММУНАЛДЫҚ МЕМЛЕКЕТТІК МЕКЕМЕСІ жəне «СЕЙДАХМЕТ БЕРДІҚҰЛОВ АТЫНДАҒЫ ОРТА МЕКТЕБІ» КОММУНАЛДЫҚ МЕМЛЕКЕТТІК МЕКЕМЕСІ

«HTML көмегімен сайт жасау»

(қоғамдық-гуманитарлық бағытта оқытылатын 10 сыныптарға арналған таңдау курсының бағдарламасы)

Бағдарламаның авторы: информатика пәні мұғалімдері

Сулейменова Мергуль Валийбековна

Бергали Маржан

ТҮСІНІК ХАТ

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

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

Пәнге танымдық қызығушылығын дамытудың үш шарты бар.

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

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

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

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

Қазақстан Республикасы Ғылым және жоғары білім министрлігінің Цифрлық және мемлекеттік қызмет көрсетуді автоматтандыру департаментінің цифрландыру бағыты жарияланды. Осы бағдарламаға сәйкес «Оқу жоспарының вариативті бөлігінің оқу бағдарламалары мен элективті курстарды сараптамадан өткізу және оларды жаңартылған білім беру мазмұны аясында әдістемелік қамтамасыз ету» туралы ереже ҚР-ң 2007 жылғы 27 шілдедегі No319-III «Білім туралы» Заңына (06.05.2020 жылы енгізілген толықтырулар мен өзгертулер негізінде) сәйкес әзірленді. «HTML көмегімен сайт жасау» туралы Қазақстан Республикасы Оқу-ағарту министрінің 2022 жылғы 16 қыркүйектегі № 399 бұйрығы негізінде құрастырылған. «2022-2023 оқу жылында Қазақстан Республикасының орта білім беру ұйымдарында оқу-тәрбие процесін ұйымдастырудың ерекшеліктері туралы» Әдістемелік нұсқау хат негізінде қарастырылды.

Бағдарламаның мақсаты:

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

Бағдарламаның міндеті:

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

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

Жұмыстың жаңашылдығы-бағдарламаны орындау барысында тиісті нәтижеге жету үшін оқытудың бірнеше формалары ( фронтальды, топтық, ұжымдық, жеке) мен тиімді әдіс-тәсілдері (проблемалық- ізденіс, репродуктивтік, сөйлеу, дидактикалық ойын, көрнекілік, өзіндік жұмыс, сынақ, пікір талас,иллюстративтік т.б.) ұсынылады. Сонымен қатар баланы қызықтыру мақсатында: quizziz, padlet, wordwall, QRme атты жаңа оқу әдіс-тәсілдері қолданылды.

Күтілетін нәтижелер:

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

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

ТҰРАҚТАЛУ-МАЗМҰНДЫҚ БӨЛІМ

№	Тақырыбы	Сағат саны
	HTML дегеніміз не?	1 сағат
	HTML құжатының құрылымы	1 сағат
	Негізгі тегтер: `<html>`, `<head>`, `<title>', ' <body>`	1 сағат
	Тегтер, атрибуттар және мәндер	1 сағат
	Бірінші HTML бетін жасау	1 сағат
	Тақырыптар мен абзацтар	1 сағат
	Мәтінді бөлектеу: қою, курсив, асты сызылған	1 сағат
	Сілтемелер` < a> ' және якорь	1 сағат
	Тізімдер: реттелген және реттелмеген	1 сағат
	Практикалық тапсырма: мәтіні мен сілтемелері бар бетті құру	1 сағат
	`<Img>`суреттерін кірістіру	1 сағат
	Бейне және аудио `<video>`, ' <audio>`	1 сағат
	Пішіндерді жасау `<form>`, `<input>`, `<textarea>`, `<button>`	1 сағат
	Пішіндерді жіберу және қалпына келтіру түймелерімен жұмыс істеу	1 сағат
	Практикалық тапсырма: бетке медиа элементтер мен пішіндерді қосу	1 сағат
	`<Table>`кестелерін құру	1 сағат
	Кестелердегі ұяшықтарды біріктіру және бөлу	1 сағат
	Іздеу жүйелеріне арналған Мета тегтер	1 сағат
	Таңбаларды кодтауды анықтау	1 сағат
	Практикалық тапсырма: кесте құру және бетке метадеректер қосу	1 сағат
	Бет тақырыптары '<h1>` - ' < h6>`	1 сағат
	Кілт сөздер мен сипаттамалардың Мета тегтері	1 сағат
	Пікірлер қосу'<!-- -->`	1 сағат
	`&Nbsp;`, `<`, `>`арнайы таңбаларының таңбаларын пайдалану	1 сағат
	Практикалық тапсырма: іздеу жүйелері үшін бетті оңтайландыру және қосымша мүмкіндіктерді пайдалану	1 сағат
	CSS негіздері: ішкі және сыртқы стильдер	1 сағат
	Мәтін мен элементтерге стильдерді қолдану	1 сағат
	CSS көмегімен қарапайым макеттер жасау	1 сағат
	Практикалық тапсырма: бетте жасалған элементтерді сәндеу	1 сағат
	YouTube бейнелерін кірістіру	1 сағат
	Google Maps кірістіру	1 сағат
	Жариялауға файлдарды дайындау	1 сағат
	Хостингті таңдау және орнату	1 сағат
	Практикалық тапсырма: медиа мазмұнды ендіру және сайтты жариялау	1 сағат
	Барлығы	34 сағат

НОРМАТИВТІ БӨЛІМ

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

Р/c	Бөлім Тақырып	Оқу мақсаты	Сағат саны			Нәтиже Білім өнімі
Р/c	Бөлім Тақырып	Оқу мақсаты	Барлығы	Теория	Практика	Нәтиже Білім өнімі
HTML негіздері
	HTML дегеніміз не?	HTML дегеніміз не және оның веб-беттерді құрудағы рөлі қандай екенін түсіндіру. HTML құжатының құрылымын және негізгі тегтерді сипаттау.				HTML дегеніміз не және оның веб-беттерді құрудағы рөлі қандай екенін түсінеді. HTML құжатының құрылымын және негізгі тегтерді сипаттайды.
	HTML құжатының құрылымы	Сабақтың тақырыбын және оның веб-беттерді құрудағы маңыздылығын түсіндіру.				Сабақтың тақырыбын және оның веб-беттерді құрудағы маңыздылығын түсінеді.
	Негізгі тегтер: `<html>`, `<head>`, `<title>', ' <body>`	Сабақ аяқталғаннан кейін оқушылар негізгі HTML тегтерінің мақсаты мен қолданылуын түсіну: `<html>`, `<head>`, `<title>`, `<body>`.				сабақ аяқталғаннан кейін оқушылар негізгі HTML тегтерінің мақсаты мен қолданылуын түсіндіре алады: `<html>`, `<head>`, `<title>`, `<body>`.
	Тегтер, атрибуттар және мәндер	сабақ аяқталғаннан кейін оқушылар HTML-дегі тегтер, атрибуттар мен мәндер туралы түсініктерді түсіндіре алады және оларды веб-беттерді құра алу.				сабақ аяқталғаннан кейін оқушылар HTML-дегі тегтер, атрибуттар мен мәндер туралы түсініктерді түсіндіре алады және оларды веб-беттерді құру үшін қолдана алады.
	Бірінші HTML бетін жасау	оқушыларды HTML-де веб-бетті құру негіздерімен таныстыру және оларға алғашқы HTML бетін құруды үйрету.				оқушыларды HTML-де веб-бетті құру негіздерімен таныстыру және оларға алғашқы HTML бетін құруды үйренеді.
Мәтіндік пішімдеу
	Тақырыптар мен абзацтар	оқушыларды HTML-де тақырыптар мен абзацтар құруға арналған тегтермен таныстыру және оларды веб-беттегі мәтіндік мазмұнды құрылымдау үшін осы тегтерді қолдануға үйрету.				оқушыларды HTML-де тақырыптар мен абзацтар құруға арналған тегтермен таныстыру және оларды веб-беттегі мәтіндік мазмұнды құрылымдау үшін осы тегтерді қолдануды үйренеді.
	Мәтінді бөлектеу: қою, курсив, асты сызылған	оқушыларды HTML-де мәтінді бөлектеу үшін негізгі тегтермен таныстыру және оларды веб-беттегі мәтінді сәндеу үшін осы тегтерді қолдануға үйрету, мазмұнды пайдаланушыларға мәнерлі және түсінікті ету.				оқушыларды HTML-де мәтінді бөлектеу үшін негізгі тегтермен таныстыру және оларды веб-беттегі мәтінді сәндеу үшін осы тегтерді қолдануға үйрету, мазмұнды пайдаланушылар мәнерлі және түсінеді.
	Сілтемелер` < a> ' және якорь	оқушыларды сілтемелер жасау үшін `<a>` тегімен және HTML-де якорь жасау үшін `` атрибутымен `<a>` тегімен таныстыру, сондай-ақ оларды интерактивті және пайдаланушыға ыңғайлы веб-беттер жасау үшін осы элементтерді пайдалануға үйрету.				оқушыларды сілтемелер жасау үшін `<a>` тегімен және HTML-де якорь жасау үшін `` атрибутымен `<a>` тегімен таныстыру, сондай-ақ оларды интерактивті және пайдаланушыға ыңғайлы веб-беттер жасау үшін осы элементтерді пайдалануды үйренеді.
	Тізімдер: реттелген және реттелмеген	оқушыларды HTML-де реттелген және реттелмеген тізімдер жасауға арналған тегтермен таныстыру, сондай-ақ оларды веб-беттердегі ақпаратты құрылымдау үшін осы тегтерді қолдануға үйрету.				оқушыларды HTML-де реттелген және реттелмеген тізімдер жасауға арналған тегтермен таныстыру, сондай-ақ оларды веб-беттердегі ақпаратты құрылымдау үшін осы тегтерді қолдануды үйренеді.
	Практикалық тапсырма: мәтіні мен сілтемелері бар бетті құру	оқушыларды веб-беттерді құрудың практикалық аспектілерімен таныстыру, соның ішінде мәтінді орналастыру және басқа беттерге немесе ресурстарға сілтемелер жасау.				оқушыларды веб-беттерді құрудың практикалық аспектілерімен таныстыру, соның ішінде мәтінді орналастыру және басқа беттерге немесе ресурстарға сілтемелер жасайды.
Медиа элементтер мен пішіндер
	`<Img>`суреттерін кірістіру	оқушыларды веб-беттерге суреттерді енгізу үшін `<img>` тегімен таныстыру, осы тегтің негізгі атрибуттары мен қолданылуын түсіндіру.				оқушыларды веб-беттерге суреттерді енгізу үшін `<img>` тегімен таныстыру, осы тегтің негізгі атрибуттары мен қолданылуын түсінеді.
	Бейне және аудио `<video>`, ' <audio>`	оқушыларды веб-беттерге аудио және бейне файлдарды енгізу үшін `<audio>` және `<video>` тегтерімен таныстыру, осы тегтердің негізгі атрибуттары мен қолданылуын түсіндіру.				оқушыларды веб-беттерге аудио және бейне файлдарды енгізу үшін `<audio>` және `<video>` тегтерімен таныстыру, осы тегтердің негізгі атрибуттары мен қолданылуын түсінеді.
	Пішіндерді жасау `<form>`, `<input>`, `<textarea>`, `<button>`	оқушыларды `<form>`, `<input>`, `<textarea>`, `<button>` тегтерімен таныстыру, веб-беттерде формалар құру, негізгі атрибуттар мен олардың қолданылуын түсіндіру.				оқушыларды `<form>`, `<input>`, `<textarea>`, `<button>` тегтерімен таныстыру, веб-беттерде формалар құру, негізгі атрибуттар мен олардың қолданылуын түсінеді.
	Пішіндерді жіберу және қалпына келтіру түймелерімен жұмыс істеу	оқушыларды `<input type="submit">` және `<input type="reset">` веб-беттердегі пішіндерді жіберу және қалпына келтірумен жұмыс істеу тегтерімен таныстыру				оқушыларды `<input type="submit">` және `<input type="reset">` веб-беттердегі пішіндерді жіберу және қалпына келтірумен жұмыс істеу тегтерімен танысады.
	Практикалық тапсырма: бетке медиа элементтер мен пішіндерді қосу	оқушыларды `<video>`, `<audio>`, `<form>`, `<input>`, `<textarea>`, `тегтерін қолдана отырып, веб-бетке медиа элементтерді (бейне және аудио) және формаларды қосу процесімен таныстыру. <түйме>`.				оқушыларды `<video>`, `<audio>`, `<form>`, `<input>`, `<textarea>`, `тегтерін қолдана отырып, веб-бетке медиа элементтерді (бейне және аудио) және формаларды қосу процесімен танысады. <түйме>`.
Кестелер және метадеректер
	`<Table>`кестелерін құру	оқушыларды веб-беттерде кестелер құру үшін `<table>` тегімен таныстыру және оларды деректерді ұсыну үшін дұрыс пайдалануға үйрету.				оқушыларды веб-беттерде кестелер құру үшін `<table>` тегімен таныстыру және оларды деректерді ұсыну үшін дұрыс пайдалануды үйренеді.
	Кестелердегі ұяшықтарды біріктіру және бөлу	оқушыларды HTML кестелеріндегі ұяшықтарды біріктіру және бөлу әдістерімен таныстыру және оларды құрылымдық және әдемі жобаланған кестелер жасау үшін осы әдістерді қолдануға үйрету.				оқушыларды HTML кестелеріндегі ұяшықтарды біріктіру және бөлу әдістерімен таныстыру және оларды құрылымдық және әдемі жобаланған кестелер жасау үшін осы әдістерді қолдануды үйренеді.
	Іздеу жүйелеріне арналған Мета тегтер	оқушыларды іздеу жүйелеріне арналған негізгі мета тегтермен таныстыру және оларды іздеу нәтижелерінде веб-беттерінің көрінуін жақсарту үшін осы тегтерді қолдануға үйрету.				оқушыларды іздеу жүйелеріне арналған негізгі мета тегтермен таныстыру және оларды іздеу нәтижелерінде веб-беттерінің көрінуін жақсарту үшін осы тегтерді қолдануды үйренеді.
	Таңбаларды кодтауды анықтау	таңбаларды кодтау дегеніміз не және ол не үшін қажет екенін түсіндіріңіз; - веб-бетте қандай кодтау қолданылатынын анықтаңыз.				таңбаларды кодтау дегеніміз не және ол не үшін қажет екенін түсінеді; - веб-бетте қандай кодтау қолданылатынын анықтайды.
	Практикалық тапсырма: кесте құру және бетке метадеректер қосу	сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде кестелер құруға және SEO жақсарту үшін метадеректер қосуға үйрету.				сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде кестелер құруға және SEO жақсарту үшін метадеректер қосуды үйренеді.
SEO Үшін белгілеу және қосымша мүмкіндіктер
	Бет тақырыптары '<h1>` - ' < h6>`	сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде құрылымдық мазмұн жасау үшін тақырып тегтерін пайдалануға үйрету.				сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде құрылымдық мазмұн жасау үшін тақырып тегтерін пайдалануды үйренеді.
	Кілт сөздер мен сипаттамалардың Мета тегтері	SEO жақсарту үшін HTML-дегі кілт сөз метатегтері мен сипаттамаларының рөлін түсіндіру.				SEO жақсарту үшін HTML-дегі кілт сөз метатегтері мен сипаттамаларының рөлін түсінеді.
	Пікірлер қосу'<!-- -->`	HTML-дегі түсініктемелердің рөлін және оларды кодты ұйымдастыру үшін қолдануды түсіндіру.				HTML-дегі түсініктемелердің рөлін және оларды кодты ұйымдастыру үшін қолдануды түсінеді.
	`&Nbsp;`, `<`, `>`арнайы таңбаларының таңбаларын пайдалану	Оқушыларды HTML-дегі негізгі арнайы таңбалармен таныстыру және оларды осы таңбаларды веб-жобаларында қолдануға үйрету.				Оқушыларды HTML-дегі негізгі арнайы таңбалармен таныстыру және оларды осы таңбаларды веб-жобаларында қолдануды үйренеді.
	Практикалық тапсырма: іздеу жүйелері үшін бетті оңтайландыру және қосымша мүмкіндіктерді пайдалану	Оқушыларға веб-бетті оңтайландыру және оның іздеу жүйелерінде көрінуін жақсарту үшін қосымша мүмкіндіктерді пайдалануға үйрету.				Оқушыларға веб-бетті оңтайландыру және оның іздеу жүйелерінде көрінуін жақсарту үшін қосымша мүмкіндіктерді пайдалануды үйренеді.
CSS көмегімен сәндеу
	CSS негіздері: ішкі және сыртқы стильдер	Оқушыларға CSS негіздерін, соның ішінде ішкі және сыртқы стильдерді үйрету.				Оқушыларға CSS негіздерін, соның ішінде ішкі және сыртқы стильдерді үйренеді.
	Мәтін мен элементтерге стильдерді қолдану	мәтін мен элементтерге стильдерді қолдану негіздерін үйрету.				мәтін мен элементтерге стильдерді қолдану негіздерін үйренеді.
	CSS көмегімен қарапайым макеттер жасау	оқушыларға CSS стильдерін қолдана отырып қарапайым веб-парақ макеттерін құруды үйрету.				оқушыларға CSS стильдерін қолдана отырып қарапайым веб-парақ макеттерін құруды үйренеді.
	Практикалық тапсырма: бетте жасалған элементтерді сәндеу	Оқушыларды CSS көмегімен веб-бет элементтерін сәндеудің негізгі әдістерімен таныстыру.				Оқушыларды CSS көмегімен веб-бет элементтерін сәндеудің негізгі әдістерімен танысады.
Медиа мазмұнмен жұмыс және сайтты жариялау
	YouTube бейнелерін кірістіру	Оқушыларды YouTube бейнелерін веб-бетке енгізу процесімен таныстыру және бейнені ендірудің негізгі принциптерін түсіну.				Оқушыларды YouTube бейнелерін веб-бетке енгізу процесімен таныстыру және бейнені ендірудің негізгі принциптерін түсінеді.
	Google Maps кірістіру	Оқушыларды Google карталарын веб-параққа енгізу процесімен таныстыру.				Оқушыларды Google карталарын веб-параққа енгізу процесімен танысады.
	Жариялауға файлдарды дайындау	веб-бетті жариялауға файлдарды дайындаудың негізгі қадамдарын меңгеру.				веб-бетті жариялауға файлдарды дайындаудың негізгі қадамдарын меңгереді.
	Хостингті таңдау және орнату	оқушыларды веб-сайт үшін хостингті таңдау және теңшеу процесімен таныстыру.				оқушыларды веб-сайт үшін хостингті таңдау және теңшеу процесімен таныстырады.
	Практикалық тапсырма: медиа мазмұнды ендіру және сайтты жариялау	оқушыларды веб-бетке медиа-мазмұнды енгізу және сайтты интернетте жариялау үдерісімен таныстыру.				оқушыларды веб-бетке медиа-мазмұнды енгізу және сайтты интернетте жариялау үдерісімен танысады
	Барлығы:	34 сағат

АҚПАРАТТЫҚ-ӘДІСТЕМЕЛІК БӨЛІМ

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

- оқушының тапсырмаларды түсіне отырып, орындай алуына;

- шығармашылық, ізденіс жұмыстарымен айналысуына баса назар аударған жөн.

Авторлық бағдарламада оқушылардан алған білімдерін нақтылау мақсатында кері байланысты әр сабақта әртүрлі әдіс- тәсіл пайдаланылды. Мысалы: «padlet.com», «wordwall.net », «quizziz», «QRme» және т.б.

Берілген тапсырмаларды дұрыс орындау барысында оқушыларды «padlet.com», «бағалау шкалалары», «бәйге» әдістер арқылы бағаладық.

ОҚУШЫЛАРДЫ БАҒАЛАУ КРИТЕРИЙІ

«9-10» - оқушы сұрақ- жауаптарға еркін жауап беріп, есептерді қатесіз орындағанда, формулаларды дұрыс қолданғанда , тапсырмаларды еркін орындай алса, шапшаң есептей алса, жаңа тақырыптыеркін түсініп, тапсырмаларын орындай отырып, жұмысты мұқият орындаса қойылады.

«7-8» - оқушы есептеудегі қателерінен 2-3 саннан немесе шамалардан қате жібергенде, есептерді талдауда сәл қателіктер болғанда қойылады.

«5-6» - эссе жазғанда , тапсырмаларды талдауда белсенділік танытпай, күрделі және қарапайым есептерді орындауда қателері болса.

«3-4» -есеп шығаруда қиналып, талдауда белсенділік танытпай, қосымша тапсырмаларды орындауда жіберілген қателері көп болса, тақырыптан ауытқушылық орын алғанда қойылады.

«1-2» - есеп шығарудың талаптарын мүлдем орындамаса , есеп мөлшері аз шығарылғанда қойылады.

ОҚЫТУДЫ ҰЙЫМДАСТЫРУҒА АРНАЛҒАН ӘДІСТЕМЕЛІК НҰСҚАУЛАР

Авторлық бағдарламаны жазуда қысқа мерзімді жоспар құрдым. Әр тақырып бойынша 1 сағаттан ҚМЖ құрастырылды. Әр сабақта тақырыпқа сай тапсырмалар берілген. Сонымен қатар педагог және оқушы әрекеті толық жазылып шықты.

ҚЫСҚА МЕРЗІМДІ ЖОСПАР

1-сабақ

Бөлім:		HTML негіздері
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		HTML дегеніміз не?
Оқу бағдарламасына сәйкес оқыту мақсаттары:		HTML дегеніміз не және оның веб-беттерді құрудағы рөлі қандай екенін түсіндіру. HTML құжатының құрылымын және негізгі тегтерді сипаттау.
Сабақтың мақсаты:		оқушылар HTML негіздерімен, оның веб-беттерді құрудағы рөлімен және HTML құжатының құрылымымен танысу.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушылармен амандасып, тақырыппен таныстырады. HTML не екенін және оның маңыздылығын түсіндіру. HTML құжатының құрылымын талқылайды.		Мұғалімнің кіріспе сөзін тыңдайды. Мұқият болып және қажет болған кезде сұрақтар қояды. Талқылауға қатысады және жазбалар жасайды.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы инут	1-тапсырма `<Html>`, `<head>`, `<title>`, `<body> ' тегтерін қамтитын негізгі құрылымы бар HTML құжатын жасаңыз 2-тапсырма Беттегі мәтінді `<h1>-<h6>`, `<p> ' тегтерімен белгілеңіз. 3-тапсырма Сілтеме арқылы тапсырманы орындаңыз.		<html>, <head>, <title>, <body> тегтерін қамтитын негізгі құрылымы бар HTML құжатын жасап, код жазады. Беттегі мәтінді <h1>-<h6>, <p> тегтерімен белгілеп, тиісті түрде форматтайды. Оқушылар тапсырманы сілтеме арқылы орындайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Подкаст минут" әдісі		Оқушылар жұппен жұмыс істеп, кезекпен бір минут бойы сабақтан алған әсерлерін "подкаст" ретінде айтады.

2-сабақ

Бөлім:		HTML негіздері
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		HTML құжатының құрылымы
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Сабақтың тақырыбын және оның веб-беттерді құрудағы маңыздылығын түсіндіру.
Сабақтың мақсаты:		оқушылар HTML құжатының негізгі құрылымымен және оның негізгі элементтерімен танысу.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологияық дайындық. Қанқызы әдісі арқылы топқа бөліну.		Оқушылар үш топқа бөлінеді.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<Html>`, `<head>`, `<title>`, `<body>`тегтерінің мақсатын анықтаңыз және түсіндіріңіз. 2-тапсырма I.HTML құжатының құрылымын талқылау: тегтер `<html>`, `<head>`, `<title>`, `<body>`. II.HTML құжатындағы әрбір элементтің рөлін қарастыру. 3-тапсырма Сілтеме арқылы тапсырманы орындаңыз.		<html>, <head>, <title>, <body> тегтерінің қызметін оқып, олардың мақсатын қысқаша жазып түсіндіреді. HTML құжатының құрылымын қарап, әр тегтің рөлін анықтап, олардың функциялары туралы қысқаша жазба жасайды. Оқушылар тапсырманы сілтеме арқылы орындайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Подкаст минут" әдісі		Оқушылар жұппен жұмыс істеп, кезекпен бір минут бойы сабақтан алған әсерлерін "подкаст" ретінде айтады.

3 сабақ

Бөлім:		HTML негіздері
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Негізгі тегтер: `<html>`, `<head>`, `<title>', ' <body>`
Оқу бағдарламасына сәйкес оқыту мақсаттары:		сабақ аяқталғаннан кейін оқушылар негізгі HTML тегтерінің мақсаты мен қолданылуын түсіндіре алады: `<html>`, `<head>`, `<title>`, `<body>`.
Сабақтың мақсаты:		оқушыларды негізгі HTML тегтерімен және олардың веб-бет құрылымындағы рөлдерін түсіну.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларды қарсы алу. Сабақ тақырыбын ұсыну.		Мұғалімнің түсіндірмелерін тыңдайды. Дәптерге негізгі ойларды жазады		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I.Әр тегті талқылау:` <html>`,` <head>`,` <title>`,`<body>'. II. Негізгі тегтердің әрқайсысын пайдаланып қарапайым HTML құжатын жасау. 2-тапсырма I.Барлық негізгі тегтерді пайдаланып веб-парағыңызды жасаңыз. II.Тапсырмалар: бет тақырыбын өзгертіңіз, `<body> 'ішіне мәтін қосыңыз, `<meta>` ішіндегі `<head>' тегтерін қолданыңыз. 3-тапсырма Сілтеме арқылы тапсырманы орындаңыз.		Тегтерді талқылайды және оларды қолданып қарапайым HTML құжатын жасайды. Барлық тегтерді қолдана отырып, веб-парақ жасайды, тақырыпты өзгертеді және мәтін қосады. Тапсырманы сілтеме арқылы орындайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Викторина сұрақтарына жауаптарды талқылау және сабақты қорытындылау.		рефлексия таныту

4-сабақ

Бөлім:		HTML негіздері
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Тегтер, атрибуттар және мәндер
Оқу бағдарламасына сәйкес оқыту мақсаттары:		сабақ аяқталғаннан кейін оқушылар HTML-дегі тегтер, атрибуттар мен мәндер туралы түсініктерді түсіндіре алады және оларды веб-беттерді құруды үйрету.
Сабақтың мақсаты:		оқушыларды HTML-дегі тегтер, атрибуттар мен мағыналар ұғымдарымен таныстыру және оларды веб-беттерді құруда тәжірибеде қолдануға үйрету.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	I.Шығармашылық әлеуетті жандандыру: -Сабақты бастамас бұрын оқушыларды қуаттандыру және тарту үшін шағын ойын және зейін жаттығулары арқылы шығармашылық ынталандыру.		Сабаққа белсенді қатысу үшін бірінші сергіп, ойлау қабілетін арттыратын ойын ойнайды.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Әрқайсысы әртүрлі атрибуттары мен мәндері бар кем дегенде үш түрлі тегтерді пайдаланып веб-парақ жасаңыз. 2-тапсырма Сілтемедегі тапсырманы орындайды. 3-тапсырма бетке ені мен биіктігі пиксельмен көрсетілген суретті, сондай-ақ жаңа қойындыда ашу үшін `target="_blank" атрибуты бар сілтемені қосыңыз. Мысал келтіріңіз: <a ="https://example.com">This is a link</a> (осы мысалда тег, атрибут және мәнді көрсетіңіз). 4-тапсырма Құжаттың ішінде келесі құрылымдарды құрыңыз: Тақырып: <h1>, <h2>, <h3> тегтерін қолданып, веб-бетке әртүрлі деңгейдегі тақырыптарды қосыңыз. Параграфтар: <p> тегін қолданып, екі абзац жазыңыз. Сілтемелер: <a> тегін қолданып, кез келген веб-сайтқа сілтеме жасаңыз. Суреттер: <img> тегін қолданып, суретті веб-бетке енгізіңіз. Тізімдер: <ul> немесе <ol> тізімдеріне бірнеше элемент қосыңыз.		Әрқайсысы әртүрлі атрибуттары мен мәндері бар үш түрлі тегті пайдаланып веб-парақ жасайды. Тапсырманы сілтемедегі нұсқаулық бойынша орындайды. Ені мен биіктігі пиксельмен көрсетілген сурет және target="_blank" атрибуты бар сілтемені қосады. Тақырыптар, абзацтар, сілтемелер, суреттер және тізімдерден тұратын HTML құрылымын жасайды.		+2 балл +3 балл +2 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш сөйлем" әдісі		Оқушылар "Мен білдім...", "Мені таңғалдырды...", "Мен қолданамын..." деп басталатын үш сөйлем құрастырады.

5-сабақ

Бөлім:		HTML негіздері
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Бірінші HTML бетін жасау
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды HTML-де веб-бетті құру негіздерімен таныстыру және оларға алғашқы HTML бетін құруды үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар негізгі құрылымы мен мазмұны бар қарапайым HTML бетін жасай алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларды қызықтыру және тақырып бойынша алдын ала білімдерін бағалау үшін сабақтың басында қысқа сауалнама өткізіңіз.		Мұғалімдер тыңдап, сұрақтарға жауап береді. Дәптерге негізгі ойларды жазады.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Қосымша ақпаратты көрсету үшін тег атрибуттарын пайдаланыңыз, мысалы, кескінге арналған `src` атрибуттары. 2-тапсырма Бірінші HTML бетті жасау нұсқаулығы 3-тапсырма Тегтерді тіркеудің негізгі ережелерін түсіну және қолдану. 4-тапсырма Тест тапсырмасын орындаңыз.		Кескінге арналған src атрибутын және басқа атрибуттарды қолданып, қосымша ақпаратпен веб-парақ жасайды. Бірінші HTML бетті жасау нұсқаулығын оқып, оны тәжірибе жүзінде жүзеге асырады. Тегтерді жазу ережелерін талдап, оларды веб-парақ құру барысында қолданады. Тест тапсырмасын орындайды және нәтижесін тапсырады.		+2 балл +3 балл +2 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Подкаст минут" әдісі		Оқушылар жұппен жұмыс істеп, кезекпен бір минут бойы сабақтан алған әсерлерін "подкаст" ретінде айтады.

6-сабақ

Бөлім:		Мәтіндік пішімдеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Тақырыптар мен абзацтар
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды HTML-де тақырыптар мен абзацтар құруға арналған тегтермен таныстыру және оларды веб-беттегі мәтіндік мазмұнды құрылымдау үшін осы тегтерді қолдануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар HTML-де тақырыптар мен абзацтар құруға арналған тегтер арасындағы айырмашылықты түсіндіре алады, сонымен қатар оларды веб-беттегі мазмұнды ұйымдастыруға қолдана алады
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	I. Геймификация: - Оқу әрекеттерін ұпайлармен, сыйақылармен немесе деңгейлермен ойындарға айналдыру арқылы сабаққа геймификация элементтерін қосыңыз, бұл оқу процесін қызықты әрі интерактивті етеді.		Кездейсоқ сандар: оқушылар сандар бойынша есептеліп, бірдей сандары бар оқушылармен бірігеді.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Беттің негізгі бөлімдерін безендіру үшін бірінші деңгейдегі `<h1>` және екінші деңгейдегі `<h2>` тақырыптарын жасаңыз. 2-тапсырма `<P> ' тегінің көмегімен мәтіннің бірнеше абзацтарын қосыңыз. 3-тапсырма Субтитрлер мен қосымша ақпарат алу үшін `<h3>`, `<h4>` үшінші және төртінші деңгейдегі тақырыптарды қолданыңыз. <!DOCTYPE html> <html> <head> <title > тақырыптары мен абзацтары бар парақтың мысалы< / title> </head> <body> <h1 > бірінші деңгейдегі тақырып< / h1> <p>мәтіннің бірінші абзацы. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h2 > екінші деңгейлі тақырып< / h2> <p>мәтіннің екінші абзацы. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </body> </html>		Бірінші деңгейдегі <h1> және екінші деңгейдегі <h2> тақырыптарын жасап, оларды веб-парақта қолданады. <p> тегін пайдаланып, мәтіннің бірнеше абзацтарын қосады. <p> тегін пайдаланып, мәтіннің бірнеше абзацтарын қосады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Подкаст минут" әдісі		Оқушылар жұппен жұмыс істеп, кезекпен бір минут бойы сабақтан алған әсерлерін "подкаст" ретінде айтады.

7-сабақ

Бөлім:		Мәтіндік пішімдеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:			Қатыспағандар саны:
Сабақтың тақырыбы:		Мәтінді бөлектеу: қою, курсив, асты сызылған
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды HTML-де мәтінді бөлектеу үшін негізгі тегтермен таныстыру және оларды веб-беттегі мәтінді сәндеу үшін осы тегтерді қолдануға үйрету, мазмұнды пайдаланушыларға мәнерлі және түсінікті ету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар веб-беттерде эстетикалық және оқылатын мазмұн жасау үшін HTML-де мәтінді қою, Курсив және астын сызу үшін тегтерді тиімді пайдалана алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті	Бағалау		Ресурстар
Сабақтың басы 5 минут	- Оқушыларды шағын топтарға бөліп, оларға сабаққа қатысты тақырыпты топтық талқылау немесе мәселелерді шешуге арналған топтық сабақ сияқты бірлескен тапсырма беріңіз.		Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады.	1-10-ға дейінгі бағалау шкаласы		Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма - Мәтіні бар HTML бетін жасаңыз және оған `<strong>`, `<em>`, `<u>`тегтері арқылы таңдауды қолданыңыз. Екпін жасау және мәтіннің оқылуын жақсарту үшін мәтінді бөлектеуді қолданыңыз. 2-тапсырма I.Бетте сілтеме қосып, оны `<u> ' тегімен астын сызыңыз. II. Мәтіннің әртүрлі стильдерін жасау үшін әртүрлі тегтерді біріктіріп көріңіз. 3-тапсырма Негізгі идеялардың немесе фактілердің тізімін жасау үшін мәтінді бөлектеуді қолданыңыз. 4-тапсырма		Мәтіні бар HTML бетін жасап, <strong>, <em>, <u> тегтерін қолдана отырып, мәтіннің бөліктерін бөлектейді және екпін қосады. Сілтеме қосып, оны <u> тегімен астын сызады және әртүрлі стильдер жасау үшін тегтерді біріктіреді. Мәтіннің негізгі идеяларын немесе фактілерін бөлектеп, тізім түрінде жасайды. Сілтемедегі тапсырманы орындайды	+2 балл +3 балл +2 балл +3 балл		Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Викторина сұрақтарына жауаптарды талқылау және сабақты қорытындылау, веб-беттерде әдемі және оқылатын мәтін жасау үшін тегтерді қалай пайдалану керектігін білудің маңыздылығын атап өту.		рефлексия таныту

8-сабақ

Бөлім:		Мәтіндік пішімдеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Сілтемелер` < a> ' және якорь
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды сілтемелер жасау үшін `<a>` тегімен және HTML-де якорь жасау үшін `` атрибутымен `<a>` тегімен таныстыру, сондай-ақ оларды интерактивті және пайдаланушыға ыңғайлы веб-беттер жасау үшін осы элементтерді пайдалануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар басқа веб-беттерге сілтемелер жасай алады және бір беттің бөлімдерін шарлау үшін якорь қолдана алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Туған күн: оқушылар туған айлары бойынша тұрып, тең топтарға бөлінеді.		Оқушыларды үш топқа бөлу		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<A>` тегіне және оның атрибуттарына, соның ішінде сілтемелер үшін `` және якорьлер үшін `id` - ге шолу. 2-тапсырма Басқа беттерге сілтемелер жасау үшін `<a>` тегінің көмегімен HTML бетін жасаңыз. 3-тапсырма Белгілі бір санға дейін Фибоначчи тізбегін құру функциясын жасаңыз. 4-тапсырма Оқушыға арналған тапсырма		<a> тегінің атрибуттарын, оның ішінде сілтемелерге арналған және якорьлерге арналған id қолдану ережелерін зерттейді. <a> тегін қолданып, басқа беттерге сілтемелер қосатын HTML бетін жасайды. Белгілі бір санға дейін Фибоначчи тізбегін есептейтін функция жазады. Сілтемедегі тапсырманы орындайды		+2 балл +3 балл +2 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш сөйлем" әдісі		Оқушылар "Мен білдім...", "Мені таңғалдырды...", "Мен қолданамын..." деп басталатын үш сөйлем құрастырады.

9-сабақ

Бөлім:		Мәтіндік пішімдеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Тізімдер: реттелген және реттелмеген
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды HTML-де реттелген және реттелмеген тізімдер жасауға арналған тегтермен таныстыру, сондай-ақ оларды веб-беттердегі ақпаратты құрылымдау үшін осы тегтерді қолдануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар тиісті тегтерді қолдана отырып, HTML-де реттелген және реттелмеген тізімдер жасай алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Ұйымдастыру. Оқушылармен амандасу. Сыныпта жағымды психологиялық ахуал тудыру. «Уақыт капсуласы» стратегиясы. Мұғалім алдын-ала сыныптың әр оқушысына шағын тілектер дайындап, оларды бір-бірден киндер ұяшықтарға салып қояды. «Тілектердің» сыртқы бетінде берілген сандар оқушының сабақ барысында жұмыс жасайтын тобын білдіреді. Оқушылар тілектерді алып, сыныбына дауыстап оқиды		Қалау бойынша: оқушылар өз таңдаулары бойынша бұрыштарға тарайды (сүйікті жыл мезгілі, тағам, хобби).		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Кез келген процестегі қадамдарды білдіретін бес элементі бар реттелген тізім жасаңыз. Нұсқаулық: 2-тапсырма Кез келген процестегі қадамдарды білдіретін бес элементі бар реттелген тізім жасаңыз. 3-тапсырма		Кез келген процестегі қадамдарды білдіретін бес элементі бар реттелген тізімді <ol> тегін қолданып жасайды. Реттелген тізімде кез келген процестің бес қадамын анықтап, тізімді HTML бетіне қосады. Сілтемедегі тапсырманы орындайды		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Сабақты қорытындылау, веб-беттерде құрылымдық тізімдер құрудың маңыздылығын атап өту.		рефлексия таныту

10-сабақ

Бөлім:		Мәтіндік пішімдеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: мәтіні мен сілтемелері бар бетті құру
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-беттерді құрудың практикалық аспектілерімен таныстыру, соның ішінде мәтінді орналастыру және басқа беттерге немесе ресурстарға сілтемелер жасау.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар құрылымдау және навигация үшін HTML тегтерін пайдаланып мәтіні мен сілтемелері бар веб-беттерді жасай алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Ұйымдастыру. Оқушылармен амандасу. Сыныпта жағымды психологиялық ахуал тудыру.		Санамақ: оқушылар қарапайым "бірінші-екінші-үшінші-төртінші" деп есептеледі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Сүйікті хоббиіңіз туралы мәтіні бар веб-бет жасаңыз және берілген хобби туралы қосымша ақпараты бар сайттарға сілтемелер қосыңыз. 2-тапсырма Қалаңызды немесе еліңізді сипаттайтын бет жасаңыз және туристік ресурстарға сілтемелер қосыңыз. Сілтеме арқылы өтіп тапсырманы орындаңыз. 3-тапсырма Соңғы сапарыңыз туралы мәтіннің абзацын жасаңыз және сол сапардан кем дегенде үш фотосурет сілтемесін қосыңыз. <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Сапар туралы әңгіме</title> </head> <body> <h1>Соңғы сапарым</h1> <p>Менің соңғы сапарым өте әсерлі болды. Мен Қазақстанның әсем жерлерін аралап, табиғаттың ғажайып көріністеріне куә болдым. Әсіресе, Алтай тауларындағы биік шыңдар мен керемет көлдер көзіме ерекше түсті. Сапар барысында мен көптеген қызықты жерлерде болдым және өзімнің фотоаппаратыммен керемет кадрлар түсірдім. Мысалы, мына <a ="https://example.com/photo1.jpg" target="_blank">Алтай тауларындағы таң ату</a>, <a ="https://example.com/photo2.jpg" target="_blank">Көл жағасындағы таңертеңгілік тұман</a>және <a ="https://example.com/photo3.jpg" target="_blank">Жасыл даланы көріп тұрған биік шыңдар</a> мені қатты таңдандырды. Бұл сапар ұзақ уақыт есте қаларлықтай болды.</p> </body> </html>		Сүйікті хоббиі туралы веб-бет жасап, сол хобби туралы қосымша ақпарат бар сайттарға сілтемелер қосады. Қала немесе ел туралы сипаттама беретін бет жасап, туристік ресурстарға сілтемелер қосады. Соңғы сапары туралы абзац жасап, сол сапардан кем дегенде үш фотосуретке сілтемелер қосады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	практикалық дағдыларының маңыздылығын көрсете отырып, сабақты қорытындылау.		рефлексия таныту

11-сабақ

Бөлім:		Медиа элементтер мен пішіндер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		`<Img>`суреттерін кірістіру
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-беттерге суреттерді енгізу үшін `<img>` тегімен таныстыру, осы тегтің негізгі атрибуттары мен қолданылуын түсіндіру.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар `<img>` тегінің көмегімен веб-беттерге суреттер енгізе алады және сол тегтің негізгі атрибуттарын түсіне алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті	Оқушының әрекеті	Бағалау		Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап, оқушылардың сабаққа дайындығы. Сабақтың басталуына жағымды ықпал ететін көңіл күй қалыптастыру.	Жеребе: оқушылар себеттен топтың нөмірі немесе атауы жазылған қағазды алады.	1-10-ға дейінгі бағалау шкаласы		Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Сілтеме арқылы кіріп тапсырманы орындаңыз. 2-тапсырма Өзіңіздің сүйікті фильміңіз немесе кітабыңыз туралы веб-бет жасаңыз және `<img>`тегінің көмегімен осы жұмыстың мұқабасының суретін қосыңыз. 3-тапсырма Өзіңіздің сүйікті тағамыңыздың рецепті бар веб-парақ жасаңыз және `<img>`тегінің көмегімен осы тағамның суретін қосыңыз. 4-тапсырма Кескінді CSS көмегімен бүкіл веб-бет үшін фондық сурет ретінде пайдаланыңыз.	Сілтеме арқылы кіріп тапсырманы орындайды. Сүйікті фильмі немесе кітабы туралы веб-бет жасап, <img> тегін қолдана отырып, оның мұқабасының суретін қосады. Сүйікті тағамының рецепті бар веб-парақ жасап, <img> тегін қолдана отырып, тағамның суретін қосады. CSS пайдаланып, кескінді бүкіл веб-бетке фондық сурет ретінде қояды.	+2 балл +3 балл +2 балл +3 балл		Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	-Сабақты 3-2-1 әдісі арқылы аяқтаңыз. https://padlet.com/ aidanaabda/3-2-1-pnnlnx16fd18zjnw	рефлексия таныту

12-сабақ

Бөлім:		Медиа элементтер мен пішіндер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Бейне және аудио `<video>`, ' <audio>`
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-беттерге аудио және бейне файлдарды енгізу үшін `<audio>` және `<video>` тегтерімен таныстыру, осы тегтердің негізгі атрибуттары мен қолданылуын түсіндіру.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар `<audio>` және `<video>` тегтерін қолдана отырып, веб-беттерге аудио және бейне файлдарын енгізе алады, сонымен қатар осы тегтердің негізгі атрибуттарын түсіне алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, «бір кесе шай» әдісі арқылы үш топқа бөлеміз. Оқушылардың сабаққа дайындығы. Сабақтың басталуына жағымды ықпал ететін көңіл күй қалыптастыру.		Қызығушылық бойынша: оқушылар өздері тақырып немесе жұмыс бағытын таңдап, сол белгі бойынша бірігеді.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<Audio>`тегінің көмегімен сүйікті әніңіздің аудио файлы салынған веб-бетті жасаңыз. Ойнату түймесін және дыбыс сырғытпасын қосыңыз. 2-тапсырма 3-тапсырма `<Video> ' тегімен сүйікті фильм трейлері бар бейнені бетке қосыңыз. Бетті жүктеген кезде бейнені автоматты түрде ойнатуды орнатыңыз.		<audio> тегін пайдаланып, сүйікті әнінің аудио файлын салынған веб-бетке қосады, ойнату түймесін және дыбыс сырғытпасын пайдаланады. Сілтеме арқылы кіріп тапсырманы орындайды. <video> тегін пайдаланып, сүйікті фильмнің трейлерін веб-бетке қосады және автоматты түрде ойнатуды орнатады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

13-сабақ

Бөлім:		Медиа элементтер мен пішіндер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Пішіндерді жасау `<form>`, `<input>`, `<textarea>`, `<button>`
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды `<form>`, `<input>`, `<textarea>`, `<button>` тегтерімен таныстыру, веб-беттерде формалар құру, негізгі атрибуттар мен олардың қолданылуын түсіндіру.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар `<form>`, `<input>`, `<textarea>`, `<button>` тегтерін қолдана отырып, веб-беттерде формалар жасай алады, сонымен қатар негізгі атрибуттар мен олардың мақсаттарын түсінеді.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, Социометриялық: оқушылар қалаған серіктестерінің атын жазады, мұғалім тілектерді ескере отырып топтарды құрады.. Балалар күрделі тапсырмаларды бірлесіп шеше алатын топтық сабақтарды ынталандырыңыз. Бұл топтық жұмысты және өзара оқуды ынталандырады, бұл сабақты қызықты етеді.жағымды ықпал ететін көңіл күй қалыптастыру.		Оқушылар үш топқа бөлінеді.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<Form>` тегі:* * беттегі пішінді анықтайтын `<form>` тегіне шолу. Мысал: ```html <form action="/submit.php" method="post"> <!-- Форманың мазмұны осында болады --> </form> ``` - `action ' сервердегі пішін өңдегішінің жолын көрсетеді. - `method ' деректерді беру әдісін көрсетеді (әдетте "post" немесе "get"). 2-тапсырма `<Input>` енгізу элементтері (15 минут):* * мәтін ұяшықтары, чек жәшіктері, түймелер және т.б. сияқты әртүрлі пішін элементтерін жасау үшін қолданылатын `<input>` тегінің талқылауы. Мысалдар: - Мәтін өрісі: ```html <input type="text" name="username"> ``` - Чекбокс: ```html <input type="checkbox" name="subscribe" value="1"> ``` 3-тапсырма `<Textarea>` элементі:* * Көп жолды мәтін өрісін жасайтын `<textarea>` тегінің түсіндірмесі. Мысал: ```html <textarea name="comment" rows="4" cols="50"></textarea> ```		<form> тегінің құрылымын және оның атрибуттары (action, method) арқылы пішін жасау жолдарын зерттейді. <input> тегі арқылы мәтін өрісі, чекбокс және түймелер сияқты әртүрлі пішін элементтерін жасайды. <textarea> тегін қолданып, көп жолды мәтін өрісін жасайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш сөйлем" әдісі		Оқушылар "Мен білдім...", "Мені таңғалдырды...", "Мен қолданамын..." деп басталатын үш сөйлем құрастырады.

14-сабақ

Бөлім:		Медиа элементтер мен пішіндер.
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Пішіндерді жіберу және қалпына келтіру түймелерімен жұмыс істеу
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды `<input type="submit">` және `<input type="reset">` веб-беттердегі пішіндерді жіберу және қалпына келтірумен жұмыс істеу тегтерімен таныстыру
Сабақтың мақсаты:		сабақтан кейін оқушылар веб-беттердегі пішіндерді жіберу және қалпына келтіру түймелерін пайдалана алады және олардың функционалдығы мен негізгі атрибуттарын түсіне алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға веб-жобалардағы қателерді өңдеудің маңыздылығын түсіндіру. Қателер бағдарламаның жұмысына қалай әсер етуі мүмкін екендігі туралы қысқаша ой талқы.		Кездейсоқ сандар: оқушылар сандар бойынша есептеліп, бірдей сандары бар оқушылармен бірігеді.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Пішінді жіберу және қалпына келтіру түймелерін пайдаланып код мысалдарын көрсету. 2-тапсырма Деректерді енгізу өрістерін және пішінді жіберу және қалпына келтіру түймелерін қамтитын пішіні бар веб-бетті жасаңыз. 3-тапсырма Оқушылар жасаған формалы веб-беттерді қарау және талдау. 4-тапсырма Тест тапсырмасын орындаңыз.		Пішінді жіберу және қалпына келтіру түймелерін пайдаланып, олардың жұмысын көрсететін код жазады. Деректерді енгізу өрістері, пішінді жіберу және қалпына келтіру түймелері бар веб-бет жасайды. Жасалған формалы веб-беттерді қарастырып, олардың функционалдығын және дизайн элементтерін талдайды. Тест тапсырмасын орындайды және нәтижесін тапсырады.		+2 балл +3 балл +2 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Тақырыпты тереңірек зерттегісі келетін оқушыларға қосымша тапсырмалар ұйымдастыру.		Рефлекция білдіру.

15-сабақ

Бөлім:		Медиа элементтер мен пішіндер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: бетке медиа элементтер мен пішіндерді қосу
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды `<video>`, `<audio>`, `<form>`, `<input>`, `<textarea>`, `тегтерін қолдана отырып, веб-бетке медиа элементтерді (бейне және аудио) және формаларды қосу процесімен таныстыру. <түйме>`.
Сабақтың мақсаты:		сабақтан кейін оқушылар өздерінің құрылымы мен жұмыс принципін түсініп, веб-параққа медиа элементтер мен пішіндерді өз бетінше қоса алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушылардың сабаққа дайындығы. Сабақтың басталуына жағымды ықпал ететін көңіл күй қалыптастыру.		Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма 2-тапсырма Тегтер` <video> `және` <audio> ' бетке бейне және аудио енгізу үшін тегтерді пайдалануды талқылау. Мысалдар: ```html <video src="video.mp4" controls></video> <audio src="audio.mp3" controls></audio> ``` 3-тапсырма `<Form>` тегі және енгізу элементтері (15 минут):* * `<form>` бетте пішін жасау және `<input>`, `<textarea>`, `<button>`сияқты енгізу элементтерін қарау. Мысалдар: ```html <form action="/submit.php" method="post"> <input type= "text"name=" username"placeholder=" "required" атауын енгізіңіз> <textarea name=" message "placeholder=" хабарламаны енгізіңіз " >< / textarea> <button type= "submit" > жіберу< / button> </form> ```		Сілтеме арқылы тапсырма орындайды <video> және <audio> тегтерін қолданып, бетке бейне мен аудио енгізудің мысалдарын жазады және оларды қолдану тәсілдерін талдайды. <form> тегін пайдаланып, пішін жасайды және <input>, <textarea>, <button> элементтерін қолдану жолдарын зерттейді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	сабақтың қорытындысын шығару, практикалық тапсырманың негізгі тұстары мен қорытындыларын талқылау.		өз ойлары мен идеяларымен бөлісу.

16-сабақ

Бөлім:		Кестелер және метадеректер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		`<Table>`кестелерін құру
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-беттерде кестелер құру үшін `<table>` тегімен таныстыру және оларды деректерді ұсыну үшін дұрыс пайдалануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар `<table>` тегінің көмегімен веб-беттерде кестелер құра алады, ақпаратты дұрыс құрастыра және құрылымдай алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Мозаика: оқушылар алдымен бір белгі бойынша бөлінеді, содан кейін әр жаңа топта барлық бірінші топтардың өкілдері болатындай етіп қайта топтастырылады.		Оқушылар үш топқа бөлінеді		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<Table>` тегі: `<table>`тегінің құрылымы мен негізгі атрибуттарын қарастыру. Мысал: ```html <table border="1"> <tr> <th > Тақырып 1< / th> <th > Тақырып 2< / th> </tr> <tr> <td > ұяшық 1< / td> <td > ұяшық 2< / td> </tr> </table> ``` 2-тапсырма кроссворд оқушылардың білімін бекіту үшін 3-тапсырма ұяшықтарды біріктіретін күрделі кестелер құруды қарастыру. 4-тапсырма** https://wordwall.net/ru/resource/71816691		<table> тегінің құрылымын және оның негізгі атрибуттарын (border, <tr>, <th>, <td>) пайдаланып, қарапайым кесте құрады. Кроссворд жасау үшін ұсынылған платформаны (Wordwall) пайдаланады және оны білімді бекіту мақсатында орындайды. Ұяшықтарды біріктіру үшін <colspan> және <rowspan> атрибуттарын пайдаланып, күрделі кесте құрады. Wordwall сілтемесіне өтіп, ұсынылған тапсырманы орындайды.		+2 балл +3 балл +2 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Бір минуттық мақала"– әдісі		Oқушылар сабақ бойы үйренген негізгі түсініктерді бір минут ішінде жазып шығады.

17-сабақ

Бөлім:		Кестелер және метадеректер.
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Кестелердегі ұяшықтарды біріктіру және бөлу
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды HTML кестелеріндегі ұяшықтарды біріктіру және бөлу әдістерімен таныстыру және оларды құрылымдық және әдемі жобаланған кестелер жасау үшін осы әдістерді қолдануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар деректерді тиімдірек көрсету үшін веб-беттердегі кестелердегі ұяшықтарды біріктіріп, бөле алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	- Оқушыларды шағын топтарға бөліп, оларға сабаққа қатысты тақырыпты топтық талқылау немесе мәселелерді шешуге арналған топтық сабақ		Санамақ: оқушылар қарапайым "бірінші-екінші-үшінші-төртінші" деп есептеледі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Ұяшықтарды біріктіру: `rowspan` және `colspan`атрибуттары арқылы кестелердегі ұяшықтарды біріктіру әдістерін талқылау. Мысалдар: ```html <table border="1"> <tr> <td rowspan= "2" > ұяшық 1< / td> <td > ұяшық 2< / td> </tr> <tr> <td > ұяшық 3< / td> </tr> </table> ``` 2-тапсырма 3-тапсырма Ұяшықтарды: кестелердегі ұяшықтарды бөлу әдістерін талқылау. Мысалдар: ```html <table border="1"> <tr> <td > ұяшық 1< / td> <td > ұяшық 2< / td> </tr> <tr> <td colspan= "2" > ұяшық 3 < / td> </tr> </table> ```		rowspan және colspan атрибуттарын пайдаланып, кестелердегі ұяшықтарды біріктіру әдісін зерттейді және мысал жасайды. Сілтеме арқылы тапсырма орындайды colspan атрибутын пайдаланып, кестедегі ұяшықтарды көлденеңінен біріктіру әдісін зерттейді және мысал жасайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

18-сабақ

Бөлім:		Кестелер және метадеректер.
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Іздеу жүйелеріне арналған Мета тегтер
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды іздеу жүйелеріне арналған негізгі мета тегтермен таныстыру және оларды іздеу нәтижелерінде веб-беттерінің көрінуін жақсарту үшін осы тегтерді қолдануға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар Мета тегтердің не екенін және іздеу жүйелері үшін веб-беттерді оңтайландыру үшін қалай қолданылатынын түсіне алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Пазл: оқушылар кесілген суреттердің бөліктерін алып, толық суретті құрастыру арқылы өз тобын табады. Оқушылардың танымдық қабілеттерін ашуға арналған жаттығуларды жетілдіру үшін сабақтың бастапқы уақыттарын, яғни топқа бөлу кезеңінен бастап, сабақтың бірсарынды еместігін сезіндіріп алған жөн. Әрбір сабақтың топқа бөлу әдісі өзгеше болғаны жақсы!		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Берілген сұрақтарға жауап беріңіз. 2-тапсырма негізгі мета тегтерді пайдаланып веб-бетті құру. Оқушылар бұл тегтерді өз парағының кодына енгізуі керек. 3-тапсырма оқушылар өз веб-парағын құрып, оған `<meta charset="UTF-8">`, `<meta name="description" content="сіздің парағыңыздың сипаттамасы"сияқты іздеу жүйелеріне арналған негізгі мета тегтерді енгізуі керек>` , '<meta name=" keywords "content= " кілт сөздер">', '<meta name= "robots" content="exex, follow">'. Тапсырма сонымен қатар `<title>` тегімен бет тақырыбын құру және параққа негізгі мазмұнды қосу.		Берілген сұрақтарға нақты және түсінікті жауаптар береді. Негізгі мета тегтерді (<meta charset>, <meta name>) пайдаланып веб-бет құрып, оларды парақ кодына енгізеді. Мета тегтерді, <title> тақырыбын және мазмұнды қоса отырып веб-парақ құрады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Подкаст минут" әдісі		Оқушылар жұппен жұмыс істеп, кезекпен бір минут бойы сабақтан алған әсерлерін "подкаст" ретінде айтады.

19-сабақ

Бөлім:		Кестелер және метадеректер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Таңбаларды кодтауды анықтау
Оқу бағдарламасына сәйкес оқыту мақсаттары:		таңбаларды кодтау дегеніміз не және ол не үшін қажет екенін түсіндіру. - веб-бетте қандай кодтау қолданылатынын анықтаңыз
Сабақтың мақсаты:		оқушыларды веб-беттердегі таңбаларды кодтау ұғымымен және кодтауды анықтау әдістерімен таныстыру. Негізгі кодтауды және олардың қолданылуын қарастырыңыз.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыға психологиялық ақуал қалыптастыру. веб-беттердегі таңбаларды дұрыс кодтаудың маңыздылығын және оның мәтінді көрсетуге әсерін талқылау.		Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Таңбаларды кодтау ұғымын түсіндіру және сияқты негізгі кодтауды ұсыну UTF-8, UTF-16, және ISO-8859-1. 2-тапсырма Веб-бетте таңбаларды кодтауды анықтау әдістерін талқылау, соның ішінде `<meta charset>` мета тегін пайдалану, http тақырыптарын талдау және эвристикалық алгоритмдерді қолдану. Мысалы: <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <title>Таңбаларды кодтау</title> </head><body> <p>Бұл бет UTF-8 кодтауын пайдаланады.</p> </body> </html> 3-тапсырма Сілтемедегі сұрақтарға жауап беріңіз.		Таңбаларды кодтау ұғымын және негізгі кодтау түрлерін (UTF-8, UTF-16, ISO-8859-1) зерттейді. Веб-бетке таңбаларды кодтауды анықтау үшін <meta charset> тегін қосып, оның жұмысын талдайды. Сілтемедегі сұрақтарға жауап береді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

20-сабақ

Бөлім:		Кестелер және метадеректер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: кесте құру және бетке метадеректер қосу
Оқу бағдарламасына сәйкес оқыту мақсаттары:		сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде кестелер құруға және SEO жақсарту үшін метадеректер қосуға үйрету.
Сабақтың мақсаты:		сабақ аяқталғаннан кейін оқушылар веб-бетте кесте құрып, бетті SEO оңтайландыруды жақсарту үшін метадеректерді қоса алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады. Бірдей түймедақ күлтелері болады, бірақ оқушылар түймедақ күлтелерін таңдап болған соң, қандай топқа түскенін анықтайды.		Оқушылар үш топқа бөліп.Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма `<Meta>` тегін және оның бет метадеректеріндегі рөлін талқылау. - Практикалық тапсырма: оқушылар веб-парағына метадеректерді (сипаттама және кілт сөздер сияқты) қосады. 2-тапсырма Оқушылар кестесі бар веб-бетті жасайды және метадеректерді қосады. HTML Бетке Метадеректер Қосу: <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <meta name="description" content="Бұл веб-бетте HTML метадеректерінің қолданылуы көрсетілген."> <meta name="keywords" content="HTML, метатегтер, веб-даму, SEO"> <meta name="author" content="Айым Қасымова"> <meta name="robots" content="index, follow"> <title>Метадеректермен веб-бет</title> </head> <body> <h1>Метадеректерді қолдану мысалы</h1> <p>Бұл веб-бет метадеректерді қалай қосу керектігін көрсетеді.</p> </body> </html> 3-тапсырма Викторина сұрақтарына жауап беріңіз.		<meta> тегінің рөлі мен метадеректерді қосу тәсілдерін зерттейді және веб-параққа сипаттама мен кілт сөздерді енгізеді. Кестесі бар веб-бет жасап, оған сипаттама, кілт сөздер және автор туралы ақпарат сияқты метадеректерді қосады. Викторина сұрақтарына жауап береді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Сабаққа рефлекция.		Рефлексия таныту.

21-сабақ

Бөлім:		SEO Үшін белгілеу және қосымша мүмкіндіктер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Бет тақырыптары '<h1>` - ' < h6>`
Оқу бағдарламасына сәйкес оқыту мақсаттары:		сабақтың мақсатын түсіндіру - оқушыларды веб-беттерде құрылымдық мазмұн жасау үшін тақырып тегтерін пайдалануға үйрету.
Сабақтың мақсаты:		оқушыларға шығармашылық ойлау мен проблемаларды шешу дағдыларын дамытуға ықпал ету.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушылардың танымдық қабілеттерін ашуға арналған жаттығуларды жетілдіру үшін сабақтың бастапқы уақыттарын, яғни топқа бөлу кезіннен бастап сезіндеру маңызды.		Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма HTML файлды құру: Мәтіндік редакторды ашып, жаңа HTML құжатын жасаңыз. Файлды "headings_example.html" деп сақтаңыз. 2-тапсырма Веб - бетте` <h1> `-` < h6> ' тақырып тегтерін қолдану мысалдары: 1. ` < h1> ' - беттің негізгі тақырыбы: ```html <h1>менің сайтыма қош келдіңіз!</h1> ``` 2. ` < h2> ' - бөлімнің субтитрі: ```html <h2 > біз туралы< / h2> ``` 3. ` < h3> ' - ішкі тақырып: ```html <h3 > біздің команда< / h3> ``` 3-тапсырма Сиқырлы сұрақтар		Мәтіндік редакторда жаңа HTML құжатын жасап, оны "headings_example.html" деп сақтайды. Веб-бетке <h1> - <h6> тақырып тегтерін қолдана отырып, бөлімдер мен ішкі тақырыптарды қосады. Сиқырлы сұрақтарға жауап береді және жауаптарын мұғалімге тапсырады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Бір минуттық мақала"– әдісі		Oқушылар сабақ бойы үйренген негізгі түсініктерді бір минут ішінде жазып шығады.

22-сабақ

Бөлім:		SEO Үшін белгілеу және қосымша мүмкіндіктер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Кілт сөздер мен сипаттамалардың Мета тегтері
Оқу бағдарламасына сәйкес оқыту мақсаттары:		SEO жақсарту үшін HTML-дегі кілт сөз метатегтері мен сипаттамаларының рөлін түсіндіру.
Сабақтың мақсаты:		іздеу жүйелері үшін веб-беттерді оңтайландыру үшін мета тегтерді қалай пайдалану керектігін түсіну.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушылардың танымдық қабілеттерін ашуға арналған жаттығуларды жетілдіру үшін сабақтың бастапқы уақыттарын, яғни топқа бөлу кезеңінен бастап, сабақтың бірсарынды еместігін сезіндіріп алған жөн. Әрбір сабақтың топқа бөлу әдісі өзгеше болғаны жақсы!		Оқушыларды үш топқа Wordwall қосымшасы арқылы оқушылардың тізімін сайтқа енгізе отырып бөліңіз.Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Кілт сөздер мен сипаттамалардың мета тегтерін қолдана отырып веб-парақ құру. 2-тапсырма Cипаттамалық мета тегтерді қолдану мысалдары жаз. Мысал 1: <meta name="description"> Мета сипаттамасы: <meta name="description" content="Бұл веб-сайт HTML тілінде тегтер мен метадеректерді қалай қолдануға болатынын үйретеді. Тегтер, метадеректер және веб-даму бойынша кеңестерді таба аласыз."> Мысал 2: <meta name="keywords"> Мета кілт сөздер: <meta name="keywords" content="HTML, веб-даму, метатегтер, SEO, сипаттама, тегтер"> 3-тапсырма Сиқырлы сұрақтар		Кілт сөздер мен сипаттамалар үшін мета тегтерді қолданып, веб-парақ құрады. Сипаттамалық мета тегтерді қолдану мысалдарын жазады және олардың рөлін түсіндіреді. Сиқырлы сұрақтарға жауап береді және жауаптарын тапсырады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш сөйлем" әдісі		Оқушылар "Мен білдім...", "Мені таңғалдырды...", "Мен қолданамын..." деп басталатын үш сөйлем құрастырады.

23-сабақ

Бөлім:		SEO Үшін белгілеу және қосымша мүмкіндіктер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Пікірлер қосу'<!-- -->`
Оқу бағдарламасына сәйкес оқыту мақсаттары:		HTML-дегі түсініктемелердің рөлін және оларды кодты ұйымдастыру үшін қолдануды түсіндіру.
Сабақтың мақсаты:		код құрылымын жақсарту үшін түсініктемелерді пайдалану принциптерін түсіну.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Түсті карточкалар: оқушылар әртүрлі түсті карточкаларды алып, түстері бойынша жиналады.Оқушылардың танымдық қабілеттерін ашуға арналған жаттығуларды жетілдіру үшін сабақтың бастапқы уақыттарын, яғни топқа бөлу кезеңінен бастап, сабақтың бірсарынды еместігін сезіндіріп алған жөн. Әрбір сабақтың топқа бөлу әдісі өзгеше болғаны жақсы!		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Сұрақтарға жауап беріңіз. 2-тапсырма I.Беттің негізгі элементтерінің (тақырыптар, абзацтар, суреттер) мақсатын түсіндіру үшін түсініктеме жасаңыз. II.Беттегі дисплейден кодтың бір бөлігін уақытша алып тастау үшін түсініктемелерді пайдаланыңыз. III.Кодты одан әрі өңдеу бойынша кеңестер үшін түсініктемелерді қолданыңыз. 3-тапсырма Негізгі HTML құрылымын қосыңыз: ```html <!DOCTYPE html> <html> <head> <title > менің веб-бетім< / title> </head> <body> <!-- Мұнда --бетінің мазмұны болады> </body> </html> ```		Берілген сұрақтарға нақты және дұрыс жауап береді. Кодқа түсініктемелер қосып, негізгі элементтердің мақсатын және уақытша өзгерістерді түсіндіреді. Негізгі HTML құрылымын қосып, оны толықтырады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Бір минуттық мақала"– әдісі		Oқушылар сабақ бойы үйренген негізгі түсініктерді бір минут ішінде жазып шығады.

24-сабақ

Бөлім:		SEO Үшін белгілеу және қосымша мүмкіндіктер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		`&Nbsp;`, `<`, `>`арнайы таңбаларының таңбаларын пайдалану
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларды HTML-дегі негізгі арнайы таңбалармен таныстыру және оларды осы таңбаларды веб-жобаларында қолдануға үйрету.
Сабақтың мақсаты:		HTML-де арнайы таңбаларды қолданудың маңыздылығын және олардың веб-әзірлеудегі рөлін талқылау.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Пазл: оқушылар кесілген суреттердің бөліктерін алып, толық суретті құрастыру арқылы өз тобын табады.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I. Бос орындарды қосу үшін жолдағы әр сөздің алдына ` ` белгісін қойыңыз. II. "<Hello, World! " мәтінін көрсету үшін `<` және `>` таңбаларын пайдаланыңыз.> "HTML-де. III. Элементтерді туралау үшін ` ` таңбаларын пайдаланып тізім жасаңыз. 2-тапсырма Викторинаны орындаңыз. 3-тапсырма Мәтінде HTML кодын көрсету үшін `<` және `>` таңбаларын пайдаланыңыз. HTML Кодында Тегтерді Көрсету: HTML құжатында тегтерді көрсетудің дұрыс жолы: html Копировать код <!-- Бұл HTML түсініктемесі --> <div>Бұл - контейнер</div> Бұл код браузерде былай көрінеді: html Копировать код <!-- Бұл HTML түсініктемесі --> <div>Бұл - контейнер</div>		, <, және > таңбаларын қолдана отырып, мәтінді бос орындармен туралайды және HTML кодын көрсетеді. Викторина тапсырмасын орындайды. Мәтінде HTML кодын көрсету үшін < және > таңбаларын қолданады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	жаттығуларды талқылау, сұрақтарға жауап беру.		рефлексия таныту

25-сабақ

Бөлім:		SEO Үшін белгілеу және қосымша мүмкіндіктер
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: іздеу жүйелері үшін бетті оңтайландыру және қосымша мүмкіндіктерді пайдалану
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларға веб-бетті оңтайландыру және оның іздеу жүйелерінде көрінуін жақсарту үшін қосымша мүмкіндіктерді пайдалануға үйрету.
Сабақтың мақсаты:		Іздеу жүйелері үшін бетті оңтайландырудың негізгі принциптерін игеріп, оларды іс жүзінде қолдануды үйреніңіз.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, Пазл: оқушылар кесілген суреттердің бөліктерін алып, толық суретті құрастыру арқылы өз тобын табады. Бірдей көбелектер болады, бірақ оқушылар көбелікті таңдап болған соң, қандай топқа түскенін анықтайды. Оқушылардың сабаққа дайындығы. Сабақтың басталуына жағымды ықпал ететін көңіл күй қалыптастыру.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I. Веб-бетке `meta description` және `meta keywords` мета тегтерін қосыңыз. II. Бет мәтіні мен тақырыптарындағы кілт сөздерді пайдаланыңыз. I II. Бет құрылымын `<h1>`-`<h6>` тақырып тегтері мен тізімдерімен жақсарту. 2-тапсырма Сұрақтарға жауап беріңіз. 3-тапсырма `Alt` және `title ' атрибуттарын пайдаланып беттегі суреттерді оңтайландырыңыз. <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Сурет оңтайландыру мысалы</title> </head> <body> <h1>Сурет оңтайландыру</h1> <p>Мына жерде жақсы сипатталған сурет бар:</p> <img src="landscape.jpg" alt="Әсем табиғат көрінісі - таулар мен көл" title="Бұл сурет таулар мен көлдерден тұратын әдемі табиғат көрінісін көрсетеді"> <p>Бұл сурет табиғаттың көркем көрінісін көрсетеді және дұрыс сипаттама мен қосымша ақпаратпен оңтайландырылған.</p> </body> </html>		Веб-бетке meta description, meta keywords мета тегтерін қосып, бет мәтіні мен тақырыптарында кілт сөздерді пайдаланады, құрылымды <h1>-<h6> тегтері және тізімдермен жақсартады. Берілген сұрақтарға жауап береді. Alt және title атрибуттарын қолдана отырып, беттегі суреттерді оңтайландырады.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

26-сабақ

Бөлім:		CSS көмегімен сәндеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		CSS негіздері: ішкі және сыртқы стильдер
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларға CSS негіздерін, соның ішінде ішкі және сыртқы стильдерді үйрету.
Сабақтың мақсаты:		Веб-беттерді сәндеу үшін CSS қолдану принциптерін меңгеру және ішкі және сыртқы стильдер арасындағы айырмашылықты түсіну.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті	Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Пазл: оқушылар кесілген суреттердің бөліктерін алып, толық суретті құрастыру арқылы өз тобын табады.		Бірдей топтағы оқушылар бірлеседі.	1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Сілтеме арқылы кіріп тапсырманы орындаңыз. 2-тапсырма I. Элементтің фондық түсін өзгерту үшін ішкі стиль жасаңыз. II. Пайдаланыңыз сыртқы стиль веб-беттегі қаріпті өзгерту үшін. III. Мәтіннің өлшемін өзгерту үшін ішкі стильді қолданыңыз. 3-тапсырма Кескіннің айналасына жақтау қосу үшін сыртқы стиль жасаңыз: <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Кескінге Жақтау Қосу</title> <link rel="stylesheet"="styles.css"> </head> <body> <h1>Кескінге жақтау қосу мысалы</h1> <img src="landscape.jpg" alt="Әсем табиғат көрінісі" class="image-border"> </body> </html> CSS Код (styles.css) ```css .image-border { border: 2px solid black; } ```		Сілтеме арқылы тапсырманы орындап, нәтижесін тапсырады. Фондық түсін, қаріпті және мәтіннің өлшемін өзгерту үшін ішкі және сыртқы стильдерді пайдаланады. Сыртқы стильді қолдана отырып, кескіннің айналасына жақтау қосады.	+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	-Сабақты 3-2-1 әдісі арқылы аяқтаңыз. https://padlet.com/ aidanaabda/3-2-1-pnnlnx16fd18zjnw		рефлексия таныту

27-сабақ

Бөлім:		CSS көмегімен сәндеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Мәтін мен элементтерге стильдерді қолдану
Оқу бағдарламасына сәйкес оқыту мақсаттары:		мәтін мен элементтерге стильдерді қолдану негіздерін үйрету.
Сабақтың мақсаты:		эстетикалық жағымды және оқылатын мазмұн жасау үшін веб-беттің мәтіні мен элементтеріне әртүрлі стильдерді қалай қолдану керектігін түсіну.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, Туған күн: оқушылар туған айлары бойынша тұрып, тең топтарға бөлінеді. Бірдей түймедақ күлтелері болады, бірақ оқушылар түймедақ күлтелерін таңдап болған соң, қандай топқа түскенін анықтайды.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I.Веб-бетке фондық суретті қосу үшін background-image сипаты қолданыңыз. II. Веб-беттегі блокқа көлеңке box-shadow қасиеті арқылы қосыңыз. III. Мәтінді туралауды text-align қасиеті арқылы орнатыңыз. 2-тапсырма Сілтемедегі тапсырманы орындаңыз. 3-тапсырма Төмендегі HTML кодын "index.html" деп сақтаңыз: <!DOCTYPE html> <html lang="kk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Стильдермен Жұмыс</title> <link rel="stylesheet" ="styles.css"> </head> <body> <header> <h1>Менің Веб-Сайтым</h1> <p>Бұл веб-сайт түрлі стильдермен жұмыс істеу мысалдарына арналған.</p> </header> <section> <h2>Мәтіннің Стильдері</h2> <p class="highlight">Бұл мәтін ерекше стильмен көрсетілген.</p> <p>Бұл мәтін әдеттегі стильмен көрсетілген.</p> </section> <section> <h2>Элементтердің Стильдері</h2> <img src="example.jpg" alt="Мысал сурет" class="styled-image"> <button class="styled-button">Батырма</button> </section> <footer> <p>© 2024 Менің Веб-Сайтым</p> </footer> </body> </html>		Веб-бетке фондық сурет қосып, блокқа көлеңке береді және мәтінді туралауды орнатады. Сілтемедегі тапсырманы орындайды. Берілген HTML кодын "index.html" деп сақтап, оған қатысты CSS файлымен жұмыс істейді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	- Сабақты көңілді топтық пікірталаспен аяқтаңыз.		рефлексия таныту

28-сабақ

Бөлім:		CSS көмегімен сәндеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		CSS көмегімен қарапайым макеттер жасау
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларға CSS стильдерін қолдана отырып қарапайым веб-парақ макеттерін құруды үйрету.
Сабақтың мақсаты:		оқушыларды CSS көмегімен қарапайым макеттер жасау негіздерімен танысады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті	Бағалау	Ресурстар
Сабақтың басы 5 минут	І.Ұйымдастыру кезеңі. Туған күн: оқушылар туған айлары бойынша тұрып, тең топтарға бөлінеді.. Үш топқа бөлінген оқушылар үй тапсырмаларына арналған жеке тапсырмаларға жауап береді.		Бірдей топтағы оқушылар бірлеседі.	1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Фон түсін және элементтердің мәтінін өзгерту: ```css .header { background-color: #f1f1f1; color: #333; } ``` 2-тапсырма Сілтеме арқылы өтіп тапсырманы орындаңыз. 3-тапсырма Кейбір орналасу элементтері үшін анимация жасау: ```css @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } .element { animation-name: example; animation-duration: 4s; } ```		Фон түсі мен мәтін түсін CSS арқылы өзгертеді. Сілтеме арқылы өтіп тапсырманы орындайды. CSS арқылы орналасу элементтеріне анимация қосады.	+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	жаттығуларды талқылау, сұрақтарға жауап беріп, «бағдаршам» әдісі бойынша қорытындылаңыз.		рефлексия таныту

29-сабақ

Бөлім:		CSS көмегімен сәндеу
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: бетте жасалған элементтерді сәндеу
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларды CSS көмегімен веб-бет элементтерін сәндеудің негізгі әдістерімен таныстыру.
Сабақтың мақсаты:		сабақтан кейін оқушылар бетте жасалған веб-бет элементтеріне әртүрлі стильдерді қолдана алады, мысалы, фон түсін, мәтінді, қаріп өлшемін және түрін өзгерту, элементтерді беттің ортасына немесе шетіне туралау, элементтерге шегіністер мен жақтаулар қосу, кейбір орналасу элементтері үшін анимация жасау және медианы пайдалану- адаптивті орналасуды өзгертуге арналған сұраулар.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Оқушыларға психологиялық ахуал жасап алған соң, Туған күн: оқушылар туған айлары бойынша тұрып, тең топтарға бөлінеді. Бірдей көбелектер болады, бірақ оқушылар көбелікті таңдап болған соң, қандай топқа түскенін анықтайды.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I.Бет тақырыбының фондық түсін өзгертіңіз. II.Мәтін абзацына қаріп өлшемін орнатыңыз. III.Кескіннің айналасына жақтау қосыңыз. 2-тапсырма 3-тапсырма Элементті тану, табиғи тілді өңдеу және болжау сияқты CSS көмегімен веб-бет элементтерін тапсырмаларының кейбір мысалдарын тақтаға немесе қағазға жазыңыз.Сыныпты үш командаға бөліңіз.Әр команда кезек-кезек бір қатысушыны тапсырманы таңдау үшін тақтаға жібереді және оны тапсырманың атын пайдаланбай өз командасына түсіндіруге тырысады.		Тақырыптың фондық түсін, мәтін абзацының қаріп өлшемін өзгертеді және кескіннің айналасына жақтау қосады. Сілтеме арқылы өтіп, тапсырманы орындайды. Тақтаға немесе қағазға CSS тапсырмаларын жазады және оларды командасына түсіндіреді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	жаттығуларды талқылау, сұрақтарға жауап беру.		рефлексия таныту

30-сабақ

Бөлім:		Медиа мазмұнмен жұмыс және сайтты жариялау
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		YouTube бейнелерін кірістіру
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларды YouTube бейнелерін веб-бетке енгізу процесімен таныстыру және бейнені ендірудің негізгі принциптерін түсіну
Сабақтың мақсаты:		Сабақтан кейін оқушылар YouTube бейнелерін дұрыс код пен параметрлерді пайдаланып веб-бетке ендіре алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Қалау бойынша: оқушылар өз таңдаулары бойынша бұрыштарға тарайды		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I. HTML және CSS көмегімен жаңа веб-бет жасаңыз. II. YouTube бейнелерін өзіңіз жасаған бетке қойыңыз. III. Беттегі бейне өлшемін өзгертіңіз. 2-тапсырма Сілтемедегі викториналық сұоақтарға жауап беріңіз, 3-тапсырма I. CSS көмегімен бейненің айналасына инсульт немесе көлеңке қосыңыз. II. Құрылғылардағы бейне өлшемін бейімдеу үшін медиа сұрауларды пайдаланыңыз.		HTML және CSS арқылы жаңа веб-бет жасап, YouTube бейнесін енгізіп, оның өлшемін өзгертеді. Сілтемедегі викториналық сұрақтарға жауап береді. CSS арқылы бейненің айналасына көлеңке немесе инсульт қосып, медиа сұрауларды қолдана отырып, бейненің өлшемін құрылғыларға бейімдейді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	Сілтеме арқылы оқушылардан сауалнама алыңыз.		рефлексия таныту

31-сабақ

Бөлім:		Медиа мазмұнмен жұмыс және сайтты жариялау
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Google Maps кірістіру
Оқу бағдарламасына сәйкес оқыту мақсаттары:		Оқушыларды Google карталарын веб-параққа енгізу процесімен таныстыру.
Сабақтың мақсаты:		сабақтан кейін оқушылар Google карталарын өз веб-беттеріне өз бетінше ендіре алады.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Oқушылapмен сәлемдесу, оқушыларды түгeлдeу, oқушылapдың нaзapын caбaққa aудаpу. Сабақтың тақырыбымен мақсаттарымен таныстыру, жаңа тақырыпқа шолу Психологиялық ахуал орнату		Қалау бойынша: оқушылар өз таңдаулары бойынша бұрыштарға тарайды.Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма I. Google картасын қою үшін кодты көшіріңіз. II. HTML редакторын ашыңыз. III. Көшірілген кодты HTML редакторына қойыңыз. 2-тапсырма 3-тапсырма Браузерде веб-бетті ашып, картаның дұрыс көрсетілгенін тексеріңіз.		Google картасының кодын көшіріп, HTML редакторына қояды. Сілтемедегі викториналық сұрақтарға жауап береді. Веб-бетті браузерде ашып, картаның дұрыс көрсетілгенін тексереді.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

32-сабақ

Бөлім:		Медиа мазмұнмен жұмыс және сайтты жариялау
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Жариялауға файлдарды дайындау
Оқу бағдарламасына сәйкес оқыту мақсаттары:		веб-бетті жариялауға файлдарды дайындаудың негізгі қадамдарын меңгеру.
Сабақтың мақсаты:		файлдарды жариялауға дайындау процесін түсіну және қажетті әрекеттерді орындайды.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Жеребе: оқушылар себеттен топтың нөмірі немесе атауы жазылған қағазды алады.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма 2-тапсырма Оқушылардан бір қарапайым веб-бетті жасауын сұраңыз. Бұл бетте негізгі HTML құрылымы және бірнеше элементтер болуы керек. Мысалы, келесі кодты қолдана алады: 3-тапсырма		Сілтеме арқылы өтіп, тапсырманы орындайды. Негізгі HTML құрылымы мен бірнеше элементтерді қолдана отырып, қарапайым веб-бет жасайды. Сілтеме арқылы өтіп, тапсырманы орындайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Файлдарды жариялауға дайындау қадамдары: 1. Хостингті таңдау: веб-сайтыңыз үшін хостингтің әртүрлі нұсқаларын қарастырыңыз. 2. Файлдарды дайындау: сіздің сайтыңыздың барлық файлдары серверге жүктеуге дайын екеніне көз жеткізіңіз. 3. Файлдарды серверге жүктеу: файлдарды серверге жүктеу үшін FTP клиентін пайдаланыңыз. 4. Доменді теңшеу: доменге хостингті көрсету үшін DNS жазбаларын орнатыңыз. 5. Сайтты тексеру: файлдарды жүктегеннен кейін веб-сайтыңыздың дұрыс жұмыс істеп тұрғанына көз жеткізіңіз.
Сабақтың соңы 5 минут	жаттығуларды талқылау, сұрақтарға жауап беру.		рефлексия таныту

33-сабақ

Бөлім:		Медиа мазмұнмен жұмыс және сайтты жариялау
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:			Қатыспағандар саны:
Сабақтың тақырыбы:		Хостингті таңдау және орнату
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-сайт үшін хостингті таңдау және теңшеу процесімен таныстыру.
Сабақтың мақсаты:		хостингті таңдау критерийлерін түсіну және хостинг шотының негізгі параметрлерін реттей біледі.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті	Бағалау		Ресурстар
Сабақтың басы 5 минут	Жеребе: оқушылар себеттен топтың нөмірі немесе атауы жазылған қағазды алады.		Бірдей топтағы оқушылар бірлеседі.	1-10-ға дейінгі бағалау шкаласы		Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма әр түрлі хостинг провайдерлерінің сипаттамаларын зерттеу және ең қолайлысын таңдау. 2-тапсырма Cілтемеге өтіп шешіңіз. 3-тапсырма YouTube бейнелерін веб-параққа орналастыру үшін YouTube-тің өзі ұсынатын кіріктірілген ойнатқыш коды қолданылады. Міне, бейнені енгізуге арналған кодтың мысалы: ```html <iframe Ені= " 560 "биіктігі=" 315 " src="https://www.youtube.com/embed/ВАШ_ИДЕНТИФИКАТОР_ВИДЕО" frameborder=" 0 " allowfullscreen>< / iframe> ``` Мұндағы 'сіздің' ID_VIDEO ' - бұл YouTube-тегі бейне идентификаторы. Сіз оны 'watch' кейін шолғыштың мекенжай жолағында таба аласыз ба?v=', мысалы, мекен-жайы бар бейне үшін `https://www.youtube.com/watch?v=dQw4w9WgXcQ 'идентификатор `dQw4w9WgXcQ' болады. Тек `сіздің` бейнеңіздің идентификаторын ' бейнеңіздің нақты идентификаторымен ауыстырыңыз және бұл код бейнені веб-бетіңізге ендіреді.		Әртүрлі хостинг провайдерлерінің сипаттамаларын зерттеп, ең қолайлысын таңдайды. Сілтеме арқылы өтіп, тапсырманы шешеді. YouTube бейнесінің идентификаторын анықтап, ұсынылған кодты пайдалана отырып, бейнені веб-параққа орналастырады.	+3 балл +4 балл +3 балл		Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	"Үш түс" әдісі		Оқушылар жасыл, сары және қызыл стикерлерге сәйкесінше жаңа үйренген, сұрақ туғызған және қиындық келтірген тақырыптарды жазады.

34-сабақ

Бөлім:		Медиа мазмұнмен жұмыс және сайтты жариялау
Педагогтің аты-жөні:
Күні:
Сынып:		Қатысушылар саны:		Қатыспағандар саны:
Сабақтың тақырыбы:		Практикалық тапсырма: медиа мазмұнды ендіру және сайтты жариялау
Оқу бағдарламасына сәйкес оқыту мақсаттары:		оқушыларды веб-бетке медиа-мазмұнды енгізу және сайтты интернетте жариялау үдерісімен таныстыру.
Сабақтың мақсаты:		Веб-бетке суреттерді, бейнелерді және аудионы енгізу дағдыларын меңгеру және сайтты жариялау негіздерін түсінеді.
Сабақтың барысы
Сабақтың кезеңі/уақыт	Педагогтің әрекеті		Оқушының әрекеті		Бағалау	Ресурстар
Сабақтың басы 5 минут	Психологиялық дайындық. Жеребе: оқушылар себеттен топтың нөмірі немесе атауы жазылған қағазды алады.		Бірдей топтағы оқушылар бірлеседі.		1-10-ға дейінгі бағалау шкаласы	Презентация және слайдтар
Сабақтың ортасы 35 минут	1-тапсырма Медиа мазмұнның әртүрлі түрлеріне шолу: суреттер, бейнелер, аудио. 2-тапсырма сілтемедегі сұрақтарға жауап беріңіз. 3-тапсырма I. Практикалық тапсырма: суретті веб-параққа салыңыз. II. Практикалық тапсырма: бейнені веб-бетке кірістіру. III. Практикалық тапсырма: веб-бетке аудио кірістіру. IV. Сайтты жариялау процесіне шолу: хостингті таңдау, файлдарды жүктеу, доменді орнату. Нұсқаулық арқылы тапсырманы орындаңыз.		Суреттер, бейнелер және аудио сияқты медиа мазмұн түрлерін зерттейді. Сілтемедегі сұрақтарға жауап береді. I. Суретті веб-параққа қосады. II. Бейнені веб-бетке кірістіреді. III. Аудионы веб-бетке қосады. IV. Хостинг, файлдарды жүктеу және доменді орнату бойынша нұсқаулықты орындап, сайтты жариялайды.		+3 балл +4 балл +3 балл	Интрнет және компьютер Интрнет және компьютер Интрнет және компьютер
Сабақтың соңы 5 минут	жаттығуларды талқылау, сұрақтарға жауап беру.		рефлексия таныту

ПАЙДАЛАНЫЛҒАН ӘДЕБИЕТТЕР ТІЗІМІ

Мұғалімдер үшін:

1. "HTML and CSS: Design and Build Websites" by Jon Duckett

2. "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

3. "Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages" by Elisabeth Robson and Eric Freeman

4. "HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself" by Julie C. Meloni and Jennifer Kyrnin

5. "Web Design with HTML, CSS, JavaScript and jQuery Set" by Jon Duckett

6. "HTML5 for Web Designers" by Jeremy Keith

7. "CSS: The Definitive Guide: Visual Presentation for the Web" by Eric A. Meyer and Estelle Weyl

Оқушылар үшін:

1. "HTML for Kids: A Beginner's Guide to Learning HTML" by Jason M. Swadley

2. "Coding for Beginners: Using HTML and CSS" by Jonathan Melmoth

3. "HTML and CSS: Visual QuickStart Guide" by Elizabeth Castro and Bruce Hyslop

4. "HTML, CSS, and JavaScript for Dummies" by Andy Harris

5. "HTML for Babies (Code Babies)" by Sterling Children's

Ата-аналар үшін:

1. "Teach Your Kids to Code: A Parent-Friendly Guide to Python Programming" by Bryson Payne

2. "Help Your Kids with Computer Coding: A Unique Step-by-Step Visual Guide, from Binary Code to Building Games" by Carol Vorderman

3. "How to Code: A Step-By-Step Guide to Computer Coding" by Max Wainewright

4. "Code Like a Pro: Create Working Applications" by Matt Zur

5. "Computer Coding Projects for Kids: A Step-by-Step Visual Guide" by Carol Vorderman

Жүктеу

Бөлісу

ЖИ арқылы жасау

Файл форматы:

docx

Информатика Авторлық бағдарлама 10 сынып

14.12.2024

580

Жүктеу

ЖИ арқылы жасау

Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз

Мысал 1: <meta name="description">

Мысал 2: <meta name="keywords">

HTML Кодында Тегтерді Көрсету:

«HTML көмегімен сайт жасау» (қоғамдық-гуманитарлық бағытта оқытылатын 10 сыныптарға арналған таңдау курсының бағдарламасы)

Мысал 1: <meta name="description">

Мысал 2: <meta name="keywords">

HTML Кодында Тегтерді Көрсету:

Химия пәні

Тарих пәні

Биология пәні

Ағылшын тілі пәні

География пәні

Информатика пәні

Мектепке дейінгі білім беру

«Қазақ тілі» жəне «Қазақ əдебиеті»

Дене шынықтыру

Білім алушылардың білім сапасын арттыру

Инклюзивті білім беру