- •Создание html-документов.
- •Заполнение фона.
- •Заголовок документа.
- •Присвоение имени документу.
- •Настрока заголовка.
- •Другие элементы заголовка.
- •Комментарии в html-документах.
- •Элемент address.
- •Использование цветов в документе.
- •Определение цветов.
- •Атрибуты для определения цветов в документе.
- •Создание шаблона документа.
- •Разбиение текста на абзацы.
- •Разрыв строк.
- •Структурирование текста.
- •Добавление заголовков.
- •Добавление горизонтальных линий.
- •Предварительное форматирование текста.
- •Советы по макетированию страниц.
- •Специализированный шаблон.
- •Форматирование символов.
- •Логическое форатирование.
- •Элементы физического форматирования.
- •Шрифты.
- •Атрибут size.
- •Атрибут color
- •Советы по форматированию текста.
- •Зачем нужна графика.
- •Основные принципы.
- •Что нужно знать при использовании графический изображений.
- •Авторские права.
- •Могут ли возникнуть проблемы из-за порнографических изображений?
- •Выбор формата графического файла.
- •Потеря информации.
- •Поддержка броузерами.
- •Добавление изображений в документ.
- •Выравнивание текста с изображением в строке.
- •Расположение текста на web-странице.
- •Указание браузеру размеров изображения.
- •Уменьшение размеров изображения.
- •Увеличение размеров изображения.
- •Создание альтернативного текста.
- •Рамка вокруг изображения.
- •Свободное пространство вокруг изображения.
- •Использование изображения в качестве ссылки.
Потеря информации.
Схемы сжатия с потерями могут привести к тому, что потеряются некоторые детали изображения — вот почему эти схемы могут намного уменьшить размер файла; при использовании схемы сжатия без потерь не теряется ни одна деталь. В таблице описываются схемы сжатия различных форматов графических файлов.
Формат |
Схема |
Описание |
GIF |
Без потерь |
GIF сжимается без потери деталей. Таким образом, если вас больше волнует сохранение деталей, чем скорость загрузки, то вы можете выбрать GIF |
PNG |
Без потерь |
PNG также сжимается без потери деталей. PNG является хорошей альтернативой GIF, за исключением того, что он поддерживается не всеми броузерами WWW |
JPEG |
С потерями |
jpeg приводит к потере деталей при сохранении изображения. Если размер файла волнует вас больше, чем сохранение деталей, то используйте jpeg> |
Поддержка броузерами.
Не стоит заставлять читателей устанавливать вспомогательное приложение для просмотра изображений в ваших документах HTML, поэтому используйте такие форматы файлов, которые поддерживаются популярными броузерами, например GIF и JPEG. Формат PNG еще не поддерживается большинством броузеров, поэтому лучше воздержаться от его использования.
Добавление изображений в документ.
Поместить изображение в документ HTML очень просто. Для этого достаточно использовать дескриптор <img> с атрибутом SRC, который указывает URL графического файла. Введите этот дескриптор в то место документа HTML, где вы хотите поместить изображение. Затем замените имя файла на URL рисунка.
<IMG SRC="имя файла">
По умолчанию, броузер отобразит это изображение в указанном месте, справа от текста или другого объекта, который непосредственно предшествует изображению Посмотрите на пример, приведенный ниже. Он показывает одно и то же изображение три раза. Каждый раз изображение отображается в строке, поэтому броузер располагает его справа от предшествующего текста.
Рекомендуется хранить все изображения в одном каталоге, вне корневой папки Web-узла. Тогда для доступа к этим рисункам вы сможете указывать относительный путь в сочетании с дескриптором <ваsе>, не указывая полный URL.
Выравнивание текста с изображением в строке.
По умолчанию при помещении изображения в строке текст выравнивается по нижней части изображения. Возможно, вы захотите изменить такое выравнивание. поскольку при этом остается слишком много пустого места на странице. Эту настройку можно изменить с помощью атрибута align в дескрипторе <IMG>. В таблице ниже перечислены значения, которые можно присвоить этому атрибуту.
Значение |
Описание |
top |
Выравнивает текст по верхнему краю изображения |
middle |
Выравнивает текст по средней части изображения |
bottom |
Выравнивает текст по нижнему краю изображения |
Ниже приведен код документа HTML, включающего три изображения, для каждого из которых используется одна из опций выравнивания, перечисленных в выше таблице.
Использование атрибутов ALIGN в дескрипторе <IMG> |