Разработка блока уроков по методике концентрированного обучения. Раздел курса "Основы алгоритмизации и программирования"

Разделы: Информатика

КОНСПЕКТ № 1

Урока по информатике в 11 классе.

Номера уроков 3, 4.

Тема урока: Язык программирования HTML (Изучение этой темы рассчитано на два урока)

Цели урока:

  1. Дать представление об основных средствах языка HTML
  2. Научить пользоваться языком HTML

Тип урока: Урок изучения нового материала.

Форма урока: Лекция.

Структура урока:

  1. Организационный момент – проверка присутствующих на уроке ( до 2 мин)
  2. Мотивация – Объяснение темы урока, целей урока, план проведения урока (до 5 мин)
  3. Актуализация опорных знаний и способов действий (60 – 70 минут)
    • История языка HTML
    • Структура простейшего HTML документа
    • Гиперссылки
    • Оформление внешнего вида документа
    • CSS. Каскадные таблицы стилей.
    • Слои (Layers)
    • META-теги
    • Формы
    • Технология Server Side Include (SSI)
    • Скрипты в HTML документах
    • DHTML. Динамический HTML
    • Технология активных серверных страниц. ASP
    • JAVA-апплеты
    • Внедрение объетов. Тег <OBJECT>
  4. Подведение итогов урока, задание на дом (до 2 минут)

ХОД УРОКА

Здравствуйте, ребята. Тема нашего сегодняшнего урока: “Язык программирования HTML”.

Цели занятия

  1. Получить представление об основных средствах языка HTML
  2. Научится пользоваться языком HTML

Изложение нового материала

1. История языка HTML

