Методические указания по выполнению лабораторных работ дисциплины «Программирование сайтов и web-дизайн» для специальности 09.02.03 «Программирование в компьютерных системах»


Министерство образования и науки Российской Федерации
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САРАТОВСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ИМЕНИ Н.Г.ЧЕРНЫШЕВСКОГО»
Колледж радиоэлектроники имени П.Н.Яблочкова



УТВЕРЖДАЮ
Зам. директора по УМР
__________ И.Н.Толмачева
«____»__________ 20 г.



Методические указания по выполнению
лабораторных работ


Дисциплина «Программирование сайтов и web-дизайн»
Специальность 09.02.03 «Программирование в компьютерных системах»
Разработал преподаватель М.В. Хамутова

Рассмотрено
на заседании ПК
«___»_____________20 г.
Протокол №__________
Председатель: А.Ю. Будюков
_____________________
Ф.И.О.,подпись


Саратов, 2016г.
Оглавление
13 TOC \o "1-1" \h \z \u 14
13LINK \l "_Toc356321645"14Общие сведения 13 PAGEREF _Toc356321645 \h 1441515
13LINK \l "_Toc356321647"14Глава 1. Язык гипертекстовой разметки HTML. 13 PAGEREF _Toc356321647 \h 1471515
13LINK \l "_Toc356321648"14Лабораторная работа №1 «Основы работы в HTML. Форматирования шрифта и абзаца» 13 PAGEREF _Toc356321648 \h 1471515
13LINK \l "_Toc356321650"14Лабораторная работа № 2 «Создание таблиц» 13 PAGEREF _Toc356321650 \h 14101515
13LINK \l "_Toc356321651"14Лабораторная работа №3 «Вставка в HTML-документ рисунков. Создание закладок и гиперссылок» 13 PAGEREF _Toc356321651 \h 14121515
13LINK \l "_Toc356321652"14Лабораторная работа № 4 «Создание форм в HTML-документе» 13 PAGEREF _Toc356321652 \h 14141515
13LINK \l "_Toc356321654"14Лабораторная работа № 5 «Фреймы» 13 PAGEREF _Toc356321654 \h 14191515
13LINK \l "_Toc356321655"14Глава 2. Каскадные таблицы стилей CSS. 13 PAGEREF _Toc356321655 \h 14221515
13LINK \l "_Toc356321656"14Лабораторная работа № 6 «Создание навигационной карты» 13 PAGEREF _Toc356321656 \h 14221515
13LINK \l "_Toc356321657"14Лабораторная работа №7 «Способы подключений CSS» 13 PAGEREF _Toc356321657 \h 14241515
13LINK \l "_Toc356321658"14Лабораторная работа №8 «Редактирование html-страницы с применением css» 13 PAGEREF _Toc356321658 \h 14281515
13LINK \l "_Toc356321659"14Лабораторная работа №9 «Верстка макетов с помощью CSS» 13 PAGEREF _Toc356321659 \h 14311515
13LINK \l "_Toc356321660"14Глава 3. Язык сценариев JavaScript. 13 PAGEREF _Toc356321660 \h 14351515
13LINK \l "_Toc356321661"14Лабораторная работа №10 «Динамичные эффекты посредством CSS» 13 PAGEREF _Toc356321661 \h 14321515
13LINK \l "_Toc356321662"14Лабораторная работа №11 «Размещение кода JavaScript. Основы JavaScript» 13 PAGEREF _Toc356321662 \h 14361515
13LINK \l "_Toc356321663"14Лабораторная работа №12 «События и Функции в JavaScript» 3915
13LINK \l "_Toc356321664"14Лабораторная работа №13 «Создание сценариев с использованием встроенного объекта Date» 13 PAGEREF _Toc356321664 \h 14421515
13LINK \l "_Toc356321665"14Лабораторная работа № 14 «Массивы» 13 PAGEREF _Toc356321665 \h 14441515
13LINK \l "_Toc356321666"14Лабораторная работа №15 «Встроенный объект String» 13 PAGEREF _Toc356321666 \h 14461515
13LINK \l "_Toc356321667"14Лабораторная работа № 16 «Регулярные выражения» 13 PAGEREF _Toc356321667 \h 14471515
13LINK \l "_Toc356321668"14Глава 4. Основы работы в РНР. 13 PAGEREF _Toc356321668 \h 14501515
13LINK \l "_Toc356321669"14Лабораторная работа № 17 «Проверка заполнения форм» 13 PAGEREF _Toc356321669 \h 14501515
13LINK \l "_Toc356321670"14Лабораторная работа №18 «Работа с файлами в РНР» 13 PAGEREF _Toc356321670 \h 14521515
Лабораторная работа №19 «Сохранение данных из формы в базе данных MySQL»..54

13LINK \l "_Toc356321672"14Список использованной литературы 13 PAGEREF _Toc356321672 \h 14571515
15 Общие сведения
Учебная дисциплина «Программирование сайтов и web-дизайн» является дисциплиной вариативной (профессиональные модули) части участия в интегральной части программных модулей в соответствии с ФГОС и преподается студентам специальности 09.02.03 «Программирование в компьютерных системах».
Содержание методических указаний по выполнению лабораторных работ по данной дисциплине соответствует требованиям Федерального государственного стандарта среднего профессионального образования.
По учебному плану в соответствии с рабочей программой на изучение дисциплины «Программирование сайтов и web-дизайн» студентами очной формы обучения предусмотрено самостоятельных занятий – 77 часов.
При разработке методических указаний к выполнению лабораторных работ по дисциплине из вариативной части учитывались требования регионального рынка труда, а точнее учитывать запросы работодателей. В методических указаниях изложены основы разработки web-приложений с использованием языка гипертекстовой разметки HTML, таблиц стилей CSS, JavaScript и PHP.
Целью методических указаний является приобретение студентами практических знаний в области Web-программирования, изучение технологий НТМL и CSS для разработки Web-приложений и Web-интерфейсов, создание сценариев с помощью JavaScript и РНР.
Задачей методических указаний является приобретение практических навыков применения web-технологий при разработке Интернет приложений.
Функцией методических указаний является практическое освоение современных технологий веб-программирования на стороне клиента и на стороне сервера.
В соответствии с рабочей программой дисциплины «Программирование сайтов и web-дизайн» в результате изучения данной дисциплины студент:
В результате освоения дисциплины обучающийся должен уметь:
использовать современные web-технологии в создании web-сайтов
В результате освоения дисциплины обучающийся должен знать:
принципы взаимодействие сетевых протоколов.
о взаимодействии процессов в архитектуре клиент-сервер
основы web-дизайна
современные языки web-программирования
о состоянии развития современных web-технологий, об их месте и роли в работе компьютерных сетей Internet/Intranet
о проблемах и направлениях развития web-технологий
Методические указания состоят из 19 лабораторных работ, разбитых на 4 главы. Лабораторные работы первой главы формируют практические навыки работы с языком разметки гипертекста HTML: cоздание html-документа, форматирование текста, создание таблиц, гипперсылок, форм и фреймов, добавления изображения в html-документ. В следующий главе формируются навыки добавление стилевых свойств и динамических эффектов к элементам html-документа с помощью CSS. Умение создавать сценарии обработки событий посредством JavaScript формирует глава 3. Основы работы с РНР скриптами, в частности работа с файлами и базами данных изучает глава 4. В совокупности это получение студентами практических навыков работы в области web-технологий на стороне клиента и на стороне сервера.


Глава 1. Язык гипертекстовой разметки HTML.
Лабораторная работа №1 «Основы работы в HTML. Форматирования шрифта и абзаца»
Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Notepad++. Научиться использовать теги форматирования шрифта и абзаца.
Задание 1. Создать HTML-документ.
Указания к выполнению
Создайте папку (в качестве имени папки выберите свою фамилию). Запустить редактор Notepad++. Ввести приведенные ниже стандартные теги разметки страницы теги
Мой первый HTML-документ
ПРИВЕТ МИР!!!
Сохранить документ под именем 1.html в созданной вами папке. Откройте папку, кликните правой кнопкой мыши по файлу 1.html и выберите команду «Открыть с помощью» и выберите удобный для просмотра браузер. В окне браузера вы можете посмотреть как будет выглядеть ваш файл.
Отредактируйте документ 1.html, кликните правой кнопкой мыши и выберите команду «Открыть с помощью» и выберите программу Блокнот. После слов ПРИВЕТ МИР!!! поставьте тег
(тег перехода на новую строку), и наберите текст «Программирование сайтов и Web-дизайн». Не забывайте сохранять документ и обновлять браузер.
Втег вставить атрибуты TEXT(цвет текста на всейhtml-странице) и BGCOLOR(цвет заливки на всейhtml-странице), и установите любое значения цветов (безопасные коды цветов можно найти в интернете). Поставьте горизонтальную линию в документе с помощью соответствующего тега , где атрибут SIZE определяет толщину линии в пикселях.
Задание 2. Cоздайте заголовки по образцу
Анкета
Петров Владимир Владимирович
17 лет
козерог
студент
люблю рок-музыку
Указания к выполнению
Откройте в Notepad++ файл 1.html и создайте анкету с помощью заголовочных тегов текст , с помощью атрибута ALIGN выравните текст по центру.
Задание 3. Создайте текст на HTML-cтранице по образцу
ПАРУС
Белеет парус одинокой В тумане моря голубом!.. Что ищет он в стране далекой? Что кинул он в краю родном?.. Играют волны ветер свищет, И мачта гнется и скрыпит... Увы! он счастия не ищет, И не от счастия бежит! Под ним струя светлей лазури, Над ним луч солнца золотой... А он, мятежный, просит бури, Как будто в бурях есть покой!
Указания к выполнению
В файле 1.html после анкеты наберите текст стихотворения «Парус» и отформатируйте шрифт текста по образцу. Название стихотворения заголовок 3-го уровня (

), первая строчка стихотворения выделена жирным шрифтом с помощью тегов или ; вторая строчка выделена курсивом с помощью тега ; третья строчка подчеркнута с помощью тега >; четвертая строчка перечеркнута с помощью тега или ; пятая, шестая, седьмая и восьмая строчки выделены с помощью тегов с размерами шрифтов соответственно; девятая строчка выделена с помощью тега ; десятая строчка создана при помощи тега ; одиннадцатая и двенадцатая строчки раскрашены с помощью тегов соответственно. В конце стихотворения добавьте фамилию и инициалы автора стихотворения моноширинным шрифтом(шрифт имитирующий печатную машинку), с помощью контейнеров тегов ,или.
Задание 4. Создание формулу по образцу Sквадрата=a2
Указания к выполнению
Для создания нижнего индекса используйте теги в контейнер заключите индекс, для возведения в степень используйте теги верхнего индекса . Увеличьте шрифт не индексного текста до 5.
Задание 5. Создание абзацев.
Указания к выполнению
Скопируйте любой текст и вставьте в файл 1.html после формулы, отформатируйте абзацы с помощью тега

для выравнивания абзаца используйте атрибут ALIGN=LEFT| CENTER| RIGHT | JUSTIFY.
Задание 6. Создание списков.
Указания к выполнению
В файле 1.html после отредактированного текста создайте списки.
Для создания нумерованного списка используют теги
  1. .
    1. Элемент списка 1

    2. Элемент списка 2

    3. Элемент списка 3

    Список по умолчанию цифровой, но его можно сделать и буквенным c помощью атрибута TYPE .
  2. Элемент списка 1

  3. Элемент списка 2

  4. Элемент списка 3

Для создания маркированного списка используют теги
  • .
      LI>Элемент списка 1
    • Элемент списка 2

    • Элемент списка 3

    Маркеры в списке можно сделать разнообразными c помощью атрибута TYPE=circle|disc|square .
    • Элемент списка 1

    • Элемент списка 2

    • Элемент списка 3

    Для создания списков определений используют три тэга:
    - начало/конец списка.
    - начало/конец конкретного термина.
    - начало/конец поясняющей статьи термина.
    ГРИБЫ

    ОПЯТА

    ГРУЗДИ

    Самостоятельная работа.
    Создайте формулу соляной кислоты и общий вид квадратного уравнения.
    Создайте смешанный список по образцу
    Я знаю как оформлять:
    Шрифты
    Размер
    Цвет
    Гарнитуру
    Индексы
    Заголовки
    От 1-го до 6-го уровня
    Абзацы
    Выравнивание
    Разрыв строк внутри абзаца
    С использованием переформатирования.
    Составить отчет о выполнении
    Задание 7. Создание аббревиатуры
    Указания к выполнению
    Для создания аббревиатуры можно использовать либо контейнер тегов, либо , разница между ними лишь в том что это элементы только спецификацииHTML4.01, а Теги спецификацийHTML4.01/5.0 и расшифровать аббревиатуры можно с помощью атрибутаTITLe, например:
    HTML

    HTML.

    Лабораторная работа № 2 «Создание таблиц»
    Цель работы: Изучение тегов , будем выводить текущий час, в ячейку - текущую минуту и наконец в ячейку - текущую секунду.
    Теперь создадим функцию time(), выводящую системные часы в html-документ. Т.к. время будет меняться каждую секунду, необходимо чтобы функция обновляла время на странице каждую секунду. Для этого используем глобальный метод setTimeout('time()',1000), который будет вызывать функцию time() каждую секунду.

    functiontime()
    { vard=newDate(); /*Создание объекта d с текущим датой и временем */
    varh=d.getHours(); /*выделяет текущий час*/
    varm=d.getMinutes();/*выделяет текущую минуту*/
    vars=d.getSeconds();/*выделяет текущую секунду*/
    if (h<10) document.getElementById('h').innerHTML='0'+h
    else document.getElementById('h').innerHTML=h;
    if (m<10) document.getElementById('m').innerHTML='0'+m
    else document.getElementById('m').innerHTML=m;
    if (s<10) document.getElementById('s').innerHTML='0'+s
    else document.getElementById('s').innerHTML=s;
    setTimeout('time()',1000)}
    Чтобы вывести значение текущего часа в ячейку, используем свойство innerHTML, но для начала получим доступ к ячейке с помощью ее id, т.е. используем следующую конструкцию
    document.getElementById('h').innerHTML=h;
    Для того чтобы время выводилось в формате ЧЧ:ММ:СС, в случае когда часы(минуты, секунды) меньше десяти добавим впереди нуль с помощью следующей конструкции
    document.getElementById('h').innerHTML='0'+h.
    Теперь для того чтобы функция time() появилась(и вызывала сама себя каждую секунду) в html-документе используем обработчик событий, помещенный в тег
    Задание 2. Определить количество дней до вашего дня рождения и на какой день недели он выпадает.
    Указания к выполнению
    Допустим, вы родились 25.10.1990. Для того, что бы определить, сколько дней осталось до вашего дня рождения, потребуется создать объект класса Date, и применить к нему либо метод getTime либо метод [ Cкачайте файл, чтобы посмотреть ссылку ]. Метод getTime() без значений возвратит кол-во миллисекунд, прошедших с 1 января 1970 года по текущее время, а getTime(текущий год,10,25) возвратит кол-во миллисекунд, прошедших с 1 января 1970 года по 25 октября текущего года. Если взять разницу между этими двумя значениями метода getTime и разделить на количество миллисекунд в сутках(24*60*60*1000) то вы получите количество дней до вашего дня рождения. Округлите результат с помощью метода toFixed(0).
    function birth()
    {var date=new Date();
    var date1=new Date(2013,10,5);
    var dni=(date1.getTime(2013,10,5)-date.getTime())/(24*60*60*1000)
    document.write(dni.toFixed(0));}
    Для того чтобы определить на какой день недели выпадает день рождения нужно взять метод getDay с значением даты дня рождения.
    var date=new Date();
    var den=date.getDay(2013,10,5);
    Т.к. вы получите результат в виде числа из диапазона [0;6], вам необходимо использовать оператор switch чтобы вывести результат в формате Понедельник, Вторник, и т.д. (! Не забудьте что по международным стандартам неделя начинается с Воскресенья).
    Самостоятельная работа. Определите свой возраст в днях.
    Составить отчет о выполнении.

    Лабораторная работа №14 «Массивы»
    Цель работы: Формирование навыков использовании массивов при разработки сайтов.
    Задание 1. Создать массив из изображений, которые можно посмотреть посредством перекликивания мышью.
    Указания к выполнению
    Создайте новый html-документ js4.html, добавьте в него стандартные теги. Скачайте восемь изображений из Интернета и сохраните их в свою папку как 0.jpg, 1.jpg, , 7.jpg. Создайте изображения

    Функцию kartinka() нужно создать на отдельном файле 2.js и подключим его к файлу js4.html с помощью тега
    Самостоятельная работа. Дана строка со словами, разделенными пробелом, найти самое длинное слово в строке.
    Составить отчет о выполнении.

    Лабораторная работа №16 «Регулярные выражения»
    Цель работы: Формирование навыков создания регулярных выражений и использование методов их обработки на конкретных задачах.
    Задание 1. Проверка заполнения формы.
    Указания к выполнению
    Создайте новый html-документ js6.html, добавьте в него стандартные теги. Для начала создайте форму с полями для ввода имени, фамилии, телефона и электронного адреса.


    , и их атрибутов приобретение умения задания таблицы, ее размера, шрифта записей в ячейках таблицы, расположения и вида таблицы.
    Задание 1. Создание таблицы.
    Указания к выполнению
    Откройте Notepad++ и наберите следующий текст

    таблицав HTML

    Таблица № 1


    Для создания таблицы используется тег , атрибуты данного тега определяют:
    align- выравнивание таблицы
    background- Задает фоновый рисунок в таблице
    bgcolor - Цвет фона таблицы
    border - Толщина рамки в пикселях
    bordercolor - Цвет рамки
    cellpadding - Отступ от рамки до содержимого ячейки
    cellspacing - Расстояние между ячейками
    cols - Число колонок в таблице
    frame - Сообщает браузеру, как отображать границы вокруг таблицы
    height - Высота таблицы
    rules - Сообщает браузеру, где отображать границы между ячейками
    summary - Краткое описание таблицы
    width - Ширина таблицы

    Теги определяет верхнюю часть таблицы. Теги определяет табличный ряд. Тегиопределяют заголовок таблицы. Тегиопределяют ячейки таблицы. Теги определяют тело таблицы

    должно соответствовать количеству ячеек с данными в таблице, а количество строк равно количеству тегов . Содержимое ячеек заключено в тегах.
    ТАБЛИЦА № 1
    ТАБЛИЦА ИСТИННОСТИ

    А
    В
    A and B
    A or B
    not A
    not B

    0
    0
    0
    0
    1
    1

    0
    1
    0
    1
    1
    0

    1
    0
    0
    1
    0
    1

    1
    1
    1
    1
    0
    0

    Задание 2. Создать таблицу по образцу
    ТАБЛИЦА № 2
    Густонаселенные города

    Город
    Население
    Страна
    Координаты

    Буэнос-Айрес
    12 955 300
    Аргентина
    34° 37' ю.ш. 58° 22' з.д.

    Бомбей
    12 147 100
    Индия
    18° 58' с.ш. 72° 49' в.д.

    Дели
    10 009 200

    28° 40' с.ш. 77° 13' в.д.

    Сеул
    11 153 200
    Корея Южная
    37° 34' с.ш. 126° 59' в.д.

    Карачи
    10 272 500
    Пакистан
    24° 52' с.ш. 67° 1' в.д.

    Манила
    10 133 200
    Филипинны
    14° 37' с.ш. 120° 58' в.д.

    Сан-Паулу
    10 057 700
    Бразилия
    23° 32' ю.ш. 46° 38' з.д.

    Рио-де-Жанейро
    6 029 300

    22° 55' ю.ш. 43° 12' з.д.

    Указания к выполнению
    Откройте файл 2. html в Notepad++ , создайте таблицу № 2 из девяти строчек и четырех столбцов. Обратите внимание, что в 3-м столбце третья и четвертая строчки объединены в одну ячейку. Объединение ячеек производится с помощью атрибутов ROWSPAN и COLSPAN тегов . В конкретном случае объединяются две строки, поэтому мы используем атрибут .
    Самостоятельная работа. Создайте таблицу вашего расписания на неделю.
    Составить отчет о выполнении.

    Лабораторная работа №3 «Вставка в HTML-документ рисунков. Создание закладок и гиперссылок»
    Цель работы: Научиться выполнять вставку рисунков в HTML-документ. Научиться создавать закладки и гиперссылки
    Задание 1. Вставить рисунок в HTML-документ
    Указания к выполнению
    Скопировать из какой-либо папки или скачать с Интернета в личную папку три графических файла. Откройте Блокнот и наберите стандартные теги рисунки и ссылки вHTMLсохраните файл как 3.html.
    Для вставки использовать тег IMG, с параметрами WIDTH и HEIGHT для установки размеров рисунка 500 пикселей по горизонтали и по вертикали и основной атрибут src, определяющий какой рисунок будет изображаться вHTML-документе. С помощью параметра ALT создать всплывающую подсказку Рисунок 1, появляющуюся при наведении курсора мыши на рисунок на пример рисунок 1. Посмотрите результат в браузере (Внимание! Не во всех браузерах вид HTML-документа будет выглядеть одинаково).
    Задание 2. Создание гиперссылки.
    Вставка ссылок

    Ссылки на другую страницу

    текст

    Ссылка1


    Ссылка на закладку в другом документе
    текст
    На главную страницу ”

    Ссылка на закладку в том же документе
    текст

    Ссылка2


    Определить закладку
    текст


    Создадим в файле 3.html ссылку на файл 2.html для этого используем тег , т.е. Таблицы, где атрибут HREFуказывает какой HTML-документ будет открываться при нажатии на ссылку. Посмотрите результат в браузере.
    Для создания ссылки на закладку, откройте в блокноте файл 1.html, в начале документа установите закладку на слово «АНКЕТА», т.е. АНКЕТА а затем конце документа создайте ссылку на эту закладку Перейти на Анкету. Посмотрите результат в браузере.
    Для создания ссылки на закладку в др. файле, откройте в блокноте файл 2.html, установите закладку на слово «ТАБЛИЦА № 2», т.е. ТАБЛИЦА № 2, а затем в конце документа 3.html создайте ссылку на эту закладку Перейти на Таблицу №2.
    Создадим ссылку на рисунок. Переименуйте любой из скаченных графических файл в вашей папке в картинка.jpg, а затем в конце файла 3.html создайте ссылку картинка. Посмотрите, как это выглядит в браузере.
    Создание картинки в качестве гиперссылки. Переименуйте последний оставшийся графический файл в папке в ссылку.jpg и откройте в блокноте файл 3.html. Наша картинка будет ссылкой на официальный сайт Рамблер рамблер. Обратите внимание, что тег заключена в контейнере тегов , таким образом, в качестве ссылки может быть и видеофайл и анимация, если вы заключите их в контейнер тегов .
    Самостоятельная работа. Скачайте с Интернета картинку парусника, вставьте картинку в HTML-документ, и сделайте из него ссылку на слово ПАРУС в файле 1.html.
    Лабораторная работа № 4 «Создание форм в HTML-документе»
    Цель работы: формирование умений создание форм с помощью HTML тегов.
    Задание 1. Создание простой формы.
    Для создания html-формы используется тег
    . У него могут быть следующие атрибуты:
    NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм.
    ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером.
    METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST.
    TARGET - определяет окно, в которое возвращается результат обработки отправленной формы.
    Последние три атрибута понадобятся, когда мы будем проходить серверный скрипт РНР.
    Следующим основным компонентом формы является тег , атрибут type которого, определяет поля формы. Помимо этого атрибута у тега , существуют следующие:
    size="25" – длина текстового поля в символах.
    maxlength="30" – максимально допустимое количество вводимых символов.
    value="" – определяет значение, которое будет отправлено на обработку
    Указания к выполнению
    1. Откройте Блокнот и наберите стандартный набор тегов формаHTMLсохраните файл как 4.html. между тегами наберите следующий текст:




    В браузере у вас должно появиться текстовое поле и кнопка, в текстовом поле будет значение по умолчанию Yourname, которое можно удалить и подставить другое значение.
    2. Установим переключательные поля, которые бывают двух видов: флажки и радиокнопки. Чтобы подключить флажок, используем тег со значением атрибутаtype="checkbox", поставьте тег
    после текстового поля () и введите следующий текст:
    ПОЛ:мужжен

    посмотрите результат в браузере. ЗначениеCHECKED устанавливает флажок по умолчанию. Минус этого вида переключателей, в том что вы можете установить флажок сразу на муж.и жен. пол одновременно, чтобы этого избежать используем другой вид переключателей – радиокнопка. После полей с флажками вставьте следующий текст:
    ПОЛ: муж жен

    Обратите внимание, что значение атрибута NAME в обоих полях одинаковое. В браузере вы не сможете установить переключатели сразу на два значения.
    3. Для ввода многострочного текста, нужно использовать теги . После полей с переключателями введите следующий текст:

    ,
    атрибуты COLS и ROWS устанавливают ширину в символах и высоту в строках поля соответственно, maxlength устанавливает максимальную длину строки ввода. Если нужно заблокировать поле или установить режим поля для чтения воспользуйтесь атрибутами disabled и readonly соответственно. Посмотрите, как это выглядит в браузере.
    4. Введем поле для пароля (после многострочного текста), с помощью тега с атрибутом type=password

    ,
    где атрибуты size и maxlenght – ширина поля и максимальное число символов, которое может ввести пользователь соответственно.
    5. Создание кнопки. Кнопку на веб-странице можно создать двумя способами с помощью тега и тегов .
    После поля с паролем введите следующий текст

    - создание обычной кнопки. В кнопку, создаваемую с помощью тегов , можно разместить любой элемент HTML, например картинку, лишь заключив элемент в теги:


    Для отчистки и отправки формы можно использовать и тег и теги с атрибутамиtype=reset иtype=submit соответственно.
    6. Создание списка. Список создается с помощью тегов и , где последние определяют элемент списка.
    После кнопки с рисунком создадим список множественного выбора:

    ВАШЕ ЛЮБИМОЕ ВРЕМЯ ГОДА



    Атрибут MULTIPLE определяет список с множеством значений, атрибут SELECTED определяет значение по умолчанию, а атрибут VALUE определяет значение списка, которое будет отправлено на сервер.
    Раскрывающийся список

    ВАШЕ ЛЮБИМОЕ ВРЕМЯ ГОДА



    Обратите внимание на значение атрибута SIZE=1, если взять больше 1 то список уже не будет раскрывающимся.
    Группирование списка. Объединения значений списка на подгруппы создают теги c атрибутом LABEL.

    ЛЮБИМЫЙМЕСЯЦ



    7. Скрытое поле используется для передачи технической информации на сервер и не отображается на странице.

    В результате вы должны получит следующую форму:

    Задание 2. Редактирование форм.
    Указания к выполнению
    Для того чтобы форма имела четкую структуру, поля этой формы нужно заключить в ячейки таблица. К примеру, форма для регистрации в таблице может выглядеть следующим образом:

    Таблицаистинностиопределяет название таблицы. Тег
    АВA and BA or Bnot Anot B
    0<
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·
    ·Сохраните полученный файл как 2. html в вашей папке, откройте его с помощью браузера, в результате вы должны получить следующую таблицу. Количество тегов
    , если нужно объединить три столбца, то можно использовать следующий атрибут тега . Ячейки, участвующие в объединении на последующих строчках нужно удалить.
    Чтобы поменять цвет и шрифт текста в ячейках нужно теги вставить в контейнер тегов




    логин
    пароль

    В этой таблице 2 столбца и 3 строчки, причем в последней, ячейки объединены в одну в которой находится поле, определяющее кнопку в виде рисунка и по действию аналогичную кнопке type=submitдля отправки формы.

    Такую кнопку можно сделать в Photoshop, с прозрачным фоном и сохранить с расширениемGIF.
    Задание 3. Создание допустимого списка.
    Указания к выполнению
    Список допустимых значений определяют комбинация тегов и.
    После формы регистрации создадим новую форму для голосования, в которой будет два поля: поле допустимых значений и кнопка «Голосовать». Поле допустимых значений определяется стандартным тегом для полей с атрибутом list, значение которого должно совпадать с атрибутом id тега . В контейнер теговзаключаем элементы допустимого списка, которые определяют теги, т.е. наша форма должна быть следующей:

    Любимыйучастникгруппы LINKIN PARK













    Задание 4. Сгруппировать элементы формы
    Чтобы сгруппировать элементы формы необходимо все поля заключить в контейнер тегов
    , а тег используют в качестве заголовка группы элементов формы.


    Самоеглубокоеозеровмире
    Байкал

    Эри

    Ньяса




    Самостоятельная работа. Создать тест из десяти вопросов и трех вариантов ответов к каждому в отдельном файле под названием 5.html. Поля формы для теста заключите в ячейки таблицы, состоящей из 30 строк и двух столбцов. В первом столбце объедините три строчки в одну ячейку, для ввода вопроса, и далее объединяйте последующие три строчки в ячейку, в результате вы должны получить 10 ячеек. Во втором столбце, в ячейках, должны находиться поля с вариантами ответов, это могут быть поля-переключатели или поля-списки. Создайте кнопку внизу таблицы таблицей.
    Составить отчет о выполнении.

    Лабораторная работа № 5 «Фреймы»
    Цель работы: Сформировать умение оформления фреймов на web-странице.
    Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , который определяет область загрузки другого html-документа.
    При использовании фреймов в документе подключите в первой строке документа соответствующую спецификацию.

    Задание 1. Создать простейшую фреймовую структуру.
    Указания к выполнению
    Поделим web-страницу на два фрейма, для этого создадим три документы base.html, left.html и right.html в своей папке. В документе base.html будут располагаться фреймы, поэтому откройте файл в Блокнот и введите следующий код



    Фреймы


    <--!левыйфрейм-->
    <--!правыйфрейм-->


    Откройте файл base.html в браузере, в результате ваш документ разделится на две колонки (фреймы) количество и ширину колонок определяет атрибут cols="200,*", в данном случае у вас два фрейма, первый с толщиной 200 и второй, занимающий оставшееся пространство. Значение атрибут SRC тега определяет html-документ, который будет загружен во фрейм. Теперь определим файлы, загружающиеся во фреймы. Создайте файл left.html в вашей папке и откройте его в Блокнот наберите следующий код


    левыйфрейм


    левыйфрейм




    В созданный файл right.html наберите код


    правыйфрейм


    правыйфрейм



    Обновите браузер с документом base.html и посмотрите на результат.
    Задание 2. Создание структуры из четырех фреймов
    Указания к выполнению
    Для создания структуры из четырех фреймов используем вложенные теги . Сначала страницу разделим на два «строковых» фрейма, а затем их в свою очередь разделим на две колонки. Для этого создадим три 5 файлов: frame.html, frame1.html, frame2.html, frame3.html, frame4.html. Структура фреймов будет находиться в документе frame.html. с соответствующим кодом



    Фреймы



    <--!первыйфрейм-->
    <--!второйфрейм-->


    <--!третийфрейм-->
    <--!четвертыйфрейм-->


    В данном случае размеры фреймов одинаковые, размеры можно выражать как в пикселях так и в процентах. Создайте html коды файлов frame1.html, frame2.html, frame3.html, frame4.html по ниже приведенному примеру.

      У тега есть еще и атрибуты Frameborder, bordercolor и border, которые определяют наличие, цвет и толщину рамки фреймовой структуры соответственно, но они не являются валидными и не признаются спецификацией HTML.
    Самостоятельная работа. Создайте структуру фреймов по образцу

    Составить отчет о выполнении.

    Лабораторная работа №6 «Создание навигационной карты»
    Цель работы: Сформировать умения построения навигационной карты, добавление аудио и видео файлов и создание анимации.
    Задание 1. Создать навигационную карту.
    Указания к выполнению
    В любом созданном прежде HTML файле создайте навигационную карту. Для этого возьмите изображение любимой группы ( к примеру LinkinPark) и зафиксируйте размеры с помощью атрибутов width и height тега . Для начала определим координаты ссылок, создайте следующую конструкцию из тегов.



    С помощью данной конструкции ваше изображение в браузере становиться картой с координатами,
    которые должны появляться в конце адресной строки. Наведите на любого члена группы, и в адресной строке вы получит координаты цели, которые в дальнейшем используйте в навигации. Данную конструкцию можно в дальнейшем удалить с html кода, после того как вы определите координаты целей.
    Далее установим навигацию по изображению. С помощью тегов и .
    При помощью атрибута usemap="#имя_карты" тега , создаем карту из изображения. Далее подписываем координаты на карте: . Атрибут cords определяют координаты целей, которые вы определили выше, атрибут title="Честер" определяют подсказку, которая будет выплывать при наведении мыши.






    Самостоятельная работа. Скачайте с интернета изображения структуры ПК и создайте навигацию по данному изображению.
    Задание 2. Добавить звук и видеовhtml файл.
    Указания к выполнению
    a)Вставка в документ аудио видео файла.


    b) Вставкаанимации

    Важно! Воспроизведение видео и звука зависит от браузера, поэтому просматривайте html файл в разных браузерах (напримерGoogle Chrome).
    Самостоятельная работа. Добавьте анимацию с помощью тега
    Составить отчет о выполнении.
    Глава 2. Каскадные таблицы стилей CSS.
    Лабораторная работа №7 «Способы подключений CSS»
    Цель работы: Изучить способы подключения стилей CSS к html-документу.
    Задание 1. Подключение внутреннего стиля.
    Указания к выполнению
    Создайте файл 5.html откройте его в Notepad++ (notepad-plus-plus.org) наберите стандартные теги




    Внутренниестили




    Между тегами заключите следующие абзацы


    Веб-страница документилиинформационныйресурсВсемирнойпаутины, доступккоторомуосуществляетсяспомощьювеб-браузера.


    Веб-страницы обычно создаются на языках разметки HTML и могут содержать гиперссылки для быстрого перехода на другие страницы.


    Сохраните и посмотрите на результат в браузере. У нас два абзаца выделенные тегами

    непосредственно к ним с помощью атрибута style подключены стилевые свойства, разделенные точкой с запятой и взятые в кавычки. Если нужно в абзаце выделить фрагмент текста и применить к нему определенные стили используется тег . Стилевые свойства font-size, font-family и color:darkgreenопределяют размер, шрифт и цвет текста соответственно. Во втором абзаце свойство font объединяет в себе значения свойствfont-size и font-family, разделенных через пробел.Свойства text-align выравнивает текст (по центру, ширине, левому и правому краям), font-styleопределяет начертание шрифта (обычное, курсивное или наклонное).
    Задание 2. Подключение глобальных стилей
    Указания к выполнению
    Создайте файл 6.htmlоткройте его в Notepad++ наберите следующий текст




    Глобальныестили



    Веб-страница документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.


    Веб-страницы обычно создаются на языках разметки HTML и могут содержать гиперссылки для быстрого перехода на другие страницы.




    Результат в браузере будет аналогичным, разница лишь в том что стилевые свойства находятся в заголовке веб-страницы. В тегах заключены селекторы, а за ними в фигурных скобках свойства со значениями. Первый селектор р устанавливает стилевые свойства тексту заключенному в абзацы, второй селектор .class устанавливает значения свойств лишь ко второму абзацу

    ,у которого значение атрибута class соответствует этому селектору, селектор span устанавливает свойства тексту заключенному в контейнер тегов .
    Задание 3. Подключение связных стилей.
    Указания к выполнению
    В файле 6.html вырежите селекторы заключенные в контейнере тегов и вставьте в созданном в Notepad++ новом документе и сохраните его как style.css (в начале стилевого документа не забудьте поставить: @charset "UTF-8";). В файле 6.html удалите контейнер , а в заголовке добавить следующий текст

    Значения атрибутов тега   rel и type остаются неизменными независимо от кода, а значение href задает путь к CSS-файлу style.css. Далее измените заголовок документа Связные стили. Результат в браузере должен быть аналогичным предыдущему (за исключения заголовка).

    Лабораторная работа №8 «Редактирование html-страницы с применением css»
    Цель работы: Научит основным приемам редактирование текста, списков, изображения и таблиц посредством CSS.
    Задание 1. Оформление текста с применением стилей.
    Указания к выполнению
    Для начала оформим html-документ, весь текст заключим в специальный блочный контейнер тегов

    . Текст будет состоять из заголовка, двух абзацев и маркированного списка.





    Редактирование html-страницы с применением css



    Альберт Эйнштейн


    Альбе
    ·рт Эйнште
    ·йн (14 марта 1879, Ульм, Вюртемберг, Германия 18 апреля 1955, Принстон, Нью-Джерси, США) физик-теоретик, один из основателей современной теоретической физики, лауреат Нобелевской премии по физике 1921 года, общественный деятель-гуманист. Жил в Германии (18791893, 19141933), Швейцарии (18931914) и США (19331955). Почётный доктор около 20 ведущих университетов мира, член многих Академий наук, в том числе иностранный почётный член АН СССР (1926).


    Эйнштейн автор более 300 научных работ по физике, а также около 150 книг и статей в области истории и философии науки, публицистики и др. Он разработал несколько значительных физических теорий:



    • Специальная теория относительности (1905).

    • В её рамках закон взаимосвязи массы и энергии:

    • Общая теория относительности (19071916).

    • Квантовая теория фотоэффекта.

    • Квантовая теория теплоёмкости.

    • Квантовая статистика Бозе Эйнштейна.

    • Статистическая теория броуновского движения, заложившая основы теории флуктуаций.

    • Теория индуцированного излучения.

    • Теория рассеяния света на термодинамических флуктуациях в среде




    Сохраним данный документ как 7.html.
    Теперь оформим стили на отдельном документе для нашего текста, создадим новый документ new3.css, со следующим содержимым:
    @charset "UTF-8";
    div.text
    { position:absolute; /*устанавливает абсолютное положение блока в браузере*/
    left:0px; top:0px; right:0px; /*сбрасывает расстояние от окна браузера до блока с текстом слева, сверху и справа соответственно*/
    font-family:corbel; /* устанавливает шрифт в блоке с текстом*/
    font-size:12pt; /* устанавливает размер шрифта в блоке с текстом*/
    line-height:130%;/*устанавливает расстояние между строками относительно высоты шрифта*/
    border-style:double; /*устанавливает стиль рамки блока с текстом */
    border-width:3px;/* устанавливает ширину рамки блока с текстом*/
    border-color:gold; /* устанавливает цвет рамки блока с текстом*/
    background-color: #FFFFCC;/*устанавливает цвет заливки блока с текстом*/
    padding:10px;/*устанавливает расстояние от внутреннего края рамки до содержимого блока*/
    margin:20px /*устанавливает расстояние от внешнего края рамки блока до внутренней границы его родительского элемента (окно браузера)*/}
    h2
    {text-align:center; /*выравнивает заголовок по центру*/
    color:#999900;/*устанавливает цвет шрифта заголовка*/
    text-shadow:2px 2px 4pxgold; /*создает тень заголовка(по вертикали, горизонтали, рассеивания и цвет тени)*/}
    p
    { text-align:justify;/*выравнивает абзацы по ширине*/
    text-indent:30px;/*устанавливает «красную строку» абзацев*/}
    #first
    {font-style:italic; /*устанавливает стиль шрифта - курсив*/
    font-size:14pt; /* устанавливает размер шрифта */
    text-decoration:underline;/*делаеттекстподчеркнутым*/
    letter-spacing:2px/*устанавливает расстояние между буквами*/}
    ulspan
    { color:#999900;/*устанавливает цвет текста списков*/
    font-style:oblique/*устанавливает стиль шрифта – косой*/}
    ul
    { list-style: squareoutside;/*устанавливает стиль маркера*/
    color:gold /*цвет маркера*/}
    Посмотрите результат в браузере.
    Задание 2. Добавить изображение.
    Указания к выполнению
    Скачать любую фотографию Эйнштейна назовите ее как einstein.gif и сохраните в свою папку. Фотографию поставим слева, причем текст будет обтекать картинку. В документе 7.html, в блоке с текстом, перед заголовком добавим фотографию Эйнштейна, т.е. добавим следующий тег . Добавим фотографии стилевые свойства в конце файла new3.css.
    img
    {margin:20px;/*устанавливает расстояние от фотографии до текста*/
    width:250px;/*ширина фотографии*/
    height:350px;/*высота фотографии*/
    float:right;/*выравнивает фотографию по правому краю и текст обтекает слева*/
    border:7px inset gold}/*устанавливает сразу ширину, стиль и цвет рамки фотографии*/
    Сохраните и п
    осмотрите результат в браузере.
    Задание 3. Создание таблицы с помощью стилей.
    Для начала создадим таблице в документе 7.html после блока с текстом.












    Великиефизики
    Ампер Андре Мари (17751836)Открыл связь между электрическими и магнитными явлениями
    Бор Нильс Хендрик Давид (18851962)Создал первую квантовую теорию атома
    Галилей Галилео(15641642)Oсновоположник точного естествознания
    Курчатов Игорь Васильевич (19051960)Открыл явление разветвления ядерных реакций
    Лебедев Петр Николаевич(18661912)Открыл и исследовал давление света на твердые тела (1899) и газы (1907)
    Ньютон Исаак(16431727)Создал физическую картину мира (теорию пространства и времени)
    Рентген Вильгельм Конрад (18451923) Предсказал и открыл (1895) излучение, названное им Х-лучами (рентгеновские лучи)
    Эйнштейн Альберт(18791955)Дал формулировку специальной (1905) и общей (1916) теории относительности

    Теперь применим стили, в конце файле new3.css добавим селекторы со следующими свойствами:
    table
    {border:6pxoutsetblue;/* устанавливает рамку всей таблицы (толщину, стиль и цвет)*/
    background-image:url(star.jpg);/*устанавливает рисунок в качестве заливки таблицы*/
    border-collapse:collapse;}/*устанавливает только одну рамку для ячеек*/
    td
    {border:2pxdotted #6699FF;/* устанавливает рамку только ячейки (толщину, стиль и цвет)*/
    color:white}/*цвет текста*/
    #head
    {text-align:center;/*выравнивает текст по центру только в первой строке таблицы*/
    background-color:blue;/*устанавливает цвет строки только в первой строке таблицы*/
    font-weight:bold}/* устанавливает жирный шрифт тексту в первой строке таблицы*/
    caption
    {font-size:14pt;/*размершрифта*/
    text-transform:uppercase;/*устанавливаетшрифтпрописным*/
    color:blue}/*цвет текста*/
    Задание 4. Создание ссылок с помощью стилей.
    Указания к выполнению
    В документе 7.html в таблице создайте ссылку из имени Ньютона на его биографию, т.е. заключите это имя в теги Ньютон Исааки примените к нему стили с использованием псевдоклассов:
    a:link
    {color:white;}/*цветнетронутойссылки*/
    a:visited
    {color:blue;}/*цвет посещенной ссылки*/
    a:active
    {color:#9966FF;}/* цвет ссылки в момент нажатия на нее*/

    Лабораторная работа №9 «Верстка макетов с помощью CSS»
    Цель работы: Сформировать умения построения блочных макетов посредством CSS.
    Задание 1. Создание «жесткой» (фиксированной) верстки с помощью блоков
    Указания к выполнению
    Создадим фиксированный макет с двумя колонками, в документе будут 5 блочных контейнеров
    : главный – включающий все остальные блоки, заголовочный, левый, правый и нижний – все фиксированной ширины. Создайте новый документ и сохраните его как верстка1.html и наберите в нем следующий текст




    Жесткая верстка блоками





    левыйблок

    правыйблок




    Обратите внимание, как тщательно высчитывается ширина макета, ширина левого(200рх) и правого(800рх) блока в сумме равна ширине главного блока, при этом в сумме учитывается и расстояние то внешней границы блока до его содержимого(190+10+790+10=1000). Посмотрите результат в браузере.
    Задание 2. Создание «резиновой» верстки с помощью блоков.
    Указания к выполнению
    При «резиновой» верстке относительно фиксированной ширины будет только левый блок, ширина всех остальных будет зависеть от ширины окна браузера. В документе будут 4 блочных контейнеров
    : заголовочный, левый, правый и нижний. Создайте новый документ и сохраните его как верстка2.html и наберите в нем следующий текст




    Резиновая верстка блоками





    левыйблок

    правыйблок




    Ширина блоков не установлена, т.к. зависит от браузера. Посмотрите результат в браузере.
    Самостоятельная работа. Отталкиваясь от этих примеров создать HTML-документы с жесткой и резиновой версткой блоками для трех колонок соответственно.
    Составить отчет о выполнении.

    Лабораторная работа №10 «Динамичные эффекты посредством CSS»
    Цель работы: Научить основным приемам создание динамичных эффектов посредством CSS. Показать основные принципы создания меню с выпадающими ссылками, изображения с меняющейся прозрачностью и текста, меняющего размеры и цвет
    Задание 1. Создать в заголовке меню с выпадающими ссылками.
    Указания к выполнению
    1. Меню создать с помощью таблиц, ячейки которых в свою очередь также будут состоять из выпадающих таблиц, в ячейках которых будут заключены ссылки.
    В файле верстка1.html в заголовочном блоке удалите текст «заголовочный блок» и добавьте следующую таблицу, состоящую в свою очередь из других таблиц. Основная таблица состоит из одной строки и 5 колонок (ячеек), в каждой из них своя таблица , появляющаяся при наведении мыши. В ячейках таблицы заключены ссылки. Для начала наберите html-код таблицы с подтаблицами в контейнере







    Гранж




    Nirvana
    Foo Fighters
    Pearl Jam

    Инди-рок






    Radiohead
    Smashing Pumpkins
    Muse
    Coldplay
    Placebo

    Поп-панк



    Green Day
    Offspring

    Ню-метал



    Red Hot Chili Peppers
    System Of A Down
    Evanescence

    Брит-поп




    Blur
    Oasis
    The Verve


    2. В конце глобальных стилей файла верстка1.html, перед тегjм , добавьте стилевые свойства к меню.
    К основной таблице и подтаблицам подключите следующие стилевые свойства
    table /*селектор к основной таблице*/
    {font: bold 15ptArial; /*параметры шрифта таблиц*/
    text-align:center; /*выравнивание текста в таблице по центру*/
    }
    Зафиксируйте положение ячеек в основной таблице (если добавить свойство position:fixed селектору table, то зафиксируется таблица, причем относительно окна браузера, и даже при прокрутки окна будет фиксированной )
    td table
    { position:fixed;} /* фиксирует положение ячеек таблицы*/
    Для того чтобы скрыть подтаблицы table.t1 воспользуйтесь свойством display: none, подтаблицы должны появляться только при наведении курсора. Залейте фон подтаблиц любым цветом и установите прозрачность фоновой заливки opacity:0.5.
    table.t1 {/*селектор по классу для подтаблиц*/
    display: none; /*скрывает подтаблицы*/
    background-color:#0099CC;/*заливка фона подтаблиц*/
    opacity:0.5;/*прозрачность фона подтаблиц*/
    text-align:center;
    }
    Псевдокласс :hover меняет стилевые свойства при наведении курсора. Нужно что бы при наведении курсора появлялось содержимое ячеек основной таблицы (т.е. подтаблицы), поэтому установите псевдокласс td:hovertableс свойством display:block отображающим скрытое.
    td:hovertable/* появление подтаблиц*/
    { display:block;}
    Добавьте рамку к ячейкам подтаблиц
    table.t1td {border:1pxsolidwhite}/*параметры рамки ячеек подтаблиц */
    Уберите линую подчеркивания ссылок и залейте их любым цветом
    a {text-decoration: none;/*нет линии подчеркивания*/
    color:#00FF99;}/* цвет ссылки*/
    Посмотрите результат в браузере, отключайте (берите в комментарии) последовательно стилевые свойства и смотрите как их отсутствие сказывается на виде документа в браузере.
    Самостоятельная работа. Создайте в левом блоке список, состоящий из выпадающих подсписков при помощи псевдокласса :hover и стилевого свойства display с значениями none/block.
    Составить отчет о выполнении.
    Задание 2. Добавить динамический эффект на изображение.
    Указания к выполнению
    1. В правом блоке файла верстка1.html добавьте изображение (скачайте с интернета фото любой рок-группы) изображение должно менять прозрачность при наведении курсора. Используйте псевдокласс :hover и стилевое свойство opacity, изображение выравните по левому краю.
    Заключите изображение в контейнер тегов, определяющий правый блок



    Теперь подключите следующие стилевые свойства (после стилевых свойств меню)
    img /*положение изображения*/
    {margin: 3px; /*расстояние от изображения до внутренней границы правого блока*/
    float: left;} /* выравнивание изображения слева*/
    .pic1/*прозрачность изображенния*/
    {opacity: 0.6;}/*устанавливает прозрачность*/
    .pic1:hover /* изменение прозрачности при наведении курсора*/
    {opacity: 1;}/* убирает прозрачность*/
    2. В правом блоке файла верстка1.html добавьте изображение (скачайте с интернета фото любой рок-группы) рамка изображения должна менять размер при наведении курсора.
    Добавьте новое изображение после изображениеpic1.

    Со следующими стилевыми свойствами
    .pic2 /* ширина рамки второго изображения*/
    {border: 1px solid grey;}/* параметры рамки в режиме покоя*/
    .pic2:hover /* ширина рамки изменяется*/
    { border: 8px outset grey;} /* параметры рамки при наведении курсора*/
    Посмотрите результат в браузере
    Самостоятельная работа. Добавьте изображение , которое при наведении курсора изменяло бы размер, используя :hover и свойства width и height.
    Задание 3. Добавить динамические эффекты.
    Указания к выполнению
    Текст должен менять цвет и размер при наведении курсора.
    В правом блоке после изображений создайте новый класс с id=citata в блок поместите произвольный текст (например, информацию о рок-группе)
    Произвольный текст

    И установит следующие стилевые свойства
    # citata /* параметры цитаты «в покое»*/
    {width:600px;/* ширина блока цитаты*/
    margin: 3px; /*положение за границей блока*/
    padding: 20px; /*расстояние содержимого дограницей блока*/
    border: 6px inset #FF4500; /* параметры границы блока цитаты*/
    float: left; /* выравнивание блока слева*/
    color: #FF4500;/* цвет текста*/
    font: 14ptMonotypeCorsiva; /* размер и шрифт текста*/
    text-align: justify;}/*выравнивание текста в блоке по ширине*/
    # citata:hover/* параметры при наведении курсора*/
    {font-size: 20pt;/* изменение размера текста*/
    color: #8B0000;/* изменение цвета текста*/
    text-align: center; /*выравнивание текста в блоке по центу*/
    border: 6px inset #FF4500;} /* параметры границы блока цитаты*/
    Сохраните и посмотрите результат в браузере.

    Глава 3. Язык сценариев JavaScript.
    Лабораторная работа №11 «Размещение кода JavaScript. Основы JavaScript»
    Цель работы: Сформировать навыки размещения JavaScript сценариев на html-странице. Изучить иерархическую структура объектов на html-странице. Изучение новых свойств и методов.
    Задание1. Подключит сценарии JavaScript
    Указания к выполнению
    1. Создайте в Notepad++ новый файл js1.html –и добавьте в документ сценарий JavaScript. Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами , которые в свою очередь обычно находятся в тегах  (теги  могут располагаться и в тегах , но сценарий выполнится лишь тогда , когда его прочитает браузер). У тега 




    document.write("Hello")выведетнаэкранслово «Hello»
    2. Создайтев Notepad++ страницуисохранитееекак script.js ввашупапку, нанейразместитеследующийкод: document.write("Hello"), вырезанныйизконтейнератегов  Вфайле js1.html втегах




    Задание 2.Изучить иерархическую структура объектов страницы html.
    Указания к выполнению
    При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:
    На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д. Все объекты имеют методы (отделяются от объекта точкой), например: document.write позволяет писать текст в текущую страницу, window.open открывает новое окно браузера. Также объекты имеют свойства, например: document.bgСolor содержит значение фонового цвета текущей страницы, document.title содержит заголовок страницы. Все инструкции программного кода заканчиваются точкой с запятой. 
    Установите цвет фона страницы зеленым , в тегах   добавьте условный оператор
    if (document.bgСolor=="green")
    document.write("Фоновыйцветзеленый")
    else document.write("Фоновый цвет не зеленый");
    В результате у вас на экране должно появиться сообщение "Фоновый цвет зеленый", измените фоновый цвет и посмотрите результат в браузере.
    Теперь добавьте перед условным оператором следующие инструкции
    window.alert("Цвет заливки окна"); метод alert() на экране браузера создает окно, в котором выводятся данные, которые заданы в качестве аргумента этой функции. После нажатия кнопки "OK" окно метода alert() закрывается. Сохраните и посмотрите результат в браузере.
    Создайте новый документ js1.html и добавьте следующий код


    JS

     и добавьте следующий код.
    var text=window.prompt("Сколько вам лет?"); /*объявление переменной text и присваивание ей значения, введенного в диалоговое окно*/
    switch (true){/* Операторвыбора*/
    case (window.parseInt(text)>0&&parseInt(text)<=7):document.write("Выребенок");
    break;
    case (parseInt(text)>=8)&&(parseInt(text)<=15): document.write("Вышкольник");
    break;
    case (parseInt(text)>=16)&&(parseInt(text)<=25): document.write("Выстудент")
    break;
    default : document.write("Вылибоработайтелибопенсионер")}
    Метод window.prompt("Сколько вам лет?") выводит в окно сообщение "Сколько вам лет?" с полем для ввода информации, которая возвращается этим методом, и в конкретном случае присваивается переменной text. Функция window.parseInt(text)( или просто parseInt(text)) преобразуют строку в целое число, которое возвращает. Введенное вами значение, инициализируется в переменной text в виде строки, поэтому мы преобразуем ее в целое число.
    alert(), confirm(), promp() и parseInt() это глобальные методы, т.е. методы объекта window, поэтому их можно использовать без указания того, что они принадлежат объекту window.
    Самостоятельная работа. Создайте сценарий, который запускал бы, диалоговое окно с предложением представится, в котором в сою очереди можно было бы вбить свое имя, и в результате в окне браузера появлялось приветствие.
    Составить отчет о выполнении.

    Лабораторная работа №12 «События и Функции в JavaScript»
    Цель работы: Дать навыки использования обработчиков событий совместно с функциями. Создание простейших функций. Формирование элементарных навыков получения доступа к элементам страницы.
    Задание 1. Обработка событий.
    Указания к выполнению
    Действия, производимые вами на web-cтранице называются событиями. Для каждого события существует свой обработчик, с помощью которых можно создавать сценарии.

    Событие
    когда происходит
    обработчик события

    Blur
    потеря объектом фокуса
    onBlur

    Change
    пользователь изменяет значение элемента
    onChange

    Click
    пользователь щелкает мыщью по объекту
    onClick

    DblClick
    пользователь делает двойной щелчок мышью по объекту
    onDblClick

    DragDrop
    пользователь перетаскивает мышью объект
    onDragDrop

    Error
    возникновение javascript-ошибки
    onError

    Focus
    окно или элемент формы получает фокус
    onFocus

    KeyDown
    пользователь нажимает клавишу клавиатуры
    onKeyDown

    KeyPress
    пользователь удерживает нажатой клавишу клавиатуры
    onKeyPress

    KeyUp
    пользователь отпускает клавишу клавиатуры
    onKeyUp

    Load
    документ загружается в браузер
    onLoad

    MouseDown
    пользователь нажимает кнопку мыши
    onMouseDown

    MouseOut
    указатель мыши выходит за пределы элемента
    onMouseOut

    MouseOver
    указатель мыши помещается над элементом
    onMouseOver

    MouseUp
    пользователь отпускает кнопку мыши
    onMouseUp

    Move
    пользователь перемещает окно
    onMove

    Reset
    пользователь нажимает кнопку "reset" формы
    onReset

    Resize
    пользователь изменяет размеры окна или элемента
    onResize

    Select
    пользователь выбирает элемент формы
    onSelect

    Submit
    пользователь нажимает кнопку "submit" формы
    onSubmit

    Unload
    пользователь закрывает документ
    onUnload


    Обработчики событий используются вместе с функциями. Функции в свою очередь объявляются после ключевого слова function
    function имя ()
    { операторы; } 
    Создайте сценарий, при котором загрузка страницы вызывала диалоговое окно с приветствием. Создайте либо в заголовке между тегами , либо на отдельном документе с расширением .js следующую функцию
    function hello()
    {alert("
    Теперь присвоим эту функцию обработчику события, который запустит функцию как только произойдет соответствующее событие, поместим его в тег в качестве атрибута
    /*при загрузке страницы появится окно с фразой «Добро пожаловать!»*/
    Задание 2. Закрытие окна
    Указания к выполнению
    Создайте новый html-документ js2.html, добавьте стандартные теги.
    В контейнере тегов создайте кнопку с надписью «Закрыть окно»
    Закрыть окно
    Объявите функцию shutwindow() в заголовке межу тегами
    functionshutwindow()
    {if (confirm("Вы действительно хотите покинуть страницу?"))
    window.close()}/* глобальный метод объекта window, закрывающее текущее окно*/
    Задание 3. Вычислить корни квадратного уравнения
    Указания к выполнению
    В документе js2.html создайте форму с полями для ввода коэффициентов и кнопкой, запускающей функцию, считающую корни уравнения. К примеру, следующую

    Решение квадратного уравнения аx2+bx+c=0


    a


    b


    c





    Примените стили CSS к созданной вами форме

    Создайте функцию вычисляющую корни уравнения которую запускает обработчик событий onClick="korni()". Для того чтобы посчитать корни уравнения нужны коэффициенты, т.е. необходимо получить доступ к полям куда будут вводиться коэффициенты. Доступ к полям можно получить разными способами:
    Через метод объекта document getElementById(), аргументом которого является значение id необходимого элемента. Если необходимо получить введенное значение поля с коэффициентом а где id=a, тогда document.getElementById('a').value, где последнее свойство определяет значение, введенное в поле.
    Через метод объекта document getElementsByName(), аргументом которого является значение атрибута name необходимого элемента. Для получения введенного значение поля с коэффициентом с где name =с, необходимо использовать следующую конструкцию document.getElementsByName('c')[0].value , где [0] указывает что необходимо брать значение у нулевого элемента с атрибутом name =с
    В следующим способе объект formс атрибутом name=sqr используется в качестве свойства объекта document, а элемент input с атрибутом name=b является свойством элемента form. Поэтому используя их имена получить доступ к полю можно посредством атрибутом name, каждого элемента document.sqr.b.value.
    Тогда функция корни примет вид
    functionkorni()
    {vara=document.getElementById('a').value;/*объявление и инициализация переменной*/
    var b=document.sqr.b.value;
    var c=document.getElementsByName('c')[0].value;
    var d=Math.pow(b,2)-4*a*c; /*дискрименант*/
    x1=(-b-Math.sqrt(d))/(2*a); x2=(-b+Math.sqrt(d))/(2*a);
    if (d<0) alert("Корней нет")/*Результат выводится через диалоговое окно*/
    else
    if (d==0) alert("X="+x1)
    else alert("x1="+x1+ " "+"x2="+x2);
    }
    Самостоятельная работа. С помощью JavaScript создать простейший калькулятор.
    Составить отчет о выполнении.

    Лабораторная работа №13 «Создание сценариев с использованием встроенного объекта Date»
    Цель работы: Научится создавать объекты Date и использовать методы объекта Date для создания различных сценариев.
    Задание 1. Создать системные часы.
    Указания к выполнению
    Создайте новый html-документ js3.html, добавьте в него стандартные теги.
    В контейнере тегов добавьте следующую таблицу



    ::

    В ячейку









    Теперь создайте функцию check(), в ней нужно создать два регулярных выражения. Для создания объектов регулярного выражения используйте разные способы. Регулярное выражение номера телефона должно соответствовать шаблону 8(000)00-00-000. Для проверки регулярного выражения использовать метод RegExptest(), аргументом которого является строка и возвращает истину, если регулярное выражение соответствует строке и ложь а противном случае.
    functioncheck()
    { varreg1=/8\([0-9]{3}\)([0-9]{2}-){2}[0-9]{3}/ /*регулярное выражения номера телефона*/
    varreg2=newRegExp("[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,3}","i") /*регулярное выражения эл. адреса*/
    str1=f.p3.value; /*получения строки из поля с номером*/
    str2=f.p4.value; /*получения строки из поля с адресом*/
    if (!reg1.test(str1)) document.getElementById("s").innerHTML='ВВедите номер телефона правильно'
    if (!reg2.test(str2)) document.getElementById("s").innerHTML='ВВедите электронный адрес правильно'
    /*проверка регулярных выражений с использованием условного оператора*/
    }
    Задание 2. Дана строка с датой рождения определить, возраст.
    Указания к выполнению
    Строка будет вводиться в текстовом поле, необходимо в строке найти дату, которая будет вводиться в формате ЧЧ.ММ.ГГГГ. Затем определить возраст по дате.

    ВВЕДИТЕ СТРОКУ





    Функция check2() должна обработать введенную строку. Используйте метод exec объекта RegExp чтобы найти дату в строке. Т.к. данный метод возвращает массив из состоящий из самой даты и частей даты, которые заключены в скобки регулярного выражения. Пусть reg=/([0-9]{2})\.([0-9]{2})\.([0-9]{4})/ - регулярное выражение соответствующее шаблону ЧЧ.ММ.ГГГГ, тогда reg.exec() возвратит следующим массив из четырех элементов {ЧЧ.ММ.ГГГГ, ЧЧ, ММ, .ГГГГ}. Элементы массива используйте в качестве значений при создании объекта Date.
    functioncheck2()
    {varreg=/([0-9]{2})\.([0-9]{2})\.([0-9]{4})/;/*создание регулярного выражения*/
    str=f1.pole.value;/* получение введенной строки из формы*/
    mas=reg.exec(str);/*создание массива {ЧЧ.ММ.ГГГГ, ЧЧ, ММ, .ГГГГ}*/
    date1=newDate(mas[3],mas[2],mas[1]); /*Создание объекта Date со значениями элементов массива*/
    date=newDate();/*Создание текущей даты*/
    vozrast=(date.getTime()-date1.getTime())/(24*60*60*1000*365) /* определениевозраста*/
    document.getElementById("b").innerHTML='Вашвозраст '+vozrast.toFixed(0); }

    Самостоятельная работа. Дана строка, заменить все числа в ней на звездочки (для этого используйте метод replace).
    Составить отчет о выполнении.

    Лабораторная работа № 17 «Проверка заполнения форм»
    Цель работы: Формирование навыков проверки html-форм с помощью сценариев javascript.
    Задание 1. Создайте новый html-документ js7.html, добавьте в него стандартные теги и создайте в нем форму для заполнения анкеты со следующими полями
    Фамилия
    Имя
    Дата рождения
    Пол
    Знак зодиака(любимый цвет)
    Указание к выполнению
    Первое, второе и третье поля в форме должны быть текстовыми полями, чтобы получить доступ к полю воспользуйтесь следующей конструкцией: document.getElementById("name").value. Третье поле должно вводиться в формате ДД.ММ.ГГГГ, значит значение поля нужно будет проверить на соответствие регулярному выражению (соответствующему формату ДД.ММ.ГГГГ). Тип четвертого поля установите как type="radio", например можно установить два поля (мужской пол и женский пол). Получить доступ к полю можно с помощью следующей конструкцией: document.getElementById("М").checked, его значение true – если стоит галочка и false –если ее нет. Пятое поле – выпадающий список, чтобы получить доступ к этому полю нужна следующая конструкция: x=document.getElementById("link"); у=x.options[x.selectedIndex].text, тогда в у будет значение выбранного поля. Заполненные поля должны отправляться с помощью кнопки, которая в свою очередь запускает функцию обрабатывающую форму. Данными полученными из полей вы можете инициализировать поля объекта или массив. Проверяйте поле на правильность заполнения, если оно заполнено не правильно выведите сообщение методом alert("ВВЕДИТЕ ДАТУ ПРАВИЛЬНО"); , полученные данные из полей выведите на экран с помощью метода confirm("Это вы"+" "+mas.toString()), чтобы пользователь смог проверить правильность заполнения анкеты. Примерный вид формы указан ниже, скрипт помещайте либо в отдельном файле, либо в .
    Имя*
    Фамилия*
    Телефон8(917)23-24-456
    Электронныйадрес*
    * - Поля обязательные для заполнения







    Имя Фамилия
    Дата рождения
    Пол М
    Ж

    Определим функцию обработки формы
    function f()
    {mas=new Array();/*объявлениямассива*/
    i=0;/*инициализация массива данными с полей форма*/
    mas[i]=document.getElementById("name").value; i++;
    mas[i]=document.getElementById("surname").value; i++;
    mas[i]=document.getElementById("date").value;
    if(/(\d{2})\.\d{2}\.\d{4}/.test(mas[i])) /*проверкавводадаты*/
    mas[i]=RegExp.$1/*сохранение дня рождения в качестве элемента массива*/
    elsealert("ВВЕДИТЕ ДАТУ ПРАВИЛЬНО");
    i++;
    y=document.getElementById("M").checked/*получение данных из радио-полей*/
    z=document.getElementById("W")
    if((y==true)) mas[i]="Мужчина"
    else
    if((y==false)&&(z.checked==true)) mas[i]="Женщина"
    elsealert("ВВЕДИТЕ ВАШ ПОЛ ПРАВИЛЬНО");
    i++;
    x=document.getElementById("cod")
    mas[i]=x.options[x.selectedIndex].text;/*получение выбранного значения из списка выбора*/
    confirm("Это вы"+" "+mas[0].toString()+" "+mas[1].toString()+
    " рожденный(ая) "+mas[2].toString()+" числа "+mas[3].toString()+
    ", любящий(ая) цвет: "+mas[4].toString());/*вывод полученного массива в диалоговом окне*/
    }
    Самостоятельная работа. Добавьте новые поля в форму и получите данный из них и обработайте данные javascript-сценарием
    Составить отчет о выполнении.

    Глава 4. Основы работы в РНР.
    Лабораторная работа № 18 «Работа с файлами в РНР»
    Цель работы: Изучение основ работы с файлами в РНР, загрузка файла на сервер и сохранение данных формы в созданном файле.
    Для выполнения лабораторной работы вам понадобится сконфигурированная связка MySQL, Apache, РНР, phpMyAdmin, либо просто Denwer. Скачать Denwer можно с официального сайта [ Cкачайте файл, чтобы посмотреть ссылку ] , на станице есть ссылки по установке и эксплуатации данного программного обемпечения.
    Задание 1. Загрузить файл на север.
    Указания к выполнению
    Скопируйте html-документ js7.html в папку с вашим сайтом в Denwer. Загрузка файла на сервер осуществляется с помощью multipart-формы, поэтому в нашу форму добавим следующие атрибуты:
    . Добавим новое поле в нашу форму .
    Теперь создадим документ 2.php и в него добавим символы для скриптов РНР. Скрипты можно добавить следующими способами:
    1.
    2.
    3.
    4. <% %>
    Коментарии
    // Это однострочный комментарий
    /* Это многострочный комментарии*/
    ?>
    После отправки файла в РНР  создается суперглобальный двумерный массив $_FILES, содержащий информацию о файле.
    $_FILES[' filename ']['name'] - имя файла до его отправки на сервер, например, зайка.gif
    $_FILES[' filename ']['size'] - размер принятого файла в байтах
    $_FILES[' filename']['type'] - тип принятого файла, например: image/gif
    $_FILES[' filename']['tmp_name'] - содержит имя файла во временном каталоге, например: /tmp/phpV3b3qY;
    $_FILES[' filename ']['error'] - Код ошибки, которая может возникнуть при загрузке файла. Ключ ['error'] был 
    Прежде чем загрузить файл нужно определиться с его размером, если он превышает 2Мбайт, мы его просто не загрузим.
    if($_FILES["filename"]["size"] > 1024*2*1024)
    {еcho "Размер файла превышает два мегабайта";
    exit;}
    Функция exit прекращает выполнение скрипта.
    Теперь переместим файл из каталога для временного хранения файлов в нужный нам каталог, для этого создайте новую папку в вашей папке wwwc именем loads (еще ее можно создать с помощью функции mkdir("loads");). Функция move_uploaded_file() перемещает файл из временного хранилища в место указанное во втором аргументе, и возвращает TRUE в положительном исходе перемещения, и FALSE если файл не был перемещен. Второй аргумент это выражение типа: loads/зайка.gif, где . скдадывает две строки.
    if (move_uploaded_file($_FILES['filename']['tmp_name'], "loads/".$_FILES['filename']['name']))
    {echo "Файл успешно загружен на сервер";}
    else { echo " Не удалось загрузить файл на сервер!"; exit; }
    Ваш скрипт должен выглядеть следующим образом:
    mkdir("loads");
    // Каталог, в который мы будем принимать файл:
    if($_FILES["filename"]["size"] > 1024*3*1024)
    {
    echo "Размер файла превышает три мегабайта";
    exit;
    }
    print $_FILES['filename']['name'];
    // Копируем файл из каталога для временного хранения файлов:
    if (move_uploaded_file($_FILES['filename']['tmp_name'], "loads/".$_FILES['filename']['name']))
    {
    echo "

    Файл успешно загружен на сервер

    ";}
    else { echo "

    Ошибка! Не удалось загрузить файл на сервер!

    "; exit; }
    // Выводим информацию о загруженном файле:
    echo "

    Информация о загруженном на сервер файле:

    ";
    echo "

    Оригинальное имя загруженного файла: ".$_FILES['filename']['name']."

    ";
    echo "

    Mime-тип загруженного файла: ".$_FILES['filename']['type']."

    ";
    echo "

    Размер загруженного файла в байтах: ".$_FILES['filename']['size']."

    ";
    echo "

    Временное имя файла: ".$_FILES['filename']['tmp_name']."

    ";
    ?>
    Задание 2. Создать файл в РНР и записать в него данные из формы.
    Указания к выполнению
    Сохраним полученные из формы данные в текстовой файл. Для начало создадим этот файл, для этого используем стандартную функцию fopen( ) в режиме w+. . В файле 2.php удалите старый скрипт и добавьте следующую строку:
    $fp = fopen('1.txt', 'w+') or die;
    Убедитесь, что в вашей папке www появился файл 1.txt. Функция die синоним exit, прекращает работу скрипта. Теперь заполним файл информацией, для этого воспользуемся функцией fwrite(). Данные из полей будем записывать на новых строках, PHP_EOL определяет символ конец строки. В html-документе js7.html, в форме все атрибуты id заменить на name, т.к. данные из полей посредством глобального массива предаются на сервер по значениям атрибута name. Все данные формы отправляются посредством метода передачи данных post, поэтому при передачи на сервер создается глобальный массив $_POST['имя поля']. Значение первого поля «Имя» в глобальном массиве будет выглядеть как $_POST['name'].
    fwrite($fp,$_POST['name']);
    fwrite($fp,PHP_EOL);
    fwrite($fp,$_POST['surname']);
    ит.д.
    fclose($fp); // закрытие файла
    Самостоятельная работа. Открыть файл с экзаменационными вопросами и посчитать количество символов и строк в файле, используйте функцию fgetc( ).
    Составить отчет о выполнении.

    Лабораторная работа №19 «Сохранение данных из формы в базе данных MySQL»
    Цель работы: Сформировать практические умения сохранение данных из формы в базе данных с помощью РНР скриптов.
    Задание 1. Сохранить данные в базе.
    Указание к выполнению
    1. Создайте простую форму, подобную той которую создали в файле js7.html, можете взять и ее. Скрипт можете поместить в файл с формой, либо создать отдельно, например, создайте файл 3.php.
    2. Создайте в MySQL или в phpMyAdmin базу данных base и в ней таблицу table, в которой создайте поля, соответствующие форме (name, surname, age, pol, color), тип каждого поля пусть будет TEXT. Созданная вами база должна появиться в папке data в установочной папке MySQL , например*\mysql-5.5\data\base. Проверьте!
    3. Теперь напишем скрипт. Откроем соединение с сервером MySQL, с помощью функции mysql_connect(), где первый аргумент, в приведенном ниже примере, - локальный сокет, второй – встроенный пользователь root. В случае удачного соединения функция возвращает в $date указатель на соединение с MySQL, в противном случае возвращается FALSE и функция mysql_error () возвратит строку с ошибкой.
    $date=mysql_connect("localhost","root") or die (mysql_error ());
    Далее выбираем базу данных c помощью функции mysql_select_db(), которая возвращает TRUE при удачном соединении с БД, в противном случае появится строка с ошибкой.
    mysql_select_db("base",$date) or die(mysql_error());
    Теперь оформим запрос, в нем мы в таблицу table в соответствующие поля заполняем информацией полущенной из формы методом POST.
    $sql="INSERT INTO table SET name='{$_POST['name']}',surname='{$_POST['surname']}',age='{$_POST['date']}',pol='{$_POST['M']}',color='{$_POST['S']}'";
    Отправим запрос с помощью функции mysql_query(), в качестве первого аргумента выступает сам запрос $sql, а второй аргумент это указатель на активное соединение. Если запрос был выполнен, тогда, в зависимости от запроса, в $res будет либо указатель на результат запроса, либо TRUE (как в нашем случае), в противном случае будет FALSE и появится строка с ошибкой.
    $res=mysql_query("$sql",$date)
    ordie(mysql_error());
    Теперь данные сохранились в БД на сервере и можно закрыть соединение
    mysql_close($date) or die (mysql_error ());
    Проверьте базу данных base на наличие данных из формы.


    Список использованной литературы
    Книги
    Баканов В.М. Программное обеспечение компьютерных сетей и информационных систем. – Москва: МГАПИ, 2005.
    Дронов В. А. Java Script в Web-дизайне. – Санкт-Петербунг: «БХВ-Петербург», 2005
    Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор web-мастера. – Санкт-Петербург: «БХВ-Петербург», 2008.
    Интернет ресурсы
    Храмцов П. Б., Брик С.А., Русак А.М., Сурин А.И. Основы web-технологий. Интернет-университет информационных технологий - ИНТУИТ.ру ([ Cкачайте файл, чтобы посмотреть ссылку ])
    Интернет источник с познавательной информацией по HTML и CSS - [ Cкачайте файл, чтобы посмотреть ссылку ]
    Интернет источник с познавательной информацией по JavaScript - [ Cкачайте файл, чтобы посмотреть ссылку ]









    

    

    

    

    13 PAGE \* MERGEFORMAT 14115




    Рисунок 7Јђ Заголовок 1Јђ Заголовок 2Јђ Заголовок 3Јђ Заголовок 4Јђ Заголовок 5 Заголовок 6Јђ Заголовок 7 Заголовок 915

Приложенные файлы

  • doc metodrabota
    Размер файла: 1 MB Загрузок: 26