HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании

romalinanova 6 мая 2021 в 12:57

Вышел Bootstrap 5: оцениваем 7 главных нововведений

4 мин

47K

Блог компании SelectelВеб-разработка * Программирование * HTML * CSS *

Перевод

Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.

Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.

+70

egaxegax 5 мая 2021 в 18:21

Карта метро Москвы с расчётом пути

Простой

2 мин

11K

JavaScript * Векторная графика * HTML * Canvas *

Туториал

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

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

host_m 5 мая 2021 в 06:55

Почему стоит использовать тег <picture> вместо <img>

6 мин

57K

Блог компании VDSina.ruHTML * ReactJS * Веб-дизайн * Интерфейсы *

Перевод

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

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

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

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

Читать дальше →

+33

MagisterLudi 4 мая 2021 в 11:27

Базовая структура HTML-документа с объяснением каждой строчки

9 мин

136K

Блог компании МаклаудHTML * Веб-дизайн * Веб-разработка * Учебный процесс в IT

Перевод

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Под катом — разбор каждой строчки

Читать дальше →

+35

spylypchuk 4 мая 2021 в 09:18

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом

20 мин

2.4K

Веб-разработка * JavaScript * Программирование * HTML * Интерфейсы *

Туториал

В предыдущей статье “Фреймворк Webix Jet глазами новичка. Часть 1. Композиция и навигация” я подробно рассказал вам как создать интерфейс приложения с помощью UI компонентов Webix и распределить полномочия между view-модулями и логикой внутри архитектуры Jet фреймворка.

В этой статье я продолжу свой рассказ о Jet фреймворке и библиотеке Webix, и реализую следующее:

добавлю в уже известное вам приложение немного интерактива

организую серверные модели с разными подходами к загрузке и сохранению данных.

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

alexzfort 2 мая 2021 в 19:21

Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)

3 мин

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+15

Get-Web 2 мая 2021 в 17:59

Кастомный виджет Яндекс.Переводчик для сайтов

6 мин

17K

Веб-разработка * CSS * JavaScript * HTML *

Туториал

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

owlofmacloud 1 мая 2021 в 11:01

HTML-теги и атрибуты, о которых вы, возможно, не знали

14 мин

54K

Блог компании МаклаудHTML * Веб-разработка *

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

`abbr`

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.

<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.

abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>

`address`

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

Читать дальше →

+42

honyaki 30 апр 2021 в 11:21

Примеры применения переменных CSS на практике

9 мин

9.5K

Блог компании SkillfactoryHTML * CSS * Веб-разработка * Веб-дизайн *

Туториал

Перевод

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

Приятного чтения

hisbvdis 29 апр 2021 в 20:10

HTMHell — адовая разметка (25 плохих примеров)

32 мин

18K

Accessibility * Usability * HTML * CSS * Веб-разработка *

Туториал

Перевод

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.

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

+10

MaxRokatansky 27 апр 2021 в 13:07

Как обеспечить глассморфизм с помощью HTML и CSS

4 мин

14K

Блог компании OTUSHTML * CSS * Веб-разработка *

Перевод

Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?

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

Но давайте поговорим немного больше о глассморфизме.

JustJeremy 26 апр 2021 в 13:18

Целительная сила JavaScript

6 мин

Блог компании SM LabКачество кода * Веб-разработка * JavaScript * HTML *

Перевод

Чуть меньше года назад, когда по всему миру начали распространяться локдауны в связи с Covid-19, большинство людей начало запасаться туалетной бумагой и консервами. Но лично я стремился получить нечто другое: реализовать функцию поиска.

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

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

Читать дальше →

+15

alexzfort 25 апр 2021 в 19:30

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)

3 мин

9.1K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+26

Osiris74 25 апр 2021 в 08:28

Даешь свободную литературу! Или как я с политикой вуза боролся

5 мин

9.4K

HTML * Алгоритмы * Delphi * Программирование * PDF

Из песочницы

Технотекст 2021

Доброго времени суток, хабровчане! Это мой первый пост на форуме, так что прошу строго не судить.

Как и полагается любому техническому вузу – в нашем есть куча интернет ресурсов, которыми вуз чрезмерно гордится. Однако есть оборотная сторона медали – качество этих сервисов. А именно, если говорить про электронную библиотеку, о коей и пойдет речь в данной статье, то в ней напрочь отсутствует возможность скачивания pdf-версии нужной тебе методички, точнее она есть, но за это придется заплатить немало денЯк. Деньги далеко не маленькие (если говорить именно про цену за вузовские методички). Если же такой формат не устраивает, то можешь пользоваться онлайн библиотекой.

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

