Как создать простые баннеры и разместить их на сайте?

Информация, представленная в статье ориентирована в первую очередь для начинающих web-мастеров.

Что такое баннер?

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера. Баннеры размещают для привлечения клиентов или для формирования имиджа.
(Материал из Википедии — свободной энциклопедии.)
Баннер на сайте - это графическое изображение, проще - картинка, являющаяся гиперссылкой, кликнув на которую посетитель переходит на другую страницу с информацией рекламного характера.

Изображение может быть в формате gif или jpeg, статическим или с анимацией. Более современные баннеры изготавливаются с помощью специальных программ, типа Macromedia Flash 8, по технологиям Flash или Java, с различного рода эффектами.

Баннеры могут быть различных видов и размеров, от кнопки 120 x 90 до большого прямоугольника 336 x 280, или даже огромного рекламного объявления с размерами 300 x 600.

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

Как сделать простой традиционный баннер?

Например, такой:

Для создания подобного рода баннера необходимо найти или сделать самостоятельно картинку, скопировать и вмонтировать в страницу сайта следующий HTML-код:

<a href="https://www.resource.ru" target="_blank">
<img src="https://www.your_site.ru/images/000000001.gif" 
border="0" width="468" height="63" alt="Лучший в мире сайт"></a>

Внимательно вглядевшись в код, можно заметить, что он состоит из кода ссылки и кода рисунка. Получается, это некий симбиоз двух вариантов. В коде ссылки вместо слова, например, «СКАЧАТЬ», вмонтирован код изображения и, в итоге, мы видим баннер. Этот процесс слегка напоминает анекдот из вопросов «армянского радио». «Что получится, если скрестить ужа с ежом?» Ответ: «Метр колючей проволоки!»

Разложим, как говорится, «по полочкам». Соответствующими цветами в коде и в таблице обозначено:

         Адрес ссылки на запланированный рекламируемый ресурс.
target="_blank" - открытие произойдёт в новом окне,
target="_parent", либо отсутствие этого параметра - ссылка баннера откроется в этом же окне.

         URL изображения. Часть кода https://www.your_site.ru/ можно не писать, а указать только images/000000001.gif, но при условии, что изображение находится в корневой папке images вашего сайта. Также можно указать путь к рисунку с любого другого ресурса, но, в этом случае адрес должен быть полным. Если Вы хотите, находясь в другой папке, взять файл изображения с корневой папки, то перед images ставится слэш, например так: /images/000000001.gif, а если с другой (некорневой) папки с изображениями - перед слэшем ставим две точки: ../images/000000001.gif.

        Параметры изображения.
border="0" - окантовка (бордюр) картинки.
width="468" - ширина изображения баннера равна 468 пикселов.
height="63" - высота баннера равна 63 пикселям.

         Лучший в мире сайт - название баннера - его выводит атрибут alt. Эти слова будут отражаться в окне баннера, если у посетителя в настройках браузера отключена возможность показа изображений, или по другим причинам, связанным с медленным или прервавшимся соединением с Интернетом.

Если наряду с атрибутом alt добавить атрибут title, то название (тема) баннера будет отражаться при наведении мыши на картинку.

Хотелось бы отметить одну маленькую «хитрость». Размеры баннера желательно выставлять оригинальные, тогда он будет выглядеть «на все 100», или, имея рисунок соответствующих размеров, вовсе не выставлять размеры в коде, браузер самостоятельно их определит и выведет на экран как нужно, но, предпочтительнее, всё-таки, вариант первый.

Баннер со сменой картинок при наведении курсора мыши

Картинка 1 - появляется при загрузке и перезагрузке страницы, картинка 2 - после наведения курсора мыши, картинка 3 - после того, как мышь уводим с изображения.
Все картинки разместите в папке images, предварительно откорректировав размеры.
Код в таблице скопируйте и вставьте на страницу своего сайта.

<a onmouseover ="document.banner.src='images/1banshange.jpg';"
onmouseout="document.banner.src='images/2banshange.jpg';" 
href="https://resource.ru" target="_blank">
<img src="images/3banshange.jpg" 
name="banner" alt="" border="0"></a>

         onmouseover - событие, происходящее при наведении мыши, в нашем случае - смена изображений.

         images/1,(2),(3)banshange.jpg - указание пути к изображениям. В примере кода он краткий, можно указать полный путь с https://www.your_site.ru/.....

         onmouseout - событие, происходящее, когда мышь уходит за границы объекта.

         https://resource.ru - URL ресурса, на который необходимо перейти после клика.