2. УДК 004.42 (075.8)
ББК 32.973.202-018.2я73
Б20
Рецензенты:
Ахмедиярова А.Т. - старший научный сотрудник «Института информационных и
вычислительных технологии» КН МОН РК, доктор PhD
Буранбаева А.И. - доцент университета «Туран», заведующая кафедры «Компьютерная и
программная инженерия», к.т.н.
Балгазиева М.Т.
Практикум по дисциплине «Web программирование» (для преподавателей и студентов
специальности «Вычислительная техника и программное обеспечение») - Алматы, 2016 – 111 стр.
ISBN 978-601-06-4111-2
Учебное пособие по дисциплине «Web программирование» предназначено для приобретения
практических навыков, изучивших теоретический материал по данному курсу.
В пособии излагаются методические рекомендации к выполнению лабораторных работ по
дисциплине "Web-программирование". Целью курса является изучение основных возможностей
дескрипторов HTML, CSS, языка программирования PHP, принципов взаимодействия с базами
данных на примере MySQL, а также обзор основных принципов оптимизации сайта. Предназначено
для преподавателей и студентов, обучающихся по специальности 1304000 "Вычислительная техника
и программное обеспечение".
ISBN 978-601-06-4111-2
3. Содержание
Введение
Раздел 1. Технология программирования Интернет
Практическая работа №1
Практическая работа №2
Дескрипторы HTML. Использование фреймов и форм
Дескрипторы CSS
Практическаяработа №3 Построение и применение скриптов на языке JavaScript
Раздел 2. Основы языка PHP
Практическаяработа №4 Организация работы с PHP. Знакомство с PHP кодером
Практическая работа №5 Управляющие конструкции. Операторы выбора. Циклы
Практическая работа №6 Строковые функции
Практическая работа №7 Функции обработки массивов
Практическая работа №8 Работа с файлами и каталогами. Открытие файлов. Работа со
строками, массивами и файлами
Практическая работа №9 Работа с файлами. Пишем гостевую книгу на PHP
Практическая работа №10 Работа с MySQL. Создание форума. Разработка приложений с
использованием СУБД MySQL
Практическая работа №11 Дизайн и создание Web-сайта
4. Введение
Под современными технологиями программирования сегодня понимают в основном, Интернет-
технологии, включающие в себя концептуальные знания WWW и HTML, Java, клиентских и
серверных скриптов и языков запросов к базам данных, основы web-дизайна. Однако наиболее важной
частью профессиональной подготовки специалиста является умение работать над большим проектом,
быть в “команде” и доводить проект от замысла до реализации.
В последние годы прошлого века появился и очень быстро завоевал огромную популярность
новый класс приложений – так называемые Web-приложения, обеспечивающие доступ через Интернет
или интрасеть к информационным системам и базам данных, Web-приложения стали одним из
наиболее эффективных инструментов современного бизнеса.
Для разработки Web-серверов, являющихся Web-приложениями, широко используется язык
разметки гипертекста HTML (HyperTextMarkupLanguage). Фактически, все страницы, которые видят
посетители Web-сервера, составлены на языке HTML и содержат объекты различных типов
(изображения, анимацию, формы для ввода информации и т.д.). Если Web-сервер содержит только
статическую информацию, изменяющуюся эпизодически, ее можно представить в виде набора
документов HTML. Для их создания подходит практически любой текстовый редактор (даже
простейший Notepad).
5. Практическая работа№1
ДЕСКРИПТОРЫ HTML.ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ И ФОРМ
Цель работы:создать web страницу с использованием дескрипторовHTML, фреймов и форм.
Теоретический материал
HTML (Hyper Text Markup Language) - гипертекстовый язык разметки, является подмножеством
более сложного языка разметки SGML (Standard Generalized Markup Language). HTML как и любой
язык подразумевает некую стандартизованную структуру построения программы.
В общем виде синтаксис записи тега HTML в совокупности с его атрибутами имеет вид:
<тег имя_атрибута1= “значение” имя_атр.2 = “знач.” имя_атр.N = “знач.” >обрабатываемое
значение </закрывающий тег>
Значения атрибутов заключаются в прямые кавычки. Теги практически все парные:
открывающий и закрывающий; <тег>обрабатываемое значение</тег>
Соблюдается принцип вложенности:
<тег1><тег2> обрабатываемое значение </тег2></тег1>
HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут
содержать файлы с расширением *.html). Вот самый простой HTML-документ:
Пример 1:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>,
<BODY> и <Body> будут восприняты браузером
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес перехода]">выделенный фрагмент текста</A>
Пример 2:
<HTML>
<HEAD>
<TITLE>Примергиперссылок</TITLE>
</HEAD>
<BODY>
<H1>Связывание</H1>
<P>С помощью ссылок можно переходить к другим файлам
(например, к <A HREF="pr.htm">оглавлению </A>).</P>
<P>Можно выгружать файлы (например,
<A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc">это
руководство в формате Microsoft Word 2.0</A>) по FTP.</P>
<P>Можно дать пользователю возможность послать почту (например,
<A HREF="mailto:nc@iname.com">автору</A>).</P>
</BODY>
</HTML>
6. Изображения в HTML-документе
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Пример 1:
<HTML>
<HEAD>
<TITLE>Пример изображений</TITLE>
</HEAD>
<BODY>
<H1>Изображения </H1>
<P>Изображение можно встроить очень просто: </P>
<P><IMG SRC="picture.gif"></P>
<P>Кроме того, изображение можно сделать "горячим", то есть
осуществлять переход при нажатии на изображение:</P>
<P><A HREF="pr.htm"><IMG SRC="picture.gif"></A></P>
</BODY>
</HTML>
Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение
фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.
Аудио - видеоклипы и их применение
Форматы аудиофайлов: AU, WAV, MIDI, RA, MP3, WMA.
Форматы видеофайлов: AVI, WM, VIVO, QT, MPEG, RV.
Наиболее популярный способ – это использование простой ссылки на определенный звуковой
файл или видеоклип:
<A HREF = “1.wav”>Музыка (100 K)</A>
<A HREF = “1.avi”>Видеоклип (1.3 Mgb)</A>.
Второй способ – использование тега <EMBED>:
<EMBED src = “URL” width = “” height = “” autostart = true|false hidden = true|false loop = true|
false|N>
autostart – аудио- или видеоклип запускаются автоматически;
hidden – выводится или не выводится панель управления проигрывателя;
loop – количество воспроизведений;
Ввод звукового файла с помощью Internet Explorer:
<BGSOUND src = “URL” loop = N>.
Ввод видеоклипа с помощью InternetExplorer
<IMG src = ”1.gif ” dynsrc = “1.avi ” controls loop = N>
Фреймы
Фреймы - способ организации сайта, при котором Web - страница дробится на ряд отдельных
составляющих и собирается в главном окне браузера из нескольких независимых окон. При
использовании фреймов раздел <BODY> заменяется на раздел <FRAMESET>.
В общем виде синтаксис записи <FRAMESET> следующий:
<FRAMESET rows = “” cols = “” frameborder = 1|0 framespacing = “”>
<FRAME name = ”” target = “” scrolling = yes|no| auto src = “URL” frameborder = 1|0 noresize>
……..
<NOFRAMES>
<BODY>
Текст, отображаемый в браузерах, не поддерживающих фреймы
</BODY>
</NOFRAMES>
</FRAMESET>
7. Атрибуты: frameborder – отображать или нет на экране границы фреймов;
framespacing – толщина разделителей в пикселях;
rows, cols – задают соответственно количество горизонталей и вертикалей во фреймовом наборе
в пикселях, процентах, и относительных длинах;
scrolling – наличие полос прокрутки;
name – уникальное имя для данного конкретного фрейма;
src - адрес страницы, открываемой в данном фрейме;
target – информация о целевом фрейме (рекомендуется использовать значение по умолчанию
“contents”);
noresize – запрет на изменение пользователем размеров окна фрейма.
<NOFRAMES>, включающий теги <BODY></BODY>, позволяет записать произвольное
количество html - кода, который динамически преобразуется в самостоятельную Web - страницу в
случае, если клиентский браузер не поддерживает фреймы.
Тег <FRAMESET>, задающий параметры отображения всех фреймов в документе содержит
необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Атрибуты в
<FRAME>могут отменять параметры в атрибутах тега <FRAMESET>. Допускается вложение одного
элемента <FRAMESET> в другой.
Формы
Форма — это инструмент, с помощью которого HTML-документ может послать некоторую
информацию в некоторую заранее определенную точку внешнего мира, где информация будет
некоторым образом обработана. Форма открывается меткой <FORM> и заканчивается меткой
</FORM>.
Пример 1:
<HTML>
<HEAD>
<TITLE>Примерформы</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="pr0008.htm"><!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад, кглаве 8...">
</FORM><!--Это конец формы-->
</BODY>
</HTML>
Элементы управленияHTML
Элемент управления Тег Описание
Текстовое поле <INPUT TYPE=TEXT> Поле, предназначенное для ввода
однострочного текста или других данных
Многострочный текст <TEXTAREA> Поле, предназначенное для ввода
нескольких строчек текста.
Выключатель (checkbox) <INPUTTYPE=CHECKB
OX>
Выключатель, для ввода логических
переменных
Переключатель (radio
button)
<INPUT
TYPE=RADIO>
Переключатель, предназначенный для
выбора одного из нескольких вариантов
Кнопка (button) <BUTTON> Кнопка с произвольным внешним видом
Кнопка-
изображение(image map)
<INPUT TYPE=IMAGE> Графическое изображение, на котором
выделены области различной формы
(прямоугольники, овалы, многоугольники)
для гиперссылок на другие страницы
Отправка <INPUT
TYPE=SUBMIT>
Кнопка, предназначенная для завершения
ввода данных и отправки их на web-сервер
Пароль <INPUT
TYPE=PASSWORD>
Текстовое поле для ввода пароля. При
вводе символы пароля не отображаются на
экране, заменяясь звездочками
8. Сброс <INPUT
TYPE=RESET>
Кнопка, предназначенная для очистки всех
полей формы
Скрытое поле <INPUT
TYPE=HIDDEN>
Предназначен для хранения текста,
который не виден но экране, но доступен
при обработке формы
Список <SELECT>, <OPTION>,
<OPTGROUP>
Многострочный список, предназначенный
для выбора одного или нескольких
элементов
Файл <INPUT TYPE=FILE> Файл для загрузки на сервер
Атрибуты тега <FORM>:
ACTION - задает URL скрипта, который будет обрабатывать данные, введенные в форме. Если
атрибут не задан, то по умолчанию обработчиком будет назначен текущий скрипт или
документ.
METHOD - определяет способ передачи данных (GET или POST) скрипту-обработчику. Если
используется метод GET (по умолчанию), то все поля, описанные в форме, передаются в строке
URL в следующем виде: URL? name=value&name=value.
При использовании метода POST поля формы кодируются таким же образом, но передаются через
скрытые переменные, не используя строку URL. Метод POST обычно используется при передаче
большого объема данных или если необходимо скрыть от пользователя передаваемый набор полей.
Строка <FORMMETHOD="POST" ACTION="http://localhost/phpreader.php">означает, что
данные обрабатываются в скрипте phpreader.php.
Строка <INPUTTYPE ="SUBMIT" VALUE="Отправить"></FORM>означает, что все данные
будут переданы в скрипт phpreader.php с помощью специального типа кнопки TYPE ="SUBMIT"
TARGET. Задает имя фрейма, в котором будут отображен результат выполнения обработчика
формы.
ХОД РАБОТЫ:
Задание1:
1. Создать на диске отдельную папку для своих страниц.
2.Открыть блокнот (notepad) и набрать следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
3. Сохранить документ в своей папке, присвоив ему имя index.html
4. Открыть Internet Explorer (не закрывайте блокнот, он нам еще пригодится).
Файл - Открыть - кнопка Обзор -…- index.html).
Задание2:создайте произвольный текст.
Форматирование текста
Задание 1: окрасить слова «Добро Пожаловать» в красный:
<html>
<head>
9. <title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! :) </font>
</body>
</html> (прим.)
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной
части документа, но и размер шрифта, и вид шрифта (Arial).
Задание 2: выравняйте текст в вашем документе, используя соответствующие атрибуты.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
</body>
</html>
Примечание: Текст в документе, если не задавать абзацы, всегда выравнивается по умолчанию по
левому краю. Также запомните, что к абзацу уже не нужен тэг <br> для переноса строки.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
давней традиции тоже захотелось создать свою домашнюю страничку для моих
новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомиться
со мной, и у меня появится еще один виртуальный друг? :)
</p>
</body>
</html>
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
10. давней традиции тоже захотелось создать свою домашнюю страничку для моих
новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, написать пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомиться
со мной, и у меня появится еще один виртуальный друг?
</p>
</body>
</html> (прим.)
Заголовки предназначены для выделения небольшой части текста (строки, фразы), НО, если вы
хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то
исполь зуем тэг <font></font>:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
Атрибут size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным
шрифтом и нет принудительного переноса.
<html><head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
давней традиции тоже захотелось создать свою домашнюю страничку для моих
новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, написать пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомиться
со мной, и у меня появится <font size="+1"> еще один виртуальный друг?
:)</font>
</p>
</body></html>
Примечание: стандартный size (по умолчанию) ="+0".
Для того, чтобы делать текст курсивом, подчеркнутым, полужирным или фиксированным,
используйте следующие тэги:
<b>Полужирный текст</b>
<i>Наклонный текст (курсив)</i>
<u> Подчеркнутый текст </u>
Задание 3: измените код вашего документа следующим образом:
<html><head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
13. Задание 1:
1. Откройте программу Paint. Задайте размеры нового рисунка, например 50*50 точек.
2. Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.
Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.
3. Сохраните рисунок под именем picl.gif
4. Дайте команду Рисунок - Атрибуты. Установите флажок Использовать прозрачный цвет фона».
Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве
фонового.
5. Сохраните рисунок еще раз под именем picl.gif и закройте программу Paint.
6. Создайте документ под именем picture.htm в программе Блокнот.
7. Между тегами <BODY> и </BODY> наберите произвольный текст (4-5 строк) и установите
текстовый курсор в его начало.
8. Введитетег<IMG SRC="picl.gif " ALIGN="BOTTOM">.
9. Щелкните кнопку Сохранить
10.Откройте файл picture.htm.
11. Посмотрите на получившийся документ, обращая особое внимание на изображение.
12. Вернитесь в программу блокнот и измените значение атрибута: ALIGN="TOP". Щелкните кнопку
Сохранить.
13. Вернитесь в программу Internet Explorer и щелкните кнопку Обновить на панели инструментов.
Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между
созданными рисунками?
14. Вернитесь в программу Блокнот и измените значения атрибута: ALIGN ="LEFT". Щелкните кнопку
Сохранить.
15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.
Посмотрите, как изменился вид страницы при изменении атрибутов.
16. Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20.
Щелкните кнопку Сохранить.
17. Вернитесь в программу Explorer и щелкните на кнопке Обновить. Посмотрите, как изменился вид
страницы при изменении атрибутов.
18. Вернитесь в программу Блокнот и измените имя рисунка: SRC="pic2.gif. Щелкните кнопку
Сохранить.
19. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите, как
изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными
рисунками?
Задание 2:наберите следующий код и сохраните самостоятельно, загрузите в браузер. Выполните
изменения по своему усмотрению.
<html><head>
<title>Пример размещения иллюстрации отдельно от текста</title>
</head><body>
<H1 ALIGN=CENTER><B>Деньучителя</B></H1>
<P ALIGN=CENTER><IMG SRC="name.gif" ALT="Текст"></P><P >
Пусть вспыхнут в сердцах и глазах<br>
Всплески осеннего золота.<br>
Будьте смелее в мечтах,<br>
Будьте талантливы, молодцы!<br>.
</P>
Пусть лишь от чарки хмельной<br>
Вас посещает бессонница.<br>
Учительской верой большой<br>
Пусть сердце ребячье наполнится.<br>
Пусть будет пасмурным день –<br>
Задорный дух сохраните,<br>
14. Проверьте в себя и детей<br>
И… счастливы будьте, УЧИТЕЛЬ!<br>
</body></html>
Вставка и форматирование таблицы
Задание1:Создание таблиц.
1. Создайте документ под именем table.html в программе Блокнот.
2. Между тегами <BODY> и </BODY> наберите текст, который будет вводиться в последующих
пунктах этого упражнения. В данном упражнении используется список номеров телефонов.
3. Введите тег <TABLE BORDER="10" "WIDTH="100%" >
4. Введите строку: <CAPTION ALIGN="TOP"> список телефонов </CAPTION>
5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER"><ТН>Фамилия<ТН>Номер телефона
6. Определите последующие строки таблицы, предваряя каждую из них тегом <TR> и помещая
содержимое каждой ячейки после тега <TD>.
7. Последнюю строку таблицы задайте следующим образом:
<TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-
автомат.
8. Завершите таблицу тегом </TABLE>.
9. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое
внимание на влияние заданных атрибутов.
9. Измените ширину окна обозревателя и установите, как при этом
Задание 2:наберите следующий код и сохраните самостоятельно, загрузите в браузер. Выполните
изменения по своему усмотрению.
<html>
<head><title>Пример таблицы</title></head>
<body bgcolor=#aaddaa>
<h2 align=center>Примертаблицы</h2>
<P align=center>
<TABLE border=3>
<TR align=center>
<TD width=10%><I><B>1</B></I></TD>
<TD width=12%><I><B>2<br><font
size=2>(виртуальныйобраз)</font></B></I></TD>
<TD width=10%><I><B>3</B></I></TD>
<TD width=30%><I><B>4</B></I></TD>
<TD><B><I>5</I></B></TD>
</TR>
<TR>
<TD width=10%> 6</TD>
<TD width=10%>7</TD>
<TD width=10%>8</TD>
<TD width=30%>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD width=10% align=center >11 </TD>
<TD width=10% align=center >12</TD>
<TD width=10% align=center >13</TD>
<TD width=30%>14</TD>
</TR>
</TABLE>
</P>
15. </body></html>
Задание 3:наберите следующий код и сохраните самостоятельно, загрузите в браузер. Выполните
изменения по своему усмотрению.
<html><head><title>Пример таблицы</title></head>
<body>
<h2 align=center>Пример таблицы:<br>объединение ячеек</h2>
<P align=center>
<TABLE border=3>
<TR align=center>
<TD colspan=4>Вся строка как одна ячейка</TD>
<!-- вместо четырех - только один контейнер TD -->
</TR>
<TR align=center>
<TD>Отдельная ячейка</TD>
<TD>Отдельная ячейка</TD>
<TD>Отдельная ячейка</TD>
<TD>Отдельная ячейка</TD>
</TR>
<TR align=center>
<TD colspan=2 rowspan=2>Ячейка 2х2</TD>
<!-- пропуск второго контейнера -->
<TDcolspan=2>2 ячейки по ширине</TD>
<!-- пропуск четвертого контейнера -->
</TR>
<TRalign=center>
<!-- пропуск двух контейнеров TD, так как
их место занимает объединенная ячейка
в начале предыдущей строки -->
<TD>Отдельная ячейка</TD>
<TDrowspan=2>2 ячейки по высоте</TD>
</TR>
<TR align=center>
<TD>Отдельная ячейка</TD>
<TD>Отдельная ячейка</TD>
<TD>Отдельная ячейка</TD>
<!-- пропуск четвертого контейнера
(объединенная ячейка строкой выше) -->
</TR>
</TABLE></P></body></html>
Применение фрейма
Задание 1:
1. Создайте документ под именем frameset.htm в программе Блокнот.
2. Введите следующий текст:
<HTML>
<HEAD>
<ТIТLЕ>Описание фреймов</ТITLЕ>
</HEAD>
<FRAMESET ROWS="60%",*">
<FRAME SRC="table.htm">
<FRAMESET COLS="36%,65%" NORESIZE>
<FRAME SRC="pagel.htm">
<FRAME SRC="Iink.htm">
16. </FRAMESET>
</HTML>
3. Щелкните кнопку Сохранить.
4. Запустите данную страницу.
5. Изучите представление нескольких созданныхранее документов, в отдельных фреймах.
6. Просмотрите, что происходит при изменении ширины окна обозревателя.
7. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи
мыши.
8. Щелкните на ссылке, имеющейся в одном из фреймов и посмотрите, как будетотображен новый
документ.
9. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат кпредыдущему
документу на нарушает структуру фреймов.
10. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему
усмотрению. Сохраните документ под тем же именем.
Использование списков на странице
Задание 1:Создайте списки:
1. Создайте документ под именем spisok.html в программе Блокнот.
2. Между тегами <BODY> и </BODY> поместите текст следующих пунктов
3. Введите тег <OL TYPE="I">, который начинает упорядоченный список.
4. Введите в документ элементы списка, предваряя каждый из них тегом <LI>.
5. Завершите список при помощи тега </OL>.
6. Запустите созданную страницу spisok.html.
7. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое
внимание на способ нумерации, заданный при помощи атрибута TYPE=.
8. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного
списка.
9. Вставьте в документ тег <UL TYPE="SQUARE">, который начинает неупорядоченный список.
10.Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
11.Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите, как
изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута
TYPE=.
13. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного
списка.
14. Вставьте в документ тег <DL>, который начинает список определений.
15. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.
16. Вставьте в список соответствующие определения предваряя их тегом <DD>.
17 .Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.
18. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить.
19. Посмотрите как выглядит при отображении Web-страницы список определений.
Задание 2:наберите следующий код и сохраните самостоятельно, загрузите в браузер. Выполните
изменения по своему усмотрению.
<html><head><title>Примеры списков</title></head>
<body><h3 align=center>Примерысписков</h3>
<p align=center>
<table>
<tr bgcolor=#ffff00>
<td width=50% align=center><b><i>Маркированный список:</i></b></td>
<td align=center><b><i>Нумерованный список:</i></b></td>
</tr>
<tr>
17. <td width=50%>
<ul type=disc><li>январь
<li>февраль
<li>март</ul></td>
<td>
<ol start=1 type=1>
<li>понедельник
<li> вторник
<li> среда</ol></td>
</tr>
</table>
<table><tr bgcolor=#ffff00><td width=50% align=center>
<b><i>Список с несколькими уровнями вложенности:</b></i>
</td>
</tr>
</table>
<table width=40%><tr><td>
<ol start=1 type=I>
<li>Введение
<li> Назначение языка HTML
<li> Команды (тэги) HTML
<olstart=1 type=1>
<li> форматирование текста
<ul type=disc>
<li>жирность;
<li> наклон;
<li> подчеркивание;
<li>индексы:
<ul type=circle>
<li>нижние,
<li>верхние;
</ul>
<li>цвет
</ul>
<li> работа с абзацами
</ol>
<li> Дизайн страницы
<li> Размещение сайта на сервере
</ol>
</td></tr></table>
</p>
<!--<hr size=2>-->
</body>
</html>
Задание3:Создайте в Блокноте файл spiski.html.
1. Создайте списки:
Пример маркированного списка (круг):
• первый элемент списка;
• второй элемент списка;
• третий элемент списка.
Пример маркированного списка (окружность):
о текст
о текст
о текст
Пример маркированного списка (квадрат):
18. ■ работоспособность всех ссылок;
■ поддержку разных браузеров;
■ читаемость текста.
2. Создайте нумерованные списки:
Нумерация арабскими цифрами:
1. текст
2. текст
3. текст
Нумерация с 8:
8. текст
9. текст
10.текст
Нумерация римскими цифрами:
I. текст
II. текст
III.текст
Нумерация строчными римскими цифрами, начиная с 4:
iv. первый элемент списка;
v.второй элемент списка;
vi. третий элемент списка.
Нумерация прописными латинскими буквами:
A. текст
B. текст
C. текст
Нумерация строчными латинскими буквами:
a. текст
b. текст
c. текст
3. Создайте вложенный список:
Вложенный список:
I. Заголовок 1.
a. Раздел 1.1
b. Раздел 1.2
c. Раздел 1.3
II. Заголовок 2.
Раздел 2.1
Раздел 2.2
Раздел 2.3
III. Заголовок 3.
Раздел 3.1
Раздел 3.2
Раздел 3.3
Контрольные вопросы:
1. Из каких тегов состоит структура HTML страницы?
2. Где пишем тело HTML документа?
3. Для чего предназначен тег <HR>?
4. Как определяется абзац на странице?
5. Назовите виды теговHTML.
6. Для чего предназначен атрибут ALIGN?
7. Где отображается содержимое тега <title>?
8. Для чего предназначен тег FONT?
9. Назначение атрибута FACE.
10. Назначение тега BASEFONT.
11. Какой тег используется для создания таблицы?
19. 12. Каким тегом создаем строки таблицы?
13. Назначение атрибута BORDER?
14. Как объединяем строки и столбцы?
15. Назначение тега FRAME.
16. Какие виды списков можно создавать на странице?
17. Какими тегами создаем упорядоченные списки?
18. Какими тегами создаем маркированные списки?
20. Практическая работа №2
ДЕСКРИПТОРЫ CSS
Цель работы: приобретение практических навыков при работе с каскадными таблицами стилей.
Теоретический материал
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для
описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль
над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее
использования обычного набора HTML тегов.
Если нужно создать жирный красный подчеркнутый текст.
ПРИМЕР HTML:
<font color="red"><strong><u>Какой-тотекст</u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот
тут нам и поможет СSS. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные
таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) при
помощи специального атрибута помещаются прямо в HTML теги. Глобальные (Global Style Sheets)
определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть
использованы для нескольких документов сразу и хранятся во внешнем файле. Подробнее обо всем
этом написано ниже.
Структура и правила
Селекторы (Selectors):
Синтаксис:
селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль
элемента, для которого он определен.
ПРИМЕР:
H1 {color:red; size:20pt;}
Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (Class Selectors):
Синтаксис:
селектор.класс {cвойства}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные
стили для различных классов одних и тех же элементов.
ПРИМЕР:
H1.blue {color:blue; size:20pt;}
Все элементы H1 с атрибутом CLASS="blue" станут синими.
Классы могут так же быть описаны без явного привязывания их к определенным элементам.
Синтаксис:
.класс {свойства}
ПРИМЕР:
.green {color:green;}
В данном случае все элементы с атрибутом CLASS="green" станут зелеными.
ID селекторы (ID Selectors):
Cинтаксис:
21. #id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать
стилистическиеисключения cреди элементов одного класса. Индификаторы используются в основном
для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы
создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом.
Конечно, можно создать новый класс, но зачем? Проще описать ID. Например, "boldunderline". И все
элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом.
Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.
ХОД РАБОТЫ:
Задание 1: Наберите код и проанализируйте:
<html><head><title>Пример CSS </title></head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class="blue">Здравствуйте, этомоядомашняястраница. </p>
<p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p>
<p id="boldunderline">... Носкорооткроется</p>
</body></html>
Как видно из примера, атрибут ID может быть использован без указания класса (последний
параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере -
жирный, подчеркнутый текст).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается
только элементам в заданной последовательности в зависимости от каскадного порядка.
Задание 2: Измените код и проанализируйте:
P EM {color:silver;}
В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В
этом случае при определении селекторы перечисляются через запятую перед блоком свойств.
Задание 3: Измените код и проанализируйте:
h1,h2,h3,p,strong {color:green; font-style:italic;}
Все элементы h1, h2, h3, p и strong будут зелеными.
Псевдоклассы и псевдоэлементы:
Синтаксис:
селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и
автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные
типы одного элемента, создавая при определении собственные стили для каждого из них.
22. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента
вцелом стиль.
Список псевдоклассов и псевдоэлементов:
Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку.
Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL),
hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).First
Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами
(p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.First Letter Pseudo-element - first-letter.
Похож на first-line, но влияет не на всю строку, а только на первый символ.
Задание 4: Измените код и проанализируйте:
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном
состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Примечание: описания нескольких свойств для одного селектора, контекстуального селектора,
класса, индивидуально именованного стиля или группы объедененных селекторов отделяются друг от
друга точкой с запятой ";".
Внутренние Таблицы Стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования
обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута
STYLE в HTML теге.
ПРИМЕР HTML:
<font color="blue" size="3" face="Arial">Впередвбудущее</font>
ПРИМЕР INLINE STYLE SHEET:
<font style="color:blue; font-size:12pt; font-family:Arial">Впередвбудущее</font>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует
использовать только если необходимо задать определенному элементу свой индивидуальный стиль,
существующий в классификации CSS и нереализованный в HTML. Или же при необходимости
абсолютно позиционировть данный элемент.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE
type="text/css">. Он размещается в заголовке документа.
Задание 5: Измените код и проанализируйте:
<html><head><title> Пример Глобальных Таблиц Стилей </title></head>
<STYLE type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <font class="blue"> это </font> слово - синие, a <font id="bold"> это</font> - жирное.
</body></html>
23. В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы
с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут
жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>,
что менее граммотно.
Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и
xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле,
не утруждая себя составлением таблиц для каждого документа.
Задание 6: Файл styles.css:
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит
это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
Задание 7:
<html><head><title> Просто еще один пример </title></head>
<LINK rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание Документа
</body></html>
Контрольные вопросы:
1. Назначение CascadingStyleSheets.
2. Для чего предназначены селекторы?
3. Как придать нескольким элементам одинаковые свойства?
4. Назначение псевдоклассов и псевдоэлементов?
5. Назначение стилей.
6. Перечислите виды стилей.
24. Практическая работа №3
ПОСТРОЕНИЕ И ПРИМЕНЕНИЕ СКРИПТОВ НА ЯЗЫКЕ JAVASCRIPT
Цель работы: создание web-страниц с помощью внедрения сценариев JavaScript в код HTML.
Теоретический материал
При написании или редактированииJavaScript поля должны отсутствовать;
Для JavaScriptважен регистр букв.
Основная часть скрипта:
document.write("<FONTCOLOR='RED'>Иван рубил дрова </FONT>")
JavaScript написал код на странице, а HTML перекрасил текст в красный цвет.
Составляющие скрипта: указывается DOCUMENT (документ HTML) и те изменения, которые в
нем произойдут — что-то будет написано (WRITE). То, что будет написано, находится в скобках.
Настала очередь терминов. DOCUMENT представляет собой object (объект). Слово WRITE (писать),
отделенное точкой, называется method (методом объекта). Таким образом, скрипт попросту говорит:
«Возьмите объект (что-то, уже существующее) и припишите что-то к нему». Текст в скобках
называется instance (примером метода), он передает то, что происходит, когда метод воздействует на
объект. Имейте в виду, что текст внутри скобок находится в кавычках. Никогда нельзя про них
забывать. Текст в кавычках представляет собой простой HTML. Команду <FONT>, которая делает
текст красным. Дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это
конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже
ошибка. Запомните: внутри двойных кавычек ставятся одинарные.
ХОД РАБОТЫ:
Задание 1: Наберите следующий скрипт:
<SCRIPT LANGUAGE="javascript"> document.write("<FONT
COLOR='RED'>Иванрубилдрова</FONT>") </SCRIPT>
Задание 2:Измените скрипт так, чтобы вышли две строки текста, красная и синяя. Но вам придется
дописать несколько команд Javascript, а не просто добавить немного HTML к приведенному примеру.
На странице должно оказаться следующее:
Иван рубил дрова
Варвара топила печь
<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Иван рубил дрова</FONT><BR>")
document.write("<FONT COLOR='BLUE'>Варвара топила печь</FONT>")
</SCRIPT>
Эффект достигается добавлением в скрипт второй строки document.write и изменением кода
HTML внутри примера. Еще нужно добавить команду <BR> в конце первого примера, чтобы текст
располагался на двух строках.
Задание 3: Наберите скрипт и разберите ее работу (методы Дата и Время).
<SCRIPT LANGUAGE="JavaScript"> //Скрипт отмечает точную дату и время вашего прибытия на
страницу Now = new Date(); document.write("Сегодня " + Now.getDate()+ "-" + Now.getMonth() + "-" +
Now.getFullYear() + ". Вы зашли на мою страницу ровно в: " + Now.getHours() + ":" +
Now.getMinutes() + " и " + Now.getSeconds() + " секунд.") </SCRIPT>
25. Задание 4: Написать скрипт, который поместит на вашу страницу дату, разделенную дробями /.
Приветственный текст должен быть зеленого цвета. Также отметьте, что это вы написали скрипт,
потому что... так оно и есть!
SCRIPT LANGUAGE="JavaScript">
my = new Date();
var mpo = my.getMonth();
var mpo1 = mpo + 1
document.write("<font color='green'>Привет! Сегодняунас " + my.getDate() + "/" + mpo1 + "/" +
my.getFullYear() + "." + " Авремечкабыло, каквызаглянули, ровнехонько " + my.getHours() + " часов "
+ my.getMinutes() + " минути " + my.getSeconds() + " секунд.</font>");</SCRIPT>
Задание 5: Команда onMouseOver.
События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее
«встроены» в HTML-код, а не существуют самостоятельно. Они входят в структуру документа НТМL,
не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия
между вашей страницей и читателем.События — это то, что происходит. Они добавлют динамики
вашему сайту. onMouseOver - навести мышь.
<A HREF="http://www.rumart.net" onMouseOver="window.status='Бесплатныйхостинг'; return
true">Щелкни здесь</A>
Разберем скрипт
onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий
(Event Handler) гипертекстовой ссылки. Он используется внутри гиперссылки.Формат ссылки
остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же
после адреса URL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="".
Схема уже должна казаться вам немного знакомой: два элемента, разделенных точкой. До сих пор это
означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является
window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это
небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если
представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство
выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.
Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна.
Займемся пока окном и его строкой состояния.
После window.status следует знак равенства = и то, что должно произойти. В данном случае это
текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Пожалуйста, обратите внимание на точку с запятой в конце строки.
return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить,
есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит
событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько
раз вы не наводили бы на нее курсор.
Другие свойства
Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. В
HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно
соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку. которая
изменяла бы фон страницы с помощью обработчика onMouseOver.
1. Во-первых, раз это ссылка, то сохраним ту же схему, которой сегодня уже пользовались.
2. Что мы меняем, окно или нашего старого приятеля, документ? Куда идет команда bgColor, когда вы
пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на
document.
3. Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
4. Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор
на ссылку, потому вставляем return true после точки с запятой.
<a href="http://www.rumart.net" onMouseOver="document.bgColor='white'; return true">Нещелкать</a>
26. Если нужно и то, и другое нужно написать две команды onMouseOver.
Чтобы два события произошли одновременно, не будем разделять команды точкой с запятой,
так как это означает конец.
Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript,
происходящие одновременно.
Помните, в кавычки ставятся отдельные элементы вроде текста. Раз нам нужно, чтобы обе
команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце
второй. Таким образом мы показываем браузеру, что все это одно событие.
<a href="http://www.rumart.net" onMouseOver="document.bgColor='334775',
onMouseOver=window.status='Бесплатнаяпочта'; return true">Нещелкать</a>
Задание 6: Использование метода alert().
Метод, alert() -предупредить. Он вызывает небольшое диалоговое окно с текстом и кнопкой OK.
Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку.
Вот формат команды:
alert('текст в окошке')
<a href="les4.htm" onMouseOver="alert('Это задание после четвертого урока'); return true">Жми
сюда</a>
Внедрение кода JAVA в HTML. Разработка дизайна
ХОД РАБОТЫ:
Задание 1:Автоматическая активизация следующего текстового поля.
<HTML><HEAD><TITLE>Автоматическая активизация следующего текстового
поля</TITLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function autofocus(next, e) {
evt = (e) ? e : event;
var elem = (evt.target) ? evt.target : evt.srcElement
var key = evt.keyCode
var limit = elem.maxLength
if (key > 31 && elem.value.length == limit) {
elem.form.elements[next].focus();
}
}
</SCRIPT>
</HEAD><BODY><FORM>Введите номер кредитной карточки:
<INPUT TYPE="text" NAME="card1" SIZE="5" MAXLENGTH="4"
onkeyup="autofocus('card2', event)">
<INPUT TYPE="text" NAME="card2" SIZE="5" MAXLENGTH="4"
onkeyup="autofocus('card3', event)">
<INPUT TYPE="text" NAME="card3" SIZE="5" MAXLENGTH="4"
onkeyup="autofocus('card4', event)">
<INPUT TYPE="text" NAME="card4" SIZE="5" MAXLENGTH="4"
onkeyup="autofocus('card1', event)">
</FORM>
</BODY>
</HTML>
Задание 2:Создание формы с помощью сценария FormScript (файл Form.html).
<HTML><HEAD><TITLE>Форма, передающая данные методом get</TITLE>
</HEAD><BODY><FORM NAME="form1" Action="FormScript.html">
28. Поля Имя, Фамилия и Пол обязательны для заполнения</TD>
</TR></TABLE></FORM></BODY></HTML>
Задание 4:Выполнение выбранного из скрытого элемента.
<HTML><HEAD><TITLE>Выберите элемент из списка</TITLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function validate(form) {
if(!form.colorSelect.value) {
alert('Цвет не выбран!')
form.colorSelect.focus()
return false
}
return true
}
</SCRIPT></HEAD><BODY><FORM ACTION="process.cgi" NAME="myform"><SELECT
NAME="colorSelect">
<OPTION VALUE="" SELECTED>Выберите цвет</OPTION>
<OPTION VALUE="white">Белый</OPTION>
<OPTION VALUE="red">Красный</OPTION>
<OPTION VALUE="blue">Синий</OPTION>
<OPTION VALUE="green">Зеленый</OPTION>
<OPTION VALUE="yellow">Желтый</OPTION>
</SELECT><BR><BR>
<INPUT TYPE="submit" VALUE="Готово" onclick="return validate(this.form)">
</FORM></BODY>
Задание 5:Выбор цвета из двух взаимосвязанных списков.
<HTML><HEAD><TITLE>Двухуровневый выбор цвета</TITLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var name = new Array()
var code = new Array()
name[0] = new Array('Красный', 'Розовый', 'Оранжевый')
code[0] = new Array('#ff0000', '#ff66cc', '#ff9900')
name[1] = new Array('Зеленый', 'Болотный', 'Салатовый')
code[1] = new Array('#009900', '#999900', '#33ff00')
name[2] = new Array('Синий', 'Голубой', 'Фиолетовый')
code[2] = new Array('#0000ff', '#00ffff', '#9933ff')
function setGamma(gamma) {
var opt = document.form1.menu2.options
opt.length = 0
for (var i=0; i<3; i++) {
opt[i] = new Option(name[gamma][i], code[gamma][i])
}
}
</SCRIPT></HEAD><BODY><FORM NAME="form1">
<SELECT NAME="menu1" SIZE="3"
onchange="setGamma(this.value)">
<OPTION VALUE="0">Красный</OPTION>
<OPTION VALUE="1">Зеленый</OPTION>
<OPTION VALUE="2">Синий</OPTION>
</SELECT>
<SELECT NAME="menu2" SIZE="3" STYLE="width: 150px;"
onchange="document.body.style.backgroundColor=this.value">
</SELECT></FORM></BODY></HTML>
29. Задание 6:Создание формы для изменения количества строк. Ввести информацию о себе.
<HTML><HEAD><TITLE>Введите информацию о себе</TITLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function showMore(obj) {
var field = document.getElementById('advFields')
if (obj.checked) {
field.style.display = 'none'
} else {
field.style.display = 'block'
}
}
</SCRIPT></HEAD><BODY><FORM ACTION="reg.cgi" NAME="reg">
Логин:   <INPUT TYPE="text" NAME="login" SIZE="15"><BR>
Пароль: <INPUT TYPE="password" NAME="pass" SIZE="15"><BR>
Анонимный пользователь
<INPUT TYPE="checkbox" NAME="advanced" VALUE="1"
onclick="showMore(this)"><BR>
<FIELDSET ID="advFields"><DIV ALIGN="right">
Имя: <INPUT TYPE="text" NAME="name"><BR>
Фамилия: <INPUT TYPE="text" NAME="last"><BR>
Возраст: <INPUT TYPE="text" NAME="age"><BR>
E-mail: <INPUT TYPE="text" NAME="city"></DIV>
</FIELDSET><INPUT TYPE="submit" NAME="submit" VALUE="OK">
</FORM></BODY></HTML>
Контрольные вопросы:
1. Чтоозначают<SCRIPT language="JScript">и</SCRIPT>?
2. С чего начинается основная часть скрипта?
3. Перечислите составляющие скрипта.
4. В чем отличие двойных и одинарных кавычек?
5. Назначение событийJavaScript.
6. Какой знак ставим, чтобы отделить друг от друга разные команды JavaScript, происходящие
одновременно?
8. Назовите иерархию расположения свойств объектаJavaScript.
30. Практическая работа №4
ОРГАНИЗАЦИЯ РАБОТЫ С PHP. ЗНАКОМСТВО С PHP КОДЕРОМ
Цель работы:научиться производить локальную установку сервера WampServer и создавать
простейшие сценарии (скриптов) на PHP.
Теоретический материал
Программы PHP могут выполняться двумя способами: как сценарное приложение Web-сервером
и как консольные программы. Поскольку, нашей задачей является программирование web-
приложений, мы преимущественно будем рассматривать первый способ.
Дело в том, что на PHP, как правило, используется сугубо для программирования приложений,
связанных с Интернетом. Однако, PHP можно еще использовать в качестве интерпретатора командной
строки, в основном в *nix-системах. Последнее возможно при помощи CORBA и COM интерфейсов,
а также при помощи расширения PHP-GTK. При таком использовании PHP возможно решение
следующих задач:
создание приложений интерактивной командной строки;
создание кросс-платформенных GUI приложений при помощи библиотеки PHP-GTK;
автоматизация некоторых задач под Windows и Linux
Рассмотрим процесс выполнения php-сценария при обращении броузера к серверу. Итак, вначале
броузер запрашивает страницу с расширением .php, после чего web-сервер пропускает программу
через машину PHP и выдаёт результат в виде html-кода. Причем, если взять стандартную страницу
HTML, изменить расширение на .php и пропустить её через машину PHP, последняя просто перешлёт
её пользователю без изменений. Чтобы включить в этот файл команды PHP, необходимо заключить
команды PHP в специальные теги, которых различают 4 вида (они эквивалентны и можно использовать
любые):
Инструкция обработки XML:
<?php
...
?>
Инструкция обработки SGML:
<?
...
?>
Инструкция обработки сценариев HTML:
<script language = "php">
...
</script>
Инструкция в стиле ASP:
<%
...
%>
Мы будем придерживаться стиля XML или SGML.
Вообще говоря, внутри какого-либо блока кода можно выйти из PHP, при условии, что дальше
мы войдем в него снова и закончим код (Подробнее об этом смотрите в гл.2.). Т.е., возможна
следующая конструкция:
<?
if(5<3){
echo("<p>Hello, world!<p>");
?>
<p>Hello!</p>
// эта строка не интерпретируется как код PHP
// и выводится только если блок кода выполняется
<?
31. echo("<p>Hello, world!<p>");
}
?>
Команда echo в PHP применяется для вывода фактически всего, что встречается на web-
страницах (текст, разметку HTML, числа). Смысл ее действия, мы думаем, понятен из приведенного
примера.
Комментарии
PHP предоставляет несколько методов для вставки комментариев. Проще всего пользоваться
двойным слэшем (//), после чего PHP машина игнорирует все, что расположено до конца строки. Также
можно пользоваться многострочными комментариями в стиле С (/*…*/). Для однострочных
комментариев можно еще пользоваться символом решетки (#) (комментарий скриптовых языков
UNIX).
<php
echo("<p>Hello</p>"); // комментарий
echo("<p>Hello</p>"); # комментарий
/*
и это тоже комментарии
*/
?>
Следует помнить о том, что стили комментариев PHP действуют только внутри ограничителей
PHP. Если PHP встретит эти символы комментариев вне ограничителей, то они, как и любой текст,
будут помещены на html-страницу. Например:
<php
echo("<p>Hello</p>"); // нормальный комментарий
?>
// а вот этот комментарий отобразиться броузером.
<!-- Комментарий HTML.
Будет виден в исходном коде HTML, но не в браузере -->
Заметим, что комментарии можно вставлять не только после конца оператора, а, например, и вот
так:
<?
$a = "Hello, world";
echo strstr($a,"H");
// эту функцию мы рассмотрим позднее
?>
Переменные
В РНР переменные начинаются со знака доллара ($). За этим знаком может следовать любое
количество буквенно-цифровых символов и символов подчеркивания, но первый символ не может
быть цифрой или подчеркиванием. Следует также помнить, что имена переменных в РНР
чувствительны к регистру, в отличие от ключевых слов.
При объявлении переменных в РНР не требуется явно указывать тип переменной, при этом одна
и та же переменная может иметь на протяжении программы разные типы.
Переменная инициализируется в момент присваивания ей значения и существует до тех пор, пока
выполняется программа. Т.е., в случае web-страницы это означает, что до тех пор, пока не завершен
запрос.
Внешние переменные
После того, как запрос клиента проанализирован веб-сервером и передан РНР машине, последняя
устанавливает ряд переменных, которые содержат данные, относящиеся к запросу и доступны все
время его выполнения. Сначала РНР берет переменные окружения Вашей системы и создает
переменные с теми же именами и значениями в окружении сценария РНР для того чтобы сценариям,
