38036

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

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

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

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

Русский

2013-09-25

274.5 KB

38 чел.

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


 

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

30303. Проблема автора в литературоведении. История и теория вопроса (работы М.М.Бахтина, Б.О.Кормана, Г.А.Гуковского и др.) 30.5 KB
  Проблема автора в литературоведении. Категория автора считается 1 из стержневых в литературе.Выделяется образ автора под кот понимается особая форма проявления авторской позиции. Участие автора в движении сюжета отношение автора к героям и т.
30304. Формы выражения авторского сознания в прозаическом тексте (автор-биография, автор-концепция, автор-повествователь) 27 KB
  Формы выражения авторского сознания в прозаическом тексте авторбиография авторконцепция авторповествователь Слово автор употребл в литведении в нескх знач. явлся все произведениеобраз автора. явлений характерных для отдельных жанров и родовавтором называют рассказчика повествователя в эпических произведениях либо лирического героя в лирикеБ. автор может выбрать одну из трех форм повествования ОТ АВТОРА объективная форма повествования от 3го лица: кажущееся отсутствие в произв.
30305. Проблема автора в литературоведении. Формы выражения авторского сознания в прозаическом тексте 26 KB
  Проблема автора в литературоведении. Формы выражения авторского сознания в прозаическом тексте Автор от лат. С разной степенью включенности автор участвует в литературной жизни своего времени вступая в непосредственные отношения с другими авторами с литературными критиками с редакциями журналов и газет с книгоиздателями и книготорговцами в эпистолярные контакты с читателями и т. Сходные эстетические воззрения приводят к созданию писательских групп кружков литературных обществ других авторских объединений.
30306. Проблема автора в литературоведении. Формы выражения авторского сознания в лирическом тексте. Понятие лирический герой 24.5 KB
  Понятие лирический герой Формы авторского присутствия в лирике. Лирический герой субъект речи через которого выражаются биографические и эмоциональнопсихологические черты автора. Лирический герой монологическая форма авторского выражения в тексте. Ролевой герой опосредованное выражение автора в тексте черех социокультурный тип прошлого или настоящего.
30307. Проблема автора в литературоведении. Формы выражения авторского сознания в драматургическом тексте 25 KB
  Проблема автора в литературоведении. Большинство ученых разделяют автора в первом значении его еще принято называть реальным или биографическим автором и автора во втором значении. Это пользуясь другой терминологией автор как эстетическая категория или образ автора. Иногда говорят здесь же о голосе автора считая такое определение более правомерным и определенным чем образ автора.
30308. Проблема романа в современном литературоведении 37 KB
  Проблема романа в современном литературоведении РОМАН франц . Роман эпос Нового времени; в отличие от народного эпоса где индивид и народная душа нераздельны в романе жизнь личности и общественная жизнь предстают как относительно самостоятельные; но частная внутренняя жизнь индивида раскрывается в нем эпопейно т. Типичная романная ситуация столкновение в герое нравственного и человеческого личностного с природной и социальной необходимостью. Поскольку роман развивается в новое время где характер взаимоотношений человека и общества...