Рымбек Байсейітов
атындағы Семей қаржы-экономикалық колледжі»
КМҚК
Сабақ жоспары№7
Модуль /пән
атауы:WEB-бағдарламалау және
Интернет технологиялары
Дайындаған
педагог: Нұрғалиева Т.Т.
-
Жалпы
мәліметтер:
|
Курс, оқу жылы,
топ:
|
ІII курс, 2020-2021 оқу
жылы, 18 VT-2,18 VT-3
|
Сабақ
типі
|
Тәжірибелік
|
-
Мақсаты,
міндеттер
|
Оқу сабақтары барысында білім алушылар
игеретін кәсіби біліктердің
тізбесі
|
Сайтқа стильдік
кестелерді енгізу тәсілдерін, CSS қасиеттерімен жұмыс ісстеуде
CSS-дің негізгі блоктары мен қосалқы сервистерді
қолданады
|
-
Сабақты
жабдықтау
|
Оқу-әдістемелік құрал-жабдықтар, анықтамалық
әдебиеттер
|
Гончаров А.
Самоучитель НТМL
|
Техникалық құралдар,
материалдар
|
Дербес
компьютер,Moodle
|
-
Сабақтың барысы
|
4.1.
|
Ұйымдастыру
-
Компьютерлердің сабаққа
дайындығын тексеру
-
Оқушылармен
амандасу
-
Оқушыларды
түгендеу
-
Сабақтың мақсатымен
таныстыру
|
4.2.
|
Үй тапсырмасын
сұрау.
-
Мәтінді
форматтау.
-
Суреттер тізімімен
жұмыс.
|
4.3.
|
Жаңа
сабақ
Курс
тақырыбы: Сайтқа стильдік кестелерді
енгізу тәсілдерін, CSS қасиеттерімен жұмыс ісстеуде CSS-дің негізгі
блоктары мен қосалқы сервистерді қолданады
Сабақ
тақырыбы:
|
4.4
|
Жаңа сабақты
бекіту
1.Кесте дегенімз не?Қандай
бөліктерден тұрады?
2.
HTML тілінің кестелермен жұмыс
істейтін тэгтерін атаңыз
3.Кестеде қандай атрибуттар
қолданылады?
4.Тәжірибелік жұмысты
орындау
|
4.5.
|
Студенттерді
бағалау.
|
-
Сабақ бойынша
рефлексия
|
«Борт журналы»
құру
|
-
Үй
тапсырмасы
|
Гончаров А. Самоучитель
НТМL
53-56
бет
|
2021
жылғы «20» қаңтар
Тәжірибелік жұмыс
№7
Курс
тақырыбы: №2.
Сайтқа стильдік кестелерді
енгізу тәсілдерін, CSS қасиеттерімен жұмыс ісстеуде CSS-дің негізгі
блоктары мен қосалқы сервистерді қолданады
Сабақтың
тақырыбы: № 7
Кестелер
ТЕОРИЯЛЫҚ
БӨЛІМ
Web-құжатының
негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен
көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде
қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр
ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады.
Кесте келесi бөлiктерден
тұрады:
• кесте
тақырыбы;
•
бағаналар
тақырыптары;
•ұяшықтар.
Кесте жолдар тiзбегi
бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн,
сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер
енгiзiледi.Ұяшықтың ішінде мәтінмен қатар, сурет, шағын кесте де
болуы мүмкін.HTML тілінің кестелермен жұмыс істейтін тэгтерін
қарастырайық. Оларға төмендегі тэгтер
жатады:
•
<table>
•
<caption>
•
<tr> (table
row)
•
<td> (table
data)
•
<th> (table
head)
<table> тэгі
Web - құжатқа кесте құру үшін қажет. Тэг </table> тэгімен
жабылады. Кестенің ұяшықтары <caption>, <tr>,
<td> және <th> тэгтерімен
құрылады.
<Caption> тэгі
кестенің тақырыбын анықтайды. Тақырып тек қана мәтіннен тұрады. Тэг
</caption> тэгімен жабылады. Тэгтің align атрибутының top
мәні (үндеместен қолданылады) тақырыптың кесте басында, ал bottom
мәні соңында болуын
анықтайды.
Кестеде ұяшықтар
қатарын анықтау. <tr> тэгі кестенің ұяшықтар қатарын
анықтайды. Тэг </tr> тэгімен жабылады. Ұяшықтар <td>
және <th> тэгтерімен құрылады. Тэг төмендегі атрибуттарға
ие:
Кестеде қолданылатын
атрибуттар:
align – атрибуты
ұяшық мәтінін left – сол жақ
шетке,
right – оң жақ
шетке
center – ортаға
туралайды. Үндеместен left мәні
қолданылады;
valign – атрибуты
ұяшық мәтінін браузер терезесінде тігінен туралайды. Қабылдайтын
мәндері:
top –
төменнен;
bottom –
жоғарыдан;
middle – ортадан
(үндеместен қолданылады);
bgcolor – атрибуты
кесте ұяшығының фон түсін
анықтайды.
Border- бүтін сан,
кесте жақтаулары сызығының қалыңдығы (мысалы: border=3)
Bordercolor- кесте жақтауларының
түсі
Width- кесте енін
анықтайтын бүтін сан, мәні (%) пайызбен
беріледі
Rowspan- бірнеше
жолдарды біріктіріп, бір-ақ жол етіп
біріктіру
ТӘЖІРИБЕЛІК
БӨЛІМ
Кесте
жасау
1. Блокнот (Notepad++)
программасын іске қосыңыздар.
2. келесі мәтін жолдарын
теріңіздер.
Тапсырма
№1
<HTML>
<HEAD>
<TITLE>Сабақ
кестесі</TITLE></HEAD>
<BODY
BGCOLOR=”#FFFFFF”>
<P
ALIGN=CENTER>
<FONT COLOR=”RED” SIZE=”6”
FACE=”KZ ARIAL”>
<B>Сабақ кестесі
</B></FONT></P><BR>
<FONT COLOR=”BLUE” SIZE=”4”
FACE=”Times New Roman”>
<TABLE BORDER=”1”
WIDTH=100% BGCOLOR=”#99 CCCC”>
<TR BGCOLOR =”#CCCCFF”
ALIGN=CENTER>
<TD>Уақыты</TD>
<TD>7а
класс</TD>
<TD>7б</TD>
<TD>7в</TD>
</TR>
<TR>
<TD>8-30 –
9-50</TD>
<TD> Орыс тілі
</TD>
<TD> Информатика
</TD>
<TD> Тарих
</TD>
</TR>
<TR>
<TD>10-00 –
11-20</TD>
<TD> Математика
</TD>
<TD>Геодезия
</TD>
<TD> Ағылшын тілі
</TD>
<TR>
<TD>11-30 - 12-30
</TD>
<TD> Тарих
</TD>
<TD> Сызба геометрия
</TD>
<TD> Компьютерлік
графика </TD><TR>
</TABLE>
</BODY>
</ HTML
>