- •Уральский государственный педагогический университет
- •Введение
- •1.1. Информационные ресурсы Интернет. Основные понятия.
- •1.2. Решение поисковых задач. Электронная почта.
- •Электронная почта
- •1.3. Информационная технология www.
- •Существует множество редакторов html-файлов, которые автоматически генерируют код html, но с точки зрения минимального объема и быстродействия они уступают страницам, созданным в блокноте.
- •Ip address (ip-адрес) – номер хоста, выраженный 32-разрядным числом, записанным четырьмя байтами, разделенными точкой (например, 234.049.123.101).
- •1.4. Работа с графикой.
- •2. Язык разметки html.
- •2.1. Синтаксис языка html, структура документа.
- •Все теги нтмl по их назначению и области действия можно разделить на следующие основные группы:
- •2.2. Основные теги и их атрибуты. Разметка текста. Гиперссылки.
- •2.3. Графика, звук и видео. Активные изображения.
- •2.4. Таблицы. Оформление таблиц. Формы на странице. Создание форм.
- •2.5. Каскадные листы стилей. Файлы css.
- •3. Размещение страниц в Интернете.
- •3.1. Цели, основные этапы проектирования сайта.
- •3.2. Требования, предъявляемые к представлению информации и Web-дизайну
- •3.2 Анализ основных требований к дизайну web-ресурсов.
- •Основные типы серверов и предоставляемые ими услуги
- •Список поисковых серверов и каталогов
- •Основные возможности программы Internet Explorer 5.0
- •Escape-последовательности cer (Character Entity Reference)
- •Основные цвета
- •Базисные элементы html
- •Основные атрибуты и их значения
- •Единицы измерения значений свойств
- •Глоссарий
- •Литература
2.4. Таблицы. Оформление таблиц. Формы на странице. Создание форм.
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга, создания многоколонного текста, обтекания рисунков и т.п.
Основные тэги таблиц: <table> …< /table > - начало и окончание таблицы;
<tr> …</tr>- начало и окончание строки;<td> …</td>- начало и окончание ячейки.
Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел -  .
Таблица начинается открывающимся тэгом <table>и завершается закрывающимся</table>. Тэг<table>может включать следующие атрибуты:
width="n" |
Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. |
border="n" |
Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки. |
bordercolor="#ffffff" |
Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета. |
bgcolor="#ffffff" |
Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число. |
background="image.gif" |
Заполняет фон таблицы изображением. |
cellspacing="n" |
Определяет расстояние между рамками ячеек таблицы в пикселях. |
cellpadding="n" |
Определяет расстояние в пикселях между рамкой ячейки и текстом. |
align=left |
Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения: left, center и right. |
frame="значение" |
Управляет внешней окантовкой таблицы, может принимать следующие значения: void - окантовки нет (значение по умолчанию). above - только граница сверху. below - только граница снизу. hsides - границы сверху и снизу. vsides - только границы слева и справа. lhs - только левая граница. rhs - только правая граница. box - рисуются все четыре стороны. border - также все четыре стороны. |
rules="n" |
Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): none - нет линий (значение по умолчанию). groups - линии будут только между группами рядов. rows - только между рядами. cols - только между колонками. all - между всеми рядами и колонками. |
Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <tr> и завершаются закрывающимся </tr>, а каждая ячейка таблицы начинается тэгом <td> и завершается </td>. Данные тэги могут иметь такие атрибуты:
Следующие атрибуты могут применяться для строк и ячеек. | |
align=left |
Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение left, center и right. |
valign=center |
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: top, center, bottom. |
bgcolor="#FFFFFF" |
Устанавливает цвет фона строки или ячейки. |
background="image.gif" |
Заполняет фон строки или ячейки изображением. |
Следующие атрибуты могут применяться только для ячеек. | |
width="n" |
Определяет ширину ячейки в n пикселях. |
height="n" |
Определяет высоту ячейки в n пикселях. |
colspan="n" |
Растягивание ячейки по горизонтали. Например, <td colspan="2"> означает, что ячейка будет растянута на 2 колонки. |
rowspan="n" |
Растягивание ячейки по строке. Например, <td rowspan="2" означает, что ячейка будет растянута на две строки таблицы. |
nowrap |
Присутствие этого атрибута показывает размещение текста в одну строку |
Кроме этого, любая ячейка таблицы может быть определена не тэгами <td></td>, а тэгами<th></th>- Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тэгов будет выделен полужирным шрифтом и отцентрирован.
Таблица может включать заголовок, который располагается между тэгами <caption> </caption>. К заголовку возможно применение атрибута align, определяющего его положение относительно таблицы: top- значение по умолчанию, заголовок над таблицей по центру.left- заголовок над таблицей слева.right- заголовок над таблицей справа.bottom- заголовок под таблицей по центру.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести неразрывный пробел Ячейка по-прежнему будет пуста, а рамка вокруг нее будет.
И еще - имейте в виду, что тэги, устанавливающие шрифт (<b>, <i>, <font size="n", font color="#FFFFFF"), необходимо повторять для каждой ячейки.
Форма — это инструмент, с помощью которого HTML-документ может отправить информацию по указанному адресу. Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты. Принцип работы форм следующий: посетитель, зашедший к вам на страничку, заполняет форму, а после нажатия определенной кнопки форма берет данные из заполненных полей и отправляет их в назначенное место. Формы размещаются между тэгами<form></form>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тэг<form>может содержать следующие атрибуты: <formmethod="post"action="mailto:irin_nik@mail.ru">...</form>
action |
Обязательный атрибут. Определяет, где находится обработчик формы, напр. action=”http//:www.5ballov.ru/cgi-bin/file.cgi”. |
method |
Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: post и get. По умолчанию предполагается method=get. |
enctype |
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. |
Для внесения информации пользователем в форму используется элемент <input>.Это и есть поля, в которые пользователь вводит информацию. Каждый элемент<input>включает атрибутname=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы применяемых элементов <input>:
type=text |
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты size=число (ширина окна ввода в символах) и maxlength=число (максимально допустимая длина вводимой строки в символах): <input type=text size=20 name=user value="текст"> Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст из value, который пользователь может изменить. |
type=password |
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*): <input type=password name=pw size=20 maxlength=10> Определяет окно шириной 20 символов для ввода пароля. Максимальная длина пароля — 10 символов. |
type=radio |
Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: <input type=radio name=question value="Yes" checked> Да <input type=radio name=question value="No"> Нет <input type=radio name=question value="Possible"> Возможно Возможно Группа из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible. |
type=checkbox |
Определяет флажок. Может содержать дополнительный атрибут CHECKED (показывает, что он помечен). В отличие от радиокнопок, в группе флажков может быть несколько помеченных: <input type=checkbox name=comp value="CPU"> Процессоры <input type=checkbox name=comp value="Video" checked> Видеоадаптеры <input type=checkbox name=comp value="Scan"> Сканеры <input type=checkbox name=comp value="Modem" checked> Модемы ПроцессорыВидеоадаптерыСканерыМодемы Определяет группу из четырех флажков. Первоначально помечены второй и четвертый. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=Video и comp=Modem. |
type=hidden |
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. <input type=hidden name=version value="1.1"> Определяет скрытую переменную version, которая передается обработчику со значением 1.1. |
type=button |
Определяет обыкновенную кнопку <input type= button value="Жми сюда"> |
type=submit |
Определяет кнопку, при нажатии на которую запускается передача данных из формы обработчику: <input type=submit value="Отправить"> |
type=image |
Создает кнопку, аналогичную submit, но с использованием картинки пользователя <input type=image src=”images/button.gif” align=bottom value="Отправить"> |
type=reset |
Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name: <input type=reset value="Сброс"> |
type=file |
Определяет кнопку, при нажатии на которую появляется проводник, позволяющий присоединить к отправляемым данным любой файл с компьютера клиента. Обычно рядом с кнопкой отображается текстовое поле с именем отсылаемого файла. |
Формы могут содержать поля для ввода большого текста <textarea>:<textarea name=address rows=5 cols=50> Наберите здесь сообщение </textarea>
Связывание надписей с переключателями и флажками.
<label for id =r1>yes</label>
<label for id =r2>no</label> для элементов типа radio или checkbox с индивидуальными именами id=r1 и id=r2.
Группирование элементов управления (теги <fieldset>и <legend>)
<
среднее
высшее
<legend>образование</legend>
<input type=checkbox name=f1 value="M" checked> среднее <input type=checkbox name=f1 value="H"> высшее
</fieldset>