Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Загальні властивості стилів та їхні значення






Лабораторна робота № 6

Тема:«HTML. Таблиці стилей та елементи форми.»

Мета: Вміти створювати сторінки з кнопками, списками, полями введення тощо, оформляти сторінки, використовуя таблиці стилів.

ТЕОРЕТИЧНІ ВІДОМОСТІ

Форми

Тег для опису форми.

<FORM ACTION=”url обробника даних”

METHOD={Get|Post}<!--спосіб передачі даних по посиланню абоза значенням

ENCTYPE={application/x-www-form-urlencoded або text/plain} -тип кодуваннядля обробки програмою або для передачі по електронній пошті

[TARGET=значение]>

елементи форми

</FORM>

 

Поле введення: тексту, паролю, вибір файлу, прихований текст:

<INPUT TYPE={Text | Password | File | Hidden }

NAME=ім’я елемента

VALUE=текст за замовчуванням

SIZE=кількість видимих символів рядка

MAXLENGTH=максимальна кількість символів рядка>

Кнопки: посилання даних, кнопки-картинки, відміни:

<INPUT TYPE={Submit | Image | Reset}

VALUE=назва на кнопці>

Список варіантів:

<INPUT TYPE=checkbox NAME=значення1 [CHECKED]>

<INPUT TYPE=checkbox NAME= значення2 >

………………..

<INPUT TYPE=checkbox NAME= значенняN>

Список перемикачів:

<INPUT TYPE=radio NAME= значення1 [CHECKED]>

<INPUT TYPE=radio NAME= значення2>

………………..

<INPUT TYPE=radio NAME= значенняN>

Список, що випадає:

<SELECT NAME=ім’я списку

SIZE=висота видимої частини списку (у рядках)

MULTIPLE(без значень) > -вибір декількох пунктів

<OPTION VALUEпередаваєме значення»

SELECTED(без значень)>зазамовчуванням

……………

<OPTION параметри N>

</SELECT>

Текстове поле:

<TEXTAREA NAME=ім’я

ROWS=висота (у рядках)

COLS =довжина (у символах)>

Текст </TEXTAREA>.

 

Таблиці стилів

Впроваджена таблиця:

<STYLE TYPE="text/css">

{Список тегів|.клас} {властивість1:значення1;

властивість2:значення2; властивість3:значення3; . . . </STYLE>

Загальні властивості стилів та їхні значення

Властивість Значення Пояснення
Border-color red, green, #ffcc55 Колір рамки
Border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Стиль рамки
Border-width 2mm, 3mm Товщина рамки
Font-family Arial, «Times New Roman», Serif пріоритетний список шрифтів
ІFont-size 12pt, 16pt Розмір шрифту
Font-style normal, oblique, italic Стиль шрифту
Font-weight normal, bold, bolder Товщина шрифту
Word-spacing число у mm Відстань між словами
Letter-spacing число у mm Відстань між символами
Line-height число у mm Відстань між рядками
Background-attachment Fixed, scroll Тло фіксоване,прокручується
Background-color red, green, #ffcc55 Колір тла
Background-image URL("aдрeca графічного файлу для тла")
Color red, green, #ffcc55 Колір елемента
Text-align Left, right, center, justify Вирівнювання тексту
Text-decorate none, underline, overline, line-through, blink Оформлення тексту  
Text-indent Число Абзацний відступ
Vertical-allign top, super, middle, sub, bottom Вертикальне вирівнювання
Margin або Margin-top Margin-right Margin-bottom Margin-left Число1 число2 число3 число4 Відступи зверху, справа, знизу, зліва
Padding або Padding-top Padding-right Padding-bottom Padding-left Число1 число2 число3 число4 Величина вільного простору між стороною рамки і елементом у рамці
Height Число Висота елемента
Width Число Ширина елемента
Float none, left, right Обтікання об'єкта текстом
List-style-image URL("адpeca графічного маркера списку")
List-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Вигляд маркера списку (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)
List-style-position inside, outside Позиція маркера

Зв’язана таблиця стилів:



Таблицею є самостійний файл .css, а у html-файлі створюється запис у тегу <HEAD>:



<LINK HREF ="адреса таблиці стилів (наприклад, styles.css)"

TYPE= "text/css" REL= "stylesheet" TITLE = "URL таблиці стилів">


ПОСЛІДОВНІСТЬ ВИКОНАННЯ РОБОТИ

1. Скористайтеся існуючим сайтом, створеним у Лабораторній роботі №5 . Додайте до нього ще одну сторінку Анкета.

2. Створіть сторінку anketa.html. Ведений текст на сторінці не форматуйте, тільки зробіть заголовок №1 та курсив де потрібно (рис 1).

3. Для введення Імені додайте Поле введення з текстом-підказкою у рядку ФИО.

4. Додайте Поле для введення особистого паролю , який буде складатися з 5 символів.

5. Розташуйте Список перемикачів з 2 елементів для опису статі.

6. Для ознаки діяльності створіть Список варіантів з 5 елементів, розташованих по різному. З обраним за умовчанням елементом Студент..

7. Створіть Відкриваючий список з 5 елементів (наприклад, науково-пізнавальна, фантастика, фентезі, пригоди, історичні), 3 елемента з яких є видимими. Останній елемент (історичні) оберіть за умовчанням. Передбачити багатоваріантний вибір.

8. Розташуйте Текстове поле з 5 рядків та 40 символів вздовж, із вспливаючою підказкою Смелее! .

9. У кінці сторінки додайте дві кнопки. Першу Кнопку відміни з підписом Отмена, другу Кнопку Подачи з підписом Готово.

10. Додайте гіперпосилання на якусь адресу.

Рис 1.

11. Відформатуйте цю сторінку, застосувавши внутрішню таблицю стилів, яка зробить курсив на всій сторінці – бузкового кольору, заголовки №1 зробить шрифтом Arial, розміром 12pt, червоного кольору.

12. Додайте вбудований стиль у тег курсиву для визначення статі, як напівжирний.

13. Для всього сайту зробіть зовнішню таблицю стилів з іменем mystyle.css, яка для всього коду встановить колір тіла – сірий, шрифти обиратиме Times New Roman або Serif, колір символів – бордовий, відступи тексту верхнє та нижнє було по 20, ліве та праве – по 10, також передбачити, щоб колір гіперпосилання до використання та після був відповідно червоним та зеленим.

 

КОНТРОЛЬНІ ЗАПИТАННЯ

 

1. Для чого використовуються форми?

2. З допомогою яких тегів створюються форми?

3. Чим відрізняються ведення різних варіантів Кнопки?

4. Як ввести пароль?

5. У чому різниця між описом елементів списку перемикачів та списку варіантів?

6. У списку, що розгортається, як обрати декілька варіантів?

7. Як у списках встановити значення за умовчанням?

8. Яке призначення таблиці стилів?

9. Які є способи взаємодії таблиці стилів і html- файлу?

10. З чого складається таблиця стилів?

11. Які одиниці вимірювання застосовують у мові CSS?

12. Для чого групують властивості?

13. Що таке успадковування властивостей?

14. Яке призначення тегу DIV?

15. Яке призначення тегу SPAN?

 



mylektsii.ru - Мои Лекции - 2015-2020 год. (0.011 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал