Сабақтың тақырыбы: § 4.8 КАСКАДТЫҚ СТИЛЬДІ КЕСТЕЛЕР CSS (CASCADING STYLE SHEETS)
|
Бөлім |
Веб-жобалау |
|
Педагогтың аты-жөні |
|
|
Күні |
Қатысушылар саны: Қатыспағандар саны: |
|
Сынып |
10 |
|
Сабақтың тақырыбы |
§ 4.8 КАСКАДТЫҚ СТИЛЬДІ КЕСТЕЛЕР CSS (CASCADING STYLE SHEETS) |
|
Оқу бағдарламасына сәйкес оқыту мақсаттары: |
10.4.2.2 web-беттерді жасауда CSS қолдану |
|
Сабақтың мақсаты |
«Каскадтық стильді кестелер» ұғымын анықтайды Каскадтық стильді кестелерді код жасауда қолданады Каскадтық стильді кестелерді қолданудың маңыздылығын түсіндіреді |
Сабақтың барысы:
|
Сабақтың кезеңі/ уақыт |
Педагогтің әрекеті |
Оқушының әректі |
Бағалау |
Ресурстар |
|
1.Ұйымдас-тыру 2. Өткен тақырыпты еске түсіру\ қайталау\ 3. Жаңа сабақты меңгерту 4. Бекіту |
Сәлемдесу, түгендеу 1.HTML де кесте құру үшін қандай тегтерді қолданамыз? 2.Құжаттағы түстерді анықтау үшін қалай ауыстырамыз? 3. HTML де кестені өзгертетін атрибуттар тізімін атап беріңдер?
Жаңа сабақты түсіндіру үшін бейнекөрсетілім көрсетеді. https://www.youtube.com/watch?v=QTOqjyJTIHA
1-тапсырма. Компьютермен жұмыс 2-суретте берілген web-беттің түсі мен мәтін түсін style.css стильдер бетін пайдаланып өзгертейік. Ол үшін style.css бетіне төмендегі кодты қосып жазамыз. Бұл код көмегімен 2-суреттегі көрсетілген web-беттің түсі көкке, ал мәтін түсі аққа өзгереді (3-сурет).
2-тапсырма. style.css стильдік бетті пайдаланып төмендегі өзгерістердіалайық. body{background: blue; color: white;}h1{color:red;} h2{color:yellow;} Дескриптор: style.css стильдік бетті қолданады. Қорытынды сұрақтар 1.CSS дегеніміз не? 2. CSS қашан пайда болған? 3. Web беттерді әрлеуде стильдік беттерді қалай қолдануға болады? 4.Селектор дегеніміз не? Селектордың құрылымы қандай?
Кері байланыс: «БББ кестесі» әдісі Оқушылар тақырып туралы бұрыннан не білетінін, сабақта не білгенін және не білгісі келетінін кестеге жазады. |
1.Мұғалім-мен амандасады. Берілген сұрақтарға жауап береді. 2.Сабақтың тақырыбын дәптерге жазады. 3.Сабақтың мақсаттарымен танысады Мұғалімді тыңдайды Дескриптор Берілген кодты тереді Мағынасын түсіндіреді |
Оқушылардың жауаптарын ауызша мадақтау, қолдау көрсету
|
АКт Интернет желісі Ютуб каналы Дарын онлан Кітап Дәптер Пк |
жүктеу мүмкіндігіне ие боласыз
Бұл материал сайт қолданушысы жариялаған. Материалдың ішінде жазылған барлық ақпаратқа жауапкершілікті жариялаған қолданушы жауап береді. Ұстаз тілегі тек ақпаратты таратуға қолдау көрсетеді. Егер материал сіздің авторлық құқығыңызды бұзған болса немесе басқа да себептермен сайттан өшіру керек деп ойласаңыз осында жазыңыз
Каскадтық стильді кестелер 10 сынып ҚМЖ
Каскадтық стильді кестелер 10 сынып ҚМЖ
Сабақтың тақырыбы: § 4.8 КАСКАДТЫҚ СТИЛЬДІ КЕСТЕЛЕР CSS (CASCADING STYLE SHEETS)
|
Бөлім |
Веб-жобалау |
|
Педагогтың аты-жөні |
|
|
Күні |
Қатысушылар саны: Қатыспағандар саны: |
|
Сынып |
10 |
|
Сабақтың тақырыбы |
§ 4.8 КАСКАДТЫҚ СТИЛЬДІ КЕСТЕЛЕР CSS (CASCADING STYLE SHEETS) |
|
Оқу бағдарламасына сәйкес оқыту мақсаттары: |
10.4.2.2 web-беттерді жасауда CSS қолдану |
|
Сабақтың мақсаты |
«Каскадтық стильді кестелер» ұғымын анықтайды Каскадтық стильді кестелерді код жасауда қолданады Каскадтық стильді кестелерді қолданудың маңыздылығын түсіндіреді |
Сабақтың барысы:
|
Сабақтың кезеңі/ уақыт |
Педагогтің әрекеті |
Оқушының әректі |
Бағалау |
Ресурстар |
|
1.Ұйымдас-тыру 2. Өткен тақырыпты еске түсіру\ қайталау\ 3. Жаңа сабақты меңгерту 4. Бекіту |
Сәлемдесу, түгендеу 1.HTML де кесте құру үшін қандай тегтерді қолданамыз? 2.Құжаттағы түстерді анықтау үшін қалай ауыстырамыз? 3. HTML де кестені өзгертетін атрибуттар тізімін атап беріңдер?
Жаңа сабақты түсіндіру үшін бейнекөрсетілім көрсетеді. https://www.youtube.com/watch?v=QTOqjyJTIHA
1-тапсырма. Компьютермен жұмыс 2-суретте берілген web-беттің түсі мен мәтін түсін style.css стильдер бетін пайдаланып өзгертейік. Ол үшін style.css бетіне төмендегі кодты қосып жазамыз. Бұл код көмегімен 2-суреттегі көрсетілген web-беттің түсі көкке, ал мәтін түсі аққа өзгереді (3-сурет).
2-тапсырма. style.css стильдік бетті пайдаланып төмендегі өзгерістердіалайық. body{background: blue; color: white;}h1{color:red;} h2{color:yellow;} Дескриптор: style.css стильдік бетті қолданады. Қорытынды сұрақтар 1.CSS дегеніміз не? 2. CSS қашан пайда болған? 3. Web беттерді әрлеуде стильдік беттерді қалай қолдануға болады? 4.Селектор дегеніміз не? Селектордың құрылымы қандай?
Кері байланыс: «БББ кестесі» әдісі Оқушылар тақырып туралы бұрыннан не білетінін, сабақта не білгенін және не білгісі келетінін кестеге жазады. |
1.Мұғалім-мен амандасады. Берілген сұрақтарға жауап береді. 2.Сабақтың тақырыбын дәптерге жазады. 3.Сабақтың мақсаттарымен танысады Мұғалімді тыңдайды Дескриптор Берілген кодты тереді Мағынасын түсіндіреді |
Оқушылардың жауаптарын ауызша мадақтау, қолдау көрсету
|
АКт Интернет желісі Ютуб каналы Дарын онлан Кітап Дәптер Пк |
шағым қалдыра аласыз














