Методическое пособие по проведению лабораторных работ по дисциплине «Информационные технологии»

МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЁЖНОЙ ПОЛИТИКИ КРАСНОДАРСКОГО КРАЯ
ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ КРАСНОДАРСКОГО КРАЯ «КРАСНОДАРСКИЙ КОЛЛЕДЖ ЭЛЕКТРОННОГО ПРИБОРОСТРОЕНИЯ»

МетодическОЕ ПОСОБИЕ
по проведению Лабораторных работ
для студентов специальности: 09.02.01 «Компьютерные системы и комплексы»
по дисциплине «Информационные технологии»
2016
УТВЕРЖДАЮ
Заместитель директора по УМР
«____» ____________ 20_____г.
Е. А. ТупчиеваРАССМОТРЕНО
ПЦК КТиТ
протокол № ___
от «____» ___________ 20_____г.
Председатель
Н.В. Новикова
ОДОБРЕНО
решением методического совета
протокол № ___ от ________ 2016 г.
Составитель: Новикова Н.В.,
преподаватель ГБПОУ КК ККЭП ___________ подпись
Рецензент: Сорокин В.Н
директор ООО «Априори»,
квалификация по диплому – инженер ___________ подпись

Методическое пособие предназначено для студентов 3-4 курса специальности 09.02.01 «Компьютерные системы и комплексы» в помощь при выполнении лабораторных работ по дисциплине «Информационные технологии». В представленном учебном пособии собран материал по основам web-программирования. Пособие может быть использовано для самостоятельной подготовки студентов к лабораторным работам.
Рекомендовано к использованию в учебном процессе.
СОДЕРЖАНИЕ
Лабораторная работа №1
Лабораторная работа №2
Лабораторная работа №3
Лабораторная работа №4
Лабораторная работа №5
Лабораторная работа №6
Лабораторная работа №7
Лабораторная работа №8
Лабораторная работа №9
Лабораторная работа №10
Лабораторная работа №11
Лабораторная работа №12
Лабораторная работа №13
Лабораторная работа №14

Лабораторная работа №1
Тема: «Ознакомление с языком гипертекстовой разметки документа HTML»
Цель: ознакомиться с основными тегами HTML, разработать дизайн сайта, практически применить язык гипертекстовой разметки документа.
Ход выполнения работы:
Изучить теоретические сведения о языке гипертекстовой разметки HTML.
Структура WEB – документа.
23437851270<Html>
<head>
<title>
моя первая страница
</title>
</head>
<body>
Hello!
</body>
</html>
Многие теги могут иметь параметры. Они уточняют значения тега и перечисляются внутри тега через пробел с указанием значений.
<тег пар1=знач1 парам2=знач2………>
Параметры тега BODY.
ALINK= “red” – определяет цвет активной ссылки.
BACKGROUND = “T.GIF” – указывается адрес изображения которое используется в качестве заднего фона на странице.
BGCOLOR = “green” – определяет цвет фона.
LINK = “olive” – определяет цвет непосещенной ссылки.
TEXT = “BLACK” – определяет цвет текста на странице.
VLINK = “gray” – определяет цвет ссылки которая была посещена.
<body text = “red” BGCOLOR = “olive”>
</body>
В HTML существует два способа задания цветов.
1. Цвет задается на английском языке.
2. Цвет задается в 16-м коде.
Кр Зел Син
R G B
00 00 00 -Черный
Ff Ff Ff -Белый
Ff 00 00 -Красный
00 80 80 -зеленый
C0 C0 C0 -серебренный
Ff 00 ff -Фуксия
“#FF00CC”<body text = “#FF0010”>
Форматирование текста в HTML.
Вставка разрывов на страницу.
<p> - позволяет создать отступ в тексте.
<br> - вставляет столько пустых строк, сколько раз он указан.
<Hr> - вставка горизонтальной линии.
Size = 5 – толщина
Width = 200 – длина в пикселях
Color = red – цвет
Форматирование символов текста
<B> полужирный текст </B>
<I> курсив </I>
<TT> телетайпный текст (пишущ. Машинка) </TT>
<U> подчеркнутый текст <U>
<strike> зачеркнутый текст </strike>
<big> КРУПНЫЙ ТЕКСТ </big>
<Small> мелкий текст </small>
<sub> нижний индекс </sub>
<sup> верхний индекс </sup>
Форматирование текста с помощью тега FONT.
<Font>…</font>
Face = “Arial” – тип шрифта
Size = 5 – размер шрифта
Color = “black” – цвет текста
<font size = 4 color = “red”>
…
</font>
Добавление заголовков на страницу
В HTML существует 6 уровней заголовков. Они выделяются жирным шрифтом и создаются с помощью тегов от <H1> до <H6>.
<H1> заголовок 1-го уровня </H1> - самый крупный шрифт
.
.
.
<H6> заголовок нижнего уровня </H6>
Добавление графических файлов на страницу.
Рекомендуется использовать файлы с расширениями.
*.gif
*.jpg
*.jpeg
Вставка рисунков производится с помощью тега:
<img> Его параметры.
Src = “t.gif” – путь к файлу рисунка.
Align = top – позволяет выравнивать текст по отношению к рисунку, по верхнему краю
Middle – по середине рисунка
Bottom – по нижнему краю рисунка

LEFT изображение слева от текста
RIGHT изображение справа от текста

<Center>…</center> текст по центру.
Изменение размеров изображения можно произвести с помощью параметров
Width = 300 – ширина изображения в пикселях.
Height = 200 – высота изображения в пикселях.
Border = 5 – рамка вокруг рисунка.
Alt = “текст” – отображает текст если рисунок не появляется на экране.
<img src = “t.gif” border = 3 align = “top”>
Создание гиперссылок в документе.
<A>…</A>
Href = “t.html” – путь к отображаемой странице.
<a href = “t.html”> нажать здесь </A>
Использование рисунка в качестве гиперссылке:
<a href = “t.html”><img src = “a.gif”></A>
Все файлы, относящиеся к сайту должны содержаться в одном каталоге.
Создание внутренних ссылок.
Внутренняя ссылка действует на пространстве данной страницы, с её помощью можно организовать переход с начала страницы в её конец, для этого используется два тега:
создание элементов привязки, на которые можно будет ссылаться.
<a name = mid> - середина – текст, куда мы вернемся
</a>
Name – имя элемента привязки.
Mid – место куда нужно перейти.
представить внутреннюю ссылку, щелкнув на которой можно перейти к элементу привязки.
<a href = “#mid”> перейти к середине </a>
Ссылки на сетевые ресурсы.
Можно ссылаться на разделы новостей в Internet, на адрес электронной почты или получить доступ к другому сетевому ПК.
Создание ссылок на адрес электронной почты:
<a href = “mailto: karlson@mail.ru”> Напиши </a>
Создание списков в HTML.
Создание нумерованного упорядоченного списка.
текст1
текст2
.
.
.
n. текст n
<ol> … </ol> - определяет начало и конец списка.
<Li> - определяет каждый элемент списка
Цвета
красный <ol>
оранжевый <lh><em>цвета</em><br>
желтый<li> красный
<li> оранжевый
<li> желтый </ol>
<LH> - определяет заголовок
<Em> - курсив
Тег <OL> может иметь следующие параметры:
Compact – придает списку компактный вид.
Type = A – устанавливает в качестве номеров списка заглавные буквы.
Type = a - устанавливает в качестве номеров списка прописные буквы.
Type = I - устанавливает в качестве номеров списка римские цифры.
Type = 1 - устанавливает в качестве номеров списка арабские цифры.
Создание маркированного или неупорядоченного списка.
<ul> … </ul> - отмечает начало и конец списка.
<Li> - определяет каждый элемент списка
В теге <UL> можно изменять вид маркеров, для этого используется параметр type.
Type = disc ●
Type = circle ○
Type = square ■
Создание меню.
Планеты
меркурий
земля
В HTML имеется тег <menu> …</menu>
<Menu>
<LH><em> планеты </em><br>
<Li><a href = “mer.html”> Меркурий </a>
<Li><a href = “zem.html”> Земля </a>
</menu>
Списки определений.
Ненумерованный, немаркированный списки, они позволяют вывести на экран какой либо термин и с отступом его определение.
<DL> - перевод строки в начале и конце списка
<DT> - термин
<DD> - определение термина
</DL>
<DL>
<DT> Меркурий
<DD> Планета солнечной системы
</DL>
Меркурий
Планета солнечной системы
Форматирование списков вручную.
Для создания собственных списков можно использовать тег
<UL> …</UL> - сделает отступы, теги <LI> не используются, вместо маркера можно вставить рисунок:
<UL>
<IMG SRC = “t.gif” Align = top> Элемент 1 <BR>
<IMG SRC = “t1.gif” Align = top> элемент 2 <br>
</UL>
■ Элемент 1
■ Элемент 2
Работа с таблицами.
Таблицы часто используются как средство дизайна, не только для отображения текста, но и для компоновки различных элементов на странице.
Для создания таблиц используется 4 тега:
<table>…</table> - начало и конец таблицы.
Таблица описывается построчно, для описания каждой строки используется тег <tr>…</tr>, если необходимо выделить текст ячейки полужирным текстом (заголовок), то нужно использовать тег <TH>…</TH>. Для описания остальных ячеек используется тег <TD>…</TD>.
Последние 3 тега могут не иметь закрывающей части.
Внутри тега <table> используется параметр border = 2 – определяет толщину рамки таблицы. Внутри всех 4 тегов можно использовать:
Align = center и другие его выравнивания.
Valign = top – выравнивание по вертикали.
BGCOLOR = “red” – цвет фона
Bordercolor = “yellow” – цвет рамки.
Кроме этих тегов можно использовать тег <caption>…</caption>, для размещения заголовка над таблицей или под ней.
<caption align = bottom> таблица 1 </caption>
простая таблица
ВСЕ ЦВЕТА РАДУГИ
КРАСНЫЙ ОРАНЖЕВЫЙ ЖЕЛТЫЙ
ЗЕЛЕНЫЙ ГОЛУБОЙ ФИОЛЕТОВЫЙ
<table border align = center bgcolor = “blue”>
<TR>
<TH> все <TH> цвета <TH> радуги
<TR>
<TD> красный <TD> оранжевый <TD> желтый
<TR>
<TD> зеленый <TD> голубой <TD> фиалковый
</table>
Создание сложных таблиц.
Объединение строк и столбцов в таблице, их можно объединять, создавая из смежных ячеек более крупные.
Для объединения смежных ячеек в строке в тегах <TH> или <TD> используется параметр rowspan = 2 – строки , colspan = 3 – столбцы
<TABLE BORDER = 2 BGCOLOR = “RED”>
<TR><TD COLSPAN = 3> СБОРНАЯ <TR><TH> НАПАДАЮЩИЙ <TH> ЗАЩИТА
<TH>ВРАТАРЬ<TR><TD>РУСЛАН<TD>ДИМА
<TD ROWSPAN = 2> ВАЙНБЕРГ
<TR><TD COLSPAN = 2> ПАВЕЛ
</TABLE>
Сборная
Нападающий Защита Вратарь
Руслан Дима Вайнберг
Павел Группирование строк и столбцов.
Строки и столбцы группируются с целью применения общих параметров для этих групп (ширина, высота,…).
Для группировки используется тег <colgroup> - группирует ячейки находящиеся в столбцах таблицы. Параметры: SPAN = 3 - количество группируемых столбцов
WIDTH = “50px” – ширина в пикселях
<colgroup span = 4 bgcolor = “red” width = “40 %”>
Для группировки строк используются теги
<tbody>…</tbody> - группирует строки, находящиеся в средней части таблицы
<thead>…</thead> - группирует строки находящиеся в верхней части таблицы.
<tfoot>…</tfoot> - группирует строки находящиеся в нижней части таблицы.
Каждая строка таблицы, входящая в группу должна содержать <tr>
Если тег <tfoot> будет расположен перед <tbody>, то браузер сначала интерпретирует нижнюю часть таблицы.
&nbsp – обозначение пустой ячейки.
При работе с тегом <table> можно использовать следующие дополнительные настройки:
Frame = отображение сторон рамки таблицы. =void – отсутствуют, =above – верхняя сторона, =below –нижняя сторона, =hsides – горизонтальная сторона отображается, =lhs – левая сторона отображается, =rhs – правая сторона, =vsides – вертикальная сторона, =box, border – все 4 стороны.
Rules = - определение дополнительных линий внутри таблицы, можно разместить линии между всеми столбцами или группами строк. =non – нету, =groups – проводит горизонтальную линию между всеми группами строк и вертикальную между всеми группами столбцов, =rows – отображаются линии, указанные значением groups и горизонтальные линии между всеми строками, =cols – линии указанные значением groups и вертикальные линии между всеми столбцами, =allrules – все линии между строками и столбцами.
Основные цвета, используемые в HTML:
Black Navy
Gray Blue
Silver Aqua
White Green
Red Lime
Fuchsia Teal
Maroon Yellow
Purple Olive
Приведенные ниже 216 цветов считаются "безопасными" (browser-safe), т.к. хорошо отображаются браузерами.
Красный и Синий - добавляем Зеленый
000000 000033 000066 000099 0000cc 0000ff
330000 330033 330066 330099 3300cc 3300ff
660000 660033 660066 660099 6600cc 6600ff
990000 990033 990066 990099 9900cc 9900ff
cc0000 cc0033 cc0066 cc0099 cc00cc cc00ff
ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff
003300 003333 003366 003399 0033cc 0033ff
333300 333333 333366 333399 3333cc 3333ff
663300 663333 663366 663399 6633cc 6633ff
993300 993333 993366 993399 9933cc 9933ff
cc3300 cc3333 cc3366 cc3399 cc33cc cc33ff
ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff
006600 006633 006666 006699 0066cc 0066ff
336600 336633 336666 336699 3366cc 3366ff
666600 666633 666666 666699 6666cc 6666ff
996600 996633 996666 996699 9966cc 9966ff
cc6600 cc6633 cc6666 cc6699 cc66cc cc66ff
ff6600 ff6633 ff6666 ff6699 ff66cc ff66ff
009900 009933 009966 009999 0099cc 0099ff
339900 339933 339966 339999 3399cc 3399ff
669900 669933 669966 669999 6699cc 6699ff
999900 999933 999966 999999 9999cc 9999ff
cc9900 cc9933 cc9966 cc9999 cc99cc cc99ff
ff9900 ff9933 ff9966 ff9999 ff99cc ff99ff
00cc00 00cc33 00cc66 00cc99 00cccc 00ccff
33cc00 33cc33 33cc66 33cc99 33cccc 33ccff
66cc00 66cc33 66cc66 66cc99 66cccc 66ccff
99cc00 99cc33 99cc66 99cc99 99cccc 99ccff
cccc00 cccc33 cccc66 cccc99 cccccc ccccff
ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff
00ff00 00ff33 00ff66 00ff99 00ffcc 00ffff
33ff00 33ff33 33ff66 33ff99 33ffcc 33ffff
66ff00 66ff33 66ff66 66ff99 66ffcc 66ffff
99ff00 99ff33 99ff66 99ff99 99ffcc 99ffff
ccff00 ccff33 ccff66 ccff99 ccffcc ccffff
ffff00 ffff33 ffff66 ffff99 ffffcc ffffff
Красный и Зеленый - добавляем Синий
000000 003300 006600 009900 00cc00 00ff00
330000 333300 336600 339900 33cc00 33ff00
660000 663300 666600 669900 66cc00 66ff00
990000 993300 996600 999900 99cc00 99ff00
cc0000 cc3300 cc6600 cc9900 cccc00 ccff00
ff0000 ff3300 ff6600 ff9900 ffcc00 ffff00
000033 003333 006633 009933 00cc33 00ff33
330033 333333 336633 339933 33cc33 33ff33
660033 663333 666633 669933 66cc33 66ff33
990033 993333 996633 999933 99cc33 99ff33
cc0033 cc3333 cc6633 cc9933 cccc33 ccff33
ff0033 ff3333 ff6633 ff9933 ffcc33 ffff33
000066 003366 006666 009966 00cc66 00ff66
330066 333366 336666 339966 33cc66 33ff66
660066 663366 666666 669966 66cc66 66ff66
990066 993366 996666 999966 99cc66 99ff66
cc0066 cc3366 cc6666 cc9966 cccc66 ccff66
ff0066 ff3366 ff6666 ff9966 ffcc66 ffff66
000099 003399 006699 009999 00cc99 00ff99
330099 333399 336699 339999 33cc99 33ff99
660099 663399 666699 669999 66cc99 66ff99
990099 993399 996699 999999 99cc99 99ff99
cc0099 cc3399 cc6699 cc9999 cccc99 ccff99
ff0099 ff3399 ff6699 ff9999 ffcc99 ffff99
0000cc 0033cc 0066cc 0099cc 00cccc 00ffcc
3300cc 3333cc 3366cc 3399cc 33cccc 33ffcc
6600cc 6633cc 6666cc 6699cc 66cccc 66ffcc
9900cc 9933cc 9966cc 9999cc 99cccc 99ffcc
cc00cc cc33cc cc66cc cc99cc cccccc ccffcc
ff00cc ff33cc ff66cc ff99cc ffcccc ffffcc
0000ff 0033ff 0066ff 0099ff 00ccff 00ffff
3300ff 3333ff 3366ff 3399ff 33ccff 33ffff
6600ff 6633ff 6666ff 6699ff 66ccff 66ffff
9900ff 9933ff 9966ff 9999ff 99ccff 99ffff
cc00ff cc33ff cc66ff cc99ff ccccff ccffff
ff00ff ff33ff ff66ff ff99ff ffccff ffffff
Зеленый и Синий - добавляем Красный
000000 000033 000066 000099 0000cc 0000ff
003300 003333 003366 003399 0033cc 0033ff
006600 006633 006666 006699 0066cc 0066ff
009900 009933 009966 009999 0099cc 0099ff
00cc00 00cc33 00cc66 00cc99 00cccc 00ccff
00ff00 00ff33 00ff66 00ff99 00ffcc 00ffff
330000 330033 330066 330099 3300cc 3300ff
333300 333333 333366 333399 3333cc 3333ff
336600 336633 336666 336699 3366cc 3366ff
339900 339933 339966 339999 3399cc 3399ff
33cc00 33cc33 33cc66 33cc99 33cccc 33ccff
33ff00 33ff33 33ff66 33ff99 33ffcc 33ffff
660000 660033 660066 660099 6600cc 6600ff
663300 663333 663366 663399 6633cc 6633ff
666600 666633 666666 666699 6666cc 6666ff
669900 669933 669966 669999 6699cc 6699ff
66cc00 66cc33 66cc66 66cc99 66cccc 66ccff
66ff00 66ff33 66ff66 66ff99 66ffcc 66ffff
990000 990033 990066 990099 9900cc 9900ff
993300 993333 993366 993399 9933cc 9933ff
996600 996633 996666 996699 9966cc 9966ff
999900 999933 999966 999999 9999cc 9999ff
99cc00 99cc33 99cc66 99cc99 99cccc 99ccff
99ff00 99ff33 99ff66 99ff99 99ffcc 99ffff
cc0000 cc0033 cc0066 cc0099 cc00cc cc00ff
cc3300 cc3333 cc3366 cc3399 cc33cc cc33ff
cc6600 cc6633 cc6666 cc6699 cc66cc cc66ff
cc9900 cc9933 cc9966 cc9999 cc99cc cc99ff
cccc00 cccc33 cccc66 cccc99 cccccc ccccff
ccff00 ccff33 ccff66 ccff99 ccffcc ccffff
ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff
ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff
ff6600 ff6633 ff6666 ff6699 ff66cc ff66ff
ff9900 ff9933 ff9966 ff9999 ff99cc ff99ff
ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff
ffff00 ffff33 ffff66 ffff99 ffffcc ffffff
Перед созданием сайта необходимо продумать его структуру (тему смотри в индивидуальном задании в приложении). Он должен содержать главную страницу с оглавлением, ссылающимся на остальные информационные страницы сайта. В интерфейсе пользователя предусмотрите возможность перехода с оглавления на любую страницу сайта и обратно (связи). В информационные страницы включите помимо текстового материала графику; организуйте не только текстовые, но и графические гиперссылки.
Оформить отчет о проделанной работе.
ТЕМЫ ДЛЯ РАЗРАБОТКИ Web-сайта:
№ Тема № Тема № Тема
1.     Аквариумные рыбки 2. История самолетостроения 3. Растительный мир Африки
4.     Акробатика 5. История подводного флота 6. Растительный мир Европы
7.     Алмазный фонд 8. Легенды звездного неба 9. Рептилии
10. Бальные танцы 11. Ливерпульская четверка 12. Российские космонавты
13. Большие птицы 14. Лиственные деревья 15 Полевые цветы
16. Большой теннис 17. Лошади 18 Оружие самообороны
19. Великие храмы России 20. Лувр 21 Самые большие животные
22. Виды легкой атлетики 23. Любимый актер 24 Самые высокие точки мира
25. Владимир Высоцкий 26. Любимый певец 27 Самые маленькие животные
28. Гимнастика 29. Мир акул 30 Сельскохозяйственные животные
31. Города-герои России 32. Мир китов 33 Семь чудес света
34. Грызуны 35. Мир кораллов 36 Символика России и Российской империи
37. Декоративные цветы 38. Морские животные 39 Собаки
40. Доисторические животные 41. Морские рыбы 42 Спортивные танцы
43. Долгожители среди животных 44. Награды Российской империи 45 Сайт-визитка
46. Долгожители среди птиц 47. Награды Советского периода 48 Устройство ПК
49. Домашние птицы 50. Обезьяны 51 Уфология
52. Екатериновский дворец 53. Овощи 54 Фауна Приморского края
55. Животные и птицы Антарктиды 56. Оптические явления в кристаллах и камнях 57 Физико-математический факультет
58. Животные, занесенные в Красную книгу 59. Российские художники передвижники 60 Фигурное катание
61. Животный мир Австралии 62. Павловский дворец 63 Флора Приморского края
64. Животный мир Азии 65. Памятные места Уссурийска 66 Фрукты
67. Животный мир Америки 68 Пауки 69 Хвойные деревья
70. Животный мир Африки 71 Петергоф и его фонтаны 72 Холодное оружие
73. Животный мир Европы 74 Подводный растительный мир 75 Чарли Чаплин (Спенсер)
76. Животный мир Северного полиса 77 Российские Нобелевские лауреаты 78 Достопримечательности Владивостока
79. Змеи Приморского края 80 Прадо 81 Эрмитаж
82. Знаки зодиака 83 Различные единоборства 84 Ягоды
85. Знаменитые вулканы 86 Разнообразие кактусов 87 Ядовитые змеи
88. Игровые виды спорта 89 Разнообразный мир попугаев 90 Кошки
91. История воздухоплавания 92 Растительный мир Америки 93 Растения, занесенные в Красную книгу
94. История кораблестроения 95 Растительный мир Австралии 96 Мировые курорты
97. История машиностроения 98 Растительный мир Азии 99 Экзотические деревья
Лабораторная работа №2 по дисциплине «ИТ»
Тема: «Фреймы в HTML»
Цель: ознакомиться с понятием фрейма, научиться представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами.
Ход выполнения работы:
Изучить теоретические сведения:
2733675522605Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.
Фреймы по своей сути очень похожи на ячейки таблицы, однако более универсальны. Фреймы разбивают веб-страницу на отдельные миникадры, расположенные на одном экране, которые являются независимыми друг от друга. Каждое окно может иметь собственный адрес. При нажатии на любую из ссылок, расположенных в одном фрейме, можно продолжать видеть страницы в других окнах.
Фреймы используются для навигации по веб-сайту. При этом навигационная страница располагается в одном окне, а страницы с текстом — в другом.
Итак, окно браузера может быть разделено на фреймы, т.е. на области, расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
27336752540
В html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей - фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:
rows - разбить окно на горизонтальные области. В примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% , ширина второй - 10%, а третьей - 60%.
cols - указывает разбить окно на вертикальные области.
Внутри тегов <frameset></frameset> располагаются одиночные теги <frame> (по количеству областей). Без параметров эти теги бесполезны.
Параметры тега <frame> на примерах.
Надо создать три обычные html-страницы:

Эти страницы должны лежать в том же каталоге, что и index.html.А теперь добавим параметр src в теги <frame> на странице index.html:

В браузере страница index.html будет выглядеть так:

src - самый главный параметр тега <frame>, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Ещё один параметр тега <frame> :
name - имя фрейма, которое будет использоваться для ссылки к данному фрейму. Добавим этот параметр тегу <frame src="content.html">:

Теперь создайте еще одну страницу other.html с кодом:

А теперь на странице menu.html сделаем первый пункт меню ссылкой на эту страницу и укажем, что открывать страницу other.html следует во фрейме с именем content:

Теперь при щелчке по первому пункту меню, во фрейм content будет загружаться страница other.html

Параметру target можно задать и другие значения:
_self - загружать в тот же фрейм, из которого ссылаются.
_top - загружать в полное окно, закрывая остальные фреймы (обычно используется для ссылок на другие сайты).
marginwidth - определяет отступ во фрейме от левого края до содержимого. marginheight - определяет отступ во фрейме от верхнего края до содержимого.
scrolling - если содержимое фрейма не помещается в окно, то будут появляться полосы прокрутки, иногда это нарушает дизайн. Этот параметр помогает управлять отображением полос прокрутки. Может принимать значения: yes, no, auto.
noresize - если установить курсор мыши на рамки фрейма, то можно выполнить его перемещение. Для предотвращения этой возможности и используется этот параметр.
Давайте внесем последние четыре параметра в код нашей страницы index.html:

