Материалдарды шектеусіз жүктеңіз ҚМЖ, ашық сабақтар, презентациялар, көрнекіліктер, дидактикалық материалдар, авторлық бағдарламалар және тағы басқа 400 000-астам материалды шексіз жүктеп алғыңыз келе ме?
Толығырақ
Толығырақ
Тақырып бойынша 11 материал табылды

HTML тілі .(аш ти эм эл)

Материал туралы қысқаша түсінік
HTML тілі .(аш ти эм эл)ҚМЖ тапсырмалардың кода анық жазылған
Материалдың қысқаша нұсқасы

Қысқа мерзімді жоспары

Бөлім

Веб-жобалау

Педагогтың аты-жөні


Күні


Сынып 10 ә

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


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


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

HTML тілі .(аш ти эм эл)

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


10.4.2.1 web (веб)-парақшаларды

әзірлеуде HTML (аш ти эм эл)-

тегтерін қолдану

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

  1. Оқушыларға HTML тілінде кесте құруды үйрету.

  2. Кестенің құрылымын түсіндіру және HTML элементтерін дұрыс қолдануды көрсету.

  3. Оқушылардың функционалдық сауаттылығын дамыту, веб-қосымшалар мен сайттар құруға алғашқы қадам жасау.



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

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

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

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

Бағалау

Ресурстар

1-5 мин

Сабақтың тақырыбын түсіндіру, HTML тілінің негізгі құрылымын таныстыру.

Оқушылар мұқият тыңдайды, сұрақтар қояды.

Оқушылардың сұрақ қою белсенділігі.

Тақта, слайдтар.

5-10 мин

HTML тілінде кесте құрылымын түсіндіру: <table>, <tr>, <th>, <td>. Мысал көрсету.

Оқушылар HTML тегтерін жазып, мысалды қайталайды.

Түсінгенін тексеру, үлгі бойынша жұмыс.

Интербелсенді тақта, HTML редактор.

10-20 мин

Оқушыларға кесте құрудың қадамдарын түсіндіру. Тапсырмаларды тарату.

Оқушылар жеке жұмыс жасайды, HTML тілінде кесте құрады.

Жұмыс нәтижесін тексеру, қажет болса көмек көрсету.

Компьютер, HTML редактор.

20-30 мин

Топтық жұмыс: Оқушыларға топ ішінде үлкенірек кесте құру тапсырмасы беріледі (мысалы, студенттердің мәліметтерін кесте түрінде көрсету).

Топтық тапсырма:

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

  • Әр топқа ақпаратты таратып, кесте құрылымын бірігіп жасауды тапсыру.

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

  • Топта бірге жұмыс істеп, кестенің барлық элементтерін толықтырады (5 балл).

  • Барлық топ мүшелері тапсырмаға қатысады (5 балл).

  • Кестенің мазмұны мен құрылымы дұрыс болды (5 балл).



Жеке тапсырма:

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

Аты

Жасы

Қала

1

Әсет

25

Алматы

2

Айша

30

Нұр-Сұлтан

3

Сұлтан

28

Шымкент

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

  • HTML тегтерін дұрыс қолданды (5 балл).

  • Кестенің құрылымын сақтады (5 балл).

  • Бағандар мен жолдардың санын дұрыс белгілеген (5 балл).


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

Топ жұмысының нәтижесін бағалау.

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









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

Критерий

Балл

Топ жұмысын тиімді ұйымдастырды

5 балл

Кестенің барлық элементтері толық болды

5 балл

Топ мүшелері тапсырмаға белсенді қатысқан

5 балл



Критерий

Балл

Тегтерді дұрыс қолдану

5 балл

Кесте құрылымын сақтау

5 балл

Бағандар мен жолдардың саны дұрыс белгіленген

5 балл


Компьютер, HTML редактор.

30-40 мин

Жұптық жұмыс: Әр оқушы өзінің құрастырған кестесін жұптасып талқылайды, пікірлер алмасады.

Мақсаты: HTML тілінде құрылған кестелерді жұпта талқылау және дұрыс жасау дағдыларын дамыту. Тапсырма: Әр жұпқа бір кесте беріледі, онда 5 баған мен 5 жол болады. Оқушылар кестелерді талқылап, қажет болса өзгертулер енгізеді.

  • Тапсырма: Құжатқа ақпараттарды енгізіп, кестелерді жасайды.

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

  • Кестенің құрылымын жұпта талқылады (5 балл).

  • Әр оқушы өз идеяларын ұсынды (5 балл).

  • Талқылау нәтижесінде кесте дұрыс құрастырылды (5 балл).


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

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

Балл

40-45 мин

Сабақты қорытындылау, кері байланыс беру. Үй тапсырмасын хабарлау.

