Упражнение 19.1. Создание простейшей Web-страницы

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

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

< HTML>

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

< /HEAD>

< BODY>

Содержание

документа

< /BODY> < /HTML>

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

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

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

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

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

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

В этом упражнении мы создали простейший документ HTML Мы познакомились с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.

Упражнение 19.2. Изучение приемов форматирования абзацев

1.

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

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

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

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

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

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

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

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

10.Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

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

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

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

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

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

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

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

4.Введите тег: < А HREF=" first.htm" >.

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

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

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

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

9.Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

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

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

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

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

В этом упражнении мы создали документ HTML, содержащий гиперссылки. Мы увидели, как гиперссылки отображаются в документе, и научились пользоватьтся ими.

Упражнение 19.4. Создание изображения и использование