Львовский М.Б.
Создание 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, или Opera (просмотрщик или броузер).
Язык HTML позволяет:
1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете;
2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
Существуют три основных способа создания Web-страниц (или документов HTML):
1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим.
Технология этого способа создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
3) Использование редактора Word-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:
<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-странице.
Пример: http://www.da.ru/
Нажмите здесь: <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> - гиперссылка на
адрес электронной почты. При нажатии происходит вызов почтовой
программы и указанный адрес вводится в пункт Кому. Пример: E-mail: int@mtu-net.ru
<EMBED SRC="Welcome.avi" Width=280 Height=140 autostart=true> - вставка
объекта в документ HTML. В данном случае это мультимедийный файл *.avi,
причем при загрузке страницы происходит автозапуск этого файла, размеры
которого на экране заданы атрибутами Width и Height.
Просмотр примера с видеофайлом avi
Если документ 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
в броузер Internet Explorer или Opera (т.е. в фоновом режиме), надо записать
следующую команду: <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
Использование редактора HTMLPad значительно ускоряет и облегчает процесс создания Web-страниц за счет использования кнопок в панели инструментов и меню. Например, кнопка New позволяет сразу создать бланк документа HTML, содержащий основные теги, кнопки H1-H6 создают теги форматирования заголовка, кнопки B, I, U, tt, PR задают теги форматирования символов, кнопка BR - задает тег перевода строки, кнопка A^A задает тег цвета символов, пункт меню Format, Center задает тег центрирования заголовка, Format, Paragraf - конец абзаца, кнопка Tags содержит ряд полезных тегов, например Adress, Sup, big. Коды цветов текста, фона и др. задаются кнопками с основными цветами. Кнопки и радиокнопки задаются в пункте меню Insert, Submit Baton и Radio Baton. Тег BODY удобно редактировать с помощью пункта меню Insert, BODY. Теги списков вставляются кнопками OL, UL, LI.
Кнопкой F7 можно вызвать Мастер выбора цветов текста и фона Color Finder.
Таблицы создаются с помощью пункта меню 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/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб),
http://www.boom.ru/ (до 50 Мб).
Для размещения страничек используют броузеры Internet Explorer 4.0-5.5, Netscape
Communicator 3.0 - 4.7, Opera 3.60-5.0, а также ftp-броузеры CuteFTP или LeechFTP.
Есть сайты, например http://www.da.ru/, позволяющие бесплатно
получать удобные короткие адреса страниц.
Вопросы создания элементов диалога (кнопок и других) рассмотены в
Примере 6 и 7.
Рассмотрим примеры создания простейших Web-страниц.
Пример 1.
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY bgcolor="teal" text="aqua">
Здесь расположен сам Web-документ.
<CENTER><H1><font color="yellow">Всем привет!</H1></CENTER></font><P>
<CENTER><font color="red" size=4>Здравствуй, мир!</CENTER></font>
</BODY>
</HTML>
Здесь атрибут size=4 задает размер шрифта.
Пример 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>
var container = document.getElementById('nativeroll_video_cont'); if (container) { var parent = container.parentElement; if (parent) { const wrapper = document.createElement('div'); wrapper.classList.add('js-teasers-wrapper'); parent.insertBefore(wrapper, container.nextSibling); } }
Создание 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, или Opera (просмотрщик или броузер).
Язык HTML позволяет:
1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете;
2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
Существуют три основных способа создания Web-страниц (или документов HTML):
1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим.
Технология этого способа создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
3) Использование редактора Word-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:
<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-странице.
Пример: http://www.da.ru/
Нажмите здесь: <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> - гиперссылка на
адрес электронной почты. При нажатии происходит вызов почтовой
программы и указанный адрес вводится в пункт Кому. Пример: E-mail: int@mtu-net.ru
<EMBED SRC="Welcome.avi" Width=280 Height=140 autostart=true> - вставка
объекта в документ HTML. В данном случае это мультимедийный файл *.avi,
причем при загрузке страницы происходит автозапуск этого файла, размеры
которого на экране заданы атрибутами Width и Height.
Просмотр примера с видеофайлом avi
Если документ 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
в броузер Internet Explorer или Opera (т.е. в фоновом режиме), надо записать
следующую команду: <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
Использование редактора HTMLPad значительно ускоряет и облегчает процесс создания Web-страниц за счет использования кнопок в панели инструментов и меню. Например, кнопка New позволяет сразу создать бланк документа HTML, содержащий основные теги, кнопки H1-H6 создают теги форматирования заголовка, кнопки B, I, U, tt, PR задают теги форматирования символов, кнопка BR - задает тег перевода строки, кнопка A^A задает тег цвета символов, пункт меню Format, Center задает тег центрирования заголовка, Format, Paragraf - конец абзаца, кнопка Tags содержит ряд полезных тегов, например Adress, Sup, big. Коды цветов текста, фона и др. задаются кнопками с основными цветами. Кнопки и радиокнопки задаются в пункте меню Insert, Submit Baton и Radio Baton. Тег BODY удобно редактировать с помощью пункта меню Insert, BODY. Теги списков вставляются кнопками OL, UL, LI.
Кнопкой F7 можно вызвать Мастер выбора цветов текста и фона Color Finder.
Таблицы создаются с помощью пункта меню 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/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб),
http://www.boom.ru/ (до 50 Мб).
Для размещения страничек используют броузеры Internet Explorer 4.0-5.5, Netscape
Communicator 3.0 - 4.7, Opera 3.60-5.0, а также ftp-броузеры CuteFTP или LeechFTP.
Есть сайты, например http://www.da.ru/, позволяющие бесплатно
получать удобные короткие адреса страниц.
Вопросы создания элементов диалога (кнопок и других) рассмотены в
Примере 6 и 7.
Рассмотрим примеры создания простейших Web-страниц.
Пример 1.
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY bgcolor="teal" text="aqua">
Здесь расположен сам Web-документ.
<CENTER><H1><font color="yellow">Всем привет!</H1></CENTER></font><P>
<CENTER><font color="red" size=4>Здравствуй, мир!</CENTER></font>
</BODY>
</HTML>
Здесь атрибут size=4 задает размер шрифта.
Пример 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>
var container = document.getElementById('nativeroll_video_cont'); if (container) { var parent = container.parentElement; if (parent) { const wrapper = document.createElement('div'); wrapper.classList.add('js-teasers-wrapper'); parent.insertBefore(wrapper, container.nextSibling); } }