Теперь наша страница выглядит так:

Последний штрих: уберем рамки фреймов. Для этого в тег добавим два параметра border="0" frameborder="0".

Теперь наша страница выглядит так:

Плюсы и минусы фреймов
Преимущество: сокращение количества загружаемой на компьютер пользователя информации, т.к. шапка и меню сайта загружаются только один раз, а далее меняется только контент, что сокращает время загрузки. Недостатки: фреймовую структуру поддерживают не все браузеры.
Примеры фреймовых структур
За разделение на фреймы отвечают два параметра: rows и cols. Комбинируя их, можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.
Пример 1: Получить три вертикальных фрейма. Ширина первого - 150 пикселов, второго - 300, а третьего - все остальное пространство окна.

Пример 2: Получить два вертикальных фрейма. Ширина первого принимается равной за единицу, а второй - в два раза шире первого (т.е. 33% и 67% от ширины окна).

Пример 3: Получить два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство. Второй горизонтальный фрейм разобить на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место. Это достигается с помощью вложенных тегов.

Пример 4: Получить два вертикальных фрейма. Ширина первого - 25%, а второго - все остальное пространство. Второй вертикальный фрейм разбить на два одинаковых горизонтальных.

Выполнить все примеры, приведенные выше. Для сайта, разработанного в ходе выполнения лабораторной работы №1, создать горизонтальную фреймовую структуру. Пример:
15811529845

Оформить отчет о проделанной работе.
Лабораторная работа №3
Тема: «Каскадные таблицы стилей (CSS)»
Цель: ознакомиться с визуальными приемами оформления Web-страницы путем использования каскадных таблиц стилей (CSS).
Ход выполнения работы:
1)Изучить теоретические сведения:
HTML - это язык разметки, в котором есть теги и их параметры, отвечающие за внешний вид страницы. Но в определенный момент код страницы становится громоздким и нечитабельным. Для решения этой проблемы разделяют разметку страницы (HTML) и ее визуальное оформление (CSS - Cascading Style Sheets - каскадные таблицы стилей).
Стиль - набор параметров, управляющих видом и положением элементов веб-страницы, т.е. задающих внешнее представление объекта
(например, на одной странице - все заголовки первого уровня (тег <h1>) красным цветом, размером – 24, курсивом, на другой странице - синего цвета, размера – 12). Заголовок - это объект, а цвет, размер и начертание - это параметры, для разных страниц разные, они отличаются стилем. Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...).
Набор стилей всех элементов называют таблицей стилей. Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.
Преимущества CSS
- позволяет значительно сократить размер кода и сделать его читабельным.
- позволяет задавать такие параметры, которые нельзя задать только языком HTML (например, убрать подчеркивание у ссылок).
позволяет легко изменять внешний вид страниц (сайт из 50 страниц, на которых все заголовки синего цвета, необходимо поменять синий цвет на зеленый. При этом придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте). С CSS придется сделать это лишь один раз, в таблице стилей.
с CSS связана так называемая блочная верстка сайта.
Подключение CSS к HTML. Внешние таблицы стилей.
Необходимо создать обыкновенную html-страницу, далее создать в блокноте страницу style.css в той же папке, где лежит html-страница. Это и будет страница стилей. Далее необходимо подключить страницу style.css к html-странице. Для этого существует тег, отвечающий за подключение внешних файлов, который необходимо доавить в html-страницу.

Тэг <link> устанавливает связь с внешним документом со стилями. Атрибуты:
rel - определяет отношения между текущим документом и файлом, на который делается ссылка;
href - путь к связываемому файлу;
type - применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Это оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <H1>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере выше показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление», как показано на рисунке.

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля»:

Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Цвет и фон в CSS
CSS предлагает несколько способов определения цвета:
1) Шестнадцатеричное задание цвета
Шестнадцатеричное задание цвета — это три цветовых составляющих в диапазоне шестнадцатеричных чисел от 00 до FF. Это соответствует диапазону десятичных чисел 0 до 255. Первая пара чисел определяет компонент красного цвета (Red), вторая — зеленого (Green) и третья — голубого (Blue): #rrggbb. Например:
р { color: #663399}
В этом стиле определен фиолетовый цвет текста, который будет помещен в теги <р>.
2) Трехзначное шестнадцатеричное задание цвета
Шестнадцатеричный формат можно записывать в упрощенном виде #rgb, что соответствует формату #rrggbb. Таким образом, запись вида #foo соответствует записи #ffoooo.
3) RGB-значения
CSS позволяет указывать цвет в виде тройки RGB-значений, записанных десятичными числами.
p {color: rgb(0,255,100) }
Значения цветовых компонентов лежат в диапазоне о 0 до 255.
4) RGB-значения в процентах
Кроме десятичных чисел, при указании цвета тройками RGB-значений можно применять проценты. Значения лежат в диапазоне от 0 до 100%.
em (color: rgb(0%,100%,55%) }
5) Ключевые слова
При назначении цвета можно применять именованные цвета, определенные в спецификации HTML:
Black — черный (#000000);
white — белый (#ffffff);
Gray—Серый (#808080);
silver — светло-серый (#сососо);
Green — темно-зеленый (#008000);
Lime — ярко-зеленый (#ooffoo);
Olive — оливковый (#808000);
Yellow — желтый (#FFFF00);
Blue — синий (#ooooff);
Navy — темно-синий (#000080);
Purple — фиолетовый (#800080);
Red—красный (#ffoooo);
Maroon - красно-коричневый (#800000).
Системные цвета
Свойства цвета и фона в CSS
Свойство COLOR - задает основной цвет элемента. H1 {color: red}
Свойство BACKGROUND-COLOR - задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др.
Ну вот например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY - т.к. именно он отвечает за тело документа , т.е. за всю страницу.
BODY { background-color: #FFEE8C}
H1 { color: red ; background-color: blue}
Свойство BACKGROUND-IMAGE - данное свойство используется для задания фонового изображения. Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы.
BODY { background-color : #FFEE8C ; background-image : url(smile.png)}
Свойство BACKGROUND-REPEAT - фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, пока не заполнит весь экран. С помощью свойства background-repeat мы можем контролировать эти повторения.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ;повторение по горизонтали
Background-repeat: repeat-y ;повторение по вертикали
Background-repeat: repeat ;по вертикали и по горизонтали(значение по-умолчанию)
Background-repeat: no-repeat ; не повторяется
BODY {
background-image : url(smile.png) ;
background-repeat: repeat-x;
}

Свойство BACKGROUND-ATTACHMENT - при наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:
SCROLL - фон прокручивается вместе с содержимым;
FIXED - фон строго зафиксирован.
BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}
Значение по умолчанию - scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.
Свойство BACKGROUND-POSITION - задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования (точка это типа изображение, а то что под ней - приблизительные координаты)
В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.
Также положение можно задавать специальными словами:
left - лево, right - право, center -центр, top - верх, bottom - низ . Смотрите рисунок:
Примеры стилей:
BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: top right;
}
Шрифты в CSS
Свойство FONT-FAMILY
Данное свойство определяет тип (семейство) шрифта.
Три основных семейства:
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты без засечек, например Arial или Verdana;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";
Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки.
h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}
Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif .
Свойство FONT-STYLE
Данное свойство задает стиль шрифта. Может принимать три значения:
normal - обычный;
italic - курсивный;
oblique - наклонный;
Значение italic означает использование встроенного в шрифт курсивного начертания. А значение oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.
h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
Свойство FONT-VARIANT
Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:
normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.
Т.е. большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.
По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.
Пример записи стиля:
h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
Свойство FONT-WEIGHT
Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal (обычный), bold (полужирный), bolder (более жирный), lighter (бледнее). Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900.
Для справки: 400 равносильно normal, а 700 - bold . К сожалению, в настоящее время большинство браузеров поддерживает только две градации полноты: обычный (normal) и полужирный (bold) — в связи с чем, указание цифровых значений теряет смысл. Некоторые семейства шрифтов также имеют только две выше обозначенные градации.
P {font-family: arial, verdana, sans-serif;}
DIV {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}
Свойство FONT-SIZE
C его помощью можно регулировать размер шрифта.
Спецификация CSS определяет несколько единиц измерения, их можно условно разделить на две группы: абсолютные и относительные единицы измерения
Абсолютные единицы измерения:
in — дюймы (1 дюйм = 2,54 см);
cm—сантиметры;
mm — миллиметры;
pt — пункты (1 пункт = 1/72 дюйма);
рс — пики (1 пика = 12 пунктам).
Относительные единицы измерения:
em — размер шрифта;
ех -— размер символа х;
% — проценты;
рх — пикселы;
относительные ключевые слова (larger и smaller);
относительные ключевые слова для задания абсолютного размера шрифтов.
h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
Форматирование текста
Свойство TEXT-ALIGN - свойство выравнивания текста. Может принимать четыре значения:
Выравнивание по горизонтали:
left - выравнивание по левому краю(значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине(по правому и левому краям одновременно).
Выравнивание по вертикали:
baseline — выравнивание базовой линии элемента по базовой линии родительского элемента;
middle — выравнивание средней точки элемента по базовой линии родительского элемента;
text-top — выравнивание верха элемента по верху шрифта родительского элемента;
text-bottom— выравнивание нижней линии элемента по нижней линииродительского элемента;
top— выравнивание верха элемента по верху самого высокого элементастроки;
bottom — выравнивание низа элемента по низу элемента строки, расположенного ниже всех;
sub — отображение элемента в виде нижнего индекса;
super — отображение элемента в виде верхнего индекса;
Базовой является линия, на которой лежит текст без учета некоторых сим лов, таких как "р", "д", "щ", "ц" и т. п.
h1{ text-align:center;}

Свойство TEXT- DECORATION - позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:
none - значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;
h1 {
text-align:center;
text-decoration:underline;
}
Свойство TEXT-INDENT - свойство для создания отступов первой строки. Значение лучше задавать в пикселах, это универсальный способ.
h1{text-align:center;}
p {
text-indent: 40px;
}

Однако можно задать и в процентах от общей длины базовой строки(строки без отступа)
h1{text-align:center;}
p {
text-indent: 20%;
}
Свойство TEXT-TRANSFORM - с помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:
capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".
uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".
none - не производит смены регистра; это значение используется по умолчанию.
Свойство LETTER-SPACING - с помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.
h1 { letter-spacing: 10px;}
p{ letter-spacing :4px; }
В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;
Свойство WORD-SPACING - позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.
h1 { word-spacing: 20px;}
p{ word-spacing :10px; }
Буквица
Буквицей называют выделенную первую букву в абзаце. Создать буквицу и определить ее параметры можно с помощью псевдоэлемента first-letter например:
р:first-letter { font-size: 300%; vertical-align: baseline }
Поля (margin) и отступы (padding)
MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.
Пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:
p1 {
background-color : #FFE446;
border:1px solid red;
margin:70px;
}
p2 {
background-color : #FFE446;
border:1px solid red;
padding:70px;
}
p3 {
background-color : #FFE446;
border:1px solid red;
margin:50px;
padding:20px;
}

Добавляя уже знакомые ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.
p {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:150px;
}

Тоже самое, только в более сокращенной записи:
p {
margin:50px;
margin-left:150px;
}
Т.е. так как только левое поле отличается от остальных, мы просто записали общее поле, а потом дописали значение левого поля, и получили тот же результат что и в первом примере.
Возможен также такой вариант записи:
p {
margin: 50px 50px 50px 150px;
}
Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.
В каких случаях лучше пользоваться отступами, а в каких полями?
А это уже решать разраотчику, вот несколько принципиальных отличий:
Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;
Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.
Рамки в CSS
Свойство BORDER-WIDTH
Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px).

Свойство BORDER-COLOR
Данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold".

Свойство BORDER-STYLE
Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства:
SOLIDРамка состоит из сплошной линии
DOTTEDТочечная рамка
DASHEDПунктирная рамка
DOUBLEРамка из двойной сплошной линии
GROOVEРамка как бы из вдавленной линии, с имитацией объема
RIDGEРамка отображается выпуклой линией с имитацией объема
INSETРамка отображается так, что весь блок кажется вдавленным
OUTSETРамка отображается так, что весь блок кажется выпуклым
h1 {
border-width: 4px;
border-style: dotted;
border-color: red;
}
Изучив теоретический материал, выполнить задание:
Создайте внешний CSS файл. Подключите его ко всем страницам вашего cайта. Увеличьте размер шрифта, задайте для тега BODY фон свойством background-color и границу толщиной 5px.
На главной странице измените цвет фона на отличный от цвета на других страницах.
Создайте новую страницу. Поместите на нее текст произвольного содержания. С помощью CSS задайте следующие параметры для заголовка: размер шрифта – 16 pt, полужирный, выравнивание по центру. Для текста – размер шрифта 12 pt, межстрочный интервал – полуторный, красная строка – 1,5 см.
Подберите подходящий шрифт для заголовка и текста.
Оформите отчет о проделанной работе.
Лабораторная работа №4
Тема: «Шаблоны сайтов»
Цель: ознакомиться сприемами оформления Web-страницы путем использования шаблонов сайтов.
Ход выполнения работы:
1)Изучить теоретические сведения:
Шаблон - это один из основных элементов сайтостроения, своего рода набор правил для отображения информации. От его качества зависит количество посетителей страницы, а значит и прибыльность проекта в целом.
Хороший шаблон - это не только удачная подборка цветовых тонов, но еще и структурированность, порядок расположения графического, статейного и мультимедийного материала на интернет странице. Он должен обладать удобными навигационными элементами, иначе посетителю придется потратить много времени на изучение сайта, что мало кому нравится.
Также нужно отдельно подчеркнуть, что шаблон - это не готовый сайт, а его «заготовка», каркас, в который уже будет встраиваться основное «тело» материалов и данных. Его главное предназначение - это обеспечивать правильное отображение информации. При этом система для управления сайтом не является частью заготовки.
Чаще всего используются следующие разновидности шаблонов:
HTML заготовка. Идеальный вариант для создания простого, без элементов управления сайта, который обладает несколькими, редко обновляемыми страницами. В бесплатном html шаблоне сочетаются готовый дизайн, юзабилити и верстка, он легко настаивается под любую систему управления.
FLASH заготовка. Исходный файл данного формата редактируется при помощи специального графического редактора. Для работы с представленным шаблоном необходимы навыки программирования.
Word Press шаблон. Позволяет быстро освоить навыки работы с заготовками сайтов, большой популярностью пользуются хостинги с уже встроенным «каркасом».
Joomla шаблон. Работа с данной заготовкой требует знаний в области программирования.
osCommerce шаблон. Англоязычные интернет заготовки, готовые магазины, однако успешная работы с ними требует сильных знаний по работе с различными программами. Вариант для профессионалов.
Рассмотрев различные варианты заготовок для сайтов, можно прийти к выводу о том, что для человека, не обладающего специальными навыками в области программирования, который заинтересован в том, чтобы его сайт был создан быстро и начал приносить прибыли, наилучшим решением будет использование готовой бесплатной html заготовки. Помимо готовых шаблонов, также рекомендуется скачать специальные скрипты, чтобы сделать ваш сайт более полезным и информативным для пользователя, повысить его функциональность. Это может быть гостевая книга, календарь, чат, форум, и так далее. Также полезно прочитать книги на данную тему и посмотреть видео. Нужно стремиться сделать вашу торговую площадку, магазин, форум лучшими в своем сегменте, и тогда прибыль не заставит себя ждать.
Изучив теоретический материал, выполнить задание: дан шаблон сайта (см. файлы в папке с лаб.работой) на HTML и CSS, на его основе необходимо создать многостраничный НТМL-документ, наполненный тематическим контентом (текстом, картинками).
3) Сделать вывод по проделанной работе, оформить отчет.
Лабораторная работа №5
Тема: «Локальный сервер XAMPP»
Цель: установить локальный сервер, ознакомиться с его службами, с приемами создания сайтов на локальном сервере.

Ход выполнения работы:
Для того, чтобы установить Локальный сервер XAMPP на компьютер, запускаем скаченный установочный файл (cсылка для скачивания XAMPP:
https://www.apachefriends.org/ru/index.html)
Программа установщик предложит выбрать путь к папке, в которую Локальный сервер XAMPP будет установлен. Ничего не меняем, оставим путь, предложенный программой – C:\xampp.
В следующем окне программа предлагает создать ярлыки на рабочем столе, и в меню “Пуск”, оставляем эти опции включенными.
Здесь же, программой установки будет предложено создать службы для запуска сервера Apache и MySQL. Эти службы будут запускаться с загрузкой Windows. Эти опции активировать не будем.
После установки, на рабочем столе и в меню пуск будет создан ярлык для запуска контрольной панели локального сервера:

Запустим панель управления локального сервера.
Локальный сервер XAMPP, управляется кнопками “Start”. Так, например, чтобы запустить сервер Apache, жмем соответствующую кнопку “Start” напротив сервиса Apache в контрольной панели локального сервера:

Для перезапуска служб достаточно воспользоваться соответствующей кнопкой службы, а для администрирования службы необходимо нажать кнопку “Admin”.
Как создавать сайты на локальном сервере XAMPP
Вначале отметим, что после установки локального сервера на компьютер, программой установки на диске C была создана папка – xampp. В данной папке находится папка: htdocs.
Так вот, все создаваемые сайты на локальном сервере, должны лежать в этой папке. То есть, локальный путь к папкам сайтов будет следующий:
C:\xampp\htdocs
Для примера, давайте на локальном сервере xampp, создадим сайт с доменным именем test12.ru
Для этого, нам достаточно создать в директории htdocs папку с именем нового домена test12.ru:
C:\xampp\htdocs\test12.ru
Все файлы нашего нового сайта, соответственно должны храниться в папке домена - test12.ru.
Теперь еще один важный момент - для того, чтобы открыть сайт test12.ru в браузере, к нему в необходимо обратиться по адресу:
http://localhost/test12.ru
Наличие в пути к сайту директории localhost нам мешать не будет, такое обращение к сайту лишь напомнит нам, что мы работаем на локальном сервере.
Кстати, если мы зайдем на страницу http://localhost/xampp/, то мы получим доступ к странице состояния и режимов локального сервера xampp.
Давайте вернемся к тестированию созданного нами тестового сайта test12.ru.
Чтобы сайт заработал, необходимо, чтобы в корне сайта, то есть в папке C:\xampp\htdocs\test12.ru, находился индексный файл.
Давайте добавим в эту папку индексный файл index.php, следующего содержания:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Локальный сервер XAMPP - Тестируем PHP</title>
</head>
<body>
<?php echo '<p>Привет, мир!</p>'; ?>
</body>
</html>
Файл index.php содержит строчку скриптового языка php, кроме того, сам файл имеет расширение php.
Сохраним файл index.php в папке C:\xampp\htdocs\test12.ru.
Теперь на нашем сайте есть стартовый (индексный) файл. Код данного файла, выводит командой echo на страницу браузера строку – Привет, мир!
Откроем сайт в окне браузера, обратившись к нему по адресу - http://localhost/test12.ru, если все набрано правильно, и локальный сервер запущен, тогда браузер отобразит в своем окне строку - Привет, мир!
Таким образом, мы видим, что Локальный сервер XAMPP работает и мы можем использовать его для создания и тестирования своих сайтов!

Сделайте вывод по проделанной работе, оформить отчет.
Лабораторная работа №6
Тема: «Создание простой формы»
Цель: создать для HTML-формы страницу, где пользователи будут фиксировать свое имя, фамилию, адрес электронной почты и давать произвольный комментарий.
Ход выполнения работы:
В экранной форме нужно создать необходимые поля и соответствующие им переменные.
Создание HTML-формы
Откройте текстовый редактор и создайте новый документ.
<HTMLxHEADxTITLE>HTML Form</TITLEx/HEAD><BODYx/BODY></HTML>
В тело программы добавьте открывающий и закрывающий тэги для экранной формы (листинг 1).
<FORM ACTION="HandleForm.php"> </FORM>.
Тэги <FORM> задают начало и конец формы. Все элементы формы должны быть размещены между ними. Атрибут ACTION сообщает серверу, какая страница (или сценарий) получит данные из формы.
Листинг 1: Каждая HTMLформа начинается и заканчивается тэгами <FORM> и </FORM>. He забывайте использовать их. Также помните, что необхо димо отправлять форму для обработки в соответствующий сценарий с помощью атрибута ACTION.
<HTML> <HEAD> <TITLE>HTML Form</TITLE> </HEAD> <BODY> <FORM ACTION = "HandlePorm.php"> </FORM> </BODY> </HTML>
Сохраните страницу как form.html.
Поместите курсор между тэгами <FORM> и нажмите клавишу Enter для создания новой строки.
Теперь начнем добавлять в форму поля:
First Name <INPUT TYPE=TEXT NAME="FirstName" SIZE=20xBR>
Будьте последовательны и присвойте каждому полю в форме логическое и наглядное имя. Для имени используются буквы, числа и символ подчеркивания. При работе внимательно следите за именами полей.

Текстовая область предоставляет пользователю больше места для ввода комментариев, чем текстовое поле. Однако в последнем можно ввести ограничение на количество вводимых символов, в то время как в текстовой области это сделать невозможно. При создании формы выбирайте тот тип поля, который более соответствует информации, вводимой пользователем.
На отдельной строке напечатайте новую строку
<INPUT TYPE=SUBMIT NAME="SUBMIT" VALUE="Submit!">
Значение типа SUBMIT это надпись на кнопке в окне браузера. Также можно использовать кнопки Go! или Enter.

Сохраните сценарий (листинг 2), загрузите его на сервер и просмотри те в окне браузера (рис). Так как это обычная страница, а не PHP сценарий, ее можно увидеть и без сервера, в окне браузера прямо на вашем компьютере.
Листинг 2. Разрешается использовать любую комбинацию полей ввода в форме, главное, чтобы все они были определены внутри тэгов <FORM>, иначе не будут работать. Представленная в виде таблицы форма удобна в использова нии и выглядит профессионально.

В данном примере мы создали форму, вручную написав HTMLкод. Можно делать то же самое в специальных HTMLредакторах, таких как Dreamweaver или GoLive, если вам это больше нравится.
Мы использовали стандартное расширение HTML (.html), так как создавали обычную HTMLстраницу. Можно было применить расширение .php и получить тот же результат, хотя сам язык и не был бы использован. Напоминаю, что на РНР-странице все, что не ограничено PHPтэгами <?php и ?>, трактуется как обычный код HTML.
Хотя мы и не рассматривали этот вопрос, я все же порекомендовал бы использо вать в формах, особенно сложных, кнопку Reset. Создать ее можно следующим образом:
<INPUT TYPE=RESET NAME=RESET VALUE="RESET">
Убедитесь, что атрибут ACTION правильно указывает на существующий на серве ре файл, иначе форма не будет обработана. В нашем случае мы определяем, что файл HandleForm.php находится в одном каталоге со страницей form.html.
Источник http://www.weblibrary.biz/php/html_forma/sozdanie_formyСделайте вывод по проделанной работе, оформите отчет.

Лабораторная работа №7
Тема: Диалоговые окна ввода-вывода, данные, переменные.
Цель работы: научиться встраивать сценарий Java Script на страницу, научиться работать с данными и переменными, а также выводить сообщения на экран.
Теоретические сведения
Включение скриптов в HTML и подключение внешних файлов
В любое место html-документа можно вставить контейнер script, в теле которого написать сценарий на JavaScript.
Например:
<script>
alert("Helloworld!");
</script>
При этом определение функции может быть в одном script-контейнере, а вызов в другом; т.е. код доступен из любого места html-документа.
Для подключения внешнего файла с кодом на JavaScript используется следующий синтаксис:
<script src="/путь/имя.js"></script>
Методы ввода-вывода данных
В JavaScript существует три стандартных метода для ввода и вывода данных: alert, prompt и confirm.
Метод alert позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК.
Синтаксис:
alert (сообщение).
Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками - ОК и Отмена (Cancel). В отличие от метода alert этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true (истина, да); если он щелкнул на кнопке Отмена, то возвращается значение false (ложь, нет).
Синтаксис:
confirm (сообщение).
Метод prompt позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. Кроме того, в этом окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от методов alert и confirm данный метод принимает два параметра: сообщение и значение, которое должно появляться в текстовом поле ввода данных по умолчанию. Синтаксис: prompt (сообщение, значение_поля_ввода_данных).
Переменные и оператор присвоения
Чтобы сохранять данные в памяти и в то же время оставлять их доступными для дальнейшего использования, в программах используют переменные.
Переменную можно считать контейнером для хранения данных. Данные, сохраняемые в переменной, называются значениями этой переменной.
Переменная имеет имя - последовательность букв, цифр и символа подчеркивания без пробелов и знаков препинания, начинающуюся обязательно с буквы или символа подчеркивания.
Оператор присвоения значения переменной обозначается символом равенства "=". Выражение с оператором "=" интерпретатор вычисляет следующим образом: сначала вычисляется значение справа от знака равно, после чего результат присваивается переменной слева.
Если x и y две переменные, то выражение x = y интерпретируется так: переменной x присваивается значение переменной y.
Задание 1.
Создайте новый html документ, наберите текст программы, и проверьте ее работу в браузере (при запросе метода prompt введите свою фамилию и имя). Сделайте скриншот результата. Опишите работу сценария, объясните результат.

Задание 2.
Создайте внешний js файл, подключите его на страницу html. В js-файле опишите сценарий, выполняющий следующие действия:
Объявить и инициализировать три переменные типа number,string и boolean.
Вывести эти значения на экран (каждое значение на новой строчке);
Сделать скриншот результата, скриншот текста программы (js-файла и html-файла)
Контрольные вопросы
Какие три метода в JavaScript для ввода и вывода данных через диалоговые окна вы знаете?
Какой метод из них возвращает значение true или false? При щелчке на какой кнопке диалогового окна возвращается true? false?
Сколько параметров принимает метод prompt? Являются ли они обязательными? Проверьте это.
Зачем нужны переменные?
Что из себя представляет имя переменной?
Что обозначает символ равенства "="?
Содержание отчета
Номер, тема и цель лабораторной работы.
Ход работы.
Контрольные вопросы и ответы.

Лабораторная работа №8
Тема: Условные конструкции Java Script
Цель работы: научиться использовать условные конструкции JavaScript.
Теоретические сведения
Вычислительный процесс можно направить по тому или иному пути в зависимости от того, выполняется ли некоторое условие или нет.
Оператор if (если)
Синтаксис:
if(условие)
{ код, который выполняется, если условие выполнено }
else
{ код, который выполняется, если условие не выполнено }
Часть этой конструкции, определяемая ключевым словом else (иначе), необязательна.
Оператор switch (переключатель)
Синтаксис:
switch(выражение){
case значение1:
код
[break]
case значение2:
код
[break]
...
[default:
код]
}
Сначала вычисляется выражение, указанное в круглых скобках сразу за ключевым словом switch. Полученное значение сравнивается с тем, которое указано в первом варианте. Если они не совпадают, то код этого варианта не выполняется и происходит переход к следующему варианту. Если же значения совпали, то выполняется код, соответствующий этому варианту. При этом, если не указан оператор break, то выполняются блоки кода всех остальных (расположенных ниже) веток case.
Задание 1.
Объявить и инициализировать четыре переменные числового типа. Программным способом подсчитать сумму только положительных чисел. Результат вывести на экран. Также вывести строку со своей фамилией. Сделать скриншот результата, скриншот текста программы.
Задание 2.
Объявить и инициализировать три переменные числового типа. Программным способом найти максимальное число и вывести результат на экран.Также вывести строку со своей фамилией. Сделать скриншот результата, скриншот текста программы.
Содержание отчета
Номер, тема и цель лабораторной работы.
Ход работы.
Вывод.

Лабораторная работа №9
Тема: «Операторы цикла»
Цель работы: научиться использовать операторы цикла.
Теоретические сведения.
Операторы цикла обеспечивают многократное выполнение блока программного кода до тех пор, пока выполняется заданное условие.
Оператор for (для)
Синтаксис:
for([счетчик] ; [условие] ; [изменение_счетчика]){
код
}
Оператор while (пока)
Синтаксис:
while(условие){
код
изменение_переменной
}
Оператор do-while (делай до тех пор, пока)
Синтаксис:
do{
код
изменение_переменной
}while(условие)
Задание.
Вычислить сумму всех целых положительных чисел от 1 до 4 в трех вариантах (использовать операторы while, do-whileиfor). В каждом случае вывести также свою фамилию на экран, сделать скриншот результата, текста программы и поместить в отчет.
Лабораторная работа №10
Тема: «События JavaScript»
Цель: научиться описывать обработчики событий JavaScript.
Теоретические сведения
События - это функции, которые могут быть привязаны к элементам HTML страниц.
Код событий выполнится только после того, как произойдет их активирующее действие. Разные типы событий имеют разные активирующие действия.
Событие onсlick
Код события onclick будет выполнен после того, как пользователь щелкнет на элемент, к которому привязано это событие.
Пример
functionmessageShow(){
document.write('Вы нажали на кнопку!');
}
Событие onload
Код события onload будет выполнен при полной загрузке страницы.
Пример
functionmessageShow(){
alert('Страница была загружена!');
}
События onmouseover и onmouseout
События onmouseover и onmouseout часто используются, чтобы создать "анимированные" кнопки.
Код события onmouseover будет выполнен, когда на элемент, к которому привязано событие, будет наведен курсор мыши.
Код события onmouseout будет выполнен при выведении курсора мыши за пределы элемента.
Пример

Задание.
Занести теоретические сведения в конспект.
Написать код обработчика событий на нажатие кнопки, загрузку страницы и наведение/выведение курсора. Результатом обработки первых двух событий сделать выведение своей фамилии. Результат работы проверить в браузере.
Сделать скриншот кода и результата работы скрипта.
Содержание отчета:
Номер, тема и цель лабораторной работы.
Ход работы.
Вывод.
Лабораторная работа №11
Тема: Объекты JavaScript
Теоретические сведения
Объектно-ориентированное программирование - это стиль программирования, ориентированный на работу с объектами.
Объекты могут иметь свойства и методы.
Свойства объектов в JavaScript
Свойства являются значениями, которые связаны с объектами.
При обращении к свойству объекта необходимо отделить его точкой от названия объекта (объект.свойство). Если название свойства состоит из двух (или более) слов необходимо удалить пробел между ними и начать второе слово с заглавной буквы или заменить этот пробел на _ (знак нижнего подчеркивания).

Методы объектов в JavaScript
Методы являются действиями, которые могут быть совершены над объектами.
При обращении к методу объекта необходимо отделить его точкой от названия объекта и добавить после него круглые скобки, например объект.метод(). Если название метода состоит из двух (или более слов) необходимо удалить пробел между ними и начать второе слово с заглавной буквы, или заменить этот пробел на _ (знак нижнего подчеркивания).
Объекты в JavaScript также могут иметь методы, например объект массив имеет метод reverse() позволяющий изменять порядок следования элементов в массиве на противоположный:

Задание.
Занести теоретические сведения в конспект.
Написать код программы, используя приведенные примеры (использовать два примера!), вывести на экран свою фамилию.
Сделать скриншоты кода и результата – поместить в отчет.
Лабораторная работа №12
Тема: Объект Math и Объект String
Теоретические сведения
Используя свойства и методы объекта Math, Вы можете выполнять в JavaScript различные математические операции.
Свойства объекта Math
Свойства данного объекта содержат значения часто используемых математических констант:
Пример 1

Методы объекта Math
С помощью методов объекта Вы можете производить над числами различные математические операции.
Метод round() позволяет округлять числа до ближайшего целого.
Пример 2
//Округлим число 25.34 до ближайшего целого и выведем значение на страницу
document.write(Math.round(25.34)+'<br />');
//Округлим число 25.88 до ближайшего целого и выведем значение на страницу
document.write(Math.round(25.88));
Метода random() позволяет генерировать случайные числа между 0 и 1.
Пример 3
//Сгенерируем случайное число между 0 и 1 и выведем его на страницу
document.write(Math.random()+'<br />');
/* Вы также можете генерировать случайные числа в произвольном промежутке. Например для
того, чтобы сгенерировать случайное число в промежутке от 0 до 100 нужно домножить
число, полученное с помощью метода random(), на 100 и затем округлить его до
ближайшегоцелого */
document.write(Math.round(Math.random()*100));
Метод pow(число,степень) позволяет возводить числа в степень.
Пример 4
//Возведем 3 в 3 степень
document.write(Math.pow(3,3)+'<br />');
//Возведем 4 в 0.5 степень (найдем корень из 4)
document.write(Math.pow(4,0.5)+'<br />');
//Возведем 5 в -1 степень
document.write(Math.pow(5,-1));
Методы max (максимум) и min (минимум) выбирают максимальные и минимальные числа из предложенных.
Пример 5
//Выберем из чисел 10 68 35 12 44 максимальное и выведем его на страницу
document.write(Math.max(10,68,35,12,44)+'<br />');
//Выберем из чисел 10 68 35 12 44 минимальное и выведем его на страницу
document.write(Math.min(10,68,35,12,44));
Объект String (строковый объект) используется для хранения и обработки текстовой информации.
Синтаксис:
// Создание объекта String (первый вариант)
x=newString("произвольный текст");
// Создание объекта String (второй вариант)
x="произвольный текст";
// или
x='произвольный текст';
Свойства объекта String
С помощью свойства length Вы можете узнать длину строки.
Пример 6
//Создадим строку
var x=newString('Это строка произвольного текста.');
// Узнаем длину строки (количество символов учитывая пробелы) и выведем ее на страницу
document.write(x.length);
Методы объекта String
С помощью метода toUpperCase() Вы можете перевести все символы текста в верхний регистр, а с помощью toLowerCase() - в нижний.
Пример 7
//Создадим строку
x='ЭтОСтрОка';
//Выведем строку без изменений
document.write(x +'<br />');
//Переведем все буквы строки x в верхний регистр и выведем результат на страницу
document.write(x.toUpperCase()+'<br />');
//Переведем все буквы строки x в нижний регистр и выведем результат на страницу
document.write(x.toLowerCase()+'<br />')
С помощью метода concat() Вы можете объединить две и более строки и вывести результат на страницу.
Пример 8
//Создадим несколько строк
x='Эти строки текста ';
y='будут объединены ';
z='с помощью метода <b>concat</b>.';
//Объединим эти строки и выведем результат на страницу
document.write(x.concat(y,z));
С помощью метода replace() Вы можете заменить одно произвольное слово в строке на другое.
Пример 9
//Создаем строку
x='<b>HTML</b> - это скриптовый объектно ориентированный язык программирования. ';
//Заменим слово 'HTML' на 'JavaScript' в строке x и выведем результат на страницу
document.write(x.replace('HTML','JavaScript'));
Задание.
Занести теоретические сведения в конспект.
Написать код программы, используя приведенные примеры (выполнить 9 примеров!), вывести на экран свою фамилию.
Сделать скриншоты кода и результата – поместить в отчет.

Лабораторная работа №13
Объект Array и объект Date
Теоретические сведения
Массивы представляют собой контейнеры, в которых может быть сохранено неограниченное количество переменных.
Каждому значению, которое заносится в массив присваивается уникальный идентификатор, по которому Вы затем сможете обращаться к данному элементу внутри массива.
Создание массивов
Массивы можно создавать тремя разными способами:
Первый способ:
item = new Array();
item[0] = "Автомобиль";
item[1] = "Микроволновая печь";
item[2] = "Стиральная машина";
item[3] = "Пылесос";
Второй способ:
var item = new Array("Автомобиль", "Микроволновая печь", "Стиральная машина",
"Пылесос");
Третий способ:
var item = ["Автомобиль", "Микроволновая печь", "Стиральная машина", "Пылесос"];
Доступ к переменным в массиве
Для того, чтобы обратиться к элементу, сохраненному в массиве необходимо указать имя массива и индекс желаемого элемента в квадратных скобках (массив[индекс]).
Обратите внимание: нумерация индексов в массивах начинается не с 1, а с 0.
Пример 1
//Создадим массив
var item = ["Автомобиль","Микроволновая печь","Стиральная машина", "Пылесос"];
//Выведем значение первого элемента массива
document.write(item[0]+'<br />');
//Выведем значение третьего элемента массива
document.write(item[2]+'<br />');
Значения элементов в массивах могут быть изменены.
Пример 2
//Создадим массив
var item = ["Автомобиль", "Микроволновая печь", "Стиральная машина", "Пылесос"];
//Изменим значение третьего элемента
item[2] = "Снегоход";
//Выведем измененное значение
document.write(item[2]);
Свойства объекта Array
С помощью свойства length Вы можете узнать количество элементов в массиве.
Пример 3
//Создадим массив
var item = ["Автомобиль", "Микроволновая печь", "Стиральная машина", "Пылесос"];
//Выведем количество элементов массива
document.write(item.length);

Объект Date
Объект Date позволяет производить различные операции с датой и временем.
Синтаксис:
//Определим текущую дату и запишем ее в переменную x
x=new Date();
//При выводе на страницу текущая дата (24 Декабря 2010) будет выглядеть
//следующим образом:
Fri Dec 24 2010 22:15:31 GMT+0600
/* Fri = Friday (Пятница) - обозначает текущий день недели
Dec = December (Декабрь) - обозначает текущий месяц
24 - обозначает день месяца
2010 - обозначает год
22:15:31 - текущее время
GMT+0600 - смещение времени от Гринвича +6 часов
*/
Помимо определения текущей даты Вы можете определить произвольную дату.
Синтаксис:
// Первый способ:
x=new Date(год, месяц, день, час, минута, секунда, миллисекунда);
// 20 Декабря 1999 этим способом можно определить так (нумерация месяцев начинается с 0):
d=new Date(1999,11,20);
// Второй способ:
x=new Date(миллисекунды);
// Задать 20 Декабря 1999 этим способом можно так:
d=new Date(945624000000);
миллисекунды количество прошедших с 00:00:00 1 Января 1970 миллисекунд (1000 миллисекунд = 1 секунда) до задаваемой даты.
После того, как объект будет создан Вы можете с помощью доступных методов производить над ним различные операции.
Методы объекта Date
Метод getDate() позволяет извлечь из объекта день месяца.
Пример 4
//Определим текущую дату и запишем результат в x
x=new Date();
//Извлечем день месяца из объекта x и выведем результат на страницу
document.write(x.getDate());
Задание.
Занести теоретические сведения в конспект.
Написать код программы, используя приведенные примеры (выполнить 4 примера!), вывести на экран свою фамилию.
Сделать скриншоты кода и результата – поместить в отчет.

Лабораторная работа № 14
Тема: «Итоговая работа. Разработка веб-сайта»
Разработать веб-сайт определенной тематики, отвечающий следующим требованиям:
Количество страниц – не менее 5, страницы связанны ссылками, каждая страница должна отвечать заданной тематике и быть заполнена информацией или элементами.
Текст на страницах – отформатированный, задан размер, цвет текста, выравнивание.
Задать фон для страниц.
Рисунок с заданными размерами и всплывающим описанием.
Горизонтальная линия
Бегущая строка.
Упорядоченный и неупорядоченный список.
Сложная таблица с объединением ячеек.
Формы – текстовое поле, кнопка, элементы выбора.
Использовать стили различными способами - внешний файл и внедренные стили.
Использовать оформление текста средствами css.
Использовать различные варианты оформления границ элементов.
Активировать различные события, привязанные к элементам страниц.
Задание.
Занести теоретические сведения в конспект.
Сделать скриншоты кода и результата – поместить в отчет.