- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
2.1. Свойство color
Свойство color описывает цвет переднего плана элемента.
Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>.
В нижеприведённом коде цвет элемента <h1> устанавливается синим.
Задание 8.4
Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите default4.htm в браузере
default4.htm:
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" type="text/css" href="style4.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
</body>
</html>
style4.css:
body {
background-color: #FF0000;
}
h1 {
color: #0000FF;
}
Свойство background-color
Свойство background-color описывает цвет фона элемента.
В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.
Задание 8.5
Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default5.htm в браузере
default5.htm:
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
<p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной,
фоновыми изображениями, позиционированием элементов и многими другими вещами.
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
</p>
</body>
</html>
style5.css:
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Свойство background-image
CSS-свойство background-image используется для вставки фонового изображения.
Ниже мы используем в качестве фонового изображение бабочки, вы можете использовать другое изображение. Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка. Файл рисунка должен находиться в той же папке, что и файл вызывающей страницы.
Задание 8.6
Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default6.htm в браузере
default6.htm:
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" type="text/css" href="style6.css" />
…. остальное без изменений
style6.css:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Свойство background-repeat
Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.
В таблице указаны четыре значения background-repeat.
Значение |
Описание |
Background-repeat: repeat-x |
Рисунок повторяется по горизонтали |
background-repeat: repeat-y |
Рисунок повторяется по вертикали |
background-repeat: repeat |
Рисунок повторяется по горизонтали и вертикали |
background-repeat: no-repeat |
Рисунок не повторяется |
Например, для отмены повторения/мультипликации фонового рисунка следует записать такой код:
Задание 8.7
Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default7.htm в браузере
default7.htm:
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" type="text/css" href="style7.css" />
…. остальное без изменений
style7.css:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Задание для самостоятельного выполнения: измените последовательно значения параметра background-repeat и посмотрите результат.