Сайтқа кіру Тіркелу

Веб - беттерде күрделі кестелерді құру

Сабақ тақырыбы: Күрделі кестелерді құру.
Сабақ мақсаты: 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 а, б, с деңгейлі дидактикалық тапсырмаларды орындау. Тақырыпты оқу
Кері қайту
Loading...
Ұқсас жаңалықтар:
Кестелерді түзету

Кестелерді түзету

Сабақтың мақсаты: Білімділік: Оқушыларды кесте жасауға, ұяшықтарды қосуға, алып тастауға және біріктіруге үйрету. Тәрбиелілік: жеке жұмыс жасауға,...
Кесте ішіндегілерін енгізу және пішімдеу

Кесте ішіндегілерін енгізу және пішімдеу

Сабақтың мақсаты: Білімділік: Оқушыларды кесте жасауға, ұяшықтарды қосуға, алып тастауға және біріктіруге үйрету. Оқушыларға кестелерді қоршауды...
HTML құжатымен жұмыс

HTML құжатымен жұмыс

Сабақтың тақырыбы: HTML құжатымен жұмыс Сабақтың мақсаты: HTML құжатына әзірлеу, онда фреймдер мен пішімдер орналастыру, жұмыс жасау барысы туралы...
Microsoft Word кесте құру. Кестелерді пішімдеу

Microsoft Word кесте құру. Кестелерді пішімдеу

СҚО, Шал ақын ауданы, Кеңес орта мектебі Информатика пәнінің мұғалімі: Мұхамедин Сырым Қойшыбайұлы...
Кестелер құру. Кестелерді редакциялау

Кестелер құру. Кестелерді редакциялау

Сабақтың тақырыбы: Кестелер. Кестелер құру. Кестелерді редакциялау. Мақсаты: Білімділік: Оқушыларды кесте жасауға, ұяшықтарды қосуға, алып тастауға...
Пікірлер: 0
Пікір білдіру
Ақпарат
Қонақтар,тобындағы қолданушылар пікірін білдіре алмайды.
Абайдың қара сөздері, Ашық сабақ, Бастауыш, Информатика, Мұқағали Мақатаев, Мұқағали Мақатаевтың өлеңдері, Русский язык, Сабақ жоспары, Тәуелсіздік, Физика, Химия, абай құнанбаев қара сөздері, абай құнанбайұлының қара сөздері, ана тілі, ағылшын тілі, бала-бақша, балабақша, бастауыш сынып, баяндама, биология, география, дүниетану, ертегі, математика, математикадан сабақ жоспары, нақыл сөздер, презентация, сайыс, сайыс сабақ, сауат ашу, сценарий, тарих, тақпақ, технология, тәрбие сағаты, Қазақ әдебиеті, қазақ тілі, қазақ тілінен сабақ жоспары, қысқа мерзімді жоспар, өлең

Барлық тегтерді көрсету