- •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 Видалення користувача
1.3 Короткі підсумки
Інтернет – глобальна телекомунікаційна мережа інформаційних і обчислювальних ресурсів. Протягом п'яти років Інтернет досяг аудиторії понад 50-ти мільйонів користувачів.
Розрізняють логічну і фізичну моделі Інтернету. Під логічною насамперед розуміють Всесвітню павутину (World Wide Web), а під фізичною - комп'ютери, сервери і засоби передачі даних між ними.
Щоб різні комп'ютери мережі могли взаємодіяти, вони повинні використовувати один і той же протокол. Систему протоколів Інтернет називають "стеком протоколів TCP / IP".
Всесвітня павутина – розподілена система, що надає доступ до пов'язаних між собою документів, розташованих на різних комп'ютерах, підключених до Інтернету. Всесвітня павутина стоїть на "трьох китах":
мова гіпертекстової розмітки документів HTML (HyperText Markup Language);
універсальний спосіб адресації ресурсів в мережі URL (Universal Resource Locator);
протокол обміну гіпертекстової інформацією HTTP (HyperText Transfer Protocol). Концепції розвитку Всесвітньої павутини можна умовно розділити на Веб 1.0, Веб 2.0, Веб 3.0.
Веб-програмування – це розділ програмування, орієнтований на розробку динамічних Інтернет-додатків. Мови веб-програмування діляться на дві групи: клієнтські і серверні. Клієнтські мови обробляються на стороні користувача (в основному в браузері). Серверні мови програмування обробляються на стороні сервера.
Важливою стороною роботи серверних мов є "Система управління базами даних (СКБД) ".
HTML – стандартна мова розмітки документів у Всесвітній павутині.
XHTML – мова розмітки веб-сторінок, за можливостями можна порівняти з HTML, створений на базі XML.
CSS – технологія опису зовнішнього вигляду документа, написаного мовою розмітки.
XML – текстовий формат, призначений для зберігання структурованих даних, для обміну інформацією між програмами, а також для створення на його основі більш спеціалізованих мов розмітки.
JavaScript – це об'єктно-орієнтована скриптова мова програмування.
PHP – скриптова мова програмування загального призначення, інтенсивно застосовується для розробки веб-додатків.
Perl – високорівнева інтерпретуюча динамічна мова програмування загального призначення.
AJAX – підхід до побудови призначених для користувача інтерфейсів веб-додатків, що полягає в "фоновому" обміні даними браузера з веб-сервером.
Adobe Flash і Microsoft Silverlight – мультимедійні платформи, які використовуються для створення RIA-додатків, а також для інтеграції відеороликів у веб-сторінки.
ASP.NET – технологія створення веб-додатків і веб-сервісів від компанії Microsoft.
?
?
?
2 Структура html-документа
Питання для вивчення:
Елементи мови HTML.
Структура HTML-документа.
Тіло документа.
Використання графіки в HTML.
Таблиці.
HTML-форми.
2.1. Елементи мови html
HTML (Hyper Text Markup Language) є описувальною мовою розмітки документів, в ній використовуються покажчики розмітки (теги). HTML – документ можна представити як сукупність елементів, кожен з яких починається і закінчується розміточними тегами, тобто документ НТМL є не що інше, як звичайний текстовий АSСII-файл з доданими до нього керуючими НТМ-кодами (тегами). Кожен елемент має своє ім'я, атрибути, параметри і вміст, який часто називають контентом (від англійского content - вміст).
Більшість елементів представляється у вигляді последовательності:
відкриває тег, в якому розташовується ім'я елемента і його атрибути;
вміст (контент);
закриваючий тег.
Відкриваючий тег являє собою кутові дужки <>, в яких розташовується ім'я елемента, іншими словами, сама команда-інструкція для браузера, наприклад: <P> –тег, що відкриває елемент-абзац.Більшості відкриваючих тегів відповідає закриваючий тег – аналогічна комбінація, в якій перед ім'ям команди ставиться коса риска (слеш) наприклад: </ P> – тег, що закриває елемент-абзац.
Ім'я елемента може включати букви, цифри, дефіси. У HTML для написання імені використовуються малі та великі літери, оскільки ім'я не чутливе до регістру. Деякі елементи не мають закриваючого тега. Такими елементами є, наприклад, елементи <meta>, <frame>, <hr> і ін. Вони складаються тільки з відкриваючого тега, тому не можуть обмежувати ніяку частину документа, і, следовательно, не мають вмісту, а самі по собі утворюють окремі елементи. Далі вони будуть називатися одиночними тегами.
Розташування елементів. Елементи можуть слідувати один за одним, а можуть бути вкладеними (якщо вони є контейнером). Але елементи не можуть перетинатися.
Наприклад, правильного розташування вкладених елементів:
<Div> <p> Hello, world! </ P> </ div>
В даному випадку елемент <p> вкладений в елемент <div>.
Приклад наступних один за одним елементів:
<Div> Hello, world! </ Div> <p> Це новий абзац </ р>
Якщо елементи перетинаються, то помилки не виникає, і документ все одно буде відображатися, але відображатися таким чином як браузер обробить неправильну комбінацію елементів. А це означає, що при неправильному розташуванні елементів документ буде відображений не так, як задумував його автор.
Вміст (контент). Сучасні HTML-документи припускають наявність не тільки тексту, а й графіки, посилань на інші істочники растрових зображень, анімації, відео, звуку, зворотний зв'язок-спілкування з сервером через які заповнюються форми, таблиці, включення програмних модулів.
Атрибути. Кожен елемент може містити атрибути, які розташовуються в откривающему тезі. Атрибути вставляються в тег для того, щоб надати програмі-браузеру додаткову інформацію про те, як браузер повинен виконати інструкцію тега.
Порядок запису атрибутів у тег значення не має. Значення атрибута, якщо таке є, слід за знаком рівності,якийстоїть після імені атрибута. Якщо значення атрибута – одне слово або число, то його можна просто вказати після знака рівності, не виділяючи додатково. Якщо значення атрибута містить кілька слів (символів), розділених пробілами, то його обов'язково потрібно укласти в одинарні або подвійні лапки. Довжина значення атрибута обмежена 1024 символів. Літери в іменах тегів і атрибутів до уваги не беруться, чого не можна сказати про значення атрибутів. Наприклад, запис елемента <р> з атрибутом align виглядає так: <P align = center>
В одному елементі одночасно може бути кілька атрибутів. У цьому випадку вони відокремлюються одна від одної пропуском:
<Р атрибут1 = значення1 атрібут2 = значення2 ....>
Для кожного елемента існує певний набір можливих атрибутів. Теги подібного призначення можуть мати однакові атрибути. У деяких випадках атрибути є унікальними. Коли атрибути не вказані явно, використовуються їх значення, задані за замовчуванням. В HTML допускаються атрибути без значень. По суті – це логічні атрибути, що мають значення 0 або 1, «yes» або «no». Вказівка атрибута має на увазі, що він уже має одне зі значень. Відсутність атрибута вказує на протилежне значення.
Типи даних. У HTML використовуються наступні типи даних:
текстові рядки;
символи;
URI;
колір;
лінійні розміри (довжина і ширина);
дата та час;
MIME-типи (вказують характер вмісту).
Текстові рядки. Являють собою послідовність читаючих символів – букв, цифр, розділових знаків. Особливість рядків полягає в тому, що при інтерпретації браузером з них вилучаються символи перекладу рядка, і кілька идучих підряд відступів замінюються одним. Аналогічно не сприймаються начальний і кінцевий відступ в значеннях атрибутів. Наприклад, значення "left" – і "left" будуть інтерпретовані однаково.
Символи. Іноді кодування, яке використовується при наборі тексту або програми, не містить потрібний символ документа. Некоторих символів просто немає на клавіатурі. Іноді виникає необхідність включити в текст HTML документа символи, які можуть бути сприйняті браузером як теги. У таких випадках можна використовувати відповідний чисельний (в десятковій або шістнадцятковій системі числення) еквівалент або спеціальні літерні сполучення – рядкові константи, або літерали. Ознакою рядкової константи є знак & на початку.
CER завжди починається з амперсанда «&». На відміну від найменувань тегів HTML, найменування CER чутливі до регістру символів. У таблиці 2.1 наведені найбільш часто використовувані CER і відповідні їм числові коди.
Таблиця 2.1 - CER і відповідні їм числові коди
Числовий код |
Іменнована заміна |
Символ |
Опис |
" |
" |
« |
Лапки |
& |
& |
& |
Амперсанд |
< |
< |
< |
Меньше |
> |
> |
> |
Більше |
|
|
|
Нерозривний пробіл |
¡ |
¡ |
¡ |
Перевернутий знак оклику |
¢ |
¢ |
¢ |
Цент |
£ |
£ |
£ |
Фунт |
¤ |
¤ |
¤ |
Валюта |
¥ |
¥ |
¥ |
Йена |
¨ |
¨ |
¨ |
Умляут |
© |
© |
© |
Копірайт |
« |
« |
« |
Ліва кутова лапка |
® |
® |
® |
Зареєстрована торгова марка |
± |
± |
± |
Плюс або мінус |
» |
» |
» |
Права кутова лапка |
URI (Universal Resource Identifier). При розробці Web-сторінок часто використовуються адреси різних пов'язаних документів – URI. Це можуть бути гіперпосилання нових сторінок або ресурси, які необхідно завантажити на поточну сторінку. Розрізняють URI абсолютні та відносні.
Абсолютні URI можуть мати такий вигляд:
http://www.tutor.com/html/index.html .
Перша частина адреси – http: // – вказує тип сервісу, яким ви хочете скористатися. Зокрема http: // вказує на протокол HTTP, який використовується для обміну повідомленнями у вигляді гіпертексту. Могуть використовуватися і інші протоколи, наприклад, ftp: // – протокол для обміну файлами та ін. Необхідно відзначити, що в Інтернеті застосовуються угоди операційної системи Unix, в якій для поділу каталогів використовується коса риска «/» (слеш), на відміну від DOS, де при вказівці шляху вживається «зворотний» слеш «\».
Друга частина адреси, www.tutor.com/, є доменним ім'ям сервера, на якому зберігається запитаний ресурс.
Третя частина, html /, вказує шлях (каталог html /) до файлу на сервері, в якому зберігається запитаний ресурс.
Остання частина (index.html) визначає ім'я самого файлу, index, і його розширення, html. Якщо ім'я файлу відсутнє, то сервер відкриває файл, заданий за замовчуванням. Зазвичай таким файлом є файл з ім'ям index.html, або index.htm, або default.html або default.htm.
Якщо запитуваний ресурс знаходиться на тому ж сервері, що і поточний ресурс, то для звернення до нього може бути використаний відносний адрес (щодо поточного ресурсу). Для формування відносного адресу діють ті ж правила, що і в MS-DOS. Наприклад, якщо адреса використовуваного ресурсу http://www.tutor.com/html/index.html, а необхідний ресурс розташований за адресою http://www.tutor.com/html/CER/index.html, то шлях до цього ресурсу може бути представлений у вигляді CER / index.html. Якщо поточний ресурс знаходиться в каталозі CER, то для переходу в батьківських каталог можна записати ../index.html/
Колір. Існують кілька основних способів представлення кольорів в HTML. У вигляді #RRGGBB.
Подання у вигляді трьох пар шістнадцяткових цифр, де кожна пара відповідає за свій колір:
дві перші цифри (RR) – червоний;
дві в середині (GG) – зелений;
дві останні цифри (BB) – синій.
Подання ключовими словами, наприклад red, green, blue, black. Щоб уникнути випадків, коли вказане ключове слово «не розуміє» браузером слід використовувати лише невеликий набір основних кольорів, які використовуються у всіх браузерах.
У вигляді rgb (*, *, *), де «*» – десяткові числа від 0 до 255, що означає кількість відповідного кольору (червоний, зелений, синій) в вихідному.
Одиниці вимірювання довжини. Одиниці вимірювання довжини діляться на абсолютні і відносні.
Абсолютні одиниці вимірювання довжини:
in – дюйми (1 дюйм дорівнює 2,54 сантиметра),
cm – сантиметри,
mm – міліметри,
pt – points. Point – це «точка», що дорівнює 1/72 дюйма або 0,36 мм, яка ще впевнено розрізняється людським оком.
рс – picas. 1pica (піка) дорівнює 12 pt.
Відносні одиниці вимірювання:
em – одиниця вимірювання, яка базується на стандартній ширині для друкарної букви «т». Значення 1,5еm буде в півтора рази більше базового розміру даного шрифту.
ех – одиниця вимірювання, яка заснована на висоті шрифту.
рх – розмір, за одиницю якого взято окремий піксель екрана. Хоча для різних типів моніторів ця величина відрізняється, але вона інтуїтивно зрозуміла і, більш того, за стандартом повинна мати однаковий кутовий розмір.
MIME-типи даних. Протокол MIME (Multipurpose Internet Mail Extension) спочатку був розроблений для опису файлів, вкладених в електронну пошту. Він визначав, який тип даних передається сервером. Зараз протокол активно використовується і в інших інтернет-сервісах. Спочатку вказується тип файлу, а потім (через косу риску) – конкретний його формат: «тип файлу / формат», наприклад image / gif або text / html, або application / jp. Коли рядок з MIME-типом даних є значенням атрибута (часто атрибута type), то подібний запис може виглядати так: type = "text / html". Докладний список MIME-типів наведено в додатку 5.
Коментарі. Текст, заключенний в теги <! - -> сприймається як коментар до коду і не відображається у вікні браузера.
