Статистические Web-технологии. Таблицы HTML

Таблица в языке HTML представляется как набор строк, причем в каждой из них должна быть задана хотя бы одна ячейка. В разных строках может находиться разное количество ячеек.

Теги таблицы и ее компонентов. <TABLE>, </TABLE> - основные теги (тэги), описывающие таблицу. Все, что будет находиться в ней, должно размещаться между двумя этими тегами.

<TR>, </TR>- теги, описывающие строку таблицы.

<TD>, </TD>определяют ячейку таблицы, эти теги могут находиться только внутри тегов, описывающих строку.

<TH>, </TH>используются для описания заголовка строки или столбца таблицы.

<CAPTION>, </CAPTION>применяются для определения названия (подписи) таблицы. По умолчанию, название ставиться вверху таблицы и выравнивается по центру. Данные теги должны размещаться между <TABLE> и </TABLE>, но вне тегов, описывающих строки или ячейки таблицы.

В теге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN.

Параметр BORDER задает рамку вокруг всей таблицы и вокруг каждой ячейки, образуя линию сетки таблицы (<TABLE BORDER=1>).WIDTH="n%"|"n" задает ширину таблицы или ячейки таблицы. Фиксированная ширина пишется в пикселях, относительная в процентах (относительно ширины окна, таблицы или ячейки другой таблицы, в которой она размещена). HEIGHT="n%"|"n" определяет высоту таблицы или ячейки таблицы как фиксированную величину в пикселях, или относительную в процентах. COLSPAN=n используется для объединения ячеек таблицы по горизонтали (данная ячейка захватывает n столбцов по ширине). ROWSPAN=n только для объединения ячеек таблицы по вертикали (данная ячейка захватывает n строк по высоте). Применяется, как и COLSPAN, в тегах <TH>, <TD>.

Выравнивание таблицы по горизонтали задается атрибутом ALLIGN, значения: left, center, right. А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td. Для вертикального выравнивания содержимого ячеек - атрибут VALIGN: middle, top, bottom.

Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки. Задается это - для изображения - атрибутом BACKGROUND, в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона - атрибутом BGCOLOR, здесь значением является наименование цвета.

Статистические Web-технологии. Фреймы HTML

Фреймы

Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на мелкие области.

Тег <frame>

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

Тег <frameset>

Определяет структуру фреймов на веб-странице.

Тег <iframe>

Создает плавающий фрейм.

Тег <noframes>

Содержимое тега <noframes> отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать.

 

Статистические Web-технологии. Формы HTML

Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность.

Создание простой формы

Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

<form method="post" action="../admin/add_story.php">
</form>

Флажок (checkbox)

Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

<input name="Имя переключателя" type="Тип" value="Значение">

Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

Пример:

<input name="mycolor" type="checkbox" value="red" checked>Красный(выбран по умолчанию)
<input name="mycolor" type="checkbox" value="blue">Синий
3) Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

<input name="Имя переключателя" type="Тип" value="Значение">

Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Пример:

<input name="mycolor" type="radio" value="white"> Белый
4) Кнопка сброса формы(Reset)

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Пример:

<input type="reset" name="Reset" value="Очистить форму">