Работа с графикой html-страницы (ч.2)
Пустая область вокруг изображения
Списки с графическими маркерами
Выравнивание текста html-страницы
Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.
Пример:
|
HTML-код: <p> <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p>
<p> <img src="img/majak.jpg" align="middle">Выравнивание по середине</p>
<p> <img src="img/majak.jpg" align="bottom">Выравнивание по нижней кромке</p>
|
Отображение в браузере:
|
Выравнивание по верхней кромкеПустая область вокруг изображения html-страницы
Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.
Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого.
Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.
Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.
Пример:
|
HTML-код: <p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.</p>
|
Отображение в браузере:
|
Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.Горизотнальная линейка html-страницы
Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.
По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.
Атрибут NOSHADE устраняет эффект объемности линейки.
Пример:
|
HTML-код: <hr>
<hr align="left" width="50" size="5" noshade>
|
Отображение в браузере: |
Списки с графическими маркерами html-страницы
С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста.
Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера.
Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.
Пример:
|
HTML-код: <ul>
<br><img src="img/list.gif" align="middle" hspace="5">Глава 1
<br><img src="img/list.gif" align="top">Глава 2
<br><img src="img/list.gif" align="middle" hspace="15">Глава 3
</ul>
|
Отображение в браузере:  Глава 1
Глава 2
Глава 3
|
