ОГЛАВЛЕНИЕmedia.miu.by/files/store/umk/eumk_SozdWebDokum_2017.pdf · 5.1 КРАТКИЙ...
Transcript of ОГЛАВЛЕНИЕmedia.miu.by/files/store/umk/eumk_SozdWebDokum_2017.pdf · 5.1 КРАТКИЙ...
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), отсутствие какого бы то ни было позиционирова-
ния, а просто выкладывание блоков одного за другим сверху вниз –
прямой поток (по умолчанию).
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
16 Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. -
2008. - № 6. - С. 27-29.
17 Рязанцева, Л. Что нам стоит сайт построить : как писать для web-сайта / Л.
Рязанцева // Библиополе. - 2008. - № 7. - С. 27-29
18 Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. -
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>. Для символов «<» и
«>» использовать имена символов – < и > соответственно.
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 (©).
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 (©).
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