IQSites - smart website builder
Social networks
Улучшаем текст при помощи HTML тегов

Улучшаем текст при помощи HTML тегов

В конструкторе IQSites не случайно заложен виджет HTML кода, он существенно расширяет возможности сайта, позволяет нелинейно прорабатывать контент, добавлять различные полезные элементы. Для начала, давайте посмотрим, как можно применять html теги на примере работы с обычным текстом.

December 12, 2016 at 6:33 pm

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

ВАЖНО: все html теги в данной статье будут написаны с пробелами перед и после треугольной скобки ( < > ), но в визуальном редакторе вы должны убрать эти пробелы.

Итак, начнем. Возьмем простенький экран лендинга с фоновой картинкой, заголовком и второстепенным текстом:

Улучшаем текст при помощи HTML тегов

1. Смена цвета фрагмента текста

Допустим у нас есть УТП - "Лучшая пекарня в мире" и мы захотели сменить цвет слова "пекарня". Для этого воспользуемся html-тегом < font > < /font > (без пробелов). Открываем наш виджет с обычным текстом и прописываем вокруг "пекарня" следующее:

ЛУЧШАЯ < font color="cfaf8a" >ПЕКАРНЯ< /font > В МИРЕ

cfaf8a = код цвета, вы можете выбрать любой цвет, его можно получить прямо в настройках того же виджета текста, в строчке "Цвет текста:", подберите нужный и скопируйте код цвета в наш html код.

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

2. Жирный фрагмент текста

Возьмем наш второстепенный текст и выделим некоторые слова жирным. Идем в соответствующий виджет текста и прописываем следующее:

Вкус, за которым вы будете возвращаться < b >снова и снова< /b >.

Мы прописали тег < b > < /b > и выбранные слова стали немного жирнее обычного, в нашем примере это не сильно заметно, но если текст был бы большего размера, это бы было заметнее. Небольшая оговорка: вы не сможете сделать жирным текст, у которого уже задан стиль Bold в настройках виджета.

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

3. Подчеркнутый фрагмент текста

Тег < u > < /u > делает текст подчеркнутым. В нашем случае мы просто добавляем этот тег вокруг того, что уже есть:

Вкус, за которым вы будете возвращаться < u >< b >снова и снова< /b >< /u >.

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

4. Зачеркнутый фрагмент текста

Тег < s >< /s > делает текст зачеркнутым. Актуальный тег, когда необходимо поставить цену по акции, например. Заменим наш второстепенный текст и пропишем следующее:

Цены от < s >60 рублей< /s > 30 рублей за единицу!

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

5. Размер фрагмента текста

В последнем примере не хватает увеличить размер шрифта в фрагменте "30 рублей". Сделаем это посредством тега < font size >:

Цены от < s >60 рублей< /s > < font size="35" >30 рублей< /font > за единицу!

35 = размер текста.

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов


Subscribe to Blog Updates
Would you like to quickly receive the company news from the corporate blog? Just fill in the form below.
You can unsubscribe at any time.
* To be filled in
I Agree To Terms of Service

More articles

Почему важно сосредоточиться на чем-то одном?
Почему важно сосредоточиться на чем-то одном?
10 быстрых советов для повышения продуктивности
10 быстрых советов для повышения продуктивности
5 полезных лайфхаков для YouTube
5 полезных лайфхаков для YouTube

Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(11) "18.97.14.88" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "14e34084b06dbadead7ec088946a1d80" }