|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
WEB-документирование с использованием технологии HTML ⇐ ПредыдущаяСтр 2 из 2
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-документа)
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.1.4 Использование цвета при оформлении элементов WEB-документа (HTML-документа). Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий, фона и других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами, таблица 3.
Таблица 3 – Стандартные цвета элементов Web-документа(HTML-документа)
Цвет шрифта можно задать с помощью атрибута 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 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" >
ЗАДАНИЯ К ЛАБОРАТОРНЫМ РАБОТАМ ПО КУРСУ “ОРГАНИЗАЦИЯ РАБОТЫ С ТЕХНОТРОННЫМИ ДОКУМЕНТАМИ”
Лабораторная работа № 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). ЗАКЛЮЧЕНИЕ В методических указаниях показана практика создания технотронных документов, при этом, основное внимание уделялось технологии WEB–документирования. Изучение технологии WEB–документирования позволит квалифицированно использовать средства информационных технологий для разработки документальных сайтов для организаций в целях повышения эффективности управления. Методические указания разработаны для студентов, бакалавров, обучающихся по направлению 46.03.02 “Документоведение и архивоведение”, профиль – “Документационное обеспечение управления”. Методические указания разработаны с обязательным учетом требований Федерального Государственного образовательного стандарта, структурно соответствуют рабочей учебной программе и тематическому плану изучения дисциплины “Организация работы с технотронными документами”. Получение студентами знаний и практических навыков работы по WEB–документированию является составным элементом общей информационной культуры современного молодого специалиста (бакалавра), служит основой для дальнейшего роста профессионального мастерства. БИБЛИОГРАФИЧЕСКИЙ СПИСОК 1. Бжезинский З. Между двумя веками: роль Америки в эру технотроники = Between Two Ages: America's Role in the Technetronic Era / пер. с англ И. М. Максимовой. - М.: Прогресс, 1972. -308 с. 2. Корнеев В.В., А.Ф. Гарев, С.В. Васютин, В.В. Райх. Базы данных. Интеллектуальная обработка информации. – М.: Нолидж, 2000. – с. 254-270. 3. Карпова Т.В., Базы данных. Модели, разработка, реализация.– СПб.: Питер, 2002.-304 с. 4. Панафидин, Ф.А. Документоведение и документационное обеспечение управления: Практикум / Ф.А. Панафидин. – Волгоград: Волгоградское научное издательство, 2012. – 108 с. 5. Павленко, О.А.Документирование управленческой деятельности: учебное пособие/О.А. Павленко, Шахтинский ин-т (филиал) ЮРГТУ (НПИ). – Новочеркасск: ЮРГТУ, 2009. - 243 с. 6. Смирнова, Г.Н. Проектирование электронных систем управления документооборотом: Учебное пособие, практикум по курсу/ Г.Н. Смирнова. – Московский государственный университет экономики, статистики и информатики. – М.: 2004. – 127 с. 7. Фионова, Л.Р.Организация и технология документационного обеспечения управления: Конспект лекций /Л.Р. Фионова. – Пенза: Изд-во Пенз.гос. ун-та, 2008.– 159 с. 8. Шишов, О.В. Современные технологии и технические средства информатизации [Электронный ресурс]: Учебник / О.В. Шишов. – М.: НИЦ Инфра-М, 2012. – 462 с. – Режим доступа: электронная библиотечная система http: //znanium.com ПРИЛОЖЕНИЕ 1
ПРИЛОЖЕНИЕ 2
ПРИЛОЖЕНИЕ 3
ПРИЛОЖЕНИЕ 4
ПРИЛОЖЕНИЕ 5
ПРИЛОЖЕНИЕ 6 Смета № 1 |
Последнее изменение этой страницы: 2017-05-05; Просмотров: 627; Нарушение авторского права страницы
