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


 

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

40082. Принципы построения локальных сетей (Ethernet) 14.93 KB
  Наиболее широко используемой технологией является технология Ethernet и специализированный стандарт IEEE 802.3 При работе сети Ethernet используется топология звезда в которой каждый узел устройство соединен по сети с другим узлом с помощью активного сетевого оборудования такого как коммутатор. Типы сетей Ethernet Fst Ethernet Fst Ethernet это сеть Ethernet предназначенная для передачи данных со скоростью 100 Мбит с.
40083. Стандарты цифровых и аналоговых систем подвижной связи 14.48 KB
  К аналоговым ССПС относятся следующие стандарты: MPS усовершенствованная мобильная ТЛФ служба диапазон 800 МГц – США Канада Центральная и Южная Америка Австралия; это наиболее распространенный стандарт в мире; используется в России в качестве регионального стандарта. TCS общедоступная система связи диапазон 900 МГц – Англия Италия Испания Австрия Ирландия; второй по распространенности среди аналоговых; NМT – 450 и N МT – 900 мобильный телефон северных стран –...
40084. Принципы построения наземных и спутниковых систем телевизионного и звукового вещания 73.77 KB
  От недостатков земных радиорелейных линий свободны спутниковые системы связи ССС. В основе построения спутниковой системы связи лежит идея размещения ретранслятора на космическом аппарате КА. Принцип спутниковой связи заключается в ретрансляции аппаратурой спутника сигнала от передающих наземных станций к приёмникам. Благодаря этому обстоятельству в настоящее время почти все спутники связи предназначенные для коммерческого использования находятся на геостационарной орбите.
40085. ССС: геостационарные, низкие и средневысотные орбиты - принципы построения и их параметры 18.08 KB
  В системах спутниковой связи ССС основными показателями определяющим размеры зоны обслуживания качество и энергетику радиолиний являются тип орбиты и ее характеристики. Системы использующие КА на GEO MEO и LEOорбитах Показатель Геостац средне низкие Высота орбиты км 36 000 500015 000 5002000 Количество КА в ОГ 3 812 4866 Зона покрытия одного КА угол радиовидимости 50 от поверхности Земли 34 2528 37 Время пребывания КА в зоне радиовидимости в сутки 24 ч 152 ч 1015 мин Задержка при передаче речи мс Региональная связь...
40086. Параметры первичных сигналов 26.89 KB
  Основными первичными сигналами электросвязи являются: телефонный звукового вещания телевизионный телеграфный передачи данных. Основными параметрами телефонного сигнала являются: мощность телефонного сигнала PТЛФ. Согласно данным МСЭТ средняя мощность телефонного сигнала в точке с нулевым измерительным уровнем на интервале активности составляет 88 мкВт. С учетом коэффициента активности 025 средняя мощность телефонного сигнала PСР равна 22 мкВт.
40087. Теорема Шеннона для оценки производительности канала связи 17.5 KB
  Зато снизу к этому пределу можно подойти сколь угодно близко обеспечивая соответствующим кодированием информации сколь угодно малую вероятность ошибки при любой зашумленности канала. пропускная способность канала означающая теоретическую верхнюю границу скорости передачи данных которые можно передать с данной средней мощностью сигнала через аналоговый канал связи подверженный аддитивному белому гауссовскому шуму мощности равна: где пропускная способность канала бит с; полоса пропускания канала Гц; полная мощность сигнала над...
40088. Протокол, интерфейс, стек протоколов. Модель ISO/OSI 54.29 KB
  Интерфейс определяет набор услуг которые нижележащий уровень предоставляет вышележащему. Международная Организация по Стандартам Interntionl Stndrds Orgniztion ISO разработала модель которая четко определяет различные уровни взаимодействия систем дает им стандартные имена и указывает какую работу должен делать каждый уровень. Каждый уровень имеет дело с одним определенным аспектом взаимодействия. Каждый уровень поддерживает интерфейсы с выше и нижележащими уровнями.
40089. Обобщенная структурная схема систем электросвязи 27.45 KB
  Обобщенная структурная схема систем электросвязи показана на Рис. Обобщенная структурная схема систем электросвязи Сообщение при помощи преобразователя сообщениесигнал преобразуется в первичный электрический сигнал. Первичные сигналы не всегда удобно а иногда невозможно непосредственно передавать по линии связи.
40090. Организации стандартизации в области телекоммуникаций 15.26 KB
  Организации стандартизации в области телекоммуникаций Организации стандартизации в области телекоммуникаций это организации цель деятельности которых заключается в создании единых международных стандартов. Организации стандартизации обеспечивают условия для обсуждения прогрессивных технологий утверждают результаты этих обсуждений в виде официальных стандартов а также обеспечивают распространение утвержденных стандартов. Порядок работы организаций стандартизации по принятию стандартов может отличаться. Наиболее известными организациями...