38036

Вставка изображений на WEB-страницу

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

Информатика, кибернетика и программирование

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так img src= путь к картинке название картинки.расширение картинки Для вашего удобства кладите картинку в ту же директорию что и документ тогда путаницы будет меньше и записывать короче img src= название картинки.расширение картинки Если картинка лежит на уровень выше а документ находится в поддиректории то ссылка на неё будет такой: img src= . название картинки.

Русский

2013-09-25

274.5 KB

36 чел.

Лабораторная работа №5. «Вставка изображений на WEB-страницу»

<img a >  - вставляет изображение на WEB-страницу.

Атрибуты:

src="" - URL-адрес файла-изображения с расширением .gif, .jpeg (.jpg), .xbm, или .png (два последних формата использовать не желательно);

alt=""  - альтернативный текст. Описание изображения выводится на место изображения до ввода изображения, а также появляется, как всплывающая подсказка, если задержать курсор мыши на изображении. Наличие этого атрибута помогает броузеру быстрее загружать страницу;

height="" , width=""  - задают высоту и ширину изображения, соответственно. (Размер изображения можно получить из редактора изображений, например, Adobe PhotoShop или Paint. Некоторые броузеры тоже показывают размер файла изображения в строке названия, если просматривать изображение само по себе, без текста).  Если загружаемое изображение больше указанных размеров, то оно уменьшается "втискиванием", а если меньше - растягивается. Можно не задавать размеры изображения, но наличие этого атрибута помогает броузеру быстрее загружать страницу;  Задается как в пикселах, так и в процентах от ширины и высоты экрана.

border=""  - задает ширину рамки вокруг изображения;

vspace="" , hspace=""  - задают расстояние по вертикали и по горизонтали от изображения до кромки текста, соответственно;

align="" - задает положение текста относительно изображения.

Значения:

top - выровнять по верху строку, следующую за изображением, 

middle - выровнять по середине строку, следующую за изображением, 

bottom - выровнять по низу строку, следующую за изображением, 

left - текст должен обтекать изображение, прижатое к левой стороне окна, 

right - текст должен обтекать изображение, прижатое к правой стороне окна. 

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так

<img src="/путь к картинке/название картинки.расширение картинки">

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

<img src="название картинки.расширение картинки">

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

<img src="../ название картинки.расширение картинки">

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

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

Тег этот не "контейнерный", поэтому в закрывающей части не нуждается.

Со своими атрибутами тег картинки будет выглядеть примерно так:

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">

hspace и vspace - эти теги тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст «впритык» к картинке...

Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в практически любой дизайн.

Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?!

Рассмотрим минусы занижения размеров картинки при помощи HTML:

  •  картинка сохраняет свои реальные размеры и, соответственно, вес - даже если вы сделаете огромадную картинку в мег весом, размерами с почтовую марку, грузиться она будет всеми своими мегами.
  •  картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное;

теперь плюсы занижения размеров:

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

Пример.


<
html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>

Таким образом выглядит страничка.

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

У картинок есть параметр 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">

Применяем описанные выше теги.

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

"моя фотография". 

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000">

<center>

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify">

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

</p>

</body>

</html> 

Посмотрим какие изменения произошли со страничкой.

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

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

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

Пример.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body bgcolor="#000000" background="1.jpg">

<center>

<H1>Здравствуйте, это моя первая страница.</H1>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify"><H3>

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

</p>

</body>

</html>

Как она выглядит можно посмотреть здесь.

Задание.  

  1.  Поместить в свое резюме фотографию.
  2.  Добавить разный фон с помощью картинок ко всем ранее созданным страницам (кроме резюме).
  3.  Создать новую страницу, которая должна содержать фото вашей семьи и небольшую историю о вашей семье (это можно сделать на странице с бегущей строкой).
  4.  Создать 2-3 страницы о каждом члене вашей семьи, применяя уже полученные навыки, написав краткую информацию о ваших родственниках (использовать фото).


 

А также другие работы, которые могут Вас заинтересовать

70066. Введение в право: Учебно – методический комплекс 163.5 KB
  Дается общая характеристика права общая характеристика отраслей права раскрываются основные принципы осуществления правосудия в Российской Федерации. Содействие подготовке компетентных специалистов которые смогут самостоятельно найти нужную норму права разобраться в ней.
70067. МУНИЦИПАЛЬНОЕ ПРАВО 599 KB
  Муниципальное право понятие и предмет муниципального права; правовое регулирование муниципальных отношений; понятие местного самоуправления; общие принципы и функции местного самоуправления; структура и организация работы органов местного самоуправления; финансово-экономические основы...
70068. ОТЕЧЕСТВЕННАЯ ИСТОРИЯ: УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС 513.5 KB
  Основная цель курса состоит в формировании у обучаемых научных представлений об основных закономерностях исторического процесса о специфике исторического пути России в ряду мировых цивилизаций и становлении на этой базе гражданского самосознания высоких моральных...
70069. ПРАВО СОЦИАЛЬНОГО ОБЕСПЕЧЕНИЯ 684.5 KB
  Учебный курс имеет своей целью изучение всех важнейших институтов права социального обеспечения, формирование у студентов знаний правовых норм законодательства в сфере социального обеспечения граждан, развитие и закрепление навыков правового мышления...
70070. Учебно-методический комплекс: Основы экономики 666.72 KB
  Цель данного учебного курса – дать обучающимся представления об основах экономической теории, раскрыть механизм функционирования рыночной модели хозяйствования, показать роль и место государственного регулирования в условиях рыночной экономики и в общих чертах изложить...
70071. Правовые основы организации деятельности судебных приставов: Учебно-методический комплекс 291.5 KB
  Учебная дисциплина «Правовые основы организации деятельности судебных приставов» включена в учебный план ПФ РАП по специальности «Правоведение» для студентов факультета непрерывного образования по подготовке специалистов для судебной системы.
70072. Учебно-методический комплекс: Теория государства и права 325.5 KB
  Изучение теории государства и права формирует и развивает юридическое мышление, правовую культуру, а глубокое усвоение системы основных категорий и понятий, в том числе в их отраслевом преломлении способствует приобретению навыков работы с законодательством, практикой его толкования и применения.
70073. ФИНАНСОВОЕ ПРАВО: УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС 598.5 KB
  В современных условиях рыночной экономики, замены прежнего механизма управления процессами новыми методами хозяйствования, Финансовое право Российской Федерации выдвигается в число ведущих отраслей отечественного законодательства и играет всё более значительную роль...
70074. Философия: Конспект лекций 1.84 MB
  Философии как специальному, систематизированному знанию несколько тысячелетий. Что касается философствования как особого размышления людей о себе, о смысле жизни и о мире, то его возраст, скорее всего, равен времени существования человечества.