Міністерство освіти і науки україни
ОДЕСЬКА НАЦІОНАЛЬНА АКАДЕМІЯ
Х
АРЧОВИХ
ТЕХНОЛОГІЙ
Швець Н.В., Мітрофанова Н.Ф.
Програмування для internet Посібник до виконання лабораторних робіт
Одеса 2014
Швець Н.В., Мітрофанова Н.Ф. Програмування для Internet: Посібник до виконання лабораторних робіт. Одеська національна академія харчових технологій, 2013. – 96 с.
Посібник розроблено згідно з робочою навчальною програмою дисципліни «Програмування для Internet» для студентів які навчаються за напрямом підготовки 6.050101 «Комп’ютерні науки».
Призначено для виконання лабораторних робіт студентами по закріпленню окремих тем дисципліни. Наведено перелік теоретичних питань для поглибленого опрацювання з посиланнями на літературу, яка є в бібліотеці ОНАХТ.
Рецензент:
Розглянуто та рекомендовано до видання на засіданні кафедри інформаційних технологій та кібербезпеки .
Протокол № від 2014 р.
Розглянуто та рекомендовано до видання на засіданні науково-методичної комісії з напряму підготовки 6.050101 «Комп’ютерні науки»
Протокол № від 2014 р.
ОНАХТ, 2014,
Зміст
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 1
ПРОГРАМУВАННЯ ДЛЯ INTERNET 1
Посібник до виконання лабораторних робіт 1
Лабораторная работа №1 7
Задание: 7
Краткие теоретические сведения 7
Структура документа 7
Структура тела документа 8
Макет страницы 10
Строение тела документа 12
Отображение документа в окне браузера 15
Контрольные вопросы и задания: 16
Задание для самостоятельной работы: 16
Лабораторная работа №2 17
Задание: 17
Краткие теоретические сведения 17
Стили и стуктура 17
Блочные элементы 17
Основы применения стилей 18
Строчные стили 18
Встроенные стили 19
Внешние файлы 19
Ссылки 20
Ссылка по любому атрибуту 21
Определение ссылок по псевдоклассам 21
Новые селекторы 22
Контрольные вопросы и задания: 22
Лабораторная работа №3 22
Задание: Применить к шаблону документа, созданного в лабораторной работе №1, традиционную блочную модель. 23
Краткие теоретические сведения 23
Универсальный селектор * 26
Новая иерархия заголовков 26
Объявление новых элементов HTML5 27
Выравнивание тела документа по центру 27
Создание главного блока 27
Заголовок 28
Навигационная полоса 28
Раздел и боковая врезка 29
Нижний колонтитул 29
Контрольные вопросы и задания: 30
Лабораторная работа №4 30
Задание: 30
1. Продемонстрировать результат работы свойств гибкой блочной модели: 30
Краткие теоретические сведения 31
Принцип работы гибкой блочной модели 31
Свойство display 31
Свойство box-orient 31
Свойство box-direction 32
Свойство box-ordinal-group 32
Сойство box-pack 34
Свойство box-flex 34
Свойство box-align 37
Гибкая блочная модель 38
Контрольные вопросы и задания: 43
Лабораторная работа №5 44
Задание: 44
1. Продемонстрировать результат работы новых свойств СCS3: 44
Краткие теоретические сведения 44
Шаблон 44
Свойство border-radius 45
Свойство box-shadow 47
box-shadow: rgb(150, 150, 150) 5px 5px 10px 20px; 47
Свойство text-shadow 48
Свойство @font-face 48
Линейный градиент 49
Радиальный градиент 50
RGBA 50
HSLA 50
Свойство outline 51
Свойство border-image 51
Свойства transform и transition 52
Функция transform: rotate 54
Функция transform: skew 54
Функция transform: translate 54
Одновременное использование всех видов трансформации 55
Динамические трансформации 55
Переходы 56
Лабораторная работа №6 56
Задание: На примере разрабатываемого веб-сайта продемонстрировать новые подходы к обращению к элементам документа из сценария JavaScript и новый подход к регистрации обработчика событий. 57
Краткие теоретические сведения: 57
Внедрение JavaScript 57
Обработчики событий 61
Контрольные вопросы и задания: 62
Лабораторная работа №7 62
Задание: запрограммировать собственные видео- и аудиопроигрыватели, пользуясь возможностями новых методов, свойств и событий, появившихся в спецификации HTML5 и добавить его в разрабатываемый веб-сайт. 63
Краткие теоретические сведения: 63
Элемент <video> 63
Атрибуты элемента <video> 64
Программирование видеопроигрывателя 65
Дизайн 65
Код 67
Методы 68
Свойства 68
Выполнение кода 69
Воспроизведение аудио с помощью HTML5 70
Элемент <audio> 71
Программирование видеопроигрывателя 71
Контрольные вопросы и задания: 74
Лабораторная работа №8 74
Задание: использовать новые возможности для создания форм, появившиеся в спецификации HTML5 и добавить их в разрабатываемый веб-сайт. 74
Краткие теоретические сведения: 74
Элемент <form> 74
Элемент <input> 75
Тип email 75
Тип search 76
Тип URL 76
Тип tel 76
Тип number 76
Тип range 76
Тип date 76
Тип week 76
Тип month 77
Тип time 77
Тип datetime 77
Тип datetime-local 77
Тип color 77
Новые атрибуты 77
Атрибут placeholde 77
Обычно используется для элементов ввода типа search, но также допустим и для текстовых полей. Этот атрибут представляет короткую подсказку – слово или фразу, помогающие пользователю правильно ввести данные. Значение данного атрибута визуализируется браузером внутри поля и исчезает, когда пользователь переводит фокус ввода на соответствующий элемент. 77
Атрибут required 77
Атрибут multiple 77
Атрибут autofocus 78
Атрибут pattern 78
Атрибут form 78
Новые элементы форм 78
Элиент <datalist> 78
Элемент <progress> 79
Элемент <meter> 79
Элемент <output> 79
Контрольные вопросы и задания: 79
Лабораторная работа №9 79
Краткие теоретические сведения: 80
Лабораторная работа №10 82
Задание: 82
Краткие теоретические сведения: 82
Лабораторная работа №11 84
Цель работы: изучение операций и операторов языка сценариев PHP. 84
Задание: Разработать приложение вида: 84
Лабораторная работа №12 85
Задание: 85
Краткие теоретические сведения: 85
Лабораторная работа №12 86
Задание: 86
Краткие теоретические сведения: 86
Лабораторная работа №13 87
Задание: Выполнить считывание данных из файла в массив и представить данные в виде таблицы. 87
Доступ к содержимому массива 88
Использование циклов для доступа к массиву 88
Массивы с различными индексами 88
Операции для работы с массивами 89
Загрузка массивов из файлов 90
ПРОГРАМУВАННЯ ДЛЯ INTERNET 93
Посібник до виконання лабораторних робіт 93
Лабораторная работа №1