38036

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

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

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

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

Русский

2013-09-25

274.5 KB

37 чел.

Лабораторная работа №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 страницы о каждом члене вашей семьи, применяя уже полученные навыки, написав краткую информацию о ваших родственниках (использовать фото).


 

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

84834. Философия как разновидность мировоззрения 135.48 KB
  Крупнейшие и наиболее распространенные в мире национальные религии: синтоизм; индуизм; иудаизм. Часто эклектика применялась для обоснования каких-либо взглядов идей привлекательных для массового сознания но не имеющих реальной ни онтологической ни гносеологической ценности и достоверности...
84835. Міжнародні відносини у структурі суспільних відносин 220.5 KB
  Місце міжнародної проблематики в історії суспільно-політичної думки вирішальною мірою пов’язане з тенденціями та закономірностями розвитку міжнародних відносин, відбиваючи та суттєво впливаючи на них.
84836. Спрос, предложение и рыночное равновесие. Эластичность спроса и предложения 372.96 KB
  В рассматриваемой теме рассматриваются понятия, которые описывают механизм функционирования рынков экономических благ: спрос, предложение, рыночное равновесие, равновесная цена, равновесный объем производства, эластичность спроса, эластичность предложения.
84837. Теория поведения потребителя 61.25 KB
  Рынок – это экономическая система, ориентированная на потребителя. Этим обстоятельством объясняется интерес экономической науки к тому, как ведет себя потребитель, какими мотивами он руководствуется, делая выбор благ, каковы закономерности, управляющие его поведением на рынке.
84838. Исследование функций. Возрастание и убывание функций 65.09 KB
  Такие функции называют монотонными в интервале а b. Точка называется точкой максимума функции у = f x если cуществует такая окрестность точки что для всех из этой окрестности выполняется неравенство fx f. Точка называется точкой минимума функции у = f x если cуществует такая окрестность...
84839. СИСТЕМИ ОБЛІКУ ВИТРАТ І КАЛЬКУЛЯЦІЇ СОБІВАРТОСТІ 235 KB
  Калькуляцію використовують для досягнення наступних цілей: встановлення рівня беззбитковості ціни, тобто яку ціну на продукцію або послуги слід встановити, щоб підприємство могло відшкодувати понесені витрати; контролю витрат у виробництві, тобто який підрозділ використовує ресурси найефективніше...
84840. КЛАСИФІКАЦІЯ ВИТРАТ ДІЯЛЬНОСТІ В УПРАВЛІНСЬКОМУ ОБЛІКУ 235.5 KB
  Найекономічнішим і доцільним підхідом до побудови системи обліку витрат і калькуляції собівартості – це виділення типових груп управлінських рішень (наприклад, контроль за трудовитратами або використанням матеріалів) і вибір відповідних...
84841. Податкові розрахунки, їх сутність та місце в системі оподаткування 22.59 KB
  База оподаткування - це фізичний, вартісний чи інший характерний вираз об’єкта оподаткування, до якого застосовується податкова ставка і який використовується для визначення розміру податкового зобов’язання.
84842. Биологическое окисление. Тканевое дыхание. Окислительное фосфорилирование 24.91 KB
  Жизнь высших организмов полностью зависит от поступления в организм кислорода, который используется в основном в процессе аккумуляции клеткой энергии в виде АТФ - окислительного фосфорилирования. Окислительное фосфорилирование позволяет аэробным организмам улавливать значительное количество...