ОГЛАВЛЕНИЕmedia.miu.by/files/store/umk/eumk_SozdWebDokum_2017.pdf · 5.1 КРАТКИЙ СПРАВОЧНИК ПО css ... ± позволяют разделить оформление

2

ОГЛАВЛЕНИЕ

1 ПОЯСНИТЕЛЬНАЯ ЗАПИСКА .................................................................... 3

2 ТЕОРЕТИЧЕСКИЙ РАЗДЕЛ ......................................................................... 5

2.1 СОДЕРЖАНИЕ ЛЕКЦИОННОГО МАТЕРИАЛА ................................................... 5

2.2 ЛИТЕРАТУРА ............................................................................................... 20

3 ПРАКТИЧЕСКИЙ РАЗДЕЛ ......................................................................... 22

3.1 ЛАБОРАТОРНЫЙ ПРАКТИКУМ ..................................................................... 22

3.2 ПРАКТИЧЕСКИЕ ЗАДАНИЯ ........................................................................... 35

4 РАЗДЕЛ КОНТРОЛЯ ЗНАНИЙ .................................................................. 39

4.1 ТРЕБОВАНИЯ ДЛЯ ЗАЧЕТА ПО ДИСЦИПЛИНЕ ............................................... 39

4.2 ЗАДАНИЯ ДЛЯ УПРАВЛЯЕМОЙ САМОСТОЯТЕЛЬНОЙ РАБОТЫ ...................... 41

5 ВСПОМОГАТЕЛЬНЫЙ РАЗДЕЛ ............................................................... 44

5.1 КРАТКИЙ СПРАВОЧНИК ПО CSS ................................................................. 44

5.2 ТАБЛИЦА ЗНАЧЕНИЙ ЦВЕТОВ ...................................................................... 47

3

1 ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Программа дисциплины «Cоздание web-документов» разработана для

специальности 1-40 01 01 Программное обеспечение информационных тех-

нологий (специализация: web-технологии и программное обеспечение мо-

бильных систем).

Цели и задачи учебной дисциплины

Целями изучения дисциплины «Cоздание web-документов» являются:

во-первых, обеспечить студентов теоретическими сведениями о прин-

ципах функционирования интернета, протоколах, технологиях разработки

сайтов, эволюции и спецификациях языков разметки документов;

во-вторых, сформировать навыки создания web-документов, примене-

ния инструментальных и программных средств для этой цели.

Задачи изучения дисциплины:

дать представление о структуре и принципах функционирования ин-

тернета;

ознакомить студентов с историей, спецификациями и основными тен-

денциями развития языков разметки ;

сформировать знания о современных технологиях разработки web- до-

кументов, о возможностях языка гипертекстовой разметки;

научить разрабатывать web-документы, в том числе с помощью ин-

струментальных средств.

Место учебной дисциплины в системе подготовки специалиста. Ком-

петенции, сформированные при изучении дисциплины «Создание web- доку-

ментов», будут использованы при изучении дисциплин «Современные web-

технологии» «Компьютерные системы и сети», «Программирование сетевых

приложение», а также специальных дисциплин, выполнении научных, курсо-

вых работ и в будущей профессиональной деятельности.

Требования к освоению учебной дисциплины

В результате изучения дисциплины студент должен

знать:

принципы функционирования интернета;

основные свойства и возможности языка гипертекстовой разметки;

теоретические основы CSS;

методы и средства создания и редактирования web- документов;

уметь характеризовать:

архитектуру служб WWW и ее составляющих;

язык гипертекстовой разметки HTML и технологии CSS;

инструментальные средства создания web-документов.

На лекционных занятиях по дисциплине «Cоздание web-документов»

возможно использование элементов проблемно-поискового обучения и вари-

4

ативного подхода к подаче и иллюстрации учебного материала. На практиче-

ских занятиях по дисциплине необходимо развивать у студентов навыки

учебно-исследовательской деятельности и творческого подхода к решению

поставленных задач,

Учебным планом специальности на изучение дисциплины отводится

всего 80 часов, из них для дневной формы обучения 48 часов аудиторных, за-

очной формы обучения 10 часов аудиторных.

Форма контроля – зачет в 3-м семестре для дневной, в 4-м – для заоч-

ной форм обучения

Таблица – Распределение аудиторного времени по видам занятий, кур-

сам и семестрам

Кур

с

Сем

естр

Количество аудиторных часов

лекции

практические

(семинарские)

занятия

лабораторные

занятия

Заочная форма обучения

2 3. 2 2

2 4 2 4

Итого 4 6

Дневная форма обучения

2 3 20 28

С целью текущего контроля знаний и умений студентов по дисци-

плине может использоваться следующий диагностический инструментарий:

устный вопрос во время практических занятий;

выполнение практических заданий к лабораторным рабо-

там и их защита;

проведение текущих контрольных работ по отдельным те-

мам;

защита выполненных в рамках самостоятельной работы ин-

дивидуальных заданий;

коллоквиум по теоретической части курса;

тестирование, в том числе компьютерное.

5

2 ТЕОРЕТИЧЕСКИЙ РАЗДЕЛ

2.1 Содержание лекционного материала

Тема 1. Введение в web-технологии

План лекции:

1. Цель и задачи дисциплины. Структура дисциплины, место в учебном

плане специальности.

2. Организация сети Интернет

3. Служба World Wide Web. Консорциум W3C.

4. Архитектура web-приложений. Клиентские и серверные технологии.

Краткий конспект:

Интернет – совокупность сетей (гиперсеть, метасеть, сеть сетей), ис-

пользующих стек протоколов TCP/IP.

IP (Internet Protocol) отвечает за передачу данных по сети (маршрутиза-

цию) и адресацию устройств в сети.

TCP (Transmission Control Protocol — протокол управления передачей)

выполняет разбиение передаваемого сообщения на блоки и правильное вос-

становление адресату.

Помимо базовых протоколов существуют прикладные протоколы (высо-

коуровневые), отвечающие за функционирование служб Интернета (HTTP,

FTP, SMTP, POP3, IMAP и др.).

Каждый компьютер идентифицируется цифровым адресом, состоящим

из четырех чисел от 0 до 255 (8 бит), отделенных друг от друга точками – IP-

адрес. Компьютерам, постоянно работающим в сети, присваивается постоян-

ный IP-адрес. Такие компьютеры называют хостами. Компьютерам, работа-

ющим в сеансовом режиме, IP-адрес присваивается на время работы в сети

(один из свободных адресов).

Домен – группа хостов, объединенная по определенному признаку и

имеющая одно имя. Одному IP-адресу соответствует один доменный адрес.

Чтобы доменные адреса не повторялись, они регистрируются в ассоциации

InterNIC. Для преобразования доменного адреса в цифровые и обратно, су-

ществуют специальные серверы – DNS (Domain Name Server).

World Wide Web (W3) – глобальная распределенная информационная

гипертекстовая мультимедиа-система, основанная на физической инфра-

структуре Интернета и протоколе передачи данных HTTP.

HTTP (Hypertext Transfer Protocol – протокол передачи гипертекста) –

предназначен для установления связи с веб-сервером и обеспечения доставки

HTML-страниц веб-браузеру клиента.

6

Web -сервер (HTTP-сервер, WWW-сервер) — это ПО, принимающее

HTTP-запросы от клиентов и выдающее им HTTP-ответы, обычно вместе с

HTML-страницей, изображениями, файлами, медиа-потоком или другими

данными.

Web-браузер (browser) – специальная прикладная программа, позволя-

ющая просматривать гипертекстовые страницы и совершать переходы по ги-

перссылкам.

URL (Universal Resource Locator) – универсальный указатель ресурса,

указывает точное местонахождение документа в сети.

Web-приложение – клиент-серверное приложение, в котором клиентом

выступает браузер, а сервером — Web-сервер.

Клиентская часть Web-приложения – это графический интерфейс.

Серверная часть Web-приложения – это программа или скрипт на

сервере, обрабатывающая запросы пользователя (то есть запросы браузера).

Клиентские технологии:

HTML – основной язык создания Web-страниц, используется для фор-

матирования и разметки;

CSS (Cascading Style Sheets) – позволяют разделить оформление и со-

держимое документа, используя каскадные таблицы стилей;

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

написания сценариев для активных HTML-страниц.

Серверные технологии:

PHP – серверный язык создания сценариев. Конструкции на языке РНР

встраиваются в HTML-документ для придания странице интерактивности и

интерпретируется специальным серверным модулем при обращении к стра-

нице;

ASP (Active Server Pages) – технология создания Web -приложений от

компании Майкрософт, с внедренными в них фрагментами кода, выполняе-

мыми на стороне сервера.

JSP (Java Server Pages) – технология, позволяющая создавать содержи-

мое, которое имеет как статические компоненты (HTML, XML), так и дина-

мические JSP элементы.

Тема 2. Основные понятия и правила HTML. Структурные элементы

документа


1. Понятие и эволюция HTML.

2. Общая структура документа HTML.

3. Элемент <!DOCTYPE>. Элементы заголовка документа.

7


HTML (Hyper Text Markup Language) - стандартный язык разметки до-

кументов во Всемирной паутине. Язык HTML интерпретируется браузерами

и отображается в виде документа, в удобной для человека форме.

Версии языка разметки представлены на рис. 2.1.

Рисунок 2.1 – Эволюция HTML

Основной единицей языка HTML является тег. Теговая модель описыва-

ет документ как совокупность контейнеров, каждый из которых начинается и

заканчивается тегами. Общая структура контейнера:

<"имя тега" "список атрибутов">

содержание контейнера

</"имя тега">

Некоторые теги являются элементами HTML сами по себе, и в рамках

спецификации HTML для них соответствующий закрывающий тег необяза-

телен.

Общий вид задания атрибута: имя атрибута = "значение атрибута". У не-

которых атрибутов значение отсутствует. Закрывающие теги никогда не со-

держат атрибутов.

Все теги НТМL по их назначению и области действия можно разделить

на следующие основные группы:

− определяющие структуру документа;

− задающие оформление элементов документа;

− гипертекстовые ссылки и закладки;

− формы для организации диалога;

− вызов программ.

Кроме тегов, элементами HTML являются специальные символы CER

(Character Entity Reference). Спецсимволы могут задаваться трехзначным ко-

дом – &#nnn или именем элемента – &имя.

8

Корневым элементом любого HTML-документа является контейнер

HTML, в котором размещается всё содержимое документа. Оно включает

две обязательные части: HEAD (заголовок) и BODY (тело), следующих в

указанном порядке:

<HTML>

<HEAD> Заголовок </HEAD>

<BODY> Содержание </BODY>

</HTML>.

Элемент <!DOCTYPE> предназначен для указания типа текущего до-

кумента. Это необходимо, чтобы браузер понимал, как следует интерпрети-

ровать веб-страницу, поскольку HTML существует в нескольких версиях.

К основным элементам HTML-разметки заголовка относятся:

1) HEAD (элемент разметки HEAD);

2) TITLE (заглавие документа);

3) BASE (базовый URL);

4) META (метаинформация);

5) LINK (общие ссылки);

6) SCRIPT (скрипты).

Элемент HEAD не является обязательным. Атрибутов у тега нет.

Синтаксис контейнера TITLE в общем виде выглядит следующим обра-

зом: <TITLE>название документа</TITLE>. Атрибутов у тега нет.

Элемент BASE указывает базовый URL, относительно которого будут

разрешаться все относительные URL, встречающиеся в этом документе.

Элемент META предназначен для внедрения в документ информации о

нем самом (метаинформации), которая может быть использована службами

поиска документов в Интернет.

Элемент LINK определяет соотношение между текущим документом и

другими документами. Используется для связывания документов со списка-

ми стилей.

Элемент SCRIPT предназначен для описания скриптов, может содержать

ссылку на программу или ее текст на определенном языке (обычно

JavaScript).

Тема 3. Форматирование элементов web-страницы. Навигация


1. Теги форматирования текста.

2. Маркированные и нумерованные списки.

3. Создание и форматирование таблиц.

4. Графические элементы HTML–документа.

5. Создание ссылок.

9


Форматирование абзацев:

• Теги <H1> ... </H1> – <H6> ... </H6> описывают заголовки шести раз-

личных уровней. Необязательные атрибуты: ALIGN=CENTER | RIGHT

| LEFT – задает выравнивание заголовка.

• Тег <P> ... </P> – описывает абзац. Тег является блочным элементом,

абзац текста всегда начинается с новой строки. Необязательный атри-

бут ALIGN.

• Тег <BR> – устанавливает перевод строки в том месте, где этот тег

находится.

• Тег <PRE> - определяет блок заранее форматированного текста.

Некоторые теги форматирования шрифта*:

• <FONT>…</FONT> – устанавливает размер, цвет и гарнитуру текста.

Атрибуты: COLOR="цвет" – задает цвет текста; FACE="шрифт" –

определяет гарнитуру текста, SIZE="1-7" – устанавливает размер

шрифта (от 1 до 7).

• <B>…</B> – выделение текста жирным.

• <I>…</I> – выделение текста курсивом.

• <U>…</U> – подчеркивание текста.

*Это устаревшие элементы форматирования, практически не используются

(см. лекцию 5), однако продолжают поддерживаться браузерами.

Маркированные и нумерованные списки.

Тег <OL>…</OL> – создает нумерованный список элементов. Атрибу-

ты:

• START="N" – начать нумерацию с числа N;

• TYPE="…" -определяет формат нумерации:

• 1 – арабские цифры (по умолчанию);

• A – прописные буквы (A, B, C);

• а – строчные буквы (a, b, c);

• I – прописные римские цифры (I, II, III);

• i – строчные римские цифры (i, ii, iii).

Тег <UL>…</UL> – создает маркированный список элементов. Атрибут

TYPE="…" – определяет формат маркера:

• disk – диск (по умолчанию);

• circle – окружность;

• square – квадрат.

10

Тег <LI>…</LI> – задает элемент списка в нумерованном или маркиро-

ванном списке. Атрибуты:

• TYPE="…" – формат номера или маркера;

• VALUE="N" – задает номер элемента списка.

Создание и форматирование таблиц.

Тег <TABLE>…</TABLE> – определяет начало и конец кода таблицы,

содержит в себе теги строк и ячеек. Атрибуты:

• ALIGN= LEFT | RIGHT | CENTER – определяет режим выравнивания

таблицы относительно текста в строке;

• BACKGROUND="URL" – задает фоновый рисунок в таблице;

• BGCOLOR="цвет" – цвет фона таблицы;

• BORDER="N" – устанавливает толщину границ таблицы, равную N

пикселей (0 для отключения);

• BORDERCOLOR ="цвет" – цвет рамки;

• CELLPADDING="N" – размер поля вокруг содержимого каждой ячей-

ки;

• CELLSPACING="N" – размер свободного пространства между ячейка-

ми;

• WIDTH="N" – ширина таблицы в пикселях или процентах от ширины

окна.

Если ширина таблицы изначально не задана, то она вычисляется исходя

из содержимого ячеек. Максимальная ширина таблицы в таком случае равна

ширине окна.

Тег <TR>…..</TR> служит контейнером для строк таблицы. Атрибуты

тега:

• BGCOLOR="цвет" – устанавливает цвет фона строки таблицы;

• BORDERCOLOR="цвет" – устанавливает цвет рамки вокруг строки.

Рамка показывается, когда установлен параметр border с ненулевым

значением у тега <TABLE>;

• ALIGN="LEFT | CENTER | RIGHT | JUSTIFY" – Задает выравнивание

содержимого ячеек строки по горизонтали. Выравнивание осуществля-

ется для всех ячеек в пределах одной строки.

• VALIGN="TOP | MIDDLE | BOTTOM | BASELINE" – Устанавливает

вертикальное выравнивание содержимого ячеек в строке.

Тег <TD>…</TD> – определяет ячейку данных таблицы. Атрибуты:

• ALIGN="…" – определяет режим выравнивания содержимого ячейки;

• BACKGROUND="URL" – URL изображения, которое заполнит фон

ячейки;

• BGCOLOR="цвет" – цвет фона ячейки;

11

• VALIGN="…" – определяет режим выравнивания содержимого ячейки

по вертикали

• HEIGHT="N" – высота ячейки в пикселях;

• WIDTH="N" – ширина ячейки в пикселях или процентах от ширины

таблицы;

• СOLSPAN="N" – объединяет N столбцов;

• ROWSPAN="N" – объединяет N строк.

В HTML–документе используются три типа файлов изображений:

• GIF (Graphics Interchange Format),

• JPG / JPEG (Joint Photographic Experts Group);

• PNG (Portable Network Graphics).

Тег <IMG> позволяет отобразить изображение на веб-странице. Основ-

ные атрибуты:

• SRC="URL"– задает URL изображения. Обязательный атрибут;

• BORDER="N" – определяет ширину границ рамки изображения в пик-

селах;

• АLT="ТЕКСТ" – задает строку альтернативного текста, который будет

выводиться вместо изображения, когда оно недоступно;

• WIDTH="N" – определяет ширину изображения;

• HEIGHT="N" – определяет высоту изображения;

• HSPACE="N" – задает интервал справа и слева изображения;

• VSPACE="N" – задает в пикселах размер свободного интервала над и

под выровненным графическим изображением;

• CLEAR=LEFT | RIGHT | ALL – отмена обтекания текста.

Адрес фонового изображения страницы задается в атрибуте

BACKGROUND тега <BODY>.

Тег <HR> – рисует горизонтальную линию. Линия всегда начинается с

новой строки, а после нее все элементы отображаются на следующей строке.

Необязательные атрибуты:

• ALIGN=CENTER | RIGHT | LEFT – задает выравнивание;

• WIDTH= "N" – ширина линии в процентах/пикселях (точках);

• SIZE="N" – толщина линии в пикселях;

• COLOR=" цвет " – цвет линии.

Для создания ссылок используется тег <A>…</A>.

Обязательный атрибут HREF указывает абсолютный или относительный

адрес, на который ведет ссылка. Абсолютный адрес содержит в себе имя хо-

ста и полный путь к ресурсу, например: http:// Ошибка! Недопустимый объект ги-

перссылки. docs / about.html. Для документов, расположенных на том же сайте,

можно использовать относительный адрес.

Оформление гиперссылки на закладку в документе:

12

1. <A NAME="идентификатор">...</A>. Устанавливает имя якоря (за-

кладки) внутри документа.

2. <A HREF="#идентификатор ">...</A> – ссылка на закладку. Имя ссыл-

ки на закладку начинается символом #, после чего идет название за-

кладки.

Необязательные атрибуты:

• TARGET ="имя окна" – имя окна или фрейма, куда браузер будет за-

гружать документ (_BLANK – в новое окно браузера, _SELF – текущее

окно);

• TITLE="текст" – добавляет всплывающую подсказку к тексту ссылки.

Можно в качестве ссылки использовать изображение, поместив внутрь

тега <A> соответствующий тег.

Тема 4. Создание форм в документах HTML. Фреймы.


1. Форма HTML. Создание формы.

2. Элементы пользовательского интерфейса форм.

3. Фреймы и их свойства (самостоятельное изучение).


Формы используются для организации взаимодействия пользователя с

Web-сервером через интернет. HTML-теги форм лишь обеспечивают интер-

фейс и элементы управления для сбора информации. Реальная работа выпол-

няется приложениями, обрабатывающими формы, обычно сценариями.

Тег <FORM> ……..</FORM> – контейнер формы. Атрибуты:

• ACTION – задает URL приложения, которое должно получить и обра-

ботать данные формы;

• METHOD – устанавливает метод, посредством которого браузер пере-

дает серверу для обработки данные формы. Существуют два метода:

• POST браузер передает данные в два шага: 1-ый – браузер уста-

навливает связь с обрабатывающим форму сервером, адрес кото-

рого указан в атрибуте action, 2-ой – когда связь установлена, по-

сылает данные серверу в отдельном сеансе связи.

• GET (по умолчанию) соединяется с обрабатывающим форму сер-

вером и отправляет данные за один шаг.

Тег <INPUT> – создание элементов различных типов: поля ввода дан-

ных, кнопки и переключатели и т.д. Атрибуты:

13

• NAME – имя (идентификатор) элемента. Обязателен, если предполага-

ется использовать элемент в составе формы для передачи значения ат-

рибута value на сервер;

• DISABLED – делает элемент недоступным пользователю;

• ACCESSKEY – определяет клавишу быстрого доступа к элементу (в

сочетании с клавишей <Alt>);

• TABINDEX – целое число, определяющее порядок перехода к элементу

по клавиши <Тав>.

Следующие элементы управления вводятся как атрибуты TYPE:

• текстовое поле TYPE="TEXT"; атрибуты:

• MAXLENGTH – максимальное количество вводимых символов;

• SIZE – ширина поля, выраженная в количестве одновременно

видимых символов;

• VALUE – значение (содержимое поля);

• переключатель TYPE="CHECKBOX " (RADIO), атрибуты:

• VALUE – значение, ассоциированное с флажком;

• СHECKED – определяет, установлен флажок заранее или нет;

• пароль TYPE="PASSWORD", атрибуты такие же, как у текстового по-

ля;

• кнопка TYPE= "BUTTON", атрибут VALUE – надпись, отображаемая

на кнопке. По умолчанию на кнопке нет надписи;

• кнопка отправки данных формы на сервер TYPE= "SUBMIT"; атрибут

VALUE – строка, отображаемая на кнопке, по умолчанию «Отправить»

или «Submit»;

• графическая кнопка отправки данных формы на сервер TYPE= "IM-

AGE", атрибут src="URL" – адрес графического файла;

• кнопка для сброса данных формы в первоначальное значение TYPE=

"RESET";

• поле ввода имени файла, для отправки на сервер TYPE= " FILE", атри-

буты как у тестового поля.

Тег <SELECT> …</SELECT> создает раскрывающейся список. Атрибу-

ты:

• NAME = "имя" – определяет имя поля;

• SIZE = "число" – определяет количество видимых строк. По умолча-

нию одна строка;

• MULTIPLE – задает прокручивающийся список, позволяет выбрать

сразу несколько строк.;

• DISABLED– блокирование элементов форм;

• TABINDEX = "порядковый номер" – определяет последовательность

перехода между полями при нажатии на <Tab>.

14

Тег работает как контейнер для любого количества тегов <OPTION>.

Атрибуты тега <OPTION>:

• SELECTED – видимое поле по умолчанию;

• VALUE = “текст” – определяет значение, кот рое будет отправлено на

сервер при выбранном пункте списка.

Иерархические списки создаются с помощью контейнера

<OPTGROUP>……</OPTGROUP> с атрибутом LABEL – невыбираемым

элементом списка, выполняющим роль заголовка группы элементов.

Тема 5. Основы CSS.


1. Определение и синтаксис CSS

2. Типы простых селекторов

3. Способы задания стилей и порядок их применения

4. CSS-свойства: размеры, цвета, шрифты

5. CSS-свойства: оформление списков и таблиц (самостоятельное изуче-

ние)

6. Составные селекторы. Комбинаторы. Селектор потомка. Селектор до-

черних элементов. Селектор обобщенных родственных элементов (са-

мостоятельное изучение).


CSS (Cascading Style Sheets – каскадные таблицы стилей) – технология

управления внешним видом элементов (тегов) веб- страницы. Использование

CSS позволяет разделить оформление и содержимое документа.

Рекомендуется для оформления использовать только средства CSS, отка-

заться от использования таких тегов, как <FONT>, <S>, <U>, <CENTER>,

атрибутов ALIGN, BORDER, COLOR, HEIGHT, WIDTH и т.д.

Синтаксис CSS:

Селектор

{

свойство1: значение1;

свойство2: значение2;

свойство3: значение3 значение4;

}

Селектор служит для однозначной идентификации HTML элемента

средствами CSS. CSS-свойства определяют отображение элемента веб-

страницы в браузере.

Типы простых селекторов:

15

• универсальный селектор – все объекты: *{описание}

• объекты определенного типа: Имя тега { описание };

• объекты с заданным классом: ТЕГ.имя_класса { описание }. Правила,

указанные после такого селектора, будут действовать только на теги с

атрибутом class="имя_класса": <ТЕГ class="имя_класса"> … </ТЕГ> ;

В отличие от названий HTML-тегов, в названиях классов различаются

строчные и прописные буквы. То есть class="active" и class="Active" – это

совсем разные классы.

• объект с определенным идентификатором: #Имя идентификатора

{ описание };

• объекты с определенными характеристиками – селекторы атрибутов.

Способы задания CSS:

1. Embedded CSS (глобальная таблица стилей) – вставка непосредственно

в заголовок HTML-документа. Правила таблицы стилей заключаются в

контейнерный тег <STYLE>.

2. Inline CSS (встроенные стили) – вставка непосредственно тег виде

строки описания в атрибуте STYLE.

3. Import CSS - вставка таблицы стилей из внешнего файла. Файл табли-

цы стилей является текстовым файлом с расширением CSS. Оператор

@import используется перед другими правилами таблицы стилей в

контейнере <STYLE> или в CSS-файле.

4. External CSS (внешняя таблица стилей) – связывание с таблицей сти-

лей в внешнем файле с помощью ссылки задаваемой тегом <LINK>,

который помещаемого в контейнер <HEAD>.

Порядок применения стилей:

• стиль, указанный в атрибуте style, перекрывает стиль, указанный в теге

<STYLE> или внешнем файле CSS;

• селектор ID (#) имеет больший приоритет, чем селектор класса, селек-

тор класса – больший, чем селектор тега.

CSS-свойства для форматирования шрифта:

font-size – размер шрифта. Может быть задан как абсолютный, так и от-

носительный размер.

Единицы измерения:

em – текущая высота шрифта;

pt – пункты (типографская единица измерения шрифта);

px – пиксел;

% – процент;

Гораздо реже используется указание размеров в миллиметрах (mm), сан-

тиметрах (cm) и дюймах (in).

font-family - определяет список семейств шрифтов:

16

• serif – шрифты с засечками (антиквенные), например: Times New Ro-

man, Georgia.

• sans-serif – рубленные шрифты (шрифты без засечек или гротески), ти-

пичные представители – Arial, Impact, Tahoma, Verdana;

• cursive – курсивные шрифты: Comic Sans MS;

• fantasy – декоративные шрифты, например: Curlz MT.

• monospace – моноширинные шрифты, ширина каждого символа одина-

кова.

font-style – задает начертание текста: normal (обычное), italic (курсив-

ное) или oblique (наклонное);

font-weight – жирность шрифта. Возможные значения: normal, bold

(жирный), bolder (жирнее), lighter (светлее) или одним из девяти целых чисел

от 100 до 900;

font-variant – вариант стиля шрифта. Возможные значения: normal

(принимается по умолчанию) и small-caps.

font – позволяет установить сразу несколько свойств шрифта в одном

определении;

color – задает цвет текста;

text-decoration – задает оформление текста.

CSS-свойства для форматирования абзаца:

line-height – межстрочный интервал (интерлиньяж), указывает расстоя-

ние между строками текста;

text-align – выравнивание текста в блоке.

Псевдокласс – это фантомный класс, наличие которого зависит от со-

стояния элемента или структуры документа в целом, то есть с помощью

псевдоклассов можно задать стиль в зависимости от состояния элемента или

его положения в документе.

4 группы псевдоклассов:

1. псевдокласс first-child – задает стиль для элемента, являющегося

первым потомком своего родителя;

2. Псевдоклассы ссылок: link и visited. Позволяют задавать стили для

элементов, являющихся ссылками;

3. Динамические псевдоклассы – применяются к элементам в зависи-

мости от действий пользователя:

• hover – элемент, над которым находиться указатель мыши. Как только

указатель уходит за пределы элемента, стили, заданные этим псевдо-

классом, отменяются;

• active – элемент, активированный пользователем (например, ссылка

или кнопка в момент щелчка);

• focus – элемент, которому принадлежит фокус ввода.

17

4. Псевдокласс :lang – используется для выбора элементов по их язы-

ку. Код языка указывается в круглых скобках.

Псевдоэлементы – это условные фиктивные элементы, которые явля-

ются частью существующих элементов или вводятся в документ дополни-

тельно.

Псевдоэлементы:

• :first-letter – позволяет задавать стили для первой буквы внутри эле-

мента;

• :first-line – применяет стиль ко всей первой строке;

• :after и :before – позволяет вставить сгенерированный на ходу контент

после или до определенного элемента. Для того, чтобы задать вставля-

емый текст используется специальное свойство content.

Тема 6. Блочная модель web-документа


1. Типы элементов. Теги DIV и SPAN

2. CSS-свойства: размеры, поля, заполнение, границы.

3. Позиционирование блоков


Элементы строкового уровня (“inline” в терминологии CSS) – это эле-

менты исходного документа, которые не формируют новых структурных

единиц текста (например, абзацев). Их содержимое выводится в строке

(например, выделенные отрывки текста в абзаце или графические объекты,

импортированные в текст).

К элементам уровня блока (“block” в терминологии CSS) относятся эле-

менты исходного документа, которые визуально форматируются в виде

неких структурных единиц текста (например, абзацев).

Теги <DIV> и <SPAN> определяют семантически нейтральные блочный

и строчный элементы соответственно.

Элементы уровня блока могут содержать и строчные, и блочные элемен-

ты, но не наоборот.

Блок текста обладает свойствами:

• высоты (height),

• ширины (width),

• границы (border),

• отступа (margin),

• полей (padding*),

• произвольного размещения (float),

• управления обтеканием (clear).

18

Для полей и отступов можно задать размеры 4-х сторон с помощью сле-

дующих параметров:

• margin-top, margin-right, margin-left, margin-bottom – размеры полей;

• padding-top, padding-right, padding-left, padding-bottom – размеры от-

ступов.

Для границ можно задать толщину, цвет и стиль:

• border-width – толщина границы Значения можно задавать в абсолют-

ных единицах (% - нельзя) или ключевые слова: thin (тонкая), medium

(средняя), thick (толстая), по умолчанию - medium;

• border-color – цвет границы (по умолчанию – черный);

• border-style – стиль границы. Может принимать значения solid (по

умолчанию), dotted, dashed, double, groove, ridge, inset или outset.

Блочные элементы используются для группировки области HTML кода

и подключения к этой группе определенных стилей CSS. Это осуществляется

при помощи атрибутов class и id, ассоциирующих данные элементы

с селекторами класса или идентификатора CSS. Пример стандартной блочной

верстки приведен на рис. 2.2.

Рисунок 2.2 – Пример блочной верстки

Четыре способа позиционирования блоков (рис. 2.3):

• Статическое (Static), отсутствие какого бы то ни было позиционирова-

ния, а просто выкладывание блоков одного за другим сверху вниз –

прямой поток (по умолчанию).

http://msiter.ru/tutorials/css-srednego-urovnya/selektory-klassov-identifikatorov

19

• Абсолютное (Absolute). Блок с абсолютным позиционированием распо-

лагается по заданным координатам, а из того места, где он должен был

бы быть, он удаляется, и в этом месте сразу начинают раскладываться

следующие боксы . Говорят, что он "исключается из потока".

• Фиксированное (Fixed). Фиксирует элемент относительно окна. Эле-

мент остается на месте даже при прокрутке страницы.

• Относительное (Relative). Такой блок можно сдвинуть относительно

того места, где он был бы в потоке, но при этом из потока он не исклю-

чается, а продолжает занимать там свое место. То есть сдвигается со

своего места он только визуально, а положение всех блоков вокруг не-

го никак не меняется.

Рисунок 2.3 – Позиционирование блоков

Обтеканием блока текста другим текстом управляют два атрибута CSS:

float и clear.

Атрибут float определяет блок как "плавающий" и может принимать

значения:

• left – блок прижат к левой границе охватывающего элемента;

• right – блок прижат к правой границе охватывающего элемента;

• both – текст может обтекать блок с обеих сторон

Атрибут clear запрещает обтекание элемента с левой (left), правой

(right) или с обеих сторон (both). По умолчанию значение none – обтекание

разрешено.

Для управления порядком наложения элементов друг на друга необхо-

димо использовать свойство z-index. Значением z-index является положитель-

ное или отрицательное число, задающее «высоту», на которой расположен

элемент. Элементы с большим z-index накладываются сверху элементов с

меньшим z-index.

20

2.2 Литература

Основная

1 Вин, Ч. Как спроектировать современный сайт : профессиональный web-

дизайн на основе сетки / Ч. Вин. - Москва [и др.] : Питер, 2011. - 192 с.

2 Гаевский, А. Ю. 100% самоучитель по созданию Web-страниц и Web-

сайтов: HTML и JavaScript / А. Ю. Гаевский, В. А. Романовский. - Москва

: Технолоджи - 3000 : Триумф, 2008. - 457 с Мержевич, В. HTML и CSS на

примерах. – Спб: БХВ-Петербург, 2005 – 448с.

3 Дронов, В. HTML5, CSS 3 и Web 2.0. Разработка современных Web-

сайтов / В. Дронов. – БХВ-Петербург, 2011 – 416с.

4 Квинт, И. HTML, XHTML и CSS на 100%. / И. Квинт – Спб: Питер, 2010 –

384с.

5 Кристофер, Шмитт. CSS. Рецепты программирования / Ш. Кристофер.–

Спб: БХВ-Петербург, 2011. – 672 с.

6 Мержевич, В. HTML и CSS на примерах / В. Мержевич. – Спб: БХВ-

Петербург, 2005 – 448с.

7 Молли Э. Хольцшлаг. Использование HTML и XHTML. Специальное из-

дание / Э. Хольцшлаг Молли. – М.: Издательский дом “Вильямс” – 2004. -

736с.

8 Фрэйн, Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и

устройств / Б. Фрэйн ; [перевод с английского В. Черник]. - Санкт-

Петербург [и др.] : Питер, 2014. – 298 с.

9 Хеник, Бен. HTML и CSS. Путь к совершенству / Бен Хеник. – Питер,

2011. – 336с.

10 Шмитт, Кристофер. CSS. Рецепты программирования. / Кристофер

Шмитт. – Спб: БХВ-Петербург, 2011. – 672 с.

Дополнительная

11 Дубаков, М.А. Создание Web-страниц: искусство верстки. – Мн.: Новое

знание, 2004. – 287 с.

12 Божко А. Dreamweaver 4. Базовый курс. - Москва: издательство "ДЕСС

КОМ", 2001. - 448 с.

13 Андерсон, С. Приманка для пользователей : создаем привлекательный

сайт / С. Андерсон ; [пер. с англ. С. Силинский]. - Москва : Питер, 2013. -

234 с.

14 Шляхтина, С. Джентльменский набор для быстрого создания сайта / С.

Шляхтина // КомпьютерПресс. - 2007. - № 2. - С. 83-88.

15 Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. -

2008. - № 5. - С. 25-27.

21


2008. - № 6. - С. 27-29.

17 Рязанцева, Л. Что нам стоит сайт построить : как писать для web-сайта / Л.

Рязанцева // Библиополе. - 2008. - № 7. - С. 27-29


2008. - № 8. - С. 20-21

Интернет-ресурсы

19 Для тех, кто делает сайты. Электронный ресурс http://htmlbook.ru — учеб-

ники HTML, CSS

20 World Wide Web Consortium. Электронный ресурс: http://www.w3.org –

сайт

22

3 ПРАКТИЧЕСКИЙ РАЗДЕЛ

3.1 Лабораторный практикум

Лабораторная работа №1. Структура HTML-документа. Форматирование

элементов web-страницы. Навигация

Цель работы: научиться создавать HTML-документы, форматировать текст,

оформлять списки, создавать и форматировать таблицы, обрабатывать и раз-

мещать изображения на HTML –страницах, создавать гиперссылки.

Порядок проведения работы

1. В папке с номером группы создать папку site1. В текстовом редакторе

Notepad++ создать файл с именем index.html и сохранить в папке site1.

2. Задать в файле структуру HTML-документа c помощью контейнеров

HTML, HEAD, TITLE («Создание веб-документов») и BODY.

3. Определить и задать в созданном HTML-документе цветовую схему сайта,

установив следующие значения атрибутов тега <BODY>…<BODY>:

– цвет фона bgcolor = #191970;

– цвет текста text = #FFFAFA;

– цвет ссылок: обычных link = “silver”, активных alink = “purple”, посещен-

ных vlink = “cornsilk”.

4. Используя тег заголовка <H1> ... </H1>, вывести в верхней части HTML-

документа название «Руководство по созданию веб-документов».

5. Создать горизонтальную линию под заголовком с помощью тега <HR>.

6. Создать нумерованный список с помощью тега <OL>…</OL>. Использовать

тег <LI> для оформления каждого пункта нумерованного списка, заголовок

списка «Содержание» ввести без тега <LI> (рис. 3.1). С помощью тега

<UL>…</UL> создать вложенные маркированные списки для каждого пункта.

Использовать разные маркеры для списков.

Рисунок 3.1 – Содержание веб-страницы

23

7. С помощью тегов форматирования шрифта <FONT>…</FONT>, <U>…</U>,

<B>…</B>, <I>…</I>, отформатировать шрифт пунктов меню согласно рис. 3.1.

8. Сохранить файл. Открыть в браузере. При некорректном отображении,

найти и исправить ошибки.

9. Создать в папке site1 папки pages и images. Скопировать в images файлы

изображений.

10. В приложении Notepad++ создать новую веб страницу page21.html, со-

хранить в папке pages.

11. Определить цветовую схему аналогично странице index.html. Создать

структуру документа. Оформить заголовок (тег TITLE) «Структурные теги».

12. Ввести следующий текст (выделен курсивом), сохранив исходное форма-

тирование, с помощью контейнера <PRE> …..</PRE>. Для символов «<» и

«>» использовать имена символов – &lt и &gt соответственно.

HTML-документ – представляет собой контейнер, начинающийся с тега

<HTML> и заканчивается тегом </HTML>.

Также документ включает два вложенных контейнера:

заголовка документа <HEAD>…</ HEAD>

тела документа <BODY> </BODY>

13. В этом же документе создать список терминов и их определений (выде-

лен курсивом), использовать теги <DL>…</DL>, <DT>…</DT>,

<DD>…</DD>.

Тег-контейнер HTML

Тег помещают в начало и конец документа, обозначает начало и за-

вершение создания HTML-документа.

Тег-контейнер HEAD

Тег определяет заголовочную часть документа

Тег-контейнер TITLE

Определяет название документа.

Тег-контейнер BODY

Тег определяет начало и конец основной части документа. Атрибуты

этого тега оказывают влияние на весь документ.

14. Создать в папке pages страницу page22.html. Определить структуру до-

кумента. Оформить заголовок «Работа с таблицами».

15. Создать на странице таблицу (рис. 3.2) с помощью контейнеров

<TABLE>…</TABLE>, <TR> ……</TR> и <TD> </TD>. Для объединения строк

использовать атрибут rowspan="3", ширина границы border="2". Установить

различные цвета для фона ячеек, выравнивание согласно рисунку. Использо-

вать тег <CAPTION>….</CAPTION> для оформления заголовка таблицы. Для

отображения символов «<» и «>» использовать их имена.

24

Рисунок 3.2 –Отображение таблицы в браузере

16. В качестве фона веб-страницы задать рисунок из папки images. Для этого

установить требуемое значение (обратите внимание на расположение файла

изображения) атрибута background тега <BODY>…<BODY>.

17. Создать в папке pages страницу page23.html. Определить структуру до-

кумента. Оформить заголовок «Вставка изображений».

18. Оформить абзац с текстом «Выравнивание по центру, фиксированный

размер» (рис. 2.3).

19. Вставить по центру веб-страницы изображение фиксированного размера,

Использовать тег <IMG>, установить необходимые атрибуты (см лекцию).

20. Вставить изображение у левого края веб-страницы, ввести текст, распо-

ложив его справа по центру изображения (рис. 3.3).

Рисунок 3.3 –Web-страница с рисунками

21. Слева внизу ввести текст «Содержание» и оформить его как гиперссылку

на страницу index.html. Использовать тег <A>…..</A>.

25

22. Аналогично создать гиперссылки для перехода на страницу index.html

со страниц page21.html, page22.html. И наоборот, оформить соответствую-

щие пункты списка страницы index.html как гиперссылки для перехода на

страницы page21.html, page22.html, page23.html соответственно.

23. На главной странице установить в качестве закладки первый абзац доку-

мента с текстом «Содержание» (имя закладки – “content”). Слева внизу доку-

мента ввести текст «Содержание» и оформить его как гиперссылку на за-

кладку.

Вопросы для защиты лабораторной работы:

1. Дайте описание структуры любого тега. Приведите примеры.

2. Опишите структуру html-документа.

3. Каков порядок создания html-документа?

4. Дайте характеристику тегов, используемых в лабораторной работе.

5. Опишите три основные категории специальных символов.

Лабораторная работа №2. Фреймы. Создание форм

Цель работы: научиться создавать многооконные HTML-документы, уста-

навливать параметры фреймов, а также создавать специальные экранные

элементы GUI.

Порядок проведения работы

1. В папке pages создать папку frames. Структура папок и файлов сайта по-

казана на рис.3.4.

Рисунок 3.4 –Структура сайта

2. Создать в папке pages новую страницу page11.html, содержащую 3 фрей-

ма (рис. 3.5). Для этого создать 2 горизонтальных фрейма, разделив экран в

пропорции 20% и 80% от ширины. Второй фрейм разделить на 2 вертикаль-

ных фрейма, ширина первого – фиксированная 300 пикс., второго – вся

оставшаяся.

Site1

images

frames

pages

page21.html

page22.html

page23.html

page11.html

index.htm

26

Рисунок 3.5–Макет страницы с фреймами

<FRAMESET>…… </FRAMESET> – контейнер.

Атрибуты: rows="cпиcoк значений" cols="список значений".

Список значений параметров rows и cols представляют собой разделенные запя-

тыми списки значений, которые могут задаваться в пикселях, в процентах или в

относительных единицах. Число строк или столбцов определяется числом значе-

ний в соответствующем списке. Можно определить значения для rows или cols,

или обоих вместе.

Примеры: <frameset rows="25%,50%,25%">

<frameset cols="*,2*,3*">.

Звездочка (*) используется для пропорционального деления пространства. Каждая

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

стоящих у звездочек (если число опущено, то подразумевается единица), получим

знаменатель дроби.

Контейнер <FRAMESET>……. </FRAMESET> может быть вложен внутрь дру-

гого такого же контейнера.

Тег <FRAME> – задает файл в наборе фреймов.

<FRAME NORESIZE> Препятствует изменению размеров фрейма.

<FRAME SCROLLING=" "> Указывает, будет ли выводиться линейка прокрутки

в фрейме, принимает значения: «yes» – полосы прокрутки создаются в обязатель-

ном порядке; «no» – полосы прокрутки запрещены; «auto» – полосы прокрутки по-

являются по мере необходимости.

<FRAME NAME="name"> – Определяет имя фрейма.

<FRAME SRC="URL"> – Определяет, какой из HTML-файлов будет показан в

данном фрейме.

Тег <NOFRAMES> – Определяет, что будет в окне браузера, если он не поддер-

живает фреймы.

27

3. Определить фрейм 1, используя одиночный тег <FRAME>. Установить

атрибуты тега: NAME="top", SRC="…/frames/top.html">, размер не изменяет-

ся, без скроллинга.

4. Аналогично определить фрейм 2: NAME="menu", ссылка на файл frames/

menu.html; фрейм 3: NAME=" text", ссылка на файл …/frames/text.html.

5. Предусмотреть, чтобы в случае, если браузер не поддерживает фреймы

отображался текст: «Для просмотра данной страницы необходим браузер,

поддерживающий фреймы».

6. Создать страницу top.html в папке frames (рис. 3.6). Для шрифта устано-

вить параметры: color=dodgerblue; Face="arial". Рисунок должен быть рас-

положен в папке images.

Рисунок 3.6 –Содержимое страницы с фреймами

7. Создать страницу text.html согласно рис. 3.6. Использовать текст и рисун-

ки по теме (текст в файле Интернет.doc).

8. Создать 2 web-страницы в папке frames: text1.html и text2.html. Первая

страница должна содержать информацию о сервисах интернета, вторая – об

адресации.

9. Создать страницу test.html в виде формы. Форма должна обязательно со-

держать следующие элементы (рис. 3.7):

– текстовые поля ввода данных (type= “text”) для ввода фамилии, e-mail, но-

мера группы;

– поле ввода пароля: type= “password”;

– раскрывающийся список select для выбора курса;

– переключатель type=”radio” для выбора пола (жен., муж.);

– кнопки «Отправить» (type=”submit”) и «Очистить форму» (type=”reset”);

Файл top.html

Файл text.html

Файл menu.html

28

– кнопку для выбора файла type=”image”.

Блок вопросов с вариантами ответов оформить в виде списка, использо-

вать флажок (type=“checkbox”) для выбора варианта ответа. Для вопроса №4

реализовать возможность множественного выбора ответов.

Рисунок 3.7 – Элементы формы

Вопросы для размещения на web-странице: 1. Укажите правильный вариант определения изо6ражения в качестве гиперссылки.

<а HREF="адрес файла"> IМG SRC="imаgе.gif">

<а HREF="imаgе.gif">

<а HREF="адрес файла"> <IМG="imаgе.gif">

2. Найдите ошибочное определение гиперссылки.

<а HREF="аlехfinе.htm" ТАRGЕТ="lеft"> аlехfinе

<а ТАRGЕТ="аlехfinе.htm" HREF="nеw"> аlехfinе

<а HREF="аlехfinе.htm"> аlехfinе

3. В какой таблице ширина промежутков между ячейками составит 20 пикселей?

<tаblе сеllsрасing="20">

<tаblе gridsрасing="20">

<tаblе сеllраdding="20">

4. Как указать выравнивание текста в ячейке таблицы?

с помощью атрибута CELLPАDDING

с помощью атрибута VАLIGN

с помощью атрибута АLIGN

5. Какой атрибут элемента FОRМ определяет список кодировок для водимых данных?

аlt

ассерt-сhаrsеt

еnсtyре-сhаrsеt

29

6. Что определяет атрибут CELLSPАCING у элемента разметки ТАBLE?

расстояние от содержания до границы ячейки

расстояние между ячейками

ширину границы

ширину ячейки

7. Какой атрибут тэга BОDY позволяет задать цвет фона страницы?

сolor

bасkground

sеt

bgсolor

8. Какой атрибут тега <img> задает горизонтальное расстояние между вертикальной гра-

ницей страницы и изображением?

BОRDER

HSPАCE

VSPАCE

9. Какой из приведенных тегов позволяет создавать нумерованные списки?

ОL

DL

UL

DТ

10. Какой полный URL будет сформирован для ссылки в приведенном фрагменте? <bАse

href="/"<а">httр://аlехfinе.ru"> <ВОDY> <А HRЕF="dос1.html">Документ 1

httр://аlехfinе.ru/dосs/doс1.html

httр://аlехfinе.ru/dос1.html

правильный URL не может быть сформирован

10. Создать страницу menu.html. Страница должна содержать 4 ссылки для

каждого пункта меню следующего вида: <A HREF="text.html"(text1|text2|test)

TARGET="content"> (рис. 3.8).

ссылка на страницу text.html

ссылка на страницу text1.html

ссылка на страницу text2.html

ссылка на страницу test.html

Рисунок 3.8– Ссылки на web-странице

11. Оформить как гиперссылку на страницу page11.html пункт меню «Осно-

вы Интернета» страницы index.html.

30


1. Фреймы и их современное применение, а также лучшие аналоги.

2. Дайте определение форме. Укажите назначение формы.

3 Какие бывают элементы форм. Дайте характеристику каждому из элемен-

тов.

Лабораторная работа №3. Табличная верстка сайта. Использование

встроенных стилей и глобальной таблицы стилей.

Цель работы: научиться использовать встроенные стили и глобальную таб-

лицу стилей, сверстать веб-страницу с помощью таблиц.

Задание: сверстать веб-страницу на основе таблицы из 3-х строк, вторая

строка содержит две колонки: ширина левой колонки фиксированная, шири-

на правой колонки варьируется в зависимости от размеров окна браузера

(рис. 3.9).

Рисунок 3.9 – Макет web-страницы

Порядок проведения работы:

I. Создание глобальной таблицы стилей

Стили уровня документа или глобальная таблица стилей применяются ко всему доку-

менту, записываются внутри тега <STYLE>…</STYLE> в заголовке

<HEAD>…</HEAD>.

1. Создать новую web-страницу page31.html.

2. В глобальной таблице стилей страницы задать правила для следующих

элементов:

– тега BODY (отступы 0 px, выравнивание по центру: margin: 0; text-align:

center);

– заголовков 1 H1, H2 (color:003300; font-style:italic; font-size: 170%; font-

weight: bold; font-family: sans-serif);

1Цвета, шрифты, размеры и т.п. можно изменять по своему усмотрению.

31

– ячеек таблицы TD (vertical-align: top; border: 1px solid white; padding:

10px; background:#FBF0DB);

– псевдоклассов ссылок A:link, A:visited (color: black; font-family: Verdana,

sans-serif; text-decoration: none), активной ссылки A:hover (color: #de7300;

text-decoration: underline);

– класса P.p1 выравнивание по левому краю (text-align: left);

– класса P.p2: выравнивание по ширине, цвет, шрифт, размер, интервал

(text-align: justify; color: #800000; font-size:120%; font-style:normal; font-

family: sans-serif; line-height: 1.2);

– идентификатора #maket: width: 100%; height:100% border-collapse: col-

lapse (ширина всей таблицы 100% ширины окна браузера, отображать

одинарные линии);

– идентификаторов #header, #footer (высоту, цвет фона, параметры текста

установить следующие background: #800000; color: F5F5DC; font-

style:italic; font-size: 150%; font-weight: bold; font-family: sans-serif;

height:50px);

– идентификаторов левой TD#leftcol (width: 200px; border-right: 4px solid

#800000) и правой TD #rightcol колонок (color: #FAEBD7) фона.

II. Создание таблицы на основе стилей

3. В тело документа вставить таблицу с идентификатором #maket, устано-

вить cellspacing=0, cellpadding=0.

4. Первая строка таблицы: идентификатор #header, атрибут для объедине-

ния ячеек (colspan=2), чтобы центрировать текст («Каскадные таблицы сти-

лей») необходимо использовать атрибут style=vertical-align:middle (рис.

3.10).

5. Вторая строка первый столбец: идентификатор id="leftcol", для абзацев

использовать стиль P.p1. Создать 7 абзацев – пунктов меню: Определение,

Синтаксис, Типы селекторов, Способы вставки стилей, Порядок приме-

нения стилей, Стили списков и таблиц, Псевдоклассы и псевдоэлементы

(рис. 3.10). Пример создания параграфа: <p class=”p1”> Определение </p1>.

6. Вторая строка второй столбец: идентификатор id="rightcol". Создать семь

заголовков согласно пунктам меню. Каждый заголовок оформить как заклад-

ку: <h1><a name="definition">Определение</a> </h1>.

7. После каждого заголовка вставить параграф. Для текста2 применить стиль

класса P.p2: <p class=”p1”> «Текст из файла» </p1>.

8. Пункты меню (вторая строка первый столбец) оформить как ссылки на

заголовки второго столбца (закладки): <p class="p1"><a href="#definition"

title="Ссылка">Определение</a></p>.

2 Текст для размещения находится в файле Стили.docx.

32

Рисунок 3.10 –Содержание web-страницы

9. Для третьей строки использовать идентификатор id=#footer, атрибут для

объединения ячеек (colspan=2), вставьте copyright (&copy).

10. Оформить ссылку с главной страницы index.html на страницу

page31.html.

11. Создать обратную ссылку на содержание. Проверьте переходы по ссыл-

кам.


1. Область применения CSS.

2. Основные селекторы: класс, ID, псевдоклассы, псевдоэлементы.

3. Основные CSS-свойства, способы задания.

4. Внешние и внутренние отступы: margin/padding, ширина элемента.

5. Единицы измерения в CSS.

Лабораторная работа №4. Блочная верстка сайта. Использование внешней

таблицы стилей

Цель работы: научиться использовать внешнюю таблицу стилей, верстать

веб-страницы с помощью блочных элементов.

Задание: сверстать веб-страницу согласно рисунку 3.11, стили задать во

внешнем файле.

Порядок выполнения работы:

33

Рисунок 3.11 – Сверстанная веб-страница

I. Создание внешней таблицы стилей

1. Создайте следующую физическую структуру для сайта (рис. 3.12).

Рисунок 3.12 – Структура сайта

2. Скопируйте три рисунка в папку images: maket_01.png – для заголовка,

maket_02.png – для левого и правого блоков и maket_03.png – для центра.

3. В папке style создайте файл MyStyle.css. Задайте правила для стилей:

– тега body: ширина 1280px; поля 0px; цвет фона #f3f2f3; цвет текста:

#000000;

– идентификатора #main: ширина width:1280px;

– идентификатора #header: ширина width:1280px; высота height:155px (это

размер изображения); фоновое изображение ../image/maket_01.png, не по-

вторяется.

4. Создайте структуру документа index.html. Раздел head должен включать:

Site2

styles

images

pages

index.htm

content

footer

header

menu righ

t left

34

<title> ЭУМК </title>

<link rel="stylesheet" href="styles/MyStyle.css" type="text/css ">.

5. В файле index.html добавьте в контейнер body контейнер main (div

id=”main”…..</div>) и вложенный блок header main (div

id=”header”…..</div>) .

6. Просмотрите документ в браузере. Чтобы центрировать страницу, внеси-

те следующие изменения в таблицу стилей: для стиля контейнера body до-

бавьте отступ слева padding-left:50%;, для стиля #main установите размер

левого поля «минус ½ ширины» : margin-left:-640px.

7. Сохраните и просмотрите изменения.

8. Определите стили в MyStyle.css для меню:

– идентификатор #menu: ширина width:1280px; высота height:52px; цвет

фона background: #434343; верхняя и нижняя границы: 2px solid #980202;

–идентификатор #vmenu (ячейки таблицы): ширина width:256рх, цвет:

#690606; вертикальное выравнивание в ячейках – по середине vertical-

align: middle; выравнивание текста по центру text-align: center, шрифт –

font-size: 150%; font-weight: bold; font-family: Verdana, sans-serif.

9. Определите стили для ссылок. Для обычных и просмотренных ссылок

