Создаем кнопки для сайтов

Сегодня будем учиться создавать кнопки для сайтов. Создадим простые белые кнопки и попробуем их разнообразить.

1. Рисунок справа

Интернет для

Код для нее такой:

<form action="http://ty-blogger.blogspot.com/"><button> <span style="font-size:78%;">Интернет для</span><img src="http://s11.radikal.ru/……….jpg" align="absMiddle"></button></form>

где http://ty-blogger.blogspot.com/ – адрес вашего сайта/блога;
"Интернет для" – текст на кнопке;
http://s11.radikal.ru/……….jpg – адрес картинки в интернете;
align="absMiddle" – выравнивает текст и картинку внутри кнопки.

2.Рисунок сверху/слева

Перенесем код картинки до текста:

Интернет
для "чайника"

Код такой:

<form action="http://ty-blogger.blogspot.com/"><button><img src="http://s11.radikal.ru/………jpg" align="absMiddle"><span style="font-size:78%;"> Интернет <br/>для "чайника"</span></button></form>

<br/> – тег новой строки

3. Красивая кнопка без картинки с комментарием

Код для такой кнопки следующий:

<a href=http://ty-blogger.blogspot.com/><img src=http://s15.radikal.ru……..jpg border=0 title="Интернет для чайника"></a>

Кнопку скачиваете из интернета, создаете на ней надпись. Можно даже элементарно Paint-ом воспользоваться. Загружаете через файлообменник, например, radikal.ru

Вместо http://ty-blogger.blogspot.com/ вставляете адрес своей страницы, вместо http://s15.radikal.ru……..jpg – адрес картинки в интернете, "Интернет для чайника" – на ваш текст комментария.

Надеюсь, что кому-то это будет интересно!

This entry was posted on Воскресенье, Сентябрь 20th, 2009 at 5:41 пп and is filed under HTML теги. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “Создаем кнопки для сайтов”

  1. al1979:

    Очень неплохо всё расписанно! Но можно добавить свою картинку просто добавив её в мастерской в настройках сайта. Код на страницу можно оставить тот же. А можно и сменить на нужную вам.

  2. Masha:

    а как подарить другим свою кнопку – вернее ее код?

  3. Алексей:

    Попробуйте сделать так, как у меня на боковой панели: "Если мои статьи вам помогли, то вы можете отблагодарить меня, поставив на своем сайте или блоге мою кнопку: " и вставить ее код. А чтобы он получился в окошке,вставьте его между тегами <textarea rows="3" cols="30"> и </textarea>

  4. Лиса:

    Я рекомендовала Ваш блог одному своему читателю. А потом решила выставить на самое видное место кнопку перехода к Вам. Взяла у Вас с правой колонки. Очень легко и удобно, кстати. У меня есть в "читаемых" ещё несколько блогов в помощь чайникам. Но Ваш самый понятный. Я даже думаю, что удалюсь из тех блогов. Там много профессиональных терминов, и есть одно "но" – не раз уже сталкивалась с тем, что информация там устарела.

  5. Алексей:

    Лиса,мне очень приятно, спасибо. У меня тоже есть статьи, которые неактуальны для нового редактора, но оказалось, что еще не все перешли на новый редактор.

  6. Ксюша:

    Алексей, спасибо Вам огромное. Все очень доступно и доходчиво. Удачи Вам!

  7. Павел Семенихин:

    Спасибо Алексей!!! Я себе тоже чайничек повесил! Интересный у Вас сайт и блог!- и помогает сильно!

  8. Oleg:

    спасибо за статью!)

  9. Руслан:

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

Прокомментировать запись: