- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания 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. Цветовая гамма html-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:
bgcolor Определяет цвет фона документа.
text Определяет цвет текста документа.
link Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет можно задавать с помощью:
- названий соответствующих названию цвета в английском языке: red, green, yellow, bisque, coral, crimson, gold, ivory, pink, moccasin, orange, salmon...
-кодов Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF).:
#FFFFFF – Белый #000000 - Черный
#0000FF - Синий #008080 - Темно-зеленый
#008000 - Зеленый #А8А400 - Желто-зеленый
#FFFF00 - Желтый #00779Е - Припыленно-синий
#00FFFF - Бирюзовый #FEF9F1 - Светло-бежевый
#FF00FF - Розовый #734D22 - Темно-бежевый
#808080 - Серый #6ЕС6А0 - Салатовый
#00FF00 - Светло-зеленый #8A92BD - Фиолетовый
#800000 - Коричневый #FBF668 - Слабо-желтый
#000080 - Ультрамариновый #EAF3F9 - Небесно-голубой
#808000 - Оливковый #C8DFEF - Голубой
#800080 - Пурпурный #0069ВЗ - Темно-голубой
#FF0000 - Красный #FBEDD7 - Пыльно-бежевый
#С0С0С0 - Серебряный #F5C7A2 - Бежевый
Разберем несколько примеров.
bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.
Задание 2.3
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 2_3</title>
</head>
<body bgcolor="red " text=" white "
link="blue" alink="yellow" vlink="maroon">
<p>
На основании распоряжения Совета Министров СССР от 11 января 1950 г.<br>
впервые в СССР и в мире в городе Мурманске было создано высшее мореходное <br>
училище (МВМУ) в системе рыбной промышленности страны. До этого ни в СССР,<br>
ни в других странах мира не было высшего учебного заведения,<br>
специально готовившего кадры для работы на флотах рыбной промышленности.<br>
Начальником училища был утвержден Раевский Николай Павлович,<br>
работавший до назначения заместителем начальника объединения <br>
«Мурманрыба». 1 сентября 1950 г. <br>
</p>
<a href=http://www.mstu.edu.ru>сайт МГТУ </а><br>
<a href=пример1.htm>переход еще на одну новую страницу. </а>
</body>
</html>
Сохраните документ с именем пример2_3.htm, откройте в браузере.
Метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg). Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками. Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
Задание 2.4
Изменим фон документа пример2_3.html с помощью графического файла следующим образом:
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 2_4</title>
</head>
<body background=pic.gif>
<p>
На основании распоряжения Совета Министров СССР от 11 января 1950 г.<br>
впервые в СССР и в мире в городе Мурманске было создано высшее мореходное <br>
училище (МВМУ) в системе рыбной промышленности страны. До этого ни в СССР,<br>
ни в других странах мира не было высшего учебного заведения,<br>
специально готовившего кадры для работы на флотах рыбной промышленности.<br>
Начальником училища был утвержден Раевский Николай Павлович,<br>
работавший до назначения заместителем начальника объединения <br>
«Мурманрыба». 1 сентября 1950 г. <br></p>
</body>
</html>
Сохраните документ с именем пример2_4.htm, откройте в браузере.