Приложение 1edu.semgu.kz/ebook/umkd/dd6f2606-3b9f-11e3-9713... · web view###002-003#2.3...

$$$UMKD_LANG$RU$$$UMKD_NAME$ Web-технологии$$$UMKD_AVTORS$ Курушбаева Динара Талгатовна, ст. преподаватель кафедры «Автоматизация и управление»$$$UMKD_YEAR$2013@@@###000-001#

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИРЕСПУБЛИКИ КАЗАХСТАН

СЕМИПАЛАТИНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТимени ШАКАРИМА

ЭЛЕКТРОННЫЙУЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС

ДИСЦИПЛИНЫ«Web -технологии »

для специальности: «5B070300» — «Информационные системы»

Составитель:Курушбаева Д.Т., ст. преподаватель кафедры «Автоматизация и управление»

Семей2013

&&&###000-002#Содержание

1. Рабочая программа2. Конспект лекций3. Лабораторные занятия4. Блок контроля знаний

&&&###000-003#Сведения об авторах ЭУМКД

Курушбаева Динара ТалгатовнаУченая степень: Магистр

Должность: Старший преподаватель кафедры «Автоматизация и управление»

Специализация:Контактные данные:

Рабочий телефон: +7 (7222)35-10-10Электронная почта: [email protected]

Skype: Нет

&&&###002-000#2 Рабочая программа1. Область применения2. Нормативные ссылки3. Общие положения4. Литература и ресурсы5. Содержание дисциплины, модульное разбиение дисциплины6. Перечень тем и содержание СРС7. Методические рекомендации по изучению дисциплины8. Формат курса9. Политика курса10.Политика выставления оценок11.Контроль знаний студентов12.Календарный график учебного процесса и дистанционных консультаций&&&###002-001#2.1 Область применения

Электронный учебно-методический комплекс дисциплины «Web-технологии», предназначен для студентов специальности «5B070300» — «Информационные системы», обучающихся по дистанционным образовательным технологиям (ДОТ). Он знакомит студентов с содержанием курса, его актуальностью и необходимостью, политикой курса, с теми навыками и умениями, которые студенты приобретут в процессе обучения. ЭУМКД является основным руководством при изучении дисциплины по ДОТ.&&&###002-002#2.2 Нормативные ссылки

Настоящий электронный учебно-методический комплекс дисциплины (ЭУМКД) «Web-технологии» устанавливает порядок организации учебного процесса по дисциплине с использованием ДОТ в соответствии с требованиями и рекомендациями следующих документов:

mailto:[email protected]

– Государственный общеобязательный стандарт образования специальности «050703» — «Информационные системы» ГОСО РК 3.08.329-2006, утвержден и введен в действие Приказом Министерства образования и науки Республики Казахстан от 23 декабря 2005 года, № 779.&&&###002-003#2.3 Общие положения

Общие сведения о преподавателях и дисциплине

Курушбаева Динара Талгатовна, старший преподаватель

Кафедра «Автоматизация и управление»Контактная информация – тел.: 36-02-16, учебный корпус №1, кабинет № 701Место проведения занятий - аудитории № 713,703, 705;Название дисциплины – «Web-технологии»;Количество кредитов — 3.

Выписка из рабочего учебного плана (таблица 1):

Выписка из рабочего учебного планаТаблица 1

Курс Семестр Кредиты Аудиторная работа СРС(час)

Всего(час)

Форма итогового контроляA3 (час) ДК (час)

1 1 3 12 По графику

123 135 экзамен(устно)

2.3.1 Дисциплина «Web-технологии» призвана дать студентам знания в области Интернет-техногий и научить создавать приложения для использования в сети Интернет.

В курсе «Web-технологии» изложены и подробно рассматриваются общие вопросы архитектуры вычислительных сетей, модель OSI, стандарты и стеки протоколов, IР-адресация и маршрутизация, служба разрешения доменных имен, информационные ресурсы Интернет и т.д.

2.3.2 Цель курса "Web-технологии" – освоение технологий, принципов организации и функционирования Интернет, обучение методам проектирования приложений для использования в среде Интернет.

2.3.3 Главная задача курса - научить студентов создавать собственные сайты в Internet. Содержательно курс обучает основным технологиям: HTML, CSS, JavaScript.

Основными задачами дисциплины являются: изучение языка гипертекстовой разметки HTML, рассмотрение основных

конструкции языка, приемов разметки и связи с другими инструментами разработки Web-страниц.

изучение способов гипертекстовой разметки с применением каскадных таблиц стилей (CSS): описание синтаксиса CSS, варианты размещения описания CSS в теле документа и за его пределами, подробно разобраны атрибуты CSS для блочных и строчных элементов разметки, разобраны методы позиционирования элементов разметки при помощи CSS.

изучение языка программирования JavaScript: внимание уделяется логике разработки JavaScript -кода и основным принципам его использования на страницах World Wide Web.

2.3.4 В результате изучения дисциплины студент должен: знать принципы организации, функционирования Интернет и Web-технологий

обработки информации; уметь создавать программные приложения на основе современных Web-

технологий; иметь представление о современных перспективах и тенденциях развития Web-

технологий.2.3.5 Пререквизиты курса: Информатика Алгоритмизация и языки программирования Технология программирования Основы информационных систем

2.3.6 Постреквизиты курса: Компьютерные сети Архитектура компьютерных систем

&&&###002-004#2.4 Литература и ресурсыОсновная1 Айзеке С., Dynamic HTML. Секреты создания интерактивных Web-страниц / СПб: БХВ-Петербург, 20012 Коржинский Н. Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript - 2-е изд., испр. и доп. - М: КноРУс, 20003 Котеров Д., Костарев А. РНР5 / СПб: БХВ-Петербург, 20054 Храмцов П.Б., Брик С.А., Русак А.М. Основы Web-технологий Курс лекций / Издательство: ИНТУИТ.РУ, 20035 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19976 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Дополнительная1 Ален Вайк, Джейсон Джиллиам. JavaScript. Полное руководство. /М: Вильямс, 20042 Байков В. Интернет: поиск информации, продвижение сайтов, ВНV-СПб, 2000.3 Вивек Шарма, Раджив Шарма Разработка Web-серверов для электронной коммерции. Комплексный подход. /М: Вильямс, 20014 Дарнелл Р., JavaScript справочник, Питер, 2000.5 Джекобсон Р., Office 2000 Автоматизация и Интернет возможности, Русская редакция, 2000.6 Джерри Брандебау. JavaScript: сборник рецептов/ СПб: Питер, 20017 Кузнецов М., Симдянов И., Голышев С. РНР5. Практика создания Web-сайтов. / СПб: БХВ-Петербург, 20058 Ларсон М.А. Создание Web-страниц с помощью Microsoft Office. Москва: Бином, 1998&&&###002-005#2.5 Содержание дисциплины, модульное разбиение дисциплины

Содержание дисциплины по модулям

Таблица 2Наименование

модуляНаименование темы Содержание Литература

1 2 3 8Лекционные и лабораторные занятия

Модуль 1 История возникновения Интернета. Понятие Интернета. Стек протоколов ТСР/IР.

История возникновения Интернета. Понятие Интернета. Стек протоколов ТСР/IР.

1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Интернет- протокол. Адресация в Интернете. Служба DNS.

Интернет- протокол. Адресация в Интернете. Служба DNS.


Протокол ТСР. Протокол ТСР. 1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Протокол НТТР. Протокол НТТР. 1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Обзор клиентских технологий Интернет. Понятие об языках разметки. SGML. HTML как приложение SGML.

Обзор клиентских технологий Интернет. Понятие об языках разметки. SGML. HTML как приложение SGML.

1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.:

Питер, 1999Модуль 2 Структура HTML-

документа. Основные элементы HTML

Структура HTML-документа. Основные элементы HTML


Элементы форматирования текста. Списки. Таблицы. Фреймы.

Элементы форматирования текста. Списки. Таблицы. Фреймы.


Модуль 3 Ссылки. Изображения. Ссылки. Изображения. 1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Таблицы стилей. Таблицы стилей. 1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Формы Формы 1 Фролов А.В., Фролов Г.В. Сервер Web своими руками /М: Диалог-МИФИ, 19972 Шафран Э. Создание Web-страниц; Самоучитель. - СПб.: Питер, 1999

Модуль 4 Сценарии. Объектная модель документа. Динамическое изменение содержания документа.

Сценарии. Объектная модель документа. Динамическое изменение содержания

1 Котеров Д., Костарев А. РНР5 / СПб: БХВ-Петербург, 2005

документа. 2 Храмцов П.Б., Брик С.А., Русак А.М. Основы Web-технологий Курс лекций / Издательство: ИНТУИТ.РУ, 2003

Обзор серверных технологий. CGI. Основные сведения о РНР.


1 Котеров Д., Костарев А. РНР5 / СПб: БХВ-Петербург, 20052 Храмцов П.Б., Брик С.А., Русак А.М. Основы Web-технологий Курс лекций / Издательство: ИНТУИТ.РУ, 2003

Технологии XML. Технологии XML. 1 Котеров Д., Костарев А. РНР5 / СПб: БХВ-Петербург, 20052 Храмцов П.Б., Брик С.А., Русак А.М. Основы Web-технологий Курс лекций / Издательство: ИНТУИТ.РУ, 2003

&&&###002-006#2.6 Перечень тем и содержание СРС

Перечень тем и содержание СРСТаблица 3

Номер варианта

Тема СРС Содержание СРС Срок сдачи (неделя)

Назначаемые баллы

1 2 3 4 50. Локальные компьютерные

сети.Локальные компьютерные сети.

1. Глобальные компьютерные сети.

Глобальные компьютерные сети.

2. Службы Интернета. Службы Интернета.3. Стандартная модель

взаимодействия открытых систем OSI (Open System Interconnection).

Стандартная модель взаимодействия открытых систем OSI (Open System Interconnection).

4. Соответствие уровней стека TCP/IP уровням модели OSI.

Соответствие уровней стека TCP/IP уровням модели OSI.

5. Локальные компьютерные сети.

Локальные компьютерные сети.

6. Глобальные компьютерные сети.

Глобальные компьютерные сети.

7. Службы Интернета. Службы Интернета.8. Стандартная модель

взаимодействия открытых систем OSI (Open System Interconnection).

Стандартная модель взаимодействия открытых систем OSI (Open System Interconnection).

9. Соответствие уровней стека TCP/IP уровням модели OSI.

Соответствие уровней стека TCP/IP уровням модели OSI.

&&&###002-007#2.7 Методические рекомендации по изучению дисциплиныДля успешного освоения дисциплины «Web-технологии» необходимо:

Изучать лекционный материал. Прорабатывать вопросы самоконтроля, размещенные после каждой лекции. Изучать материалы лабораторных занятий. Выполнять задания текущего контроля.

&&&###002-008#2.8 Формат курсаКонсультации по дисциплине «Web-технологии» проводятся дистанционно. Слушатели курса возможные вопросы могут размещать на форуме или присылать в виде сообщений.&&&###002-009#2.9 Политика курсаКаждому студенту необходимо основательно закреплять полученные знания и вырабатывать навыки самостоятельной работы. С этой целью предлагаемый ЭУМКД содержит лекционный материал, методические указания к выполнению лабораторных заданий, методические указания к выполнению заданий текущего контроля.&&&###002-010#2.10 Политика выставления оценокКаждый студент для получения положительного рейтинга по дисциплине должен набрать определенное количество баллов. Максимальное количество баллов: по итогам 1-рейтинга с 1 по 8 недели включительно – 300 баллов, по итогам 2-рейтинга с 9 по 15 неделю включительно – 300 баллов.Итого за семестр по дисциплине максимальное количество баллов – 600.Баллы выставляются за следующие виды работ:Баллы выставляются за следующие виды работ:1. За выполнение заданий по модулям:

задания по модулю 1 – максимальная оценка 135 баллов; задания по модулю 2 – максимальная оценка 135 баллов; задания по модулю 3 – максимальная оценка 115 баллов; задания по модулю 4 – максимальная оценка 115 баллов.

2. За участие и активность на он-лайн семинаре (за участие – 10 баллов, за активное участие максимум 40 баллов)3. За выполнение рубежных тестов (максимально по 30 баллов)Разбалловка по дисциплине представлена ниже в таблице 5.Контрольные сроки – конец 8-недели и конец 15-недели. Своевременно не сданные задания и тесты можно сдать на 15-неделе, но если студент не успевал по неуважительной причине, баллы будут выставляться со штрафными санкциями, 60% от выставленнных преподавателем баллов.

&&&###002-011#2.11 Контроль знаний студента

Контроль знаний студента по дисциплине осуществляется в форме: текущего контроля; рубежного контроля (8 и 15 недели); итогового контроля - проводится один раз в конце академического периода

(экзамен) в соответствии с ГОСО специальности.Студент, допускается к итоговому контролю по дисциплине, если за семестр его суммарный рейтинговый балл больше или равен 50%. Итоговый балл рассчитывается по результатам 1 и 2 рейтингов и экзамена. Удельный вес указанных форм контроля составляет сумму: 30% от результатов 1-рейтинга+30% от результатов 2-рейтинга студента+ 40% от результатов экзамена по дисциплине. Итоговая оценка по дисциплине определяется по шкале (Таблица 4).

Шкала оценок в буквенном эквиваленте, в баллах и процентахТаблица 4

Оценка по буквенной

системе

Цифрой эквивалент баллов

Процентное содержание

Оценка по традиционной системе

А 4,0 95 – 100 ОтличноА– 3,67 90 – 94В+ 3,33 85 – 89

ХорошоВ 3,0 80 – 84В– 2,67 75 – 79С+ 2,33 70 – 74

УдовлетворительноС 2,0 65 – 69С– 1,67 60 – 64D+ 1.33 55 – 59D 1,0 50 – 54F 0 0 – 49 НеудовлетворительноI NA - НезаконченныйP - прошел Прошел дисциплину

&&&###002-012#2.12 Календарный график учебного процесса и дистанционных консультаций

Календарный график учебного процесса и дистанционных консультацийпо дисциплине «Web-технологии»

Таблица 5№ п/п

Недели 1 2 3 4 5 6 7 8 Итого1-

рейтинг

1 Вид контроля ЗМ1 ЗМ2 +РК1 300 балло2 Баллы 135 135+30

в3 Консультации№ п/п

Недели 9 10 11 12 13 14 15 Итого2-

рейтинг1 Вид контроля ОС ЗМ3 ЗМ

4

РК2 300баллов

2 Баллы 40 115 115 303 Консультации

Обозначения: ЗМ-задание по модулю; ОС-он-лайн семинар; РК-рубежный контроль; OL- он-лайн консультация; OF-офф-лайн консультация

&&&$$$002-000-000$3.2 Лекции

&&&$$$002-001-000$3.2.1 Лекция №1. История возникновения Интернета. Понятие Интернета. Стек протоколов ТСР/IР

1. История возникновения Интернета.2. Понятие Интернета.3. Стек протоколов ТСР/IР.

&&&$$$002-001-001$3.2.1.1 История возникновения Интернета

Прародителем Интернет можно назвать организацию ARPA (Advanced Research Projects Agency) - Агентство передовых исследовательских проектов в области обороны при Министерстве обороны США (DOD), это агентство затем было переименовано в DARPA (Defense Advanced Research Projects Agency). Под эгидой (и финансированием) этого агентства была создана сеть ARPANET (Advanced Research Projects Agency NETwork). В декабре 1969 г. были объединены четыре узла этой сети: UCLA - Центр испытаний сети, Станфордский исследовательский институт, университет Санта-Барбары и университет Юта. Через год их стало уже пятнадцать, и они использовали для обмена пакетами протокол NCP - Network Control Protocol.Цель ARPANET состояла в том, чтобы дать возможность подрядчикам, университетам и сотрудникам Министерства обороны, участвующим в исследованиях и разработках оборонного характера, поддерживать связь по компьютерным сетям и совместно использовать вычислительные ресурсы тех немногих на то время мощных компьютеров, которые находились в разных географических точках. В 1975 году экспериментальную сеть объявили рабочей, причем ответственность за нее была возложена на DCA (Агентство Оборонной связи США). Одновременно, специалисты занялись разработкой основ TCP/IP (Transmission Control Protocol/Internet Protocol — Протоколы управления процессом передачи/Internet-протокол).Столь перспективные и интересные разработки привлекали внимание различных исследователей и исследовательских групп. DARPA систематически собирало неформальные встречи с ними для обмена идеями и обсуждения результатов экспериментов. С 1979 года в проект TCP/IP включилось так много исследователей, что DARPA образовало неформальный комитет для координации и управления разработкой протоколов и архитектур развивающегося объединенного Интернета. Названная Группа по Конфигурации и Управлению Интернетом (ICCB), эта группа регулярно собиралась до 1983 года, когда она была реорганизована и была организована Группа Активности Интернета (IAB - Internet Activities Board).

В 1983 году протоколы TCP/IP были приняты в качестве Военных Стандартов США (MIL STD), после чего от всех хостов (компьютеров), подключенных к APRANET стали требовать работать только с данными протоколами. Одновременно стал распространяться термин «Internet», в то время APRANET была разделена на две отдельных сети: MILNET (Военная Сеть) — несекретная часть Оборонной Сети Передачи данных (DDN) и новую (уменьшенных размеров) APRANET. Термин Internet употребляли тогда, когда имели в виду сразу обе сети. ARPANET стала прообразом современного Интернета. В 1985 г. под эгидой Национального научного фонда США (National Science Foundation, NSF) на основе технологии ARPANET была создана сеть NSFNET (the National Science Foundation NETwork –Сеть Национального научного фонда), в создании которой приняли непосредственное участие NASA и Министерство энергетики. Было соединено шесть крупных научно-исследовательских центров, оснащенных новейшими суперкомпьютерами, расположенных в разных регионах США. Основной целью создания этой сети было предоставление доступа к вычислительным ресурсам фонда (суперкомпьютерам) исследователям различных университетов США. Фонд поставил задачу, чтобы каждый ученый, каждый инженер в США оказались «подключены» к единой сети, а потому приступили к созданию сети с более быстрыми каналами, которая бы объединила многочисленные региональные и локальные сети. Это была первая инициатива, направленная на то, чтобы обеспечить широчайшему спектру научных организаций качественное и надежное соединение с Интернетом, и сеть NSFNET получила название Internet backbone (слово «backbone» означает «хребет», но в области телекоммуникаций наиболее распространенным вариантом перевода этого термина является словосочетание «опорная сеть»). Получившаяся сущность, известная как объединенный Интернет, Интернет DARPA/NSF, Интернет TCP/IP, или просто Интернет, позволяет исследователям всех связанных институтов разделять информацию с коллегами по всей стране так же легко, как если бы они были в соседней комнате.Важность создания NSFNET трудно переоценить. До появления первой опорной сети Интернет больше всего напоминал лоскутное одеяло, состоявшее из специализированных сетей, соединенных между собой в самых неожиданных местах. Инициатива NSF не предусматривала каких-либо функций, кроме транспортных, ее целью было исключительно объединение разрозненных сегментов в единое целое. Результат не замедлил сказаться –именно в 1985 году резко увеличилось количество подключенных к Сети организаций. К этому времени основная цель опорной сети NSF состояла в том, чтобы обеспечить связь между растущими региональными сетями, созданы различными университетскими системами. Термин "Интернет" начал употребляться с 1983 года для обозначения концепции взаимно коммутируемых сетей.В мае 1993 года NSF радикальным образом изменил архитектуру Интернета, поскольку правительство не хотело больше иметь дела с системами опорной сети. Вместо нее NSF выделило ряд «точек доступа в сеть» (NAP), в которых могли бы взаимодействовать друг с другом частные коммерческие опорные сети. В 1994 году NSF объявил о строительстве четырех NAP в Сан-Франциско, Нью-Йорке, Чикаго и Вашингтоне, округ Колумбия. Заказ NSF на четыре точки доступа в сеть был выполнен Ameritech, PacBell, Sprint и MFS Datanet. Дополнительная точка доступа, известная под названием MAE-West, была создана MFS Dananet на Западном побережье. Опорная сеть NSFNET была практически закрыта, а архитектура NAP превратилась в Интернет. Настоящий “расцвет” Интернета произошел с созданием World Wide Web (WWW) –всемирной паутины Интернет, основанный на технологии гипертекстовых документов, позволяющей пользователям Интернет иметь удобный доступ к любой информации, находящейся в глобальной сети. И если первоначально сети были в основном предназначены для удаленного доступа к суперкомпьютерам (сервис Telnet), то сейчас основной сервис Интернет –это WWW.&&&

$$$002-001-002$3.2.1.2 Понятие ИнтернетаПри соединении двух и более сетей между собой, возникает межсетевое объединение и образуется глобальная компьютерная сеть. Глобальная сеть может охватывать город, область, страну, континент и весь земной шар, а может охватывать географически всю страну, но не всех граждан.

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

Информация в Internet хранится на серверах. Серверы имеют свои адреса и управляются специализированными программами. Обмен информацией между серверами сети выполняется по высокоскоростным каналам связи (выделенным телефонным линиям, оптоволоконным и спутниковым каналам связи). Доступ отдельных пользователей к информационным ресурсам Internet обычно осуществляется через провайдера или корпоративную сеть.Провайдер - поставщик сетевых услуг – лицо или организация предоставляющие услуги по подключению к компьютерным сетям. В качестве провайдера выступает некоторая организация, имеющая модемный пул для соединения с клиентами и выхода во всемирную сеть.Существуют также компьютеры, которые непосредственно подключены к глобальной сети. Они называются хост - компьютерами (host - хозяин). Хост – это любой компьютер, являющийся постоянной частью Internet, т.е. соединенный по Internet – протоколу с другим хостом, который в свою очередь, соединен с другим, и так далее.

Структура глобальной сети Internet

Для подсоединения линий связи к компьютерам используются специальные электронные устройства, которые называются сетевыми платами, сетевыми адаптерами, модемами и т.д.

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

Отдельные пользователи подключаются к сети через компьютеры местных поставщиков услуг Интернета, Internet - провайдеров (Internet Service Provider - ISP), которые имеют постоянное подключение к Интернет. Региональный провайдер, подключается к более крупному провайдеру национального масштаба, имеющего узлы в различных городах страны. Сети национальных провайдеров объединяются в сети транснациональных провайдеров или провайдеров первого уровня. Объединенные сети провайдеров первого уровня составляют глобальную сеть Internet.

Передача информации в Интернет обеспечивается благодаря тому, что каждый компьютер в сети имеет уникальный адрес (IP-адрес), а сетевые протоколы обеспечивают взаимодействие разнотипных компьютеров, работающих под управлением различных операционных систем

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

Проще говоря, протокол — это правила передачи данных между узлами компьютерной сети.

Систему протоколов Интернет называют «стеком протоколов TCP/IP».&&&

$$$002-001-003$3.2.1.3 Стек протоколов ТСР/IРСтек протоколов TCP/IP — это два протокола нижнего уровня, являющиеся основой связи в сети Интернет. Протокол TCP (Transmission Control Protocol) разбивает передаваемую информацию на порции(пакеты) и нумерует все порции. С помощью протокола IP (Internet Protocol) все части передаются получателю. Далее с помощью протокола TCP проверяется, все ли части получены. При получении всех порций TCP располагает их в нужном порядке и собирает в единое целое.

Протокол IP (Internet Protocol) представляет собой протокол нижнего (сетевого) уровня и отвечает за передачу пакетов данных в сети. Он относится к так называемым протоколам датаграмм и работает без подтверждений. Последнее означает, что при его использовании доставка пакетов данных не гарантируется и не подтверждается. Не гарантируется также и то, что пакеты достигнут пункта назначения в той последовательности, в которой они были отправлены.

Очевидно, что намного удобнее передавать данные по каналу, который работает корректно, доставляя все пакеты по порядку. Поэтому над протоколом IP работает протокол передачи данных более высокого (транспортного) уровня — TCP (Transmission Control Protocol). Посылая и принимая пакеты через

протокол IP, протокол TCP гарантирует доставку всех переданных пакетов данных в правильной последовательности.Следует отметить, что при использовании протокола IP обеспечивается более быстрая передача данных, так как не тратится время на подтверждение приема каждого пакета. Есть и другие преимущества. Одно из них заключается в том, что он позволяет рассылать пакеты данных в широковещательном режиме, при котором они достигают всех компьютеров физической сети. Что же касается протокола TCP, то для передачи данных с его помощью необходимо создать канал связи между компьютерами. Он и создается с использованием протокола IP.В начале 80-х годов международные организации по стандартизации ISO (International Organization for Standardization), ITU (International Telecommunications Union) и другие разработали стандартную модель взаимодействия открытых систем OSI (Open System Interconnection). Назначение данной модели состоит в обобщенном представлении средств сетевого взаимодействия. Ее также можно рассматривать в качестве универсального языка сетевых специалистов ( справочной модели ).Поскольку сеть – это соединение разнородного оборудования, актуальной является проблема совместимости, что в свою очередь, требует согласования всеми производителями общепринятых стандартов. Открытой является система, построенная в соответствии с открытыми спецификациями.Спецификация представляет собой формализованное описание аппаратных (программных) компонентов, способов их функционирования, взаимодействия с другими компонентами, условий эксплуатации, особых характеристик. Под открытыми спецификациями понимаются опубликованные, общедоступные спецификации, соответствующие стандартам и принятые в результате достижения согласия после всестороннего обсуждения всеми заинтересованными сторонами. Использование открытых спецификаций при разработке систем позволяет третьим сторонам разрабатывать для этих систем аппаратно-программные средства расширения и модификации, а также создавать программно-аппаратные комплексы из продуктов разных производителей.Если две сети построены с соблюдением принципов открытости, это дает следующие преимущества:

Возможность построения сети из аппаратных и программных средств различных производителей, придерживающихся стандарта;

Безболезненная замена отдельных компонентов сети другими, более совершенными; Легкость сопряжения одной сети с другой.

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

$$$002-001-100$Лекция №1. Вопросы для самоконтроля1. Какова хронология создания Интернета?2. Что такое Интернет?3. Что такое протокол?4. Что такое провайдер?5. Что такое стек протоколов TCP/IP?

&&&$$$002-002-000$3.2.2 Лекция №2. Интернет- протокол. Адресация в Интернете. Служба DNS1. Интернет- протокол.2. Адресация в Интернете.3. Служба DNS.

&&&$$$002-002-001$3.2.2.1 Интернет- протокол

Сетевой протокол предписывает правила работы компьютерам, которые подключены к сети. Стандартные протоколы заставляют разные компьютеры "говорить на одном языке". Таким образом, осуществляется возможность подключения к Интернету разнотипных компьютеров, работающих под управлением различных операционных систем. При передаче данных используется стандартный протокол передачи данных TCP/IP. На самом деле в Интернете существует несколько уровней

протоколов, которые взаимодействуют друг с другом, но все они строятся на основе TCP/IP. Все остальные протоколы с помощью TCP/IP реализуют самые разные услуги Интернета.&&&

$$$002-002-002$3.2.2.2 Адресация в ИнтернетеВ сетях TCP/IP принято различать адреса сетевых узлов трех уровней:

аппаратные адреса (или MAC-адреса); сетевые адреса (IP-адреса); символьные (доменные) имена.

Одним из самых важных понятий IP-протокола является Интернет-адрес (IP-адрес). Каждый компьютер в сети TCP/IP имеет IP-адрес.IP-адрес имеет длину 4 байта (или 32 бита). Для удобства чтения адресов 32-битные числа разбивают на октеты по 8 бит, каждый октет переводят в десятичную систему счисления и при записи разделяют точками (W.X.Y.Z). Например, IP-адрес 10101100 00010000 00101111 01011110 записывается 172.16.47.94Следует заметить, что максимальное значение октета равно 111111112 (двоичная система счисления), что соответствует в десятичной системе 25510. Поэтому IP-адреса, в которых хотя бы один октет превышает это число, являются недействительными.

IP-адрес разделяется на две части, одна содержит номер сети, другая номер компьютера в этой сети. Номер сети и номер компьютера называют так же адресом или идентификатором (ID) сети и компьютера.

Существует 5 классов IP-адресов – A, B, C, D, E. Принадлежность IP-адреса к тому или иному классу определяется значением первого октета (W). Ниже показано соответствие значений первого октета и классов адресов.Класс IP-адреса A B C D EДиапазон первого октета 1-126 128-191 192-223 224-239 240-247IP-адреса первых трех классов предназначены для адресации отдельных узлов и отдельных сетей. Такие адреса состоят из двух частей – номера сети и номера узла.

Преимущества двухуровневой схемы очевидны: она позволяет, во-первых, адресовать целиком отдельные сети внутри составной сети, что необходимо для обеспечения маршрутизации, а во-вторых – присваивать узлам номера внутри одной сети независимо от других сетей. Естественно, что компьютеры, входящие в одну и ту же сеть должны иметь IP-адреса с одинаковым номером сети.

IP-адреса разных классов отличаются разрядностью номеров сети и узла, что определяет их возможный диапазон значений. Следующая таблица отображает основные характеристики IP-адресов классов A,B и C.

ХарактеристикаКлассA B C

Номер сети W W.X W.X.YНомер узла X.Y.Z Y.Z ZВозможное количество сетей 126 16 384 2 097 151Возможное количество узлов 16 777 214 65 534 254

Особые адресаЗапись адреса сети в целом W.0.0.0 W.X.0.0 W.X.Y.0Широковещательный адрес в сети W.255.255.255 W.X.255.255 W.X.Y.255

Например, IP-адрес 213.128.193.154 является адресом класса C, и принадлежит узлу с номером 154, расположенному в сети 213.128.193.0.

При использовании двоичной формы IP адреса значения первых бит адреса являются также признаками того, к какому классу относится тот или иной IP-адрес.На рисунке показана структура IP-адреса разных классов.

Рисунок. Структура IP-адреса

Таблица. Характеристики адресов разного класса

Большие сети получают адреса класса А, средние - класса В, а маленькие класса С.

Номер сети может быть выбран администратором произвольно, либо назначен по рекомендации специального подразделения Internet (Network Information Center, NIC), если сеть должна работать как составная часть Internet. Обычно провайдеры услуг Internet получают диапазоны адресов у подразделений NIC, а затем распределяют их между своими абонентами.

В протоколе IР существует несколько соглашений об особой интерпретации IР-адресов: Адрес 0.0.0.0 определяет адрес узла, который сгенерировал пакет. IP-адрес с нулевым номером сети обозначают текущую сеть. Эти адреса позволяют общаться

хостам собственной сети, не зная номера сети, а зная только класс сети. Адрес 255.255.255.255 используется для ограниченной широковещательной передачи в пределах

собственной сети (limited broadcast). IP-адрес с определенным номером сети и единицами в номере узла используется для

широковещательной передачи в пределах определенной сети (broadcast). Например, пакет с адресом 192.190.21.255 доставляется всем узлам сети 192.190.21.0.

Адрес 127.0.0.1 зарезервирован для организации обратной связи при тестировании работы программного обеспечения узла без реальной отправки пакета по сети.

&&&$$$002-002-003$3.2.2.3 Служба DNS

Для удобства компьютерам в Интернете кроме цифровых адресов присваиваются собственные имена. При этом также, как и в случае с IP-адресами, необходима уникальность этого имени. С этой целью была создана специальная система адресации - доменная система имен (Domain Name System) или сокращенно DNS.

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

Для облегчения использования Интернета, ввиду того, что просто невозможно запомнить адрес сервера по его IP-адресу (например, 127.0.0.1.), пользователям были предложены буквенные обозначения названий сайтов (его URL, к примеру, statiami.com). Однако, работа серверов построена на цифровых IP-адресах и именно для осуществления связи между человеком и машиной и была создана эта служба. Каждый раз, когда вы набираете доменное имя в браузере, служба DNS вычисляет какому IP-адресу соответствует это имя и какой именно ресурс нужно вам предоставить.

DNS – это сеть серверов с базами данных, распределенная в сети Интернет. Все серверы связаны между собой, и при поступлении запроса на расшифровку и невозможности по какой-либо причине определить его самостоятельно, сервер передает этот запрос другим подобным серверам по специально разработанным схемам, до тех пор пока доменное имя не будет переведено в IP-адрес. Услугами DNS серверов пользуются буквально все программы, которые работают в Интернет.

Ключевыми понятиями DNS являются: Доме́н (англ. domain — область) — узел в дереве имён, вместе со всеми подчинёнными ему

узлами (если таковые имеются), то есть именованная ветвь или поддерево в дереве имен. Структура доменного имени отражает порядок следования узлов в иерархии; доменное имя читается слева направо от младших доменов к доменам высшего уровня (в порядке повышения значимости), корневым доменом всей системы является точка ('.'), ниже идут домены первого уровня (географические или тематические), затем — домены второго уровня, третьего и т. д. (например, для адреса ru.wikipedia.org домен первого уровня — org, второго wikipedia, третьего ru). На практике точку в конце имени часто опускают, но она бывает важна в случаях разделения между относительными доменами и FQDN (англ. Fully Qualifed Domain Name, полностью определённое имя домена).

Поддомен (англ. subdomain) — подчинённый домен (например, wikipedia.org — поддомен домена org, а ru.wikipedia.org — домена wikipedia.org). Теоретически такое деление может достигать глубины 127 уровней, а каждая метка может содержать до 63 символов, пока общая длина вместе с точками не достигнет 254 символов. Но на практике регистраторы доменных имён используют более строгие ограничения. Например, если у вас есть домен вида mydomain.ru, вы можете создать для него различные поддомены вида mysite1.mydomain.ru, mysite2.mydomain.ru и т. д.

Эта форма записи адресов неудобна для людей. Запоминать такие адреса трудно. Поэтому существует более удобная форма записи, использующая систему имен доменов (DNS).Преобразование имен в цифровые адреса происходит автоматически: когда вы вводите имя, ваш компьютер обращается к серверам DNS, которые хранят информацию о соответствии символьных и цифровых имен.Домены отделятся друг oт друга точкой. Доменная система использует принцип последовательных уточнений. Домен верхнего уровня располагается в имени правее, а домен нижнего уровня - левее. Например, имя home.managers.company.ru можно расшифровать так:ru - суффикс, определяющий принадлежность домена. В данном примере суффикс ru указывает на российскую часть Интернета.company - фирма - пользователь Интернета. Интернет - адрес этой фирмы company.ru. Все компьютеры, подключенные к Интернету в этой фирме, объединены в группу, имеющую такой адрес.Подразделению менеджеров в компании выделен свой домен с именем managers. Его полное имя будет managers.company.ru

Одному из компьютеров в данном подразделении присвоено имя home.В результате Интернет - адрес этого компьютера home.managers.company.ru.

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

uk – Великобританияfr - Франция ru- Россияkz - Казахстан

Домен верхнего уровня может обозначать не только принадлежность стране, но и род деятельности организации:

соm - сервер принадлежит коммерческой организации

http://ru.wikipedia.org/wiki/%D0%A0%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D0%B4%D0%BE%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85_%D0%B8%D0%BC%D1%91%D0%BD

http://ru.wikipedia.org/wiki/%D0%A0%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D0%B4%D0%BE%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85_%D0%B8%D0%BC%D1%91%D0%BD

http://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%B3%D0%BB%D0%B8%D0%B9%D1%81%D0%BA%D0%B8%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA

http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B4%D0%B4%D0%BE%D0%BC%D0%B5%D0%BD


http://ru.wikipedia.org/wiki/FQDN


http://ru.wikipedia.org/wiki/%D0%94%D0%BE%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D0%B8%D0%BC%D1%8F

gov - сервер принадлежит правительственной организацииedu - сервер принадлежит учебной организацииnet - сервер принадлежит сетевой организации

Часто самое левое имя в адресе обозначает тип информации, на которую указывает данный адрес. Например, адрес www.microsoft.com указывает на страницу во Всемирной паутине.

&&&$$$002-002-100$Лекция №2. Вопросы для самоконтроля1. Что такое Интернет- протокол?2. Как осуществляется адресация в Интернете?3. Какую функцию выполняет служба DNS?

&&&$$$002-003-000$3.2.3 Лекция №3. Протокол ТСР1. Функции протокола TCP.2. Базовая передача данных.3. Достоверность.4. Управление потоком.5. Разделение каналов.6. Работа с соединениями.

&&&$$$002-003-001$3.2.3.1 Функции протокола TCP

Протокол TCP (Transmission Control Protocol, Протокол контроля передачи) обеспечивает сквозную доставку данных между прикладными процессами, запущенными на узлах, взаимодействующих по сети.TCP- надежный байт-ориентированный (byte-stream) протокол с установлением соединения. TCP находится на транспортном уровне стека TCP/IP, между протоколом IP и собственно приложением. Протокол IP занимается пересылкой датаграмм по сети, никак не гарантируя доставку, целостность, порядок прибытия информации и готовность получателя к приему данных; все эти задачи возложены на протокол TCP. При получении датаграммы, в поле Protocol которой указан код протокола TCP, модуль IP передает данные этой дейтаграммы модулю TCP. Эти данные представляют собой TCP-сегмент, содержащий TCP-заголовок и данные пользователя (прикладного процесса). Модуль TCP анализирует служебную информацию заголовка, определяет, какому именно процессу предназначены данные пользователя, проверяет целостность и порядок прихода данных и подтверждает их прием другой стороне. По мере получения правильной последовательности неискаженных данных пользователя они передаются прикладному процессу. Как указывалось ранее, главной целью протокола TCP является обеспечение надежного, безопасного сервиса для логических цепей или соединений между парами процессов. Ниже основные функции протокола TCP и их реализация рассмотрены более подробно.&&&

$$$002-003-002$3.2.3.2 Базовая передача данныхПротокол TCP способен передавать непрерывные потоки октетов между своими клиентами в обоих направлениях, пакуя некое количество октетов в сегменты для передачи через системы Internet. В общем случае протоколы TCP решают по своему усмотрению, когда производить блокировку и передачу данных.Иногда пользователям бывает необходимо убедиться в том, что все данные, переданные ими протоколу TCP, уже отправлены. Для этой цели определена функция проталкивания (push). Чтобы убедиться в том, что данные, отправленные протоколу TCP, действительно переданы, отправитель указывает, что их следует протолкнуть к получателю.Проталкивание приводит к тому, что программы протокола TCP сразу осуществляют отправление и, соответственно, получение остающихся данных. Правильно осуществленное проталкивание может быть невидимо для получателя, а сама функция проталкивания может не иметь маркера границы записи.&&&

$$$002-003-003$3.2.3.3 ДостоверностьПротокол TCP должен иметь защиту от разрушения данных, потери, дублирования и нарушения очередности получения, вызываемых коммуникационной системой Internet. Это достигается присвоением очередного номера каждому передаваемому октету, а также требованием подтверждения (ACK) от программы TCP, принимающей данные. Если подтверждения не получено в течение контрольного интервала времени, то данные посылаются повторно. Со стороны получателя номера очереди используются для восстановления очередности сегментов, которые могут быть получены в неправильном порядке, а также для ограничения возможности появления дубликатов.Повреждения фиксируются посредством добавления к каждому передаваемому сегменту контрольной суммы, проверки ее при получении и последующей ликвидации дефектных сегментов.До тех пор, пока программы протокола TCP продолжают функционировать корректно, а система Internet не развалилась полностью на составные части, ошибки пересылки не будут влиять на правильное получение данных. Протокол TCP защищает от ошибок коммуникационной системы Internet.&&&

$$$002-003-004$3.2.3.4 Управление потокомПротокол TCP дает средства получателю управлять количеством данных, посылаемых ему отправителем. Это достигается возвратом так называемого "окна" (window) вместе с каждым подтверждением, которое указывает диапазон приемлемых номеров, следующих за номером последнего успешно принятого сегмента. Окно определяет количество октетов, которое отправитель может послать до получения дальнейших указаний.&&&

$$$002-003-005$3.2.3.5 Разделение каналовЧтобы позволить на отдельно взятом компьютере многим процессам одновременно использовать коммуникационные возможности уровня TCP, протокол TCP предоставляет на каждом хост-компьютере набор адресов или портов. Вместе с адресами сетей и хост-компьютеров на коммуникационном уровне Internet они образуют сокет (socket - разъем).Как известно для взаимодействия между машинами по протоколу IP используются адреса и порты. Первое на текущий момент представляют из себя 32-x битный адрес, наиболее часто его представляют в символьной форме mmm.nnn.ppp.qqq (адрес разбитый на четыре октета по одному байту в октете и разделенный точками). Второе - это номер порта в диапазоне от нуля до 65535. Вот эта пара и есть сокет (гнездо, в котором расположены адрес и порт). В процессе обмена как правило используются два сокета - сокет отправителя и сокет получателя. Например при обращении к некоторому серверу на HTTP порт сокет мжет выглядеть так: 194.106.118.30:80, а ответ будет поступать на mmm.nnn.ppp.qqq:xxx

Каждое соединение уникальным образом идентифицируется парой сокетов. Таким образом, любой сокет может одновременно использоваться во многих соединениях.Соотнесение портов и процессов осуществляется каждым хост- компьютером самостоятельно. Однако оказывается полезным связывать часто используемые процессы (такие как "logger" или сервис с разделением времени) с фиксированными документированными сокетами.Этот сервис можно впоследствии использовать через известные адреса. Установка и настройка адресов портов для других процессов может включать более динамичные механизмы. &&&

$$$002-003-006$3.2.3.6 Работа с соединениямиМеханизмы управления потоком и обеспечения достоверности, описанные выше, требуют, чтобы программы протокола TCP инициализировали и поддерживали определенную информацию о состоянии каждого потока данных. Набор такой информации, включающий сокеты, номера очереди, размеры окон, называется соединением. Каждое соединение уникальным образом идентифицируется парой сокетов на двух концах.Если два процесса желают обмениваться информацией, соответствующие программы протокола TCP должны сперва установить соединение (на каждой стороне инициализировать информацию о статусе). По завершении обмена информацией соединение должно быть расторгнуто или закрыто, чтобы освободить ресурсы для предоставления другим пользователям.

Поскольку соединения должны устанавливаться между ненадежными хост-компьютерами и через ненадежную коммуникационную систему Internet, то во избежание ошибочной инициализации соединений используется механизм подтверждения связи с хронометрированными номерами очереди.&&&

$$$002-003-100$Лекция №3. Вопросы для самоконтроля1. Какова функция протокола TCP?2. Как выполняется базовая передача данных?3. Дать определение достоверности при передаче информации.4. Как осуществляется управление потоком при передаче информации?5. Как осуществляется разделение каналов при передаче информации?6. Как осуществляется работа с соединениями?

&&&$$$002-004-000$3.2.4 Лекция №4. Протокол НТТР1. HTML. Браузер.2. HTTP.3. Структура HTTP-запроса.4. Структура HTTP-ответа.

&&&$$$002-004-001$3.2.4.1 HTML. БраузерСлужба WWW (World Wide Web) - предназначена для обмена гипертекстовой информацией.

HTML. БраузерОсновная функция браузеров – превращение html кода в то, что мы видим на экране монитора.

HTML – это стандартный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Можно сказать, что html страницы – это своеобразная пища для браузера.

Браузер (Internet Explorer, Opera ...) является мультипротокольным клиентом и интерпретатором HTML. И как типичный интерпретатор, клиент в зависимости от команд (тегов) выполняет различные функции. В круг этих функций входит не только размещение текста на экране, но обмен информацией с сервером по мере анализа полученного HTML-текста, что наиболее наглядно происходит при отображении встроенных в текст графических образов.

Веб-серверВ общем смысле, веб-сервер – это компьютер, обслуживающий запросы к одному или

нескольким сайтам интернета. Клиент, в роли которого обычно выступает веб-браузер, передаёт веб-серверу запросы на получение ресурсов, обозначенных URL-адресами. Ресурсы — это HTML-страницы, изображения, файлы, медиа-потоки или другие данные, которые необходимы клиенту. В ответ веб-сервер передаёт клиенту запрошенные данные. Этот обмен происходит по протоколу HTTP.&&&

$$$002-004-002$3.2.4.2 HTTPHTTP (Hyper Text Transport Protocol) – это тот самый язык, на котором разговаривают браузеры

с веб-серверами.Сервер – это ПО, работающее на сайте, к которому вы обращаетесь с помощью веб-браузера.

Веб-браузер – это клиент. Сервер активизируется только тогда, когда к нему поступает запрос. Он обрабатывает его и посылает клиенту ответ. Протокол HTTP нужен именно для того, чтобы определить формат запросов и ответов.

Самое важное о HTTP: протокол предполагает наличие сервера и клиента (клиент посылает запрос «хочу страницу

index.html», сервер отвечает «на тебе эту страницу, вот ее содержимое») это текстовый протокол (запросы и ответы имеют понятный человеку вид, их можно читать в

обычном текстовом редакторе) каждое сообщение состоит из стартовой строки, заголовков и тела

HTTP - это протокол прикладного уровня, который, как правило, работает поверх транспортного протокола TCP. Работа по протоколу HTTP происходит следующим образом: программа-клиент устанавливает TCP-соединение с сервером (стандартный номер порта-80) и выдает ему HTTP-запрос. Сервер обрабатывает этот запрос и выдает HTTP-ответ клиенту.

Рисунок 1. Взаимодействие клиент и сервера по протоколу HTTP

Таким образом, в соответствии с моделью стека протоколов Интернета, прикладная программа, использующая протокол НТТР, должна по определенным правилам сформировать запрос, по протоколу ТСР установить соединение, передать серверу сформированный запрос, получить по протоколу ТСР ответ, оформленный по правилам протокола НТТР.

Так как протокол НТТР и другие протоколы прикладного уровня используют понятие URI (Uniform Resource Identifier - универсальный идентификатор ресурса), рассмотрим подробнее, как он определяется. Предварительно заметим, что в настоящее время понятие URI

практически совпадает с понятием URL (Universal Resource Locator -универсальный адрес ресурса).

URI состоит из следующих частей: тип, имя узла (домена), номер порта, путь, строка запроса и идентификатор фрагмента.

Тип - представляет собой протокол (это может быть также ftp, http).Узел - идентифицирует машину. Это может быть либо доменное имя, либо IP-адрес.Порт - номер порта, по которому проходит работа протокола. Может не указываться. В таком

случае подразумевается стандартный порт, используемый протоколом (80 для HTTP).Путь - представляет собой местоположение запрошенного ресурса. В зависимости от настроек

этот путь может соответствовать некоторому пути на сервере, но может и не соответствовать.Запрос - в случае использования сценариев в строке запроса могут передаваться параметры в

сценарий. Представляет собой набор пар имя/значение. Пары разделяются знаком &, а имя и значение разделяются знаком =.

Фрагмент - указывает на определенный раздел ресурса.URI может не содержать строки запроса и идентификатора фрагмента.Для URI не имеет значения регистр букв (нечувствителен к регистру).URI может быть абсолютным и относительным. Абсолютный ЦШ всегда начинается с типа

протокола. Пример абсолютного URI показан выше. Относительный URI, без имени протокола или номера порта, может содержать полные пути (всегда указываются с корневого каталога и начинаются со знака слеша /) или относительные пути (начинаются с символа, отличного от /).&&&

$$$002-004-003$3.2.4.3 Структура HTTP-запросаПосле установления TCP-канала между клиентом и сервером, клиент отправляет на сервер

запрос. В запросе указывается метод запроса, URL (Uniform Resource Locator, универсальный адрес ресурса), версия протокола HTTP и содержание запроса: информация клиента (параметры и сопровождающая информация) и, возможно, тело сообщения.

Когда вы набираете в веб-браузере «www.ya.ru», он отправляет по сети вот такое сообщение:GET / HTTP/1.1Host: ya.ru

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; ru; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: ru,en-us;q=0.7,en;q=0.3Accept-Encoding: gzip,deflateAccept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-alive

Начинается оно со стартовой строки:GET / HTTP/1.1

Стартовая строка запроса состоит из: названия метода (то есть имени основной операции, производимой над ресурсом, в нашем

примере «GET») имени документа (в нашем примере «/», главная страница сайта) версии протокола («HTTP/1.1»)

