- •А. П. Багаева разработка web-страниц
- •Университет имени академика м. Ф. Решетнева, 2012 © Багаева а. П., 2012 оглавление
- •5. Форматирование страницы с использованием
- •6. Использование формы для создания интерактивности
- •Предисловие
- •1. Первые шаги по созданию
- •1.1. Структура документа
- •Правила записи тегов
- •Параметры типа метаопределений name
- •Использование цветовых спецификаций при создании web-страницы
- •Способы задания цвета
- •1.2. Форматирование текста
- •Теги логического форматирования
- •Теги физического форматирования
- •1.3. Структурное форматирование
- •Теги структурного форматирования
- •1.4. Списки
- •Практическое задание создание web-страницы
- •2. Настройка страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Исходные данные для создания web-страницы
- •2. Делаем web-страницу интереснее
- •2.1. Гиперссылки
- •2.2. Графика и мультимедиа на web-странице
- •2.2.1. Вставка графики в html-документ
- •2.2.2. Встраивание мультимедийных файлов в html-документ
- •Практическое задание графика и гиперссылки на web-странице
- •1. Включение графики.
- •2. Создание гиперссылок.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •3. Основы построения таблиц
- •3.1. Создание и форматирование простой таблицы
- •3.2. Создание сложных таблиц
- •3.3. Вложенные таблицы
- •3.4. Разметка web-страницы при помощи таблицы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •4. Оформление страниц с помощью фреймов
- •4.1. Создание простых фреймов
- •4.2. Создание вложенных фреймов
- •4.3. Взаимодействие фреймов
- •4.4. Плавающие фреймы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •5. Форматирование страницы с использованием каскадных таблиц стилей
- •5.1. Формирование каскадных таблиц стилей
- •Селектор { Свойство: Значение; }
- •Единицы измерений значений свойств
- •5.2. Варианты использования css
- •5.3. Принцип наследования
- •5.4. Обзор свойств css
- •Свойства форматирования текста в css
- •Свойства структурного форматирования в css
- •5.5. Слои и позиционирование документов
- •Использование css при форматировании
- •1. Задание стиля для одного тега.
- •2. Задание стиля для одной web-страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •6. Использование формы для создания интерактивности на web-странице
- •6.1. Задание формы
- •6.2. Создание элементов управления
- •Теги и атрибуты для пользовательских форм
- •6.3. Комбинирование форм и таблиц
- •Практическое задание создание формы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Послесловие
- •Библиографический список
- •Багаева Анна Прокопьевна разработка web-страниц
- •660014, Г. Красноярск, просп. Им. Газ. «Красноярский рабочий», 31.
Задания для самостоятельной работы
Создайте отдельную web-страницу, для которой установите фон для тега <BODY>, используя данные согласно вашему варианту (табл. 1.7). Далее сформируйте текст на вашей странице, который должен быть отформатирован соответственно заданию в столбце «Атрибуты для текста». После этого сохраните страницу в файле с именем DZn.htm, где n – номер варианта.
Таблица 1.7
Исходные данные для создания web-страницы
№ вари-анта |
Атрибуты <BODY> |
Атрибуты для текста |
1 |
Фон – графическое изображение из файла |
Создайте два абзаца и осуществите выравнивание: 1-й абзац – left, 2-й абзац – right. Используйте шрифт Arial для 1-го абзаца, размер шрифта 5 пунктов, для 2-го абзаца на 2 пункта меньше |
2 |
Фон – цвет темно-синий, цвет текста – белый |
Создать маркированный список, состоящий из 5 пунктов, в качестве маркера использовать графическое изображение, текст пунктов списка выделить курсивом |
3 |
Фон – светло-розовый |
1-й абзац: выравнивание right, заголовок 1-й уровень, шрифт Arial, цвет текста красный; 2-й абзац: выравнивание left, заголовок 2-й уровень, шрифт New Roman, цвет шрифта коричневый |
4 |
Фон – текстура |
Создать нумерованный список, состоящий из 5 пунктов, использовать римскую нумерацию, текст пунктов списка выделить полужирным начертанием и разместить список в центре |
5 |
Фон – графическое изображение из файла |
Наберите стихотворение (два четверостишия) текст должен быть оформлен курсивом. Название стихотворения должно быть заголовком и расположено в центре страницы, а автор – текст, смещенный вправо, и размер его меньше основного текста на 2 пункта |
6 |
Фон – желтого цвета |
Создайте 2 текстовых блока, 1-й – красного цвета, выровненный по правой стороне страницы, 2-й – зеленого цвета по левой стороне. Между ними вставьте горизонтальную линию |
7 |
Фон – цвет сформируйте сами, используя насыщенность трех цветов (RGB) |
Создайте два текстовых абзаца (цвет подберите в контрасте относительно фона), каждый должен иметь заголовок: 1-й абзац – 1-й уровень, жирный курсив, 2-й абзац – 2-й уровень, подчеркнутый курсив |
8 |
Фон – графическое изображение из файла, зафиксированное при прокрутке. Задайте границы документа горизонтальные и вертикальные в 20 пикселов |
Создайте два текстовых абзаца различных цветов: 1-й абзац – жирный шрифт с засечками, 2-й абзац – без засечек полужирный курсив |
Окончание табл. 1.7
№ варианта |
Атрибуты <BODY> |
Атрибуты для текста |
9 |
Фон – изумрудного цвета |
Создайте три текстовых блока темно-синего цвета и выровняйте их соответственно по левому, правому краям и один расположите по центру |
10 |
Фон – текстура в контрасте с цветом текста |
Создайте два текстовых блока: 1-й блок – текст красного цвета, полужирный курсив, размер шрифта 6 пунктов, 2-й блок – синего цвета, размер шрифта на 2 пункта меньше |
11 |
Фон – графическое изображение в виде цветка из файла |
Создайте два четверостишия, посвященные цветам, оформив их в виде отдельных текстовых блоков, разместив первое четверостишие по левой стороне, второе – по правой. Цвета для блоков подберите сами |
12 |
Фон – темно-бордовый |
Создайте маркированный список с заголовком из трех пунктов и каждый пункт из 2 подпунктов. В качестве маркеров основного списка используйте изображение из файлов. Цвет текста – белый |
13 |
Фон – сиреневого цвета |
Создайте два абзаца красного и зеленого цвета соответственно. Расположите их по центру и задайте размер шрифта на единицу больше существующего по умолчанию |
14 |
Фон – текстура белый мрамор |
Создайте текст золотистого цвета, строки которого отделены друг от друга пробелом. Текст должен быть отцентрирован и иметь заголовок. Заголовок – жирный шрифт, основной текст – полужирный курсив |
15 |
Фон – фотография любимого артиста или певца |
Создайте на фоне фотографии текстовый блок, содержимое которого отвечает его автобиографии. Цвет текста должен хорошо быть виден. В тексте должны чередоваться шрифты с большим и меньшим размерами. |
16 |
Фон – пурпурного цвета |
Создайте нумерованный список, состоящий из 4 пунктов с подпунктами. Задайте римскую нумерацию. Основной список сделайте жирным курсивом, подпункты – курсивом меньшего размера. При задании цвета тексту используйте возможности смешивания трех цветов (RGB) |