www.gcmsite.ru

Новости Программы PHP-скрипты Статьи Числа
Услуги Резюме Игры Автомобили Поиск

СИСТЕМНОЕ И ВЕБ-ПРОГРАММИРОВАНИЕ
компьютерная техника, игры

HTML5 - что нового появилось в языке разметки страниц

HTML5

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

Рассмотрим некоторые и этих тегов.

Тег <canvas>

Этот тег позволяет рисовать на странице. Он может заменять собой картинки. Может применяться, например, для изображения графиков.

Подробная информация с примером работы с тегом <canvas> рассмотрена в другой статье: Canvas - пример рисования на странице.

Тег <audio>

С помощью тега <audio> можно вставлять на страницу музыку.

  • Параметр тега controls позволяет добавить кнопки управления музыкой;
  • Параметр loop позволяет зациклить воспроизведение музыкального файла;
  • Параметр preload отвечает за время начала загрузки звукового файла на пользовательский коспьютер.
    Если на странице несколько тегов <audio> то разумнее не загружать звуковые файлы все сразу. Одновременная загрузка приведет к большим нагрузкам на интернет-канал и ухудшит работу в сети.
    Рекомендуется использовать параметр preload='none';

Вот пример кода плеера

  <audio src='http://galaxy.gcmsite.ru/sound/alien-1-soundtrack.wav' loop controls preload='none'>
  </audio>

Тег <input>

Используя параметр placeholder, можно выводить светлосерый текст в поле ввода, если это поле еще пустое, не заполненное пользователем.

Также можно объеденить в один тег два тега <input> и <select>. Посмотрите этот простой пример:

<input id='test' type='text' placeholder='выберите число' list='mylist'>
<datalist id='mylist'>
 <option value='1'>
 <option value='2'>
 <option value='3'>
 <option value='4'>
 <option value='5'>
</datalist>

В теге <input> есть параметр type, указывающий на тип поля ввода. В HTML5 появилось несколько новых типов.

Например, type='range'. Он позволяет вывести на странице ползунок, с помощью которого можно менять значения, на вводя их с клавиатуры.

<input type='range'>

Другой пример - это тип type='number'. Позволяет выбирать числовые значения из определенного диапазона, заданного программистом.

<input type='number' min='1' max='7'>

Тип type='date' позволяет вывести небольшой календарик с выбором даты. Очень удобно. Работает корректно в Google Chrome.

<input type='date'>

Тип type='color' выводит форму выбора цвета.

<input type='color'>
В статье рассматривались некоторые нововведения языка разметки страниц HTML5. На самом деле, ввод в эксплуатацию данной версии значительно разнообразил методы программирвоания интерактивных страниц, облегчил работу веб-программистам и верстальщикам кода.
Delphi — это объектно-ориентированный язык программирования со строгой типизацией переменных. Он используется в основном для написания прикладных, пользовательских программ. Простота использования позволяет рекомендовать его в качестве языка для начального обучения программированию. Хотя, если смотреть на перспективу, работодатели мало интересуются работниками, программирующими на Delphi.

Интересные материалы на сайте:

Автор, разработчик: Шаров Евгений   (gcmsite@yandex.ru)
(c) 2000-2020 GCM-Site - системное и веб-программирование
Цитирование материалов сайта возможно только при наличии гиперссылки