Материалдар / HTML тілінде практикалық жұмыс

«Ustaz tilegi» - Республикалық кәсіби педагогтар қауымдастығына қосылып, сайттағы 381 569 материалды тегін жүктеп алу мүмкіндігіне ие болыңыз

Толығырақ

HTML тілінде практикалық жұмыс

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

HTML тілінде практикалық жұмыстар жасау жолы. жұптық, топтық жұмыстар. Бұл сабақ жоспары оқушылардың функционалдық сауаттылығын дамытуға бағытталған.

Сыдыков Бек Арыстамбекұлы

14 Ақпан 2025

141

0 рет жүктелген

Информатика Ашық сабақ 10 сынып

450 ₸

Бүгін алсаңыз
+23 бонус беріледі
Бұл не?

Бүгін алсаңыз +23 бонус беріледі Бұл не?

Бұл бетте материалдың қысқаша нұсқасы ұсынылған. Материалдың толық нұсқасын жүктеп алып, көруге болады

Келісемін:_________________

Бөлім	Веб-жобалау
Педагогтың аты-жөні	Сыдыков Б.
Күні	29.01.2025ж.
Сынып 10 Ә	Қатысушылар саны: Қатыспағандар саны:
Сабақтың тақырыбы	HTML тілінде практикалық жұмыстар
Оқу бағдарламасына сәйкес оқыту мақсаттары:	10.4.2.1 web-беттерді жасауда HTML тегтерін қолдану
Сабақтың мақсаты	 HTML тілінің құрылымын, негізгі тегтерін түсіну және практикалық жұмыс жасау.  Веб-беттің қарапайым құрылымын құру арқылы функционалдық сауаттылықты дамыту.  Жұптық және топтық жұмыстар арқылы оқушылардың шығармашылық және сыни ойлау қабілеттерін арттыру.

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

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

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

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

Бағалау

Ресурстар

Ұйымдастыру

Сәлемдесу, түгендеу
"Сиқырлы сөз" әдісі. Әр оқушы веб-әзірлеуге байланысты бір позитивті сөз айтып, сабаққа жақсы көңіл-күй қалыптастырады.
Сабақтың мақсаты мен күтілетін нәтижелер түсіндіріледі.

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

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

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

Үш шапалақ әдісі арқылы бағалау

Интерак/тақта

Бейнематериал

Презентация

Жаңа сабақты меңгерту

«Миға шабуыл» әдісі

HTML дегеніміз не?

HTML (Гипермәтінді белгілеу тілі) – веб-беттерді құруға арналған белгілеу тілі.

HTML құрылымы:

<!DOCTYPE html>

<html>

<head>

<title>Менің алғашқы веб-бетім</title>

</head>

<body>

<h1>Сәлем, HTML!</h1>

<p>Бұл менің алғашқы веб-бетім.</p>

</body>

</html>

Web-беттегі графика

Суреттiк бейнелер web-беттерді әшекейлеп безендiруде кезiнде маңызды рөл атқарады. суреттер HTML құжаттары нан бөлек орналасқан

жеке бумаларда сақталады, алайда олар браузер арқылы web-беттердің iшiнде бейнеленедi.

Суретті орнату үшін <IMG> элементін қолданады

мысалы, мына жол:

<img src="picture.gif">

<img src="astana. jpg ">

<img src="tu.png" alt="Қазақстан туы" width="140" height="90">

Мұғалімді тыңдайды

«Ойлан, жұптас, бөліс» әдісі

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

Негізгі HTML тегтері:
✅ <html> – құжаттың басталуы
✅ <басшы> – метаақпараттар, тақырып
✅ <тақырып> – браузердегі бет атауы
✅ <дене> – негізгі мазмұн
✅ <н1> - <н6> – тақырыптар
✅ <p> – абзац
✅ <сурет> – сурет қосу
✅ <а> – сілтемелер жасау

? Мысал:

<h2>HTML сабақтары</h2>

<p>Бүгін біз HTML тілін үйренеміз!</p>

Оқушының сабаққа белсенді болуына байланысты сөзбен, шапалақпен бағалау

Ауызша мадақтау, ынталандыру

2-ұпай

Оқулық

Интерак/тақта

Бейнематериал

Презентация

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

? Тапсырма: Берілген кодты толықтырыңыз және өз атыңыз жазылған веб-бет жасаңыз.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Оқушылар жұптасып тапсырманы орындайды

