ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Рисунки на WEB-страницах
Для того чтобы Ваш html-документ был более привлекателен и информативен, желательно использовать рисунки, т.к. иногда один рисунок может стоить тысячи слов.
Рисунки хранятся в отдельных графических файлах. Во Всемирной паутине, как правило, используют два графических формата: gif (graphic interchange format) и jpg (joint photographic experts group). Оба эти формата используют растровую графику (получаются данные о каждой точке изображения и они отображаются на экране). Формат gif использует палитру из 256 цветов при 8 битов на пиксель, а формат jpg - 16,7 миллионов цветов при 24 битов на пиксель. Формат gif применяется для встроенных изображений, а формат jpg – для показа фотографий.
Графические файлы требуют времени для загрузки: чем больше по размеру файл, тем больше времени надо для его загрузки.
При загрузке html-документа сначала отображается текстовая часть, а изображение загружается на втором проходе. Пока пользователь знакомится с текстом, идёт загрузка изображений. И, тем не менее, многие пользователи работают в режиме отключения приема графических файлов, увеличивая скорость передачи данных, но жертвуя красотой и наглядностью представления этих данных.
При использовании рисунков надо также помнить, что у пользователей мониторы имеют разную разрешающую способность и разный размер. И поэтому сайт может по-разному выглядеть на разных мониторах.
После этих предварительных указаний вернёмся к вопросам практического представления изображений на Web-страницах.
Рисунки на Web-страницах могут использоваться тремя способами:
· Как фон, на котором располагаются элементы основного документа;
· Как изображение, встроенное в документ;
· Как ссылка на другой документ (например, в карте-изображение).
Изображение, используемое как фон, всегда занимает всё окно просмотра браузера. Желательно, чтобы файл, содержащий фон был небольшим и быстро загружался. Если размер изображения меньше окна просмотра браузера, то изображение будет размножено. Для указания фонового изображения надо в теге <BODY> записать ранее приведенный атрибут background и, возможно, атрибут bgcolor. Например, если на диске имеется графический файл Tiles.jpg, содержащий фоновое изображение, то тег <BODY> будет иметь вид: <BODY background="Tiles.gif">
Для встраивания изображения в документ используется одиночный тег < IMG > (сокращение от слова image). В том месте документа, где вы хотите вставить рисунок надо указать этот тег, так как он задаёт ссылку на графический файл. Тег может содержать ряд атрибутов:
| Атрибут | Функция атрибута |
| src | Указывает место файла на диске и его имя (обязательный атрибут) |
| align | Выравнивание рисунка |
| alt | Текст в месте расположения рисунка |
| border | Вокруг изображения будет рамка указанной толщины |
| height | Высота рисунка в пикселях |
| width | Длина рисунка в пикселях |
| hspace | Отступ от изображения по горизонтали |
| vspace | Отступ от изображения по вертикали |
Отметим, что хотя атрибуты height и width изменяют размер рисунка на экране, но время его загрузки не изменяется. Их надо использовать всегда для стабильности изображения сайта как после первого, так и после второго прохода. Ведь очень часто размеры рисунка намного больше, чем показываемый маленький «квадратик» после первого прохода, а текст, который уже загрузился, форматируется исходя из размеров этих «квадратиков». Когда рисунок загрузится после второго прохода, его размеры потеснят загруженный текст, который будет вынужден переформатироваться — стабильность изображения сайта разрушится.
Создадим html-документ содержащий рисунок паутины, который находится на диске С: в каталоге images и имеет имя web.gif
<HTML>
<HEAD>
<TITLE> html-документ содержащий рисунок паутины </TITLE>
</HEAD>
<BODY>
<P><IMG src="C:\images\web.gif" align="left" hspace=20 vspace=20 border=3 width=150 height=120> <P>Размер рисунка: атрибуты WIDTH и HEIGHT
<P>Рисунок можно отделять от текста отступами: атрибуты HSPACE и VSPACE
<P>Рамка вокруг рисунка: атрибут BORDER
</BODY>
</HTML>
Браузер отобразит данный html-документ на экране следующим образом:
Теперь вспомним, что не любой браузер отображает рисунки. Для неграфического браузера в теге <IMG> надо указать атрибут alt задающий текст, который появится вместо изображения, чтобы пользователь мог хотя бы узнать какое изображение он не может увидеть. Точно также, пользователь, работающий в режиме отключения загрузки изображения, увидит текст.
Третий тип изображений – карты-изображения будет рассмотрен в пункте, посвященном специально этому вопросу.
Файлы с расширениями gif и jpg желательно располагать в том же каталоге, что и html-файл. Если это не так, то браузер не сможет, без особого указания, найти запрашиваемое изображение и выдаст на экран пиктограмму ошибки. Такая пиктограмма может означать, что
· Имя и\или расширение файла изображения задано неверно;
· Неверно указан путь к файлу изображения.
Списки
Вспомним текстовый редактор Word. В нем можно создавать неупорядоченные и упорядоченные списки. Это можно сделать и в html-документах. Признаком начала такого списка является тег <UL> или <OL>, сокращения от английских слов Unordered Lists и Ordered List. Список заканчивается концевым тегом </UL> или </OL>. Каждая строка списка отмечается тегами <LI> текст </LI>.
Рассмотрим примеры построения списков. Создадим следующий html-документ:
<HTML>
<HEAD>
<TITLE> Неупорядоченный список </TITLE>
</HEAD>
<BODY>
Неупорядоченный список
<UL>
<LI>одноранговая сеть</LI>
<LI>сеть на основе сервера</LI>
</UL>
<P><B> Упорядоченный список </ B>
<OL>
<LI>понедельник</LI>
<LI>вторник</LI>
<LI>среда</LI>
<LI>четверг</LI>
<LI>пятница</LI>
</OL>
</BODY>
</HTML>
На экране пользователь увидит:
Не нашли, что искали? Воспользуйтесь поиском: