Зробити графічну копію результатів пошуку в знайденому для підключення її до файлу-звіту до другої лабораторної роботи
Проаналізуйте результати пошуку й виберіть 3 посилання, що зацікавили Вас, (оформите за викладеними вище правилами)
Виконати тематичний пошук у мережі Інтернет на основі розширеного запиту
Увійти в пошукову систему www.google.com
Перейдіть на посилання "Розширений пошук"
Створити запит для розширеного пошуку по темі курсової роботи, що виконується Вами в поточному семестрі. Нажати кнопку "Шукати в Інтернет". Зіставити результуючий рядок запиту в отриманій сторінці з результатами пошуку, синтаксис написання запитів у теоретичній частині даної лабораторної роботи, значення полів форми розширеного запиту для одержання чіткого подання про правила формування розширеного запиту. Якщо при виконанні розширеного пошуку знайдено дуже мало інформації, варто послабити обмеження на результати пошуку. Із цим необхідно поекспериментувати і для звітного варіанта скористатися найбільш вдалим запитом.
Зробити графічну копію
форми розширеного пошуку із заповненими полями;
результатів пошуку;
зробіть текстову копію результуючого рядка запиту. Створення графічних файлів виконати аналогічно пункту 2.
Проаналізуйте результати пошуку й виберіть 3 посилання, що зацікавили Вас. Оформити аналогічно пункту 2.
Створення звіту до виконання лабораторної роботи в гіпертекстовому форматі
Створіть до другої лабораторної роботи за допомогою редактора БЛОКНОТ звіт у гіпертекстовому форматі й збережете в папці public_html файл із ім'ям LAB2.html. Виконати даний пункт аналогічно процесу створення файлу LAB1.html у першій лабораторній роботі.
Запишіть обов'язкові теги html документа
У частину <HEAD></HEAD> додайте МЕТА інструкції, які встановлюють кодування даного документа, дозволяють задати ключові слова до сторінки й короткий опис даної сторінки. Додайте аналогічні інструкції до всіх створеним Вами гіпертекстових документах.
У частині <BODY></BODY> структуруйте інформацію за допомогою таблиць:
Як заголовок документа вкажіть наступну фразу: "Звіт про проведення пошуку інформації з теми курсової роботи:'__________'".
Наступну інформацію структуруйте за допомогою таблиць: Ячейка 1.1-картинка з результатами простого запиту Ячейка 1.2-картинка з результатами пошуку в знайденому. Рядок 2 (ячейки 2.1 й 2.2 необхідно об’єднати) увести посилання на відібрані на основі простого запиту інформаційні джерела мережі Інтернет.
Ячейка 3.1 - картинка із заповненими полями форми розширеного запиту. Ячейка 3.2 - картинка з результатами розширеного пошуку Рядок 4 (ячейкі 4.1 й 4.2 необхідно об'єднати) - увести результуючу на основі розширеного запиту рядок запиту Рядок 5 (ячейкі 5.1 й 5.2 необхідно об'єднати) - увести посилання на відібрані на основі розширеного запиту інформаційні джерела мережі Інтернет.
У файлі main.html додайте посилання на файл-звіт до другої лабораторної роботи.
Контрольні питання:
Пошук інформації в мережі Інтернет
Які пошукові системи в Інтернет Вам відомі
Як будується простий запит
Що таке синтаксис написання запитів
Що значить "розширений запит"
Як може здійснюватися процес звуження кількості документів, що відповідають темі пошуку
Основні теги HTML, які необхідно знати після виконання даної лабораторної роботи.
Коротко опишіть яку роль при складанні гіпертекстового документа грають наступні теги і їхні атрибути:
<TR>; <FRAMESET COLS="50%, *">; <NOFRAMES>; <A NAME="AAA">; <TABLE> <TD>;
<FRAME SRC="URL">; <FRAMESET NORESIZE>; < A HREF="URL#NAME1">; <TABLE>; < A HREF="URL" TARGET="fr1">;
<CAPTION ALIGN="BOTTOM">; <TABLE WIDTH=80%>; <META NAME="DISCRIPTION"> <TR VALIGN="MIDDLE">; <FRAMESET ROWS="25%, *">; <FRAME SCROLLING="NO">;
<A NAME="AAA"> РОЗДІЛ 1 </A>; <META NAME="KEYWORDS"> <META HTTP-EQUIV="Content type" CONTENT="text/html; charset=koi8-ru">; <CAPTION>; < FRAMESET ROWS="20%, *" >; < A HREF="#NAME1">;
Теоретична частина
Таблиці
Визначити таблицю |
<TABLE></TABLE> |
|
Окантовка таблиці |
<table border=?></TABLE> |
|
Відстань між комірками |
<TABLE CELLSPACING=?> |
|
Доповнення комірок |
<TABLE CELLPADDING=?> |
|
Бажана ширина |
<TABLE WIDTH=?> |
(у пікселах) |
Ширина у відсотках |
<TABLE WIDTH="%"> |
(відсотки від ширини сторінки) |
Рядок таблиці |
<TR></TR> |
|
Вирівнювання |
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
Ячейка таблиці |
<TD></TD> |
(повинна бути усередині рядка) |
Вирівнювання |
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
Без переводу рядка |
<TD NOWRAP> |
|
Розтягування по колонці |
<TD COLSPAN=?> |
|
Розтягування по рядку |
<TD ROWSPAN=?> |
|
Бажана ширина |
<TD WIDTH=?> |
(у пікселах) |
Ширина у відсотках |
<TD WIDTH="%"> |
(відсотки від ширини сторінки) |
Кольори коміркі |
<TD BGCOLOR="#$$$$$$"> |
|
Заголовок таблиці |
<TH></TH> |
(як данні, але жирний шрифт і центрування) |
Вирівнювання |
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
Без переходу рядка |
<TH NOWRAP> |
|
Розтягування по колонці |
<TH COLSPAN=?> |
|
Розтягування по рядку |
<TH ROWSPAN=?> |
|
Бажана ширина |
<TH WIDTH=?> |
(у пікселах) |
Ширина у відсотках |
<TH WIDTH="%"> |
(відсотки ширини таблиці) |
Кольори ячейкі |
<TH BGCOLOR="#$$$$$$"> |
|
Заголовок таблиці |
<CAPTION></CAPTION> |
|
Вирівнювання |
<CAPTION ALIGN=TOP|BOTTOM> |
(зверху/знизу таблиці) |
Фрейми
Документ із фреймами |
<FRAMESET></FRAMESET> |
(замість <BODY>) |
Висота рядків |
<FRAMESET ROWS=,,,></FRAMESET> |
(піксели або %) |
Висота рядків |
<FRAMESET ROWS=*></FRAMESET> |
(* = відносний розмір) |
Ширина колонок |
<FRAMESET COLS=,,,></FRAMESET> |
(піксели або %) |
Ширина колонок |
<FRAMESET COLS=*></FRAMESET> |
(* = відносний розмір) |
Ширина окантовки |
<FRAMESET BORDER=?> |
|
Окантовка |
<FRAMESET FRAMEBORDER="yes|no"> |
|
Кольори окантовки |
<FRAMESET BORDERCOLOR="#$$$$$$"> |
|
Визначити фрейм |
<FRAME> |
(зміст окремого фрейму) |
Документ |
<FRAME SRC="URL"> |
|
Ім'я фрейму |
<FRAME NAME="***"|_blank|_self| _parent|_top> |
|
Ширина границі |
<FRAME MARGINWIDTH=?> |
(права й ліва границі) |
Висота границі |
<FRAME MARGINHEIGHT=?> |
(верхня й нижня границі) |
Скролінг |
<FRAME SCROLLING="YES|NO|AUTO"> |
|
Постійний розмір |
<FRAME NORESIZE> |
|
Окантовка |
<FRAME FRAMEBORDER="yes|no"> |
|
Кольори окантовки |
<FRAME BORDERCOLOR="#$$$$$$"> |
|
Зміст без фреймів |
<NOFRAMES></NOFRAMES> |
(для браузерів, що не підтримують фрейми) |
Різне
Коментар |
<!-- *** --> |
(ігнорується браузером) |
Метаінформація |
<META> |
(повинне бути в заголовку) |
Обновити |
<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> |
|
Така META-інструкція визначає змінну description, що містить короткий зміст документа. |
<META NAME="description" CONTENT="Це підручник для тих, хто хоче публікувати документацію будь-якого роду у глобальній комп'ютерній мережі Інтернет"> |
|
Така META-інструкція визначає змінну keywords, що містить набір ключових слів, що описують зміст документа. |
<META NAME="keywords" CONTENT="Інтернет, HTML, WWW, підручник, публікація, гіпертекст"> |
|
Ця META-інструкція дає браузеру вказівку інтерпретувати документ як HTML-текст у кодуванні Windows/1251. |
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> |
|
Ця META-інструкція абсолютно аналогічна попереднії, тільки як кодування зазначене КОІ-8. |
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r"> |
|
Лабораторна робота №3
ЦІЛЬ: Вивчення принципів роботи з електронною поштою. Вивчення Форм й & послідовностей гіпертекстового документа.
ТЕОРЕТИЧНА ЧАСТИНА:
Теги HTML (практичне руководство)
Спеціальні сімволи (& послідовності)
Форми
Практична частина:
РОБОТА З ЕЛЕКТРОННОЮ ПОШТОЮ
Використання web інтерфейсу для роботи з e-mail
Зайдіть на сайт www.ukr.net і зареєструйте власну поштову скриньку:
Після завантаження стартової сторінки сайту перейдіть по посиланню "Новий користувач" на сторінку для реєстрації поштової скриньки
Уважно прочитайте реєстраційну угоду й прийміть всі його пункти. Надалі строго дотримуйте прийнятих зобов'язань
У формі для реєстрації необхідно заповнити всі поля, крім поля адреса поштової скриньки
При виборі логина рекомендується скористатися комбінацією ім_фам, де "ім" - це фрагмент імені, а "фам" - це фрагмент Вашого прізвища.
Обов'язково вкажіть правдиве прізвище й ім'я у відповідних полях для реєстрації. Запам'ятаєте Ваш логин і пароль.
Після успішної реєстрації адреса Вашої поштової адреси має вигляд: логин@ukr.net. Увійдіть у систему роботи з Вашою поштою
Напишіть лист
Відкрийте форму для створення листа. Для цього в гіпертекстовому інтерфейсі, пропонованому системою ukr.net для роботи з Вашою поштовою скринькою перейдіть на посилання "Написати листа"
Адресуйте лист одному із членів Вашої групи. Для цього в поле "Кому" укажіть e-mail адреса одного з однокурсників
Розішліть копію даного повідомлення іншим членам групи по видимому списку розсилання. Для цього в поле "Копія" укажіть через кому e-mail адреси ще мінімум двох однокурсників - це формується видимий список розсилання. І первинний адресат, і члени списку розсилання при одержанні листа будуть знати, хто одержав копії даного повідомлення. Якщо скористатися полем "Схована копія" для формування списку розсилання, то жоден з одержувачів не буде знати, кому прийшли копії даного повідомлення.
Укажіть тему листа. Тема Вашого листа повинна відображати коротку інформацію про зміст листа. При одержанні листа Ваш адресат первинно читає тему листа, а лише потім вирішує, треба його відкривати чи ні.
Напишіть текст листа. Текст листа повинен бути написаний грамотно й мати три структурні елементи: 1-вітання; 2-тіло листа; 3-підпис листа
У вітанні допускається звертання до адресата по його "Ник Нейму" або псевдоніму. У мережі прийнято спілкуватися використовуючи імена, але необхідно пам'ятати, що всі правила реальної субординації повинні виконуватися в переписці.
Тіло листа повинне бути написане без помилок. Для вираження емоцій в електронній пошті використаються емоційні піктограми або "смайлики". :) - посмішка, ;) - підмигування, :0 - подив, :( - прикрість і т.д. При написанні тіла контрольного листа Вам необхідно скористатися однієї з піктограм.
Підпис листа - це слова прощання й вказівка імені й роду діяльності авторів. Прикладом коректного підпису є наступна - З повагою, Петров Іван, студент 2 курсу ОРІДУ НАДУ.
Приєднати до даного листа довільний текстовий файл. Для цього:
створіть або виберіть довільний невеликий текстовий файл. Архівуйте даний файл шляхом створення архіву, що саморозпаковується (створити архів за допомогою програми WinRAR).
Після тіла листа в пункті приєднання файлу натисніть на кнопку "Огляд" і виберіть приготовлений для пересилання архівний файл. Натисніть "Ок".
У формі для створення листа натисніть кнопку "Приєднати". Якщо все зроблено правильно, то повне ім'я приєднаного файлу відобразиться після тіла листа.
Створити графічну копію листа й зберегти неї в папці public_html/pictures/3. При створенні графічної копії зверніть увагу на те, що всі структурні елементи листа й Ваше прізвище й Ім'я повинні міститися на одній сторінці робочого вікна браузера. Якщо щось не міститься, то розширьте робоче вікно шляхом приховання панелі інструментів й адресного рядка.
Відправити даний лист, для цього натисніть кнопку "Відправити". Після відправлення зробіть графічну копію підтвердження про відправлення й збережіть її в папці public_html/pictures/3. Обов'язковою умовою при реєстрації є вказівка повністю власного імені прізвища й по батькові, тоді створені Вами картинки будуть однозначно ідентифікувати Вашу роботу.
Вийдіть із сеансу роботи з Вашою поштовою скринькою.
Використання спеціалізованої поштової програми Outlook Express для роботи з e-mail.
Відкрийте поштову програму Outlook Express і створіть у ній обліковий запис для роботи з безкоштовною поштовою скринькою, що був зареєстрований на сайті www.ukr.net. Для цього:
На сайті www.ukr.net знайдіть інформацію про адресу сервера вхідної й вихідної пошти. Ця інформація, як правило, перебуває в розділі додаткової інформації для зареєстрованих користувачів. У нашому випадку:
POP3 сервер (вхідна пошта) freemail.ukr.net
SMTP сервер (вихідна пошта) freemail.ukr.net
Після відкриття поштової програми ввійдіть у пункт меню СЕРВІС - ОБЛІКОВИЙ ЗАПИС
У з’явившемуся діалоговому вікні натисніть кнопку "додати..." і виберіть у запропонованому списку "пошта"
Далі необхідно заповнювати пропоновані діалогові вікна й тиснути кнопку "Далі". У діалогових вікнах у відповідних полях вводиться наступна інформація:
У поле "Уведіть ім'я" - Ваше ім'я й прізвище
У поле "Адреса електронної пошти" - Адреса Вашої поштової скриньки (логин@ukr.net)
У поле "Сервер вхідних повідомлень (POP3)" - freemail.ukr.net
У поле "Сервер вихідних повідомлень (SMTP)" - freemail.ukr.net
У поле "Обліковий запис" - Ваш логін
Заберіть галочку в полі "Запам'ятати пароль"
Після натискання кнопки "Готове" Ви попадаєте в список всіх облікових записів поштової програми, а нова облікова запись виявляється виділеною. Натисніть кнопку "Властивості", переконайтеся, що вся інформація уведена Вами правильно. Зробіть графічну копію закладки "Загальні", де відображається Ваше прізвище й Ваш e-mail адреса, збережете малюнок у папку public_html/pictures/3. У закладці "Підключення" поставте галочку для варіанта "Підключатися використовуючи локальну мережу". Застосуєте зміни й закрийте діалогове вікно "Облікові записи"
У зв'язку з тим, що новий обліковий запис був автоматично обраний "Використати за замовчуванням", Ви потрапили в режим роботи з Вашим обліковим записом. У панелі інструментів натисніть кнопку "Доставити пошту". У діалоговому вікні, що з'явилося, уведіть Ваш пароль й одержите пошту з Вашої поштової скриньки.
Відкрийте папку "Вхідні", у якій повинні перебувати адресовані Вам листа від Ваших однокурсників. Зробіть графічну копію списку отриманих повідомлень і збережете в папці public_html/pictures/3
Навички по створенню листів, адресних книг, автоматичних підписів і т.д. необхідно освоїти самостійно.
ВИВЧЕННЯ ТЕГІВ ДЛЯ ПОБУДОВИ ФОРМ І СТВОРЕННЯ ЗВІТУ ДО ЛАБОРАТОРНОЇ РОБОТИ
Відкрийте редактор Блокнот (пуск - програми - стандартні - блокнот)
Збережете порожній документ у робочій папці public_html привласніть йому ім'я LAB3.html
У створений документ внесіть обов'язкові теги гіпертекстового документа. Внесіть необхідні Позначка інструкції.
Виберіть завдання по створенню форм з нижче наведеного списку. Номер завдання повинен збігатися з Вашим порядковим номером у журналі групи. Скопіюйте своє завдання й створіть черговий малюнок у папці public_html/pictures/3, який необхідно вставити у файл-звіт перед виконанням завдання.
Виконаєте своє завдання по створенню форм. При виконанні завдання строго дотримуйтеся форматування на основі таблиць, що пропонується в завданнях.
Після виконання завдання по створенню форми у файлі-звіті необхідно структурувати на основі іншої таблиці звіт про роботу з електронною поштою. У даний звіт повинні бути включені 4 графічних файли, які підтверджують виконання завдань по створенню особистої поштової скриньки, відправленню листів, а також по роботі з поштовою програмою.
Наприкінці звіту по лабораторній роботі поставте по центру знак © авторського права на текстову й графічну інформацію електронного документа після якого вкажіть своє прізвище й ім'я. Для відображення даного знака знайдіть його код у таблиці кодів символів і скористайтеся & послідовністю для відображення даного символу.
Добавить гіперпосилання на звіт до 3 лабораторній роботі у файл main.html
Контрольні питання
Електронна пошта
Поясните структуру e-mail адреси
Що таке емоційної піктограми
Що таке підпис у листі
Що позначає й де відображається тема листа
Що таке видимий і схований список розсилання
Що таке приєднаний файл листа
Яка структура листа вважається правильною
Теги HTML
Поясните призначення тегу <INPUT>, значення й параметри наступних атрибутів:
TYPE=text
SIZE, MAXLENGTH ,NAME
TYPE=password
SIZE, MAXLENGTH ,NAME
TYPE=radio
NAME, VALUE, checked
TYPE=checkbox
NAME, VALUE, checked
TYPE=hidden
TYPE=reset
NAME, VALUE
TYPE=submit
NAME, VALUE
Опишіть як форма збирає дані
Опишіть призначення й можливі параметри атрибута ACTION тегу <FORM>
Поясніть роль тегу <TEXTAREA> </TEXTAREA> у формі й призначення його атрибутів
NAME ROWS COLS
Поясніть роль тегів <SELECT ><OPTION>, укажіть призначення атрибутів MULTIPLE, SIZE, VALUE.
Теоретична частина Спеціальні символи (уводити тільки в нижньому регістрі)
Спеціальний символ |
&#?; |
(де ? це код ISO 8859-1) |
< |
< |
|
> |
> |
|
& |
& |
|
" |
" |
|
Торговельна марка ТМ |
® |
|
Copyright |
© |
|
Неподіляючий пробіл |
|
|
© Знак авторського права |
|
|
Форми
Визначити форму |
<FORM ACTION="URL" METHOD=GET|POST></FORM> |
|
Посилка файлу |
<FORM ENCTYPE="multipart/form-data"></FORM> |
|
Поле уведення |
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET"> |
|
Ім'я поля |
<INPUT NAME="***"> |
|
Значення поля |
<INPUT VALUE="***"> |
|
Відзначений? |
<INPUT CHECKED> |
(checkboxes й radio boxes) |
Розмір поля |
<INPUT SIZE=?> |
(у символах) |
Максимальна довжина |
<INPUT MAXLENGTH=?> |
(у символах) |
Список варіантів |
<SELECT></SELECT> |
|
Ім'я списку |
<SELECT NAME="***"></SELECT> |
|
Число варіантів |
<SELECT SIZE=?></SELECT> |
|
Множественний вибір |
<SELECT MULTIPLE> |
(можна вибрати більше одного) |
Опція |
<OPTION> |
(елемент який може бути обраний) |
Опція за замовчуванням |
<OPTION SELECTED> |
|
Уведення тексту, розмір |
<TEXTAREA ROWS=? COLS=?></TEXTAREA> |
|
Ім'я тексту |
<TEXTAREA NAME="***"></TEXTAREA> |
|
Розбивка на рядки |
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA> |
|
Завдання для індивідуальної роботи
Завдання 1
Створити форму для уведення відомості нарахування зарплати. Відомість расчитана на бригаду з 10 чоловік. Для кожної людини повинна вводитися наступна інформація:
ФИО |
Просте текстове уведення |
Оклад |
Просте текстове уведення. Ограничте розмір уводить строки, що, розумним числом. |
Чи основне місце роботи |
Чек-бокс |
Відділ |
Серія радіо^-кнопок |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 2
Створити форму для уведення бухгалтерської проводки. Повинна вводитися наступна інформація:
Рахунок-Дебет |
Вибір зі спадаючі меню. |
Рахунок-Кредит |
Вибір зі спадаючі меню. |
Сума |
Просте текстове уведення. Ограничте розмір уводить строки, що, розумним числом. |
Особистий код бухгалтера |
Вибір зі спадаючі меню. |
Пароль |
Поле для уведення паролів |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 3
Створити форму для уведення інформації про бажаний для клієнта варіанті міжміського обміну. Повинна вводитися наступна інформація:
ФИО |
Просте текстове уведення |
Адреса |
Просте текстове уведення |
Кількість кімнат у клієнта |
Спадаюче меню. |
Бажані міста |
Список з можливістю вибору декількох варіантів. |
Бажана кількість кімнат |
Спадаюче меню. |
Поверховість |
Серія радіо^-кнопок. Наприклад, "Будь-яка", "Крім першого", "Крім останнього", "Крім першого й останнього", і т.д. |
Додаткові умови |
Многострочное текстове поле. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 4
Створити форму для уведення інформації про бажаний для клієнта варіанті внутріміського обміну квартири. Повинна вводитися наступна інформація:
ФИО |
Просте текстове уведення |
Адреса |
Просте текстове уведення |
Кількість кімнат у клієнта |
Спадаюче меню. |
Бажані райони |
Список з можливістю вибору декількох варіантів. |
Бажана кількість кімнат |
Спадаюче меню. |
Поверховість |
Список з можливістю вибору декількох варіантів. |
Додаткові умови |
Многострочное текстове поле. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 5
Створити форму для реєстрації нового користувача в системі або просто входу в систему. Повинна бути напис, що новий користувач зобов'язаний увести пароль двічі жля підтвердження, а користувач, що вже був зареєстрований, уводить пароль один раз. Повинна вводитися наступна інформація:
Ім'я |
Текст. |
Текст. |
|
URL |
Текст. |
Пароль |
Поле уведення пароля. |
Підтвердження пароля |
Поле уведення пароля. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 7
Створити форму для пошуку підходящого будинку в базі даних риэлтерской фірми. Повинна вводитися наступна інформація:
Площа |
Уводиться текстом. |
Поверховість |
Спадаюче меню. |
Район |
Список з можливістю вибору декількох варіантів. |
Наявність комунікацій |
Серія чеків-боксів. Наприклад "Водопровід", "Телефон", і т.д. |
Додаткові вимоги |
Многострокове поле вводу |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 8
Створити форму для пошуку підходящих матеріалів у бібліотеці. Повинна вводитися наступна інформація:
Ключові слова |
Уводиться текстом. |
Рік публікації |
Вибір діапазонів зі спадаючі меню. |
Характер публікації |
Список з можливістю вибору декількох варіантів. Наприклад, "Стаття в журналі", "Дисертація", "Монографія" і т.д. |
Мова |
Список з можливістю вибору декількох варіантів. |
Доставка |
Серія радіо^-кнопок. Наприклад "Підняти в читальний зал", "Доставити на абонемент", і т.д. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 9
Створити форму для замовлення на відновлення комп'ютера. Наступна інформація повинна вводитися, як для наявного комп'ютера, так і для бажаного (переустаткованого). Т.е. форма повинна бути побудована у дві колонки. Ліворуч інформація про наявне встаткування, праворуч - про бажаний. Звичайно, поле "Додаткові вимоги" повинне бути тільки в бажаного комп'ютера.
Процесор |
Вибір зі списку. |
Пам'ять |
Просте текстове уведення |
Мережний адаптер |
Вибір зі спадаючі меню. |
Додаткові вимоги |
Многостроковое поле уведення |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 10
Створити форму для уведення адреси. Повинна вводитися наступна інформація:
Країна |
Вибір зі списку. За замовчуванням - Росія |
Поштовий індекс |
Просте текстове уведення, не більше шести символів |
Місто |
Просте текстове уведення |
Вулиця номер будинку |
Просте текстове уведення |
Вказівка на те, що адреса службовий/домашній |
Повинна бути "радіо-кнопка" |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 11
Створити форму для уведення замовлення на комп'ютер. Повинна вводитися наступна інформація:
Процесор |
Вибір зі списку. За замовчуванням Intel Pentium II |
Пам'ять |
Просте текстове уведення |
Необхідний мережний адаптер |
Повинен бути "чек-бокс" |
Необхідний модем |
Повинен бути "чек-бокс" |
Додаткові вимоги |
Многостроковое поле уведення |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 12
Створити форму для пересилання файлу із клієнта на сервер. Повинна вводитися наступна інформація:
Ім'я файлу |
З можливістю вибору з директроій за допомогою стандартного діалогу вибору файлу. |
Ім'я користувача |
Уводиться текстом. |
Тип файлу |
Зробіть вибір зі списку. Варіанти можуть бути, наприклад, "Обновлена база даних", "Файли підозрілі на віруси" і т.д. |
Хоча, від Вас, зараз, і не потрібно, щоб форма працювала, оформите її як покладене - не забудьте про ENCTYPE.
Завдання 13
Створити форму для замовлення товарів. Форма повинна пропонувати замовити відразу кілька товарів. Для кожного варто вказувати кількість. Один раз варто вказати адреса доставки. Повинна вводитися наступна інформація:
Найменування товару |
Вибір зі списку. Зробіть кілька однакових списків, щоб можна було замовити відразу кілька різних товарів. |
Кількість |
Уводиться текстом. Слідує зробити окреме поле для уведення кількості, напроти кожного списку товарів. |
Адреса доставки |
Текст. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 14
Створити форму для запиту пароля. Повинна вводитися наступна інформація:
Ім'я користувача |
Уводиться текстом. |
Ресурс |
Вибір зі списку. Передбачите кілька ресурсів. Наприклад, "Перегляд бази даних", "Редагування бази даних" і т.д. За замовчуванням нехай буде "Повний доступ". |
Пароль |
Стандартне поля для уведення пароля. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 15
Створити форму для замовлення на ремонт комп'ютера. Повинна вводитися наступна інформація:
Ім'я користувача |
Уводиться текстом. |
Адреса |
Уводиться текстом. |
Процесор |
Вибір зі списку. За замовчуванням Intel Pentium II |
Характер несправності |
Многострокове поле вводу |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 16
Створити форму для замовлення на ремонт автомобіля. Повинна вводитися наступна інформація:
Ім'я власника |
Уводиться текстом. |
Адреса |
Уводиться текстом. |
Модель |
Вибір зі списку. За замовчуванням "ВАЗ 2101" |
Характер несправності |
Многострокове поле вводу |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 17
Створити форму для замовлення автомобіля. Повинна вводитися наступна інформація:
Ім'я клієнта |
Уводиться текстом. |
Адреса |
Уводиться текстом. |
Модель |
Вибір зі списку. Можливо вибрати відразу кілька моделей. |
Кольори |
Вибір зі списку. Можливо вибрати відразу кілька квітів. |
Мінімальна ціна |
Вибір зі списку. |
Максимальна ціна |
Вибір зі списку. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Завдання 18
Створити форму для пошуку в каталозі бібліотеки. Повинна вводитися наступна інформація:
Тема |
Вибір зі списку. Можливо вибрати відразу трохи тим. |
Автор |
Уводиться текстом. |
Назва |
Уводиться текстом. |
Мінімальний рік видання |
Вибір зі списку. |
Максимальний рік видання |
Вибір зі списку. |
У формі повинна бути кнопка "Очистити форму" (зрозуміло, вона повинна правильно працювати).
Лабораторна робота №4
ЦІЛЬ: Розширення можливостей гіпертекстового документа на основі підключення стилів.
ТЕОРЕТИЧНА ЧАСТИНА:
Что такое стили и методы их подключения к гипертекстовому документу
Таблицы CSS стилей
Хід виконання роботи:
Виконаєте завдання наведене в прикладі.
Із запропонованого нижче списку завдань вибрати варіант, що відповідає Вашому порядковому номеру в списку групи. Виконати завдання, використовуючи всі типи підключення стилів до гіпертекстового документа. Виконання кожного варіанта рішення завдання оформляйте в окремому гіпертекстовому файлі з ім'ям 1.html, 2.html, 3.html і збережете всі файли в папці public_html/6 На початку кожного файлу з рішенням завдання вставте текст Вашого варіанта завдання.
У файлі-звіті до даної лабораторної роботи необхідно зробити список гіперпосилань на різні способи виконання Вашого завдання (на файли 1.html, 2.html, 3.html). Результуючий файл зберегти під ім'ям LAB6.html у папці public_html
У файл main.html додати посилання на звіт до лабораторної роботи №6
Якщо для виконання Вашого завдання Вам будуть потрібні картинки, їх необхідно зберігати в папці public_html/pictures/6
ПРИКЛАД ВИКОНАННЯ ЗАВДАННЯ
ЗАВДАННЯ: створити гіпертекстову сторінку, що містить три абзаци довільного тексту й список з п'яти пунктів. Додайте три стилі для оформлення абзаців:
1 - обрамляє абзац жовтою смугою з лівого краю, ширина смуги 5 пікселей;
2 - кольори тексту в абзаці зелений;
3 - тлом абзацу є деяка картина.
Додайте стиль для оформлення мітки кожного пункту списку за допомогою деякого малюнка.
Виконаєте завдання використовуючи три типи підключення стилів:
1-безпосередньо в тегах;
2-визначаючи стилі в заголовку документа;
3-визначаючи стилі в окремому файлі.
РІШЕННЯ:
Перший варіант - підключення стилів безпосередньо у відповідні теги гіпертекстового документа
Відкрийте редактор Блокнот (пуск - програми - стандартні - блокнот)
Збережете порожній документ у робочій папці public_html/6 привласніть йому ім'я 1.html.
У створений документ внесіть обов'язкові теги гіпертекстового документа. Внесіть необхідні Позначка інструкції. Запишіть у тілі документа (між <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Замість слів "Абзац №1" вставте текст завдання. При виконанні Ваших варіантів завдання створіть даний абзац на початку документа з копією Вашого завдання.
Додайте у відповідні теги стилі (<P style="...">або<UL style="...">):
Абзац №1 - style="border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00" Зіставте по таблиці стилів як формується даний стиль
Абзац №2 - style="color: green"
Абзац №3 - style="background-image: url(../pictures/6/title.jpg)" (картинка title.jpg повинна перебувати в папці public_html/pictures/6)
Ненумерований список - style="list-style-image: url(point.jpg)" (картинка point.jpg повинна перебувати в папці public_html/pictures/6)
Збережете зміни у файлі public_html/6/1.html
Другий варіант - визначення стилів у заголовку гіпертекстового документа
Відкрийте редактор Блокнот (пуск - програми - стандартні - блокнот)
Збережете порожній документ у робочій папці public_html/6 привласніть йому ім'я 2.html.
У створений документ внесіть обов'язкові теги гіпертекстового документа. Внесіть необхідні Позначка інструкції. Запишіть у тілі документа (між <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Замість слів "Абзац №1" вставте текст завдання. При виконанні Ваших варіантів завдання створіть даний абзац на початку документа з копією Вашого завдання.
Додайте необхідні стилі в заголовок гіпертекстового документа (між <HEAD>...</HEAD>)
<STYLE TYPE="text/css">
<!-і
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00;}
P.a2{color: green;}
P.a3{background-image: url(../pictures/6/title.jpg);}
UL{list-style-image: url(../pictures/6/point.jpg);}
-і>
</STYLE>
Після додавання наведених вище стилів у заголовок тег <UL> перевизначений по новому стилі, а для тегу <P> визначено три нових класи стилів, які підключаються у відповідні теги за допомогою атрибута CLASS="..." (<P CLASS="...">)
Абзац №1 - CLASS="a1"
Абзац №2 - CLASS="a2"
Абзац №3 - CLASS="a3"
Збережете зміни у файлі public_html/6/2.html
Третій варіант - визначення стилів в окремому файлі.
Виконаєте всі дії 1-3 пунктів другого варіанта рішення завдання, створюючи файл public_html/6/3.html
За допомогою редактора БЛОКНОТ створіть файл public_html/6/1.css, у який необхідно внести наступні стилі:
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00";}
P.a2{color: green;}
P.a3{background-image: url(../pictures/6/title.jpg);}
UL{list-style-image: url(../pictures/6/point.jpg);}
Підключити створений файл зі стилями до документа public_html/6/3.html необхідно за допомогою наступного тегу: <LINK REL=STYLESHEET TYPE="text/css" HREF="1.css">. Даний тег необхідно додати в заголовок гіпертекстового документа (звичайно перед тегом, що закривається, <HEAD>)
Підключення стилів з файлу виконується аналогічно підключенню стилів, які описані в заголовку гіпертекстового документа. У такий спосіб необхідно внести наступні зміни в тіло гіпертекстового документа public_html/6/3.html
Абзац №1 - CLASS="a1"
Абзац №2 - CLASS="a2"
Абзац №3 - CLASS="a3"
Збережете зміни у файлі public_html/6/3.html
Останньою дією є створення файлу-звіту public_html/L6.html, що містить список гіперпосилань на файли з варіантами рішення завдання. Далі необхідно створений файл-звіт підключити у вигляді гіперпосиланню до файлу public_html/main.html
Контрольні питання
Які Ви знаєте редактори гіпертекстових сторінок
Поясните загальний вид і структуру редактори
Розповідайте як додаються форми й елементи форм
Як додати таблицю
Вставка зображення, гіперпосилання в документ
Додавання стилів у теги гіпертекстового документа
Підключите стилі різними способами
Теоретична частина
Що таке стилі й методи їхнього підключення до гіпертекстового документа
Основним поняттям CSS є стиль - тобто набір правил оформлення й форматування, що може бути застосований до різних елементів сторінки. Для присвоєння якому-небудь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, що ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами.
Як вам уже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо ви плануєте застосовувати ці стилі до більшому, ніж одна, кількості сторінок. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, розмістити цей файл на Web-сервері, а в коді Web-сторінок, які будуть використати стилі із цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тегу <LINK>, що розташовується усередині тегу <BODY> ваших сторінок:
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL"> |
Перші два параметри цього тегу є зарезервованими іменами, що вимагаються для того, щоб повідомити броузеру, що на цій сторінці буде використатися CSS. Третій параметр - HREF= «URL» - указує на файл, що містить опису стилів. Цей параметр повинен містити або відносний шлях до файлу - у випадку, якщо він перебуває на тім же сервері, що й документ, з якого до нього звертаються - або повний URL («http://...») у випадку, якщо файл стилів перебуває на іншому сервері.
Другий варіант, при якому опис стилів розташовується в коді Webстранички, усередині тегу <BODY>, у тегу <STYLE type="text/css">... </STYLE>. У цьому випадку ви можете використати ці стилі для елементів, що розташовуються в межах сторінки. Параметр type="text/css" є обов'язковим і служить для вказівки броузеру використати CSS.
І третій варіант, коли опис стилю розташовується безпосередньо усередині тегу елемента, що ви описуєте. Це робиться за допомогою параметра STYLE, використовуваного при застосуванні CSS з більшістю стандартних тегів HTML. Цей метод небажаний, і зрозуміло чому: він приводить до втрати одного з основних переваг CSS - можливості відділення інформації від опису оформлення інформації. Втім, якщо необхідно описати лише один елемент, цей варіант розташування опису стилів також цілком застосуємо.
Розглянемо механізм, за допомогою якого стилі привласнюються елементам Web-сторінок. Найпростіший випадок присвоєння якому-небудь елементу певного стилю виглядає так:
НАЗВА_ЕЛЕМЕНТА {властивість: значення;}, |
Де НАЗВА_ЕЛЕМЕНТА - ім'я HTMLтега (H1, P, TD, A і т.д.), а параметри у фігурних дужках - список властивостей елемента й привласнених їм значень. Більш докладно команди мови CSS ми розглянемо трохи пізніше.
Приклад:
H1 {font-size: 30pt; color: blue;} |
У цьому прикладі всім заголовкам на сторінці, оформленим тегом Н1, привласнюється розмір шрифту 30 пунктів і синій кольори.
Також елементи сторінок, створені з використанням CSS, використають механізм спадкування: тобто якщо ви розташовуєте зображенн усередині тегу <P>...</P>, оформленого за допомогою CSS, з відступами, так, щоб параграф займав тільки певну частину ширини сторінки, зображення також успадкує значення відступів, зазначені для цього параграфа.
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використається параметр CLASS = "ім'я класу" або ідентифікатор ID=«ім'я елемента», що привласнюються будь-якому елементу сторінки. Розглянемо ці можливості докладніше.
Параметр CLASS застосовується у випадку, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).
Приклад:
.b-з {font-weight: bold; text-align: center} - опис стилю для класу b-з |
Всі елементи класу b-з будуть відображатися жирним шрифтом з вирівнюванням по центрі сторінки (або осередку таблиці).
<P CLASS="b-з">Текст параграфа</P> - параграфу привласнений стиль класу b-з.
<TD CLASS="b-c">текст</TD> - осередку таблиці привласнений стиль класу b-c. |
текст, Що Втримується в осередку, буде відображатися відповідно до опису класу.
Таким чином, ви можете привласнити описаний стиль будь-яким текстовим елементам сторінок. Зверніть увагу, що при написанні назви класів необхідно дотримувати регістр символів, згідно тому, як ви назвали клас в описі стилю!
Присвоєння стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно привласнити такий стиль, трохи - це вже клас.
Таблиці CSS стилів
Властивості шрифту |
||
1.1 |
font-family |
Використається щоб оголосити конкретний шрифт для використання або сімейство шрифтів або й те й інше. P {font-family: Helvetica,sans-serif;} |
1.2 |
font-style |
Вибирає між italic, oblique, і normal. EM {font-style: oblique;} |
1.3 |
font-variant |
У цей час може бути тільки small-caps й normal. Можливо в будующем з'явиться що-небудь ще. H3 {font-variant: small-caps;} |
1.4 |
font-weight |
Установлює "вага" шрифту, роблячи його більш-менш "жирним". B {font-weight: 700;} |
1.5 |
font-size |
Установлює кегль шрифту. Можна оголосити абсолютний розмір, відносний, або у відсотках від що умовчує. H2 {font-size: 200%;} H3 {font-size: 36pt;} |
1.6 |
font |
котороткая запис всіх інших властивостей шрифту. Порядок значень важливий: font {font-style font-variant font-weight font-size/line-height font-family;}. Кожне зі значень може бути пропущено. P {font: bold 12pt/14pt Helvetica,sans-serif;} |
Властивості кольорів і тла |
||
2.1 |
color |
Установлює кольори елемента. Для тексту це кольори тексту, для інших елементів, таких як HR - кольори малюнка. STRONG {color: teal;} |
2.2 |
background-color |
Установлює кольори тла. Це тло небагато "виходить" за кордон елемента. H4 {background-color: white;} |
2.3 |
background-image |
Установлює картику як тло. На відміну від інших фонів може повторюватися тільки в оном напрямку. BODY {background-image: url(bg41.gif);} |
2.4 |
background-repeat |
Установлює стиль повторення тла. BODY {background-repeat: no-repeat;} |
2.5 |
background-attachment |
Визначає чи буде тло скролироваться разом з текстом. Застосовується до BODY. З іншими елементами не має змісту.. BODY {background-attachment: scroll;} |
2.6 |
background-position |
Установлює початкову позицію фонових кольорів або малюнка. Якщо це кольори, то він заповнює всі починаючи із цієї позиції. Якщо малюнок, то перша картинка міститься як зазначено тут, а потім починає повторюватися відповідно до вищеописаних властивостей. BODY {background-position: top center;} |
2.7 |
background |
котороткая запис всіх властивостей тла. Порядок не важливий. BODY {background: white url(bg41.gif) fixed center;} |
Властивості тексту |
||
3.1 |
word-spacing |
Установлює кількість порожнього простору між словами. P {word-spacing: 0.5em;} |
3.2 |
letter-spacing |
Установлює кількість порожнього простору між буквами. P {letter-spacing: 0.5em;} |
3.3 |
text-decoration |
Установлює ефекти, такі як підкреслення, перечеркивание й миготіння. Можливі комбінації цих ефектів. U {text-decoration: underline;} .old {text-decoration: line-through;} |
3.4 |
vertical-align |
Установлює вертикальне вирівнювання базової лінії елемента стосовно висоти стік у батьківському елементі. Застосовується тільки в тэгах. Негативні значення дозволені. SUP {vertical-align: super;} .fnote {vertical-align: 50%;} |
3.5 |
text-transform |
Змінює регістр набору тексту. H1 {text-transform: uppercase;} .title {text-transform: capitalize;} |
3.6 |
text-align |
Установлює горизонтальне вирівнювання тексту. P {text-align: justify;} H4 {text-align: center;} |
3.7 |
text-indent |
Устанвливает відступ першого рядка елемента (новий рядок). Негативні значення дозволені. P {text-indent: 5em;} H2 {text-indent: -25px;} |
3.8 |
line-height |
Установлює відстань між базовими лініями в елементі, повну висоту рядка. P {line-height: 18pt;} H2 {line-height: 200%;} |
Властивість блоку |
||
4.1 |
margin-top |
Установлює розмір верхнього відступу в елементі. Негативні значення дозволені, але користуватися треба обережно. UL {margin-top: 0.5in;} |
4.2 |
margin-right |
Установлює розмір правого відступу в елементі. Негативні значення дозволені, але користуватися треба обережно. IMG {margin-right: 30px;} |
4.3 |
margin-bottom |
Установлює розмір нижнього відступу в елементі. Негативні значення дозволені, але користуватися треба обережно. UL {margin-bottom: 0.5in;} |
4.4 |
margin-left |
Установлює розмір лівого відступу в елементі. Негативні значення дозволені, але користуватися треба обережно. P {margin-left: 3em;} |
4.5 |
margin |
Установлює розмір всіх відступів в елементі. Негативні значення дозволені, але користуватися треба обережно. H1 {margin: 2ex;} |
4.6 |
padding-top |
Установлює розмір верхнього поля елемента на яке буде продовжене його тло. Негативні значення заборонені. UL {padding-top: 0.5in;} |
4.7 |
padding-right |
Установлює розмір правого поля елемента на яке буде продовжене його тло. Негативні значення заборонені. IMG {padding-right: 30px;} |
4.8 |
padding-bottom |
Установлює розмір нижнього поля елемента на яке буде продовжене його тло. Негативні значення заборонені. UL {padding-bottom: 0.5in;} |
4.9 |
padding-left |
Установлює розмір лівого поля елемента на яке буде продовжене його тло. Негативні значення заборонені. P {padding-left: 3em;} |
4.10 |
padding |
Установлює розміри всіх полів елемента на котороые буде продовжене його тло. Негативні значення заборонені. H1 {padding: 2ex;} |
4.11 |
border-top-width |
Установлює розмір верхнього бордюру елемента на який буде продовжене його тло. При цьому бордюр може мати свій малюнок (див. властивості бордюру). Негативні значення заборонені. UL {border-top-width: 0.5in;} |
4.12 |
border-right-width |
Установлює розмір правого бордюру елемента на який буде продовжене його тло. При цьому бордюр може мати свій малюнок (див. властивості бордюру). Негативні значення заборонені. IMG {border-right-width: 30px;} |
4.13 |
border-bottom-width |
Установлює розмір нижнього бордюру елемента на який буде продовжене його тло. При цьому бордюр може мати свій малюнок (див. властивості бордюру). Негативні значення заборонені. UL {border-bottom-width: 0.5in;} |
4.14 |
border-left-width |
Установлює розмір лівого бордюру елемента на який буде продовжене його тло. При цьому бордюр може мати свій малюнок (див. властивості бордюру). Негативні значення заборонені. P {border-left-width: 3em;} |
4.15 |
border-width |
Установлює розмір всіх бордюрів елемента на які буде продовжене його тло. При цьому бордюр може мати свій малюнок (див. властивості бордюру). Негативні значення заборонені. H1 {border-width: 2ex;} |
4.16 |
border-color |
Установлює кольори бордюру елемента на який буде наповзати його тло (дивися border-style). H1 {border-color: purple; border-style: solid;} |
4.17 |
border-style |
Задає тип бордюру елемента. Використає кольори border-color. H1 {border-style: solid; border-color: purple;} |
4.18 |
border-top |
Короткий запис всіх властивостей верхнього бордюру елемента. UL {border-top: 0.5in solid black;} |
4.19 |
border-right |
Короткий запис всіх властивостей правого бордюру елемента. IMG {border-right: 30px dotted blue;} |
4.20 |
border-bottom |
Короткий запис всіх властивостей нижнього бордюру елемента. UL {border-bottom: 0.5in grooved green;} |
4.21 |
border-left |
Короткий запис всіх властивостей лівого бордюру елемента. P {border-left: 3em solid gray;} |
4.22 |
border |
Короткий запис всіх властивостей загального бордюру елемента. H1 {border: 2px dashed tan;} |
4.23 |
width |
Ширина елемента. Найчастіше використається із зображеннями, але може бути застосована до будь-якого блокового елемента. Негативні значення заборонені. TABLE {width: 80%;} |
4.24 |
height |
Ширина елемента. Найчастіше використається із зображеннями, але може бути застосована до будь-якого блокового елемента з розумними обмеженнями. Негативні значення заборонені. IMG.icon {height: 50px;} |
4.25 |
float |
Обтікання елемента. Найчастіше використається із зображеннями, щоб дати можливість тексту їх обтікати, але в принципі обтекаться може будь-який елемент. IMG {float: left;} |
4.26 |
clear |
Визначає яким елементам, що обтікають (або ніяким) дозволяється перебувати по сторонах від елемента. H1 {clear: both;} |
Класифікаційні властивості |
||
5.1 |
display |
Використається для класифікації елементів на велику кількість категорій. Найбільш популярне значення - none. .hide {display: none;} |
5.2 |
white-space |
Визначає як розглядати white-spaces в елементі. У першому прикладі - не переносити текст, у другому - не ігнорувати їх (як це звичайно робить HTML). TD {white-space: nowrap;} TT {white-space: pre;} |
5.3 |
list-style-type |
Визначає тип маркера перед елементами списку. UL {list-style-type: square;} OL {list-style-type: lower-roman;} |
5.4 |
list-style-image |
Визначає зображення використовуване як маркер перед елементами списку. UL {list-style-image: url(bullet3.gif);} |
5.5 |
list-style-position |
Визначає позицію маркера стосовно тіла елемента списку Застосовується до елементів списку. LI {list-style-position: outer;} |
5.6 |
list-style |
Короткий запис стилю елемента списку. UL {list-style: square url(bullet3.gif) outer;} |
Одиниці виміру |
||
6.1 |
Length Units |
Одиниці виміру довжини. Допускаються in-дюйми, cm-сантиметри, pt-пункти, px-пискелы, що em-текет кегль шрифту, ex-висота символу x у поточному шрифті width: 50px; margin-left: 2em; |
6.2 |
Percentage Units |
Відсотки, звичайно від розміру за замовчуванням або від розміру вікна (фрейму) залежно від контексту. width: 80%; |
6.3 |
Color Units |
Кольори задаються або назвами, або RGB. color: #FF00FF; color: rgb(100%,0%,100%); |
6.4 |
URLs |
Часткові URL розкриваються щодо файлу утримуючий блок стилів а не щодо документа. url(picture.gif) url(http://www.pix.org/lib1/pic278.gif) |
Завдання для індивідуальної роботи
Завдання 1
Визначите два стилі роздягнула документа. У першому букви повинні друкуватися на сірому тлі, у другому - на жовтому. У самому документі тло повинен бути білим. Підготуйте документ із декількома розділами. Нехай деякі розділи вкладаються друг у друга, щоб було видно спадкування.
Завдання 2
Вам потрібно зробити стилі для написання старої й нової ціни товару в документі. Стара ціна - чорних кольорів, перекреслена. Нова ціна - червоних кольорів на 20% більшого кегля, чим інший текст. Підготуйте який-небудь список товарів зі старими н новими цінами.
Завдання 3
Зробіть так, щоб тлом Вашої сторінки була картинка. Але вона не повинна плодитися на весь екран, а повинна бути присутнім у єдиному екземплярі у верхньому лівому куті екрана. Картинку візьміть кожну.
Завдання 4
Зробіть стиль абзацу P.NB такий, що абзац укладений у рамку (бордюр) блакитних кольорів, займає (по ширині) одну третину екрана, розташований у лівого краю, а інший текст сторінки обтікає його праворуч.
Завдання 5
Зробіть стиль символів SPAN.BIG такий, щоб розмір символів відзначених цим стилем був у два рази більше, ніж розмір сусідніх символів (незалежно від розміру останніх). Підготуйте текст із декількома розмірами символів і продемонструйте роботу Вашого стилю.
Завдання 6
Зробіть стиль абзацу P.NB такий, що абзац укладений у рамку (бордюр) червоних кольорів товщиною в п'ять міліметрів, займає (по ширині) половину екрана, розташований у правого краю екрана, а інший текст обтікає даний абзац ліворуч.
Завдання 7
Зробіть стиль абзацу P.NB такий, що абзац укладений у рамку (бордюр) блакитних кольорів товщиною в п'ять міліметрів, займає (по ширині) половину екрана, розташований по центрі екрана, а інший текст обтікає даний абзац ліворуч і праворуч.
Завдання 8
Зробіть стиль абзацу P.NB такий, що абзац укладений у рамку (бордюр) блакитних кольорів товщиною в п'ять міліметрів, займає (по ширині) половину екрана, розташований по центрі екрана, а інший текст НЕ обтікає даний абзац, тобто ліворуч і праворуч порожньо.
Завдання 9
Зробіть стиль абзацу P.NB такий, що абзац пишеться червоним по жовтому, займає (по ширині) половину екрана, розташований у правого краю екрана, а інший текст обтікає даний абзац ліворуч.
Завдання 10
Зробіть стиль абзацу P.NB такий, що абзац пишеться білим по чорному, займає (по ширині) половину екрана, розташований у лівого краю екрана, а інший текст обтікає даний абзац праворуч. Між даним абзацом й іншим текстом відступ у полсантиметра.
Завдання 11
У наведеному нижче списку, перед кожним елементом коштує коло. Зробіть стиль списку (UL.beauty), у якому перед елементами стояла б картинка (візьміть кожну, невеликого розміру). Розмістите на сторінці кілька списків і помилуйтеся. Спробуйте вкласти у Ваш гарний список ще один. Що буде стояти перед елементами вкладеного списку?
Елемент списку
Елемент списку
Елемент вкладеного списку
Елемент вкладеного списку
Елемент списку
Елемент списку
Завдання 12
Визначите три стилі роздягнула документа. У першому букви повинні друкуватися на сірому тлі, у другому - на жовтому, у третьому на білому, але в похилому накресленні. У самому документі тло повинен бути білим і букви нормальними. Підготуйте документ із декількома розділами. Нехай деякі розділи вкладаються друг у друга, щоб було видно спадкування.
Завдання 13
Підготуйте набір стилів заголовків так, щоб заголовок рівня 1 (H1) починався в лівого краю екрана, заголовок рівня 2 - на сантиметр зміщений вправо, рівня 3 - на два сантиметри й т.д.
Завдання 14
Підготуйте набір стилів для абзаців. Всі вони повинні бути вирівняні по правому й лівому краях. Нормальний абзац повинен займати всю сторінку (по ширині). Крім того, потрібно ще три стилі. Один - абзац із правим відступом (1 дюйм), другий - з лівим відступом, третій - з відступами по обидва боки.
Завдання 15
Підготуйте стиль для абзацу, у якого ліворуч проведена вертикальна риса (на всю висоту абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Завдання 16
Підготуйте стиль для абзацу, у якого праворуч проведена вертикальна риса (на всю висоту абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Завдання 17
Підготуйте стиль для абзацу, у якого ліворуч і праворуч проведені вертикальні лінії (на всю висоту абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Завдання 18
Підготуйте стиль для абзацу, у якого зверху проведена горизонтальна риса (на всю ширину абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Завдання 19
Підготуйте стиль для абзацу, у якого знизу проведена горизонтальна риса (на всю ширину абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Завдання 20
Підготуйте стиль для абзацу, у якого зверху й знизу проведені горизонтальні лінії (на всю ширину абзацу) товщиною 3мм, синіх кольорів, на відстані 5мм від тексту.
Лабораторна робота №5
ЦІЛЬ: Створення гіпертекстових сторінок за допомогою редактора. Вивчення принципів роботи з редактором Microsoft Front Page
Хід виконання роботи:
Виконати завдання наведене в прикладі.
Виконати одне із указанных ниже заданий за допомогою редактора Microsoft Front Page. Варіант завдання варто вибирати по порядковому номері в журналі групи.
Результуючий файл зберегти під ім'ям LAB7.html у папці public_html
У файл main.html додати посилання на звіт до лабораторної роботи №7
Якщо для виконання Вашого завдання Вам будуть потрібні картинки, їх необхідно зберігати в папці public_html/pictures/7
ПРИКЛАД ВИКОНАННЯ ЗАВДАННЯ
ЗАВДАННЯ: створити гіпертекстову сторінку, що містить форму для проведення тестування. У формі повинне бути присутнім текстове поле для уведення ФИО тестируемого, а також питання з варіантами відповідей. Варіанта вибираються за допомогою списку меню. У формі повинні бути присутнім кнопки Reset й Submit. Додати стиль для оформлення абзаців, що всі абзаци обрамляє жовтою смугою з лівого краю.
РІШЕННЯ:
Запустити редактор Microsoft Front Page (ПУСК - ПРОГРАМИ - Microsoft FrontPage)
Переглянете вміст кожної із трьох закладок Normal HTML Prevew (закладки перебувають у нижньому рядку робочого вікна редактори). Дані закладки дозволяють редагувати гіпертекстовий документ у режимі роботи зі стандартним текстом (закладка Normal), редагувати теговую структуру гіпертекстового документа (закладка HTML) і переглядати остаточний вид документа за допомогою браузера (закладка Prevew). Зверніть увагу на те, що для порожнього документа в закладці HTML утримуються обов'язкові теги гіпертекстового документа.
Створимо форму для тестування
Перейти до закладки Normal і вставити форму (Inser - Form - Form)
За допомогою стандартного перекладу рядка в тілі форми додати порожній рядок перед кнопками Submit й Reset. Установити курсор у початок доданого рядка й вставити таблицю для форматування полів форми(Table - Insert -Table). У діалоговому вікні, що з'явилося, укажіть кількість рядків і стовпців Вашої таблици. Для рішення поточного завдання вкажемо 4 рядка й два стовпці.
Перший рядок таблиці - це поле для уведення ФИО. У перший осередок уведіть рядок "ФИО", відцентруйте по правому краї осередку (панель форматування дуже схожа на аналогічну панель в Microsoft Word ). У другий осередок першого рядка вставте одне-строкове поле уведення (Inser - Form - One-Line Text Box), відцентруйте по лівому краї.
Другий рядок таблиці - це перше тестове питання з варіантами відповіді. У перший осередок другого рядка введіть текст питання, наприклад: "Є чи життя на Марсі?", у другий осередок того ж рядка вставте список меню з можливими варіантами відповіді (Insert - Form - Drop-Down Menu). Двічі кликніть на меню, що з'явився. У діалоговому вікні натисніть кнопку Add..., у діалоговому вікні, що з'явилося, уведіть перший варіант відповіді в поле Choise (для рішення нашого приклада введіть рядок "Так"), позначте галочкою поле Specify Value й уведіть у поле значення V1(це необхідно для подальшої обробки результатів тестування). Аналогічним образом додайте варіанти відповідей "Ні", "Не знаю" і відповідні значення атрибута Value: V2, V3. Зробіть меню, що випадає, у вигляді списку із трьох елементів, для цього двічі кликніть на меню, у діалоговому вікні, що з'явилося, уведіть для поля Height значення 3.
Третю й четверту рядки таблиці заповните аналогічно другий . При цьому створіть свої питання й варіанти відповідей.
Додайте необхідний у завданні стиль для оформлення абзацу
Переходимо в діалогове вікно додавання нових стилів (Format - Style). У діалоговому вікні, що з'явилося, у поле List вибираємо варіант All Html tags. З відображеного в поле Styles списку тегів вибираємо тег, що цікавить нас, <P>, натискаємо кнопку Modify
В діалоговому вікні, що з'явилося, у поле Name необхідно написати p.tt, якщо ми визначаємо клас стилів tt для тегу <P> (такий стиль викликається за допомогою атрибута CLASS: <P CLASS=tt>), або залишити просто "p" для оформлення з новим стилем всіх, що зустрічаються в тексті абзаців. Натискаємо кнопку Format й у списку, що випадає, варіантів вибираємо Border (у даному списку ви повинні вибрати той елемент, що Вам необхідний залежно від типу стилю, що додає,), даний елемент форматування дозволяє додати стиль бардюра або ліній, що обрамляють елемент. Натисніть кнопку Modify
У появившимся діалоговому вікні вибираємо Color - жовтий; у поле Setting варіант - BOX; у розділі Preview забрати всі грані за винятком лівої.
Закрити всі діалогові вікна натисканням кнопки OK
Створіть абзац після форми, у якому напишіть інформацію про призначення Вашого тесту (це треба придумати самостійно). Якщо все зроблено правильно, то новий абзац буде виділений жовтою лінією по лівому краї.
Контрольні питання
Які Ви знаєте редактори гіпертекстових сторінок
Поясните загальний вид і структуру редактори
Розповідайте як додаються форми й елементи форм
Як додати таблицю
Вставка зображення, гіперпосилання в документ
Додавання стилів у теги гіпертекстового документа
Підключите стилі різними способами
Завдання для індивідуального виконання
ЗАВДАННЯ 1
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити три тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді із групи радиокнопок з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає кожен пункт списку унікальної, підібраної Вами, картинкою невеликих розмірів. Додайте на сторінці список можливих результатів тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 2
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді із групи чекбоксов з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що вставляє картинку як тло конкретно для одного абзацу. Додайте на сторінці абзац, у якому опишіть тематичну спрямованість Вашого тестування. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 3
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити три тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді зі списку з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що обрамляє список червоною рамкою. Додайте на сторінці список можливих результатів тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 4
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді із групи радиокнопок з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що позначає абзац зеленою смугою по правому краї. Додайте на сторінці абзац, у якому визначите правила проходження тестування. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 5
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із меню, що випадає, двох варіантів). Визначити три тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді із групи чекбоксов з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Создайте стиль для списку, що дозволяє виділити даний список фоновим малюнком й обрамляє список синьою смугою по лівому краї. Додайте на сторінці список можливих результатів тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 6
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із меню, що випадає, двох варіант). Визначити чотири тестових питання, для кожного визначаємо два варіанти відповіді. Організувати вибір відповіді зі списку з можливими варіантами відповідей, причому в списку організувати можливість багатозначного вибору. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Создайте стиль для абзацу, що позначає абзац вертикальною рисою жовтих кольорів зверху, текст в абзаці повинен писатися на блакитному тлі червоними буквами. Додайте на сторінці абзац, у якому опишіть умови тестування. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 7
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити чотири тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді з меню, що випадає, з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає кожен пункт списку унікальної, підібраної Вами, картинкою невеликих розмірів; весь список повинен відображатися на бірюзовому тлі й бути написаний синіми буквами . Додайте на сторінці список тим, по яких Ви плануєте організувати тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 8
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо чотири варіанти відповіді. Організувати вибір відповіді із групи чекбоксов з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що виділяє абзац контуром зелених кольорів і викладає на тло абзаци довільну картину. Додайте на сторінці абзац, у якому представлена коротка інформація про автора даного тесту. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 9
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити чотири тестових питання, для кожного визначаємо три варіанти відповіді. Організувати вибір відповіді з меню, що випадають, з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає список контуром жовтогарячих кольорів, створює тло списку бежевий. Додайте на сторінці список можливих дат повторного проходження даного тесту. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 10
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо чотири варіанти відповіді. Організувати вибір відповіді із групи радиокнопок з возмодными варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що позначається зеленою рисою по лівому краї, на тло абзацу підкладете довільну картинку. Додайте на сторінці абзац, у якому розкривається тематична спрямованість створеного Вами тесту. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 11
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити п'ять тестових питання, для кожного визначаємо два варіанти відповіді. Організувати вибір відповіді зі списку з можливими варіантами відповідей, передбачити можливість багатозначного вибору. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає кожен пункт списку унікальної, підібраної Вами, картинкою невеликих розмірів й обрамляється синьою смугою по лівому й нижньому краї. Додайте на сторінці список тематичних розділів, по яких проводиться тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 12
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо п'ять варіантів відповіді. Організувати вибір відповіді із групи чекбоксов з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що обрамляє абзац жовтою смугою по лівому й правому краї, створює бежеве тло для всього абзацу. Додайте на сторінці абзац, у якому представте коротку інформацію про можливі результати тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 13
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити п'ять тестових питань, для кожного визначаємо два варіанти відповіді. Організувати вибір відповіді зі списку двох варіант. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає кожен пункт списку унікальної, підібраної Вами, картинкою невеликих розмірів, установлює тло списку в жовтий й обрамляє список синьою смугою по лівому й верхньому краї. Додайте на сторінці список можливих результатів тестування. Даний список повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 14
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить зі списку двох варіант). Визначити три тестових питання, для кожного визначаємо чотири варіанти відповіді. Організувати вибір відповіді із групи чекбоксов з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для абзацу, що обрамляє абзац синьою смугою по верхньому й нижньому краї й в абзаці вставляє фонову картинку. Додайте на сторінці абзац, у якому опишіть практичну значимість Вашого тесту. Даний абзац повинен оформлятися за допомогою певного Вами стилю.
ЗАВДАННЯ 15
Створити форму для проведення тестування. У формі перше поле – поле для уведення прізвища (однострокове поле уведення), друге поле - поле для уведення імені (однострокове поле уведення), третє поле – вибір підлоги (вибір походить із групи радиокнопок). Визначити чотири тестових питання, для кожного визначаємо чотири варіанти відповіді. Організувати вибір відповіді з меню, що випадає, з можливими варіантами відповідей. Структурировать форму необхідно за допомогою таблиці (чітко повинна виділятися частина реєстрації й частина тестування, виділите питання й стосовні до нього відповіді єдиною структурою ).
Створіть стиль для списку, що позначає кожен пункт списку унікальної, підібраної Вами, картинкою невеликих розмірів, а також визначає кольори тла списку - жовтогарячий. Додайте на сторінці список задіяних у Вашому тесті тематичних розділів. Даний список повинен оформлятися за допомогою певного Вами стилю.