Задание. Задание 1. Создание простейшей Web-страницы.

Задание 1. Создание простейшей Web-страницы.

Порядок выполнения:

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

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

< НТМL>

< HEAD>

< ТITLE> Заголовок документа< /TITLE>

< /HEAD>

< BODY>

Содержание

документа

< /BODY>

< /HTML>

3. Сохраните этот документ под именем < Ваша фамилия>.htm.

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

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

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

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

Задание 2. Изучение приемов форматирования абзацев.

Порядок выполнения:

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

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

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

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

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

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

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

8. Сохраните этот документ под именем < Ваша фамилия>.htm.

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

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

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

Задание 3. Создание гиперссылок.

Порядок выполнения:

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

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

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

4. Введите тег: < А HREF=" https:///www.ugatu.ac.ru" >.

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

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

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

8. Сохраните Ваш документ.

9. Запустите обозреватель Internet Explorer откройте Ваш файл.

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

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

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

Задание 4. Создание изображения и использование его на Web-странице.

Порядок выполнения:

1. Откройте программу Paint (Пуск ► Программы ► Стандартные ► Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок ► Атрибуты).

2. Нарисуйте произвольный рисунок.

3. Сохраните рисунок под именем < Ваша фамилия>.gif (в формате GIF).

4. Откройте документ < Ваша фамилия>.htm в программе Блокнот.

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

6. Введите тег < IMG SRC =" < Ваша фамилия>.gif" ALIGN=" LEFT" >.

7. Сохраните Ваш документ.

8. Запустите обозреватель Internet Explorer откройте Ваш файл. Посмотрите на получившийся документ, обращая особое внимание на изображение.

9. Вернитесь в программу Блокнот и, измените значение атрибуту: ALIGN=" CENTER". Сохраните файл под тем же именем.

10. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

11. Вернитесь в программу Блокнот и добавьте в тег < IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

Задание 5. Приемы форматирования текста.

Порядок выполнения:

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

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

3. Введите тег < FONT SIZE=" 5" COLOR=" BROWN" >. Он задает вывод текста увеличенным шрифтом и коричневым цветом.

4. Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега < Р>. и закончите его тегом < /FONT>.

5. Введите теги: < Р> < FONT SIZE=" -2" FACE=" ARIAL" COLOR=" GREEN" >.

6. Введите очередной абзац текста, закончив его тегом < /FONT>.

7. В следующем абзаце используйте по своему усмотрению парные теги: < В> (полужирный шрифт), < I> (курсив), < U> (подчеркивание), < S> (вычеркивание), < SUB> (нижний индекс), < SUP> (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги < ЕМ> (выделение), < STRONG> (сильное выделение), < CODE> (текст программы), < КВО> (клавиатурный ввод), < SAMP> (пример вывода), < VAR> (компьютерная переменная).

9. Сохраните Ваш документ.

10. Запустите обозреватель Internet Explorer откройте Ваш файл. Изучите, как использованные элементы HTML влияют на способ отображения текста.

11. Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Задание 6. Приемы создания списков.

Порядок выполнения:

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

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

3. Вставьте в документ тег < OL ТУРЕ=" I" >, который начинает упорядоченный (нуме­рованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом < LI>.

5. Завершите список при помощи тега < /OL>.

6. Сохраните Ваш документ.

7. Запустите обозреватель Internet Explorer откройте Ваш файл. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.

8. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

9. Вставьте в документ тег < UL TYPE=" SQUARE" >, который начинает неупорядоченный (маркированный) список.

10. Вставьте в документ элементы списка, предваряя каждый из них тегом < LI>.

11. Завершите список при помощи тега < /UL>. Сохраните Ваш документ.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.

13. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

14. Вставьте в документ тег < DL>, который начинает список определений.

15. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом < DТ>.

16. Вставьте в список соответствующие определения, предваряя их тегом < DD>.

17. Завершите список при помощи тега < /DL>. Сохраните Ваш документ.

18. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.

Задание7. Создание таблиц.

Порядок выполнения:

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

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

3. Введите тег < TABLE BORDER=" 10" WIDTH=" 100%" >.

4. Введите строку < CAPTION АLIGN=" TOP" > Список телефонов< /САРТION>.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

< TR BGCOLOR=" YELLOW" ALIGN=" CENTER" >

< ТН> Фамилия< ТН> Номер телефона

6. Определите последующие строки таблицы, предваряя каждую из их тегом < TR> и помещая содержимое каждой ячейки после тега < TD>.

7. Последнюю строку таблицы задайте следующим образом:

< TR> < TD ALIGN=" CENTER" COLSPAN=" 2" > Ha первом этаже здания

имеется бесплатный телефон-автомат.

8. Завершите таблицу тегом < /TABLE>.

9. Сохраните Ваш документ.

10. Запустите обозреватель Internet Explorer откройте Ваш файл. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.