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

Бөлім:

Web - жобалау

Педагогтің Т.А.Ә. (болған жағдайда)

Айназар Гулзия Шаштыбаевна

Күні:

Сынып: 10

Қатысушылар саны:

Қатыспағандар саны:

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

HTML wеb – сайттарын әзірлеу әдістері

Оқу бағдарламасына сәйкес оқыту мақсаттары

10.4.2.1 web - парақшаларды әзірлеуде HTML - тегтерін қолдану.

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

(білу және түсіну, қолдану, жоғары ойлау дағдысы)

Web – сайттың алғашқы бетін әзірлеу үшін HTML-дің негізгі «body», «title», «head», «bgcolor» тегтерін қолданады.

Бағалау критерийлері:

(білу және түсіну, қолдану, жоғары ойлаудағдысы)

Құжаттың тақырыбын , беттің негізгі денесін, фонға, текстке түс беретін тегтерді қолданып, web-бет жасайды.

Ойлау дағдысының деңгейі

Қолдану

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

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

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

ЕБҚ әрекеті

Бағалау

Ресурстар

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

8 мин

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

О й қозғау. «Фишбоун» әдісі. Оқушылар өткен сабақты пысықтау мақсатында, плакатқа балықтың қаңқасының суретін салады. Жоғарғы қабырғаларына сұрақтар жазылады, төменгі қабырғаларына жауаптар жазылады. Жауаптар ортақ талданады.

Жаңа сабаққа кіріспе. «Суреттер сөйлейді» әдісі. Тақтада суреттер көрсетіледі, оқушылар суреттерге қарап түсініктеме береді. Жаңа сабақтың тақырыбымен және мақсатымен танысады.

Мұғаліммен амандасады, психологиялық ахуал қалыптастырады

Сұрақтарға жауап береді.

Тақтада көрсетілген суреттерге қарап жаңа тақырыпты табады. Тақырыпты дәптерлеріне жазады.

Сыныптастарымен бірге мұғаліммен амандасады, психологиялық ахуал қалыптастырады.

Барлық оқушылармен бірге жауаптарын қайталайды. Жаңа тақырыпты дәптеріне жазады.

Мадақ сөздер

Интерактивті тақта

Плакат, маркер

Интерактивті тақта, презентация

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

25 мин

«Кинометафора» әдісі. Жаңа материалды меңгерту мақсатында, оқушылар youtube каналынан HTML-дің тегтері туралы бейнематериалдарды көреді, тегтердің атқаратын қызметімен танысады.

Тапсырма GoFormative бағдарламасында тегтерді атқаратын қызметтерімен сәйкестендіреді.

Сараланған деңгейлік тапсырмалар.

А деңгей

Тапсырма. Блокнот программасын ашып, бос құжатты Ахмет.html деген атпен сақтаңдар. <Нead>, <body>, <title> тегтерін қолдана отырып, тақырыбы «Ахмет – ұлт ұстазы» деген web бет ашылатын программа кодын жазыңдар.

Ерекше білімді қажет ететін оқушы үшін.

GoFormative бағдарламасында тегтердің реттілігін анықтайды

B деңгей

Тапсырма. А деңгейінде орындаған Ахмет.html деген құжатты ашып, берілген мәтінді енгізіңдер. Берілген мәтіннің тақырыбы web -беттің ортасына орналастыр.

Ерекше білімді қажет ететін оқушы үшін.

Wordwall платформасында берілген тегтердің жұпты және жұпсыз екенін анықтайды.

С деңгей. Функционалдық сауаттылыққа арналған тапсырма:

«Мектеп сайты»

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

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

Тақырыпқа байланысты тапсырманы орындайды

Блокнот программасын ашып, берілген тапсырманы орындайды

Компьютерде Ахмет.html деп сақталған құжатты ашып, берілген мәтінді өңдеп жазады

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

Бейнематериалмен танысады

Мұғалімнің көмегімен GoFormative бағдарламасында берілген тапсырманы орындайды

Wordwall платформасында берілген тапсырманы орындайды

“БББ” әдісі.

Оқушылар жұппен жұмыс жасайды. Жаңа тақырыпты талқылап мына сұрақтарға жауап береді.

Дескриптор.

-тегтерді атқаратын қызметімен байланыстырады

«Әуе шары» әдісі арқылы бағалау

Дескприптор:

• Блокнотта бос құжат ашады

• Тегтерді қолдана отырып, web -бет жасадйы

«Әуе шары» әдісі арқылы бағалау

Дескриптор.

• Тегтерді реттілігімен орналастырады

Дескриптор:

- Ахмет.html құжатын ашады;

-мәтіннің тақырыбын web беттің ортасына орналастырады.

Дескриптор:

-жұпты тегтерді анықтайды

-жұпсыз тегтерді анықтайды

Дескриптор:

-<body> тегін анықтайды

-<bgcolor> тегін анықтайды

-<font> тегін анықтайды

-<center> тегін анықтайды

-<title> тегін анықтайды

-<head> тегін анықтайды.

«Әуе шары» әдісі арқылы бағалау

https://www.youtube.com/watch?v=ctIK1mbK7VI (қосымша 1)

интерактивті тақта, презентация

(қосымша 2)

https://app.formative.com/formatives/64e5e37048e6cf6542213398?preview=1&embedded=1

(қосымша 3)

https://app.formative.com/formatives/64e5e37048e6cf6542213398?preview=1&embedded=1

(қосымша 4)

https://adebiportal.kz/kz/authors/view/2236

(қосымша 5)

https://wordwall.net/ru/resource/59605390/%d1%82%d0%b5%d0%b3%d1%82%d0%b5%d1%80

(қосымша 6)

https://wordwall.net/ru/resource/59608949/%D1%82%D0%B5%D0%B3%D1%82%D0%B5%D1%802

(қосымша 7)

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

12 мин

Сабақты қорытындылау мақсатында оқушылар gimkit платформасында тест тапсырмасын орындайды.

Кері байланыс. «БББ» әдісі.

Үйге тапсырмаcы: 132 бет, 6 тапсырма

Оқушылар тест сұрақтарына жауап береді.

Оқушылар кестедегі «нені білдім?» деген бағанды толтырады.

Мұғалім көмегімен тест сұрақтарына жауап береді.

Берілген кестені толтырады

Оқушылар өздерін бағалайды

https://www.gimkit.com/practice/64e74ffbb45658002bf4d0e1

(қосымша 8)

Таратпа парақтар