Гипертекста HTML и редактора front page

Тема: СОЗДАНИЕ WEB-СТРАНИЦЫ С ПОМОЩЬЮ ЯЗЫКА РАЗМЕТКИ

Цель занятия. Изучение информационной технологии подготовки материалов для размещения их в Интернете.

Задание 1. Создание простейшей Web-страницы

1. Запустите текстовый редактор Блокнот (Пуск/Программы/Стандартные/ Блокнот).

2. Введите следующий документ:

< HTML>

< HEAD>

< ТIТLЕ> Заголовок документа< /ТIТLЕ>

< /HEAD>

< BODY>

Содержание

документа

< /BODY>

< /HTML>

3. Сохраните этот документ под именем prim1.htm

Перед сохранением убедитесь, что сброшен флажок Скрывать расширения для зарегистрированных типов файлов (Пуск/Настройка/Панель управления/Свойства папки/Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение.ТХТ.

4. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

5. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim1.htm.

6. Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?

7. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.

Задание 2. Изучение приемов форматирования абзацев

1. Откройте документ prim1.htm в программе Блокнот.

2.Удалите весь текст, находящийся между тегами < BODY> и < /BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY>, а его конкретное содержание может быть любым.

3. Введите заголовок первого уровня, заключив его между тегами < Н1 > и < /Н1>.

4. Введите заголовок второго уровня, заключив его между тегами < Н2> и < /Н2>.

5. Введите отдельный абзац текста, начав его с тега < Р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.

6. Введите тег горизонтальной линейки < HR>.

7. Введите еще один абзац текста, начав его с тега < Р>.

8. Сохраните этот документ под именем prim2.htm

9. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

10. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim2.htm.

11. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.

Задание 3. Создание гиперссылок

1. Откройте документ prim1.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами < BODY> и < /BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY>.

3. Введите фразу: Текст до ссылки.

4. Введите тег: < А HREF=«prim1.htm»>.

5. Введите фразу: Ссылка.

6. Введите закрывающий тег < /А>.

7. Введите фразу: Текст после ссылки.

8.Сохраните документ под именем prim3.htm

9. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

10.Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл prim3.htm.

11. Убедитесь в том, что текст между тегами < А> и < /А> выделен как ссылка (цветом и подчеркиванием).

12. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.

13. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

Задание 4. Создание изображения и использование его на Web-странице

1. Откройте программу Paint (Пуск/Программы/Стандартные/Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок /Атрибуты).

2.Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.

3. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.

4.Сохраните рисунок под именем «pic1.gif» (в формате GIF).

В некоторых версиях Windows программа Paint позволяет создавать рисунки GIF с прозрачным фоном. В этом случае диалоговое окно Атрибуты (Рисунок/Атрибуты) содержит флажок Использовать прозрачный цвет фона.

5. Откройте документ prim1.htm в программе Блокнот.

6. Удалите весь текст, находящийся между тегами < BODY> и < /BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY>.

7. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.

8. Введите тег < IMG SRC=«pic1.gif» ALIGN=«BOTTOM»>.

9. Сохраните документ под именем prim4.htm.

10. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

11. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim4.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

12. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN=«TOP». Сохраните файл под тем же именем.

13. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

Задание 5. Приемы форматирования текста

1. Откройте документ prim1.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами < BODY > и < / BODY >. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY >, а его конкретное содержание может быть любым.

3. Введите тег < BASEFONT SIZE=«5» COLOR=«BROWN»>. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

4. Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега < Р>.

5. Введите теги: < P> < FONT SIZE=«-2» FACE=«ARIAL» COLOR=«GREEN»>,

6. Введите очередной абзац текста, закончив его тегом < /FONT>.

7. В следующем абзаце используйте по своему усмотрению парные теги: < В> (полужирный шрифт), < I> (курсив), < U> (подчеркивание), < S> (вычеркивание), < SUB> (нижний индекс), < SUP> (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги: < ЕМ> (выделение), < STRONG> (сильное выделение), < CODE > (текст программы), < KBD> (клавиатурный ввод), < SAMP> (пример вывода), < VAR> (компьютерная переменная).

9. Сохраните полученный документ под именем prim5.htm.

10. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

11. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim5.htm.

Задание 6. Приемы создания списков

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ prim1.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами < BODY> и < /BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY>, а его конкретное содержание может быть любым.

3. Вставьте в документ тег < OL TYPE=«I»>, который начинает упорядоченный (нумерованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом < LI>.

5. Завершите список при помощи тега < /OL>.

6.Сохраните полученный документ под именем prim6.htm.

7. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

8.Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim6.htm.

9. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=

10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

11. Вставьте в документ тег < UL TYPE=«SQUARE»>, который начинает неупорядоченный (маркированный) список.

12. Вставьте в документ элементы списка, предваряя каждый из них тегом < LI>.

13. Завершите список при помощи тега < /UL>. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=

15. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

16. Вставьте в документ тег < DL>, который начинает список определений.

17. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом < DT>.

18. Вставьте в список соответствующие определения, предваряя их тегом < DD>.

19. Завершите список при помощи тега < /DL>. Сохраните документ под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Wеb-страницы список определений.

Задание 7. Создание таблиц

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ prim1.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами < BODY> и < /BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега < BODY>. В данном упражнении используется список номеров телефонов.

3. Введите тег < TABLE BORDER=«10»WIDTH=«100%»>.

4. Введите строку: < CAPTION ALIGN=«TOP»> Cписок телефонов< /САРТION>.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

< TR BGCOLOR=«YELLOW ALIGN=«CENTER»> < ТН> Фамилия< ТН> Номер телефона

6. Определите последующие строки таблицы, предваряя каждую из их тегом < TR> и помещая содержимое каждой ячейки после тега < TD>.

7. Последнюю строку таблицы задайте следующим образом:

< TR> < TD ALIGN=«CENTER» COLSPAN=«2»> Ha первом этаже здания имеется бесплатный телефон-автомат.

8. Завершите таблицу тегом < TABLЕ>.

9. Сохраните документ под именем prim7.htm.

10. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

11. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim7.htm.

12. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.

13. Измените ширину окна браузера и установите, как при этом изменяется внешний вид таблицы.

Задание 8. Создание описания фреймов

1. Запустите текстовый редактор Блокнот (Пуск/Программы/Стандартные/ Блокнот).

2. Введите следующий документ:

< HTML>

< HEAD>

< TITLE> Описание фреймов< /TITLЕ> < /HEAD>

< FRAMESET ROWS=«60%, *»>

< FRAME SRC=«prim7table.htm»>

< FRAMESET COLS=«35%, 65%» NORESIZE> < FRAME SRC=«prim1 first.htm»>

< FRAME SRC=«prim3links.htm»>

< /FRAMESET>

< /HTML>

3. Сохраните этот документ под именем prim8.htm.

4. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer).

5. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim8.htm.

6. Изучите представление нескольких созданных ранее документов в отдельных фреймах.

7. Посмотрите, что происходит при изменении ширины окна браузера.

8. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.

9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу не нарушает структуру фреймов.

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

Задание 9. Создание Web-документа с помощью редактора FrontPage

1. Запустите программу FrontPage (Пуск/Программы/Microsoft FrontPage).

2. Введите в автоматически созданную Web-страницу произвольный текст документа.

3. С помощью панели инструментов Форматирование отформатируйте текст по собственному усмотрению.

4. Для создания таблицы щелкните на кнопке Добавить таблицу на панели инструментов Стандартная.

5. Для добавления иллюстраций используйте кнопку Добавить рисунок из файла на панели инструментов Стандартная. Иллюстрации возьмите из папки \Windows.

6. Дайте команду Файл/Сохранить и задайте имя файла prim9.htm. Подтвердите сохранение изображений, требующих преобразования формата.

7. Запустите программу Internet Explorer (Пуск/ Программы/Internet Explorer).

8. Дайте команду Файл/Открыть. Щелкните на кнопке Обзор и откройте файл prim9.htm.

9. Убедитесь, что созданный документ правильно отображается браузером. Обратите внимание на наличие отличий вида документа при отображении в браузере и в программе FrontPage.

10. Измените ширину окна браузера и посмотрите, как при этом меняется вид документа.

11. Вернитесь в программу FrontPage и щелкните на кнопке HTML-код.

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

13. Оцените качество получившегося кода HTML.

Задание 10. Создать WEB-страницу на языке HTML, содержащую заголовок первого уровня (название вашего ВУЗа), заголовок второго уровня (название вашего факультета), заголовок третьего уровня (название вашего группы) и нумерованный список вашей группы.

Задание 11. Создать WEB-страницу на языке HTML, содержащую ссылку на документ задания 10.

Задание 12. Создать WEB-страницу на языке HTML, содержащую оба созданных в заданиях 10 и 11 документа.