HTML статьи и уроки по веб-программированию

Как конвертировать HTML в Word на JavaScript

Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите преобразовать HTML в документ Word, без плагинов или библиотек простым JavaScript-кодом, тогда читайте эту статью.

Сохранение данных в форме после обновления страницы

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность хранить строковые значения в локальных или сеансовых переменных. Переменная localStorage может сохраняться между сеансами и может иметь любой размер. Это похоже на cookie, но имеет гораздо меньше ограничений.

В этом руководстве мы будем использовать механизм localStorage для хранения текущего состояния формы. Это означает, что когда страница перезагружается или пользователь повторно открывает страницу после ее закрытия, форма заполняется предыдущими значениями. Для повышения сложности мы будем хранить данные в виде сериализованных строк JSON.

Использование drag and drop на HTML5

Использование drag and drop на HTML5

Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, — это drag ‘n’ drop (перетаскивание).

Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые методы, основанные на jQuery, для создания сложной (иногда медленной и неточной) эмуляции перетаскивания.

Теперь, когда HTML5 включает API-интерфейс перетаскивания, у вас уже есть очень простой способ реализовать drag ‘n’ drop (перетаскивание) без головной боли.

Прижать футер с помощью Flexbox

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления Flexbox разработчики использовали отрицательные margin, чтобы заставить footer опускаться до нижней части страницы. К счастью, нам больше не нужен такой хак!

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

Семантические теги HTML5, которые вы должны использовать

Семантические теги HTML5, которые вы должны использовать

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

Основные семантические теги HTML, такие как <header>, <footer> и <nav>, почти не требуют пояснений. Но есть множество новых HTML-тегов, которые веб-разработчики также должны использовать. Здесь я собрал восемь HTML-тегов, которыми вы должны начать пользоваться прямо сейчас, и кратко объясню, как их следует использовать. Кроме того, здесь вы найдете описание ещё пяти HTML-тегов, которые необходимо немедленно заменить, если вы всё ещё используете их.

Захват изображения с камеры с помощью HTML5

Захват изображения с камеры с помощью HTML5

С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить определённые атрибуты. Для десктопных компьютеров можно использовать метод navigator.getUserMedia() про который мы так же поговорим в этой статье.