Теоретический материал для подготовки к практической работе по теме «Работа с текстом и списками» (средствами xhtml и css)

Задания для студентов:

1. Внимательно изучите предложенный теоретический материал.

2. Напишите опорный конспект, внеся в него все основные понятия, назначение тегов, атрибутов и их значений.

3. Реализуйте на практике все специально выделенные практические примеры.

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

Часть 1. Работа с текстом

Текст в (Х)НТМL-документ можно ввести непосредственно, т. е. без использования каких бы то ни было тегов вставки или форматирования. При отображении такого текста браузер проигнорирует невидимые служебные символы перехода на другую строку, табуляции и длинные последовательности пробелов. Например, вы можете ввести несколько строк текста, а браузер отобразит их как одну строку; несколько пробелов, введенных вами для обозначения отступа (красной строки), браузер заменит одним пробелом. Иначе говоря, форматирование текста средствами текстового редактора не соответствует форматированию этого текста браузером. Как уже упоминалось, управлять разметкой текста в окне браузера можно специальными тегами и атрибутами, которых достаточно много в HTML. Так, для перевода строки предназначен тег <br/>, для обозначения абзаца- <р>, для задания заголовков шести различных уровней служат контейнерные теги <h1>, <h2>,...,<h6>.

Что нужно сделать, чтобы оформить текст? Очевидно, необходимо выбрать подходящий шрифт (гарнитуру, размер, цвет и др.), выделить в нем абзацы, заголовки, задать отступы и т. п. Далее мы рассмотрим, как это реализовать с помощью тегов и параметров CSS.

1.1. Шрифты

Если в (Х)НТМL-документе не задавать параметры шрифтов, то браузер отобразит текст, установив общедоступные шрифты и их параметры, принятые по умолчанию или заданные в настройках. Поскольку пользователи могут по-разному настроить свои браузеры, ваша Web-страница может выглядеть совсем не так, как вы рассчитывали. Чтобы достичь инвариантности оформления текста относительно браузеров, необходимо самому задать шрифты с помощью CSS. Однако при этом не следует выбирать слишком редкие (экзотические) шрифты, которых может не оказаться на компьютере пользователя.

Каждый шрифт имеет свое название и отличается характером рисунка символов, их размером, насыщенностью и другими параметрами. Кажется естественным идентифицировать шрифт по имени, которое представляет собой одно или несколько слов, разделенных пробелами, например ВТ Swiss 721 Heavy Italic. Однако в настоящее время не существует хорошо разработанной и общедоступной систем классификации шрифтов по именам и, более того, термины, употребляемые для одной гарнитуры шрифтов, могут не подойти для другой. Например, термин "курсив” (italic) обычно обозначает наклонный текст, которому также соответствуют англоязычные термины Oblique, Slanted, Incline, Cursive или Kursiv.

Аналогично, имя шрифта может содержать термины, описывающие его вес - яркость или насыщенность (жирность) отображения символов. Однако до сих пор термины, обозначающие вес шрифтов, не имеют общепринятого значения, а их использование варьируется в очень широком диапазоне. Например, шрифт, который, по вашему предположению, должен быть жирным, может оказаться нормальным (Regular, Roman, Book или Medium), полужирным (Semi-Bold или Demi-Bold), жирным (Bold) или сверхнасыщенным (Black) в зависимости от того, насколько темным был задан "нормальный" тип начертания шрифта при его разработке.

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

По этой причине в CSS принята следующая модель. Шрифты запрашиваются не только по своему имени, но и по совокупности заданных для них свойств. Значения этих свойств формируют основу для выбора шрифта агентом пользователя (в част­ности, браузером). Изменение значения каждого свойства шрифта может осущест­виться индивидуально, например можно отдельно увеличить вес. После этого для выбора шрифта из базы данных будет использоваться новая совокупность значений его свойств.

Теперь рассмотрим параметры CSS, с помощью которых можно задать характеристики шрифтов.

• Гарнитура шрифта - семейство шрифтов, обладающих некоторым сходством. Другими словами, гарнитура - нечто общее между конкретными шрифтами, имеющими собственные названия. Один шрифт гарнитуры может быть курсивным, второй полужирным, третий может быть сжатым или состоять из малых прописных букв. Примеры названий гарнитур: Arial, Times, Helvetica, New Century Schoolbook и Kyokasho ICA L. Гарнитуры шрифтов могут быть сгруппированы в различные категории: с засечками (например, Times New Roman, Serif) или без засечек, называемые еще рублеными (например, Arial, Sans-serif); rapнитуры, символы которых располагаются друг относительно друга на одинаковом (моноширинные) или различном расстоянии; гарнитуры, тип начертания символов в которых напоминает рукописный и др.

Гарнитуры задаются параметром font-family. Данный параметр (свойство) принимает в качестве значения список имен гарнитур или шрифтов в порядке их приоритета. Обычно шрифты в списке имеют одинаковый или близкий стиль начертания; последним указывают имя похожей общедоступной гарнитуры. Для Web-документов полезно указывать несколько гарнитур или имен шрифтов, тогда браузер будет пытаться отобразить текст в соответствии с первой гарнитурой или шрифтом в списке, а если не получится, то в соответствии со второй и т. д.

Пример: font-family: Arial, Helvetica, sans-serif

Если имя гарнитуры состоит из нескольких слов, то его обязательно следует заключать в кавычки: font-family: "Times New Roman", Helvetica, serif.

Однословные имена гарнитур (кроме общедоступных serif, Sans-serif, cursive, fantasy, monospace) также рекомендуется записывать в кавычках.

Типичные названия гарнитур для Web-документов: Times и Serif (шрифты с засечками), Arial и Sans-serif (без засечек или рубленые), Courier или Monospase (моноширинный), Cursive (курсив, наклонный). Гарнитуры типа Courier или Monospase применяют для выделения внутристрочных фрагментов текста и ко­дов программ, а остальные - для отображения обычного текста и заголовков в зависимости от вкуса дизайнера. Кроме того, часто встречаются шрифты Helvetica и Verdana - рубленые или без засечек. Шрифты без засечек хороши, если их размер мал (менее 12 pt); шрифты с засечками пред­почтительнее для заголовков и обычного текста с размером шрифта 12-16 pt. Однако окончательный выбор гарнитуры остается за автором-дизайнером.

• Стиль шрифта - параметры font-style, font-variant, font-weight, font-stretch:

• font-style - определяет нормальный (normal), курсивный (italic) или на­клонный (oblique) тип начертания символов шрифта одной и той же гарни­туры. Практически для всех основных шрифтов в Web-дизайне значения italic и oblique дают одинаковый результат - наклонное начертание;

• font-variant - вариант стиля шрифта. Принимает значения: normal (по умолчанию) и small-caps (капитель). Значение normal не влияет на отображение шрифта, a small-caps заменяет строчные буквы прописными, но несколько меньшими по размеру, чем прописные буквы текущего шрифта;

• font-weight - вес (насыщенность) шрифта. Значения задаются ключевыми словами normal (обычный), bold (полужирный), bolder (жирнее), lighter (светлее, т. е. менее насыщенный) или одним из девяти целых чисел от 100 до 900. Значение normal эквивалентно 400, a bold - 700. Значение bolder (lighter) задает вес шрифта, больший (меньший), чем унаследованный им вес. Следует иметь в виду, что в текущем семействе может и не быть шрифта с заданной степенью насыщенности. В этом случае можно лишь гарантиро­вать, что шрифт с большим значением font-weight будет не светлее шрифта с меньшим значением этого параметра;

• font-stretch - позволяет выбрать из гарнитуры шрифтов нормальное (normal), сжатое (condensed) или растянутое (extended) начертание. Принимает значения: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Кроме того, возможны значения wider (более широкий) и narrower (более узкий).

• Размер шрифта - параметр font-size. Данный параметр принимает значения в абсолютных единицах измерения (например, pt, px), в процентах от размера родительского шрифта, а также в виде ключевых слов: xx-small, x-small, small (малый), medium (средний), large (большой), x-large, xx-large, larger (больше), smaller (меньше). Последние два значения задают размер, больший или меньший размера родительского шрифта соответственно.

• Сокращенная запись свойств шрифта - параметр font. Значение данного параметра представляет собой строку частных параметров шрифта: font-style, font-variant, font-weight, font-size, line-height и font-family. Частные значе­ния записываются в указанном порядке через пробел. Первые три значения, ус­танавливаемые по умолчанию в normal, можно опустить. Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) прямым слэшем (/). Если в списке гарнитуры (font-family) содержится более одного элемента, то последние разделяются запятыми.

Примеры:

Р {font: italic small-caps bold 12pt/105% "Times", serif}

P {font: bold 12pt "Arial", serif}

p {font: 10pt/12pt sans-serif}

Параметры шрифта наследуются. Поэтому основные из них можно привязать к телу документа (элементу <body>).