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