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

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

НЕГОСУДАРТСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО

ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

ВОСТОЧНАЯ ЭКОНОМИКО-ЮРИДИЧЕСКАЯ ГУМАНИТАРНАЯ

АКАДЕМИЯ (Академия ВЭГУ)

Специальность 230700.62 Прикладная информатика

Специализация Прикладная информатика в экономике

КУРСОВАЯ РАБОТА

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

Новичков Евгений Александрович

уфа 2012

Оглавление

Введение

. Средства форматирования текста в языке разметки гипертекста HTML

.1 Общие сведения о HTML

.2 Форматирование текста с помощью HTML

.2.1 Задание цвета на веб-странице

.2.2 Выравнивание текста на веб-странице

.2.3 Задание заголовков HTML-документа

.2.4 Задание размера шрифта

.2.5 Задание шрифта по имени

.2.6 Физическое и логическое форматирование символов

.2.7 Вставка специальных символов

. Форматирование текста с точки зрения веб-дизайна

.1 Значение текстового оформления веб-страниц

.2 Удобочитаемость, содержание и форма шрифта

.3 Подбор шрифта и верстки текста

.4 Стилистическое форматирование текста

Заключение

Список литературы

Приложение

Введение

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

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

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

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

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

Цель исследования: раскрыть принципы, методы и технологии форматирования текста на веб-страницах.

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

1. Дать краткую характеристику языка разметки гипертекста HTML.

2. Раскрыть принципы форматирования текста на веб-страницах с точки зрения веб-дизайна.

3. Раскрыть методы и технологии форматирования текста на веб-страницах.

Объект исследования: процесс форматирования текста на веб-страницах.

Предмет исследования: принципы, методы, технологии форматирования текста на веб-страницах.

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

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

1. Средства форматирования текста в языке разметки гипертекста HTML

.1 Общие сведения о HTML

Стандарт HTML создан и поддерживается некомерческой международной организацией W3C (World Wide Web Consortium).

Поскольку HTML-документ записывается в ASCII-формате, для создания веб-страницы может быть использован любой текстовый редактор, работающий с простым текстом, т.е. таким текстом, который не содержит служебной информации. Такими редакторами являются, например, NotePad (Блокнот) или FAR.

HTML-документ состоит из слов двух типов: служебных слов и собственно текста, выводимого на экран. Служебные слова называются тэгами (tags) и берутся в угловые скобки < >. В литературе тэги называют также дескрипторами и операторами. Тэги бывают двойными, называемые контейнерами (container), и одиночными. Примером контейнера служат тэги, задающие начало HTML-документа: <HTML> и его окончание: </HTML>. Тэг окончания контейнера отличается от тэга его начала наличием символа "/". Текст, находящийся между началом контейнера и его окончанием, является его содержимым.

Примером одиночного тэга служит тэг перевода на новую строку: <BR>.

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

HTML-документ имеет следующую базовую структуру, которая состоит из заголовка HTML-документа и тела HTML-документа:

<HTML>

<HEAD>

. . .

</HEAD>

<BODY>

. . .

</BODY>

</HTML>

В заголовке HTML-документа, который находится внутри тэга-контейнера <HEAD> . . . </HEAD>, помещается информация, которая не выводится в основное поле веб-страницы. Она используется браузером для других целей. Например, с помощью контейнера <TITLE>. . . </TITLE> задается заголовок веб-страницы, помещаемый вверху экрана. Этот заголовок указывается в перечне посещенных страниц и в других местах. Поэтому, если разработчик веб-страницы хочет, чтобы его сайт был востребован, ему необходимо внимательно отнестись к содержимому заголовка веб-страницы.

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

Форматирование HTML текста - Microsoft Internet Explorer

Последние три слова добавляет сам браузер.

В теле HTML-документа, который находится внутри тэга-контейнера <BODY> . . . </BODY>, помещается текст, который будет непосредственно выводится на экран. Примером простейшего HTML-документа, выводящего на экран традиционное сообщение "Привет, мир!", является следующий текст:

<HTML>

<BODY>

Привет, мир!

</BODY>

</HTML>Оглавление

Сообщение "Привет, мир!" находится в верхнем левом углу экрана, имеет черный цвет и небольшой размер букв (эти параметры заданы по умолчанию) и выглядит непривлекательно. Чтобы сделать его вид более приятным, необходимо выполнить форматирование текста, т.е. задать его цвет, размер, выравнивание и другие параметры средствами HTML.

Текст может быть разбит на параграфы (текстовые блоки). Для указания параграфа используется контейнер <P> . . . </P>:

Текст параграфа

</P>

На экране между параграфами вставляется пустая строка. Тэг окончания параграфа </P> можно не указывать. В этом случае тэг начала следующего параграфа <P> (или </BODY>) будет означать закрытие текущего.

1.2 Форматирование текста с помощью HTML

1.2.1 Задание цвета на веб-странице

Когда браузер выводит на экран текст, то в качестве цвета текста и цвета фона он использует значения, заданные по умолчанию (в примере 1 цвет текста - черный, а цвет фона - светло-серый). Однако в HTML есть средства для задания и изменения как цвета текста, так и цвета фона. Для этого используются соответственно параметры TEXT и BGCOLOR тэга <BODY>.

Если необходимо указать некоторый цвет только для части текста, то используется параметр COLOR тэга <FONT>.

В HTML есть два способа задания значения цвета.

В первом способе значение цвета задаются с помощью трех составляющих цветов в виде численного значения #RrGgBb, где:

·   Rr - две 16-ричние цифры, задающие компоненту красного цвета;

·   Gg - две 16-ричние цифры, задающие компоненту зеленого цвета;

·   Bb - две 16-ричние цифры, задающие компоненту синего цвета.

Значение компоненты каждого цвета может меняться от 0 до FFh, т.е. от 0 до 255. Например, значение #FF0000 задает ярко-красный цвет, #00AA00 - темно-зеленый, #С0С0С0 - серебристый. Таким способом можно задать более 16 млн цветов.

Вторым способом можно задать только 16 основных значений цвета в виде символических (английских) названий. В таблице 1 приведены эти цвета, их символические названия и численные значения в виде #RrGgBb.

Таблица 1 - Названия и значения основных цветов

1.2.2 Выравнивание текста на веб-странице

Каждый параграф текста может быть выровнен по левому краю, по правому краю, по обеим краям (по ширине) или по центру экрана. Для этого используется параметр ALIGN тэга <P>. Он имеет такие значения:

·   left: параграф выровнен по левому краю (задается по умолчанию);

·   right: параграф выровнен по правому краю;

·   center:параграф выровнен по центру;

·   justify:параграф выровнен по ширине экрана.

Например:

Текст также может быть выровнен по центру с помощью тэга-контейнера <CENTER> . . .</CENTER>:

<CENTER> Текст выровнен по центру </CENTER>

В этом случае текст между тэгами <CENTER> и </CENTER> выводится по центру новой строки экрана. Оглавление

1.2.3 3адание заголовков HTML-документа

В HTML-документе может быть использовано до шести заголовков разного уровня. Они задаются с помощью тэгов- контейнеров от <H1> . . . </H1> (самый высокий уровень) до <H6> . . . </H6> (самый низкий уровень).

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

Цвет заголовков задается или параметром TEXT тэга <BODY>, если параметр указан, или принимается по умолчанию.

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

1.2.4 3адание размера шрифта

Для задания размера шрифта на веб-странице используется параметр SIZE тэга-контейнера <FONT>. . . </FONT>. Текст, указанный между тэгами <FONT> и </FONT> будет иметь требуемый размер. Размер текста, следующего дальше, будет определяться значением парамета TEXT тэга <BODY> или будет браться по умолчанию.

Значения параметра SIZE задаются не в пунктах (1 пункт равен 1/72 дюйма), а в относительных единицах от 1 до 7. Соотношение между этими единицами и пунктами приведено в таблице 2.

Таблица 2 - Соотношение между относительными единицами и пунктами

Например: <FONT SIZE=5> Размер шрифта 18 pt </FONT>

Можно поступить и так: задать с помощью тэга <BASEFONT> с параметром SIZE базовый размер шрифта. А затем с помощью тэга <FONT> с параметром SIZE, который принимает значения от -4 до +4, изменить базовый размер на необходимую величину.

Например:

<BASEFONT SIZE=4>

<FONT SIZE=+2> Размер шрифта 24 pt </FONT>

С помощью тэгов-контейнеров <BIG> . . . </BIG> и <SMALL> . . . </SMALL> можно задать текст соответственно большого и малого размера, не указывая конкретно величину шрифта. Эту величину задает сам браузер.

1.2.5 3адание шрифта по имени

Поскольку неизвестно, какой тип шрифтов использует браузер на стороне пользователя, можно с помощью параметра FACE тэга <FONT> явным образом указать тип шрифта по имени.

В одном параметре FACE можно указать несколько типов шрифтов, которые перечисляются через запятую:

<FONT FACE="Arial Cyr, Arial, Helv DL"> Шрифт гельветика

Если на стороне пользователя установлен первый из указанных шрифтов - Arial Cyr, то строка "Шрифт гельветика" будет отображаться на экране с использованием именно этого шрифта. Иначе будет сделана попытка отобразить строку шрифтом Arial, а затем - Helv DL. Если окажется, что в системе пользователя нет ни одного из перечисленных шрифтов, строка будет отображена тем шрифтом, который установлен в браузере для использования по умолчанию.

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

В следующем примере заданы верхнее поле, цвет и выравнивание текста, типы и размеры шрифта на веб-странице средствами HTML:

<HTML>

<HEAD>

<TITLE> HTML: выравнивание текста, задание цвета, размера и типа шрифта </TITLE>

</HEAD>

<!-- Цвет текста: синий, фона - светло-синий: -->

<BODY TOPMARGIN="50" TEXT=blue BGCOLOR= #E0E0FF>

<H1 ALIGN=center>ЗАГОЛОВОК 1 УРОВНЯ</H1>

<P ALIGN=right>

<FONT COLOR=red> <SMALL> Текст маленького размера (SMALL) красного цвета выровнен по правому краю экрана </SMALL> </FONT>

<P> Выравнивание текста, размер (12 pt) и тип шрифта, заданы по умолчанию

<P ALIGN=justify> <FONT SIZE=6 COLOR=#FF00FF="Courier, Courier New Cyr, Courier New"> Текст выровнен по ширине экрана с использованием шрифта Courier лилового цвета размером 24 pt </FONT>

</BODY>

</HTML>

форматирование текст шрифт цвет

1.2.6 Физическое и логическое форматирование символов

В HTML предусмотрено несколько тэгов-контейнеров для физического форматирования символов. Эти тэги определяют внешний вид символов явным образом в противоположность тэгам логического форматирования:

<B> . . . </B>: выделяет текст жирным шрифтом;

<I> . . .</I>: выделяет текст наклонным шрифтом (курсивом);

<U> . . .</U>:выделяет текст подчеркиванием;

<STRIKE> . . .</STRIKE>:выделяет текст перечеркиванием;

<TT> . . .</TT>:задает текст с фиксированной шириной символов (например, листинги программ);

<SUB> . . .</SUB>:указывает подстрочный (нижний) индекс;

<SUP> . . .</SUP>:указывает надстрочный (верхний) индекс;

<BLOCKQUOTE> . . . </BLOCKQUOTE>: задает левое поле;

<PRE> . . . </PRE>(preformatted - предварительно отформатированный): выводит текст на экран с отработкой всех знаков пробелов, табуляции, перевода строки и новой строки.

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