Главная

                 Краткий теоретический курс

                Лабораторные работы

               Итоговый контроль

               Список терминов

               Список используемой литературы

                   Интернет ресурсы

Лабораторная работа №3

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

ЦЕЛИ:

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

ТРЕБОВАНИЯ:

1. прочитать лабораторную работу;
2. выполнить все упражнения и задания лабораторной работы;
3. найти и выучить ответы на контрольные вопросы;
4. для получения зачета по лабораторной работе необходимо:

• давать четкие ответы на все контрольные вопросы;
• уметь выполнить любое задание из лабораторной работы по просьбе преподавателя.

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

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

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

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

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

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

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

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

Рис. 1.

Рис. 2.

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

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

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

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

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

5)       Открыть HTML-код, выполнив команду из управляющего меню в обозревателе Internet Explorer:
Вид → В виде 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)   Добавить таблицу:

Заголовок 1 столбца	Заголовок 2 столбца
Ячейка 1- 1	Ячейка 2 - 1
Ячейка 1- 2	Ячейка 2 - 2

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

Объединены три ячейки в одной строке
Объединены  две ячейки в столбце	Ячейка 2 - 2	Ячейка 3 - 2
	Объединены  две ячейки в строке

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

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

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

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

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

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

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

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

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

Название цвета	Символьная нотация	Цифровое обозначние
Черный	Black	"#000000"
Зеленый (темный)	Green	"#008000"
Серебро	Silver	"#C0C0C0"
Известь (зел яркий)	Lime	"#00FF00"
Серый	Gray	"#808080"
Оливковый	Olive	"#808000"
Белый	White	"#FFFFFF"
Желтый	Yellow	"#FFFF00"
Темно-бордовый	Maroon	#800000"
Темно-синий	Navy	"#000080"
Красный	Red	"#FF0000"
Синий	Blue	"#0000FF"
Фиолетовый	Purple	"#800080"
Чирок (сине-зеленый)	Teal	"#008080"
Фуксия (розовый)	Fuchsia	"#FF00FF"
Аква (голубой)	Aqua	"#00FFFF"

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

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

Знать назначение тэгов и их атрибутов, которые были использованы в данной лабораторной работе.

Назад                                              Вперёд