Вам не нужно знать CSS или PHP, чтобы создать красивый сайт. Используйте эти крутые HTML-трюки для создания потрясающих эффектов
Мы склонны использовать HTML с CSS, JavaScript и т. Д., Чтобы сделать наш веб-сайт или блог более привлекательным, но знаете ли вы, что один только HTML имеет множество практических секретов, которые могут пригодиться и помочь вам создать великолепный веб-сайт?
Ниже приведены несколько интересных приемов HTML, которые можно использовать для создания действительно динамичного веб-сайта.
Уловка 1. Карты изображений
Карта изображений - это в основном изображение с интерактивными областями. Мы можем использовать эту интерактивную область, чтобы ссылаться на другие части веб-страниц, на документы или на новую ссылку.
Что ж, не все знают о том, что элемент <map> может определять области изображения, по которым пользователь может щелкнуть. Все, что нам нужно сделать, это просто использовать элемент <area> и указать его соответствующие координаты XY внутри него, в элементе <map>.
Ниже приведен пример, в котором посетители вашего сайта могут узнать о вашем бизнес-присутствии по всему миру, нажимая на разные континенты на карте мира.
Уловка 2. Icon Adder
Сумматор значков в основном подразумевает использование значков вместо значков.
Вам просто нужно включить ссылку пути вашего исходного файла изображения в тег ссылки внутри тега body.
Выход:
Уловка 3. Разрешить пользователям выбирать цвет фона
Используя этот трюк, посетители сайта могут изменить цвет фона своей веб-страницы, просто перетащив указатель мыши на несколько букв написанного текста.
Пример. В этом случае посетители могут изменять цвета, перетаскивая указатель мыши на «Перетащите указатель мыши на буквы, чтобы изменить цвета!» текст.
Выход:
Уловка 4. Добавьте всплывающую подсказку к заголовку
Подсказка - это концепция, используемая в HTML для отображения дополнительной информации о специально выбранном элементе.
Этот трюк в основном показывает дополнительную информацию, предоставляемую создателем сайта, когда посетитель наводит указатель мыши на элемент.
Синтаксис:
<span title="Can you see this? This is the tooltip.:)">Drag Your Mouse Over Me!</span>
Выход:
Уловка 5. Распознавание голоса
Эта функция аналогична той, которую вы видите в текстовом поле поиска Google, где функция распознавания голоса помогает вам помещать предложения в поле ввода.
Когда вы используете ввод с распознаванием голоса, сбоку от поля ввода будет отображаться небольшой значок микрофона, и когда посетитель щелкнет значок этого голоса, его голос будет записан и использован в качестве ввода от пользователя.
Для этого вам просто нужно добавить атрибут x-webkit-speech в поле ввода.
<input type="text" x-webkit-speech />
Позвольте мне показать вам пример:
Выход:
Однако на реальном сервере вы увидите следующее:
Но при просмотре из других браузеров вы также увидите значок микрофона в поле ввода, через которое пользователь может ввести свой голос.
Уловка 6. Скрыть поле
Возможность публично видеть внутренние поля называется «ужасом программирования» солдатами Reddit - и, определенно, никто не хочет когда-либо испытывать этот ужас на своих веб-сайтах.
Но эту проблему можно решить, используя функцию HTML со скрытыми полями.
Скрытое поле позволяет веб-разработчикам управлять данными, которые можно или нельзя изменять, или записью, которую необходимо обновить, когда форма отправляется посетителем.
Синтаксис:
<input type="hidden">
Вот как это работает:
Результатом приведенного выше кода будет скрытое поле, которое посетители не смогут увидеть.
Выход:
Уловка 7. Предложения по вводу
Эта функция в основном представляет собой раскрывающийся список предопределенных параметров, который упрощает посетителям поиск того, что они ищут.
Пример: приведенный ниже код позволяет посетителям находить названия разных континентов из раскрывающегося списка и использовать их в качестве входных.
Код:
Выход:
