Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

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

Читайте также:
  1. I. Перевести текст. 1 страница
  2. I. Перевести текст. 10 страница
  3. I. Перевести текст. 11 страница
  4. I. Перевести текст. 2 страница
  5. I. Перевести текст. 3 страница
  6. I. Перевести текст. 4 страница
  7. I. Перевести текст. 5 страница

ЛАБОРАТОРНАЯ РАБОТА №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; просмотров: 111 | Нарушение авторских прав


Читайте в этой же книге: Львів – 2015 | Львів – 2015 | Мовно-стилістична культура наукової роботи | Цілеспрямованість і прагматизм наукового тексту |
<== предыдущая страница | следующая страница ==>
ВЦИОМ, Мониторинг общественного мнения 3 (121) май-июнь 2014| Львів – 2015

mybiblioteka.su - 2015-2024 год. (0.012 сек.)