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

щается к использованию своего размера шрифта по умолчанию. Ниже показаны

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

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5 ‘

Г Заголовок 6

Второй способ изменить размер текста в HTML-документе — это воспользо —

ваться атрибутом size в дескрипторе в виде size=»n»>, где л — число от 1 до 7. При использовании атрибута size, чем больше значение, тем больше размер текста — в противоположность дескрипторам заголовка, где с уве — личением л размер букв уменьшается.

Чтобы задать текст с использованием атрибута size, поместите текст между начальным и конечным дескрипторами шрифта (). Ниже показан HTML-код дескриптора с атрибутом size, а также как выглядит в окне браузера текст каждого размера:



Шрифт ралмера I



Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт размера 5

Шрифт размера 6

Шрифт размера 7

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





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

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

Следует иметь в виду, что разрешение монитора посетителя влияет на размер текста в окне Web-браузера. Текст на мониторе с разрешением 1024×768 пиксе —

лей кажется меньше, чем текст такого же «размера» на мониторе с более низким разрешением, например 800×600 пикселей. Более того, на разных платформах текст может также отображаться разными размерами даже при одинаковых разре — шениях. На компьютерах Macintosh, например, текст отображается примерно на два пункта меньше, чем текст, отображаемый при том же разрешении на машине

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

с Intel-архитектурой.

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



Изменение цвета текста в HTML-документе

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

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

, чтобы сообщить Web-браузеру, какой цвет следует использовать.



ПРАКТИКУМ

Предположим, например, вы хотите изменить цвет одного предложения в абзаце.

Поместите дескриптор с атрибуттом ccoolloorr вв ввииддее ссоо11оогг==»мц2в^евтег»м> пе — ред самым началом текста, цвет которого требуется изменить. Атрибут color дает браузеру указание отобразить заданным цветом текст, идущий после дескриптора. Ниже в тексте поместите дескриптор в том месте, где браузер должен бу — дет вернуться к своему цвету шрифта по умолчанию.

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



Изменяем цвет текста в следующем предложении.

Вставьте дескриптор задания шрифта с атрибутом

color в начале и конце строки. Цвет изменится, а затем вернется к цвету по умолчанию — черному.



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

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

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







Задать значение атрибута color можно с помощью названия или номера. Как вы видели в предыдущем примере, можно использовать названия цветов, такие, как красный (red), зеленый (green), синий (blue) и т. д. Также можно представ —

лять цвета в виде шестнадцатеричных триплетов. Например, шестнадцатеричный

триплет, соответствующий красному цвету, выглядит как #FFOOOO. Следовательно,

дать указание браузеру отобразить текст красным цветом можно с помощью либо

font color=»red»>, либо.

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

черному цвету соответствует шестнадцатеричный триплет #оооооо. Каждое дву — значное число в триплете обозначает количество одного из трех основных со —

ставляющих цвета: красной, зеленой и синей, которые браузер должен взять для создания составного цвета. Таким образом, для черного (#оооооо) браузер дол — жен смешать «00″ красной, «00″ зеленой и «00″ синей составляющей. И наоборот, чтобы создать белый цвет, браузер должен взять максимальные количества крас- ной, зеленой и синей составляющих. Отсюда получаем шестнадцатеричный триплет белого цвета — #FFFFFF.

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

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

Много лет назад, когда видеоадаптеры могли отображать максимум 256 цве- тов, выбирать цвета было проще (цветов было меньше), однако возможности вы — бора цвета были существенно ограничены. Это усложнялось еще и тем, компью — терные операционные системы резервировали некоторые из этих цветов для своих визуальных интерфейсов (то есть для отображения рабочего стола систе — мы). Поскольку операционные системы Windows и Macintosh используют для своих визуальных интерфейсов различные наборы цветов (40 цветов), остается

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





216 цветов (256 — 40 = 216), которые одинаково отображаются в Web-браузерах

и Windows, и Macintosh.

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

Самоучитель по креативному веб-дизайну. Книга 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-адрес сайта (без имени файла главной страницы):



Полезные ссылки
Случайные записи
  • 11.04.2011">Кто может быть web-дизайнером?
  • 19.03.2011">Руководство по actionscript. часть 2, стр. 090
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.63
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 051
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 033
  • 26.02.2011">Руководство по actionscript. часть 6, стр. 056
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.38
  • 20.03.2011">Руководство по actionscript. часть 2, стр. 072
  • 20.01.2010">Векторные файлы и графика
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.103
  • 28.04.2012">Google запустила пятничную «развлекалку» про зергов в Google Search
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 033
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 084
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 129
  • 16.03.2011">Руководство по actionscript. часть 3, стр. 021
Опрос

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

View Results

Loading ... Loading ...