Пример изменения свойств шрифтов

Практическая работа № 2

Форматирование текста на Web-странице по образцу

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

Теоретические сведения

Форматирование текста

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

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

Рассмотрим стандартные элементы языка HTML, позволяющие форматировать текст.

Форматирование абзаца

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

Вместе с элементом абзаца можно использовать и атрибут выравнивания align:

— align=left — выравнивание по левому краю;

— align=right — выравнивание по правому краю;

— align=center — выравнивание по центру;

— align=justify — выравнивание по ширине.

Выравнивание по ширине — опасный параграф. Он не работает в старых версиях браузеров (т.е. текст выравняется в таком случае по левому краю документа).

Пример:

Использование различных типов выравнивания

Элемент абзаца разделяет фрагменты текста

вертикальным отступом. Вместе с элементом абзаца можно

использовать и атрибут выравнивания align:

align=left — выравнивание по левому краю;

align=center — выравнивание по центру;

align=right — выравнивание по правому краю;

align=justify — выравнивание по ширине.

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

Пример переноса строк ():

Принудительный перенос строки

Уронили мишку на пол,

Оторвали мишке лапу,

Все равно его не брошу,

Потому что он хороший.

Если таким образом расставить элемент
в этом стихотворении, то в экране браузера (см. рис. 2.4) мы увидим стандартным образом написанное четверостишие на четырех строках.

Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключенный между его тегами, будет выведен в одну строку. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки.

Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Текст, заключенный между метками и , выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Во всех других случаях браузер игнорирует эти символы. Возможен и обратный эффект: если пользователь введет текст как одну длинную строку, то она не будет разорвана браузером, а уйдет за границы окна программы. В этом смысле элемент PRE работает так же, как элемент NOBR. По умолчанию для отформатированного заранее текста выбирается моноширинный шрифт. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.

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

Элемент для центрирования текста, а точнее, любого содержимого. Не является общеупотребительным. В тех случаях, когда это возможно, вместо него используют атрибут align=center.

Элемент, похожий на предыдущий. Он позволяет выравнивать содержимое по левому краю, по центру или правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:

— align=left

— align=center

— align=right

Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста — логическое и физическое форматирование.

В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением ситуаций использования стилевых шаблонов CSS и обособления тегами физического форматирования. Результат действия разных тегов логического форматирования визуально может совпадать, ибо основное их предназначение заключается в логическом выделении отдельных элементов HTML. Теги физического форматирования позволяют разработчику визуально изменять вид текста, делая его полужирным или наклонным, варьируя его параметры и значения.

Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта.

Выделение текста полужирным шрифтом (от слова Bold). Очень популярный элемент. Использование полужирного шрифта — прием, позаимствованный из текстовых редакторов.

Например: этот текст имеет обычное начертание, а этот будет выделен полужирным шрифтом .

Выделение текста курсивом (от слова Italic).

Например: этот текст имеет обычное начертание, а этот выделен курсивом .

Элемент, обозначающий текст телетайпа (teletype). Его особенное п. заключается в использовании моноширинного шрифта, имитирующего пишущую машинку, т.е. имеющего фиксированную ширину символа.

Элемент, создающий перечеркнутое начертание текста. В настоящее время его заменяют тегом .

Подчеркнутое начертание текста.

Элемент, создающий эффект нижнего индекса (subscript).

Элемент, создающий эффект верхнего индекса (superscript).

Пример создания индексов (к рис. 2.5):

Верхний и нижний индексы

H20

(a + b)2 = a2 + 2ab + b2

Пример изменения свойств шрифтов

Рис. 2.5. Пример нижнего и верхнего индексов

Элемент, определяющий базовый (основной) размер шрифта. Внутри элемента необходимо указать атрибут:

Size = базовый размер шрифта

Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже), который позволяет задавать относительный размер шрифта.

Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов. Абсолютный размер шрифта задается при помощи атрибута size (размер):

Size = абсолютный размер шрифта Этот атрибут может принимать значения от 1 до 7. Ниже показано несколько образцов надписей, выполненных шрифтами разного размера:

Образцы надписей, выполненных шрифтами разного

размера:

SIZE=1 Образец написания

SIZE=2 Образец написания

SIZE=3 Образец написания

SIZE=4 Образец написания

SIZE=5 Образец написания

SIZE=6 Образец написания

SIZE=7 Образец написания

Пример:

Тише едешь — дальше будешь

Размер шрифта может задаваться относительно базового:

size=+число

size=-число

При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется или шрифт размера, или шрифт размера 1. На рисунке 2.6 показаны надписи, выполненные шрифтами с заданным относительным размером.

Шрифт+4 Шрифт+3

Шрифт+2 Шрифт+1 Шрифт0 Шрифт-1 Щрифт-2

При помощи относительных величин тоже можно получить семь градаций размера шрифта.

Для элемента FONT можно использовать атрибут цвета:

соlоr=Цвет

Название цвета задается либо числом, написанным в шестнадцатеричной системе, например color=#ffoooo, либо просто его названием, написанным на английском языке, например color=red.

Пример:

Это шрифт синего цвета

Атрибут face (вид) позволяет задавать тип шрифта:

fасе=Название шрифта

Пример изменения свойств шрифтов

Изменение свойств шрифтов

Шpифт arial

Шрифт Arial Black

Шрифт Courier New

Шрифт Times New Roman

Шрифт Tahoma

Шрифт Fixedsys

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

Все эти атрибуты могут быть использованы совместно Внутри тега .

Пример:

Это шрифт Arial размером 3, цвет синий

Элемент FONT может с успехом заменять элементы заголовка Н1 …Н6.

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

Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, В, I, Р и т.д.

Этот тег используется, если необходимо выделить часть текста небольшим увеличением размера шрифта относительно остальных слов.

Этот тег используется, если необходимо выделить часть текста небольшим уменьшением размера шрифта относительно остальных слов.

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

Н1

Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются Н1 …Н6. Заголовок уровня 1 самый крупный, а уровень 6 беспечивает самый маленький заголовок. Представление об относительных размерах букв в них дает рис. 2.8. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

— align-‘left

— align=center

— align=right

Пример (к рис. 2.8):

Использование заголовков

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Пример изменения свойств шрифтов

Рис. 2.8. Результат работы примера создания заголовков

Данный элемент реализуется через параметр TITLE и отображается в браузере при наведении курсора на слово-аббревиатуру (рис. 2.9),

Пример:

Расшифровка аббревиатур

Термин

HTML — означает «язык маркировки гипертекстов» и включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редиморм, браузеры и многое другое.

и

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

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

Предполагается, что этот элемент может быть использован для форматирования цитат, высказываний и ссылок в обычном понимании этого слова. Текст, расположенный внутри него, выводится по умолчанию курсивом. Визуально аналогичен тегам и .

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

От английского strong emphasis — сильный акцент. Это элемент, отвечающий за выделение текста. Обычно его применение равносильно использованию элемента для выделения полужирным: .

От английского keyboard — клавиатура. Этот элемент предназначен ДЛЯ указания текста, который пользователь должен ввести с клавиатуры (keyboard). Можно рассчитывать, что текст, выделенный с помощью этого элемента; будет выведен моноширинным шрифтом в полужирном начертании.

, и

Элементы, предназначенные для вывода фрагментов программ.

Этот элемент предназначен для визуального выделения небольших фрагментов программного кода. Код отображается моноширинным шрифтом.

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. SAMP предполагается задействовать при иллюстрации примеров (sample) вывода данных на экран.

От английского variable — переменная. Этот элемент был создан для выделения переменных (variables). Как правило, все эти элементы обеспечивают вывод информации с использованием моноширинного шрифта.

Этот элемент предназначен для создания текста с конструкциями HTML, которые должны восприниматься именно как текст. Все теги, заключенные в PLAINTEXT, воспринимаются браузером только как произвольныe символы. Элемент удобно использовать для обсуждения вопросов, связанных с использованием HTML.

Горизонтальные линии

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

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

(табл. 2.3).

Пример создания горизонтальных линий с помощью тега HR

Пример создания горизонтальных линий с помощью тега HR

Таблица 2.3

Атрибуты элемента HR

Выравнивание влево, по центру, вправо, по ширине: align=left align=center align=right align=justify
Длина линии в процентах и пикселях width = длина в пикселях width = длина в процентах от ширины экрана
Толщина линии
Отмена объемности
Цвет линии, только в IE

Элемент не имеет конечного тега, но допускает ряд атрибутов.

Пример создания горизонтальных линий (к рис. 2.10):

Горизонтальные линии

Длина линии — 30% от ширины экрана. Использование выравнивания линии по правому краю, по центру и по левому краю

толщина линии — 2, длина — 100%

толщина линии — 4, длина — 50%

толщина линии — 8, длина — 25%

толщина линии — 16, длина — 12%

Линия, не содержащая объема

Основы javascript 18 — Изменение стилей элемента.


Похожие статьи.

Понравилась статья? Поделиться с друзьями: