Ашық сабақ

Тексерілді:

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

Бөлім

10.3А бөлім. Веб-жобалау

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

Агабекова Л.К

Күні

Сынып: 10 ә

Қатысушылар саны

Қатыспағандар саны

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

«Стильдердің каскадты кестесін қолдану (CSS)» (CASCADING STYLE SHEETS)

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

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

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

«Стильді каскадтық кестелер» ұғымын анықтайды;

Стильді каскадтық кестелерді код жасауда қолданады.

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

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

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

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

Бағалау

Ресурстар

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

3 мин

5мин

Ұйымдастыру кезеңі:

Сәлемдесу, оқушылардың сабаққа қатысушыларды тексеру. .

Қызығушылықты ояту.

Сыныпта көңілді ахуал орнату. «Маған ұнайды досымның.....» әдісі арқылы оқушылар сыныптасының өзіне ұнайтын тұстарын айту.

Топқа бөлу. Екі түсті А4 форматында жазылған бағалау парағын таңдау (парақтың артында“ HTML ”, “ CSS ” термин сөздері жазылған .)

Үй жұмысы:

«Жалғасын тап,ойды аяқта»әдісі

6 тапсырма.

Кодты толықтырып,нәтижесін шығар .

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

Оқушылар сыныптасының өзіне ұнайтын тұстарын айтады.

“ HTML ”, “ CSS ” термин сөздері жазылған бағалау парағын таңдау арқылы топқа бөлінеді.

Оқушылар НTML тілінде берілген

кодты толықтырып,нәтижесін шығарады.

10 баллдық жүйе

2 балл

сағыз

Оқулық, дәптер

Екі түсті А 4 форматтағы бағалау парағы

Карточка

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

10 мин

24 мин

Сабақтың тақырыбын ашу.

«Өмір сүре бересің, көрген нәрсеңді көңілге түйе бересің!»әдісі

«Қоржынға сал !»әдісі

Термин сөздер

Жаңа сабақты түсіндіру

Бейнефильм көреміз және талдаймыз.

Сұрақтарға жауап беру.

1.CSS дегеніміз не?

2 СSS cинтаксисінің құрылымы

3.Қасиеттері дегеніміз не?

4.Мәні дегеніміз не?

5. CSS cтилінің түрлері

«Маған айтып берсең - ұмытып қаламын, көрсетсең - есімде сақтаймын, өзіме жасатсаң- үйренемін.»

Конфуций.

Практикада қолданайық.

2- тапсырма.

«Ойланамыз, шешімін табамыз!» әдісі

1 топ

Ішкі стильді қолдану .

<html>

<head>

<meta charset=utf-8”>

<title>Ішкі стиль</title>

</head>

<body>

<p style="font-size:120%;font-family;monospace;color:#cd66cc">

Абзацқа ішкі CSS стильді қолдану</p>

<p>Бұл қалыпты абзац</p>

</body>

</html>

2- тапсырма .

2-топ

<html>

<head>

<title> CSS id </title>

</head>

<body>

<p style = "background:# 00ff00;color:red;"> Cалем,CSS ережесі бойынша менің әріптерім қызылға,айналам жасыл түске боялады

</p></body>

</html>

« Тез шешім қабылдайық!» әдісі

(Тапсырмаларды ерте орындап қойғандарға арналған жаттығу)

Тегтерді дұрыс орналастырыңдар

https://www.liveworksheets.com/қосым-шасымен жұмыс

4-тапсырма

«Қатесін тап»

Жұптық жұмыс

Құжат деңгейіндегі стильдер

<html>

<head>

<meta charset="utf-8">

<title>List_style</title>

<style>

ul li{fout-size:36px;color:green;}

ol li{fout-size:20px;color:blue;}

</style>

</head>

<body>

<ul>

<li>Абай Құнанайұы

<ol>

<li>&laguo;Қара сөздері&raguo;</li>

<li>&laguo;Көзімнің қарасы&raguo;</li>

<li>&laguo;Жиырма өлеңі&raguo;</li>

</ol>

</li>

<li>Мұхтар Әуезов

<ol>

<li>&laguo;Абай жолы&raguo;</li>

<li>&laguo;Өскен өркен&raguo;</li>

<li>&laguo;Қараш-қараш оқиғасы&raguo;</li>

</ol>

</li>

</ul>

</body>

</html>

5-тапсырма . «Бірлесіп пішкен тон келте болмайды» әдісі

Топпен жұмыс

HTML және CSS тиімділігін жазыңдар.Топпен жұмыс

HTML тиімділігі

CSS тиімділігі

Қорытынды

«Күшті болсаң ,тауып көр !» әдісі

https://www.lumioclass.com/қосымшасында тест орындау

Сабақтың тақырыбын ашады.

Термин сөздерді жазып алады.