Задание 1. 1. Овладение навыками оформления страниц гипертекста с помощью встраивания стиля, внедрения стиля и связывания стиля

Цель работы

1. Овладение навыками оформления страниц гипертекста с помощью встраивания стиля, внедрения стиля и связывания стиля.

2. Овладение навыками комбинированного применения встраиваемого, внедренного и связываемого стилей.

3. Овладение навыками применения каскадирования и наследования стилей.

4. Овладение навыками группирования стилей, создания и использования классов стилей, использования псевдоклассов.

5. Овладение навыками макетирования HTML документов с помощью дескриптора DIV и CSS.

6. Овладения навыками оформления шрифтов с помощью CSS.

7. Овладение навыками позиционирования с помощью CSS.

Подготовка к работе

Изучить следующие понятия:

1) Дескрипторы STYLE, LINK и их атрибуты.

2) Атрибуты STYLE, CLASS.

3) Синтаксис листов стилей: правило, селектор, объявление, свойство, значение.

4) Группировка селекторов, свойств, значений.

5) Группирование, классы стиля; наследование и каскадирование, псевдоклассы.

6) Свойства текста, шрифтов, цвета и фона, списков, таблиц, визуального форматирования и позиционирования, блочной модели.

Источник для изучения: конспект лекций, литература [1, 2, 4, 5, 6, 7], электронные справочники по языку HTML и CSS.

ЗАДАНИЯ ДЛЯ САМОСТОЯТЕЛЬНОГО ВЫПОЛНЕНИЯ

exs*.html – имя файла, созданной в упражнении страницы (знак * идентифицирует номер задания). В заголовках, отображаемых браузером, для каждой страницы пропишите имя ее файла (без расширения). Для хранения рисунков создайте отдельный подкаталог image. Для хранения таблиц стилей создайте каталог css. Файлу таблицы стилей дайте имя stylesheet.css.

Задание 1.

Создайте Web страницу, включающую в себя следующие элементы: заголовок самого большого размера и три абзаца (каждый абзац должен включать в себя по 5-6 строк (перевод на следующую строку не использовать!)). Используя встраивание стиля, определите следующее оформление для заголовка: цвет текста – красный; размер шрифта – 20pt; семейство шрифта – Arial, Verdana, Garamond; выравнивание текста – по центру; начертание – обычное.

Для первого абзаца: цвет текста – синий; размер шрифта – 12pt; семейство шрифта – Verdana, Arial, Garamond; выравнивание текста – по ширине; начертание – обычное; отступ слева – 10px; отступ справа – 20px; отступ сверху – 6px; отступ снизу – 5px.

Для второго абзаца: цвет текста – зеленый; размер шрифта – 14pt; семейство шрифта – Garamond, Verdana, Arial; выравнивание текста – по ширине; начертание – обычное; отступ в первой строке – 20px; отступ слева – 20px; отступ справа – 10px; отступ сверху – 3px; отступ снизу – 8px; рамка вокруг текста – красного цвета, непрерывная, толщиной 2px; отступ текста от рамки со всех сторон – 5px.

Для третьего абзаца: цвет текста – сине-зеленый (cyan); размер шрифта – 16pt; семейство шрифта – Times, Verdana, Arial; выравнивание текста – по ширине; начертание – обычное; отступ в первой строке – 30px; отступ слева – 30px; отступ справа – 30px; отступ сверху – 6px; отступ снизу – 6px; рамка вокруг текста – оранжевого цвета, штрих-пунктирная, толщиной 3px; отступ текста от рамки со всех сторон – 8px.

В третьем абзаце часть текста отформатируйте встроенным стилем: цвет текста – зеленый, семейство шрифта – Sans-Serif, Verdana, Arial; размер шрифта 10pt; начертание – курсив, цвет фона – светло-серый, текст подчеркнутый.

Для заголовка и первого абзаца не использовать группирование свойств стилей и их значений. Для второго абзаца для свойства рамки использовать группирование только по сторонам рамки. Остальные свойства стилей и их значения не группировать. Для третьего абзаца выполнить группирование свойств и значений стилей настолько насколько это возможно и при выполнении следующих заданий придерживаться этого подхода.

В конец документа добавьте дескриптор раздела и в его контейнере разместите текст из 4-5 строк и следом за текстом три абзаца с текстом также по 4-5 строк. Используя встроенные стили, задайте для раздела следующее оформление: цвет текста – желтый; размер шрифта 14pt; выравнивание – по центру. Для второго абзаца этого раздела задайте с помощью встроенных стилей: цвет текста – зеленый; размер шрифта 10pt; выравнивание – по ширине.

Документ разместите в файле exs1.html.