Web Tehn

Основи вебтехнологій.
Створення вебсайтів.
Семенчук С.П.
Методист лабораторії ІКТ
Мережа Інтернет
Інтернет - всесвітня система об'єднаних
комп'ютерних мереж, що забезпечують роботу з
великим спектром ресурсів (сайти, електронна
пошта і т.д.).
Сайти - це набір текстових файлів

(гіпертекстових сторінок), пов'язаних між собою
вузлами переходу (гіперпосиланнями для
швидкого переходу на інші сторінки).
Гіпертекст - це текст, в якому міститися

посилання на інші документи.
Браузер
??
Веб-оглядач, браузер (від англ. Web
browser) - програмне забезпечення для
перегляду веб-сайтів, тобто для запиту
веб-сторінок (переважно з Мережі), їх
обробки, виведення і переходу від однієї
сторінки до іншої.
Веб-сторінка
Веб-сторінка - документ або інформаційний ресурс Всесвітньої
павутини, доступ до якого здійснюється за допомогою веб-браузера.
Веб-сторінки зазвичай створюються на мовах розмітки HTML і можуть
містити гіперпосилання для швидкого переходу на інші сторінки.
Інформація на веб-сторінці може бути представлена в різних формах:

• текст
• статичні і анімовані графічні зображення
• аудіо
• відео
Інформаційний вміст веб-сторінки зазвичай називається контентом.
Кілька веб-сторінок, об'єднаних загальною темою і дизайном, а також

пов'язаних між собою посиланнями і зазвичай знаходяться на одному
сервері, утворюють веб-сайт.
Клієнт/сервер. HTTP-протокол
HTTP (англ. HyperText Transfer Protocol - «протокол передачі
гіпертексту») - протокол прикладного рівня передачі даних (спочатку - у
вигляді гіпертекстових документів).
Основою HTTP є технологія «клієнт-сервер», тобто передбачається
існування споживачів (клієнтів), які ініціюють з'єднання і надсилають
запит, і постачальників (серверів), які очікують з'єднання для отримання
запиту, виробляють необхідні дії і повертають назад повідомлення з
результатом.
На що витрачає час HTTP запит
Запит відбувається в кілька етапів:
DNS-запит - пошук найближчого DNS-сервера, щоб
перетворити URI (наприклад, google.com) в його числове
уявлення - IP-адреса (74.125.87.99, прикл. - отримано за
допомогою команди ping). Це адреса і буде реальним адресою
сайту в Інтернет.
• з'єднання - щоб установити з сервером за отриманим IP-
адресою;
• передавання даних;
• очікування відповіді - чекаємо поки пакети даних
дійдуть до сервера, він їх обробить і відповідь
повернеться назад;
• отримання даних.
Які бувають Web-сторінки?
• статичні – існують на сервері у вигляді готових
файлів: * .htm, * .html
• динамічні – повністю або частково створюються на
сервері в момент запиту (вибір інформації з бази
даних) * .shtml, * .asp, * .pl, * .php
• дозволяють вибирати інформацію з бази

даних по заздалегідь невідомим запитам
• додаткове навантаження на сервер
• завантажуються повільніше
Загальне уявлення про мови
гіпертекстової розмітки HTML, XML,
XHTML
ЕВОЛЮЦІЯ МОВ РОЗМІТКИ.
1986
1991 1994
ISO-8879
CERN HTML HTML 2.0
SGML
2000 2014 Март 1995

XHTML 1.0 HTML 5 + CSS 3 HTML 3 + CSS
24 декабря 1999 Декабрь 1997 Январь 1997

HTML 4.01 HTML 4.0 + CSS 2.0 HTML 3.2
HTML
(від англ. HyperText Markup Language — «мова розмітки гіпертексту»)
Основним форматом подання документів в мережі

Інтернет є мова гіпертекстової розмітки HTML (стандартна
мова розмітки документів у Всесвітній павутині).
HTML - це певна сукупність правил (тегів), за якими
оформляється документ. Теги показують Інтернет-
браузеру, як слід відображати текст на Web-сторінці.
Структура тега (пари тегів) завжди така:
<Назва тега> ... </ назва тега>
Теги можуть містити атрибути, що характеризують
відображення інформації всередині тега.
Теги
Тег – это команда мови HTML, яку виконує браузер:
Вставка
• Непарні теги малюнка
<IMG SRC = "vasya.jpg">
• Парні теги(контейнери)
відкриваючий
<TABLE>
... Область дій
</TABLE>
закриваючий
Структура Web-сторінки
<HTML>
HTML-код сторінки поміщається
<HEAD>
всередину контейнера
<TITLE>
<HTML> …</HTML>
Заголовок Web-строрінки
</TITLE> поміщається в контейнер
</HEAD> <HEAD>…</HEAD>
<BODY>
Основний зміст сторінки
поміщається в контейнер
<BODY>…</BODY>
Назва Web-сторінки міститься в
</BODY> контейнері <TITLE> ... </ TITLE> і
</HTML> виводиться в рядку заголовка
браузера.
Найпростіша Web-сторінка
index.html шапка («головна»)
<HTML>
<HEAD>
<TITLE>Моя перша
первая
Web-страница</TITLE>
Web-сторінка</TITLE>
</HEAD>
<BODY>
<BODY>
Привет!
Привіт!
</BODY>
</BODY>
</HTML>
Основна
частина(«тіло»)
Cтворення файла веб-сторінки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Моя
сторінка</title>
</head>
<body>
Привіт, це моя перша сторінка.
<br>
Ласкаво просимо! :)
</body>
</html>
Збережемо цей документ, присвоївши йому ім'я *.html

Web-сторінки.
Мова HTML
Тема 2. Оформлення тексту
15
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документу</H1>
<H2>Заголовок розділу</H2>
<H3>Заголовок підрозділу</H3>
<H4>Заголовок параграфу</H4>
<H5>Коментарі</H5>
<H6>Авторські замітки</H6>
</BODY>
left,
center,
вирівнювання: right
<H1 ALIGN=”center”>Історія</H1>
16
Абзаци
• перехід на нову стрічку
Сучасний стан розвитку
цифрових технологій<br>
забезпечує можливість
активного впровадження їх<br>
в освітній процес.
• абзац (з відступом)
<p>Сучасний стан розвитку цифрових
технологій</p>
<p>забезпечує можливість</p>
<p>активного впровадження їх</p>
<p>в освітній процес. </p>
Вирівнювання
атрибут тэга <P>
<P ALIGN = "center">
Цей текст вирівняний по центру.
</P>
<P ALIGN = "justify">
Цей текст вирівняний по ширині.
</P>
left по лівій границі

right по правой границі
center по центру
justify по ширині
18
Физична розмітка
курсив (italic) <I>Вася</I> Вася
жирний (bold) <B>Вася</B> Вася
подчеркування
(underline) <U>Вася</U> Вася
закреслений
(strike out) <S>Вася</S> Вася
верхній індекс
(superscript) Вася<SUP>2</SUP> Вася2
нижній індекс
(subscript) Вася<SUB>2</SUB> Вася2
Спеціальні символи
Символ HTML-код Название
– — (довге) тире
нерозривний пробіл
§ § параграф
© © символ авторського права
« « ліва кирилична кавичка
» » права кирилична кавичка
® ® зареєстрована торгова марка
° ° градус
² ² квадрат
³ ³ куб
¼ ¼ четверть
½ ½ половина
¾ ¾ три четверті
× × знак множення
÷ ÷ знак ділення
Мова HTML
Тема 3. Оформлення документа
21
Тег BODY – загальні властивості сторінки
• колір фону і тексту
атрибути тегу Колір тексту
<BODY TEXT="#0000ff"
BGCOLOR=#007500>
Привіт!
Колір фону
</BODY>
• колір гіперпосилань Колір

посилань
<BODY LINK="#FF8C00"
VLINK=green>
...
відвідані посилання
</BODY>
(visited link)
22
Колір гіперпосилань
<BODY LINK=”#FF8C00”
VLINK=”green”
ALINK=”red”>
...
</BODY>
LINK посилання, на яких не були

VLINK відвідані посилання
ALINK активні посилання
23
Тег FONT – властивості блоку тексту
• колір тексту
Привіт!
<FONT COLOR=”red”>
Як справи?
</FONT>
• розмір шрифту
Привіт!
<FONT COLOR=”red”
SIZE=6>
Як справи?
</FONT> от 1 до 7
(3 – нормальний)
24
Розділова лінія
horizontal rule
<HR>
ширина в
пікселях або
відсотках товщина вирівнювання
<HR WIDTH="60%" SIZE="3" ALIGN="right">

25
Кодування кольору
• імена
red, green, blue, magenta, black, white
• шіснадцяткові коди
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
Мова HTML
Тема 4. Графіка
27
Графічні формати
GIF (Graphic Interchange Format)
• стиснення без втрат
• прозорі області
• анімація
тільки з палітрою (2 ... 256 кольорів)
малюнки з чіткими кордонами, дрібні
рисунки
JPEG (Joint Photographer Expert Group)
● стиснення з втратами
● тільки True Color (16,7 млн. квітів)
немає анімації і прозорості
малюнки з розмитими межами, фото
PNG (Portable Network Graphic)

• стиснення без втрат
• з палітрою (PNG-8) і True Color (PNG-24)
• прозорість і напівпрозорість (альфа-канал)
• немає анімації
• погано стискає дрібні малюнки
28
Вирівнювання
<IMG SRC="flag.jpg" ALIGN="left">
left righ
t
top bottom middl

(по замовчуванню)
e
30
Графіка в документах
із того ж
каталогу: image
(зображення)
<IMG SRC="flag.jpg">
source
із іншого каталогу: (джерело)
<IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
з другого сервера:
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
31
Відступи
<IMG SRC="net.jpg" <IMG SRC="net.jpg"
ALIGN="left"> ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical
space)
HSPACE
(horizontal
space)
32
Інші атрибути
• спливаюча підказка
• напис на місці малюнка,
якщо його немає
<IMG SRC="myphoto.jpg"
ALT="Мій малюнок" розміри
width="300" height="150" дозволяють:
• розтягнути - стиснути
border="1"> • не псувати дизайн,
якщо малюнка немає
товщина рамки
навколо малюнка
33
Малюнок-гіперпосилання
локальне посилання:
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблиці" BORDER=0>
</A>
якщо </A> не впритул <IMG

…>, буде «хвіст»
посилання на другий сервер: не буде

«хвосту»
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Безкоштовна пошта"
BORDER=0></A>
Мова HTML
Тема 5. Гіперпосилання
35
Посилання на інші сторінки сайту
• сторінка в тій же папці
anchor (якір)
<A HREF="table.htm">Таблиці</A>
hyper reference
(гіперпосилання)
• сторінка у вкладенійпапке
<A HREF="example/ex1.htm">Приклад</A>
• сторінка в сусідньому каталогу
<A HREF="../texts/text1.htm">Текст</A>
вийти з поточного каталогу

36
Приклаид (посилання з файлу rock.html)
– stories
story.html
– novels
list.html
– ne
w rock.html
sea.html
– ol
d verse.html
37
Посилання на інші сайти
• на головну сторінку сайту
<A HREF="http://www.mail.ru">Пошта</A>
index.htm, index.html, default.asp, …
• на конкретну сторінку сайту (URL)

<A HREF="http://www.ivan.ru/text/a.htm">
Текст</A>
• на файл для скачування

<A HREF="http://www.vasya.ru/prog.zip">
завантажити</A>
38
Посилання всередині сторінки
<A NAME="up"></A> перехід на мітку

<A HREF="#chap1">Розділ 1</A><br>
<A HREF="#chap2">Розділ 2</A><br>
<A NAME="chap1"></A> мітка (якір)
<H1>Розділ 1</H1>
Це текст розділу 1.<br> Це текст розділу 1.<br>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Розділ 2</H1>
<A HREF="#up">Наверх</A>
39
Запуск поштової програми
<A
HREF="mailto:zippo@gmail.com">
Напишіть нам!
</A>
Мова HTML
Тема 6. Етапи створення сучасного
сайту
Етапи створення сайту
Роботу зі створення можна розділити на
такі етапи:
1. Підготовчий;
2. Розробка макета;
3. Верстка;
4. Програмування;
5. Розміщення на хостингу;
6. Наповнення контентом;
7. Розкрутка сайту;
8. Адміністрування (підтримка) сайту.
1. Підготовчий етап
Створення будь-якого сайту має починатися зі
складання його структури (карти сайту), тематики,
мета сайту і аудиторія (стать, вік) і т.д.
Приклад такої структури може виглядати так:

➢ Головна
➢ Про компанію
- Історія
- Місія
➢ Товари
➢ Автомобілі
- Легкові
- Позашляховики
➢ Мотоцикли
➢ Велосипеди
➢ Контакти
2. Розробка макета
Розробка макета -
розташування основних
значущих елементів (блоків)
на кожній сторінці (каркас).
Розробка дизайну -
отрисовка сайту в
графічному редакторі
За допомогою мови HTML

створюємо структуру сайту
з використанням блоків і
надання їм стилю за
допомогою CSS.
Приклад створеного макета в Photoshop
3. Верстка. Види верстки при створенні сайтів
Таблична. У табличній верстці можна створювати

колонки, таблиці в браузерах виглядають майже
однаково. Недоліки: індексація такого сайту дуже
повільна, довго завантажуються сторінки і код такої
верстки занадто великий.
Блокова. Переваги блочної верстки полягає в тому, що

вона правильно відображає всі елементи сайту на різних
пристроях (наприклад, на мобільних телефонах).
Компактний код, все елементи важать менше, а значить
сторінка буде завантажуватися швидко. З недоліків можна
відзначити, що при використанні різних браузерів верстка
може поплисти.
Таблична верстка <table>
<table width="100%" height="500" border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<td height="10%" colspan="2" align="center"><h1>Заголовок сайту</h1></td></tr>
<tr>
<td width="20%"> <h2>Набір гіперпосилань</h2> </ td>
<td align="center"> <h2>Вміст сайту</h2> </ td> </ tr>
<tr>
<td height="5%" colspan = "2" align="right"> <h2>Відомості про права розробника</h2> </ td>
</ tr>
</table>
Блокова верстка
Створюємо найпростіший макет сайту на основі блокової верстки.
<div> </div>
Елемент <div> є блоковим елементом і призначений для виділення
фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку
управляється за допомогою стилів.
Блоки верстка з <div>
В HTML файлі розбиття на блоки
<body>
<div id="container">
<div id="header">
<h2>Шапка (header)</h2></div>
<div id="navigation">
<h2>Блок навігації (navigation)</h2></div>
<div id="menu">
<h2>Меню (menu)</h2></div>
<div id="content">
<h2>Контент (content)</h2></div>
<div id="clear"></div>
<div id="footer">
<h2>Підвал сайту (footer)</h2></div>
</div>
</body>
CSS оформлення стилів
<style> #navigation { #footer {
body { background: background:
background: #f3f2f3; #FF9999; #0066FF;
color: #000000; width: 900px; height: 80px;
font-family: height: 35px; width: 900px;
Trebuchet MS, Arial, Times } }
New Roman; #menu { </style>
font-size: 14px; background:
text-align: center; #99CC99;
} float: left;
#container { width: 100px;
background: #99CC99; height: 400px;
margin: 30px auto; }
width: 900px; #content {
height: 600px; background: #ffff7f;
border: 1px solid float: right;
blue; width: 700px;
} height: 400px;
#header { }
background: #clear {
#66CCCC; clear: both;
Cascading Style Sheets (СSS)
CSS (Cascading Style Sheets)
Каскадні таблиці стилів переважно використовується як засіб
опису, оформлення зовнішнього вигляду веб-сторінок, написаних за
допомогою мов розмітки HTML.
• використовується творцями веб-сторінок для завдання
кольорів, шрифтів, розташування окремих блоків і інших
аспектів представлення зовнішнього вигляду цих веб-сторінок.
• надає велику гнучкість і можливість управління його поданням
• поділ опису логічної структури веб-сторінки (яке проводиться за

допомогою HTML або інших мов розмітки) від опису зовнішнього
вигляду цієї веб-сторінки (яке тепер проводиться за допомогою
формальної мови CSS)
Подключення файлу зі стилем:

<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Синтаксис CSS
Синтаксис CSS складається з трьох частин:
селектора, властивості і значення:
Селектори як правило CSS можуть бути:

• селекторами елементів (a, p..)
p { font-family: Garamond, serif; }
синтаксис:
• селекторами класів (class)
.note { color: red; селектор {
background: yellow; властивість: значення;
font-weight: bold; } властивість: значення;
властивість: значення;
• селекторами ідентифікаторів (id) }
#paragraph1 {
margin: 0;
width:100px;}
• селекторами псевдокласів (a:hover…)

a:active {
color:yellow;}
селектори елементів
Фрагмент HTML-документа: CSS оформлення:
З даної розмітки видно лише елементи

заголовків і абзаців, і ні одного слова про
оформлення - шрифту, кольору, фону
тощо. <style>
/*оформляємо заголовки */
h1{
<!DOCTYPE html>
color: red;
<html>
background-color: yellow;
<head>
font: Tahoma 2em;
<meta charset="utf-
}
8">
<title></title>
/*оформлення абзаців тексту*/
</head> p{
<body> color: green;
<h1>Назва</h1> line-height: 150%
<p>Текст довільного абзацу</p> }
</body> </style>
</html>
Селектори класів і ідентифікаторів
Подивимося на фрагмент HTML-документа
<div id="content">
<p id="select">Кава - напій, що виготовляється із смажених зерен кавового
дерева. Завдяки вмісту кофеїну надає стимулюючу дію.</p>
<p class="default">До XIV століття кава виростав в Ефіопії в дикому
вигляді.</p>
<p class="default">Потім, в 1706 році голландські колоністи прислали
саджанець кавового дерева в ботанічний сад Амстердама, і з цього дерева
почалося вирощування рослини в колоніях Нового Світу.</p>
</div>
В CSS
#content { #select { .default {
width: 800px; width: 800px; width: 800px;
background: #ccc; font-size: 20pt; font-size: 14pt;
font-size: 14pt} color: blue; } }
Основні властивості CSS
width:1000px; // задає ширину елемента (можна в px,%)
height:217px; // задає висоту елемента
background: red; // задає колір фону
background: url(‘image.jpg’); // задає фонове зображення
text-align: center; // задає вирівнювання тексту
float:left; // задає положення блоку <div> зліва
a:hover // змінює стилі посилання при наведення курсору
a:visited // змінює стиль відвіданого посилання
margin: 0 auto; // задає відступ зверху / знизу правою / лівою

padding: 20px 20px; // задає відступ всередині блоку
Додаткові властивості можна ознайомитись за наступними

посиланнями:
http://css.manual.ru https://webref.ru/ https://webref.ru/ http://htmlbook.ru
Селектори псевдокласів
Псевдоклас : hover не обов'язково повинен застосовуватися до посилань, його
можна додавати і до інших елементів документа. Так, в прикладі нижче показана
таблиця, рядки якої змінюють свій колір при наведенні на них курсора миші. Це
досягається за рахунок додавання псевдокласу : hover до селектора TR .
<!DOCTYPE HTML>
<html>
<head>
<title>Псевдоклассы</title>
<style>
table { border-spacing: 0; }
td { padding: 4px; }
tr:hover {
background: #fc0; /* Меняем цвет фона строки таблицы */
}
</style>
</head>
<body>
<table width="400" border="1">
<tr>
<th></th>
<th>Пики</th>
<th>Трефы</th>
<th>Бубны</th>
<th>Червы</th>
</tr>
<tr>
<td>Чебурашка</td>
<td>5</td><td>2</td><td>4</td><td>2</td>
</tr>
<tr>
<td>Крокодил Гена</td>
</tr>
<tr>
<td>Шапокляк</td>
</tr>
<tr>
<td>Крыса Лариса</td>
</tr>
</table>
</body>
</html>
CSS 3. Новые возможности
• Прозрачность/Opacity
В браузерах, поддерживающих это свойство, указать прозрачность можно так:
В файле стилей нужному селектору указать следующие свойства:

background-color: rgb(0,0,255);
opacity: 0.5;
• Указание нескольких фоновых картинок/Multiple Backgrounds
Новая версия CSS позволяет добавлять элементам несколько фоновых
картинок. Можно разместить изображения вверху, в центре, в углу и в
других местах. Верстать сложные макеты станет намного проще.
Вот пример установки нескольких картинок для фона:
В файле стилей нужному селектору указать следующие свойства:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
• Пользовательское изменение размера/Resize
Средствами новой версии CSS можно добавить немного интерактивности на
ваш сайт - свойство resize позволит посетителю изменять размер
элементов:
div.resize { width: 100px; height: 100px; resize: both; overflow: auto; }
• Закругленные углы/border-radius
С помощью этого свойства возможно делать закругленные углы у блоков.
Допустимо указывать радиус 1em;
#elem { border-top-left-radius: закругления для каждого угла
border-top-right-radius: 2em;вborder-
отдельности.
bottom-right-radius: 3em; border-bottom-left-radius: 4em; }
Границы могут быть не только идеально круглыми - можно указывать два

радиуса кривизны:
border-radius: 55pt 25pt;
• Тень блока/box-shadow
Абсолютно новое свойство, позволяющее показать бокс с тенью. Его формат таков:
span { box-shadow: 0.2em 0.2em 5px #CCC; }
Результат можно увидеть на картинке:
• Текст с тенью/text-shadow
Это свойство не совсем новое, оно присутствовало и в CSS2, однако поддерживают его
пока только браузеры Opera 9.5, Safari 3, Konqueror и iCab. Если ИЕ8 и Firefox 3 не
отстанут, применять Photoshop для того, чтобы сделать простую тень, станет не
нужно.
Пример использования text-shadow:

color: #fff; background-color: #fff; text-shadow: 2px 2px 2px #000;
• Добавление простой анимации
Подробно ознакомиться можно здесь: http://alt-f4.ru/article/new-in-css3

JavaScript
JavaScript
Мова JavaScript надає засоби для вирішення багатьох

завдань у документі HTML без необхідності взаємодії з
сервером.
Найбільш широке застосування знаходить в браузерах
як мова сценаріїв для додавання інтерактивності веб-
сторінок.
Наприклад, що випадає або розкриває меню, слайд-
шоу із зображень, перевірка правильності введення
даних в форму, відображення зображень в новому вікні з
ефектами і т.д.
Вставка коду в HTML-документ в контейнерах

<script> ... </script>
Об’єктна модель DOM
У Javascript сторінка представлена у вигляді об'єктної

моделі DOM (Document Object Model).
Згідно DOM-моделі, документ є ієрархією.
Кожен HTML-тег утворює окремий елемент-вузол, кожен
фрагмент тексту - текстовий елемент, і т.п.
Простіше кажучи, DOM - це уявлення документа у
вигляді дерева тегів. Це дерево утворюється за рахунок
вкладеної структури тегів плюс текстові фрагменти
сторінки, кожен з яких утворює окремий вузол.
Найпростіший DOM
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Довільний текст
</body>
</html>
Самий зовнішній тег - <html>, тому дерево починає рости від нього.
Усередині <html> знаходяться два вузла: <head> і <body> - вони
стають дочірніми вузлами для <html>.
Звернення до елементів DOM
Стандарт DOM передбачає кілька засобів пошуку
елемента.
Це методи:
● getElementById,
● getElementsByTagName
● getElementsByName.
Найзручніший спосіб знайти елемент в DOM - це
отримати його по id. Для цього використовується виклик
document.getElementById (id)
Наприклад, наступний код змінить колір тексту на
блакитний в div'і з id = "dataKeeper":
<div id="dataKeeper">Колір тексту буде блакитний</div>
<script>
document.getElementById('dataKeeper').style.color = 'blue'
</script>
Можливості, які дає DOM
Кожен DOM-елемент є об'єктом і надає властивості для
маніпуляції своїм вмістом, для доступу до батьків і
нащадкам.
Приклад створення розкриваючого меню:
<ul id="menu">
<li><a href="#" onclick="openMenu(this);return false">menu 1</a>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="history.html">Історія кави</a></li>
<li><a href="vir.html">Вирощування</a></li>
<li><a href="klasif.html">Класифікація</a></li>
<li><a href="forma.html">Контакти</a></li>
</ul>
</li>
</ul>
Вставити код JavaScript на сторінку
Вставляємо наступну функцію JavaScript в будь-якому
місці веб-сторінки з меню:
<script>
function openMenu(node){
var subMenu =
node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ?
subMenu.style.display = "block" : subMenu.style.display =
"none";
}
</script>
Результат
При натисканні по “menu 1”:

Використання функцій та
обробка подій onClick
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function mrez(n)
{
let stext='Удосконалено професійні компетентності щодо:\n'+
' - планування освітнього процесу;\n'+
' - здійснення освітнього процесу на основі використання сучасних науково-
методичних підходів;';
if (n==1) {alert (stext)};
if (n==2) {alert ("Варіант 2")};
};
</script>
</head>
<body>
<?php
echo "<input type='button' name='rezultat' onclick= mrez(1); value='Результат'><br><br>";
echo "<a href='#' onclick= mrez(2);>Результат</a>";
?>
</body>
</html>
Результат
jQuery
jQuery — бібліотека JavaScript, що

фокусується на взаємодії JavaScript і
HTML. Бібліотека jQuery допомагає легко
отримувати доступ до будь-якого елементу
DOM, звертатися до атрибутів і вмісту
елементів DOM, маніпулювати ними.
jQuery. Підключення
Підключити jQuery можна двома шляхами:
1.Завантаження і підключення
Завантажувати jQuery бажано з http://jquery.com/download/

Щоб завантажити файли по цих посиланнях, потрібно клікнути по ним
правою клавішею і вибрати "Зберегти як".
Після того як ви завантажили потрібний файл з jQuery, потрібно закачати

його на сервер, де розташовується ваш сайт і підключити його на сторінки
свого сайту, прописавши до нього шлях:
………………..
<head>
<meta charset="UTF-8">
<title>Document</title>

<script
src="js/jquery-2.2.3.min.js"></script>
</head>
………………..
jQuery. Підключення
Даний спосіб хороший тим, що бібліотека підключається з сайту і не валяється
на жорсткому диску. Особливо це актуально при великій кількості маленьких
проектів і для навчання.
Для підключення рекомендую використовуватися підключення від Google

Developers, зазвичай знайти цю сторінку можна за посиланням jquery google.
Наше завдання скопіювати рядок:
...

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
</body>
</html>
jQuery. Пример(слайдер)
jQuery можно использовать для различных задач.
Разберем например слайдер и галерею изображений.
Разберем самый простой слайдер, который можно взять здесь:

https://github.com/k-ivan/jQuery-simple-slider/archive/master.zip
•Скачаем файлы слайдера и распакуем их на сервер.

•Подключим файл стиля слайдера slider.css (в нем можно менять
стиль слайдера), библиотеки jQuery и самого слайдера
Внутри тега head прописываем

<link rel="stylesheet" href="slider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slider.js"></script>
• Добавляем на страницу следующий код
<div class="slider-container">
<div class="slider" id="slider">
<div class="slide">
<img src="img-1.jpg" alt="">
<span class="caption"><strong>Текст 1<a href="">Далее</a> </span>
</div>
<div class="slide">
<span class="caption">текст 2</span>
</div>
<div class="slide">
<span class="caption">Текст 3</span>
</div>
</div>
<a href="" class="switch" id="prev"><span></span></a>
<a href="" class="switch" id="next"><span></span></a>
</div>
Как изменять слайдер:
1) Чтобы добавить(удалить) страничку слайдера добавляем(удаляем)

элемент
<div class="slide">
<span class="caption"><strong>Текст 1<a href="">Далее</a> </span>
</div>
2) Изменение картинки :
В теге Img в атрибуте src указываем ссылку на нужное изображение.
3)Изменение текста на слайде

В теге span (<span class="caption">текст 2</span>) меняем текст на
нужный.
• Вставляем Инициализацию плагина
1. Без параметров
<script> $(".slider-container").sliderUi(); </script>
2. C расширенными параметрами
<script>
$(".slider-container").sliderUi({
speed: 500,
cssEasing: "ease-in-out" //описание easing для css анимации
});
</script>
Список параметров, которые можно изменять:

controlShow: true, // показывать навигацию внизу
arrowsShow: true, // показывать вперед|назад навигацию
autoPlay: true, // автоматическое перелистывание изображений
delay: 3000, // задержка перед перелистыванием
caption: false, // показывать описание
speed: 300, // скорость анимации
cssEasing: "ease-out" // функция плавности анимации с помощью CSS
Результат:
jQuery. Пример(галерея изображений)
Использование jQuery для создания галереи
изображений
Галерея Funcy Box (подробную инструкцию по установке плагина
и исходники можно найти здесь http://ruseller.com/lessons.php?
id=238&rub32)
Общий вид
При нажатии
на картинку
jQuery UI.
jQuery UI (User intarface)— библиотека JavaScript с

открытым исходным кодом для создания насыщенного
пользовательского интерфейса в веб-приложениях,
часть проекта jQuery. Построена поверх главной
библиотеки jQuery и предоставляет разработчику
упрощенный доступ к её функциям взаимодействия,
анимации и эффектов, а также набор виджетов.
jQuery UI. Datapicker
Datepicker — віджет для вибору дати або діапазону дат
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
jQuery UI. Tabs
Tabs — вкладки
jQuery UI. Tabs
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Название 1 вкладки</a></li>
<li><a href="#tabs-2"> Название 2вкладки </a></li>
<li><a href="#tabs-3"> Название 3 вкладки </a></li>
</ul>
<div id="tabs-1">
<p> ест первой вкладки</p>
</div>
<div id="tabs-2">
<p> Текст 2 вкладки.</p>
</div>
<div id="tabs-3">
<p> Текст 3 вкладки</p>
</div>
</div>
</body>
</html>
jQuery UI. Accordion
Accordion — виджет «Аккордеон»
jQuery UI. Accordion
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - Default functionality</title>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Секция 1</h3>
<div>
<p>
текст
</p>
</div>
<h3> Секция 2</h3>
<div>
<p>
текст
</p>
</div>
</div>
</body>
</html>
Landing Page
LANDING PAGE - веб-страница, построенная определенным образом,

основной задачей которой является сбор контактных данных целевой
аудитории.
Landing Page также часто называют одностраничником. Так как вся

информация и все действия осуществляются с помощью одной страницы.
Особенности Landing Page:
•только одна, хорошо запланированная цель: покупка товара, заполнение

формы, скачивание ссылка.
•призыв к действию (call to action), напр. Заполнить форму, Купить
•простой дизайн
•короткие и связные тексты, написанные на языке выгоды, отстуствие
отвлекающих элементов
•отсутствие классического меню.
Landing Page. Шаблон
Landing Page. Пример
Landing Page. Перемещение по странице
Когда на странице сайта расположено большое количество
контента пользователь ознакомившись с ним и промотав страницу до
определенного момента или до самого низа, часто начинает скролить ее
верх, чтобы увидеть навигационные ссылки расположенные в верхней
части страницы и\или произвести какие-то действия.
Чтобы добавить удобства пользователям и в целом улучшить

