Самоучитель по креативному веб-дизайну. Книга 1, стр.46

комбинации значений красной, зеленой и синей составляющих (триплеты). Полный перечень цветов, корректно отображаемых браузерами, в котором при —

водятся как названия цветов, так и соответствующие значения Шестнадцате —

рИЧНЫХ ТрИПЛетОВ, МОЖНО наЙТИ ПО адресу http://www. htmlhelp. com/cgi-bin/

color. cgi.

Хотя большинство посетителей оставляют цвет текста по умолчанию в браузе —

ре черным, некоторые могут выбрать и другой цвет по умолчанию. Поэтому же- лательно указывать цвет, который должен использоваться браузером при отобра — жении текста вашей Web-страницы, даже если желаемый цвет — черный. Не стоит

предполагать, что у всех посетителей вашего сайта в браузерах в качестве цвета по умолчанию установлен именно черный. В главе 4 данной книги вы узнаете, как ус- тановить цвет всего текста на странице с помощью нескольких CSS-правил.



Добавление графики в Web-страницу с помощью базового дескриптора

Путешествуя по Web-сайтам, нельзя не встретить-страницы, содержащие мно- жество фотографий и рисунков. Графические изображения оказывают существен — ную помощь при объяснении сложных процедур или действий, которые трудно описать с помощью одного лишь текста. Помимо этого, большинство посетите — лей вашего Web-сайта почувствуют себя несколько неуютно, не обнаружив там ничего, кроме текста. Рисунки, там и сям, вставленные в длинное тело докумен- та, дают посетителю передышку в чтении текста и, при правильном использова- нии, облегчают восприятие текста. Предположим, например, вы хотите создать страницу с описанием действий, которые необходимо предпринять для замены картриджа в струйном принтере Epson 1520. Несколько продуманных иллюстра- ций объяснят процедуру лучше, чем добрый десяток абзацев текста.

Кроме того, посетители сайта могут изменить шрифт, используемый их брау —

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

Arial, и у посетителей, в браузерах которых шрифтом по умолчанию выбрана

Helvetica. Хотя это и досадно, вы уже знаете, как предотвратить такую замену шрифта путем задания шрифта, который будет использоваться браузером, не ос —

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.47



), которые охватывают содержимое Web-страницы, выводимое на экран браузером. Приведенный ниже простой HTML-код, будучи обработанным брау —

зером, выведет на экран графическое изображение house. jpg:







Фотография flOMa





centerXimg src=»house. jpg» width=»400″ height=»175″X/center>

Самоучитель по креативному веб-дизайну. Книга 1, стр.48



• border. Атрибут border (рамка) дает ширину (в пикселях) рамки, которую Web-браузер должен нарисовать вокруг изображения. Если вы используете рисунок в качестве привязки гиперссылки, браузер нарисует вокруг него

рамку. Поэтому рамка вокруг рисунка может навести посетителя на мысль, что рисунок является гиперссылкой. Следовательно, значение атрибута border рекомендуется устанавливать равным нулю (0).

img src=»images/photo. jpg» width=»200″ height=»55″ border=»0″>

Работа с графикой, а также анимацией и видеоклипами на Web-страницах подробно рассмотрена в главах 6 и 7.



ПРИМЕЧАНИЕ Изображения — это непременный компонент Web-страниц. Однако Web — страницы с большим количеством графики дольше загружаются и отображаются, чем Web- страницы, содержащие только текст. Будьте осторожны, дабы не перегрузить свои Web-стра- ницы графикой. Картинка может стоить тысячи слов, но, если ваша страница слишком долго загружается, никто не будет ждать, чтобы увидеть, что вы хотели показать.



Изменение выравнивания текста и графики

Поскольку на большинстве Web-страниц присутствует как текст, так и графи — ческие изображения, выравнивание графики и текста в окне браузера представля —

ет собой существенный элемент дизайна Web-страниц. По умолчанию Web-брау — зер размещает объекты HTML-документа в том же порядке, в котором он их находит. Более того, браузер помещает объекты на экран один за другим слева направо и снизу вверх.

Предположим, например, вы хотите, чтобы браузер отображал рисунок над строкой текста, которая описывает рисунок. Если вы просто поместите в HTML — документ дескриптор , а затем наберете строку текста, браузер отобразит

Самоучитель по креативному веб-дизайну. Книга 1, стр.49

5 8 Глава 1. Основы языка HTML





текст рядом с документом (то есть справа от него), а не под рисунком. Помните,

Web-браузер отображает элементы HTML-документа на экране один за другим слева направо. Браузер ставит элемент на новой строке слева, только достигнув правого поля текущей строки на странице.

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



Дескриптор , помещенный в HTML-документ перед текстом, дает Web — браузеру указание отобразить рисунок перед тем, как отображать текст. Помеще- ние дескриптора между рисунком и текстом заставляет Web-браузер вставить

символ перевода строки (то есть перейти на следующую строку на странице) и вставить пустую строку после вывода рисунка и перед выводом текста, который идет после рисунка в HTML-коде Web-страницы. На рис. 1.16 показано, как Web-браузер отобразит рисунок по отношению к тексту в данном примере.

Обратите внимание, что правильно вставленный дескриптор выравнивает рисунок и текст по вертикали. Однако вы можете также захотеть, чтобы браузер расположил рисунок и текст по центру между левым и правым полями Web-стра- ницы. Для работы с горизонтальным выравниванием объектов на Web-странице язык HTML предусматривает начальный и конечный дескрипторы выравнивания

Самоучитель по креативному веб-дизайну. Книга 1, стр.50

по центру () . Нужно понимать, что, хотя дескрипторы вырав — нивания по центру все еще используются, эти дескрипторы являются нерекомен — дованными, а значит, существует возможность того, что в будущем браузеры пе- рестанут их поддерживать. Предпочтительнее выравнивать текста и графику с помощью CSS-правил, о чем речь идет в главе 4.





Глава 1. Основы языка HTML 59



ПРАКТИКУМ

По умолчанию Web-браузер выравнивает первый объект на каждой строке, сдвигая его к левому краю Web-страницы. Для того чтобы изменить выравнивание по умолчанию и, таким образом, изменить горизонтальное положение объекта на строке или группе строк, применяется дескриптор . Начальный и конеч — ный дескрипторы выравнивания по центру () дают Web-брау — зеру указание отцентрировать изображение и текст, заключенные между дескрип —

торами, между левым й правым полями Web-страницы, как показано на рис. 1.17:





Добавление гипертекстовых ссылок

Web-страницам свойственно определенное преимущество перед бумажными документами: Web-страницы, в отличие от документов, могут содержать гипер — текстовые ссылки на другие страницы, расположенные либо на том же Web-сай —

те, либо на других сайтах. Вместо того чтобы переворачивать страницы, как при чтении книги, посетители сайта щелкают на гипертекстовых ссылках, чтобы пе —

рейти со страницы на страницу (или с сайта на сайт). Гипертекстовая ссылка

{hypertext link) — это одно слово или группа слов, щелкнув на которых, посети —

тель дает Web-браузеру указание «принести» Web-страницу (или иной файл) из конкретного Web-сервера.

60 Глава 1. Основы языка HTML





Посетитель сайта обычно видит гипертекстовую ссылку как подчеркнутый текст. Как правило, Web-браузер использует один цвет (например, синий) для отображения гиперссылок на страницы, еще не посещенные пользователем, и

Самоучитель по креативному веб-дизайну. Книга 1, стр.51

другой цвет (например, пурпурный) для ссылок на страницы, недавно извлечен- ные браузером.



ПРАКТИКУМ

Чтобы создать гипертекстовую ссылку, поместите начальный и конечный дескрип — торы привязки () вокруг текста, на котором посетитель должен щелкнуть для активизации ссылки. {Гипертекст — это текст между начальным и конечным дескрипторами привязки.) Затем установите атрибут href в дескрипторе рав —

ным пути и имени файла, который должен будет извлечь браузер, когда посети —

тель щелкнет на ссылке. Например, слова «Щелкните здесь, чтобы перейти на сле —

дующую страницу.» в следующем HTML-операторе — это «гипертекст» в гипертекстовой ссылке; браузер подчеркнет его на странице:



Когда посетитель щелкнет на подчеркнутых словах (или где-то между ними), Web-браузер загрузит Web-страницу, сохраненную в файле info. htm. Обратите

внимание, что атрибут href помещается внутри дескриптора, а сам гипер — текст — вне дескриптора между начальным и конечным дескрипторами при- вязки () .

Чтобы создать гиперссылку на Web-страницу, которая расположена на другом Web-сайте, наряду с именем файла Web-страницы в атрибут href потребуется вклю — чить и URL-адрес сайта. Например, нижеприведенный код создает гипертекстовую ссылку на главную страницу (то есть домашнюю страницу) сайта www. anywhere. com:



Когда посетитель щелкнет внутри надписи «Щелкните здесь, чтобы перейти

на Anywhere. com» (то есть в какой-либо части текста гиперссылки), Web-браузер

извлечет (и отобразит) документ главной страницы (index. html) с Web-сайта

www. anywhere. com. Таким обраЗОМ, В ЭТОМ примере Значение атрибута href

