- •Web программирование
- •231000.62 – “Программная инженерия”
- •Содержание
- •Введение
- •Дисциплина web программирование имеет целью обучить студентов разработке web - приложений, дать студентам теоретические знания и практические навыки в проектировании и реализации web-сайтов.
- •1. Протоколы и модели Internet-взаимодействия
- •1.1. Протоколы
- •1.2. Модель клиент-сервер
- •1.3. Формат описания адреса
- •2. Статическое web – программирование
- •2.1. Структура html-документа
- •2.2. Работа с текстом
- •2.3. Работа с таблицами
- •2.4. Работа с формами
- •2.5. Работа с фреймами
- •3. Каскадные таблицы стилей (css)
- •3.1. Синтаксис css
- •3.2. Использование css
- •3.3. Свойства css
- •4. Язык xml
- •4.1. Структура xml-документа
- •4.2. Правила создания xml-документа
- •4.3. Конструкции языка xml
- •4.3.1. Элементы данных
- •4.3.2. Комментарии
- •4.3.3. Атрибуты
- •4.3.4. Cпециальные символы
- •4.3.5. Директивы анализатора
- •4.3.6. Cdata
- •5. JavaScript сценарии
- •5.1. Клиентские и серверные сценарии
- •5.2. Операторы и функции JavaScript
- •5.3. Встроенные объекты JavaScript
- •5.4. Динамический html
- •5.5. Ajax технология
- •6. Работа с субд MySql
- •6.1. Особенности
- •6.2. Основные команды
- •7. Php. Динамическое web-программирование
- •7.1. Особенности
- •7.2. Php и объектно-ориентированное программирование
- •8. Проектирование полнофункциональных web-сайтов
- •8.1. Виды сайтов
- •8.2. Этапы проектирования web-сайтов
- •9. Задания для выполнения лабораторных работ
- •Последовательность выполнения задания
- •9.2. Задания для выполнения лабораторной работы №2 «Разработка сайта, содержащего карту-изображение с заданными активными зонами»
- •Варианты
- •Последовательность выполнения задания
- •9.3. Задания для выполнения лабораторной работы №3 «Разработка сайта, содержащего таблицы»
- •Варианты
- •9.4. Задания для выполнения лабораторной работы №4 «Разработка сайта “Электронный тест проверки знаний студентов изучаемых дисциплин”»
- •Варианты
- •Последовательность выполнения задания
- •9.5. Задания для выполнения лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •Варианты
- •Последовательность выполнения задания
- •9.6. Задания для выполнения лабораторной работы №6 «JavaScript. Горизонтальное и вертикальное меню»
- •Варианты
- •Последовательность выполнения задания
- •2.1 Горизонтальное меню
- •2.2 Вертикальное выпадающее меню
- •2.3 Вертикальное раскрывающееся меню
- •9.7. Задания для выполнения лабораторной работы №7
- •2. Ход работы
- •9.8. Задания для выполнения лабораторной работы №8 «Динамическая поддержка выбора значений из предлагаемого списка»
- •Варианты
- •Последовательность выполнения задания
- •9.9. Задания для выполнения лабораторной работы№9 «MySql. Проектирование базы данных и обеспечение прав доступа»
- •Варианты
- •Последовательность выполнения задания
- •9.10. Задания для выполнения лабораторной работы№10 «Разработка интернет-магазина»
- •Варианты
- •Последовательность выполнения задания
- •10. Контрольная работа
- •10.1. Назначение, цели и задачи контрольной работы
- •10.2. Требования к контрольной работе
- •10.3. Варианты заданий курсовой работы
- •11. Пример программы «Создание динамического эффекта» к выполнению лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •11.1. Плавное появление и исчезновение текста
- •11.2. Текст, движущийся на наблюдателя
- •11.3. Создание бегущих строк
- •11.4. Волнообразнодвижущийся текст
- •10.5. Текст, прилетающий по частям
- •10.6. Имитация движения текста по кругу в 3 d пространстве
- •10.7. Движение фонового рисунка страницы («летящие звезды», «эффект фейерверка», «падающий снег», «часы со стрелками»)
- •Заключение
- •Список литературных первоисточников
- •231000.62 – «Программная инженерия»
2.3. Работа с таблицами
Парный тег <TABLE> и </TABLE> используется для описания таблиц. Ячейки таблиц в языкеHTMLмогут содержать любыеHTML-элементы: заголовки, списки, текстовые абзацы, графику и элементы форм.
Тег <TABLE> имеет атрибуты:
align="left|center|right" – определяет положение подписи таблицы;
bgcolor="Цвет" – задает фоновый цвет;
border="Толщина границы в пикселах" – определяет вид границы таблицы;
cellpadding="Расстояние между содержимым ячейки и ее краев" – определяет расстояние от границ ячейки до ее содержимого в пикселах;
cellspacing="Расстояние между ячейками таблицы" – определяет расстояние между ячейками в пикселах;
width="Ширина" – определяет ширину таблицы.
Для создания строк и столбцов таблицы служат парные теги <TR> и </TR>, <COL> и </COL>. Для создания ячейки таблицы служит парный тег <TD> и </TD>. Для создания заголовка таблицы служит парный тег <TH> и </TH>. Для группирования элементов служат теги <COLGROUP>, <TBODY> и <TFOOT>. В листинге 2.2 приведен пример создания таблицы.
Листинг 2.2 Создание таблицы из двух строк и семи столбцов, в которой надписи центрированы.
<HTML><HEAD><TITLE> Таблица из двух строк и семи столбцов </TITLE>
</HEAD>
<BODY>
<H3> Таблица из двух строк и семи столбцов </H3>
<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=”60%” BORDER=4>
<TR ALIGN=CENTER>
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a12
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a14
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a16
<TH BGCOLOR=BLACK></TR>
<TR ALIGN=CENTER>
<TH BGCOLOR=WHITE>a21
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a23
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a25
<TH BGCOLOR=BLACK>
<TH BGCOLOR=WHITE>a27</TR>
<TH BGCOLOR=BLACK></TR>
</TABLE></BODY></HTML> /4/
2.4. Работа с формами
Формы представляют собой важные элементы HTML-страниц, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может посылать комментарии по поводу посещения определенного узла, пересылать запросы и регистрироваться. Форма создается при помощи различных тегов и атрибутов, заключенных между открывающим и закрывающим дескрипторами <FORM> и </FORM>. Атрибуты тега <FORM>:
NAME– определяет имя формы;
ACTION– задаетURL-адрес программы;
METHOD– определяет способ отправки параметров формы;
TARGET– определяет окно, в которое возвращается результат обработки отправленной формы.
В листинге 2.3 приведен пример создания формы.
Листинг 2.3 Создание веб-страницы, содержащей форму.
<HTML><HEAD><TITLE> Формы </TITLE>
</HEAD>
<BODY><FORM>
<CENTER><H3> Элементарная форма </H3>
ПЕРВОЕ ПОЛЕ <INPUTNAME=”ПЕРВОЕ ПОЛЕ”SIZE=”40”><BR>
<INPUTNAME=”ВТОРОЕ ПОЛЕ”SIZE=”60”>ВТОРОЕ ПОЛЕ<BR>
</CENTER></FORM></BODY></HTML> /4/.
2.5. Работа с фреймами
Фреймы позволяют разбивать веб-страницы на подокна (фреймы). Фрейм может иметь полосы прокрутки и функционировать независимо от других фреймов или управлять их содержимым. Фреймы могут значительно улучшить внешний вид веб-страниц и повысить их функциональность.
Тег <FRAMESET> описывает все фреймы, на которые делится экран. Экран можно разделить на несколько вертикальных или несколько горизонтальных фреймов. Для описания каждого фрейма в отдельности служит тег <FRAME>.
Тег<FRAMESET> имеет атрибуты:
COLS– задает количество и размеры столбцов в создаваемом наборе фреймов;
ROWS– задает количество и размеры строк в создаваемом наборе фреймов в пикселах, в процентах или связанных масштабных коэффициентах;
BORDER– задает толщину обрамления в пикселах для всех фреймов, входящих в данный набор фреймов;
FRAMEBORDER– позволяет отменить вывод обрамления у фреймов независимо от значения атрибутаBORDER.
В листинге 2.4 приведен пример создания фрейма.
Листинг 2.4 Создание веб-страницы, содержащей два горизонтальных фрейма.
<HTML><HEAD><TITLE> Два горизонтальных фрейма </TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=”5” ROWS=”480, 200”>
<FRAME SRC=”1.htm”>
<FRAME SRC=”2.htm”>
</FRAMESET>
</HTML>/4/