- •Федеральное агентство связи
- •Практическое занятие №2
- •Практическое занятие №3
- •Практическое занятие №4
- •Практическое занятие №5
- •Практическое занятие №6
- •Практическое занятие №7
- •Практическое занятие №8
- •Практическое занятие №9
- •Практическое занятие №10
- •8. Контрольные вопросы:
- •Практическое занятие №11
- •8. Контрольные вопросы:
- •Практическое занятие №12
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №13
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №14
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №15
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
Практическое занятие №9
Наименование: Создание простой таблицы CSS для HTML – документа
1. Цель: Научится применять таблицы стилей при оформлении веб - страницы
Подготовка к занятию: по предложенной литературе повторить тему «Форматирование текста средствами CSS» и ответить на следующие вопросы:
2.1 Назначение CSS?
2.2 Какими способами можно назначить цвет в правилах CSS?
Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с
Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
Задание:
5.1 Создать html – страницу с заголовком h1 – Моя страница. Далее идет первый абзац с текстом и рисунками (должно быть написано, о чем эта страница и 1-2 рисунка)
Заголовок h2- любой подзаголовок, допустим Мои увлечения
Далее идет второй абзац и три ссылки на любые интернет - ресурсы
Заголовок h2 – Мои друзья
Далее идет третий абзац и два – три рисунка
5.2 В таблице CSS создать правила для html – страницы
Вариант 1
Сделать цвет фона документа отличный от белого цвета;
h1 – синего цвета, выравнивание по центру;
Во всех абзацах определить красную строку, цвет текста задать самостоятельно, размер шрифта 14 px, название шрифта – Verdana;
Третий абзац выровнять по правому краю и сделать красным цветом;
Все h2 – синего цвета, выравнивание по центру;
Ссылки: непосещенные – желтые, с верхним подчеркиванием;
посещенные – оранжевые, с нижним подчеркиванием;
под указателем мыши – черные, без подчеркивания;
активные – фиолетовые, без подчеркивания.
Вариант 2
Сделать цвет фона документа отличный от белого цвета
h1 – желтого цвета, выравнивание по центру
Во всех абзацах определить красную строку, цвет текста задать самостоятельно, размер шрифта 12 px, название шрифта – Georgia
Третий абзац выровнять по правому краю и сделать белым цветом
Все h2 – желтого цвета, выравнивание по центру
Ссылки: непосещенные – черного, с верхним подчеркиванием;
посещенные – оранжевого, с нижним подчеркиванием;
под указателем мыши – белого, без подчеркивания;
активные – красные, без подчеркивания.
Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
Содержание отчета:
7.1 Наименование и цель работы
7.2 Код таблицы CSS
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
Контрольные вопросы:
8.1 Из чего состоит правило CSS?
8.2 Запишите два способа внедрения таблиц стилей в html - сценарий
ПРИЛОЖЕНИЕ:
Рассмотрим следующее CSS – правило:
H1 {color: blue}
Правило состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue.
Существуют два способа описания таблиц стилей для HTML – документа:
Вставка CSS – кода непосредственно внутрь HTML – документа. Для этого используется элемент STYLE, который должен располагаться внутри заголовка документа, т.е. внутри элемента HEAD. Например:
<html>
<head><title>Моя страница</title>
<style type=”text/css”>
H1 {color: blue}
</style></head>
<body>
<h1> Моя домашняя страничка </h1>
</body>
</html>
Запись таблицы стилей во внешнем файле установка ссылки на этот файл в HTML – документе.
Для соединения HTML – документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE располагается в заголовке документа внутри элемента HEAD. Пример:
<head><title>Моя страница</title>
< link rel =”stylesheet” href = “my_style.css” type=”text/css”>
</head>
Элемент LINK имеет несколько атрибутов:
rel – тип соединения, который для таблиц стилей задается как stylesheet.
href – местонахождение таблицы стилей, т.е. адрес или имя файла. В нашем случае это my_style.css.
type – тип присоединяемой таблицы стилей - text/css.