| Глава #4 |

Привет, мда, подзодержался я что-то. Давайте не будем вспоминать когда была последняя рассылка. Главная что она не закрылась. И так сегодня: Структура папок и файлов или чтобы не запутаться, Формы и Фрэймы.

Структура папок и файлов или чтобы не запутаться

Что такое структура папок, структура сайта, это разделы разделеные, на папки. Я не помню, говорил ли я вам, но лучше, чтобы картинки были в одной папке, страницы в другой и что-то другое в третьей и т.д. Правильная структура сайта (если так можно сказать), даёт такие плюсы как:

Как правильно

Правило 1 - структура не делаеться походу создания, она делаеться заранее
Правило 2 - название папок должно быть коротким, но таким чтобы было понятно что там. Например: "img", "html", "css".
Правило 3 - лучше начертить структуру на листочке ручкой, уточнить все нюансы и только после этого создавать такую структуру папок на сервере. Это сэкономит вам нервы и время. И не выкидывайте листочек, он вам пригодиться.

И так зачем нужна структура папок надеюсь вы поняли, теперь объясню другой нюанс в HTML.

Вот представьте такую структуру сайта.
Примечание: название с заглавными буквами это папки. INDEX - это самая главная папка, на сервере она называеться WWW.

INDEX
 __|___
/        \
IMG     INDEX2 
|          |
picture.gif      doc.html

И так, вроде всё понятно, в папке INDEX, содержаться две папке IMG и INDEX2. В папке IMG содержится картинка picture.gif. В папке INDEX2 файл doc.html. Что требуеться вставить картинку picture.gif в файл doc.html с помощью тэга <img> (хотя других я тэгов не знаю). В чем проблема. Пока мы знаем, как загрузить картинку в файл находящийся в тойже папке ( или в папке ниже уровнем, типа папка(html-файл)/папка(картинка)). Но как загрузить картинку находящийся в другой папке на томже уровне? Очень просто...

Давайте не много отвлечемся.

Я расскажу что такое уровни папок.

Возмем туже структуру, что и выше и немного изменим.

Первый уровень        INDEX
                     __|___
                     /      \
Второй уровень        IMG  INDEX2 
                     |       |
                     picture.gif      doc.html
                    /  \             /   \
Третий уровень      PAPKA1  PAPKA2     PAPKA3  PAPKA4

Надеюсь понятно, и так вернемся к нашей ситуации. Напомню нам требуеться вставить картинку picture.gif в файл doc.html с помощью тэга <img>, приэтом эти файлы лежат на одном уровне в разных папках. Что нужно сделать? Какой путь нужно прописать в doc.html чтобы загрузить картинку. Подумаем логически, как из одной папки передти в другую находящиеся на одном уровне. Нужно подняться на уровень выше и после этого зайти в другую папку. Вы делаете это очень часто в Windows. А если хотите пример из жизни, пожалуйста. Вы находитесь в помещение А (второй уровень) с дверью выходящий в коридор (первый уровень), и в этом же коридоре находиться помещение В (второй уровень). Вам надо пройти из помещения А в В. Вы уже поняли, что надо сделать. Выйти из помещения А в коридор (со второго уровня в первый), а потом зайти в помещение В (с первого уровня во второй). Так и структуре папок. Всё очень просто.

З.Ы. Не удивляйтесь, что я расписываю это так подробно, просто очень многие люди не понимают это сразу и приходиться приводить примеры.

И так с помощью какого символа можно передти с низжего уровня на более высокий. А символ, а точнее символы вот такие ./

Как это выглядит в html-коде, а вот так <img src="./img/picture.gif"> так будет выглядить код в файле doc.html

Вообщем все. Идём дальше.

Формы

Наверняка вас приходилось писать что-то в гостевой книге, там имя, email, сообщения. Это и есть форма. Как она строится. Точнее какие тэги нужны для её создания.

Тег <INPUT>

Тег <INPUT> предназначен для создания элементов управления и всегда используется совместно с атрибутом TYPE. Закрывающий тег не требуется

Атрибуты

title Всплывающая подсказка
value Задает отображаемый текст для text, password, button, reset, submit
size Устанавливает число видимых символов в text
maxlength Устанавливает максимально допустимое число вводимых символов в text
checked False или True - Принимает начальное состояние для checkbox и radio (по умолчанию False)

type Описывает тип интерфейсного элемента. Может принимать следующие значения

text	создает строку для ввода текста
password	создает строку для ввода текста, при этом отображает вводимые символы как звездочки (*)
checkbox	создает «включатель»
radio	создает «исключающий переключатель». Как правило, используют блоки из нескольких таких элементов
file	создает элемент для выбора локальных файлов. Например, строку для имени файла и кнопку "Обзор", при нажатии на которую открывается диалог «Выбор файла»
hidden	создает невидимый для пользователя элемент. Может использоваться для отправки дополнительной, служебной информации
image	создает элемент формы в виде кнопки-изображения
button	создает стандартную кнопку
submit	создает кнопку «Подача запроса»
reset	создает кнопку «Сброс»

style Задает различные стили. Например, высоту или ширину элемента

Sub cmdclick() MsgBox "Молодец!", 0, "HTML это просто" End Sub Примеры

Пункт 1
Пу
Попробуйте

<input type="text" value="Строка для ввода текста!" size=33>
<input type="password" value="password" maxlength="5">
<input type="checkbox" title="Я - checkbox"> <input type="radio" checked=1 name="sample">Радиопереключатели
<input type="radio" name="sample">Можно выбрать только один элемент
<input type="radio" name="sample">Попробуйте
<input type="file">
<input type="button" value="Нажми на меня" onclick="cmdclick"><input type="submit"> <input type="reset" style="width:100;>"

<и>Тег <BUTTON>

Тег <BUTTON> создает кнопку с рисунком или с другими встроенными элементами. Закрывающий тег </BUTTON> требуется Атрибуты
disabled Делает кнопку недоступной
style Задает стили для кнопки. Например, размеры кнопки
title=Всплывающая подсказка
type= Тип кнопки

Пример

Кнопочка

в таблице

Я недоступна! 60x60

Код для первой кнопки

<button>
 <table border=1>
  <tr>
  <td>Кнопочка
  <tr>
  <td>в таблице
  </table></button>

<button disabled title="я кнопка">Я недоступна!</button>

<button style="height:60;width=60;>60x60</button>"

Тег <select> и обязательный парный ему </select> Тег <select> создает список или выпадающий список. Каждый элемент списка описывается тегом <Option>

Атрибуты

size Число отображаемых элементов. Если равно 1 или не указано, то выводится одна строчка. Если значение больше 1, то выводится список с прокруткой

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Это выпадающий список Вторая строка Третья строка Четвертая строка

Приведем пример подобия pull-down меню для навигации по сайту

Выбор раздела 1 страница 2 страница 3 страница 4 страница 5 страница

Вот код:

<SELECT NAME="navSelect"
  ONCHANGE="top.location.href =
    this.options[this.selectedIndex].value">
  <OPTION>Выбор раздела</OPTION>
  <OPTION VALUE="1.html">1 страница</OPTION>
  <OPTION VALUE="2.html">2 страница</OPTION>
  <OPTION VALUE="3.html">3 страница</OPTION>
  <OPTION VALUE="4.html">4 страница</OPTION>
  <OPTION VALUE="5.html">5 страница</OPTION>
</SELECT>

Основную работу выполняет обработчик события ONCHANGE. top ссылается на окно браузера, активное в данный момент. top.location.href - URL документа, отображаемого этим окном. Одним из свойств объекта SELECT является коллекция options, которая содержит параметры элементов выбора. Например navSelect.option[1].value содержит значение "index.html". Свойство элемента SELECT selectedIndex - номер выбранного пункта. Элемент this внутри элемента ссылается именно на этот элемент. Вместо него можно было использовать (в Internet Explorer) ссылку document.all.navSelect, но this гораздо короче и работает в обоих браузерах. Я советую вам всегда использовать элемент this, когда это возможно.

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

Вот код:

<FORM>
SELECT NAME="navSelect"<>
  <OPTION>Выбор раздела</OPTION>
  <OPTION VALUE="1.html">1 страница</OPTION>
  <OPTION VALUE="2.html">2 страница</OPTION>
  <OPTION VALUE="3.html">3 страница</OPTION>
</SELECT><BR>
<INPUT TYPE=BUTTON NAME="go" VALUE="Go!"
 ONCLICK="top.location.href =
 this.form.navSelect.options[this.form.navSelect.selectedIndex].value">
</FORM>

Здесь необходимо пояснить, что каждый элемент формы имеет свойство form, которое содержит ссылку на его родительскую форму. Таким образом можно сослаться на любой элемент формы из любого другого элемента, чем мы здесь и воспользовались: this.form.navSelect ссылается именно на элемент выбора.

Тег OPTGROUP

Тег OPTGROUP позволяет группировать элементы в <SELECT> в логические группы. Требуется закрывающий тег

Атрибуты

label Задает имя для заданной группы

Пример

Кошки Собаки Мышки Попугай Ворона Сорока

Тег <option> и необязательный парный ему </option>

Каждый элемент <SELECT> должен содержать хотя бы один или более элементов OPTION, с помощью которого создаются строки списков

Атрибуты

selected Индикатор, что данная строка является выбранной по умолчанию. Если данный индикатор отсутствует, то такой строкой является первый элемент

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Код для примера

<select size=3>
<option>Это список с прокруткой
<option>Вторая строка
<option>Третья строка
<option selected>Четвертая строка
</select>

Тег <TEXTAREA>

Тег TEXTAREA создает многострочное текстовое поле для ввода информации. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк. Выводимый текст находится между тегами. Требуется закрывающий тег.

Атрибуты

cols= Определяет ширину поля в символах

disabled Делает элемент недоступным

readonly Текст только для чтения. Нельзя изменять, вставлять и т.д.

rows= Определяет число строк

title= Всплывающая подсказка

Пример

Текстовое поле шириной в 11 символов и в семь строк

Код

<textarea cols=11 rows=7 readonly>
Текстовое поле шириной в 11 символов и в семь строк </textarea>