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

ЛАБОРАТОРНАЯ РАБОТА №1

Тема: «Создание HTML–документа со стилевым оформлением»

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

Перечень оборудования и программного обеспечения:

- персональный компьютер;

- текстовый редактор Блокнот;

- браузер Internet Explorer.

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

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

- задать заголовок документа «Лабораторная работа 1»

- задать произвольный цвет фона страницы (кроме белого).

2. Сохранить документ в папке «Мои документы», задав в качестве имени документа свою Фамилию и расширение. html.

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

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

5. Добавить бегущую строку с текстом «Программисты Серпуховского технического колледжа», задав следующие атрибуты:

- цвет фона бегущей строки – желтый;

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

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

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

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

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

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

Пробную веб-страницу создал студент группы [номер группы] [фамилия].

8. Отступить 2 пустые строки.

9. Добавить разделительную горизонтальную линию красного цвета на всю ширину веб-страницы толщиной в 3 пикселя.

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

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

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

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

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

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

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

Этот текст большой (увеличить размер шрифта)

Этот текст маленький (уменьшить размер шрифта)

Этот текст _{подстрочный}

Этот текст ^{надстрочный}

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

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

16. Поменять цвет шрифта на синий.

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

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

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

Например:

- список

- таблица

* картинка

* рамка

19. Добавить разделительную горизонтальную линию фиолетового цвета во всю ширину веб-страницы, задав толщину линии в 2 пикселя.

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

21. Изменить цвет шрифта на черный.

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

23. Добавить нумерованный список согласно варианту задания.

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

25. Добавить маркированный список согласно варианту задания.

26. Отступить одну пустую строку.

27. Добавить разделительную горизонтальную линию желтого цвета шириной в 30% от ширины веб-страницы с выравниванием по правому краю толщиной в 4 пикселя.

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

29. Добавить отцентрированный абзац «движущееся изображение».

30. Добавить бегущее произвольное изображение небольшого размера, движущееся по направлению справа налево с режимом циклического движения.

31. Добавить таблицу с заголовком Простая таблица следующего вида:

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

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

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

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

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

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

- цвет текста в ячейках – зеленый;

- выравнивание левого столбца – по левому краю;

- выравнивание правого столбца – по правому краю.

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

33. Отступить одну пустую строку.

34. Добавить таблицу с заголовком Сложная таблица согласно варианту задания.

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

- цвет границ таблицы – красный.

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

Варианты заданий:

Дата добавления: 2015-07-11