Билет 8

3. Обработка текста на эвм. Способы вывода текста. Матричная и векторная знакогенерация. Генераторы шрифтов. Покадровый и скроллинг способы вывода текстовой информации из эвм.

4. Структура html-документа, создание фреймов.

Представление текста

Представление информации в виде текста стало одним из первых доступных для обработки с помощью ЭВМ и до сих пор остается одним из наиболее универсальных. Энциклопедический словарь дает такое определение понятию “текст”: “Текст — это упорядоченный набор слов, предназначенный для того, чтобы выразить некий смысл. В лингвистике термин используется в широком значении, включая в себя и устную речь”.

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

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

Первый широко распространенный стандарт кодирования — таблица (т.е. прямое сопоставление кодов символам) кодировки ASСII (American Standard Code for Information Interchange, американский стандартный код для обмена информацией) — был разработан в 1963 году. Стандарт предполагал использование не только в вычислительной технике, но и в телеграфии (он стал заменой 5-битного кода Бодо). В нем для кодирования каждого символа отводилось 7 бит. Восьмой бит использовался для служебных целей — контроля четности при передаче.

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

Позже восьмой бит стали использовать для представления символов национальных алфавитов: первая часть таблицы — US-ASCII — использовалась по-прежнему, а содержание второй менялось в зависимости от исходного естественного языка. Каждый вариант этой второй половины (расширенной таблицы) исходной таблицы получил название “кодовой страницы” языка (code page).

Для русского языка таких расширений несколько (разрабатывались они в разное время). Наиболее известны: CP866 (DOS), KOI-8R (UNIX), CP1251 (Windows) и MacCyr.

Применение такого способа кодирования сильно затрудняет передачу текстовых сообщений между разными странами, объединение в сообщении текста на нескольких языках, а в случае с русским языком — и обмен файлами между разными ОС (для русского языка до сих пор активно применяется 4 разных кодовых таблицы). Для решения этих проблем в 1991 году некоммерческим объединением был предложен стандарт кодирования Юникод (Unicode).

Стандарт состоит из двух частей: универсального набора символов (Universal Character Set) и правил трансформации (Unicode Transformation Format). Универсальный набор символов предполагает описание всех возможных при записи текстов символов в виде общей таблицы кодов. Правила трансформации определяют способ записи этих кодов.

Первая версия стандарта предполагала использование двух байтов для кодирования каждого символа. В дальнейшем это кодовое пространство было расширено.

Сейчас чаще всего применяется способ трансформации UTF-8, обеспечивающий совместимость с предыдущими реализациями и стандартами. В частности, коды менее 128 записываются одним байтом, что автоматически превращает их в коды ASCII.

Применение этого стандарта кодирования позволяет объединять в одном тексте слова на различных языках (без ограничений на их количество), использовать устаревшие языки, дополнительные символы.

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

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

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

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

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

Шрифты

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

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

Шрифт характеризуется рядом параметров:

1. Рисунок шрифта — графические особенности, определяющие общность шрифта и его отличие от всех других.

2. Кегль (кегель) — размер шрифта — предельная высота большой буквы и окружающих ее пробелов (термин введен для описания высоты площадки литеры при наборе с помощью типографской кассы). Чаще всего задается в типографских пунктах (1 пункт = 1/72 дюйма = 0,375 мм). По историческим причинам некоторые размеры имеют собственные названия: 8 пт — “петит”, 9 пт — “боргес”, 10 пт — “корпус”, 12 пт — “цицеро”.

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

4. Часто как параметр задается подчеркивание или зачеркивание шрифта, или его написание как индекса — с уменьшением размера и подъемом/спуском относительно текущей строки.

Существует несколько основных способов описания шрифтов (точнее — гарнитуры шрифта):

1. Растровые шрифты. При таком способе каждая буква описывается отдельно, как некоторая матрица точек. Способ позволяет максимально ускорить обработку, но сильно затрудняет изменение размеров или начертаний. Для достижения качества каждый символ такой гарнитуры должен быть отредактирован вручную и должен храниться отдельно.

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

3. Контурные шрифты. Аналогично векторным, описываются с помощью некоторых математических кривых, но они определяют не символ, а его контур, который заполняется по определенным правилам. Именно этот тип шрифтов и является наиболее популярным.

Для использования векторных и контурных шрифтов необходимо выполнение операции, “создающей” шрифт (заданного рисунка, размера и начертания), годного для отображения. Такая операция называется “растеризацией”. В состав графических оболочек современных операционных систем входят программы — растеризаторы шрифтов определенного формата.

Наиболее популярные форматы шрифтов — это TrueTypeFonts (TTF, поддерживается ОС Windows и MacOS) и PostScript (разработан фирмой Adobe, для использования необходима программа Adobe TypeManager). Сейчас на смену этим форматам приходит совместно разработанный этими компаниями формат OpenType.

Растеризация шрифта — достаточно ресурсоемкая операция, поэтому контурные шрифты получили распространение только с началом массового применения достаточно мощных компьютеров.

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

Каждый шрифт (фонт) представляет собой комплект букв, цифр и специальных символов, оформленных в соответствии с едиными тре­бованиями.

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

2. . <head>

<Title>текст</title> ГОЛОВА

</head>

<body> Тело

Привет

<br>

Здравствуйте

</bodu>

</html> <тег1><тег2><тег3>

</тег3></тег2></тег1>

<Font color=”#b22323”>

Положение текста

<p> </p>

<p align=”center”>тест</p>

=left

=right

=justify”

<divalign=<idiv>

размер заголовка - <H1></H>

<font size=”+4”> </font>

<b> </b>

<i></i>

Моношриный шрифт: <pre></pre>

<srike> </strike> (<s> </s> - перечеркнутый

<u></u> - подчеркивание

<small></small> - маленький

<big> </big>

 - верхний индекс

 - нижний

<font face = “название шрифта> </font>

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

Создайте файл Index.htm -страницы, использующей фрэймы:

<HTML>

<HEAD>

<TITLE>Страница с двумя вертикальными фреймами</TITLE>

</HEAD>

<FRAMESET cols="30%,70%" frameborder="yes" framespacing="1">

<FRAME name="MenuFrame" src="MainMenu.html">

<FRAME name="MainFrame" src="Text1.html">

</FRAMESET>

</HTML>

Здесь присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Тэг <FRAMESET> имеет следующие атрибуты:

• cols="..." - задает вертикальное расположение полос фреймов

• rows="..." - задает горизонтальное расположение полос фреймов

• borlercolor="..." - задает цвет рамки, которая разделяет отдельные фреймы;

• frameborder="..." - указывает броузеру, отображать ли рамку у фреймов или нет;

• border="..." — определяет ширину рамки между фрэймами.

• framespacing="..." - определяет расстояние между фрэймами.

Определение документа, изначально загружаемого при открытии этого файла, задается атрибутом тега <FRAME> src="...", при этом необходимо указать параметр name= "...". Сам же документ является обыкновенной HTML-страницей.

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

Файл "MainMenu.html" будет иметь следующую структуру:

<HEAD>

<BASE TARGET=MainFrame>

<TITLE></TITLE>

</HEAD>

<BODY>

<CENTER><H3>Первый Frame</H3></CENTER>

<P>

<A href="Text1.html">

Первая страничка второго фрэйма

</A>

<P>

<A href="Text2.html">

Вторая страничка второго фрэйма

</A>

</BODY>

</HTML>

Для того, чтобы ссылки из первого фрэйма открывались во втором фрэйме необходимо использовать тэг <BASE TARGET>, указывающий в каком окне необходимо открыть документы, ссылки на которые используются в данном документе.

Контейнеры <FRAMESET> и <BODY> являются взаимоисключающими. Это означает, что если в документе присутствуют оба указанных тега, то броузер игнорирует контейнер <FRAMESET> и отображает информацию, заключенную в контейнер <BODY>.

Файл "Text1.html" будет иметь следующий код:

<HEAD>

<TITLE>Второй Frame</TITLE>

</HEAD>

<BODY>

<CENTER><H3>Второй Frame</H3></CENTER>

<P>

Первая страничка второго фрэйма

</BODY>

</HTML>

создадим еще файл "Text2.html" со следующим кодом:

<HEAD>

<TITLE>Второй Frame</TITLE>

</HEAD>

<BODY>

<CENTER><H3>Второй Frame</H3></CENTER>

<P>

Вторая страничка второго фрэйма

</BODY>

</HTML>

Теперь посмотрим, что у нас получилось. Наша страничка будет иметь

следующий вид.

При выборе первой ссылки из левого фрейма, в правом фрэйме откроется "Первая страничка второго фрэйма", а при выборе второй ссылки, в нижнем фрэйме откроется "Вторая страничка второго фрэйма"

Для оформления горизонтальных фреймов следует использовать параметр rows="..." тега <FRAMESET>.

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

<HTML>

<HEAD>

<TITLE>Страница с комбинированным

использованием фреймов</TITLE>

</HEAD>

<FRAMESET cols="30%,70%" frameborder="yes" framespacing="1">

<FRAME name="MenuFrame" src="MainMenu.html">

<FRAMESET rows="30%,70%">

<FRAME name="TopFrame" src="Top.html">

<FRAME name="MainFrame" src="Text1.html">

</FRAMESET>

</FRAMESET>

</HTML>

Пример фреймовой структуры

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

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="30%, 10%, 60%" >

<frame>

<frame>

<frame>

</frameset>

</html>

В окне браузера это будет выглядеть так:

Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей - фреймов.

Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:

rows - указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%.

cols - указывает разбить окно на вертикальные области.

Внутри тегов <frameset></frameset> располагаются одиночные теги <frame>, причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.

Мы рассмотрим параметры тега <frame> на примерах.

src - самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.

Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:

top.html со следующим кодом:

<html>

<head>

<title>Фреймы в html</title>

</head>

<body bgcolor="#FFCC66" text="#990000">

<font size="5">шапка сайта</font>

</body>

</html>

menu.html со следующим кодом:

<html>

<head>

<title>Меню сайта</title>

</head>

<body bgcolor="#FFCC66" text="#990000">

<a>меню</a> <a>меню</a> <a>меню</a>

<a>меню</a> <a>меню</a>

</body>

</html>

content.html с кодом:

<html>

<head>

<title>Контент</title>

</head>

<body bgcolor="#FFCC66">

Содержимое страницы с контентом.

</body>

</html>

Эти страницы должны лежать в том же каталоге, что и index.html.

А теперь добавим параметр src в теги <frame> на нашей странице index.html:

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="30%, 10%, 60%" >

<frame src="top.html">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

Теперь в браузере наша страница index.html будет выглядеть так:

name - имя фрейма, которое будет использоваться для ссылки к данному фрейму.

Добавим этот параметр тегу <frame src="content.html">:

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="30%, 10%, 60%" >

<frame src="top.html">

<frame src="menu.html">

<frame src="content.html" name="content">

</frameset>

</html>

Теперь создайте еще одну страницу other.html с кодом:

<html>

<head>

<title>Контент other.html</title>

</head>

<body bgcolor="#FFCC66">

Содержимое страницы other.html

</body>

</html>

А теперь на странице menu.html сделаем первый пункт меню ссылкой на эту страницу и укажем, что открывать страницу other.html следует во фрейме с именем content:

<html>

<head>

<title>Меню сайта</title>

</head>

<body bgcolor="#FFCC66" text="#990000">

<a href="other.html" target="content">меню</a>

<a>меню</a> <a>меню</a> <a>меню</a> <a>меню</a>

</body>

</html>

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

Параметру target можно задать и другие значения:

_self - загружать в тот же фрейм из которого ссылаются.

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

marginwidth - определяет отступ во фрейме от левого края до содержимого.

marginheight - определяет отступ во фрейме от верхнего края до содержимого.

scrolling - если содержимое фрейма не помещается в окно, то будут появляться полосы прокрутки, иногда это нарушает дизайн. Этот параметр помогает управлять отображением полос прокрутки. Может принимать значения: yes, no, auto.

noresize - если установить курсор мыши на рамки фрейма, то можно выполнить его перемещение. Для предотвращения этой возможности и используется этот параметр.

Давайте внесем последние четыре параметра в код нашей страницы index.html:

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="30%, 10%, 60%">

<frame src="top.html" marginwidth="50"

marginheight="20" noresize>

<frame src="menu.html" marginwidth="50"

scrolling="no">

<frame src="content.html" name="content"

marginwidth="50" marginheight="20">

</frameset>

</html>

Теперь наша страница выглядит так:

Вот мы и рассмотрели все параметры тега <frame>.

Последний штрих: уберем рамки фреймов. Для этого в тег <frameset> добавим два параметра border="0" frameborder="0".

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="30%, 10%, 60%" border="0"

frameborder="0">

<frame src="top.html" marginwidth="50"

marginheight="20" noresize>

<frame src="menu.html" marginwidth="50"

scrolling="no">

<frame src="content.html" name="content"

marginwidth="50" marginheight="20">

</frameset>

</html>

Теперь наша страница выглядит так:

Плюсы и минусы фреймов

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

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

Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться.

Во-вторых, наше меню лежит в отдельном файле. А это значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее, ведь никаких ссылок и пунктов меню на этой странице нет.

И наконец, фреймовую структуру поддерживают не все браузеры. Поэтому существуюте теги <noframes> </noframes>, они располагаются внутри тегов <frameset> </frameset> и содержат альтернативную информацию для браузеров не поддерживающих фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них.

Отсюда вывод - не используйте фреймы без острой необходимости.

Примеры фреймовых структур

Как вы помните за разделение на фреймы отвечают два параметра: rows и cols. Комбинируя их, можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.

Пример 1:

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset cols="150, 300, *" >

<frame>

<frame>

<frame>

</frameset>

</html>

Получим три вертикальных фрейма. Ширина первого - 150 пикселов, второго - 300, а третьего - все остальное пространство окна.

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset cols="1*, 2*" >

<frame>

<frame>

<frame>

</frameset>

</html>

Получим два вертикальных фрейма. Ширина первого принимается равной за единицу, а второй - в два раза шире первого (т.е. 33% и 67% от ширины окна).

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset rows="100, *" >

<frame>

<frameset cols="200, *" >

<frame>

<frame>

</frameset>

</frameset>

</html>

Получим два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство.

Второй горизонтальный фрейм разобьем на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место. Это достигается с помощью вложенных тегов <frameset> </frameset>.

<html>

<head>

<title>Фреймы в html</title>

</head>

<frameset cols="25%, *" >

<frame>

<frameset rows="50%, *" >

<frame>

<frame>

</frameset>

</frameset>

</html>

Получим два вертикальных фрейма. Ширина первого - 25%, а второго - все остальное пространство.

Второй вертикальный фрейм разобьем на два одинаковых горизонтальных.

На этом урок о фреймах закончен. На следующем уроке будем делать наши страницы музыкальными.

Билет № 9