Как написать правильный код для баннера.
Автор: Андрей Краснокутский

Дата: 2010-04-24
Размещаем баннер на других сайтах.




Закачиваем файл к себе на сайт. Обычно для графических файлов на сайте создают отдельную папку, где и хранят все изображения для сайта. У меня это папка называется 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>



Давайте разберем, что мы здесь написали. По сути дела это обычная ссылка, в якоре которой используется графический файл (картинка). Ссылку можно условно разбить на две части. Для простоты восприятия давайте так и сделаем.

Первая часть кода, просто ссылка на сайт в данном случае ссылка на мой сайт kopx.do.am

<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. Буду очень признателен и благодарен Вам, если Вы разместите нашу ссылку или баннер у себя на сайте, форуме или блоге. Можете даже изменить текстовую или графическую часть ссылки, но в таком случае, пожалуйста, напишите мне об этом.

Источник: http://www.luksweb.ru/

Удачи.
Категория: Мои статьи | Добавил: 1414 (20.01.2011)
Просмотров: 9292 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 1
1 Андрей Краснокутский  
0
Я конечно очень рад, что мои материалы копируют на другие сайты, но настоятельно прошу добавить активную ссылку на первоисточник, т.е. мой сайт: http://www.luksweb.ru/

Имя *:
Email *:
Код *: