Авторлық бағдарламаның тақырыбы: "HTML, CSS және JavaScript көмегімен сайт жобалау"

р/с

Бөлім

Бөлімше

Тақырып

Оқу мақсаты

Сағат саны

Білім өнімі

Барлығы

Лекция

Тәжірибе

№1 Бөлім.

№1 Бөлімше. Барлығы -7 сағат: теория -3, тәжірибе 4

1.1

Интернет және веб-сайттар туралы түсінік

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

1

0,5

0,5

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

1.2

HTML тілімен танысу: алғашқы веб-парақ

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

1

0,5

0,5

Оқушылар HTML құжатының негізгі құрылымын түсінеді
Оқушылар базалық HTML тегтерін қолдана алады
Оқушылар өз бетінше қарапайым веб-парақ жасай алады

1.3

Мәтінмен жұмыс: тақырыптар мен абзацтар

Мәтіндік тегтердің қолданылуын түсіндіру
Тақырыптар мен абзацтарды дұрыс құруды үйрету
Мәтінді семантикалық тұрғыдан дұрыс құрылымдауды үйрету

1

0,5

0,5

Оқушылар мәтіндік тегтерді дұрыс қолдана алады
Оқушылар тақырыптар иерархиясын құра алады
Оқушылар мәтінді семантикалық тұрғыдан дұрыс құрылымдай алады

1.4

Суреттермен жұмыс: img тегі

Суреттерді веб-парақта орналастыру принциптерін түсіндіру
img тегінің атрибуттарын қолдануды үйрету
Суреттердің оңтайлы форматтары мен өлшемдерін таңдауды үйрету

1

0,5

0,5

Оқушылар веб-парақта суреттерді орналастыра алады
Оқушылар img тегінің атрибуттарын дұрыс қолдана алады
Оқушылар суреттердің форматтары мен өлшемдерін оңтайлы таңдай алады

1.5

Сілтемелер жасау: a тегі

Гиперсілтемелердің жұмыс істеу принципін түсіндіру
a тегінің атрибуттарын қолдануды үйрету
Ішкі және сыртқы сілтемелерді жасауды үйрету

1

0,5

0,5

Оқушылар гиперсілтемелердің жұмыс принципін түсінеді
Оқушылар a тегінің атрибуттарын дұрыс қолдана алады
Оқушылар ішкі және сыртқы сілтемелерді жасай алады

1.6

Тізімдер: ul және ol тегтері

Тәртіпті және тәртіпсіз тізімдердің айырмашылығын түсіндіру
Тізім элементтерін дұрыс құруды үйрету
Көп деңгейлі тізімдер жасауды үйрету

1

0,5

0,5

Оқушылар тізімдердің түрлерін ажырата алады
Оқушылар тәртіпті және тәртіпсіз тізімдер құра алады
Оқушылар көп деңгейлі тізімдер жасай алады

1.7

Кіші жоба: "Менің сүйікті нәрселерім туралы парақша"

Алған білімдерін практикада қолдануды үйрету
Жобалық жұмыс дағдыларын дамыту
Креативті ойлауды дамыту

1

0

1

Оқушылар өз бетінше веб-парақ жасай алады
Оқушылар барлық үйренген элементтерді біріктіре алады
Оқушылар өз жұмысын презентациялай алады

№2 бөлім.

№2 Бөлімше. Барлығы -7 сағат: теория -3, тәжірибе 4

2.1

CSS-пен танысу: стильдер дегеніміз не

CSS тілінің мақсаты мен маңызын түсіндіру

CSS синтаксисін үйрету
Стильдерді қосудың әр түрлі әдістерін түсіндіру

1

0,5

0,5

Оқушылар CSS-тің не екенін және не үшін қолданылатынын түсінеді
Оқушылар CSS синтаксисін дұрыс жаза алады
Оқушылар стильдерді әр түрлі әдістермен қоса алады

2.2

Мәтін стилі: түс, өлшем, қаріп

Мәтіннің негізгі стильдік қасиеттерін түсіндіру
Түстерді CSS-те қолдану әдістерін үйрету
Қаріптермен жұмыс істеуді үйрету

1

0,5

0,5

Оқушылар мәтіннің стилін өзгерте алады
Оқушылар түстерді әр түрлі форматта жаза алады
Оқушылар қаріптерді дұрыс таңдап, қолдана алады

2.3

Шекаралар мен өрістер: border және margin

Box Model концепциясын түсіндіру
Шекаралар мен өрістерді баптауды үйрету
Элементтер арасындағы қашықтықты басқаруды үйрету

1

0,5

0,5

Оқушылар Box Model принципін түсінеді
Оқушылар элементтердің шекараларын баптай алады
Оқушылар элементтер арасындағы қашықтықты реттей алады

2.4

Фондық түстер мен суреттер

Фондық түстер мен суреттерді қолдануды үйрету
Фондық суреттердің қасиеттерін баптауды түсіндіру
Градиенттерді қолдануды үйрету

