 |
Упражнение 1. Создание простейшей Web-страницы
|
|
|
|
1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Введите следующий документ:
<HTML>
<HEAD>
<ТITLЕ>Заголовок документа</ТIТLЕ>
</HEAD>
<BODY>
Содержание документа
</BODY> </HTML>
3. Сохраните этот документ под именем first.htm.
Перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). В противном cлучае редактор Блокнот может автоматически добавить в конец имени расширение.ТХТ.
4. Запустите программу Internet Explorer (Пуск» Программы > Internet Explorer).
5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.
6. Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
7. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.
В этом упражнении мы создали простейший документ HTML. Мы познакомились с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.
Упражнение 2. Изучение приемов форматирования абзацев
1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
3. Введите заголовок первого уровня, заключив его между тегами <Н1 > и </Н1 >.
|
|
|
4. Введите заголовок второго уровня, заключив его между тегами <Н2> и </Н2>.
5. Введите отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
6. Введите тег горизонтальной линейки <HR>.
7. Введите еще один абзац текста, начав его с тега <Р>.
8. Сохраните этот документ под именем paragraph.htm.
9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
10. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.htm.
11. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.
В этом упражнении мы создали документ HTML с разметкой абзацев. Мы определили, как влияют теги HTML на отображение соответствующих частей документа.
Упражнение 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, содержащий гиперссылки. Мы увидели, как гиперссылки отображаются в документе, и научились пользоваться ими.
Упражнение 4. Создание изображения
И использование его на Web-странице
1. Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 50х50 точек (Рисунок > Атрибуты).
2. Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.
3. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.
4. Сохраните рисунок под именем plc1.gif ( в формате GIF ).
5. Дайте команду Рисунок > Атрибуты. Установите флажок Использовать прозрачный цвет фона. Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве фонового.
6. Сохраните рисунок еще раз под именем pic2.gif (в формате GIF) и закройте программу Paint.
7. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
8. Удалите весь текст, находящийся между тегами < BODY > и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
9. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.
10. Введите тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">.
11. Сохраните документ под именем picture.htm.
12. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
13. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.
14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.
15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
16. Вернитесь в программу Блокнот и измените значение атрибута: AL1GN="LEFT". Сохраните файл под тем же именем.
17. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
|
|
|
18. Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.
19. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
20. Вернитесь в программу Блокнот и измените имя рисунка: SRC="pic2.gif". Сохраните файл под тем же именем.
21. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками?
В этом упражнении мы научились вставлять изображения в документ. Мы выяснили, как влияют атрибуты тега < IMG > на способ отображения изображения. Мы узнали, как отображаются GIF-изображения, имеющие прозрачный цвет фона.
|
|
|
