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


 

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

2462. Присвійні, вказівні займенники, їх відмінювання 74 KB
  Мета організації уроку. Сформувати в учнів поняття присвійних та вказівних займенників, уміння їх відмінювати.
2463. Відокремлені додатки 59.5 KB
  Мета організації уроку. Сформувати поняття про відокремлений додаток, навчити оформляти відокремлені додатки на письмі та використовувати набуті уміння на практиці.
2464. Степан Васильченко. Свекор 54 KB
  Ознайомити учнів з фактами життя письменника, які вплинули на формування світогляду, специфікою його майстерності та із змістом оповідання Свекор, розвивати навички виразного читання, переказу прозових творів; виховувати почуття любові, злагоди, взаємодопомоги та турботи у сім’ї.
2465. Письмовий твір-роздум на морально-етичну чи суспільну теми публіцистичного стилю 39 KB
  Мета організації уроку. Удосконалювати вміння учнів продукувати письмовий твір-роздум на морально-етичну тему, розвивати усне і писемне мовлення, сформувати в учнів вміння виділяти в тексті всі компоненти роздуму, розуміти їх призначення в організації висловлювання, а потім свідомо відтворювати їх у власному мовленні.
2466. Усний твір, що містить опис тварини. 33.38 KB
  Мета організації уроку. Сформувати в учнів поняття про опис зовнішності тварини; навчити правильно будувати текст-опис зовнішності тварини, через зовнішність описати її характер, знаходити основне, неповторне в образі конкретної тварини і описувати свої спостереження.
2467. Загальновживані (нейтральні) та стилістично забарвлені слова. 33.86 KB
  Мета організації уроку. Сформувати в учнів поняття про загальновживані та стилістично забарвлені слова, навчити розпізнавати і використовувати їх у власному мовленні, виховувати любов до слова.
2468. Розряди займенників за значенням 30.37 KB
  Мета організації уроку. Сформувати загальне поняття про розряди займенників, їх диференційні ознаки, повторити співвідносні з ними частини мови, закріпити поняття про текст і використання займенників як засобів зв’язку в ньому.
2469. Омоніми та їх використання 25.79 KB
  Мета організації уроку: розширити уявлення учнів про омоніми; поглибити отримані на попередньому уроці знань, навчити учнів розрізняти омоніми, свідомо підходити до розуміння значення і використання омонімів у мовленні.