 |
Графические изображения
|
|
|
|
Что бы поместить иллюстрации в тексте страницы используют специальный тег:
<IMG SRC="uri" WIDTH="w" HEIGHT="h" ALT="Text" ALIGN="Type">
Здесь uri – адрес графического файла с изображением. Параметры WIDTH и HEIGHT задают размеры области вывода графического изображения. Параметр ALT хранит текст, который выводится как подсказка для курсора мыши при наведении его на изображение. Кроме того этот текст выводится, если в браузере отключен показ изображений. Параметр ALIGN позволяет управлять размещением изображения относительно текста. Выравнивание Type может принимать значения:
· Middle (текст выравнивается по центру изображения);
· Bottom (нижняя граница изображения выравнивается по окружающему ее тексту, используется по умолчанию);
· Top (верх изображения выравнивается по верхней строке окружающего его текста);
· Left (Текст обтекает изображение справа);
· Right (текст обтекает изображение слева).
Изображение можно взять в рамку, если в тег IMG добавить параметр BORDER="n". Здесь n – ширина рамки в пикселах.
Для оформления обычно используют графические изображения формата GIF и JPEG.
Изображения первого типа занимают мало места в памяти, так как их цветовая палитра равно 256 цветов. Кроме того они поддерживают анимацию и прозрачные цвета.
Изображения второго типа позволяют хранить и передавать в сжатом виде иллюстрации, которые характеризуются насыщенной цветовой палитрой и большим разрешением.
Графические изображения могут использоваться в качестве ссылок, тогда их помещают в качестве содержания в тег:
<A HREF…><IMG SRC="uri"></IMG>.
Изображения можно использовать как фон страницы, такие изображения называются обоями и тиражируются по полю страницы при ее просмотре в браузере. Размещают обои с помощью параметра BACKGROUND="uri" тега BODY. Здесь uri адрес файла изображения.
|
|
|
Фоновые изображения можно задавать для ячеек таблицы с помощью этого же параметра, помещая его в тег создания ячейки таблицы TD.
Цветовая палитра браузера
При разработке гипертекстовых документов используется R(ed)G(reen)B(lue) цветовая модель. В такой модели цвет образуется из красной, синей и зеленой составляющих. Каждая составляющая задает определенную интенсивность базового цвета. Итоговый цвет это смешение интенсивностей. Задается цвет в шестнадцатеричном формате в виде трех байтов. Код каждого байта изменяется в пределах от 00 до FF. Цветовая константа должна начинаться с префикса #.
В настоящее время существуют определенные соглашения по цветам гипертекста. Каждому цвету поставлена в соответствие определенная символьная константа. В таблице 2.3 приводятся основные цвета палитры гипертекста.
Таблица 2.3
Стандартные цвета
| Системная константа, цвет | RGB значение | Системная константа | RGB значение |
| black (черный) | #000000 | green (зеленый) | #008000 |
| navy (морская волна) | #000080 | teal (темная морская волна) | #008080 |
| silver (серый) | #c0c0c0 | lime (яркозе-леный) | #00ff00 |
| blue (голубой) | #0000ff | aqua (прозрачная морская волна) | #00ffff |
| maroon (фиолетовый) | #800000 | olive (оливковый) | #808000 |
| purple (пупрпурный) | #800080 | gray (темно серый) | #808080 |
| red (красный) | #ff0000 | yellow (желтый) | #ffff00 |
| fuchsia (рыжий) | #ff00ff | white (белый) | #ffffff |
Цвет может быть использован в параметре COLOR тегов HR, FONT. В параметрах тега BODY: TEXT, BGCOLOR, LINK, VLINK (см. описание тега BODY).
Цвет можно использовать при работе с таблицами, так в тег TD формирования ячейки таблицы, можно включить параметр:
<TD BGCOLOR="цвет"></TD>, параметр можно также поместить в тег TABLE и задать цвет для всей таблицы. Кроме того в тег TABLE можно поместить параметр BORDERCOLOR и задать цвет линиям разграфки таблицы.
|
|
|
Контрольные вопросы
1. Какие современные языки разметки используются для создания информационных ресурсов?
2. Как адресуется сетевой ресурс с помощью URI адреса?
3. Перечислите структурные теги и их особенности.
4. Как строится разметка, если нужно создать текст с красной строкой и заданным переносом слов?
5. Как выполняется выравнивание текста на странице?
6. Для чего нужны ссылки на символы при создании разметки?
7. Дайте классификацию списков.
8. Перечислите теги, необходимые для создания таблицы.
9. Как выполняется форматирование таблиц?
10. Как управлять шрифтами на странице?
11. Дайте классификацию гипертекстовых переходов.
12. Как формируются страницы с фреймами.
13. Как выполняется размещение графических изображения на страницах?
14. Перечислите основные особенности использования цветов при оформлении страницы.
Технология XML
Технология XML представляет собой протокол хранения и передачи информации. С другой стороны это семейство технологий позволяющее формировать различные документы и выполнять обработку информации.
При использовании XML разработчик создает документ с разметкой. Документ хранится в текстовом файле с расширением xml. Как и для создания HTML страниц разработку документов можно вести в любом текстовом редакторе поддерживающем кодировку ANSI.
Документ состоит из следующих основных частей: пролога и основной части.
В прологе документа располагаются директивы, необходимые интерпретатору XML для обработки документа. Директива начинается и заканчивается специальным символом?. В прологе обязательно должна быть директива:
<?xml version="1.0" encoding="type"?>
В ней указывается версия XML и тип кодировки документа type. Для использования кириллицы применяются кодировки:
windows -1251 или ISO-8859-5.
Первая кодировки используется в текстовых редакторах операционной системы Windows и ее использование предпочтительнее.
Основная часть документа следует за прологом. Эта часть документа содержит собственно разметку. Разметка XML - выделение структурных составляющих документа тегами. Разработчик документа сам выбирает названия тегов по смыслу документа. Для названия тегов используются латинские символы.
|
|
|
Разметка должна отвечать определенным правилам. Ниже рассмотрены эти правила.
Теги в документе могут быть двух типов:
Парные:
<name>информация</name>
Одиночные:
<name/>
Здесь name - наименование тега.
Документ должен отвечать следующим требованиям:
· содержать корневой тег;
· внутри корневого тега должны располагаться дочерние;
· в дочерний тег может вкладываться другой,
· число вложений не ограничено;
· теги должны быть замкнуты, если они парные;
· регистр символов в парных тегах должен совпадать;
· пересечение тегов не допускается.
Соблюдение перечисленных правил необходимо что бы получить «корректно форматированный документ».
Пример корректного XML документа:
<?xml version="1.0" encoding="windows-1251"?>
<TEST>
<NODE>
<ENG>Hello World!</ENG>
<RU>Привет МИР!</RU>
</NODE>
</TEST>
На рисунке 2.5 показана его структура.
Рис.2.5. Структура документа
Документ XML представляет собой иерархическую структуру.
В начале иерархии располагается корневой элемент (не путать с корневым тегом!). Это начало документа, его пролог. Затем располагается корневой тег, который содержит остальные теги разметки это тег TEST. Он содержит тег NODE, который содержит два тега ENG и RU. Содержание двух последних тегов сообщения на английском и русском языках.
Если сохранить рассмотренную разметку документа в текстовый файл hello.xml и загрузить в браузер то она отобразиться и иерархическом виде, так как это показано на рисунке 2.6. Рядом с тегами выводится пиктограмма + или -. Знак - означает что тег раскрыт и видно его содержания, его можно закрыть сделав на пиктограмме щелчок мышью.
Рис.2.6. Документ в браузере MS Internet Explorer
Следует иметь в виду, что браузер отображает только корректные XML документы, если документ содержит ошибку в разметке, то выводится сообщение об ошибке и загрузка прекращается. Например, в закрывающем теге </ENG> изменим регистр первого символа </eNG> и повторим загрузку. Вид окна браузера показан на рисунке 2.7.
Рис.2.7. Окно браузера при ошибке в разметке
|
|
|
