Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)

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

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

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

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

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

Есть сайты, например 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><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>

<HR color="blue">

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

<TEXTAREA rows=5 cols=30>

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

</textarea></h2>

<HR color="blue">

</FORM>

</BODY></HTML>

 

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

Элементы диалога


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


<Н2>Элементы INPUT
Ввод текстовой строки

Ввод пароля

Флажки

Переключатели

Кнопка подтверждения ввода

Кнопка с изображением

Кнопка очистки формы

Файл


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


<Н2>Элемент TEXTAREA Область для ввода текста

 

Пример 7.

 

Скрипт.

 

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

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

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

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

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

 

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

<script language="JavaScript">

<!--

function mark1(){

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

}

//-->

</script>

В данном примере при нажатии кнопки просматривается картинка lycos.gif (для Internet Explorer).


 

Пример 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>

Другие записи

10.06.2016. Введение. Основные способы создания Web-страниц. Основные понятия языка HTML.
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина,…