Разработка WEB-приложений Автор: доцент, к.т.н. Галямова Е.В. Курс лекций и практических занятий для студентов ИУ6-7 х и АК учебный год

Язык HTML HTML (Hypertext Markup Language) - это язык создания гипертекстов, язык среды WWW. Язык HTML - это множество элементов, специфицирующих формат описываемой страницы. Каждый элемент влияет на данные (текст или изображение), которые следуют за ним.

Особенности языка HTML возможность вставлять объекты в веб- документы с помощью элементов IMG, OBJECT, FORM и другими; каскадные страницы стилей (элемент STYLE) позволяют изменять внешний вид страниц; рамочная разметка страниц (frame-based layout) обеспечивает управление структурой страницы, обеспечивая возможности перемещения текстов и изображений

Универсальные локаторы ресурсов - URL (Uniform Resource Locator) Стандарт для адресации ресурсов, находящихся в компьютерах, объединенных в сеть Строка URL определяет точное местоположение ресурса в WWW. Состоит она из 4-х частей, определяющих метод доступа к ресурсу, адрес компьютера, содержащего ресурс, местонахождение ресурса на компьютере (имя файла) и, наконец, какие-либо параметры, которые должны быть переданы ресурсу Метод://адрес_веб- узла:порт/путь_к_ресурсу?параметры

