Question

Как создать рекламный баннер в виде HTML-кода?

Хочу создать рекламный баннер в виде HTML - как создать?

Answer 1

Буду отвечать чисто по HTML, так как вопрос именно об этом.

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

Можно пойти двумя путями:

Путь первый.

Баннер уже готовый в виде картинки. Подготовить можно в фотошопе нужного размера. Возьмем например стандартный баннер 240х270 px.

Картинка есть. Теперь ее нужно поместить в ссылку, чтобы она вела пользователя туда, куда нужно. Выглядеть это будет примерно так:

Вместо класса можно задать id. Только нужно помнить, что id должен быть уникальным, в отличии от класса.

Класс отлично подходит, когда нужно несколько баннеров поставить одного размера.

В стилях прописываем размер для класса .banner{width: 240px;}

Второй путь.

В блоке <div></div> прописываем в параграфах

все то, что хотим видеть на баннере. В стилях задаем нужную ширину и высоту,фон, а также цвет и размер шрифта. Теги блока помещаем в ссылку <a></a>.

Выглядеть это будет примерно так:

Answer 2

Можно, конечно, изучить сначала HTML, но для создания простого баннера можно сделать и не зная HTML, пойти другим путем.

Прежде всего - что такое рекламный баннер? Это какая-то картинка с призывающим текстом (купите, подпишитесь и т.д.). Поэтому такую картинку прежде всего и нужно сделать. Нашли подходящую в сети, открыли в любом графическом редакторе (хоть Паинте), обрезали и стерли все не нужное, подрисовали все нужное, добавили текст и сжали формат до нужного размера.

Теперь картинка у вас есть - нужно сделать из неё баннер.

Например: вы хотите разместить его в боковой панели вашего сайта (или ещё где-то), но картинки туда не загружаются просто так - только по HTML-коду.

Значит открываете у себя на сайте "Добавить новую запись" и помещаете туда свою картинку-баннер. Теперь картинка находится в вашем каталоге изображений сайта.

Переключаете вверху справа режим просмотра из "Визуально" на "Текст" и перед вами - HTML-код вашего баннера!

Копируете его в отдельный Вордовский листок-файлик, а саму запись уничтожаете (в случае потери так же его можно заново создать).

Теперь идете в свою боковую панель (или в другое нужное вам место), вставляете виджет "Текст", открываете его, в основное поле копируете ваш HTML-код, сохраняете и переходите на сайт - любоваться новым баннером!

Answer 3

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

Вот например логотип клиники остеопатии

http//doctor10.net/wp-content/uploads/2016/03/cropped-index-1.jpg

Если его использовать в качестве баннера, ведущего на главную страницу сайта то код html будет таким

<a href="http//doctor10.net" ><img src="http//doctor10.net/wo-content/uploads/2016/03/crooped-index-1.jpg" ></a>

Адрес картинки и страницы оказываются связанными между собой.

Если изображение суть текст на каком-нибудь фоне, то проще всего использовать сервис фотошоп онлайн. Там и уроки есть.