Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Упражнение 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-изображения, имеющие прозрачный цвет фона.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...