Создание Web-страниц. Изучение языка HTML.

HTML - Hyper Text Markup Language.

Web-страница (документ HTML) представляет собой текстовый файл

на языке HTML формата *.htm или *.html, размещенный в World Wide

Web (WWW). WWW -Всемирная Паутина, распределенная система доступа

к гипертекстовым документам, существующая в Интернете. Web-стра-

ница кроме текста может содержать гипертекстовые ссылки, при по-

мощи которых можно переходить к другим Web-страницам и просматри-

вать их. Web-страница может содержать вставки в виде графики,

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

использовать, например MicroSoft Internet Explorer или NetScape

Navigator (просмотрщик или броузер).

Язык HTML позволяет: 1) Создавать и редактировать Web-страницы,

в том числе свою домашнюю Web-страницу, которую можно затем раз-

местить в Интернете; 2) Редактировать документы HTML, полученные

из Интернета, так чтобы функционировали все внедренные в документ

объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные

презентации, слайд-шоу, демонстрационные проекты, благодаря ги-

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

сунки, диаграммы, анимации, видеоклипы, музыкальное и речевое

сопровождение, текстовые спецэффекты (например, бегущая строка).

Существуют три способа создания Web-страниц (или документов HTML):

1) Использование текстового редактора Блокнот (NotePad), встроен-

ного в Windows, и просмотр результатов с помощью броузера. Этот

самый простой способ рекомендуется начинающим. Технология созда-

ния Web-страницы такова:

В редакторе Блокнот создается файл Web-страницы, который сохра-

няется с расширением *.htm. Затем этот файл загружается и прос-

матривается программой Internet Explorer. Для вызова редактора

Блокнот с целью редактирования файла Web-страницы во время ее

просмотра в Internet Explorer, используется пункт меню Вид, Ис-

точник. После сохранения файла и выхода из Блокнота для просмот-

ра отредактированной страницы надо нажать клавишу F5 или кнопку

"Обновить" в панели инструментов Internet Explorer.

2) Использование специальных редакторов документов HTML, например

Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.

3) Использование WinWord 97, где создается текст документа, кото-

рый затем конвертируется в HTML-формат.

Рассмотрим основные понятия языка HTML.

1. Элемент -это конструкция языка HTML, или контейнер, содержащий

данные. Web-страница представляет собой набор элементов.

2. Тег - это стартовый и конечный маркеры элемента. Теги опреде-

ляют границы действия элементов и отделяют элементы друг от друга.

В тексте Web-страницы теги заключаются в угловые скобки, например:

<HTML>. Конечный тег всегда снабжается косой чертой: </HTML>.

3. Гиперссылка - фрагмент текста, который является указателем на

другой файл или объект. Гиперссылки позволяют переходить от одно-

го документа к другому.

4. Фрейм - область гипертекстового документа со своими полосами

прокрутки.

5. Апплет - программа, передаваемая на компьютер клиента в виде

отдельного файла и запускаемая при просмотре Web-страницы.

6. Скрипт - программа, включенная в состав Web-страницы для рас-

ширения ее возможностей.

7. Загрузка (DownLoad) - копирование документа с Web-сервера на

компьютер клиента. UpLoad - копирование документа c компьютера

клиента на Web-сервер - используется при создании собственной

Web-страницы.

Рассмотрим общую структуру типичного простейшего документа HTML:

 

<COMMENT>Комментарий</COMMENT>

<HTML>

<HEAD>

<TITLE>Название документа</TITLE>

</HEAD>

<BODY>

Здесь расположен текст самого документа HTML.

</BODY>

</HTML>

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

 

Дадим пояснения указанным тегам документа HTML.

<COMMENT> или <!-- --> - Комментарий к документу. Он игнорируется

броузером. Комментарий не является обязательным и может отсутствовать.

<HTML> - идентификатор всего блока HTML-команд.

<HEAD> - идентификатор заголовка документа HTML.

<TITLE> - идентификатор заголовка окна просмотра.

<META> - этот непарный тег применяется для указания подробной

информации о документе.

<BODY> - идентификатор HTML-команд документа для просмотра.

Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру ос-

новную информацию для идентификации и организации документа.

Все указанные теги - парные, то есть каждый из них заканчивается

конечным тегом с косой чертой.

Все команды можно писать как с маленькой буквы, так и с большой.

Рассмотрим теги форматирования текстового потока:

<P> - идентификатор конца абзаца.

<BR> - идентификатор перевода строки.

<HR> - идентификатор изображения горизонтальной линии.

Эти теги одиночные, т.е. непарные, они не требуют тегов с косой

чертой.

<PRE> - установка равноширинного шрифта. В конце нужен тег </PRE>.

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

документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки

будут выведены большими буквыми, причем размер букв у тега <H1>

будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д.

Рассмотрим парные теги форматирования символов текста:

<B> - идентификатор полужирного шрифта.

<strong> - идентификатор выделенного шрифта.

<i> - идентификатор курсива.

<U> - идентификатор подчеркивания.

<s> - идентификатор перечеркивания.

<tt> - идентификатор равноширинного шрифта (телетайпного или

курьера).

<big> - задает увеличенный размер шрифта.

<small> - задает уменьшенный размер шрифта.

<CENTER> - задает центрирование текста.

<sub> - задает нижний индекс.

Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub>

<sup> - задает верхний индекс.

Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2

Просмотр примера с тегами форматирования текстового потока.

 

Рассмотрим теги форматирования абзацев:

<p align=left> - выравнивание текста в абзаце по левому краю.

<p align=right> - выравнивание текста в абзаце по правому краю.

<p align=center> - выравнивание текста в абзаце по центру.

<p align=justify> - полное выравнивание по обоим краям экрана.

align - атрибут выравнивания.

 

Рассмотрим теги списков.

Они являются способом наглядного отображения структурированной

информации.

Упорядоченные списки служат для отображения последовательных

операций или алгоритмов. Броузер автоматически генерирует номера

для каждого пункта в списке.

<OL> - идентификатор упорядоченного списка. В конце </OL>.

Неупорядоченные списки служат для составления перечней, когда

порядок следования пунктов несущественен. Перед каждым элементом

будет стоять специальный списочный значок (точка).

<UL> - идентификатор неупорядоченного списка. В конце </UL>.

Отдельные элементы в упорядоченном и неупорядоченном списках

помечают одиночным тегом <LI>, а элементы в списках определений

<DL> тегами <DT> для термина и <DD> для значения термина.

<LI> - идентификатор элемента в упорядоченном и неупорядоченном

списке. Конечный тег </LI> может быть опущен.

Списки определений обеспечивают специальное форматирование, как

в словарях, для терминов и связанных с ними описаний.

<DL> - идентификатор списка определений. В конце </DL>.

<DT> - идентификатор термина в списке определений.

<DD> - идентификатор значений термина в списке определений.

Списки определений имеют вид:

<DL>

<DT> название термина 1

<DD> определение термина 1

<DD> другое определение термина 1

.....

</DL>

 

Применение тегов списков изложено в Примерах 4 и 5.

 

Просмотр примера с тегами списков.

 

Некоторые важнейшие теги HTML

 

<BODY bgcolor="teal" text="aqua" link="red"> - задает цвет текста

(text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).

Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки.

<BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web-

странице в файле back.jpg.

<BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои)

взят из файла tartan.bmp, причем указан путь этого файла.

<font color="yellow" size=5> - задает цвет символов текста (атрибут

color) и их размер (атрибут size). В конце нужен тег </font>.

<hr color="lime"> - задает цвет горизонтальной линии.

<hr color="red" size=3 width=220 align=center> - атрибут size=N

задает толщину линии в пикселах; атрибут width=M задает длину линии

в пикселах; атрибут align=center (или left, или right) задает смеще-

ние линии (ее размещение в центре, или смещение влево, или вправо).

<IMG SRC="lycos.gif"> - вставка графического изображения в виде

файла lycos.gif. Есть и анимационные gif-файлы. Можно также ис-

пользовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.

Пример графического файла lycos.gif, вставленного в документ HTML:

 

Image Lycos Loading...

 

<IMG SRC="echomsk.gif" width="403" height="263"> - если при вставке

изображения использованы атрибуты width и height, то при загрузке

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

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

Таким образом резервируется место на экране под изображение.

Атрибут width задает ширину изображения в пикселах.

Атрибут height задает высоту изображения в пикселах.

<img src="/html/animat/iexplor.gif"> - вставка графического

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

графического файла на диске: с:\html\animat\iexplor.gif.

<img src="scene.jpg" border=3 alt="Картина"> - атрибут border

задает рамку по периметру изображения толщиной 3 пиксела. Атрибут

Alt дает текст на месте рамки, если изображения нет.

Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка.

Это необходимо, например, при использовании анимированных *.gif на прозрачной основе.

<img src="Flower.jpg" border=0 width="85" height="130" align="left" hspace=5 alt="Цветок">

Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом.

Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.

Атрибут align="left" обеспечивает размещение рисунка слева.

<a href="EXCITE.HTM">EXCITE.HTM</a> - гипертекстовая ссылка, пе-

реход к файлу EXCITE.HTM.

<a href="C:\book\book.inf">BOOK.INF</a> - гипертекстовая ссылка,

переход к файлу BOOK.INF. При запуске броузера следует указать про-

грамму для просмотра текстового файла BOOK.INF, например EDIT.COM.

При работе в Интернете, в отличие от локального компьютера, сле-

дует различать файлы с большими и с маленькими буквами в имени и

расширении. Должно быть полное соответствие между именами файлов

по размеру каждой буквы в имени и расширении, указанными в ги-

перссылке и лежащими на сервере, иначе гиперссылки не будут рабо-

тать. Для облегчения работы можно задавать цифровые имена файлов

(цифры всегда одного размера).

<a href="http://www.da.ru">http://www.da.ru</a> -

гипертекстовая ссылка, переход в Интернете к Web-странице.

Нажмите здесь: <a href="zinn.gif"><img src="globe.gif" border="3"></a> -

гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру

изображения zinn.gif.

<a href="mailto: int@mtu-net.ru">int@mtu-net.ru</a> - гиперссылка на

адрес электронной почты. При нажатии происходит вызов почтовой

программы и указанный адрес вводится в пункт Кому.

<EMBED SRC="Welcome.avi" Width=280 Height=140 autostart=true> - вставка

объекта в документ HTML. В данном случае это мультимедийный файл *.avi,

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

которого на экране заданы атрибутами Width и Height.

Если документ HTML большой, то внутри него делают переходы по

метке (U01):

<P><a href="#U01">Введение</a></P>

.........................................

<a name="U01">Введение</a>

 

Создание бегущей текстовой строки (только для Internet Explorer):

 

<marquee behavior="scroll" direction="right" loop="-1">

Интернет - это окно в мир!</marquee>

 

Если текстовая строка должна бежать влево, то вместо right должно

быть слово left. Можно создать бегущую текстовую строку еще проще

(то есть без атрибутов, и она будет бежать влево):

 

<marquee>Добро пожаловать в Интернет!</marquee>

 

Если текстовая строка должна бежать то влево, то вправо, то в теге

<marquee> используется атрибут behavior="alternate". Пример:

 

<h2><i><b><font color="green"><marquee behavior="alternate">

Как прекрасно жить на свете!</marquee></font></h2></i></b>

 

Цвет символов бегущей строки задается тегом <font color="">,

а цвет фона строки тегом <body bgcolor="">.

 

Просмотр примеров с бегущей строкой

 

Для воспроизведения звука (файл *.mid) после загрузки документа HTML

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

<bgsound src="/windows/canyon.mid" loop=1>

