Ссылки и изображения в 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 и базовых знаниях по созданию сайта.
До встречи в следующей статье.
