- •1. Основні технології розробки web-додатків
- •1.1 Протокол http
- •Основні технології розробки web-додатків
- •1.3 Короткі підсумки
- •2 Структура html-документа
- •2.1. Елементи мови html
- •2.2 Структура html-документа
- •2.2.1.Початок
- •2.2.2 Тіло документа
- •Заголовки
- •Нижче на малюнку показаний результат використання наступних заголовків:
- •Списки в html
- •2.3 Використання графіки в html
- •2.4 Таблиці
- •Атрибут border. Значення цього атрибута визначає як будуть виглядати рамки таблиці. Якщо атрибут не заданий або його значення дорівнює нулю, то таблиця не матиме рамок.
- •2.5 Html-форми Форми використовуються в www для передачі інформації від клієнта до сервера.
- •3 Каскадні таблиці стилів css
- •3.1 Загальні відомості про css
- •3.2 Додавання стилю на веб-сторінку
- •3.2.1. Таблиця пов'язаних стилів
- •3.2.2 Таблиця глобальних стилів
- •3.2.3 Внутрішні стилі
- •3.3 Синтаксис css
- •3.3.1 Властивості css
- •3.3.2 Селектори тегів
- •3.3.3 Селектори класів
- •3.3.4 Селектори-ідентифікатори
- •3.3.5 Контекстні селектори
- •3.3.6 Сусідні селектори
- •3.3.7 Дочірні селектори
- •Селектор зі значенням атрибута – встановлює стиль елемента в тому випадку, якщо задано певне значення зазначеного атрибута. Синтаксис застосування наступний.
- •Наприклад:
- •3.3.9 Універсальний селектор
- •3.4 Псевдокласи
- •3.4.2 Короткі підсумки
- •4 Типи і структури даних в javascript
- •Скрипт в html документі
- •4.2 Змінні та літерали
- •4.2.1 Літерали
- •4.3 Оператори JavaSscript
- •4.3.2 Оператор обробки рядків
- •4.3.3 Оператор typeof Аргументом оператора є змінна або вираз. Оператор повертає рядок, що описує тип аргументу(див. Табл. 4.4).
- •4.3.4 Умовний оператор (Оператор If)
- •4.3.5 Оператор перемикання (switch)
- •4.3.6 Оператори циклу
- •4.4 Масиви
- •Метод reverse () – застосовується для зміни на протилежний порядок елементів масиву всередині масиву. Припустимо, масив натуральних чисел впорядкований по зростанню:
- •Впорядкуємо його по спаданню:
- •4.5.2 Інструкція return
- •4.5.3 Виклик функції
- •4.6.2 Константи
- •4.6.3 Математичні функції.
- •4.6.4 Приклад. Генератор випадкових чисел
- •4.7 Контрольні питання
- •Події та обробники подій
- •5.1.1 Спливання подій в dhtml
- •5.1.2 Стандартні події dhtml.
- •Способи зв'язування подій
- •5.2.1 Введення подій в якості атрибутів.
- •5.2.2 Обробники подій як функції.
- •5.2.3 Динамічне зв'язування подій у сценарії.
- •5.2.5 Атрибути for і event.
- •Об'єкти браузера
- •Об'єктна модель браузера
- •Об'єкт window (Операції з вікнами)
- •Об'єкт navigator (властивості браузера)
- •Об'єкт location (Інформація про документ і вікна браузера)
- •Об'єкт history (Переходи між Web-сторінками )
- •Робота з діалоговими вікнами
- •Управління документом
- •Об'єктна модель документа
- •7.1.1 Сімейства, властивості і методи
- •Дерево документа (Document Tree)
- •Переміщення по Дереву Документа.
- •Динамічний вміст
- •8.1.1 Найбільш популярні моделі даних
- •9.3.1 Поділ інструкцій.
- •9.3.2 Коментарі.
- •9.3.3 Змінні, константи й оператори
- •9.3.6 Типи даних
- •Висновок
- •Керуючі конструкції рнр
- •Умовні оператори
- •// Ця програма надрукує всі парні цифри
- •{// Друкуємо цифру, якщо вона парна
- •Оператори передачі управління
- •Оператори включення
- •10.5 Висновок
- •Функції і масиви в php
- •Функції, визначені користувачем
- •11.1.1 Повернення значень функцією.
- •Рекурсивні функції.
- •11.1.3 Функції-змінні.
- •11.1.4 Побудова бібліотек функцій.
- •11.2.1 Операції з масивами.
- •11.2.2 Сортування масивів.
- •Sort_regular – порівнювати елементи масиву звичайним чином; sort_numeric – порівнювати елементи масиву як числа; sort_string – порівнювати елементи масиву як рядки.
- •11.2.3 Сортування масиву за ключами.
- •11.2.4 Сортування за допомогою функції, заданої користувачем.
- •Ми застосували нашу власну функцію сортування до всіх елементів масиву.
- •11.2.5 Застосування функції до всіх елементів массиву.
- •11.2.6 Виділення підмасива
- •Висновок
- •12 Строкові функції php
- •12.1 Функції пошуку в тексті (substr(), strpos(), strrpos(), strstr(), strchr(), stristr(), strrchr(), substr_count(), strspn(), strcspn())
- •12.2 Функції strlen(), chr() і ord()
- •12.3 Trim-функції (функції видалення символів відступу) trim (), ltrim (), rtrim (), chop ()
- •12.4 Функції форматного виведення. Специфікатори перетворення printf (), sprintf (), sscanf ().
- •12.5 Функції перетворення кодування
- •12.6 Функції роботи з бінарними даними pack () unpack ()
- •12.7 Функції роботи з блоками тексту (wordwrap (), str_replace (), substr_replace (), strtr (), stripslashes (), stripcslashes (), addslashes (), addcslashes (), quotemeta (), strrev ())
- •12.8 Функції об'єднання / поділу рядків (str_repeat (), str_pad (), chunk_split (), strtok (), explode (), implode (), join ())
- •12.9 Функции сравнения строк (strcmp(), strncmp(), strcasecmp(), strncasecmp(), strnatcmp(), strnatcasecmp(), similar_text(), levenshtein())
- •12.10 Функції роботи з url (parse_url (), parse_str (), rawurlencode (), rawurldecode (), base64_encode (), base64_decode ())
- •12.11 Функції перетворення регістру (strtolower (), strtoupper (), ucfirst (), ucwords ())
- •12.13 Функція htmlspecialchars
- •13 Робота з файлами
- •13.1 Відкриття і закриття файлів
- •13.2 Читання з файлів і запис у файли
- •13.2.1 Читання з файлів.
- •13.2.2 Запис в файли
- •13.5 Переміщення по файлам
- •13.6 Робота з каталогами
- •13.7 Завантаження файлу на сервер
- •14.1 Авторизація доступу
- •14.2 Механізм сесій
- •14.3 Налаштування сесій
- •14.4.1 Відкриття сесії
- •14.4.2 Створення сесії
- •14.4.3 Реєстрація змінних сесії
- •14.4.4 Видалення змінних сесії
- •14.5 Безпека
- •14.6 Висновок
- •15.1 Проектування
- •15.2 Система адміністрування контенту
- •15.2.1 Вимоги до системи адміністрування контенту (cms).
- •15.2.2 Адміністрування списку користувачів.
- •15.2.3 Вхід на сторінку адміністрування
- •15.2.4 Відкриття списку користувачів.
- •15.2.5 Редагування запису користувача.
- •15.2.6 Видалення користувача
3.3.9 Універсальний селектор
Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, задати шрифт або накреслення тексту. У цьому випадку використовується універсальний селектор, який відповідає будь-якому елементу веб-сторінки. Для позначення універсального селектора застосовується символ зірочки (*) і в загальному випадку синтаксис буде наступний.
* { Опис правил стилю }
Аналогічний результат можна отримати, якщо поміняти селектор * на BODY.
3.3.10Групування При створенні стилю для сайту, коли одночасно використовується безліч селекторів, можлива поява повторюваних параметрів. Щоб не повторювати одні і ті ж елементи в описах стилів, їх можна згрупувати для зручності представлення і скороченнякоду.
Наприклад, є такий опис стилів:
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
color: #003;
}
H2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 135%;
color: #333;
}
H3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
color: #900;
}
P {
font-family: Times, serif;
}
З опису видно, що стиль для заголовків містить однаковий параметр font-family. Одинаковий параметр можна записати у згрупованому стилі, як показано нижче:
H1, H2, H3 {
font-family: Arial, Helvetica, sans-serif;
}
H1 {
font-size: 160%;
color: #003;
}
H2 {
font-size: 135%;
color: #333;
}
H3 {
font-size: 120%;
color: #900;
}
У наведеному прикладі єдиний для всіх селекторів параметр font-family застосовується відразу до декількох тегів, а індивідуальні атрибути вже додаються до кожного селектору окремо. Селектори групуються у вигляді списку тегів, розділених між собою комами. В групу можуть входити не тільки селектори тегів, а також ідентифікатори і класи. Загальний синтаксис наступний:
Селектор 1, Селектор 2, ... Селектор N { Опис правил стилю }
При такому записі правила стилю застосовуються до всіх селекторів, перерахованих в одній групі.
3.4 Псевдокласи
Псевдокласи визначають динамічний стан елементів, яке змінюється з часом або за допомогою дій користувача, а також положення в дереві документа. Прикладом такого стану служить текстове посилання, яка змінює свій колір при наведенні на неї курсора миші. При використанні псевдокласів браузер не перевантажує поточний документ, тому з їх допомогою можна отримати різні динамічні ефекти на сторінці. Синтаксис застосування псевдокласів наступний:
Елемент:Псевдоклас { Опис правил стилю }
Спочатку задається елемент, до якого додається псевдоклас, потім вказується двокрапка, після якого йде назва псевдокласу. Допускається застосовувати псевдокласи до імен ідентифікаторів або класів (A. menu:hover {color: green}) і контекстним селекторам (.menu A:hover {background: #fc0}).
Умовно всі псевдокласі діляться на групи, які перераховані далі. Псевдокласси, що визначають стан елементів.До цієї групи належать псевдокласи, які визначають поточний стан елемента і застосовують стиль до нього тільки в цьому випадку.
Аctive – відбувається при активації користувачем елементу. Наприклад, при наведенні курсору на посилання і натисненні лівої кнопки миші.
Link – застосовується до невідвідування посиланнями, тобто посиланнях, на які користувач ще не натискав.
Focus – застосовується до елемента при отриманні ним фокусу. Наприклад, для текстового поля форми отримання фокусу означає, що курсор встановлений в полі, і за допомогою клавіатури можна вводити в нього текст.
Конец формы
hover – псевдоклас hover активізується, коли курсор миші знаходиться в межах елемента, але клацання по ньому не відбувається.
Visited – застосовується до відвіданих посилань. Зазвичай таке посилання змінює свій колір за замовчуванням на фіолетовий, але за допомогою стилів колір і інші параметри можна задати самостійно.
3.4.1 Правила створення стилю
При написанні досить об'ємного CSS-файлу слід дотримуватися деяких загальних рекомендацій, які допоможуть уникнути помилок, зробити код зрозумілим і зручним.
Пишить всі правила для каждого селектора в одному місці. Допускається для кожного селектора додавати кожен стильовий параметр і його значення окремо, як це показано нижче:
TD {background: olive; }
TD {color: white; }
TD {border: 1px solid black; }
Однак такий запис не дуже зручний. Доводиться повторювати кілька разів один і той же селектор, та й легко заплутатися в їх кількості. Тому пишіть аргументи для кожного селектора разом. Зазначений набір записів в такому випадку отримає наступний вигляд:
TD {
background: olive;
color: white;
border: 1px solid black;
}
Більш високий пріоритет має значення, вказане в коді нижче. Якщо для селектора спочатку задається параметр з одним значенням, а потім той же параметр, але вже з іншим значенням, то застосовуватися буде значення, яке в коді встановлено нижче:
P {color: green; }
P {color: red; }
В даному прикладі для селектора P колір тексту спочатку встановлюється зеленим, а потім червоним. Оскільки значення red розташоване нижче, то воно в підсумку і буде застосовуватися до параметру color.
Опис стилів починайте з селектор верхнього рівня. Враховуючи що багато стильових властивостей елементів успадковуються від своїх предків, починати таблицю стилів краще саме з селекторів, які виступають контейнерами для інших елементів. Зокрема, це BODY, TABLE, UL, OL і т.д. Якщо потрібно задати гарнітуру шрифту для всього тексту веб-сторінки, то треба застосувати параметр font-family до селектора BODY.
Спадкування властивостей дозволяє не повторювати багаторазово одні й ті ж параметри, якщо вони задані для селекторів верхнього рівня. При цьому необхідно враховувати, що не всі атрибути успадковуються.
Групуйте селектори з однаковими параметрами і значеннями.
Використовуйте ідентифікатори і класи. Класи або ідентифікатори зручно використовувати, коли потрібно застосувати стиль до різних елементів веб-сторінки: клітинок таблиці, посилання, абзацами і т. д.
6)Застосовуйте універсальні стильові параметри. Універсальні параметри задають одночасно відразу кілька значень. Приклади таких властивостей: border (вид кордону), padding (поля навколо елемента), margin (відступи навколо елемента). Так, параметр padding визначає поля одночасно для всіх чотирьох сторін елемента. Тому використання padding: 10px коротше і зрозуміліше, ніж послідовне додавання аргументів padding-left, padding-top, padding-right і padding-bottom, що визначають поля для кожної сторони.