Можно также использовать файл формата *.wav. Число воспроизведений

музыки loop можно увеличить с 1 до n.

 

Список цветов символов HTML

(16 основных цветов)

 

aqua - бирюзовый; black - черный; blue - синий;

gray - серый; green - зеленый; lime - ярко-зеленый;

maroon - темно-красный; white - белый; navy - темно-синий;

olive - оливковый; purple - фиолетовый; red - красный;

silver - светло-серый; teal - ярко-голубой; yellow - желтый;

fuchsia - ярко-фиолетовый.

 

Кроме указанных основных цветов, есть дополнительные цвета:

brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,

pink - розовый и др. Всего до 216 цветов для Netscape Navigator.

Вместо указанных терминов для задания цвета можно использовать

RGB-коды, например: #FFFFFF -белый (white), #FF0000 -красный (red).

Меняя RGB-коды, можно подбирать желаемые цвета текста и фона.

 

Редактор Web-страниц HTMLPad

 

Image HTMLPad Loading...

Использование редактора HTMLPad значительно ускоряет и облегчает

процесс создания Web-страниц за счет использования кнопок в пане-

ли инструментов и меню. Например, кнопка New позволяет сразу соз-

дать бланк документа HTML, содержащий основные теги, кнопки H1-H6

создают теги форматирования заголовка, кнопки B, I, U, tt, PR за-

дают теги форматирования символов, кнопка BR - задает тег перево-

да строки, кнопка A^A задает тег цвета символов, пункт меню For-

mat, Center задает тег центрирования заголовка, Format, Paragraf

-конец абзаца, кнопка Tags содержит ряд полезных тегов, например

Adress, Sup, big. Коды цветов текста, фона и др. задаются кнопка-

ми с основными цветами. Кнопки и радиокнопки задаются в пункте

меню Insert, Submit Baton и Radio Baton. Тег BODY удобно редакти-

ровать с помощью пункта меню Insert, BODY. Теги списков вставля-

ются кнопками OL, UL, LI.

Таблицы создаются с помощью пункта меню Insert, Table, го-

ризонтальная линия с помощью пункта меню Insert, Horizontal Line

или с помощью кнопки и изображением семейства линий разной толщи-

ны. Есть стадартные для всех редакторов кнопки Save, Save As,

Open, Copy, Cut, Paste, Undo, облегчающие рутинные операции при

редактировании текста документа.

С помощью кнопок вставляются картинки (кнопка с изображением

фотоаппарата), создаются гиперссылки (адрес E-mail вставляется

кнопкой с изображением почтового конверта). Причем картинку можно

выбрать на диске с помощью кнопки обзора, но путь надо записывать

самому вручную. С помощью пункта меню Insert можно вставлять все

основные Формы, гиперссылку на адрес в Интернете, внедрять в до-

кумент Скрипты и Апплеты.

Для создания документа, содержащего Фреймы (окна с полосами

прокрутки), необходимо выбрать пункт меню Insert, Frameset. Затем

можно выбрать вертикальные (обозначаются cols) или горизонтальные

(обозначаются rows) фреймы Вы будете создавать. Затем указать в

процентах размеры окон. Затем после слов src="" указать в кавыч-

ках имена файлов HTML, которые будут показаны в окнах документа с

фреймами.

В примерах 8-10 приведены документы HTML, содержащие фреймы.

Файл документа сохраняется с расширением HTML (по умолчанию)

или HTM. Просмотр документа HTML производится в Internet Explorer

c помощью кнопки с иконкой этого броузера.

HTMLPad занимает на диске 1,3 Мб, работает в Windows-95/98.

Информация об HTMLPad содержится на сайте в Интернете:

http://www.intermania.com/htmlpad/

 

Создание таблиц в HTML

 

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег <table></table>.

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

помощью тега <p align="center">, размещаемого перед <table>.

Тег <table> может иметь атрибуты:

<table border="5" width="100" cellpadding="10" cellspacing="10">, где

border="5" - ширина боковой грани в пикселях. При нулевом зачении

рамка исчезает совсем.

width="100" - ширина таблицы в пикселях или

width="50%" -ширина таблицы в % по отношению к ширине страницы в окне.

cellspacing="10" - ширина фронтальной грани в пикселях.

cellpadding="10" - задает размер пустого пространства в пикселях,

окружающего данные в ячейке.

Тег <caption></caption> задает заголовок таблицы.

Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую

строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую

ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки задается в теге <td>: <td bgcolor="yellow">

Непарный тег <th> - задает элемент ячейки, которая является

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

Ячейка-заголовок отличается от обычной тем, что текст внутри нее

выделяется полужирным шрифтом.

Цвет фона заголовка задается: <tr><th bgcolor="yellow">Заголовок 1.

Создание таблиц в HTML дано в следующих примерах.

 

Пример 1.

 

<html>

<head>

<title>Таблица 1</title>

</head>

<body bgcolor="c0c0c0" text="navy" link="0000ff">

<p align="center"><table border="4" cellpadding="10" cellspacing="3">

<tr>

<td bgcolor="yellow"><b>Петров М.H.

</table>

</body>

</html>

 

Пример 2.

 

<html>

<head>

<title>Таблица 2, Экология.</title>

</head>

<body bgcolor="navy" text="red">

<center><table border="12" width="1" cellpadding="10" cellspacing="10">

<tr>

<td>Температура</td>

<td>Давление</td>

<td>Влажность</td>

<td>Скорость ветра</td>

<td>Направление ветра</td>

</tr>

<tr>

<td>21</td>

<td>745</td>

<td>65</td>

<td>4</td>

<td>юг</td>

</tr>

<tr>

<td>20</td>

<td>748</td>

<td>72</td>

<td>6</td>

<td>север</td>

</tr>

<tr>

<td>22</td>

<td>750</td>

<td>70</td>

<td>3</td>

<td>запад</td>

</tr>

</table></center>

</body>

</html>

 

Просмотр Примера 2 с таблицей

 

В Интернете есть сайты, размещающие домашние web-странички бесплатно,

например http://www.chat.ru/ (до 10 Мб), http://www.narod.ru/ (до 100 Мб),

http://www.boom.ru/ (до 50 Мб), http://victorian.fortunecity.com/ (до 100 Мб).

Для размещения страничек используют броузеры Internet Explorer 4.0-5.5, Netscape

Communicator 3.0 - 4.7, Opera 3.60-5.0, а также ftp-броузер CuteFTP.

Есть сайты, например http://www.da.ru/, http://www.jump.ru/, позволяющие бесплатно

получать удобные короткие адреса страниц.

 

Вопросы создания элементов диалога (кнопок и других) рассмотены в

Примере 6 и 7.

 

Рассмотрим примеры создания простейших Web-страниц.

 

Пример 1.

 

<HTML>

<HEAD>

<TITLE>Название документа</TITLE>

</HEAD>

<BODY bgcolor="teal" text="aqua">

Здесь расположен сам Web-документ.

<CENTER><H1><font color="yellow">Всем привет!</H1></CENTER></font>

</BODY>

</HTML>

 

Пример 2.

 

<HTML>

<HEAD>

<TITLE>Поисковые системы Internet.</TITLE>

</HEAD><BODY bgcolor="navy" text="yellow">

<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>

<hr color="aqua">

<font color="white">Ниже приведены некоторые популярные зарубеж-

ные поисковые системы и отечественная система Rambler. Для поиска

информации используется окно Search, в которое вводится ключевое

слово и нажимается кнопка Search.<br></font>

Просмотрите примеры:

<a href="altavist.HTM">ALTAVIST.HTM</a>,

<a href="EXCITE.HTM">EXCITE.HTM</a>,

<a href="YAHOO.HTM">YAHOO.HTM</a>!

<hr color="red">

1.<IMG SRC="altavist.gif">

2.<IMG SRC="yahoo.gif">

3.<IMG SRC="excite.gif">

4.<IMG SRC="lycos.gif"><P>

5.<IMG SRC="infoseek.gif">

6.<IMG SRC="rambler.gif"><hr color="lime">

<tt><big><U><font color="aqua">Используйте поисковые системы для

поиска информации в Интернете!</tt></big></U></font>

</BODY>

</HTML>

 

Пример 3.

<HTML>

<HEAD>

<TITLE>Эхо Москвы.</TITLE>

</HEAD>

<BODY bgcolor="purple" text="lime" link="yellow">

<CENTER><u><font color="yellow">24 часа в сутки!</u></font><br>

Информация на любые темы!

<font color="aqua">Частота на УКВ 73,82 МГц или 91,2 МГц FM.<p></font>

<IMG SRC="echomsk.gif" width="403" height="263"><p>

<i><big><font color="white">Слушайте Эхо Москвы!

Остальное видимость!<br></i></big></font>

Адрес в Интернете:

<a href="http://www.echo.msk.ru">http://www.echo.msk.ru</a></CENTER>

</BODY>

</HTML>

 

Пример 4.

<HTML>

<HEAD>

<TITLE>Упорядоченные и неупорядоченные списки</TITLE>

</HEAD>

<BODY BGCOLOR="navy" text="yellow">

<H3><U>Неупорядоченный список</H3></U>

<UL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</UL>

<HR color="lime">

<H3><U>Упорядоченный нумерованный список</H3></U>

<OL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</OL>

</BODY>

</HTML>

 

Пример 5.

 

<HTML>

<HEAD>

<TITLE>Списки определений</TITLE>

</HEAD>

<BODY BGCOLOR="purple" text="yellow">

<h3><u>Списки определений имеют вид:</h3></u>

<DL>

<DT>Название термина 1

<DD>Определение термина 1

<DD>Другое определение термина 1

<DT>Название термина 2

<DD>Определение термина 2

<DD>Другое определение термина 2

<DT>Название термина 3

<DD>Определение термина 3

<DD>Другое определение термина 3

</DL>

<HR color="lime">

<address>

Петров И.C., E-mail: petrov@mail.ru

</address>

</BODY>

</HTML>

 

Тег <address> используется для введения адреса электронной почты

E-mail.

 

Пример 6.

 

Элементы диалога (кнопки, области для ввода текста).

 

<HTML>

<HEAD>

<TITLE>Формы</TITLE></HEAD>

<BASE>

<BODY bgcolor="silver">

<FORM>

<CENTER><FONT size=6>Элементы диалога</font></center>

<HR color="blue">

<Н2>Элемент ISINDEX</h2>

<ISINDEX prompt="Cтpoкa для ввода критерия поиска">

<HR color="blue">

<Н2>Элементы INPUT</h2>

<H3> Ввод текстовой строки </h3>

<INPUT type="text" size=50>

<H3> Ввод пароля </h3>

<INPUT type="password">

<H3> Флажки </h3>

<INPUT type="checkbox" name="F001" checked>

<INPUT type="checkbox" name="F001" checked>

<H3> Переключатели </h3>

<INPUT type="radio" name="S001" vаluе="Первый">

<INPUT type="radio" name="S001" value="Второй">

<INPUT type="radio" name="S001" value="Третий" checked>

<H3> Кнопка подтверждения ввода </h3>

<INPUT type="submit" value="Подтверждение">

<H3> Кнопка с изображением </h3>

<INPUT type="image" src="lycos.gif">

<H3> Кнопка очистки формы </h3>

<INPUT type="reset" value="0чистка">

<H3> Файл </h3>

<INPUT type="file" name="photo" accept="image/*">

<HR color="blue">

<Н2>Элемент SELECT

<SELECT multiple>

<OPTION value=а>Первый

<OPTION value=Ь>Второй

<OPTION value=с>Третий

<OPTION value=d>Четвертый

