Сабақ мақсаты: Html тілінің тэгтерін пайдалана отырып, веб - бетте күрделі кестелерді енгізуді үйрету.
Оқушылардың білуі тиіс: веб - құжаттарды күрделі кестелер жасау үшін тэгтер мен атрибуттардың міндеттерін білу.
Оқушылардың үйренуі тиіс: веб - беттерде кестелерді жасау.
көрнекілігі: кітап, жұмыс дәптері, тақырып бойынша слайд.
Сабақ түрі: теориялық және практикалық.
Сабақ барысы:
Ұйымдастыру:
1. Оқушыларды түгелдеу, журнал толтыру, оқушылардың дәптерлерін, оқулықтарын қарап шығу.
2. Сынып, тақта, парта тазалығын қарап шығу, қажет болса ескертулер жасау.
3. Оқушылардың назарын сабаққа аудару.
4. Үй тапсырмасын сұрақтар беру арқылы тексеріп, бағалау.
Жаңа сабақ:
HTML - құжатында кестелерді қолдану
Web - құжаттармен жұмыс істеу барысында реттелген ақпаратты жиі пайдаланамыз. Осындай реттелген, ықшам ақпаратты сақтаудың ең қолайлы тәсілі кестелер болып табылады. Кестедегі қатар мен баған қиылысқан орынды ұяшық деп атаймыз. Ұяшықтың ішінде мәтінмен қатар, сурет, шағын кесте де болуы мүмкін. HTML тілінің кестелермен жұмыс істейтін тэгтерін қарастырайық. Оларға төмендегі тэгтер жатады:
• <table>
• <caption>
• <tr> (table row)
• <td> (table data)
• <th> (table head)
<table> тэгі Web - құжатқа кесте құру үшін қажет. Тэг </table> тэгімен жабылады. Кестенің ұяшықтары <caption>, <tr>, <td> және <th> тэгтерімен құрылады.
Мысалы:
<table width="50%" border="1">
<tr> <td><p>
[url=http://files/text10.%20html]Лекция 2. Ақпарат және оның қасиеттері[/url]</br>
[url=http://files/text11.%20html]2. 1. Ақпараттың өлшем бірліктері[/url]</br>
[url=http://files/text12.%20html]2. 2. Ақпараттың қасиеттері[/url]</br>
[url=http://files/text13.%20html]2. 3. Ақпараттың иерархиялық, фасеттік </br>
және дескрипторлық жіктеу жүйелері[/url]</p></td></tr>
</table>
Браузер терезесінде келесі кесте пайда болады:
<caption> тэгі кестенің тақырыбын анықтайды. Тақырып тек қана мәтіннен тұрады. Тэг </caption> тэгімен жабылады. Тэгтің align атрибутының top мәні (үндеместен қолданылады) тақырыптың кесте басында, ал bottom мәні соңында болуын анықтайды.
Кестеде ұяшықтар қатарын анықтау. <tr> тэгі кестенің ұяшықтар қатарын анықтайды. Тэг </tr> тэгімен жабылады. Ұяшықтар <td> және <th> тэгтерімен құрылады. Тэг төмендегі атрибуттарға ие:
align – атрибуты ұяшық мәтінін left – сол жақ шетке, right – оң жақ шетке және center – ортаға туралайды. Үндеместен left мәні қолданылады;
valign – атрибуты ұяшық мәтінін браузер терезесінде тігінен туралайды. Қабылдайтын мәндері:
top – төменнен;
bottom – жоғарыдан;
middle – ортадан (үндеместен қолданылады);
bgcolor – атрибуты кесте ұяшығының фон түсін анықтайды.
Кестенің ағымдағы қатарында ұяшық құру. <td> тэгі кестенің ағымдағы қатарында ұяшық құрады. Тэг </td> тэгімен жабылады. Тэг төмендегі атрибуттарға ие:
• align – атрибуты ұяшық мәтінін браузер терезесіне туралайды. Егер атрибут жазылмаса, онда <tr /> тэгінің align атрибутының мәні үндеместен алынады. Қабылдайтын мәндері:
left – сол жақ шетке;
right – оң жақ шетке;
center – ортаға;
• valign – атрибуты ұяшық мәтінін браузер терезесінде тігінен туралайды. Егер атрибут жазылмаса, онда <tr /> тэгінің valign атрибутының мәні үндеместен алынады. Қабылдайтын мәндері:
top – төменнен;
bottom – жоғарыдан;
middle – ортадан (үндеместен қолданылады);
• width – атрибуты ұяшықтың енін анықтайды. Ұяшықтың ені пиксельде немесе кесте еніне сәйкес пайызда беріледі;
• height – атрибуты ұяшық биіктігін анықтайды. Ұяшықтың биіктігі пиксельде немесе кесте биіктігіне сәйкес пайызда беріледі;
• colspan – атрибуты кесте ұяшығы қанша бағанды біріктіретінін анықтайды. Егер жазылмаса атрибуттың мәні үндеместен бірге тең;
• rowspan – атрибуты кесте ұяшығы қанша қатарды біріктіретінін анықтайды. Егер жазылмаса атрибуттың мәні үндеместен бірге тең;
• nowrap – атрибуты ағымдағы ұяшықта мәтінді тасымалдауға тиім салады;
• bgcolor – атрибуты кесте ұяшығының фон түсін анықтайды;
• background – атрибуты ұяшықтың фоны ретінде суретті алады. Атрибуттың мәні ретінде суреттің URL - адресі беріледі.
<th> тэгі <td /> тэгі сияқты кестенің ағымдағы қатарында ұяшық құрады, тек ұяшық мәтінін тақырып деп анықтайды. Мұндай анықтама браузерге тақырып пен мәтінді бөлектеу мүмкіндігін береді. Тэгтің атрибуттары <td /> тэгінің атрибуттарына ұқсас. Тэг </th> тэгімен жабылады.
Ұяшықтың фон түсін, шрифтін, өлшемін өзгерту. Кесте құруға мысалдар қарастырайық. Қарапайым кесте құрамыз:
<table width="50%" border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
Браузер терезесінде келесі кесте пайда болады:
Кестеге жалпы фон түсін, ал кейбір ұяшықтарға басқа фон түсін беруге болады. Кейбір ұяшықтардың мәтінін пішімдейік.
<table width="50%" border="1">
<tr>
<td align="center"> 1 </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
</tr>
<tr>
<td bgcolor="#ff0000"> 4 </td>
<td bgcolor="#ffffff"> 5 </td>
<td bgcolor="#0000ff"> 6 </td>
</tr>
</table>
Браузер терезесінде келесі кесте пайда болады:
Кесте ұяшықтарын бір - біріне қосуға болады. Кейбір ұяшық мәтіндерінің түсін өзгертіп көрейік.
<table width="50%" border="1" bgcolor="#e0e0e0">
<tr>
<td align="center" colspan="2"> <font color="#ff0000"> 1+2 </font></td>
<td align="center" rowspan="2" width="25%" bgcolor="#0000ff">3+6 </td>
</tr>
<tr>
<td bgcolor="ff0000"> 4 </td>
<td bgcolor="#ffffff"> 5 </td>
</tr>
</table>Браузер терезесінде келесі кесте пайда болады:
Сабақты бекіту: тапсырмаларды орындаған оқушыларды және сабаққа қатысып отырған оқушыларды бағалау.
Үй тапсырмасы: 15 бетте 2, 8 - 2, 9 а, б, с деңгейлі дидактикалық тапсырмаларды орындау. Тақырыпты оқу
