Размещение текста относительно графического изображения



 

3.1. Чтобы текст располагался весь рядом с картинкой, а не только одна его строчка, необходимо задать соответствующий параметр выравнивания, например:

 

атрибут ALIGN =? в теле тега < img > - задает размещение картинки по отношению к тексту, где знак вопроса заменяется одним из значений: left (слева от текста), right (справа), bottom (внизу от картинки), top (вверху), middle (посередине)


Пример:

<img src="pr1.png" align=bottom>

ЗАДАНИЕ 3:

Разместите текст странички справа от картинки.

 


Дополнительные атрибуты размещения текста и изображения.

1) Размеры изображения:

Атрибуты Width =? и Height =? в теле дескриптора < img > -  задает ширину или (и) высоту самой картинки (в пикселях и в % - по отношению к размеру окна браузера).

 

2) Расстояние от рисунка до текста:

Атрибуты Vspace =? и Hspace =?в теле дескриптора < img> - задает расстояние (по вертикали или (и) по горизонтали) между текстом и рисунком в пикселах

 

ЗАДАНИЕ 4:

1. Измените размеры вашей картинки в сторону уменьшения.

2. Измените расстояние от текста до изображения, задав значения атрибутов HSPACE=30 и VSPACE=5

3. Добавьте вторую картинку или фотограцию в ваш документ с шириной, равной 130 пикселам, размещенной справа от текста странички.


Добавление графического фона.

Атрибут BACKGROUND =”?” в теле тега < BODY >, вместо знака ? задайте путь к фону и его название.


Например:

<body text=#336699 bgcolor=#000000 background="ваш_фон.gif">

 

ЗАДАНИЕ 5:

1. Создайте папку HTML\Фоны на вашем сетевом диске.

2. Скопируйте один из понравившихся вам фонов в эту папку.

3. Добавьте параметры фона в HTML – документ и просмотрите результат.


Построение разделительной горизонтальной линии.

Линия задается тэгом < Hr > и не требует закрывающего тэга

(ширина по умолчанию = 2 пикселам).


ЗАДАНИЕ 6:

Покажите размещения различных по параметрам линий на вашей страничке (см. примеры ниже)

Примеры использования:

(1) <Hr align = right > (center или left) – линия размещается по правому краю (центру, слева).

(2) <Hr width =30%> - ширина линии в процентах/пикселях по отношению к размеру окна браузера

(3) <Hr size =6> - толщина линии в пикселах

(4) <Hr NoShade> - отмена объемности

(5) <Hr color =# cc 0000> - цвет линии, только в IE

 

Параметры могут употребляться одновременно.


ЗАДАНИЕ 7:

1. Занесите еще одну картинку в ваш файл, шириной, равной 130.

2. Расположите вторую картинку по другую сторону текста по отношению к первой картинке.


П араметр тэга Br - Clear.

Для отмены обтакания картинки фрагментом текста введите перед данным фрагментом тег:

 

< BR CLEAR =?>, вместо знака вопрос укажите один из параметров Left , Right или All (прекращение обтекания текстом картинки либо слева, либо справа, либо везде)

ЗАДАНИЕ 8:

1. Отмените обтекание у первой картинки.

2. Результат просмотрите и проанализируйте в браузере


Дата добавления: 2022-06-11; просмотров: 97; Мы поможем в написании вашей работы!

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






Мы поможем в написании ваших работ!