</select></h2>

<HR color="blue">

<Н2>Элемент TEXTAREA

<TEXTAREA rows=5 cols=30>

Область для ввода текста

</textarea></h2>

<HR color="blue">

</FORM>

</BODY></HTML>

 

Просмотр Примера 6 с элементамт диалога.

 

Пример 7.

 

Скрипт.

 

Программа на языке JavaScript позволяет осуществлять запуск

любой программы или переход к любому файлу при нажатии кнопки.

Здесь mark1() - метка. Для разных кнопок и разных команд надо

указывать разные метки. В данном примере при нажатии кнопки

запускается калькулятор.

 

<input type="submit" value="Калькулятор" onClick="mark1()">

<script language="JavaScript">

<!--

function mark1(){

window.location.href="/windows/calc.exe";

}

//-->

</script>

 

Пример 8.

 

Три вертикальных фрейма.

 

<html>

<frameset cols="33%,33%,*" frameborder="2">

<frame name="one" src="1.htm" frameborder="2" scrolling="yes">

<frame name="two" src="2.htm" frameborder="2" scrolling="yes">

<frame name="three" src="3.htm" frameborder="2" scrolling="yes">

<noframes>

</noframes>

</frameset>

</html>

 

Пример 9.

 

Три горизонтальных фрейма.

 

<html>

<frameset rows="33%,33%,*" frameborder="2">

<frame name="one" src="1.htm" frameborder="2" scrolling="yes">

<frame name="two" src="2.htm" frameborder="2" scrolling="yes">

<frame name="three" src="3.htm" frameborder="2" scrolling="yes">

<noframes>

<!-- For browsers that don't support frames -->

</noframes>

</frameset>

</html>

 

Пример 10.

 

Два вертикальных и два горизонтальных фрейма.

 

<html>

<frameset cols="50%,*", rows="50%,*" frameborder="2">

<frame name="one" src="1.htm" frameborder="2" scrolling="yes">

<frame name="two" src="2.htm" frameborder="2" scrolling="yes">

<frame name="three" src="3.htm" frameborder="2" scrolling="yes">

<frame name="four" src="4.htm" frameborder="2" scrolling="yes">

<noframes>

</noframes>

</frameset>

</html>

 

Просмотр примера с фреймами

 

Вопросы

 

1. Что такое Web-страница и какие существуют способы ее создания?

2. Дайте определения следующим терминам языка HTML: тег, гипер-

ссылка, фрейм, скрипт, апплет.

3. Какова общая структура документа HTML?

4. Какие теги форматирования текстового потока и абзацев Вы знаете?

5. Что такое теги списков?

6. Как задать цвет текста, цвет фона, цвет гиперссылки?

7. Как вставить в документ HTML графическое изображение?

8. Как вставить в документ HTML фоновый рисунок?

9. Как вставить в документ HTML горизонтальную линию, прямоуголь-

ную рамку, бегущую строку? Как изменить их цвет и размеры?

10. Как создать гипертекстовую ссылку в виде текста или картинки

в документе HTML?

11. Что такое фреймы и элементы диалога и как их создать?

12. Как создать таблицы в документе HTML?

 

Задания

1. Создайте в редакторе Блокнот простейший документ HTML на осно-

ве приведенных выше примеров и просмотрите его в Web-броузере.

2. Вставьте в Web-страницу фоновый рисунок, графическое изображе-

ние, gif-анимацию, звуковой (mid или wav) файл, видеоклип (avi

или mpg), бегущую строку и просмотрите в Web-броузере.

3. Вставьте в документ HTML фреймы и ссылки на адрес в Интернете

и E-mail.

4. Создайте документ HTML, содержащий таблицы и элементы диалога.

5. Создайте документ HTML, содержащий упорядоченные и неупорядо-

ченные списки.

6. Создайте документы HTML, связанные между собой гипертекстовыми

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

Хостинг от uCoz


Возврат в начало учебника: Возврат
Хостинг от uCoz