Создание внешних ссылок

Ссылка на файл, ссылка на сайт, ссылка на страницу

Гиперссылки в HTML

Рамка вокруг картинки

Создание отступов вокруг картинки

По-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:

· vspace — создает верхний и нижний отступы;

· hspace — создает боковые отступы (слева и справа).

Значения этих атрибутов указывается в пикселах. Например, если мы немного дополним предыдущий пример:

< img src="logo.jpg" align="left" vspace="5" hspace="20"> Это мой аватар на форумах и в различных сервисах

, то получим следующее

Это мой аватар на форумах и в различных сервисах

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

< img src="logo.jpg" border="5">

в браузере выглядит так

Чем отличается ссылка на файл от ссылки на сайт или его отдельную страницу? Ответ такой: ничем. Все перечисленные ссылки являются внешними по отношению к исходной странице и создаются одним и тем же способом.

Итак, код ссылки на сайт:

< a href="http://www.seoded.ru/">Ссылка на сайт< /a>

Выглядит так:

Ссылка на сайт

Код ссылки на страницу:

< a href="http://www.seoded.ru/beginner.html">Ссылка на страницу< /a>

Выглядит так:

Ссылка на страницу

Код ссылки на файл:

< a href="http://www.seoded.ru/downloads/soft/colortfinal1.5.rar">Ссылка на файл< /a>

Выглядит так:

Ссылка на файл

Как видишь, все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться. А теперь перейдём к основной части урока.

Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчеркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A>(сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.

Для создания внешней ссылки на сайт, страницу или файл служит атрибут тега < A> — href. В качестве значения этот атрибут принимает URL-адрес сайта, страницы или файла (об этом мы говорили выше). Между тегами < A> и < /A> располагается видимая часть ссылки (анкор ссылки), т.е. то, что мы видим на экране браузера. Анкор ссылки может быть как обычным текстом (текстовая ссылка), так и графическим изображением (ссылка-картинка). Ссылка-картинка создается вставкой знакомого нам по прошлому уроку тега < IMG> между тегами < A> и < /A>. В общем, синтаксис создания ссылки выглядит так:

< a href="URL-адрес или имя файла">текст ссылки (анкор)< /a>

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

< a href="http://www.seoded.ru/">Главная страница сайта Seoded.ru< /a>

В браузере это будет выглядеть так

Главная страница сайта Seoded.ru

К тексту ссылок можно применять все те же варианты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.