- Заработок без сайта
- Заработок на сайте
- Раскрутка сайта
- Темная раскрутка
- Рефералы
- Лохотроны
- Черный список
- Архив
- Домены
- Таблицы стилей CSS
- Контакты
- Ссылки
- Статьи
- Вводная
- Учимся раскрашивать
- Выравнивание текста
- Заголовки и выделение текста
- Шрифты в Html
- Вставляем картинки
- Картинки и текст в Html
- Текстовые ссылки
- Картинка как ссылка
- Навигационные карты
- Якоря
- Таблицы
- Выравнивание текста в таблицах
- Объединяем ячейки
- Расстояние между ячейками таблицы
- Вложенные таблицы
- Примеры с использованием таблиц
- Фреймы
- Полоса прокрутки во фреймах
- Плавающий фрейм
- Списки в документах Html
- Спецсимволы в документах html
- Линии в документах Html
- МЕТА теги
- Список основных тегов
- Таблица цветов
HTML
Начинающим
Картинка как ссылка
Ссылка на другой документ или файл может быть не только текстовая, но и в виде картинки. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> заключается не текст, а картинка:
Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:
Теперь в своем примере я сделаю картинку с симпатичной бабочкой ссылкой на страницу с картинками.
|
<html>
<head> <title>Моя первая страничка</title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <h2>Это моя первая страница.</h2> <br> <font color="#009933">У меня все получится.</font></div> <hr color="#FF0033"> <div align="Justify"> <font color="#CCCCFF"> <a href="photo.html"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" alt="Перейти на стр.с картинками"></a> <font size="+1" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font> <br clear="left"> <b> Он словно сошел с картинки </b> парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. <i> Однако внимание привлекал не столько щегольской наряд пассажира, </i> сколько импозантная, можно даже сказать, эффектная внешность. <u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u> ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках. <p align="right">Борис АКУНИН</p> </font> </div> </body> </html> посмотреть |
Как видно из примера, картинка "photo.jpg" стала ссылкой на страницу с картинками "photo.html".
Вокруг картинки появилась рамка, убрать рамку можно с помощью атрибута border присвоив
ему значение "0" или оставить соответственно присвоив значение 1,2,3, и т.д.
В случае если вы хотите оставить рамку и раскрасить ее другим цветом, то вам на помощь
придет атрибут bordercolor.
<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256"
border="3" bordercolor="#CC0000 alt="Перейти на стр.с картинками">
В своем примере я задал цвет рамки красным и естественно атрибут border который
отвечает за толщину рамки не должен равняться нулю, если вы хотите видеть рамку вокруг картинки.
В случае если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который вы задали для ссылок в тэге body с помощью link, vlink, alink, в этом случае атрибут bordercolor уже не влияет на цвет рамки вокруг картинки.
В выше изложенном примере видно, что при нажатии на картинку с бабочкой открывается страница с картинками в том же окне, для открытия страницы в новом окне используется атрибут target для тега <a></a>. К примеру вам надо чтобы при нажатии на маленькую картинку (small.jpg) открылась большая картинка (big.jpg), но в новом окне. Сама запись будет такого плана:
Добавляем в наш пример картинку с пейзажем и делаем эту картинку ссылкой на большую картинку с тем же пейзажем который откроется в новом окне браузера.
|
<html>
<head> <title>Моя первая страничка</title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <a href="big.jpg" target="_blank"><img src="smal.jpg" width="240" height="180" hspace="30" vspace="5" alt="Посмотреть болшую картинку"></a> <div align="center"> <h2>Это моя первая страница.</h2> <br> <font color="#009933">У меня все получится.</font></div> <hr color="#FF0033"> <div align="Justify"> <font color="#CCCCFF"> <a href="photo.html"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" alt="Перейти на стр.с картинками"> </a> <font size="+1" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font> <br clear="left"> <b> Он словно сошел с картинки </b> парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. <i> Однако внимание привлекал не столько щегольской наряд пассажира, </i> сколько импозантная, можно даже сказать, эффектная внешность. <u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u> ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках. <p align="right">Борис АКУНИН</p> </font> </div> </body> </html> посмотреть |
| Вернуться назад | Перейти к следующей странице |
|---|