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
Reflexive and Intensive Pronouns
Presentation
•
5th - 8th Grade
15 questions
Isosceles and Equilateral Triangles
Presentation
•
9th - 10th Grade
15 questions
Adverbs of Manner
Presentation
•
7th - 8th Grade
14 questions
One Step Inequalities
Presentation
•
6th Grade
16 questions
Corresponding Parts of Congruent Figures
Presentation
•
9th - 12th Grade
17 questions
1-Frase, oração e período
Presentation
•
1st - 12th Grade
15 questions
Introduction to Inequalities
Presentation
•
5th - 7th Grade
15 questions
Line of Best Fit
Presentation
•
8th Grade
Popular Resources on Wayground
28 questions
US History Regents Review
Quiz
•
11th Grade
36 questions
Biology Regents Review
Quiz
•
9th - 10th Grade
20 questions
Math Review
Quiz
•
3rd Grade
38 questions
Regents Life Science General Review
Quiz
•
9th Grade
20 questions
Math Review
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
Discover more resources for Other
28 questions
US History Regents Review
Quiz
•
11th Grade
36 questions
Biology Regents Review
Quiz
•
9th - 10th Grade
20 questions
Math Review
Quiz
•
3rd Grade
38 questions
Regents Life Science General Review
Quiz
•
9th Grade
20 questions
Math Review
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade