Изображения <img src=“имя. gif” > • =“имя. jpg” • =“имя. png” – Формат . gif может включать анимацию, где фрагменты повторяются. Часто применяются атрибуты размера изображения в пикселях: ширина – width высота – height 1
Часто применяется атрибут alt=“альтернативный текст” Если параметры рисунка не заданы, то браузер начинает расставлять текст только после того, как получены все изображения страницы Если параметры рисунков заданы, то браузер, зная где их будет ставить, сразу расставляет текст. 2
Рисунок может быть ссылкой <a href=“URL”> <img src=“имя_рисунка”> </a> 3
Активные карты изображений Такие карты могут быть для: – Для сервера, которые в настоящее время мало применяются; – Для клиента, которые сейчас более распространены 4
Создание карты 1. <img src=“URL_рисунка”> 2. Должен быть атрибут usemap, где идет описание карты <img src=1. gif usemap=“#my_map” alt=“Активная карта”> my_map – название карты; # - описание карты находится в этом же файле 5
3. При помощи тега <map>…</map> Описываются области разбиения карты и соответствующие их адреса. <map name=“my_map”> Области карты: <area shape=“начертание” coords =“x 1, y 1, x 2, y 2, …” href=“URL”> </map> 6
Тег <area> задает подобласти изображения. Атрибут shape задает форму области: “rect” – область прямоугольник, “circle” – область круг, “polygon” - область замкнутый многоугольник. Атрибут coords задает координаты области в пикселях относительно левого верхнего угла рисунка, который имеет координаты (0, 0). 7
Для прямоугольника задаются четыре координаты: (X_l_u, Y_l_u, X_r_d, Y_r_d). Для круга – три координаты (центр- x 1, y 1; радиус - R) 8
Для многоугольника задаются координаты всех вершин (x 1, y 1, x 2, y 2, ……. . xn, yn). 9
Создание таблиц Используется контейнер <table>……</table> Для задания строки <tr>…. </tr> Для задания ячейки <td>…. </td> В ячейке может находиться: 10
- текст; - изображение; - ссылка; - список; - другая таблица. Атрибуты таблицы border =“число”, где число – ширина рамки в пикселях. 11
Если число равно нулю или этот атрибут отсутствует, то таблица будет без рамки. width – ширина таблицы: - в пикселях; - в процентном соотношении ширины окна браузера. 12
Атрибуты ячеек и строк А. Выравнивание содержимого строки и ячейки: 1) горизонтальное выравнивание: align = left = right = center 13
2) вертикальное выравнивание: – valign = top – = bottom – = center 14
Б. Для ячеек width = ширина ячейки в пикселях или процентах; bgcolor = цвет фона ячейки; nowrap – текст в ячейке не будет заворачиваться, а будет прокрутка (без этого атрибута текст заворачивается). 15
Для заголовков столбцов вместо тега <td> применяется тег <th>. В этом случае текст отображается полужирным шрифтом. Для растягивания ячейки на несколько строк и/или столбцов указывается атрибут rowspan=число и/или colspan=число. 16
Для заголовка таблицы применяются теги контейнера <caption>Текст названия </caption> В нем может находиться атрибут выравнивания, который указывает, где находится заголовок относительно таблицы: align = top (над таблицей); = bottom (под таблицей). 17
Пример: <table border=1 width=200> <!-- атрибут border, чтобы была видна структура таблицы -- > <th colspan=2> Заголовок занимает 2 столбца</th> <th> Второй заголовок</th> <tr> <td>Картинка 18
<img src=my. gif></td><td rowspan=2> Ячейка занимает 2 строки </td> <td><a href=“URL” >Ссылка</a></td> </tr> <!– Оканчивается первая строка--> <tr> <td> Ячейка 3. 1</td> <td> Ячейка 3. 3 </td></tr> 19
<caption align=top> <b>Табл. 1 Название таблицы</b> </caption> </table> 20
21
Использование фреймов Фрейм – подокно. HTML-страница делится на два класса: - обычные страницы; - фреймосодержащие страницы. В обычных страницах применяется тег <body> 22
Во фреймосодержащих страницах вместо тега <body> используется тег <frameset> …… …… </frameset> 23
Здесь могут быть два атрибута: A. cols = “ 300, 700” или cols = “ 30%, 70%” или cols = “ 3*, 7*” 24
В первом случае мы указываем соотношения окон в абсолютных размерах (в пикселях), во втором и третьем – в относительных величинах (в процентах и частях). 25
Б. rows = - аналогично В случае А мы делим экран на два вертикальных фрейма (то есть на столбцы); В случае Б мы делим экран на два горизонтальных фрейма (то есть на строки). 26
В контейнере <frameset> идут теги <frame>. Их столько, на сколько частей Вы разбили экран (окно) В нем могут быть атрибуты: - src= “URL” – адрес страницы, которая будет загружаться в данный фрейм; name =имя фрейма. Часто применяется для загрузки других фреймов; noresize не разрешает менять размеры фрейма средствами Windows. 27
Пример: <frameset rows=“ 30%, 70%”> <frame src=“doc 1. htm”> <frameset cols=“ 40%, 20%, 40%”> <frame src=“doc 2_1. htm”> <frame src=“doc 2_2. htm”> <frame src=“doc 2_3. htm”> </frameset> 28
29
При использовании ссылок во фреймах можно: 1) - менять содержимое фрейма, где находится ссылка; 2) - менять содержимое другого фрейма; 3) - менять содержимое родительского окна; 30
4)- менять содержимое всего окна браузера; 5)- открывать документ в новом окне. <a href= “URL” target=“имя цели (имя атрибута name фрейма)”> Текст ссылки </a> 31
1) target=“_self” (по умолчанию) 2) target=“имя_фрейма” 3) target=“_parent” 4) target=“_top” 5) target=“_blank” 32
Родительский фрейм отличается от всего окна браузера только в том случае, если Вы создаете вложенную структуру фреймов в виде отдельных файлов. Например. 33
Пример 1. <frameset rows="3*, 7*"> <frame src="doc 1. htm"> <frameset cols="*, *"> <frame src="doc 2_1. htm"> <frame src="doc 2_2. htm"> </frameset> Для этого случая «родительское окно» совпадает со «всем окном браузера» 34
Пример 2. <frameset rows="3*, 7*"> <frame src="doc 1. htm"> <frame src="doc 2. htm"> </frameset> А в файле doc 2. htm находится такое содержимое: 35
<frameset cols="*, *"> <frame src="doc 2_1. htm"> <frame src="doc 2_2. htm"> </frameset> Для этого случая «родительское окно» не совпадает со «всем окном браузера» 36
Создание форм Формы обеспечивает: - интерактивный режим работы; - анкетирование пользователей; - передача запроса для поиска; - телеконференции; - чаты и т. д. и т. п. 37
Для формы используется контейнер <form атрибуты> ……. . поля и кнопки формы ……… </form> Для всех элементов формы можно применять атрибут disabled для запрета взаимодействия с этим элементом. 38
Поля А. <input type=“”> 1) “text” - однострочное поле ввода; “number”- число (м. б. и текст); “hidden”- спрятанное поле; “password”- отображаются звездочки. При этих типах могут быть атрибуты, задающие количество отображаемых символов в поле и максимальное число вводимых символов в поле. 39
2) “radio” - группа кнопок типа «радио» (то есть группа зависимых кнопок); “checkbox” –группа независимых кнопок. У группы кнопок имена должны быть одинаковые. 40
“reset” - кнопка для сброса введенной информации; “submit” - кнопка для отсылки данных формы на сервер скрипту для обработки; “button” - кнопка управления средствами Java. Script: “image” - кнопка с графическим изображением (аналогично кнопке “submit”, только дополнительно отсылаются ещё и координаты курсора мыши, где Вы нажали на кнопку). 41
3) “file” - для присоединения имени файла для отправки на сервер. Б. <textarea> многострочный текст </textarea> Здесь могут быть атрибуты, которые задают количество строк и столбцов в окне этого поля формы: rows= cols= 42
В. <select> …. . опции …. . </select> Для раскрывающихся списков и ниспадающих меню. 43
<select name=“name 1” size=3 multiple> <option>Яблоко <option selected>Арбуз <option>Груша <option>Малина <option>Ежевика <option>Апельсин </select> 44
Здесь: - size=3 – будет показываться список из трех элементов с прокруткой; - если нет атрибута size или size равно нулю или единице, то показывается меню; - multiple – можно помечать несколько элементов списка или меню (по Ctrl+); 45
- selected – первоначально отмеченный элемент в списке или меню. <option> может иметь атрибут value=“значение”, задающий, что посылается на сервер, если этот элемент отмечен. Если value отсутствует, то на сервер отсылается текст поля (Яблоко, Арбуз). Значение в лучше записывать латинскими буквами, чтобы не зависеть от кодировки, в которой пришли данные по <select>. 46
Новые элементы форм 1. fieldset - позволяет группировать элементы форм. Данная группировка помогает пользователям проще ориентироваться в формах. На элемент fieldset можно писать стили, то есть, например, можно сделать рамку любого цвета или ещё что-то. 2. legend - позволяет группе дать имя. 47
Пример1. <form> <fieldset style="border: 2 px solid #000; padding: 10 px; width: 300 px; height: 400 px; "> <legend>Ваш комментарий</legend> <P>Некоторый комментарий, касающийся данной темы</P> 48
<table><tr><td>Имя: </td> <td><input size=12></td></tr> <tr><td>e-mail: </td><input size=12></td></tr> <tr><td>Страна: </td><td> <select> <option selected>Донецк </option> </select> </td></tr> 49
<tr><td colspan=2>Комментарий: <textarea rows=4 cols 6></textarea></td></tr> <tr><td colspan=2> <input type="submit" value="Отправить"></td></tr> </table> </fieldset> </form> 50
51
3. button - расширяет функциональные возможности кнопок. Имеет атрибут type, который может принимать значения submit, reset и button. Внутри элемента button можно с размещать другие HTML-элементы, так что можно сделать кнопку с текстом и/или рисунком. 52
Пример 2. <button type="button">Кнопка <img src="flower. gif" border=0 width=30 height=30 alt="кнопка с рисунком" > </button> Получаем: 53
Пример 3. Можно вместо рисунка поместить внутрь что-то другое, например, таблицу. <button type="button"> <table border=1 cellspacing=0 width=200> <tr> <td>Нажми на кнопку</td> <td>Получишь результат</td> </tr> </table> </button> 54
55
4. optgroup - позволяет группировать пункты в элементе SELECT. В этом случае добавляются отступы и названия каждой группы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще. Название группы задается в атрибуте label элемента optgroup. 56
Пример 4. <form> <p>Справочники: </p> <select name = "ask" multiple> <optgroup label = "HTML"> <option value = "3. 2">HTML 3. 2 <option value = "4. 0">HTML 4. 0 </optgroup> 57
<optgroup label = "CSS"> <option value = "1">CSS-1 <option value = “ 2">CSS-2 <option value = "3">CSS-3 </optgroup> <option value = "js">Java. Script <option value = "dhtml">DHTML </select></p> </form> 58
59
Более того, каждую группу можно раскрасить в свой цвет с помощью CSS. Для этого используется свойство background. Например, первую группу сделаем зеленой, а вторую - желтой. 60
Пример 5. <form> <p>Справочники: </p> <select name="ask"> <optgroup label="HTML" STYLE="background: #090"> <option label="3. 2" STYLE="background: #090">HTML 3. 2 <option label="4. 0" STYLE="background: #090">HTML 4. 0 </optgroup> 61
<optgroup label="CSS" STYLE="background: #ff 0"> <option label="1" STYLE="background: #ff 0">CSS-1 <option label="1" STYLE="background: #ff 0">CSS-2 <option label="3" STYLE="background: #ff 0">CSS-3 </optgroup> <option value="js">Java. Script <option value="dhtml">DHTML </select></p> </form> 62
63
