Уч_Kabanov / Информатика / 25. HTML 1 / HTML1
.pdfЗанятие №1.
1. Запустите текстовый редактор Блокнот.
2.Введите следующий документ:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE> </HEAD>
<BODY>
Содержание документа
</BODY>
</HTML>
3.Сохраните этот документ под именем "first.htm" в своей папке (перед сохранением убедитесь, что сброшен флажок Скрывать расширения для зарегистрированных типов файлов: Пуск – Настройка – Панель управления – Свойства папки – Вид).
4.Запустите интернет-браузер (Internet Explorer).
5.Дайте команду Файл – Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.
6.В окне документа найдите, где отображается содержимое элемента TITLE, а где – элемента BODY.
7.Откройте документ first.htm в программе Блокнот.
8.Удалите весь текст между тегами <BODY> и </BODY>.
9.Введите текст с заголовками различного уровня:
<H1>Заголовок первого уровня – самый большой заголовок!</H1> <H2>Заголовок второго уровня</H2>
<H6>Заголовок шестого уровня – самый маленький заголовок!</H6>
10.Введите тег горизонтальной линии <HR>
11.Введите отдельный абзац текста, начав его тегом <P>:
Это первый абзац текста.
12.Введите еще один абзац текста, начав его тегом <P>:
А это – второй.
13.Кроме тегов в языке HTML используется специальный управляющий символ & – амперсант – для вывода специальных символов, угловых скобок: < (для < ) и > (для > ). Введите тег <BR> и текст:
Существует разница между абзацем и новой строкой: для начала новой строки используется тег <BR>.
14.Сохраните документ в своей папке под именем paragraph.htm.
15.Запустите браузер.
16.Дайте команду Файл – Открыть, щелкните на кнопке Обзор и откройте файл paragraph.htm.
17.Просмотрите, как отображается этот файл. Если отображение неверно, откройте меню: Вид – Просмотр HTML–кода - и внесите исправления в исходный документ. После этого, сохранив внесенные изменения, нажмите на пиктограмму Обновление и проверьте правильность отображения еще раз.
18.Откройте документ first.htm в программе Блокнот.
19.Удалите весь текст, находящийся между <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах, необходимо поместить после тега <BODY>.
20.Введите фразу: Текст до ссылки.
21.Ведите тег: <A HREF=”first.htm”>.
22.Введите фразу: Ссылка.
23.Введите закрывающий тег </A>.
24.Введите фразу: Текст после ссылки.
25.Сохраните файл под именем link.htm.
26.Запустите браузер и откройте файл link.htm.
27.Убедитесь в том, что текст между тегами <A> и </A> выделен как ссылка (цветом и подчеркиванием).
28.Щелкните по ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
29.Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается просмотренной и отображается другим цветом.
30.Откройте программу Paint. Задайте размеры нового рисунка, например 50х50 точек. (Рисунок - Атрибуты).
31.Выберите цвет переднего плана и цвет фона. Залейте рисунок фоновым цветом. Инструментом Кисть нанесите произвольный рисунок на фон.
32.Сохраните рисунок под именем pic1.gif (в формате GIF) в свою папку. В некоторых версиях Windows программа Paint позволяет создавать рисунки GIF с прозрачным фоном.
В этом случае диалоговое окно Атрибуты содержит флажок Использовать прозрачный цвет фона.
33.Откройте документ first.htm в программе Блокнот.
34.Удалите весь текст, находящийся между <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах, необходимо поместить после тега <BODY>.
35.Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.
36.Введите тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">
37.Сохраните документ под именем picture.htm.
38.В браузере откройте файл picture.htm. Особое внимание обратите на положение рисунка относительно текста.
39.Вернитесь в программу Блокнот и измените значение атрибута в теге вставки изображения: ALIGN="TOP". Сохраните файл под тем же именем.
40.Вернитесь в браузер и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
42.Вернитесь в программу Блокнот и измените значение атрибута в теге вставки изображения: ALIGN="LEFT". Сохраните файл под тем же именем.
43.Вернитесь в браузер и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
44.Сохраните файл под тем же именем.