Тема: «Вставка картинок. Ссылки»

Лабораторная работа

Цель:Ознакомиться с возможностью вставлять графические объекты в HTML-страничку, научиться анализировать изображения с целью оптимального выбора расширения графических файлов для страничек. Научиться создавать ссылки на страничке.

Оборудование:для проведения работы необхом любой стандартный браузер, например, Internet Explorer,простой текстовый редактор, например, Блокнот и подключение Интернет.

Вставка картинки в документ осуществляется с помощью тэга:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории, то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

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

Рис. Вставка картинки в страничку.

Посмотрите, что у нас получилось. Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько.

Например, у тэга -

.

Параметр align есть и у картинок:

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст - слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по Интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.

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

<imgsrc="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
 
 Добро пожаловать! :) </center>

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг? :) На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

</body>
</html>

Рис. Заданы размеры картинки и ее обтекание текстом.

Задание. Подставить и другие параметры тэга <img src="my.jpg">в наш пример.

Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных параметров), но мы не поговорили, как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки, как и текст можно расположить при помощи параграфов (), это наглядно представлено в нашем примере.

Картинку также можно сделать фоном документа. Это можно записать в открывающем тэге <body>:

<body text="#336699" bgcolor="#D1D1D1" background="ваш_фон.jpg">

Параметр background и указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.

Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем. Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же, как в случае с картинками:

(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html,

в случае (2) документ лежит в поддиректории /photos,

в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге <body>:

<body text="#336699" bgcolor="#D1D1D1" link="#339999" alink="#339999" vlink="#339999">

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, если цвет ссылки такой же, как цвет текста документа (ссылка же выделяется чертой).

Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
 
 Добро пожаловать! :) </center>

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг? :) На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

</body>
</html>

Рис. Страничка со вставленной текстовой ссылкой.

Нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:

<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a>

Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик – другое.

Упражнение для самостоятельной работы:

Проделайте все предложенные в работе манипуляции по оформлению Web-страницы. Создайте самостоятельно Web-страницу на тему «Моя персональная страничка» с использованием, полученных в работе знаний по ее оформлению: вставка изображений с различными параметрами и обтеканием текста, вставка разных ссылок-объектов на разные объекты с учетом цвета статуса ссылки.

Контрольные вопросы:

1. Вставка картинки в HTML-документ.

2. Параметры для расположения текста и картинки относительно друг друга.

3. Как сделать картинку фоновой?

4. С помощью каких атрибутов можно установить цвет ссылки, активной ссылки и уже посещенной ссылки?.

5. Как организовать ссылку на текст, рисунок, почтовый ящик?

Литература

1. Хольцнер С., Dynamic HTML, Руководство разработчика, БХВ Киев, 1999 г.

2. Кузин А., 8-47413.php">2

Далее ⇒ 