Тақырып бойынша 31 материал табылды

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

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

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

Материалдың қысқаша нұсқасы

Келісемін:_________________

Бөлім	Веб-жобалау
Педагогтың аты-жөні	Сыдыков Б.
Күні	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-ді практикада қолдануды үйреніп, өз бетімен веб-бет жасай алады.

Жүктеу

Бөлісу

ЖИ арқылы жасау

Файл форматы:

docx

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

14.02.2025

191

Жүктеу

ЖИ арқылы жасау

Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз