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

Практическая работа № 13.

Тема: Создание простейшего Web-документа.

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

Последовательность выполнения работы:

I. Создание простого HTML-документа.

1. С разрешения преподавателя включите компьютер, войдите в систему под своим именем.

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

3. Наберите следующий текст:

<HTML>

<HEAD>

<TITLE>First</TITLE>

</HEAD>

<BODY>

Содержание

документа

</BODY>

</HTML>

4. Сохраните файл с именем First.html на диск D:\ в папку Учебная. Для этого необходимо выполнить следующие действия:

- Команда Файл à Сохранить как…

- В окне сохранения документа в поле Папка выбрать место сохранения;

в поле Имя написать Имя.html;

в поле Тип файла выбрать Все типы.

- Нажать ОК.

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

6. Откройте файл First.html, запустив его двойным щелчком. Он откроется в браузере Internet Explorer.

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

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

9. Проверьте, что происходит при изменении размеров окна Internet Explorer?

II. Приемы форматирования абзаца.

10. Создайте новый HTML-документ и сохраните его там же с именем Second.html.

11. Наберите основные теги HTML-документа.

Весь последующий текст будет набираться в тегах <BODY> и </BODY>.

12. Введите заголовок первого уровня, заключив его в теги <H1>Форматирование абзаца</H1>.

13. Введите тег горизонтальной линейки <HR>(обратите внимание, что тег непарный).

14. Введите заголовок второго уровня, заключив его в теги <H2>Пробное упражнение</H2>.

15. Введите тег горизонтальной линейки <HR size=”3” color=”red”>.

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

17. Нажмите комбинацию клавиш CTRL+S; перейдите комбинацией клавиш ALT+TAB в окно браузера и обновите его содержимое, нажав кнопку «Обновить» или клавишу F5. Посмотрите, как отобразился файл. Установите соответствие между элементами HTML-кода и фрагментами документа, отображаемыми на экране.

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

18. Откройте файл First.html, вызовите контекстное меню и выберите команду Просмотр HTML-кода.

19. Введите после слова «документа» тег перехода на новую строку <br />(обратите внимание, что тег непарный).

20. Затем введите текст:

<a href="Second.html">Ссылка на документ Second</a><br /> <br />

21. Введите фразу

Текст после ссылки

22. Затем вновь тег перехода на новую строку <br />.

23. Создайте фон Web-документа, изменив тег <BODY>следующим образом:

<BODY bgcolor=”yellow”>.

24. Нажмите комбинацию клавиш CTRL+S; перейдите комбинацией клавиш ALT+TAB в окно браузера и обновите его содержимое, нажав кнопку «Обновить» или клавишу F5.

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

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

27. Щелкните по кнопке Назад на Панели инструментов браузера, чтобы вернуться к предыдущей странице.

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

29. Закройте все открытые окна.

IV. Самостоятельное задание.

30. В своей папке создайте вложенную папку My Web.

31. Создайте и сохраните в папке My Web два новых HTML-документа с именами Моя группа и Мой колледж.

32. Применяя уже известные вам теги, оформите эти документы смысловым содержанием.

33. Обязательное условие: в каждом документе должна быть ссылка на другой документ.

34. Выполнив задание, покажите его преподавателю.

Наши рекомендации