Лабораторная работа № 11

Тема: WEB - дизайн. Программирование WEB - документов на языке HTML

Цель: ознакомиться со структурой WEB - документов и получить начальные навыки в их создании на языке HTML

Содержание занятий:

Занятие№ 1. Общие сведения по HTML.

  • Общие сведения
  • Язык программирования HTML
  • Необходимые средства для освоения HTML
  • Редакторы HTML
  • Структура HTML-документа
  • Обязательные метки
    • <html> и </html>
    • <head> и </head>
    • <title> и </title>
    • <body> и </body>
    • <H1> и </H1> ... <H6> и </H6>
    • <P> и </P>

Занятие № 2. Абзацы в HTML-документе.

  • Комментарии
  • Непарные метки
    • Конец строки: <BR>
    • Горизонтальная линия: <HR>
    • &-последовательности
  • Начертание шрифта
    • Физические стили
    • Логические стили

Занятие № 3. Списки и обработка текста в HTML-документе.

  • Ненумерованные списки: <UL> и </UL>
  • Нумерованные списки: <OL> и </OL>
  • Списки определений: <DL> и </DL>
  • Вложенные списки
  • Форматированный текст: <PRE> и </PRE>
  • Текст с отступом: <BLOCKQUOTE> и </BLOCKQUOTE>

Занятие № 4. Связь HTML-файла. Гиперссылки.

  • Гиперссылки. Связывание документов
  • Переход по ссылке в часть документа
  • Ссылки на другие виды ресурсов
  • Изображения в HTML-документе

Занятие № 5. Невидимые метки в HTML-документе.

  • Цветовая гамма HTML-документа
  • Заголовок HTML-документа

Занятие № 6. Таблицы в HTML-документе.

  • Назначение таблицы
  • Как организована таблица

Занятие № 7. Формы в HTML-документе.

  • Как устроена форма
    • Простейшая форма
    • Как форма собирает данные для передачи на сервер
  • Как отправить почту формой

Самойлов А.Н. 2003 Кафедра КИС (тел. 3-01-45)
Кременчугский Государственный политехнический университет


Занятие 1. Общие сведения по HTML

Занятие №1

Тема: Общие сведения по HTML . Основные понятия HTML-документа
Цель работы: изучить структуру HTML-документа, закрепить полученные знания на практике
Теоретические сведения
Общие сведения

Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) в Интернет имеющий расширение *.htm или *.html. Достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола пересылки гипертекстов (HyperText Transfer Protocol, или http://). Первый HTML - документ сайта должен иметь имя index.html .

Совокупность серверов содержащих сайты с HTML - документами получила название "всемирной паутины" (World Wide Web, или WWW).

Создать все документы сайта можно на домашнем компьютере, а затем разместить их на компьютере, подключенном к Интернет.

Язык программирования HTML

Термин HTML (HyperText Markup Language) дословно можно перевести как "язык маркировки гипертекстов", а сам термин означает - язык для работы с гипертекстом. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML произошли изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML пронумерованны по спецификациям: 2.0, 3.0, 3.2 и 4.0.

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

Все Интернете написано на основном языке HTML с видоизменениями и дополнениями например на JAVA. Для освоения необходимы :

  1. Любой броузер для просмотра HTML-файлов. Это может быть Netscape Communicator или Internet Explorer, фирмы Microsoft.
  2. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. В среде Windows 95 , подойдет Notepad.
  3. Не допускать ошибки программирования.

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

Заданные упражнения по созданию HTML-файлов разрабатываются на компьютере, размещаются на диске. Компьютер, на котором будет выполняться настоящий курс лабораторных работ, может не иметь подключения к Интернет . Один и тот же html-файл может быть одновременно открыт и в Notepad, и в броузере для просмотра . Сохранив изменения в Notepad , нажмите кнопку Reload ("перезагрузить") в броузере, чтобы увидеть эти изменения реализованными в HTML-документе.

Редакторы HTML

В настоящее время широко используются два типа редакторов HTML:

  1. Редакторы типа Netscape Communicator, Microsoft Front Page. Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
  2. Редакторы HTML-текстов: Homesite, HotDog, Ken Nesbitt Web Editor и многие другие. В процессе работы изменяется непосредственно внутреннее содержание HTML-файла вручную, либо вызывая команды меню для вставки определенных элементов HTML.

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

HTML-документ - это просто текстовый файл с расширением *.htm (Unix - совместимые могут иметь файлы с расширением *.html). Самый простой HTML-документ выглядит следующим образом:

     <html>
     <head>
     <title>Пример1</title>
     </head>
     <body>
     <H1>Привет!</H1>
     <P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в броузере. Сохранить
изменения в Notepad - нажать кнопку Reload ('перезагрузить') в броузере,
чтобы увидеть эти изменения реализованными в HTML-документе.</P>
     </body>
     </html>

Можно посмотреть пример 1 .Для удобства чтения введены дополнительные отступы, однако в HTML это совсем не обязательно.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html> ) называется меткой (по-английски- tag, "тэг").

Большинство HTML-меток - парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты броузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты - элементы, дающие дополнительную информацию о том, как броузер должен обработать текущую метку . В рассматриваемом примере (простейшем документе) нет ни одного атрибута.

Обязательные метки

<html> ... </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> ... </head>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации.

<title> ... </title>

Все, что находится между метками <title> и </title>, толкуется броузером как название документа. Netscape Communicator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется давать название документу не длиннее 64 символов.

<body> ... </body>

Эта пара меток указывает на начало и конец тела HTML-документа, которое, собственно, и определяет содержание документа.

<H1> ... </H1> . <H6> ... </H6>

Метки вида <Hi> (где i . цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня, соответственно - самый мелкий.

<P> ... </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Все выше изложенные сведения продемонстрированы в примере 2:

<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=
CENTER>Привет!</H1> <H2>Это чуть более сложный пример
HTML-документа</H2> <P>Теперь известно, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT> или по правому краю.</P>
</body>
</html>

Возможные ошибки

Наложение различных стилей

Рассмотрим следующую строку HTML-документа:

<B>Это пример <DFN>наложения стилей</B> в HTML-документе</DFN>

Слова "наложения стилей" определены одновременно как <B> и <DFN>. Разные browser - по разному отображают ошибки, предсказать такие ошибки нельзя.

Различные стили внутри гиперссылки

Можно использовать гиперссылку внутри строки заданного стиля:

<H1><A HREF = " begth_r1.html "> Введение в HTML </A></H1>

Но нельзя изменять стиль внутри гиперссылки:

<A HREF = " begth_r1.html "> <H1> Введение в HTML </H1> </A>

Ошибочная ссылка

Когда Вы описываете ссылку <IMG> на рисунок, которого не существует, он заменяется фиктивным изображением. Проверьте, что рисунок существует, что в гиперссылке указан правильный URL, и что у пользователей есть права на использование этого файла.

Задание по занятию № 1

  1. Изучить теоретические сведения.
  2. Написать простейший HTML-документ, в котором будут использоваться все операторы описанные в данной лабораторной работе. В качестве сведений, включаемых в документ, должна использоваться информация об авторе документа (Ф.И.О., курс, номер группы, номер по списку и т.д.). Каждый студент бригады должен создать свой собственный HTML-документ.
  3. Продемонстрировать написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе. Отчёт должен содержать листинг (текст) программы на языке HTML, описание обязательных тегов в этом документе.


Занятие 2. Абзацы в HTML-документе.

Занятие № 2
Тема: Абзацы в HTML-документе.
Цель работы: Научиться оперировать абзацами в HTML-документе.
Теоретические сведения
Комментарии

Броузеры игнорируют любой текст, помещенный между <!-- и -- >. Поэтому такая последовательность используется для написания комментариев и текста, который не должен читаться на экране во время просмотра :

<!-- Это комментарий -->

Непарные метки

Непарные метки не имеют закрывающего тега, а некоторые (так называемые &-последовательности) к тому же должны вводиться только строчными (маленькими) буквами.

<BR>

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

<HR>

Метка <HR> описывает горизонтальную линию следующего вида:

Метка может дополнительно включать атрибуты SIZE (задает толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 3 приведены некоторые типы горизонтальных линий.

<html>
<head>
<title>Пример 3</title>
</head>
<body>
<H1 ALIGN=CENTER>Некоторые типы горизонтальных линий</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>

&-последовательности

Поскольку символы "<" и ">" воспринимаются броузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Броузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than - меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than - больше, чем).

Символ "&" (амперсанд) кодируется последовательностью &amp;

Двойные кавычки (") кодируются последовательностью &quot;

Помните: точка с запятой - обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть набраны в нижнем регистре (т.е., маленькие). Использование меток типа &QUOT; или &AMP; не допускается.

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

Начертание шрифта

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

Физические стили

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

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

Логические стили

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

<EM> ... </EM>

От английского emphasis - акцент.

<STRONG> ... </STRONG>

От английского strong emphasis - сильный акцент.

<CODE> ... </CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<SAMP> ... </SAMP>

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

<KBD> ... </KBD>

От английского keyboard - клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

<VAR> ... </VAR>

От английского variable - переменная. Рекомендуется использовать для написания имен переменных.

Пример

Логические и физические стили покажем в примере 4 . Можно увидеть, как броузер отображает логические стили.

<html>
<head>
<title>Пример 4</title> </head> <body>
<H1>Шрифтовое выделение фрагментов текста</H1> <P>Фрагменты текста можно выделять
<B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно
включать в текст фрагменты с фиксированной шириной символа
<TT>(имитация пишущей машинки)</TT></P>
<P>Кроме того, существует ряд логических стилей:</P>
<P><EM>EM - от английского emphasis - акцент </EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR>
<CODE>CODE - для фрагментов исходных текстов</CODE><BR>
<SAMP>SAMP - от английского sample - образец </SAMP><BR>
<KBD>KBD - от английского keyboard - клавиатура</KBD><BR>
<VAR>VAR - от английского variable - переменная </VAR></P>
</body>
</html>
Задание по занятию № 2
  1. Изучить теоретические сведения.
  2. Написать HTML-документ в котором будут использоваться все виды абзацев и стилей шрифтов, описанные в данной лабораторной работе. При написании документа использовать информацию об авторе документа. Каждый студент группы создает свой собственный HTML-документ.
  3. Продемонстрировать написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе.


Занятие 3. Списки и обработка текста в HTML-документе.

Занятие № 3
Тема: Списки и обработка текста в HTML-документе
Цель работы: Научиться оперировать списками и изучить основные виды обработки текста в HTML-документе
Теоретические сведения

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

Ненумерованные списки: <UL> ... </UL>

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать такой список:

  • Один;
  • Два;
  • Три.

необходим следующий HTML-текст:

<UL>
<LI>Один;
<LI>Два;
<LI>Три.
</UL>

Обратите внимание: у метки <LI> нет парной закрывающей метки.

Нумерованные списки: <OL> ... </OL>

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

<OL>
<LI>Один;
<LI>Два;
<LI>Три.
</OL>

получится вот такой список:

  1. Один;
  2. Два;
  3. Три.
Списки определений: <DL> ... </DL>

Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term - определяемый термин) и <DD> (от английского definition definition - определение определения). Разберем это на примере. Предположим, что имеется следующий фрагмент HTML-текста:

<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'язык
гипертекстовых описаний'. Первую версию HTML разработал сотрудник
Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут
содержать файлы с расширением *.html).
</DL>

Этот фрагмент будет выведен на экран следующим образом:

HTML
Термин HTML (HyperText Markup Language) означает 'язык гипертекстовых описаний'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

Метки <DT> и <DD> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT> . Например, фрагмент HTML-текста:

<DL COMPACT>
<DT>А
<DD>Первая буква русского алфавита
<DT>Б
<DD>Вторая буква русского алфавита
<DT>В
<DD>Третья буква русского алфавита
</DL>

будет выведен на экран примерно так:

А
Первая буква русского алфавита
Б
Вторая буква русского алфавита
В
Третья буква русского алфавита
Вложенные списки

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

Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

Полученные сведения о списках обобщены в примере 5:

<html>
<head>
<title>Пример 5</title>
</head>
<body> <H1>HTML поддерживает несколько видов
списков
</H1> <DL>
<DT>Ненумерованные списки <DD>Элементы ненумерованного списка
выделяются специальным символом и
отступом
слева: <UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент
3 </UL>
<DT>Нумерованные списки <DD>Элементы нумерованного списка выделяются отступом
слева, а
также
нумерацией: <OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент
3 </OL>
<DT>Списки определений <DD>Этот вид списков чуть сложнее, чем два предыдущих,
но и выглядит
более эффектно. <P>Списки можно встраивать один в другой, но не
следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться
несколько абзацев. Все абзацы при этом будут иметь одинаковое
левое поле. </P>
</DL>
</body>
</html>
Форматированный текст: <PRE> ... </PRE>

Броузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение: текст, заключенный между метками <PRE> и </PRE> (от английского preformatted - предварительно форматированный), выводится броузером на экран как есть - со всеми пробелами, символами табуляции и конца строки. Например:

Этот текст напечатан с форматированием <PRE>...</PRE>

Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>

Текст, заключенный между метками <BLOCKQUOTE> ... </BLOCKQUOTE>, выводится броузером на экран с увеличенным левым полем. Например:

Отступы слева этого текста сделаны посредством применения тега <BLOCKQUOTE> ... </BLOCKQUOTE>
Задание по занятию № 3
  1. Изучить теоретические сведения.
  2. Написать HTML-документ в котором будут использоваться все виды списков и обработки текстов описанные в данной лабораторной работе. Каждый студент создает собственный HTML-документ.
  3. Продемонстрировать написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе.


Занятие 4. Связь HTML-файла с внешними файлами.

Занятие № 4
Тема: Связь HTML-файла с другими (внешними) файлами
Цель работы: Научиться подключать к одному HTML-документу другие HTML-документы (связывание) и внешние графические файлы (изображения)
Теоретические сведения

Гиперссылки. Связывание

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

В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

<A HREF="[адрес перехода]">выделенный фрагмент текста</A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое - это задать имя другого HTML-документа, к которому нужно перейти. Например:

<A HREF="index.htm">Перейти к оглавлению</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.htm.

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

Группа HTML-документов, которые ссылаются друг на друга по имени файла и находятся в одном каталоге, будет работать так же, как в другом каталоге на другом компьютере, в локальной сети или в Интернет.

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

<A HREF="http://имя севера/директория/имя файла">
любой текст</A>

Переход по ссылке в часть документа

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

<A NAME="AAA">Переход закончен</A>

Рекомендуется задавать имена анкеров латинскими буквами . Большинство броузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA , хотя документ, скорее всего, будет загружен корректно.

Переход к части другого документа из файла 1.htm к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге):

Необходимо создать вот такой анкер в файле 2.htm: <A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

В файле 1.htm (или в любом другом) можно определить переход на этот анкер:

<A HREF="2.htm#AAA">Переход к анкеру AAA</A>

Переход к этому анкеру можно определить и внутри самого документа 2.htm. Для этого достаточно включить в него следующий фрагмент:

<A HREF="#AAA">Переход к анкеру AAA</A>

Ссылки на другие виды ресурсов

До этого момента обсуждались только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов. Например:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

Такая ссылка, запустит протокол передачи файлов (FTP) и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

<A HREF="mailto:user@mail.box">Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

Разберем все помощью примера 6.

