HTML: Вкладки

Обновлено: 25 июля, 01:37
1672
Студента
64%
Завершения

Вкладки (Tabs) — распространённый вариант подачи информации на веб-страницах. Их используют как замену обычным спискам, когда нужно разместить большое количество информации. В рамках стандартных элементов это не всегда можно выполнить «аккуратно». Поэтому можно использовать вкладки, внешний вид которых и функционал может сильно различаться от сайта к сайту.

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

Вкладки на чистом CSS

Вкладки на чистом CSS при наведении

Разметка

Ссылки

Вкладки реализуются через гиперссылки. Чтобы при клике не было перехода на другую страницу, в качестве значения атрибута href используется октоторп #.

С помощью пользовательского атрибута data-tab определите имя каждой ссылки.

  • Для вкладки HTML значение html
  • Для вкладки CSS значение css
  • Для вкладки JavaScript значение js

Каждая ссылка имеет класс .tab-name.

Вкладки

Вкладки располагаются внутри контейнера .tabs-content. С помощью пользовательского атрибута data-tab-content определите имя для каждой вкладки.

  • Для вкладки HTML значение html
  • Для вкладки CSS значение css
  • Для вкладки JavaScript значение js

Каждая вкладка имеет класс .tabs-content-item. Контент внутри вкладки состоит из трёх частей:

  1. Изображение. Используйте соответствующие изображения из директории assets/img
  2. Заголовок второго уровня
  3. Текст. Тексты, в основном, состоят из нескольких параграфов. Они определяются пустыми строками в задании. Например, во вкладке HTML будет три параграфа и так далее

Текст вкладки HTML


HTML (HyperText Markup Language) — язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.

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

Слово «язык» в HTML стоит воспринимать как правила. Сам по себе HTML только размечает данные, но никак с ними не взаимодействует и визуально с ними ничего не делает. Всю работу по выводу текстовых данных и разметки берёт на себя браузер.


Текст вкладки CSS


CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.


Текст вкладки JavaScript


JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией стандарта ECMAScript (стандарт ECMA-262).

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

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком корпорации Oracle в США.


Стили

Подключите шрифт Raleway, который находится в директории assets/fonts. Для body подключите этот шрифт со следующими значениями:

  • Размер шрифта: 20px
  • Межстрочный интервал: 1.5
  • Семейство шрифта: без засечек

Колонки

Контейнер с классом .tabs выставляет элементы внутри себя в три колонки. Обратите внимание на то, что переносов внутри ссылок быть не должно. Между ссылками не должно быть отступов.

.tabs-content растягивается на все доступные колонки. Каждый элемент внутри .tabs-content тоже является контейнером, который разбивает контент на три колонки. Отступы между колонками 30 пикселей.

Ссылки

  • Внутренние отступы: 20px
  • Текст отцентрован
  • Отсутствует подчёркивание. Используйте свойство text-decoration
  • Цвет фона: #00adb5
  • При наведении и/или фокусе на ссылке добавляется сплошная граница снизу в три пикселя и цветом #5ffbf1

Обёртка tabs-content

  • Цвет фона: #393e46

Элементы tabs-content-item

  • По умолчанию все элементы скрыты. Используйте свойство display со значением none
  • При наведении или фокусе на ссылке должна появиться соответствующая вкладка. Используйте для этого свойство display со значением block
  • Внутренние отступы: по 20 пикселей с каждой стороны

Подсказки

  • Пути к шрифтам:
    • ../assets/fonts/Raleway-Regular.ttf
    • ../assets/fonts/Raleway-Bold.ttf

Для полного доступа к испытанию нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Отзывы

Аватар пользователя Андрей Луговов
Андрей Луговов 09 февраля 2023

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


Аватар пользователя Андрей Шляпников
Андрей Шляпников 15 июля 2021

Спасибо за интересное задание! Два дня я над ним просидел, но оно того стоило!


Аватар пользователя Anatoliy Poloz
Anatoliy Poloz 13 июля 2021

Мучался долго, дня 3 наверное. Но:

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

спасибо!


Аватар пользователя Дмитрий Бердников
Дмитрий Бердников 27 января 2021

Крутое испытание)

Некоторые элементы не расписаны, но это к лучшему. Можно самому додумать, так как есть тесты. Долго возился со шрифтом, так как давно не подключал ttf. Ставил format('ttf'), а оказывается для ttf, другой формат.