Главная » Полезное » Еще немного html для лучшего оформления статей

Еще немного html для лучшего оформления статей

Выделение цветом

Если нужно выделить цветом какой-либо кусок текста, чтобы сделать акцент на важности этой информации, то это слово (словосочетание, предложение и т.д.) нужно заключить вот в такие теги:

<font color=»navy»>слово (словосочетание, предложение, …)</font>

Атрибут color тега font как раз и назначает цвет тексту. А сам цвет указан в кавычках. В данном случае стоит синий, но его можно заменить на любой другой. Кроме того, вместо буквенного обозначения цвета можно писать его цифровое значение, только перед ним обязательно поставить значок «решетка». Например, тот же синий цвет текста в коде будет выглядеть так:

<font color=»#000080″>слово (словосочетание, предложение, …)</font>

Основные цвета:

Синий – navy (#000080)

Красный – red (#FF0000)

Зеленый – green (#008000)

Однако, кроме них, можно использовать большое количество различных цветов и оттенков. Посмотреть их обозначения можно здесь: Все цвета интернета. Для каждого цвета даны два обозначения. Для использования в коде нужно брать нижнее значение, где нет точек, и используются не только цифры, но и буквы. В зависимости от цвета обозначение может состоять только из цифр, только из букв или из букв и цифр.

Кликабельная картинка

Иногда бывает нужно, чтобы при нажатии на картинку пользователи попадали на другую интернет страницу. Особенно это касается различных рекламных материалов. Например, во многих партнерских программах предоставляют баннеры и уже готовый код. Но бывает, что есть только изображения, а код надо писать самим. В этом случае используйте вот такую простую формулу:

<a href=»АДРЕС СТРАНИЦЫ» target=_blank title=»Пояснительный текст«><img src=»АДРЕС КАРТИНКИ»></a>

Только не забывайте, что если картинка – рекламный материал партнерской программы, в которой вы участвуете, вместо «АДРЕС СТРАНИЦЫ» нужно ставить свою партнерскую ссылку, а не просто ссылку на рекламируемую страницу. Иначе останетесь без заработка, так как у сайта партнерской программы не будет сведений о том, кто привел покупателя (то есть о том, что клиент пришел именно с вашего сайта).

Бегущая строка

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

Сделать бегущую строку очень просто. Для этого нужно заключить текст вот в такие теги:

<marquee>ТЕКСТ</marquee>

Только не советую помещать туда большие куски текста. Скорее всего, никто не дочитает его до конца. Желательно, чтобы фраза была короткой и информативной.

Заголовки

Если вы хотите сделать заголовок или подзаголовок, разделяющий куски текста, это можно сделать так:

«……должны периодически добавляться (обновляться). </p><br>

<center><font size=»+1″ color=»navy»><b>Заголовок</b></font></center><br>

<p align=justify>Сайт нужно продвигать (рекламировать) хотя бы……..»

В примере, который я привела, заголовок стоит по центру страницы (тег <center>) и он выделен синим цветом (color=»navy») и полужирным (тег <b>). Кроме того, в теге font вы видите атрибут size со значением «+1». Это означает, что текст заголовка будет на 1 пункт больше, чем основной текст. Чтобы сделать его еще крупнее, можно поставить «+2». Если поставить «+3» то он будет  огромным. Если же вы не хотите, чтобы текст заголовка (подзаголовка) был крупнее основного, просто уберите «size=»+1″» из формулы.






Полезное
Понравился материал? Поделитесь с друзьями в социальных сетях, нажимайте на кнопочки!

3 комментария

  • Anna

    Светлана, здравствуйте! Вы знаете, я зашла к вам, чтобы узнать, как сделать надпись на картинке, а уйти не могу. И знаете почему? Потому что у вас так много информации, которая меня интересует. Вот и эта статья меня просто поразила своей простотой и доступностью. Беру в свою копилочку. Буду изучать детально и последовательно применять на блоге.Огромная Вам благодарность от человека, который не очень владеет техникой ведения блога.Удачи вам и большого количества посетителей!!!!

    Ответить
  • Anna

    Светлана, хочу спросить у вас, а почему у меня не получается бегущая строка? Я взяла ваш тег, вставила туда фразу «Благодарю за посещение блога «Счастье — это…». Поставила я её перед статьёй.Когда вышла на просмотр, то увидела всё написанное, но не в бегущей строке. Что я сделала не так, где ошибка? Заранее Вам благодарна.

    Ответить
    • Светлана Канаева

      Анна, вы вставляли код в визульном редакторе, а все, что «обуто» в html коды нужно вставлять в редакторе html. То есть, предже чем добавлять код, нужно справа над полем для ввода текста нажать «Текст». Единственная проблема может быть в баннере. Если он добавлялся через редактор, то есть его код добавлен в файл одной записи (или страницы), то все нормально, а вот если он добавлен непосредственно в статью, то при таком переходе его код может нарушиться, и баннер пропадет.

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: