1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
title: 'Аттестация: Структурирование данных о планетах'
slug: Learn/HTML/Tables/Structuring_planet_data
tags:
- HTML
- Начинающим
- таблицы
translation_of: Learn/HTML/Tables/Structuring_planet_data
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
<p class="summary">В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас <span class="tlid-translation translation" lang="ru"><span title="">структурировать их в </span></span>HTML таблицу.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые навыки:</th>
<td>Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле.</td>
</tr>
<tr>
<th scope="row">Цели:</th>
<td>Проверить знания о HTML таблицах и связанными с ними возможностями.</td>
</tr>
</tbody>
</table>
<h2 id="Отправная_точка">Отправная точка</h2>
<p>Для того, чтобы начать аттестацию, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> в новую директорию на вашем компьютере.</p>
<div class="note">
<p><strong>Примечание</strong>: В качестве альтернативы, вы можете использовать такие сайты, как <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code><script></code>/<code><style></code> элементы в HTML страницу.</p>
</div>
<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p>
<p>Готовая таблица должна выглядеть так:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
<p>Вы можете также<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html"> посмотреть на готовый вариант здесь</a> (не смотрите на исходный код — не жульничайте!).</p>
<ul>
</ul>
<h2 id="Шаги_для_завершения">Шаги для завершения</h2>
<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.</p>
<ol>
<li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li>
<li>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li>
<li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li>
<li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li>
<li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li>
<li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li>
<li>Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li>
</ol>
<h2 id="Подсказки_и_советы">Подсказки и советы</h2>
<ul>
<li>Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.</li>
<li>Заголовки групповых строк (например, <em>Jovian planets</em>), которые расположены слева от заголовков строк с именами планет (например, <em>Saturn</em>), немного сложно разобрать - необходимо убедиться, что каждый из них охватывает правильное количество строк и столбцов.</li>
<li>Один из способов связать заголовки с их строками / столбцами намного проще, чем другой.</li>
</ul>
<h2 id="Аттестация_или_дальнейшая_помощь">Аттестация или дальнейшая помощь</h2>
<p>Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:</p>
<ol>
<li>Разместите свою работу в онлайн-редакторе, таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle </a>или <a href="https://glitch.com/">Glitch</a>.</li>
<li>Напишите сообщение с просьбой об оценке и/или помощи в <a href="https://discourse.mozilla.org/c/mdn/learn">разделе обучения на форуме MDN Discourse</a>. Ваш пост должен включать:
<ul>
<li>Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».</li>
<li>Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.</li>
<li>Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.</li>
<li>Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.</li>
</ul>
</li>
</ol>
<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li>
<li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li>
<li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li>
</ul>
|
