Создание сайта.
Популярные статьи.
Изображения-карты и якоря ссылок в HTML и правильное применение на практике
Категория: HTML. Нет комментариев. Опубликовано: 30.06.2012.Здравствуйте дорогие читатели моего блога и сегодня я продолжаю цикл статей в котором я рассказываю о основных командах HTML и потом я покажу как все эти знания можно применить на практике. Также для того чтобы структурировать текст на вашей странице вам просто не обойтись без якорей ссылок а также изображения-карты вам помогут сделать кликабельными определенную часть картинки на странице.
Якоря ссылок-навигация по вашему тексту.
Давайте сначала разберемся что собой представляет якорь ссылки а также как мы можем это использовать на вашем сайте. Якоря в HTML ссылки-это метка, которая помогает ссылаться не на всю страницу полностью а на конкретную часть, например, абзац или заголовок нового текста. С помощью якоря в HTML ссылок вы можете также задать навигацию по тексту статьи. Такая задача очень хорошо решена на сайте ktonanovenkogo.ru, в каждой статье есть меню, которое помогает ориентироваться по статье. Вот как это выглядит:
Теперь давайте перейдем непосредственно к созданию якорей на нашем сайте и тем самым мы сможем структурировать наш текст. Для этого первым делом мы задаем пустой тег а и к нему мы прописываем атрибут ID в котором указываем название нашего якоря. Давайте теперь зададим якорь для примера и назовем его metka и метка будет в месте заголовка.
<h2>Подзаголовок вашего текста.</h2>
<A ID="metka"></A>
После того как вы задали метку вам нужно задать ссылку на конкретную метку. Сначала мы зададим ссылку на метку если они находятся на одной странице, то есть якорь выполняет навигацию по статье.
<A href="#metka">Подзаголовок</A>
Как вы поняли для этого вам просто нужно указать название метки и поставить в самом начале знак решетки. Для того чтобы задать ссылку на якорь с другой страницы или сайта вам нужно задать полный путь к странице и через решетку название якоря.
<A href="http://rabota-cms.ru/адрес страницы#metka">Подзаголовок</A>
Как видите нету ничего сложного в создании собственных якорей на сайте и теперь мы перейдем к второй части статьи в которой мы познакомимся с таким понятием как изображения-карты.
Изображения-карты. Как применять на сайте.
Изображения-карты в HTML сейчас не очень часто используются в дизайне но очень часто есть такие моменты когда их применение оправданно и выгодно для сайта. Такой ситуацией может быть возможность сделать в шапке сайта кликабельный логотип фирмы не разрезая картинку и немножко ниже мы рассмотрим как это можно реализовать.
Карту изображения мы будем создавать в несколько этапов и первый из которых это создание картинки, которую мы хотим сделать кликабельной и в этом нам поможет хорошо нам известный тек img который мы рассматривали в статье про вставку картинки на сайт и вы можете посмотреть и вспомнить как это сделать. Мы задали картинку такого вида:
<IMG SRC="map.gif">
Теперь мы переходим непосредственно к созданию карты и для этого нам нужно будет придумать для её уникальное имя для страницы. Создадим мы карту тегом MAP и вот как это выглядит на практике:
<MAP NAME="samplemap">
</MAP>
И теперь нам просто нужно прикрепить нашу карту к изображению задав атрибут USEMAP в котором мы укажем какую карту нужно использовать для картинки.
<IMG SRC="map.gif" USEMAP="#samplemap">
Ну а теперь нужно приступать непосредственно к описанию области, которую мы хотим сделать ссылкой. Для этого мы будем использовать тег <AREA> который мы поместим внутрь MAP.
<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>" HREF="<интернет-адрес гиперссылки>" TARGET="<цель гиперссылки>">
Теперь давайте мы подробно разберем что здесь за параметры и как их можно использовать на практике. В тег AREA нам нужно прописать обязательный атрибут SHAPE который отвечает за параметры области, которую мы будем выделять и существует три основных значения для этого.
Атрибут «rect» задает область в виде прямоугольника и в этом случае параметр COORDS будет иметь значения COORDS="X1,Y1,X2,Y2" где буквы икс и игрек это координаты верхнего левого и правого нижнего угла соответственно.
«circle» будет указывать на то что область должна быть круглой формы и тогда в COORDS="X центра,Y центра,радиус" и вы просто задаете параметр для центра круга а также радиус, который должен иметь круг.
«poly» позволяет задать произвольную область многоугольника и тогда в COORDS нужно задать координаты (икс и игрек) всех вершин, которые имеются у нас.
Параметр HREFF будет указывать на какой интернет-адрес нужно перейти после того как будет активирована область карты. Атрибут TARGET указывает как будет открываться ссылка в том же окне или в новом окне, чаще всего задают атрибут «_blank» который открывает страницу в новом окне.
На этом статья закончена и теперь вы можете применять данные знания на практике и структурировать свои статьи на сайте с помощью таких методов как якоря ссылок так и изображения-карты в HTML для кликабельности любой области картинки.
С уважением, Василенко Александр