(href =»http : //www. anywhere. com/index. html») СОЗДает гипертекстовую ССЫЛКУ между Web-страницей на вашем сайте и документом index. html (главной стра — ницей) на Web-сайте www. anywhere. com. Обратите внимание, что можно также создать гиперссылку на главную страницу Web-сайта, указав в атрибуте href только URL-адрес сайта (без имени файла главной страницы):

Самоучитель по креативному веб-дизайну. Книга 1, стр.52



Кроме использования гипертекстовых ссылок для перехода от документа к до — кументу и с сайта на сайт, с помощью гипертекстовых ссылок можно позволить посетителям выгружать файлы из Web-сайтов. Например, нижеприведенный код

дает Web-браузеру указание выгрузить архивный файл с изображением

corvette. zip, когда посетитель щелкнет на каком-либо из слов «Щелкните здесь»:

Глава 1. Основы языка HTML 6 1





Атрибут href дает Web-браузеру указание извлечь фотографию корвета

(corvette. zip ) из папки cars на Web-сайте www. home. com.

Гипертекстовые ссылки, позволяющие посетителям выгружать файлы и «осу —

ществлять навигацию» по страницам вашего Web-сайта или переходить на другие сайты, добавят к вашим Web-страницам интерактивность и повысят степень дру- жественности к пользователю. При создании гипертекстовых ссылок следите, чтобы текст, предшествующий гиперссылке или следующий за ней, доходчиво объяснял, что именно произойдет, когда пользователь щелкнет на тексте для ак — тивизации гиперссылки.

Кроме того, поскольку у большинства путешественников по Web подчеркну —

тый текст ассоциируется с гипертекстовыми ссылками, избегайте использования

начального и конечного дескрипторов подчеркивания () для выделения

текста в Web-документах. Чтобы выделить слово или группу слов в Web-докумен — те, пользуйтесь такими стилями, как полужирное начертание, курсив или же из — меняйте гарнитуру, цвет или размер шрифта.



Выделение отдельных букв и слов с помощью дескрипторов форматирования символов

Если требуется, чтобы Web-браузер отобразил на Web-странице текст, вы про — сто набираете текст, который хотите видеть на экране, между начальным и ко — нечным дескрипторами тела документа () в HTML-коде Web-стра- ницы. Считывая HTML-документ, Web-браузер выводит на экран весь найденный

им текст. Чтобы «объяснить» браузеру, как текст должен выглядеть, заключите

текст между парой дескрипторов форматирования. (В HTML имеются дескрип — торы, с помощью которых можно дать браузеру указание применить такие вари — анты форматирования, как выделение полужирным, курсив и зачеркивание.) Нужно понимать, что Web-браузеры не распознают обычные коды форматирова —

Самоучитель по креативному веб-дизайну. Книга 1, стр.53

ния, внедряемые в документы текстовыми процессорами вроде Microsoft Word.







Предположим, например, вы хотите, чтобы отдельные слова в вашем Web-доку- менте были выведены полужирным. Чтобы выделить полужирным букву, слово или

группу слов, заключите требуемый текст между начальным и конечным дескрипто —

рами выделения полужирным (), как показано в приведенном ниже коде

(вокруг слова «полужирным»):



Дескрипторы форматирования символов — это контейнеры, и, соответственно, требуют использования и начального, и конечного дескрипторов. Web-браузер применит форматирующую инструкцию ко всему тексту внутри «контейнера», то есть ко всему тексту между начальным и конечным дескрипторами форматирова — ния. В данном примере начальный и конечный дескрипторы выделения полу —

62 Глава 1. Основы языка HTML





жирным (), в которые заключено слово «полужирным», дают Web-браузе —

ру указание отобразить это слово полужирным шрифтом — полужирным. Как уже говорилось, дескрипторы форматирования символов можно использовать для оп — ределения внешнего вида нескольких предложений (или даже абзацев), групп слов, отдельных слов или даже одной буквы в слове. Например, при отображе — нии браузером текста из приведенного ниже фрагмента HTML-кода, только бук —

ва «ГГ. в слове «Полужирным» будет выведена полужирным.



Первая буква последнего слова выделена Полужирным



Кроме начального и конечного дескрипторов выделения полужирным

(), для усиления значимости текста на Web-странице применяются сле — дующие дескрипторы:

• . Дескрипторы цитаты выделяют текст, обычно курсивом.

• . Дескрипторы кода выводят заключенный в них текст мо — ноширинным шрифтом, таким, как Courier, тем самым выделяя его из об — щего текста. С помощью дескрипторов кода можно выделять фрагменты

HTML-кода в учебных документах.

• . Дескрипторы удаленного текста помечают текст как удален — ный путем зачеркивания текста. Например, с помощью дескрипторов уда — ленного текста можно вычеркивать текст в юридических документах.

Самоучитель по креативному веб-дизайну. Книга 1, стр.54

• . Дескрипторы цитаты в кавычках ставят кавычки вокруг заключен — ного в них текста.

• . Дескрипторы нижнего индекса создают нижний индекс, или отображают текст немного ниже основного текста.

• . Дескрипторы верхнего индекса создают верхний индекс, или отображают текст немного выше основного текста.

• . Дескрипторы акцентирования выделяют текст, отображая зак — люченные в них слова курсивом.

. Дескрипторы усиления выделяют текст, отображая заключенные в них слова полужирным курсивом.

. Дескрипторы курсива выделяют заключенные в них слова курсивом.

. Дескрипторы подчеркивания выделяют заключенные в них слова подчеркиванием. Этот дескриптор является нерекомендованным.

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

ры выделения полужирным () комбинируются с начальным и конечным

дескрипторами верхнего индекса (), чтобы выделить на страни — це слово «превосходный»:







Хотя дескрипторы форматирования символов визуально изменяют текст в окне браузера, более эффективный (и в большей степени отвечающий рекомен — дациям W3C) способ задания стилей текста — это применение CSS-правил.

Глава 1. Основы языка HTML 63



Использование специальных символов

в HTML-документах

Поместить обычный текст на Web-страницу несложно: нужно всего лишь со —

здать HTML-документ и ввести текст между дескрипторами документа.

Web-браузер без труда читает и отображает буквы (A-Z, a-z) и цифры (0-9), кото — рые он находит в HTML-документе. Однако существуют некоторые специальные

символы, которые можно ввести в документ в текстовом редакторе, но которые

Web-браузер не выведет на Web-страницу. К счастью, язык HTML предусматрива —

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







Скажем, вы создаете Web-страницу и хотите отобразить символ зарезервированных прав (©), чтобы указать, что некоторые элементы страницы, а, возможно, и ди —

зайн страницы в целом защищены законами об авторском праве. Чтобы Web-брау — зер отобразил символ зарезервированных прав, нужно ввести определенное число — вое значение, обозначающее этот символ. В компьютере каждая буква, цифра и

символ хранятся в виде уникального числового значения, называемого ASCII-ко- дом символа. Чтобы отобразить на Web-странице такой символ, как ©, следует ввести уникальное значение этого символа (то есть его ASCII-код) в HTML-код Web-страницы.

Например, числовое значение символа © — 169. Чтобы дать Web-браузеру указание отобразить символ, которому соответствует ASCII-код 169, поставьте пе —

ред значением символа комбинацию амперсант (&) и знака «решетки» (#), а пос —

ле кода — точку с запятой (;). Таким образом, чтобы заставить Web-браузер ото —

бразить на Web-странице символ ©•, нужно поместить б9; в HTML-код Web-страницы. Для часто употребляемых символов процедура упрощена: вместо числа можно вводить соответствующую символу текстовую последовательность. Например, в символьной записи символ © выглядит как &сору;.

Самоучитель по креативному веб-дизайну. Книга 1, стр.55

В приведенном ниже коде показано использование символа зарезервирован — ных прав в HTML-документе. При отображении специального символа запись

&#ххх (где ххх — ASCII-значение, соответствующее данному символу) сообщает

браузеру, какой специальный символ следует вывести на экран. На рис. 1.18 по — казан результат отображения Web-браузером следующего HTML-кода:



64 Глава 1. Основы языка HTML



Перечень кодов специальных символов и соответствующих им значений можно найти по адресу http://www. htmlhelp. com/reference/charset/ .







Использование горизонтальных линий для структурирования Web-содержимого

При создании Web-страницы немаловажно организовать содержимое страни — цы в группы родственной информации. Например, содержимое Web-страницы, посвященной торговле транспортными средствами, можно разделить на секции о легковых автомобилях, грузовых автомобилях и микроавтобусах. Или же можно структурировать страницу, отделив сведения о транспорте, сдающемся напрокат,

от транспорта, который можно взять в лизинг или приобрести.

Одним из способов структурирования Web-страницы является использование горизонтальных линий для разделения различных типов содержимого. Предпо — ложим, например, вы создаете Web-страницу для вывода на экран данных о про — веденном исследовании, и хотите отделить результаты исследования от примеча — ний. Чтобы создать горизонтальную линию, которая будет отделять текст исследовательской работы от примечаний, воспользуйтесь дескриптором. В

приведенном ниже HTML-коде дескрипторы дают Web-браузеру указание поместить в окне горизонтальные линии, как показано на рис. 1.19:



Глава 1. Основы языка HTML 65







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



Полезные ссылки
Случайные записи
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 045
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 076
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 070
  • 14.06.2011">Базовые сведения о графических редакторах.
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.63
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.7
  • 23.07.2011">Каждая квартира достойна уникального дизайна
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.98
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.167
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.108
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 152
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 063
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 091
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 079
  • 26.02.2014">Как бросить курить?
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...