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
16 questions
Homophones grammaticaux - "Ça" et "Sa"
Presentation
•
1st Grade - University
15 questions
Programming
Presentation
•
6th Grade
16 questions
Fraction Decimal Percent Conversions Lesson & Practice
Presentation
•
6th Grade
14 questions
Race cars
Presentation
•
4th - 9th Grade
16 questions
Lab Safety Analysis
Presentation
•
6th - 12th Grade
16 questions
Identifying, Representing, Ordering, and Comparing Integers
Presentation
•
6th Grade
14 questions
Adverbs of Frequency and Degree
Presentation
•
4th Grade
16 questions
PPC 6.1 Law of Sines Day 1
Presentation
•
12th Grade
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Other
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade