Міністерство освіти і науки україни

ОДЕСЬКА НАЦІОНАЛЬНА АКАДЕМІЯ

Х АРЧОВИХ ТЕХНОЛОГІЙ

Швець Н.В., Мітрофанова Н.Ф.

Програмування для internet Конспект лекцій

Одеса 2014

Швець Н.В., Мітрофанова Н.Ф. Програмування для Internet: Конспект лекцій. Одеська національна академія харчових технологій, 2014. – 144 с.

Посібник розроблено згідно з робочою навчальною програмою дисципліни «Програмування для Internet» для студентів, які навчаються за напрямом підготовки 6.050101 «Комп’ютерні науки».

В посібнику наведено перелік теоретичних питань для поглибленого опрацювання матеріалу курсу.

Рецензент:

Розглянуто та рекомендовано до видання на засіданні кафедри Інформаційних технологій та кібербезпеки .

Протокол № від 2014 р.

Розглянуто та рекомендовано до видання на засіданні науково-методичної комісії з напряму підготовки 6.050101 «Комп’ютерні науки»

Протокол № від 2014 р.

ОНАХТ, 2014

Зміст

Верстка 4

Документы HTML5 39

Стили CSS 52

Блочные модели 60

Принцип работы гибкой блочной модели 71

Свойства CSS3 90

JavaScript 108

Воспроизведение видеои аудио с помощью HTML5 117

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

Верстка

Любую технологию нужно использовать по своему прямому назначению. Язык HTML – для создания каркаса веб-страницы, язык CSS – для визуализации, а JavaScript – для добавления интерактивности.

Верстка – это создание структуры HTML-документа таким образом, чтобы во всех браузерах веб-страница выглядела точно так же, как и на предоставленном дизайнером макете.

Макет – разработанный в формате PSD вид будущей HTML-страницы, определяющий расположение элементов и изображения, которые должны на ней отображаться. Реже макеты создают в векторных форматах AI и CDR. Еще реже в качестве макета выступает JPG-картинка или PDF-документ.

Как правило, веб-страницы создают в одном из популярных браузеров, но затем нужно проверять их корректное отображение во всех остальных браузерах. Но бывает так, что заказчики просят проверять корректное отбражение веб-страницы во всех популярных браузерах для всех операционных систем. В этом случае удобно воспользоваться специальными онлайн-сервисами, позволяющими узнать, как выглядит веб-страница в различных версиях многих браузеров для разных операционных систем. Примером такого сервиса является сайт http://browsershots.org. Помимо всего прочего перед созданием скриншотов он позволяет выбрать разрешение экрана, глубину цвета, использование JavaScript и Flash в браузере.

Удобным для разработки сайтов является браузер Mozilla Firefox по следующим причинам:

• наличие консоли ошибок (Инструменты->консоль ошибок), позволяющей сразу увидеть проблемы в CSS и JavaScript-коде открытой страницы;

• возможность просмотреть исходный код не только всей страницы, но и любой ее части;

• просмотреть список всех изображений, используемых на странице, а также сохранить любое из них (Инструменты-> Информация о странице, вкладка Мультимедиа);

• наличие расширения WebDeveloper.