КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Элемент IMG
|
|
|
|
Определяет внедряемое изображение и параметры его отображения в окне браузера.
Конечный тег запрещен. К основным атрибутам относятся: src, alt, height, width. Как вы уже, наверное, догадались, атрибут src указывает адрес для загрузки изображения.
Данный элемент может выступать в роли гиперссылки, если его поместить между открывающим и закрывающим тегами ссылки.
Поскольку многие пользуются сетью Интернет, отключая графику в браузере для ускорения загрузки страниц, а также еще остались программы для навигации по ресурсам сети, отображающие только текст, то необходимо задавать альтернативное представление разрабатываемых страниц для таких клиентов. Естественно, для этого не нужно создавать новые страницы, достаточно указать в атрибуте ait, описание рисунка, чтобы клиент мог понять его назначение и содержание. Использование атрибута alt при внедрении изображения в Web-страницу продемонстрировано в листинге 6.21.
Листинг 6.21. Пример определения альтернативного представления изображения
<HTML>
<ТIТLЕ>Это наш логотип</ТIТLЕ>
<BODY>
<P><IMG src="../../../images'/logo.gif" width="163" height="152"
alt="JIоготип организации">Это наш логотип.</Р>
</BODY>
</HTML>
В соответствии с кодом листинга 6.21, браузер может отображать указанный текст, как показано на рис. 6.13.
Рис. 6.13. Отображение рисунка в браузере (слева), и его альтернативного представления (справа)
Параметры height и width задают соответственно высоту и ширину области, занимаемой рисунком (в пикселах). Их использование позволяет программе просмотра Web-страниц формировать вид документа еще до окончания полной загрузки всех изображений, резервируя для них соответствующие поля. Кроме того, работая в режиме с отключенной графикой, клиент не обнаружит визуальных нарушений в представлении страницы (за исключением, разумеется, отсутствия картинок).
|
|
|
Другие атрибуты тега <IMG> будут рассмотрены позже.
Следует отметить, что этот тег может встречаться практически в любом месте HTML-документа: в таблицах, посреди текстовых строк, в качестве элементов отображения ссылок и т. д. Ниже будет приведен пример, иллюстрирующий это.
Несколько замечаний к подготовке и размещению графики
Прежде всего, начиная готовить сайт, следует убедиться, что вам доступна программа, работающая с растровыми изображениями. Это могут быть, например, Adobe Photoshop или Corel PhotoPaint. При подготовке иллюстраций не следует пользоваться стандартными наборами картинок, широко доступными в Интернете и на различных компакт-дисках. Эти картинки очень часто повторяются на сайтах, и у пользователя может сложиться впечатление, что вы не очень разборчивы в предоставляемой информации. Кроме того, скорее всего, размещение таких картинок вызовет нарушение стиля и цветовой гаммы вашего ресурса. Намного лучше все это подготовить самостоятельно, либо вообще отказаться от излишней графики. Стоит отметить, что существуют целые порталы, практически не использующие графику, но в тоже время являющиеся очень стильными и привлекательными. При сохранении изображений, в которых встречаются переливы цветов, лучше пользоваться форматом JPEG, а контрастных, с четко очерченными границами цветов — GIF. Многие Web-мастера предупреждают, что в совокупности (т. е. исходный HTML-файл плюс вся графика) страница должна занимать не более 50 Кбайт. В противном случае, рядовой пользователь ее покинет, так и не дождавшись загрузки.
Перед размещением на странице каждый файл картинки должен пройти оптимизацию, благодаря чему его размер будет существенно уменьшен.
|
|
|
Если графическое изображение очень велико, то для ускорения загрузки используют разбиение рисунка на составные части, с последующим совмещением с помощью таблицы. Рассмотрим пример. Пусть у нас имеется картинка размером 300x300 пикселов. "Разрежем" ее на куски, а затем разместим их в таблице. Исходный код такого преобразования приведен в листинге 6.22.
Листинг 6.22. Пример простейшей таблицы, содержащей фрагменты одного рисунка
<HTML>
<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><img src="partl.gif "></TD>
<TD><img src="part2.gif"></TD>
<TR>
<TD><img src="part3.gif"></TD>
<TD><img src="part4.gif"x/TD>
</TABLE>
</HTML>
И вот как эта картинка будет "собрана" в браузере (рис. 6.14).
Рис. 6.14. Формирование единого изображения из фрагментов
Для создания анимированных GIF-роликов следует применять соответствующие инструментальные средства, как, например, Ulead GIF Animator. Особенно важно использование анимации при изготовлении баннеров, когда необходимо привлечь внимание потенциальных посетителей к ресурсу.
Специальные символы, используемые в языке HTML
Поскольку HTML-документ представляет собой обычный текстовый файл, в котором находятся как элементы разметки Web-страницы, так и собственно полезная информация, необходимо отделять одно от другого. Это значит, что для того, чтобы отобразить в окне браузера, например, саму HTML-разметку, нужно ее соответствующим образом представить, чтобы браузер мог отличить, где находятся HTML-теги, которые нужно интерпретировать и соответствующим образом графически представлять, а где — полезная информация. При попытке, например, загрузить страницу, описанную в листинге 6.23, возникнет ошибка.
Листинг 6.23. Пример неправильной разметки
<HTML>
<Р> Код первой Web-страницы одного из авторов...<BR>
<Н4> <HTML>
<Р> Hello World!
</HTML>
<Р> Она, конечно, очень проста.
</Н4>
</HTML>
Как только браузер прочтет следующие за тегом <Н4> символы, он будет вынужден обрабатывать ошибку, поскольку, не закончив форматирование документа, он встретит служебный тег, указывающий начало нового документа.
Корректный код, соответствующий предыдущему примеру, должен выглядеть следующим образом (листинг 6.24).
|
|
|
Листинг 6.24. Исправленный документ
<HTML>
<Р> Код первой Web-страницы одного из авторов...<BR>
<Н4> <HTML>
Slt;P> Hello World!
</HTML>
<P> Она, конечно, очень проста.
</Н4>
</HTML>
В этом листинге символ < заменен на комбинацию ⁢, а символ > — на sgt,-. Таким образом, браузер получает информацию о том, что комбинацию, например, вида ⁢HTML> следует отображать как <нтмь>, но не ин-тепретировать это как тег. Во избежание путаницы в теле документа вообще запрещено использовать ряд следующих символов:
- < заменяется на sit;
- > заменяется на >
- & заменяется на samp;
- " заменяется на squot.
Кроме указанных здесь символов иногда нужно в тело HTML-документа вставлять символы (из кодировки ASCII), которых может просто не оказаться на клавиатуре и, которые могут быть неверно интерпретированы браузером, например знак ±. Для этого нужно просто применять конструкцию ±, где последние три цифры соответствуют десятичному номеру данного символа в кодировке ASCII.
Использование таблиц стилей
В настоящее время таблицы стилей играют очень важную роль в разметке Web-страниц. Если ранее даже не все браузеры поддерживали эту технологию, то последние стандарты языка HTML все большее число атрибутов рекомендуют устанавливать через таблицы стилей. Более того, с выходом каждой новой спецификации, многие атрибуты тегов объявляются устаревшими или нежелательными с расчетом на установку требуемых свойств с помощью таблиц стилей. Поэтому этой теме следует уделить максимум внимания, несмотря на то, что некоторые свойства отображения шрифтов, например, можно установить, обходясь без использования таблиц стилей.
Что же такое таблицы стилей и для чего они нужны?
Представьте ситуацию, когда на вашем сайте должно быть размещено свыше сотни Web-страниц. Разумеется, исходя из требования стилистической целостности, они должны быть выполнены на основании одних и тех же дизайнерских решений. Это значит, что если, скажем, применяется выравнивание основного текста по высоте на одной странице, то точно так же должно быть и на остальных. Если заголовки должны выполняться красным курсивом, то на всех документах. А представьте ситуацию, когда нужно использовать, например, пять или шесть различных стилей? Работа по написанию страниц плавно перейдет в кропотливый и однообразный труд по установке нужных атрибутов.
|
|
|
Строго говоря, мы не вводили описание элементов или атрибутов, посредством которых можно сделать вышеуказанные вещи. Те, кто знаком с языком HTML версии 3.2, наверняка обратили на это внимание. Сделано это потому, что, во-первых, для упрощения процесса создания Web-страниц стоит с самого начала активно использовать таблицы стилей, а во-вторых, все основные атрибуты элемента FONT, который определяет параметры шрифта, в спецификации HTML 4.0 объявлены нежелательными, из чего следует вывод, что консорциум W3C собирается его признать устаревшим элементом.
При использовании таблиц стилей (Cascading Style Sheets — CSS) Web-мастер может единожды определить представление элементов форматирования как для всего сайта, так и для отдельного документа. Ему доступна установка цвета, размера, начертания шрифтов, фона, абсолютное позиционирование текстовых и графических информационных блоков и т. д. Кроме того, непосредственно в документе можно переопределить свойства отдельных элементов.
Итак, в языке HTML существует три основные возможности для определения стиля:
1. В виде отдельного стилевого файла. Все Web-страницы, ссылающиеся на данный стилевой файл, будут наследовать указанные в нем параметры представления документа.
2. Внутри отдельного документа. В этом случае в тело HTML-документа вводят отдельный специальный блок, в котором заключена вся стилевая информация.
3. При указании некоторого элемента форматирования внутри тега (рядом с атрибутами) указываются параметры стиля.
Поскольку реализация всех этих возможностей определения стилей практически одинакова, то мы будем рассматривать определение стилей на примере отдельной страницы, с выносом дополнительного стилевого блока (второй вариант).
Элементы, к которым будет применено указанное стилевое оформление, могут задаваться несколькими возможными вариантами.
1) Перечислением элементов языка HTML, к которым необходимо применить указанное оформление. Пример, приведенный в листинге 6.25, установит цвет заголовков и полужирного шрифта красным:
Листинг 6.25. Изменение цвета заголовков и полужирного шрифта
<STYLE type="text/css">
HI, H2, НЗ, Н4, Н5, Н6, В (color: red;)
</STYLE>
В этом примере, как видим, внутри тегов <STYLE> заключено перечисление элементов, к которым будут применены параметры форматирования, указанные в фигурных скобках. Это общее правило записи определения стилей: сначала записываются названия признаков, определяющих объекты, к которым и будет применяться форматирование (в данном случае — это названия элементов), а затем в скобках записываются попарно свойство и устанавливаеме значение, между которыми вставляется двоеточие. Последовательное определение нескольких свойств разделяется точкой с запятой.
Если мы хотим, чтобы элементы форматирования были применены к данным, заключенным в теги, в определенной последовательности, то запятые, разделяющие их названия, в указании стиля нужно опустить. В этом случае, как только в тексте HTML-документа встретится указанная комбинация, к данным, содержащимся внутри них, будет автоматически применено указанное форматирование.
2) В рамках документа можно образовывать классы, как наборы некоторых элементов. До сих пор мы не отмечали существования этого атрибута, и поэтому заметим, что он определен практически для всех элементов языка HTML. Таким образом, группируя элементы по классам, очень удобно указывать их форматирование.
Например, пусть в документе есть две таблицы с двумя типами ячеек. В первом типе содержится старая цена на товар, а во втором — новая. Разумеется, для привлечения внимания к сниженным ценам для них нужно использовать иное, более броское форматирование, нежели к прежним. Покажем, как это реализуется (листинг 6.26).
Листинг 6.26. Пример использования классов элементов: для определения форматирования
<HTML>
<HEAD>
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
<ТIТLЕ>Наши новые цены!</TITLE>
<STYLE type="text/css">
.name (color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
</STYLE>
</HEAD>
<BODY>
<TABLE border="0" width="100%">
<TR>
<TD width="25%" class="name"x/TD>
<TD width="25%" с1аss="name">Клей</ТD>
<TD width="25%" с1аss="name">Кирпич</ТD>
<TD width="25%" с1аss="name">Обои</ТD> </TR> <TR>
<TD width="25%" с1аss="name">Новая цена</ТD>
<TD width="25%" class="new">18 p.</TD>
<TD width="25%" class="new">50 p.</TD>
<TD width="25%" class="new">30 p.</TD> </TR> <TR>
<TD width="25%" с!аss="пате">Старая цена</ТD>
<TD width="25%" class="old">22 p.</TD>
<TD width="25%" class="old">64 p.</TD>
<TD width="25%" class="old">35 p.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Приведенный листинг имеет представление в браузере, как на рис. 6.15.
Рис. 6.15. Вид таблицы, отформатированной с использованием классов
Также можно указывать стиль для определенных элементов класса. В данном примере все экземпляры класса принадлежат к одному виду то. Если объявить другой элемент, например "Абзац" (р) принадлежащим к классу new, то текст, следующий после указания тега, будет выглядеть подчеркнутым и иметь размер в 20 точек. В случае, когда форматирование нужно отнести только к данному конкретному элементу, используется другая запись в стилевых характеристиках. Модифицируем пример (листинг 6.27) таким образом, чтобы текст, заключенный в теги-экземпляры класса new, имел фон серого цвета только в ячейках таблицы.
Листинг 6.27. Пример дополнительного указания элементов класса при определении стилей
<STYLE type="text/css">
.name {color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
TD.new {background-color: gray}
</STYLE>
Если Web-страница содержит несколько различных элементов, отнесенных к классу new, то только ячейки таблиц, принадлежащих данному классу, будут иметь зеленый фоновый цвет.
3) При описании стилей можно непосредственно задавать элементы, к которым будет применено данное оформление. Достигается это путем использования уникальных идентификаторов. Каждый элемент форматирования может иметь атрибут id, который отличается от класса тем, что его значение должно быть уникально для данного HTML-документа, т. е. не должно в нем повторяться. Использование уникальных идентификаторов удобно тем, что для определенного элемента из класса можно задать дополнительные свойства, как, например, показано в примере, приведенном в листинге 6.2Ь.
Листинг 6.28. Пример использования идентификаторов для работы со стилями
<STYLE type="text/css">
.name {color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
#newprice {text-decoration: underline)
</STYLE>
...
<TD width="33%" class="name" id="newprice">Hoвая цена</ТD>
...
Если мы изменим соответствующие строчки кода примера, приведенного в листинге 6.26, то текст "Новая цена" в таблице станет подчеркнутым. Вместо указания идентификатора и предварительного описания стиля данного элемента, параметры форматирования можно задавать непосредственно в атрибуте тега:
<TD width="33%" class="name" style="text-decoration: underlined Новая цена</ТD>
Эффект получится тот же самый.
Существует возможность для задания стилевых свойств различным состояниям элементов. Ссылка (А) имеет четыре возможных "состояния": обычная, уже просмотренная, активная (загружаемая в данный момент времени) и находящаяся под указателем мыши. В соответствии с этим, для ссылок имеется возможность использования четырех возможных отображений (листинг 6.29), определяемых путем использования зарезервированных слов link, visited, active, hover соответственно.
Листинг 6.29. Пример указания различных стилей для ссылок данного документа
<STYLE>
A: link {color: black}
A: visited {color: gray}
A: active {color: red}
A: hover {color: Yellow; font-size: 25pt;}
</STYLE>
Создавая страницу, использующую эти четыре вида отображения ссылок, можно добиться интересных эффектов.
Познакомившись со способами задания стилевых характеристик, перейдем непосредственно к рассмотрению их видов.
Стилевые параметры элементов Web-страниц
Все элементы стиля, влияющие на отображение Web-страниц в окне браузера, можно разделить на четыре основные группы: свойства шрифтов, свойства текста, свойства цвета и фона, свойства стилевых блоков. Последний элемент обеспечивает выделение некоторого участка Web-страницы в виде своеобразной надписи, позволяя ее абсолютно позиционировать, определять рамки вокруг нее, и т. д.
Свойства шрифта
Свойства отображения символов в Web-странице, определяемые посредством использования каскадных таблиц стилей, собраны в табл. 6.2.
Таблица 6.2. Свойства, определяющие отображения шрифтов
| Название свойства | Возможные значения | Описание значений |
| font-family | arial times monospace | Устанавливает шрифт для элементов, находящихся в области действия форматирования |
| font-size | 1.3 cm 12 px 80% | Размер символов в сантиметрах Размер символов в пикселах Размер символов в процентах от текущего |
| xx-small | Установка шрифта в самый малый | |
| x-small | Установка шрифта в чуть крупнее | |
| small | Установка шрифта в малый | |
| medium | Установка шрифта в средний | |
| large | Установка шрифта в большой | |
| x-large | Установка шрифта в чуть больший | |
| xx-large | Установка шрифта в самый большой | |
| smaller | Установка шрифта на один пункт меньше | |
| larger | Установка шрифта на один пункт больше | |
| font-style | italic | Курсивное начертание |
| normal | Обычное начертание | |
| oblique | Наклонное начертание | |
| font -weight | bold | Жирный шрифт |
| normal | Обычный шрифт | |
| любое значение от 100 до 900 | Степень жирности соответствует указанной цифре | |
| font-variant | small-caps | Замена прописных символов заглавными |
| normal | Оставление символов без изменения | |
| font | Любые значения font-family, | Позволяет устанавливать одно значение из вышеуказанных свойств |
| font-size, | ||
| font-style, | ||
| font-weight, | ||
| font-variant |
Рассмотрим пример использования этих свойств (листинг 6.30).
Листинг 6.30. Изменение свойств отображения шрифтов
<BODY>
<Р style="FONT-WEIGHT: 900; FONT-SIZE: xx-large; FONT-STYLE: italic;
FONT-FAMILY: monospace; FONT-VARIANT: normal">Текст1</Р>
<P style="FONT: зта11-сарз">Текст2</Р>
</BODY>
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 567; Нарушение авторских прав?; Мы поможем в написании вашей работы!