HTML

Presentation

•

Other

•

KG - Professional Development

•

Practice Problem

•

Hard

Маржан Шайжанова

Used 3+ times

FREE Resource

20 Slides • 0 Questions

HTML ТІЛІНДЕ КЕСТЕ

ҚҰРУ

10 сынып

Сабақтың тақырыбы

Сабақтың мақсаты:
- HTML-де кестелермен жұмыс жасау;
- Кестелерді шығару тегтерін білу.

Бағалау критерийі:

1. Нұсқаулық бойынша атрибуттарды қолданып кесте құру жолын біледі;
2. Кестені өзгертетін атрибуттарды анықтайды;
3. HTML тегтерін қолданудың қажеттілігін тұжырымдайды.

Түйін сөздер:

Қазақ тілінде

Ағылшын тілінде

Ұяшық
Cell

Кесте
Table

Кесте

–жолдар

мен

бағандардың

қиылысында

орналасқан

ұяшықтар

жиынтығы.

Кесте

ұяшықтарында мәліметтер болады.

Кесте – web-сайттың негiзгi бөлiктерiнiң бiрi. Кесте мынадай бөлiктерден тұрады:
• кесте тақырыбы;
• бағандар тақырыптары;
• ұяшықтар.
Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн,
содан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi.

Кесте тұрғызу <TABLE> және </ TABLE> тегтері көмегімен орындалады

Кесте құру үшін қолданылатын HTML тегтері

<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-мысал. Қазақстандағы ұзын өзендер. (Жиексіз кесте құру)

Кесте тегінің атрибуттары

Атрибут

Атрибут мәнінің сипаттамасы

Align=“…”

Жол ұяшықтарындағы мәліметтерді туралау режимін
анықтайды
Left – сол жақ шеті бойынша туралау
Center – ортасы бойынша туралау
Right – оң жақ шеті бойынша туралау
Justify – екі шеті бойынша туралау

Background=“URL”

Жол ұяшықтарының фонын толтыратын URL сурет

Bgcolor=“түс”

Жол ұяшықтарының фон түсі

Bordercolor=“түс”

Ұяшық жиегінің түсін өзгерту

Width=“…”

Барлық кестенің немесе ұяшықтың енін пиксельдерде
немесе браузер терезесінің еніне қатысты пайыздық
үлесте анықтайды

Height=“…”

Барлық кестенің немесе ұяшықтың биіктігін
пиксельдерде немесе браузер терезесінің биіктігіне
қатысты пайыздық үлесте анықтайды

Border=“…”

Кесте жиегінің енін пиксельдерде орнатады, мысалы,
border=2

<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-мысал. Қазақстандағы ұзын өзендер. (Жиекті кесте құру)

<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=“…” мәтіндерді туралау режимін қолдану)

<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-мысал. Қазақстандағы ұзын өзендер (Түстермен жұмыс)

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>

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>

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

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

2-тапсырма.

Төмендегі кодтауда кеткен қатесін көрсетіңіз және қате санын табыңыз.

<table>
<tr>
<th> Аты</th>
<th> Сынып </tr>
<th>
<tr>
<td> Жанар<td>
<th>10A</td>
</tr>

Дескриптор:

1. Кодтауда кеткен қатені түзейді;
2. Қателер санын табады.

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

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. Кестеде қанша баған бар екенін анықтайды.

3-тапсырма жауабы:

Кесте қанша жол және қанша бағаннан тұратынын анықтаңыздар.

Жауабы:

1. Кестеде 2 жол бар;
2. Кестеде 3 баған бар.

Қорытынды

Бүгінгі сабақта:
• HTML-де кестелермен жұмыс жасауды;
• Кестелерді шығару

тегтерін;

• Кесте атрибуттарын;
• Кестеге жиектер, түстер жасауды;
• Іргелес жатқан жол, баған ұяшықтарын біріктіруді қарастырдық.

Оқу тапсырмасы

Бүгінгі сабақта өткен тегтерді пайдаланып, төмендегі тапсырманы орындаңыздар.

HTML ТІЛІНДЕ КЕСТЕ

ҚҰРУ

10 сынып

Сабақтың тақырыбы

Show answer

Auto Play

Slide 1 / 20

SLIDE

Similar Resources on Wayground

14 questions

Textos expositivos

Lesson

•

5th Grade

15 questions

Solving Two step Inequalities

Lesson

•

7th Grade

15 questions

Reflections Practice

Lesson

•

7th - 10th Grade

15 questions

Text Structure: Cause and Effect (Kilauea

Lesson

•

4th - 5th Grade

18 questions

PHÂN SỐ THẬP PHÂN

Lesson

•

5th Grade

15 questions

EXERC.L.I.n4

Lesson

•

17 questions

KETENAGAKERJAAN

Lesson

•

11th Grade

17 questions

Syllable Division Rules Review

Lesson

•

7th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade

Discover more resources for Other

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade