Ієрархія, наслідування та зміна стандартного стиля

509.00K

Category:

software

Загальні принципи веб-розробки

1. Загальні принципи веб-розробки

1.
2.
3.
4.
Мета розробки
Формат розробки
Графічне оформлення
Потенційна аудиторія і пропускна
спроможність
5. Статистичні дані і маркетинг

2. Програмне забезпечення

Для максимальної сумісності розробок
використовуємо програмні пакети типу
• Openserver
• Denwer
які містять
• Веб-сервер Apache (1.3, 2.2, тощо)
• Інтерпретатор PHP (зазвичай 5.х, можна 7.х)
• Сервер баз даних MySQL (зазвичай 5.х)
Дозволено власні ПЗ, роботу яких забезпечуєте
самостійно на власному обладнанні.

3. Витоки HTML

В 1989 році Тім Бернерс-Лі запропонував для
організації CERN проект розподіленої гіпертекстової
системи під назвою World Wide Web для об’єднання
всіх інфоресурсів CERN в єдину інформаційну систему
Основні компоненти системи:
• Електронна пошта
• Система файлових архівів
• Гіпертекстовий масив інформації

4. Що таке HTML

HTML – мова гіпертекстової розмітки на основі
SGML – мови розмітки друкованих документів
Навіщо?
• Спрощення процесу створення документів
• Забезпечення інтерфейсів взаємодії систем та
користувачів

5. Інтерпретатор HTML

Функції інтерпретатора розділені між вебсервером, на якому зберігаються документи, та
інтерфейсом користувача:
• Сервер забезпечує передпроцесорну обробку
документів,
• Інтерфейс користувача інтерпретує мовні
конструкції для представлення інформації

6. Принцип роботи HTML

HTML – описова мова розмітки документів.
Документ є сукупністю контейнерів, що
починаються і закінчуються тегами.
Тег (англ. tag) – вказівник розмітки, що міститься
в кутових дужках "<" i ">“, і містить ім’я тега, за
яким може іти список атрибутів тега.
Приклад:
<ім’я_тега список_атрибутів_через_пробіл>
вміст контейнера </ім’я_тега>

7. Спецсимволи HTML

"
"
&
&
<
<
>
>
 
 
Спецсимволи дозволяють візуалізовувати технічні
символи, що використовуються для запису тегів.

8. Групи тегів HTML

1. Структурні – визначають будову документа
2. Форматувальні – для інформаційних блоків
гіпертексту
3. Спрямовуючі – для посилань і закладок
4. Інтерактивні – для форм
5. Командні – для виклику програм

9. Призначення CSS

Розширення можливостей візуалізації документів
в рамках декларативного характеру розмітки із
збереженням контролю над формою
представлення елементів HTML-розмітки
Вирішення протиріч між точністю визначення
розмірів елементів і точністю визначення
розмірів блоків тексту

10. Порівняння CSS і HTML

HTML:
<і>Текст курсивом? Так!</і>
Текст курсивом! Так!
HTML+CSS:
<і style="text-decoration:underline;
font-style:normal;">Текст курсивом? Ні!</і>
Текст курсивом? Ні!

11. Значення CSS для розробки

Процес розробки і супроводження веб-систем можна
формалізувати і подати у вигляді списку дій:
• Визначення номенклатури сторінок
• Для різних типів сторінок розробка логічної
структури
• Створення навігаційної карти веб-системи
• Розробка стилів відображення для стандартних
компонентів сторінки
• Створення зображень, анімацій, скриптів,
внесення текстів і графіки, генерація сторінок при
звертанні до них

12. Способи застосування CSS

Форма декларування стилю в документі і форма
зв’язування описання стилю відображення
елемента розмітки із самим елементом:
• Зміна стандартного стилю в елементі розмітки
• Розміщення описання стилю в заголовку
документа в елементі <STYLE>
• Розміщення посилання на зовнішнє описання
стилю через елемент <LINK>
• Імпорт описання стилю в документ

13. Зміна стандартного стилю

<H1 STYLE="font-weight:normal; font-style:italic;
font-size:10pt;">
Заголовок першого рівня
</H1>

14. Елемент <STYLE>

Елемент <STYLE>
<HEAD>
<STYLE>
p { color:red; text-align:justify; font-size:8pt; }
</STYLE>
</HEAD>
<BODY>
<P> Приклад описання стиля для стандартного
елемента HTML-розмітки. </P>
</BODY>

15. Посилання через <LINK>

Посилання через <LINK>
<LINK TYPE="text/css" REL="stylesheet"
HREF="http://kpi.ua/style.css">

16. Імпорт описання стиля

<STYLE>
@import url(http://kpi.ua/style.css)
A { color:cyan; text-decoration:underline; }
</STYLE>
Стаття і дискусія: чому не варто вживати @import:
https://habrahabr.ru/post/57012/

17. Cинтаксис

selector [ , selector [ , ...] ] { attribute : value ;
[attribute : value ; ... ] }
АБО
selector selector [selector ... ] { attribute : value ;
[attribute : value ; ... ] }
Селектором може бути а) ім’я елемента розмітки,
б) ім’я класу, в) ідентифікатор об’єкта на сторінці,
г) їхні комбінації.
Атрибут визначає властивість елемента та
значення цієї властивості

18. Ієрархія, наслідування та зміна стандартного стиля

Ієрархічність списків стилів спричиняє
наслідування властивостей батьківського
елемента дочірніми.

19. Історія РНР

PHP було створено як інструмент для вирішення
практичних задач. Його автор Расмус Лердорф хотів
знати, скільки людей прочитали його online-резюме, і
написав для цього просту CGI-оболонку мовою Perl,
тобто це був набір Perl-скриптів. Пізніше оболонку
переписав на С і виклав у вільний доступ.
1995 – «РНР/FI»
1997 – «РНР/FI 2.0»
1998 – РНР 3.0
2000 – РНР 4.0 Zend Engine
2004 – PHP 5.0 Zend Engine 2

20. Можливості РНР

Три області застосування:
• Серверні програми
• Програми командного рядка
• GUI-програми
Переваги:
Простота, мультиплатформенність, підтримка
ООП і ПП, робота із ФС, взаємодія по SOAP, LDAP,
SNMP, IMAP, POP3, HTTP, бібліотеки для роботи із
PDF, flash, XML, зображеннями, базами даних,
тощо.

21. Перша програма на РНР

<html>
<head><title>Перша програма на РНР</title></head>
<body>
<?php
echo "<p>Вітаю слухачів першої лекції!</p>";
?>
</body>
</html>

22. Основний синтаксис

Початок і закінчення коду РНР
<?php
?>
Розділення конструкцій
echo "Hello, world!";
Коментування коду
// коментар ремарка пояснення 1
# коментар ремарка пояснення 2
/* коментар ремарка
пояснення 3 */

23. Імена змінних

$variable1
$Variable1
$VARIABLE1
Коректне ім’я змінної має починатися з букви або
символа підкреслення з наступними в будь-якій
кількості буквами (рекомендую латиницю для
уникнення прихованих артефактів), цифрами або
символами підкреслення.

24. Присвоєння значень змінним

$var1 = ' Value ';
$var2 = $var1;
$var1 = ' New value ';
echo 'Змінна 1: '.$var1.' Змінна 2 : '.$var2;
В ранньому PHP змінні присвоювались по
значенню – коли ви присвоїли вираз змінній, всі
значення оригінального виразу копіюються в цю
змінну. Таким чином ми зберігаємо оригінальний
вираз незмінним.

25. Присвоєння за посиланням

$var1 = ' Value ';
$var2 = &$var1;
$var1 = ' New value ';
echo "Змінна 1 : '.$var1.' Змінна 2 : '.$var2;
Щоб присвоїти значення за посиланням –
потрібно явно вказати ім’я змінної, значення якої
має присвоюватись за посиланням, із символом
амперсанд &, і зміна першої змінної
спричинятиме зміну другої змінної.

26. Константи

Для зберігання сталих величин використовуються
константи: математичні, шляхи до файлів тощо.
define("Ім'я","Значення",[Нечутливість_до_регістра])
Особливості:
• встановлюється функцією define(),
• значення встановлюється лише один раз,
• неможливо анулювати після встановлення,
• не має символа $.
define("Pі","3.14", True);
echo pi;

27. Константи інтерпретатора

В PHP існують наперед встановлені константи
интерпретатора РНР:
• __FILE__ містить ім'я і шлях до файла
виконуваного в даний момент скрипта,
• __FUNCTION__ містить ім'я функції,
• __CLASS__ містить ім'я класу,
• PHP_VERSION містить версію PHP.
Повний список наперед встановлених констант
дивіться в документації PHP.

28. Оператори

Оператори дозволяють виконувати дії над
змінними, константами і виразами. Розрізняють:
• арифметичні оператори,
• рядковий оператор,
• оператори присвоєння,
• логічні оператори,
• оператори порівняння,
• оператори інкремента і декремента.

29. Арифметичні оператори

Арифметичні оператори:
Позначка
+
*
/
%
Назва
Додавання
Віднімання
Множення
Ділення
Остача від
ділення
Приклад
$a + $b
$a - $b
$a * $b
$a / $b
$a % $b

30. Рядковий оператор

Рядковий оператор:
Позначка
.
Назва
Приклад
Конкатенація $c = $a . $b

31. Оператори присвоєння

Оператори присвоєння
Позначка
=
+=
.=
Назва
Присвоєння
Присвоєння із
збільшенням
Присвоєння із
конкатенацією
Приклад
$a = 2;
$a += 5;
$a = "текст1 ";
$a .= "текст2";

32. Логічні оператори

Логічні оператори:
Позначка
and (&&)
Назва
І
or (||)
Або
xor
Виключення (oдна із
змінних істинна)
Інверсія (not)
!
Приклад
$a and $b
$a && $b
$a or $b
$a || $b
$a xor $b
! $a

33. Оператори порівняння

Оператори порівняння:
Позначка
Назва
Приклад
==
Рівність
$a == $b
===
!= або <>
Еквівалентність
Нерівність
$a === $b
$a != $b
$a <> $b
!==
<
>
<=
>=
Нееквівалентність
Менше
Більше
Менше або рівне
Більше або рівне
$a !== $b
$a < $b
$a > $b
$a <= $b
$a >= $b

34. Оператори інкремента і декремента

Оператори інкремента і декремента:
Позначка
Назва
Приклад
++$a
Пре-інкремент
$a=2;
echo "3:".++$a;
$aa++
Пост-інкремент
$a=2;
echo "2:".$a++;
--$a
Пре-декремент
$a=2;
echo “1:".--$a;
$a--
Пост-декремент
$a=2;
echo “2:".$a--;

35. Типи даних

PHP підтримує 8 простих типів даних: скалярні,
змішані і спеціальні.
boolean (логічний) ;
integer (цілий) ;
float (з плаваючою точкою) ;
string (рядковий).
array (масив) ;
object (об'єкт).
o resource (ресурс) ;
o NULL.

36. Тип boolean

Виражає істинність значення, може мати лише
два значення – TRUE або FALSE .
Щоб встановити тип, використовують ключове
слово TRUE або FALSE, регістронезалежні:
<?php
$test = True;
?>

37. Тип integer

Задає число із множини цілих чисел Z = {..., -2, -1, 0, 1, 2,
...}. Можна вказувати в 10-вій, 16-вій або 8-вій системі
числення.
<?php
$a = 1234; $a = -123; $a = 0123; $a = 0x1A;
?>
Розмір цілого залежить від платформи, як правило
максимум біля 2 млрд (32-бітне знакове). Беззнакові цілі
PHP не підтримує.
<?php
(integer)(0.5)
?>

38. Тип float

Числа з плаваючою точкою (дійсні числа) можна
визначати так:
<?php
$a = 1.234;
$b = 1.2e3;
$c = 7E-10;
?>
Розмір числа залежить від платформи, як
правило максимум ~1.8e308 з точністю біля 14
десяткових знаків.

39. Тип string

Рядок – це набір символів. В PHP символ – це
байт, тобто існує рівно 256 різних символів. PHP
не має вбудованої підтримки Unicode. В PHP
практично не існує обмежень на розмір рядків,
тому не треба хвилюватися за їхню довжину.
Можна встановлювати трьома способами:
через одинарні лапки,
через подвійні лапки,
через heredoc-синтаксис.

40. Приклади типу string

echo 'Для виводу \' треба перед лапкою
поставити \\';
echo 'Це не вставить \n новий рядок';
echo 'Змінні $a не підставляються';
echo “Тут ' виводиться“;
echo “Новий \n рядок “;
echo “ Змінні $a підставляються “;

41. Керуючі послідовності в рядках

\n - Новий рядок ( LF або 0x0A (10) в ASCII)
\r - Повернення каретки ( CR або 0x0D (13) в ASCII)
\t - Горизонтальна табуляція ( HT або 0x09 (9) в ASCII)
\\ - Зворотній слеш
\$ - Знак долара
\“ - Подвійні лапки

42. Heredoc-синтаксис

<?php
$str = <<<EOD
Рядкова змінна на двох рядках
через heredoc-синтаксис
EOD;
$world = 'світ!';
echo <<<EOD
Привіт "$world"
EOD;
?>

43. Тип array

Масив в PHP - це набір впорядкованих пар "ключ" "значення". Він різнобічно оптимізований, тому можна
використовувати його як масив, список (вектор), хештаблицю, стек, чергу тощо. Також можна емулювати
дерева - оскільки значенням може бути інший масив працює вкладеність або ієрархічність.
Встановити масив можна конструкцією array () або
безпосередньо задаючи значення його елементів.
array (key => value,
key1 => value1, ... )

44. Тип object

Об'єкт – тип даних із ООП. Відповідно до
принципів ООП, клас – це набір об'єктів з
певними властивостями і и методами роботи с
ним, а об'єкт відповідно є екземпляром класу.
В PHP для доступу до методів об'єкта
використовують оператор “->”. Для ініціації
об'єкта використовується вираз new, який
створює в змінній екземпляр об'єкта.

45. Тип resource

Ресурс – це спеціальна змінна із посиланням на
зовнішній ресурс (наприклад, конект до БД).
Ресурси створюються і використовуються
спеціальними функціями (mysql_connect(),
pdf_new() тощо).

46. Тип Null

Спеціальне значення NULL каже про те, що
змінна не має власного значення.
Змінна є NULL, якщо:
їй присвоєно константу NULL ( $var = NULL );
їй ще не було присвоєно яке-небудь значення;
вона була видалена з допомогою unset ().
Існує тільки одне значення типу NULL –
регістронезаоежне ключове слово NULL.

English Русский Rules