<HTML>
<HEAD>
<TITLE>Пример 6</TITLE>
</HEAD>
<BODY>
<H1>Связывание </H1>
<P>С помощью ссылок можно переходить к другим файлам
(например, к <A HREF="index.htm">оглавлению этого
курса</A>).</P>
<P>Можно выгружать файлы (например,
<A HREF=
"ftp://ftp.freeware.ru/pub/internet/browser/cc32e406.exe"> Netscape Communicator версии 4.06 </A>) по
FTP.</P> <P>Можно дать возможность послать почту (например,
<A HREF="mailto:user@mail.box">куда угодно :-)</A>).</P>
</BODY>
</HTML>

Изображения в HTML-документе

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

• Изображения формата GIF (Graphic Interchange Format).

• Монохромные изображения формата X-Bitmap (ХВМ), используемые в среде Х Windows для UNIX.

• Цветные изображения формата X-Pixelmap (ХРМ), также используемые в среде Х Windows.

• Формат JPEG (аббревиатура образована от названия группы, разработавшей данный формат, — Joint Photographic Experts Group).

Другие форматы изображений поддерживаются Web-броузерами косвенно, то есть с вызовом вспомогательных приложений и подключаемых модулей.
Вставить изображение в HTML-документ очень просто. Для этого нужно иметь изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

Допустим, нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

<IMG SRC="picture.gif">

Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:

<IMG SRC="picture.gif" ALT= "Описание картинки">

Примеры документов: Пример 1 , Пример 2 , Пример 3 .

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

Тег <IMG> имеет и другие, необязательные атрибуты. Ниже приведен список главных атрибутов:

• ALT — задает альтернативный текст, который выводится броузером на стадии загрузки изображения, или в том случае, если изображение почему-либо не может быть отображено.

• BORDER — задает наличие рамки (BORDER=1)или её отстутствие (BORDER=0) для изображеня.

• HEIGHT и WIDTH — назначают размер изображения.

• ALIGN — задает способ физического выравнивания изображений на странице.

• HEIGHT и WIDTH — назначают размер изображения.

• ISMAP — используется для назначения изображения в качестве карты-изображения.

 Microsoft Inte rnet Explorer поддерживает дополнительный атрибут DYNSRC, используемый вместе с тегом <IMG>. С помощью этого атрибута в HTML-страницу можно включать видеофайлы, отображаемые в реальном времени.

Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя (см. раздел "Связывание").

Разберем пример 7:

<HTML>
<HEAD>
<TITLE>Пример 7</TITLE>
</HEAD>
<BODY>
<H1>Изображения </H1>
<P>Изображение можно встроить очень просто: </P>
<P><IMG SRC="picture.gif"></P>
<P>Кроме того, изображение можно сделать "горячим", то есть
осуществлять переход при нажатии на изображение:</P>
<P><A HREF="index.htm"><IMG SRC="picture.gif"></A></P>
</BODY>
</HTML>

Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (в примере 7 переход происходит на оглавление курса).

Задание по занятию № 4
  1. Изучить теоретические сведения.
  2. Каждый студент должен написать свой HTML-документ, который будет связан с другими HTML-документами и в нем будут вставлены изображения. Изображения могут быть персонально подготовлены посредством какого-либо графического редактора.
  3. Продемонстрировать преподавателю написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе.


Занятие 5. Невидимые метки в HTML-документе.

Занятие № 5
Тема: невидимые метки в HTML-документе
Цель работы: научиться оперировать заголовками и цветовой гаммой HTML-документа
Теоретические сведения

Цветовая гамма HTML-документа

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

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:

bgcolor
Определяет цвет фона документа.
text
Определяет цвет текста документа.
link
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется как названиями цветов на английском языке, так и последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета, одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Несколько примеров:

bgcolor=#FFFFFF или bgcolor="white"
Цвет фона. Насыщенность красным, зеленым и синим одинакова - FF (это шестнадцатиричное представление числа 255). Результат - белый цвет.
text=#000000 text="black"
Цвет текста. Насыщенность красным, зеленым и синим одинакова - 00 (ноль). Результат - черный цвет.
link=#FF0000 link="red"
Цвет гипертекстовой ссылки. Насыщенность красным - FF (255), зеленым и синим - 00 (ноль). Результат - красный цвет.

Пример основных "разрешённых" цветов, ограниченных небольшим количеством из-за возможных отличий в качестве отображения цветов на стороне пользователя:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16

Метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).

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

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

Заголовок HTML-документа

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

Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций.

META-инструкция - способ определеения некоторой переменной путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции:

<META NAME="description" CONTENT="Это курс
лабораторных работ по HTML">

Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.

<META NAME="keywords" CONTENT="Интернет, HTML, WWW, гипертекст">

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

Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. Разберем несколько примеров:

<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=windows-1251">

Эта META-инструкция дает броузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows-1251, как наиболее распростанённой.

<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=koi8-r">

Эта META-инструкция аналогична предыдущей, в качестве кодировки указывается КОИ-8, стандарт принятый в русскоязычных странах.

<META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]">

Такая META-инструкция дает броузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:

<META HTTP-EQUIV="Refresh"
CONTENT="10; URL=lab1.htm;>

Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ lab1.htm/.

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

Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что броузер пользователя поддерживает формат этого звукового файла).

Пример

В отличие от всех примеров, пример 8 состоит не из одного, а из трех файлов. META-инструкция Refresh , поочерёдно загружает три кадра (файлы prim8.htm, prim8a.htm и prim8b.htm ), которые будут циклически повторяться.

<HTML><!--файл prim8.htm -->
<HEAD>
<TITLE>Пример 8</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=prim8a.htm">
</HEAD>
<BODY bgcolor=#FFFFFF text=#000000 link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Черный текст на белом фоне </P>
<P>[<A HREF="index.htm">Возврат к оглавлению</A>|
<A HREF="lab6.htm">Возврат к лабораторной работе 6</A>]</P>
</BODY>
</HTML><!--конец файла prim8.htm -->
<HTML><!--файл prim8a.htm -->
<HEAD>
<TITLE>Пример 8a</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=prim8b.htm">
</HEAD>
<BODY bgcolor=#000000 text=#FFFFFF link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Белый текст на черном фоне </P>
<P>[<A HREF="index.htm">Возврат к оглавлению</A>|
<A HREF="lab6.htm">Возврат к лабораторной работе 6</A>]</P>
</BODY>
</HTML><!--конец файла prim8a.htm -->
<HTML><!--файл prim8b.htm -->
<HEAD>
<TITLE>Пример 8b</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=prim8.htm">
</HEAD>
<BODY bgcolor=#C0C0C0 text=#0000FF link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Синий текст на сером фоне </P>
<P>[<A HREF="index.htm">Возврат к оглавлению</A>|
<A HREF="lab6.htm">Возврат к лабораторной работе 6</A>]</P>
</BODY>
</HTML><!--конец файла prim8b.htm -->
Задание по занятию № 5
  1. Изучить теоретические сведения.
  2. Каждый студент должен написать собственный HTML-документ, в котором будут использованы все сведения, полученные в данной лабораторной работе.
  3. Продемонстрировать написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе.


Лабораторная работа 7. Таблицы в HTML-документе.

Занятие № 6
Тема: Таблицы в HTML-документе
Цель работы: Научиться работать с таблицами в HTML-документах
Теоретические сведения
Назначение таблицы

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

Как организована таблица

В устройстве таблицы легче всего разобраться на простом примере 9.

<HTML>
<HEAD>
<TITLE>Пример 9</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION>Здесь заголовок таблицы</CAPTION>

<! -- Начало первой строки  -->

<TR>
<TD>
Первая строка, первая колонка
</TD>
<TD>
Первая строка, вторая колонка
</TD>
 </TR>

<! -- Начало второй строки  -->
<TR>
<TD>
Вторая строка, первая колонка
</TD>
<TD>
Вторая строка, вторая колонка
</TD>
</TR>
</TABLE>         <!--Это конец таблицы-->
</BODY>
</HTML>

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:

ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).

Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

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

ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

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

NOWRAP
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN
Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH
Устанавливает ширину ячейки в пикселах (например, WIDTH=200).
HEIGHT
Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (non-breaking space - не разрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет. Любая ячейка таблицы может содержать в себе другую таблицу.

Задание по занятию № 6
  1. Изучить теоретические сведения.
  2. Каждый студент группы должен написать HTML-документ, в котором будут использованы все сведения полученные в данной лабораторной работе.
  3. Продемонстрировать написанный HTML-документ при помощи броузера.
  4. Написать отчет по лабораторной работе.


Занятие 7. Формы в HTML-документе.

Занятие № 7
Тема: Формы в HTML-документе.
Цель работы: Научиться оперировать с формами в HTML-документе
Теоретические сведения
Форма - инструмент, с помощью которого HTML-документ может послать некоторую информацию на сервер сети,где информация будет обработана.

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

Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Эта программа обычно написана на языках программирования Перл или Си. Возможно применение и других языков.

Написание CGI-скриптов в большинстве случаев требует хорошего знания языка программирования и возможностей операционной системы Unix или Windows.

В последнее время, определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php). Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена форма

Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм. Формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений. Примеры различных её элементов и различные по назначению формы можно посмотреть здесь.

Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

ACTION
Обязательный атрибут. Определяет адрес в формате URL, где находится обработчик формы.
METHOD
Определяет, каким образом (тип метода и протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.
Простейшая форма

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

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение").Создать такой орган управления очень просто:

<INPUT TYPE=submit VALUE="Поехали!">

Встретив такую строчку внутри формы, броузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.

Простейшая форма(пример 10) не собираает данные, а вернет к этому тексту занятия.

<HTML>
<HEAD>
<TITLE>Пример 10</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="lab8.htm"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад, к занятию 7...">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>

При необходимости обработки значения полученного при нажатии кнопки, назначается имя кнопки для передачи обработчику. Имя кнопки назначается путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

<INPUT TYPE=submit NAME="button" VALUE="Поехали!">

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

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

Как форма собирает данные для передачи на сервер

Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, максимально допустимая длина введённого текста определяется атрибутом MAXLENGTH=[значение]. Этот атрибут не обязателен.

Основные типы элементов <INPUT>:

TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах), MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах) и NAME=[латинский текст] Пример:
Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится "текст по-умолчанию" с возможностью редактировать его. Текст передается обработчику в переменной user.
INPUT TYPE=text SIZE=20 NAME=user VALUE="текст по-умолчанию">
TYPE=password
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:
<INPUT TYPE=password value="текст по-умолчанию" NAME=pw SIZE=20 MAXLENGTH=10>
Введенный пароль передается обработчику в переменной pw.
TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
<INPUT
        TYPE=radio< /STRONG> NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio< /STRONG> NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio< /STRONG> NAME=modem VALUE="28800">28800 бит/с
Выглядит так:
9600 бит/с
14400 бит/с
28800 бит/с
Определяется группа из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.
TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку и может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:
<INPUT TYPE=checkbox< /STRONG> NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox< /STRONG> NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox< /STRONG> NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox< /STRONG> NAME=comp VALUE= "IS" checked>Серверы Интернет
Внешний вид:
Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет
Определяется группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.
TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования можно придумать самостоятельно. Пример:
<INPUT TYPE=hidden< /STRONG> NAME=version VALUE="1.1">
Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
TYPE=file
Создает управляющий элемент позволяющий пользователю выбирать файлы, содержимое которых может передаваться вместе с формой. При выводе на экране появляется элемент ввода кнопкой типа "browse"(обзор). Для создания этого управляющего элемента используется элемент:
<INPUT TYPE=file< /STRONG> NAME="nmfile" size=22>
Укажите отправляемые файлы:
TYPE=reset
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Пример:
<INPUT TYPE=reset< /STRONG> VALUE="Очистить поле формы">
Определяет кнопку Очистить поле формы, при нажатии на которую тектовое поле формы очищается от набранного пользователем текста.

Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.

Меню <SELECT> из n элементов
выглядит так:

Элемент TEXTAREA

Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню. Меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню. Метка <SELECT> может также содержать атрибут MULTIPLE , присутствие показывает, что из меню можно выбрать несколько элементов. Большинство броузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]).

Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию. Например:

<SELECT NAME="sel2">
<OPTION VALUE= "option1">Вариант1 </OPTION>
<OPTION VALUE= "option2"selected >Вариант2 </OPTION>
<OPTION VALUE="option3">Вариант3</OPTION>
</SELECT>

Такой фрагмент определяет меню из трех элементов: Вариант1, Вариант2 и Вариант3. По умолчанию выбран элемент Вариант2. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.

Листинг для элемента <TEXTAREA>:

<TEXTAREA NAME=address ROWS=5 COLS=50>
А здесь-адрес... </TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).

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

Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Пример

Для демонстрации использования форм - пример11:

<HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<H1>Несколько более сложная форма </H1>
<FORM ACTION="http://имя сервера/имя программы-обработчика" METHOD=
   post>
<H2>Расскажите немного о себе...</H2> <P>Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне
подойдут и вымышленные.
 </P> <P>Имя:  <INPUT TYPE=text SIZE= 40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male"
checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский
 <BR> Возраст:<INPUT TYPE=text SIZE=5 NAME=
 age> лет<BR>
 <INPUT TYPE=submit VALUE="Отправить"></P> </FORM>
</BODY> </HTML>

Как отправить почту формой

HTML предоставляет мощный механизм пересылки содержимого форм на сервер электронной почты. Изменим пример 11. Вместо строки

<FORM ACTION="http://имя сервера/имя программы-обработчика" METHOD= post><

введём строку

<FORM ACTION="mailto:user@mail.box" ENCTYPE= text/plain>

Изменён алгоритм кодирования на text/plain , то есть выключили кодирование вообще.

Указано имя Иван, фамилию Петров, мужской пол и возраст 22 года. После нажатия на кнопку Отправить ? на адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:

fn=Иван
ln=Петров
gender=male
age=22

Не все смогут воспользоваться такой формой. Всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя броузер пользователя, т.е. конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда - броузер просто выдаст сообщение об ошибке.
Задание по занятию № 7

  1. Изучить теоретические сведения.

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

  3. Продемонстрировать написанный HTML-документ при помощи броузера.

  4. Написать отчет по лабораторной работе.
    5.


Пример 1

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в броузере. Сохранить изменения в Notepad - нажать кнопку Reload ('перезагрузить') в броузере,
чтобы увидеть эти изменения реализованными в HTML-документе.


Пример 2

Привет!

Это чуть более сложный пример HTML-документа

Теперь известно, что абзац можно выравнивать не только влево,

но и по центру

или по правому краю.


Пример 3

Некоторые типы горизонтальных линий


Пример 4

Шрифтовое выделение фрагментов текста

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

Кроме того, существует ряд логических стилей:

EM - от английского emphasis - акцент
STRONG - от английского strong emphasis - сильный акцент
CODE - для фрагментов исходных текстов
SAMP - от английского sample - образец
KBD - от английского keyboard - клавиатура
VAR - от английского variable - переменная


Пример 5

HTML поддерживает несколько видов списков

Ненумерованные списки
Элементы ненумерованного списка выделяются специальным символом и отступом слева:
  • Элемент 1
  • Элемент 2
  • Элемент 3
Нумерованные списки
Элементы нумерованного списка выделяются отступом слева, а также нумерацией:
  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
Списки определений
Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности.

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


Пример 6

Связывание

С помощью ссылок можно переходить к другим файлам (например, к оглавлению этого курса).

Можно выгружать файлы (например, Netscape Communicator версии 4.06 ) по FTP.

Можно дать пользователю возможность послать почту (например, кому нибудь :-)).


Пример 7

Изображения

Изображение можно встроить очень просто:

Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение, после наведения мыши:


Пример 8

Слайд-демонстрация цветовых гамм
с помощью META-инструкции Refresh

Черный текст на белом фоне


Пример 8a

Слайд-демонстрация цветовых гамм
с помощью META-инструкции Refresh

Белый текст на черном фоне


Пример 8b

Слайд-демонстрация цветовых гамм
с помощью META-инструкции Refresh

Синий текст на сером фоне


Пример 9

Простейшая таблица

У таблицы может быть заголовок
Первая строка, первая колонка | Первая строка, вторая колонка
Вторая строка, первая колонка | Вторая строка, вторая колонка


Пример 10

Простейшая форма


Пример 11

Несколько более сложная форма

Расскажите немного о себе...

Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные.

Имя:
Фамилия:
Пол: мужской женский
Возраст: лет


Таблицы

Пример использования верхних и нижних заголовков и тела таблицы
Верхний заголовок 1 | Верхний заголовок 2 | Верхний заголовок 3
Первая строка данных блока 1...
Вторая строка данных блока 1...
Первая строка данных блока 2...
Вторая строка данных блока 2...
Третья строка данных блока 2...
Нижний заголовок 1 | Нижний заголовок 2 | Нижний заголовок 3

Сколько чашек кофе выпивает каждыйсотрудник
Имя | Сколько | Сорт кофе | Сахар?
В.Т. Иванов | 10 | Эспрессо | Нет
Д.С. Петров | 5 | Без кофеина | Да

Таблица с объединенными ячейками Сколько чашек кофе выпивает каждый сотрудник фирмы
Имя | Число чашек | Сорт кофе | Сахар?
Иванов С.П. | 10 | Эспрессо | Нет
Сидоров В.Г. | 5 | Нескафе | Да
Петров В.И. | Нет данных

Таблица с объединенными строками и столбцами Статистика по фруктовым мухам
 | Средний |  | Красные глаза
 | высота | вес
мужской пол | 1.9 | 0.003 | 40%
женский пол | 1.7 | 0.002 | 43%

Пример таблицы с перекрытием ячеек
Ячейка 1 | Ячейка 2 | Ячейка 3
Ячейка 4 | Ячейка 5 | Ячейка 6
Ячейка 7 |  | Ячейка 9

Пример группирования с помощью элемента COLGROUP
1 2 3 4 5

Пример таблицы с выравниванием по символу Оптовые цены на фрукты
Фрукты | Цена за тонну
Бананы | $234.30
Ананасы | $1456.50
Яблоки | $91.30

Пример таблицы с заданными граничными промежутками
Данные1 Данные2 Данные3

Форматированная таблица
Ячейка 1 | Ячейка 2 | Ячейка 3
Ячейка 4 | Ячейка 5 | Ячейка 6
Ячейка 7 | Ячейка 8 | Ячейка 9


Оглавление с элементами связывания

Содержание

Введение
История вопроса
Подробные сведения

Введение

Интернет - мировая компьютерная сеть. Она составлена из разнообразных компьютерных сетей, объединенных стандартными соглашениями о способах обмена информацией и единой системой адресации. Интернет использует протоколы семейства TCP/IP. Они хороши тем, что обеспечивают относительно дешевую возможность надежно и быстро передавать информацию даже по не слишком надежным линиям связи, а также строить программное обеспечение, пригодное для работы на любой аппаратуре. Система адресации (URL-адреса) обеспечивает уникальными координатами каждый компьютер (точнее, практически каждый ресурс компьютера) и каждого пользователя Интернета, создавая возможность взять именно то, что нужно, и передать именно туда, куда нужно.

К оглавлению

История вопроса

Около 20 лет назад Министерство Обороны США создало сеть, которая явилась предтечей Internet, - она называлась ARPAnet. ARPAnet была экспериментальной сетью, - она создавалась для поддержки научных исследований в военно-промышленной сфере, - в частности, для исследования методов построения сетей, устойчивых к частичным повреждениям, получаемым, например, при бомбардировке авиацией и способных в таких условиях продолжать нормальное функционирование. Это требование дает ключ к пониманию принципов построения и структуры Internet. В модели ARPAnet всегда была связь между компьютером-источником и компьютером-приемником (станцией назначения). Сеть предполагалась ненадежной: любая часть сети может исчезнуть в любой момент. На связывающиеся компьютеры - не только на саму сеть - также возложена ответственность обеспечивать налаживание и поддержание связи. Основной принцип состоял в том, что любой компьютер мог связаться как равный с равным с любым другим компьютером. Передача данных в сети была организована на основе протокола Internet - IP. Протокол IP - это правила и описание работы сети. Этот свод включает правила налаживания и поддержания связи в сети, правила обращения с IP-пакетами и их обработки, описания сетевых пакетов семейства IP (их структура и т.п.). Сеть задумывалась и проектировалась так, чтобы от пользователей не требовалось никакой информации о конкретной структуре сети. Для того, чтобы послать сообщение по сети, компьютер должен поместить данные в некий "конверт'', называемый, например, IP, указать на этом "конверте'' конкретный адрес в сети и передать получившиеся в результате этих процедур пакеты в сеть. Эти решения могут показаться странными, как и предположение о "ненадежной'' сети, но уже имеющийся опыт показал, что большинство этих решений вполне разумно и верно. Пока Международная Организация по Стандартизации (Organization for International Standardization - ISO) тратила годы, создавая окончательный стандарт для компьютерных сетей, пользователи ждать не желали. Активисты Internet начали устанавливать IP-программное обеспечение на все возможные типы компьютеров. Вскоре это стало единственным приемлемым способом для связи разнородных компьютеров. Такая схема понравилась правительству и университетам, которые проводят политику покупки компьютеров у различных производителей. Каждый покупал тот компьютер, который ему нравился и вправе был ожидать, что сможет работать по сети совместно с другими компьютерами. Примерно 10 лет спустя после появления ARPAnet появились Локальные Вычислительные Сети (LAN), например, такие как Ethernet и др.

