html 4

Основи Web-майстерності

HHTTMMLL

Методичні вказівки та завдання до лабораторних робіт

Частина 4 Графіка на веб-сторінці.

Форми.

Основи Web-майстерності: HTML.

2

Основи Web-майстерності: HTML. Частина 4. Методичні вказівки та завдання до лабораторних робіт. – 44 c.

Фрагмент методического пособия представлен для ознакомления с продукцией электронного

магазина

МЕТОДИЧКА http://metodichka.com.ua/

МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

© НМЦ ПОЛИТЕХ Ніяка частина цього видання не може бути тиражована у будь-який спосіб без письмового дозволу правовласників. ® Методичка http://metodichka.com.ua/

http://metodichka.com.ua/



3

Зміст

ЗАНЯТТЯ 10 .................................................................................. 5

Зображення на веб-сторінці........................................................................ 5 Основні питання заняття............................................................................ 5 Вставка зображень. Елемент IMG ........................................................... 5 Розміри зображень ...................................................................................... 6 Альтернативний текст і описання зображень........................................ 7 Вертикальне вирівнювання зображень ................................................... 8 Горизонтальне вирівнювання зображень. Обтікання текстом........... 9 Рамка навколо зображення ......................................................................11 Поля навколо зображення .......................................................................12 Вставка фонових зображень....................................................................12 Зображення-гіперпосилання ...................................................................16 Графічна карта гіперпосилань ................................................................17 Доповнення електронного довідника темою „Зображення” ............18 На цьому занятті ........................................................................................19

ЗАНЯТТЯ 11 ................................................................................ 21

Форми..............................................................................................................21 Основні питання заняття..........................................................................21 Створення форми. Елемент FORM........................................................21 Елементи управління форми ...................................................................22 Кнопки у формах .......................................................................................26 Текстове поле (тип TEXT).......................................................................27 Поле вводу пароля (тип PASSWORD) ..................................................28 Велике текстове поле. Елемент TEXTAREA.......................................29 Поле вибору файлів (тип FILE) ..............................................................30 Прапорці (тип CHECKBOX) ...................................................................31 Перемикачі (тип RADIO).........................................................................34 Списки вибору. Елемент SELECT .........................................................36 Групування елементів форми. Елементи FIELDSET та LEGEND..37 Приклад форми ..........................................................................................39 Доповнення електронного довідника темою „Форми” .....................41 На цьому занятті ........................................................................................42


4

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються всі основні можливості та практичні аспекти застосування мови HTML (Hyper Text Markup Language, мова розмітки гіпертекстових документів) до розробки веб-сторінок. За основу взято останню на цей час базову версію HTML 4.01. Частина 4 методичних вказівок містить: основні відомості про впровадження зображень до веб-сторінки, управління їх розміщенням та використання; веб-форми, їх призначення, створення і використання. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати мову HTML та навчитись її застосовувати для розробки веб-сторінок та веб-сайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".


Магазин классных методичек!



5

Заняття 10

Зображення на веб-сторінці

Основні питання заняття - Вставка зображень. Елемент IMG - Розміри зображень. - Альтернативний текст і описання зображень. - Вертикальне вирівнювання зображень. - Горизонтальне вирівнювання зображень. Обтікання текстом - Рамка навколо зображення. - Поля навколо зображення. - Вставка фонових зображень. - Зображення-гіперпосилання. - Графічна карта гіперпосилань. - Доповнення електронного довідника темою „Зображення”

Вставка зображень. Елемент IMG Вставка зображення у веб-сторінку виконується за допомогою одиночного тега IMG, головний атрибут якого SRC (назва походить від англ. source - джерело) вказує URL (адресу) файлу зображення. URL

Уніфікований локатор ресурсу - адреса файлу в Інтернеті. Може бути абсолютним або відносним. Абсолютний URL має вид: http://www.somesite.com/images/file.gif. Звичайно, він вказує на файл зображення, розташований на іншому сервері. Відносний URL може бути таким: ../images/file.gif. Він вказує адресу файлу зображення, розташованого на тому ж сервері, що і веб-сторінка, до якої підключене зображення.

Лістинг 10.1. Файл 10.1.html <HTML><HEAD> <TITLE>Вставка зображення. Елемент IMG</TITLE> </HEAD>

http://www.somesite.com/images/file.gif


6

<BODY> <H1>Вставка зображення. Елемент IMG</H1><HR> <H3>Вставка зображення</H3> <IMG SRC="../images/blackcat.gif"> </BODY></HTML>

Розміри зображень Розміри зображення вказуються всередині тегу IMG за допомогою наступних атрибутів: WIDTH - ширина зображення (у пікселах) HEIGHT - висота зображення (у пікселах). Якщо атрибути WIDTH і HEIGHT не вказані, то зображення відображається у натуральний розмір. Але це дещо уповільнює завантаження веб-сторінки тому, що броузер витрачає деякий час на аналіз розміру зображення. Якщо файл зображення з якихось причин недоступний, то коли розміри не вказані, взаємне розташування елементів веб-сторінки може змінитися і дизайн веб-сторінки спотворюється. Коли ж розміри вказані - дизайн веб-сторінки зберігається. Якщо в атрибутах WIDTH та HEIGHT задати розміри, які не співпадають з істинними розмірами зображення, то зображення приймає задані розміри. Якщо лише в одному з атрибутів WIDTH або HEIGHT вказати довільний розмір, то другий розмір зображення пропорційно зміниться, і зображення змінить свій розмір із збереженням пропорцій. Лістинг 10.2. Файл 10.2.html <HTML><HEAD> <TITLE>Розміри зображення</TITLE> </HEAD> <BODY> <H1>Розміри зображення</H1><HR> <H2>Зображення у натуральний розмір</H2>


7

<H3>Атрибути WIDTH і HEIGHT не вказані</H3> <IMG SRC="../images/blackcat.gif"> <H3>Атрибути WIDTH="213" і HEIGHT="281" відповідають істинним розмірам зображення</H3> <IMG SRC="../images/blackcat.gif" WIDTH="213" HEIGHT="281"> <H2>Якщо файл зображення недоступний</H2> <H3>Атрибути WIDTH і HEIGHT не вказані</H3> <IMG SRC="../images/"> <H3>Атрибути WIDTH і HEIGHT вказані</H3> <IMG SRC="../images/" WIDTH="213" HEIGHT="281"> <H2>Зміна розмірів зображення</H2> <H3>Непропорційне спотворення</H3> <IMG SRC="../images/blackcat.gif" WIDTH="281" HEIGHT="213"> <H3>Пропорційне збільшення або зменшення зображення</H3> <H4>Пропорційне зменшення зображення</H4> <IMG SRC="../images/blackcat.gif" WIDTH="120"> <H4>Пропорційне збільшення зображення</H4> <IMG SRC="../images/blackcat.gif" WIDTH="468"> </BODY></HTML>

Альтернативний текст і описання зображень Якщо файл зображення з якихось причин недоступний (наприклад, деякі користувачі відключають у своєму броузері можливість перегляду графіки, щоб прискорити завантаження веб-сторінок), то замість зображення залишається порожнє місце. Для того, щоб повідомити користувача про зміст зображення, а також для потреб пошукових систем Інтернету, зображення повинні мати альтернативний текст, якій відображається на місці зображення, якщо воно не завантажилося. Альтернативний текст задається атрибутом ALT в елементі IMG.


8

Альтернативний текст з'являється у спливаючій підказці, коли навести мишу на зображення на веб-сторінці. Коли необхідно, щоб текст спливаючої підказки відрізнявся від альтернативного тексту, тоді спливаючу підказку задають атрибутом TITLE. Лістинг 10.3. Файл 10.3.html <HTML><HEAD> <TITLE>Альтернативний текст і описання зображення</TITLE> </HEAD> <BODY> <H1>Альтернативний текст і описання зображення</H1> <HR> <IMG SRC="../images/" WIDTH="468" HEIGHT="60"> <IMG SRC="../images/" WIDTH="468" HEIGHT="60" ALT="Це альтернативний текст. Він відображається на місці, де має бути зображення."> <IMG SRC="../images/blackcat.gif" WIDTH="213" HEIGHT="281" ALT="Зображення чорного кота у чорній кімнаті."> <IMG SRC="../images/blackcat.gif" WIDTH="213" HEIGHT="281" ALT="Зображення чорного кота у чорній кімнаті." TITLE="Чорний мужик у чорній кімнаті зловив чорного кота."> </BODY></HTML>


9

Пользуясь эти методическим пособием

Вы сможете детально, на прмерах, изучить язык гипетектовой разметки веб-страниц HTML


Вставка фонових зображень Фонове зображення для всієї веб-сторінки встановлюється за допомогою атрибуту BACKGROUND всередині тега BODY. Значенням цього атрибуту є URL (адреса) файлу, у якому зберігається фонове зображення. Наприклад, BACKGROUND="../images/fon.gif". Якщо крім атрибуту BACKGROUND у тег BODY вставити також атрибут BGPROPERTIES="FIXED", то фонове зображення буде нерухомим, тобто не буде прокручуватись при перегляді веб-сторінки. Фонове зображення веб-сторінки повинно відповідати тематиці сайту, і не повинно заважати перегляду основної інформації. Колір фону веб-сторінки повинен співпадати з основним тоном фонового зображення. Колір тексту має бути таким, щоб його легко було читати на тлі фонового зображення, також у випадку, якщо фонове зображення буде недоступним. Фонове зображення для всієї таблиці встановлюється за допомогою атрибуту BACKGROUND всередині тега TABLE. Фонове зображення для окремих комірок таблиці встановлюється за допомогою атрибуту BACKGROUND всередині тега TD або TH.



10

Лістинг 10.8. Файл 10.8.html <HTML><HEAD> <TITLE>Вставка фонових зображень. Атрибут BACKGROUND</TITLE> </HEAD> <BODY TEXT="BLACK" BACKGROUND="../images/bg_gray.jpg" BGPROPERTIES="FIXED"> <H1>Вставка фонових зображень. Атрибут BACKGROUND</H1><HR> <H2>Фонове зображення у таблицях</H2> <TABLE BORDER=1 WIDTH="75%" HEIGHT="75%" BACKGROUND="../images/sunset.jpg"> <TR> <TD>Ряд 1, комірка 1</TD> <TD>Ряд 1, комірка 2</TD> <TD>Ряд 1, комірка 3</TD></TR> <TR> <TD>Ряд 2, комірка 1</TD> <TD>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD></TR> <TR> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD>Ряд 3, комірка 3</TD></TR> </TABLE> <H2>Фонове зображення для окремих комірок таблиці</H2> <TABLE BORDER=0 BACKGROUND="../images/bg_blue.jpg"> <TR height=151>


11

<TD BACKGROUND="../images/penguin.jpg" width=128>Ряд 1, комірка 1</TD> <TD>Ряд 1, комірка 2</TD> <TD>Ряд 1, комірка 3</TD> </TR> <TR height=126> <TD>Ряд 2, комірка 1</TD> <TD BACKGROUND="../images/camera.jpg" width=158>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD> </TR> <TR height=281> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD BACKGROUND="../images/blackcat.gif" width=213>Ряд 3, комірка 3</TD> </TR> </TABLE> <P> <TABLE WIDTH="760" BGCOLOR="BLACK" BORDER="1" BORDERCOLOR="BLACK" CELLSPACING="0" CELLPADDING="0"> <TR HEIGHT="441" VALIGN=TOP> <TD BACKGROUND="../images/bg_math.gif" WIDTH="331"> <FONT SIZE=+1 FACE="Comic Sans MS" COLOR="NAVY"> <BR> <P ALIGN=CENTER>26 грудня 2004 р.<BR>Домашня робота.</P> <P ALIGN=CENTER>Завдання №1.</P>


12

<OL TYPE="a">Розв'язати квадратні рівняння: <LI>x² – 3x + 2 = 0; <LI>x² – 5x + 4 = 0; <LI>x² + 5x + 6 = 0; <LI>x² + 5x – 6 = 0. </OL> <P ALIGN=CENTER>Розв'язок.</P> <OL TYPE="a"> <LI>… ? </OL> </FONT> </TD> <TD BACKGROUND="../images/bg_book.jpg" WIDTH="98"></TD> <TD BACKGROUND="../images/bg_math.gif"> </TD> </TR> </TABLE> </BODY></HTML>

Зображення-гіперпосилання Якщо зображення помістити всередину контейнера А, то воно набуде всіх властивостей гіперпосилання. Лістинг 10.9. Файл 10.9.html <HTML><HEAD> <TITLE>Зображення-гіперпосилання</TITLE> </HEAD> <BODY> <H1>Зображення-гіперпосилання</H1> <HR> <P>Зображення-гіперпосилання виділяється


13

кольоровою рамкою того ж кольору, який мають текстові гіперпосилання. Товщина рамки задається атрибутом BORDER.</P> <A HREF="10.6.html" TARGET="_blank"> <IMG SRC="../images/blackcat.gif" BORDER="2" ALT="Чорний кіт у чорній кімнаті." TITLE="Це гіперпосилання відкриває сторінку «Рамка навколо зображення»"></A> <P>Коли зображення недоступне, гіперпосилання залишається працездатним:</P> <A HREF="10.6.html" TARGET="_blank"> <IMG SRC="../images/" BORDER="2" ALT="Чорний кіт у чорній кімнаті." TITLE="Це гіперпосилання відкриває сторінку «Рамка навколо зображення»"></A> </BODY></HTML>


14

Заняття 11

Форми

Основні питання заняття - Створення форми. Елемент FORM - Елементи управління форми - Кнопки у формах - Текстове поле (тип TEXT) - Поле вводу пароля (тип PASSWORD) - Велике текстове поле. Елемент TEXTAREA - Поле вибору файлів (тип FILE) - Прапорці (тип CHECKBOX) - Перемикачі (тип RADIO) - Списки вибору. Елемент SELECT - Групування елементів форми. Елементи FIELDSET та LEGEND - Приклад форми - Доповнення електронного довідника темою „Форми”

Створення форми. Елемент FORM Форма - це електронний бланк для введення даних та їх наступної відправки за призначенням. Форма створюється за допомогою елемента FORM, який має такі атрибути: NAME - задає ім'я форми (латинськими буквами); ім'я форми використовується сценаріями JavaScript, які працюють з формою ACTION - обов'язковий атрибут, задає адресу URL за якою передаються дані уведені до форми. Це може бути адреса електронної пошти, або (звичайно) URL програми CGI або скрипта, якій виконує обробку даних форми. Якщо атрибут ACTION відсутній, то замість нього підставляється URL самого документа, де міститься форма. Наприклад,


15

ACTION="http://www.poltava.biz/cgi-bin/process.exe" - атрибут ACTION вказує, що дані уведені до форми, будуть передані для обробки до програми process.exe, яка розташована за адресою http://www.poltava.biz/cgi-bin/ ACTION="mailto:[email protected]" - атрибут ACTION вказує, що дані уведені до форми, будуть передані електронною поштою на адресу [email protected] METHOD - задає спосіб (метод) передачі даних до ресурсу, вказаному в атрибуті ACTION. Атрибут METHOD може приймати два значення: METHOD="GET" - використовують для передачі невеликих форм з короткими полями METHOD="POST" - використовують для передачі великих форм, та форм що містять секретну інформацію. Лістинг 11.1. Файл 11.1.html <HTML><HEAD> <TITLE>Створення форми. Елемент FORM</TITLE> </HEAD> <BODY> <H1>Створення форми. Елемент FORM</H1><HR> <FORM NAME="form_1" ACTION="mailto:[email protected]" METHOD="POST"> ... Елементи форми ... </FORM> </BODY></HTML>

Елементи управління форми Елементи управління форми створюються всередині елемента FORM за допомогою тегів INPUT, TEXTAREA, SELECT Атрибут TYPE

http://www.poltava.biz/cgi-bin/process.exe

http://www.poltava.biz/cgi-bin/

mailto:[email protected]




16

Тип елементу управління INPUT та його властивості визначає атрибут TYPE, який може мати такі значення: TYPE="TEXT" - створює текстове поле, що використовується для вводу тексту TYPE="PASSWORD" - створює поле введення пароля TYPE="HIDDEN" - створює приховане поле, яке може містити дані приховані від користувача TYPE="FILE" - створює поле вибору файлу (відкриває доступ до файлової системи комп'ютера) TYPE="CHECKBOX" - створює прапорець TYPE="RADIO" - створює перемикач TYPE="SUBMIT" - створює кнопку відправки даних TYPE="RESET" - створює кнопку "збросу даних" TYPE="BUTTON" - створює кнопку загального призначення; може використовуватися поза формою TYPE="IMAGE" - створює кнопку, яка виглядає як задане зображення Елемент TEXTAREA - створює поле, яке призначене для вводу великого тексту (декілька рядків) Елемент SELECT - створює список з можливістю вибору із запропонованих варіантів Інші атрибути елементів управління форми Атрибут ALIGN - задає вирівнювання елемента управління по вертикалі. Може приймати такі ж значення, як і для елемента IMG. Атрибут CHECKED - застосовується для прапорців та перемикачів. Задає встановлений спочатку прапорець або перемикач. Атрибут NAME - задає ім'я елемента форми (латинськими буквами), яке використовується сценаріями обробки форми. Атрибут SIZE - задає ширину текстового поля (в символах). Атрибут MAXLENGTH - задає максимальну кількість символів, які можна ввести у текстове поле.


17

Атрибут SRC - використовується спільно з атрибутом TYPE="IMAGE" і задає URL зображення, яке використовується для кнопки-зображення. Атрибут VALUE - задає початкове значення елементу управління, яке передається із форми до сценарію обробки, якщо користувачем не буде задано інше значення. Атрибут TABINDEX - задає порядок переходу по елементах форми при натисканні клавіші TAB. Лістинг 11.2. Файл 11.2.html <HTML><HEAD> <TITLE>Елементи управління форми</TITLE> </HEAD> <BODY> <H1>Елементи управління форми</H1><HR> <FORM> <PRE> Текстове поле <INPUT TYPE=TEXT> Поле вводу паролю <INPUT TYPE=PASSWORD> Приховане поле <INPUT TYPE=HIDDEN> Поле вибору файлу <INPUT TYPE=FILE> Прапорці <INPUT TYPE=CHECKBOX CHECKED> <INPUT TYPE=CHECKBOX> <INPUT TYPE=CHECKBOX> Перемикачі <INPUT TYPE=RADIO


18

NAME="per" CHECKED> <INPUT TYPE=RADIO NAME="per"> <INPUT TYPE=RADIO NAME="per"> Великий текст <TEXTAREA NAME=Instructions ROWS=2 COLS=64></TEXTAREA> Список вибору <SELECT> <OPTION SELECTED>Виберіть щось одне <OPTION>Один <OPTION>Два <OPTION>Три <OPTION>Чотири <OPTION>П'ять </SELECT> Кнопка відправки даних <INPUT TYPE=SUBMIT> Кнопка "збросу" даних <INPUT TYPE=RESET> Кнопка <INPUT TYPE=BUTTON VALUE="Кнопка"> Кнопка-зображення <INPUT TYPE=IMAGE SRC="../images/camera.jpg"> </PRE> </FORM>


19

</BODY></HTML>

Кнопки у формах Кнопка - це елемент управління, при клацанні на якому відбувається деяка дія, пов'язана з цією кнопкою. Наприклад, - відбувається відправка даних з форми, скасування введених даних (до їх відправки), або інша дія, яка була запрограмована веб-майстром. Звичайна кнопка загального призначення створюється всередині контейнера FORM за допомогою тега INPUT з атрибутом TYPE="BUTTON". Її додаткові атрибути: VALUE - текст на кнопці NAME - ім'я кнопки (латинськими літерами), яке використовується сценаріями (програмами) обробки форми Кнопка SUBMIT призначена для запуску процедури відправки даних форми. Вона створюється всередині контейнера FORM за допомогою тега INPUT з атрибутом TYPE="SUBMIT". Процедура відправки даних форми задається всередині тега FORM. Кнопка RESET призначена для сбросу значень і приведення форми до початкового стану. Вона створюється всередині контейнера FORM за допомогою тега INPUT з атрибутом TYPE="RESET". Кнопка-зображення дозволяє використати замість кнопки будь-яке зображення. Кнопка-зображення створюється за допомогою тега INPUT з атрибутом TYPE="IMAGE". Також необхідний атрибут SRC, якій задає адресу URL зображення, яке буде використано у якості кнопки. Лістинг 11.3. Файл 11.3.html <HTML><HEAD> <TITLE>Кнопки</TITLE> </HEAD> <BODY><H1>Кнопки</H1><HR> <H2>Звичайна кнопка BUTTON</H1> <INPUT TYPE=BUTTON VALUE="Звичайна кнопка" NAME="knopka1"> <H2>Кнопка типу SUBMIT</H1>


20

<INPUT TYPE=SUBMIT VALUE="Відправка даних" NAME="vidpravka"> <H2>Кнопка типу RESET</H1> <INPUT TYPE=RESET VALUE="Очистити форму" NAME="clear_data"> <H2>Кнопка-зображення типу IMAGE</H1> <INPUT TYPE=IMAGE SRC="../images/camera.jpg" ALIGN="MIDDLE" TITLE="Відправка фотографії" NAME="send_photo"> </BODY></HTML>

Текстове поле (тип TEXT) Текстове поле - елемент форми, призначений для вводу текстових даних (тексту). Воно створюється всередині елемента FORM за допомогою елементу INPUT з обов'язковим атрибутом TYPE="TEXT". Головні атрибути текстового поля: TYPE="TEXT" NAME SIZE MAXLENGTH VALUE Лістинг 11.4. Файл 11.4.html <HTML><HEAD> <TITLE>Текстове поле (TEXT)</TITLE> </HEAD> <BODY><H1>Текстове поле</H1><HR> <H2>Елемент INPUT типу TYPE="TEXT"</H2><HR> <FORM> <PRE> Ім'я <INPUT TYPE=TEXT NAME=imya SIZE=20


21

MAXLENGTH=20 VALUE="Вася"> Телефон <INPUT TYPE=TEXT NAME=phone SIZE=25 MAXLENGTH=12 VALUE="(0532) 123-456"> Email <INPUT TYPE=TEXT NAME=email SIZE=30 MAXLENGTH=30 VALUE="[email protected]"> </PRE> </FORM> <HR></BODY></HTML>

Пользуясь эти методическим пособием Вы сможете детально, на прмерах, изучить язык

гипетектовой разметки веб-страниц HTML


Перемикачі (тип RADIO) Перемикачі- це елементи управління, які дозволяють клацнувши мишею вибрати лише один з кількох можливих параметрів заданих у формі. Перемикачі завжди створюються групами, бо немає сенсу в одному перемикачеві. Перемикачі створюються всередині елемента FORM за допомогою елементу INPUT, який має атрибут TYPE="RADIO". Перемикачі мають такі обов'язкові атрибути: TYPE="RADIO" NAME - ім'я групи перемикачів, однакове для усіх пермикачів, що входять у дану групу




22

VALUE - значення, яке передається для подальшої обробки при відправці форми, якщо даний перемикачбуде увімкнений користувачем. Встановлений перемикач має атрибут CHECKED. Підписи, які розміщені поруч з перемикачами, можна зв'язати з перемикачами так, щоб перемикач встановлювався при клацанні на підписі. Для цього: для кожного перемикача необхідно вказати спеціальний атрибут ID, який задає унікальний ідентифікатор перемикача. Відповідні підписи перемикачів необхідно помістити у контейнер LABEL, зв'язаний з перемикачем за допомогою атрибута FOR, якій повинен мати таке саме значення, яке має атрибут ID відповідного перемикача. Лістинг 11.9. Файл 11.9.html <HTML><HEAD> <TITLE>Перемикачі (RADIO)</TITLE> </HEAD> <BODY><H1>Перемикачі</H1><HR> <H2>Елемент INPUT типу TYPE="RADIO"</H2> <FORM> <H2><I>Де ви збираєтесь провести відпустку ?</I></H2> <INPUT TYPE=RADIO NAME=Rest VALUE="sea" CHECKED> На морі<BR> <INPUT TYPE=RADIO NAME=Rest VALUE="mount"> У горах<BR> <INPUT TYPE=RADIO NAME=Rest VALUE="travel"> У подорожі<BR> <INPUT TYPE=RADIO NAME=Rest VALUE="home"> Вдома<BR><BR> <INPUT TYPE=SUBMIT VALUE="Відправити"> <INPUT TYPE=RESET VALUE="Скасувати"> </FORM>


23

<HR> <H2>Зв'язування підписів з перемикачами</H2> <FORM> <H2><I>Де ви збираєтесь провести відпустку ?</I></H2> <INPUT TYPE=RADIO ID="R1" NAME=Rest VALUE="sea" CHECKED> <LABEL FOR="R1">На морі</LABEL><BR> <INPUT TYPE=RADIO ID="R2" NAME=Rest VALUE="mount"> <LABEL FOR="R2">У горах</LABEL><BR> <INPUT TYPE=RADIO ID="R3" NAME=Rest VALUE="travel"> <LABEL FOR="R3">У подорожі</LABEL><BR> <INPUT TYPE=RADIO ID="R4" NAME=Rest VALUE="home"> <LABEL FOR="R4">Вдома</LABEL><BR><BR> <INPUT TYPE=SUBMIT VALUE="Відправити"> <INPUT TYPE=RESET VALUE="Скасувати"> </FORM> </BODY></HTML>


Магазин классных методичек!


Гимнастика для глаз

А. Динамический комплекс

1. Движения глаз вправо-влево, 30 секунд.

2. Движения глаз вверх-вниз, 30 секунд.

3. Движения глаз по диагоналям, по 30 секунд.

4. Круговые движения глазами по часовой стрелке, 30 секунд.

5. Круговые движения глазами против часовой стрелки, 30 секунд.

6. Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз

1. Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

2. Быстро моргать в течение 1-2 минут.

3. Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 25-30 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

4. Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

5. Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

6. Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.

Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.

html 4

Documents