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. Выполнив задание, покажите его преподавателю.