HTML

Статьи о вёрстке — HTML, CSS, Figma, графика, дизайн и другие темы.

Как создавать адаптивные изображения. Атрибут srcset

Как создавать адаптивные изображения. Атрибут srcset

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

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

🎓 В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.

Читать дальше
HTML
  • 25 мая 2023
В чём разница между <p> и <br>

В чём разница между <p> и <br>

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 24 мая 2023
Как сделать таблицу в HTML

Как сделать таблицу в HTML

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Основные теги, используемые при создании таблицы:

  • <table> — определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
  • <thead> — определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
  • <tbody> — определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tfoot> — определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tr> — определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
  • <th> — определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
  • <td> — определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
  • <caption> — определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.
Читать дальше
HTML
  • 16 мая 2023
search: новый HTML-элемент в 2023

search: новый HTML-элемент в 2023

В стандарте HTML появился новый семантический элемент <search>. Он обозначает раздел страницы, который используется для поиска или фильтрации. Он должен содержать элементы управления формой (например, текстовые поля, выпадающие меню, кнопки и так далее), а область поиска или фильтрации может быть любой: от одного документа до всего интернета.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 12 мая 2023
Как сверстать доступный сайт

Как сверстать доступный сайт

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

Критерии доступности сайта определяются рядом стандартов Web Content Accessibility Guidelines или WCAG, которые регулируют, какие функциональные возможности должны быть доступны на сайте.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 11 мая 2023
Что такое спецификация и как её читать

Что такое спецификация и как её читать

Спецификация — это совокупность всех правил языка программирования, собранных в единый документ. Спецификации создаются в специальных организациях — W3C, WHATWG, Ecma International, OpenJS Foundation и других.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 13 апреля 2023
Как тестировать вёрстку

Как тестировать вёрстку

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Например, у Chrome, Firefox и Safari отличается рендеринг шрифтов и стили по умолчанию.

Отличий много, но добиваться полного сходства необязательно. Главное — проверить, что сайт во всех браузерах работает корректно и соответствует макету.

Читать дальше
HTML
  • 11 апреля 2023
Какой формат выбрать — WebP, PNG или JPG

Какой формат выбрать — WebP, PNG или JPG

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

В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 10 марта 2023
Как добавить изображение на страницу

Как добавить изображение на страницу

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги <img>, <svg> или использовать в CSS с помощью background-image.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 7 февраля 2023
Частые ошибки в HTML-коде

Частые ошибки в HTML-коде

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

Что нужно, чтобы писать код правильно и не допускать ошибок? Знать самые распространённые ошибки и не совершать их.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 2 февраля 2023