HTML
Presentation
•
Other
•
KG - Professional Development
•
Practice Problem
•
Hard
Маржан Шайжанова
Used 3+ times
FREE Resource
20 Slides • 0 Questions
1
HTML ТІЛІНДЕ КЕСТЕ
ҚҰРУ
10 сынып
Сабақтың тақырыбы
2
Сабақтың мақсаты:
- HTML-де кестелермен жұмыс жасау;
- Кестелерді шығару тегтерін білу.
Бағалау критерийі:
1. Нұсқаулық бойынша атрибуттарды қолданып кесте құру жолын біледі;
2. Кестені өзгертетін атрибуттарды анықтайды;
3. HTML тегтерін қолданудың қажеттілігін тұжырымдайды.
3
Түйін сөздер:
Қазақ тілінде
Ағылшын тілінде
Ұяшық
Cell
Кесте
Table
4
Кесте
–жолдар
мен
бағандардың
қиылысында
орналасқан
ұяшықтар
жиынтығы.
Кесте
ұяшықтарында мәліметтер болады.
Кесте – web-сайттың негiзгi бөлiктерiнiң бiрi. Кесте мынадай бөлiктерден тұрады:
• кесте тақырыбы;
• бағандар тақырыптары;
• ұяшықтар.
Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн,
содан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi.
5
Кесте тұрғызу <TABLE> және </ TABLE> тегтері көмегімен орындалады
Кесте құру үшін қолданылатын HTML тегтері
6
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Өзендер</caption>
<table>
<tr><th>Өзен</th><th>Ұзындығы</th><th>Қазақстанда</th></tr>
<tr><td>Ертіс</td><td>4248км</td><td>1700км</td></tr>
<tr><td>Есіл</td><td>2450км</td><td>1400км</td></tr>
<tr><td>Жайық</td><td>2428км</td><td>1082км</td></tr>
<tr><td>Сырдария</td><td>2219км</td><td>1400км</td></tr>
<tr><td>Тобыл</td><td>1591км</td><td>800км</td></tr>
<tr><td>Іле</td><td>1439км</td><td>815км</td></tr>
<tr><td>Шу</td><td>1186км</td><td>800км</td></tr>
</table>
</body>
</html>
1-мысал. Қазақстандағы ұзын өзендер. (Жиексіз кесте құру)
7
Кесте тегінің атрибуттары
Атрибут
Атрибут мәнінің сипаттамасы
Align=“…”
Жол ұяшықтарындағы мәліметтерді туралау режимін
анықтайды
Left – сол жақ шеті бойынша туралау
Center – ортасы бойынша туралау
Right – оң жақ шеті бойынша туралау
Justify – екі шеті бойынша туралау
Background=“URL”
Жол ұяшықтарының фонын толтыратын URL сурет
Bgcolor=“түс”
Жол ұяшықтарының фон түсі
Bordercolor=“түс”
Ұяшық жиегінің түсін өзгерту
Width=“…”
Барлық кестенің немесе ұяшықтың енін пиксельдерде
немесе браузер терезесінің еніне қатысты пайыздық
үлесте анықтайды
Height=“…”
Барлық кестенің немесе ұяшықтың биіктігін
пиксельдерде немесе браузер терезесінің биіктігіне
қатысты пайыздық үлесте анықтайды
Border=“…”
Кесте жиегінің енін пиксельдерде орнатады, мысалы,
border=2
8
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Өзендер</caption>
<table border=1>
<tr><th>Өзен</th><th>Ұзындығы</th><th>Қазақстанда</th></tr>
<tr><td>Ертіс</td><td>4248км</td><td>1700км</td></tr>
<tr><td>Есіл</td><td>2450км</td><td>1400км</td></tr>
<tr><td>Жайық</td><td>2428км</td><td>1082км</td></tr>
<tr><td>Сырдария</td><td>2219км</td><td>1400км</td></tr>
<tr><td>Тобыл</td><td>1591км</td><td>800км</td></tr>
<tr><td>Іле</td><td>1439км</td><td>815км</td></tr>
<tr><td>Шу</td><td>1186км</td><td>800км</td></tr>
</table>
</body>
</html>
2-мысал. Қазақстандағы ұзын өзендер. (Жиекті кесте құру)
<table border=3>
9
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Өзендер</caption>
<table border=1>
<tr><th>Өзен</th><th>Ұзындығы</th><th>Қазақстанда</th></tr>
<tr><td align="center">Ертіс</td><td align="right">4248км</td><td>1700км</td></tr>
<tr><td align="center">Есіл</td><td align="right">2450км</td><td>1400км</td></tr>
<tr><td align="center">Жайық</td><td align="right">2428км</td><td>1082км</td></tr>
<tr><td align="center">Сырдария</td><td align="right">2219км</td><td>1400км</td></tr>
<tr><td align="center">Тобыл</td><td align="right">1591км</td><td>800км</td></tr>
<tr><td align="center">Іле</td><td align="right">1439км</td><td>815км</td></tr>
<tr><td align="center">Шу</td><td align="right">1186км</td><td>800км</td></tr>
</table>
</body>
</html>
3-мысал. Қазақстандағы ұзын өзендер (Align=“…” мәтіндерді туралау режимін қолдану)
10
<html>
<head>
<title>Table1</title>
</head>
<body text=blue>
<center>
<caption>Өзендер</caption>
<table border="3" bordercolor=red>
<tr bgcolor="green"><th>Өзен</th><th height="25%">Ұзындығы</th><th>Қазақстанда</th></tr>
<tr bgcolor="yellow"><td align="center">Ертіс</td><td align="right">4248км</td><td>1700км</td></tr>
<tr bgcolor="yellow"><td align="center">Есіл</td><td align="right">2450км</td><td>1400км</td></tr>
<tr bgcolor="yellow"><td align="center">Жайық</td><td
align="right">2428км</td><td>1082км</td></tr>
<tr bgcolor="yellow"><td align="center">Сырдария</td><td
align="right">2219км</td><td>1400км</td></tr>
<tr bgcolor="yellow"><td align="center">Тобыл</td><td align="right">1591км</td><td>800км</td></tr>
<tr bgcolor="yellow"><td align="center">Іле</td><td align="right">1439км</td><td>815км</td></tr>
<tr bgcolor="yellow"><td align="center">Шу</td><td align="right">1186км</td><td>800км</td></tr>
</table>
</body>
</html>
4-мысал. Қазақстандағы ұзын өзендер (Түстермен жұмыс)
11
5-мысал. (Ұяшықтарды біріктіру)
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Кесте</caption>
<table border=2>
<tr><th>1-ұяшық</th><th>2-ұяшық</th><th>3-ұяшық</th></tr>
<tr><td>4-ұяшық</td><td>5-ұяшық><td>6-ұяшық</td></tr>
<tr><td>7-ұяшық</td><td>8-ұяшық</td><td>9-ұяшық</td></tr>
</table>
</body>
</html>
Бір бағанда екі іргелес ұяшықтарды біріктіру үшін <th> немесе </td> тегінің rowspan атрибутын
пайдалану керек. Мысалы: <td rowspan=2>.
Бір жолда екі іргелес ұяшықты біріктіру үшін сол тегтердің colspan атрибуттарын пайдалану
керек, мысалы: <td colspan=2>
12
5-мысал. (Ұяшықтарды біріктіру)
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Кесте</caption>
<table border="2">
<tr><th colspan="3">1-ұяшық</th></tr>
<tr><td>4-ұяшық</td><td>5-ұяшық</td><td>6-ұяшық</td></tr>
<tr><td>7-ұяшық</td><td>8-ұяшық</td><td>9-ұяшық</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>Table1</title>
</head>
<body>
<center>
<caption>Кесте</caption>
<table border="2">
<tr><th colspan="3">1-ұяшық</th></tr>
<tr><td rowspan=“2”>4-ұяшық</td><td>5-ұяшық</td><td>6-
ұяшық</td></tr>
<tr><td>8-ұяшық</td><td>9-ұяшық</td></tr>
</table>
</body>
</html>
13
1-тапсырма. Тест жұмысы.
1. Кестені анықтайтын жұптық тег:
a) <table>
b) <tt>
c) <tr>
d) <td>
2. Кестенің жолын анықтайтын тег:
a) <br>
b) <tr>
c) <td>
d) <hr>
3. Кестенің ұяшығын анықтайтын тег:
a) <br>
b) <hr>
c) <td>
d) <tt>
4. Кестенің шетін қою үшін қандай атрибут қолданылады?
a) type
b) align
c) border
d) height
5. Кестенің бағаналарының біріктірілуін қандай тег анықтайды?
a) border b) colspan c) cellspacing d) rowspan
14
1-тапсырма. Тест жұмысы жауабы:
1. Кестені анықтайтын жұптық тег:
a) <table>
b) <tt>
c) <tr>
d) <td>
2. Кестенің жолын анықтайтын тег:
a) <br>
b) <tr>
c) <td>
d) <hr>
3. Кестенің ұяшығын анықтайтын тег:
a) <br>
b) <hr>
c) <td>
d) <tt>
4. Кестенің шетін қою үшін қандай атрибут қолданылады?
a) type
b) align
c) border d) height
5. Кестенің бағаналарының біріктірілуін қандай тег анықтайды?
a) border b) colspan c) cellspacing d) rowspan
15
2-тапсырма.
Төмендегі кодтауда кеткен қатесін көрсетіңіз және қате санын табыңыз.
<table>
<tr>
<th> Аты</th>
<th> Сынып </tr>
<th>
<tr>
<td> Жанар<td>
<th>10A</td>
</tr>
Дескриптор:
1. Кодтауда кеткен қатені түзейді;
2. Қателер санын табады.
16
2-тапсырма жауабы:
Төмендегі кодтауда кеткен қатесін көрсетіңіз және қате санын табыңыз.
<table>
<tr>
<th> Аты</th>
<th> Сынып </tr>
<th>
<tr>
<td> Жанар<td>
<th>10A</td>
</tr>
<table>
<table>
<tr>
<th> Аты</th>
<th> Сынып </th>
</tr>
<tr>
<td> Жанар</td>
<td>10A</td>
</tr>
</table>
Қате саны: 5
17
3-тапсырма.
Кесте қанша жол және қанша бағаннан тұратынын анықтаңыздар.
<html>
<head>
<title> Table1 </title>
</head>
<body>
<table border=“2”>
<tr>
<td> 1-ұяшық </td><td>2-ұяшық</td><td>3-ұяшық</td>
</tr>
<tr>
<td> 4-ұяшық </td><td>5-ұяшық</td><td>6-ұяшық</td>
</tr>
</table>
</body>
</html>
Дескриптор:
1. Кестеде қанша жол бар екенін анықтайды;
2. Кестеде қанша баған бар екенін анықтайды.
18
3-тапсырма жауабы:
Кесте қанша жол және қанша бағаннан тұратынын анықтаңыздар.
<html>
<head>
<title> Table1 </title>
</head>
<body>
<table border=“2”>
<tr>
<td> 1-ұяшық </td><td>2-ұяшық</td><td>3-ұяшық</td>
</tr>
<tr>
<td> 4-ұяшық </td><td>5-ұяшық</td><td>6-ұяшық</td>
</tr>
</table>
</body>
</html>
Жауабы:
1. Кестеде 2 жол бар;
2. Кестеде 3 баған бар.
19
Қорытынды
Бүгінгі сабақта:
• HTML-де кестелермен жұмыс жасауды;
• Кестелерді шығару
тегтерін;
• Кесте атрибуттарын;
• Кестеге жиектер, түстер жасауды;
• Іргелес жатқан жол, баған ұяшықтарын біріктіруді қарастырдық.
20
Оқу тапсырмасы
Бүгінгі сабақта өткен тегтерді пайдаланып, төмендегі тапсырманы орындаңыздар.
HTML ТІЛІНДЕ КЕСТЕ
ҚҰРУ
10 сынып
Сабақтың тақырыбы
Show answer
Auto Play
Slide 1 / 20
SLIDE
Similar Resources on Wayground
15 questions
Supplementary & Complementary Angles
Presentation
•
10th Grade
15 questions
Inequalities Intro
Presentation
•
7th Grade
16 questions
Nothing Gold Can Stay
Presentation
•
7th Grade
14 questions
Dividing Integers
Presentation
•
7th Grade
15 questions
Bài 8 Thư điện tử - lớp 6
Presentation
•
6th Grade
15 questions
Bảng nhân 9
Presentation
•
1st - 3rd Grade
15 questions
Slope Formula Lesson
Presentation
•
9th - 10th Grade
15 questions
Dehydration Synthesis and Hydrolysis
Presentation
•
10th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade
Discover more resources for Other
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade