Организация гипертекстовых ссылок.

М.Ф. Меняев , И.Ф. Пряников

Информационные ресурсы в менджменте
Часть 2:

Методические указания

 к лабораторному практикуму

Издание третье, исправленное и дополненное

Москва
Издательство МГТУ им. Н. Э. Баумана
2016 г.
УДК 004.453

Рецензенты:

Ж. М. Кокуева, кандидат технических наук, доцент;

                Меняев М.Ф., Пряников И.Ф. Информационные ресурсы в менеджменте. Часть 2: Информационная деятельность менеджера Методические указания. ‑М.: Изд-во МГТУ им. Н.Э. Баумана, 2013.‑ с.

                ISBN

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

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

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

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

УДК 004.453                                                     

ISBN                                                               ãМГТУ им. Н. Э. Баумана, 2007

СОДЕРЖАНИЕ

ВВЕДЕНИЕ............................................................................................ 3

1. ФОРМИРОВАНИЕ ТЕКСТА WEB-ДОКУМЕНТА....................... 6

2. СПИСКИ И ТАБЛИЦЫ В WEB-ДОКУМЕНТАХ......................... 13

3. ПРИМЕНЕНИЕ ГРАФИКИ И ФРЕЙМОВ ДЛЯ ОРГАНИЗАЦИИ
 WEB-ДОКУМЕНТОВ............................................................................ 21

4. ФОРМИРОВАНИЕ ИНТЕРАКТИВНЫХ ДОКУМЕНТОВС
ИСПОЛЬЗОВАНИЕМ ТЕКСТОВОГО РЕДАКТОРА...................... 26

5. ФРЕЙМОВЫЙ WEB ДИЗАЙН...................................................... 37

6. ТАБЛИЧНЫЙ WEB ДИЗАЙН……………………………..…….48

РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА................................................... 52

ВВЕДЕНИЕ

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

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

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

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

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

Развитие навыков применения языка HTML осуществляется в процессе изучения второй темы "Списки и таблицы в Web-документах". Здесь рассматриваются методы установки списков и таблиц на страницах Web-документа помощью языка HTML: маркированный список, графические маркеры, нумерованный список, списки определений, вложенный списки, простые таблицы, форматирование данных внутри таблицы, цвет в таблицах, сложные таблицы, вложенные таблицы, особенности построения таблиц и др.

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

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

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

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

ТЕМА 1: ФОРМИРОВАНИЕ ТЕКСТА WEB-ДОКУМЕНТА

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

Задание для самостоятельной работы

Подготовка HTML-документа.

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

Для подготовки к записи HTML-документа следует выполнит следующие операции.

1.1.Вызвать на поле экрана стандартный текстовый редактор WordPad или Блокнот.

a)  Сохранить текущий документ в рабочей папке под именем 3_1_ФИО (Первые буквы фамилии имени и отчества обучаемого) с расширением .html, используя. опцию "Сохранить как...".

b) Разместить рабочее поле текстового редактора на левой половине экрана,

c) Вызвать браузер Internet Explorer и установить его на левой половине экрана,

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

1.2.Записать заголовок. Для его написания следует придерживаться следующих правил:

Тэг <HTML> открывает документ, тэг </HTML> закрывает документ,

HTML-документ состоит из двух областей: области заголовка и области содержания.

Тэг <HEAD> открывает область заголовка </HEAD> закрывает область заголовка,

Установить тэги заголовка внутри пары тэгов <HTML>.

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

Тэг <TITLE> определяет название документа, тэг <BASE> указывает полный базовый URL-адрес документа с помощью обязательного параметра HREF="URL".

Для записи названия документа следует выполнить следующие операции:

a) В поле заголовка установить пару тэгов <TITLE> и записать между ними строку "Самостоятельная работа №3_ФИО".

b) Сохранить измененный текст в текстовом редакторе, обращая внимание на расширение .html .

c) Активизировать браузер, щелкнув по кнопке "Обновить". Обратить внимание на содержание верхней строки окна браузера. Она должна отобразить название документа. Запомнить URL-адрес документа, размещенный в поле адресной строки.

1.3.Оформить содержательную часть документа:

a) Перейти на поле текстового редактора и установить пару тэгов <BODY> после тэга </HEAD>.

b) Установить курсор между парой <BODY> и несколько раз нажать на клавишу "Ввод", чтобы расширить поле для строк разметки текста документа.

Запись текста.

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

2.1.Установка заголовка на поле документа:

Для выделения заголовка используются 6 стилей, обозначаемых как H1, H2, H3,..., H6.

Формат записи <Hi>Заголовок</Hi>, заголовок выделен полужирным шрифтом и размещен по центру.

Выполнить следующие операции:

a) Записать в начале содержательной части 4-е строки заголовка, увеличивая шрифт заголовка каждой следующей строки: Наименование университета, наименование факультета, наименование специальности, фамилия имя отчество студента.

b) Перейти на окно браузера, нажать на кнопку "Обновить".

2.2.Запись отдельных строк текста.

Для построчной записи текста в конце каждой строки следует установить непарный тэг <BR>.

Формат записи: Текст строки <BR>.

Если на экране строка не умещается, то браузером автоматически устанавливается перенос.

Тэг <NOBR> </NOBR> запрещает перевод строк. Если строка превысит размер экрана, то в рабочем окне браузера появится линейка прокрутки.

В качестве упражнения разделить следующий текст на пять строк, используя тэг <BR>: Нам не дано предугадать, Как слово наше отзовется, ‑ И нам сочувствие дается, Как нам дается благодать... Ф. И. Тютчев.

Перейти на окно браузера, нажать на кнопку "Обновить" и проверить результат разметки текста.

2.3.Запись текста по абзацам.

Запись абзаца определяется парой тэгов <P> </P>. Между абзацами автоматически устанавливается пропуск строки.      
Для размещения текста внутри абзаца используется атрибут: ALIGN=LEFT½CENTER½RIGHT½JUSTIFY (слева, по центру, справа, по ширине), например <P ALIGN=CENTER>...</P>.

Выполнить следующее задание:

a) На четырех строках разместить фразу "Форматирование абзаца", размещая ее по правому краю, по левому краю, по центру и по ширине соответственно. В последнем случае, чтобы понять работу атрибута, следует повторить фразу 10 раз.

b) Перейти на окно браузера, нажать на кнопку "Обновить" и проверить результат.

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

<B> </B>                  полужирный,

<I> </I>        курсив,

<U> </U>                 подчеркивание,

<TT> </TT>  машинопись (фиксированная ширина знаков и пробелов).

<BIG> </BIG> шрифт текста большего размера

<SMALL> </SMALL> шрифт текста меньшего размера

<SUB> </SUB>      сдвигает текст ниже уровня строки и уменьшает его размер,

<SUP> </SUP>      сдвигает текст выше уровня строки и уменьшает его размер,

<BLINK> </BLINK> отображает мигающий текст,[1]

<FONT> </FONT>  указывает параметры шрифта. Тэг содержит параметры FACE, SIZE, COLOR - соответственно: название шрифта (ARIAL и т.п.), размер в условных единицах от 1 до 7 (по умолчанию 3), цвет шрифта #RRGGBB (или название цвета - green, red и т.п.) или #RGB, используя числовые значения насыщения, которые можно взять в соответствующих опциях графических редакторов..

<BASEFONT> параметры шрифта, используемые в тексте по умолчанию (переопределяются в тексте с помощью тэга FONT). В конструкции НЕТ закрывающего тэга.

a) Записать заголовок текущего задания и построчно название первых 4-х физических стилей, используя на каждой строчке соответствующую форму выделения текста.

b) Начать новый абзац и перенести копию текста (п. 2.2) представить его с помощью шрифта большего размера.

c) Перенести строку автора текста (п. 2.2.) и представить ее с помощью шрифта меньшего размера.

d) В новом абзаце записать математическую формулу: (X+Y)*Z^X-Y.

e) На новой строке записать химическую формулу C₆H₁₂O₅.

f) Перейти на окно браузера, нажать на кнопку "Обновить" и проконтролировать результат разметки.

g) Установить параметры шрифта по умолчанию в заголовке программы и оценить результат.

h) Убрать строку с установкой параметров шрифта по умолчанию.

2.5.Применение логических стилей для организации фрагментов текста.

Фрагменты с логическим форматированием браузеры отображают определенным образом по умолчанию, (логическое форматирование предпочтительнее физическому). Логические стили поддерживаются следующими тэговыми конструкциями:
ADDRESS> </ADDRESS> - выделение курсивом адреса корреспондента,

<BLOCKQUOTE> </BLOCKQUOTE> - цитируемый абзац, отступы справа в тексте фрагмента и др.

Выполнить следующие задания:

a) В режиме текстового редактора на первой строке содержательной части HTML-документа записать сведения об авторе документа (Фамилия, инициалы, время записи документа), используя логический стиль. Перейти на окно браузера, нажать на кнопку "Обновить" и просмотреть результат.

b) Найти Web-страницу кафедры и скопировать фрагмент сопроводительного текста. Перенести этот фрагмент на поле формируемого HTML-документа и оформить этот фрагмент как цитируемый абзац. Перейти на окно браузера, нажать на кнопку "Обновить".

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

<PRE> </PRE> и применяется для выравнивания текста и подготовки таблиц. В пределах этого тега СОХРАНЯЮТСЯ все пробелы, т.е. пробелами можно «выравнивать» положение текста на строке. Однако необходимо учесть, что после тега <PRE> </PRE> обязательно формируется пустая строка.

Выполнить следующее задание:

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

b) Перейти на окно браузера, нажать на кнопку "Обновить" и проверить результат.

2.7. При использовать в тексте символов, которые используются для разметки текста[2] применяют следующие подстановки:

Зарезервированные символы:

знак "<" заменяется на "&lt"

знак ">" заменяется на "&gt"

знак "&" заменяется на "&amp"

знак " заменяется на "&quot"

Знаки вне клавиатуры записываются: &знак

Символы ASCII-кода устанавливаются: &#код

Неразрывный пробел: &nbsp

Комментарий в тексте HTML-кода: <!--текст комментария--> (в этом случае текст документа не выводится на экран).

Выполнить следующие упражнения:

a) По центру строки записать: "Тэг <BR> определяет обрыв строки (Line Break)".

b) На последней строке документа записать: ÓФИО, год (ASCII-код знака "Ó" соответствует числу 169, можно также использовать комбинацию "&copy"). Перейти на окно браузера, нажать на кнопку "Обновить" и проверить результат.

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

2.8.Выделение произвольного фрагмента текста с помощью изменения его параметров можно осуществить с помощью следующей пары тэгов:

<DIV> </DIV> - тег-контейнер, управляющий фрагментом текста с помощью назначения стилей. Например: <DIV STYLE="color:blue"> (в качестве кода цвета можно указать #0000FF)

Выполнить следующее задание:

a) Выделить цветом ранее подготовленную таблицу с преформатированным текстом.

b) Перейти на окно браузера, нажать на кнопку "Обновить".

Организация гипертекстовых ссылок.

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

3.1. Для установки гиперссылок следует использовать следующие тэговые конструкции:

Тэг <A> </A> - указатель ссылки, между тэгами которого устанавливается текст указателя. Здесь можно записать текст, установить, рисунок, дать адрес Web-страницы и т.д.

Например: <A HREF="URL">текст указателя</A>. (HREF - Hypertext REFerence)

Для понимания механизма организации в тексте ссылок на другие Web-страницы следует выполнить перечень операций:

a) Записать фразу: Студент ФИО учится в университете ..... на факультете......на кафедре.... Вместо точек указать реальный текст, оформив его в виде гиперссылок на соответствующие Web-страницы университета, факультета, кафедры.

b) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперсвязей.

3.2.Гиперсвязи можно использовать для формирования оглавления документа. Такие гиперссылки определяются как внутренние ссылки.

Для разделения документа на главы (части) следует использовать указатель, который необходимо установить в начале каждой главы (части, раздела) текста: <A NAME=имя_части> </A>. (в качестве "имя_части" можно записать "Label_1" и т.д.). Имя главы должно состоять из одного слова, для чего можно использовать знак "_".

Для создания ссылки на соответствующий указатель, размещенный в текущем документе, следует в параметре HREF указать имя ссылки с префиксом #, например <A HREF="#имя_части">Подготовка документа</A>.

Сформировать оглавление для текущего документа:

a) Установить указатели в начале выполненных упражнений, выполненных по следующим пунктам заданий: 1, 2.1., 2.4., 2.7., 3., присвоив им соответствующие имена (имя_части).

b) Записать построчно в начале содержательной части документа оглавление, со ссылками на соответствующие указатели.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперссылок.

4.Копировать текст текущего задания в рабочую папку, присвоив ему имя 3_2_ФИО. Организовать текст задания с подробным оглавлением в форме HTML-документа.