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

CSS (си эс эс) 10 сынып

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

CSS (си эс эс) 10 сынып

Материал туралы қысқаша түсінік
CSS (си эс эс) 10 сынып Құндылық пен функционалды сауаттылығымен жасалынған
Материалдың қысқаша нұсқасы

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

Бөлім:

4-бөлім. Web-жобалау

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


Күні:

20.02.2025ж

Сыныбы: 10

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

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

CSS (си эс эс)

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

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

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

«Селектор» ұғымы мен түрлерін біледі және салыстырады;

Селекторды қолданудың маңыздылығын түсіндіреді.

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

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

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

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

Бағалау

Ресурстар

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

10 мин

1.Сәлемдесу.

2.«Біртұтас тәрбие» бағдарламасындағы құндылықтарды оқу процесіне ұйымдастыру кезеңінен бастап, сабақтың әрбір кезеңінде жүргіземін. Бірлік және ынтымақтастық бойынша психологиялық ахуал қалыптастыру.

3.Оқушыларды ClassDojo платформасында 2 топқа біріктіру.

4.Үй тапсырмасын пысықтау.

«Фишбоун» әдісі.

Оқушылар А3 плакатқа балық қаңқасының суретін салады. Жоғарғы қабырғаларына өткен тақырып туралы сұрақтар жазады.

  1. HTML-де CSS қолданудың маңыздылығы неде?

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

  3. Не себепті HTML-ге қарағанда CSS-тің синтаксисі күрделірек?

  4. Селектордың қандай түрлері бар?

  5. Элемент бойынша және Сынып (Класс) бойынша селекторлардың қызметінде қандай айырмашылықтар бар?


Төменгі қабырғаларына жауаптарын жазады. Жұмыстарын тақтада түсіндіреді.


Оқушылардың жауаптарын ауызша мадақтау, ынталандыру.


Мұғалім: «Ой қозғау» әдісі арқылы жаңа сабақты ашу.

1.Web-беттерді жасауда идентификаторлы және мәнмәтінді селекторларды қолдану қалай жүзеге асады?

2.CSS-те селекторлардың қандай маңызы бар?


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

Жаңа материалды түсіндіру.

Идентификатор бойынша селекторлар.

Егер біздің html-парағымызда бірнеше бірдей элемент болса, мысалы азатжол болса және сол азатжолдардың барлығын қара түске, ал тек біреуін ғана қызғылт түске өзгерткіміз келсе, бұл азатжолға бірегей идентификатор жасап, оған стильді саламыз. HTML- де элементтің идентификаторы id параметрі арқылы беріліп, оның мәні ретінде бірегей (қайталанбас) атау беріледі. Мысалы: <p id=”pink”> Идентификаторлық мәтін азатжолы (id).</p>

Мәнмәтіндік селектор.

Web-бетті жасаған кезде бір тегтің ішіне басқасын орналастыруға тура келеді. Бұл тегтердің мәнерлері (стиль) браузерде дұрыс көрінуін қамтамасыз ету үшін мәнмәтінде жұмыс істейтін селекторлар көмектеседі. Мысалы <b> тегі үшін стилді тек <p> тегінің ішіне ораластырғанда беру керек. Осылайша бір уақытта бір тегтің мәнерін тегтің ішінде орнатуға болады. Мәнмәтін селекторы бос орынмен бөлінген қарапайым селектордан тұрады.


Идентификаторлар мен кластарды HTML-дің кез келген элементімен беруге болады. Бірақ көбінесе былай болады; әдетте түрлі элементтерді бір ғана стильмен, мысалы, жасыл түспен белгілегіміз келеді. Осындай жағдайда бірыңғайланған селекторды қолдануға болады.

Ондай селекторларда элемент аты көрсетілмейді, класс немесе идентификатор және атау белгісі ретінде нүкте немесе тор көрсетіледі.

Оқушылар сәлемдеседі.


Психологиялық ахуал қалыптастырады.








Топқа бірігеді.



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























Жаңа тақырыпты болжайды

ҚБ: Қолпаштау,

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

ClassDojo платформасында бағалау (смаиликтер,

10 балл)









Дескриптор:

-оқушылар сұрақтарға жауап береді

1 балл

Слайд










А3 плакат

Маркерлер
























слайд

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

17 мин

4-тапсырма. Жеке жұмыс.

Практикалық тапсырма ретінде блокнот программасында 4-ші тапсырманы берілген браузер жұмысына арналған кодтарды жазып,

«style.css» атымен сақта. Қазақ қаріптері веб-беттер дұрыс көріну үшін сақтау терезесінде кодировкада «Юникод»-ты таңдау керек.

Мысалы:

.red{

color:red;

]

#yellow{

color:yellow;

}


Блокнот программасында HTML коды дұрыс енгізілгенде 5-ші тапсырманы берілген браузер жұмысына арналған кодтарды жазып «index.html» атымен сақтаса веб-терезелер пайда болады.

<html>

<head>

<title> css id </title>

</head>

<body>

<p style="background:#00ff00;color:red;">

Сәлем, CSS ережесі бойынша менің әріптеріv қызылға, айналам жасыл түске боялады </p>

</body>

</html>


Web-беттің басында, яғни <head> арасына </head> «style» элементін жазу:


6-тапсырма:

<html>

<head>

<title> CSS id </title>

<style type=”text/css”> p{background:#00ff00; color:red;} </style>

</head>

<body>

<p> <b> <u> Егер жеке файлда әртүрлі бетті бірдей стильдермен рәсімдейтін болсақ, стильдер CSS кеңейтілімімен берілген мәтіндік файлға жазылады <u> </b> </p>

</body>

</html>

Блокнот программасында

4, 5, 6-шы тапсырмаларды берілген браузер жұмысына арналған кодтарды жазып,

HTML-бет көрінісін көрсетеді.

Дескриптор:

  • Құжатты «style.css» атымен сақтайды.

  • Веб-құжат жасайды.


2 балл












Дескриптор:

  • Құжатты html тілінде сақтайды.

  • Веб-құжат жасайды.


2 балл

















Дескриптор:

  • Құжатты html тілінде сақтайды.

  • Веб-құжат жасайды.


2 балл

Слайд


Оқулық

информатика

10 сынып


Компьютер

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

15 мин

Топтық жұмыс.

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

Функционалдық сауаттылықты дамытуға бағытталған практикалық тапсырма беріледі.

Тапсырма:

  1. Қазақстанда орналасқан қорықтардың атауларын және оларды сипаттайтын ақпараттарды жинаңыз.

  2. Әрбір қорыққа жеке идентификатор (ID) тағайындаңыз.

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


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

3-тапсырма. 166-бет


Бағалау.

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

Сабақтың тақырыбын қорытындылау




















Тапсырманы дәптерге жазып дайындап келеді



Топ басышлар өз топтарының нәтижесін санау арқылы бағаларын жазып береді.

Дескриптор:

  • қорықтар тізімін жинақтайды;

  • идентификатор (ID) тағайындайды;

  • мәнмәтіндік селекторға мысалдар ұсынады.

3 балл

Компьютер

Слайд

Интернет желісі



















күнделік




А4 парағы

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

3 мин

«4Қ» тәсілімен оқуда қызық, қиын, қажет, құнды тұстарын белгілеу


қызық

қиын

қажет

құнды







Тақырып бойынша

«4Қ» тәсілімен оқуда қызық, қиын, қажет, құнды тұстарын белгілейді

Оқушылар бағалау критерийлерімен өз деңгейлерін бағалайды

Кеспе қағаз

Саралау.

Сіз қандай тәсілмен көбірек қолдау көрсетпексіз?

Қабілетті оқушылардың алдына қандай тапсырма ұсынасыз?


  • Үй тапсырмасын сұрау кезінде оқушылардың деңгейін ескере отырып қоямын.

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

Бағалау.

Сіз оқушылардың материалды игеру деңгейін қалай тексеруді жоспарлап отырсыз?


ClassDojo платформасында балдық жүйе арқылы бағалаймын (10 балл)

9-10

7-8

6-5

Денсаулық және қауіпсіздік

техникасын сақтау.


Денсаулық сақтау технологиялары.


Оқушылардың денсаулығын сабақтың өн бойында жіті бақылап, ерекше көңіл бөлуді назарда ұстаймын. Информатика кабинетінде қолданылатын қауіпсіздік техникасы ережелерінің тармақтарын ескеремін.

Қабілетті оқушыларға:


Көбірек қолдауды қажет ететін оқушыларға:

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



Жалпы бағалау

Сабақтың қандай екі аспектісі жақсы өтті? Оқыту туралы да, сабақ беру туралы да ойланыңыз.

1:

2:

Сабақты жақсартуға не жәрдемдесер еді? Оқыту туралы да, сабақ беру туралы да ойланыңыз.

1:

2:

Сабақ кезінде, сынып немесе жекелеген оқушылардың жетістіктері/қиыншылықтары туралы мен нені анықтадым? Келесі сабақтарда неге назар аудару керек?

1:

2:




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