1

0,5

0,5

Оқушылар фондық түстер мен суреттерді қоса алады
Оқушылар фондық суреттердің қасиеттерін баптай алады.

Оқушылар градиенттерді құра алады

2.5

Элементтерді орналастыру: flex негіздері

Flexbox моделінің жұмыс принципін түсіндіру
Flex контейнер мен элементтердің қасиеттерін үйрету
Элементтерді икемді орналастыруды үйрету

1

0,5

0,5

Оқушылар Flexbox моделін түсінеді
Оқушылар flex контейнерлер құра алады
Оқушылар элементтерді икемді орналастыра алады

2.6

Класстармен жұмыс

CSS класстарының мақсатын түсіндіру
Класстарды құру және қолдану әдістерін үйрету
Көп класстармен жұмыс істеуді үйрету

1

0,5

0,5

Оқушылар CSS класстарының мақсатын түсінеді
Оқушылар класстарды құрып, қолдана алады
Оқушылар бір элементке бірнеше класс қолдана алады

2.7

Жоба: "Менің портфолиом"

CSS білімдерін практикада қолдануды үйрету
Дизайн принциптерін қолдануды үйрету
Жобалық жұмыс дағдыларын дамыту

1

0

1

Оқушылар CSS-ті кешенді қолдана алады
Оқушылар дизайн принциптерін сақтай алады
Оқушылар толық стильденген веб-парақ жасай алады

№3 бөлім.

№3 Бөлімше. Барлығы -7 сағат: теория -3, тәжірибе 4

3.1

JavaScript дегеніміз не: алғашқы скрипт

JavaScript тілінің мақсаты мен маңызын түсіндіру
Скриптерді веб-параққа қосу әдістерін үйрету
Консольмен жұмыс істеуді үйрету

1

0,5

0,5

Оқушылар JavaScript-тің не екенін түсінеді
Оқушылар скриптерді веб-параққа қоса алады
Оқушылар консольда жұмыс істей алады

3.2

Айнымалылар мен деректер түрлері

JavaScript-тегі айнымалылар концепциясын түсіндіру
Деректер түрлерімен таныстыру
Айнымалыларды дұрыс жариялау мен қолдануды үйрету

1

0,5

0,5

Оқушылар айнымалыларды жариялай алады
Оқушылар деректер түрлерін ажырата алады
Оқушылар айнымалыларды дұрыс қолдана алады

3.3

Қарапайым математикалық амалдар

Математикалық операторларды үйрету
Сандармен жұмыс істеу әдістерін түсіндіру
Математикалық есептеулерді орындауды үйрету

1

0,5

0,5

Оқушылар математикалық операторларды қолдана алады
Оқушылар сандармен операциялар жасай алады
Оқушылар қарапайым есептеулерді орындай алады

3.4

Шарттар: if-else құрылымы

Шартты операторлардың жұмысын түсіндіру
if-else құрылымын қолдануды үйрету
Логикалық операторларды қолдануды үйрету

1

0,5

0,5

Оқушылар шартты операторларды түсінеді
Оқушылар if-else құрылымын қолдана алады
Оқушылар логикалық операторларды дұрыс қолдана алады

3.5

Пайдаланушымен өзара әрекеттесу: alert және prompt

Диалогтық терезелердің түрлерін түсіндіру
alert және prompt функцияларын қолдануды үйрету
Пайдаланушы енгізген деректермен жұмыс істеуді үйрету

1

0,5

0,5

Оқушылар диалогтық терезелерді қолдана алады
Оқушылар пайдаланушыдан деректер ала алады
Оқушылар алынған деректермен жұмыс істей алады

3.6

Оқиғалармен жұмыс: onclick

Оқиғалар концепциясын түсіндіру
onclick оқиғасын қолдануды үйрету
Оқиға өңдеушілерді жазуды үйрету

1

0,5

0,5

Оқушылар оқиғалардың жұмыс принципін түсінеді
Оқушылар onclick оқиғасын қолдана алады
Оқушылар оқиға өңдеушілерді жаза алады

3.7

Кіші жоба: "Интерактивті калькулятор"

JavaScript білімдерін практикада қолдануды үйрету
Калькулятор логикасын құруды үйрету
Пайдаланушы интерфейсін жасауды үйрету

1

0

1

Оқушылар JavaScript-ті практикада қолдана алады
Оқушылар калькулятор логикасын құра алады
Оқушылар қолданушыға ыңғайлы интерфейс жасай алады

№4 бөлім.

№4 Бөлімше. Барлығы -7 сағат: теория -3, тәжірибе 4

4.1

DOM элементтерімен жұмыс

DOM құрылымын түсіндіру
Элементтерді таңдау әдістерін үйрету
DOM элементтерінің қасиеттерімен жұмыс істеуді үйрету

1

0,5

0,5

