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



Вставка комментариев в Web-документы

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

суется в ваших услугах как Web-дизайнера, будет знать, как с вами связаться.

Помимо этого, с помощью комментариев можно временно скрыть некоторые

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

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

не даст соответствующего разрешения. Поставив HTML-дескрипторы коммента —

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



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

рипторами Комментария, таКИМИ как.

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

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





что он обнаружит после начального дескриптора комментария и — до следующего

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



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

(включая комментарии) HTML-документа в отдельном* окне документа.

Помимо использования комментариев для предоставления личных данных,

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

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



Без дескрипторов комментариев, обрамляющих описание JavaScript-функции

в этом примере, Web-браузеры, не поддерживающие дескриптор сценария, могут проигнорировать этот дескриптор и вывести на экран JavaScript-код в виде тек — ста. И, наоборот, браузеры, которые поддерживают сценарии, будут игнорировать HTML-дескрипторы комментария, поскольку в сценариях для обозначения ком — ментариев используются /* и */.

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



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

определите размер и гарнитуру шрифта в HTML-коде Web-страницы. Управлять

размером и внешним видом шрифта нужно ввиду того, что то, как выглядит

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

текста: вот почему заголовки крупнее и зачастую выделены другой гарнитурой шрифта, отличной от текста основной части документа.

Выбранная вами гарнитура шрифта передает настрой и создает атмосферу, в которой посетитель читает ваше сообщение. Использование неправильной гар — нитуры сбивает посетителя с толку, поскольку содержимое кажется неуместным. Например, в ряде исследований (одно из которых проводилось Йельским уни — верситетом) было установлено, что шрифты с засечками (serif) передают более серьезный тон, чем шрифты без засечек.(sans serif). Следовательно, шрифт вроде Helvetica или Times New Roman будет использоваться для официального доку —

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

мента, a Comic Sans или Arial подойдет для менее серьезного или неформально —

го сообщения, как показано в примерах ниже:

Шрифты с засечками, например, Times New Roman,

придают тексту официальный вид. Шрифты с за — сечками следует использовать для передачи серь- езного тона документа.

С другой стороны, использование шрифтов

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







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



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

текст шрифтом Helvetica до тех пор, пока браузер не обнаружит дескриптор

:



Прочитав дескриптор в HTML-коде Web-страницы, браузер вернется

к отображению текста страницы своим шрифтом по умолчанию.

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





Таким образом, атрибут face дает Web-браузеру указание искать на хосте тот или иной шрифт (в данном примере — Helvetica). Этот шрифт Web-браузер будет использовать для отображения текста, помещенного между начальным и конеч — ным дескрипторами шрифта (). Однако если на компьютере посе — тителя не установлен шрифт, указанный в дескрипторе, Web-браузер бу —

дет использовать вместо него свой шрифт по умолчанию.

Посетитель сайта может установить шрифт по умолчанию браузера, изменив настройки Web-браузера. Например, чтобы изменить шрифт по умолчанию в Internet Explorer 5, в меню Tools (Сервис) выберите Internet Options (Свойства обо — зревателя). Затем щелкните на кнопке Fonts (Шрифты). Internet Explorer, в свою очередь, выведет на экран диалоговое окно Fonts (Шрифты), в котором можно выб —

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

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

менте не указан шрифт или указанного шрифта нет на компьютере посетителя.

Кроме указания основного шрифта, атрибут face позволяет выбрать второй, третий и даже четвертый шрифт. Например, вы хотите, чтобы текст вашего доку — мента отображался с использованием шрифта Helvetica. Однако если на компью — тере посетителя нет шрифта Helvetica, вместо него можно использовать шрифт Georgia. В приведенном ниже фрагменте кода показано, как можно указать аль — тернативный шрифт, который будет использован в случае отсутствия основного шрифта на компьютере посетителя:





Атрибут face дает Web-браузеру указание отображать текст между начальным

и конечным дескрипторами шрифта () шрифтом Helvetica, а если шрифта Helvetica на компьютере нет, использовать вместо него шрифт Georgia.

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

При указании шрифтов записывайте названия шрифтов строчными буквами, поскольку в этом случае система будет искать название шрифта, записанное как

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

Управление структурой текста с помощью

дескрипторов абзаца и перевода строки

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

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





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





Web-браузеры игнорируют символы возврата каретки и перевода строки, кото —

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

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







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

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

В отличие от дескриптора, дескриптор

не имеет конечного дескрип- тора. Обнаружив дескриптор

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

, либо дескриптора . Если вы хотите просто перейти на следую —

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





щую строку, используйте дескриптор

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

Текст в приведенном ниже HTML-коде описывает, как работают дескрипторы

и

, а также как будет выглядеть этот текст в окне Web-браузера (см.

рис. 1.13):



Дескрипторы форматирования (такие как и

) определяют, где закан — чивается строка текста в окне браузера. Говоря языком редактирования текста,

дескриптор вставляет жесткий возврат каретки, а дескриптор — два же —

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

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

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

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



size=»7″> Послание АвраамаSnbsp;Линкольна

Эта страна с ее институтами принадлежит

людям, которые ее населяют.

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

состав, или же к своему конституционному праву распустить или

свергнуть его.

ABpaaM Линкольн

Самоучитель по креативному веб-дизайну. Книга 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-компьютерах в состоянии отображать миллионы цветов. Тем не менее, цвета по-прежнему создаются как



Полезные ссылки
Случайные записи
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 068
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.85
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 129
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.7
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.122
  • 04.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.7
  • 12.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.114
  • 16.07.2010">Простые способы улучшить сайт
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 035
  • 11.03.2011">Руководство по actionscript. часть 4, стр. 009
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 022
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.79
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 014
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.60
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.1
Опрос

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

View Results

Loading ... Loading ...