Кестенің ұяшықтары

Сабақтың мақсаты мен күтілетін нәтижелері

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

HTML тілінің тегтерін пайдалана отырып, веб-бетте күрделі кестелерді енгізуді үйрету.

Оқушылар білуі тиіс

Веб-құжаттарда күрделі кестелер жасау үшін қолданылатын тегтер мен атрибуттардың қызметін түсіну.

Оқушылар үйренуі тиіс

Веб-беттерде кестелерді құру және оларды пішімдеу.

Көрнекіліктер

Кітап
Жұмыс дәптері
Тақырып бойынша слайдтар

Сабақ түрі

Теориялық және практикалық.

Сабақ барысы

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

1 Оқушыларды түгелдеу, журнал толтыру, дәптерлері мен оқулықтарын тексеру.
2 Сынып, тақта және парталардың тазалығын бақылау; қажет болса ескертулер жасау.
3 Оқушылардың назарын сабаққа аудару.
4 Үй тапсырмасын сұрақтар арқылы тексеріп, бағалау.

Жаңа сабақ: HTML-құжатында кестелерді қолдану

Web-құжаттармен жұмыс барысында реттелген ақпарат жиі қолданылады. Осындай ықшам әрі жүйеленген мәліметті сақтаудың ең қолайлы тәсілдерінің бірі — кесте.

Кестеде қатар мен баған қиылысқан орын ұяшық деп аталады. Ұяшық ішінде мәтінмен қатар сурет немесе тіпті шағын кесте де орналаса алады.

Кестелерге арналған негізгі HTML тегтері

<table> — кестені анықтайды.
<caption> — кестенің тақырыбын береді.
<tr> (table row) — қатарды анықтайды.
<td> (table data) — дерек ұяшығын жасайды.
<th> (table head) — тақырып ұяшығын жасайды.

Негізгі ұғым: <table> және құрылымы

<table> тегі веб-құжатта кесте құру үшін қолданылады және </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. Ақпараттың иерархиялық, фасеттік және дескрипторлық жіктеу жүйелері[/url]
      </p>
    </td>
  </tr>
</table>

Бұл код браузерде кесте түрінде көрсетіледі.

<caption>: кесте тақырыбы

<caption> тегі кестенің тақырыбын анықтайды және тек мәтіннен тұрады. Тақырыпты орналастыру үшін align атрибуты қолданылады: top (әдетте үндеместен) — үстінде, bottom — төменде.

<tr>: қатар құру және туралау

<tr> тегі кестедегі ұяшықтар қатарын анықтайды және </tr> арқылы жабылады. Қатар ішіндегі ұяшықтар <td> немесе <th> тегтерімен беріледі.

Негізгі атрибуттар

align: left (әдепкі), right, center.
valign: top, middle (әдепкі), bottom.
bgcolor: ұяшық фонының түсін береді.

Ескерту

Қазіргі веб-тәжірибеде align, bgcolor сияқты атрибуттардың орнына CSS қолдану ұсынылады. Дегенмен бұл сабақта кесте логикасын түсіну үшін классикалық атрибуттар қарастырылады.

<td>: ұяшық құру және атрибуттар

<td> тегі ағымдағы қатарда ұяшық жасайды және </td> арқылы жабылады. Егер align немесе valign жазылмаса, онда әдетте <tr> тегінің мәндері қолданылады.

Жиі қолданылатын атрибуттар

align: left / right / center
valign: top / middle / bottom
width, height: өлшемдер (px немесе %)
colspan, rowspan: баған/қатар біріктіру
nowrap: мәтінді тасымалдауға тыйым салады
bgcolor, background: фон түсі/суреті (URL)

<th>: тақырып ұяшығы

<th> тегі <td> сияқты ұяшық жасайды, бірақ оның мазмұнын тақырып ретінде белгілейді. Бұл браузерге тақырып пен негізгі мәтінді айқындап көрсетуге мүмкіндік береді. Атрибуттары <td> тегіне ұқсас.

Кесте құруға мысалдар

1) Қарапайым кесте

<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>

Нәтижесінде браузер терезесінде 2 қатар және 3 бағаннан тұратын кесте пайда болады.

2) Ұяшықтарды туралау және фон түсін беру

Кестеге ортақ фон түсін беріп, кейбір ұяшықтарға басқа фон түсін тағайындауға болады. Сонымен қатар ұяшықтағы мәтінді туралап пішімдеуге болады.

<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>

3) Ұяшықтарды біріктіру (colspan, rowspan) және мәтін түсі

Ұяшықтарды бір-біріне қосу арқылы күрделі кестелер жасауға болады. Төмендегі мысалда баған мен қатар бойынша біріктіру және мәтін түсін өзгерту көрсетілген.

<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>

Назар аударыңыз

Бұл үлгіде font тегі қолданылған. Қазіргі стандарттарда мәтін түсін CSS арқылы беру ұсынылады, алайда мысал оқу мақсатында сақталды.

Сабақты бекіту және бағалау

Тапсырмаларды орындаған және сабаққа белсенді қатысқан оқушылардың жұмысы бағаланады.

Үй тапсырмасы

15-бет: 2.8–2.9 (а, б, с) деңгейлік дидактикалық тапсырмаларды орындау.
Тақырыпты оқу.

Zharar.kz