Главная страница Карта сайта Написать письмо
JavaScript + DHTML HTML Word Excel VBA Графика Свой сайт Free soft вебмастера SEO-новости Статьи
HTML профессионально
Учебник HTML (хтмл)
...Старт
...Основные тэги
...Заголовки и комментарии
...Специальные символы
...Форматирование текста ч.1
...Форматирование текста ч.2
...Форматирование текста ч.3
...Создание списков
...Работа с графикой ч.1
...Работа с графикой ч.2
...Работа с графикой ч.3
...Работа с графикой ч.4
...Таблицы ч.1
...Таблицы ч.2
...Таблицы ч.3
...Гиперссылки
...Фреймы
...Что такое формы
...Что такое JavaScript
...Маленькие секреты Вэб-дизайна
...Эффект постепенной прорисовки
...Карта ссылок
...Внутренний лист стилей
...Работа с листами стилей
...Свойства шрифта - font
...Свойства текста
...Свойство фона - background
...Рамки и размеры
...Относительное и абсолютное позиционирование элементов
...Основные мета тэги
...Таблица дескрипторов HTML и их атрибутов
...Таблица свойств css
...Заключительное слово
HTML-редакторы
...Что такое HTML-редактор
...FrontPage 2003
...Adobe GoLive CS
...Macromedia Dreamweaver MX 2004
...HomeSite
...CuteSite Builder
...Namo WebEditor
...CoffeeCup HTML Editor
...1stPage 2000
...Arachnophilia
...HotDog Professional
...CSE HTML Validator Pro
 
 

Работа с графикой документа html (ч.1)

Вставка изображения

Добавление фона

Обтекание графики текстом

Вставка изображения в документ html

Для вставки графических элементов служит тэг <IMG>.

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

По-возможности следует использовать графические файлы небольших размеров, дабы уменьшить время загрузки страницы браузером. Вряд ли стоит использовать на одной странице графические изображения размером, превышающим в сумме 100 kB. Такая страница будет грузиться очень долго у большинства пользователей и далеко не каждый дождется конца загрузки.

Графика должна быть представлена в виде файлов с расширениями .jpg .gif.

Многие пользователи отключают в своих браузерах поддержку графики, дабы увеличить скорость работы в Интернете. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики.

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

Пример:

HTML-код:


<p><center><img src="img/tigr.jpg" alt="Это изображение тигра"></center></p>

Отображение в браузере:


Это изображение тигра
Добавление фона в документ html

Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Т.к. браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.

Формируя графический фон страницы, используйте такие изображения, которые способны вызвать интересные зрительные эффекты, а с другой стороны не мешали бы восприятию текстовой информации. Хорошее изображение при его многократном повторении выглядит "гладким", без "швов". Не исключено, что после использования графического фона, вам придется изменить цвет шрифта, чтобы достичь его удобочитабельности.

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

Пример:

HTML-код:


<BODY background="img/fon.jpg">

<p><img src="img/teacher.jpg" border="3"></p>

<BODY>

Отображение в браузере:


Обтекание графики текстом в документе html

Если хотите, чтобы графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>.

Этот атрибут допускает задание двух значений - left right.

Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.

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

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

Пример:

HTML-код:


<img src="img/majak.jpg" align="left">

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

<br><br>

<img src="img/sea.jpg" align="right">

Это небольшая яхта.

<br clear="right">

Я люблю море, но не умею плавать.

<br><br>

<img src="img/majak.jpg" align="left">

<img src="img/sea.jpg" align="right">

Море, море - мир безбрежный

Отображение в браузере:


Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

Это небольшая яхта.
Я люблю море, но не умею плавать.

Море, море - мир безбрежный

top

Рекомендую
Смотреть все книги»
 
 
 
БОНУС

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.

© 2008
Айнур Турушев All Rights Reserved

 

E-mail:
sozdaysait@narod.ru

Хостинг от uCoz