Оқушылардың сабақты қаншалықты меңгергенін сұрау, пікірлерін тыңдау.

Оқушы кесте құрылымын дұрыс құрады.

5 балл




HTML тегтерін дұрыс қолданады.

5 балл




Кестенің мазмұнын дұрыс орналастырады.

5 балл




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

5 балл




Тапсырмаларды уақытында орындап, көрсетілген нұсқауларды дұрыс орындайды.

5 балл

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

  1. HTML тілінде өзіңіз туралы мәліметтерді (аты-жөніңіз, жасыңыз, қалаңыз) көрсететін кесте құрыңыз.

  2. Кестеге кемінде 5 жол және 3 баған қосыңыз.

  3. Кестенің дизайнын жақсарту үшін, CSS көмегімен әр бағанның түсін өзгертіңіз.

Shape1

Shape2

Жұптық тапсырма:

Shape3

Жалпы бағалау критерийлері:

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





































1. Сабақ кестесін құру

Қадам 1: HTML құжатын ашып, негізгі құрылымды құрыңыз:

html

Копировать

<!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>

<table border="1">

<tr>

<th>Күн</th>

<th>1-ші сабақ</th>

<th>2-ші сабақ</th>

<th>3-ші сабақ</th>

<th>4-ші сабақ</th>

<th>5-ші сабақ</th>

</tr>

<tr>

<td>Дүйсенбі</td>

<td>Математика</td>

<td>Физика</td>

<td>Қазақ тілі</td>

<td>Биология</td>

<td>Химия</td>

</tr>

<tr>

<td>Сейсенбі</td>

<td>Информатика</td>

<td>География</td>

<td>Английский</td>

<td>Әдебиет</td>

<td>Дене шынықтыру</td>

</tr>

<tr>

<td>Бейсенбі</td>

<td>Математика</td>

<td>Химия</td>

<td>Тарих</td>

<td>Музыка</td>

<td>География</td>

</tr>

</table>

</body>

</html>

Қадам 2: Кодтың түсіндірмесі:

  • <table> — кестені бастайды.

  • <tr> — әр жолды білдіреді.

  • <th> — тақырып ұяшықтары, яғни кестенің басында болатын жазулар.

  • <td> — мәліметтер ұяшықтары, яғни әр сабақтың атауы.

Қадам 3: Құжатты браузерде ашып, кестенің дұрыс көрінуін тексеріңіз.

2. Дүкеннің тауарлар тізімі

Қадам 1: HTML құрылымын дайындаңыз:

html

Копировать

<!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>

<table border="1">

<tr>

<th>Тауар атауы</th>

<th>Бағасы (тг)</th>

<th>Мөлшері</th>

<th>Сипаттамасы</th>

</tr>

<tr>

<td>Смартфон</td>

<td>150,000</td>

<td>1 дана</td>

<td>6 дюйм, 128 ГБ жады</td>

</tr>

<tr>

<td>Ноутбук</td>

<td>300,000</td>

<td>1 дана</td>

<td>15.6 дюйм, Intel Core i7</td>

</tr>

<tr>

<td>Құлаққап</td>

<td>15,000</td>

<td>1 жұп</td>

<td>Беспроводной, шумоподавление</td>

</tr>

</table>

</body>

</html>

Қадам 2: Кодтың түсіндірмесі:

  • Кестеде тауардың атауы, бағасы, мөлшері және сипаттамасы көрсетілген.

  • <table border="1"> кестенің жиектері болатынын көрсетеді.

  • <th> — кестенің тақырыптарын көрсетеді, ал <td> — әрбір ұяшықтағы мәліметтерді орналастырады.

Қадам 3: Құжатты браузерде ашып, дүкеннің тауарлар тізімінің дұрыс көрінуін тексеріңіз.

Shape4

Дүкеннің тауарлар тізімі

Тауар атауы

Бағасы (тг)

Мөлшері

Сипаттамасы

Смартфон

150,000

1 дана

6 дюйм, 128 ГБ жады

Ноутбук

300,000

1 дана

15.6 дюйм, Intel Core i7

Құлаққап

15,000

1 жұп

Беспроводной, шумоподавление





3. Отбасы мүшелері туралы мәлімет

Қадам 1: HTML құжатын ашып, отбасы мүшелері туралы кесте құрыңыз:

html

Копировать

<!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>

<table border="1">

<tr>

<th>Аты-жөні</th>

<th>Жасы</th>

<th>Қызметі</th>

<th>Сүйікті ісі</th>

</tr>

<tr>

<td>Әкем</td>

<td>45</td>

<td>Дәрігер</td>

<td>Балық аулау</td>

</tr>