юзабилити своего сайта лучше всего использовать для сайта кнопку вверх,
нажав на которую пользователь автоматически перенаправляется в
верхнюю часть страницы.
Landing Page. Кнопка наверх с помощью jQuery
Кнопка реализована достаточно просто. Для ее функционирования
понадобится библиотека jQuery, небольшой скрипт содержащий
события jQuery, определенные стили и тег DIV содержащий сам текст и
необходимый ID.
Представленный ниже код вам необходимо вставить переде
тегом </head> на всех страницах вашего сайта. Если библиотека jQuery
уже подключена к вашему сайту, то первую строчку добавлять не
нужно.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
Landing Page. Кнопка наверх.
Чтобы придать красивый внешний вид кнопке необходимо
добавить следующие стили. Их лучше всего добавить в файл стилей
вашего сайта.
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступ кнопки от
нижнего края страницы*/
right:10px; Для вызова кнопки добавьте
cursor:pointer; следующий HTML код перед тегом
display:none; </body>.
color:#333;
<DIV ID = "toTop" > ^ Наверх </ DIV >
font-family:verdana;
font-size:11px;
}
Web-страницы.
PHP+MySQL
Обработка событий
Динамика на веб-страницах реализована при помощи
скриптов, которые выполняются на сервере.
Работает это следующим образом:
1. Браузер запрашивает у сервера документ;

2. Сервер определяет, что документ является скриптом и
запускает его на выполнение;
3. Скрипт выполняется (генерирует html страницу);
4. Сервер отправляет сгенерированную страницу браузеру.
Существует несколько языков программирования, на которых могут

писать скрипты, которые генерируют "динамические" страницы.
Самые распространенные из них:
PHP, ASP, ASP.NET, Perl, C/C++, Java, Python, Ruby, NodeJS

Схема работы без и с PHP
Статические HTML-страницы Динамические страницы (с PHP кодом)

Основы PHP
РНР выполняется на сервере. Браузер посылает серверу запрос на
страницу с php кодом. Сервер отдает эту страницу на исполнение
интерпретатору PHP, интерпретатор генерирует HTML код, отдает серверу,
а сервер посылает клиенту.
Никакого РНР кода в браузер не попадает (это важно! Это значит, что
увидеть исходный код PHP скрипта невозможно!). Единственный
способ отправить что-то скрипту - это кликнуть по ссылке или нажать на
кнопку в форме.
<? скрипт ; ?>
либо
<?php скрипт ; ?>

// - не выполняются команды от данных символов до конца
строки;
/* комментарий */ - не воспринимаются команды между данными
символами независимо от количества строк комментария;
Что необходимо
• Apache HTTP-сервер
необходим для обработки запросов от браузера и передачи на
исполнение php-скриптов (т.к. браузер не выполняет php-
скрипт).
• Интерпретатор PHP
выполнение php-скрипта
• MySQL (необязательно)
если собираемся использовать Базу данных (или можно сохранять
данные в файл)
!Чтобы не устанавливать всё отдельно можно

воспользоваться Джентльменским набором Web-
разработчика
(«Д.н.w.р», читается «Денвер»)
www.denwer.ru
Денвер
Локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и
программная оболочка, используемые Web-
разработчиками для разработки сайтов на «домашней»
(локальной) Windows-машине без необходимости выхода
в Интернет.
По умолчанию Денвер устанавливается в папку

С:/WebServers
Для дальнейшей работы необходимо создать в папке home папку с

вашим доменным именем, и в ней папку www.
Например, если доменное имя praktika.ru, то

С:/WebServers/home/praktika.ru/www
Далее скопировать все ваши файлы с эту папку, переименовать главный
файл в index.html и запустить Денвер (файл Run.exe в папке denwer)
PHP в действии
Затем открываем браузер и переходим по адресу praktika.ru.
Должен открыться Ваш сайт (т.к. этот запрос обрабатывает Денвер)
Пока вы увидите просто ваши HTML-страницы
Для того, чтобы сообщить серверу о том, что надо произвести

обработку PHP-кода, необходимо использовать следующий синтаксис
при добавлении PHP в HTML-документ:
<?php ...здесь идет PHP-код ?>
Открытие блока PHP-кода обозначается как "<?php", а закрытие - "?>".

Теперь попробуйте вставить в любое место код следующим образом:
<?php echo "Это <b>PHP</b> в действии"; ?>
А потом можете просмотреть в браузере исходный текст полученной страницы.

Никаких тегов PHP там нет! Только текст Это <b>PHP</b> в действии.
Потому, что PHP исполняется на сервере!

Форма HTML
Форма — это инструмент, с помощью
которого HTML-документ может
послать некоторую информацию
скрипту, где информация будет
некоторым образом обработана.
Форма открывается тэгом <FORM> и заканчивается тэгом </FORM>.

Для того, чтобы запустить процесс передачи данных из формы обработчику,
нужен какой-то орган управления. Создать такой орган управления очень
просто:
<input type=“submit” value=“Отправить”>
браузер нарисует на экране кнопку с надписью Отправить , при нажатии на

которую все имеющиеся в форме данные будут переданы обработчику,
определенному в метке <FORM action=“”>.
Пример формы
И так создадим простейшую форму:
<form name="form1" method="post" action="test.php"> (начало формы)

<p> Имя: <input type="text" name="sirname"> (поле имени)</p>
<p> Ваш Email: <input type="text" name="email"></p>
<p> Сообщение
<textarea name="message"></textarea> (поле сообщения)
</p>
<p>
<input type="submit" name="send" value="Отправить"> (кнопка отправки)
</p>
</form> (конец формы)
! В свойстве action тега Form указывается файл скрипта имя_файла.php

Передача данных на сервер
Тэг <form>, имеющий парный завершающий тэг </form>, собственно и
задает форму. Его атрибуты - оба необязательные:
• action - указывает URL (полный или относительный), на который будет

отправлена форма. Отправка формы - это такой же запрос к серверу, как и
все остальные (как я уже описал выше). Если этот атрибут не указать -
форма отправляется на текущий документ, то есть "сама на себя".
• method - способ отправки формы. Их два:
GET - отправка данных формы в адресной строке. Вы могли заметить