Основные методы: GET – используется при наборе адреса вручную или переходе по ссылке POST – используется при отправке формы

Строки после главной строки запроса имеют следующий формат: Параметр: значениe. Таким образом задаются параметры запроса. Это является необязательным, все строки после

главной строки запроса могут отсутствовать; в этом случае сервер принимает их значение по умолчанию или по результатам предыдущего запроса (при работе в режиме Keep-Alive).

Перечислю некоторые наиболее употребительные параметры HTTP-запроса: Connection (соединение)- может принимать значения Keep-Alive и close. Keep-Alive ("оставить в

живых") означает, что после выдачи данного документа соединение с сервером не разрывается, и можно выдавать еще запросы. Большинство браузеров работают именно в режиме Keep-Alive, так как он позволяет за одно соединение с сервером "скачать" html-страницу и рисунки к ней. Будучи однажды установленным, режим Keep-Alive сохраняется до первой ошибки или до явного указания в очередном запросе Connection: close.

close ("закрыть") - соединение закрывается после ответа на данный запрос. User-Agent - значением является "кодовое обозначение" браузера, например: Mozilla/4.0 (compatible; MSIE 5.0; Windows 95; DigExt) Accept - список поддерживаемых браузером типов содержимого в порядке их предпочтения

данным браузером, например для моего IE5: Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel,

application/msword, application/vnd.ms-powerpoint, */* Это, очевидно, нужно для случая, когда сервер может выдавать один и тот же документ в разных

форматах. Значение этого параметра используется в основном CGI-скриптами для формирования ответа,

адаптированного для данного браузера. Referer - URL, с которого перешли на этот ресурс. Host - имя хоста, с которого запрашивается ресурс. Полезно, если на сервере имеется несколько

виртуальных серверов под одним IP-адресом. В этом случае имя виртуального сервера определяется по этому полю.

Accept-Language - поддерживаемый язык. Имеет значение для сервера, который может выдавать один и тот же документ в разных языковых версиях.

Например, вот эта строкаUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; ru; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6

информирует веб-сервер о том, какой браузер и ОС у пользователя. Если бы это был запрос типа POST, то после заголовков располагалось бы тело сообщения. Там

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

HTTP-запрос может состоят всего лишь из одной-двух строк, в которых должны быть указаны имя запрашиваемого ресурса и поддерживаемая клиентом версия протокола HTTP, например,

GET /catalog/index.htm HTTP/1.0 Host: www.host.net

&&&$$$002-004-004$3.2.4.4 Структура HTTP-ответаПосле получения запроса, HTTP-сервер обрабатывает его и отправляет результат обработки

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

Код возврата - это код результата попытки HTTP-сервера понять и выполнить запрос. Код возврата должен состоять из трех цифр.

Итак, браузер послал веб-серверу запрос. Вот, что пришло ему в ответ:

HTTP/1.x 200 OKServer: nginxDate: Mon, 25 Jan 2010 22:21:14 GMTContent-Type: text/html; charset=utf-8Last-Modified: Tue, 12 Jan 2010 15:29:03 GMTTransfer-Encoding: chunkedConnection: keep-aliveContent-Encoding: gzip

(Здесь идут бинарные данные: HTML, упакованный методом gzip)

Формат ответа очень похож на формат запроса: он также имеет заголовок и тело, разделенное пустой строкой.

Заголовок также состоит из основной строки и строк параметров, но формат основной строки отличается от таковой в заголовке запроса.

Основная строка запроса состоит из 3-х полей, разделенных пробелами: Версия протокола - аналогичен соответствующему параметру запроса. Код ошибки - кодовое обозначение "успешности" выполнения запроса. Код 200 означает "все

нормально" (OK). Словесное описание ошибки - "расшифровка" предыдущего кода. Например для 200 это OK,

для 500 - Internal Server Error. Наиболее употребительные параметры http-ответа: Connection - аналогичен соответствующему параметру запроса.Если сервер не поддерживает Keep-Alive (есть и такие), то значение Connection в ответе всегда

close. Поэтому, правильной тактикой браузера является следующая:1. выдать в запросе Connection: Keep-Alive;2. о состоянии соединения судить по полю Connection в ответе. Content-Type ("тип содержимого") - содержит обозначение типа содержимого ответа. В зависимости от значения Content-Type браузер воспринимает ответ как HTML-страницу,

картинку gif или jpeg, как файл, который надо сохранить на диске, или как что-либо еще и предпринимает соответствующие действия. Значение Content-Type для браузера аналогично значению расширения файла для Windows.

http://www.host.net/

Некоторые типы содержимого: text/html - текст в формате HTML (веб-страница);text/plain - простой текст (аналогичен "блокнотовскому");image/jpeg - картинка в формате JPEG;image/gif - то же, в формате GIF;application/octet-stream - поток "октетов" (т.е. просто байт) для записи на диск.На самом деле типов содержимого гораздо больше. Content-Length ("длина содержимого") - длина содержимого ответа в байтах. Last-Modified ("Модифицирован в последний раз") - дата последнего изменения документа.

В примере ответ начинается со стартовой строки

HTTP/1.1 200 OK

что означает, что наш запрос обработан успешно. Нам присылают желанный документ, содержимое которого находится в теле HTTP ответа. Он сжат, о чем говорит заголовок «Content-Encoding». Браузер распаковывает тело ответа и получает HTML код, который и отображает на экране. HTML можно увидеть, нажав в браузере кнопку «Исходный код страницы», «View source».&&&

$$$002-004-100$Лекция №4. Вопросы для самоконтроля1. Что такое служба WWW?2. Для чего предназначен браузер?3. Что такое Веб-сервер?4. Каково назначение и функции протокола HTTP?5. Какова структура HTTP-запроса?6. Какова структура HTTP-ответа?

&&&$$$002-005-000$3.2.5 Лекция №5. Обзор клиентских технологий Интернет. Понятие о языках разметки. SGML. HTML как приложение SGML1. Обзор клиентских технологий Интернет.2. Понятие о языках разметки.3. SGML.4. HTML как приложение SGML.

&&&$$$002-005-001$3.2.5.1 Обзор клиентских технологий Интернет

Как было показано в предыдущей лекции, клиентские приложения для Интернета могут быть написаны на любом языке программирования с использованием протоколов Интернета. Эти приложения устанавливаются на машинах пользователей и предназначены для работы на определенной платформе. Однако существует класс приложений, выполняющихся на любом компьютере независимо от используемой платформы и операционной системы.Клиентская часть среды разработки Web-приложений состоит в основном из 4 частей:

Браузеры - служат пользовательским интерфейсом для приложения. HTML - язык гипертекстовой разметки. Документы в формате HTML поступают браузеру для

отображения. Клиентские расширения. По мере возрастания потребностей пользователей в активных Web-

документах появилась потребность работать с выполняемым содержимым в браузере. Для самой технологии не обязательно привязываться к работе конкретного браузера, хотя он и поддерживает ее. Примером клиентских расширений могут служить Java-апплеты, элементы управления ActiveX.

Клиентские языки сценариев. На сегодняшний день основным таким языком является JavaScript, тесно интегрированный с HTML.

&&&

$$$002-005-002$3.2.5.2 SGMLSGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки; произносится [эс-джи-эм-эл]) — метаязык, на котором можно определять язык разметки для документов. SGML — наследник разработанного в 1969 году в IBM языка GML (Generalized Markup Language), который не стоит путать с Geography Markup Language, разрабатываемым Open GIS Consortium.Изначально SGML был разработан для совместного использования машинно-читаемых документов в больших правительственных и аэрокосмических проектах. Он широко использовался в печатной и издательской сфере, но его сложность затруднила его широкое распространение для повседневного использования.Основные части документа SGML:1. SGML-декларация — определяет, какие символы и ограничители могут появляться в приложении;2. Document Type Definition — определяет синтаксис конструкций разметки. DTD может включать дополнительные определения, такие, как символьные ссылки-мнемоники;3. Спецификация семантики, относится к разметке — также даёт ограничения синтаксиса, которые не могут быть выражены внутри DTD;4. Содержимое SGML-документа — по крайней мере, должен быть корневой элемент.SGML предоставляет множество вариантов синтаксической разметки для использования различными приложениями. Изменяя SGML-декларацию, можно даже отказаться от использования угловых скобок, хотя этот синтаксис считается стандартным, так называемым concrete reference syntax.&&&

$$$002-005-003$3.2.5.3 HTML как приложение SGMLВсем известный язык HTML представляет собой одно из приложений SGML - набор определений тегов и их атрибутов, записанный на языке SGML. Можно сказать, что синтаксис разметки HTML (например, особая роль символов "<", ">", "&") унаследован из собственно SGML, тогда как имена конкретных тегов и набор атрибутов каждого из них у HTML свои. Вся специфическая для HTML информация задается с помощью особой конструкции языка SGML, называемой "определение типа документа" (Document Type Definition, DTD). В идеале DTD - высший авторитет во всем, что касается синтаксиса той или иной версии HTML.&&&

$$$002-005-100$Лекция №5. Вопросы для самоконтроля 1. Какие существуют клиентские технологии Интернет?2. Для чего предназначены языки разметки?3. Что такое SGML?4. Какие функции выполняет HTML как приложение SGML?

&&&$$$002-006-000$3.2.6 Лекция №6. Структура HTML-документа. Основные элементы HTML1. Структура HTML-документа.2. Теги HTML.

&&&$$$002-006-001$3.2.6.1 Структура HTML-документаHTML (Hypertext Markup Language, язык гипертекстовой разметки) представляет собой язык,

разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.Стандарт HTML и другие стандарты для Web разработаны под руководством World Wide Web Consortium (консорциум World Wide Web) — W3C.

Документы HTML являются обычными текстовыми ASСII–файлами. Это означает, что для их создания вы можете использовать любой текстовый редактор, даже с минимальными возможностями.

Существуют средства редактирования, разработанные специально для написания HTML.В качестве инструментария можно использовать такие приложения как Блокнот, Word,

Far(Sift+F4), а так же html-редакторы, типа Hot Dog, Microsoft FrontPage, Macromedia Dreamweaver, CoffeCup и другие.

Документ HTML содержит текст (содержимое страницы) и встроенные теги с инструкциями о структуре, внешнем виде и функции содержимого.

Документ HTML разделяется на две основные части: заголовок — head и тело — body. Заголовок содержит такие сведения о документе, как его название и мета-информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).Пример демонстрирует теги, образующие основной структурный скелет документа HTML:<HTML><HEAD><TITLE> Название документа </TITLE></HEAD><BODY>Содержимое документа</BODY></HTML>&&&

$$$002-006-002$3.2.6.2 Теги HTMLКаждый тег состоит из имени, за которым может следовать список необязательных атрибутов,

все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега.

КонтейнерыБольшинство тегов являются контейнерами. Это означает, что у них имеется открывающий или

стартовый и закрывающий теги.Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/). Конечный тег никогда

не содержит атрибутов. Контейнерные теги обозначаются следующим образом: < >...< / >. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции.

Например: Текст будет <u>подчеркнут</u>. Результат: Текст будет подчеркнут.

В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Это разрешено не всем тегам, и не все браузеры прощают их отсутствие.

Автономные теги

Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>, он просто помещает графику в поток страницы. Другие автономные теги — это разрыв строки (<bг>), горизонтальная линейка (<hr>) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как <meta> и <base>.

Атрибуты

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен.

Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных).

Вложенные теги

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

Например:Пример<B><I>вложенного</I></B>тега.Результат: Пример вложенного тега.Часто встречающейся ошибкой является перекрытие тегов.&&&

$$$002-006-100$Лекция №6. Вопросы для самоконтроля1. Какова структура HTML-документа?2. Что такое теги HTML?3. Что такое контейнеры?4. Что такое автономные теги?5. Что такое вложенные теги?6. Что такое атрибуты тегов?

&&&$$$002-007-000$3.2.7 Лекция №7. Структура HTML-документа. Основные элементы HTML1. Структурные теги HTML.

&&&$$$002-007-001$3.2.7.1 Структурные теги HTMLТег <html> (<html> … </html>)Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен

на HTML. Тег <head> (<head>... </ head >)Тег <head> определяет заголовок, то есть часть документа, которая содержит информацию о

документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как <base>, <meta> и <title>, т.е. заключаются между тегами <head> и </head>.

Тег <title> определяет название документа, которое появится в верхней строке окна браузера. Тег <meta> содержит дополнительные сведения о документе. Обычно он используется для

добавления ключевых слов, по которым осуществляется поиск в документе, а также для реализации функции автоматического запроса пользователем обновления страниц.

Тег<body> (body>…</body>)Тег <body> определяет начало и конец основной части (тела) HTML-документа. В теле

документа находится его содержимое (часть документа, которая выводится в окно браузера). Атрибуты этого тега оказывают влияние на весь документ.У тега <body> есть свои атрибуты:

Атрибуты:alink = "#rrggbb" или имя цветаЗадает цвет активной ссылки (то есть цвет ссылки, выбираемой щелчком на ней кнопки мыши). background = ur1Задает путь к графическому файлу, который будет использован в качестве фоновой заставки документа. bgcolor = "#rrggbb" или имя цветаЗадает фоновый цвет документа. link = "#rrggbb" или имя цветаУстанавливает цвет по умолчанию для всех ссылок, имеющихся в документе. text = "#rrggbb” или имя цветаУстанавливает цвет по умолчанию для всего текста документа. vlink = "#rrggbb" или имя цветаУстанавливает цвет посещенных ссылок.

Только Navigator 4.0:

marginwidth = числоЗадает расстояние (в пикселах) между левой границей браузера и началом текста и графики, выводимых в окне. marginheight = числоЗадает расстояние (в пикселах) между верхней границей браузера и текстом или графикой, выводимыми в окне.

Только Internet Explorer: bgproperties = "fixed"Если задано значение "fixed", то фоновое изображение не прокручивается вместе с содержимым документа. leftmargin = числоЗадает расстояние (в пикселах) между левой границей браузера и началом текста и графики, выводимых в окне. topmargin = числоЗадает расстояние (в пикселах) между верхней границей браузера и верхней границей текста или графики, выводимых в окне.Для максимальной идентичности отображения в различных браузерах (Navigator 4.0 , Internet Explorer и т.д.) желательно прописывать атрибуты для каждого из них.

Цвет задается именем цвета или шестнадцатеричным RGB-значением (RED – GREEN – BLUER). На каждый цвет отводится 256 значений, обозначающих присутствие того или иного компонента в результирующем цвете. &&&

$$$002-007-100$Лекция №7. Вопросы для самоконтроля1. Какие теги относятся к структурным тегам?2. Какие атрибуты необходимо указывать для структурных тегов?

&&&$$$002-008-000$3.2.8 Лекция №8. Элементы форматирования текста. Списки. Таблицы. Фреймы1. Элементы форматирования текста.

&&&$$$002-008-001$3.2.8.1 Элементы форматирования текстаВывод текста — это, возможно, самый простой этап в процессе создания страницы, поскольку

вы можете набрать текст непосредственно в HTML-файле, и он будет отображен браузером как обычный текст.Но нужно помнить, что браузеры форматируют текстовую информацию только в соответствии с тегами разметки. Ниже рассмотрим несколько тегов разметки текста.

Тег <p> (<p>…</p>)Тег обозначает начало и конец абзаца, если используется как контейнер. Многие браузеры допускают начинать новый абзац при помощи тега <p> без закрывающегося тега </p>. Метод контейнера является предпочтительнее.

Теги <h1>…</h6> (<h1>…</hn>)Тег определяет, что вложенный текст является заголовком. Существует шесть размеров шрифта заголовков (от одного до 6, причем первый номер соответствует самому крупному шрифту). На рис. показаны заголовки, выведенные шрифтами всех шести размеров.Чтобы воспользоваться заголовком с размером букв первого номера, нужно обозначить выделяемый текст тегами<h1>и</h1>.Этот текст должен располагаться в части, отделенной тегами <BODY>и</BODY>.Теги заголовков автоматически выполняют возврат каретки и оставляют пустую строку после текста между тегами <hn> и </hn> (где n — уровень заголовка), в этих случаях нет необходимости думать о тегах перевода строки или нового абзаца.

Атрибуты для тегов <hn>, <p> align=center | left | right

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

Тег <center> (<center>…</center>)Центрирует вложенный текст горизонтально на странице.

Тег <b> (<b>…</b>) Вложенный текст выводится полужирным шрифтом.

Тег <strong> (<strong>…</strong>) Вложенный текст выводится жирным шрифтом, однако каждый браузер интерпретирует «strong» по-своему, что приводит к расхождениям. Что касается термина «bold», все понимают одинаково, что он означает.

Тег <i> (<i>…</i>) Вложенный текст выводится курсивом.

Тег <blink> (<blink>…</blink>) Тег заставляет мигать вложенный текст. Мерцание является, возможно, одним из самых раздражающих средств HTML. Тег <blink> не работает в браузере Microsoft Internet Explorer.

Тег <s> (<s>…</s>) Вложенный текст выводится как зачеркнутый. Текст выглядит как обычный текст, перечеркнутый горизонтальной чертой.

Тег <u> (<u>…</u>) Вложенный текст при выводе будет подчеркнут.Тег <small> (<small>…</small>)

Определяет размер шрифта на один меньше, чем у окружающего текста.Тег <big> (<big>…</big>)

Определяет размер шрифта на один размер больше, чем у окружающего текста.

Тег <span> (<span>…</span>)Это контейнер нулевого текста, используемый для идентификации совокупности встроенных символов. Он не влияет на стиль вывода.

Тег <strike> (<strike>…</strike>)Вложенный текст выводится как зачеркнутый (перечеркнутый горизонтальной линией).

Tег <font> (<font>…</font>)Тег <font> позволяет управлять стилем, цветом, размером и видом шрифта в гораздо большей степени, чем стандартные теги <b> и <i>.Он использует для этого атрибуты size, color и face.

Задание размера тегом <font>Для настройки размера шрифта нужно использовать атрибут size тега <font>. Текст может быть

выведен шрифтом семи различных размеров — от 1 (наименьший) до 7 (наибольший). Текст без использования тега <font> выводится шрифтом размера 3. Это означает, что есть четыре варианта увеличения размера шрифта (4-7) и два варианта уменьшения (1-2). Для этого нужно поставить в начале и в конце фрагмента тег <font>, причем в начало добавить ключевое слово size=. Смотреть пример 4. Тег <font> устанавливает размер шрифта на два номера больше, чем обычно (т.е. если size=5, то размер шрифта будет равен 7).

Задание относительного размера шрифтаТег <font> имеет дополнительные возможности для задания размера шрифта основного текста.

Вместо определенного номера вы можете задать относительный размер шрифта, например +5 или -1. Web-браузер прибавляет (или вычитает) заданное число к номеру шрифта, используемого по умолчанию (размер 3). Поскольку шрифт обычно имеет размер 3, то в первом случае размер шрифта равен 8 (3+5=8), а во втором равен 2 (3-1=2). На рис. 2 показано, как приведенные HTML-строки выглядят на Web-странице.Часто относительное задание размеров используется для вывода первой буквы фразы более крупным шрифтом, чем остальное предложение. Этот метод позволяет привлечь внимание к определенному фрагменту Web-страницы.

Задание шрифта тегом <font>Internet Explorer позволяет задавать начертание (гарнитуру) шрифта, которым текст будет

выведен на экран, с помощью нового ключевого слова face в теге <font>. Браузер попытается отобразить текст тем альтернативным шрифтом, который вы указали. Смотреть пример 4.

Блок просматривает строку со списком шрифтов до тех пор, пока не найдет шрифт, установленный в системе, который можно использовать для вывода текста. Если да, браузер отображает текст, используя этот шрифт. Если по какой-либо причине не удается найти шрифт, браузер просто выводит текст стандартным шрифтом.

Задание цвета тегом <font>Использование ключевого слова color тега <font> дает возможность задавать один из

нескольких цветов для отображения текста.В вашем распоряжении 16 стандартных цветов, которые вы можете задавать непосредственно по именам. Кроме этого вы можете задавать цвета, смешивая различные оттенки красного, зеленого и синего, как описано выше.

Тег <br> Тег конца строки. Аналогичен тегу нового абзаца только он не вводит пустую строку после отделяемого им текста.&&&

$$$002-008-100$Лекция №8. Вопросы для самоконтроля1. Для чего предназначен тег <p>…</p>?2. Для чего предназначены теги <h1>…</h1>, … <h6>…</h6>?3. Для чего предназначен тег < center >…</ center >?4. Для чего предназначен тег < b >…</ b >?5. Для чего предназначен тег < i >…</ i >?6. Для чего предназначен тег < strong >…</ strong >?7. Для чего предназначен тег < blink >…</ blink >?8. Для чего предназначен тег < c >…</ c >?9. Для чего предназначен тег < u >…</ u >?10. Для чего предназначен тег < small >…</ small >?11. Для чего предназначен тег < big >…</ big >?12. Для чего предназначен тег < span >…</ span >?13. Для чего предназначен тег < strike >…</ strike >?14. Для чего предназначен тег < font >…</ font >?

&&&$$$002-009-000$3.2.9 Лекция №9. Элементы форматирования текста. Списки. Таблицы. Фреймы1. Списки.2. Таблицы.3. Фреймы&&&$$$002-009-001$3.2.9.1 СпискиСписки — это элементы HTML, облегчающие представление информации в удобном формате.

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

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

При правильном использовании Списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру.

Списки удобны для перечисления информации по пунктам. Пример 10, приведённый ниже, отображает запись маркированного списка.

Списки помогают организовать информацию. Такую страницу посетители скорее прочтут,

поскольку, бегло взглянув на список, можно быстро найти в нем то, что нужно.Различные типы списков.Существует три основных типа списков:

- маркированные;- нумерованные;- списки определений;- вложенные.

Есть и другие типы, но эти три наиболее часто используются. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре.

Создать список довольно легко. Сначала введите теги открытия и закрытия списка (<UL> и </UL>, <OL> и </OL> или <DL> и </DL>). Затем перед текстом каждого пункта списка введите тег <LI>. Наконец, введите заголовок списка между тегами заголовка <LH> и < / LH>.

Обратите внимание на пробелы между каждым тегом <LI> и первой буквой соответствующего элемента списка. Следите за тем, чтобы у вас или всегда был пробел после тега <LI>, или никогда его не было. Если вы будете то использовать пробел, то нет, текст будет выглядеть неряшливо, поскольку браузеры отображают все пробелы, которые вы включаете в текст. Если же вы прилежны, список будет отображен ровно.

Маркированный списокВ маркированном списке (Unordered List) каждому элементу списка предшествует символ

bullet (пуля – символ также может быть графическим изображением). Маркированный список задается тегами <UL> и </UL>, а пункты списка между этими тегами — с помощью тега <LI>.

<UL> <LI> </UL>

Наберите текст первого пункта после тега <LI>. Для ввода каждого следующего пункта наберите тег <LI>, а затем текст пункта. Затем введите непосредственный заголовок списка с помощью тегов <LH> и <LH>. Web-браузеры автоматически отображают текст, отмеченный как заголовок, в формате, немного отличающемся от формата остального текста. Все теги <LI> и <LH> должны располагаться между тегами маркированного списка <UL> и </UL>.

Нумерованный списокВ нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер.

Нумерованный список задается с помощью тегов <OL> и </OL>. Как и в маркированном списке, каждый пункт задается тегом <LI>. По умолчанию номера начинаются с 1.

По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1,2,3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры (I, II, III, IV и т. д.). Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TYPE. Ниже приведены пять возможных способов нумерации:

• TYPE=1 Стандартная цифровая нумерация — 1,2, 3,4, 5.• ТУРЕ=А Прописные буквы - А, В, С, D, Е.• TYPE=a Строчные буквы — а, Ь, с, d, e.• TYPE=I Римские цифры - I, II, III, IV, V.• TYPE=i Строчные римские цифры — i, И, iii, iv, v.

Иногда нужно, чтобы список начинался не с 1 (или А). Для задания другого начального номера вы можете использовать ключевое слово SEQNUMT тега <OL>.

Списки определений (глоссарии)Cписки определений (Definition List) используются не так часто, как маркированные или

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

Списки определений выглядят несколько иначе, другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег <LI>. Тег <DT> задает отдельный элемент, то есть определяемый термин (текст располагается без отступа от левого поля странички), а тег <DD> – остальную информацию, которая вводится на следующей строке. Вторая строка

информации называется отделением (расположение текста с отступом от левого поля). Представим теги, используемые при создании списков определений:

<DL><DT><DD></DL>

Вложенные списки Одно из замечательных свойств списков — это возможность вкладывать их друг в друга.

Вложение списков в списки позволяет вам создать несколько уровней организации информации. Вы можете использовать несколько уровней списка на одной странице, что поможет вам упорядочить информацию. Вложенный список (Nested lists) включает элементы нумерованного и маркированного списков, поэтому для его создания используются теги этих двух списков:

<OL><LI><UL><LI></UL><LI></OL>

&&&$$$002-009-002$3.2.9.2 Таблицы

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

Создание таблиц вручную – одна из наиболее сложных задач в HTML. Сначала формируете таблицу, затем первую строку, затем каждую ячейку с её содержанием. Каждый элемент требует открывающего и закрывающего тегов документа. Если вы забыли один – единственный текстовый маркер, то страницу никто не сможет прочитать. Некоторые Web-редакторы умеют создавать таблицу командами меню и способны изменить размер ячейки, её ширину, размер края и выравнивание содержимого с помощью диалоговой панели свойств.

Таблица данныхЭто пример таблицы в самом основном понимании (именно на него изначально ориентировались

создатели HTML) — как строк и столбцов с текстовыми данными. Выравнивание текстаТаблицы часто используют, чтобы более наглядно представить выводимый текст за счет

создания эффектов, принятых в обычных печатных изданиях: разделения на столбцы, выступающие строки, интервалы.

Шаблон страницыМногие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания

структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации.

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

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

Базовая структура таблицыВ своей основе таблицы представляют собой ячейки, объединенные в строки и столбцы. Вы

имеете возможность управлять характеристиками вывода на уровне всей таблицы, уровне строки и каждой отдельной ячейки. Минимальный набор тегов для описания таблицы включает <tab1e>, <tr> и <td>. Приводимый ниже код HTML демонстрирует базовую структуру таблицы с четырьмя ячейками: <table> <tr>

<td>cell l</td><td>cell 2</td></tr> <tr>

<td>cell 3</td><td>cell 4</td> </tr> </table>

Teг <table> определяет содержимое таблицы. Каждая строка задается тегом <tr> и состоит из множества ячеек данных (или заголовков). Количество столбцов определяется количеством ячеек в строке. Ячейки с данными обозначаются тегом <td>. Ячейка таблицы может содержать любые данные, пригодные для вывода HTML-документом (форматированный текст, изображения, мультимедийные элементы и даже другие таблицы).

Тег <table><table>.. ,</table>Тег таблицы <table> определяет начало и конец таблицы. Закрывающий тег обязателен. Его

отсутствие может привести к неверной обработке таблицы некоторыми браузерами.Атрибуты:

align = left | right | center Задает выравнивание таблицы в текстовом потоке (аналогично атрибуту выравнивания в теге

изображения <img>). Значение по умолчанию left. Значение center поддерживается не всеми браузерами, поэтому более надежно для выравнивания по центру страницы использовать теги, находящиеся вне тега таблицы (например, <center> или <div>). background = urlОпределяет изображение, которое будет служить фоном для таблицы.bgcolor = "#rrggbb" или название цветаЗадает цвет фона для всей таблицы.border = числоЗадает ширину (в пикселях) границы вокруг таблицы и ее ячеек. Задание border=0 полностью отменяет появление границы. Значение по умолчанию равно 1. Добавление атрибута border без значения приводит к появлению границы шириной один пиксель.cellpadding = числоЗадает размер интервала (в пикселях) между границей ячейки и ее содержимым. Значение по умолчанию равно 1.cellspacing = числоЗадает (в пикселях) размер интервала между ячейками таблицы. Значение по умолчанию равно 2.Если значение атрибута границы (border) больше нуля, то по умолчанию frame использует это значение, пока не установлено другое. Этот атрибут был введен в Internet Explorer 3.0 и в настоящее время имеется в спецификации HTML 4.0. Не поддерживается Netscape.height = число, процентыЗадает высоту всей таблицы. Значение может быть в пикселая или в процентах от размера окна браузера.hspace = числоСодержит размер интервала (в пикселях) слева и справа от выровненной таблицы. (Атрибут аналогичен hspace для тега <img>.)vspace = числоЗадает размер (в пикселях) свободного пространства над и под выровненной таблицей (аналогично vspace для тега <img>).width = число, процентыЗадает общую ширину таблицы. Может быть задан в пикселях или процентах от размера окна браузера.bordered or = “#rrggbb” или название цветаОпределяет цвет главной центральной части границы таблицы. Только для Internet Explorer версий 2.0 и выше. bordercolordark = "#rrggbb" или название цветаЗадает цвет темной тени, используемой для создания эффекта трехмерного изображения.

Тег <caption> название таблицы </caption>. У тега <caption> есть всего один атрибут определяющий положение названия таблицы – align. Он может принимать два значения: top- над таблицей и bottom- под таблицей.

Тег <tr><tr>...</tr>

Тег <tr> задает в таблице строку ячеек. Строка таблицы, ограниченная тегами <tr>, не имеет никакого содержания, кроме совокупности ячеек таблицы (<td>). Завершающий тег не является обязательным.

Атрибуты:align = left | center | rightЗадает способ выравнивания текста (или других элементов) в ячейках текущей строки.bgcolor = "#rrggbb" или название цвета.Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.valign = top | middle | bottom | baselineЗадает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.

Тег <td> <td>...</td>Ter <td> определяет ячейку данных таблицы. Закрывающий тег не обязателен, но его наличие может предотвратить непредсказуемые сбои при выводе таблицы. В частности, они возможны, если содержимым ячейки является изображение. Атрибуты такие же как у тега <tr> плюс свои.

Атрибуты:background = ur1Определяет изображение, которое должно использоваться в качестве фона в ячейке. В документации Netscape данный атрибут не рассматривается, однако версия 4.0 его поддерживает.colspan = числоЗадает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.height = число, процентыЗадает высоту ячейки в пикселах или в процентах от высоты таблицы. Высота, заданная в первой ячейке, будет использована для остальных ячеек строки.nowrapОтменяет автоматическое обтекание текста для данной ячейки. Окончания строк должны быть дополнены тегами <р> или <br>. rowspan = числоЗадает количество строк, объединяемых данной ячейкой. .Значение по умолчанию равно 1. width = числоЗадает ширину ячейки в пикселах.

Тег <th><th> заголовок </th> Атрибуты:

align = left | center | rightЗадает способ выравнивания текста (или других элементов) в ячейках текущей строки.valign = top | middle | bottom Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.colspan = числоЗадает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.rowspan = числоЗадает количество строк, объединяемых данной ячейкой. Значение по умолчанию равно 1. width = числоЗадает ширину ячейки в пикселях.bgcolor = "#rrggbb" или название цвета.Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.

Простые таблицы – довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соединениях столбцах или строках. Ниже приведём пример (см. пример 9), который демонстрирует таблицу 3х3 с заголовками, различными видами разбиения таблицы на ячейки и заданной рамкой. Для объединения ячеек используются атрибуты colspan и rowspan. Атрибут colspan сообщает программе просмотра, что нужно раздвинуть

клетку таблицы на несколько столбцов. Например, в нашем примере 9 ячейку А нужно растянуть на ячейку одного столбца и на две строки, для этого задаём colspan=1, а rowspan=2, а ячейку F нужно растянуть на ячейки трёх столбцов и на одну строку, следовательно, colspan=3, а rowspan=1. В данном примере используется атрибут border =8. Он устанавливает ширину рамки таблицы и может принимать любое значение от 0 до 10.

Cellpadding и Cellspacing

У тега table есть атрибуты, которые используются в паре: Cellspacing и Cellpadding. Для того чтобы избавиться от пространства между ячейками таблицы используется атрибут cellspacing, в html файле это запишется следующим образом <table cellspacing=0>. Можно увеличить пространство между ячейками, тогда, например cellspacing=10 (см. рисунок 7).

Рис.7 Пример использования CellspacingАтрибут cellpadding добаляет свободное пространство между содержимым ячейки и ее границами (см. рисунок 8).

Рис.8 Пример использования Cellpadding

Рис.9 Пример использования Cellpadding и Cellspacing

Многие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации.

Атрибут WIDTHКогда создаём таблицу, то ширина столбца оказывается равной самому широкому элементу этого

столбца. Нужно установить для него точную ширину, равную половине всей таблицы.Таблицы можно использовать и для форматирования текста. Предположим, что нужно

выровнять текст по левой границе и отодвинуть его от края. Для достижения цели можно

использовать атрибуты таблицы, не указывая строки и ячейки, но указывая невидимый бордюр (NOBORDER).

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

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

&&&$$$002-009-003$3.2.9.3 ФреймыФреймы (или рамки – Frame) – мощный механизм представления информации на Web-

страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла. Фреймы – удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трёх фреймов и старайтесь не применять их без надобности. Фреймы позволяют нам открыть в окне браузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).

Базовая структура группы фреймов Web-страница, которая разделена на фреймы, собирается вместе с документом верхнего уровня — документом группы фреймов (frameset).

Документы группы фреймов содержат стандартный заголовок (задаваемый тегом <head>). В отличие от стандартных HTML-документов они не имеют тега <body>. Вместо него используют тег <frameset>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <frame>. Содержимое фреймовых документов поступает из различных файлов HTML. Оно выводится в различных фреймах. Прежде, чем размещать документы на Web-странице, используя фреймы, нужно решить по какому принципу мы это будем делать. Предлагаем классический вариант - logo.html, menu.html, content.html - о котором упоминалось выше.

Расположение фреймов может быть различное, для примера рассмотрим четыре варианта из множества возможных (см. рис.):

Рис. Пример расположения документов оформленных фреймами.

Рассмотрим первую схему на рисунке и приведём его базовый html файл:<html> <head><title>Хождение по фреймам</title><frameset rows="100,*,150"><frame src="logo.html"><frame src="content.html"><frame src="menu.html"></frameset></head> </html>

Поясним данный html файл. Параметр rows - в нашем примере это выглядит так: rows="100,*,150" - документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселей, третьего - 150, а второй занимает все оставшееся пространство.

Тэг frame сообщает браузеру какие документы у нас будут в каждом ряду (строке). Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html. Если замените параметр rows, на cols, то получим расположение документов, изображённое на рисунке схеме третьей, то есть, документы будут располагаться не по строкам, а по столбцам.

Рассмотрим вторую схему на рисунке. В первом ряду расположен logo.html, а второй ряд мы поделим на две колонки, в которых располагаются документы menu.html и content.html. Для данной схемы базовый html файл будет выглядеть следующим образом:<html> <head><title>Хождение по фреймам</title><frameset rows="100,*">

<frame src="logo.html"><frameset cols="150,*"><frame src="menu.html"><frame src="content.html"></frameset> </frameset> </head> </html>

Рассмотрим четвёртую схему на рисунке. Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html, а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html. Базовый html файл, для данного примера будет выглядеть следующим образом: <html> <head><title>Хождение по фреймам</title><frameset cols="100,*"><frameset rows="100,*"><frame src="logo.html"><frame src="menu.html"></frameset><frame src="content.html"></frameset> </head> </html>

На уровне группы фреймов (то есть внутри открывающего тега <frameset> ) вы задаете строки и столбцы и решаете, следует ли выводить границы между фреймами.

На уровне отдельного фрейма (в теге <frame>) вы задаете URL выводимого в этом фрейме документа и имя фрейма для последующих ссылок на него. Также вы имеете возможность управлять появлением полос прокрутки, разрешением пользователю изменять размер фрейма и полей, если они вообще есть.

Создание строк и столбцовСтроки и столбцы задаются внутри тега <frameset> атрибутами cols и rows. Эти атрибуты

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

Размер каждой строки (или столбца) задается после имени атрибута списком значений в кавычках, разделенных запятыми. Количество значений в списке определяет число строк (столбцов) это выглядит следующим образом:

<frameset rows="50%, 50%">

Отключение вывода границ для браузеровПри разработке страниц много времени теряется на отмену вывода рамок, чтобы фреймовая

страница имела ровный, бесшовный вид. Чтобы отключить отображение границ для всех браузеров, необходимо добавить в тег <frameset> избыточную информацию следующим образом:

<frameset frameborder=0 framespacing=0 frameborder=no border=0>Полосы прокрутки

Атрибут scrolling в теге <frame> управляет появлением внутри фрейма полос прокрутки независимо от содержимого фрейма.

Значением атрибута по умолчанию является auto, обеспечивающее фрейму такое же поведение, как и у любого другого окна браузера: пока содержимое помещается во фрейм, полосы прокрутки в нем не появляются.

Для того чтобы полосы прокрутки появлялись всегда, даже в практически пустых фреймах, установите scrolling=yes.

Если вы хотите быть уверенными, что полосы прокрутки никогда не появятся во фрейме, даже если он полностью заполнен графикой и его границы плохо видны, установите scrolling=no.

Поля фреймаДля настройки верхних и нижних полей фрейма задайте количество пикселей в атрибуте

miarginheight. Размер левого и правого поля задает атрибут marginwidth. Они могут использоваться вместе.

Встраиваемые (плавающие) фреймыMicrosoft Internet Explorer 3.0 предложил так называемые встраиваемые фреймы, которые

идентифицируются тегом <iframe>. Они позволяют помещать в любое место потока HTML-документа

фрейм с полосой прокрутки. Это очень похоже на размещение изображения.Как показано в следующем коде, внутри тега <iframe> задается ширина и высота фрейма и HTML-

файл, который вы хотите вывести. Так же как и при размещении изображений, вы можете выровнять фрейм на странице и определить hspace и vspace. Вы также можете задать поля внутри фрейма и отображение границы.

Тег <frame><frame>

Тег <frame> определяет один фрейм в составе тега <frameset>.Атрибуты

bordercolor = "#rrggbb" или название цветаЗадает цвет границ фрейма (если включено их ображение). frameborder = 1 | 0Задает вывод трехмерного разделителя между текущим и окружающими его фреймами. Значение 1 (или yes) включает появление границы. Значение 0 (или nо) отключает ее. Вы можете использовать этот атрибут и на уровне тега <frameset>. Это повысит надежность работы.longdesk = uriОпределяет ссылку на документ, содержащий длинное описание фрейма и его содержимого. marginwidth = числоЗадает количество пикселей в промежутке между левым и правым краем фрейма и его содержимым. marginheight = числоОпределяет интервал (в пикселях) между верхней и нижней границей фрейма и его содержимым name = текстНазначает имя фрейму. Это имя может использоваться в ссылках для загрузки просматриваемого документа в именованный фрейм. noresizeПредотвращает изменение размера фрейма пользователем. По умолчанию действует правило, по которому пользователи могут изменять размеры фрейма, щелкая мышью и перетаскивая его границы.scrolling = yes | no | autoЗадает появление полосы прокрутки во фрейме. Значение yes указывает, что полоса прокрутки всегда появляется. Значение по указывает, что полосы прокрутки никогда не появляются. Значение auto (по умолчанию) указывает, что полосы прокрутки появляются автоматически, если содержимое не помещается в окне фрейма. src = ur1Задает местонахождение исходного HTML-файла, который должен появиться во фрейме.

Тег <frameset> <frameset>...</frameset>

Тег <frameset> определяет образующее группу фреймов множество фреймов или других групп фреймов (<frameset>).

Атрибутыborder = числоЗадает толщину границ фрейма (в пикселях) между всеми фреймами в группе (когда отображение границ включено).borgdercolor = "#rrggbb" или название цветаУстанавливает цвет всех границ в группе фреймовcols = списокУстанавливает количество и размер столбцов в группе фреймов. Количество столбцов определяется количеством значений в списке. Значения размеров могут задаваться в пикселах, процентах или относительных значениях (*), распределяющих доступное свободное место.frameborder = 1 | 0 или yes | no Определяет вывод трехмерных разделителей между фреймами в данной группе фреймов. Значение 1 (или yes) включает появление разделителей; 0 (или no) — отключает.rows = список (число, проценты или *)Задает количество и размер строк в группе фреймов. Количество строк определяется по количеству значений в списке. Размеры могут быть заданы в абсолютных значениях (пикселях), процентных отношениях или относительных значениях (*), распределяющих доступное свободное место.

Тег <iframe><ifranie>.. .</iframe>

Тег <-ifranie> определяет в документе плавающий фрейм. Он имеет атрибуты, подобные атрибутам тега <img>. Закрывающий тег обязателен.

Атрибутыalign = top | middle | bottom | left | rightЗадает выравнивание на странице в потоке текста внутреннего фрейма. Атрибуты left и right позволяют тексту обтекать фрейм.frameborder = 1 | 0Включает или отключает изображение объемных границ фрейма. По умолчанию равен 1, границы выводятся.height = число Задает высоту фрейма в пикселях или в процентах от размера окна.hspace = числоИспользуется совместно с выравниванием влево и вправо. Атрибут определяет интервал (в пикселах) влево и вправо от фрейма.marglnheight = числоЗадает (в пикселах) размер интервала между верхним и нижним краями фрейма и его содержимым.marginwidth = числоЗадает (в пикселах) размер интервала между левым и правым краями фрейма и его содержимым. name = текстНазначает фрейму имя, по которому будут осуществляться ссылкиnoresizeПредотвращает изменение размера фрейма со стороны пользователя. По умолчанию пользователь может изменить установки размеров фрейма, перетаскивая его границы мышью. scrolling = yes | no | autoОпределяет, появляются ли полосы прокрутки на экране (см. тег <frame>). src = ur1Задает URL HTML-документа, который будет первым появляться во фрейме. vspace = числоИспользуется совместно с атрибутом выравнивания влево или вправо, определяет размер интервала (в пикселах) сверху и снизу от фрейма.width = number Задает ширину фрейма в пикселях или процентах от размера окна.&&&

$$$002-009-100$Лекция №9. Вопросы для самоконтроля1. Какие виды списков можно построить?2. Какие теги предназначены для оформления маркированного списка? Какие существуют

атрибуты?3. Какие теги предназначены для оформления нумерованного списка? Какие существуют

атрибуты?4. Какие теги предназначены для оформления списка определений? Какие существуют

атрибуты?5. Как создать вложенные списки6. Какой тег используется для построения таблицы? Какие атрибуты существуют у этого тега?7. Какие виды фреймов существуют?8. Как создать фреймы различных видов?

&&&$$$002-010-000$3.2.10 Лекция №10. Ссылки. Изображения.1. Ссылки.2. Изображения.

&&&$$$002-010-001$3.2.10.1 Ссылки

Гиперссылки на Web-страницы — одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью

специального тега HTML.. Гипертекст - это документ, который наряду с обычной текстовой и графической информацией,

содержит ссылки на другие документы, причем эти ссылки встроены в текстовые фрагменты или в графические объекты данного документа.

Создание ссылкиТеперь введите тег <a href>. Тег <a> называется якорным тегом. Он применяется для ссылок

на другие Web-страницы. Ключевое слово href якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег </a>.

Пример 7:<a href="index.html" border=0>новости</a>

Фраза «новости» появится на экране в виде текста ссылки. Когда посетители щелкнут мышью на этом тексте, они откроют файл index.html.Проверьте, не забыли ли вы, если это необходимо, указать путь к файлам, на которые ссылаетесь.

Ссылки на любое место в WWWДля таких ссылок вам понадобится полный URL документа, а не только путь и имя файла, как в

предыдущих примерах.Для адресации ресурсов Internet используется унифицированный указатель на ресурс (адрес) -

URL (Uniform Resource Locator).Общий формат URL:

<протокол>://<сервер><локальный адрес>

Протокол — это набор соглашений о правилах формирования и форматах сообщений Internet, о способах обмена информацией между абонентами.

В качестве протокола чаще всего указываются http, ftp, gopher. В качестве локального адреса указывают либо путь к странице (для http), либо путь к файлу (для ftp). Если путь к конкретной странице не указан, подразумевается начальная страница сайта или Web-сервера. Если не указан путь к файлу (или подкаталогу), подразумевается корневой каталог данного FTP-сервера.

Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) — это тег <А>. Затем вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </А>.

После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую.

Цвет ссылкиВыше мы рассматривали, как можно задать стандартные цвета текста страницы с помощью

тега <body>.Подобным же образом вы можете управлять цветом текста гиперссылки.

Атрибуты:link = "#rrggbb" или имя цветаУстанавливает цвет по умолчанию для всех ссылок, имеющихся в документе. vlink= "#rrggbb" или имя цвета

Устанавливает цвет посещенных ссылок.alink "#rrggbb" или имя цвета

Устанавливает цвет активной ссылки.Графические ссылкиДля того чтобы создать графическую ссылку, поместите внутрь тегов якоря тега изображения

следующим образом:< a href=“document.html”><img src="picture.gif"></a>

Когда рисунок используется в качестве ссылки, браузер выводит границу размером в один пиксель вокруг изображения (обычно голубым). Часто такая голубая рамка неприемлема, тогда используя атрибут border отображение рамки следует отключить. Атрибут border определяет ширину границ в пикселах. Задавая нулевое значение, вы отменяете появление рамки вокруг изображения, как это показано в следующем примере:< a href=“document.html”><img src="picture.gif" dorder=0></a>

&&&$$$002-010-002$3.2.10.2 ИзображенияТег <hr>

Тег <hr> выводит на странице горизонтальную линейку.Атрибуты

align = center | left | rightЕсли линейка короче окна, то этот тег управляет горизонтальным выравниванием линейки. Значение по умолчанию center. noshadeЛинейка выводится в виде сплошного прямоугольника (без тени).size= числоЗадает толщину линейки в пикселях.width= число или %Задает длину линейки в пикселях или в процентном отношении к ширине страницы. По умолчанию длина линейки равна ширине полного окна браузера.

Тег <img>Тег <img> размещает на странице изображение.

Атрибутыsrc=urlЗадает URL графического файла, который должен быть выведен на экран.

Таким образом, минимальный тег для размещения изображения на странице будет иметь вид <img src="тип изображения"> На рис.4 показано встроенное изображение и его исходный текст html. Хотя src является единственным по-настоящему обязательным атрибутом тега <img>, настоятельно рекомендуется использовать и ряд других. alt= текстЗадает строку альтернативного текста, который появляется, если вывести изображение невозможно. border= числоЗадает ширину (в пикселях) границы, которая окружает просматриваемое изображение. Значение border=0 на практике используется для отмены вывода границы.vspace= числоИспользуется совместно с атрибутом a1ign=left или a1ign=right. Задает в пикселях свободный интервал сверху и снизу от изображения. height= числоЗадает высоту изображения в пикселях. Атрибут не является обязательным, но желательно его использовать для увеличения скорости вывода Web-страницы.width= число Задает ширину изображения в пикселях. Атрибут не является обязательным, но его использование желательно, так как позволяет ускорить отображение Web-страницы.

Имея эту информацию, браузеры получают возможность разметить страницу перед загрузкой изображения. Без значений ширины и высоты сначала выводится страница, а затем, после получения графического файла, вся страница выводится во второй раз с размещенным изображением (этот процесс может состоять и из нескольких проходов). Поэтому разумно затратить некоторое время на включение в тег информации о размерах изображения.align= типЗадает выравнивание изображения, используя один из приведенных в таблице атрибутов (рассмотрены наиболее распространенные).

Тип Результат выравниванияbottom Выравнивает нижнюю часть изображения по основанию текста. Это значение

вертикального выравнивания по умолчаниюcenter В соответствии со спецификацией W3C этот атрибут обеспечивает горизонтальное

центрирование изображения на странице. На практике браузеры трактуют его так же, как и align=middle

left Выравнивает изображение по левому полю и позволяет последующему тексту обтекать его

middle Выравнивает середину изображения по базовой линии текста right Выравнивает изображение по правому полю и позволяет последующему тексту

обтекать его top Выравнивает вершину изображения по самым высоким точкам строки

&&&$$$002-010-100$Лекция №10. Вопросы для самоконтроля1. Какой тег используется для создания гиперссылки? Каковы его атрибуты?2. Какой тег используется для вывода графического изображения? Каковы его атрибуты?3. Какой тег используется для вывода горизонтальной линейки? Каковы его атрибуты?

&&&$$$002-011-000$3.2.11 Лекция №11. Таблицы стилей1. Каскадные таблицы стилей (CSS).2. Методы применения таблиц стилей к документу.3. Селекторы.4. Свойства форматирования элементов.

&&&$$$002-011-001$3.2.11.1 Каскадные таблицы стилей (CSS)Каскадные таблицы стилей (Cascading Style Sheets) — это технология управления дизайном

web-страницы, которая существенно увеличивает диапазон возможностей описания внешнего вида страницы и упрощает сам процесс редактирования и форматирования ее содержимого.

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц. И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

Каскадные таблицы (листы) стилей представляют собой простую технологию определения и присоединения стилей к документу HTML.

Синтаксис листов стилей одинаков для всех методов применения стилей:Селекторы. Элементы HTML или XHTML, свойствам которых лист стилей присваивает

определенные значения. Кроме того, листы стилей поддерживают самые разнообразные селекторы, включая селекторы классов.

Свойства. Определяет внешний вид на экране элементов, определяемых данным селектором. Например, если селектором является элемент p, то его свойства определяют внешний вид тех абзацев, на которые распространяется данный стиль. Свойствами могут быть параметры выравнивания, шрифтов, цвета и т.д.

Значения. Каждое из свойств листов стилей может принимать определенные значения. Например, если в список свойств селектора включено свойство color, то его значениями могут быть различные названия цветов.

Сочетание свойства и значения называется объявлением. Сочетание селектора и объявления (объявлений) называется правилом. Селектором может быть любой тэг HTML, для которого определение задает, каким образом необходимо его форматировать.

Например, если необходимо, чтобы в документе все заголовки первого уровня отображались красным цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице стилей следует задать правило:

&&&$$$002-011-002$3.2.11.2 Методы применения таблиц стилей к документу1. Связывание. Позволяет хранить таблицу стилей в отдельном файле и присоединять ее к

документам с помощью тэга <link>, задаваемом в разделе <head>: <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head> 2. Внедрение. Позволяет управлять стилями всего документа. Внедрение стилей выполняется с

помощью элемента style, располагаемого в разделе head. Стили, определенные в элементе style, браузер применяет ко всему документу.

<head> <style type=”text/css”> p {background-color:beige; text-align:left; color:maroon} </style> </head> 3. Встраивание. Этот метод позволяет применить стиль к любому дескриптору. Встраивание

предоставляет автору полный контроль над каждым элементом.<h1 style=”color:green”>заголовок зеленого цвета</h1>

&&&$$$002-011-003$3.2.11.3 Селекторы

Существует несколько типов селекторов: Селекторы элементов. К ним относятся селекторы элементов HTML, такие как p, h1 и т.д. Селекторы классов. Позволяют определить разные стили для элементов одного и того же

типа.

Селектор class. Позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:

<style type=”text/css”> h1.red {color:red} h1.ltgr {color:navy; background-color:lightgrey} </style>

В тексте документа ссылка на соответствующий класс задается в параметре class: <h1 class=”red”>красный шрифт</h1> <h1 class=”ltgr”>синий шрифт на сером фоне</h1>

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

При группировании свойств важна последовательность перечисления значений. Например, при группировании параметров полос отступа margin их значения должны быть перечислены в определенной последовательности, а именно - ширина верхней, правой, левой, и нижней полос.&&&

$$$002-011-004$3.2.11.4 Свойства форматирования элементовВ каскадных таблицах стилей все доступные свойства форматирования элементов в документе

HTML разбиты на несколько категорий. Некоторые из них:

Категория Устанавливает Шрифт Типографские свойства шрифта Цвет и фон Цвет текста и фона, а также картинки в качестве фона Текст Выравнивание, форматирование и разрядка текста Блок Свойства форматирования блоковых элементов Таблицы Свойства визуального представления таблиц

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

Единицы измерения Относительные Абсолютные em Высота шрифта элемента in Дюйм px Пиксел cm Сантиметр, mm Миллиметр % Процент pt Пункт (1pt=1/72 in)

Относительные единицы em во всех свойствах вычисляются относительно высоты шрифта элемента. Единственное исключение – свойство font-size, в котором эти единицы относятся к высоте шрифта элемента-родителя.

Шрифты

Свойство font-family. Задает приоритетный список семейства шрифтов и/или типовых семейств шрифтов. В отличие от других свойств каскадных таблиц стилей название семейств в списке отделяются запятыми, чтобы показать их альтернативность:

body {font-family: TimesDL, “Times New”, serif} Свойство font-style. Определяет стиль шрифта из выбранного семейства: нормальный

(normal), курсивный (italic) или наклонный (oblique). Следующие правила определяют курсивный стиль шрифта заголовка первого уровня и

нормальный, прямой шрифт выделенных частей заголовка: h1 {font-style:italic} h1 em {font-style:normal} Свойство font-weight. Это свойство выбирает из заданного семейства шрифт определенной

жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. 100 – самый «бледный» шрифт. Ключевое слово normal соответствует числовому значению 400, bold – 700:

H3 {font-weight: bold} Свойство font-size. Это свойство определяет размер шрифта. Его значение м.б.

абсолютным или относительным. Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-

small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. По умолчанию браузер использует значение medium.

Абсолютное значение можно задать и в виде абсолютного значения длины, например, 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.

Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:

p {font-size: 10pt} em {font-size: 120%} em {font-size: 1.2em} Два последних правила для выделенного в абзаце элемента EM определяют одинаковую высоту

шрифта 12pt. Свойство font. Основное назначение этого свойства установить в одном определении

значения свойств font-style, font-variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:

P {font:oblique 12pt/14pt “Times Cyr”, serif} В этом примере для абзаца задается наклонный шрифт Times Cyr высотой 12 пунктов. Высота

строки – 14 пунктов. Если не найден шрифт Times Cyr, то применяется любой шрифт семейства serif.

Цвет и фонСвойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или

изображения. Для установки цвета текста элемента существует единственное свойство color. Его значением

является цвет, задаваемый с помощью ключевых слов или rgb-функции (или transparent). Оба правила в следующем примере устанавливают синий текст соответствующих элементов:

p {color: blue} em {color: rgb(0,0,255)} установка параметров фона элемента: body { background-color: lightsteelblue; background-image: url(/image/fon.gif);} p { background-image: none} В приведенном примере задается адрес файла изображения для фона тела документа и явно

указывается отсутствие фона для абзацев документа. Если фон задан в виде изображения, то свойство background-repeat определяет его

повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется).

Форматирование текста. Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.

Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами:

<p style=”letter-spacing: 0.5em”>Слово слово </P>

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста: underline, overline и line-through.

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align: left, right и center. При этом текст выравнивается относительно блока содержимого элемента, а не относительно окна браузера.

Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.

Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значения: baseline (выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя), middle (выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока

содержимого родителя), sub (элемент отображается в виде нижнего индекса), super (элемент отображается в виде верхнего индекса), text-top (выравнивание верха элемента с верхом шрифта элемента-родителя), text-bottom (выравнивание низа элемента с низом шрифта элемента-родителя), top (выравнивание верха элемента с верхом самого высокого элемента текущей строки), bottom (выравнивание низа элемента по низу самого низкого элемента текущей строки).

Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height) самого элемента.

Свойство line-height определяет расстояние между базовыми линиями текста (интерлиньяж). Его значения: normal – браузер выбирает интерлиньяж самостоятельно, любая_правильная_длина - значение интерлиньяжа, значение_в_процентах – значение интерлиньяжа, выраженное в процентах от высоты окна, натуральное_число – интерлиньяжа вычисляется путем умножения этого числа на высоту шрифта.

Оформление таблиц. С помощью CSS можно задавать различные стили оформления таблиц. Для этого используется свойство border, определяющее цвет, толщину рамки и ее внешний вид. Синтаксис следующий:

table {border: цвет толщина фильтр; } где параметры цвет и толщина – определяют цвет рамки, а фильтр – ее внешний вид.

Возможны следующие значения параметра фильтр: groove, inset, outset, ridge, dotted, dashed, solid, double.

Например, table {border: #D3D3D3 5px outset;}

В этом контексте возможно использование свойств border-top, border-left, border-right, border-bottom.

Псевдоклассы: Синтаксис: селектор:псевдокласс { свойства }

Псевдоклассы - это особые классы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Перед именем псевдокласса всегда располагается двоеточие. Если после имени селектора задать псевдокдасс, то указанный стиль будет применен ко всем элементам, уовлетворяющим условиям псевдокласса.

Например, Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. Псевдоклассы этого элемента: link (ссылка), active (активная ссылка), visited (посещенный ранее URL). a:link {color:blue} a:visited {color:fuchsia} a:active {color:red} В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. Посещенные ссылки будут отображаться фиолетовым цветом.

Некоторые псевдоклассы определенные в CSS2: :hover - элемент, над которым находится указатель мыши. :focus - элемент, имеющий фокус. :first-line - первая строка абзаца. :first-letter - первая группа абзаца.

Комментарии. Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием, например:

p {color: blue} /* абзац выделен синим цветом */&&&

$$$002-011-100$Лекция №11. Вопросы для самоконтроля1. Что такое каскадные таблицы стилей (CSS)?2. Какие существуют методы применения таблиц стилей к документу?3. Что такое селекторы? Какие виды селекторов существуют?

4. Какие свойства форматирования элементов можно определить при создании каскадных таблиц стилей?

&&&$$$002-012-000$3.2.12 Лекция №12. Формы1. Создание элементов формы.

&&&$$$002-012-001$3.2.12.1 Создание элементов формы

Форма, или формуляр, представляет собой отдельную Интернет-страницу или часть страницы, на которой размещены разнообразные типовые для Windows элементы интерактивного диалога: поля ввода текста, флажки и радиокнопки с поясняющими строками текста, раскрывающиеся списки и одна или несколько кнопок, обычно служащих для очистки формы (приведения в исходный вид в случае неправильного заполнения) и отправки введенных данных сформированного информационного запроса) на сервер. Форма (формуляр) в HTML-документе определяется в виде блока <FORM>…</FORM>, внутри которого располагаются теги, задающие те или иные формы, а также играющие роль подсказок текстовые строки и обращения к графическим файлам. Внутри формы могут использоваться обычные HTML-теги, например, табличные. В составе тега <FORM> записываются атрибуты, определяющие способ и характеристики обработки заключающейся в форме информации, в частности, способ пересылки ее на сервер и кодирования данных в процессе этой пересылки.Команда <FORM> имеет следующие атрибуты:Атрибут Описаниеaction Задает адрес для отправки формы по сети. Вы можете послать форму на сервер, где она

