Лабораторная работа по информатике

Разделы: Информатика

Цели:

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

Требования:

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

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

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

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

  • запустить графический редактор PhotoShop;
  • произвести щелчок по основному цвету на палитре инструментов;
  • в диалоговом окне Палитра цветов выбрать основной цвет, при помощи мыши; посмотреть, какой шестнадцатеричный код имеет данный цвет (рис.1);
  • закрыть графический редактор PhotoShop.

Рис. 1.

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

  • задать заголовок документа «Задание I»
  • задать цвет фона страницы – голубой.

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

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

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

6) Добавить бегущую строку «Новогеоргиевская СОШ», задав следующие атрибуты:

  • цвет фона бегущей строки – морской волны (aqua);
  • высота бегущей строки – 20 пиксель;
  • направление бегущей строки – слева;
  • режим вывода бегущей строки – альтернативное.

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

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

Цель создания данного документа – знакомство с основными тэгами HTML и приобретение навыков их использования.
Пробную страницу создал (фамилия,имя, класс).

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

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

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

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

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

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

Этот текст жирный
Этот текст наклонный
Этот текст подчеркнутый
Этот текст большой
Этот текст маленький
Этот текст выделенный
Этот текст подстрочный
Этот текст надстрочный

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

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

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

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

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

Например:

  1. список
  2. таблица
  • картинка
  • рамка

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

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

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

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

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

HOME PAGE
         головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера. WEB-S1TE
         группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение.

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

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

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

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

  • Элемент1
  • Элемент 2
  • Элемент 3

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

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

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

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

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

X.  Элемент I
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) Продемонстрировать результат преподавателю.

Контрольные вопросы:

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