среда, 4 июля 2012 г.

HTML - кнопки

Много раз , когда писал заметки об инете, часто задавался мыслей как обозначить красиво сочетание клавиш в тексте заметки , и что бы они были на самом деле похожи на кнопку, а не на текст в виде условных знаков. Обычно используют либо span,div-теги, но они требуют дополнительной стилистической обвязки. Лучший вариант - использовать тег-input с типом button В тексте HTML это выглядит так
<input value="Alt F2" type="button" />
Причем заметно, что кнопка не поддается копипасту, и выглядит, как настоящая кнопка. Если ее приукрасить стилистикой, то вообще все прекрасно. Такую кнопку можно снабдить ссылкой извне и она будет работать, как нажимаемая ссылка ввиде анимационной клавиши , с одной маленькой оплошностью - не показывается "ручечка". Если кнопке не нужно иметь ссылку, но при этом хотелось бы чтобы она траслировала специальные символы типа &copy; - то используем тег
<button>&copy;</button>
и у нас есть информер клавиши . Оригинально выглядит использование тега
<img alt="Мой E-Mail cargan@ya.ru" />
с указанием значения в надписи в аттрибуте alt как параметр и без указания ссылки на само изображение. Используется тот факт, что при отсутствии изображения выводится параметр альтернативы в виде тексста. Мой E-Mail cargan@ya.ru - это использование в тексте защищает сам текст от копипаста и сканирование его на предмет получения ссылок для спамеров и пр..)). Из новых тегов HTML5 - использование тега
<mark>Мой E-Mail cargan@ya.ru</mark>
который подсвечивает текст ярко желтым фоном (пример смотрите выше). Правда его содержимое копипастно!! В принципе можно поискать еще много разных вариантов не стандартного, но эффективного использования тегов HTML. Успехов всем.