Как использовать index.html

Допустим наш сайт уже находится в интернете и имеет доменное имя «nemeckieavto.ru». По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru

Файл index.html в обязательном порядке присутствует абсолютно на любом сайте. Сайт не будет работать без этого файла. В одностраничных сайтах присутствует только файл index.html, других файлов нет.

Создаем еще три страницы html.

На 2-ом уроке мы создали папку «Сайт» и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется «new 0». Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла «new 0». Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.

С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html, то это не значит что нужно дать ему имя bmw.html, это значит ,что файл должен иметь имя bmw, а html — это расширение (тип) файла, а не часть его имени!

Для тех, кто в танке, в результате в папке «Сайт» у нас 4 файла с расширением html:

Если по умолчанию у Вас стоит браузер FireFox, то вид ваших файлов будет как на рисунке. Если же по умолчанию установлен другой браузер, то и файлы будут с изображением другого браузера.

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. H TML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст,
помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего
индекса

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента делает код громоздким, поэтому лучше переопределить стили и , в частности, задать положение индекса, цвет и курсивное начертание.

Последнее изменение: 05.08.2023

Введение в HTML и CSS завершено и пора копать немного глубже в HTML и изучить разные компоненты, из которых состоит этот язык.

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

Использование надлежащего элемента для работы проходит длинный путь и мы хотим делать обоснованные решения в этом процессе.

Обзор семантики

Так что такое семантика? Семантика в HTML является практикой предоставления смысла и структуры содержимого на странице с помощью соответствующего элемента. Семантический код описывает значение содержимого на странице, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов — чтобы компьютеры, экранные ридеры, поисковые системы и другие устройства адекватно читали и понимали содержимое веб-страницы. Кроме того, семантический HTML проще для управления и работы с ним, так как ясно показывает, для чего служит каждый фрагмент контента.

Двигаясь вперед и представив новые элементы, мы поговорим о том, что эти элементы на самом деле означают и тип контента, который они представляют лучше. Прежде, чем мы это сделаем давайте рассмотрим два элемента — и , которые на деле не несут никакого семантического смысла. Они существуют только в целях стилизации.

и — это элементы HTML, которые действуют как контейнеры исключительно для целей стилизации. В виде основных контейнеров они не несут какого-либо всеобъемлющего смысла или семантического значения. Абзацы семантически уже потому, что содержимое внутри элемента известно и понятно как абзац. и не содержат какого-либо значения и являются просто контейнерами.

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

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

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

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

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

Мы обычно видим и с атрибутом или в целях стилизации. Выбор значения или имени атрибута или требует некоторого внимания. Мы хотим, чтобы выбранное значение было связано с содержимым элемента, а не с его оформлением.

Например, если у нас есть с оранжевым фоном, который содержит ссылки социальных сетей, нашей первой мыслью может быть дать значение как . Что произойдёт, если оранжевый фон позже сменится на синий? Значение класса потеряет смысл. Более разумным выбором для значения будет , поскольку он относится к содержимому , а не к его стилю.

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

Заголовки

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

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

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

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

Демонстрация заголовков

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

Демонстрация абзацев

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

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

Вот два варианта HTML создания жирного текста в действии:

Демонстрация важного и жирного текста

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

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

Вот код HTML для курсива:

Демонстрация акцента и курсивного текста

Эти текстовые элементы довольно удобны чтобы вдохнуть в наш контент жизнь. В дополнение к этому, существуют структурные элементы. В то время как текстовые элементы определяют заголовки и абзацы, структурные элементы определяют группы контента, такие как «шапка», «статья», «подвал» и др. Давайте взглянем на них.

Создание структуры

Долгое время структура веб-страницы была построена с помощью . Проблема в том, что они не обеспечивают семантическое значение и было довольно трудно определить их смысл. К счастью в HTML5 введены новые структурные базовые элементы, в том числе , , , , и .

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

Давайте засучим рукава и взглянем на них ближе.

Рис. 2.01. Один из возможных примеров структурных элементов HTML5, придающих смысл организации нашим страницам

<header>

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

Элемент является структурным элементом, который описывает заголовок сегмента страницы. Он находится внутри элемента .

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

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

Навигация

Чаще всего ссылки внутри элемента будут вести на другие страницы в пределах одного сайта или частей той же веб-страницы. Разные одноразовые ссылки не должны быть обернуты элементом , они должны использовать только элемент .

<article>

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

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

<section>

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

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

Выбор между элементами <article>, <section> или <div>

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

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

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

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

<aside>

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

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

Мы обсудим как изменить положение элемента, поместив его справа или слева в группе контента, в уроке 5 «Позиционирование содержимого».

<footer>

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

Со структурными и текстовыми элементами за пазухой наши знания HTML действительно начинает работать вместе. Сейчас самое время вернуться к нашему сайту Styles Conference и посмотреть, как мы можем немного улучшить его структуру.

На практике

На данный момент нашему сайту Styles Conference не хватает реальной структуры и содержимого для него. Потратим немного времени, чтобы немного расширить нашу главную страницу.

Рис. 2.02. Наша страница после добавления нового содержимого и структуры

Специальные символы

