Курс Олимпиада Дайын ҚМЖ ЖИ көмекші Материалдар
Аттестация Іс-шаралар Байқау Турнир Орталық туралы
Материалдар Журнал Көпшілік талқылауына арналған
білім беру бағдарламаларының белсенді жобалары Орталық туралы
ЖИ көмекші
Қауымдастық

Веб бетке сурет қою ашық сабақ 10 сынып

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

Веб бетке сурет қою ашық сабақ 10 сынып

Материал туралы қысқаша түсінік
Веб бетке сурет қою дайын ашық сабақ
Материалдың қысқаша нұсқасы

БЕКІТЕМІН: Р.Барпаяқова.

Бөлім

Веб-жобалау

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


Күні:

Қатысушылар саны: Қатыспағандар саны:

Сынып


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

Веб бетке сурет қою.

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

10.4.2.2 web (веб)-парақшаларды жасауда CSS (си эс эс) қолдану.

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

HTML тілінің графикалық мүмкіндіктерін қолданып, веб-бет жобасын безендіре алу

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

  • Web-бетке суретті қою;

  • Сурет қою тегінің атрибуттары жұмысын білу;

  • Суреті бар фонды жасай алу.

Құндылықтарға баулу:

Жасампаздық және жаңашылдық.

  • Тапсырмаларға шығармашылықпен қарай білу, өз шешімдері мен идеяларын ұсына білу;

  • Оқу есептерін шешудің ең оңтайлы тәсілдерін таба білу, ол үшін жаңаларын қолдану және бұрыннан таныс алгоритмдерді біріктіру, оларды стандартты емес есептерді шешуге қолдана алу;

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

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

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

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

Бағалау

Ресурстар

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







5 мин














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


7 мин







































































Бекіту

5 мин











3 мин





















15 мнн































5мин

1.Оқушылармен амандасу, оларды түгендеу.



2.Психологиялық көңіл-күйді көтеру үшін «Кім жылдам» әдісі арқылы оқушылардың зейінін шоғырландыру.

Ол үшін, шеңбер болып тұрып, «3»ке бөлінетін санға келгенде «қол шапалақтау» керек.

Мысалы: 1, 2, 3 – орнына қол шапалақтау,

4, 5, 6 – орнына қол шапалақтау,

7, 8, 9 – орнына қол шапалақтау,




3. Өткен сабақты еске түсіру мақсатында тест тапсырмасын орындау.






4. Жаңа сабақ.

Сурет – изображение- Image

Сілтеме – ссылка – link

Адрес – адрес - addres

Web-бетке сурет қою.

Бетке сурет қою үшін <img> жұпсыз тегі қолданылады. Ол BODY элементінің кез-келген жерінде орналасуы мүмкін. Стандартты сурет форматтары GIF, PNG және JPEG болып табылады:

  • JPEG – фотосуреттерді немесе мәтіні жоқ сұр реңктегі суреттерді сақтау үшін қолданылады;

  • GIF – анимация үшін қолданылады;

  • PNG – қалған суреттерге арналған формат (иконкалар, батырмалар және т.б.)

Бірақ бұл тег міндетті түрде src, alt атрибуттарымен қатар қолданылады. Бұл тегтің бірінші, ең маңызды атрибуты – src атрибуты болып табылады. (ағылшын тіліндегі source – дереккөзі сөзінің қысқартуы). Бұл атрибут сурет файлының орналасқан жерін көрсетеді.

HTML бетке суретті қою коды мына түрде болады:

<img src=“foto.jpg”>

МРисунок 1 ысалы:

<html>

<head>

<title> Abai </title>

</head>

<body>

<img src="Abay.jpg">

</body>

</html>



Сурет файлының адресін көрсетудің кейбір мысалдарын қарастырайық:

  • <img src=“myfoto/foto.jpg”> - мұндай жазба біздің html құжатымыз орналасқан директорияда foto.jpg файлы орналасқан myfoto бумасының бар екенін білдіреді.

  • <img src=“../foto.jpg”> - фотосурет құжаттан бір деңгей жоғары орналасқан.

  • <img src=“../foto.jpg”> - фотосурет құжаттан бір деңгей жоғары орналасқан.


Height (биіктігі), width (ені) атрибуттары

Сурет атрибуттары

Форматы

Сипаттамасы

height

<img src=“foto.jpg” height=“110”>

Браузер терезесінің ішіндегі суреттің биіктігін (тігінен өлшемін) пиксельмен немесе процентпен береді

width

<img src=“foto.jpg” width=“200”>

Браузер терезесінің ішіндегі суреттің енін (көлденеңінен өлшемін) пиксельмен немесе процентпен береді

Мысалы:

<html>

<head>

<title> Abai </title>

</head>

<body>

<h2> HTML фото өлшемі</h2>

<img src="Abay.jpg">

<img src="Abay.jpg" width="150" height="200">

<img src="Abay.jpg" width="20%" height="40%">

</body>

</html>


Рисунок 5







Суреті бар фонды жасау үшін- фон ретінде пайдаланылатын графикалық файл backgroup атрибуты арқылы <BODY> тегінде көрсетіледі:

<body backgroup =”fon.jpg”>

5.Сабақты бекіту. Жеке, жұптық

Қалыптастырушы бағалау тапсырмасы

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

10.4.2.2 web (веб)-парақшаларды жасауда CSS (си эс эс) қолдану.

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

  • Web-бетке суретті қою;

  • Сурет қою тегінің атрибуттары жұмысын білу;

Атрибуттар мен тегтер сипаттамаларын сәйкестендіру.

№1қосымша




6.Сергіту сәті.

  • Тапсырмаларға шығармашылықпен қарай білу, өз шешімдері мен идеяларын ұсына білу;





7.Компьютермен практикалық жұмыс. № 1-тапсырма.

<html>

Рисунок 3 <head>

<title> Abai </title>

</head>

<body>

<img src="Abay.jpg">

</body>

</html>



№ 2-тапсырма.

<html>

<head>

<title> Abai </title>

</head>

<body>

<h2> HTML фото өлшемі</h2>

<img src="Abay.jpg">

<img src="Abay.jpg" width="150" height="200">

<img src="Abay.jpg" width="20%" height="40%">

</body>

<Рисунок 4 /html>






№ 3-тапсырма.

<html>

<head>

<title> Abai </title>

</head>

<body background="astana.jpg">

</body>

</html>

Дискриптор

  • Дербес компьютерді қосады;

  • Берілген тапсырмаларды реттілікпен орындайды;

8. Сабақты қорытындылау мақсатында «Word wall» платформасында сұрақтарға жауап беру. https://wordwall.net/resource/38224992/html-%d1%82%d1%96%d0%bb%d1%96%d0%bd%d0%b4%d0%b5-%d1%82%d0%b5%d1%81%d1%82-%d1%81%d2%b1%d1%80%d0%b0%d2%9b%d1%82%d0%b0%d1%80%d1%8b


10.Кері байланыс: Сабақтан алған әсерін білдіреді.


11.Үй тапсырмасы. Оқулық 147-152 беттер.

Қазақстанның тарихи ескерткіштері жайлы мәтін және суреттермен бейнеленген weб-бет құрыңдар

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


2.Шеңбер болып тұрып,

«3»ке бөлінетін санға келгенде «қол шапалақтап» псих.көңіл-күйін көтереді.



3.Реттілікпен шығып жауап береді.






4.Күннің ретін, сабақтың тақырыбын дәптерге жазады.

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

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








Мұғалім тақырыпты слайд материалы арқылы көрсетеді.







Оқулықтағы 147-152 беттер аралығын ашып, дәптерге күннің реті мен тақырыпты, термин сөзді жазады.







































5. Жекелеп мәліметті оқып, орындайды және орындап болған соң жұптар жұмысымен алмасып, инт.тақтадан көрсетілген дұрыс жауаппаен бір-бірінің жұмысын бағалайды.



6.Өз ойларын ортаға салады.










Дербес компьютерде жекелеп берілген тапсырманы реттілігімен орындайды.







Кезекпен шығып орындайды.


.












3.Бағалау парағы бойынша бағалау

Әр дұрыс жауап үшін 1 балл













































































5.Бағалау парағы бойынша бағалау

Әр дұрыс жауап үшін –

1 балл







6.ауызша мадақтау





7.Баллдық жүйемен бағалау

Әр практика

лық жұмысқа - 1 баллдан
























Ауызша мадақтау

1.https://bilimclass.kz









3.https://wordwall.net/resource/86198621/%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%82%d0%b8%d0%ba%d0%b0/html-%d0%b4%d0%b5-%d0%ba%d0%b5%d1%81%d1%82%d0%b5%d0%bb%d0%b5%d1%80%d0%b4%d1%96-%d2%9b%d2%b1%d1%80%d1%83-%d1%82%d0%b0%d2%9b%d1%8b%d1%80%d1%8b%d0%b1%d1%8b-%d0%b1%d0%be%d0%b9%d1%8b%d0%bd%d1%88%d0%b0



4.Презентация











Оқулық

Компьютер




















































5. таратпа карточкалар











6.https://www.instagram.com/reel/DFWwRmvIhCg/?igsh=MWdtbXZpZ2g4NzNsdg==




7. компьютер, оқулық





































8. https://wordwall.net/resource/38224992/html-%d1%82%d1%96%d0%bb%d1%96%d0%bd%d0%b4%d0%b5-%d1%82%d0%b5%d1%81%d1%82-%d1%81%d2%b1%d1%80%d0%b0%d2%9b%d1%82%d0%b0%d1%80%d1%8b


Сабақты бекіту. Жеке, жұптық

Қалыптастырушы бағалау тапсырмасы

Атрибуттар мен тегтер сипаттамаларын сәйкестендіру. №1қосымша

Дискриптор:

  • Алған білімдерін көрсету үшін тег атрибутын табады

  • Сиппаттамасымен сәйкестендіреді





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

№

Оқушының аты-жөні

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

тест.

Сабақты бекіту.

Әр дұрыс жауапқа – 1ұпай, жоғары ұпай -6

Практикалық жұмыс

Қорытынды тест.

Ұпай саны

№1

№2

№3

1









2









3









4









5









6









7









8









9









10









11









12









13













Shape1

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