И теперь представьте картину: человек пытается подготовиться к контрольной по квантовой механике по методичкам преподавателя, объемом 700 страниц, где необходимый материал находится на 500, и может перелистывать по 5 страничек в минуту, и каждые 20 минут, его попытки приходится возобновлять.… В общем, жесть…. И вот после очередной неудачной попытки прочитать нужную главу, я решил, что пришло время положить конец данному произволу.

+17

alexzfort 18 апр 2021 в 19:59

Дайджест свежих материалов из мира фронтенда за последнюю неделю №463 (12 — 18 апреля 2021)

3 мин

7.6K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+23

host_m 14 апр 2021 в 08:25

Малоизвестные, но крутые атрибуты в HTML

4 мин

30K

Блог компании VDSina.ruВеб-разработка * HTML * CSS *

Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.

+63

alexzfort 11 апр 2021 в 19:30

Дайджест свежих материалов из мира фронтенда за последнюю неделю №462 (5 — 11 апреля 2021)

3 мин

8.3K

Веб-разработка * JavaScript * HTML * CSS *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+19

boristhebirb 7 апр 2021 в 15:48

Сравнение ассортимента блюд трёх ресторанов Санкт-Петербурга

7 мин

6.9K

Data Mining * HTML * Python * Визуализация данных *

Из песочницы

Мне никогда раньше не приходилось иметь дело с парсингом данных из интернета. Обычно все данные для работы (аналитик данных) приходят из выгрузок компании с использованием простого внутреннего интерфейса, либо формируются sql-запросами к таблицам напрямую из хранилища, если нужно что-то более сложное, чем “посмотреть выручку за предыдущий месяц”.

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

Сайты для сбора данных были подобраны по принципу “нет блокировщика парсеров” и “из анализа этих данных может выйти что-то интересное”. Поэтому выбор пал на ассортимент блюд на доставку трёх ресторанов Санкт-Петербурга - “Токио City”, “Евразия” и “2 Берега”. У них приблизительно одна направленность кухни и похожий ассортимент, поэтому явно найдется, что сравнить.

Что из этого получилось?

+10

alexzfort 4 апр 2021 в 19:51

Дайджест свежих материалов из мира фронтенда за последнюю неделю №461 (29 марта — 4 апреля 2021)

3 мин

8.8K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+18

Grado 3 апр 2021 в 15:30

Вы можете создавать эти элементы, не используя JavaScript

4 мин

17K

Блог компании SkillfactoryВеб-разработка * CSS * Программирование * HTML *

Перевод

Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS постоянно получают новые функции, а старые браузеры больше не нужно поддерживать, мы можем использовать намного меньше JavaScript-кода для создания элементов пользовательского интерфейса и больше фокусироваться на логической части (проверки, обработка данных и т. д.). Специально к старту новых потоков по специализации Frontend-разработчик и Веб-разработчик делимся с вами несколькими хитростями.

+14

1 2 ...

30 31

33 34 ...

106 107

HTML *

Вышел Bootstrap 5: оцениваем 7 главных нововведений

Карта метро Москвы с расчётом пути

Почему стоит использовать тег <picture> вместо <img>

Базовая структура HTML-документа с объяснением каждой строчки

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом

Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)

Кастомный виджет Яндекс.Переводчик для сайтов

HTML-теги и атрибуты, о которых вы, возможно, не знали

`abbr`

`address`

Примеры применения переменных CSS на практике

HTMHell — адовая разметка (25 плохих примеров)

Как обеспечить глассморфизм с помощью HTML и CSS

Целительная сила JavaScript

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)

Ближайшие события

Даешь свободную литературу! Или как я с политикой вуза боролся

Дайджест свежих материалов из мира фронтенда за последнюю неделю №463 (12 — 18 апреля 2021)

Малоизвестные, но крутые атрибуты в HTML

Дайджест свежих материалов из мира фронтенда за последнюю неделю №462 (5 — 11 апреля 2021)

Сравнение ассортимента блюд трёх ресторанов Санкт-Петербурга

Дайджест свежих материалов из мира фронтенда за последнюю неделю №461 (29 марта — 4 апреля 2021)

Вы можете создавать эти элементы, не используя JavaScript

Вклад авторов