Сайтостроение

Создание сайта

Раскрутка сайта

Заработок на сайте

...еще о сайтостроении

HTML. Работа с графикой. Вставка изображений

Чтобы произвести вставку графических элементов в документ html требуется тэг <IMG>. Графическое изображение должно быть заранее подготовлено в каком-нибудь графическом редакторе, или получено при помощи цифрового носителя либо сканера, а можно просто использовать уже готовую картинку.

По возможности нужно использовать файлы с изображениями небольших размеров, чтобы максимально снизить время загрузки веб-страницы браузером. Пожалуй, не стоит загружать на одну страницу файлы с графическими изображениями суммарным размером более 100 кВ. Подобная веб-страница будет загружаться слишком долго у большинства пользователей и конечно далеко ни все дождутся ее окончания. Графическое изображение, представленное для загрузки, желательно, должно иметь расширение gif, jpg. Хотя можно использовать png и bmp. Некоторые пользователи, чтобы ускорить работу в Интернете отключают в своих браузерах функцию поддержки графики. Атрибут Alt дает возможность создать текст, который в таком случае должен быть отображен взамен графики.

Для того, чтобы вставить графический файл в текст html-страницы необходимо указать имя и место хранения этого файла. Когда файл располагается в той же папке, что и веб-страница, то достаточно внести имя файла с соответствующим расширением. Если файл с графическим изображением находится в иной папке, то вместе с именем файла с расширением требуется указывать путь к данному файлу.

Для того, чтобы выровнять графическое изображение по центру применяется тэг <CENTER>, а если нужно разместить картинку на новой строке, то используют тэг <BR>.

К примеру, набираем HTML-код:

<p><center><img src="horse2.jpg" alt="Здесь изображение коня"></center></p>

В результате:

Рамка придает графическому изображению определенную четкость и внятность. Для создания рамки применяют атрибут BORDER тэга <IMG>. Применяя этот атрибут можно выразить толщину линии рамки в пикселях. Указывая нулевое значение толщины линии рамки, мы добиваемся того, что она отображаться не будет.

К примеру, набираем HTML-код:

<p><img src="horse2.jpg" border="3" alt="Здесь изображение коня"></p>

Когда белый фон веб-страницы вас не удовлетворяет, то при содействии атрибута BACKGROUND тэга <BODY>, есть возможность обеспечить страницу любым графическим фоном. Потому, что браузер автоматически отображает копии графического изображения с тем, чтобы заполнить целую страницу. Следовательно, изображение, используемое для формирования фона можно создавать небольшим по размеру. Занимаясь формированием графического фона веб-страницы, применяйте такие изображения, которые могут вызвать интересные визуальные эффекты, и в тоже время не отвлекали от восприятия текстовой информации. Удачное изображение при его частом повторении смотрится уместным. Совсем не исключено, что после применения графического фона, вам понадобится поменять цвет шрифта, чтобы добиться хорошего сочетания.

Пример:

<body background="images/bg.gif">

Когда вы желаете, чтобы графический рисунок безукоризненно вписывался в дизайн Вэб-страницы, то в таком случае вам придет на помощь атрибут ALIGN тэга <IMG>. Данный атрибут позволяет допускать задание сразу двух значений - left right. Задание значения left заставляет браузер располагать изображение слева от текста, а right - помещает справа от него. Когда надо, чтобы форматированию подвергался лишь определенный фрагмент текста, нужно использовать тэг BR вместе с атрибутом CLEAR, определяющим позицию в тексте, стартуя с которой действие условия обтекания графики текстом завершается. Значения left, right, all вместе с атрибутом CLEAR делают возможным определить, с какой стороны – правой, левой либо обеих сторон - текст в дальнейшем будет освобожден от графики.

Следует подчеркнуть, что в случае, когда атрибут ALIGN уже был вами использован для выравнивания текста относительно графических изображений в пределах данной Вэб-страницы, внедрить параметр обтекания графических изображений текстом у вас не получится. Однако, атрибут ALIGN делает возможным между двумя графическими изображениями разместить текст. В этом варианте тэгам, описывающим изображения, требуется быть расположенным над текстом, заключенным между ними.