Испытание: форма регистрации [11/18] проверка 2 страница

Как раз для описания изменений предназначены теги <del> и <ins>.

<del> выделяет текст, который был удалён в новой версии документа.

<ins> выделяет текст, который был добавлен в новой версии документа.

Оба тега имеют атрибут datetime, в котором можно указать дату и время, когда была внесена та или иная правка.

Простейшим примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом <del>, если найдена новая ошибка, то её добавляют в список и помечают тегом <ins>.

Атрибут datetime предназначен не для людей, а для компьютеров, поэтому дату и время там пишут в стандартизованном формате. При такой разметке программам легче разбирать документы и анализировать, когда произошли те или иные изменения.

Преформатированный текст [14/17]

Наверное, вы уже заметили, как отличается отображение кода в HTML-редакторе и в мини-браузере.

Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер отобразит их как один. Вы также можете ставить сколько угодно переносов строки в HTML-коде, а в браузере переноса не будет, если только не использовать специальные теги, например <p> или <br>.

Изменить это поведение браузера можно с помощью тега <pre>, который обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

Наиболее часто этот тег используется при отображении примеров кода.

text/menu-14-17.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Преформатированный текст</title>

</head>

<body>

<pre>

/\ \ __/\ \ /\ \

\ \ \/\ \ \ \ __\ \ \____

\ \ \ \ \ \ \ /'__`\ \ '__`\

\ \ \_/ \_\ \/\ __/\ \ \_\ \

\ `\___x___/\ \____\\ \_,__/

\ /__//__/ \/____/ \/___/</pre>

</body>

</html>

Просто выделенный текст [15/17]

В HTML5 появился новый тег <mark>, который обозначает выделенный текст.

Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое на что стоит обратить внимание. Такое же назначение и у тега<mark>.

В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном.

Испытание: разметка статьи [16/17]

Чтобы пройти испытание, вам необходимо разметить текст в HTML-редакторе точно так же, как и в образце.

При создании образца были использованы только те HTML-теги, которые изучались в данном курсе. CSS-стили не использовались, так что изменять код CSS-редактора нельзя.

Если отображение в мини-браузере сильно отличается от образца, то используйте вкладку «Различия», в которой отображается то, как наш сервер видит ваш HTML-код.

Посмотрите видеоразбор испытания, если не получается его пройти или интересно авторское решение. Но сначала попробуйте сами.

Text / menu -16-17. html

<!DOCTYPE html>

<html>

<head>

<title>Язык разметки</title>

<style>

body {

width: 260px;

margin: 0;

padding: 0 10px;

font-family: "Times New Roman", serif;

font-size: 16px;

}

</style>

</head>

<body>

<h1> Язык разметки</h1>

<p> <strong>Язык разметки</strong> в компьютерной<br> терминологии — набор символов или<br> последовательностей, вставляемых в<br> текст для передачи информации о его<br> выводе или строении. Принадлежит<br> классу компьютерных языков.</p>

<h2> Структура языка</h2>

<p>Текстовый документ, написанный с<br> использованием языка разметки,<br> содержит не только сам текст но и<br> дополнительную информацию:<br>

<ul>

<li>указание на заголовки</li>

<li><mark>выделения</mark></li>

<li>списки</li>

</ul>

<p>В более сложных случаях язык<br> разметки позволяет вставлять в <br>документ <em>интерактивные элементы</em><br> и содержание других документов.</p>

</body>

</html>

Испытание: Рецепт каши [17/17]

Задача аналогична предыдущей. В этом испытании использованы другие тэги из данного курса.

Видео

Пшенная каша с тыквой

1. Пшено, 1 стакан

2. Вода H₂O или AquaLife^®, 2
стакана

3. Молоко, 1,5 стакана 2 стакана

4. Масло сливочное, 3 ст.л.

5. Тыква, около 300г

6. Соль, по вкусу

7. Сахар демерара, посыпать
сверху

