3 апта

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

HTML кесте құру

HTML кестелері жолдар мен бағандар арқылы деректерді экранға шығарады. Оларда қарапайым мәтін де, суреттер де, бейнелер де болуы мүмкін.

table элементі – кестенің мазмұнын орналастыратын тег контейнері.

Кесте жолдар бойынша құрылады: жолды белгілеу үшін tr контейнері, баған тақырыптарын (жолдарды) белгілеу үшін th контейнері, ал ұяшықтардағы деректер үшін td контейнері қолданылады. Тақырыптар қалың қаріппен ерекшеленеді және олардың ұяшықтарына орналастырылады. Деректер қалыпты қаріпке ие және ұяшықтың сол жағында тураланады.

<col> – кесте бағанының тегі;

<colgroup> – кесте бағандары тобының тегі;

<thead> – кестенің үстіңгі деректемесінің тегі;

<tbody> – кестенің негізгі бөлігінің тегі;

<tfoot> – кестенің төменгі деректеме тегі;

<caption> – кесте қолтаңбасының тегі;

<border> – кесте шекараларының тегі.

pading – кесте жақтауының енін пиксельмен белгілейді

height – бүкіл кестенің биіктігін пиксельмен немесе браузер терезесінің биіктігінің пайызымен анықтайды.

Зертханалық жұмыс №1.

Сабақ кестесіне арналған кесте құру

Қадам 1. Жеке папкада блокнотта keste.HTML файлын құрыңыз.

Қадам 2. keste.HTML файлына кодты енгізіңіз.

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Сабақ кестесі</title>
  <body>
   <div>
	<h1>Сабақ кестесі</h1>
   </div>
   <table bgcolor="#000000" cellspacing="0" class="table">
	<tr class="th_a">
 	<th colspan="7"></th>
	</tr>
	<tr bgcolor="#0000ff">
 	<th width="40">№</th>
 	<th width="70">Уақыт</th>
 	<th width="100">Дүйсенбі</th>
 	<th width="100">Сейсенбі</th>
 	<th width="100">Сәрсенбі</th>
 	<th width="100">Бейсенбі</th>
 	<th width="100">Жұма</th>
	</tr>
	<tr class="th_c">
 	<th colspan="7"></th>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>1</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>2</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>3</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>4</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>5</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
        <tr bgcolor="#ffffff">
 	<td>6</td>
 	<td> <br/> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
	</tr>
   </table>
  </body>
</head>
<style>
.table th {
 color:#ffffff;
 padding: 3;
 vertical-align: top;
 border-top: 2px solid #000000;
 border-bottom: 2px solid #000000;
}
.table td {
 padding: 3;
 vertical-align: top;
 height: 80;
 border-bottom: 2px dashed #000000;
}
.table th, .table td {
  border-left: 2px solid #000000;
}
.table th:last-child, .table td:last-child {
  border-right: 2px solid #000000;
}
.table td:first-child {
 font-weight: bold;
}
.table tr:last-of-type > td {
 border-bottom: 2px solid #000000;
}
.table .th_a > th {
 height: 0;
 padding: 2;
 background-color:#ffffff;
 border-bottom: 0px solid #000000;
}
.table .th_c > th {
 height: 0;
 padding: 2;
 background-color:#ffffff;
 border-top: 0px solid #000000;
}
</style>
</html>

Қадам 3. Браузердегі жаңартып, өзгерістерді қараңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Зертханалық жұмыс №2.

Сабақ кестесі

Қадам 1. Жеке папкадағы блокнотта keste.HTML веб-беттің мәтінін ашыңыз.

Қадам 2. keste.HTML файлына өзгертулер енгізіңіз.

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Сабақ кестесі</title>
  <body>
   <div>
	<h1>Сабақ кестесі</h1>
   </div>
   <table bgcolor="#000000" cellspacing="0" class="table">
	<tr class="th_a">
 	<th colspan="7"></th>
	</tr>
	<tr bgcolor="#0000ff">
 	<th width="40">№</th>
 	<th width="70">Уақыт</th>
 	<th width="100">Дүйсенбі</th>
 	<th width="100">Сейсенбі</th>
 	<th width="100">Сәрсенбі</th>
 	<th width="100">Бейсенбі</th>
 	<th width="100">Жұма</th>
	</tr>
	<tr class="th_c">
 	<th colspan="7"></th>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>1</td>
 	<td>8:00 <br/>8:40 </td>
 	<td>Қазақ тілі </td>
 	<td>Математика </td>
 	<td>English</td>
 	<td>Қазақ тілі </td>
 	<td>Қазақстан тарихы </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>2</td>
 	<td>8:45 <br/>9:25 </td>
 	<td>Қазақ әдебиеті </td>
 	<td>Информатика </td>
 	<td>Қазақ тілі </td>
 	<td>Русская литература </td>
 	<td>Русский язык </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>3</td>
 	<td>9:30 <br/>10:10 </td>
 	<td>Жаратылыстану </td>
 	<td>Қазақ әдебиеті </td>
 	<td>Математика </td>
 	<td>English </td>
 	<td>Информатика </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>4</td>
 	<td>10:15 <br/>10:55 </td>
 	<td>Музыка </td>
 	<td>Қазақстан тарихы </td>
 	<td>Дене шынықтыру </td>
 	<td>Жаратылыстану  </td>
 	<td>Математика </td>
	</tr>
	<tr bgcolor="#ffffff">
 	<td>5</td>
 	<td>11:05 <br/>11:45 </td>
 	<td>Дүние жүзі тарихы </td>
 	<td> </td>
 	<td>Дене шынықтыру </td>
 	<td>Еңбекке баулу </td>
 	<td>Бейнелеу өнері </td>
	</tr>
<tr bgcolor="#ffffff">
 	<td>6</td>
 	<td>11:50 <br/>12:30 </td>
 	<td> </td>
 	<td> </td>
 	<td> </td>
 	<td>Еңбекке баулу </td>
 	<td> </td>
	</tr>
   </table>
  </body>
</head>
<style>
.table th {
 color:#ffffff;
 padding: 3;
 vertical-align: top;
 border-top: 2px solid #000000;
 border-bottom: 2px solid #000000;
}
.table td {
 padding: 3;
 vertical-align: top;
 height: 80;
 border-bottom: 2px dashed #000000;
}
.table th, .table td {
  border-left: 2px solid #000000;
}
.table th:last-child, .table td:last-child {
  border-right: 2px solid #000000;
}
.table td:first-child {
 font-weight: bold;
}
.table tr:last-of-type > td {
 border-bottom: 2px solid #000000;
}
.table .th_a > th {
 height: 0;
 padding: 2;
 background-color:#ffffff;
 border-bottom: 0px solid #000000;
}
.table .th_c > th {
 height: 0;
 padding: 2;
 background-color:#ffffff;
 border-top: 0px solid #000000;
}
</style>
</html>

Қадам 3. Браузерден keste.HTML ашыңыз.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Алдыңғы сабақ

Course оралу

Келесі сабақ

HTML тілінде сабақ кестесін құру

3 апта