Web-mastering: портал вебмастеров (web-мастеров) о web-дизайне, web-программировании, раскрутке; статьи по веб-дизайну, веб-программированию для вебмастеров

Кнопка портала
вебмастеров

Поговорим на HTMLе ?

Олег Горшунов
grimlocksoft@mail.ru

Много было сказано про HTML, но хочется сказать ещё больше. И не просто сказать, а показать. И не просто показать, а показать то что никто не показывал ранее . . .

. . . Ну может почти никто. Я же всё это как-то узнал? :) Ну ладно хватит воду лить пора создавать собственную HTML страничку!

Вот пример простейшей странички.

Откройте Блокнот и запишите туда следующее:

<HTML>

<HEAD>

<TITLE>Hello!</TITLE>

</HEAD>

<BODY>

. . .

</BODY>

</HTML>

и сохраните файл с расширением html. Кликните на созданном файле мышей. Этот код отобразит в заголовке броузера надпись Hello!, и выведет на экран три точки. Я не буду останавливаться на описании самого языка (лучше сами почитайте руководство: www.infoart.ru/it/helpdesk/html32.htm), а остановлюсь на приёмах его использования.

Весь последующий код нужно будет писать вместо 3 точек (. . .) .

Ссылки в пределах страницы.

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

<à name="your_point">

Где your_point имя вашей метки куда можно будет сослаться. А теперь напишите ссылку:

<a href="#your_point">click to jump</a>

Где your_point имя вашей метки. При клике на такую ссылку броузер отобразит то место страницы которое было помечено.

Кстати можно ссылаться на метку которая лежит за пределами данного файла:

<a href="file.htm#your_point">click to jump</a>

Где file.htm файл в котором находиться метка your_point. При клике на такую ссылку посетитель попадёт на страницу file.htm, и отобразится то место где стоит метка your_point.

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

Часто возникает потребность вернуть посетителя на предыдущую страницу, а как это сделать, если незнаем откуда он пришел? Пишите следующее:

<form>

<input type="button" value="Go back" onClick="history.go(-1)">

</form>

При нажатии на такую кнопку (с надписью Go back) можно вернуться на последнюю посещенную страницу.

Выпадающий список ссылок.

Вот вам нужно где-то разместить список ссылок для быстрого перемещения по сайту, а места подходящего уже не осталось. Что делать? Сделать выпадающий список ссылок. Вот так:

<form>

<select name="list">

<option selected value="grimlocksoft.euro.ru">My Home Page</option>

<option value="#your_point">Goto your_point</option>

</select>

<input type="button" value="Goto selected link!" onClick="top.location.href = this.form.list.options[this.form.list.selectedIndex].value">

</form>

Рассмотрим поподробнее. Итак, list это имя выпадающего списка ссылок, слово selected указывает на текущий выбор, в поле value находиться ссылка, а надписи My Home Page и Goto your_point будут пунктами в списке. My Home Page указывает на мою домашнюю страницу :), а Goto your_point на метку на странице. Надпись Goto selected link! отобразиться на кнопке которую нужно нажать чтоб перейти по выбранной ссылке.

Если вы измените имя выпадающего списка ссылок (list) не забудьте изменить это имя и в поле input.

Изменение цвета фона страницы.

Хорошо когда посетитель сам может выбрать цвет фона отображаемой страницы. И вы можете дать ему такую возможность!

Для этого пишем следующее:

<form>

<<input type="button" value="red" onClick="document.bgColor='ff0000'">

<input type="button" value="yellow" onClick="document.bgColor='ffff00'">

<input type="button" value="blue" onClick="document.bgColor='0000ff'">

</form>

В поле value находиться надпись отображаемая на кнопке, а ff0000, ffff00 и 0000ff цвет фона получаемый при нажатии. При просмотре такой страницы появятся три кнопки, при нажатии на которые будет изменяться цвет фона.

Отсылка сообщений через форму на e-mail.

Вот простой пример того как сделать вэб-форму отсылающую сообщения на e-mail:

<script language="JavaScript">

<!--

function validate_form() {

validity = true;

if (validity) alert ("\n This form will be send! \n");

return validity;

}

// -->

</script>

<form name="form" method="post"

action="mailto:adr@mail.ru"

enctype="text/plain" onSubmit="return validate_form()">

Your name:<input type="text" size=24 name="Name"><br>

Your e-mail:<input type="text" size=24 name="E-Mail"><br>

<TEXTAREA NAME="Message" ROWS=8 COLS=60 wrap=virtual></TEXTAREA><br>

<input type="submit" value="Send"><br>

Эта форма состоит из трёх полей (Name, E-Mail и Message) и кнопки "Send". Name и E-Mail одно-строковые текстовые поля с шириной 24 символа, содержащие имя и мыло отправителя. Message многострочное текстовые поля с размером 60х8, содержащее собственно само сообщение. "Send" обычная кнопка отправки формы, в данном случае на мыло по адресу adr@mail.ru (вместо этого адреса вам следует вписать ваш адрес, куда будет прислана форма). При клике на кнопку "Send" на экране появится предупреждение "This form will be send!", при подтверждении форма будет отослана.

Отправленная форма будет выглядеть приблизительно так:

Name=Мадам Брошкина

E-Mail=madam@broshkina.com

Message=такая и раз такая

Ну вот пока и всё. Рабочий пример всего выше изложенного можно найти по адресу: grimlocksoft.euro.ru/sample.htm . Если хотите узнать побольше о вэб дизайне заходите на сайт citforum.ru, там находиться большое количество технической документации по вэб технологиям.

Всего вам хорошего!

Источник: http://www.izcity.com/

[an error occurred while processing this directive]