- 20.09.2015
- 2091
- 5
П. А. Гресько
Основы работы на языке программирования HTML
Курс лекций
Для студентов колледжей экономических специальностей
Симферополь 2006
Содержание
|
Начало работы в HTML |
|
|
Структура HTML документа |
|
|
Форматирование текста |
|
|
Кодирование символов |
|
|
Кодирование цветов |
|
|
Задание фона страницы |
|
|
Разделительные линии |
|
|
Бегущая строка |
|
|
Создание ссылок |
|
|
Добавление рисунка |
|
|
Маркированный список |
|
|
Создание таблиц |
|
|
Фреймы |
|
|
Стили |
|
|
Позиционный текст |
|
|
Стили 3d- эффект |
|
|
Статические фильтры |
|
Всплывающие подсказки |
|
Переключатели и флажки |
|
Ниспадающее меню |
|
Окна сообщений |
|
В настоящее время Internet занимает одно из первых мест в сфере информационных услуг. Многие люди уже не идут за информацией в библиотеки и книжные магазины, а пользуются услугами Internet-кафе. Океан свежей и разнообразной информации представлено на серверах расположенных во всех странах мира. Это и научные работы, и брачные объявления, прогноз погоды и свежие новости, всемирный чат и онлайновые игры. Каждый найдет себе информацию, отвечающую даже самому требовательному посетителю сети. И почти у каждого пользователя Internet-а возникает желание поделиться со всеми той информацией, которой он обладает. Самый простой способ это чат - страница, где пользователи общаются в реальном времени. Но невозможно постоянно находиться в ON-LINE и чат ограничивает число пользователей, поэтому напрашивается вопрос, а почему бы самому не сделать свой сайт и разместить в нем все, что хочется донести до широких масс. Размещение небольшого сайта на сервере провайдера бесплатно, а написание не требует профессиональных навыков в программировании. Целью данной работы не было создание серьезного учебного пособия по языку HTML, а всего лишь попытка доступным образом осветить основы написания простых страничек начинающими Web-дизайнерами. Единственное условие, это то, что требуется запомнить большое количество команд, хотя при желании их можно записать в отдельный файл и пользоваться им как справочником.
Для того чтобы начать создание простых и не очень Web-страниц необходимо установить на Вашем компьютере Броузер Internet Explorer или Netscape Navigator. Если это условие выполнено, то можно смело приступать к работе.
Прежде всего, необходимо научиться создавать HTML Document. Для этого достаточно одного правого клика мышки внутри папки, в которой Вы будете работать. В контекстном меню выберите Создать- Microsoft HTML Document. После этого произведется загрузка Броузера, в котором Вы увидите чистый лист нового HTML Document. Правым кликом в поле броузера вызовите контекстное меню и выберите просмотр в виде HTML. После этого откроется окно блокнота, в котором Вам и предстоит создавать сайты и Web-документы.
При более глубоком знании языка HTML Вы можете работать в любом текстовом редакторе как в DOS-овском, так и в ОС Windows. Только в данном случае документы нужно будет сохранять с расширением *.htm (в DOS) *.html (в WINDOWS)
Вы можете посмотреть листинг любой страницы правым кликом в поле броузера просмотр в виде HTML и прочитать источник документа
Любой HTML-документ состоит из команд и авторского текста
Тэг-команда языка HTML.
Тэгов очень много и довольно трудно все запомнить, поэтому в данном учебнике будут приведены примеры большинства тэгов и их использование при работе с HTML
Самая простая страничка состоит из трех тэгов. Начнем их изучение
<HTML> </HTML> начальный и конечный тэги документа на языке HTML. Только при их наличии Броузер начинает загрузку документа
Замечание: некоторые тэги парные (контейнерные), как, например <HTML> </HTML>. При этом первый из них называется открывающим, а второй – закрывающим.
<body> </body> начальный и конечный тэги "тела" документа. Между ними пишется авторский текст и другие тэги.
<Title> </Title> начальный и конечный тэги заголовка Web-страницы, помещающийся в заголовке окна броузера. (в принципе он необязателен)
Ниже приведен листинг простейшей страницы
Пример:
<HTML>
<Title> Заголовок </Title>
<body>
"авторский текст"
</body>
</HTML>
Для форматирования текста служат следующие тэги. Текст, который Вы хотите отформатировать должен находиться между тэгами, изменяющими текст. Т.е <тэг> текст </тэг>
<b> </b>- полужирный
<i> </i>- наклонный
<u> </u>- подчеркнутый
<s> </s>- зачеркнутый
<sub> </sub>- нижний индекс
<sup> </sup>- верхний индекс
<br>- переход на другую строку
<p> </p>- начало и конец абзаца
Кроме этого можно оперировать тэгами заголовков
<h1> </h1>- заголовок 1-го уровня
<h2> </h2>- заголовок 2-го уровня
<h3> </h3>- заголовок 3-го уровня
<h4> </h4>- заголовок 4-го уровня
<h5> </h5>- заголовок 5-го уровня
<h6> </h6>- заголовок 6-го уровня
И, наконец, можно вручную задавать параметры текста при помощи тэга
<font> </font>- определяет тип, размер и цвет шрифта параметры задаются с помощью атрибутов
size="абсолютный размер шрифта" (от 1 до 7) face="имя шрифта" (например Arial, Tahoma)
Категории шрифтов Гарнитуры
* Serif - Times, Century Schoolbook, Garamond* Sans-serif - Helvetica, Arial, Verdana* Monospaced - Courier, Courier New* Script - Nuptial script, Buolevard, Signature* Decorative - Whimsy, Arriba!, Bergell
color="цвет" (например red, blue подробнее о цветах в "Кодировании цветов")
Пример:
<HTML>
<Title> Форматирование текста </Title>
<body>
<h1> заголовок 1-го уровня </h1>
<h2> заголовок 2-го уровня </h2>
<h3> заголовок 3-го уровня </h3>
<h4> заголовок 4-го уровня </h4>
<h5> заголовок 5-го уровня </h5>
<h6> заголовок 6-го уровня </h6>
"авторский текст"
<b> полужирный </b>
<i> курсив </i>
<u> подчеркнутый </u>
<b> <i> <u> полужирный подчеркнутый курсив </u> </i> </b>
<s> зачеркнутый </s>
Х<sub> нижний индекс </sub>
Х<sup> верхний индекс </sup>
< font face="arial" size=5 color="red" > шрифт №5 arial красного цвета </font>
< font face="tahoma" size=7 color="gold" > шрифт №7 tahoma золотого цвета </font>
</body>
</HTML>
Здесь приведена иллюстрация того, что появиться на вашем экране
"авторский текст"
полужирный
курсив
подчеркнутый
полужирный подчеркнутый курсив
зачеркнутый
Х нижний индекс
Х верхний индекс
шрифт №5 arial красного цвета
шрифт №7 tahoma золотого цвета
С проблемой кодирования символов впервые столкнулся при написании данной книжки. В самом деле, некоторые символы воспринимаются броузером как элементы тэгов или их атрибутов. С данной проблемой справляются несколько громоздким, но все - таки единственным способом.
Замечание: перед числовым кодом добавляется комбинация символов &#.
А перед мнемоническим символ &
Пример:
© - дает символ ©
® - дает символ ®
Ниже приведена таблица кодирования символов.
|
Использование цифровых и мнемонических кодов спецсимволов. |
|||
|
числовой код |
мнемонический код |
название |
символ |
|
34 |
quot |
прямая кавычка |
" |
|
38 |
amp |
амперсант |
& |
|
60 |
lt |
знак "меньше" |
< |
|
62 |
dt |
знак "больше" |
> |
|
153 |
trade |
торговая марка |
™ |
|
160 |
nbsp |
неразрывный пробел |
|
|
162 |
cent |
цент |
¢ |
|
163 |
pound |
фунт |
£ |
|
164 |
curren |
знак валюты |
¤ |
|
165 |
yen |
йена |
¥ |
|
166 |
brvbar |
вертикальная черта |
¦ |
|
167 |
sect |
параграф |
§ |
|
169 |
copy |
копирайт |
© |
|
171 |
laquo |
левая типографская кавычка |
« |
|
172 |
not |
знак отрицания |
¬ |
|
174 |
reg |
знак "зарегистрировано" |
® |
|
176 |
deg |
знак градуса |
° |
|
177 |
plusmn |
знак "плюс минус" |
± |
|
178 |
sup2 |
степень 2 |
² |
|
179 |
sup3 |
степень 3 |
³ |
|
181 |
micro |
знак "микро" |
µ |
|
182 |
para |
знак абзаца |
¶ |
|
183 |
middot |
точка-маркер |
· |
|
185 |
sup1 |
степень 1 |
¹ |
|
187 |
raquo |
правая типографская кавычка |
» |
|
188 |
frac14 |
одна четвертая |
¼ |
|
189 |
frac12 |
одна вторая |
½ |
|
215 |
times |
знак умножения |
× |
|
247 |
divide |
знак деления |
÷ |
Кодирование цветов
Цвета в HTML задаются с помощью атрибута color="имя или код цвета"
Имена и коды основных цветов будут представлены ниже
|
таблица кодирование цветов |
|||
|
русское название |
английское название |
RGB-код |
цвет |
|
аквамарин |
aqua |
#00FFFF |
|
|
белый |
white |
#FFFFFF |
|
|
желтый |
yellow |
#FFFF00 |
|
|
зеленый |
green |
#008000 |
|
|
золотой |
gold |
#FFD700 |
|
|
индиго |
indigo |
#4B0080 |
|
|
каштановый |
maroon |
#800000 |
|
|
красный |
red |
#FF0000 |
|
|
оливковый |
olive |
#808000 |
|
|
оранжевый |
orange |
#FFA500 |
|
|
пурпурный |
purple |
#800080 |
|
|
светло-зеленый |
lime |
#00FF00 |
|
|
серебристый |
silver |
#C0C0C0 |
|
|
серый |
gray |
#808080 |
|
|
сизый |
teal |
#008080 |
|
|
синий |
blue |
#0000FF |
|
|
ультрамарин |
navy |
#000080 |
|
|
фиолетовый |
violet |
#EE80EE |
|
|
фуксиновый |
fuchsia |
#FF00FF |
|
|
черный |
black |
#000000 |
|
Для оформления страницы просто необходимо уметь пользоваться данной командой. Для этого достаточно в тэге <body> добавить bgcolor="имя цвета" Если же в качестве фона задается рисунок, то используется команда background="имя файла"
Пример:
<body bgcolor="teal">
<body background=1.jpg> команда первой страницы, где 1.jpg- графический файл, расположенный в том же каталоге, что и Ваш HTML-документ. Если файл находиться в другом месте, то необходимо задать путь к файлу (C:\My pic\1.jpg)
Разделительные линии один из самых простых в использовании графических объектов
<hr> </hr> - тэг разделительной линии
Как и другие объекты HTML задаются атрибутами
size -толщина в пикселях
width -ширина в пикселях
color -цвет линии
align -способ выравнивания
center, right или left
Пример:
<hr> </hr> Это просто линия без атрибутов
<hr size=5 > </hr> Это линия толщиной 5
<hr size=10 width=100 color="yellow"> </hr> Это линия толщиной 10 и шириной 100 желтого цвета
Это просто линия без атрибутов
Это линия толщиной 5
Это линия толщиной 10 и шириной 100 желтого цвета
Бегущая строка
Бегущая строка - часто употребляемый в HTML элемент, который может привлечь внимание посетителя страницы
<marquee> </marquee> -тэг бегущей строки
как и другие тэги обладает атрибутами
width -ширина поля бегущей строки в пикселях
heugth -высота поля бегущей строки в пикселях
hspace, vspace -интервалы по горизонтали и вертикали между текстом бегущей строки и ее полем
align -положение текста бегущей строки или выравнивание (принимает значения top -вверху bottom -внизу middle -посередине)
direction -направление движения бегущей строки (принимает значения left -слева направо right -справа налево)
behavior -характер движения (принимает значения: scroll -появляется с одного края и скрывается за другим, slide -вытягивается из одного края и останавливается у другого, alternate -переменное движение от одного края к другому)
loop -количество повторений ( infinity -бесконечность)
scrollamount -длина прыжка текста за один такт
scrolldelay -величина паузы между тактами перемещения (в мс)
bgcolor -цвет поля бегущей строки
Пример:
<marquee height=50 weight=75% hspace=5 vspace=5 align=top behavior=scroll scrollamount=5 scrolldelay=100 bgcolor="teal"> </marquee>
Внимание: тэги font и marquee -парные и должны быть закрыты аналогичными с символом.
Ссылки на другие документы позволяют перемещаться по файловой системе переходить к другим документам и графическим объектам, кроме этого запускать программы, и наконец перемещаться по сайтам WWW посредством гиперссылок
<a href=...> </b>- тэг ссылки на другие файлы и документы. Здесь необходимо указать имя файла на который идет ссылка. При зтом текст ссылки будет выделен и подчеркнут. Цвет ссылки задается своими атрибутами
linc="цвет_ссылки" -задает цвет ссылки
vlinc="цвет_ссылки" -задает цвет ссылки после её посещения
Пример:
<a rel="nofollow ugc" target="_blank" href="site.html"> -ссылка на первую страницу </a>
-ссылка на первую страницу
<a rel="nofollow ugc" target="_blank" href="1.jpg"> -ссылка на рисунок </a>
-ссылка на рисунок
Кроме этого можно делать графические ссылки
Пример:
<a rel="nofollow ugc" target="_blank" href="site.html"> <img src="1.jpg"> </a> - графическая ссылка на первую страницу
-
графическая ссылка на первую страницу
Можно делать графические ссылки без рамки
Пример:
<a rel="nofollow ugc" target="_blank" href="site.html"> <img src="1.gif" border="0"> </a> - графическая ссылка на первую страницу без рамки
-
графическая ссылка на первую страницу без рамки
Добавление рисунка
Добавление в HTML- документ рисунка используется во многих сайтах и на сегодняшний день трудно представить себе Web- страницу без графических объектов. При добавлении графики в страницу не забудьте о том, что графические файлы гораздо больше по размерам , чем графические. Поэтому старайтесь выбирать файлы небольшие по размеру (лучше всего использовать файлы с расширениями gif или jpg). О том, как работать с графикой мы рассмотрим несколько позже.
<img src="имя_файла"> - тэг вставляющий в документ графический файл. Файл, содержащий рисунок должен находиться в том же каталоге, что и Ваш HTML- документ
Пример:
<img src="2.gif"> -Вставляет в документ файл 2.gif
Тэг img может иметь атрибуты устанавливающие размеры рисунка
WIDTH -задает ширину рисунка
HEIGHT -задает высоту рисунка и его выравнивание относительно страницы броузера
align- принимает значения
left- по левому краю
right- по правому краю
center- по центру
Пример:
<img src="2.gif" WIDTH=120 HEIGHT=150 align=center> -Вставляет в документ файл 2.gif с размерами 120Х150 пикселей выровненный по центру
Ниже приведен пример совместного использования текста и графики Данный текст обтекает рисунок справа и оба объекта не конфликтуют друг с другом. Данная операция осуществляется командой:
<img src="2.gif" WIDTH=120 HEIGHT=150 align="left">
Маркированный список
Списки используются в документах для получения более удобочитаемой формы текста. Существует несколько разновидностей списков
<ul> <li> </ul>- ненумерованный список
Пример:
<ul>
<li> пункт 1
<li> пункт 2
<li> пункт 3
</ul>
на экране получим
· пункт 1
· пункт 2
· пункт 3
Можно изменить форму маркера следующим тэгом
<li type="тип_маркера">
Типы маркеров
disc –диск
circle –окружность
square –квадрат
<li type="disc"> -диск
<li type="circle"> -окружность
<li type="square"> -квадрат
· диск
· окружность
· квадрат
<ol> <li> </ol>- нумерованный список
Структура нумерованного списка похожа на предыдущую
Пример:
<ol type="I">
<li> пункт 1
<li> пункт 2
<li> пункт 3
</ol>
на экране получим
I. пункт 1
II.пункт 2
III. пункт 3
атрибут type принимает значения
|
Значения атрибута Type |
|
|
атрибут |
вид нумерации |
|
type="1" |
1, 2, 3, 4... |
|
type="i" |
i, ii, iii, iv... |
|
type="I" |
I, II, III, IV... |
|
type="a" |
a, b, c, d... |
|
type="A" |
A, B, C, D... |
<dl> <dt> <dd> </dl>- многоуровневый список
Пример:
<dl>
<dt> пункт 1
<dd> пункт 1.1
<dt> пункт 2
<dd> пункт 2.1
<dd> пункт 2.2
<dt> пункт 3
</dl>
на экране получим
пункт 1
пункт 1.1
пункт 1.2
пункт 2
пункт 2.1
пункт 2.2
пункт 2.3
пункт 3
Таблицы наиболее удобная форма представления информации, которая позволяет наглядно разместить массивы данных и дает возможность дальнейшей их обработки
<table> </table> -тэги описания таблицы
border -атрибут таблицы, задаюший толщину границы
<caption> </caption> -тэги названия таблицы
align -атрибут выравнивания названия границы
<th> </th> -тэги заголовков столбцов таблицы
<tr> </tr> -тэги строк таблицы
<td> </td> -тэги столбцов таблицы
Пример:
<table border=5>
<caption align=top> меню на 1.01.02 </caption>
<tr bgcolor="aqua"> <th> наименование </th> <th> выход </th> <th> цена </th> </tr>
<tr> <th> суп - харчо </th> <th> 300г </th> <th> 2-80 </th> </tr>
<tr> <th> пельмени </th> <th> 250г </th> <th> 2-10 </th> </tr>
<tr> <th> салат овощной </th> <th> 150г </th> <th> 0-50 </th> </tr>
<tr> <th> чай </th> <th> 200г </th> <th> 0-25 </th> </tr>
</table>
Фрейм- раздел или окно размещенное в окне броузера. В каждом фрейме отображается свой HTML- документ. Иными словами, окно можно разбить на несколько разделов, которые называются Фреймами.
При использовании фреймов используется несколько HTML- файлов. Один из них называется Установочным. В нем описывается расположение (раскладка) фреймов в окне броузера и назначаются исходные HTML- файлы для каждого из фреймов, но нет собственного текста и графики. Исходные HTML- файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.
Установочный HTML- файл, как и любой другой начинается с тэга <html> и заканчивается тэгом </html>
<frameset> </frameset>- Тэг разделения окна на несколько фреймов. Задается атрибутами
cols- задает разделение на два вертикальных фрейма (в %)
rows- задает разделение на два горизонтальных фрейма (в %)
border="ширина_полосы" - определяет ширину разделительной полосы в пикселях
bordercolor="цвет_полосы" - определяет цвет разделительной полосы
marginheight="высота верхнего отступа" - добавляет пустое поле между верхней границей фрейма и началом текста или графики (в пикселях)
marginwidht="ширина боковых отступов" - добавляет пустое поле между боковыми границами фреймов и началом текста или графики (в пикселях)
scrolling - определяет будут ли присутствовать о окне фрейма полосы прокрутки; если прокрутка нужна задается аргумент YES, иначе NO.
noresize - запрещает пользователю изменять размеры окна
Пример:
<HTML>
<frameset cols="30%,*"> <frame src="1.html" name="left" scrolling=no border=10>
<frame src="2.html" name="right">
</frameset>
<noframe>
<body>
тело фрейма
</body>
</noframe>
</html>
Данный документ представляет собой установочный HTML - файл. Теперь нужно создать два исходных HTML - файла.
Первый файл - 1.html
<HTML>
<title>1</title>
<body bgcolor="#lime">
<hi>Первый фрейм</h3><hr>
В данном элементе обычно находится содержание или список доступных элементов
<li> Глава 1
<li> Глава 2
<li> Глава 3
<li> Глава 4
<li> Глава 5
<li> Глава 6
<li> Глава 7
</body>
</HTML>
Второй файл - 2.html
<HTML>
<title>2</title>
<body bgcolor="#lime">
<hi>Второй фрейм</h3><hr>
В данном элементе обычно находится основной текст страницы
</body>
</HTML>
Пример страницы с фреймами
Данный элемент позволяет создавать текст с различным начертанием (стилем), и затем в ходе выполнения программы задавать созданный стиль различным элементам текста
<style> </style>- тэг стилей. Вставляется поcле тэга HEAD
Применение тэга STYLE
<head>
<style>
тэг {свойство1:значение1;свойство2:значение2;...свойствоN:значениеN;}
</style>
<head>
Пример:
<head>
<style>
h1 {font-size :48pt; color:red}
h2 {font-size :20pt; color:blue}
<style>
</head>
<body>
<h1> Это стиль 1 красного цвета </h1> ( см. Заголовок №1)
<h2> Это стиль 2 синего цвета </h2> ( см. Заголовок №2)
</body>
</html>
Кроме этого мы можем создавать стили самостоятельно, составляя библиотеку стилей и затем по мере надобности вызывать необходимый нам в данный момент стиль. При этом за стилем необходимо закрепить имя. Это имя задается как обычное имя, но сточкой в качестве первого символа.
<class> </class>- тэг обращения к стилю.
Пример:
<head>
<style>
.mystyle {font-size :32pt; color:gold; font-family:tahoma}
</style>
</head>
<body>
<h2 class=mystyle> мой стиль <h2>
</body>
Применение тэга STYLE при создении 3d- эффекта
Листинг стиля 3d- Эффект
<head>
<style>
p {font-family: "sans-serif";font-size:96pt;color:red}
p.highlight {color:silver}
p.shadow {color:black}
</style>
</head>
<div style="position:absolute; top:125; left:105;
wight:1000; height:200; marigin:top:20">
<p class=shadow>3d- эффект</p>
</div>
<div style="position:absolute; top:120; left:100;
wight:1000; height:200; marigin:top:20">
<p class=highlight>3d- эффект</p>
</div>
<div style ="position:absolute; top:122; left:102;
wight:1000; height:200; marigin:top:20">
<p>3d- эффект</p> </div>
Фильтры используются для изменения внешнего вида графики и текста на странице. С помощью фильтров можно отражать тексты и графику. Фильтры задаются как свойство в табдице стилей используя запись вида
filter: имя_фильтра
перечислим несколько видов фильтров
· blur- создает эффект размытости
· fliph- горизонтальное отражение картинки или текста
· flipv- вертикальное отражение картинки или текста
· wave- эффект волны
· xray- только контур объекта
Для размещения текста в произвольном месте экрана используют "Позиционный текст". Кстати это применимо и к графическим объектам, но об этом позже. Для позиционирования элементов необходимо внутри тэг Задать требуемый стиль. Например
p {font-family: "sans-serif";font-size:32pt;color:red} Затем в теле вызовем этот стиль с параметрами
<div style="position:absolute; top:270; left:300;
wight:1000; height:200; marigin:top:20">
<p>Учебник HTML </p>
</div>
Где:
position:absolute - указание на позиционный текст. Элемент помещается в верхний левый угол окна
top:270 - отступ от верхней границы окна
left:300 - отступ от левой границы окна
wight:1000 - ширина текста
height:200 - высота текста
marigin:top:20 - отступ от верхней границы
Для ввода элемента "Всплывающая подсказка" пользуются атрибутом Title (не путать с заголовком окна). Этот атрибут вставляют перед текстом, которому требуется подсказка или внутри тэга добавления рисунка
Пример:
<HTML>
<title>Всплывающие подсказки</title>
<body bgcolor="teal">
<h3>Всплывающие подсказки</h3>
<img src="1.gif" title="Это мой компьютер"> -Рисунок снабжен подсказкой <h4 align=center>
Этот текст снабжен подсказкой
<b title="подсказка к этому тексту"><font color="red"> текст </b></h4></font> </center>
</body>
</HTML>
-Рисунок снабжен подсказкой
<HTML>
<title>Страница с переключателями и флажками</title>
<body bgcolor="teal">
<h3>Страница с переключателями и флажками</h3>
<ul>
<input type="radio" name="click" value="Переключатель №1" checked> Переключатель №1
<input type="radio" name="click" value="Переключатель №2" >Переключатель №2
<input type="radio" name="click" value="Переключатель №3" >Переключатель №3
Переключатель №1
Переключатель №2
Переключатель №3
<input type="checkbox" name="flag1" value="Флажок №1" >Флажок №1
<input type="checkbox" name="flag2" value="Флажок №2" >Флажок №2
<input type="checkbox" name="flag3" value="Флажок №3" >Флажок №3
</ul>
Флажок №1
Флажок №2
Флажок №3
Ниспадающее меню - элемент HTML-документа позволяющий осуществлять переход к другому документу без помощи ссылок. Этот тэг позволяет экономить место в окне броузера вставляя в нужное место страницы компактный и удобный в обращении элемент
Для добавления этого элемента используется тэг
FORM который с помощью тэгов SELECT и OPTION выделяет и осуществляет переход к выбранной странице. Страница- это отдельный HTML файл
Пример
< FORM >
< FONT size=1 style="COLOR: #1a1a1a; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px" >
< SELECT name=map onchange="if (this.options[this.selectedIndex].value == '') this.selectedIndex=0; else window.open(this.options[this.selectedIndex].value,'_top')" size=1 >
< OPTION selected value="" > Выберите страницу!
< /OPTION >
< OPTION value=23_1.html > page1
< /OPTION >
< OPTION value=23_2.html > page2
< /OPTION >
< OPTION value=23_3.html > page3
< /OPTION >
< OPTION value=23_4.html > page4
< /OPTION >
< OPTION value=23_5.html > page5
< /OPTION >
< OPTION value=23_6.html > page6
< /OPTION >
< /SELECT >
< /FONT >
< /FORM >
Данная программа выводит на экран окно с ниспадающим меню содержащим ряд пунктов. При выборе одного из пунктов открывается соответствующая страница
Для создания окон сообщений используются скрипты написанные на языке программирования javascript. Для зтого необходимо в тэге head сделать запись
<script language="javascript">
Данная запись открывает возможность оперировать тремя видами окон:
· alert- сигнальное окно alert("текст_в_окне")
alert ("Пример окна сообщения")
· confirm- окно с кнопками OK и Cansel confirm("текст_в_окне")
confirm ("Вы хотите закончить работу")
· prompt- окно сообщения с текстовым полем prompt("текст_в_окне", "") prompt ("Введите ваше имя","")
После объявления окон необходимо закрыть </script>
Примеры окон представлены при загрузке данной страницы
Рабочие листы
к вашим урокам
Скачать
6 664 934 материала в базе
Настоящий материал опубликован пользователем Гресько Павел Александрович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
6 ч.
Мини-курс
6 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.