? Дескрипторлар:
✅ HTML құрылымын дұрыс қолданады.
✅ Өз аты мен қосымша мәтінді жазады.
✅ Кодты браузерде іске қосады.

"Жұлдызша" әдісі (жұптар бір-бірінің жұмысын бағалайды).

2-ұпай

Компьютер, интернет, VS Code немесе Notepad++.

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

? Тапсырма:

Әр топ өз веб-бетін жасайды.
1-топ: Қарапайым ақпараттық бет (мәтін, тақырып, абзац).
2-топ: Сурет және сілтемелер қосылған бет.
3-топ: Тізімдер мен кестелер бар бет.

Топтар плакатта бірігіп тапсырманы орындайды.

Дескрипторлар:
✅ HTML құрылымын дұрыс қолданады.
✅ Веб-беттің мазмұнын толықтырады.
✅ Топтық жұмысқа белсенді қатысады.

"Бағдаршам" әдісі (жасыл – толық түсіндім, сары – сұрақтар бар, қызыл – қиын болды).

4-ұпай

Компьютер,

интернет,

плакат

Notepad++.

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

Бекіту сұрақтары

HTML дегеніміз не?
HTML құрылымында қандай негізгі тегтер бар?
Кесте жасау үшін қандай тег қолданылады?
Сілтеме жасау үшін қай тег қолданылады?

Жауаптары

✅ Веб-беттерді құруға арналған белгілеу тілі.

✅ <html>, <head>, <title>, <body>, <h1>, <p>.

✅ <table>.

✅ <a ="...">.

Бас бармақ арқылы бағалау

2-ұпай

Интерак/тақта

Кері байланыс

✅ "Басбармақ" әдісі – Оқушылар тақырыпты қаншалықты түсінгенін көрсетеді.
✅ "Кері байланыс парағы" – Оқушылар сұрақтарға жауап береді:

Маған сабақта не ұнады?
Қай тапсырма қиын болды?
Қандай сұрақтар қалды?

Оқушылар кері байланыс парағын толтырып, тақтаға жапыстырады

Мұғалім ауызша кері байланыс береді.

Интерак/тақта

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

Өз қалауыңыз бойынша қарапайым веб-бет жасаңыз.

Тақырып (h1)
Абзац (p)
Сурет (img)
Сілтеме (a)

✅ Тапсырманы HTML файл ретінде жаса

Қорытынды

Бұл сабақ жоспары оқушылардың функционалдық сауаттылығын дамытуға бағытталған.

Цифрлық сауаттылық: веб-бет құру дағдыларын меңгеру.
Оқу сауаттылығы: ақпаратты талдау және дұрыс қолдану.
Логикалық ойлау: HTML тегтерін дұрыс пайдалану.

? Сабақ барысында:

Теориялық түсініктеме берілді.
Жұптық және топтық жұмыстар жүргізілді.
Практикалық тапсырмалар орындалды.
Бекіту сұрақтары арқылы тақырыпты қорыту жүзеге асырылды.
Кері байланыс алынып, бағалау жүргізілді.
Үй тапсырмасы берілді.

? Нәтиже:
Оқушылар HTML-ді практикада қолдануды үйреніп, өз бетімен веб-бет жасай алады.

Материал жариялап, аттестацияға 100% жарамды сертификатты тегін алыңыз!

Ustaz tilegi журналы министірліктің тізіміне енген. Qr коды мен тіркеу номері беріледі. Материал жариялаған соң сертификат тегін бірден беріледі.

Оқу-ағарту министірлігінің ресми жауабы

Сайтқа 5 материал жариялап, тегін АЛҒЫС ХАТ алыңыз!

Қазақстан Республикасының білім беру жүйесін дамытуға қосқан жеке үлесі үшін және де Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық материалыңызбен бөлісіп, белсенді болғаныңыз үшін алғыс білдіреміз!

Сайтқа 25 материал жариялап, тегін ҚҰРМЕТ ГРОМАТАСЫН алыңыз!

Тәуелсіз Қазақстанның білім беру жүйесін дамытуға және білім беру сапасын арттыру мақсатында Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық жұмысын жариялағаны үшін марапатталасыз!

Ресми байқаулар тізімі

Республикалық байқауларға қатысып жарамды дипломдар алып санатыңызды көтеріңіз!