ЛАбы HTML / Лаб. работа №2 HTML
.docЛабораторная работа №2
Вставка изображений в HTML-страницы
Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.
|
Пример. Вставка изображения в документ
|
Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.
|
Код HTML |
Описание |
Пример |
|
<img src="HLPBELL.GIF" align=texttop> |
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. |
Lorem
ipsum dolor sit amet,
|
|
<img src=HLPBELL.GIF align=top> |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
Lorem
ipsum dolor sit amet,
|
|
<img src=HLPBELL.GIF align=middle> |
Выравнивание середины изображения по базовой линии текущей строки. |
Lorem
ipsum dolor sit amet,
|
|
<img src=HLPBELL.GIF align=absmiddle> |
Выравнивание середины изображения по средине текущей строки. |
Lorem
ipsum dolor sit amet,
|
|
<img src=HLPBELL.GIF align=baseline> |
Выравнивание изображения по базовой линии текущей строки. |
Lorem
ipsum dolor sit amet, consectetuer
|
|
<img src=HLPBELL.GIF align=bottom> |
Выравнивание нижней границы изображения по окружающему тексту.. |
Lorem
ipsum dolor sit amet, consectetuer
|
|
<img src=HLPBELL.GIF align=left> |
Выравнивает изображение по левому краю окна. |
L |
|
<img src=HLPBELL.GIF align=right> |
Выравнивает изображение по правому краю окна. |
L |
consectetuer
adipiscing elit...
consectetuer
adipiscing elit...
consectetuer
adipiscing elit...
consectetuer
adipiscing elit...
adipiscing
elit...
adipiscing
elit...
orem
ipsum dolor sit amet, consectetuer adipiscing elit...
orem
ipsum dolor sit amet, consectetuer adipiscing elit...
Наиболее популярные параметры – left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
|
Пример. Обтекание текста вокруг рисунка
|
|
|
L |
orem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.Задание 1. Выровняйте рисунки и текст так, как показано ниже.
Примечания: картинки для вставки изображений находятся в папке images.
Первый рисунок находится слева и текст выравнивается по правому краю.
Второй рисунок находится справа и текст выравнивается по левому краю.
Третий рисунок находится слева и текст выравнивается по центру.
Четвертый рисунок находится справа и текст выравнивается по правому краю.
Пятый рисунок находится слева и текст выравнивается по ширине.
Все эффекты достигаются без таблиц!!!
Достопримечательности столиц
Ф
онтан
Сибелес
– фонтан на одноимённой площади Мадрида,
первой площади, построенной на бульваре
Прадо.
Биг-Бен, голос Лондона, показывает точное время с 1859 года.
Ц
арь-пушка
в Москве
– одна из достопримечательностей
Московского Кремля. Крупнейшая по
калибру в мире, она стала памятником
литейного дела.
Э
йфелева
башня
– самый знаменитый архитектурный объект
Парижа, который стал символом этого
города и всей Франции.
А
мфитеатр
Флавиев (Колизей) - символ величия и
могущества Рима, а так же один из наиболее
знаменитых памятников древности во
всем мире.