Примечания:
Пшено необходимо перебрать
Тыкву нарезать кубиками 1х1 см
Кашу перемешивать не надо

Text/menu-17-17.html

<!DOCTYPE html>

<head>

<title>Рецепт каши тспытание</title>

<style>

body {

width: 260px;

margin: 0;

padding: 0 10px;

font-family: "Times New Roman", serif;

font-size: 16px;

}

h1 {

font-size: 18px;

}

</style>

</head>

<body>

<h1>Пшенная каша с тыквой</h1>

<ol>

<li>Пшено, 1 стакан</li>

<li>Вода H<sub>2</sub>O или AquaLife<sup>®</sup>, 2<br> стакана</li>

<li>Молоко, <del>1,5 стакана</del> 2 стакана</li>

<li>Масло сливочное, 3 ст.л.</li>

<li>Тыква, около 300г</li>

<li>Соль, по вкусу</li>

<li><ins>Сахар демерара, посыпать<br> сверху</ins></li>

</ol>

<hr>

<p>

<i>Примечания:</i><br>

Пшено необходимо перебрать<br>

Тыкву нарезать кубиками 1х1 см<br>

Кашу перемешивать не надо

</p>

</body>

</html>

Работа с таблицами

Добавляем строки [2/23]

Простейшая таблица описывается с помощью трёх тегов:

1. <table> обозначает таблицу.

2. <tr> расшифровывается как «table row», обозначает строку таблицы.

3. <td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>. Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.

Потренируйтесь добавлять строки в таблицу.

Тренируемся в добавлении столбцов

Задаём рамки с помощью CSS [4/23]

Вы научились создавать простые таблицы, добавлять в них любое количество строк и столбцов. Теперь пришло время оформить эти таблицы.

Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

Поэтому мы будем учиться использовать CSS. С помощью CSS-свойства border можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.

Потренируемся использовать CSS для задания рамок таблицы.

table/table4.html

<!DOCTYPE HTML>

<html>

<head>

<title>Задаём рамки с помощью CSS</title>

table {

border: 3px solid black;

}

td {

border: 3px solid lightgray;

}

</style>

</head>

<body>

<h1>Распределение браузеров</h1>

<table>

<tr>

<td>Браузер</td>

<td>Посещения</td>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Улучшаем отображение рамок [5/23]

Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {

border-collapse: collapse;

}

Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Файл table/table5.html

<!DOCTYPE HTML>

<html>

<head>

<title>Улучшаем отображение рамок table/table5.html</title>

table {

border: 6px solid black;

border-collapse: collapse;

}

td {

border: 3px solid lightgray;

}

</style>

</head>

<body>

<h1>Распределение браузеров</h1>

<table>

<tr>

<td>Браузер</td>

<td>Посещения</td>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Горизонтальные и вертикальные рамки [6/23]

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

· border-top

· border-right

· border-bottom

· border-left

Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.

В этом задании вы потренируетесь создавать горизонтально и вертикально расчерченные таблицы.

Отступы внутри ячеек [7/23]

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега <table>. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

· padding-top,

· padding-right,

· padding-bottom,

· padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td {

padding: 10px;

padding-left: 20px;

}

Отступы между ячейками [8/23]

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

Помимо внутренних отступов можно задавать отступы между ячейками таблицы.

Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

· с помощью атрибута cellspacing тега <table>

· или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Испытание: простая, но аккуратная таблица [9/23]

Для того, чтобы пройти это испытание, вам нужно оформить таблицу так же, как в образце. Используйте знания, полученные в пройденных заданиях.

Подсказки:

1. Цвет рамок: lightgray.

2. Стили для body менять не надо.

3. Использовались только стандартные теги.

4. Стили применять только к табличным тегам: <table>, <td>.

5. Размеры отступов кратны 5.

6. При стилизации рамок в CSS не забывайте слово solid.

Если отображение в мини-браузере сильно отличается от образца, то используйте вкладку «Различия», в которой отображается то, как академия видит ваш HTML-код.

