Введение в HTML [Копия]
.pdf
Вданном примере окно браузера разбивается на две колонки с помощью атрибута cols: левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.
Втеге <frame> задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html, а в правое — content.html. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.
Ссылки во фреймах
Вобычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name.
Вприведенном примере фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется конструкция target="CONTENT". Пример:
<a href="text.html" target="CONTENT">Текст</a>
|
|
|
Атрибуты фреймов |
|
Scrolling |
- |
Наличие у фрейма полос прокрутки (Yes, No, Auto) |
|
Border |
- |
Изменяет размер рамки фреймов. Используется в теге <Frameset>. |
Bordercolor - Изменяет цвет рамки фреймов. Используется в теге <Frameset>.
Noresize |
- Указывает броузеру на то, что |
размер фрейма никогда не должен |
|
изменяться. Используется в теге <Frame>. |
|
Плавающие фреймы.
Такие фреймы могут появляться в любом месте экрана, причем текст, расположенный на главной странице, "обтекает" этот фрейм. Для создания таких фреймов применяется специальный тег <Iframe> </Iframe>.
Пример:
<Iframe Align=”Right” Width=”50%” Height=”300” Src=”New.html”><Iframe>
Практическое задание.
Создать html-файл, содержащий разбиение страницы на 2 фрейма. В I фрейме содержится меню, позволяющее перемещаться по лабораторным работам 1-5, которые должны открываться во втором фрейме.
№ |
Расположение фреймов |
Размер I |
Размер II |
Толщина рамки фреймов |
|
|
фрейма |
фрейма |
|
1 |
2 вертикальных фрейма. |
50% |
50% |
5px |
2 |
2 горизонтальных фрейма |
300px |
* |
10px |
3 |
2 вертикальных фрейма. |
30% |
70% |
1px |
4 |
2 горизонтальных фрейма |
* |
700px |
5px |
5 |
2 вертикальных фрейма. |
300px |
* |
10px |
6 |
2 горизонтальных фрейма |
25% |
75% |
1px |
7 |
2 вертикальных фрейма. |
200px |
* |
5px |
8 |
2 горизонтальных фрейма |
20% |
80% |
10px |
9 |
2 вертикальных фрейма. |
25% |
75% |
1px |
10 |
2 горизонтальных фрейма |
200px |
* |
5px |
Контрольные вопросы:
1.Является ли тег <Frame> тегом-контейнером (т.е. есть ли е него парный тег)?
2.Назовите основные достоинства и недостатки фреймов.
3.Перечислить способы задания размера фрейма.
4.Какой тег отвечает за создание плавающего фрейма?
5.Какой атрибут запрещает изменять размеры фрейма?
Лабораторная работа №7.
Формы в HTML.
Форма (англ. form) в HTML — это раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Здесь следует заметить, что htmlформы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Создание простейшей формы
Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит три основных атрибута: action, method и name.
Action - Содержит адрес URL сценария, который должен быть вызван для обработки сценария.
|
Method |
- |
Указывает браузеру, какой вид HTTP запроса необходимо использовать для |
|
|
отправки формы; возможны значения POST и GET. |
|
|
Name |
- |
Задает имя формы. |
Пример:
<html>
<head>
<title>Формы в html</title> </head>
<body>
<form action="http://example.com/example.php" method="post" name="exampleform"> <p>
Фамилия:
<input type="text" id="username"><br> Имя:
<input type="text" id="nick"><br> Адрес эл. почты:
<input type="text" id="email"><br> Пол:
<input type="radio" name="sex" value="male">мужской<br> <input type="radio" name="sex" value="female">женский<br>
<input type="submit" value="Отправить"> <input type="reset" value="Отменить"> </p>
</form>
</body>
</html>
Элементы управления
Элементы управления служат для взаимодействия пользователя с формой и размещаются внутри тега <form>.
В HTML существуют следующие (основные) элементы управления:
Текстовое поле - <Input Type=”text”>
Представляет собой контейнер для ввода различной текстовой информации (однострочное текстовое поле).
Атрибуты:
|
Name |
- |
Имя элемента. |
|
Type |
- Тип элемента (в данном случае text). |
|
|
Size |
- |
Размер текстового поля в одновременно видимых символах. |
|
Maxlength - Максимальное количество символов, которое можно ввести в поле. |
||
Value - Начальное значение поля (текст в нем).
Пример:
<input type="text" name="fio" size="25" maxlength="50" value="Иванов И.И.">
Флажки - <Input Type=”checkbox”>
|
Флажки предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них. |
||
|
Атрибуты: |
||
|
Name |
- |
Имя элемента. |
|
Type |
- |
Тип элемента (в данном случае checkbox). |
|
Checked |
- Инициализация флага в качестве отмеченного. |
|
Value - Значение элемента, которое указывает программе обработчику формы значение
пункта, который выбрал пользователь. Пример:
<input name="mylab1" type="checkbox" value="lab1" checked>ЛР №1(по умолчанию)<br> <input name="mylab2" type="checkbox" value="lab2">ЛР №2<br>
<input name="mylab3" type="checkbox" value="lab3">ЛР №3<br> <input name="mylab4" type="checkbox" value="lab4">ЛР №4
Переключатели - <Input Type=”radio”>
В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы.
Атрибуты:
Имя элемента.
Тип элемента (в данном случае radio).
- Инициализация флага в качестве отмеченного.
Value - Значение элемента, которое указывает программе обработчику формы значение
пункта, который выбрал пользователь. Пример:
<input name="mylab" type="radio" value="lab1" checked>ЛР №1(по умолчанию)<br> <input name="mylab" type="radio" value="lab2">ЛР №2<br>
<input name="mylab" type="radio" value="lab3">ЛР №3<br> <input name="mylab" type="radio" value="lab4">ЛР №4
Многострочное текстовое поле - <Textarea></Textarea>
Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент.
|
Атрибуты: |
||
|
Name |
- |
Имя поля. |
|
Cols |
- Ширина поля (в символах). |
|
|
Rows |
- |
Количество видимых на экране строк текста. |
Wrap - Способ переноса слов.
|
Значения: |
|
|
Off - |
Перенос слов отключен. |
|
Virtual |
- Перенос отображается, но на сервер поступает неделимая строка. |
Physical - Перенос слов и на экране и при обработке на сервере.
Disabled - Неактивное поле.
Readonly - Разрешено только чтение.
Пример:
<textarea name="mytext" cols="25" rows="5">Текст, который изначально будет отображен в многострочном поле ввода</textarea>
Раскрывающиеся списки - <Select></Select>
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>. Рассмотрим параметры этих тегов:.
|
Атрибуты тега <select>: |
||
|
Name |
- |
Имя списка. |
|
Size |
- |
Количество видимых элементов списка. |
Multiple - Допустим ли выбор нескольких элементов списка.
Атрибуты тега <option>:
Selected - Выбранный элемент.
Value - Отправляемое на сервер значение при выборе.
Пример:
Какая лр вам понравилась больше всего: <select name="labrab" size="1">
<option selected value="lab1">ЛР №1. Теги <option value="lab2">ЛР №2. Списки <option value="lab3">ЛР №3. Ссылки </select>
Кнопка отправки содержимого формы серверу - <Input type=”Submit”>
Данный тег используется при окончании ввода пользователем данных. Браузер, в свою очередь, выводит данный элемент, как кнопку, на которой пользователь может щелкнуть, чтобы завершить процесс редактирования.
|
Атрибуты тега: |
||
|
Type |
- |
Тип кнопки (Submit). |
|
Name |
- |
Имя кнопки. |
|
Value - |
Надпись на кнопке. |
|
Пример:
<input type="Submit" Name="Ok" Value="Подтвердить">
Кнопка очистки формы - <Input type=”Reset”>
|
Кнопка, позволяющая восстановить все значения по умолчанию в форме. |
||
|
Атрибуты тега: |
||
|
Type |
- |
Тип кнопки (Reset). |
|
Name |
- |
Имя кнопки. |
Value - Надпись на кнопке.
Пример:
<input type="Reset" Name="No" Value="Очистить">
Практическое задание.
Создать html-файл, содержащий следующую форму:
Элементы формы расположить в таблице.
Для всех элементов должны быть заданы начальные значения.
Адрес URL сценария для обработки формы: http://192.168.32.129/study/lab7/index.php
Нижеперечисленные параметры элементов не должны изменяться:
Элемент формы, отвечающий |
Значении параметра name |
за указанное значение |
|
|
|
|
ФИО |
|
|
fio |
|
|
|
|
|
||||
|
|
Пароль |
|
|
pass |
||
|
|
|
Пол |
|
|
sex |
|
|
|
№ бригады |
|
|
team |
||
|
Наиболее интересные работы |
|
lab1..lab7 |
||||
|
|
Предложения |
|
|
offer |
||
|
Параметры элементов управления |
|
|
|
|||
№ |
Текстовое поле |
|
Многострочное текстовое поле |
||||
|
Размер |
|
Максимальное |
|
Перенос слов |
|
Ширина поля |
|
|
|
количество |
|
|
|
|
|
|
|
вводимых символов |
|
|
|
|
1 |
25 |
|
50 |
|
Да |
|
30 |
2 |
50 |
|
25 |
|
Нет |
|
50 |
3 |
15 |
|
15 |
|
Да |
|
75 |
4 |
25 |
|
10 |
|
Нет |
|
20 |
5 |
50 |
|
25 |
|
Да |
|
30 |
6 |
15 |
|
15 |
|
Нет |
|
50 |
7 |
25 |
|
50 |
|
Да |
|
75 |
8 |
50 |
|
25 |
|
Нет |
|
20 |
9 |
15 |
|
15 |
|
Да |
|
30 |
10 |
25 |
|
40 |
|
Нет |
|
50 |
Контрольные вопросы:
1.Форма в HTML, это?
2.Перечислите элементы управления (для взаимодействия с формой).
3.Назовите основные атрибуты тега <input>.
4.Какой тег отвечает за создание многострочного текстового поля?
5.Какой атрибут тега <select> определяет отправляемое на сервер значение при выборе?