Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...

Комплексной системы оценки состояния охраны труда на производственном объекте (КСОТ-П): Цели и задачи Комплексной системы оценки состояния охраны труда и определению факторов рисков по охране труда...

Интересное:

Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...

Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...

Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспунденкция

Встраивание изображений в HTML-документы.

2017-10-11

548

0.00 из 5.00 0 оценок

Заказать работу

Содержание

⇐ ПредыдущаяСтр 4 из 6Следующая ⇒

Для встраивания изображений в HTML-документ используют тэг <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания задается значением параметра ALIGN тэга <IMG>. Возможные значения этого параметра приведены в таблице 1.

Таблица 1. Значения параметра ALIGN

Тэг/атрибут	Описание
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения по середине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

Все значения параметров выравнивания изображений условно делят на две группы по их принципу действия. К одной группе относят два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Например:

<HTML>

<HEAD>

<TITLE>Встраивание изображений</title></head>

<BODY>

Выравнивание изображений <IMG SRC = final.gif ALIGN=top > по верхнему краю

Выравнивание изображений по <IMG SRC = final.gif ALIGN=baseline > базовой линии

</BODY>

</HTML>

В этом примере изображения используются как элемент строки.

Приведем пример плавающего изображения:

<HTML>

<HEAD>

<TITLE>Встраивание изображений - как плавающих элементов строки</title></head>

<BODY>

<IMG SRC =final.gif ALIGN=right>

(Здесь идет текст абзаца)

<IMG SRC =final.gif ALIGN=left>

(Здесь идет текст абзаца)

</BODY>

</HTML>

Если в документе используются плавающие изображения, выровненные со значением RIGHT и LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки   с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так для приведенного выше примера в нужном месте текста можно разместить строку:

 

Текст, следующий далее, будет размещаться ниже изображения с новой строки.

Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображений при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры при загрузке изображений выполняют его перемасштабирование. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр буде вычисляться автоматически из условия сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT. Указание действительных размеров:

ü позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);

ü позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.

Например:

<HTML>

<HEAD>

<TITLE>Масштабирование изображений</title></head>

<BODY>

<IMG SRC =final.gif WIDTH=300>

<IMG SRC =final.gif WIDTH=500>

<IMG SRC =final.gif WIDTH=100>

</BODY>

</HTML>

⇐ Предыдущая 1 2 345 6 Следующая ⇒

Поделиться с друзьями:

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...

Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...