- •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 Видалення користувача
2.2 Структура html-документа
2.2.1.Початок
Елемент <! doctype>. Інформація про версію мови.
В якості першого елемента HTML документа рекомендується використовувати елемент <! doctype>, в якому розміщується інформацію про використовувану версію мови, щоб браузер, що відображає HTML-документ, міг врахувати особливості або обмеження цієї версії.
Цей елемент має тільки відкриваючий тег <! doctype>, який починається знаком оклику. В даному тезі полягає інформація про тип документа.
Оголошення типу документа (doctype) включає назву кореневого елемента і посилання на DTD (document type definition – визначення типу документа), яке в свою чергу, містить інформацію про правила синтаксису для документа. У специфікації HTML оголошення типу документа містить інформацію про версії HTML. Відсутність оголошення типу документа та інформації про його версії не дозволяє правильно обробляти цей документ.
Типове оголошення типу документа містить чотири частини, розділені пробілами і має наступну структуру:
<! DOCTYPE, загальний ідентифікатор кореневого елемента ( "HTML"), рядок "PUBLIC", загальний ідентифікатор DTD в лапках>.
HTML 4.01 специфікує три DTD, таким чином, автори зобов'язані включити в свій документ одне з нижченаведених оголошень типу документа. DTD розрізняються тим, які елементи вони підтримують.
HTML 4.01 Strict/Суворе DTD включає всі елементи і атрибути, які не є нерекомендуемыми або не входять в документ типу "набір фрэймів". Для документів, що використовують це DTD необхідно вказати:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional/Перехідний DTD включає всі суворого DTD плюс не рекомендовані елементи й атрибути (більшість з яких стосується візуального представлення). Для документів, що використовують це DTD, необхідно вказати:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset / набір фреймів DTD включає все з перехідного DTD плюс самі фрейми. Для документів, що використовують це DTD необхідно вказати:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
У HTML5 використовується тільки один варіант DOCTYPE:
<!DOCTYPE html>
Елемент <html>. Цей елемент служить ознакою того, що перед нами Web-сторінка, або HTML-документ.
Правило запису (синтаксис): елемент є контейнером. Відкриваючий тег – <html>, закриваючий – </html>. Обидва тега можуть бути відсутніми. Однак їх використання є правилом хорошого тону. Всі інші елементи, крім <!doctype>> поміщаються всередину контейнера <html >... </html> і служать його контентом. У контейнері <html> ... </html> міститься сам HTML-документ, який складається з двох частин – заголовка, що зберігається в контейнері <head>...</head> і тіло документа, який зберігається в контейнері <body>...</body>. Заголовок містить службову інформацію і не відображається браузером. У тілі документа (<body>) розташовується основний зміст документа.
Таким чином, HTML – документ повинен мати наступну структуру:
<html>
<head>
службова не відображаюча інформація ...
</head>
<body>
... Відтворюється зміст документа ...
</body>
</html>
Елемент <head> – визначає заголовок документа. Він призначений для надання необхідної браузеру службової інформації. Інформація, укладена в теги, що знаходяться всередині розділу HEAD (крім назви документа, що описується за допомогою тега <TITLE>), не відображається на екрані.
У заголовку допускається використання наступних тегів:
<title>, <meta>, <base>, <link>, <script>
Елемент <title> – визначає назву документа. Текст укладений між тегами <title> і </ title> є назвою документа, цей текст відображається у верхній частині вікна браузера. Якщо елемент <title> відсутній, то у верхній частині вікна браузера відображається URI документа.
Елемент <meta> – визначає метатеги, які використовуються для зберігання інформації призначеною для браузерів і пошукових систем.
Функції мета-тегів досить різноманітні, однак на даний момент не існує їх чіткої стандартизації. Проте, можна виділити кілька основних напрямів використання мета-тегів:
Мета-теги здатні ідентифікувати авторів Інтернет-сторінки, її адресу, частоту її оновлення.
Мета-теги використовуються пошуковими системами для індексації і створення заголовків гіпертекстових документів.
Не виводячись на екран, мета-теги впливають на режим відображення Інтернет-сторінок.
У тега meta допустимі чотири атрибути: content, http-equiv, name і scheme. З них обов'язковий тільки атрибут content. За наявності атрибутів мета-теги можна розділити на дві основні групи – NAME і HTTP-EQUIV.
Група NAME відповідає за текстову інформацію про сторінку, її автора і за рекомендації для пошукових систем. Теги групи HTTP-EQUIV фактично еквівалентні гіпертекстовим заголовкам. Вони формують заголовок сторінки і визначають його обробку. Як правило, вони керують діями браузерів і використовуються для формування інформації, яка видається звичайними заголовками.
Група NAME:
Мета-тег Author и Copyright. Ці теги, як правило, не використовуються одночасно. Функція тегів – ідентифікація автора або приналежності документа. Тег з атрибутом name = «author» містить ім’я автора HTML-документа.
Наприклад, <Meta name = «author» content = «Григорій Петренко»> Якщо сайт належить будь-якій організації, то доцільніше використовувати тег Copyright, який виглядає наступним чином: <Meta name = «copyright» content = «назва організації»>
Мета тег Description – використовується при створенні короткого опису сторінки і використовується пошуковими системами для індексації і анотації при видачі інформації про документ за запитом. При відсутності тега пошукові системи видають в анотації перший рядок документа або уривок, який містить ключові слова.<Meta name = «description» content = «Коротка характеристика документа»>
Мета тег Document-state також має значення при індексації сторінки в пошукових системах. Атрибут тега content може приймати одне з двох значень – St atic чи Dynamic. Значення «Static» вказує, що пошуковій системі немає необхідності індексувати документ надалі, «Dynamic» дозволяє регулярно індексувати HTML-документ.<Meta name = «document-state» content = «Dynamic»>
Мета-тег Keywords – пошукові системи використовує для того, щоб визначити релевантність посилання. Значеним атрибута content даного тега повинні бути тільки ті слова, які містяться в самому документі. Використання тих слів, яких немає на сторінці, не рекомендується. Рекомендована кількість слів у даному тезі – не більше десяти.<Meta name = «Keywords» content = «HTML, програмування, WEB-дизайн»>
Мeтa-тeг Robots – тег формулює інформацію про гіпертекстові документи, яка надходить до робіт пошукових систем. Значення атрибута content тега можуть бути наступними: Index (сторінка повинна бути проіндексована), Noindex (документ не індексується), Follow (гіперпосилання на сторінці відслідковуються), Nofollow (гіперпосилання не простежуються), All (включає значення index і follow, включений за замовчуванням) , None (включає значення noindex і nofollow).
Приклад
<Meta name = «Robots» content = «Noindex, Nofollow»>
Група HTTP-EQUIV:
Мeтa-тeг Content-Language – тег дозволяє вказати мову, за допомогою якої було створено документ.
<Meta HTTP-EQUIV = "Content-language" content = "ru">
Значення аргументу content для різних мов наведені в таблиці 2.2.
Таблиця 2.2 - Мови
de |
Німецький |
en |
Англійський |
es |
Іспанский |
fr |
Французський. |
ru |
Російський |
ua |
Український |
Мeтa-тeг Content-Type – відповідає за вказівку типу документа і кодування символів. Використовувати Meta-тег Content-Type треба тільки з урахуванням деяких нюансів:
По-перше, кодування символів тексту повинне відповідати кодуванню, зазначеному в тезі.
По-друге, сервер не повинен змінювати кодування тексту при обробці запиту браузера.
По-третє, якщо сервер змінює кодування тексту, він повинен скоректувати або видалити Meta-тег Content-Type.
Недотримання цих вимог може призвести до наступного: web-сервер автоматично визначить кодування запиту клієнта і поверне сторіночку web-браузеру перекодованою. Браузер, в свою чергу, буде читати документ відповідно до мета тегу Content-Type. І якщо кодування не співпадуть, то прочитати документ можна буде тільки після ряду вигадливих маніпуляцій. Мета тег Content-Type дуже часто вставляється генераторами HTML коду.
Деякі з можливих типів кодування (див. табл. 2.3).
Таблиця 2.3 - Стандарт [ISO10646]
ISO-8859-1 |
Latin-1, для більшості західноєвропейських мов. |
Windows-1251 |
Кирилиця (Windows) |
KOI8-r |
Кирилиця російська |
Продовження таблиці 2.3
KOI8-u |
Кирилиця російсько-українська |
cp866 |
Кирилиця (DOS) |
Windows-1252 |
Западна Європа (Windows) |
Windows-1250 |
Центральна Європа (Windows). |
Приклад: <meta HTTP-EQUIV=”Content-Type” content="text/html; charset=windows-1251">
Мeтa-тeг Expires – керує кешуванням. Якщо зазначена в тезі дата пройшла, то браузер повинен зробити повторний мережевий запит, а не використовувати копію з кеша. Якщо спочатку вказати минулу дату, то документ не буде кешуватися.
Деякі пошукові роботи можуть відмовитися індексувати документ із застарілою датою. Дата повинна вказуватися в стандарті [RFC850].
Приклад: <meta HTTP-EQUIV = "Expires" content = "Wed, 26 Feb 1999 8:21:57 GMT">
Мeтa-тeг Refresh – визначає затримку часу в секундах, після якої браузер автоматично оновлює документ. Додаткова можливість - автоматичне завантаження іншого документа. Приклад: <meta HTTP-EQUIV = "Refresh" content = "4; URL = http: //www.name.com/"> При використанні цього тега через 4 секунди після завантаження документа відбудеться перехід за адресою http://www.name.com
Елемент <link> – встановлює зв'язок із зовнішнім документом ( файл зі стилями або зі шрифтами). Тег <LINK> завжди розміщується всередині контейнера <HEAD> і не створює "видимого" посилання. Приклад:
<link type="text/css" href="main.css" rel="Stylesheet" />
Атрибути тега <LINK>:
href – шлях до файлу, на який робиться посилання (URI), в якості значення приймає повний або відносний шлях до файлу;
rel – атрибут rel визначає відносини між поточним документом і файлом, на який робиться посилання, щоб браузер знав, як використати документ, що підключається.
Значення атрибута:
stylesheet – визначає, що підключаємий файл зберігає таблицю стилів (CSS);
application / rss + xml – файл у форматі XML для опису стрічки новин, анонсів статей;
type – повідомляє браузеру, який MIME-тип даних використовується для зовнішнього документа. Як правило, застосовується для того, щоб вказати, що підключаємий файл містить CSS.
Значення атрибута – імена MIME-типу в будь-якому регістрі. Для підключаємих таблиць пов'язаних стилів застосовується тип text / css.
media – визначає пристрій, для якого слід застосовувати стильове оформлення. Це дозволяє зробити різний стиль для відображення документа на екрані монітора і при його друку. Допускається писати кілька аргументів через кому.
Значення атрибута:
all – всі пристрої;
screen (значення за замовчуванням) – екран монітора;
print – друкувальний пристрій, принтера;
projection – проектор;
braille – пристрої, засновані на системі Брайля, які призначені для сліпих людей;
speech – мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери.
Елемент <Script> – призначений для опису скриптів, він може містити посилання на програму на певній мові. Скрипти можуть розташовуватися в зовнішньому файлі і зв'язуватися з будь-яким HTML-документом. Такий підхід дозволяє використовувати одні і ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешується при першому завантаженні, і скрипт викликається швидше при наступних викликах. <Script> може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості. У більшості випадків розташування скрипта ніяк не впливає на роботу програми. Однак скрипти, які повинні виконуватися в першу чергу, зазвичай поміщають в заголовок документа.
Атрибути:
defer – відкладає виконання скрипта до тих пір, поки вся сторінка не буде завантажена повністю. Цей параметр працює тільки в браузері Internet Explorer, а в інших браузерах буде проігнорований.
language – встановлює мову програмування, на якому написаний скрипт.
атрибут language не чутливий до регістру і може приймати одне з чотирьох значень:
JavaScript (значення за замовчуванням) – мова програмування JavaScript.
JScript – різновид мови JavaScript розроблена компанією Microsoft. Зміна назви продиктована тим, що ім'я JavaScript вже було зареєстровано, при цьому відмінності між мовами складаються не тільки в назві, але і в підходах.
VBS, VBScript – мова програмування VBScript заснована на Visual Basic. Є продуктом Microsoft і підтримується переважно браузером Internet Explorer.
src – адреса скрипта з зовнішнього файлу для імпорту в поточний документ. Як тільки зовнішні інструкції повністю завантажуються, браузер обробляє їх, немов вони були впроваджені в поточний документ. В якості значення атрибута приймається повний або відносний шлях до файлу.
type – вказує тип MIME для певної мови. Оскільки деякі старі браузери не розуміють атрибут type, можна задавати два атрибута одночасно - language і type. Якщо браузер розпізнає значення атрибута type, то значення language скасовується. Атрибут type не чутливий до регістру і набуває таких значень:
text / javascript (значення за замовчуванням) – для мови програмування JavaScript.
text / vbscript - для мови VBScript.
Елемент <base> – задає базовий URI для відносних URI в документі (наприклад, в атрибутах HREF елемента A). Наприклад, якщо адресу документа вказано як <base href = "http://www.mydocument.com">, то при додаванні малюнків досить використовувати відносну адресу <img src = "/ images / logo.gif">. При цьому повний шлях до зображення буде http://www.mydocument.com/images/logo.gif. Це дозволяє браузеру завжди знаходити графічний файл, незалежно від того, де знаходиться поточна веб-сторінка. Для тега <BASE> закриваючий тег не потрібно.
Атрибути:
href – URI;
target –ім'я вікна або фрейму, куди буде завантажуватися документ, що відкривається за посиланням. Може мати значення: _blank (відкрити завантажену сторінку в новому вікні); _self (завантажує сторінку в поточне вікні); _parent (завантажує сторінку у фрейм-предок); _top (скасовує всі фрейми і завантажує сторінку в повному вікні браузера).