ЛАБОРАТОРНА РОБОТА 2 Вивчення HTML тегів для створення списків та форм

Работа добавлена на сайт samzan.net:

ЛАБОРАТОРНА РОБОТА №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>

Результат

1.  книги
2.  зошити
3.  олівці

тег <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>

Вкладені списки

Бувають ситуації, коли в елемент списку необхідно|треба| включити свій список. Такі списки називаються багаторівневими або вкладеними. Для цього використовується комбінація вже відомих нам тегів списків.

ФОРМИ

Види форм

1.  текстове поле

1.  текстове поле для введення пароля

1.  прапорці

1.  перемикачі

1.  кнопки

1.  поле для файлів

1.  багаторядкове текстове поле

1.  списки, що розкриваються

1.  надписи

Отже, в 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>

       

ЗАВДАННЯ виконати в створеній вами таблиці.

1.  Створити нумерований список предметів, які ви вивчаєте.
2.  Створити маркований список з маркерами квадратами про асортимент приладів електроніки.
3.  Створити вкладений список: пори року та їхні місяці з довільними значеннями атрибутів.
4.  Переглянути 9 прикладів на створення різноманітних форм. Вивчити теги і атрибути, які використовуються при цьому.
5.  Створити форму для введення паролю
6.  Створити форму прапорець на тему: студентом якого курсу ви є.
7.  Створити форму список на тему, які предмети ви вивчаєте.
8.  Створити гіперпосилання з даної сторінки на іншу сторінку так, щоб вона відкривалась у новому вікні.
9.  Розмістити на сторінці зображення декілька разів, при чому кожний раз іншого розміру.
10.  Поруч з рисунком розмістити текст: зліва, справа.
11.  Створити з зображення навігаційну карту.

ДОМАШНЄ ЗАВДАННЯ

ВИВЧИТИ ТА НАВЧИТИСЬ ЗАСТОСОВУВАТИ ТЕГИ ДЛЯ ОБРОБКИ ТЕКСТУ, СТВОРЕННЯ ТАБЛИЦЬ ТА ГІПЕРПОСИЛАНЬ, РОБОТИ З ЗОБРАЖЕННЯМ, СПИСКАМИ, ФОРМАМИ, НАВІГАЦІЙНИМИ КАРТАМИ.

Знати структуру html документу та атрибути тегу вody.

Створити пробний сайт засобами html та табличним способом створення сайтів.

1. Апелляционное производство в системе пересмотра судебных актов Арбитражных судов
2. Программирование для Word из Delphi
3. Статья 1. Государственная служба Российской Федерации 1.
4. Применяется тогда когда синтаксис языка Паскаль допускает использование только одного оператора в то
5. Френсис Гальтон - выдающийся ученый-энциклопедист
6. РЕФЕРАТ дисертації на здобуття наукового ступеня кандидата економічних наук Львів ~
7. якої країни і її основним багатством
8. Предание нарекло Ольгу Хитрою церковь Святой история Мудрую так писал о княгине Ольге русский истор
9. Дунін-Марцінкевіч Белару
10. Предмет, метод та завдання статистики
11. Всеволода Мать Владимира греческая царевна Анна была дочерью византийского императора Константина Монома
12. Вопросы к экзамену по дисциплине «Информационный менеджмент»
13. ПО ТЕМЕ ТЕОРИЯ ВЕРОЯТНОСТЕЙ
14. тема Гуманистическая направленность личности учителя
15. это глобальный компьютеризированный бизнес в котором участвуют крупнейшие авиакомпании гостиничные цепо
16. Задание- Последовательность производства операций при переклю
17. геометрическое тело форма которого состоит из трех поверхностей- двух одинаковых по форме плоских кругов и
18. Пояснительная записка Программа разработана на основе Федерального государственного образовательно
19. Тел ~~м м~д~ният
20. Кодовое обозначение товара- ХХ ~ группа ХХХХ ~ позиция ХХХХ ХХ ~ субпозиция ХХХХ ХХ ХХХ Х ~ подсубпоз.html

Материалы собраны группой SamZan и находятся в свободном доступе