HTML: Вкладки

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

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

Разметка

Ссылки

Вкладки реализуются через гиперссылки. Чтобы при клике не было перехода на другую страницу, в качестве значения атрибута 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