Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
ЛАБОРАТОРНА РОБОТА №2
Вивчення HTML тегів для створення списків та форм.
Мета роботи:
Теоретичні відомості:
Списки бувають
нумеровані (теги <ol> <li> <li> </ol> )
марковані (теги <ul> <li> <li> </ul> )
визначень (теги <dl> <dt> </dt> <dd> </dd> </dl> )
вкладені (використання тегів нумерованих і маркованих списків вкладених одні в одні)
Нумеровані списки
Такий список є переліком "пронумерованим" яким-небудь чином. Це можуть бути арабські цифри, цифри римського алфавіту або букви.
Щоб вказати браузеру, що список буде нумерованим, використовуються теги <ol></ol>. Увесь список розташовується між цими тегами і кожен його пункт задається тегами <li></li>.
Приклад коду для нумерованого списку:
<ol>
<li>книги</li>
<li>зошити</li>
<li>олівці</li>
</ol>
Результат
тег <ol> має атрибути
type – атрибут за допомогою якого можна змінити нумерацію. По замовчуванню нумерація ведеться арабськими числами.
- - type="A" - нумерація заголовними латинськими буквами (A, B, C).
- - type="a" - нумерація прописними латинськими буквами (a, b, c).
- - type="I" - нумерація великими римськими цифрами (I, II, III).
- - type="i" - нумерація маленькими римськими цифрами (i, ii, iii).
start - Якщо нам треба почати нумерацію не з одиниці, то слід використовувати параметр start, як значення якого вказується число, з якого починатиметься список (якщо нумерація задається за допомогою букв, то це число вказуватиме на позицію в алфавіті).
тег <li> має атрибут value, який дозволяє змінити номер даного елемента списка. При чому змінюється номер всіх наступних номерів.
Приклад з використанням всіх атрибутів нумерованих списків
<ol type="I" start="3">
<li>білий</li>
<li>рожевий</li>
<li>червоний</li>
<br>...............
<li value="7">фіолетовий</li>
</ol>
Результат
ІІІ. білий
ІV. рожевий
V. червоний
...............
VII. фіолетовий
Марковані списки
У маркованому списку замість букв і цифр використовуються маркери. Щоб вказати браузеру, що список буде маркованим, використовуються теги <ul></ul>. Увесь список розташовується між цими тегами і кожен його пункт задається тегами <li></li>.
За замовчуванням маркер відображується у вигляді чорного кружечка. Це можна змінити за допомогою атрибуту тега <ul> type :
- - type="disc" - зафарбований кружечок.
- - type="circle" - порожній кружечок.
- - type="square" - зафарбований квадратик.
Приклад коду маркованих списків:
<ul type="circle">
<li>комп'ютери</li>
<li>телефони</li>
<li>флешки</li>
</ul>
Списки визначень
Такі списки використовуються в словниках. Кожен пункт складається з двох частин: термін і його визначення. Щоб вказати браузеру, що буде список визначень, використовуються теги <dl></dl>. Кожен термін розміщуємо в теги <dt></dt>, а їх визначення - в теги <dd></dd>.
Приклад
<dl>
<dt>Термін 1</dt>
<dd>Визначення терміна 1</dd>
<dt>Термін 2</dt>
<dd>Визначення терміна 2</dd>
</dl>
Вкладені списки
Бувають ситуації, коли в елемент списку необхідно включити свій список. Такі списки називаються багаторівневими або вкладеними. Для цього використовується комбінація вже відомих нам тегів списків.
ФОРМИ
Види форм
Отже, в html форма задається тегами <form></form>. Усі інші елементи форми розташовуються між цими тегами.
1. Текстове поле
Просте однорядкове текстове поле, в яке можна вводити і редагувати текст. Задається тегом <input>
<form name="forma 1">
<input type="text" name="text 1" size="20"
maxlength="50" value="Введіть текст">
</form>
Атрибути:
name - ім'я елементу
type - тип елементу (в даному випадку - text)
size - розмір текстового поля в символах, які одночасно будуть видні, при введенні більшої кількості символів, вони прокручуватимуться
maxlength - максимальна кількість символів, яку можна ввести в поле, якщо опустити цей параметр, то число символів буде необмеженим
value - текст, який відображуватиметься (його можна стерти), за відсутності цього параметра поле буде порожнім.
Можливі ще два атрибути:
disabled - блокує поле від будь-яких змін
readonly - робить поле доступним тільки для читання.
Приклад:
<form name="forma1">
<input type="text" name="text1" size="20"
maxlength="50" value="неактивное поле" disabled>
<input type="text" name="text1" size="20"
maxlength="50" value="только для чтения" readonly>
</form>
2. Текстове поле для введення пароля
Це таке ж текстове поле, як і попередній елемент. Різниця тільки в тому, що текст, що вводиться, не відображується, замість нього з'являються спеціальні символи, наприклад зірочки. Найчастіше використовується при введенні паролів. Усі параметри такі ж, як у простого текстового поля, окрім параметра type="password".
Приклад:
<form name="forma1">
Введите пароль:<br>
<input type="password" name="text1" size="20"
maxlength="50">
</form>
3. Прапорці
Приклад:
Якими мовами ви володієте:
англійський німецький іспанський французький
Він задається все тим же тегом <input>, причому один тег задає один прапорець. Потрібно чотири прапорці і чотири рази писати input.
Приклад:
<form name="forma 1">
Якими мовами ви володієте:<br>
<input type="checkbox" name="lan 1" value="english"
checked>англійський
<input type="checkbox" name="lan 2" value="german">
німецький
<input type="checkbox" name="lan 3" value="spanish">
іспанський
<input type="checkbox" name="lan 4" value="french">
французький
</form>
Розглянемо його атрибути:
type - тип елементу (в даному випадку - checkbox)
name - ім'я елементу, вказує програмі обробникові форми, який пункт вибрав користувач
value - значення елементу, вказує програмі обробникові форми значення пункту, який вибрав користувач. У нашому прикладі вибраний пункт англійський, отже, програма-обробник отримає: lan1="english"
checked - їм зазвичай позначають найбільш вірогідні для вибору пункти, користувач клацанням миші може вибрати інші пункти.
4. Перемикачі
Відмінність від прапорців - можна вибрати тільки один пункт. У зв'язку з цим значення параметра name мають бути однакові для усіх елементів групи. Атрибут type="radio", усі інші такі ж, як у прапорців.
Приклад:
<form name="forma1">
Вкажіть вашу стать:<br>
<input type="radio" name="sex" value="man"
checked>чоловік
<input type="radio" name="sex" value="woman">
жінка
</form>
5. Кнопки
Існує чотири види кнопок :
submit - кнопка відправки вмісту форми web -серверу. Її атрибути:
type="submit" - тип кнопки,
name - ім'я кнопки
value - напис на кнопці.
image - графічна кнопка відправки вмісту форми web -серверу. Для її використання необхідно підготувати картинку кнопки, а потім використовувати її у вигляді кнопки. Її параметри:
type="image" - тип графічної кнопки,
name - ім'я кнопки,
src - адреса картинки для кнопки.
reset - кнопка, що дозволяє відновити усі значення за умовчанням у формі. Її параметри:
type="reset" - тип кнопки очищення,
name - ім'я кнопки,
value - напис на кнопці.
button - довільна кнопка, її дії призначаються вами, тобто сама вона робити нічого не уміє. Її параметри:
type="button" - тип довільної кнопки,
name - ім'я кнопки,
value - напис на кнопці.
onclick - вказує, що робити при клацанні по кнопці. Взагалі, у цього типу кнопок є і інші події (наприклад, подвійне клацання), але тут ми їх не розглядатимемо.
Якщо на формі декілька кнопок, то вони повинні мати різні назви.
Приклад коду :
<form name="forma 1">
<input type="submit" name="submit" value="Відправити">
<input type="image" name="but_img" src="../files/119/but.gif">
<input type="reset" name="reset" value="Очистити">
<input type="button" name="button" value="Відправити">
</form>
6. Поле для файлів
Поле для введення імені файлу, супроводжуване кнопкою Browse (Огляд), при клацанні по якій відкривається вікно перегляду дерева тек комп'ютера, де можна вибрати потрібний файл. Вибраний файл приєднується до вмісту форми при відправці на сервер.
Приклад:
<form name="forma1">
<input type="file" name="load" size="50">
</form>
7. Багаторядкове текстове поле
Для об'ємних текстів, наприклад для поштових повідомлень, зручно використовувати саме цей елемент. Він створюється тегами <textarea> </textarea> і має наступні параметри:
name - ім'я поля
cols - ширина поля в символах
rows - кількість рядків тексту, видимих на екрані
wrap - спосіб перенесення слів :
off - перенесення не відбувається,
virtual - перенесення відображується, але на сервер поступає неділимий рядок,
physical - перенесення і на екрані і при вступі на сервер.
disabled - неактивне поле
readonly - дозволено тільки читання.
Приклад
<form name="forma1">
<textarea cols="20" rows="3" wrap="off"></textarea><br>
<textarea cols="35" rows="5" wrap="virtual"></textarea><br>
<textarea cols="50" rows="7" wrap="physical"></textarea>
</form>
8. Списки, що розкриваються
Списки бувають з можливістю вибору одного елементу і з множинним вибором. Задются і ті, і інші за допомогою тегів <select> </select>, усередині яких розташовуються елементи значень, заданих тегом <option>. Розглянемо параметри цих тегів :
<select>:
name - ім'я списку. Кожен вибраний елемент списку при передачі на сервер матиме вигляд: name.value, де значення (value) береться з тега option.
size - визначає кількість видимих елементів в списку: 1 - простий список, що розкривається, більше 1 - список із смугою прокрутки.
multiple - дозволяє вибір декількох елементів списку.
<option>:
selected - їм позначають найбільш вірогідний для вибору елемент списку, якщо список з множинним вибором, то можна помітити декілька пунктів.
value - значення, яке буде відправлено серверу, якщо пункт вибраний.
Приклад:
<form name="forma1">
Яку мову Ви хочете вивчати:
<select name="language" size="1">
<option selected value="html">html
<option value="php">php
<option value="java">java
</select><br><br>
Які дні тижня Вас влаштують:<br>
(вибирайте з натиснутою клавішею ctrl)<br>
<select name="day" size="7" multiple>
<option selected value="mon">понеділок
<option value="tue">вівторок
<option value="wen">среда
<option selected value="thu">четвер
<option value="fri">п'ятниця
<option value="sat">субота
<option value="san">неділя
</select>
</form>
Існують ще теги <optgroup> </optgroup>, що дозволяють групувати елементи списку за якими-небудь ознаками. Наприклад, ми хочемо задати каталог сайтів у вигляді списку, тоді зручніше розбити його на групи по інтересах.
9. Написи
Усі елементи форми можна зв'язати з їх написами за допомогою елементу <label> і його параметра for, значенням якого є ім'я елементу, з яким зв'язуємо напис. Наприклад:
<form name="forma 1">
<label for="load">Вибирайте файл: </label>
<input type="file" name="load" size="30">
</form>
ЗАВДАННЯ виконати в створеній вами таблиці.
ДОМАШНЄ ЗАВДАННЯ
ВИВЧИТИ ТА НАВЧИТИСЬ ЗАСТОСОВУВАТИ ТЕГИ ДЛЯ ОБРОБКИ ТЕКСТУ, СТВОРЕННЯ ТАБЛИЦЬ ТА ГІПЕРПОСИЛАНЬ, РОБОТИ З ЗОБРАЖЕННЯМ, СПИСКАМИ, ФОРМАМИ, НАВІГАЦІЙНИМИ КАРТАМИ.
Знати структуру html документу та атрибути тегу вody.
Створити пробний сайт засобами html та табличним способом створення сайтів.