Файлы Word Кестелер 11 сынып

Күні: 19-26.04.2016	Сыныбы: 11	Оқу-ісінің меңгерушісі                                      ________ Е.Дайнашов
Сабақтың тақырыбы:	Кестелер
Сабақтың мақсаты:	Html тілінің тэгтерін пайдалана отырып, веб - бетте кестелерді енгізуді үйрету.
Күтілетін нәтиже	веб - құжаттарды кестелер жасау үшін тэгтер мен атрибуттардың міндеттерін білу.
Сабақ түрі:	Жаңа тақырыпты түсіндіру.
Сабақ кезеңдері	Мұғалімнің іс - әрекеттері	Оқушылардың іс - әрекеттері
Ұйымдастыру кезеңі.	Оқушылармен амандасу, түгендеу	Амандасады, сабаққа келмеген оқушыларды айтады.
Үй жұмысын тексеру.	1.       Прарақтағы фонның түсін қалай өзгертуге болады? 2.       Web  парақтарды құру үшін кескіндердің қандай графикалық пішімдері жиі қолданылады? 3.       Графикалық нысанды кірістіру үшін қолданылатын тегті және оның атрибуттарын атаңдар. 4.       Браузерде графиканы көрсету қосылмаған жағдайда қолданушы нені көреді? 1.       Графикалық нысандар санының көбеюі браузер жұмысының жылдамдығына қарай әсер етеді?
Жаңа тақырыпты түсіндіру	Кестелерді құру. Әрбір кесте келесі схема бойынша жасалады. ‹Кестенің ашатын тегі› ‹Қатардың ашатын тегі› ‹Ұяшықтың ашатын тегі› Мәтін, сурет, кесте ‹/Ұяшықтың жабатын тегі› ‹/Қатардың жабатын тегі› ‹/Кестенің жабатын тегі› Әрбір кесте қатардан және ұяшықтардан (бағаналардан) тұрады. Ұяшықтардың ішінде кестеге енгізілген ақпарат болады. Көрсетілген схемада бір қатары және бір ұяшығы ғана бар кесте құрылады.           Қарапайым кестені құру. Біз жасайтын кесте 3 қатардан тұрады. Әрбір қатарда 3 ұяшық (баған) бар. –ші баған «Товар», 2-ші баған «Цвет», 3-ші баған «Цена» деп аталады. Товар Цвет Цена (тг.) Карандаш Синий 1 Ручка Черный 5 <Table> <TR> <TD>Товар</TD> <TD>Цвет</TD> <TD>Цена</TD> </TR> <TR> <TD>Карандаш</TD> <TD>Синий</TD> <TD>1</TD> </TR> <TR> <TD>Ручка</TD> <TD>Черный</TD> <TD>5</TD> </TR> </TABLE> Кестенің ашатын және жабатын тегтері: <Table>, </Table> Қатарлардың ашатын және жабатын тегтері: <TR>,</TR> Ұяшықтардың ашатын және жабатын тегтері: <TD></TD>  Тегтердің негізгі параметрлері. Төменгіде көрсетілген параметрлер <Table>, <TR>, <TD> тегтерінде бірдей болады. BGCOLOR–кесте фонының түсін анықтайды. BACKGROUND–кесте ұяшығының фоны ретінде қолданылатын суреттің жолын және атын көрсетеді. WIDTH–кестенің, жеке ұяшықтың ені. Пиксельдермен немесе процентпен анықталады. Егер осы параметрді <Table> тегінде жазу <TR> тегінде жазғанмен бірдей. Өйткені HTML-да әртүрлі ұзындығы бар қатарларды жасау мүмкін емес. HEIGHT–кестенің, қатардың, ұяшықтың биіктігі.  Пиксельдермен немесе процентпен анықталады. <Table> параметрлері: BORDER–кесте  сызықтарының қалыңдығы. Егер оның мәні 0-ге тең болса кесте сызықтары көрінбейді. ALIGN–кестенің құжатта немесе басқа кесте ішінде орналасуы. Оның мәндері: Left (сол жақ бойынша туралау), Right (оң жақ бойынша туралау). CELLPADDING–ұяшық шетінен қандай қашықтықта ақпарат енгізілетінің анықтайды. Мәні пиксельдерде беріледі. CELLSPACING–ұяшықтар арасындағы қашықтықты анықтайды. Мәні пиксельдерде беріледі. <Table BORDER=0 WIDTH=100% CELLSPACING =1CELLPADDING=5 BGCOLOR =BLUE> <TR BGCOLOR=YELLOW> <TD>Товар</TD> <TD>Цвет</TD> <TD>Цена</TD> </TR> <TR BGCOLOR=WHITE > <TD>Карандаш</TD> <TD>Синий</TD> <TD>1</TD> </TR> НӘТИЖЕСІ: <TR> және <TD> ALIGN–ұяшықтар немесе қатар ішінде элементтердің горизонтальды орналасуы. Оның мәндері: Left (сол жақ бойынша туралау), Right (оң жақ бойынша туралау). ALIGN– ұяшықтар немесе қатар ішінде элементтердің вертикальды орналасуы. Оның мәндері: Left (сол жақ бойынша туралау), Right (оң жақ бойынша туралау). Таблицаны құру – күрделі таблицалар. Сонымен, оңай таблица құруға сіз үйрендіңіз. <TD> тегінің параметрлері бар, олардың көмегімен көптеген қызықты нәтижелер алуға болады. Мысалға сізге келесідей таблица құру керек: № Наименования Цена(тг..) 1 Карандаш 1 2 Ручка шариковая 5 3 Тетрадь 4 Итого: 10руб. Таблицаның соңғы қатары бір ұяшықтан тұрады.Бірақ та сіз әр қатардағы ұяшықтар саны бірдей болу керекдеген сенімдесіз. Расында да солай. Бірақ соңғы қатардағы үш ұяшық бір ұяшыққа айналған. Бұл <TD> тегінің COLSPAN параметрі арқылы жасалынған. COLSPAN бір қатардағы бірнеше ұяшықтарды бір ұяшыққа айналдырады. Бұл параметрдің ұяшықтар саны болып табылады. Яғни, қанша ұяшықты бір ұяшыққа айналдыру керек. Төмеңгі мысал таблицаның тек соңғы қатарына байланысты. <TR> <TD COLSPAN=3 BGCOLOR=RED> <FONT COLOR=WHITE> Итого:10 руб.</FONT> </TD> </TR> Енді біз бірнеше ұяшықты вертикаль бойынша қосылуын қарастырамыз. Мысалы: № Наименования Цена(тг..) Т о в а р ы 1 Карандаш 1 2 Ручка шариковая 5 3 Тетрадь 4 Төрт қатардағы соңғы ұяшықтар бір-бірімен қосылған. Ол  <TD> тегінің ROWSPAN параметрі арқылы орындалған. Бұл параметрі COLSPAN параметріне ұқсас, бірақта ол ұяшықтар вертикаль бойынша қосылады. ROWSPAN таблицадағы бір бағанадағы бірнеше ұяшықтарды бір-бірімен қосу. Оның мәні ұяшықтар саны болады. Жоғары таблицаның HTML коды көрсетіледі <TABLE BORDER=1> <TR BGCOLOR =navy> <TD><FONT COLOR=white>№</FONT></TD> <TD><FONT COLOR=white> Наименования </FONT></TD> <TD><FONT COLOR=white> Цена(руб.) </FONT></TD> <TD ROWSPAN=4 BGCOLOR=white> т<BR>о<BR>в<BR>а<BR>р<BR>ы </TD> </TR> <TR BGCOLOR =yellow> <TD><FONT COLOR=blue></FONT></TD> <TD><FONT COLOR=blue>Карандаш</FONT></TD> <TD><FONT COLOR=blue>1</FONT></TD> </TR> <TR BGCOLOR=yellow> <TD><FONT COLOR=blue>1</FONT></TD> <TD><FONT COLOR=blue>Карандаш</FONT></TD> <TD><FONT COLOR=blue>1</FONT></TD> </TR> <TR BGCOLOR=yellow> <TD><FONT COLOR=blue>2</FONT></TD> <TD><FONT COLOR=blue>Ручка шариковая</FONT></TD> <TD><FONT COLOR=blue>5</FONT></TD> </TR> <TR BGCOLOR=yellow> <TD><FONT COLOR=blue>3</FONT></TD> <TD><FONT COLOR=blue>Тетрадь</FONT></TD> <TD><FONT COLOR=blue>4</FONT></TD> </TR> </TABLE> Мысалдан біз таблицаның бірінші қатарында төрт <TD> тегінен тұрады, ал қалғандары үшеуден. Анығында таблица төрт қатары ба төрт ұяшықтан тұрады, бірақ та соңғы төрт ұяшықтар вертикаль бойынша қосылған және онда “товары” деп жазылып тұр. Таблицаның ұяшықтары үстінен астына қарай вертикаль бойынша қосылады.Яғни, ROWSPAN қай ұяшықта жазылды, содан бастап қосылады. <TR BGCOLOR =navy> <TD><FONT COLOR=white>№</FONT></TD> <TD><FONT COLOR=white> Наименования </FONT></TD> <TD><FONT COLOR=white> Цена(руб.) </FONT></TD> <TD ROWSPAN=4 BGCOLOR=white> т<BR>о<BR>в<BR>а<BR>р<BR>ы </TD> </TR> Төртінші ұяшықта ROWSPAN=4вертикаль бойынша төрт ұяшық қосылған. Нәтижесінде келесі үш қатарда тек үш ұяшық болады.
Сергіту сәті.	Жаттығуды орындарында отырып орындау. Қол саусақтарына арналған жаттығулар Алақанды уқалау. Қолды қысу Білезіктен айналдыру Көзге арналған жаттығулар. Көзді бірнеше рет жыпылықтату. Көзіңмен ақырын оң жаққа, жоғары, солға, төмен  қарай 3-4 рет айналым жаса
Бекіту.	1.Web  параққа кестелер қандай мақсатпен қосылады? 2. Кестені қандай тегтер анықтайды? 3. Кесте құрылымын сипаттайтын дұрыс үлгіні анықтаңдар? 4. <tr>, <td>, <table>  тегтерінің  align  атрибутын пайдаланудың айырмашылығын анықтаңдар? 5. Кестенің түрі қандай болатынын ( мысалдың кодын браузерде қарап шықпай-ақ) анықтаңдар.
Оқуды бағалау.	Сабаққа белсенді қатысқан оқушыларды бағалау.	Бағаны күнделіктеріне қойдырады
Үй жұмысы.	Кестелер	Күнделіктеріне үй тапсырмасын жазып алады.