МИНОБРНАУКИ РОССИИ
Федеральное государственное бюджетное
образовательное учреждение высшего образования
«Ухтинский государственный технический университет»
(УГТУ)
Институт экономики управления и информационных технологий
Кафедра Социально-коммуникативных технологий
Н.А.Белобородова
Организация работы с технотронными
документами
Методические указания
по выполнению лабораторных работ
Ухта, УГТУ, 2017
УДК 005.92(075.8)
ББК 60.844 Я7
Б 43
Белобородова, Н. А.
Б 43 Организация работы с технотронными документами [Текст]: методические указания по выполнению лабораторных работ/ Н.А.Белобородова. – Ухта : УГТУ, 2017. – 34 с.
Методические указания предназначены для проведения курса лабораторных работ по дисциплине “Организация работы с технотронными документами” для студентов дневной и заочной формы обучения по специальности 46.03.02 “Документоведение и архивоведение” (профиль – “Документационное обеспечение управления”). Включает описание технологии разработки технотронных документов, задания к лабораторным работам.
Содержание методических указаний соответствует рабочей учебной программе дисциплины “Организация работы с технотронными документами”.
УДК 005.92 (075.8)
ББК 60.844 Я7
Методические указания рассмотрены и одобрены заседанием кафедры Социально-коммуникативных технологий от ______2017 г., протокол № ___.
Рецензент: Зав. кафедрой Документационного обеспечения управления ИнЭУиИТ Ухтинского государственного университета, кандидат философских наук, доцент М.В. Михитарова
Редактор: __________.
Корректор: ________. Технический редактор: _________.
В методических указаниях учтены предложения рецензента и редактора.
План 2017 г., позиция 000.
Подписано в печать 00.00.2016. Компьютерный набор.
Объём ______ с. Тираж _____ экз. Заказ № 000.
© Ухтинский государственный технический университет, 2017
169300, Республика Коми, г. Ухта, ул. Первомайская, д. 13.
Типография УГТУ.
169300, Республика Коми, г. Ухта, ул. Октябрьская, д. 13. Введение
В своей книге. “Между двумя веками: роль Америки в эру технотроники” (“Between Two Ages : America's Role in the Technetronic Era”), изданной в 1972 году, Збигнев Бжезинский изложил теорию технотронной эры, которая следует как этап развития постиндустриального общества. Он отмечал, что в эру технотроники общество состоит не только из обычных людей, но и из киборгов, клонов, а также тех людей, которые оснащены имплантируемыми устройствами – это мир информационных технологий и управляемого с помощью этих технологий общества.
С этого времени в научную практику вводится такое понятие как “технотронный документ”, при этом определяющим признаком такого документа выступает фактор использования информационных технологий при его создании, обработке, хранении, др.
В результате исследований Магидова Владимира Марковича и др. ученых, изучающих особенности технотронных документов, сформулировано понятие “технотронный документ”.
Технотронный документ – это документ, полученный с использованием различных информационных технологий, сложных технических устройств, последующей компьютерной обработки и компьютерного хранения в архивах.
В настоящее время к технотронным документам относятся электронные документы, фотографии, киноматериалы, видеоматериалы и видеозаписи, аудиоматериалы, различная техническая документация и чертежи, изображения и т. д. Еще раз отметим, что спецификой этих документов является их непосредственная связь с техническими устройствами, которые используются при регистрации информации, при представлении документов, при обработке и хранении документов.
В данных методических указаниях приведены сведения по технологии разработки документов в формате .html. Зная основы технологии разработки документов в формате .html, можно разрабатывать документальные сайты, со ссылками на нормативно-справочные материалы, различные видеоматериалы, фотографии, аудиоматериалы, изображения, электронные документы в форматах MS Word, .pdf и т. д.
Данные методические указания предназначены для проведения курса лабораторных работ по дисциплине “Организация работы с технотронными документами” для студентов (бакалавров) дневной и заочной формы обучения по специальности 46.03.02 “Документоведение и архивоведение” (профиль – “Документационное обеспечение управления”).
Цель методических указаний – обеспечить студентов, бакалавров, основными сведениями по направлению квалифицированного применения технологии разработки технотронных документов в практике создания документальных сайтов.
Методические указания включают также задания к выполнению лабораторных работ, предусмотренных учебной программой.
Методические указания к курсу лабораторных работ по дисциплине “Организация работы с технотронными документами” разработаны на основе опыта преподавания автором ряда дисциплин в Ухтинском государственном техническом университете – по применению информационных технологий в сфере управления.
В методических указаниях учтены требования Федерального Государственного образовательного стандарта, методические указания структурно соответствуют рабочей учебной программе и тематическому плану изучения дисциплины “Организация работы с технотронными документами”.
1 WEB-документирование с использованием технологии HTML
1.1 Структура WEB -документа
1.1.1 Определения, термины, используемые при создании WEB-документа
Рассмотрим основные определения, которые используются при создании WEB-документа.
Отдельный документ, выполненный в формате HTML, называется:
WEB-документом;
HTML-документом;
WEB-страницей.
HTML-документ имеет расширение .htm или .html.
Гиперссылка – фрагмент текста WEB-документа (HTML-документа), который является указателем на другой файл или объект – WEB-страницу, WEB -документ, какие либо др. документы. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
Группа WEB-страниц, WEB-документов (HTML-документов), взаимосвязанных гиперссылками, образует структуру, которая называется Web-сайтом.
Элемент – конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая WEB-страница, WEB-документ или HTML-документ представляет собой набор вложенных элементов.
Тег – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-документа теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Например, элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <P> и конечным тегом (маркером) </p>. Тег <Font> вложен внутрь тега <P>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <P> указывает на то, что текст оформлен в отдельный абзац, а тег <Font> задает цвет шрифта – зеленый:
<P> <font color="green"> Текст </font> </p>
В результате форматирования на экране компьютера мы увидим текст зеленого цвета в отдельном абзаце.
Атрибут – свойство, характеристика элемента. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
В примере
<P align="center"> Этот текст будет выровнен по центру экрана </p>
атрибут align (выравнивание) расположен внутри тега <P> и задает выравнивание абзаца по центру экрана (значение атрибута – "center").
В таблице 1 приведена структура WEB-документа (HTML-документа).
Таблица 1 – Структура WEB -документа (HTML-документа)
<HTML> |
Этот тег указывает на начало Web-документа(HTML-документа) |
<HEAD> |
Этот тег указывает на начало области заголовка Web-документа (HTML-документа). Служит для формирования общей структуры документа |
<TITLE>Структура Web-документа (HTML-документа) </title> |
Элемент для размещения заголовка Web-документа (HTML-документа). Строка отображается в заголовке окна браузера |
</head> |
Конец области заголовка Web-документа (HTML-документа) |
<BODY bgcolor="blue"> |
Начало содержимого Web-документа (HTML-документа). Тег <BODY> включает в себя атрибут bgcolor, который задает цвет фона документа. В данном случае – голубой. По умолчанию цвет фона документа будет белым. |
<H2> Здесь расположен заголовок документа </h2> |
<H2> </h2> Элемент заголовка документа |
<P> Здесь расположен текст первого абзаца документа</p> |
<P> </p> Элемент абзаца документа |
<P> Здесь расположен текст второго абзаца документа </p> |
|
</body> |
Конец содержимого Web-документа (HTML-документа) |
</html> |
Конец Web-документа (HTML-документа) |
1.1.2 Синтаксические правила при создании WEB-документа (HTML-документа)
При создании WEB-документа (HTML-документа), учтем следующие синтаксические правила.
1. Взаимное расположение элементов документа HTML, HEAD, TITLE, BODY должно быть стандартным для любого документа:
<HTML>
<HEAD>
<TITLE>.....</title>
</head>
<BODY>
..................
</body>
</html>
2. Необходимо использовать конечные теги – </p>, </h1>, </table> и др.).
3. Не нарушать правила вложения тегов:
Правильно: <H1>Заголовок крупный <H2> Заголовок поменьше </h2> </h1>.
Неправильно:<H1>Заголовок крупный <H2> Заголовок поменьше </h1> </h2>.
4. Информация документа должна находится между начальным и конечным тегами, указывающими ее формат.
5. Все атрибуты располагаются в начальном теге.
6. Принято начальные теги писать ПРОПИСНЫМИ буквами (<H1>), а конечные – строчными буквами (</h1>).
Создание Web-документа (HTML-документа) выполним в Блокноте. Операция Сохранить как обеспечит сохранение Web-документа (HTML-документа) в формате .txt (рисунок 1).
Затем сохраним Web-документ (HTML-документ) в формате .html, выбирая Тип файла – Все файлы и задавая расширение сохраняемому файлу .html (рисунок 2). Полученный документ можно просмотреть в браузере.
Рисунок 1. – Сохранение текста Web-документа (HTML-документа)
в формате .txt
Рисунок 2. – Сохранение текста Web-документа(HTML-документа)
в формате .html
1.1.3 Форматирование Web-документа(HTML-документа)
Таблица 2 – Форматирование текста документа
Элемент документа |
Тег |
Атрибуты |
Пример |
1 |
2 |
3 |
4 |
Абзац |
<P> </p> |
<P align="left"> </p> - выравнивание текста по левому краю экрана. <P align="center> </p> - выравнивание текста по центру экрана. <P align="right"> </p> - выравнивание текста по правому краю экрана. |
<P align="center"> Текст этого абзаца выровнен по центру экрана </p>
|
Принудительный переход на новую строку |
<br> |
|
Уронили мишку на пол <BR> Оторвали мишке лапу <BR> Все равно его не брошу <BR> Потому что он хороший |
Выделение текста полужирным шрифтом |
<B> </b> |
|
Этот текст имеет обычное начертание, <B> а этот выделен полужирным шрифтом </b> |
Выделение текста курсивом |
<I> </i> |
|
Этот текст имеет обычное начертание, <I> а этот выделен курсивом</i> |
Определение типа, размера и цвета шрифта |
<FONT> </font> |
<FONT size=3> </font> - абсолютный размер шрифта (возможные значения от 1 до 7). <FONT color="blue"> </font> - цвет шрифта <FONT face="arial"> </font> - определение определенного шрифта. <FONT size=3 color="blue" face="arial"> </font> - все атрибуты могут быть использованы совместно внутри данного тега. |
<FONT size=1> Это шрифт 1 </font> <FONT size=2> Это шрифт 2 </font> <FONT size=3>Это шрифт 3 </font> <FONT size=4>Это шрифт 4 </font> <FONT size=5> Это шрифт 5 </font> <FONT size=6> Это шрифт 6 </font> <FONT size=7> Это шрифт 7 </font> <FONT color="blue"> Это шрифт синего цвета </font> <FONT face="arial" size=3 color="blue" > Это шрифт arial размером 3, цвет синий. </font> |
Маркированный список |
<UL> <LI> <LI> <LI> </ul> |
|
<UL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ul> |
Нумерованный список |
<OL> <LI> <LI> <LI> </ol> |
|
<OL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ol> |
1.1.4 Использование цвета при оформлении элементов WEB-документа (HTML-документа). Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий, фона и других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами, таблица 3.
Таблица 3 – Стандартные цвета элементов Web-документа(HTML-документа)
Цвет элементов страниц |
Английское наименование цвета |
Шестнадцатеричный код |
1 |
2 |
3 |
Аквамарин |
aqua |
#00FFFF |
Белый |
white |
#FFFFFF |
Желтый |
yellow |
#FFFF00 |
Зеленый |
green |
#008000 |
Золотистый |
gold |
#FFD700 |
Индиго |
indigo |
#4B0080 |
Каштановый |
maroon |
#800000 |
Красный |
red |
#FF0000 |
Оливковый |
oliv |
#808000 |
Пурпурный |
purple |
#800080 |
Светло-зеленый |
lime |
#00FF00 |
Серебристый |
silver |
#C0C0C0 |
Серый |
gray |
#808080 |
Сизый |
teal |
#008080 |
Синий |
blue |
#0000FF |
Ультрамарин |
navy |
#000080 |
Фиолетовый |
violet |
#EE80EE |
Черный |
black |
#000000 |
Цвет шрифта можно задать с помощью атрибута color в теге <FONT>, например,
<FONT color="FF5800"> Это цветной текст 1 </font>
<FONT color="blue"> Это цветной текст 2 </font>
Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например:
<BODY color=" silver ">
1.1.5 Использование изображений при оформлении WEB-документа (HTML-документа)
<IMG> – элемент для создания ссылки на графический файл (image). Он не содержит конечного тега – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки в WEB-документа (HTML-документа).
Необходимым атрибутом является src - указатель на файл графики:
src="Ссылка на файл".
Например:
<IMG src="bos2.gif> – где bos2.gif – рисунок.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height – высота и width – ширина.
Например:
<IMG src="bos2.gif" width="76" height="121">
<img src="bos2.gif" width="176">.
Атрибут border задает рамку вокруг объекта.
Например:
<IMG src="pantera.gif" border="2" alt="Большая черная кошка, которая гуляет сама по себе">
Пример с использованием изображения в формате .gif:
<html>
<head>
<Title>Компания ГE0TOH</title>
</head>
<body bgcolor=white text=red align=center>
<H1 align=center> Добро пожаловать на страничку компании ГЕОТОН! </h1>
<center> <img src="USER1.gif" border=1> </center>
<center> <font size=5> <b> <i> Здесь Вы узнаете
<a href="Пример_2_2.02.2012.html"> о нашей деятельности </a>,
о программных продуктах нашей компании <br> и об оборудовании, которое
мы производим </i> </b> </font> </center>
</body>
</html>
1.1.6 Использование ссылок при оформлении WEB-документа (HTML-документа)
<A> </a> – один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:
Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>
Например, так выглядит гиперссылка в тексте:
<a href="Пример_2_2.02.2012.html"> о нашей деятельности </a>
В данном примере ссылка на документ "Пример_2_2.02.2012.html" в формате .html.
Внутри тега <BODY> используются атрибуты link – задает цвет ссылок в WEB-документе, vlink – задает цвет посещенных ссылок, alink – задает цвет активных ссылок (цвет появляется при нажатии мыши).
Пример:
<BODY link="0000FF" vlink="CC0066" alink="FF0000">
По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл WEB-документа). В этом случае просто указывается имя файла, например: page2.htm, photo35.gif и т.д.
Если ссылка указывает на какой-либо WEB-ресурс, то она выглядит следующим образом, например:
href="http://www.netscape.com"
1.1.7 Использование таблиц в WEB-документах (HTML-документах)
Таблицы являются очень удобным средством форматирования данных в WEB-документах (HTML-документах). Они позволяют решать чисто дизайнерские задачи: выравнивать части документа друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в строке TD.
<TABLE> </table> - внешний элемент таблицы.
<TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.
<TD> </td> - элемент, задающий ячейку таблицы. Конечный тег также можно не использовать.
Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:
<TABLE> |
Начало таблицы |
<TR> |
Начало первой строки |
<TD> Первая ячейка первой строки</td> |
Первая ячейка первой строки |
<TD> Вторая ячейка первой строки</td> |
Вторая ячейка первой строки |
</tr> |
Конец первой строки |
<TR> |
Начало второй строки |
<TD>Первая ячейка второй строки</td> |
Первая ячейка второй строки |
<TD>Вторая ячейка второй строки</td> |
Вторая ячейка второй строки |
</tr> |
Конец второй строки |
</table> |
Конец таблицы |
Ширину таблицы можно задавать точно в пикселях или в процентном отношении к ширине страницы в окне браузера.
Например, если нам нужно задать таблицу определенного размера, то мы укажем:
<TABLE width= “500”>
<TR>
<TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>
</tr>
</table>
Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.
<TABLE width= “100%” bgcolor="#00CC99" border= “3” >
<TR>
<TD> </td>
<TD> Ширина этой таблицы 300 пикселей</td>
<TD> </td>
</tr>
<TR>
<TD> и она состоит из двух строк и трех столбцов</td>
<TD> </td>
<TD></td>
</tr>
</table>
Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:
<TABLE width= “100%” bgcolor= “#00CC99” border= “0” >
<TR>
<TD> </td>
<TD> Ширина этой таблицы 300 пикселей</td>
<TD> </td>
</tr>
<TR>
<TD> и она состоит из двух строк и трех столбцов</td>
<TD> </td>
<TD></td>
</tr>
</table>
Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:
left - выравнивание влево;
right - выравнивание вправо;
center - центрирование.
Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:
top - выравнивание по верхнему краю ячейки
center - выравнивание по центру
baseline - выравнивание по первой строке.
<table width="100%" border="1" cellspacing="0" cellpadding="5" align="center"> <tr> <td width="257">Выравнивание по горизонтали</td> <td width="233" align="center"> По центру </td> <td width="217" align="left"> По левому краю </td> <td width="246" align="right"> По правому краю </td> </tr> <tr> <td width="257" height="112">Выравнивание по вертикали</td> <td width="233" height="112" valign="top">По верхнему краю</td> <td width="217" height="112" valign="middle">По центру</td> <td width="246" height="112" valign="baseline">По нижнему краю</td> </tr> </table>
ЗАДАНИЯ К ЛАБОРАТОРНЫМ РАБОТАМ ПО КУРСУ
“ОРГАНИЗАЦИЯ РАБОТЫ С ТЕХНОТРОННЫМИ ДОКУМЕНТАМИ”
Лабораторная работа № 1.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 1).
Лабораторная работа № 2.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 2).
Лабораторная работа № 3.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 3).
Лабораторная работа № 4.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 4).
Лабораторная работа № 5.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 5).
Лабораторная работа № 6.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 6).
Лабораторная работа № 7.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 7).
Лабораторная работа № 8.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 8).
Лабораторная работа № 9.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 9).
Лабораторная работа № 10.
Используя технологию WEB-документирования, разработать электронную форму документа в формате .html (Приложение 10).