К оглавлению

Подробные сведения

Одновременно появились компьютеры, которые стали называть рабочими станциями. На большинстве рабочих станций была установлена операционная система UNIX. Эта ОС имела возможность работы в сети с протоколом Internet (IP). В связи с возникновением принципиально новых задач и методов их решения появилась новая потребность: организации желали подключиться к ARPAnet своей локальной сетью. Примерно в то же время появились другие организации, которые начали создавать свои собственные сети, использующие близкие к IP коммуникационные протоколы. Стало ясно, что все только выиграли бы, если бы эти сети могли общаться все вместе, ведь тогда пользователи из одной сети смогли бы связываться с пользователями другой сети. Одной из важнейших среди этих новых сетей была NSFNET, разработанная по инициативе Национального Научного Фонда (National Science Foundation - NSF). В конце 80-х NSF создал пять суперкомпьютерных центров, сделав их доступными для использования в любых научных учреждениях. Было создано всего лишь пять центров потому, что они очень дороги даже для богатой Америки. Именно поэтому их и следовало использовать кооперативно. Возникла проблема связи: требовался способ соединить эти центры и предоставить доступ к ним различным пользователям. Сначала была сделана попытка использовать коммуникации ARPAnet, но это решение потерпело крах, столкнувшись с бюрократией оборонной отрасли и проблемой обеспечения персоналом. Тогда NSF решил построить свою собственную сеть, основанную на IP технологии ARPAnet. Центры были соединены специальными телефонными линиями с пропускной способностью 56 KBPS (7 KB/s). Однако, было очевидно, что не стоит даже и пытаться соединить все университеты и исследовательские организации непосредственно с центрами, т.к. проложить такое количество кабеля - не только очень дорого, но практически невозможно. Поэтому решено было создавать сети по региональному принципу. В каждой части страны заинтересованные учреждения должны были соединиться со своими ближайшими соседями. Получившиеся цепочки подсоединялись к суперкомпьютеру в одной из своих точек, таким образом суперкомпьютерные центры были соединены вместе. В такой топологии любой компьютер мог связаться с любым другим, передавая сообщения через соседей. Это решение было успешным, но настала пора, когда сеть уже более не справлялась с возросшими потребностями. Совместное использование суперкомпьютеров позволяло подключенным общинам использовать и множество других вещей, не относящихся к суперкомпьютерам. Неожиданно университеты, школы и другие организации осознали, что заимели под рукой море данных и мир пользователей. Поток сообщений в сети (трафик) нарастал все быстрее и быстрее пока, в конце концов, не перегрузил управляющие сетью компьютеры и связывающие их телефонные линии. В 1987 г. контракт на управление и развитие сети был передан компании Merit Network Inc., которая занималась образовательной сетью Мичигана совместно с IBM и MCI. Старая физически сеть была заменена более быстрыми (примерно в 20 раз) телефонными линиями. Были заменены на более быстрые и сетевые управляющие машины. Процесс совершенствования сети идет непрерывно. Однако, большинство этих перестроек происходит незаметно для пользователей. Включив компьютер, вы не увидите объявления о том, что ближайшие полгода Internet не будет доступна из-за модернизации. Возможно, даже более важно то, что перегрузка сети и ее усовершенствование создали зрелую и практичную технологию. Проблемы были решены, а идеи развития проверены в деле.

К оглавлению


Элементы форм. Примеры различных форм

Простой выпадающий список

Выпадающий список с расширенным полем выбора SIZE="6" и с мультвыбором полей MULTIPLE меткой SELECTED

Элемент TEXTAREA

Примеры форм различных по степени сложности и назначению

Укажите свое имя

Укажите отправляемые файлы

Укажите свое имя:

Укажите отправляемые файлы:

Подписка на группу новостей

Подписаться на прием новостей

Подписка на рассылку новостей

Подписаться на прием новостей

Подписка на рассылку новостей

Подписаться на прием новостей

Сведения о подписчике Фамилия: e-mail:
На что вы хотите подписаться Ежедневные новости Еженедельные новости
Текущая подписка Получаете ли вы сейчас подписные новости?
Да Нет
Если да, перечислите ниже источники подписки:

What's up, Doc?
Водолазний колокол
Авіаносець
Вилковий штабелеукладач

Чи ви хочете одержати інформаційні матеріали?
Да

Гостевая книга

Рейтинг книги
Высокий


Моя домашняя страничка

 Моя страничка

Моя домашняя страничка

Моя домашняя страничка

Моя домашняя страничка

Моя домашняя страничка


Моя страничка -10

 Это красный цвет

Моя страничка -10

Привет! Это моя личная домашняя страничка!-11

Мой университет -12

A я учусь в музыкальной школе -14

Mou увлечения - музыка, спорт. -16

Мои друзья

Mou друзья учатся со мной в одном университете . -18

Design "Luch" -20