на различных сайтах присутствие в конце URL символа "?" и следующих
за ним данных в формате параметр=значение. Здесь "параметр"
соответствует значению атрибута name элементов формы (см. ниже про
тэг <input>).
POST - данные формы отправляются в теле запроса. Если не совсем

понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро
мы к этому вопросу вернемся.
Передача данных методом GET
GET - это название запроса который отправляется на сервер скрипту с
помощью браузера открыто, через URL, адресную строку.
Если в адресной строке вы увидели знак амперсанды (&) и знак вопрос (?),
можно считать, что этот узел работает на PHP, и ему в данный момент
отправлены переменные и их значения.
Выглядеть это может примерно так:
http://lphp.ru/index.php?page=4&id_artpage=43
http:// - префикс основного протокола передачи данных в web (HTTP)

lphp.ru - домен в котором находится сервер
index.php - имя файла, который будет обрабатывать запрос, то есть кому
собственно отправлен GET-запрос
? - разделитель, после которого перечисляются переменные со значениями,
которые нужны скрипту обработчику для формирования ответной страницы
page - переменная или имя переменной
= - оператор присваивает значения переменной
4 - значение переменной
& - разделитель в строке запроса, между парами
(переменная=значение&переменная=значение) и т.д.
Передача данных методом POST
Главное отличия метода POST от метода GET это то, что
он скрывает все передаваемые им переменные и их
значения, в своём теле.
При передачи методом POST значения помещаются на
сервере в глобальный массив $_POST[‘имя элемента’].
При передачи методом GET в глобальный массив

$_GET[‘имя элемента’].
где имя элемента указано в атрибуте name
соответствующего элемента формы,
например,
<input type=“text” name="sirname">

или
<textarea name="message"></textarea>
Передача значений
$_POST[‘sirname’]
$_POST[‘email’]
$_POST[‘message’]
Немного о языке PHP
echo - выводит одну или более строк
$имя_переменной = значение; //определение переменной
Примеры использования echo

<?php
echo "Привет мир!";
echo "Это займет
несколько строк. Переводы строки тоже
выводятся";
// с echo можно использовать переменные ...

$foo = "foobar";
$bar = "barbaz";
echo "foo - это $foo"; // foo - это foobar
// с echo можно выводить значение глобальных массивов

echo $_POST[‘name’];
?>
Обработка переданных значений
А теперь – создаем файл test.php и пишем скрипт:
<?
echo "<h1>Привет, <b>".$_POST['sirname']."</b></h1>!";
echo "Email:<b>".$_POST['email']."</b>";
echo "Сообщение: ".$_POST['message'];
?>
Заполняем форму и смотрим результат.

Должны вывестись заполненные в форме данные на
странице после обработки скрипта.
Хранение данных
Хранилище
обработанных данных
Текстовый файл База данных

(.txt) (MySQL)
• простота использования • больше возможностей
• не зависит от подключения к • хранение больших данных
базе данных • возможность сортировки
• ограниченный функционал • нагрузка на сервер

