- •1.Історія розвитку інтернет
- •3. Поняття інтернет, його сервіси та служби.
- •8. Доменна адресація в Інтернет.
- •9. Основні поняття та класифікація Web-технологій.
- •11. Мови сценаріїв.
- •12. Інструментальні засоби Web-технологій.
- •14. Поняття html.
- •15. Розвиток html
- •16.Поняття тега та структури web-документа
- •18. Теги форматування тексту
- •19. Логічне та фізичне форматування тексту в html. Фізичне форматування:
- •Логічне форматуванн:
- •21. Марковані списки в html. Маркований список
- •23. Заголовки, горизонтальні лінії в html.
- •26. Форматування таблиць в html.
- •27. Кольорове оформлення Веб-документу.
- •28. Формат графічних файлів для Інтернет. Формати зображень, які використовують
- •30. Звук та відео на Веб-сторінках.
- •32.Поділ web-документа на фрейми
- •38.Підключення зовнішньої таблиці стилів
- •39.Внутрішні таблиці стилів
- •34.Візуальні редактори web-сайтів
- •35.Публікації сайту на сервері
- •36.Поняття таблиць каскадних стилів
- •37.Правила опису стилів
- •Id селектори (id Selectors):
- •40.Вбудовані стилі
- •41.Колір і властивості фону
- •42.Влативості блокових елементів
- •44 Властивості шрифту
- •47.Можливості Java Script при впроваджені у web- сторінки
- •48.Способи розташування та правила створення сценаріїв
- •49. Робота з вікнами браузера у Java Script
42.Влативості блокових елементів
Задають різноманітні зовнішні та внутрішні відступи від його меж (грниць)
Margin(Top.Width.left.botom.)- задає відступи блокового елемента з зовні .
Pading (Top.Width.left.botom.)-задає внутрішні відступи блокового елемента
Borderweighte - задає товщину меж.
Borderstyle(no dash.solid)-задає стиль лінії рамки
None –рамка відсутня
Dashed-штрихова рамка
Solid- соціальна
Datted-лінія з крапочками
Double- подвійна лінія
Ridge-тривимірна опукла лінія
44 Властивості шрифту
Налаштування властивостей шрифту буде в числі найбільш поширених видів використання таблиць стилів. На жаль, не існує чітко визначених і загальноприйнятих таксономії для класифікації шрифтів, а також терміни, що застосовуються до одного сімейство шрифтів може не підходити для інших. «Курсив», наприклад, зазвичай використовується для позначення похилого тексту, але похилий текст може також бути помічені як Oblique, Похилий, похилої, Cursive або Курсив . Тому це не просте завдання для відображення типові властивості вибору шрифту для конкретного шрифту.
CSS1 визначає властивості "сімейство шрифтів ' , 'стиль шрифту' , 'варіант шрифту " і "накреслення шрифту" , "розмір шрифту" , "шрифт" .
"сімейство шрифтів '
Значення: [[<family-name> | <generic-family>]] * [<family-name> | <generic-family>] Початковий: UA конкретного застосування: всі елементи Спадкування: да Відсоток значення: N / A
Значення пріоритетний список імен сімейств шрифтів та / або загальна прізвищ. На відміну від більшості інших властивостей CSS1, значення розділяються комою, щоб вказати, що вони є альтернативами:
BODY {сімейство шрифтів: зябра, Helvetica, без засічок}
Є два типи списків значень:
<family-name>
Ім'я сімейства шрифтів за вибором. В останньому прикладі, "зябровими" і "Helvetica" є сімейств шрифтів.
<generic-family>
У наведеному вище прикладі, останнє значення родове ім'я родини. Наступні загальні сімей визначаються:
-
«Зарубок» (наприклад, Times)
-
'Без зарубок (наприклад, Helvetica)
-
«Скоропису» (наприклад, Цапф-канцелярії)
-
«Фантазія» (наприклад, західних)
-
"Моноширинний" (наприклад, Courier)
Дизайнерам таблиць стилів рекомендується пропонувати родове ім'я в якості останньої альтернативи.
Шрифт імена, що містять пробіли, повинні бути зазначені:
BODY {сімейство шрифтів: "Новий вік підручника", засечек}
<BODY STYLE="font-family:'My власні font', fantasy">
При цитуванні пропущено, будь-які символи пробілу до і після імені шрифту ігноруються і будь-яка послідовність символів пробілів всередині імені шрифту конвертується в одиночний пробіл.
"стиль шрифту"Значення: звичайний | курсив | косою Початкове значення: нормальні Область застосування: всі елементи Спадкування: да Відсоток значення: N / A Властивість 'стиль шрифту "обирає між нормальним (іноді згадується як" римська "або" вертикальний "), курсив і похилий осіб у межах сімейства шрифтів.Значення 'нормальної' вибирає шрифт, який класифікується як "нормальний" в базі шрифтів UA, в той час 'косою' вибирає шрифт, позначений як «косою». Значення 'курсив' вибирає шрифт, позначений як "курсив", або, якщо це не доступно, один ярлик "косою".Шрифт, позначений як "косою" в базі шрифтів UA, може насправді були генеруватися електронним нахилом нормального шрифту.Шрифти з Oblique, похилих або похилій у своїх назвах зазвичай позначаються як "косою" в базі шрифтів ПА. Шрифти з Italic, Cursive або Курсив у своїх назвах зазвичай позначаються як "курсив".
H1, H2, H3 {стиль шрифту: курсив}
H1 EM {стиль шрифта: стандартний}
У наведеному вище прикладі, виділеного тексту в 'H1' з'явиться в нормальне обличчя.
"розмір шрифту"
Значення: <absolute-size> | <relative-size> | <length> | <percentage> Початкове значення: середній Область застосування: всі елементи Спадкування: да Відсоток значень: щодо розміру шрифту батьківського елементу <absolute-size>
<absolute-size> Ключове слово індекс в таблиці розмірів шрифтів обчислюється і зберігається UA. Можливі значення: [хх-малих | х-малих | маленькі | середні | великих | X-Large | хх-великий]. На екрані комп'ютера масштабування 1,5 рази Пропонується між сусідніми індексами, якщо 'середній' шрифту 10 pt, "великих" шрифтів може бути 15pt. Різні засоби можуть знадобитися різні коефіцієнти масштабування. Крім того, UA повинен прийняти якість і доступність шрифтів до уваги при розрахунку таблиці. Таблиця може відрізнятися від одного шрифту на інший.
<relative-size>
<relative-size> Ключове слово інтерпретується стосовно таблиці розмірів шрифту і розміру шрифту батьківського елементу. Можливі значення: [більше | менше]. Наприклад, якщо батьківський елемент має розмір шрифту 'середній', значення 'великих' зробить розмір шрифту поточного елемента "великих". Якщо розмір батьківського елементу не близько до запису в таблиці, ПА вільний у інтерполяції між записами таблиці або округлити до найближчого. UA може знадобитися екстраполювати значення таблиці, якщо числове значення виходить за рамки ключових слів.
Довжина і процентні значення не повинні приймати шрифту Розмір таблиці до уваги при розрахунку розміру шрифту елементу.
Негативні значення не допускаються.
На всіх інших властивостей, 'ет' і 'колишніх' значення довжини відносяться до розміру шрифту поточного елементу. Про власність "розмір шрифту", ці одиниці довжини відносяться до розміру шрифту батьківського елементу.
Зверніть увагу, що додаток може інтерпретувати явний розмір, залежно від контексту. Наприклад, всередині сцени VR шрифт може отримати різного розміру через спотворення перспективи.
Приклади:
P {розмір шрифта: 12pt;}
{BLOCKQUOTE розмір шрифту: більше}
EM {розмір шрифта: 150%}
EM {розмір шрифта: 1.5em}
Якщо запропонував масштабний коефіцієнт 1,5 використовується, останні три заяви є ідентичними.
'Шрифт'
Значення: [<font-style> | | <font-variant> | | <font-weight>]? <font-size> [/ <line-height>]? <font-family> Початковий: не визначено для скорочених властивостей Застосовується: всі елементи Спадкування: да Процентне: допускається за <font-size> і <line-height>
'Шрифт' властивість скорочена властивість для установки 'стиль шрифту' 'варіант шрифта' 'накреслення шрифту " "розмір шрифту" , "висота рядка" і "сімейство шрифтів" в тому ж місці в стилі аркуша. Синтаксис цієї властивості заснований на традиційній друкарською позначення скороченого для установки декількох властивостей, пов'язаних зі шрифтами.
43. CSS-властивості списків
CSS-властивості списків
List-style-type – стиль маркера (:lower-roman (i,ii,iii); :upper-roman (I,II,III); :lower-alpha (a,b,c); :upper-alpha (A,B,C); :none (відсутній);).
List-style-image – картинка на маркері (:URL;).
List-style-position – позиція маркера (inside; (в середину) :outside;(назовні))
45. Об’єктна модель документа (Document Object Model, DOM) – це засіб для роботи зі структурою документа, а також з елементами сторінки в кодах HTML та у сценаріях. Вона забезпечує реалізацію технології динамічної HTML, яка ґрунтується на класичній HTML і використовує таблиці каскадних стилів та мови сценаріїв. Об’єктна модель документа є основою для того, щоб зробити елементи сторінки динамічно керованими під час її відтворення у вікні браузера.
Об’єктна модель описує кожний HTML-документ як набір окремих об’єктів – зображень, абзаців, списків і т. д. до найбільшого рівня, навіть до окремих символів. Кожний об’єкт може мати властивості, визначені у вигляді атрибутів. Наприклад, абзаци <P> має атрибут вирівнювання <ALIGN>, який може набувати значень left, right, center. В об’єктній моделі атрибут називають властивістю об’єкта. Об’єкт має також свої методи і події, які можуть відбуватися з ним і впливати на нього. Наприклад, зображення <img> має подію OnMouseOver, яка відбувається тоді, коли користувач розміщує над ним вказівник миші. Можна керувати станом об’єктів, використовуючи методи з деякого набору стандартних методів. Все це й складає концепцію DOM як платформо-незалежного програмного інтерфейсу, який дає змогу програмам та скриптам керувати вмістом HTML-документів, змінювати їх структуру та оформлення.
Підсумовуючи, перелічимо основні можливості, які отримує розробник Web-сторінок при використанні технології JavaScript:
-
Формувати HTML-документи «на льоту»;
-
Проводити перевірку правильності даних HTML-форм перед пересиланням їх на сервер;
-
Надати користувачу можливості вводити локальні дані для управління роботою JavaScript-програми, а також вибірково виконувати різноманітні операції;
-
Створювати вікна повідомлень, діалогові вікна для виводу попереджуючих повідомлень і введення даних;
-
Створювати документи з розширеними можливостями навігації, використовуючи фрейми і автономні вікна.
Властивості, методи та події.
Властивості – це змінні з фіксованими іменами, які мають певні значення. Одні властивості можна лише переглядати, інші можна змінювати. Для доступу до властивостей об’єкта у мовах сценаріїв використовують такий синтаксис:
«Об’єкт»:»властивість»
Властивістю об’єкта може бути інший об’єкт. При цьому перший об’єкт називають також батьківським (parent), а другий – нащадком (child). Якщо ми хочемо звернутися до властивості або методу об’єкта Object2, який міститься в об’єкті Object1, то слід записати:
Object1.Object2.властивість
Object1.Object2.метод ()
Наприклад, Window.Document.Write(“Текст”)
Методи – це пов’язані з об’єктами дії, які мають фіксовані імена, можуть мати параметри і повертати значення. Синтаксис застосування методу такий:
Об’єкт.метод (список_параметрів)
Крім властивостей і методів для кожного об’єкта існує набір подій. Події мають наперед визначені назви: натискання кнопки миші позначають OnClick, відпускання кнопки миші – OnMouseUp, а завантаження документ в браузер – OnLoad тощо. Настанням події можна скористатися для ініціювання певних дій.
Окрім об’єктів, у модель входять колекції – структури, що складаються з однотипних елементів. Колекція – це групування об’єктів для спрощенного доступу до них за допомогою програмного коду. Наприклад, об’єкт Document містить колекцію зображень Images. Ми можемо звернутися до зображення або за його іменем, або за порядковим номером:
Document.Images (“my_image”)
Document.Images (0)
Індекс (порядковий номер) елемента в колекції залежить від його розміщення у тексті HTML-документа. У колекціях об’єктної моделі перший елемент має нульовий індекс.
Колекціями також є:
-
All – всі теги та елементи, що розташовані на веб-сторінці;
-
Frames – фрейми;
-
Images – зображення;
-
Links – посилання та карти посилань.