<tr>

<td>Анам</td>

<td>42</td>

<td>Мұғалім</td>

<td>Кітап оқу</td>

</tr>

<tr>

<td>Інім</td>

<td>18</td>

<td>Студент</td>

<td>Спортпен шұғылдану</td>

</tr>

</table>

</body>

</html>

Қадам 2: Кодтың түсіндірмесі:

  • <h1> тақырып, яғни отбасы мүшелері туралы ақпарат.

  • <table border="1"> кестені бастайды және оны визуалды түрде көруге мүмкіндік береді.

Қадам 3: Құжатты браузерде ашып, отбасы мүшелері туралы мәліметтің дұрыс көрінуін тексеріңіз.

Shape5







4. Спорттық жарыс нәтижелері

Қадам 1: HTML құжатын ашып, спорттық жарыс нәтижелерін көрсететін кесте жасаңыз:

html

Копировать

<!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>

<table border="1">

<tr>

<th>Ойыншы аты</th>

<th>Команда</th>

<th>Голдар саны</th>

<th>Позиция</th>

</tr>

<tr>

<td>Әлихан</td>

<td>Алматы</td>

<td>2</td>

<td>Шабуылшы</td>

</tr>

<tr>

<td>Рахман</td>

<td>Астана</td>

<td>1</td>

<td>Қорғаушы</td>

</tr>

<tr>

<td>Сұлтан</td>

<td>Шымкент</td>

<td>3</td>

<td>Шабуылшы</td>

</tr>

</table>

</body>

</html>

Қадам 2: Кодтың түсіндірмесі:

  • Спорттық жарыс нәтижелері туралы ақпаратты көрсететін кесте құрылды.

  • Әрбір ұяшықта ойыншының аты, командасы, голдар саны және оның позициясы көрсетілген.

Қадам 3: Құжатты браузерде ашып, спорттық жарыс нәтижелерінің дұрыс көрінуін тексеріңіз.



Спорттық жарыс нәтижелері

Ойыншы аты

Команда

Голдар саны

Позиция

Әлихан

Алматы

2

Шабуылшы

Рахман

Астана

1

Қорғаушы

Сұлтан

Шымкент

3

Шабуылшы



Shape6

Отбасы мүшелері

Аты-жөні

Жасы

Қызметі

Сүйікті ісі

Әкем

45

Дәрігер

Балық аулау

Анам

42

Мұғалім

Кітап оқу

Інім

18

Студент

Спортпен шұғылдану





Қорытынды:

  • HTML кестелері <table>, <tr>, <th>, және <td> тегтері арқылы құрылып, мәліметтер нақты және көрнекі түрде беріледі.

  • Тегтерді дұрыс қолдану, кестелерді ұйымдастыру және көрнекі етіп көрсету — бұл HTML тіліндегі негізгі дағдыларды дамытуға көмектеседі.

Дүкеннің тауарлар тізімі

Тауар атауы

Бағасы (тг)

Мөлшері

Сипаттамасы

Смартфон

150,000

1 дана

6 дюйм, 128 ГБ жады

Ноутбук

300,000

1 дана

15.6 дюйм, Intel Core i7

Құлаққап

15,000

1 жұп

Беспроводной, шумоподавление



Жүктеу
bolisu
Бөлісу
ЖИ арқылы жасау
Файл форматы:
docx
19.01.2025
158
Жүктеу
ЖИ арқылы жасау
Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз
Қазақстандағы ең үлкен материалдар базасынан іздеу
Сіз үшін 400 000 ұстаздардың еңбегі мен тәжірибесін біріктіріп, ең үлкен материалдар базасын жасадық. Төменде керек материалды іздеп, жүктеп алып сабағыңызға қолдана аласыз
Материал жариялап, аттестацияға 100% жарамды сертификатты тегін алыңыз!
Ustaz tilegi журналы министірліктің тізіміне енген. Qr коды мен тіркеу номері беріледі. Материал жариялаған соң сертификат тегін бірден беріледі.
Оқу-ағарту министірлігінің ресми жауабы
Сайтқа 5 материал жариялап, тегін АЛҒЫС ХАТ алыңыз!
Қазақстан Республикасының білім беру жүйесін дамытуға қосқан жеке үлесі үшін және де Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық материалыңызбен бөлісіп, белсенді болғаныңыз үшін алғыс білдіреміз!
Сайтқа 25 материал жариялап, тегін ҚҰРМЕТ ГРОМАТАСЫН алыңыз!
Тәуелсіз Қазақстанның білім беру жүйесін дамытуға және білім беру сапасын арттыру мақсатында Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық жұмысын жариялағаны үшін марапатталасыз!
Министірлікпен келісілген курс саны 12