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

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

Цель: Ознакомиться с возможностью вставлять графические объекты в 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 - рамка вокруг самой картинки (в пикселях). Можно не задавать.

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

< img src =" pr 1. png " align =" left " HSPACE =30 VSPACE =5 alt ="моя фотография">

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="# D 1 D 1 D 1">
<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="# D 1 D 1 D 1" 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:[email protected]"> [email protected] - пишите письма </a>

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

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

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

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

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

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

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

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

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

Литература

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

2. Кузин А., JavaScript шаг за шагом, [email protected].

3. Алленова Н., Первые шаги – учебник (руководство) по хтмл (html), http://www.postroika.ru.

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