Оқушылар DOM құрылымын түсінеді
Оқушылар элементтерді әр түрлі әдістермен таңдай алады
Оқушылар DOM элементтерінің қасиеттерін өзгерте алады

4.2

Элементтерді өзгерту және жасау

Элементтердің мазмұнын өзгертуді үйрету
Жаңа элементтер құруды түсіндіру
Элементтерді өшіруді үйрету

1

0,5

0,5

Оқушылар элементтердің мазмұнын өзгерте алады
Оқушылар жаңа элементтер құра алады
Оқушылар элементтерді өшіре алады

4.3

Формалармен жұмыс

Формалардың құрылымын түсіндіру
Форма элементтерімен жұмыс істеуді үйрету
Формадан деректерді алу және өңдеуді үйрету

1

0,5

0,5

Оқушылар формаларды құра алады
Оқушылар форма элементтерімен жұмыс істей алады
Оқушылар формадан деректерді алып өңдей алады

4.4

Түймелер мен оқиғалар

Түрлі оқиға түрлерін түсіндіру
Оқиғаларды өңдеу әдістерін үйрету
Күрделі оқиғаларды басқаруды үйрету

1

0,5

0,5

Оқушылар әр түрлі оқиға түрлерін қолдана алады
Оқушылар оқиғаларды өңдей алады
Оқушылар күрделі оқиғаларды басқара алады

4.5

Анимациялар жасау

JavaScript анимация принциптерін түсіндіру
Қарапайым анимациялар жасауды үйрету
Анимация параметрлерін баптауды үйрету

1

0,5

0,5

Оқушылар анимация принциптерін түсінеді
Оқушылар қарапайым анимациялар жасай алады
Оқушылар анимация параметрлерін баптай алады

4.6

Қарапайым ойын логикасы

Ойын логикасының негіздерін түсіндіру
Ойын элементтерін басқаруды үйрету
Ойын шарттарын программалауды үйрету

1

0,5

0,5

Оқушылар ойын логикасын құра алады
Оқушылар ойын элементтерін басқара алады
Оқушылар ойын шарттарын программалай алады

4.7

Жоба: "Жадыны дамыту ойыны"

Алған білімдерді практикада қолдануды үйрету
Ойын механикасын жасауды үйрету
Тестілеу және қателерді түзетуді үйрету

1

0

1

Оқушылар толық жұмыс істейтін ойын жасай алады
Оқушылар ойын механикасын құра алады
Оқушылар қателерді тауып, түзете алады

№5 бөлім.

№5 Бөлімше. Барлығы 6 сағат: теория -3, тәжірибе -3

5.1

Жауапты веб-дизайн негіздері

Жауапты дизайн принциптерін түсіндіру
Media сұраныстарды қолдануды үйрету
Әр түрлі құрылғыларға бейімдеуді үйрету

1

0,5

0,5

Оқушылар жауапты дизайн принциптерін түсінеді
Оқушылар media сұраныстарды қолдана алады
Оқушылар сайтты әр түрлі құрылғыларға бейімдей алады

5.2

Көп беттік сайт жасау

Көп беттік сайттың құрылымын түсіндіру
Беттер арасындағы навигацияны құруды үйрету
Біркелкі стильдеуді сақтауды үйрету

1

0,5

0,5

Оқушылар көп беттік сайт құра алады
Оқушылар беттер арасында навигация жасай алады
Оқушылар біркелкі стильдеуді сақтай алады

5.3

Жоба: "Мектеп блогы" (топтық жоба)

Топта жұмыс істеу дағдыларын дамыту
Күрделі жобаны жоспарлауды үйрету
Жауапкершіліктерді бөлуді үйрету

1

0,5

0,5

Оқушылар топта тиімді жұмыс істей алады
Оқушылар күрделі жобаны жоспарлай алады
Оқушылар өз міндеттерін орындай алады

5.4

Сайтты жетілдіру және тестілеу

Тестілеу әдістерін түсіндіру
Қателерді табу және түзетуді үйрету
Сайтты оңтайландыруды үйрету

1

0,5

0,5

Оқушылар сайтты тестілей алады
Оқушылар қателерді тауып, түзете алады
Оқушылар сайтты оңтайландыра алады

5.5

Жобаны қорғауға дайындық

Презентация дайындау дағдыларын дамыту
Жобаны таныстыру техникаларын үйрету
Сұрақтарға жауап беруге дайындау

1

0,5

0,5

Оқушылар презентация дайындай алады
Оқушылар жобаны тиімді таныстыра алады
Оқушылар сұрақтарға нақты жауап бере алады

5.6

Қорытынды сабақ: жобалар таныстырылымы

Жобаларды таныстыру дағдыларын бекіту
Өзара бағалау дағдыларын дамыту
Кері байланыс беру мен қабылдауды үйрету

1

0,5

0,5

Оқушылар өз жобаларын сенімді таныстыра алады
Оқушылар басқа жобаларды объективті бағалай алады
Оқушылар конструктивті кері байланыс бере алады