Лабораторно-практическая работа №25

Тема: Создание и оформление HTML–документа

ЦЕЛИ:

1. Знакомство со структурой HTML-документа.
2. Знакомство с основными тэгами HTML и приобретение навыков их использования.
3. Приобретение навыков создания бегущей строки, различных списков, таблиц в HTML-документе.
4. Приобретение навыков создания меток в HTML-документе и ссылок на них в пределах одного документа.

ЗАДАНИЕ: Используя текстовый редактор Блокнот создать HTML-документ

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

1) Определить код цвета, с помощью графического редактора PhotoShop:

· запустить графический редактор PhotoShop;

· произвести щелчок по основному цвету на палитре инструментов (рис.1);

· в диалоговом окне Палитра цветов выбрать основной цвет, при помощи мыши;

· посмотреть, какой шестнадцатеричный код имеет данный цвет (рис.2);

· закрыть графический редактор PhotoShop.

Рис. 1.

Рис. 2.

2) Создать заготовку HTML-документа (структуру):

· задать заголовок документа «Задание 1»

· задать цвет фона страницы – голубой.

3) Сохранить документ в папке лаб_3 Вашего каталога, задав в качестве имени Фамилию и расширение.html.

4) Открыть документ как Web-страницу.

5) Открыть HTML-код, выполнив команду из управляющего меню в обозревателе InternetExplorer:
Вид→ В виде HTML (Просмотр HTML-кода).

6) Добавить бегущую строку «физико-математический факультет», задав следующие атрибуты:

· цвет фона бегущей строки – морской волны (aqua);

· высота бегущей строки – 20 пиксель;

· направление бегущей строки – слева;

· режим вывода бегущей строки – альтернативное.

7) Добавить заголовок 1 уровня – «Пробная страница».

8) Добавить 2 абзаца текста используя, тэг абзаца:

Цель создания данного документа – знакомство с основными тэгами HTML и приобретение навыков их использования.

Пробную страницу создал (фамилия и номер группы).

9) Добавить ссылку – «переход в конец документа».

10) Добавить горизонтальную линию.

11) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

12) Добавить заголовок 2 уровня – «Некоторые стили форматирования».

13) Задать шрифт – Arial, размер – 4, цвет – зеленый:

14) Добавить список стилей форматирования (по образцу), начиная каждую строку с тэга разрыв строки:

· Этот текст жирный

· Этот текст наклонный

· Этот текст подчеркнутый

· Этот текст большой

· Этот текст маленький

· Этот текст _{подстрочник}

· Этот текст ^{надстрочник}

15) Добавить горизонтальную линию, задав толщину линии в 5 пиксель.

16) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

17) Добавить заголовок 2 уровня – «Форматированный текст».

18) Используя тэг преформатирования, добавить следующий текст по образцу:

Текст на экране выглядит так же, как Вы его оформили внутри тела документа HTML.

Например:

- список

- таблица

* картинка

* рамка

19) Добавить горизонтальную линию, задав толщину линии в 5 пиксель.

20) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

21) Добавить заголовок 3 уровня – «Список определений».

22) Увеличить размер шрифта на два пункта (+2).

23) Добавить список определений:

HOME PAGE

головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера.

WEB-SITE

группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение.

24) Добавить горизонтальную линию, сделав однотонную линию толщиной в 5 пиксель.

25) Изменить цвет шрифта на синий.

26) Добавить заголовок 3 уровня – «Маркированный список».

27) Добавить маркированный список, задав внешний вид маркера круглый:

· Элемент 1

· Элемент 2

· Элемент 3

28) Добавить горизонтальную линию, задав однотонную линию толщиной в 5 пиксель, шириной 60% с выравниванием по левому краю.

29) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

30) Уменьшить размер шрифта на один пункт (-1).

31) Добавить заголовок 3 уровня – «Нумерованный список».

32) Добавить нумерованный список, задав в качестве типа счетчика большие римские цифры, начав отсчет с 10:

X. Элемент 1

XI. Элемент 2

XII. Элемент 3

33) Добавить горизонтальную линию, задав однотонную линию толщиной в 5 пиксель и шириной 60%.

34) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

35) Вставить рисунок, задав выравнивание по центру.

36) Добавить отцентрированный абзац «изображение в натуральную величину».

37) Увеличить (или уменьшить) пропорционально картинку в три раза, задав выравнивание по центру.

38) Добавить отцентрированный абзац «изображение пропорционально увеличено (уменьшено) в три раза».

39) Добавить горизонтальную линию: однотонную линию толщиной в 5 пиксель, шириной 60% свыравниванием по правому краю.

40) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

41) Добавить таблицу:

Простая таблица

· ширина границы таблицы – 2 пикселя;

· расположение таблицы на странице – по центру;

· цвет границы таблицы – зеленый;

· ширина промежутков между ячейками – отсутствует;

· ширина промежутков между содержимым ячейки и её границами – 10 пиксель;

· название таблицы «Простая таблица» установить снизу;

· цвет фона заголовка – серебристый (silver);

· цвет фона ячеек 1-1, 2-2 – морской волны (aqua).

42) Добавить фиолетовую (purple) горизонтальную линию.

43) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

44) Добавить неявную таблицу (не задавая атрибутов для таблицы, названия таблицы и ячеек) отобразив в ней 6 рисунков (по 2 в каждой строке).

Неявная таблица

45) Добавить горизонтальную линию.

46) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

47) Добавить сложную таблицу (по образцу):

Сложная таблица

· ширина границы таблицы – 5 пиксель;

· цвет границы таблицы – темно-красный (maroon);

· ширина промежутков между ячейками – 3 пикселя;

· название таблицы «Сложная таблица» установить по умолчанию (сверху);

· отцентрировать содержимое в ячейках таблицы.

48) Добавить горизонтальную линию.

49) Добавить ссылку – «переход в начало документа».

50) Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

51) Продемонстрировать результат преподавателю.

КОНТРОЛЬНЫЕ ВОПРОСЫ:

1. Что такое WWW, гипертекст, гиперссылка, HTML, Homepage (домашняя страница), Web-сайт?
2. Как определить код цвета, с помощью графического редактора PhotoShop?
3. Что такоеHTML-документ?
4. Назовите средства, с помощью которых можно создать HTML-документ?
5. Какое расширение имеет HTML-документ?
6. Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?
7. Опишите структуру HTML-документа? Где отображается заголовок HTML-документа?
8. Атрибутом, какого тэга является цвет фона страницы?
9. Как открыть HTML-документ? Как просмотреть HTML-код?