Элемент внутри , а также внутри содержит кое-что интересное, в частности, несколько специальных символов.

Специальные символы включают в себя различные знаки препинания, буквы с диакритическими знаками и символы. Когда они набирается непосредственно в HTML, то могут быть неправильно поняты или ошибочно приняты за другую букву, поэтому должны быть кодированы.

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

Например, мы могли бы кодировать слово «resumé» как «resum&eacute;». В нашем заголовке мы кодировали среднее и длинное тире, а в подвале символ авторского права. Для справки, длинный список кодов символов можно найти на Copy Paste Character.

Создание гиперссылок

Наряду с текстом, одним из основных компонентов Интернета выступает гиперссылка, которая обеспечивает связь одной веб-страницы или ресурса с другой. Гиперссылки создаются с помощью строчного элемента . Чтобы создать ссылку с одной страницы (или ресурса) на другую, требуется атрибут (от hyperlink reference). Он определяет назначение ссылки.

Например, нажав на текст «Shay», который находится внутри ссылки со значением атрибута как , мы перенесём пользователя на мой сайт.

Блочные элементы со ссылками

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

Относительные и абсолютные пути

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

Ссылки, ведущие на другие страницы того же сайта, будут содержать относительный путь, который не включает домен (.ru, .com, .org, .edu и др.) в значении атрибута . Поскольку ссылка указывает на другую страницу этого же сайта, значение href должно включать в себя только имя связанной страницы: about.html, например.

Если страница в ссылке находится в другой папке, то значение также должно отразить это. Скажем, страница about.html находится в папке pages, относительный путь тогда будет pages/about.html.

Ссылки на другие сайты за пределами текущего требуют абсолютный путь, где значение должно включать полный домен. Ссылка на Google http://google.com для атрибута начинается с http и в этом случае включает домен .com.

Ниже щёлкнув на текст «О нас» вы откроете страницу about.html в браузере. Щёлкнув на текст «Google», с другой стороны, в браузере откроется http://google.com.

Ссылка на адрес электронной почты

Иногда мы хотим создать гиперссылку на наш адрес электронной почты, например, текст гиперссылки «Email Me» при щелчке открывает клиент электронной почты пользователя, заданный по умолчанию и предварительно заполняет часть данных. Как минимум, адрес электронной почты и другую информацию, такую как тема и текст письма, которые также могут быть включены.

Дополнительно может быть добавлена тема, текст и другая информация для почты. Чтобы добавить тему, мы включим параметр subject= после адреса. Первый параметр после адреса должен начинаться вопросительным знаком (?), чтобы связать его с адресом гиперссылки. Несколько слов в строке темы требуют кодирование пробелов с помощью %20.

Добавление текста работает аналогичным образом, как и добавление темы, на этот раз с помощью параметра body= в значении href. Поскольку мы связываем один параметр с другим, нам нужно использовать амперсанд (&) для их разделения. Как и с темой, пробелы должны быть кодированы через %20, а перенос строк с помощью %0A.

Вот полный код:

Открытие ссылки в новом окне

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

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

Чтобы открыть http://shayhowe.com в новом окне, код будет выглядеть следующим образом:

Связывание частей одной страницы

Периодически мы увидим гиперссылки, которые указывают на часть той же страницы, где отображается ссылка. Типичным примером таких связей является ссылка «Вернуться наверх», которая возвращает пользователя к верхней части страницы.

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

Используя ссылку «Вернуться наверх» в качестве примера, мы можем вставить атрибут вверху для элемента . Теперь мы можем создать ссылку с атрибутом и значением , которая ссылается на начало элемента .

Наш код для этой ссылки в той же странице будет выглядеть следующим образом:

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

Пришло время превратить одностраничный сайт Styles Conference в полномасштабный сайт с несколькими страницами, все они будут связаны вместе с помощью гиперссылок.

Официально мы больше не работаем с одной страницы, а работаем в действительности с полноценным сайтом.

Рис. 2.03. Наша страница после всех добавленных разных ссылок и навигации

Демонстрация и исходный код

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

Ещё раз, в этом уроке мы рассмотрели следующее:

Надеюсь, вы начинаете чувствовать себя довольно уверенно с HTML. Осталось немного, что нам ещё следует изучить, но основа уже на месте. Далее мы глубже взглянем на CSS.

Career Karma recieves compensation from our bootcamp partners who are thoroughly vetted before being featured on our website. This commission is reinvested into growing the community to provide coaching at zero cost to their members.

Find the right bootcamp for you

By continuing you agree to our
Terms of Service and Privacy Policy, and you consent to
receive offers and opportunities from Career Karma by telephone, text message, and email.

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. H TML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

Вложенные элементы

Моя кошка очень раздражена.

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Моё тестовое изображение

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

Моя тестовая страница

Моё тестовое изображение

Здесь мы имеем:

Изображения

Давайте снова обратим наше внимание на элемент изображения:

Mоё тестовое изображение

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

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

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

Разметка текста

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

Мой главный заголовок
Мой заголовок верхнего уровня
Мой подзаголовок
Мой под-подзаголовок

Абзацы

Это одиночный абзац

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

Мы могли бы изменить разметку на эту:

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

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Заключение

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

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