Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Изображения - ссылки

Мы уже изучили с вами как создаются обычные текстовые ссылки, а в этом уроке вы узнаете, как сделать ссылки — изображения. В основном такие ссылки используются в дизайне сайта для создания различных кнопок навигации, но естественно их можно применять где угодно, а точнее где вам нужно.

Как сделать в HTML ссылки - изображения?

Вы знаете, наверное, это будет одним из самых простых уроков. Потому что, чтобы сделать из картинки ссылку надо в тег <A> поместить тег <IMG>. Все.

Пример создания ссылок - изображений в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Ссылки - картинки в HTML</title>
</head>
<body>
 <div>
  <a href="https://seodon.ru/">
   <img src="image/button1.png" width="98" height="36" alt="Главная страница">
  </a>
 </div>
 
  <div>
  <a href="https://spravka.seodon.ru/">
   <img src="image/button2.png" width="139" height="36" alt="Справочники">
  </a>
 </div>
</body>
</html>

Результат в браузере

Главная страница
Справочники

Самое главное не забывайте указывать обязательные атрибуты тега <IMG> — alt и src. А также необязательные, но настоятельно рекомендуемые width и height, даже когда вы не меняете размеры изображений.

Как убрать рамку вокруг изображения - ссылки?

Некоторые браузеры по умолчанию рисуют вокруг изображений — ссылок небольшие рамки, по цвету совпадающие с цветом обычных ссылок на HTML-странице. В примере указанном выше вы их в любом случае не увидите, так как я убрал эти рамки на всей странице. Но как это примерно выглядит, вы можете посмотреть:

Отображение рамок вокруг изображений.

Отображение рамок вокруг картинок

Согласитесь не очень красиво. В старом HTML у тега <IMG> имелся специальный атрибут border, который мог убрать рамку, но в новом его нет, поэтому снова используем стили (CSS). Итак, убрать у изображения рамку можно несколькими способами, я покажу вам два (если решите когда-то вплотную взяться за CSS, то узнаете еще один).

Первый. Можно указать в теге <IMG> атрибут style="border:0", как мы это делали, когда убирали рамки у линий в уроке Горизонтальные линии.

Но лучше использовать второй вариант и убрать их сразу на всей HTML-странице. Для этого надо в «шапке» документа (<HEAD>) установить тег <STYLE type="text/css">...</STYLE>, как мы делали в уроке по изменению цвета ссылок, и написать внутри него такую строку:

img {border:0}

Здесь мы говорим браузеру, что у всех тегов <IMG> на странице не должно быть рамок, а точнее их толщина должна составлять ноль.

Кстати, если в «шапке» страницы у вас уже имеется <STYLE>, например с информацией о цвете ссылок, то еще один тег указывать не обязательно, можно просто добавить в нем это строку и все. Хотя можете и указать, если хочется.

Пример убирания рамок у изображений - ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Убираем рамки у ссылок-картинок</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
img {border:0}
</style>
</head>
<body>
 <div>
  <a href="https://seodon.ru/">
   <img src="image/button1.png" width="98" height="36" alt="Главная страница"></a>

  <a href="https://spravka.seodon.ru/">
   <img src="image/button2.png" width="139" height="36" alt="Справочники"></a>
 </div>
</body>
</html>

Результат в браузере

Главная страница Справочники

Домашнее задание.

  1. Установите на всей странице размер шрифта 85% и фон-изображение.
  2. Создайте в начале страницы четыре ссылки-изображения расположенные в один ряд и уберите их рамки. Куда ведут ссылки — решайте сами.
  3. Ниже напишите заголовок статьи и три подзаголовка. Пусть заголовок статьи располагается по центру.
  4. Напишите под первым и вторым подзаголовками по два параграфа, а под третьим — длинную цитату из двух параграфов.
  5. Сделайте так, чтобы фон подзаголовков и параграфов, включая пустые поля, был обычным белым цветом.
  6. Сделайте так, чтобы сверху и снизу каждого раздела была горизонтальная линия, ее параметры выберите сами.
  7. В самом низу HTML-страницы напишите обычные текстовые ссылки, которые дублируют ссылки-изображения и пусть они располагаются по центру.
  8. Измените цвета текстовых ссылок на те, которые посчитаете нужными, а вот их фон пусть совпадает с фоном всей страницы.
Изображения для фонов← Содержание →Таблицы
Учебник HTML