веб лекции / Lektsia_Veb_tekhnologii_3
.docxЛекция по «Веб-технологии»
02.02.12.
Тема: «Списки HTML»
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr rows = “3”> <td> 4 </td>
</tr>
</table>
Списки бывают:
-
Упорядоченные –можно указать нумерацию. Оформляются с помощью тега:
-
<ol = type=”A” start=”8”>
<li> елемент 1 </li>
<li> елемент 2 </li>
<li> елемент 3 </li>
</ol>
-
Списки определений с помощью тега
<dl = type=”A” start=”8”>
<dt> Элемент 1 </dt>
<dd> Описание 1</dd>
<dt> Элемент 2 </dt>
<dd> Описание 2</dd>
</dl>
-
Неупорядоченные – оформляются с помощью тега
<ul>
-
<li> елемент 1 </li>
-
<li> елемент 2 </li>
-
<li> елемент 3 </li>
</ul>
Формы
Формы определяются с помощью тега
<form name=”” action=”” method=”post”
В «name» указывается имя формы.
В «action» указывается URL-адрес объекта который должен получить данные с этой формы.
<html>
<body>
<form name=”input” action=”html_form_action.asp” method=”get”>
<table>
<tr>
<td> <input type=”text” name=”search size=50 value=”строка поиска”>
<input type=”submit” value=”Поиск”>
<br>
<input type=”checkbox” name =”news”> поиск новости
</td>
</tr>
</table>
</body>
</html>
Поля ввода
<input type=”text”> - текстовое поле ввода. По умолчанию выделено 20 символов. С помощью атрибута size, мы можем изменить размер. Max length
Поля ввода пароля
<input type=password>
Переключатели оформляются при type=”radio”
<input type=”radio” name=”pol” value=”male”>мужчина
<input type=”radio” name=”pol” value=”female”>женщина
Для того, чтобы выбрать вариант по умолчанию нужно установить атрибут checked=”checked”
Флажки
type=”checkbox”
<input type=” checkbox” name=”notebook”> Ноутбук
<input type=” checkbox” name=”computer”> Компьютер
<input type=” checkbox” name=”printer”> Принтер
<input type=”submit”> //отправить на сервер
<input type=”reset”> //сбрасывает форму
Поля выбора файла
<input type=”file>”
Списки выбора
Тег <select> </select>
Отдельные элементы списка создаются с помощью тега <option>
Атрибуты name, multiple (разрешает множественный выбор), size(указывает сколько атрибутов будет видно).
<select name=“notebook” multiple size=3>
<option value=”Acer” > Acer
<option value=”Asus” > Asus
<option value=”HP” > HP
<option value=”Sony” > Sony
</select>
Атрибут multiple позволяет сразу показывать список.
<textarea rows= “”>
</textarea cols= “”>
Внешний вид форм
Формы можно объединять с помощью специализированых тегов.
<fieldset>
<legend> </legend>
</fieldset>
<img src=”url”>
.gif –Graphic Interchange Format –имеет в себе 256 цветов. Может иметь прозрачные области. Реализовано чередование строк. Возможность анимации.
Формат создан для передачи фотографий между платформами. Поддерживает 24 битную цветовую палитру. Поддерживает опцию «прогрессивный jmp»
Специально разработан для сетевых иллюстраций. Поддерживает 24,32,48 битную цветовую палитру. Поддерживает 16 битную серую палитру. Палитр сжатия позволяет сжимать на 25%. Внесен алгоритм через строчного изображения. Кроме того в него встроен механизм контроля целостности файла.
Активные области на изображениях
Карты изображений позволяют создавать на изображениях активные области.
Ссылка на часть HTML документа, описывающая область. Координаты области определяются с помощью тегов <map> <area>
<area> - описывает координаты отдельные области изображений. Параметры которой задаются при помощи атрибутов shape, cords, href. Атрибут shape задает вид активной области.
<img src= “figure.png” usemap=”#coord:notes”>
<map name=”coordinates”>
<area coords= “130,194,270,150” href= “rept.htm” all=”Прямоугольник”>
<area shape= “circle” coords=”73,90,40” href=”circle.htm” all= “Круг”>
<area shape= “poly” coords= “168,105,280,109,223,13” href=
Javascript . Java аплеты. Dom. Динамика HTML.