- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №2
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №3
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 4
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 5
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 6
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 7
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 8
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №9
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №10
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №11
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 12
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №13
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №14
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №15
- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •Контрольные вопросы:
- •Практическая работа №16
- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
4. Содержание отчета:
4.1 Наименование и цель работы
4.2 Задание своего варианта
4.3 Сценарий таблицы CSS
4.4 Ответы на контрольные вопросы
4.5 Вывод о проделанной работе
5. Порядок выполнения работы:
5.1 Создайте свою папку, куда в дальнейшем будете размещать свои документы.
5.2 Запустите Блокнот.
5.3 Наберите HTML – код своей программы.
5.4 Сохраните свой документ с расширением *.html, для чего в меню файл выберите команду Сохранить как... Из перечня Тип файла выберите Все файлы.
5.5 В отдельном документе составьте правила для своей веб – страничке согласно своему варианту. Для соединения HTML – документа с внешней таблицей стиля используется элемент LINK. Который должен располагаться в заголовке документа внутри элемента HEAD.
6. Контрольные вопросы:
6.1 Из чего состоит правило CSS?
6.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.
Практическая работа №13
Наименование: Форматирование текста средствами CSS
1. Цель: Научиться создавать правила установки стиля форматирования, выбора шрифта и задание цвета
2. Литература:
2.1 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с.
3. Задание:
3.1 В строке заголовка должен отражаться номер практической работы
3.2 Создать html – страницу с заголовком h1 – Форматирование текста средствами CSS
В §1: Намек: добивается успеха только тот, кто старается
В h2: Предисловие
В §2: В CSS нет ничего сложного, к концу занятия вы научитесь изменять цвет текста, шрифт, размер. Научитесь управлять его положением на странице и выучите много других приемов форматирования, которые сделают вас настоящим профессионалом веб – дизайна.
В §3: Вам будет под силу отформатировать любой текст. И вы сделаете это так же просто, как в обычном текстовом редакторе.
Вы сможете заставить читать посетителя по буквам.
В §4: К примеру, задать «жирность» в 600 для данного абзаца средствами HTML просто невозможно.
В §5: Если из практической работы вам все понятно, то вы можете сразу перейти далее к практической работе № 11
В последнем абзаце сделать ссылкой практическая работа №9
3.3 В таблице CSS создать правила для html – страницы
Вариант 1
h1 – цвет фона сделать синего цвета
шрифт абзацев - Arial
стиль шрифта §1- italic
вид шрифта для h2 – small-caps
ширина шрифта для §4 – 600
размер шрифта для всех абзацев – 14 pt
отступы для всех абзацев – 25px
выравнивание h1 – по центру, §1 – по правому краю
декоративное оформление ссылки:
непосещенная – синяя, с нижним подчеркиванием;
посещенная – красная, зачеркнутая;
под указателем мыши – мигает;
Вариант 2
h1 – цвет фона сделать желтого цвета
шрифт абзацев - Verdana
стиль шрифта §1- oblique
вид шрифта для h2 – small-caps
ширина шрифта для §4 – 700
размер шрифта для всех абзацев – 16 pt
отступы для всех абзацев – 30 px
выравнивание h1 – по центру, §1 – по правому краю
декоративное оформление ссылки:
непосещенная – красная, с нижним подчеркиванием;
посещенная – зеленая, зачеркнутая;
под указателем мыши – мигает;