Реальный пиарHTMLУроки HTML → Ссылки и изображения в HTML

Ссылки и изображения в HTML

цвета html

В этой статье я расскажу Вам о добавлении изображений и ссылок на Вашу HTML-страницу.

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

Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу.

Для этого напишем в теге <body> такой код:
<a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>

Тег HTML <a> означает начало ссылки. У этого тега есть различные атрибуты. Давайте начнём с "target".

Атрибут "target" может принимать три значения (их чуть больше, но они слишком редко применяются, поэтому не буду их даже упоминать): "_self", "_new", "_blank". Вообще говоря, результат этих атрибутов у разных браузеров зачастую происходит по-разному, поэтому я скажу, что означает каждое значение атрибута "target" лишь в теории, а не на практике.

Значение "_self" означает, что страница откроется в этом же окне.

Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новую вкладку в браузере).

Значение "_blank" означает, что страница будет открыта в новой вкладке.

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

Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути.

Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей.

Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно.

Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку.

С атрибутами тега <a> покончено. Что касается того, что внутри тега, то здесь только Ваша фантазия. В большинстве случаев - это обычный текст, как, например, у нас. Очень часто делают картинку внутри тега <a>, тогда эта ссылка будет в виде картинки.

Тег </a> означает конец гиперссылки.

Также можно задавать цвет ссылок. Опять же будет работать или нет - зависит от браузера. Но всё-таки, давайте я Вас с этим познакомлю. Добавим в тег <body> три атрибута : "link", "vlink" и "alink". Каждый из этих трёх атрибутов может принимать значение какого-либо цвета. Атрибут "link" означает цвет непосещённой ссылки. Соответственно, "vlink" указывает цвет посещённой ссылки. И, наконец, атрибут "alink" указывает цвет ссылки в момент непосредственного нажатия. Как видите, здесь тоже ничего сложного нет.

Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML-ссылки ставим тег "<br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код:
<img src = "image1.gif" alt = "Картинка" width = "100" height = "100">

Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые.

Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации.

Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у пользователя в браузере отключён показ картинок. Очень желательно этот атрибут ставить, так как это помогает оптимизации сайта (впрочем, это уже раскрутка сайта, а не его создание).

Атрибуты "width" и "height" указывают ширину и высоту картинки соответственно. Если их не указывать, то картинка будет иметь такой размер, какой имеет исходник.

Советую потренироваться, выводя различные изображения, только предварительно разместите файлы картинок вместе с "index.html". Например, создайте в этом же каталоге папку "images" и размещайте туда изображения. А в атрибуте "src" пишите значение "images/Имя файла картинки".

Таким образом, код Вашей страницы должен быть примерно таким:
<html>
<head>
</head>
<body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue">
<h1>Заголовок 1-го уровня</h1>
<a target = "_new" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>
<br>
<img src = "Водяные лилии.jpg" alt = "Картинка" width = "100" height = "100">
</body>
</html>

Вот и вся наука. Как видите, ничего сложного нет, как и всё в базовых знаниях по HTML и базовых знаниях по созданию сайта.

До встречи в следующей статье.

С уважением, Михаил Русаков.


Источник: http://myrusakov.ru

Рекомендуем



Создание сайта на HTML Парные теги - это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются


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


Урок 15: Последние замечания В этом учебнике вы научились использовать Notepad, простой в использовании редактор, но, возможно, вы захотите использовать более навороченные программы, имеющие больше возможностей