|
Гіпермаркет Знань>>Інформатика>>Інформатика 11 клас>> Інформатика: Структура веб-сайтів, різновиди веб-сайтів
Практична робота до предмету Інформатика 11 клас.
Тема «Практическая работа №8: Работа с графикой - 2».
Розгляд теми: Структура веб-сайтів, різновиди веб-сайтів
Часть 2
Выравнивание текста
Атрибут 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>
| Отображение в браузере:
Выравнивание по верхней кромке
Выравнивание по середине
Выравнивание по нижней кромке
|
Пустая область вокруг изображения
Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.
Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого.
Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.
Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.
Пример:
HTML-код:
<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.</p>
| Отображение в браузере:
Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.
|
Горизотнальная линейка
Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.
По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.
Атрибут NOSHADE устраняет эффект объемности линейки.
Пример:
HTML-код:
<hr>
<hr align="left" width="50" size="5" noshade>
|
Отображение в браузере:
________________________________________________________________________________
|
Списки с графическими маркерами
С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста.
Чтобы воспользоваться графическими маркерами, надо применить атрибут 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
|
Дополнительная информация по теме:
Создание и разработка сайта в примерах - on-line-teaching.com/site/
Основы векторной и растровой графики - grafika-online.com
Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»
Предмети > Інформатика > Інформатика 11 клас > Структура веб-сайтів, різновиди веб-сайтів > Структура веб-сайтів, різновиди веб-сайтів. Практикуми, лабораторні, кейси
|