table/table9.html

<!DOCTYPE HTML>

<html>

<head>

<title>Простая, но аккуратная таблица</title>

body {

width: 350px;

margin: 0;

padding: 0 10px;

font-size: 14px;

font-family: Arial, sans-serif;

}

table {

border-collapse: collapse;

border-spacing: 5px;

}

td {

padding: 10px;

border-bottom: 2px solid lightgray;

}

</style>

</head>

<body>

<h1>Посещения по городам</h1>

<table>

<tr>

<td>Город</td>

<td>Посещения</td>

<td>Страниц</td>

<td>Время</td>

</tr>

<tr>

</tr>

<tr>

<td>Москва</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Ячейки-заголовки [10/23]

Поздравляем! Вы научились создавать простейшие таблицы и оформлять их. В следующей части курса мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

В этом задании мы наконец-то добавим в нашу таблицу ячейки-заголовки и оформим их: добавим увеличенные отступы и более яркие рамки.

table/table10.html

<!DOCTYPE html>

<html>

<head>

<title>Ячейки-заголовки</title>

<style>

table {

border-collapse: collapse;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 30px;

border: 1px solid lightgrey;

}

th {

padding: 10px;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>Распределение браузеров</h1>

<table>

<tr>

<th>Браузер</th>

<th>Посещения</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Заголовок таблицы [11/23]

В предыдущем задании вы создали заголовочные ячейки с помощью подходящих тегов, в этом задании мы создадим подпись к таблице (или заголовок таблицы).

Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

<table>

<caption>Текст</caption>

...

</table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

12. colspan=”2”, 13. rowspan=”3”

Заголовок таблицы [17/23]

Table/table17.html

<!DOCTYPE html>

<html>

<head>

<title>Таблица посложнее</title>

<style>

body {

width: 350px;

padding: 0 10px;

font-size: 14px;

font-family: Arial, sans-serif;

}

table {

border-collapse: collapse;

}

caption {

caption-side: bottom;

}

th {

padding: 10px;

border-bottom: 2px solid black;

}

td {

border: 1px solid lightgrey;

padding: 10px;

}

</style>

</head>

<body>

<table>

Посещения по городам

</caption>

<tr>

<th> Город </th>

<th> Посещения</th>

<th> Страниц </th>

<th> Время </th>

</tr>

<tr>

</tr>

<tr>

<td> Москва </td>

<td rowspan="2">нет данных</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="3">Всего посещений</td>

</tr>

</table>

</body>

</html>

Выравнивание содержимого в ячейках [18/23]

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

td {vertical-align: значение;text-align: значение;}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов. В этом примере для вас уже подготовлены ячейки с классами.

table/table18.html

<!DOCTYPE html>

<html>

<head>

<title>Выравнивание содержимого в ячейках</title>

<style>

.cell-1 {

vertical-align: bottom;

}

.column-2 {

text-align: right;

}

.column-3 {

text-align: center;

}

table {

border-collapse: collapse;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 10px;

border: 1px solid lightgray;

}

th {

padding: 10px;

border: 1px solid black;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

</style>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th class="cell-1" rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Добавим цвета [19/23]

В этом задании мы раскрасим нашу скучную чёрно-белую таблицу. Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. Можно задавать и фоновые изображения, но это мы разберём в последующих курсах.

Цветами можно управлять с помощью этих свойств:

· background-color — задаёт цвет фона,

· color — цвет текста,

· border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок:border: 1px solid lightgray. В этой записи цвет задаёт третья часть — lightgray.

Значения цветов в CSS задаются разными способами. Мы будем использовать ключевые слова для описания цвета.

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:

td { color: цвет; background-color: цвет; border: 1px solid цвет;}

Конечно, раскрашивать можно и td, и th, и даже table. Приступим!

Table/table19.html

<!DOCTYPE html>

<html>

<head>

<title>Добавим цвета</title>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>