установите параметры: color: #c7c7c7; font-family: Verdana, sans-serif; text-

decoration: none, для активных: color: #960606; text-decoration: underline.

10. Определите стили в MyStyle.css для заголовка, трех блоков и «подвала»:

– #vheader: выравнивание по вертикали – по середине vertical-align:middle;

выравнивание по горизонтали – по центру text-align:center; цвет:#980202;

шрифт – font-size:35px; font-weight:bold; font-family:Verdana, sans-serif.

– #right: ширина 250px; высота 700px; размещение float:right; фоновый ри-

сунок ../image/maket_02.png, повторяется;

– #left: ширина 250px; высота 700px; размещение float:leat; фоновый рису-

нок ../image/maket_02.png, повторяется;

– #content: отступы margin слева и справа 352px; выравнивание по верти-

кали– по середине; поля – padding-top:30px;

– #footer table: цвет фона #434343; поля padding:10px; ширина width:

1280px; высота height:50px; отступы margin: 0 auto; шрифт – font-size:

100%; font-family: Verdana, sans-serif; выравнивание текста – слева, цвет

color:#c7c7c7.

11. Определите стиль для заголовка: color:#434343; выравнивание – по цен-

тру; шрифт– font-size: 150%; font-weight: bold;font-family: Verdana, sans-serif.

12. В блок #header вставьте параграф «Электронный учебно-методический

комплекс. Создание веб-документов» с идентификатором #vheader. Располо-

жите в 2 строки.

13. Сохраните и посмотрите в браузере. Для того, чтобы разместить текст в

центре блока по вертикали внесите следующие изменения в правила стилей:

35

для #header– свойство display:table; для #vheader – свойство display: table-

cell.

14. В файле index.html вставьте таблицу для меню. Чтобы ячейки были фик-

сированной ширины, установите свойства: style="table-layout:fixed";

width=100%; cellspacing=10px.

15. Оформите меню, создайте ссылки на еще несуществующие страницы,

расположенные в папке pages. Пункт меню «Главная» – ссылка на страницу

index.html.

16. В блок #content вставьте заголовки и рисунок (см. рис. 3.11).

17. Вставьте правый и левый блоки.

18. В блок #footer вставьте таблицу из одной строки и двух столбцов. Вставь-

те copyright (&copy).

19. Сохраните и откройте страницу в браузере. Проверьте правильность

отображения элементов. При необходимости, откорректируйте код.


1. Внешние таблицы стилей, подключение внешней таблицы к HTML.

2. Блочная модель документа.

3 Основные CSS-свойства в блочной модели, типы отображения.

4. Каскады стилей, правила на вложенные тэги.

3.2 Практические задания

Лабораторная работа №1. Структура HTML-документа. Форматирование

элементов web-страницы. Навигация.

Задания:

1.1 Создать HTML-документ, содержащий приведенный ниже список, со-

хранить файл с именем work_1.1.html. Оформление – произвольно.

ОГЛАВЛЕНИЕ I. Общие сведения об информатике. 1. Введение. 2. Информация и информатика. 3. ЭВМ

Архитектура. Иерархия памяти. Ввод-вывод.

4. Программное обеспечение. a. Системное. b. Прикладное.

II. Введение в языки программирования.

36

1.2 Создать HTML-документ, содержащий приведенные ниже таблицы,

сохранить файл с именем work_1.2.html.

1)

Шрифт команда

Равноширинный шрифт (teletype) <TT>

Полужирный текст (bold) <B>

Курсив (italic) <I>

зачеркнутый текст (strike) <S> или

<STRIKE>

подчеркнутый текст (underline) <U>

2) 3)

1.3 Создать HTML-документ, содержащий список определений с оформ-

ленными внутренними ссылками, сохранить файл с именем work_1.3.html.

А В С

А

Тег <A> предназначен для создания ссылок

В

Тег <BODY> предназначен для хранения содержания веб-страницы (контен-

та), отображаемого в окне браузера

С

Тег <CODE> предназначен для отображения одной или нескольких строк

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

1.4 Вставить бегущую строку красного цвета с текстом «Графические

элементы на веб-странице», изображение и текст, задать обтекание для гра-

фики (см. рисунок 3.13), сохранить файл с именем work_1.4.html.

Тег <MARQUEE>...</MARQUEE> – создает бегущую строку на странице.

Атрибуты:

37

– behavior="alternate | scroll | slide" - тип движения содержимого контейне-

ра <marquee>;

− bgcolor = "значение"– Цвет фона.

− direction="down | left | right | up" –направление движения содержимого

контейнера;

− height= "значение" – высота области прокрутки;

− hspace= "значение" – горизонтальные поля вокруг контента;

− loop = "значение"– сколько раз будет прокручиваться содержимое;

− scrollamount= "значение" – скорость движения контента;

− scrolldelay= "значение" – величина задержки в миллисекундах между дви-

жениями;

− vspace = "значение"– вертикальные поля вокруг содержимого;

− width= "значение" – ширина области прокрутки.

Рисунок 3.13 –Web-страница для задания 1.4

Лабораторная работа №2. Фреймы. Создание форм

Задание:

2.1 Создать многооконный HTML-документ work_2.1.html, сформировать

необходимые файлы.

В заголовок вставить рисунок и текст, меню

должно содержать несколько пунктов:

«Списки», «Таблицы», «Ссылки», «Рисун-

ки» и «Анкета», оформленных гиперссыл-

ками на файлы work_1.1.html-

work_1.4.html, которые открываются в окне

содержимого при выборе соответствующего

пункта меню.

2.2 Анкета должна содержать форму, представленную на рисунке 3.14.

Меню

Заголовок

Содержимое

38

Рисунок 3.14 – Форма для задания 2.2

Лабораторная работа №3. Табличная верстка сайта. Использование

таблицы стилей.

Задание: используя таблицы, сверстать веб-страницу согласно рисунку3.15,

определить встроенные (атрибуты) стили и глобальную таблицу стилей.

Создание веб-документов

Главная Лекции Практика УСРС Контроль

Новости

Содержимое

Рисунок 3.15 –Пример web-страницы

Лабораторная работа №4. Блочная верстка сайта. Использование

таблицы стилей.

Для HTML-документов, созданных в лабораторных работах 1-2, при-

менить внешнюю таблицу стилей лабораторной работы №4. В таблицу сти-

лей добавить свойства для списков (см. справочник). По ссылке «Лекции»

должна открываться страница с содержанием (см. лаб.раб. №1), «Практика» –

ссылки (Лабораторная работа №1) на файлы выполненных практических за-

даний, «УСРС» – страница с перечнем тем УСРС, «Контроль» – test.html.

39

4 РАЗДЕЛ КОНТРОЛЯ ЗНАНИЙ

4.1 Требования для зачета по дисциплине

Зачет по дисциплине включает тестирование в среде «OpenBook» по

теоретическому разделу дисциплины и выполнение контрольного задания.

Для допуска к выполнению контрольного задания результат теоретического

теста должен быть не менее 50%. Перечень вопросов для подготовки к заче-

ту и пример контрольного задания приведены ниже. На выполнение кон-

трольного практического задания отводится 20 минут. При выполнении кон-

трольного задания необходимо строго соблюдать правила именования и со-

хранения файлов и папок, в противном случае результаты выполнения рас-

сматриваться не будут.

Перечень вопросов к зачету

1. Задание ссылок на закладку, адрес электронной почты, относительный и

абсолютный адреса.

2. Создание таблиц. Различные способы задания ширины таблицы.

3. Создание таблиц. Объединение ячеек в таблице.

4. Вставка рисунков. Указание пути к рисунку.

5. Вставка рисунка фиксированного размера. Альтернативный текст.

6. Комментарии в СSS и HTML.

7. Синтаксис правил CSS.

8. Виды селекторов и их приоритеты.

9. Псевдоклассы. Виды и назначение.

10. Параметры блока. Задание отступов и полей.

11. Способы задания цвета для элементов в CSS.

12. Псевдоэлементы.

13. Селектор идентификатора. Описание и использование.

14. Элементы форм. Создание текстового поля.

15. Создание нумерованного списка.

16. Элементы форм. Создание многострочного текстового поля.

17. Задание фонового изображения веб-страницы.

18. Элементы форм. Создание выпадающего списка

19. Создание маркированного списка.

20. Структурные теги.

21. Теги заголовков.

22. Укажите элемент, который определяет соответствие документа одному

из стандартов W3C.

23. CSS- свойство для задания цвета фона.

24. Создание встроенных стилей.

25. Создание и подключение внешней таблицы стилей.

26. Правила стилей для тегов. Создание, применение, приоритет.

27. CSS- свойство для оформления элементов списка.

40

28. CSS свойства форматирования шрифта.

29. CSS свойства форматирования ссылок.

30. CSS свойство форматирования параметров рамки блока.

31. Способы верстки Web-страниц.

32. Какие теги являются контейнерами?

33. Единицы измерения для размера шрифта в CSS.

34. CSS свойство, позволяющее скрыть/отобразить элемент.

35. Виды позиционирования элементов в CSS.

36. Какое CSS свойство позволяет управлять порядком наложения элемен-

тов?

37. Классификация сайтов в зависимости от способа создания.

38. Форматы файлов web-графики.

39. Динамические эффекты с использованием CSS.

40. Создание свободно позиционируемых элементов, их параметры.

Пример контрольного задания для зачета3

1. Создайте в своей папке следующую структуру (ФИО – Ваша фамилия и

инициалы):

2. Скопируйте файлы с рисунками в папку images.

3. Создайте в папке КР_ФИО файл index.html. В заголовке должно отоб-

ражаться «Вариант № N».

4. В глобальной таблице стилей установите следующие правила:

– отступы для всех элементов страницы: внешний 0px; внутренний 0px;

– для тега html, body :высота 100%;

– для идентификатора #wrapper: параметр относительного позиционирова-

ния, минимальная высота 100%;

– для параграфа: font-size:14pt; text-align: center;

– для заголовка первого уровня:; text-align: center; text-transform: uppercase;

color: #FF4500; padding-top: 80px;

– заголовка второго уровня: выравнивание по центру;

– для идентификатора #content: параметр внутреннего отступа от нижнего

края 50px;

– для идентификатора #footer: высота 50px, ширина 100%, абсолютное пози-

ционирование, left:0, bottom: 0;

5. Используя блочные элементы, сверстайте страницу согласно рис. 4.1.

3 Контрольные задания разработаны при участии студента группы 151701з Бонифатьева А.Г.

41

Рисунок 4.1 –Web-страница контрольного задания

4.2 Задания для управляемой самостоятельной работы

План контрольных мероприятий УСРС

№ Тема Вид

занятий

Кол-во

часов

Форма кон-

троля

1 Создание форм в до-

кументах HTML.

Фреймы

лк 4 Тестирование

2 Программное обеспе-

чение для создания

web-страниц

лк 4 Реферат,

презентация

3 Верстка сайта с ис-

пользованием стилей

лб 8 Защита индиви-

дуального зада-

ния

Теоретические основы дисциплины

По теме «Создание форм в документах HTML. Фреймы» учебной

программы студенты самостоятельно изучают следующие вопросы

1. Фреймы и их свойства. Теги FRAMESET, FRAME и их атрибуты.

Полосы прокрутки во фрейме.

2. Организация переходов по фреймам. Встроенные фреймы

42

Литература: [1-10].

Формой контроля по теме является тестирование, проводимое с ис-

пользованием системы OpenBook. В тесте должен быть реализован множе-

ственный выбор. Ответ считается правильным по полному соответствию.

По теме «Программное обеспечение для создания web-страниц» сту-

денты готовят рефераты и презентации. Примерный перечень тем рефератов:

1. Стандарты HTML

2. Эволюция языка гипертекстовой разметки

3. Создание web-сайта средствами программы FrontPage

4. Скриптовые языки web-программирования

5. Инструментальные средства создания web-сайтов

6. Системы управления контентом (CMS).

7. Подготовка изображений для публикации в интернете.

Практическая часть дисциплины

Управляемая самостоятельная работа студентов по практической части

дисциплины организовывается в форме выполнения индивидуальных

заданий. Индивидуальное задание и его предметная область может быть

предложена как преподавателем, так и студентом (как правило, по темам

программ изучаемых дисциплины). Защита индивидуального задания

проводится в компьютерной лаборатории согласно установленному графику.

В случае не предоставления выполненного задания в назначенный срок

окончательная отметка может быть снижена.

Индивидуальное задание. Разработка сайта по предложенной теме.

1. Выбрать тему и согласовать с преподавателем. Примерная тематика при-

ведена в таблице.

2. Выполнить поиск материалов по теме.

3. Подготовить изображения для размещения на сайте. Для оптимизации

изображений использовать графический редактор Adobe Photoshop.

4. Спроектировать структуру веб-сайта (не менее 6 страниц). Главная стра-

ница должна обязательно содержать тему сайта, рисунок по теме и меню с

гиперссылками на остальные страницы. Все страницы должны быть связаны

ссылками. Страница Cсылки должна содержать список библиографических

ссылок и (или) список Интернет-ресурсов с указанием адресов ресурсов,

оформленные по стандарту. Страница Об авторе должна содержать инфор-

мацию о разработчике сайта.

5. Выбрать стиль оформления сайта, обосновать выбор цветов. Спроектиро-

вать макет сайта.

6. Создать внешнюю таблицу стилей.

7. Подготовить отчет о выполнении самостоятельной работы.

43

Отчет должен содержать описание структуры сайта, сведения об инструмен-

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

В приложении привести листинги таблицы стилей и главной страницы сайта.

Тематика сайтов

Номер Тема

1. Информационная безопасность и ее составляющие.

2. Угрозы безопасности информации и их классификация.

3. Криптографические методы защиты информации.

4. Электронно-цифровая подпись.

5. Системное программное обеспечение ПК

6. Информационные системы: понятие и классификация

7. Операционные системы: понятие, классификация, примеры

8. Современные языки программирования.

9. Экономико-математические приложения Excel. Решение задач

оптимизации

10. Экспертные и обучающие системы

11. Компьютерные сети. Глобальная сеть Интернет

12. Сервисы Интернета

13. Прикладные программы для создания веб-сайтов

14. Технологии создания веб – сайтов

15. Основные возможности бизнеса в Интернете

16. Архитектура «клиент-сервер»

17. Клиентские технологии разработки веб-приложений

18. Серверные технологии разработки веб-приложений

44

5 ВСПОМОГАТЕЛЬНЫЙ РАЗДЕЛ

5.1 Краткий справочник по CSS

45

46

47

5.2 Таблица значений цветов

Написание Цвет R G B Код для

HTML

Snow Snow 255 250 250 #FFFAFA

GhostWhite GhostWhite 248 248 255 #F8F8FF

WhiteSmoke WhiteSmoke 245 245 245 #F5F5F5

Gainsboro Gainsboro 220 220 220 #DCDCDC

FloralWhite FloralWhite 255 250 240 #FFFAF0

OldLace OldLace 253 245 230 #FDF5E6

Linen Linen 250 240 230 #FAF0E6

AntiqueWhite AntiqueWhite 250 235 215 #FAEBD7

PapayaWhip PapayaWhip 255 239 213 #FFEFD5

BlanchedAlmond BlanchedAlmond 255 235 205 #FFEBCD

Bisque Bisque 255 228 196 #FFE4C4

PeachPuff PeachPuff 255 218 185 #FFDAB9

NavajoWhite NavajoWhite 255 222 173 #FFDEAD

Moccasin Moccasin 255 228 181 #FFE4B5

Cornsilk Cornsilk 255 248 220 #FFF8DC

Ivory Ivory 255 255 240 #FFFFF0

LemonChiffon LemonChiffon 255 250 205 #FFFACD

Seashell Seashell 255 245 238 #FFF5EE

Honeydew Honeydew 240 255 240 #F0FFF0

MintCream MintCream 245 255 250 #F5FFFA

Azure Azure 240 255 255 #F0FFFF

AliceBlue AliceBlue 240 248 255 #F0F8FF

lavender lavender 230 230 250 #E6E6FA

LavenderBlush LavenderBlush 255 240 245 #FFF0F5

MistyRose MistyRose 255 228 225 #FFE4E1

48

White White 255 255 255 #FFFFFF

Black Black 0 0 0 #000000

DarkSlateGray DarkSlateGray 47 79 79 #2F4F4F

DimGrey DimGrey 105 105 105 #696969

SlateGrey SlateGrey 112 128 144 #708090

LightSlateGray LightSlateGray 119 136 153 #778899

Grey Grey 190 190 190 #BEBEBE

LightGray LightGray 211 211 211 #D3D3D3

MidnightBlue MidnightBlue 25 25 112 #191970

NavyBlue NavyBlue 0 0 128 #000080

CornflowerBlue CornflowerBlue 100 149 237 #6495ED

DarkSlateBlue DarkSlateBlue 72 61 139 #483D8B

SlateBlue SlateBlue 106 90 205 #6A5ACD

MediumSlateBlue MediumSlateBlue 123 104 238 #7B68EE

LightSlateBlue LightSlateBlue 132 112 255 #8470FF

MediumBlue MediumBlue 0 0 205 #0000CD

RoyalBlue RoyalBlue 65 105 225 #4169E1

Blue Blue 0 0 255 #0000FF

DodgerBlue DodgerBlue 30 144 255 #1E90FF

DeepSkyBlue DeepSkyBlue 0 191 255 #00BFFF

SkyBlue SkyBlue 135 206 235 #87CEEB

LightSkyBlue LightSkyBlue 135 206 250 #87CEFA

SteelBlue SteelBlue 70 130 180 #4682B4

LightSteelBlue LightSteelBlue 176 196 222 #B0C4DE

LightBlue LightBlue 173 216 230 #ADD8E6

PowderBlue PowderBlue 176 224 230 #B0E0E6

PaleTurquoise PaleTurquoise 175 238 238 #AFEEEE

49

DarkTurquoise DarkTurquoise 0 206 209 #00CED1

MediumTurquois

e MediumTurquoise 72 209 204 #48D1CC

Turquoise Turquoise 64 224 208 #40E0D0

Cyan Cyan 0 255 255 #00FFFF

LightCyan LightCyan 224 255 255 #E0FFFF

CadetBlue CadetBlue 95 158 160 #5F9EA0

MediumAquamari

ne MediumAquamarine 102 205 170 #66CDAA

Aquamarine Aquamarine 127 255 212 #7FFFD4

DarkGreen DarkGreen 0 100 0 #006400

DarkOliveGreen DarkOliveGreen 85 107 47 #556B2F

DarkSeaGreen DarkSeaGreen 143 188 143 #8FBC8F

SeaGreen SeaGreen 46 139 87 #2E8B57

MediumSeaGreen MediumSeaGreen 60 179 113 #3CB371

LightSeaGreen LightSeaGreen 32 178 170 #20B2AA

PaleGreen PaleGreen 152 251 152 #98FB98

SpringGreen SpringGreen 0 255 127 #00FF7F

LawnGreen LawnGreen 124 252 0 #7CFC00

Green Green 0 255 0 #00FF00

Chartreuse Chartreuse 127 255 0 #7FFF00

MedSpringGreen MedSpringGreen 0 250 154 #00FA9A

GreenYellow GreenYellow 173 255 47 #ADFF2F

LimeGreen LimeGreen 50 205 50 #32CD32

YellowGreen YellowGreen 154 205 50 #9ACD32

ForestGreen ForestGreen 34 139 34 #228B22

OliveDrab OliveDrab 107 142 35 #6B8E23

DarkKhaki DarkKhaki 189 183 107 #BDB76B

50

PaleGoldenrod PaleGoldenrod 238 232 170 #EEE8AA

LtGoldenrodYello LtGoldenrodYello 250 250 210 #FAFAD2

LightYellow LightYellow 255 255 224 #FFFFE0

Yellow Yellow 255 255 0 #FFFF00

Gold Gold 255 215 0 #FFD700

LightGoldenrod LightGoldenrod 238 221 130 #EEDD82

goldenrod goldenrod 218 165 32 #DAA520

DarkGoldenrod DarkGoldenrod 184 134 11 #B8860B

RosyBrown RosyBrown 188 143 143 #BC8F8F

IndianRed IndianRed 205 92 92 #CD5C5C

SaddleBrown SaddleBrown 139 69 19 #8B4513

Sienna Sienna 160 82 45 #A0522D

Peru Peru 205 133 63 #CD853F

Burlywood Burlywood 222 184 135 #DEB887

Beige Beige 245 245 220 #F5F5DC

Wheat Wheat 245 222 179 #F5DEB3

SandyBrown SandyBrown 244 164 96 #F4A460

Tan Tan 210 180 140 #D2B48C

Chocolate Chocolate 210 105 30 #D2691E

Firebrick Firebrick 178 34 34 #B22222

Brown Brown 165 42 42 #A52A2A

DarkSalmon DarkSalmon 233 150 122 #E9967A

Salmon Salmon 250 128 114 #FA8072

LightSalmon LightSalmon 255 160 122 #FFA07A

Orange Orange 255 165 0 #FFA500

DarkOrange DarkOrange 255 140 0 #FF8C00

Coral Coral 255 127 80 #FF7F50

51

LightCoral LightCoral 240 128 128 #F08080

Tomato Tomato 255 99 71 #FF6347

OrangeRed OrangeRed 255 69 0 #FF4500

Red Red 255 0 0 #FF0000

HotPink HotPink 255 105 180 #FF69B4

DeepPink DeepPink 255 20 147 #FF1493

Pink Pink 255 192 203 #FFC0CB

LightPink LightPink 255 182 193 #FFB6C1

PaleVioletRed PaleVioletRed 219 112 147 #DB7093

Maroon Maroon 176 48 96 #B03060

MediumVioletRe

d MediumVioletRed 199 21 133 #C71585

VioletRed VioletRed 208 32 144 #D02090

Magenta Magenta 255 0 255 #FF00FF

Violet Violet 238 130 238 #EE82EE

Plum Plum 221 160 221 #DDA0DD

Orchid Orchid 218 112 214 #DA70D6

MediumOrchid MediumOrchid 186 85 211 #BA55D3

DarkOrchid DarkOrchid 153 50 204 #9932CC

DarkViolet DarkViolet 148 0 211 #9400D3

BlueViolet BlueViolet 138 43 226 #8A2BE2

Purple Purple 160 32 240 #A020F0

MediumPurple MediumPurple 147 112 219 #9370DB

Thistle Thistle 216 191 216 #D8BFD8

Snow1 Snow1 255 250 250 #FFFAFA

Snow2 Snow2 238 233 233 #EEE9E9

Snow3 Snow3 205 201 201 #CDC9C9

Snow4 Snow4 139 137 137 #8B8989

52

Seashell1 Seashell1 255 245 238 #FFF5EE

Seashell2 Seashell2 238 229 222 #EEE5DE

Seashell3 Seashell3 205 197 191 #CDC5BF

Seashell4 Seashell4 139 134 130 #8B8682

AntiqueWhite1 AntiqueWhite1 255 239 219 #FFEFDB

AntiqueWhite2 AntiqueWhite2 238 223 204 #EEDFCC

AntiqueWhite3 AntiqueWhite3 205 192 176 #CDC0B0

AntiqueWhite4 AntiqueWhite4 139 131 120 #8B8378

Bisque1 Bisque1 255 228 196 #FFE4C4

Bisque2 Bisque2 238 213 183 #EED5B7

Bisque3 Bisque3 205 183 158 #CDB79E

Bisque4 Bisque4 139 125 107 #8B7D6B

PeachPuff1 PeachPuff1 255 218 185 #FFDAB9

PeachPuff2 PeachPuff2 238 203 173 #EECBAD

PeachPuff3 PeachPuff3 205 175 149 #CDAF95

PeachPuff4 PeachPuff4 139 119 101 #8B7765

NavajoWhite1 NavajoWhite1 255 222 173 #FFDEAD

NavajoWhite2 NavajoWhite2 238 207 161 #EECFA1

NavajoWhite3 NavajoWhite3 205 179 139 #CDB38B

NavajoWhite4 NavajoWhite4 139 121 94 #8B795E

LemonChiffon1 LemonChiffon1 255 250 205 #FFFACD

LemonChiffon2 LemonChiffon2 238 233 191 #EEE9BF

LemonChiffon3 LemonChiffon3 205 201 165 #CDC9A5

LemonChiffon4 LemonChiffon4 139 137 112 #8B8970

Cornsilk1 Cornsilk1 255 248 220 #FFF8DC

Cornsilk2 Cornsilk2 238 232 205 #EEE8CD

Cornsilk3 Cornsilk3 205 200 177 #CDC8B1

53

Cornsilk4 Cornsilk4 139 136 120 #8B8878

vory1 Ivory1 255 255 240 #FFFFF0

vory2 Ivory2 238 238 224 #EEEEE0

Ivory3 Ivory3 205 205 193 #CDCDC1

Ivory4 Ivory4 139 139 131 #8B8B83

Honeydew1 Honeydew1 240 255 240 #F0FFF0

Honeydew2 Honeydew2 224 238 224 #E0EEE0

Honeydew3 Honeydew3 193 205 193 #C1CDC1

Honeydew4 Honeydew4 131 139 131 #838B83

LavenderBlush1 LavenderBlush1 255 240 245 #FFF0F5

LavenderBlush2 LavenderBlush2 238 224 229 #EEE0E5

LavenderBlush3 LavenderBlush3 205 193 197 #CDC1C5

LavenderBlush4 LavenderBlush4 139 131 134 #8B8386

MistyRose1 MistyRose1 255 228 225 #FFE4E1

MistyRose2 MistyRose2 238 213 210 #EED5D2

MistyRose3 MistyRose3 205 183 181 #CDB7B5

MistyRose4 MistyRose4 139 125 123 #8B7D7B

Azure1 Azure1 240 255 255 #F0FFFF

Azure2 Azure2 224 238 238 #E0EEEE

Azure3 Azure3 193 205 205 #C1CDCD

Azure4 Azure4 131 139 139 #838B8B

SlateBlue1 SlateBlue1 131 111 255 #836FFF

SlateBlue2 SlateBlue2 122 103 238 #7A67EE

SlateBlue3 SlateBlue3 105 89 205 #6959CD

SlateBlue4 SlateBlue4 71 60 139 #473C8B

RoyalBlue1 RoyalBlue1 72 118 255 #4876FF

RoyalBlue2 RoyalBlue2 67 110 238 #436EEE

54

RoyalBlue3 RoyalBlue3 58 95 205 #3A5FCD

RoyalBlue4 RoyalBlue4 39 64 139 #27408B

Blue1 Blue1 0 0 255 #0000FF

Blue2 Blue2 0 0 238 #0000EE

Blue3 Blue3 0 0 205 #0000CD

Blue4 Blue4 0 0 139 #00008B

DodgerBlue1 DodgerBlue1 30 144 255 #1E90FF

DodgerBlue2 DodgerBlue2 28 134 238 #1C86EE

DodgerBlue3 DodgerBlue3 24 116 205 #1874CD

DodgerBlue4 DodgerBlue4 16 78 139 #104E8B

SteelBlue1 SteelBlue1 99 184 255 #63B8FF

SteelBlue2 SteelBlue2 92 172 238 #5CACEE

SteelBlue3 SteelBlue3 79 148 205 #4F94CD

SteelBlue4 SteelBlue4 54 100 139 #36648B

DeepSkyBlue1 DeepSkyBlue1 0 191 255 #00BFFF

DeepSkyBlue2 DeepSkyBlue2 0 178 238 #00B2EE

DeepSkyBlue3 DeepSkyBlue3 0 154 205 #009ACD

DeepSkyBlue4 DeepSkyBlue4 0 104 139 #00688B

SkyBlue1 SkyBlue1 135 206 255 #87CEFF

SkyBlue2 SkyBlue2 126 192 238 #7EC0EE

SkyBlue3 SkyBlue3 108 166 205 #6CA6CD

SkyBlue4 SkyBlue4 74 112 139 #4A708B

LightSkyBlue1 LightSkyBlue1 176 226 255 #B0E2FF

LightSkyBlue2 LightSkyBlue2 164 211 238 #A4D3EE

LightSkyBlue3 LightSkyBlue3 141 182 205 #8DB6CD

LightSkyBlue4 LightSkyBlue4 96 123 139 #607B8B

SlateGray1 SlateGray1 198 226 255 #C6E2FF

55

SlateGray2 SlateGray2 185 211 238 #B9D3EE

SlateGray3 SlateGray3 159 182 205 #9FB6CD

SlateGray4 SlateGray4 108 123 139 #6C7B8B

LightSteelBlue1 LightSteelBlue1 202 225 255 #CAE1FF

LightSteelBlue2 LightSteelBlue2 188 210 238 #BCD2EE

LightSteelBlue3 LightSteelBlue3 162 181 205 #A2B5CD

LightSteelBlue4 LightSteelBlue4 110 123 139 #6E7B8B

LightBlue1 LightBlue1 191 239 255 #BFEFFF

LightBlue2 LightBlue2 178 223 238 #B2DFEE

LightBlue3 LightBlue3 154 192 205 #9AC0CD

LightBlue4 LightBlue4 104 131 139 #68838B

LightCyan1 LightCyan1 224 255 255 #E0FFFF

LightCyan2 LightCyan2 209 238 238 #D1EEEE

LightCyan3 LightCyan3 180 205 205 #B4CDCD

LightCyan4 LightCyan4 122 139 139 #7A8B8B

PaleTurquoise1 PaleTurquoise1 187 255 255 #BBFFFF

PaleTurquoise2 PaleTurquoise2 174 238 238 #AEEEEE

PaleTurquoise3 PaleTurquoise3 150 205 205 #96CDCD

PaleTurquoise4 PaleTurquoise4 102 139 139 #668B8B

CadetBlue1 CadetBlue1 152 245 255 #98F5FF

CadetBlue2 CadetBlue2 142 229 238 #8EE5EE

CadetBlue3 CadetBlue3 122 197 205 #7AC5CD

CadetBlue4 CadetBlue4 83 134 139 #53868B

Turquoise1 Turquoise1 0 245 255 #00F5FF

Turquoise2 Turquoise2 0 229 238 #00E5EE

Turquoise3 Turquoise3 0 197 205 #00C5CD

Turquoise4 Turquoise4 0 134 139 #00868B

56

Cyan1 Cyan1 0 255 255 #00FFFF

Cyan2 Cyan2 0 238 238 #00EEEE

Cyan3 Cyan3 0 205 205 #00CDCD

Cyan4 Cyan4 0 139 139 #008B8B

DarkSlateGray1 DarkSlateGray1 151 255 255 #97FFFF

DarkSlateGray2 DarkSlateGray2 141 238 238 #8DEEEE

DarkSlateGray3 DarkSlateGray3 121 205 205 #79CDCD

DarkSlateGray4 DarkSlateGray4 82 139 139 #528B8B

Aquamarine1 Aquamarine1 127 255 212 #7FFFD4

Aquamarine2 Aquamarine2 118 238 198 #76EEC6

Aquamarine3 Aquamarine3 102 205 170 #66CDAA

Aquamarine4 Aquamarine4 69 139 116 #458B74

DarkSeaGreen1 DarkSeaGreen1 193 255 193 #C1FFC1

DarkSeaGreen2 DarkSeaGreen2 180 238 180 #B4EEB4

DarkSeaGreen3 DarkSeaGreen3 155 205 155 #9BCD9B

DarkSeaGreen4 DarkSeaGreen4 105 139 105 #698B69

SeaGreen1 SeaGreen1 84 255 159 #54FF9F

SeaGreen2 SeaGreen2 78 238 148 #4EEE94

SeaGreen3 SeaGreen3 67 205 128 #43CD80

SeaGreen4 SeaGreen4 46 139 87 #2E8B57

PaleGreen1 PaleGreen1 154 255 154 #9AFF9A

PaleGreen2 PaleGreen2 144 238 144 #90EE90

PaleGreen3 PaleGreen3 124 205 124 #7CCD7C

PaleGreen4 PaleGreen4 84 139 84 #548B54

SpringGreen1 SpringGreen1 0 255 127 #00FF7F

SpringGreen2 SpringGreen2 0 238 118 #00EE76

SpringGreen3 SpringGreen3 0 205 102 #00CD66

57

SpringGreen4 SpringGreen4 0 139 69 #008B45

Green1 Green1 0 255 0 #00FF00

Green2 Green2 0 238 0 #00EE00

Green3 Green3 0 205 0 #00CD00

Green4 Green4 0 139 0 #008B00

Chartreuse1 Chartreuse1 127 255 0 #7FFF00

Chartreuse2 Chartreuse2 118 238 0 #76EE00

Chartreuse3 Chartreuse3 102 205 0 #66CD00

Chartreuse4 Chartreuse4 69 139 0 #458B00

OliveDrab1 OliveDrab1 192 255 62 #C0FF3E

OliveDrab2 OliveDrab2 179 238 58 #B3EE3A

OliveDrab3 OliveDrab3 154 205 50 #9ACD32

OliveDrab4 OliveDrab4 105 139 34 #698B22

DarkOliveGreen1 DarkOliveGreen1 202 255 112 #CAFF70

DarkOliveGreen2 DarkOliveGreen2 188 238 104 #BCEE68

DarkOliveGreen3 DarkOliveGreen3 162 205 90 #A2CD5A

DarkOliveGreen4 DarkOliveGreen4 110 139 61 #6E8B3D

Khaki1 Khaki1 255 246 143 #FFF68F

Khaki2 Khaki2 238 230 133 #EEE685

Khaki3 Khaki3 205 198 115 #CDC673

Khaki4 Khaki4 139 134 78 #8B864E

LightGoldenrod1 LightGoldenrod1 255 236 139 #FFEC8B

LightGoldenrod2 LightGoldenrod2 238 220 130 #EEDC82

LightGoldenrod3 LightGoldenrod3 205 190 112 #CDBE70

LightGoldenrod4 LightGoldenrod4 139 129 76 #8B814C

LightYellow1 LightYellow1 255 255 224 #FFFFE0

LightYellow2 LightYellow2 238 238 209 #EEEED1

58

LightYellow3 LightYellow3 205 205 180 #CDCDB4

LightYellow4 LightYellow4 139 139 122 #8B8B7A

Yellow1 Yellow1 255 255 0 #FFFF00

Yellow2 Yellow2 238 238 0 #EEEE00

Yellow3 Yellow3 205 205 0 #CDCD00

Yellow4 Yellow4 139 139 0 #8B8B00

Gold1 Gold1 255 215 0 #FFD700

Gold2 Gold2 238 201 0 #EEC900

Gold3 Gold3 205 173 0 #CDAD00

Gold4 Gold4 139 117 0 #8B7500

Goldenrod1 Goldenrod1 255 193 37 #FFC125

Goldenrod2 Goldenrod2 238 180 34 #EEB422

Goldenrod3 Goldenrod3 205 155 29 #CD9B1D

Goldenrod4 Goldenrod4 139 105 20 #8B6914

DarkGoldenrod1 DarkGoldenrod1 255 185 15 #FFB90F

DarkGoldenrod2 DarkGoldenrod2 238 173 14 #EEAD0E

DarkGoldenrod3 DarkGoldenrod3 205 149 12 #CD950C

DarkGoldenrod4 DarkGoldenrod4 139 101 8 #8B658B

RosyBrown1 RosyBrown1 255 193 193 #FFC1C1

RosyBrown2 RosyBrown2 238 180 180 #EEB4B4

RosyBrown3 RosyBrown3 205 155 155 #CD9B9B

RosyBrown4 RosyBrown4 139 105 105 #8B6969

IndianRed1 IndianRed1 255 106 106 #FF6A6A

IndianRed2 IndianRed2 238 99 99 #EE6363

IndianRed3 IndianRed3 205 85 85 #CD5555

IndianRed4 IndianRed4 139 58 58 #8B3A3A

Sienna1 Sienna1 255 130 71 #FF8247

59

Sienna2 Sienna2 238 121 66 #EE7942

Sienna3 Sienna3 205 104 57 #CD6839

Sienna4 Sienna4 139 71 38 #8B4726

Burlywood1 Burlywood1 255 211 155 #FFD39B

Burlywood2 Burlywood2 238 197 145 #EEC591

Burlywood3 Burlywood3 205 170 125 #CDAA7D

Burlywood4 Burlywood4 139 115 85 #8B7355

Wheat1 Wheat1 255 231 186 #FFE7BA

Wheat2 Wheat2 238 216 174 #EED8AE

Wheat3 Wheat3 205 186 150 #CDBA96

Wheat4 Wheat4 139 126 102 #8B7E66

Tan1 Tan1 255 165 79 #FFA54F

Tan2 Tan2 238 154 73 #EE9A49

Tan3 Tan3 205 133 63 #CD853F

Tan4 Tan4 139 90 43 #8B5A2B

Chocolate1 Chocolate1 255 127 36 #FF7F24

Chocolate2 Chocolate2 238 118 33 #EE7621

Chocolate3 Chocolate3 205 102 29 #CD661D

Chocolate4 Chocolate4 139 69 19 #8B4513

Firebrick1 Firebrick1 255 48 48 #FF3030

Firebrick2 Firebrick2 238 44 44 #EE2C2C

Firebrick3 Firebrick3 205 38 38 #CD2626

Firebrick4 Firebrick4 139 26 26 #8B1A1A

Brown1 Brown1 255 64 64 #FF4040

Brown2 Brown2 238 59 59 #EE3B3B

Brown3 Brown3 205 51 51 #CD3333

Brown4 Brown4 139 35 35 #8B2323

60

Salmon1 Salmon1 255 140 105 #FF8C69

Salmon2 Salmon2 238 130 98 #EE8262

Salmon3 Salmon3 205 112 84 #CD7054

Salmon4 Salmon4 139 76 57 #8B4C39

LightSalmon1 LightSalmon1 255 160 122 #FFA07A

LightSalmon2 LightSalmon2 238 149 114 #EE9572

LightSalmon3 LightSalmon3 205 129 98 #CD8162

LightSalmon4 LightSalmon4 139 87 66 #8B5742

Orange1 Orange1 255 165 0 #FFA500

Orange2 Orange2 238 154 0 #EE9A00

Orange3 Orange3 205 133 0 #CD8500

Orange4 Orange4 139 90 0 #8B5A00

DarkOrange1 DarkOrange1 255 127 0 #FF7F00

DarkOrange2 DarkOrange2 238 118 0 #EE7600

DarkOrange3 DarkOrange3 205 102 0 #CD6600

DarkOrange4 DarkOrange4 139 69 0 #8B4500

Coral1 Coral1 255 114 86 #FF7256

Coral2 Coral2 238 106 80 #EE6A50

Coral3 Coral3 205 91 69 #CD5B45

Coral4 Coral4 139 62 47 #8B3E2F

Tomato1 Tomato1 255 99 71 #FF6347

Tomato2 Tomato2 238 92 66 #EE5C42

Tomato3 Tomato3 205 79 57 #CD4F39

Tomato4 Tomato4 139 54 38 #8B3626

OrangeRed1 OrangeRed1 255 69 0 #FF4500

OrangeRed2 OrangeRed2 238 64 0 #EE4000

OrangeRed3 OrangeRed3 205 55 0 #CD3700

61

OrangeRed4 OrangeRed4 139 37 0 #8B2500

Red1 Red1 255 0 0 #FF0000

Red2 Red2 238 0 0 #EE0000

Red3 Red3 205 0 0 #CD0000

Red4 Red4 139 0 0 #8B0000

DeepPink1 DeepPink1 255 20 147 #FF1493

DeepPink2 DeepPink2 238 18 137 #EE1289

DeepPink3 DeepPink3 205 16 118 #CD1076

DeepPink4 DeepPink4 139 10 80 #8B0A50

HotPink1 HotPink1 255 110 180 #FF6EB4

HotPink2 HotPink2 238 106 167 #EE6AA7

HotPink3 HotPink3 205 96 144 #CD6090

HotPink4 HotPink4 139 58 98 #8B3A62

Pink1 Pink1 255 181 197 #FFB5C5

Pink2 Pink2 238 169 184 #EEA9B8

Pink3 Pink3 205 145 158 #CD919E

Pink4 Pink4 139 99 108 #8B636C

LightPink1 LightPink1 255 174 185 #FFAEB9

LightPink2 LightPink2 238 162 173 #EEA2AD

LightPink3 LightPink3 205 140 149 #CD8C95

LightPink4 LightPink4 139 95 101 #8B5F65

PaleVioletRed1 PaleVioletRed1 255 130 171 #FF82AB

PaleVioletRed2 PaleVioletRed2 238 121 159 #EE799F

PaleVioletRed3 PaleVioletRed3 205 104 137 #CD6889

PaleVioletRed4 PaleVioletRed4 139 71 93 #8B475D

Maroon1 Maroon1 255 52 179 #FF34B3

Maroon2 Maroon2 238 48 167 #EE30A7

62

Maroon3 Maroon3 205 41 144 #CD2990

Maroon4 Maroon4 139 28 98 #8B1C62

VioletRed1 VioletRed1 255 62 150 #FF3E96

VioletRed2 VioletRed2 238 58 140 #EE3A8C

VioletRed3 VioletRed3 205 50 120 #CD3278

VioletRed4 VioletRed4 139 34 82 #8B2252

Magenta1 Magenta1 255 0 255 #FF00FF

Magenta2 Magenta2 238 0 238 #EE00EE

Magenta3 Magenta3 205 0 205 #CD00CD

Magenta4 Magenta4 139 0 139 #8B008B

Orchid1 Orchid1 255 131 250 #FF83FA

Orchid2 Orchid2 238 122 233 #EE7AE9

Orchid3 Orchid3 205 105 201 #CD69C9

Orchid4 Orchid4 139 71 137 #8B4789

Plum1 Plum1 255 187 255 #FFBBFF

Plum2 Plum2 238 174 238 #EEAEEE

Plum3 Plum3 205 150 205 #CD96CD

Plum4 Plum4 139 102 139 #8B668B

MediumOrchid1 MediumOrchid1 224 102 255 #E066FF

MediumOrchid2 MediumOrchid2 209 95 238 #D15FEE

MediumOrchid3 MediumOrchid3 180 82 205 #B452CD

MediumOrchid4 MediumOrchid4 122 55 139 #7A378B

DarkOrchid1 DarkOrchid1 191 62 255 #BF3EFF

DarkOrchid2 DarkOrchid2 178 58 238 #B23AEE

DarkOrchid3 DarkOrchid3 154 50 205 #9A32CD

DarkOrchid4 DarkOrchid4 104 34 139 #68228B

Purple1 Purple1 155 48 255 #9B30FF

63

Purple2 Purple2 145 44 238 #912CEE

Purple3 Purple3 125 38 205 #7D26CD

Purple4 Purple4 85 26 139 #551A8B

MediumPurple1 MediumPurple1 171 130 255 #AB82FF

MediumPurple2 MediumPurple2 159 121 238 #9F79EE

MediumPurple3 MediumPurple3 137 104 205 #8968CD

MediumPurple4 MediumPurple4 93 71 139 #5D478B

Thistle1 Thistle1 255 225 255 #FFE1FF

Thistle2 Thistle2 238 210 238 #EED2EE

Thistle3 Thistle3 205 181 205 #CDB5CD

Thistle4 Thistle4 139 123 139 #8B7B8B

grey11 grey11 28 28 28 #1C1C1C

grey21 grey21 54 54 54 #363636

grey31 grey31 79 79 79 #4F4F4F

grey41 grey41 105 105 105 #696969

grey51 grey51 130 130 130 #828282

grey61 grey61 156 156 156 #9C9C9C

grey71 grey71 181 181 181 #B5B5B5

gray81 gray81 207 207 207 #CFCFCF

gray91 gray91 232 232 232 #E8E8E8

DarkGrey DarkGrey 169 169 169 #A9A9A9

DarkBlue DarkBlue 0 0 139 #00008B

DarkCyan DarkCyan 0 139 139 #008B8B

DarkMagenta DarkMagenta 139 0 139 #8B008B

DarkRed DarkRed 139 0 0 #8B0000

LightGreen LightGreen 144 238 144 #90EE90

Documents

ОГЛАВЛЕНИЕmedia.miu.by/files/store/umk/eumk_SozdWebDokum_2017.pdf · 5.1 КРАТКИЙ СПРАВОЧНИК ПО css ... ± позволяют разделить оформление