Простейший код баннера.

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

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

Создаём код баннера.

И так приступим. Первым делом, необходимо загрузить изображение в определённую папку, например «images», или создать любую другую, где будут храниться наши изображения для рекламы. Затем грузим туда картинки популярных форматов (jpg, gif, png).  Теперь напишем путь для нашей картинки:

<img src="http://сайто-строитель.рф/uploads/banner_sitestroy.gif" />

На этом коде говорится следующее. Тег <img> заявляет браузеру, что данный элемент картинка, или изображения. Далее атрибут «srс» указывает путь к этому изображению. Затем идёт сам путь, это адрес сайта, папка «uploads» и непосредственно сам файл, который я назвал «banner_sitestroy» расширением «gif». После всего этого закрываем действие атрибута <img> вот таким образом « />».  Теперь необходимо указать следующее: ширину баннера (width), высоту баннера (height), альтернативный текст (alt=), текст при наведении, на изображение (title=) и поставить нулевое значение для бордюра (border="0"), что бы он случайно не появился в некоторых браузерах.

<img src=" http://сайто-строитель.рф/uploads/banner_sitestroy.gif"
width="468" height="60" alt="banner_sitestroy.gif"
 title="Какой-то текс при наведении!!!" border="0" />

Получился вот такой, код и можем теперь открыть его в браузере и посмотреть, всё ли работает?

Рисунок №1.

 

 Да всё работает, всё отлично, вот только он пока обычная картинка. Теперь необходимо добавить ссылку на сайт партнёра.

<a href="http://сайто-строитель.рф" target="_blank">

Здесь мы видим, тег <a>, который говорит браузеру, что это ссылка, далее атрибут «href» означающий начало пути ссылки, сама ссылка и завершает всю церемонию, тег «target» с атрибутом «_blank», который откроет адрес партнера, в новой вкладке, не закрывая наш сайт. Весь этот код необходимо вставить перед кодом, картинки, а после её вставить закрывающий тег ссылки </a>. В общем, что бы получилось вот так:

<a href="Путь к сайту партнёра" target="_blank">
<img src="Полный путь к картинке"
width="468" height="60" alt="Альтернативный текст" title="Текст, при наведении" border="0" />
</a>

В общем, это готовый код для баннера 468х60, который можно скопировать, вставить реальные данные и он готов. Для баннеров других размеров, просто поменяйте значение «width» (ширина) и height (высота).

Пример работы баннера!