Бөлім:

Ақпараттық жүйелер және WEB-жобалау

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

Идрисова Айсауле Жумабаевна

Күні:

04.08.2023 ж

Сынып: 10

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

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

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

Web-жобалау

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

10.4.2.1 web (веб)-парақшаларды жасауда HTML (аш ти эм эл)-тегтерін қолдану

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

• Web (веб)-парақшаларды жасауда HTML тегтерін қолдану;

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

• Web (веб)-парақшаларды жасауда HTML тілінің негізгі және ішкі элементтерін басқару тегтерін қолданады.

ЕБҚ

Web (веб)-парақшаларды жасауда HTML тегтерімен танысады.

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

Білу және түсіну, қолдану

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

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

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

ЕБҚ оқушы әрекеті

Бағалау

Ресурстар

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

1 минут

Ұйымдастыру

• Сыныппен амандасу.

• Сыныпты түгелдеу

• Сынып назарын сабаққа аудару

Атмосфералық орта қалыптастыру

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

«Пазл» әдісі.

ЕБҚ ететін оқушыға мұғалім сабақ бойына қолдау көрсетіп отырады.

• Мұғаліммен амандасады.

• Кезекші сынып туралы ақпарат береді.

• Зейіндерін сабаққа аударады

Оқушылар топқа бөлінеді.

1-топ

2-топ

• Мұғаліммен амандасады.

Кезекші сынып туралы ақпарат береді.

Жеке жұмыс берледі.

ҚБ: жұлдызша

Мұғалім қолдау сөздері: Жарайсың!

Керемет!

Тамаша!

Үлестірме қағаз

10 минут

Өткен сабақ материалдарын еске түсіру мақсатында үй жұмысын learningapps.org бағдарламасы арқылы тексереді.

1. CSS деген не?

Жауабы: (Cascading Style Sheets –каскадты стильдер парақтары) –

браузердегі деректердің көрсетілуін анықтайтын стандарт

2. Web бетте кесте құруға арналған тегті атаңыз?

Жауабы: Кесте тұрғызу <TABLE> және </TABLE> тегтері көмегімен орындалады

3. Неліктен web-дизайн әлемінде CSS қолдану тиімді?

Жауабы:CSS бұл контентті пішімдеу, көркемдеу үшін, дизайн, стиль беру үшін қолданылады.

4. HTML және CSS-ті қалай байланыстырамыз?

Жауабы:HTML тілі мен бірге CSS-ті қолданудың үш түрі бар.

<LINK>, <DIV>, <SPAN> тегтері

5. Сілтеме қандай тег көмегімен ұйымдастырылады?

Жауабы: Cілтемеге жауапты HTML тегтерінің бірі - ашық тег <A> және жабық тег </A> тегтері

6. CSS-ті қандай кеңейтіліммен сақтаймыз?

Жауабы: style.css деп сақтаймыз.

Оқушылар Үй жұмысына learningapps.org бағдарламасы арқылы жауап береді.

- web-дизайн әлемінде CSS бағдарламасын қолдану қаншалықты тиімді екенін біледі;

-HTML және CSS байланысын ажыратады.

Дескриптор

-CSS бағдарламасының анықтамасын айтады;

-Web бетте кесте тұрғызуға арналған тегті атайды.

«Бағдар-шам» арқылы бағалау

Оқулық

Интер-белсенді тақта, (слайд)

https://learningapps.org/watch?v=pysnkakrj23

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

1 минут

10 минут

7 минут

«Ой түрткі» әдісі арқылы сабаққа кіріспе жасаймын. Тақырыпты анықтау мақсатында экранға тақырыпқа сәйкес сурет беріледі, соған қарап тақырыпты анықтайды. Сурет арқылы, сабақтың тақырыбын табады. Тақырып анықталғаннан кейін, мұғалім оқушыларға сабақтың мақсаттарымен және бағалау критерийлерімен таныстырады.

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

• Сабақтың тақырыбын дәптерге жазады.

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

ҚБ:

«Қол шапалақ-тау »

«Информатика» оқулығы, «Арман-ПВ», §19

(слайд)

Жаңа сабаққа кіріспе.

HTML (Hyper Text Markup Language) – гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды. HTML тілінің бастапқы мәтінді белгілейтіін командалары тэг (tag) деп аталады.

Бейнекөрсетілім

-Мұғалімді тыңдайды, тақырып бойынша мұғаліммен байланысқа түседі;

- HTML тілінің негізгі тег атауларын сипаттай алады;

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

HTML тіліндегі әрбір тэг бір арнаулы қызмет атқаратынын дәптерге жазады

Презентация, тақта, кесте

https://youtu.be/4FFgH2P3mDs

Топтық жұмыс

«Кластер» әдісі. Топ бойынша балаларға тақырыптар беріледі. Сол тақырыпқа сәйкес балалар постер құрып, соны қорғап шығады.

1-топ. HTML тілінің негізгі тег атауларын сипаттау

2-топ. HTML тілінде құжаттың ішкі элементтерін басқару тегтерін сипаттау

EБҚЕ оқушыға тапсырма: Жеке жұмыс. https://quizlet.com/ru/mission сайтынан берілген тапсырмаларын орындайды.

1.Web-бетке суретті қою үшін

Ж: <IMG> тегі қолданылады. Web-шолушы суретті тегі кездескен орынға жүктейді.

2. Веб-бетте дыбыс файлын қосатын тег

Ж: <audio src="URL"></audio>
<audio> <source src="URL"> </audio>

3. Веб-бетте бейне файлын қосатын тег

Ж: <video>
<source src="URL">
</video>

4. IMG тегінің атрибуттары

Ж: align, alt, border, height, hspace, ismap, vsmap, width

5.audio тегінің атрибуттары

Ж: autoplay, controls, loop, preload, sr

6. video тегінің атрибуттары

Ж: autoplay, controls, height, width, loop, poster, src

Оқушылар постер қорғайды.

Дескриптор:

- Web бетке сурет қою тегтері мен атрибуттарын анықтайды;

- Web бетке аудио қою тегтері мен атрибуттарын анықтайды;

- Web бетке видео қою тегтері мен атрибуттарын анықтайды.

Дескриптор

1. -Web бет құру барысында қолданылатын тегтерді анықтайды

Белгілі атауларды дұрыс-бұрыстығын анықтайды.

ҚБ: Екі жұлдыз бір тілек

6 сұраққа – 6 балл

ДК, ноутбук

А3 форматы

Бағалау: Бағалау парағы

https://quizlet.com/816092564/web-%D0%B2%D0%B5%D0%B1-%D0%BF%D0%B0%D1%80%D0%B0%D2%9B%D1%88%D0%B0%D0%BB%D0%B0%D1%80%D0%B4%D1%8B-%D0%B6%D0%B0%D1%81%D0%B0%D1%83%D0%B4%D0%B0-html-%D1%82%D0%B5%D0%B3%D1%82%D0%B5%D1%80%D1%96%D0%BD-%D2%9B%D0%BE%D0%BB%D0%B4%D0%B0%D0%BD%D1%83-flash-cards/?i=57we11&x=1jq6

5 минут

Оқушылардың жекелей білімін тексеру үшін learningАpps.org «Сәйкестендіру» әдісімен жұмыстанады. Берілген ақпаратты ретімен сәйкестендіреді

EБҚЕ оқушыға тапсырма:

learningАpps.org «Сәйкестендіру» әдісімен жұмыстанады .

Дескриптор:

-Кестеге не суретке тақырып бере алады;

-Барлық параққа фондық дыбыс қоя біледі.

Дескриптор:

-Құжаттың денесін анықтай алады

ҚБ: «Жұлдызша» әдісі арқылы бағаланады.

3 балл.

Әр дұрыс 3 жауапқа – 1 балл.

Ноутбук

https://learningapps.org/watch?v=po87adpnc23

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

5 минут

1 минут

«Кубизм» әдісі арқылы кері байланысын жүргізіледі.

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

- HTML тілінде құжаттың ішкі элементтерін басқару тегтері

- Веб-бетте дыбыс файлын қосатын тег

- Web бетке видео қою тегтері мен атрибуттарын ата.

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

Дескриптор:

- HTML тілінде құжаттың ішкі элементтерін басқару тегтерін сипаттай алады;

- Веб-бетте дыбыс файлын қосатын тегті атай алады.

- Web бетке видео қою тегтері мен атрибуттарын айтады.

1-10 балдық формативті бағалау

Мұғалім бағалауын тыңдайды.

Интерактивті тақта, стикер.

Үй тапсырмасы:

• §19 тақырыпты оқу

• терминдерді жаттау

«Үй тапсырмасы» 109-бет

Үй тапсырмасын жазады

Оқулық, 102-107 бет