будет обработана программой (CGI-скриптом), а можете указать в качестве значения атрибута адрес электронной почты, и форма будет послана браузером по e-mail (пример: FORM action=mailto: адрес электронной почты).

enctype Задает кодирование передаваемых по сети данных (пример: enctype= “text=pain” задаст передачу обычного текста).

method Задает протокол для пересылки данных на сервер. По умолчанию используется протокол get, но лучше использовать протокол post как более универсальный.

Каждому элементу формы соответствует тег <INPUT>, который позволяет создавать различные части формы. Этот элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов. Атрибут тега type указывает тип данного элемента.

Радиокнопки <INPUT type=radio>Радиокнопки (селекторные кнопки, переключатель) предназначены для выбора одного варианта из нескольких альтернативных. Подобно кнопочному переключателю диапазона волн в радиоприемнике выбор одной кнопки автоматически снимает отметку с другой.В группе радиокнопок активной может быть только одна. Отметка на новой кнопке автоматически снимает отметку на старой.Радиоктопка задается командой:<INPUT type=radio>Дополнительные атрибуты:

Атрибут name Значением является идентификатор (имя). Кнопки, входящие в одну взаимосвязанную группу, должны иметь одинаковое имя. Именно по этому критерию (одинаковое имя) браузер распознает переключатель и организует снятие отметки с кнопки, когда выбрана другая в этой же самой группе.

Атрибут checked Логический атрибут, для него не указывается значение. Присутствие атрибута означает, что отметка на данной кнопке установлена по умолчанию.

Атрибут value Значение этого атрибута будет служить указанием на выбор пользователя, когда форма отправляется по электронной почте.

Что придет по e - mail Обычно браузер не сам отсылает форму, а поручает работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например: Outlook).В указанном выше примере отметка стоит на позиции «Щука». При нажатии на кнопку, по указанному в теге <FORM> адресу уйдет письмо с темой «Форма отправлена из Microsoft Internet Explorer» (для браузера IE) следующего содержания:

fish=ЩукаТаким образом, браузер составляет письмо из пар «имя=значение», которые выбираются по порядку из полей формы.В качестве обратного адреса браузер указывает адрес пользователя компьютера, с которого отправляется форма.

Флажки <INPUT type=checkbox>Флажки, или кнопки с независимой фиксацией, служат для многокомпонентного выбора.Флажки не зависят один от другого. Их можно устанавливать и сбрасывать в любой комбинации.

Атрибуты:name - имя флажка (при объединении нескольких флажков в группу всем им дается одно и то же имя);value – значение флажка (записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользователем);checked - что отметка на данном флажке по умолчанию.

Значение атрибута name с добавкой «=on» передается в сеть, если флажок отмечен. Например, если выбраны книги «Алгоритмика» и «JavaScript-конструирование», в сеть будет передана запись:

js=onal=on

Атрибут checked задает начальную отметку флажка.

Поле ввода имени пересылаемого файла <INPUT type=file>Предназначено для пересылки на сервер вместе с заполненной формой указанного пользователем файла. Имя файла и путь к нему вводятся в однострочном текстовом поле или, после щелчка мышью по расположенной справа кнопке Обзор, требуемый файл выбирается в стандартном окне открытия файла, а его полное имя автоматически вводится в поле ввода.

Атрибуты:

name – имя данного диалогового элемента;size – ширина текстового поля;maxlenght – максимально допустимое количество символов имени файла (вместе с путем).

Поле ввода текста <INPUT type=text>Представляет собой прямоугольное поле, предназначенное для ввода одной строки текста.В эту строку вводится текстовая информация.

Атрибуты:name – уникальное имя поля;size – ширина поля (в символах);maxlenght – максимально допустимое количество вводимых символов;value – задает начальную запись в строке ввода (записывается в кавычках).

Значение атрибута name с текущим содержанием строки ввода передается в сеть:MyFam=Введите фамилию

Атрибут size задает ширину строки ввода в символах (рекомендуется кодировать с запасом).Поле ввода пароля <INPUT type=password>Прямоугольное текстовое поле, отличающееся от поля для ввода текста только тем, что вводимый текст отображается в нем как соответствующее количество «звездочек» или «точек». Имеет те же атрибуты, что и при type=text.

Многострочное поле ввода < TEXTAREA >…</ TEXTAREA > Прямоугольное текстовое поле с заданными шириной и высотой. При необходимости автоматически генерируется вертикальная линейка прокрутки содержимого.Этот элемент удобен для ввода в текст нескольких строчек. Начальное содержимое поля кодируется так же, как и содержимое блока <PRE>, т.е. текст выводится в том виде, в каком он представлен в HTML-файле без автоматического форматирования.

Атрибуты:name – имя области;cols – ширина области (в символах);rows – высота области (в строках);wrap – управление автоматическим переносом строк внутри окна и при передаче текста на сервер.Атрибут может принимать следующие значения:wrap=off – без переноса; wrap=physical – автоматический перенос с вставкой в соответствующие места текста символов перехода на новую строку; wrap=virtual – автоматический перенос строк без добавления символов перехода на новую строку (т.е. на сервер текст передается как одна строка).

Раскрывающиеся списки < SELECT >…</ SELECT > Предназначается как для предоставления пользователю возможности выбора одной или нескольких опций, так и для использования в качестве своеобразного меню. В HTML кодируется при помощи контейнера <SELECT>…</SELECT>.

Атрибуты < SELECT >…</ SELECT > name – имя списка; size – количество одновременно отображаемых пунктов;multiple – разрешение помечать (при одновременно нажатых клавишах Ctrl и Shift) сразу несколько пунктов меню. Если атрибут multiple и/или значение атрибута size больше 1, то список выводится развернутым (тогда значение size определяет количество одновременно видимых на экране пунктов списка, для просмотра остальных используется линейка прокрутки). В противном случае (при отсутствии параметра multiple и при size =1) выводится список, раскрывающийся щелчком мыши на расположенной справа кнопке со стрелкой вниз.Значение отдельных пунктов списка определяется при помощи тегов <OPTION>, каждый из которых определяет один пункт.

Атрибуты < OPTION > value – записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный пункт выбран; при отсутствии данного параметра на сервер передается название выбранного пункта списка;selected – определяет данный пункт как помеченный по умолчанию (для раскрывающегося списка, т.е. при size =1 и отсутствии атрибута multiple, данный атрибут может быть присвоен только одному пункту; при отсутствии атрибута selected изначально выбранным по умолчанию является первый пункт списка) В IE 5.0 этот параметр обязателен, иначе поле списка выводится пустым. Название пункта записывается после тега <OPTION>.

Командные кнопкиКнопка для отправки формы в сеть <INPUT type=submit>

Атрибуты тега <FORM> определяют, куда и как будет послана форма. Атрибут submit служит для создания кнопки, щелчок по которой вызывает отправку информации формы на сервер.

Атрибутыname – имя кнопки. Должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени может выделить необходимые данные.value - надпись на кнопке. При отсутствии данного параметра выводится стандартная надпись Подача запроса или Submit.

Кнопка очистки формы <INPUT type=reset>Щелчок мышью по этой кнопке очищает форму (т.е. приводит ее к изначальному виду, в том числе восстанавливая изначальные значения в текстовых полях, изначальную пометку флажком и радиокнопок и выбор пунктов списков.

Атрибуты:name – имя кнопки. Необязательный параметр, нигде не используется, разве что при работе со скриптами;value - надпись на кнопке. При отсутствии данного параметра выводится стандартная надпись Сброс или Reset.

Обычные кнопки <INPUT type=button>Браузер самостоятельно не обрабатывает нажатие на такую кнопку. Разработчик должен предусмотреть обработку при помощи программы (скрипта), написанной, например, на JavaScript.Для этого в теге <INPUT> используются атрибут onclick, который определяет программу, которая обрабатывает нажатие кнопки.Атрибуты:name – имя кнопки;value - надпись на кнопке.

Графические командные кнопки <INPUT type=image>По назначению аналогичны пользовательским кнопкам стандартного вида, но здесь в качестве кнопки используется произвольное изображение, хранящиеся в отдельном графическом файле. Фактически, это рисунок-гиперссылка, но для графической кнопки на сервер, кроме ее имени, дополнительно передается информация о координатах курсора мыши в момент нажатия.

Атрибуты:name – имя кнопки;align – выравнивание кнопки относительно окружающего текста (bottom, left, middle, right, top). Необязательный атрибут;border – толщина рамки вокруг кнопки. Необязательный атрибут;src – имя (и, если требуется, путь или адрес URL);value – текстовая строка.&&&

$$$002-012-100$Лекция №12. Вопросы для самоконтроля1. Что такое форма?2. Как создать элемент формы «Радиокнопка»?3. Как создать элемент формы «Флажок»?4. Как создать элемент формы «Поле ввода текста»?5. Как создать элемент формы «Многострочное поле ввода текста»?6. Как создать элемент формы «Список»?7. Как создать элемент формы «Кнопка»?

&&&$$$002-013-000$3.2.13 Лекция №13. Сценарии. Объектная модель документа. Динамическое изменение содержания документ1. Сценарии.2. Объектная модель документа.

&&&$$$002-013-001$3.2.13.1 Сценарии

Клиентский сценарий это программа, которая может сопровождать документ HTML.или непосредственно быть внедренной в него. Эта программа выполняется на клиентской машине при загрузке документа или в другое время, например, когда активизируется ссылка. Существует несколько языков сценариев, однако единственным языком, который понимают все современные браузеры, является JavaScript.

Сценарии предлагают авторам средства усиления интерактивности документов HTML. Например:• Сценарии могут обрабатываться во время загрузки документа и динамически изменять содержимое документа.• Сценарии могут использоваться в форме для обработки вводимых данных. Они могут проверять, попадают ли введенные данные в предопределенный диапазон значений, соответствие полей и т.д.• Сценарии могут включаться событиями, оказывающими влияние на документ, например, загрузкой, выгрузкой, фокусом элемента, перемещением мыши и т.д.• Сценарии могут связываться с управляющими элементами формы (например, с кнопками) для представления элементов пользовательского интерфейса.Авторы могут прикреплять к документу HTML два типа сценариев:• Сценарии, выполняющиеся один раз при загрузке документа. Сценарии, описанные в элементе SCRIPT, выполняются при загрузке документа. Для агентов пользователя, не обрабатывающих сценарии, авторы могут определить альтернативное содержимое с помощью элемента NOSCRIPT.• Сценарии, выполняемые каждый раз, когда происходит определенное событие. Эти сценарии могут назначаться ряду элементов с помощью атрибутов внутренних событий.Элемент SCRIPT может находиться в любом месте HTML-документа - как в HEAD, так и в BODY. Наличие начального и конечного тега обязательно. Основные атрибуты:scr - определяет местоположение внешнего сценария.type - задает язык сценария содержимого элемента и имеет приоритет над языком сценария, заданным по умолчанию, (язык сценария по умолчанию может быть установлен с помощью элемента МЕТА: <МЕТА http-equiv-'Content-Script-Type" content="text/javascript">). Язык сценария указывается как тип содержимого (например, "text/javascript"). Значение по умолчанию для этого атрибута не задано.defer. Если этот логический атрибут установлен, он обеспечивает для агента пользователя подсказку о том, что сценарий не будет генерировать содержимое документа (например, "document.write" в javascript).Как отмечалось, выполнение сценариев начинается в разное время, в зависимости от того, как они написаны. Например:<HTML><HEAD><meta http-equiv=Content-Type content="text/html; charset="windows-1251 "><script type="text/javascript">var txt="Текстовая страница";</script><HEAD><BODY bgcolor="#FFFFFF">Строка, идущая перед словами "тестовая страница"<ВК><script type="text/javascript">document. write(txt+"<BR>");</script>Строка, идущая за словами "тестовая страница"</BODY></HTML>Содержимое этой страницы будет состоять из трех строк, причем вторая строка (тестовая страница) будет сгенерировано с помощью сценария в процессе его выполнения при загрузке страницы.Если сценарии сохранены в отдельных файлах, они анализируются во время загрузки страницы и перед любыми действиями пользователя.Все операторы сценария, содержащиеся в теле функции, интерпретируются, однако запуск функции не происходит до тех пор, пока она не будет вызвана каким-то событием. Операторы, находящиеся за пределами функции, выполняются после загрузки документа в браузер, но во время визуализации документа. Например, написанный выше документ эквивалентен следующему:<HTML><HEAD><meta http-equiv=Content-Type content="text/html; charset="windows-1251 "><script type="text/javascript">function test(txt) {document. write(txt+"<BR>");

}</script></HEAD><BODY bgcolor="#FFFFFF">Строка, идущая перед словами "тестовая страница"<В]1><script type="text/javascript">test("Текстовая страница");</script>Строка, идущая за словами "тестовая страница"</BODY></HTML>

Второй способ вызвать сценарий - это привязать его к некоторому внутреннему событию. Практически для каждого элемента HTML существует список событий, этим элементом поддерживаемый:onload - событие происходит, когда агент пользователя заканчивает загружать окно или все фреймы элемента FRAMESET. Может использоваться в элементах BODY и FRAMESET.onunload - событие происходит, когда агент пользователя удаляет документ из окна или фрейма. Может использоваться в элементах BODY и FRAMESET.onclick - событие происходит при однократном щелчке кнопки указующего устройства на элементе.ondblclick - событие происходит при двойном щелчке клавиши указующего устройства на элементе.onmousedown - событие происходит при нажатии кнопки указующего устройства на элементе.onmouseup - событие происходит при отпускании кнопки указующего устройства на элементе.onmouseover - событие происходит при перемещении указующего устройства на элемент.onmousemove - событие происходит при перемещении указующего устройства, когда оно находится на элементе.onmouseout -событие происходит при перемещении указующего устройства за пределы элемента.onfocus - событие происходит при получении элементом фокуса с помощью указующего устройства или последовательности перехода. Может использоваться со следующими элементами: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.onkeypress - событие происходит при нажатии и отпускании клавиши на элементе.onkeydown - событие происходит при нажатии клавиши на элементе.опкеуир - событие происходит при отпускании клавиши на элементе.onsubmi t- событие происходит при отправке формы. Оно используется только в элементе FORM.onreset - событие происходит при сбросе формы. Оно используется только в элементе FORM.onselect- событие происходит при выделении пользователем некоторого текста в текстовом поле. Может использоваться с элементами INPUT и TEXTAREA.onchange - событие происходит при потере управляющим элементом фокуса ввода, если его значение было изменено с момента получения фокуса. Этот атрибут используется со следующими элементами. INPUT, SELECT и TEXTAREA.Например, следующий сценарий использует события для проверки значений в поля формы при выходе из фокуса и при посылке данных формы на сервер. Если значение какого-либо поля не задано, посылка данных не производится.<HTML><HEAD><meta http-equiv=Content-Type content="text/html; charset="windows-1251 "><META http-equiv="Content-Script-Type" content="text/javascript"><SCRIPT>function validUserName(val) {if(val.length=0) {alert("Поле обязательно для заполнения");}}function validform() {if ((userForm.userName.value ="") || (userForm.userPassword.value-'")) {alert("He заполнены поля формы");

return false;}}</SCRIPT></HEAD><BODY><form name="userForm" method="post" action="handleform.php" onsubmit="return valid-form()"enctype="multipart/form-data">Имя: <INPUT TYPE="TEXT"NAME="userName"onblur="validUserName(this.value)"><br>Пароль: <INPUT TYPE="P AS SWORD" NAME="userPassword" onblur="validUserName(this.value)"><INPUT TYPE="SUBMIT" value="IIo™aTb форму"></form></BODY></HTML>Из данного сценария видно, что для доступа к методам какого-либо элемента используется атрибут name (при условии его уникальности). Аналогично ему может быть использован атрибут id.&&&

$$$002-013-002$3.2.13.2 Объектная модель документаДля доступа к элементам страницы без использования имен элементов может быть использована объектная модель документа HTML. При анализе документа браузер создает иерархическую структуру объектов, каждый из которых имеет свои свойства, методы и реагирует на определенный набор событий. Большинство объектов - это объектные представления элементов HTML. Например, для каждого элемента IMG создается соответствующий объект Image, для каждого элемента APPLET - свой соответствующий объект.Имеется несколько объектов верхнего уровня, с помощью которых может осуществляться управление всем документом HTML. Объект navigator представляет используемый браузер. С помощью этого объекта можно получить информацию об имени и версии браузера, языке браузера, платформе, на которой выполняется браузер.Web-браузеры представляются пользователям в окне. Все, что пользователь делает с браузером, делается в пределах этого окна. Объект window считается самым главным в иерархии объектов и содержит все остальные клиентские объекты (кроме собственно объекта navigator). Объект window не имеет эквивалентного элемента HTML, но создается при открытии нового окна браузера. Имеет множество свойств и методов. Поскольку это - объект самого верхнего уровня, некоторые методы могут вызываться без упоминания window перед ним. В примерах выше таким образом использовался метод вывода диалогового окна alert.Объект window содержит 4 дочерних объекта: document, frame, history, location. Среди них важнейшим является объект document, который отвечает за все содержимое, отображаемое на данной странице. Чаще всего документ используется для динамического формирования содержания страницы с помощью методов write и writeln. Применение метода write, который добавляет текст к документу, было показано выше. Следует отметить, что этот метод может добавлять не только текст, но и элементы HTML. При этом браузер добавляет сформированные таким образом элементы в объектную модель и правильно их обрабатывает. Например, следующая страница по своей функциональности полностью аналогична рассмотренной выше, но использует динамическое формирование элемента INPUT:<form id="userForm" method-'post" action-'handleform.php" onsubmit="return valid-form()"enctype="multipart/form-data"> <script> document. writeln("Hm: <INPUT TYPE=\"TEXT\"NAME==\"userName\"onblur=\"validUserName(this.value)V,><br>"); </script> Пароль: <INPUT TYPE="P AS SWORD" NAME="userPassword"onblur="validUserName(this.value)"> <INPUT TYPE="SUBMIT" уа1ие="Послать форму"> </form>Кроме того, объект document используется для доступа к объектам нижнего уровня -form, anchor, link, image и др.Объект history связан с способностью браузера хранить список хронологии (history list) или список посещений сайтов. Эквивалентом такого списка является объект history. Это объект также обеспечивает возможность загрузки страниц из списка хронологии.Объект location служит для хранения информации об URI данного окна.

Объект frame используется в случае многооконного представления документа.Среди методов объектов нижних уровней представляет интерес методы и свойства, позволяющие управлять содержимым страницы. Например, используя свойство innerHTML (которое включает текст и разметку внутри данного элемента) элемента FORM, вышеупомянутую страницу можно было бы записать следующим образом:form icH'userForm" method="post" action="handleform.php" onsubmit="return valid-form()" enctype="multipart/form-data"></form><script>userForm.imerHTML-'Имя: <INPUTTYPE=Y'TEXTY'NAJVE=VWrName\"onbl^^"Пароль: <INPUT TYPE^YTASSWORDY' NAME=Y*userPasswordY' onblur=YValidUserName(this.value)Y'>"+"<INPUT TYPE=\"SUBMmM уа1ие=\"Послать форму\">";</script>Как и в случае использования document-write, этот сценарий добавляет элементы в объектную модель и правильно обрабатывает их.&&&

$$$002-013-100$Лекция №13. Вопросы для самоконтроля1. Что такое сценарий?2. Как вызвать сценарий?3. Какова объектная модель документа?

&&&$$$002-014-000$3.2.14 Лекция №14. Обзор серверных технологий. CGI. Основные сведения о РНР1. Обзор серверных технологий.2. CGI.3. Основные сведения о РНР.

&&&$$$002-014-001$3.2.14.1 Обзор серверных технологий

Серверная часть приложений для Интернета состоит из web-сервера плюс расширения серверного программного обеспечения. Эти расширения могут принимать различные формы и работать с различными технологиями. Но все эти технологии предназначены для одного - тем или иным образом сформировать ответ на запрос клиента. Рассмотрим основные серверные технологии.SSI Включения на стороне сервера (SSV Server Side Includes) позволяет включать в HTML-документы специальные директивы, запускающие другие программы или вставляющие различные данные, такие как переменные окружения, содержимое файлов и т.п. Обычно поддержка SSI включена в Web-сервер. Команды SSI, с одной стороны, очень эффективны, но, с другой стороны, позволяют выполнять только примитивные действия.Серверные API Другой способ интеграции с сервером предполагает использование его собственного интерфейса прикладного программирования (API, Application Programming Interface). Использование серверных API обладает своим преимуществом. Обработка запросов может производиться не в отдельных процессах, а в отдельных потоках, что значительно уменьшает накладные расходы. С другой стороны, написанное программное обеспечение не будет переносимым-при использовании другого Web-сервера все написанное должно быть переписано с учетом использования другого API.ASP Активные серверные страницы (ASP, Active Server Pages) созданы фирмой Microsoft для своего сервера. Сервер ASP интегрирован в Web-сервер и не требует отдельного процесса. Он позволяет совмещать код и HTML-страницы вместо того, чтобы писать отдельные программы. ASP поддерживает различные языки программирования, в частности, Visual Basic и JavaScript. Дальнейшее развитие этой технологии - ASP . NET , позволяющая использовать объектно-ориентированный подход к разработке программного обеспечения для Интернета, имеющая улучшенное взаимодействие серверной и клиентской части программ, создающая компилируемый код.

Java-сервлеты Java-сервлеты были созданы в Sun. Сервлеты представляют собой небольшие компоненты, написанные на Java и скомпилированные в классы. Эти компоненты динамически загружаются Web-сервером и генерируют HTML-документ.JSP Серверные страницы Java (JSP, Java Server Pages), подобно ASP, позволяют совмещать код, написанный на языке Java, и HTML. Web-сервер обрабатывает этот код для динамического создания документа.CGI Интерфейс общего шлюза (CGI, Common Gateway Interface) представляет собой стандарт для организации взаимодействия внешних программ с Web-серверамр. Запуская&&&

$$$002-014-002$3.2.14.2 CGICGI-программы и сценарии на сервере, можно генерировать динамически создаваемое содержимое и отображать его пользователю. Типовой сценарий заключается в генерации запроса и отправка его серверу. Запрос запускает CGI-программу или сценарий, размещенный в специальном каталоге на сервере. CGI-программы получают данные со стандартного ввода и переменных окружения. Эти переменные содержат информацию об удаленном хосте и пользователе, значениях элементов отправленной формы и т.д. CGI-программа обрабатывает запрос и возвращает HTML-документ с результатами через стандартный вывод, CGI> сценарии могут возвращать результаты в виде нового документа, либо адреса, на который пересылается запрос. CGI-сценарии содержат специальные строки, отформатированные в соответствии с заголовками HTTP. Web-сервер получает вывод CGI-сценария и добавляет собственные HTTP-заголовки перед отправкой браузеру. CGI-программа может разрабатываться на любом языке программирования: Java, C++, PHP, Perl. В настоящее время наиболее распространенными языками, на которых пишут CGI-программы, являются Perl и PHP.&&&

$$$002-014-003$3.2.14.3 Основные сведения о РНРВ отличие от других языков, РНР был разработан специально для работы в Интернете. Синтаксис языка приближен к синтаксису языка С. Интерпретатор языка легко встраивается в большинство Web-серверов.Программы, написанные на РНР, легко объединяют код и теги HTML. Рассмотрим следующий простой сценарий:<html><body><?$dat=date("d.m.y");echo "Здравствуйте, сегодня $dat<br>\n";echo "Это тестовая страница РНР\n";?></body></html>Код, сформированный в результате работы этого сценария, имеет вид:<html><body>Здравствуйте, сегодня 14.05.03<br>Это тестовая страница РНР</body></html>Рассмотрим внимательнее этот сценарий. Сам код сценария располагается после открывающего тега <? и закрывающего тега ?>. Все, что находится вне сценария, выводится интерпретатором РНР без изменений.В первой строке сценария объявлена переменная $dat, которой с помощью стандартной функции языка присвоено значение текущей даты в формате «день.месяц.год». В языке РНР все переменные начинаются с символа $ и чувствительны к регистру. Таким образом, переменная $dat и $Dat - это разные переменные. Переменные в РНР, подобно переменным в JavaScript, не типизированы. Они не требую явного определения, и могут в разные моменты времени содержать различную информацию.

Например, этой же переменной $dat мы можем присвоить в определенный момент времени какое-либо числовое значение (целое или вещественное), а в другой момент - логическое значение true или false.РНР непосредственно поддерживает 5 типов переменных:• Целый (integer)• Вещественный (double)• Строковый (string)• Ассоциативный массив (array). Ассоциативные массивы представляют собой набор пар вида ключ>значение.• Объектный (object)Кроме того, имеется возможность создания ссылок на переменные, а также логических переменных.Следующие две строки производят вывод текста. Заметим, что наличие символа $ в начале имени переменной позволяет интерпретатору вставить значение переменной прямо в выводимую строку символов.Вне зависимости от типа переменной, с ней можно производить следующие основные действия:• Присвоение значения (продемонстрировано в сценарии)• Проверка существования переменной. Производится с помощью оператора IsSet($varname).• Уничтожение переменной. Реализуется оператором Unset($varname). Кроме того, мы можем установить тип переменной или проверить тип. Рассмотрим, как можно получить данные, отправленные клиентом из формы, на примере следующего сценария registration.php:<html><body><? if (!IsSet($_POST["submit"])) {?><form action-'registration.php" method="POST">Введите имя:<трЩ type="text" name="nm"><br>Введите пароль <input type-'password" name="pw"><br><input type="submit" name="submit" value="Послать..."></form><?} else {?>Здравствуйте, <?=$_POST["nm"]?>. Вы успешно зарегистрированы!<?}?></body></html>Мы предполагаем использование одного и того же сценария как для регистрации, так и для вывода результатов регистрации. Для этого необходимо проверить, получены ли данные из формы. Если данные еще не пришли, то выводится форма ввода имени и пароля. Если данные успешно получены, формируется ответ об успешной регистрации. Проверка эта может быть осуществлена так: если данные уже пришли, то переменные, в которых хранятся эти данные, уже существуют. Если данные еще не поступали, переменные не существуют. Как отмечалось выше, проверка существования производится с использованием оператора IsSet.Данные, полученные из формы, хранятся в глобальных массивах типа _GET и _POST в зависимости от метода передачи данных, используемого браузером. В нашем сценарии предполагается передача данных из формы методом POST. Для того чтобы найти передаваемые данные, достаточно осуществить доступ к массиву POST по ключу, совпадающему с именем элемента ввода формы. Таким образом, чтобы получить доступ к имени пользователя (то есть к значению элемента ввода с именем nm, достаточно обратиться к массиву следующим образом: _POST["nm"].Заметим, что данный сценарий предполагает настройки интерпретатора по умолчанию, запрещающие регистрацию глобальных переменных. Если же разрешена регистрация глобальных переменных, РНР для каждого элемента формы создает переменную с соответствующим именем. Например, для имени пользователя будет создана глобальная переменная $nm.В данном сценарии используется короткая форма вывода, не использующая оператор echo: конструкция =выражение эквивалентно конструкции echo (выражение);Интерпретатор РНР выводит сообщения об ошибках сценария и предупреждения о некоторых операциях непосредственно в браузер пользователя. Иногда возникает потребность использовать в сценарии переменные, которые могут быть еще не инициализированы. В таком случае мы также можем получить предупреждающее сообщение. Для отключения таких сообщений может использоваться

оператор @, который ставится непосредственно перед выражением. В этом случае сообщение об ошибке сценария выводиться не будут.

&&&$$$002-014-100$Лекция №14. Вопросы для самоконтроля1. Какие существуют серверные технологии?2. Что такое CGI?3. Для чего предназначен PHP? Каковы его основные особенности?

&&&$$$002-015-000$3.2.15 Лекция №15. Технологии XML1. XML.2. Создание XML документа.3. XML-генераторы.4. DTD.

&&&$$$002-015-001$3.2.15.1 XML

XML (Extensible Markup Language) - это новый SGML-производный язык разметки документов, позволяющий структурировать информацию разного типа, используя для этого произвольный набор инструкций. Разработчиков Интернет приложений, пытающихся на практике использовать новую технологию, могут заинтересовать конкретные вопросы, связанные с проблемами создания, обработки XML-документов, их отображения на стороне клиента. В этой статье дается краткое представление о том, что представляет собой и для чего нужен XML-документ и на практических примерах иллюстрируются некоторые простые, но пока, к сожалению, мало описанные механизмы его обработки.Сегодня XML может использоваться в любых приложениях, которым нужна структурированная информация - от сложных геоинформационных систем, с гигантскими объемами передаваемой информации до обычных "однокомпьютерных" программ, использующих этот язык для описания служебной информации. При внимательном взгляде на окружающий нас информационный мир можно выделить множество задач, связанных с созданием и обработкой структурированной информации, для решения которых может использоваться XML: В первую очередь, эта технология может оказаться полезной для разработчиков сложных

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

XML является базовым стандартом для нового языка описания ресурсов, RDF, позволяющего упростить многие проблемы в Web, связанные с поиском нужной информации, обеспечением контроля за содержимым сетевых ресурсов, создания электронных библиотек и т.д.

Язык XML позволяет описывать данные произвольного типа и используется для представления специализированной информации, например химических, математических, физических формул, медицинских рецептов, нотных записей, и т.д. Это означает, что XML может служить мощным дополнением к HTML для распространения в Web "нестандартной" информации. Возможно, в самом ближайшем будущем XML полностью заменит собой HTML, по крайней мере, первые попытки интеграции этих двух языков уже делаются (спецификация XHTML).

XML-документы могут использоваться в качестве промежуточного формата данных в трехзвенных системах. Обычно схема взаимодействия между серверами приложений и баз данных зависит от конкретной СУБД и диалекта SQL, используемого для доступа к данным. Если же результаты запроса будут представлены в некотором универсальном текстовом формате, то звено СУБД, как таковое, станет "прозрачным" для приложения. Кроме того, сегодня на рассмотрение W3C предложена спецификация нового языка запросов к базам данных XQL, который в будущем может стать альтернативой SQL.

Информация, содержащаяся в XML-документах, может изменяться, передаваться на машину клиента и обновляться по частям. Разрабатываемые спецификации XLink и Xpointer позволят ссылаться на отдельные элементы документа, c учетом их вложенности и значений атрибутов.

Использование стилевых таблиц (XSL) позволяет обеспечить независимое от конкретного устройства вывода отображение XML- документов.

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

XML-документ представляет собой обычный текстовый файл, в котором при помощи специальных маркеров создаются элементы данных, последовательность и вложенность которых определяет структуру документа и его содержание. Основным достоинством XML документов является то, что при относительно простом способе создания и обработки (обычный текст может редактироваться любым тестовым процессором и обрабатываться стандартными XML анализаторами), они позволяют создавать структурированную информацию, которую хорошо "понимают" компьютеры. &&&

$$$002-015-002$3.2.15.2 Создание XML документаДля создания XML документа в простейшем случае вам не понадобится ничего кроме обычного текстового редактора (по мнению многих Web-дизайнеров, лучший инструмент для создания Web-страниц). Вот пример небольшого XML-документа, используемого вместо обычной записной книжки: <?xml version="1.0" encoding="koi-8"?><notepad> <note id="1" date="12/04/99" time="13:40"> <subject>Важная деловая встреча</subject> <importance/> <text> Надо встретиться с <person id="1625">Иваном Ивановичем</person>, предварительно позвонив ему по телефону <tel>123-12-12</tel> </text> </note> ... <note id="2" date="12/04/99" time="13:58"> <subject>Позвонить домой</subject> <text> <tel>124-13-13</tel> </text> </note></notepad>При создании собственного языка разметки вы можете придумывать любые названия элементов, (почти любые, т.к. список допустимых символов ограничен и приведен в спецификации XML), соответствующих контексту их использования. В нашем примере приведен лишь один из многочисленных способ создания структуры дневника. В этом и заключается гибкость и расширяемость XML-производных языков - они создаются разработчиком "на лету", согласно его представлениям о структуре документа, и могут затем использоваться универсальными программами просмотра наравне с любыми другими XML-производными языками, т.к. вся необходимая для синтаксического анализа информация заключена внутри документа. Создавая новый формат, необходимо учитывать тот факт, что документов, "написанных на XML", не может быть в принципе - в любом случае авторы документа для его разметки используют основанный на стандарте XML (т.н. XML-производный) язык, но не сам XML. Поэтому при сохранении созданного файла можно выбрать для него какое-то подходящее названию расширение (например, noteML). XML может использоваться вами для создания документов какого-то определенного типа и структурой, необходимой для конкретного приложения. Однако если сфера применения языка оказывается достаточно широкой и он начинает представлять интерес для большого числа разработчиков, то его спецификация вполне может быть представлена на рассмотрение в W3C и после согласования всеми заинтересованными сторонами, утверждена консорциумом в качестве официальной рекомендации. Надо заметить, что процесс появления новой спецификации очень длителен и сложен. Любой документ, предлагаемый W3C, прежде чем стать стандартом проходит несколько этапов. Сначала пожелания и

рекомендации, поступающие от различных компаний, участвующих в его разработке, оформляются в виде принятого к сведению замечания (Note), своеобразного протокола о намерениях. Информация, изложенная в таких документах предназначена только для обсуждения членами консорциума и никто не дает гарантии того, что эти замечания потом станут рекомендацией. Следующей этапом продвижения документа является рабочий вариант спецификации, который составляет и изменяет в дальнейшем специально созданная рабочая группа (Working Group), в состав которой входят представители заинтересовавшихся идеей компаний. Все изменения, вносимые в этот документ обязательно публикуются на сервере консорциума www.w3.org и до тех пор, пока рабочий вариант не станет рекомендацией, он может служить для разработчиков лишь "путеводной звездой", с которой компания может сверять свои планы, но не должна использовать при разработке ПО. В том случае, если стороны договорились по всем основным вопросам и существенных изменений в документ больше вносится, рабочий вариант становится Предложенной Рекомендацией и после голосования членами рабочей группы может стать уже Официальной Рекомендаций W3C, что по статусу соответствует стандарту в WWW. &&&

$$$002-015-003$3.2.15.3 XML-генераторыXML документы могут служить промежуточным форматом для передачи информации от одного приложения к другому (например, как результат запроса к базе данных), поэтому их содержимое иногда генерируется и обрабатывается программами автоматически. Далеко не всегда XML документ нужно создавать вручную. Пусть, например, нашей задачей является создание формата хранения данных регистрации каких-то происходящих в системе событий (log-файла). В простейшем случае можно ограничиться фиксированием успешных и ошибочных запросов к нашим ресурсам - в таком документе должна присутствовать информация о времени произошедшего события, его результате (удача/ошибка), IP адресе источника запроса, URI ресурса и коде результата. Наш XML документ может выглядеть следующим образом: <?xml version="1.0" encoding="koi-8"?> <log> <event date=" 27/May/1999:02:32:46 " result="success"> <ip-from> 195.151.62.18 </ip-from> <method>GET</method> <url-to> /misc/</url-to> <response>200</response> </event> <event date=" 27/May/1999:02:41:47 " result="success"> <ip-from> 195.209.248.12 </ip-from> <method>GET</method> <url-to> /soft.htm</url-to> <response>200</response> </event> </log>Структура документа довольно проста - корневым в данном случае является элемент log, каждое произошедшее событие фиксируется в элементе event и описывается при помощи его атрибутов(date - время и result - тип события ) и внутренних элементов (method - метод доступа, ip-from - адрес источника, url-to - запрашиваемый ресурс, response - код ответа). Генерацией этого документа может заниматься, например, модуль аутентификации запросов в систему, а использованием - программа обработки регистрационных данных (log viewer). &&&

$$$002-015-004$3.2.15.4 DTDИтак, мы создали XML документ и убедились, что набор используемых при этом тэгов позволяет осуществлять любые манипуляции с нашей информацией. В таком случае, для того, чтобы утвердить правила нашего нового языка, т.е. список допустимых элементов, их возможное содержимое и атрибуты, мы должны создать DTD - определения (на момент написания статьи спецификация схем данных для XMLдокументов еще не утверждена и пока DTD являются единственным стандартным способом описания грамматики).

Небольшой пример для нашего XML-документа: <?xml encoding="koi8-r"?> <!ELEMENT log (event)+><!ELEMENT event (ip-from,method,uri-to,result)><!ELEMENT method (#PCDATA)><!ELEMENT ip-from (#PCDATA)><!ELEMENT url-to (#PCDATA)><!ELEMENT response (#PCDATA)><!ATTLIST event result CDATA #IMPLIED date CDATA #IMPLIED> Сохраните этот файл под именем log.dtd и включите в XML-документ новую строчку:  Теперь верифицирующий XML-анализатор при обработке документа будет сверять порядок определения элементов и их атрибутов с тем, как это указано у нас в DTD-нотациях и в случае нарушения внутренней структуры (которая определяет "семантику"&&&

$$$002-015-100$Лекция №15. Вопросы для самоконтроля 1. Что такое XML?2. Как создать XML документ?3. Какую функцию выполняют XML-генераторы?4. Что такое DTD?

&&&$$$004-000-000$3.4 Лабораторный практикум&&&

$$$004-001-000$3.4.1 История возникновения Интернета. Понятие Интернета. Стек протоколов ТСР/IР&&&

$$$004-001-001$3.4.1.1 Методические указания к лабораторному занятию №1Цель занятия:

1. Закрепление изученного материала по темам: История возникновения Интернета. Понятие Интернета. Стек протоколов ТСР/IР.

План занятия:Рассмотрение теоретических вопросов по теме занятия.&&&

$$$004-001-002$3.4.1.2 Задания для самоконтроля к занятию №11. Какова хронология создания Интернета?2. Что такое Интернет?3. Что такое протокол?4. Что такое провайдер?5. Что такое стек протоколов TCP/IP?

&&&$$$004-002-000$3.4.2 Интернет- протокол. Адресация в Интернете. Служба DNS

&&&$$$004-002-001$3.4.2.1 Методические указания к лабораторному занятию №2

Цель занятия:

1. Закрепление изученного материала по темам: Интернет- протокол. Адресация в Интернете. Служба DNS.

План занятия:Рассмотрение теоретических вопросов по теме занятия.

&&&$$$004-002-002$3.4.2.2 Задания для самоконтроля к занятию №21. Что такое Интернет- протокол?2. Как осуществляется адресация в Интернете?3. Какую функцию выполняет служба DNS?

&&&$$$004-003-000$3.4.3 Протокол ТСР


Цель занятия:1. Закрепление изученного материала по темам:

Функции протокола TCP. Базовая передача данных. Достоверность. Управление потоком. Разделение каналов. Работа с соединениями.

План занятия:Рассмотрение теоретических вопросов по теме занятия&&&

$$$004-003-002$3.4.3.2 Задания для самоконтроля к занятию №31. Какова функция протокола TCP?2. Как выполняется базовая передача данных?3. Дать определение достоверности при передаче информации.4. Как осуществляется управление потоком при передаче информации?5. Как осуществляется разделение каналов при передаче информации?6. Как осуществляется работа с соединениями?

&&&$$$004-004-000$3.4.4 Протокол НТТР



HTML. Браузер. HTTP. Структура HTTP-запроса. Структура HTTP-ответа.


$$$004-004-002$3.4.4.2 Задания для самоконтроля к занятию №41. Что такое служба WWW?2. Для чего предназначен браузер?

3. Что такое Веб-сервер?4. Каково назначение и функции протокола HTTP?5. Какова структура HTTP-запроса?6. Какова структура HTTP-ответа?

&&&$$$004-005-000$3.4.5 Обзор клиентских технологий Интернет. Понятие о языках разметки. SGML. HTML как приложение SGML



Обзор клиентских технологий Интернет. Понятие о языках разметки. SGML. HTML как приложение SGML.


$$$004-005-002$3.4.5.2 Задания для самоконтроля к занятию №51. Какие существуют клиентские технологии Интернет?2. Для чего предназначены языки разметки?3. Что такое SGML?4. Какие функции выполняет HTML как приложение SGML?

&&&$$$004-006-000$3.4.6 Структура HTML-документа. Основные элементы HTML



Структура HTML-документа. Теги HTML.

План занятия:1. Рассмотрение теоретических вопросов по теме занятия.2. Выполнение практических заданий по теме занятия.

Пример 1:<head> <title>СГУ им. Шакарима, кафедра "Информационные системы": новости</title> <meta http-equiv="keywords" content="системы, проектирование, автоматизированный, sistem, сгу, университет, вуз, кафедра"> <meta name="author" content="julia kritskaya, 2001, [email protected]"> </head>

Пример 2:<HTML><HEAD> <TITLE>Моя страничка</TITLE>

</HEAD><BODY bgcolor=“#ffffff”> Основной текст</BODY> </HTML>

&&&$$$004-006-002$3.4.6.2 Задания для самоконтроля к занятию №6

1. Какова структура HTML-документа?2. Что такое теги HTML?3. Что такое контейнеры?4. Что такое автономные теги?5. Что такое вложенные теги?6. Что такое атрибуты тегов?

&&&$$$004-007-000$3.4.7 Структура HTML-документа. Основные элементы HTML



Структурные теги HTML.



Пример 2:<HTML><HEAD> <TITLE>Моя страничка</TITLE></HEAD><BODY bgcolor=“#ffffff”> Основной текст</BODY> </HTML>


1. Какие теги относятся к структурным тегам?2. Какие атрибуты необходимо указывать для структурных тегов?

&&&$$$004-008-000$3.4.8 Элементы форматирования текста. Списки. Таблицы. Фреймы



Элементы форматирования текста.


Пример 1:<body><h1 align=center>Пример заголовка 1</h1><h2 align=center>Пример заголовка 2</h1><h3 align=left>Пример заголовка 3</h1><h4 align=left>Пример заголовка 4</h1><h5 align=right>Пример заголовка 5</h1><h6 align=right>Пример заголовка 6</h1></body>

Результат:

Пример 2:<br>Это обычный текст <br><center><b>Этот текст будет отображен полужирным шрифтом и по центру</b></center><br><i>Этот текст будет выведен курсивом</i><br><strike>Этот текст зачеркнут</strike> <br><s>Этот текст зачеркнут</s><br><u>Этот текст подчеркнут</u><br><small>Этот текст, размер шрифта которого на один меньше, чем у окружающего текста</small><br>Это обычный текст <br><big>Этот текст, размер шрифта которого на один больше, чем у окружающего текста</big><br><strike> </strike><br><font face ="Агiаl, Verdana">Шрифт этого текста иной</font> <br><font color =RED>Kpacный текст</font><br><font size=6>П</font><font size=5> pимep</font><br><font size=+5>П</font><font size=-1> pимep</font>

Результат:


1. Для чего предназначен тег <p>…</p>?2. Для чего предназначены теги <h1>…</h1>, … <h6>…</h6>?3. Для чего предназначен тег < center >…</ center >?4. Для чего предназначен тег < b >…</ b >?5. Для чего предназначен тег < i >…</ i >?6. Для чего предназначен тег < strong >…</ strong >?7. Для чего предназначен тег < blink >…</ blink >?8. Для чего предназначен тег < c >…</ c >?9. Для чего предназначен тег < u >…</ u >?10. Для чего предназначен тег < small >…</ small >?11. Для чего предназначен тег < big >…</ big >?12. Для чего предназначен тег < span >…</ span >?13. Для чего предназначен тег < strike >…</ strike >?14. Для чего предназначен тег < font >…</ font >?

&&&$$$004-009-000$3.4.9 Элементы форматирования текста. Списки. Таблицы. Фреймы



Списки. Таблицы. Фреймы


Пример 1:Мои интересы:

<UL><LI> Программы организации коллективной работы<LI> Lotus Notes<LI> Просмотр WWW

<LI> Написание книг по компьютерной тематике<LI> Бродвейские мюзиклы и театр</UL>

Пример 2:<UL><LI> Программы организации коллективной работы<LI> Lotus Notes<LI> Просмотр WWW<LI> Написание книг по компьютерной тематике<LI> Бродвейские мюзиклы и театр</UL>

Результат:

Пример 3:<OL TYPE=a> <LН><В>График моего путешествия по Европе</В></LH> <LI>Прибытие самолетом в Париж <LI>Ночной переезд в Берлин <LI>Поезд в Вену <LI>Самолет в Рим <LI>Остановка в Ницце <LI>Возвращение в Париж, самолет домой </OL>Результат:

Пример 4:<HTML> <HEAD><TITLE>Термины</TITLE>

</HEAD> <BODY><H2 ALIGN = Left> Термины</H2>

<dl><dt>Web server<dd><P>Web – сервер. Сервер, хранящий и пересылающий HTML- документы и другие

информационные ресурсы Internet с использованием протокола HTTP. Его называют также HTTP – сервером. </P>

<dt>Home page<dd><P>”Домашняя страница”. Головная, начальная страница, локальный архив. Первая

страница какого-либо Web-сервера или логически связанной группы HTML документов.</P> </dl> </BODY> </HTML> Результат:

Пример 5:<HTML> <HEAD><TITLE>Советы по изготовлению страничек</TITLE></HEAD> <BODY><H2 ALIGN = Left> Советы по изготовлению страничек</H2><ol><li>По возможности избегайте пиктогроммы «В процессе производства»<li>Используйте соответствующий язык<li>Не перегружайте вашу страничку большими изображениями<ol><ul><li>Избегайте драматического эффекта!<li>Проверяйте как можно чаще ссылке на вашей странице<li>Не забывайте обновлять свою страничку!</ul><ol><li>Перед тем как положить готовую страничку на сервер надо:<ul><li>Проверить грамматические ошибки<li>Просмотреть свою страничку в различных программах просмотра.</ul><li>Для рекламы странички надо: </ol> </BODY> </HTML>Результат:

Пример 6:<html> <head><title>Таблица</title></head> <body><h2 align = center> Обычная таблица 3х3 с заголовкамии различными видами разбиения ячеек и рамкой шириной равной 8</h2><table border=8><tr><th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th></tr><tr><td align=center rowspan=2colspan=1>ячейка таблицы A</td><td>ячейка таблицы B</td><td>ячейка таблицы C</td></tr><tr><td>ячейка таблицы D</td><td>ячейка таблицы E</td><tr><td align=center rowspan=1colspan=3>ячейка таблицы F</td></tr> </title> </body> </html>Результат:

Пример 7:<HTML> <HEAD><TITLE>Таблица</TITLE></HEAD><BODY><H2 ALIGN = Center> Таблица</H2><TABLE BORDER WIDTH=”50%”><TR><TD WIDTH=80%>Таблица в 50% ширины от экрана. Столбец в 80% ширины

таблицы</TD><TD>ячейка 2</TD>

</TR><TR><TD>ячейка 3</TD><TD>ячейка 4</TD></TR></TABLE> </BODY> </HTML>Выполнение данного примера демонстрирует, сколько места занимают на экране таблица,

столбцы и ячейки.Результат:

Пример 8:<html><head><title>примеры</title></head><body bgcolor=#e1c8dc><h2>это плавающий фрейм</h2><iframe width=300 height=100 align=left bgcolor=#b760a0 src="about.html"></iframe></body></html>

Результат:


1. Какие виды списков можно построить?2. Какие теги предназначены для оформления маркированного списка? Какие существуют

атрибуты?3. Какие теги предназначены для оформления нумерованного списка? Какие существуют

атрибуты?4. Какие теги предназначены для оформления списка определений? Какие существуют атрибуты?5. Как создать вложенные списки6. Какой тег используется для построения таблицы? Какие атрибуты существуют у этого тега?7. Какие виды фреймов существуют?8. Как создать фреймы различных видов?

&&&

$$$004-010-000$3.4.10 Ссылки. Изображения&&&

$$$004-010-001$3.4.10.1 Методические указания к лабораторному занятию №10Цель занятия:

1. Закрепление изученного материала по темам: Ссылки. Изображения.


Пример 1. Использование абсолютных ссылок<html><body><a href=http://www.yandex.ru> Поисковая система Яндекс</a></body></html>

Пример 2. Использование относительных ссылок<html><body><a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br><a href=tip.html>Как сделать такое же фото?</a></body></html>

Пример 3. Создание внутренней ссылки<html><body><a name=top></a> Текст, получающий метку<a href=#top>Наверх</a></body></html>

Пример 4. Ссылка на закладку из другой веб-страницы<html><body><a href=text.html#bottom>Перейти к нижней части текста</a></body></html>

Пример 5. Создание ссылки на новое окно<html><body><a href=http://www.semgu.kz>Обычная ссылка на сайт www.bsu.edu.ru</a><br><a href=http://www.semgu.kz target=_blank>Ссылка открывает новое окно на сайт www.bsu.edu.ru</a>

</body></html>

Пример 6:<hr noshade width=100%><hr noshade size=3 width=70% align=left><hr noshade size=10 width=70% align=right><hr size=5 width=50% align=left>Результат:

Пример 7:<img src="name.jpg" width=170 height=217 border=0 alt="САПР">Результат:

&&&$$$004-010-002$3.4.10.2 Задания для самоконтроля к занятию №101. Какой тег используется для создания гиперссылки? Каковы его атрибуты?2. Какой тег используется для вывода графического изображения? Каковы его атрибуты?3. Какой тег используется для вывода горизонтальной линейки? Каковы его атрибуты?

&&&$$$004-011-000$3.4.11 Таблицы стилей



Каскадные таблицы стилей (CSS). Методы применения таблиц стилей к документу. Селекторы. Свойства форматирования элементов.


Задание 11. Откройте любой ранее созданный Вами HTML-документ в режиме редактора Блокнот. Установите для нескольких абзацев стиль Заголовок 1, сохраните документ и просмотрите его в окне браузера.

2. Вновь откройте данный документ в режиме просмотра HTML-кода и установите для одного из

заголовков атрибут <style>:

<h1 style = "font-style: italic; color: navy"> Мой новый стиль заголовка </h1>3. Примените общий стиль для заголовка и абзаца с помощью тега <div>: выравнивание по центру, шрифт — подчеркнутый.<div style = "text-align: center; text-decoration: underline"><h1> Наглядное отображение </h1><p> использования тега div</p>

<h1 style = "color: red; font-family: corner"><span style = "color:Green">для текста </span>,

заданного стилем<h1><h1 style =" font- style: italic; color: nevy">Еще один <span style = "color:Green "> стиль </span> текста. <h1></div>4. Сохраните изменения и просмотрите документ в окне браузера.

Задание 2

1. Откройте любой ранее созданный Вами html-документ в режиме редактора Блокнот.

2. В область head данного документа введите коды таблицы стилей

<html>

<head>

<style type = "text/css">

<body {background: yellow: color: green}

/* Желтый фон документа с зелеными буквами */

h1 {font: 20pt Arial bold; color: red}

/* Заголовок h1: полужирный шрифт Arial высотой 20 красного цвета */

p {font: 12pt Arial; text-indent: 1.25cm}

/* Параграф: красная строка в 1.25 см, шрифт Arial высотой 12 */

</style>

</head>

<body>

<h1> Новый стиль заголовка </h1>

<p> Новый стиль параграфа.</р>

</body>

</html>

3. Сохраните документ.

4. Скопируйте таблицу стилей в буфер обмена и внедрите ее в другой html-документ

Задание 3

1. Создайте стилевой файл и примените его для форматирования ранее созданных вами страниц.Для создания стилевого файла Вам потребуются несколько графических файлов: фоновое

изображение, маркеры, линий и т.д. (файлы *.jpg или *.gif)2. Загрузите программу Блокнот и впишите следующий код:

body {font-family: Verdana, Arial, Helvetica, sans-serif: color: rgb(0.90,90);font-size: 12px; background-image: url("hit.gif");}p { font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb{0,90,90);}ul {list-style-image: url("123.gif");}a {color: #707985: text-decoration: none;}

3. Сохраните документ как файл stylesl.css.

4. Загрузите 2-3 ранее созданных html-документа и в область head каждого документа вставьте

ссылку на стилевой файл:

<link rel="stylesheet" href=" styles1.css" type= "text/css">

5. Сохраните документы и просмотрите их в окне браузера.6. Внесите изменения в стилевой файл stylesl.css, например, замените файл фонового

изображения и сохраните документ. Переключитесь в режим просмотра документа в браузере и выполните команду Обновить страницу

7. Создайте новый стилевой файл styles2.css (например, замените в файле stylesl.css файлы

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

8. Откройте несколько html-документов в режиме html-кода и замените имя стилевого файла в

записи ссылки

Задание 4

1. Загрузите стилевой файл stylesl.css и дополните его кодами классов стилей для абзаца,

заголовка и гиперссылки:

Body {font-family: Verdana, Arial, Helvetica, sans-serif: color: rgb(0.90,90);

font-size: 12px; background-image: url("*0.jpg");}

P{ font-family: Verdana, AriaL Helvetica, sans-serif; color: rgb{0,90,90);}

.fon{ background-image=url(*l.jpg);}

.fon1 {text-align: center; backgroiund-image=url(*2.gif);}

ul {list-style-image: url('*l.gif);}.ul1 {list-style-image: url('*2.gif);}.ul2{list-style-image: url('*3.gif);}.ul3{list-style-image:url('*4.gif);}

.ul4{list-style-image:url('*5.gif);}

H1.Border {border-width: 1: border: solid; border-color: green; text-align:center}H1.Background {background-color: lime; text-align: center}a {color: #707986: text-decoration: none;}

.prod {font-family: Verdana. Anal. Helvetica, sans-serif; font-size: lOpx; color: #2D3368: font-style: normal: font-weight: bold: text-decoration: none: line-height: 15px;}.prod:hover {font-family: Verdana, Arial. Helvetica, sans-serif; font-size: lOpx: color: #A57329; font-style: normal; font-weight: bold: text-decoration: none; line-height: 15px;}

.menuurl {font-family: Verdana. Arial. Helvetica, sans-serif; color: #222222; font-

size: 20px: font-style: normal; font-weight: bold;}

2. Сохраните изменения в файле stylesl.css

Задание 51. Загрузите созданный ранее html-документ и определите для отдельных элементов

документа классы стилей, например:

<html>

<head>

<link href="stylesl.css" rel="stylesheet" type="text/css">

</head>

<body>

<р>Пример текста</р>

<p class="fon">Пример текста</р>

<H1 class="Border">Заголовок первого уровня с рамкой</Н1>

<Н1 class="Background">Заголовок первого уровня с фоном</Н1>

<Н1>Заголовок первого уровня стандартный</Н1>

</body>

</html>

2. Сохраните документ и прострите в окне браузера.


1. Что такое каскадные таблицы стилей (CSS)?2. Какие существуют методы применения таблиц стилей к документу?3. Что такое селекторы? Какие виды селекторов существуют?4. Какие свойства форматирования элементов можно определить при создании каскадных таблиц

стилей?

&&&$$$004-012-000$3.4.12 Формы


Цель занятия:

1. Закрепление изученного материала по темам: Форма. Элементы формы.


Пример:<FORM metod=post action=mailto:[email protected]>Что будете ловить?<BR><INPUT type=radio name=fish value=“Карась”> Карась<BR><INPUT type=radio name=fish value=“Щука” checked> Щука<BR><INPUT type=radio name=fish value=“Сом”> Сом<BR></FORM>

Пример:<FORM metod=post action=mailto:[email protected]><INPUT type=checkbox name=html> HTML-конструирование<BR><INPUT type=checkbox name=js checked> JavaScript-конструирование<BR><INPUT type=checkbox name=dtml> DTML-конструирование<BR><INPUT type=checkbox name=al checked> Алгоритмика</FORM>Значение атрибута name с добавкой «=on» передается в сеть, если флажок отмечен. Например, если выбраны книги «Алгоритмика» и «JavaScript-конструирование», в сеть будет передана запись:

js=onal=on


Пример:<FORM>

<INPUT type=file name=MyFile size=20 maxlenght=40></FORM>

Пример:<FORM>

<INPUT type=text name=MyFam size=20 maxlenght=40 value=“Введите фамилию”></FORM>


Атрибут size задает ширину строки ввода в символах (рекомендуется кодировать с запасом).Поле ввода пароля <INPUT type=password>Прямоугольное текстовое поле, отличающееся от поля для ввода текста только тем, что вводимый текст отображается в нем как соответствующее количество «звездочек» или «точек». Имеет те же атрибуты, что и при type=text.Пример:

<FORM><INPUT type=password name=MyPass size=20

maxlenght=40 value=“Пароль”>

</FORM>

Пример: <FORM>

<TEXTAREA name=MyFam rows=7 cols=20 wrap=virtual> Для прокручивания содержимого в этом поле ввода используйте вертикальную линейку прокрутки или клавиши PgUp, PgDn либо клавиши управления курсором. </TEXTAREA></FORM>


<TABLE bgcolor=silver> <TR> <TD> <P>Укажите автора: <P>Здесь лапы у елей дрожат на весу,<BR> Здесь птицы щебечут тревожно.<BR> Живешь в заколдованном диком лесу,<BR> Откуда уйти невозможно. </TD> </TR> <TR> <TD> <SELECT name=autor> <OPTION>Выберите автора</OPTION> <OPTION>А.Пушкин</OPTION> <OPTION>М.Лермонтов</OPTION> <OPTION>В.Высоцкий</OPTION> <OPTION>Б.Окуджава</OPTION> </SELECT> </TD> </TR> </TABLE></FORM>

Для раскрывающегося списка самый первый пункт (демонстрируемый по умолчанию) обычно является «фиктивным и содержит текст краткой «подсказки» для пользователя, например: «Выберите автора».


<INPUT type=submit name=znach value=Пуск></FORM>

Пример:<FORM>

<INPUT type=button value=“Нажми меня” onclick= alert(“Привет!”)></FORM>

Пример:<FORM>

<INPUT type=image name=button value="Графическая кнопка" src=./pic/image.jpg></FORM>

&&&$$$004-012-002$3.4.12.2 Задания для самоконтроля к занятию №121. Что такое форма?2. Как создать элемент формы «Радиокнопка»?3. Как создать элемент формы «Флажок»?4. Как создать элемент формы «Поле ввода текста»?5. Как создать элемент формы «Многострочное поле ввода текста»?6. Как создать элемент формы «Список»?7. Как создать элемент формы «Кнопка»?

&&&$$$004-013-000$3.4.13 Сценарии. Объектная модель документа. Динамическое изменение содержания документ



Сценарии. Объектная модель документа.



1. Что такое сценарий?2. Как вызвать сценарий?3. Какова объектная модель документа?

&&&$$$004-014-000$3.4.14 Обзор серверных технологий. CGI. Основные сведения о РНР




План занятия:1. Рассмотрение теоретических вопросов по теме занятия.2. Выполнение практических заданий по теме задания.

&&&$$$004-014-002$3.4.14.2 Задания для самоконтроля к занятию №141. Какие существуют серверные технологии?2. Что такое CGI?3. Для чего предназначен PHP? Каковы его основные особенности?

&&&$$$004-015-000$3.4.15 Технологии XML



XML. Создание XML документа. XML-генераторы. DTD.



1. Что такое XML?2. Как создать XML документ?3. Какую функцию выполняют XML-генераторы?4. Что такое DTD?

&&&$$$007-000-000$3.7 Блок контроля знаний&&&

$$$007-001-000$3.7.1 Задание по 1-модулюНа 5-й неделе курса для осуществления контроля знаний по модулю 1 необходимо

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

Вопросы представлены в таблице:

Номер варианта Вопрос0. Локальные компьютерные сети. Назначение локальных сетей. Прямое соединение.

Рабочие станции и файловый сервер. Одноранговые сети.1. Топология локальных сетей.2. Аппаратное обеспечение локальной сети.3. Понятие Интернета. История возникновения Интернета.4. Сервисы Интернета.5. Протоколы. Стек протоколов TCP/IP.6. Интернет-протокол. Адресация в Интернете.7. Служба DNS.8. Протокол TCP.9. Протокол IP.

Задание оформить в виде реферата в приложении MS Word. Объем – не более 5 страниц.

При оформлении определить следующие параметры форматирования: Шрифт: тип — Times New Roman. Междустрочный интервал – полуторный. Размер шрифта - 14. Размеры полей: левое – 30 мм, верхнее – 20 мм, нижнее – 25 мм, правое – 10

мм.

Максимальная оценка – 135 баллов.

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

1. Изучить материал следующих лекций: Лекция 1, Лекция 2, Лекция 3, Лекция 4, Лекция 5.

2. Использовать литературные источники и ресурсы Интернет.

&&&$$$007-001-001$3.7.2 Задание по 2-модулюНа 8-й неделе курса для осуществления контроля знаний по модулю 2 необходимо

прислать решение следующего задания для всех вариантов:Создать HTML-документ, который будет выводить следующий текст:



1. Изучить материал следующих лекций: Лекция 6, Лекция 7, Лекция 8.2. Изучить материал следующих лабораторных занятий: Лабораторное занятие

6, Лабораторное занятие 7, Лабораторное занятие 8.3. Использовать литературные источники и ресурсы Интернет.4. Использовать примеры, приведенные в данном блоке.

Примеры выполнения заданий:


Пример 2:<HTML><HEAD> <TITLE>Моя страничка</TITLE></HEAD><BODY bgcolor=“#ffffff”> Основной текст</BODY> </HTML>

Пример 3:<body><h1 align=center>Пример заголовка 1</h1><h2 align=center>Пример заголовка 2</h1><h3 align=left>Пример заголовка 3</h1><h4 align=left>Пример заголовка 4</h1><h5 align=right>Пример заголовка 5</h1><h6 align=right>Пример заголовка 6</h1></body>

Результат:

Пример 4:<br>Это обычный текст <br><center><b>Этот текст будет отображен полужирным шрифтом и по центру</b></center><br><i>Этот текст будет выведен курсивом</i><br><strike>Этот текст зачеркнут</strike> <br><s>Этот текст зачеркнут</s><br><u>Этот текст подчеркнут</u><br><small>Этот текст, размер шрифта которого на один меньше, чем у окружающего текста</small><br>Это обычный текст <br><big>Этот текст, размер шрифта которого на один больше, чем у окружающего текста</big><br><strike> </strike><br><font face ="Агiаl, Verdana">Шрифт этого текста иной</font> <br><font color =RED>Kpacный текст</font>

<br><font size=6>П</font><font size=5> pимep</font><br><font size=+5>П</font><font size=-1> pимep</font>

Результат:

&&&$$$007-001-002$3.7.3 Задание по 3-модулюНа 12-й неделе курса для осуществления контроля знаний по модулю 3

необходимо прислать решение следующего задания в соответствии с номером своего варианта. Вариант выбирается по последней цифре зачетной книжки.

Вариант №0Создать HTML-документ, который будет содержать следующие элементы:1. Текст с различными параметрами форматирования.2. Графическое изображение.3. Гиперссылку на другой HTML-документ.4. Гиперссылку в пределах создаваемого HTML-документа.5. Список.6. Таблицу.





Вариант №9Создать HTML-документ, который будет содержать следующие элементы:1. Текст с различными параметрами форматирования.

2. Графическое изображение.3. Гиперссылку на другой HTML-документ.4. Гиперссылку в пределах создаваемого HTML-документа.5. Список.6. Таблицу.



1. Изучить материал следующих лекций: Лекция 9, Лекция 10, Лекция 11, Лекция 12.

2. Изучить материал следующих лабораторных занятий: Лабораторное занятие 9, Лабораторное занятие 10, Лабораторное занятие 11, Лабораторное занятие 12.

3. Использовать литературные источники и ресурсы Интернет.4. Использовать примеры, приведенные в данном блоке.

Примеры выполнения заданий:Пример 1:Мои интересы:

<UL><LI> Программы организации коллективной работы<LI> Lotus Notes<LI> Просмотр WWW<LI> Написание книг по компьютерной тематике<LI> Бродвейские мюзиклы и театр</UL>

Пример 2:<UL><LI> Программы организации коллективной работы<LI> Lotus Notes<LI> Просмотр WWW<LI> Написание книг по компьютерной тематике<LI> Бродвейские мюзиклы и театр</UL>

Результат:

Пример 3:<OL TYPE=a> <LН><В>График моего путешествия по Европе</В></LH> <LI>Прибытие самолетом в Париж <LI>Ночной переезд в Берлин <LI>Поезд в Вену <LI>Самолет в Рим <LI>Остановка в Ницце <LI>Возвращение в Париж, самолет домой </OL>Результат:

Пример 4:<HTML> <HEAD><TITLE>Термины</TITLE>

</HEAD> <BODY><H2 ALIGN = Left> Термины</H2><dl><dt>Web server<dd><P>Web – сервер. Сервер, хранящий и пересылающий HTML- документы и другие

информационные ресурсы Internet с использованием протокола HTTP. Его называют также HTTP – сервером. </P>

<dt>Home page<dd><P>”Домашняя страница”. Головная, начальная страница, локальный архив. Первая

страница какого-либо Web-сервера или логически связанной группы HTML документов.</P> </dl> </BODY> </HTML> Результат:

Пример 5:<HTML> <HEAD><TITLE>Советы по изготовлению страничек</TITLE></HEAD> <BODY><H2 ALIGN = Left> Советы по изготовлению страничек</H2><ol><li>По возможности избегайте пиктогроммы «В процессе производства»<li>Используйте соответствующий язык<li>Не перегружайте вашу страничку большими изображениями<ol><ul><li>Избегайте драматического эффекта!<li>Проверяйте как можно чаще ссылке на вашей странице<li>Не забывайте обновлять свою страничку!</ul><ol><li>Перед тем как положить готовую страничку на сервер надо:<ul><li>Проверить грамматические ошибки<li>Просмотреть свою страничку в различных программах просмотра.</ul><li>Для рекламы странички надо: </ol> </BODY> </HTML>Результат:

Пример 6:<html> <head><title>Таблица</title></head> <body><h2 align = center> Обычная таблица 3х3 с заголовкамии различными видами разбиения ячеек и рамкой шириной равной 8</h2><table border=8><tr>

<th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th></tr><tr><td align=center rowspan=2colspan=1>ячейка таблицы A</td><td>ячейка таблицы B</td><td>ячейка таблицы C</td></tr><tr><td>ячейка таблицы D</td><td>ячейка таблицы E</td><tr><td align=center rowspan=1colspan=3>ячейка таблицы F</td></tr> </title> </body> </html>Результат:

Пример 7:<HTML> <HEAD><TITLE>Таблица</TITLE></HEAD><BODY><H2 ALIGN = Center> Таблица</H2><TABLE BORDER WIDTH=”50%”><TR><TD WIDTH=80%>Таблица в 50% ширины от экрана. Столбец в 80% ширины

таблицы</TD><TD>ячейка 2</TD></TR><TR><TD>ячейка 3</TD><TD>ячейка 4</TD></TR></TABLE> </BODY> </HTML>Выполнение данного примера демонстрирует, сколько места занимают на экране таблица,

столбцы и ячейки.Результат:

Пример 8:<html><head><title>примеры</title></head><body bgcolor=#e1c8dc><h2>это плавающий фрейм</h2><iframe width=300 height=100 align=left bgcolor=#b760a0 src="about.html"></iframe></body></html>

Результат:

Пример 9. Использование абсолютных ссылок<html><body><a href=http://www.yandex.ru> Поисковая система Яндекс</a></body></html>

Пример 10. Использование относительных ссылок<html><body><a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br><a href=tip.html>Как сделать такое же фото?</a></body></html>

Пример 11. Создание внутренней ссылки<html><body><a name=top></a> Текст, получающий метку<a href=#top>Наверх</a></body></html>

Пример 12. Ссылка на закладку из другой веб-страницы<html><body><a href=text.html#bottom>Перейти к нижней части текста</a></body></html>

Пример 13. Создание ссылки на новое окно<html><body><a href=http://www.semgu.kz>Обычная ссылка на сайт www.bsu.edu.ru</a><br><a href=http://www.semgu.kz target=_blank>Ссылка открывает новое окно на сайт www.bsu.edu.ru</a></body></html>

Пример 14:<img src="name.jpg" width=170 height=217 border=0 alt="САПР">Результат:

&&&$$$007-001-003$3.7.4 Задание по 4-модулюНа 14-й неделе курса для осуществления контроля знаний по модулю 4

необходимо прислать решение следующего задания в соответствии с номером своего варианта. Вариант выбирается по последней цифре зачетной книжки.

Вариант №0Написать HTML-код, который будет выводить на экран форму следующего вида:






1. Изучить материал следующих лекций: Лекция 13, Лекция 14, Лекция 15.2. Изучить материал следующих лабораторных занятий: Лабораторное занятие

13, Лабораторное занятие 14, Лабораторное занятие 15.3. Использовать литературные источники и ресурсы Интернет.4. Использовать примеры, приведенные в данном блоке.

Примеры выполнения заданий:Пример:

<FORM metod=post action=mailto:[email protected]>Что будете ловить?<BR><INPUT type=radio name=fish value=“Карась”> Карась<BR><INPUT type=radio name=fish value=“Щука” checked> Щука<BR><INPUT type=radio name=fish value=“Сом”> Сом<BR></FORM>

Пример:<FORM metod=post action=mailto:[email protected]><INPUT type=checkbox name=html> HTML-конструирование<BR><INPUT type=checkbox name=js checked> JavaScript-конструирование<BR><INPUT type=checkbox name=dtml> DTML-конструирование<BR><INPUT type=checkbox name=al checked> Алгоритмика</FORM>Значение атрибута name с добавкой «=on» передается в сеть, если флажок отмечен. Например, если выбраны книги «Алгоритмика» и «JavaScript-конструирование», в сеть будет передана запись:

js=onal=on


Пример:<FORM>

<INPUT type=file name=MyFile size=20 maxlenght=40></FORM>

Пример:<FORM>

<INPUT type=text name=MyFam size=20 maxlenght=40 value=“Введите фамилию”></FORM>


Атрибут size задает ширину строки ввода в символах (рекомендуется кодировать с запасом).Поле ввода пароля <INPUT type=password>Прямоугольное текстовое поле, отличающееся от поля для ввода текста только тем, что вводимый текст отображается в нем как соответствующее количество «звездочек» или «точек». Имеет те же атрибуты, что и при type=text.Пример:

<FORM><INPUT type=password name=MyPass size=20

maxlenght=40 value=“Пароль”></FORM>

Пример:

<FORM><TEXTAREA name=MyFam rows=7 cols=20 wrap=virtual> Для

прокручивания содержимого в этом поле ввода используйте вертикальную линейку прокрутки или клавиши PgUp, PgDn либо клавиши управления курсором. </TEXTAREA></FORM>


<TABLE bgcolor=silver> <TR> <TD> <P>Укажите автора: <P>Здесь лапы у елей дрожат на весу,<BR> Здесь птицы щебечут тревожно.<BR> Живешь в заколдованном диком лесу,<BR> Откуда уйти невозможно. </TD> </TR> <TR> <TD> <SELECT name=autor> <OPTION>Выберите автора</OPTION> <OPTION>А.Пушкин</OPTION> <OPTION>М.Лермонтов</OPTION> <OPTION>В.Высоцкий</OPTION> <OPTION>Б.Окуджава</OPTION> </SELECT> </TD> </TR> </TABLE></FORM>

Для раскрывающегося списка самый первый пункт (демонстрируемый по умолчанию) обычно является «фиктивным и содержит текст краткой «подсказки» для пользователя, например: «Выберите автора».


<INPUT type=submit name=znach value=Пуск></FORM>

Пример:<FORM>

<INPUT type=button value=“Нажми меня” onclick= alert(“Привет!”)></FORM>

Пример:

<FORM><INPUT type=image name=button value="Графическая кнопка"

src=./pic/image.jpg></FORM>

&&&$$$007-001-004$3.7.5 Тесты для 1 рубежного контроля

1. Первая глобальная компьютерная сеть носила имя:A. BITNetB. ARPANetC. NSFNetD. InternetE. нет правильного ответа

2. Провайдер Internet это:A. организация-поставщик услуг InternetB. организация, занимающаяся созданием web-сайтовC. периферийное устройство, служащее для связи с другим компьютеромD. организация – владелец сетиE. нет правильного ответа

3. FTP - это:A. почтовый клиент;B. программа IP-телефонииC. протокол передачи файловD. все ответы верныE. нет правильного ответа

4. Задан URL-адрес web-страницы: http://www.sgzt.com/sgzt/archive/content/2005/03/043. Каково имя протокола доступа к этому информационному ресурсу?A. sgzt/archive/content/2005/03/043;B. com;C. http;D. www . sgzt . com .E. нет правильного ответа

5. В какой из приведенных доменных зон первого уровня может приобрести себе доменное имя юридическое лицо, зарегистрированное на территории РК?A. .comB. .ruC. .kzD. во всех перечисленныхE. .edu

6. Среди приведенных записей укажите корректный IP-адрес компьютера:A. 198.15.19.216B. 298.15.19.216C. 200,6,201,13D. http://www.ipc.ruE. www.ip-address.com

7. Какой из приведённых адресов e-mail корректен?A. Глеб@mur.ruB. mur.ru@gleb

http://www.sgzt.com/

C. [email protected]. [email protected]. http://www.mur.ru/gleb

8. Что такое HTML?A. Один из протоколов семейства TCP/IPB. Язык гипертекстовой разметки документаC. Язык программированияD. все ответы верныE. нет правильного ответа

9. Все организации, соединенные друг с другом самыми скоростными линиями связи, называют…A. ИнтернетB. локальная сетьC. сетьD. компьютерE. хребет Интернета (Backbon)

10. Мощный компьютер, постоянно подключенный к Интернету, называют…A. ИнтернетB. локальная компьютерC. сетьD. серверE. хребет Интернета (Backbon)

11. Коммутируемое подключение компьютера к серверу Сети – это…A. постоянное подключениеB. переменное подключениеC. временное подключениеD. линейное подключениеE. параллельное подключение

12. Какой стандартный протокол используется при передаче данных по ИнтернетуA. XCPB. TCP/IPC. ASXD. TY/UHFE. CDR/IKJ

13. Какой адрес является адресом электронной почтыA. [email protected]. www.relcom.kzC. www.rambler.ruD. home.fty.ruE. ftp.rtu.com

14. Какой домен верхнего уровня обозначает, что сервер принадлежит учебной организацииA. comB. ruC. govD. netE. edu

15. Выделенный фрагмент текста, с которым связан сетевой адрес другой Web-страницы, называется…A. сноска

B. примечаниеC. выделенный фрагментD. гипертекстовая ссылкаE. строка

16. Программа, предназначенная для просмотра WWW, называется…A. архиваторB. СУБДC. броузерD. табличный процессорE. графический редактор

17. Адрес www.rambler.ru является…A. адресом бесплатной электронной почтыB. адресом коммерческого сайтаC. адресом поисковой службыD. адресом вашего личного сайтаE. адресом провайдера

18. Адрес www.mail.ru является…A. адресом бесплатной электронной почтыB. адресом коммерческого сайтаC. адресом поисковой службыD. адресом вашего личного сайтаE. адресом провайдера

19. Адрес www.aport.ru является…A. адресом бесплатной электронной почтыB. адресом коммерческого сайтаC. адресом поисковой службыD. адресом вашего личного сайтаE. адресом провайдера

20. Адрес www.ok.kz.ru является…A. адресом бесплатной электронной почтыB. адресом коммерческого сайтаC. адресом поисковой службыD. адресом вашего личного сайтаE. адресом провайдера

21. Адрес www.yahoo.ru является…A. адресом бесплатной электронной почтыB. адресом коммерческого сайтаC. адресом поисковой службыD. адресом вашего личного сайтаE. адресом провайдера

22. Компьютерная сеть - это:A. Программа, для подключения компьютера в Internet;B. Несколько компьютеров, находящихся в одном помещении;C. Система компьютеров, связанных каналами передачи информации;D. Часть аппаратуры компьютера, обеспечивающая работу в сети.E. нет правильного ответа

23. Сеть, работающая в пределах одного помещения, называется:

A. ЛокальнаяB. ВсемирнаяC. ГлобальнаяD. ТелекоммуникационнаяE. нет правильного ответа

24. Локальная сеть, в которой все компьютеры выполняют одинаковые функции, называется:A. ОдноранговаяB. МногоранговаяC. Сеть с выделенным серверомD. ПерсональнаяE. нет правильного ответа

25. Компьютер, который распределяет между многими пользователями общие ресурсы, называется:A. ПровайдерB. Рабочая станцияC. Терминал абонентаD. СерверE. нет правильного ответа

26. Технические средства, связывающие компьютеры в сетях, называются.A. Хост-машинамиB. Пропускной способностьюC. Скоростью передачи информацииD. Каналами связиE. нет правильного ответа

27. Базовый протокол Интернета – это …A. TCPB. IPC. FTTPD. HTTPE. TCP/IP

28. Язык HTML – язык… A. программирования B. разметки страницы C. общения D. текстового редактораE. баз данных

29. Для чего используется язык HTML?A. для создания текстового документаB. для создания программC. для создания Web-страницD. для работы в InternetE. для создания запросов к базам данных

30. Аббревиатура HTML – это сокращение от …A. Hideous, Terrible, Mega-LeviathanB. HyperText Markup LanguageC. Hard To Master LingoD. все ответы верныE. нет правильного ответа

&&&$$$007-001-005$3.7.6 Тесты для 2 рубежного контроля

1. Язык HTML – язык… A. программирования B. разметки страницы C. общения D. текстового редактораE. баз данных

2. Для чего используется язык HTML?A. для создания текстового документаB. для создания программC. для создания Web-страницD. для работы в InternetE. для создания запросов к базам данных

3. Аббревиатура HTML – это сокращение от …A. Hideous, Terrible, Mega-LeviathanB. HyperText Markup LanguageC. Hard To Master LingoD. все ответы верныE. нет правильного ответа

4. Тэги HTML – это …A. это символы «/», используемые в коде веб-страницыB. название каждой строки кода веб-страницыC. особые маркеры, заключённые в угловые скобки «<>»D. особые маркеры, заключённые в \.../E. особые маркеры, заключённые в #...#

5. Между каким тэгом заключается документ HTML?A. <body></body> B. <head></head> C. <html></html> D. <font></font>E. <p></p>

6. Обязательные тэги любой HTML-страницы …A. <HTML></HTML>B. <TITLE></TITLE>C. <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>D. <font></font>E. <p></p>

7. Заголовок документа заключается в тэге… A. <html></html> B. <body></body> C. <br> D. <head></head>E. <font></font>

8. Тело документа заключается в тэге… A. <html></html> B. <body></body> C. <br>

D. <head></head>E. <font></font>

9. Какое расширение имеют Web-страницы? A. .txtB. .docC. .htmlD. .exeE. .com

10. Какой из тэгов является непарным? A. <head></head> B. <br> C. <title></title> D. <html></html>E. <font></font>

11. Для перехода текста на новую строку используется флаг… A. <html></html> B. <br> C. <font></font> D. <body></body>E. <title></title>

12. Тэг форматирования шрифта… A. <html></html> B. <font></font> C. <title></title> D. <br>E. <body></body>

13. Синтаксис установки цвета шрифта для части текста… A. <font color=”#AAA111”></font> B. <font bgcolor=”#AAA111”></font> C. <body text=”#AAA111”></body> D. <body bgcolor=”#AAA111”></body>E. <body vlink =”#AAA111”></body>

14. Синтаксис установки цвета шрифта для всего текста… A. <font color=”#AAA111”></font> B. <font bgcolor=”#AAA111”></font> C. <body text=”#AAA111”></body> D. <body bgcolor=”#AAA111”></body>E. <body vlink =”#AAA111”></body>

15. Синтаксис установки цвета фона …A. <head><title>Фон</title></head> B. <bgcolor=”#555555”></bgcolor> C. <body bgcolor=”#555555”></body> D. <font color=”#555555”></font>E. <body vlink =”#AAA111”></body>

16. Синтаксис установки в качестве фона некоторого рисунка …A. <head><title>Фон</title></head> B. <bgcolor=”#555555”></bgcolor>

C. <body bgcolor=”#555555”></body> D. <font color=”#555555”></font>E. <body background="http://www.имя сайта.ru/images/images.gif"> </body>

17. Тэг <B> позволяет задать …A. полужирный шрифтB. курсивный шрифтC. подчёркнутый шрифтD. зачёркнутый шрифтE. обычный шрифт

18. Тэг <U> позволяет задать …A. полужирный шрифтB. курсивный шрифтC. подчёркнутый шрифтD. зачёркнутый шрифтE. обычный шрифт

19. Тэг <I> позволяет задать …A. полужирный шрифтB. курсивный шрифтC. подчёркнутый шрифтD. зачёркнутый шрифтE. обычный шрифт

20. Тэг <S> позволяет задать …A. полужирный шрифтB. курсивный шрифтC. подчёркнутый шрифтD. зачёркнутый шрифтE. обычный шрифт

21. Тэг <H3> позволяет задать …A. переход на другую строкуB. полужирную горизонтальную линиюC. заголовокD. зачёркнутый шрифтE. обычный шрифт

22. Какой вариант выравнивания заголовка по правому краю будет правильным:A. <H1 VALIGN = “RIGHT”>ЗАГОЛОВОК</H1>B. <H1 ALIGN = “RIGHT”> ЗАГОЛОВОК</H1>C. <RIGHT><H1> ЗАГОЛОВОК</H1>D. <H1 ALIGN = “LEFT”> ЗАГОЛОВОК</H1>E. <H1 ALIGN = “CENTER”> ЗАГОЛОВОК</H1>

23. Тэг <HR> позволяет задать …A. переход на другую строкуB. полужирную горизонтальную линиюC. размещение изображенияD. отображение горизонтальной линейкиE. обычный шрифт

24. Тэг <IMG> позволяет задать …A. переход на другую строку

B. полужирную горизонтальную линиюC. размещение изображенияD. отображение горизонтальной линейкиE. обычный шрифт

25. Маркированный список задается тегами …A. <UL> и </UL>B. <OL> и </OL>C. <LI>D. <LН>E. <DL> и </DL>

26. Нумерованный список задается тегами …A. <UL> и </UL>B. <OL> и </OL>C. <LI>D. <LН>E. <DL> и </DL>

27. Тэги для определения таблицы …A. <TR> и </TR>B. <TD> и </TD>C. <TABLE> и </TABLE>D. <LН>E. <DL> и </DL>

28. Тэги для определения строки таблицы …A. <TR> и </TR>B. <TD> и </TD>C. <TABLE> и </TABLE>D. <LН>E. <DL> и </DL>

29. Тэги для определения ячейки данных таблицы …A. <TR> и </TR>B. <TD> и </TD>C. <TABLE> и </TABLE>D. <LН>E. <TH> и </TH>

30. Тэги для определения заголовка таблицы …A. <TR> и </TR>B. <TD> и </TD>C. <TABLE> и </TABLE>D. <LН>E. <TH> и </TH>

&&&$$$007-001-007$3.7.7 Вопросы к экзамену или примеры экзаменационных тестов

1. Локальные компьютерные сети. Назначение локальных сетей. Прямое соединение. Рабочие станции и файловый сервер. Одноранговые сети.

2. Топология локальных сетей.3. Аппаратное обеспечение локальной сети.4. Понятие Интернета. История возникновения Интернета.5. Сервисы Интернета.

6. Протоколы. Стек протоколов TCP/IP.7. Интернет-протокол. Адресация в Интернете.8. Служба DNS.9. Протокол TCP.10. Протокол IP.11. Протокол HTTP.12. Структура HTTP-запроса.13. Структура HTTP-ответа.14. Обзор клиентских технологий Интернет. Понятие о языках разметки SGML.15. Структура HTML-документа.16. Основные этапы менеджмента сайта. Составляющие сайта.17. Теги HTML. Контейнеры. Автономные теги. Атрибуты тегов. Вложенные теги.18. Обзор серверных технологий. CGI. Основные сведения о РНР.19. Технологии XML.20. Назначение тегов <html>, <head>, <title>, <meta>, <body>. Основные атрибуты.21. Назначение тегов <p>, <h1>, …, <h6>, <br>. Основные атрибуты.22. Назначение тегов <center>, <b>, <i>, <blink>, <s>, <u>, <small>, <big>. Основные атрибуты.23. Назначение тега <font>. Основные атрибуты.24. Назначение тегов <hr>, <img>. Основные атрибуты.25. Создание гиперссылок.26. Создание таблиц.27. Создание маркированных списков.28. Создание нумерованных списков.29. Создание списков определений.30. Создание вложенных списков.31. Создание фреймов.32. Создание бегущей строки.33. Создание формы: флажок, поле ввода имени пересылаемого файла, кнопка для отправки формы

в сеть.34. Создание формы: переключатель, поле ввода текста, кнопка очистки формы.35. Создание формы: многострочное поле текста, список, кнопка для отправки формы в сеть.36. Создание карты.37. CSS. Назначение и применение CSS.38. CSS. Цвет и шрифт.39. CSS. Списки.40. JavaScript. Назначение и применение JavaScript, общие сведения/41. JavaScript. Программирование свойств окна браузера.42. JavaScript. Программирование формы.43. JavaScript. Программирование графики.44. JavaScript. Программирование гипертекстовых переходов.45. JavaScript. Программирование «за кадром».

&&&

Приложение 1edu.semgu.kz/ebook/umkd/dd6f2606-3b9f-11e3-9713... · web view###002-003#2.3...

Documents