Запись в файл на php
<?php
/* Принимаем данные из формы */
$sirname = $_POST["sirname"];
$email = $_POST["email"];
$text_message = $_POST["message"];
// Открываем файл для записи
$file = fopen ("base.txt","a+");
if ( !$file )
{
echo("Ошибка открытия файла");
}
else
{
fputs ( $file, $sirname.“\r\n"); // Запись имени в файл
fputs ( $file, $email.“\r\n"); // Запись еmail в файл
fputs ( $file, $text_message.“\r\n"); // Запись текста сообщения в файл
fputs ( $file, $text_message.“\r\n");
}
fclose ($file);
header("Location: ".$_SERVER["HTTP_REFERER"]); // Делаем редирект обратно
?>
Чтение из файла на php
<?php
/* Отображаем комментарии на сайте */
$file = fopen("base.txt","r"); // Открываем файл для чтения
while ($i<100) {
if(!file)
{
echo("Ошибка открытия файла");
}
else
{
$buff = fgets ($file); // Чтение одной строки из файла base.txt
print $buff;
print "<br/>";
}
$i++;
}
fclose($file);
?>
Использование БД Mysql
1. Создаём базу данных с использованием утилиты
phpmyadmin (набираем в браузере localhost и выбираем
phpmyadmin)
2. В созданной базе данных создаём таблицу (для этого
нужно указать имя таблицы, количество полей(столбцов)
и тип каждого поля).
3. Подключаемся к базе данных в php файле:
<?php
$db=mysql_connect("localhost", "root","");
mysql_select_db("praktika", $db);
?>
4. Записываем данные, введённые в форму
5. Отображаем (выбираем) данные из базы данных

Как записать данные в MySQL
Структурированный язык запросов (Structured Query
Language) – сокращённо SQL:
Есть четыре основных типа запросов данных в SQL:
SELECT – выбрать строки из таблиц;

INSERT – добавить строки в таблицу;
UPDATE – изменить строки в таблице;
DELETE – удалить строки в таблице;
Использование запроса SELECT для выборки нужных данных

SELECT column1, column2 FROM table_name;
Использование запроса INSERT для вставки новых данных

INSERT INTO table_name (column1, column2, column3) VALUES (‘data1’, ‘data2’,
‘data3’);
Как записать данные в MySQL
<?php
/* Принимаем данные из формы */
$name = $_POST["sirname"];
$email = $_POST["email"];
$text_message = $_POST["message"];
/* Подключаемся к базе данных */

/* Записывает данные */
$sql = "INSERT INTO message(name, email, message) VALUES
('$name', '$email', '$text_message')";
$result=mysql_query($sql) or die("Ошибка в запросе!".mysql_error());
/* Делаем редирект обратно */

header("Location: ".$_SERVER["HTTP_REFERER"]);
exit;
?>
Как выбрать данные из MySQL
<?php
/* Подключаемся к базе данных */
/* Выбираем данные */
$sql="SELECT name, email, message FROM message";
$result=mysql_query($sql);
while ($line=mysql_fetch_row($result)) {
echo "<b>Имя:</b>".$line[0]."<br>";
echo "<b>Email:</b>".$line[1]."<br>";
echo "<b>Сообщение:</b>".$line[2]."<br>";
}
?>
Загрузка файлов на сервер
Приложение для загрузки файлов на сервер представляет собой HTML-
форму (upload.html) и скрипт upload.php для ее обработки.
Загрузка файла на сервер осуществляется с помощью multipart-формы, в

которой есть поле загрузки файла. В качестве
параметра enctype указывается значение multipart/form-data:
<form action=upload.php method=post enctype=multipart/form-

data>
<input type=file name=uploadfile>
<input type=submit value=Загрузить></form>
Обработка multipart-форм
Как же PHP обрабатывает multipart-формы? Получив файл, он сохраняет его
во временном каталоге upload_tmp_dir, имя файла выбирается случайным
образом. Затем он создает четыре переменных суперглобального
массива $_FILES. Этот массив содержит информацию о загруженном файле.
Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание,
что здесь предполагается использование имени uploadfile для поля выбора файла, в
соответствии с приведенной выше multipart-форме. Разумеется, имя поля может быть
любым.
•$_FILES['uploadfile']['name'] - имя файла до его отправки на сервер, например, pict.gif;
•$_FILES['uploadfile']['size'] - размер принятого файла в байтах;
•$_FILES['uploadfile']['type'] - MIME-тип принятого файла (если браузер смог его

определить), например: image/gif, image/png, image/jpeg, text/html;
•$_FILES['uploadfile']['tmp_name'] (так мы назвали поле загрузки файла) - содержит имя

файла во временном каталоге, например: /tmp/phpV3b3qY;
•$_FILES['uploadfile']['error'] - Код ошибки, которая может возникнуть при загрузке файла.

Ключ ['error'] был добавлен в PHP 4.2.0.
Обработка multipart-форм
•После завершения работы скрипта, временный файл будет удален. Это
означает, что мы должны его скопировать в другое место до завершения
работы скрипта. То есть алгоритм работы сценария загрузки файла на
сервер такой:
•Если кнопка "Submit" нажата, то файл уже будет загружен на сервер и его
имя будут в переменной $_FILES['uploadfile']['name']. В этом случае скрипт
должен сразу скопировать файл с именем $_FILES['uploadfile']['tmp_name'] в
какой-нибудь каталог (необходимы права на запись в этот каталог).
Пишем upload.php
<?php
// Каталог, в который мы будем принимать файл:

$uploaddir = './files/';
$uploadfile = $uploaddir.basename($_FILES['uploadfile']['name']);
// Копируем файл из каталога для временного хранения файлов:

if (copy($_FILES['uploadfile']['tmp_name'], $uploadfile))
{
echo "<h3>Файл успешно загружен на сервер</h3>";
}
else { echo "<h3>Ошибка! Не удалось загрузить файл на сервер!</h3>"; exit; }
// Выводим информацию о загруженном файле:

echo "<h3>Информация о загруженном на сервер файле: </h3>";
echo "<p><b>Оригинальное имя загруженного файла: ".$_FILES['uploadfile']['name']."</b></p>";
echo "<p><b>Mime-тип загруженного файла: ".$_FILES['uploadfile']['type']."</b></p>";
echo "<p><b>Размер загруженного файла в байтах: ".$_FILES['uploadfile']['size']."</b></p>";
echo "<p><b>Временное имя файла: ".$_FILES['uploadfile']['tmp_name']."</b></p>";
?>

Web Tehn

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tehn

Uploaded by

Copyright:

Available Formats

Основи вебтехнологій.

Сайти - це набір текстових файлів

Гіпертекст - це текст, в якому міститися

Інформація на веб-сторінці може бути представлена в різних формах:

Інформаційний вміст веб-сторінки зазвичай називається контентом.

Кілька веб-сторінок, об'єднаних загальною темою і дизайном, а також

• дозволяють вибирати інформацію з бази

2000 2014 Март 1995

24 декабря 1999 Декабрь 1997 Январь 1997

Основним форматом подання документів в мережі

Збережемо цей документ, присвоївши йому ім'я *.html

left по лівій границі

• колір гіперпосилань Колір

LINK посилання, на яких не були

<HR WIDTH="60%" SIZE="3" ALIGN="right">

PNG (Portable Network Graphic)

top bottom middl

якщо </A> не впритул <IMG

посилання на другий сервер: не буде

вийти з поточного каталогу

index.htm, index.html, default.asp, …

• на конкретну сторінку сайту (URL)

• на файл для скачування

<A NAME="up"></A> перехід на мітку

Приклад такої структури може виглядати так:

За допомогою мови HTML

Таблична. У табличній верстці можна створювати

Блокова. Переваги блочної верстки полягає в тому, що

• поділ опису логічної структури веб-сторінки (яке проводиться за

Подключення файлу зі стилем:

Селектори як правило CSS можуть бути:

• селекторами псевдокласів (a:hover…)

З даної розмітки видно лише елементи

margin: 0 auto; // задає відступ зверху / знизу правою / лівою

Додаткові властивості можна ознайомитись за наступними

В файле стилей нужному селектору указать следующие свойства:

Вот пример установки нескольких картинок для фона:

В файле стилей нужному селектору указать следующие свойства:

Границы могут быть не только идеально круглыми - можно указывать два

span { box-shadow: 0.2em 0.2em 5px #CCC; }

Результат можно увидеть на картинке:

Пример использования text-shadow:

• Добавление простой анимации

Подробно ознакомиться можно здесь: http://alt-f4.ru/article/new-in-css3

Мова JavaScript надає засоби для вирішення багатьох

Вставка коду в HTML-документ в контейнерах

У Javascript сторінка представлена у вигляді об'єктної

Приклад створення розкриваючого меню:

При натисканні по “menu 1”:

jQuery — бібліотека JavaScript, що

Завантажувати jQuery бажано з http://jquery.com/download/

Після того як ви завантажили потрібний файл з jQuery, потрібно закачати

Для підключення рекомендую використовуватися підключення від Google

Разберем самый простой слайдер, который можно взять здесь:

•Скачаем файлы слайдера и распакуем их на сервер.

Внутри тега head прописываем

1) Чтобы добавить(удалить) страничку слайдера добавляем(удаляем)

3)Изменение текста на слайде

Список параметров, которые можно изменять:

jQuery UI (User intarface)— библиотека JavaScript с

LANDING PAGE - веб-страница, построенная определенным образом,

Landing Page также часто называют одностраничником. Так как вся

Особенности Landing Page: