Практикум по решению задач на ЭВМ (стр. 15 )

Гипертекст. Средства создания гипертекста (2 ч.).

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

Компетентности: введение гиперссылок в документ, средства разработки Web-документов, преимущества и недостатки разработки Web-страниц с помощью прикладного ПО, мастера и шаблоны Web-страниц, теги, настройка атрибутов тегов при автоматизированной разработке Web-страниц.

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

Вопросы к теме: Почему для разработки Web-страниц используется специальный язык разметки гипертекста? Мы знаем, что с помощью текстового процессора Word вполне можно получать представительные документы. Почему нельзя использовать этот удобный и мощный текстовый процессор для разработки Web-документов? Как вы понимаете термин публикация в Интернете? В чем разница между Web-страницей и Web-узлом? Какие средства для разработки Web-страниц вы знаете? Почему мощные современные текстовые процессоры типа Word 9x не очень хорошо подходят для разработки Web-страниц? В чем состоят преимущества и недостатки разработки Web-страниц вручную с помощью тегов языка HTML в текстовом редакторе? В чем состоят преимущества и недостатки автоматизированной разработки Web-страниц с помощью специализированного редактора? Что такое мастер? В чем заключается разработка новой Web-страницы с помощью мастера? Что такое шаблон? В чем состоит разработка Web-страницы с помощью шаблона? Относительно небольшое количество тегов HTML обеспечивает большое разнообразие оформления Web-страниц. Это связано с тем, что действие большинства тегов можно настраивать и видоизменять с помощью атрибутов. Как выполняется настройка атрибутов тегов при автоматизированной разработке Web-страниц с помощью редактора FrontPage Express? Редактор FrontPage Express является облегченной версией более мощного редактора FrontPage Editor, входящего в состав пакета Microsoft FrontPage 97. В чем состоят ограничения облегченной версии?

Практические задания: Создание WEB-страниц с помощью Netscape Composer Запуск программы: Пуск/Программы /Netscape Communicator/Netscape Composer. При наведении курсора мыши на кнопку в строке подсказки выдается информация о назначении этой кнопки. Аналогично выдается подсказка по пунктам меню. Режимы работы 1.  Создание страницы 2.  Просмотр страницы в браузере Netscape Navigator или Internet Explorer После запуска программы создается пустая страница. Для последующей работы необходимо: 1.  Поменять кодировку - ВИД/КОДИРОВКА/КИРИЛЛИЦА Windows 1251 2.  Сохранить страницу на диске. 3.  Внести информацию на страницу. 4.  Просмотреть ее в браузере - Щелкнуть по кнопке БРАУЗЕР. После просмотра страницы окно Netscape Navigator можно закрыть. Можно просматривать страницу и в Internet Explorer. Для этого - запустить Explorer, ФАЙЛ/ОТКРЫТЬ/ОБЗОР - щелкнуть 2 раза по файлу и ОК. Размещение объектов на странице 1.  ТЕКСТ (изменение параметров текста можно сделать с помощью кнопок на панели инструментов либо п. меню ФОРМАТ) В программе Composer доступны два типа стилей форматов текста: ·  Форматы абзацев: содержат уровни заголовков, списки, отступы и параметры выравнивания. ·  Форматы символов: содержат типы шрифтов, стили, размеры и цвета. 2.  РИСУНКИ (кнопка РИСУНОК/ВЫБРАТЬ ФАЙЛ/ щелкнуть 2 раза по любому файлу-картинке/ОК ) Если выбран рисунок формата BMP необходимо согласиться с преобразованием изображения в формат JPG щелкнув по кнопке ОК. 3.  ГОРИЗОНТАЛЬНЫЕ ЛИНИИ (кнопка ЛИНИЯ) 4.  ТАБЛИЦЫ (Щелкните в том месте страницы, куда Вы хотите вставить таблицу. На панели инструментов щелкните по кнопке ТАБЛИЦА или из меню ВСТАВКА /ТАБЛИЦА.) Таблица может содержать текст и рисунки. Если сделать ширину рамки таблицы равной нулю, то текст в несколько строк можно будет разместить рядом с рисунком не отображая таблицу. Любой объект имеет свои свойства, которые можно изменять - выделив объект щелкнуть по нему правой кнопкой и из контекстного меню выбрать нужный пункт. Оформление страницы ФОРМАТ/ ЦВЕТА И СВОЙСТВА СТРАНИЦЫ (можно выбрать цветовую схему, отдельно цвет фона или фоновый рисунок) Ссылки. Гипертекстовая ссылка - это активная часть документа. Щелкнув по ссылке можно перейти ·  К определенной части той же Web-страницы. (ссылка по метке) ·  К другой WEB-странице. Объектом ссылкой может быть текст или рисунок. Создание ссылки: 1.  Выделите текст или изображение, для которого Вы хотите создать ссылку. 2.  В меню Вставка выберите Ссылка или щелкните по кнопке Ссылка, которая находится на панели инструментов. 3.  Укажите имя локального файла или адрес URL, чтобы загрузить файл щелкните кнопку ВЫБРАТЬ ФАЙЛ. Либо выбрать метку на текущей странице. Если создается переход в пределах текущей страницы, то предварительно надо создать метку в том месте куда будет осуществлен переход: Создание метки: 1.  Щелкнуть в то место, где надо разместить метку 2.  Щелкнуть по кнопке МЕТКА 3.  Ввести имя метки Удаление ссылки: можно удалить сам объект либо удалить только гиперссылку: 1.  Выделить объект являющийся ссылкой 2.  Щелкнуть по кнопке ССЫЛКА 3.  Щелкнуть по кнопке УДАЛИТЬ ССЫЛКУ Все изменения вносимые в страницу перед ее просмотром необходимо сохранить. Чтобы увидеть структуру страницы на языке HTML надо п. меню ПРАВКА/ ИСТОЧНИК HTML. Задания. 1.  Подготовительная работа: создать папку Project на диске N, в своей папке. В папке Project создать папку Pictures. Скопировать в папку Project \Pictures графические файлы из папки lab1_web-pages\pictures. 2.  Создать страницу, сохранить ее под именем index. htm в папке Project. (расширение не вводить, программа дает его автоматически) 3.  Выбрать кодировку ВИД/КОДИРОВКА/КИРИЛЛИЦА Windows 1251 4.  Набрать текст: «Главная страница.», выбрать ФОРМАТ/ЗАГОЛОВОК – 3, цвет – синий, выравнивание – по центру. 5.  Вставить таблицу из 2-х столбцов и двух строк. В первую ячейку поместить текст «Для того чтобы разместить текст в две колонки или рисунок рядом с текстом необходимо использовать таблицу.». Во вторую ячейку вставить рисунок из файла Pictures\LOOK. gif 6.  Просмотреть страницу в броузере. Закрыть окно броузера и вернуться в редактор. 7.  Щелкнуть правой кнопкой по ячейке с текстом и выбрать «Свойства таблицы». Убрать галочку «Ширина рамки» и нажать кнопку «Применить»/ «Ок». Снова просмотреть страницу в броузере. В чем разница? 8.  В остальные ячейки разместить информацию из файла «Информация для создания проекта» 9.  Добавить еще один столбец слева в таблицу. Разместить в ячейке этого столбца произвольный рисунок. 10.  После таблицы вставить текст. В тексте необходимо выделить все термины красным цветом и курсивом. 11.  Между двумя абзацами текста после таблицы вставить горизонтальную линию. 12.  В конец получившегося документа вставить метку. Дать ей имя m1. Значок показывает расположение метки. 13.    Выделить во второй ячейке таблицы словосочетание «(ссылка по метке)» . Щелкнуть правой кнопкой и выбрать «Создать ссылку используя выделение». Заполнить диалоговое окно как показано на рисунке: После чего сохранить страницу и просмотреть ее в броузере. Использовать кнопку «Назад», для возврата на начало страницы. Закрыть окно броузера. 14.  Создать новый документ. Текстовую информацию взять из файла «Информация для создания проекта». Выделить цветом основные понятия, заголовки сделать шрифтом 18. 15.  Сохранить второй документ под именем page2 в папке Project и закрыть. 16.  Вернуться в документ index. htm и выделить словосочетание «К другой WEB-странице». Щелкнуть правой кнопкой и выбрать «Создать ссылку используя выделение». В диалоговом окне нажать «Выбрать файл» и указать на page2.htm 17.  Разместить на второй странице анимированную картинку: файл SMILE(1).gif 18.  Сделать фоном страницы графический файл back. jpg. Для этого: щелкнуть правой кнопкой по странице выбрать - Параметры страницы/Цвет и фон – выбрать файл - back. jpg. 19.  Сделать анимированный рисунок ссылкой на страницу index. htm. 20.  Исправить сделанную ссылку таким образом, чтобы переход осуществлялся на метку m1, расположенную на странице index. htm. Проверить как работает ссылка. Дополнительные задания: 1.  Создать третью страницу (page3.htm), на которой разместить нумерованный список, произвольный рисунок. Фон страницы сделать каким либо цветом из предлагаемой палитры. (1 балл) 2.  Сделать текстовую ссылку со страницы index. htm на page3.htm. (0,5 балла) 3.  Сделать графическую ссылку с page3.htm на страницу page2.htm. (0,5 балла)

Материал для самостоятельной работы Разработка индивидуального проекта Информация для создания проекта: Текст для таблицы: Текст может быть представлен в виде списка: нумерованного или маркированного. Список делается с помощью соответствующих кнопок. Пример: Элементы страницы: текст рисунки таблицы горизонтальные линии Гипертекстовая ссылка - это активная часть документа. Щелкнув по ссылке можно перейти К определенной части той же Web-страницы. (ссылка по метке) К другой WEB-странице. Текст после таблицы: HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор. Информация для второй страницы Структура документа Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так: <HTML> ...тело документа... </HTML> Комментарии Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария: <!-- Это комментарий --> Комментарии могут встречаться в документе где угодно и в любом количестве.

КИМ для самоконтроля: Тестовые задания Выберите вариант ответа, наиболее полным образом завершающего утверждение. 1. В цикле разработки Web-сайта можно выделить следующие фазы: 1. Программирование. 2. Публикация и Маркетинг. 3. Тактическое планирование. Разработка структуры сайта. 4. Дизайн интерфейса. 5. Стратегическое планирование. Определение объема работ. Укажите верную последовательность этапов. 1) 5, 3, 1, 2, 4; 2) 5, 3, 4, 1, 2; 3) 2, 4, 3, 1, 5; 4) 2, 4, 3, 1, 2; 5) 4, 5, 3, 2, 1. 2. Как называют одну или несколько связанных Web-страниц по некоторой теме? 1) Web-сайт 2) Web-сервер 3) Web-документ 4) браузер 5) HTML-документ 3. HTML (HYPER TEXT MARKUP LANGUAGE) является: 1) системой программирования; 2) графическим редактором; 3) системой управления базами данных; 4) средством создания WEB-страниц; 5) экспертной системой. 4. Файл primer. html является … файлом. 1) текстовым; 2) графическим; 3) гипертекстовым; 4) видео; 5) аудио. 5. Отличительной чертой Web-документа является: 1)  отсутствие строго определенного формата; 2)  то, что его тиражирование осуществляется составителем документа; 3)  наличие в нем гипертекстовых ссылок; 4)  отсутствие в нем иллюстраций; 5)  его компактность. 6. Укажите программу браузер 1)  Microsoft Internet Explorer; 2) Блокнот; 3) Microsoft Power Point; 4) Microsoft Word; 5) нет верного ответа. 7. Используя какую программу можно сконструировать Web-страницу? 1)  Microsoft Internet Explorer; 2) Блокнот; 3) Microsoft Power Point; 4) Microsoft Word; 5) нет верного ответа. 8. … позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами — браузерами. 1) Программы; 2) Web-страницы; 3) Гиперссылки; 4) Экспертные системы; 5) Тэги. 9. Существуют два типа тэгов: 1) Одноэлементный, двухэлементный; 2) двухэлементный и парный; 3) одинарный и парный; 4) Одноэлементный, парный; 5) нет верного ответа. 10. Графическая, видео - и аудиоинформация содержится в отдельных файлах и принимается … согласно ссылкам в документе на эти файлы. 1) пользователем; 2) программой; 3) проводником; 4) почтовой программой; 5) браузером. 11. Первый парный тэг, который должен находиться в любом HTML-документе - это … 1) <NАМЕ>; 2) <НRЕF>; 3) <HTML>; 4) <BODY>; 5) <START>. 12. Весь HTML-документ, включая весь текст без заголовка, содержится внутри тэга 1) <NАМЕ>; 2) <НRЕF>; 3) <HTML>; 4) <BODY>; 5) <START>. 13. Как в HTML записываются ссылки на документы, хранящиеся на других серверах? 1) <А NАМЕ="имя файла"></А>; 2) <UL><LI></UL>; 3) с указанием их URL; 4) <А НRЕF="имя файла"></А>; 5) с указанием их www. 14. Одноэлементный тэг перевода строки, отделяющий строку от последующего текста или графики 1) <BR>; 2) <UL>; 3) <А>; 4) <U>; 5) нет верного ответа. 15. Тэги выделения фрагментов текста управляют отображением отдельных символов и слов. Какой парный тэг используют для выделения курсивом? 1) <UL> … </UL>; 2) <А> ... </А>; 3) <I> … </I>; 4) <U> … </U>; 5) нет верного ответа. 16. Что описывает строка <TITLE> Учебный файл HTML </TITLE>? 1) тело HTML документа; 2) название HTML документа; 3) название файла HTML документа; 4) содержание Web-страницы; 5) заголовок HTML документа. 17. Какое комбинированное выделение описано строкой: <I><В>Расписание </В></I> <I>занятий</I> <U> на вторник</U> 1) Расписание занятий на вторник; 2) Расписание занятий на вторник; 3) Расписание занятий на вторник; 4) Расписание занятий на вторник; 5) Расписание занятий на вторник. 18. Атрибут выравнивания текста ALIGN не может принимать значение 1) CENTER; 2) RIGHT; 3) LEFT; 4) JUSTEFY; 5) DOWN. 19. Для того чтобы задать необходимые цвета фона и текста, то это надо сделать в начале файла HTML в тэге 1) <HTML>; 2) <TITLE>; 3) <BODY>; 4) <BACKGROUND>; 5) нет верного ответа. 20. В начале файла HTML в тэге <BODY> с помощью атрибута VLINK= определяют цвет 1) фона страницы; 2) текста для всей страницы; 3) не просмотренных гиперссылок; 4) просмотренных гиперссылок; 5) первой страницы. 21. Программное средство в стандартной поставке Windows, которое используется для добавления текста, изменения тегов HTML и редактирования сценариев VBScript на странице доступа к данным. 1) Microsoft Script Editor; 2) Visual Basic; 3) Java Script; 4) Home Site; 5) Microsoft Word.  22. При сохранении документа в качестве Web-страницы текстуры и градиенты сохраняются в виде 1) дополнительного файла; 2) файла настроек; 3) JPEG-файлов; 4) графики; 5) кодированного файла. 23. Цветной подчеркнутый текст или графический объект, по щелчку которого выполняется переход к файлу, фрагменту файла или странице HTML в интрасети или Интернете. Какой объект описан? 1) web-страница; 2) метка; 3) ссылка; 4) картинка; 5) гиперссылка. 24. Гипертекстовые ссылки требуют наличия частей: 1) заголовок и тело ссылки; 2) метки и ссылки; 3) основной текст и ссылки; 4) метки и разметка документа; 5) необходимо все перечисленное в 1)-4). 25*. Графические изображения в Web, как правило, распространяются в трех форматах: GIF, JPG, PNG. Укажите одиночный тэг, который позволяет вставить в документ изображение. 1) <IMG>; 2) <ALT>; 3) <IMG> … </IMG>; 4) <HTML>; 5) <BODY>. 26*. Что описывает фрагмент? <BODY BACKGROUND="..\IMAGES\BG. JPG"> 1) иллюстрация на Web-странице; 2) иллюстрация в документе; 3) эмблема в заголовке; 4) фоновое изображение, 5) изображение на титульном листе. 27*. Corel Web Desinger, Frontpage, Home Site, HotDog Webmaster, Hot Metal, Microsoft Word. Перечисленные программные средства позволяют 1) создавать Web-страницы; 2) создавать и редактировать Web-страницы; 3) редактировать Web-страницы; 4) программировать; 5) создавать и редактировать Word документы. 28*. … структура Web-сервера сходна по организации с файловой системой: крупные разделы (директории) - рубрики (каталоги) - информационные блоки (подкаталоги). При внешней логичности и законченности такой структуры по ней достаточно сложно перемещаться: необходимо помнить названия основных разделов, пройденный путь, периодически возвращаться к основной странице (к началу). 1) Каталожная, 2) Древовидная, 3) Книжная, 4) Пространственная, 5)Плоская. Правильные ответы № 1 2 3 4 5 № 1 2 3 4 5 1 X 15 X 2 X 16 X 3 X 17 X 4 X 18 X 5 X 19 X 6 X 20 X 7 X 21 X 8 X 22 X 9 X 23 X 10 X 24 X 11 X 25 X 12 X 26 X 13 X 27 X 14 X 28 X

Основная учебная литература по теме 1.  Информатика. Учебное пособие. Под редакцией Симоновича, С-Пб., 2000. 2.  , Практикум по компьютерной технологии. М., АБФ, 1998. 3.  Могилев А. В., , Информатика. Под редакцией Хеннера, М., Академия, 2000. 4.  , , Практикум по информатике. М., Академия 2000. 5.  , и др. Информатика: Задачник-практикум. – М.: Лаборатория базовых знаний, 1999. – Т. 1, 2. 6.  и др. Специальная информатика: Учебное пособие. – М.: АСТ-ПРЕСС: Инфорком-Пресс, 1999. 7.  Информатика и информационные технологии. Уч. Пособие для 10-11 классов. Углубленный курс. – М.: Лаборатория Базовых Знаний, 2000. – 440 с.: ил. 8.  Информатика и информационные технологии. – М.: Лаборатория базовых знаний: АО «Московские учебники», 2002.

Практическое занятие №25-26