Как написать правильный код для баннера.
Автор: Андрей Краснокутский
Дата: 2010-04-24 Размещаем баннер на других сайтах.
В прошлых наших статьях про баннеры, мы с Вами разобрались с понятием: "Что такое Баннер для сайта". Здесь мы узнали какие бывают баннеры (размеры баннеров) для чего вообще нужны баннеры, форматы баннеров и в каких случаях и где применяются баннеры разных форматов.
Следующий наш материал "Как сделать простой не анимированный баннер" был посвящен созданию графической части баннера, т.е. созданию самой картинки баннера. В результате у нас получилась вот такая симпатичная кнопка, размером 88х31 пикселей:

Эта кнопка и будет баннером Вашего сайта. Хотя Вы можете сделать баннер любого, нужного Вам размера.
Но это только графическая составляющая баннера, т.е. просто картинка, которая подгружается на сайт. Наша задача сделать из этого баннера (картинки) ссылку, нажав на которую, посетитель будет попадать на Ваш сайт. Значит, нам нужно еще написать для этого соответствующий код. Этот код Вы будете раздавать всем желающим для размещения на своих сайтах, каталогах и т.д. Давайте этим и займемся.
Итак, картинку баннера мы создали. Давайте теперь назовем этот графический файл, например я назвал и сохранил эту картинку (графический файл) под именем: 88х31.gif . Соответственно имя файла 88х31, формат сохранения файла gif.
Закачиваем этот файл к себе на сайт. Обычно для графических файлов на сайте создают отдельную папку, где и хранят все изображения для сайта. У меня это папка называется img. Сокращенно от английского images (изображения). Вы можете создать папку с другим названием и закачать туда эту картинку, как Вам будет удобно, но в таком случае в коде прописывайте реальное название папки, где будет лежать Ваш баннер.
Теперь пишем во такой код:
<a href="http://www.luksweb.ru/" target=_blank><img src="http://www.luksweb.ru/img/88x31.gif" width="88" height="31" alt="Как сделать сайт бесплатно!!!" border="0"></a>
|
Давайте разберем, что мы здесь написали. По сути дела это обычная ссылка, в якоре которой используется графический файл (картинка). Ссылку можно условно разбить на две части. Для простоты восприятия давайте так и сделаем.
Первая часть кода, просто ссылка на сайт в данном случае ссылка на мой сайт LuksWeb.ru:
<a href="http://www.luksweb.ru/" target=_blank>………..</a>
Естественно Вы напишите вместо http://www.luksweb.ru/ адрес своего сайта. Параметр target=_blank «говорит» браузеру, что ссылка должна открыться в новом окне.
Если вместо многоточия (………..) написать обычный текст, то ссылка на Ваш сайт будет текстовая, но все равно приведет на Ваш сайт. Еще то что здесь будет написано называют якорь ссылки.
Но мы же делаем ссылку для баннера, значит, нам нужно на месте якоря, разместить код, вызывающий картинку (баннер). Пишем здесь вот такой код:
<img src="http://www.luksweb.ru/img/88x31.gif" width="88" height="31" alt="Как сделать сайт бесплатно!!!" border="0">
Это и есть вызов графического баннера (картинки). Согласно спецификации HTML графические файлы разменяются на web страницы с помощью тега img. Тег src – определяет источник, откуда взять эту картинку, а дальше нам необходимо указать полный путь где лежит картинка, В данном случае: http://www.luksweb.ru/img/88x31.gif. Кстати путь заключается в кавычки.
Далее мы расписываем: ширина картинки width="88" и высота картинки height="31". Тег alt – использовать необязательно, но желательно, здесь мы пишем всплывающую поясняющую надпись, которую посетитель увидит, когда наведет мышку на Ваш баннер.
Обязательно устанавливайте параметр border="0" . Делается это для того, чтобы избежать рамки вокруг картинки, такой эффект наблюдается в HTML когда картинка является ссылкой. В большинстве случаев такая рамка портит внешний вид баннера.
Иногда еще код заключают в комментарии, <!-- LuksWeb.ru --><!-- end LuksWeb.ru --> . Нагрузки такие комментарии не несут и в браузере не отображаются, а служат просто для удобства и позволяют отследить на web-странице (в коде web-страницы) начало и конец кода Вашего баннера. Поэтому рекомендую использовать комментарии.
И полностью Ваш код выглядит так (естественно адрес сайта должен быть ваш):
<!-- LuksWeb.ru --><a href="http://www.luksweb.ru/" target=_blank><img src="http://www.luksweb.ru/img/88x31.gif" width="88" height="31" alt="Как сделать сайт бесплатно!!!" border="0"></a><!-- end LuksWeb.ru -->
|
Теперь, если разместить такой код на своём сайте, блоге, форуме и т.д. то при открытии этого сайта будет подгружаться баннер с моего сайта, нажав на который посетитель перейдет на сайт www.LuksWeb.ru .
Если у Вас еще остались не понятные моменты, зайдите на страницу: http://www.luksweb.ru/our_links.php здесь Вы найдете разные варианты кода ссылок на наш сайт. Как текстовые так и графические, сравните эти коды между собой и Вам все станет понятно.
P.S. Буду очень признателен и благодарен Вам, если Вы разместите нашу ссылку или баннер у себя на сайте, форуме или блоге. Можете даже изменить текстовую или графическую часть ссылки, но в таком случае, пожалуйста, напишите мне об этом.
Удачи.
Читаете так же:
Как делаются ссылки в HTML.
Вставляем изображение на web-страницу.
Что такое тИЦ и PR ?
Какими программами пользоваться для создания сайтов и для работы в Интернете?
Скачать бесплатно Activ E-Book Compiller
Как обналичить виртуальные деньги?
Просмотров: 56877
Я сделала свой первый сайт! Буду признательна, если кто-нибудь разместит баннер у себя на сайте. Заранее благадарю.
<!-- cdtdiamond.ru --><a href="http://www.cdtdiamond.ru/" target=_blank><img src="http://www.cdtdiamond.ru/img/cdtdiamond.gif" width="88" height="31" alt="Интернет бизнес!!!" border="0"></a><!-- end cdtdiamond.ru -->
Андрей!Спасибо огромное за науку!Не только за эту статью, но и за все предыдущие!Я выполнил это задание и хочу продемонстрировать его не только тебе, но и всем посетителям твоего прекрасного сайта:
<!-- biznesknigi.at.ua --><a href="http://biznesknigi.at.ua/" target=_blank><img src="http://biznesknigi.at.ua/-_12.jpg" width="200" height="200" alt="Скачать бесплатно книги по бизнесу!!!" border="0"></a><!-- end biznesknigi.at.ua --> Буду рад,и благодарен, если кто-то разместит код моего баннера у себя на сайте!Ребята, заранее всем спасибо!!!
Андрей, очень простой и понятный урок))) Спасибо тебе... Все получилось только вот у меня всплывающего текста нету((
Андрей! Огромное спасибо, вы меня многому научили. Я постоянно пользуюсь Вашим сайтом. Мне нравится также реклама, много интересного. Удачи Вам!
Класс у меня все получилось, спасибо
здравствуйте. спамибо за такой хороший сайт!
Принимаем Баннеры и Ссылки на наш сайт!
Принимаем Баннеры и Ссылки на сайт.Посещаемость более 3000 человек в день.Стоимость размещения баннера по левому или правому боку 1000 рублей в месяц.Стоимость размещения ссылки 500 рублей в месяц.
как удалть банер с экрана, просит 400р, 89851358993
<a href="http://www.zasvetitsya.ru/"><img src="http://www.zasvetitsya.ru/bann.jpg" width="30" height="30" border="0" longdesc="http://www.zasvetitsya.ru/bann.jpg" /></a>
как удалить 89160073332 на 400 руб помогите
Отправте 300 руб на номер 89169404708
Помогите убрать банер просит отправить 300 рублей на номер 89169407408
Отпровлять смс безполезно
программа для удаления БАННЕРА С РАБОЧЕГО СТОЛА
откуда достать код баннера???????????везде требуют смс за которую снимают немерено денег!!!!!!!!!!!!!!!!!!!!!!!1
Отличная программа для удаления баннера, помогло!!! спасибо его автору. Попробуйте поможет!!!! http://letitbit.net/download/02204.0a217087d492a7dfc930d52f7857/antibanner.exe.html
У вас есть баннеры торопитесь могу рзместить стоимость 100 р за баннер на своём сайте
Писать на w.egor@yandex.ru
помогите убрать банер просят 500 рублеи на мтс89859606842
Банер создал. Надпись есть, но он прозрачный картинки нет. Что не правильно сделал?
Здравствуйте Макс. Хороший вопрос.... Больных заочно не лечат
Андрей, спасибо за сайт! А можно так же доступно про анимиров. баннеры или кнопки-ссылки. Заранее благодарна.
как удалить баннер с экрана просит пополнить счет 500 рублей на номер 89060320946
размещу банер на своем сайте за 1евро
Сообщение от ElenaR
Предлагаю реальный заработок в интернете.. Не торопитесь закрывать страницу не дочитав до конца, так-так реальный доход в ваших руках, система работает на все 200%.
Хорошая статья, хоть у меня сайт игровой тематики всеравно часто спрашивают как сделать баннер? скопирую статью на свой сайт с обратной ссылкой надеюсь автор не против
Не против, копируйте, только не забывайте ставить обратные ссылки. А вот здесь: http://www.luksweb.ru/view_post.php?id=223
можно взять книгу про создание баннеров
Спасибо большое! Очень доступно.
Спасибо большое,пойду делать свой банер,а то сделала и не получился!
Уменя 6 баннеров. Все прописываю, вроде правильно. Но два баннера работают, а остальные не открываются. Подскажите почему?
<a href="http://www.luksweb.ru/" target=_blank><img src="http://www.luksweb.ru/img/88x31.gif" width="88" height="31" alt="Как сделать сайт бесплатно!!!" border="0"></a>
А если у меня банер в swf формате? чета я сделал не у меня не получилось
<a href="http://www.luksweb.ru/" target=_blank><img src="http://www.luksweb.ru/img/88x31.gif" width="88" height="31" alt="Как сделать сайт бесплатно!!!" border="0"></a>
Андрей спасибо,у меня все получилось.Я установил GIF файл на свой сайт,сделал описание Вашего урока своими словами и сделал ссылку на Ваш сайт.
Можете попробовать поставить Такую кнопку.
<a href="http://www.videopetrovich.com/" target=_blank><img src=
"http://u.jimdo.com/www49/o/sa046e1c2be7d6185/img/i86fec29be515374a/1348415341/std/image.gif" width="45" height="450" alt=
"Меню этого сайта!!!" border="0"></a>
А это мой сайт: http://www.videopetrovich.com/
С этой страницы можно перейти на Ваш сайт.
С уважением, Юрий Петрович.
sedov105@yandex.ru
Спасибо огромное.Хорошим чутким языком написано. Всё получилось быстро и без проблем. Обязательно поставлю у себя на сайте ссылочку к Вам. Ещё раз СПАСИБО!!!
Добрый день!
А как сделать так, чтобы при нажатии на баннер посетитель попадал не сразу на сайт, а на прокладку с картинкой и надписью: ждите...идет перенаправление и через 3 сек. уже открывался нужный сайт?
Хоть я и не новичёк, но подзабыл. Спасибо!
ПЛИЗ,РАЗМЕСТИТЕ МОЙ БАННЕР
<!--lazur.my1.ru --><a href="http://www.lazur.my1.ru/" target=_blank><img src=http://lazur.my1.ru/banner/baner.jpg " width="88" height="31" alt="Каталог гостиниц"></a>
|