Кнопки нарисовал в CorelDRAW. Сохранил в формате jpg с размерами 100 и 200 пикселей. Получились файлы весом 2 - 5 кб. Загрузил их в хостинг ЛИру. В визуальном редакторе кнопкам со словом ОГЛАВЛЕНИЕ дал ссылку на мой пост Оглавление (Пляшущие человечки. Литературное расследование.) При наведжении на кнопоку с ссылкой курсор превращается в указующий перст. Кнопки (ссылки) работают.
Кнопка 1
HTTM-код
<img width="100" height="31" src="http://img0.liveinternet.ru/images/attach/c/1//50/395/50395057_1256648962_knop01.jpg" title="Это кнопка" alt="" />
Где
<img /> - открывающий и закрывающий тэги вставки в пост изображения.
width="100" - ширина изображения. В данном случае 100 пикселей.
height="31" - высота изображжения. В данном случае 31 пиксель. (Получилось в результате сохранения пропорции изображения).
src="http://img0.liveinternet.ru/images/attach/c/1//50/395/50395057_1256648962_knop01.jpg" - адрес изображения на хостинге. (Собственно адрес это то, что в кавычках).
knop01.jpg - авторское название изображения и расширение (тип изображениея).
title="Это кнопка" - это то сообщение, которое появится, если в посте навессти курсор на это изображение. в данном случае появится сообщение "Это кнопка". (Можете проверить.)
alt="" - это то, что остается от изображения, когда хостин не посылает его в пост. В данном случае между кавычками ничего не написано. Стало быть никакой надписи от этого изображения не останется.
Кнопка 2 (кнопка с ссылкой)
HTML-код
<a href="http://www.liveinternet.ru/users/3429056/post112113188/"><img width="100" height="31" src="http://img1.liveinternet.ru/images/attach/c/1//50/395/50395059_1256648981_knop02.jpg" title="Нажимай!" alt="" /></a>
Где
<a href="http://www.liveinternet.ru/users/3429056/post112113188/">... </a> - открывающий и закрывающий тэги ссылки.
"http://www.liveinternet.ru/users/3429056/post112113188/" - ссылка на мой пост Оглавление (Пляшущие человечки. Литературное расследование.) В кодировке ЛИру это пост post112113188.
<img width="100" height="31" src="http://img1.liveinternet.ru/images/attach/c/1//50/395/50395059_1256648981_knop02.jpg" title="Нажимай!" alt="" /> - внутри тэгов ссылки тэг изображения.
"http://img1.liveinternet.ru/images/attach/c/1//50/395/50395059_1256648981_knop02.jpg" - адрес изображения на хостинге ЛИру.
title="Нажимай!" - при наведении курсора на изображение в посте появится надпись "Нажимай!"
В посте кнопка выглядит хорошо.
Кнопка 3 (прямоугольная кнопка)
Думал, что в посте округлые кнопки будут выглядеть плохо - прямоугольно из-за ссылки. Поэтому сделал прямоугольные кнопки.
HTML-код
<img width="100" height="27" src="http://img0.liveinternet.ru/images/attach/c/1//50/395/50395120_1256649049_knop04.jpg" alt="" />
В коде изменился только адрес изображения на хостинге.
Кнопка 4
HTML-код
<img width="200" height="62" alt="" src="http://img0.liveinternet.ru/images/attach/c/1//50/395/50395124_1256649090_knop06.jpg" />
width="200" - изменился только размер кнопки. Ширина - 200 пикселей.
height="62" - соответственно изменилась и высота.
По-моему, кнопка слишком большая.
Кнопка 5
HTML-код
<a href="http://www.liveinternet.ru/users/3429056/post112113188/"><img width="200" height="55" src="http://img0.liveinternet.ru/images/attach/c/1//50/395/50395281_1256649299_knop11.jpg" title="Нажимай!" alt="" /></a>
Кнопка 6
HTML-код надписи HTML-код
<p><span style="color: rgb(128, 0, 128);"><strong>HTML-код</strong></span></p>
где
<p> ... </p> - тэги абзаца.
<span style="color: rgb(128, 0, 128);"> - тэг цвета.
"color: rgb(128, 0, 128);" - собственно цвет в RGB/
<strong> ... </strong>- тэги выделения шрифта - жирный.
HTML-код - сама надпись.
| Этот пост является частью книги Как это сделать в ЛИру См. Оглавление |