Язык разметки гипертекста — HTML (HyperText Markup Language — возник на стыке нескольких направлений исследований и разработок. Существует три фактора, повлиявших на возникновение HTML.

Во-первых, HTML предназначен в основном для создания гипертекстовых документов.

Первые концепции и разработки, посвященные гипертексту, принадлежали Ванневару Бушу, предложившему концепцию системы Memex в сороковые годы, а также Дагласу Энгельбарту и Теодору Нельсону, работавшим над этой технологией в шестидесятые годы.

Термин "гипертекст" предложил Тед Нельсон в 1965 г. Вот как звучит определение гипертекста, которое дал Нельсон в 1987 г.: "форма письма, которое ветвится или осуществляется по запросу". Иначе говоря, HTML — это "нелинейное письмо", которое "больше, чем текст" (hypertext)

Во-вторых HTML это язык разметки. В 1986 году Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный "Standard Generalized Markup Language (SGML)". Названный стандарт посвящен описанию SGML (http://www.webreference.com/dlab/books/html/3-0.html) — обобщенного метаязыка, позволяющего строить системы логической, структурной разметки любых разновидностей текстов. При этом управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его логическую структуру. Изначально HTML, как и положено SGML-приложению, был основан на принципах SGML.

Третьим фактором, определившим специфику HTML, было его применение в Интернете. В 1989 г., после экспериментов с собственными новыми сетевыми технологиями, Европейская лаборатория физики элементарных частиц (CERN) подсоединилась к Интернет. Этот исследовательский центр, расположенный в Женеве (Швейцария), сыграл существенную роль в разработке и принятии стандартов связи и распределенных вычислений, в частности, двух фундаментальных протоколов, которые являются базовыми для Интернет: Transmission Control Protocol (TCP) и Internet Protocol (IP).

В том же году Тим Бернерс-Ли предложил глобальную гипертекстовую систему, основанную на более раннем проекте "Enquire" и позволившую соединять связями не только текст, но и графику, звуки, видео. Глобальность этой системы, в отличие, например, от системы Теда Нельсона, предполагала, что данные будут распределяться по всему миру, а ее основой станет Интернет.

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

Через год Бернерс-Ли написал первое клиент-серверное обеспечение (гипертекстовую систему Enquire, которая по сути была записной книжкой) для того, что теперь известно как World Wide Web (WWW или W3). Эта система была впервые задействована в декабре 1990 г. и дорабатывалась вплоть до 1993 г. За это время был предложен гипертекстовый протокол передачи данных (HTTP).

2. Структура простейшего HTML документа

Теперь обратимся к рассмотрению самого языка разметки гипертекста, HTML.

Рассмотрим структуру простейшего HTML документа. Запишем в любом текстовом редакторе файл test.html, содержащий следующий текст:

<html>

<head>

<title>test</title>

</head>

<body>

</body>

</html>

Структурой и форматированием HTML документа управляют теги. Теги всегда располагаются в угловых скобках. Практически все теги являются парными, т.е. открывающему тегу соответствует закрывающийся, который пишется с чертой “/” после скобки: “</”.

В случае нашего простейшего примера документ начинается с открывающего тега <html>и заканчивается закрывающим тегом </html>. Они очерчивают границы документа.

Затем следует “голова документа” ограниченная тегами <head> и </head>. В этой части документа может содержаться множество важной информации, но все содержимое секции head не отображается в окне браузера. Единственно обязательным элементом этой секции является “титул”: <title>…… </title> . Текст, содержащийся между этими тегами, отображается в заголовке окна браузера.

Затем следует секция “тело” документа, ограниченное тегами <body> ….</body>. Здесь и располагается содержимое страницы, которое видит пользователь.

Что касается имен тегов и атрибутов, HTML является case-нечувствительным языком. Вы можете, например, написать TITLE, или Title, или title, или tItLE. Кроме того, для браузера не имеет значения расположение тегов, важен только их порядок. К примеру, предыдущая запись эквивалентна следующей: <html><head><title>test</title></head><body></body></html>

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

Перейдем теперь к содержимому секции “body”. Рассмотрим следующий пример:

<html>

<head>

<title>пример 2</title>

</head>

<body>

<p>первый абзац текста первый абзац текста

первый абзац текста первый абзац текста

первый абзац текста первый абзац текста </p>

<p>второй абзац текста второй абзац текста

второй абзац текста второй абзац текста</p>

</body>

</html>

Здесь появился тег <p> — тег разбиения текста на абзацы. Если не заканчивать абзац закрывающим тегом </p>, то ошибки не возникнет, но общие правила требуют закрывающего тега.

Если набрать этот пример в любом текстовом редакторе и сохранить с расширением htm или html, а затем открыть в браузере, то мы увидим примерно следующее.

При использовании обычного набора тегов абзацы в HTML документе не имеют абзацного отступа и отделяются в браузере друг от друга пустой строкой. Если Вы хотите начать текст с новой строки, не создавая нового абзаца, используйте тег <br> — переход на новую строку. Это один из непарных тегов.

3. Гиперссылки

Рассмотрим теперь собственно самое важное свойство HTML — возможность создавать гиперссылки. Допустим для примера, что мы хотим создать ссылку на сайт http://www.freeware.ru/. Мы можем написать такой код:

<html>

<head>

<title>коллекция бесплатных программ</title>

</head>

<body>

<p>Одна из лучших <a href="http://www.freeware.ru/">коллекций</a>

бесплатных программ</p>

</body>

</html>

Если открыть этот файл в браузере, то мы увидим:

Таким образом, гиперссылкой является слово “коллекций”. Гиперссылка в HTML-виде начинается тегом “<a”. Здесь мы встречаем новый элемент — не просто тег, а тег с параметром. У тега “<a” есть параметр “href ”, значение которого – адрес, на который указывает ссылка:

href="http://www.freeware.ru/",тег </a> закрывающий.

Гиперссылка может указывать на документ на том же web-сервере. <a href="news/pc_news.htm">новости</a>. Здесь гиперссылка “новости” указывает на документ pc_news.htm, находящийся во вложенной папке news. Такие гиперссылки называются относительными, так как указывают не абсолютный адрес ресурса, а относительный в данном сайте.

Кроме того, гиперссылка может указывать на другое место в том же самом документе. То место, на которое нужно сослаться, необходимо пометить “якорем”: <a name="x1">, где x1 можно заменить на любое удобное обозначение. А ссылка записывается так: <a href="#x1">текст ссылки</a>

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

HTML-документ, кроме текста, может содержать еще и изображения. Пусть в том же каталоге, что и HTML-документ, находится файл с изображением class.jpg. Включение его в документ будет выглядеть так:

<html>

<head>

<title>изображение</title>

</head>

<img src="class.jpg" width="180" height="136" alt="Учебная аудитория">

</body>

</html>

Тег “<img” также имеет параметры: src="class.jpg" — указывает на файл с изображением, а width="180" и height="136" — описывают размеры изображения.

Очень важен тег-параметр alt: alt="Учебная аудитория". Он важен по двум причинам.

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

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

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

<a href="class.htm"><img src="class.gif" width="180" height="136" border="0" alt="Учебная аудитория"></a>

Из примера видно, что мы не встречаем здесь ничего нового, видя комбинацию тега гиперссылки <a href="…..">…</a> тега вставки изображения "<img src="…."…>.

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

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

<a href="file:///D:/Flash/Motion.htm">неправилная ссылка</a>

В этом примере мы видим абсолютную ссылку на документ Motion.htm, находящийся в папке Flash на локальном диске D. Пока сайт создается на определенном компьютере, эта ссылка будет работать, но как только сайт будет перенесен на web-сервер, на котором другая структура каталогов, ссылка прекратит функционировать.

4. Оформление внешнего вида документа

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

<font face="Arial" size="+2"><i><b><font color="#6600CC">оформленный текст </font></b></i></font>

Здесь мы видим тег <font>, определяющий, как текст должен отображаться. Тег имеет параметры: face="Arial" — гарнитура шрифта, size="+2" — размер шрифта. Теги <i><b> определят курсивное и жирное начертание. Затем снова повторяется тег "font" с параметром, задающим в системе RGB номер цвета шрифта. Таким образом, каждый элемент текста, который мы хотим отобразить специальным образом, окружается соответствующими тегами. Если мы захотим каждую букву слова, например, "радуга", изобразить отдельным цветом, то получим следующий код.

<font color="#FF3300">р</font>
<font color="#00FF00">а</font>
<font color="#FFFF99">д</font>
<font color="#00FFFF">у</font>
<font color="#6666FF">г</font>
<font color="#003399">а</font>

Мы не будем здесь рассматривать оформительские возможности HTML, поскольку для этого существуют справочники, а в Интернете можно найти массу текстов на эту тему, например, http://citforum.ru/internet/html/

Отметим две характерные черты такого оформления текста.

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

При возникновении необходимости изменить оформление сайта придется вручную изменять оформление каждого элемента. Это может оказаться довольно объемной работой.

Существует другой подход к оформлению HTML-документов.

5. CSS. Каскадные таблицы стилей.

Язык HTML естественно развивался с момента его создания. Стандартизацией этого языка занимается W3 консорциум, сокращенно -W3C (http://www.w3.org/). 14 января 1997 года W3C опубликовал спецификацию языка HTML версии 3.2. Почти через год, 18 декабря 1997 г., W3C опубликовал спецификацию HTML 4.0, в которой была окончательно разработана концепция CSS.

Cascading Style Sheets (Таблицы Каскадных Стилей) — это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью зможно полностью управлять стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML-тегов.

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

Предположим, что текст нужно оформить так же, как в предыдущем примере, где HTML-код выглядел так:

<font face="Arial" size="+2"><i><b><font color="#6600CC">оформленный текст </font></b></i></font>

Тогда мы должны определить стиль, назовем этот стиль "mystyle" . Определение стиля выглядит следующим образом.

<style type="text/css">

<!--

.mystyle { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: #6600CC }

-->

</style>

Сам тег определения стиля — "<style type="text/css">". Определение стиля помещается в скобки HTML комментария "<!-- -->" . Затем следует имя стиля с точкой передним ".mystyle". В фигурных скобках перечисляются атрибуты данного стиля и их конкретные значения. Прокомментируем их.

.mystyle (имя стиля)

{ font-family: Arial, Helvetica, sans-serif; (Семейство шрифтов. Лучше указывать не конкретный шрифт, который может отсутствовать на компьютере пользователя, а семейство, обладающее схожими свойствами. Данное семейство — это шрифты без засечек.)

font-size: 12pt; (Размер шрифта. В данном случае он указан в пунктах, хотя есть разные способы указания размера.)

font-style: italic; (стиль шрифта — курсивный)

font-weight: bold; ("вес" шрифта -жирный)

color: #6600CC} (цвет шрифта)

Все приведенное описание стиля помещается в секцию <head> …</head> HTML документа.

Теперь, если мы хотим применить этот стиль к определенной части текста, то создаем такой код:

<span class="mystyle">оформленный текст</span>.

Полный HTML код будет выглядеть так:

<html>

<head>

<title>пример использования CSS</title>

<style type="text/css">

<!--

.mystyle { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold;
color: #6600CC}

-->

</style>

</head>

<body>

<span class="mystyle">оформленный текст</span>

</body>

</html>

Таким образом, использование CSS позволяет определить все необходимые стили в отдельной секции <style type="text/css">, а затем применять их к нужным элементам документа простым указанием имени стиля <span class="mystyle">оформленный текст</span>.

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

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

Делается это следующим образом. В секции <head> …</head> HTML документа помещается ссылка на файл глобальной таблицы стилей, например, на файл main.css

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

Сама глобальная таблица стилей содержит только перечень определений стилей, например:

.link1 { font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #663300; text-decoration: none}

.normal { font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-style: normal; line-height: normal; font-weight: bolder; font-variant: normal; text-transform: none; color: #333333; text-decoration: none}

Это и содержится в файле main.css. Теперь, чтобы изменить оформление на всех страницах сайта, достаточно изменить свойства стилей в файле глобальной таблицы. Можно создавать разные глобальные таблицы стилей для разных разделов сайта.

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

Вот, например, меню определения стилей замечательного HTML-редактора Dreamweaver 3 фирмы Macromedia.

6. Слои (Layers)

Стандартные HTML-теги дают весьма ограниченные возможности для управления расположением различных элементов на web-странице. Web-дизайнеры обычно используют для этих целей таблицы. Рассмотрим, кратко, теги таблиц. Допустим, мы создаем таблицу содержащую 3 столбца и 2 строки.

     
     

HTML код будет таким:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> (таблица шириной в 100% по отношению к пространству страницы, толщина рамки 0, расстояние между ячейками 0, отступ содержимого ячейки от ее границ 0)

<tr> (начало 1 строки таблицы)

<td></td> (1 столбец 1 строка)

<td></td> (2 столбец 1 строка)

<td></td> (3 столбец 1 строка)

</tr>

<tr> (начало 2 строки таблицы)

<td></td> (1 столбец 2 строка)

<td></td> (2 столбец 2 строка)

<td></td> (3 столбец 2 строка

</tr>

</table> (конец таблицы)

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

Соответствующий HTML код, при использовании таблицы, будет выглядеть так

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td width="151" height="50" valign="top"></td>

<td width="180" height="50" valign="top"></td>

<td width="1" height="50" valign="top"></td>

<td width="154" height="50" valign="top"></td>

</tr>

<tr>

<td width="151" height="87" valign="top"></td>

<td width="180" height="235" rowspan="2" valign="top">
<img src=" /bild.jpg" width="180" height="135"></td>

<td width="1" height="87" valign="top"></td>

<td width="154" height="87" valign="top"></td>

</tr>

<tr>

<td width="151" height="148" valign="top"></td>

<td width="1" height="148" valign="top"></td>

<td width="154" height="148" valign="top"><img src=" class.gif" width="154" height="148"></td>

</tr>

<tr>

<td width="151" height="1" valign="top"><img width="151" height="1" src="transparent.gif"></td>

<td width="180" height="1" valign="top"><img width="180" height="1" src="transparent.gif"></td>

<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>

<td width="154" height="1" valign="top"><img width="154" height="1" src="transparent.gif"></td>

</tr>

</table>

А вид в web-редакторе будет примерно таким:

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

К счастью, версия языка HTNL 4.0 позволяет использовать для размещения любых элементов на web-странице слои. Посмотрим, как то же самое расположение изображений можно реализовать с помощью слоев.

<div id="Layer1" style="position:absolute;
left:159px; top:61px; width:180px; height:135px; z-index:1">

<img src="bild.jpg" width="180" height="135">

</div>

<div id="Layer2" style="position:absolute;

left:340px; top:148px; width:154px; height:148px; z-index:2">

<img src="class.gif" width="154" height="148">

</div>

Сам слой является прямоугольной областью, контейнером, содержащим другие элементы. Слой начинается тегом <div, затем следует идентификатор или имя слоя id="Layer1". Атрибут style="position:absolute; означает абсолютное позиционирование слоя, т.е. положение левого верхнего угла слоя имеет жесткие координаты относительно левого верхнего угла страницы: left:159px; top:61px;. Дальее указаны размеры слоя: width:180px; height:135px;. Смысл параметра z-index мы рассмотрим чуть позже. А дальше следуют обычные теги вставки изображения:

<img src="bild.jpg" width="180" height="135">. Принципиально важно, что теги изображения находятся в контейнере слоя. Тем самым слой управляет расположением изображения на странице, изменяя параметры расположения слоя. Мы можем разместить изображение в произвольном месте страницы. В слой может быть вставлено не только изображение, но практически любой элемент, например, текст или таблица.

Мы видим, что использование слоев для размещения элементов страницы существенно проще и удобней использования таблиц. Кроме того, слои дают еще и совершенно новые возможности. В частности, они ввести в расположение элементов третье измерение, перпендикулярное плоскости страницы. В этом и состоит смысл параметра z-index:n. Чем больше z-index, тем выше в иерархии слоев располагается данный слой. Приведем пример:

<div id="Layer1" style="position:absolute; left:45px; top:37px; width:167px; height:136px;
z-index:1"><img src="bild.jpg" width="180" height="135"></div>

<div id="Layer2" style="position:absolute; left:142px; top:82px; width:152px; height:145px;
z-index:2"><img src="class.gif" width="154" height="148"></div>

Изображение во втором слое располагается над изображением в первом потому, что второй слой имеет z-index:2, а первый — z-index:1.

Другой пример:

<div id="Layer1" style="position:absolute; left:52px; top:45px; width:154px; height:148px; z-index:1"><img src="class.gif" width="154" height="148"></div>

<div id="Layer2" style="position:absolute; left:100px; top:150px; width:121px; height:23px; z-index:2; layer-background-color: #CCFFCC; border: 1px none #000000">

Учебный класс </div>

Второй слой id="Layer2" имеет фоновый цвет layer-background-color: #CCFFCC; и в нем располагается текст.

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

7. META-теги

С HTML-документами работают в основном два типа программ: браузеры, показывающие содержание документа, и программы поисковых систем. Для этих программ HTML-документ должен содержать служебную информацию, которая записывается с помощью мета-тегов. Рассмотрим пример.

<html>

<head>

<title>пример мета-тегов</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta http-equiv="Author" content="Федор Вирин.">

<meta http-equiv="KEYWORDS" content="маркетинг, раскрутка веб-мастер, сайт, интернет, мастер, библиотека, новости, бесплатный, free, webmaster, маркетинг работа заработок аналиттика аналитический отчет">

<meta http-equiv="DESCRIPTION" content="Библиотека мастера — это большая коллекция материалов для вебмастеров по любой теме. Здесь можно найти любую помощь для вашего сайта, вам помогут советом и делом." >

</head>

Мета-теги располагаются в секции “head”, поэтому не видны пользователю. Мета-тег имеет вид <meta c параметром http-equiv=”имя” content=
”содержимое”>. Имя указывает, что описывает данный мета-тег. Тег <meta http-equiv="Author" указывает автора документа. <meta http-equiv="KEYWORDS" содержит перечень наиболее важных ключевых слов документа. <meta http-equiv="DESCRIPTION" дает краткое описание документа. Из этих мета-тегов программа поисковой системы извлекает соответствующую информацию, так что пользователь, производя поиск, может найти документ по имени автора или по ключевым словам, а в результатах поиска получить краткое описание документа.

Еще один очень важный мета-тег сообщает браузеру, в какой кодировке символов хранится документ <meta http-equiv="Content-Type" content="text/html;. charset=windows-1251"> означает, что в данном случае документ хранится в кодировке windows-1251. Если бы документ был кодирован в KOI-8, то мета-тег имел бы вид <meta http-equiv="Content-Type" content="text/html; charset=KOI8-R">

Существует большое количество разных мета-тегов, которые мыне описываем здесь. Приведем, к примеру, еще один: <meta http-equiv ="Refresh" Content="3, URL=http://www.name.ru/page.html">. Этот мета-тег определяет задержку, после которой броузер автоматически обновляет документ, в секундах (в данном случае — 3 секунды).

Дополнительную информацию можно получить, например, в www.citforum.ru/internet/search/metatags.shtml

8. Формы

Формы – важный элемент языка HTML, позволяющий посетителю страницы обмениваться информацией с сайтом. Таким образом, формы являются средством интерактивности. Приведем простой пример формы

и соответствующий текст HTML.

<form method="POST" action="/cgi-bin/prog1.pl">

имя <input type="text" name="realname" size="40"><p>

e-mail: <input type="text" name="email" size="40"><p>

ваши комментарии:<br>

<textarea name="comments" cols="40" rows="8"></textarea><p>

<input type="submit" name="submit">

<input type="reset" name="reset">

</form>

Разберем этот HTML-код. Форма задается парным тегом <form>, имеющим параметр, который указывает, каким образом и какой обрабатывающей программе отсылаются данные из формы. В данном случае текст, внесенный в поля “имя”, “e-mail” и “комментарии” при нажатии кнопки “подача запроса” будет отправлен программе методом POST на сервер. Программа prog1.pl, находящаяся на web-сервере в каталоге /cgi-bin, анализирует полученные данные и либо записывает их в какую-либо базу данных, либо формирует и отправляет ответ пользователю. Такой механизм обмена данными между клиентом и сервером называется “общим шлюзовым интерфейсом”, CGI. Обычно он применяется в web-серверах на платформе UNIX. На базе Windows с использованием IIS (Internet Information Server) используется несколько другой механизм – “активные серверные страницы” (ASP).

Важно понимать, что наличие на web-странице формы само по себе ничего не дает.Необходимо наличие на сервере программы, обрабатывающей данные, предаваемые формой.

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

9. Технология Server Side Include (SSI)

Server Side Include в переводе означает "включаемый на стороне сервера". Эта технология позволяет Web-серверу включать в текст HTML-страниц любой другой текст: содержимое текстовых файлов или, например, результат работы программ на сервере. Происходит это "включение" непосредственно перед передачей текста HTML-страницы броузеру пользователя. Что дает технология SSI?

Предположим, на каждой странице сайта вы поместили список разделов сайта. Сайт, как и положено, постоянно развивается, и, допустим, надо добавить еще один раздел. Если использовать не совсем корректную технику фреймов, то придется исправлять каждую страницу сайта, содержащую этот список. Если же использовать SSI, достаточно создать отдельный текстовый файл (например, menu.html) и занести туда HTML-код списка разделов. Непосредственно в страницы сайта, в том месте, где должен находиться список разделов, нужно вставить следующую инструкцию:

<!--#include virtual="menu.html"-->

При запросе этой страницы сервер заменит инструкцию <#include> содержимым файла menu.html. Если изменить файл menu.html, то все страницы, где использовался<#include>, обновятся автоматически. Главное в том, что в HTML-файлах, лежащих на диске Web-сервера, ничего не меняется — сервер производит вставку текста "на лету", перед тем, как отправить WWW-страницу в броузер посетителя. Вместо имени обычного текстового файла в инструкции <#include> можно указывать имя программы-скрипта. В этом случае сервер сначала выполнит скрипт, а потом вставит результат работы в текст WWW-страницы. Так можно реализовать, например, текстовый счетчик посещений.

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

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

10. Скрипты в HTML документах

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

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

WEB-страница, содержащая скрипт, позволяет обрабатывать события, связанные с окном браузера, — такие, как загрузка документа, закрытие окна, появление курсора над объектом страницы, нажатие клавиши мыши или клавиатуры, и другие. При этом скрипт может по-разному реагировать на эти события. Скриптовые программы иногда называют сценариями просмотра web-страницы.

Существуют два языка для написания скриптов для Web-страниц – JavaScript и Visual Basic script.

Visual Basic script – это разработка Microsoft. Скрипты на этом языке выполняются пока только в броузере Internet Explorer.

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

Код JavaScript начинается обычно тегом <script language="JavaScript">. Иначе говоря, броузеру указывается, что далее следует script, а именно language="JavaScript. Далее располагается сама скриптовая программа. Закрывающий тег выглядит как: </script>

Пример JavaScript, вычисляющего сумму двух чисел.

<html>

<head>

<script language="JavaScript">

\function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);

</script>

</head>

<body>

<form>

<input type="button" value="Calculate" onClick="calculation()">

</form>

</body>

</html>

11. DHTML. Динамический HTML

Несмотря на то, что сценарии (скриптовая программа) на клиентской стороне увеличивают гибкость HTML, они мало используются в целях более серьезных, нежели проверка данных в форме перед ее отправкой. Ограниченность сценариев заложена в самой природе HTML: HTML — это потоковый язык. Это означает, что HTML-текст поступает в программу просмотра посимвольно, и эта программа конструирует Web-страницу по мере того, как поток данных поступает к клиенту. Как только данные прекращают поступать к программе просмотра, поток закрывается; а если поток закрыт, HTML-страницу уже нельзя изменить.

Программа просмотра может в ограниченной мере модифицировать HTML-поток по мере того, как он поступает к ней.

Для преодоления этого ограничения Microsoft предложила технологию DHTML. Dynamic HTML позволяет изменять содержимое HTML-страницы при помощи скрипта после закрытия потока данных. Такой результат достигается за счет того, что каждый тег документа рассматривается как объект со своими свойствами. Эти свойства доступны в коде на JavaScript илиVBScript в течение всего времени жизни Web-страницы.

Dynamic HTML строится на основе JavaScript илиVBScript, предоставляя расширенную объектную модель Internet Explorer и ряд новых событий. Dynamic HTML, как и сценарии вообще, следует парадигме программирования, управляемого событиями. Код выполняется в ответ на взаимодействие пользователя с Web-страницей. Отличие состоит в том, что поддерживать взаимодействие с пользователем в Dynamic HTML может любой элемент Web-страницы.

12. Технология активных серверных страниц. ASP

Dynamic HTML представляет собой основное средство программирования клиента для Microsoft Internet Explorer 4.0. Однако такие программы просмотра Web, как Netscape Navigator, не поддерживают Dynamic HTML. Очень малая часть функциональности клиентской части, поддерживаемой различными программами просмотра, может рассматриваться как действительно кросс-платформенная.

Чтобы разработать Интернет-узел, открытый для доступа самым различным программам просмотра, необходимо перенести программирование с клиента па сервер. Такую возможность предоставляют Microsoft ASP (Active Server Pages — активные серверные страницы). По сути ASP — не что иное, как сценарий на VBScript, который исполняется на сервере. Когда запрашивается страница, этот сценарий порождает HTML-текст. Это ключевая особенность ASP — клиент никогда не видит вашего кода, а только результирующий HTML, который воспринимает любая программа просмотра.

Следующий пример демонстрирует простую ASP-страницу, которая создает приветствие с соответствии со временем суток. В этом примере текущий час определяется при помощи кода Hour(Now), где Now — функция VBScript, возвращающая текущий момент времени и дату. Если текущий час меньше 12, то приветствие задается в форме “Доброе утро!” От полудня до шести вечера сообщение имеет вид “Добрый день!”, а после шести — “Добрый вечер!”

<%@ LANGUAGE="VBSCRIPT" %>

<HTML>

<HEAD>

<TITLE>Simple ASP Example</TITLE>

</HEAD>

<BODY>

<%

Dim strGreeting

If Hour(Now) < 12 Then

strGreeting = "Good Morning!"

ElseIf Hour(Now) > 11 And Hour(Now) < 18 Then

strGreeting = "Good Afternoon"

ElseIf Hour(Now) > 17 Then

strGreeting = "Good Evening!"

End If

%>

<H1><%=strGreeting%></H1>

</BODY>

</HTML>

Таким образом, если системное время на сервере, например, больше 17 часов, то броузер посетителя получит следующий HTML-документ:

<HTML>

<HEAD>

<TITLE>Simple ASP Example</TITLE>

</HEAD>

<BODY>

<H1> Good Evening!</H1>

</BODY>

</HTML>

Резюмируем сказанное.

Active Server Pages позволяет встраивать код в HTML документ и выполнять его на сервере. Это простая концепция. Код, который нужно выполнить на сервере, размещается внутри специальных тегов <% %>. Они показывают, что находящийся внутри код необходимо выполнить на сервере и результат послать клиенту. Данный код не доступен пользователю. Сам код может быть написан с использованием VBScript (или Jscript). Что происходит при обращении к ASP-странице?

Пользователь вводит адрес ASP страницы в адресное поле броузера и нажимает Enter для запроса данной страницы.

  1. Броузер посылает запрос на получение ASP файла Web-серверу
  2. Web-сервер получает данный запрос и распознает, что запрашивается asp-страница по расширению файла .asp
  3. Web-сервер считывает нужный файл с диска или из памяти.
  4. Web-сервер передает данный файл специальной программе asp.dll
  5. ASP файл обрабатывается сверху вниз. Все встречающиеся команды выполняются. В результате обработки получается стандартный HTML-файл.

Этот файл отсылается обратно броузеру.

Технология ASP поддерживается WEB-серверами IIS (Internet Information Server) и PWS (Personal Web Server). Существуют продукты сторонних компаний, поддерживающие технологию ASP на других платформах. Например, Chili!Soft, Inc. Chili!Soft ASP (http://www.chilisoft.com/). Halcyon Software, Inc. разработала "Instant ASP (http://www.halcyonsoft.com/)

13. JAVA-апплеты

В 1995 годах фирмой SUN Microsystem был разработан язык программирования Java. Одной из главных особенностей этого языка является его независимость от платформы, на которой выполняются программы, написанные на Java. Это обстоятельство составило существенный стимул для применения Java-программ в Интернете.

Java-программы разделяются на два класса:

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

Язык Java является объектно-ориентированным, многопотоковым, динамическим и так далее, но вовсе не эти свойства превращают его в мощный язык для сетевого программирования. Главное в том, что Java-программы исполняются в виртуальной машине, если таковая имеется в операционной системе компьютера. Java-программа не имеет никакого контакта с настоящим, физическим компьютером; все, с чем она взаимодействует, — это виртуальная машина. Такой подход приводит к некоторым важным заключениям.

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

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

Во-вторых, виртуальная машина решает, что Java-программе позволено, а что запрещается делать. Программы на языках типа С или C++ запускаются напрямую операционной системой. Поэтому они получают прямой доступ к системным ресурсам компьютера, включая оперативную память и файловую систему.

Поскольку Java-программы запускаются виртуальной машиной, ее разработчики и решают, что разрешено, а что — запрещено делать программе. Окружение, в котором работает Java-программа, называется оболочкой времени выполнения (runtime environment). Виртуальная машина играет роль бастиона на пути между Java-программой и компьютером, на котором та выполняется. Java-программа никогда не сможет получить прямой доступ к устройствам ввода-вывода, файловой системе и даже памяти. Вместо Java-программы все это делает виртуальная машина.

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

Архитектура оболочки времени выполнения Java позволяет программе собираться по кусочкам прямо в процессе выполнения. Это практично, поскольку наиболее важные части программы можно постоянно хранить в памяти, а менее важные — загружать по мере необходимости. Java-программы умеют делать это, пользуясь механизмом “динамического связывания” (dynamic binding).

Сами апплеты — это файлы, содержащие так называемый бай-код (который исполняется виртуальной Java-машиной) и имеющие расширение .class.

Для встраивания вызовов апплетов в текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен контейнер АРРLЕТ, который начинается тегом <аррlet> и кончается тегом </аррlet>. В общем виде документ, содержащий ссылки на апплеты, будет выглядеть так, как это представлено в примере.

<HTML>

<HEAD>

<TITLE>Документ со встроенной ссылкой на applet.</TITLE>

</HEAD>

<BODY>

<APPLET CODE=hello width=200 height=100>

</APPLET>

</BODY>

</HTML>

Здесь указывается поле, занимаемое апплетом на странице шириной 200 пикселов и высотой 100 пикселов. В данное поле загружается аррlet с именем hello (файл hello.class). Файл hello.class должен в этом случае находиться там же, где и НТМL-файл, в котором есть на него ссылка. После приема апплета броузер отведет под него место в своей рабочей области и только после этого начнет его исполнение.

В общем случае контейнер АРРLЕТ имеет следующий вид:

<applet

[codebase = codebase url]

code = applet.class

[alt = text]

[name= applet name]

width = number of pixels

height = number of pixels

[align = alignment]

[vspace=number of picsels]

[hspace=number of pixels]

[<param name=param name value=param value>]

[HTML text]

</applet>

Параметр соdebase задает базу для поиска кода апплета. соdе — это имя файла апплета, которое должно иметь расширение сlass. аlt — альтернативный текст — отображается в том случае, когда выполнение апплета запрещено. name — имя контейнера аррlet, используется для ссылки на контейнер. width — ширина области отображения апплета, height — высота области отображения апплета. аlign управляет выравниванием области отображения апплета внутри рабочей области броузера. vspase и hspase указывают на отступ от текста НТМL-документа (вертикальный и горизонтальный соответственно).

Использование контейнера РАRАМ позволяет передавать параметры внутрь апплета и НТМL-документа. Эта процедура аналогична вызову команды с различными аргументами командной строки. Из атрибутов контейнера АРРLЕТ обязательными являются только соdе, width и height Все остальные атрибуты (они заключены в квадратные скобки [ ]) можно опускать.

Примеры апплетов находятся на прилагаемом диске.

14. Внедрение объектов. Тег <OBJECT>

Тег <OBJECT> позволяет вставлять в Web-страницу элементы, которые броузер самостоятельно не распознает. Рассмотрим пример. В Web-страницу вставлен элемент, созданный во флэш-технологии, в данном случае — анимированное изображение во флэш-формате Movie1.swf. Броузер не может работать с этим форматом, однако в него может быть добавлен так называемый plugins, а именно — проигрыватель флэш-файлов — флэш-плейер. Если плейер уже установлен, броузер распознает его по идентификатору classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000". Это уникальный идентификатор флэш-плейера. Если плейер не установлен, пользователь получает приглашение скачать его с сайта фирмы macromedia
codebase=http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0. Далее указан идентификатор самого анимированного изображения во флэш-формате и его размеры на Web-странице ID=Movie1 WIDTH=250 HEIGHT=200. Затем идет указание параметров, которые передаются флэш-плейеру: <PARAM NAME=movie VALUE="Movie1.swf">, а именно: анимация записана в файле Movie1.swf. Следующий параметр указывает качество воспроизведения:
<PARAM NAME=quality VALUE=high>. Параметр <PARAM NAME=bgcolor VALUE=#FFFFFF> указывает фоновый цвет области анимации. Затем вся эта информация еще раз повторяется, будучи вставленной в теги <EMBED> </EMBED>. Старые версии броузеров не умеют обрабатывать тег <OBJECT>. В более ранней спецификации языка HTML присутствовал только тег <EMBED>,поэтому для старых броузеров информация дублируется с этим тегом.

<HTML>

<HEAD>

<TITLE>Movie1</TITLE>

</HEAD>

<BODY >

<OBJECT

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"

ID=Movie1 WIDTH=250 HEIGHT=200>

<PARAM NAME=movie VALUE="Movie1.swf">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="Movie1.swf" quality=high bgcolor=#FFFFFF WIDTH=250

HEIGHT=200 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=
ShockwaveFlash">

</EMBED>

</OBJECT>

</BODY>

</HTML>

classid = uri

Этот атрибут может использоваться для указания местоположения объекта с помощью URI.

codebase = uri

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

type = content-type

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

ИТОГ УРОКА:

Сегодня мы с вами познакомились с основными средствами языка HTML

ДОМАШНЕЕ ЗАДАНИЕ:

Повторять лекцию

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРУТУРЫ

1. Мейксон Павел Григорьевич “Основные элементы языка HTML”. Пособие по разделу курса “Язык разметки гипертекста HTML”. Московский Центр Интернет-образования. 2000

2. Электронный учебник “Элементы языка HTML”.

Конспекты занятий 2–5.

Презентация