Существующие методы доступа к URL Метод доступа Описание http: HyperText Transfer Protocol (протокол передачи гипертекста) Наиболее часто используемый протокол mailto: (адрес электронной Вызывает локальную программу-клиент электронной почты с уже указанным адресом получателя. ftp: File Transfer Protocol (протокол передачи файлов) Загружает файл, указанный в URL, используя FTP file: Local Filename (имя отдельного файла)Открывает в браузере указанный локальный файл news: News Server (сервер новостей)Запускает приложение сервера новостей и переходит к указанной группе новостей.

Адрес узла Интернет Вторая часть строки URL - IP адрес. Обычно это удобное для чтения имя, например, org IP адрес можно задать и в цифровом виде, например, ftp:// :80/ Вторая часть строки URL - IP адрес. Номер порта указывается после двоеточия. Порт с номером 80 является стандартным HTTP-портом и принимается по умолчанию.

Путь к локальному файлу Вслед за адресом может быть указан (дополнительно) путь в файловой структуре сервера. Одним из наиболее употребительных способов задания является указание имени веб-мастера данного узла с предшествующим символом тильды (~). Обычно оно представляет собой имя начального каталога веб-мастера и все остальные пути к документам определяются относительно этого каталога. Если конкретный файл не указан, то веб-сервер будет использовать файл по умолчанию. В большинстве компьютеров с операционной системой UNIX, таким файлом является INDEX.HTML. В Windows NT обычно это DEFAULT.HTM.

Параметры URL Четвертая часть URL. Параметры и используемые в них разделители определяются указанным методом доступа. В случае HTTP символ #, например, обозначает закладку или ссылку типа NAME внутри HTML документа.

1. Основные элементы HTML Элементы и теги элементы могут вкладываться друг в друга, имеют теги начала и конца или требуют завершения их тегом конца (не все!), Атрибуты Атрибуты модифицируют характеристики элемента Комментарии Элемент комментария позволяет "спрятать" элементы, не поддерживаемые устаревшими браузерами Цвета не для всех, но для многих элементов Закладки закладка (anchor) - элемент, делающий язык HTML столь мощным средством

1.1. Элементы и теги Язык HTML - это множество элементов, специфицирующих формат описываемой страницы. Каждый элемент влияет на данные (текст или изображение), которые следуют за ним. Например, следующий элемент определяет, что текст будет выделен полужирным шрифтом: This text is bold Символ В - элемент языка, а обозначение или называется тег, в частности, это теги начала и конца элемента. Пары тегов обеспечивают возможность вложенного использования элементов: This text is bold and This text is italicized

1.2. Атрибуты HTML -элементы могут иметь атрибуты. Атрибуты модифицируют характеристики элемента. Например, элемент Р определяет начало абзаца текста. Он имеет один атрибут ALIGN, который позволяет определять выравнивание: LEFT, CENTER or RIGHT. Например: This sentence is centered. This sentence is aligned right. This sentence is aligned left.

1.3. Комментарии Для комментариев предусмотрены теги комментариев Элемент комментария позволяет "спрятать" элементы, не поддерживаемые устаревшими браузерами (как - увидим дальше). Есть и альтернативный тег COMMENT из HTML версии 2.0. Примеры использования: <!-- Это начало комментариев. А это конец комментариев -- > Это начало комментариев с использованием тега версии 2.0.

1.4. Цвета (RGB модель) Сочетанием шестнадцатеричных значений, соответствующих красной, зеленой и синей составляющим цвета Last update: October 08, 2001 прямым указанием названия цвета … Некоторые HTML -элементы поддерживают атрибут COLOR. Его значения можно задать двумя способами:

1.5. Закладки Закладка (anchor) - элемент, делающий язык HTML столь мощным средством. Элемент закладка: и Гиперссылки - вот чем славится WWW. С точки зрения программирования гиперссылка - это элемент GO TO.

Атрибут закладки HREF Самый важный атрибут HREF - определяет гиперссылку на другую HTML страницу или другой источник информации в WWW. Примеры: Нажмите сюда, чтобы попасть в виртуальную школу Следующая страница Как правило, браузер выделяет гиперссылку на документ цветом, подчеркиванием или как-то еще. В Internet Explorer текст выделяется цветом, а изображения - рамкой.

Атрибут закладки NAME Атрибут закладки NAME обозначает определенную "именованную" позицию в HTML документе. Эта позиция может быть установлена как в текущем, так и во внешнем документе (закладка в редакторе Word). Пример: …. Возврат в начало Возврат к главной странице

Пример. Создание первой статической страницы Запустите NotePad и наберите (или скопируйте в него) следующий текст: Моя первая веб-страница А здесь расположен какой-нибудь текст Сохраните этот файл под именем SIMPLE.HTM и запустите Internet Explorer. Введите путь к Вашему файлу в поле Address и нажмите клавишу Enter. Ваша первая страница отобразится в окне Internet Explorer.

2. Структура HTML- документа

2.1. Всякий HTML - документ содержит два основных раздела: Заголовок Элемент и Раздел Заголовок, заключенный между тегами и, описывает глобальные характеристики документа. Информация, содержащаяся в заголовке, не отображается в рабочей области окна браузера. Тело Элемент Тело документа, отмеченное элементами и содержит текст и изображения, предназначенные для вывода на экран.

2.1. Элементы заголовка (Head elements) Элементы заголовка – это элементы, которые могут использоваться только между тегами начала и конца заголовка. TITLE - должен обязательно находиться внутри элемента HEAD BASE - используется для явной установки абсолютного URL STYLE - содержит атрибуты страницы стилей META - используется для предоставления браузеру, поисковым серверам и другим приложениям высокоуровневой информации о документе

Элемент META, атрибут NAME Некоторые серверные приложения индексируют страницы узла, сканируя элементы META Имеет смысл помещать в них ключевые слова, характеризующие страницу, например:

Элемент META, атрибут CONTENT Строка, определяемая пользователем. В сочетании с атрибутом HTTP-EQUIV может использоваться для автоматической перезагрузки документа через определенные интервалы времени. URL документа обычно используется с опцией Refresh атрибута HTTP-EQUIV:

Пример. Программа перемещения веб- узел с одного сервера на другой <META HTTP-EQUIV = "Refresh" CONTENT = "3; URL= We 've moved We 've moved The ActiveX Developer's Web-site has moved. Please update our links with our new address.

Как программа работает: В этом примере указывается, что узел переместился, и поэтому используется опция Refresh, с помощью которой, после 3-х секундного ожидания, клиентский браузер будет переадресован на другой узел, указанный атрибутом URL. Замечание: атрибут URL здесь вставлен в атрибут CONTENT, а адрес нового местоположения узла указан также в гиперссылке, заданной в документе, что дает возможность посетителям моментально перейти на новый узел одним щелчком мыши.

Создание динамических страниц

Элемент SCRIPT - создание сценариев Элемент SCRIPT дает возможность создания сценариев - внедрение в страницу исполняемых элементов, что превращает ее в динамический документ. Элемент SCRIPT имеет несколько атрибутов. Наиболее употребительный - атрибут LANGUAGE - определяет язык, используемый для создания сценария (VBScript, Jscript фирмы Microsoft, или JavaScript фирмы Netscape).

Пример. Программа собирает информацию о вашем браузере <meta http-equiv="Content-Type" content="text/html; charset=koi-8-R"> Наш первый Скрипт " document.write " " & "Здесь некоторая информация о Вашем браузере: " & " " document.write "Наименование: " & Window.Navigator.AppName & " " document.write "Версия: " & Window.Navigator.AppVersion & " " document.write "Кодовое имя: " & Window.Navigator.AppCodeName & " " document.write "Пользователь: " & Window.Navigator.UserAgent document.write " " document.close -->

Как программа работает: При загрузке страницы начинает выполняться сценарий, динамически генерирующий HTML-данные и передающий их в браузер. В процессе загрузки программа также собирает информацию о браузере, в котором работает. Затем эти данные отображаются на экране. Специфику оператора document.write мы рассмотрим в одной из следующих лекций. А сейчас мы лишь посмотрели, каким образом путем создания сценариев можно генерировать динамические Wеb- страницы. Данные о Вашем браузере генерировались непосредственно при загрузке страницы.

2.2. Элементы основного раздела веб-страницы –BODY Aбзацы и разрывы строки Cписки Изображения