Хлебные крошки — это разновидность навигации, которая помогает посетителям понять, где они находятся на сайте и быстро перемещаться по иерархии веб-страниц. Обычно хлебные крошки отображаются в виде цепочки ссылок, разделённых между собой специальными символами (например: «>», «/» или «→»).

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

Рис. 1. Вид хлебных крошек

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

Разметка хлебных крошек обычно делается с помощью списков <ul> или <ol>, каждая ссылка вставляется внутрь пункта списка <li>. Для последнего пункта списка ссылка не нужна, поэтому вместо элемента <a> используем <span>.

<ol>
  <li><a href="/">Главная</a></li>
  <li><a href="/catalog/">Каталог</a></li>
  <li><a href="/catalog/electronics/">Электроника</a></li>
  <li><span>Смартфоны</span></li>
</ol>

На webref.ru добавился новый учебный курс, посвящённый стилизации <progress>. Этот HTML-элемент предназначен для создания шкалы прогресса, показывающей степень выполнения задачи или процесса.

В курсе рассмотрены следующие темы:

• создание шкалы прогресса;
• изменение цвета шкалы;
• стилизация для разных браузеров, включая Chrome, Safari, Firefox;
• специальные псевдоэлементы, работающие в определённых браузерах;
• использование линейного градиента для создания полосок;
• использование конического градиента для создания круговой шкалы.

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

На webref.ru выложил новый учебный курс, посвящённый поточной вёрстке.

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

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

На Stepik выложил бесплатный курс, посвящённый MathML. Это язык разметки математических выражений, который расширяет возможности HTML.

Многие полагают, что MathML нужен в первую очередь студентам, преподавателям и учёным, имеющим дело с математическими и физическими формулами. На деле же возможности MathML гораздо шире, чем просто математика. Вот какие преимущества есть у MathML.

• MathML является частью HTML5 и подчиняется тем же простым правилам, что и HTML. Это значит, что изучить MathML можно буквально за несколько дней.
• MathML можно использовать, вставляя его напрямую в HTML. Все современные браузеры прекрасно понимают и корректно отображают математические выражения. Не надо устанавливать никаких сторонних библиотек или расширений.
• MathML применяется, в том числе, для отображения дробей () и корней (), с чем HTML работать не умеет. Конечно, всё это можно сделать с использованием стилей, но зачем, если MathML справляется с этил лучше всех.

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

Так что записывайтесь на курс по MathML и расширяйте свои навыки веб-разработки.

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

• Основы HTML.
• Создание базовых веб-страниц.
• Форматирование текста.
• Работа с изображениями.
• Работа со списками.
• Работа с таблицами.
• Аудио и видео.
• Семантический HTML.

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

Курс бесплатный, для изучения требуется только регистрация на Stepik.

Традиционно цвета в CSS задаются с помощью модели RGB (red, green, blue — красный, зелёный, синий) в шестнадцатеричном формате. Вот, к примеру, как будет выглядеть белый цвет текста на зелёном фоне.

.primary { 
  background-color: #63a03e; /* Зелёный фон */
  color: #fff; /* Белый цвет */
}

Тот же цвет можно выразить и десятичными числами через стилевую функцию rgb().

.primary {
  background-color: rgb(99 160 62); /* Зелёный фон */
  color: rgb(255 255 255); /* Белый цвет */
}

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

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

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

Но есть и другая категория веб-дизайнеров, которые хотят задавать цвет другим способом. Для них в CSS введена поддержка цветовых моделей HSL, HWB, LAB, LCH и OKLCH. О последней и поговорим подробнее.

Сделал первый учебный курс на Stepik под названием CSS на примерах.

Курс охватывает такие темы:

• подключение стилей;
• синтаксис CSS;
• псевдоклассы
• псевдоэлементы;
• вложения;
• переменные CSS;
• каскадные слои;
• медиа-запросы.

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

По промокоду HTMLBOOK цена до конца сентября снижена до 300 рублей.

Обновил справочник CSS на сайте webref.ru. Появилось много нового:

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

И не забывайте, что примеры в справочнике интерактивные — если в примере есть ссылка, то её можно открыть, а не просто так на неё смотреть. Код каждого примера можно скопировать в буфер или буквально одним щелчком открыть в CodePen или JSFiddle, где доработать по своему желанию.

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

Селекторы потомка и дочерние селекторы читаются слева направо, следующая запись означает, что следует найти все элементы <button>, внутри них <span> и стиль применить уже к ним.

button > span { color: red; }

В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().

Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов. К примеру, следующая запись означает применить стиль к элементу <li>, если внутри него располагается элемент <a>.

li:has(a) { background-color: tomato; }

Платформа Pandorra.pro, о которой мы писали ранее, предлагает распродажу своего продукта. Скидка составляет 90%, акция заканчивается завтра, 6 июня. Платёж делается один раз и навсегда, никаких месячных отчислений больше не планируется.

Что умеет делать Pandorra.pro:

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

Торопитесь, после завершения акции цена снова станет прежней.